添加组件

FormInsertDiy/AuditListPage/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 {
+  fetchTableHeader,
+  fetchTableData,
+  addOrEditTableItem,
+  deleteTableItem,
+} from '@/webPublic/Services';
+
+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 = {
+      formData: null, // 编辑某行数据时表单的数据
+      headerList: [], // 表头的数据
+      searchConfig: [],
+      formValues: {}, // 搜索区域的数据
+      isAdd: false, // 是新增还是编辑
+      selectedRows: [],
+      primaryKey: null,
+      showEdit: false, // 是否显示编辑区域
+      pageData: {
+        list: [],
+        pagination: {},
+      },
+    };
+    this.columns = [];
+  }
+
+  handleAudit = () => {};
+
+  // 渲染值
+  componentDidMount() {
+    const { objId } = this.props;
+    fetchTableHeader(objId).then(datas => {
+      if (!datas) return;
+      this.setState({ headerList: datas });
+      let i = 0;
+      for (let t in datas) {
+        if (i < 10) {
+          let column = {};
+          column.title = datas[t].title;
+          column.dataIndex = datas[t].name;
+          if (date.includes(datas[t].type)) {
+            column.render = val => val && moment(val).format('YYYY-MM-DD HH:mm:ss');
+          }
+          this.columns.push(column);
+          i++;
+        }
+        if (datas[t].isPrimaryKey) {
+          this.setState({
+            primaryKey: datas[t].name,
+          });
+        }
+      }
+      let searchConfig = [];
+      for (let item of datas) {
+        if (item.isShowQuery) {
+          let sear = getFormArrayConfig([item]);
+          if (!Array.isArray(sear)) {
+            return false;
+          }
+          delete sear[0].required;
+          delete sear[0].placeHolder;
+          searchConfig.push(sear[0]);
+        }
+      }
+      this.setState({
+        searchConfig,
+      });
+      let opt = {
+        title: '操作',
+        render: (text, record) => {
+          return (
+            <Fragment>
+              <div>
+                <a onClick={this.handleAudit.bind(this, record)}>审核</a>
+              </div>
+            </Fragment>
+          );
+        },
+      };
+      this.columns.push(opt);
+      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) => {
+    const filters = Object.keys(filtersArg).reduce((obj, key) => {
+      const newObj = { ...obj };
+      newObj[key] = getValue(filtersArg[key]);
+      return newObj;
+    }, {});
+
+    const params = {
+      pageNo: pagination.current,
+      pageSize: pagination.pageSize,
+      ...filters,
+    };
+    if (sorter.field) {
+      params.sorter = `${sorter.field}_${sorter.order}`;
+    }
+    this.getPage(params);
+  };
+
+  handleModalVisible = () => {
+    this.setState({
+      modalVisible: this.state.modalVisible ? false : true,
+      formData: {},
+    });
+  };
+
+  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,
+    } = this.state;
+    const { hasExport, form, hasImport, templateCode } = this.props;
+
+    const addOrEditModalProps = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+      content: formData,
+      form,
+      isAdd,
+      templateCode,
+      modalVisible,
+    };
+    return (
+      <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' }}>
+            {hasImport && <ImportUtil objId={objId} />}
+            {hasExport && <ExportInfo objId={objId} />}
+          </div>
+          <StandardTable
+            rowKey="id"
+            data={pageData}
+            columns={this.columns}
+            selectedRows={selectedRows}
+            onSelectRow={this.handleSelectRows}
+            onChange={this.handleStandardTableChange}
+            scroll={{ x: 1200 }}
+          />
+        </Shell>
+      </Fragment>
+    );
+  }
+}
+
+export default Form.create()(ListWithAddEditTemplate);

FormInsertDiy/ListWithAddEditTemplate/index.js

@@ -328,7 +328,7 @@ class ListWithAddEditTemplate extends React.Component {
                 config={{ condition: searchConfig, fromTab: true }}
               />
             ) : null}
-            <Shell>
+            <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} />}
@@ -342,6 +342,7 @@ class ListWithAddEditTemplate extends React.Component {
                 selectedRows={selectedRows}
                 onSelectRow={this.handleSelectRows}
                 onChange={this.handleStandardTableChange}
+                scroll={{x: 1200}}
               />
             </Shell>
           </Fragment>