form表单封装

FormInsertDiy/ListWithAddEditTemplate/AddOrEditFormTemplate.js

-import React from 'react';
-import PropTypes from 'prop-types';
-import ZdyTable from '@/webPublic/one_stop_public/Table';
-import { fetchTemplateByCode }  from '@/webPublic/Services'
-
-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;
-    fetchTemplateByCode(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';
+import { RenderFormByContent } from '../RenderForm'
 
 const CreateForm = props => {
   const {
@@ -12,6 +11,7 @@ const CreateForm = props => {
     content,
     form,
     templateCode,
+    confirmLoading,
   } = props;
 
   return (
@@ -23,8 +23,9 @@ const CreateForm = props => {
       visible={modalVisible}
       onOk={handleAdd}
       onCancel={handleModalVisible}
+      confirmLoading={confirmLoading}
     >
-      <AddOrEditFormTemplate form={form} content={content} code={templateCode} />
+      <RenderFormByContent form={form} content={content} templateCode={templateCode} />
     </Modal>
   );
 };

FormInsertDiy/ListWithAddEditTemplate/index.js

@@ -20,6 +20,8 @@ import {
 } 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])
@@ -61,6 +63,7 @@ class ListWithAddEditTemplate extends React.Component {
         list: [],
         pagination: {},
       },
+      confirmLoading: false,
     };
     this.columns = [];
   }
