fix: '流程中心增加GIS配置'

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChart.jsx

@@ -342,6 +342,7 @@ const FlowChart = props => {
       roleList: [],
       CarbonCopyPeopleList: [],
       ExtendPageList: [],
+      FlowNodeBackfillConfigs: [],
       FlowTimerList: [],
       TurnOnCc: 1,
       NodeAliasName: '',

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/FlowChartRt.jsx

@@ -415,6 +415,7 @@ const FlowChart = props => {
       roleList: [],
       CarbonCopyPeopleList: [],
       ExtendPageList: [],
+      FlowNodeBackfillConfigs: [],
       FlowTimerList: [],
       TurnOnCc: 1,
       NodeAliasName: '',
@@ -1037,6 +1038,12 @@ const FlowChart = props => {
           base64Data: base64,
         }).then(response => {
           if (response.code === 0) {
+            console.log(currentNode.current);
+            let list = JSON.parse(JSON.stringify(currentNode.current));
+            list.FlowNodeBackfillConfigs = jsonData(list.FlowNodeBackfillConfigs);
+            currentNode.current = list;
+            console.log(currentNode.current);
+            debugger;
             FlowNodeSave({
               PreviewImage: response.data,
               CreateUser: sessionStorage.getItem('userName'),
@@ -1072,6 +1079,54 @@ const FlowChart = props => {
       },
     );
   };
+
+  const jsonData = val => {
+    let listArr = [];
+    val.map((item, index) => {
+      let arr = [];
+      arr.push({
+        mapServer: item.schemeName,
+        tableName: item[0].nodeName,
+        filed: item[0].nodeValue,
+      });
+      if (item.users) {
+        item.users.map(i => {
+          arr.push({
+            mapServer: item.schemeName,
+            tableName: i.nodeName,
+            filed: i.nodeValue,
+          });
+        });
+      }
+      let obj = {};
+      obj.type = 'GIS';
+      if (item.tableType === 'mapping') {
+        obj.mapping = [
+          {
+            fromData: {
+              tableName: item.TableName,
+              filed: item.Fields,
+            },
+            toData: arr,
+          },
+        ];
+      } else {
+        obj.relationFormMapping = [
+          {
+            fromData: {
+              tableName: item.TableName,
+              filed: item.Fields,
+            },
+            toData: arr,
+          },
+        ];
+      }
+      let json = JSON.stringify(obj);
+      let newObj = { Config: json, BackfillType: 'GIS', RuleName: item.RuleName };
+      listArr.push(newObj);
+    });
+    return listArr;
+  };
   // 关闭时进行数据比对看数据是否改变
   const leaveTip = () => {
     let diagramObj = JSON.parse(diagram.model.toJson());
@@ -1142,7 +1197,9 @@ const FlowChart = props => {
     if (key === 'TableName') {
       setFlag(flag + 1);
     }
-
+    if (key === 'FlowNodeBackfillConfigs') {
+      setFlag(flag + 1);
+    }
     diagram.rebuildParts();
     // leaveCallBack(true);
   };
@@ -1218,6 +1275,12 @@ const FlowChart = props => {
           base64Data: base64,
         }).then(val => {
           if (val.code === 0) {
+            console.log(diagramObj.nodeDataArray);
+            diagramObj.nodeDataArray.map(i => {
+              i.FlowNodeBackfillConfigs = jsonData(i.FlowNodeBackfillConfigs);
+            });
+            console.log(diagramObj.nodeDataArray);
+            debugger;
             SaveNodeChange({
               FlowId: flowID,
               // DeleteNodes,

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

@@ -10,6 +10,7 @@ import ConfigCopyPerson from './nodeModalComponents/ConfigCopyPerson';
 import ConfigOperate from './nodeModalComponents/ConfigOperate';
 import ConfigCase from './nodeModalComponents/ConfigCase';
 import ConfigView from './nodeModalComponents/ConfigView';
+import ConfigGIS from './nodeModalComponents/ConfigGIS';
 import ConfigTimeLimit from './nodeModalComponents/ConfigTimeLimit';
 import CongfigHeightMsg from './nodeModalComponents/CongfigHeightMsg';
 
@@ -36,6 +37,7 @@ const NodeModal = props => {
   const refConfigOperate = useRef();
   const refConfigCase = useRef();
   const refConfigView = useRef();
+  const refConfigGIS = useRef();
   const refConfigTimeLimit = useRef();
   const refCongfigHeightMsg = useRef();
 
@@ -56,6 +58,7 @@ const NodeModal = props => {
       ...refConfigCase.current?.getParmar(),
       ...refConfigSubprocess.current?.getParmar(),
       ...refConfigView.current?.getParmar(),
+      ...refConfigGIS.current?.getParmar(),
       ...refConfigTimeLimit.current?.getParmar(),
     };
 
@@ -193,6 +196,19 @@ const NodeModal = props => {
               editMsg={editMsg}
               flowID={flowID}
             />
+            {/* GIS配置 */}
+            <div
+              style={{
+                display: editMsg.NodeType === '2' ? 'block' : 'none',
+              }}
+            >
+              <ConfigGIS
+                ref={refConfigGIS}
+                nodeChage={nodeChage}
+                editMsg={editMsg}
+                flowID={flowID}
+              />
+            </div>
             {/* 工单配置 */}
             <div
               style={{

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/AddGIS.jsx

+/* eslint-disable prefer-destructuring */
+import React, { useEffect, useState, useRef } from 'react';
+import { GetMaplayerByTerminalType, GetLayerList, GetLayerFields } from '@/services/flow/flow';
+import {
+  Form,
+  Modal,
+  notification,
+  Select,
+  TreeSelect,
+  Tag,
+  Row,
+  Col,
+  Space,
+  Tooltip,
+  Button,
+  Input,
+} from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import styles from './AddGIS.less';
+import logo from '@/assets/images/icons/值映射.png';
+const { Option } = Select;
+const { TreeNode } = TreeSelect;
+
+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 [form] = Form.useForm();
+  useEffect(() => {
+    if (visible) {
+      console.log(tableData);
+      console.log(msg);
+      debugger;
+      let arr = [];
+      tableData.map(i => {
+        arr.push(i.RuleName);
+      });
+      setRuleList(arr);
+      getSchemeList();
+      if (modalType === 'edit') {
+        form.setFieldsValue(msg);
+        setTableType(msg.tableType);
+        setTableName(msg.TableName);
+      }
+    } else {
+      layerData.current = {};
+      form.resetFields();
+      setLayerFields([]);
+      setLayerValue([]);
+      setSchemeValue([]);
+    }
+  }, [visible]);
+
+  const getSchemeList = () => {
+    GetMaplayerByTerminalType({ terminalType: 'scheme', isBaseMap: false }).then(res => {
+      if (res.code === '0') {
+        setSchemeValue(res.data);
+        if (modalType === 'edit') {
+          getLayerList(msg.schemeName);
+          let arr = [];
+          tableField.map(item => {
+            arr.push(...item.TableFields);
+          });
+          let data = arr.find(i => i.FieldName === msg.Fields);
+          setType(data.FiledType);
+          getLayerFields(msg[0].nodeName, '', res.data, data.FiledType);
+          msg.users?.map((i, j) => {
+            getLayerFields(i.nodeName, j, res.data, data.FiledType);
+          });
+        }
+      }
+    });
+  };
+
+  const getLayerList = val => {
+    GetLayerList({ serviceName: val }).then(res => {
+      if (res.success === true) {
+        let data = res.root.filter(i => i.layerID < 1000);
+        let last = data.filter(j => j.layerID !== null);
+        last.map(item => {
+          item.layerName = item.layerName.split(':')[1];
+        });
+        setLayerValue(last);
+      }
+    });
+  };
+
+  const getLayerFields = (val, key, value, typeFields) => {
+    let obj = form.getFieldsValue();
+    let newValue = value ? value : schemeValue;
+    let data = newValue.find(i => i.servicename === obj.schemeName);
+    GetLayerFields({
+      mapServer: data.servicename,
+      layerName: val,
+      filedType: typeFields ? typeFields : type,
+    }).then(res => {
+      if (res.code === '0') {
+        if (key !== undefined && key !== null && key !== '') {
+          let list = layerData.current;
+          list[key] = res.data;
+          layerData.current = list;
+        } else {
+          setLayerFields(res.data);
+        }
+      }
+    });
+  };
+
+  // 表单监听
+  const onValuesChange = val => {
+    if (Object.keys(val)[0] === 'schemeName') {
+      getLayerList(val[Object.keys(val)[0]]);
+    } else if (Object.keys(val)[0] === 'nodeName1') {
+      getLayerFields(val[Object.keys(val)[0]]);
+    } else if (Object.keys(val)[0] === 'Fields') {
+      let arr = [];
+      tableField.map(item => {
+        arr.push(...item.TableFields);
+      });
+      let data = arr.find(i => i.FieldName === val[Object.keys(val)[0]]);
+      console.log(data);
+      debugger;
+      setTableType(data.type);
+      setType(data.FiledType);
+      setTableName(data.table);
+      // 修改源字段字段类型改变要重新获取type更新所有目标字段下拉框数据
+      getLayerFields()
+    }
+  };
+
+  // 提交表单
+  const onFinish = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        let nodeName1 = form.getFieldsValue();
+        let nodeName = form.getFieldsValue().nodeName1;
+        let nodeValue = form.getFieldsValue().nodeValue1;
+        let arr = [];
+        let result = nodeName1.users;
+        if (result) {
+          // eslint-disable-next-line array-callback-return
+          result.map((item, index) => {
+            if (item) {
+              arr.push({
+                nodeName: item.nodeName,
+                nodeValue: item.nodeValue,
+              });
+            }
+          });
+        }
+        arr.unshift({ nodeName, nodeValue });
+        let obj = {};
+        if (modalType === 'add') {
+          obj = { ...validate, ID: addIndex, ...arr };
+        } else {
+          obj = { ...validate, key: msg.ID || msg.key, ...arr };
+        }
+        onSubumit(obj, modalType, tableType, tableName);
+      }
+    });
+  };
+
+  const mapTree = org => {
+    if (org.TableFields) {
+      return (
+        <TreeNode
+          value={org.TableName}
+          title={
+            <>
+              <span style={{ marginRight: '10px' }}>{org.TableName}</span>
+              {org.type === '关联表单' ? (
+                <Tag color="green">{org.type}</Tag>
+              ) : (
+                <Tag color="blue">{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.AddGIS}>
+      <Modal
+        title="GIS配置"
+        visible={visible}
+        onOk={onFinish}
+        onCancel={handleCancel}
+        maskClosable={false}
+        destroyOnClose
+        width={550}
+      >
+        <Form
+          form={form}
+          labelCol={{ span: 4 }}
+          wrapperCol={{ span: 20 }}
+          initialValues={{ remember: true }}
+          onValuesChange={onValuesChange}
+        >
+          <Form.Item
+            label="规则名称"
+            name="RuleName"
+            rules={[
+              { required: true },
+              {
+                validator: (_, value) => {
+                  console.log(value);
+                  console.log(ruleList);
+                  debugger
+                  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="schemeName" rules={[{ required: true }]}>
+            <Select placeholder="请选择GIS地图方案">
+              {schemeValue.map(item => (
+                <Option value={item.servicename} key={item.servicename}>
+                  <span>{item.schemename}</span>
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Row>
+            <Col span={1}>
+              <img src={logo} style={{ height: '24px' }} alt="" />
+            </Col>
+            <Col span={11}>
+              <Form.Item
+                name="nodeName1"
+                label="图层名称"
+                labelCol={{ span: 8 }}
+                rules={[{ required: true, message: '不能为空' }]}
+                style={{ width: '233px' }}
+              >
+                <Select placeholder="请选择图层">
+                  {layerValue &&
+                    layerValue.map(item => (
+                      <Option value={item.layerName} key={item.layerName}>
+                        <span>{item.layerName}</span>
+                      </Option>
+                    ))}
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={11}>
+              <Form.Item
+                name="nodeValue1"
+                label="目标字段"
+                labelCol={{ span: 8 }}
+                rules={[{ required: true, message: '不能为空' }]}
+                style={{ width: '230px', marginLeft: '3px' }}
+              >
+                <Select placeholder="请选择字段">
+                  {layerFields &&
+                    layerFields.map(item => (
+                      <Option value={item.field} key={item.field}>
+                        <span>{item.field}</span>
+                      </Option>
+                    ))}
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={1} />
+          </Row>
+          <Form.List name="users">
+            {(fields, { add, remove }) => (
+              <>
+                {fields.map(({ key, name, fieldKey, ...restField }) => (
+                  <Space key={key} style={{ display: 'flex', marginBottom: 8 }}>
+                    <Row>
+                      <Col span={1}>
+                        <img src={logo} style={{ height: '24px' }} alt="" />
+                      </Col>
+                      <Col span={11}>
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'nodeName']}
+                          label="图层名称"
+                          labelCol={{ span: 8 }}
+                          fieldKey={[fieldKey, 'frist']}
+                          rules={[{ required: true, message: '不能为空' }]}
+                          style={{ width: '233px' }}
+                        >
+                          <Select
+                            placeholder="请选择图层名称"
+                            style={{ width: '100%' }}
+                            onChange={e => {
+                              getLayerFields(e, key);
+                            }}
+                          >
+                            {layerValue &&
+                              layerValue.map(item => (
+                                <Option value={item.layerName} key={item.layerName}>
+                                  <span>{item.layerName}</span>
+                                </Option>
+                              ))}
+                          </Select>
+                        </Form.Item>
+                      </Col>
+                      <Col span={11}>
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'nodeValue']}
+                          label="目标字段"
+                          fieldKey={[fieldKey, 'last']}
+                          labelCol={{ span: 8 }}
+                          rules={[{ required: true, message: '不能为空' }]}
+                          style={{ width: '230px', marginLeft: '3px' }}
+                        >
+                          <Select
+                            placeholder="请选择设备字段"
+                            style={{ width: '100%' }}
+                            onClick={() => setFlag(flag + 1)}
+                          >
+                            {layerData.current[key] &&
+                              layerData.current[key].map(item => {
+                                return (
+                                  <Option value={item.field} key={item.field}>
+                                    <span>{item.field}</span>
+                                  </Option>
+                                );
+                              })}
+                          </Select>
+                        </Form.Item>
+                      </Col>
+                      <Col span={1}>
+                        <Tooltip title="移除项">
+                          <MinusCircleOutlined
+                            onClick={() => remove(name)}
+                            style={{
+                              fontSize: '20px',
+                              marginTop: '6px',
+                              marginLeft: '3px',
+                              color: '#fa5151',
+                            }}
+                          />
+                        </Tooltip>
+                      </Col>
+                    </Row>
+                  </Space>
+                ))}
+                <Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => add()}
+                    block
+                    icon={<PlusOutlined />}
+                    style={{ width: '411px', marginLeft: '87px' }}
+                  >
+                    新增项
+                  </Button>
+                </Form.Item>
+              </>
+            )}
+          </Form.List>
+        </Form>
+      </Modal>
+    </div>
+  );
+};
+export default AddModal;

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/AddGIS.less

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

src/pages/bsmanager/workOrder/workflowEdit/workFlowComponents/flowChartComponents/nodeModalComponents/ConfigGIS.jsx

+/* eslint-disable prettier/prettier */
+/* eslint-disable indent */
+/* eslint-disable no-unused-expressions */
+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 AddGIS from './AddGIS';
+import { GetFlowNodeDataSource } from '@/services/flow/flow';
+
+const ConfigGIS = (props, ref) => {
+  const { editMsg, nodeChage, flowID } = props;
+
+  const [viewModal, setViewModal] = useState(false); // GIS配置新政编辑模态框
+  const [modalType, setModalType] = useState(''); // 模态框是编辑还是修改的状态
+  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
+  const [flag, setFlag] = useState(0);
+  const tableData = useRef([]); // GIS配置对应的回显的表格
+  const [tableField, setTableField] = useState([]);
+  const jsonData = [
+    {
+      BackfillType: 'GIS',
+      RuleName: 'dwe',
+      Config: {
+        type: 'GIS',
+        mapping: [
+          {
+            fromData: {
+              tableName: '事件_隐患整改事件表',
+              filed: '上报站点',
+            },
+            toData: [
+              {
+                filed: '工程名称',
+                mapServer: 'wlgcs',
+                tableName: '阀门',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      BackfillType: 'GIS',
+      RuleName: 'eeef',
+      Config: {
+        type: 'GIS',
+        mapping: [
+          {
+            fromData: {
+              tableName: '事件_隐患整改事件表',
+              filed: '上报人名称',
+            },
+            toData: [
+              {
+                filed: '分组类型',
+                mapServer: 'wlgcs',
+                tableName: '水质监测点',
+              },
+              {
+                filed: '编号',
+                mapServer: 'wlgcs',
+                tableName: '测压点',
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ];
+  useEffect(() => {
+    tableData.current = [];
+    // tableData.current = editMsg.FlowNodeBackfillConfigs?.map((item, index) => {
+    //   return {
+    //     ...item,
+    //     key: index,
+    //     ID: index,
+    //   };
+    // });
+    tableData.current = editMsg.FlowNodeBackfillConfigs?.map((item, index) => {
+      let obj = {};
+      let newConfig =JSON.parse(item.Config);
+      if (newConfig.mapping) {
+        let users = [];
+        newConfig.mapping[0].toData.map((x, y)=>{
+          obj[y]={nodeName: x.tableName, nodeValue: x.filed}
+        })
+        obj.Fields = newConfig.mapping[0].fromData.filed;
+        obj.ID = index;
+        obj.RuleName = item.RuleName;
+        obj.TableName = newConfig.mapping[0].fromData.tableName;
+        obj.key = index;
+        obj.nodeName1 = newConfig.mapping[0].toData[0].tableName;
+        obj.nodeValue1 = newConfig.mapping[0].toData[0].filed;
+        obj.schemeName = newConfig.mapping[0].toData[0].mapServer;
+        obj.tableType = 'mapping';
+        if (newConfig.mapping[0].toData.length > 1) {
+          newConfig.mapping[0].toData.map((i, j) => {
+            if (j !== 0) {
+              users.push({ nodeName: i.tableName, nodeValue: i.filed });
+            }
+          });
+          obj.users = users;
+        }
+      } else {
+        let users = [];
+        newConfig.relationFormMapping[0].toData.map((x, y)=>{
+          obj[y]={nodeName: x.tableName, nodeValue: x.filed}
+        })
+        obj.Fields = newConfig.relationFormMapping[0].fromData.filed;
+        obj.ID = index;
+        obj.RuleName = item.RuleName;
+        obj.TableName = newConfig.relationFormMapping[0].fromData.tableName;
+        obj.key = index;
+        obj.nodeName1 = newConfig.relationFormMapping[0].toData[0].tableName;
+        obj.nodeValue1 = newConfig.relationFormMapping[0].toData[0].filed;
+        obj.schemeName = newConfig.relationFormMapping[0].toData[0].mapServer;
+        obj.tableType = 'relationFormMapping';
+        if (newConfig.relationFormMapping[0].toData.length > 1) {
+          newConfig.relationFormMapping[0].toData.map((i, j) => {
+            if (j !== 0) {
+              users.push({ nodeName: i.tableName, nodeValue: i.filed });
+            }
+          });
+          obj.users = users;
+        }
+      }
+      return {
+        ...obj,
+      };
+    });
+    setFlag(flag + 1);
+    tableFields();
+  }, [editMsg]);
+  useImperativeHandle(ref, () => ({
+    getParmar,
+  }));
+  const getParmar = () => ({ FlowNodeBackfillConfigs: tableData.current });
+
+  const tableFields = () => {
+    GetFlowNodeDataSource({
+      flowId: flowID,
+    }).then(res => {
+      if (res.code === 0) {
+        res.data.FromData.map(i => {
+          i.type = '工单、事件表';
+          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';
+          });
+        });
+        let arr = [...res.data.FromData, ...res.data.RelationFormData];
+        setTableField(arr);
+      }
+    });
+  };
+  // 编辑GIS配置
+  const toEdit = val => {
+    setViewModal(true);
+    setModalType('edit');
+    setviewMsg(val);
+  };
+  // GIS配置确定回调
+  const saveView = (val, type, tableType, TableName) => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    // eslint-disable-next-line prefer-spread
+    let newKey = list.length > 0 ? Math.max.apply(Math, list.map(item => item.key)) + 1 : 0;
+
+    if (type === 'add') {
+      list.push({ ...val, key: newKey, tableType, TableName });
+    } else {
+      let edtiIndex = list.findIndex(item => item.key === val.key);
+
+      list[edtiIndex] = { ...val, key: newKey, tableType, TableName };
+    }
+    tableData.current = list;
+    console.log(list);
+    debugger;
+    nodeChage('FlowNodeBackfillConfigs', 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('FlowNodeBackfillConfigs', 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,
+        }}
+      >
+        GIS配置
+      </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 />}
+        >
+          新增GIS配置
+        </Button>
+      </div>
+      <Table
+        dataSource={tableData.current}
+        columns={columns}
+        rowKey={record => record.key}
+        bordered
+        size="small"
+        scroll={{ y: 'calc(100vh - 630px)' }}
+        onRow={(record, index) => ({
+          onDoubleClick: () => {
+            toEdit(record, index);
+          },
+        })}
+        pagination={false}
+      />
+      <AddGIS
+        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(ConfigGIS);

src/services/flow/flow.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2022-08-17 10:10:50
  * @LastEditors: leizhe
  */
-import { get, post, PUBLISH_SERVICE } from '@/services/index';
+import { get, post, PUBLISH_SERVICE, PANDA_GIS } from '@/services/index';
 // 工单流程列表查询
 export const reloadFlows = param =>
   get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_ReloadFlows`, param);
@@ -92,3 +92,16 @@ export const removeFlowTimer = query =>
     `${PUBLISH_SERVICE}/WorkOrderCenter/CM_Flow_RemoveFlowTimer?flowTimerID=${query.flowTimerID}`,
     query,
   );
+// 加载反馈类型
+export const GetFlowNodeDataSource = query =>
+  get(`${PUBLISH_SERVICE}/WorkFlow/GetFlowNodeDataSource`, query);
+
+// 获取地图所有方案名称
+export const GetMaplayerByTerminalType = query =>
+  get(`${PANDA_GIS}/Maplayer/GetMaplayerByTerminalType`, query);
+
+// 获取图层
+export const GetLayerList = query => get(`${PANDA_GIS}/MetaData/D_GetLayerList`, query);
+
+// 获取图层可编辑字段
+export const GetLayerFields = query => get(`${PANDA_GIS}/MetaData/GetLayerFields`, query);