feat: 流程新增台账回填配置

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/ConfigAccount/AddAccount/index.less

+.AddAccount{
+  :global {
+    .ant-row {
+        width: 520px !important;
+    }
+}
+}
\ No newline at end of file

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/ConfigAccount/index.js

+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Space, Button, Divider, Table, Tooltip, message } from 'antd';
+import { DeleteOutlined, EditTwoTone, PlusOutlined } from '@ant-design/icons';
+import AddAccount from './AddAccount';
+import { GetFlowNodeDataSource } from '@/services/flow/flow';
+
+const ConfigAccount = (props, ref) => {
+  const { editMsg, nodeChage, flowID } = props;
+
+  const [viewModal, setViewModal] = useState(false); // GIS配置新政编辑模态框
+  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
+  const [index, setIndex] = useState(0)
+  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
+  const [flag, setFlag] = useState(0);
+  const tableData = useRef([]); // GIS配置对应的回显的表格
+  const [tableField, setTableField] = useState([]);
+  const [tableName, setTableName] = useState('')
+
+  useEffect(() => {
+    tableData.current = [];
+    tableData.current = editMsg.AccountFlowNodeBackfillConfigs?.map((item, index) => {
+      if (item.Config) {
+        let newConfig = JSON.parse(item.Config);
+
+        return {
+          ...item,
+          RuleName: item.RuleName,
+          Fields: newConfig?.mapping?.[0]?.fromData?.filed || '',
+          key: index
+        };
+      }
+      return { ...item, key: index }
+    });
+    setFlag(flag + 1);
+    tableFields();
+  }, [editMsg]);
+
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+
+  const getParmar = () => ({ AccountFlowNodeBackfillConfigs: tableData.current });
+
+  const tableFields = () => {
+    GetFlowNodeDataSource({
+      flowId: flowID,
+    }).then(res => {
+      if (res.code === 0) {
+        res.data.FromData.map(i => {
+          i.type = '事件工单表';
+          setTableName(i.TableName)
+          i.TableFields.map(j => {
+            j.table = i.TableName;
+            j.type = 'mapping';
+          });
+        });
+        res.data.RelationFormData.map(i => {
+          i.type = '关联表单';
+          i.TableFields.map(j => {
+            j.table = i.TableName;
+            j.type = 'relationFormMapping';
+          });
+        });
+        res.data.AreaTaskFormData.map(i => {
+          i.type = '区域任务';
+          i.TableFields.map(j => {
+            j.table = i.TableName;
+            j.type = 'areaTaskFormMapping';
+          });
+        });
+        let arr = [...res.data.FromData];
+        setTableField(arr);
+      }
+    });
+  };
+  // 编辑GIS配置
+  const toEdit = val => {
+    setViewModal(true);
+    setModalType('edit');
+    setviewMsg(val);
+  };
+  // GIS配置确定回调
+  const saveView = (val, type) => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    if (type === 'add') {
+      list.push({ ...val });
+    } else {
+      list[index] = val
+    }
+    tableData.current = list;
+    nodeChage('AccountFlowNodeBackfillConfigs', tableData.current);
+    setViewModal(false);
+  };
+  // 删除GIS配置
+  const delRow = record => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    list = list.filter(item => item.key !== record.key);
+    list.map((item, index) => {
+      item.ID = index;
+      item.key = index;
+    });
+    tableData.current = list;
+    nodeChage('AccountFlowNodeBackfillConfigs', tableData.current);
+    setFlag(flag + 1);
+  };
+  // 定义表格
+  const columns = [
+    {
+      title: '规则名称',
+      dataIndex: 'RuleName',
+      align: 'center',
+      render: (text, record) => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text || record.WebPage}</span>;
+      },
+    },
+    {
+      title: '源字段',
+      dataIndex: 'Fields',
+      align: 'center',
+      render: (text, record) => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text || record.WebPage}</span>;
+      },
+    },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      render: record => (
+        <>
+          <Space>
+            <DeleteOutlined
+              onClick={() => delRow(record)}
+              style={{ fontSize: '16px', color: '#e86060' }}
+            />
+          </Space>
+        </>
+      ),
+    },
+  ];
+  return (
+    <div>
+      <Divider
+        orientation="left"
+        style={{
+          borderTopColor: '#99bbe8',
+          color: '#15428b',
+          fontWeight: 700,
+        }}
+      >
+        台账数据回填
+      </Divider>
+      <div
+        style={{
+          widnt: '100%',
+          marginBottom: '10px',
+          display: 'flex',
+          justifyContent: 'right',
+        }}
+      >
+        <Button
+          type="primary"
+          onClick={() => {
+            setViewModal(true);
+            setModalType('add');
+          }}
+          style={{ display: 'flex', alignItems: 'center' }}
+          icon={<PlusOutlined />}
+        >
+          新增台账配置
+        </Button>
+      </div>
+      <Table
+        dataSource={tableData.current}
+        columns={columns}
+        rowKey={record => record.key}
+        bordered
+        size="small"
+        scroll={{ y: 'calc(100vh - 630px)' }}
+        onRow={(record, index) => ({
+          onDoubleClick: () => {
+            setIndex(index)
+            toEdit(record, index);
+          },
+        })}
+        pagination={false}
+      />
+      <AddAccount
+        tableName={tableName}
+        tableData={tableData.current}
+        visible={viewModal}
+        msg={viewMsg}
+        modalType={modalType}
+        handleCancel={() => setViewModal(false)}
+        onSubumit={saveView}
+        tableField={tableField}
+        addIndex={tableData.current && tableData.current.length}
+      />
+    </div>
+  );
+};
+
+export default forwardRef(ConfigAccount);

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/NodeModal.jsx

