增加组件

FormInsertDiy/SingleDataPageInFirstRow/index.js

+import React, { useState, useEffect } from 'react';
+import { Form, Button } from 'antd';
+import Shell from '@/baseComponent/Shell';
+import { ModalInfo } from '@/baseComponent/Modal';
+import { addOrEditTableItem, fetchTableData, fetchTableHeader, } from '@/webPublic/Services';
+import { preHandle } from '@/webPublic/one_stop_public/utils/myutils';
+import { getOneStopConfig } from '@/baseComponent/utils';
+import { RenderFormByContent } from '../RenderForm';
+
+// 直接获取的表格数据的字段是明文，找换成base转换后的字段
+function getBaseEncodedData(rowData, tableHeader) {
+  // {name: base52}
+  const nameBaseMap = tableHeader.reduce((acc, header) => {
+    return {...acc, [header.name] : header.base52};
+  }, {});
+  // 明文字段转换成base后的字段, eg. {process_status: 1} => {JbZWZHoGRsA: 1}
+  return Object.keys(rowData).reduce((acc, name) => {
+    const base52 = nameBaseMap[name];
+    if(!base52) return acc;
+    return {...acc, [base52]: rowData[name] };
+  }, {});
+}
+
+// 配置页面，配置数据在元数据表格的第一行
+// 1. 页面显示通过模板id渲染。
+// 2. 页面数据通过元数据表id, 查询和修改。
+// templateCode, 页面模板id
+// tableId, 元数据列表id
+// children， 可以传children，但children不能是数组(不能传属性)，children里可以自定义其他组件。
+
+function SingleDataPageInFirstRow(props) {
+  const { children, form, templateCode: templateCodeFromProps, dataObjId: dataObjIdFromProps, location: {pathname} } = props;
+  // templateCode 和 dataObjId 可以通过组件属性或者根据路径配置获取
+  const templateCodeFromPathname = getOneStopConfig(`${pathname}-templateCode`);
+  const dataObjIdFromPathname = getOneStopConfig(`${pathname}-dataObjId`);
+
+  const templateCode = templateCodeFromPathname || templateCodeFromProps;
+  const dataObjId = dataObjIdFromPathname || dataObjIdFromProps;
+
+  if (!templateCode || !dataObjId) {
+    console.warn("模板code或者元数据表格id为空，templateCode: " + templateCode + ", dataObjId: " + dataObjId);
+    return null;
+  }
+
+  const [isAdd, setIsAdd] = useState(false);
+  const [content, setContent] = useState({});
+
+  useEffect(
+    () => {
+      fetchTableHeader(dataObjId).then(tableHeader => {
+        if (!tableHeader) return;
+        fetchTableData({ pageNo: 1, pageSize: 10, isBase: true, dataObjId, query: {} }).then(res => {
+          const firstRowData = (res && res.rows && res.rows[0]) || {};
+          setContent(getBaseEncodedData(firstRowData, tableHeader));
+          setIsAdd(!!(!res || res.errMsg))
+        });
+      });
+    },
+    [dataObjId]
+  );
+
+  function handleSave() {
+    const { validateFields } = form;
+
+    validateFields((err, values) => {
+      if (err) return;
+      // console.log(JSON.stringify(values.JjvkRobXWTE), JSON.stringify(values.JjvkwLqcsyY));
+      preHandle(values);
+      // console.log(JSON.stringify(values.JjvkRobXWTE));
+      addOrEditTableItem({ objId: dataObjId, isAdd, data: values }).then(res => {
+        if (res) {
+          ModalInfo('保存成功！');
+        }
+      });
+    });
+  }
+
+
+  let ClonedChildren;
+  if (children) {
+    ClonedChildren = React.cloneElement(React.Children.only(children), {
+      form,
+      isAdd,
+      url: '/DataObjApi/addFormData',
+    });
+  }
+
+  return (
+    <Shell styleShell={{ marginTop: 0 }}>
+      <RenderFormByContent
+        content={content}
+        templateCode={templateCode}
+        form={form}
+      />
+      {ClonedChildren || (
+        <div style={{ textAlign: 'center', padding: 16 }}>
+          <Button type="primary" shape="round" ghost onClick={handleSave}>
+            保存
+          </Button>
+        </div>
+      )}
+    </Shell>
+  );
+}
+
+export default Form.create()(SingleDataPageInFirstRow);