@@ -68,57 +71,39 @@ class ListWithAddEditTemplate extends React.Component {
   // 渲染值
   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 = {
+    fetchTableHeader(objId).then(headerList => {
+      if (!headerList) return;
+      this.setState({ headerList });
+
+      this.columns = headerList.slice(0, 10).map(item => ({
+        title: item.title,
+        dataIndex: item.name,
+        render: date.includes(item.type) && dateRender,
+      }));
+      const operation = {
         title: '操作',
-        render: (text, record) => {
+        render: (_, record) => {
           return (
             <Fragment>
-              <div>
               <a onClick={this.modify.bind(this, record)}>编辑</a>
               <Divider type="vertical" />
               <a onClick={this.delete.bind(this, record)}>删除</a>
-              </div>
             </Fragment>
           );
         },
       };
-      this.columns.push(opt);
+      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();
     });
   }
@@ -224,7 +209,9 @@ class ListWithAddEditTemplate extends React.Component {
     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({
@@ -295,6 +282,7 @@ class ListWithAddEditTemplate extends React.Component {
       primaryKey,
       formValues,
       searchConfig,
+      confirmLoading,
     } = this.state;
     const { hasExport, form, hasImport, templateCode } = this.props;
 
@@ -306,6 +294,7 @@ class ListWithAddEditTemplate extends React.Component {
       isAdd,
       templateCode,
       modalVisible,
+      confirmLoading,
     };
     return (
       <>

FormInsertDiy/RenderForm/index.js

+import React, { useEffect, useState } from 'react';
+import ZdyTable from '@/webPublic/one_stop_public/Table';
+import styles from './index.less';
+import { fetchTemplateByCode, fetchTableItem } from '@/webPublic/Services';
+
+export default function RenderForm({ get = 'web', isCg = 'yes', form, postData }) {
+  return (
+    <div className={styles.zyd_onestop_style_class}>
+      <ZdyTable get={get} isCg={isCg} postData={postData} form={form} />
+    </div>
+  );
+}
+
+/**
+ * 根据表单code渲染表单
+ * @param {Object} content 表单内容，传入对象
+ * @param {String} templateCode 表单模板
+ */
+export function RenderFormByContent({ content, templateCode, form, get, isCg }) {
+  const [formTemplate, setFormTemplate] = useState();
+  useEffect(
+    () => {
+      fetchTemplateByCode(templateCode).then(res => {
+        if (res) {
+          setFormTemplate(res);
+        }
+      });
+    },
+    [templateCode]
+  );
+
+  return formTemplate ? (
+    <RenderForm
+      get={get}
+      isCg={isCg}
+      postData={{
+        content: JSON.stringify(content),
+        unifiedServicePatternModel: formTemplate,
+      }}
+      form={form}
+    />
+  ) : null;
+}
+
+/**
+ *渲染元数据库中的某条数据
+ * @param {Object} objId 元数据库id
+ * @param {String} dataTypeKey 元数据库表格键
+ * @param {String} dataTypeValue 键对应的值
+ * @param {Function} onLoad 数据加载的回调函数
+ */
+export function RenderFormByObjId({
+  objId,
+  dataTypeKey,
+  dataTypeValue,
+  onLoad,
+  templateCode,
+  form,
+  get,
+  isCg,
+}) {
+  const [content, setContent] = useState({});
+  useEffect(
+    () => {
+      fetchTableItem({ dataObjId: objId, key: dataTypeKey, value: dataTypeValue }).then(res => {
+        setContent(res || {});
+        if (onLoad) {
+          onLoad(res);
+        }
+      });
+    },
+    [objId, dataTypeKey, dataTypeValue]
+  );
+
+  return (
+    <RenderFormByContent get={get} isCg={isCg} content={content} templateCode={templateCode} form={form} />
+  );
+}

FormInsertDiy/SingleDataPageTemplate/index.js

-import React from 'react';
+import React, { useState } from 'react';
 import { Form, Button } from 'antd';
 import Shell from '@/baseComponent/Shell';
-import ZdyTable from '@/webPublic/one_stop_public/Table';
 import { ModalInfo } from '@/baseComponent/Modal';
-import { fetchTableItem, fetchTemplateByCode, addOrEditTableItem } from '@/webPublic/Services';
-import styles from '../index.less';
+import { addOrEditTableItem } from '@/webPublic/Services';
+import { RenderFormByObjId } from '../RenderForm';
+
 // 单一数据页面模板，页面只是显示和操作一条数据
 // 1. 页面显示通过模板id渲染。
 // 2. 页面数据通过元数据表id, key，value 查询和修改。
@@ -14,52 +14,24 @@ import styles from '../index.less';
 // 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;
-    fetchTemplateByCode(templateCode).then(res => {
-      if (res) {
-        this.setState({ formTemplate: res });
-      }
-    });
-
-    fetchTableItem({
-      dataObjId: tableId,
-      key: dataTypeKey,
-      value: dataTypeValue,
-    }).then(res => {
-      this.setState({ formValues: res || {}, isAdd: !!(!res || res.errMsg) });
-    });
-  }
+function SingleDataPageTemplate(props) {
+  const [isAdd, setIsAdd] = useState(false);
 
-  handleSave = () => {
-    const { tableId, form } = this.props;
+  function handleSave() {
+    const { tableId, form } = props;
     const { validateFields } = form;
-    const { isAdd } = this.state;
+
     validateFields((err, values) => {
       if (err) return;
-      addOrEditTableItem({objId:tableId, isAdd, data: values }).then(res => {
+      addOrEditTableItem({ objId: tableId, isAdd, data: values }).then(res => {
         if (res) {
           ModalInfo('保存成功！');
         }
       });
     });
-  };
+  }
 
-  render() {
-    const { formTemplate, formValues } = this.state;
-    const { children, form } = this.props;
+  const { children, form, templateCode, tableId, dataTypeKey, dataTypeValue } = props;
   let ClonedChildren;
   if (children) {
     ClonedChildren = React.cloneElement(React.Children.only(children), {
@@ -70,31 +42,24 @@ export default class ConfigPageTemplate extends React.Component {
   }
 
   return (
-      <>
-        {formTemplate && (
-          <Shell styleShell={{ marginTop: 0 }} >
-            <div className={styles.zyd_onestop_style_class}>
-            <ZdyTable
-              get="web"
-              isCg="yes"
-              postData={{
-                content: JSON.stringify(formValues),
-                unifiedServicePatternModel: formTemplate,
-              }}
-              form={this.props.form}
+    <Shell styleShell={{ marginTop: 0 }}>
+      <RenderFormByObjId
+        objId={tableId}
+        dataTypeKey={dataTypeKey}
+        dataTypeValue={dataTypeValue}
+        templateCode={templateCode}
+        onLoad={res => setIsAdd(!!(!res || res.errMsg))}
+        form={form}
       />
-            </div>
-
       {ClonedChildren || (
         <div style={{ textAlign: 'center', padding: 16 }}>
-                <Button type="primary" shape="round" ghost onClick={this.handleSave}>
+          <Button type="primary" shape="round" ghost onClick={handleSave}>
             保存
           </Button>
         </div>
       )}
     </Shell>
-        )}
-      </>
   );
-  }
 }
+
+export default Form.create()(SingleDataPageTemplate);