index.js

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Divider, message, Form, Popconfirm } from 'antd';
import moment from 'moment';
import router from 'umi/router';
import ExportInfo from '../Export/index';
import { text, number, date, getFormArrayConfig } from '../config/index';
import ButtonDiy from '@/baseComponent/ButtonDiy';
import Shell from '../Shell';
import Edit from '../Edit/index';
import ImportUtil from '../ImportUtil/ImportUtil';
import SearchDom from '@/highOrderComponent/SearchDom';
import StandardTable from '@/components/StandardTable';
import AddOrEditModal from './AddOrEditModal';
import {
  fetchTableHeader,
  fetchTableData,
  addOrEditTableItem,
  deleteTableItem,
} from '@/webPublic/Services';
import { ModalConfirm } from '@/baseComponent/Modal';

const dateRender = val => val && moment(val).format('YYYY-MM-DD HH:mm:ss');

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

/**
 * 展示list数据，
 * 根据元数据id显示元数据表格，根据模板id新增或编辑某条数据
 */
class ListWithAddEditTemplate extends React.Component {
  static propTypes = {
    objId: PropTypes.string.isRequired, // 元数据表id
    templateCode: PropTypes.string.isRequired, // 表单模板id
    filters: PropTypes.object, // 请求元数据表格时额外的过滤条件
    hasImport: PropTypes.bool, // 是否有导入操作按钮，默认false
    hasExport: PropTypes.bool, // 是否有导出按钮，默认false
  };

