增加组件

FormInsertDiy/ListWithAddEditTemplate/AddOrEditFormTemplate.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
+import ZdyTable from '@/webPublic/one_stop_public/Table';
+
+export default class AddOrEditForm extends React.Component {
+  static propTypes = {
+    code: PropTypes.string.isRequired,
+    form: PropTypes.object.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: null,
+    };
+  }
+
+  componentDidMount() {
+    this.queryTemplate();
+  }
+
+  componentDidUpdate(prevProps) {
+
+    if (prevProps.code !== this.props.code) {
+      this.queryTemplate();
+    }
+  }
+
+  queryTemplate = () => {
+    const { code } = this.props;
+    uaaRequest('/UnifiedServicePatternApi/getDetail', { code }).then(res => {
+      if (res) {
+        this.setState({ data: res });
+      }
+    });
+  };
+
+  render() {
+    const { data } = this.state;
+    const { form, content = {} } = this.props;
+    return (
+      data && (
+        <ZdyTable
+          get="web"
+          isCg="yes"
+          postData={{ content: JSON.stringify(content), unifiedServicePatternModel: data }}
+          form={form}
+        />
+      )
+    );
+  }
+}

FormInsertDiy/ListWithAddEditTemplate/AddOrEditModal.js

+import React from 'react';
+import { Modal } from 'antd';
+
+import AddOrEditFormTemplate from './AddOrEditFormTemplate';
+
+const CreateForm = props => {
+  const {
+    modalVisible,
+    handleAdd,
+    isAdd,
+    handleModalVisible,
+    content,
+    form,
+    templateCode,
+  } = props;
+
+  // 通过回调
+  const okHandle = () => {
+    handleAdd({}, isAdd);
+  };
+
+  return (
+    <Modal
+      width="1000px"
+      maskClosable={false}
+      destroyOnClose
+      title={isAdd ? '新增' : '编辑'}
+      visible={modalVisible}
+      onOk={okHandle}
+      onCancel={handleModalVisible}
+    >
+      <AddOrEditFormTemplate form={form} content={content} code={templateCode} />
+    </Modal>
+  );
+};
+
+export default CreateForm;

FormInsertDiy/ListWithAddEditTemplate/index.js

+import React, { Fragment } from 'react';
+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 { getHead, fetchData, deleteItem, add } from './services';
+import AddOrEditModal from './AddOrEditModal';
+
+const getValue = obj =>
+  Object.keys(obj)
+    .map(key => obj[key])
+    .join(',');
+
+class ListWithAddEditTemplate extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      modalVisible: false,
+      formData: null,
+      headerList: [],
+      searchConfig: [],
+      formValues: {},
+      isAdd: false,
+      selectedRows: [],
+      primaryKey: null,
+      showEdit: false,
+      pageData: {
+        list: [],
+        pagination: {},
+      },
+    };
+    this.columns = [];
+  }
+
+  // 渲染值
+  componentDidMount() {
+    const { objId } = this.props;
+    getHead({ dataObjId: objId }, 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.modify.bind(this, record)}>编辑</a>
+                <Divider type="vertical" />
+                <Popconfirm
+                  title="确定删除该数据?"
+                  onConfirm={this.delete.bind(this, record)}
+                  okText="确定"
+                  cancelText="取消"
+                >
+                  <a>删除</a>
+                </Popconfirm>
+              </div>
+            </Fragment>
+          );
+        },
+      };
+      this.columns.push(opt);
+      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 => {
+    const { objId } = this.props;
+    // 找出主键
+    const { primaryKey } = this.state;
+    const Keys = {};
+    Keys[primaryKey] = record[primaryKey];
+    deleteItem({ keys: JSON.stringify(Keys), objId }, () => {
+      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 params = {
+      query: JSON.stringify({ ...formValues, ...filters }),
+      pageNo: pagination.current ? pagination.current : 1,
+      pageSize: pagination.pageSize ? pagination.pageSize : 10,
+      dataObjId: objId,
+    };
+
+    fetchData(params, 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);
+  };
+
+  handleAdd = (fields, isAdd) => {
+    const {
+      objId,
+      form: { validateFields },
+    } = this.props;
+    validateFields((err, values) => {
+      if (err) return;
+      add({ params: values, objId, isAdd, isBase: true }, () => {
+        message.success('操作成功');
+        this.setState({
+          modalVisible: false,
+        });
+        this.getPage();
+      });
+    });
+  };
+
+  handleModalVisible = () => {
+    this.setState({
+      modalVisible: this.state.modalVisible ? false : true,
+      formData: {},
+    });
+  };
+
+  handleSelectRows = rows => {
+    this.setState({
+      selectedRows: rows,
+    });
+  };
+
+  batchDelete = e => {
+    const { selectedRows, formItem, objId } = this.state;
+
+    if (!selectedRows) return;
+    const Keys = formItem.filter(i => i.isPrimaryKey).reduce((acc, i) => {
+      return { ...acc, [i.name]: selectedRows.map(row => row[i.name]).join(',') };
+    });
+
+    deleteItem({ keys: JSON.stringify(Keys), objId }, () => {
+      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,
+    } = this.state;
+    const { hasExport, form, hasImport, templateCode } = this.props;
+
+    const parentMethods = {
+      handleAdd: this.handleAdd,
+      handleModalVisible: this.handleModalVisible,
+      content: formData,
+      form,
+      isAdd,
+      templateCode,
+    };
+    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>
+              <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}
+              />
+            </Shell>
+          </Fragment>
+        )}
+        <AddOrEditModal {...parentMethods} modalVisible={modalVisible} />
+      </>
+    );
+  }
+}
+
+export default Form.create()(ListWithAddEditTemplate);

