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

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

+/* eslint-disable no-unused-expressions */
+/* eslint-disable no-else-return */
+/* eslint-disable prefer-destructuring */
+import React, { useEffect, useState, useRef } from 'react';
+import { GetMaplayerByTerminalType, GetLayerList, GetLayerFields, GetFormAccountTableList } from '@/services/flow/flow';
+import {
+  CreateTablePost,
+  getTableInfo,
+  updateTablePost,
+  GetDefaultTableFields,
+  reloadTableFields,
+  removeFields,
+} from '@/services/tablemanager/tablemanager';
+import {
+  Form,
+  Modal,
+  notification,
+  Select,
+  TreeSelect,
+  Tag,
+  Row,
+  Col,
+  Space,
+  Tooltip,
+  Button,
+  Input,
+  message,
+} from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import styles from './index.less';
+import logo from '@/assets/images/icons/值映射.png';
+const { Option } = Select;
+const { TreeNode } = TreeSelect;
+
+const colors = ['purple', 'geekblue', 'blue', 'cyan', 'green', 'gold', 'orange', 'volcano', 'red', 'magenta']
+
+const AddModal = props => {
+  const {
+    onSubumit,
+    handleCancel,
+    visible,
+    msg,
+    modalType,
+    tableField,
+    addIndex,
+    tableData,
+  } = props;
+  const [schemeValue, setSchemeValue] = useState([]);
+  const [layerValue, setLayerValue] = useState([]);
+  const [layerFields, setLayerFields] = useState([]);
+  const layerData = useRef({});
+  const [type, setType] = useState();
+  const [flag, setFlag] = useState(0); // 刷新
+  const [tableType, setTableType] = useState();
+  const [tableName, setTableName] = useState();
+  const [ruleList, setRuleList] = useState([]);
+  const [tableShape, setTableShape] = useState();
+
+  const [form] = Form.useForm();
+  useEffect(() => {
+    if (visible) {
+      let arr = [];
+      tableData.map(i => {
+        arr.push(i.RuleName);
+      });
+      setRuleList(arr);
+      if (modalType === 'edit') {
+        let users = []
+        let Fields = ''
+        let defaultValue = ''
+        if (msg.Config) {
+          let config = JSON.parse(msg.Config)
+          let toData = config?.mapping[0]?.toData
+          let fromData = config?.mapping[0]?.fromData || {}
+          if (fromData) {
+            Fields = fromData?.filed || ''
+            defaultValue = fromData?.defaultValue || ''
+          }
+          if (toData?.length) {
+            toData.forEach(v => {
+              users.push({ nodeName: `${v.tableName},${v.type},${v.caseFiled}`, filed: v.filed })
+            })
+          }
+        }
+        form.setFieldsValue({ ...msg, Fields: Fields, presetValue: defaultValue, users: users });
+        setTableShape(msg.tableShape);
+        setTableType(msg.tableType);
+        setTableName(msg.TableName);
+        if (props.tableName) {
+          targetAccount()
+        }
+      }
+    } else {
+      layerData.current = {};
+      form.resetFields();
+      setLayerFields([]);
+      setLayerValue([]);
+      setSchemeValue([]);
+    }
+  }, [visible])
+
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let values = form.getFieldsValue()
+        let toData = []
+        values?.users?.forEach(v => {
+          let item = v?.nodeName?.split(',')
+          if (item.length === 3) {
+            toData.push({ tableName: item[0], caseFiled: item[2], filed: v.filed, type: item[1], })
+          }
+        })
+        let Config = {
+          type: '台账',
+          mapping: [
+            {
+              fromData: {
+                tableName: props.tableName,
+                filed: values.Fields,
+                filedShape: '',
+                defaultValue: values.presetValue,
+              },
+              toData: toData,
+            }
+          ]
+        }
+        let result = {
+          BackfillType: '台账',
+          Config: JSON.stringify(Config),
+          RuleName: values.RuleName,
+          ...values,
+        }
+        onSubumit(result, modalType)
+      }
+    });
+  };
+
+  const targetAccount = () => {
+    GetFormAccountTableList({ caseTableName: props.tableName })
+      .then(res => {
+        if (res.code === 0) {
+          setLayerValue(res.data)
+        }
+      })
+  }
+
+  const targetField = (index) => {
+    let { users } = form.getFieldsValue()
+    let item = users[index]?.nodeName?.split(',')
+    if (item.length === 3) {
+      reloadTableFields({ tableName: item[0] })
+        .then(res => {
+          if (res.code === 0) {
+            setLayerFields(res?.data?.root)
+          }
+        })
+    } else {
+      message.info('请选择目标台账!')
+    }
+
+  }
+
+  const mapTree = org => {
+    if (org.TableFields) {
+      return (
+        <TreeNode
+          value={org.TableName}
+          title={
+            <>
+              <span style={{ marginRight: '10px' }}>{org.TableName}</span>
+              <Tag color={org.type === '关联表单' ? 'blue' : (org.type === '事件工单表' ? 'green' : 'geekblue')}>{org.type}</Tag>
+            </>
+          }
+          disabled
+        >
+          {org.TableFields.map(item => mapTree(item))}
+        </TreeNode>
+      );
+    }
+    return <TreeNode value={org.FieldName} title={org.FieldName} key={org.FieldName} />;
+  };
+
+  return (
+    <div className={styles.AddAccount}>
+      <Modal
+        title="台账配置"
+        visible={visible}
+        onOk={onFinish}
+        onCancel={handleCancel}
+        maskClosable={false}
+        destroyOnClose
+        width={700}
+        bodyStyle={{ padding: 15 }}
+      >
+        <Form
+          form={form}
+          labelCol={{ span: 4 }}
+          // wrapperCol={{ span: 21 }}
+          initialValues={{ remember: true, users: [{ nodeName: '', nodeValue: '' }] }}
+        // onValuesChange={onValuesChange}
+        >
+          <Form.Item
+            label="规则名称"
+            name="RuleName"
+            rules={[
+              { required: true },
+              {
+                validator: (_, value) => {
+                  if (modalType === 'add' && ruleList.indexOf(value) !== -1) {
+                    return Promise.reject(new Error('规则名称已存在'));
+                  } else if (
+                    modalType === 'edit' &&
+                    ruleList.indexOf(value) !== -1 &&
+                    value !== msg.RuleName
+                  ) {
+                    return Promise.reject(new Error('规则名称已存在'));
+                  }
+
+                  return Promise.resolve();
+                },
+              },
+            ]}
+          >
+            <Input placeholder="请输入规则名称" />
+          </Form.Item>
+          <Form.Item label="源字段" name="Fields" rules={[{ required: true }]}>
+            <TreeSelect
+              showSearch
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择表单源字段"
+              treeDefaultExpandAll
+              showCheckedStrategy
+            >
+              {tableField && tableField.map(i => mapTree(i))}
+            </TreeSelect>
+          </Form.Item>
+          <Form.Item label="默认值" name="presetValue" >
+            <Input placeholder="请输入默认值" />
+          </Form.Item>
+          <Form.List name="users" label='字段映射' style={{ width: '100%' }}>
+            {(fields, { add, remove }) => (
+              <>
+                {
+                  fields.map(({ key, name, fieldKey, ...restField }, index) => {
+                    return (
+                      <div key={key} style={{ display: 'flex', marginBottom: 8, alignItems: 'center', position: 'relative', padding: '0 30px 0 28px' }}>
+                        <img style={{ position: 'absolute', left: 11, top: 5, height: '24px' }} src={logo} alt="" />
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'nodeName']}
+                          label="目标台账"
+                          labelCol={{ span: 6 }}
+                          style={{ width: '60%' }}
+                          rules={[{ required: true, message: '不能为空' }]}
+                        >
+                          <Select
+                            placeholder="请选择目标台账"
+                            onFocus={targetAccount}
+                          >
+                            {
+                              layerValue.map((item, i) => (
+                                <Option value={`${item.AccountTable},${item.Type},${item.FiledName}`} key={`${item.AccountTable},${item.Type}`}>
+                                  <span>{item.AccountTable}</span>
+                                  <Tag style={{ marginLeft: 5 }} color={colors[i % 10]}>{item.FiledName}</Tag>
+                                </Option>
+                              ))
+                            }
+                          </Select>
+                        </Form.Item>
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'filed']}
+                          label="目标字段"
+                          labelCol={{ span: 7 }}
+                          rules={[{ required: true, message: '不能为空' }]}
+                          style={{ width: '50%', paddingLeft: 10 }}
+                        >
+                          <Select
+                            placeholder="请选择设备字段"
+                            onFocus={() => targetField(index)}
+                          // onChange={(value) => changeTargetField(value, index)}
+                          >
+                            {
+                              layerFields.map(item => {
+                                return (
+                                  <Option value={item.name} key={item.name}>
+                                    <span>{item.alias}</span>
+                                  </Option>
+                                );
+                              })
+                            }
+                          </Select>
+                        </Form.Item>
+                        {
+                          index > 0 ? (
+                            <Tooltip title="移除项">
+                              <MinusCircleOutlined
+                                onClick={() => remove(name)}
+                                style={{
+                                  fontSize: '20px',
+                                  marginTop: '6px',
+                                  marginLeft: '3px',
+                                  color: '#fa5151',
+                                  position: 'absolute',
+                                  right: 0,
+                                  top: 0,
+                                }}
+                              />
+                            </Tooltip>
+                          ) : null
+                        }
+                      </div>
+                    )
+                  })
+                }
+                <Button
+                  type="dashed"
+                  onClick={() => add()}
+                  block
+                  icon={<PlusOutlined />}
+                  style={{ width: '564px', marginLeft: 115 }}
+                >
+                  新增项
+                </Button>
+              </>
+            )}
+          </Form.List>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+export default AddModal;

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 =>