  static defaultProps = {
    filters: {},
    hasImport: false,
    hasExport: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      modalVisible: false,
      formData: null, // 编辑某行数据时表单的数据
      headerList: [], // 表头的数据
      searchConfig: [],
      formValues: {}, // 搜索区域的数据
      isAdd: false, // 是新增还是编辑
      selectedRows: [],
      primaryKey: null,
      showEdit: false, // 是否显示编辑区域
      pageData: {
        list: [],
        pagination: {},
      },
      confirmLoading: false,
    };
    this.columns = [];
  }

  // 渲染值
  componentDidMount() {
    const { objId } = this.props;
    fetchTableHeader(objId).then(headerList => {
      if (!headerList) return;
      this.setState({ headerList });

      this.columns = headerList
        .filter(i => !i.isHidden)
        .slice(0, 10)
        .map(item => ({
          title: item.title,
          dataIndex: item.name,
          render: date.includes(item.type) && dateRender,
        }));
      const operation = {
        title: '操作',
        render: (_, record) => {
          return (
            <Fragment>
              <a onClick={this.modify.bind(this, record)}>编辑</a>
              <Divider type="vertical" />
              <a onClick={this.delete.bind(this, record)}>删除</a>
            </Fragment>
          );
        },
      };
      this.columns.push(operation);

      const primaryKey = (headerList.find(i => i.isPrimaryKey) || {}).name;

      this.setState({ primaryKey });

      const searchConfig = headerList.filter(i => i.isShowQuery).map(item => {
        const sear = getFormArrayConfig([item]);
        const { required, placeHolder, ...config } = sear[0];
        return config;
      });
      this.setState({ searchConfig, primaryKey });
      this.getPage();
    });
  }

  // 新增按钮事件
  add = () => {
    const { headerList } = this.state;
    const showEdit = headerList.length >= 10;
    this.setState({
      modalVisible: !showEdit,
      formData: {},
      isAdd: true,
      showEdit,
    });
  };

  // 修改按钮事件
  modify = record => {
    const recordTemp = { ...record, update_time: Date.now() };
    const { headerList } = this.state;
    const showEdit = headerList.length >= 10;
    // 把record里明文key改成转换后的key，用于在模板表单中回显
    const headerMap = headerList.reduce((acc, header) => ({ ...acc, [header.name]: header }), {});
    const formData = Object.keys(recordTemp).reduce(
      (acc, key) => ({ ...acc, [headerMap[key].base52]: recordTemp[key] }),
      {}
    );
    this.setState({
      formData,
      modalVisible: !showEdit,
      isAdd: false,
      showEdit,
    });
  };

  delete = record => {
    ModalConfirm('确定删除？', {
      onOk: () => {
        const { objId } = this.props;
        // 找出主键
        const { primaryKey } = this.state;
        const Keys = {};

        Keys[primaryKey] = record[primaryKey];
        deleteTableItem(objId, primaryKey, record[primaryKey]).then(res => {
          this.getPage();
        });
      },
    });
  };

  changeFormData = (value, key) => {
    this.setState(({ formData }) => ({ formData: { ...formData, [key]: value } }));
  };

  getPage = () => {
    const { objId, filters = {} } = this.props;
    const {
      formValues,
      pageData: { pagination },
    } = this.state;
    const query = { ...formValues, ...filters };
    const pageNo = pagination.current ? pagination.current : 1;
    const pageSize = pagination.pageSize ? pagination.pageSize : 10;

    fetchTableData({ dataObjId: objId, query, pageSize, pageNo }).then(res => {
      if (!res.rows) {
        console.log('分页接口rows返回null报错');
      }
      this.setState({
        pageData: {
          list: res.rows,
          pagination: {
            current: res.pageNo,
            pageSize: res.pageSize,
            total: Number(res.total),
          },
        },
      });
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    this.setState(
      ({ pageData }) => ({
        pageData: { ...pageData, pagination },
      }),
      this.getPage
    );
  };

  handleAdd = () => {
    const {
      objId,
      form: { validateFields },
    } = this.props;
    const { isAdd } = this.state;
    validateFields((err, values) => {
      if (err) return;
      this.setState({ confirmLoading: true });
      addOrEditTableItem({ objId, data: values, isAdd }).then(res => {
        this.setState({ confirmLoading: false });
        if (res === true) {
          message.success('操作成功');
          this.setState({
            modalVisible: false,
          });
          this.getPage();
        } else {
          message.error('操作失败');
        }
      });
    });
  };

  handleModalVisible = () => {
    this.setState({
      modalVisible: this.state.modalVisible ? false : true,
      formData: {},
    });
  };

  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };

  batchDelete = e => {
    const { selectedRows, primaryKey } = this.state;
    const { objId } = this.props;

    if (!selectedRows) return;

    ModalConfirm('确定删除？', {
      onOk: () => {
        deleteTableItem(objId, primaryKey, selectedRows.map(row => row[primaryKey])).then(res => {
          this.setState({
            selectedRows: [],
          });
          this.getPage();
        });
      },
    });
  };

  goBack = () => {
    router.goBack();
  };

  formStateChange = (value, key) => {
    this.setState(({ formValues }) => ({ formValues: { ...formValues, [key]: value } }));
  };

  resetFormValues = () => {
    this.setState({
      formValues: {},
    });
  };

  render() {
    const {
      modalVisible,
      selectedRows,
      isAdd,
      objId,
      pageData,
      showEdit,
      formData,
      primaryKey,
      formValues,
      searchConfig,
      confirmLoading,
    } = this.state;
    const { hasExport, form, hasImport, templateCode } = this.props;

    const addOrEditModalProps = {
      handleAdd: this.handleAdd,
      handleModalVisible: this.handleModalVisible,
      content: formData,
      form,
      isAdd,
      templateCode,
      modalVisible,
      confirmLoading,
    };
    return (
      <>
        {showEdit ? (
          <Edit
            id={objId}
            recordId={formData[primaryKey]}
            recordKey={primaryKey}
            returnThis={() => {
              this.setState({
                showEdit: false,
              });
              this.getPage();
            }}
          />
        ) : (
          <Fragment>
            {searchConfig.length > 0 ? (
              <SearchDom
                formStateChange={this.formStateChange}
                formValues={formValues}
                getPage={this.getPage}
                resetFormValues={this.resetFormValues}
                config={{ condition: searchConfig, fromTab: true }}
              />
            ) : null}
            <Shell styleShell={{ marginTop: searchConfig && searchConfig.length ? 16 : 0 }}>
              <div style={{ paddingLeft: '10px', marginTop: '20px' }}>
                <ButtonDiy icon="plus" className="primaryBlue" handleClick={this.add} name="新建" />
                {hasImport && <ImportUtil objId={objId} />}
                {hasExport && <ExportInfo objId={objId} />}
                <ButtonDiy handleClick={this.batchDelete} name="批量删除" />
              </div>
              <StandardTable
                rowKey="id"
                data={pageData}
                columns={this.columns}
                selectedRows={selectedRows}
                onSelectRow={this.handleSelectRows}
                onChange={this.handleStandardTableChange}
                scroll={{ x: 1200 }}
              />
            </Shell>
          </Fragment>
        )}
        <AddOrEditModal {...addOrEditModalProps} />
      </>
    );
  }
}

export default Form.create()(ListWithAddEditTemplate);