FormInsertDiy/ListWithAddEditTemplate/services.js

+import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
+
+export const getHead = (payload, callback) => {
+  uaaRequest('/DataColumnApi/getHeaderList', payload).then(res => {
+    if (!res) return;
+    if (callback) callback(res);
+  });
+};
+
+export const fetchData = (payload, callback) => {
+  uaaRequest('/DataObjApi/getFormDataPage', payload).then(res => {
+    if (!res) return;
+    if (callback) callback(res);
+  });
+};
+
+export const deleteItem = (payload, callback) => {
+  uaaRequest('/DataObjApi/deleteFormData', payload).then(res => {
+    if (callback) callback(res);
+  });
+};
+
+export const getDetail = (payload, callback) => {
+  uaaRequest('/DataObjApi/getFormData', payload).then(res => {
+    if (callback) callback(res);
+  });
+};
+
+export const add = (payload, callback) => {
+  uaaRequest('/DataObjApi/addFormData', {
+    data: JSON.stringify(payload.params),
+    isAdd: payload.isAdd,
+    objId: payload.objId,
+    isBase: payload.isBase,
+  }).then(res => {
+    if (callback) callback(res);
+  });
+};

FormInsertDiy/SingleDataPageTemplate/index.js

+import React from 'react';
+import { Form, Button } from 'antd';
+import Shell from '@/baseComponent/Shell';
+import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
+import ZdyTable from '@/webPublic/one_stop_public/Table';
+import { ModalInfo } from '@/baseComponent/Modal';
+
+// 单一数据页面模板，页面只是显示和操作一条数据
+// 1. 页面显示通过模板id渲染。
+// 2. 页面数据通过元数据表id, key，value 查询和修改。
+// templateCode, 页面模板id
+// tableId, 元数据列表id
+// dataTypeKey, 元数据表格中查找数据的key
+// dataTypeValue, 元数据表格中查找数据的value
+// children， 可以传children，但children不能是数组(不能传属性)，children里可以自定义其他组件。
+
+@Form.create()
+export default class ConfigPageTemplate extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formTemplate: null,
+      formValues: {},
+      // 判断是新增还是添加
+      isAdd: false,
+    };
+  }
+
+  componentDidMount() {
+    const { templateCode, tableId, dataTypeKey, dataTypeValue } = this.props;
+    uaaRequest('/UnifiedServicePatternApi/getDetail', { code: templateCode }).then(res => {
+      if (res) {
+        this.setState({ formTemplate: res });
+      }
+    });
+
+    uaaRequest('/DataObjApi/getFormData', {
+      dataObjId: tableId,
+      key: dataTypeKey,
+      value: dataTypeValue,
+      isBase: true,
+    }).then(res => {
+      this.setState({ formValues: res || {}, isAdd: !!(!res || res.errMsg) });
+    });
+  }
+
+  handleSave = () => {
+    const { tableId, form } = this.props;
+    const { validateFields } = form;
+    const { isAdd } = this.state;
+    validateFields((err, values) => {
+      if (err) return;
+      uaaRequest('/DataObjApi/addFormData', {
+        objId: tableId,
+        isAdd,
+        isBase: true,
+        data: JSON.stringify(values),
+      }).then(res => {
+        if (res) {
+          ModalInfo('保存成功！');
+        }
+      });
+    });
+  };
+
+  render() {
+    const { formTemplate, formValues } = this.state;
+    const { children, form } = this.props;
+    let ClonedChildren;
+    if (children) {
+      ClonedChildren = React.cloneElement(React.Children.only(children), {
+        form,
+        isAdd,
+        uaaRequest,
+        url: '/DataObjApi/addFormData',
+      });
+    }
+
+    return (
+      <>
+        {formTemplate && (
+          <Shell styleShell={{ marginTop: 0 }}>
+            <ZdyTable
+              get="web"
+              isCg='yes'
+              postData={{
+                content: JSON.stringify(formValues),
+                unifiedServicePatternModel: formTemplate,
+              }}
+              form={this.props.form}
+            />
+            {ClonedChildren || (
+              <div style={{ textAlign: 'center', padding: 16 }}>
+                <Button type="primary" shape="round" ghost onClick={this.handleSave}>
+                  保存
+                </Button>
+              </div>
+            )}
+          </Shell>
+        )}
+      </>
+    );
+  }
+}