@@ -11,6 +11,7 @@ import ConfigOperate from './nodeModalComponents/ConfigOperate';
 import ConfigCase from './nodeModalComponents/ConfigCase';
 import ConfigView from './nodeModalComponents/ConfigView';
 import ConfigGIS from './nodeModalComponents/ConfigGIS';
+import ConfigAccount from './ConfigAccount';
 import ConfigTimeLimit from './nodeModalComponents/ConfigTimeLimit';
 import CongfigHeightMsg from './nodeModalComponents/CongfigHeightMsg';
 
@@ -38,6 +39,7 @@ const NodeModal = props => {
   const refConfigCase = useRef();
   const refConfigView = useRef();
   const refConfigGIS = useRef();
+  const refConfigAccount = useRef();
   const refConfigTimeLimit = useRef();
   const refCongfigHeightMsg = useRef();
 
@@ -59,6 +61,7 @@ const NodeModal = props => {
       ...refConfigSubprocess.current?.getParmar(),
       ...refConfigView.current?.getParmar(),
       ...refConfigGIS.current?.getParmar(),
+      ...refConfigAccount.current?.getParmar(),
       ...refConfigTimeLimit.current?.getParmar(),
     };
 
@@ -114,9 +117,9 @@ const NodeModal = props => {
           style={{
             display:
               editMsg.NodeType === '20' ||
-              editMsg.NodeType === '21' ||
-              editMsg.NodeType === '22' ||
-              editMsg.NodeType === '30'
+                editMsg.NodeType === '21' ||
+                editMsg.NodeType === '22' ||
+                editMsg.NodeType === '30'
                 ? 'none'
                 : 'flex',
           }}
@@ -152,10 +155,10 @@ const NodeModal = props => {
               style={{
                 display:
                   editMsg.NodeType === '1' ||
-                  editMsg.NodeType === '20' ||
-                  editMsg.NodeType === '21' ||
-                  editMsg.NodeType === '22' ||
-                  editMsg.NodeType === '30'
+                    editMsg.NodeType === '20' ||
+                    editMsg.NodeType === '21' ||
+                    editMsg.NodeType === '22' ||
+                    editMsg.NodeType === '30'
                     ? 'none'
                     : 'block',
               }}
@@ -172,10 +175,10 @@ const NodeModal = props => {
             style={{
               display:
                 activeConfig !== '高级配置' ||
-                editMsg.NodeType === '20' ||
-                editMsg.NodeType === '21' ||
-                editMsg.NodeType === '22' ||
-                editMsg.NodeType === '30'
+                  editMsg.NodeType === '20' ||
+                  editMsg.NodeType === '21' ||
+                  editMsg.NodeType === '22' ||
+                  editMsg.NodeType === '30'
                   ? 'none'
                   : 'block',
             }}
@@ -209,15 +212,21 @@ const NodeModal = props => {
                 flowID={flowID}
               />
             </div>
+            <ConfigAccount
+              ref={refConfigAccount}
+              nodeChage={nodeChage}
+              editMsg={editMsg}
+              flowID={flowID}
+            />
             {/* 工单配置 */}
             <div
               style={{
                 display:
                   editMsg.NodeType === '1' ||
-                  editMsg.NodeType === '20' ||
-                  editMsg.NodeType === '21' ||
-                  editMsg.NodeType === '22' ||
-                  editMsg.NodeType === '30'
+                    editMsg.NodeType === '20' ||
+                    editMsg.NodeType === '21' ||
+                    editMsg.NodeType === '22' ||
+                    editMsg.NodeType === '30'
                     ? 'none'
                     : 'block',
               }}
@@ -241,10 +250,10 @@ const NodeModal = props => {
             style={{
               display:
                 editMsg.NodeType === '20' ||
-                editMsg.NodeType === '21' ||
-                editMsg.NodeType === '22' ||
-                editMsg.NodeType === '30' ||
-                activeConfig !== '权限配置'
+                  editMsg.NodeType === '21' ||
+                  editMsg.NodeType === '22' ||
+                  editMsg.NodeType === '30' ||
+                  activeConfig !== '权限配置'
                   ? 'none'
                   : 'block',
             }}

src/services/flow/flow.js

@@ -91,8 +91,9 @@ export const removeFlowTimer = query =>
     query,
   );
 // 加载反馈类型
-export const GetFlowNodeDataSource = query =>
-  get(`${PUBLISH_SERVICE}/WorkFlow/GetFlowNodeDataSource`, query);
+export const GetFlowNodeDataSource = query => get(`${PUBLISH_SERVICE}/WorkFlow/GetFlowNodeDataSource`, query);
+
+export const GetFormAccountTableList = query => get(`${PUBLISH_SERVICE}/WorkFlow/GetFormAccountTableList`, query);
 
 // 获取地图所有方案名称
 export const GetMaplayerByTerminalType = query =>