fix: '巡检反馈增加映射字段'

src/pages/bsmanager/patrolMaintenance/patrolFeedback/AddModal.jsx

@@ -5,9 +5,21 @@
 /* eslint-disable indent */
 /* eslint-disable camelcase */
 /* eslint-disable no-unused-expressions */
-import React, { useState, useEffect } from 'react';
-import { Drawer, Form, Input, notification, Row, Col, Select, Button, Space } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Drawer,
+  Form,
+  Input,
+  notification,
+  Row,
+  Col,
+  Select,
+  Button,
+  Space,
+  TreeSelect,
+  Empty,
+} from 'antd';
+import { PlusOutlined, SwapOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import styles from './patrolFeedback.less';
 import {
   CM_Feedback_LoadFeedbackTables,
@@ -15,6 +27,7 @@ import {
   CM_Feedback_OperatePatrolFeedback,
   CM_Feedback_LoadFields,
   CM_Feedback_QueryPatrolFeedback,
+  GetTaskSyncField,
 } from '@/services/PatrolFeedback/api';
 import {
   GetCM_Event_LoadEventTable,
@@ -25,6 +38,10 @@ import RMSComponents from '@/components/RolePmSite/index';
 import ChangeRoles from './ChangeRoles';
 import ChangeFields from './ChangeFields';
 
+import logo from '@/assets/images/icons/值映射.png';
+
+import { reloadTableFields } from '@/services/tablemanager/tablemanager';
+
 const { Option } = Select;
 const AddModal = props => {
   const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;
@@ -44,35 +61,195 @@ const AddModal = props => {
   const [chooseGroupName, setChooseGroupName] = useState(['角色', '部门', '站点']);
   const [keepFiled, setKeepFiled] = useState([]);
   const [eventData, setEventData] = useState([]);
+  const [keepData, setKeepData] = useState([]);
+  const [keep, setkeep] = useState([]);
+  const [keepAllData, setKeepAllData] = useState([]);
+  const [keepTree, setKeepTree] = useState([]);
+  const [keepAll, setKeepAll] = useState([]);
+  const all = useRef();
 
   const [form] = Form.useForm();
+  const [formAdd] = Form.useForm();
   const { Item } = Form;
+  const { TreeNode } = TreeSelect;
 
   useEffect(() => {
+    getEventData(); // 获取所有关联事件数据
     if (visible) {
-      getEventData();
-      getFeedbackTable();
-      getRoles();
       if (type === 'edit') {
         CM_Feedback_QueryPatrolFeedback({ id: formObj.id }).then(res => {
           form.setFieldsValue({ ...res.data });
+          let aa = JSON.parse(res.data.mappingFields);
+          getGetTaskSyncField(aa); // 获取字段名数据
+
+          onChangeEvent(res.data.relationEvent, aa); // 改变关联事件类型
+          getFeedbackTable();
+          getRoles();
         });
+      } else {
+        getGetTaskSyncField();
+        getFeedbackTable();
+        getRoles();
       }
     } else {
+      formAdd.resetFields();
       form.resetFields();
+      setKeepTree([]);
+      setKeepData([]);
     }
   }, [visible]);
 
+  const getGetTaskSyncField = e => {
+    GetTaskSyncField().then(res => {
+      if (res.code === '0') {
+        if (e) {
+          console.log(res.data);
+          console.log(e);
+          let datalist = [...e];
+          datalist.map(i => {
+            res.data.map(j => {
+              if (j.value === i.fromField) {
+                i.fromField = j.key;
+              }
+            });
+          });
+          console.log(e);
+          console.log(datalist);
+          formAdd.setFieldsValue({ parmars: datalist });
+          let aa = e;
+          let from = [];
+          aa.map(i => {
+            if (i && i.fromField) {
+              from.push(i.fromField);
+            }
+          });
+          let lastFrom = [];
+          keep.map(j => {
+            if (from.indexOf(j.key) == -1) {
+              lastFrom.push(j);
+            }
+          });
+          setKeepData(lastFrom);
+          console.log(lastFrom);
+        } else {
+          setKeepData(res.data);
+          console.log(res.data);
+        }
+
+        setkeep(res.data);
+      }
+    });
+  };
+
+  const getReloadTableField = (e, i) => {
+    reloadTableFields({
+      tableName: e,
+    }).then(res => {
+      if (res.msg === 'Ok') {
+        console.log(res.data.root);
+        console.log(i);
+        setKeepAll(res.data.root);
+        // 编辑时过滤数据
+        if (i) {
+          let aa = i;
+          let to = [];
+          aa.map(j => {
+            if (j && j.toField) {
+              to.push(j.toField);
+            }
+          });
+          let lastTo = [];
+          res.data.root.map(b => {
+            if (to.indexOf(b.name) == -1) {
+              lastTo.push(b);
+            }
+          });
+          console.log(lastTo);
+          setKeepTree(lastTo);
+        } else {
+          setKeepTree(res.data.root);
+        }
+
+        // let arrlist = [];
+        // let data = {};
+        // let listArr = [];
+        // res.data.root.map(i => {
+        //   arrlist.push(i.name);
+        // });
+        // data.TableFieldNames = arrlist;
+        // data.TableName = e;
+        // listArr.push(data);
+        // let arr = formateArrDataA2(res.data.root, 'group');
+        // let newArr = [];
+        // Object.keys(arr).map((item, index) => {
+        //   newArr.push({ type: item, key: index, id: index });
+        // });
+        // let aa = [];
+        // let bb = [];
+        // Object.keys(arr).forEach((item, index) => {
+        //   aa.push({ name: item, key: index, ID: index, children: arr[item] });
+        //   bb.push(item);
+        // });
+        // console.log(aa, 'aaaaaaaaaaaaa');
+        // setKeepTree(aa);
+        // setKeepAll(aa);
+        // all.current = aa;
+      }
+    });
+  };
+
+  const formateArrDataA2 = (initialArr, name) => {
+    // 判定传参是否符合规则
+    if (!(initialArr instanceof Array)) {
+      return '请传入正确格式的数组';
+    }
+    if (!name) {
+      return '请传入对象属性';
+    }
+    // 先获取一下这个数组中有多少个"name"
+    let nameArr = [];
+    // eslint-disable-next-line no-restricted-syntax
+    for (let i in initialArr) {
+      if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
+        nameArr.push(initialArr[i][`${name}`]);
+      }
+    }
+    // 新建一个包含多个list的结果对象
+    let tempObj = {};
+    // 根据不同的"name"生成多个数组
+    for (let k in nameArr) {
+      for (let j in initialArr) {
+        if (initialArr[j][`${name}`] == nameArr[k]) {
+          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
+          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
+          tempObj[nameArr[k]].push(initialArr[j]);
+        }
+      }
+    }
+    for (let keys in tempObj) {
+      let arr = [];
+      tempObj[keys].map((item, index) => {
+        tempObj[keys] = arr;
+        item.key = index;
+        arr.push(item);
+      });
+    }
+    return tempObj;
+  };
+
   // 获取关联事件数据
   const getEventData = () => {
     GetCM_Event_LoadEventTable().then(res => {
       if (res.code === 0) {
         let aa = [];
+        let bb = [];
         res.data.map(i => {
           i.root.map(j => {
             aa.push(j.name);
+            bb.push(j);
           });
         });
+        setKeepAllData(bb);
         setEventData(aa);
       }
     });
@@ -129,51 +306,68 @@ const AddModal = props => {
   };
 
   const onSubmit = () => {
-    form.validateFields().then(validate => {
-      if (validate) {
-        let obj = form.getFieldsValue();
-        if (type == 'add') {
-          CM_Feedback_OperatePatrolFeedback({
-            ...obj,
-          }).then(res => {
-            if (res.msg == '') {
-              form.resetFields();
-              callBackSubmit();
-              notification.success({
-                message: '提示',
-                duration: 3,
-                description: type == 'add' ? '添加成功' : '编辑成功',
+    formAdd.validateFields().then(validate1 => {
+      if (validate1) {
+        form.validateFields().then(validate => {
+          if (validate) {
+            let obj = form.getFieldsValue();
+            let objaa = formAdd.getFieldValue('parmars');
+            console.log(objaa);
+            console.log(keep);
+            objaa.map(i => {
+              keep.map(j => {
+                if (j.key === i.fromField) {
+                  i.fromField = j.value;
+                }
               });
-            } else {
-              notification.error({
-                message: '提示',
-                duration: 3,
-                description: res.msg,
-              });
-            }
-          });
-        } else {
-          CM_Feedback_OperatePatrolFeedback({
-            ...obj,
-            id: formObj.id,
-          }).then(res => {
-            if (res.msg == '') {
-              form.resetFields();
-              callBackSubmit();
-              notification.success({
-                message: '提示',
-                duration: 3,
-                description: type == 'add' ? '添加成功' : '编辑成功',
+            });
+            console.log(objaa);
+            if (type == 'add') {
+              CM_Feedback_OperatePatrolFeedback({
+                ...obj,
+                mappingFields: JSON.stringify(objaa),
+              }).then(res => {
+                if (res.msg == '') {
+                  form.resetFields();
+                  callBackSubmit();
+                  notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: type == 'add' ? '添加成功' : '编辑成功',
+                  });
+                } else {
+                  notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: res.msg,
+                  });
+                }
               });
             } else {
-              notification.error({
-                message: '提示',
-                duration: 3,
-                description: res.msg,
+              CM_Feedback_OperatePatrolFeedback({
+                ...obj,
+                id: formObj.id,
+                mappingFields: JSON.stringify(objaa),
+              }).then(res => {
+                if (res.msg == '') {
+                  form.resetFields();
+                  callBackSubmit();
+                  notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: type == 'add' ? '添加成功' : '编辑成功',
+                  });
+                } else {
+                  notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: res.msg,
+                  });
+                }
               });
             }
-          });
-        }
+          }
+        });
       }
     });
   };
@@ -365,6 +559,86 @@ const AddModal = props => {
     setCheckedList1(prop.stt);
     form.setFieldsValue(inputText);
   };
+
+  const changTable = (value, e) => {
+    console.log(value);
+    console.log(e.key);
+  };
+
+  // 改变关联事件类型
+  const onChangeEvent = (e, i) => {
+    if (!i) {
+      formAdd.resetFields();
+    }
+    console.log(e);
+    console.log(keepAllData);
+    let aa = keepAllData.find(i => i.name === e);
+    console.log(aa);
+    if (aa) {
+      getReloadTableField(aa.tableName, i); // 找到关联事件对应事件表获取对应表的所有字段
+    }
+  };
+
+  const mapTree = org => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    return haveChildren ? (
+      <TreeNode value={`123${org.name}`} title={org.name} disabled>
+        {org.children.map(item => mapTree(item))}
+      </TreeNode>
+    ) : (
+      <TreeNode value={org.name} title={org.name} />
+    );
+  };
+
+  const changeValue = () => {
+    console.log(formAdd.getFieldsValue().parmars);
+    let aa = formAdd.getFieldsValue().parmars;
+    let from = [];
+    let to = [];
+    aa.map(i => {
+      if (i && i.fromField) {
+        from.push(i.fromField);
+      }
+      if (i && i.toField) {
+        to.push(i.toField);
+      }
+    });
+
+    let lastFrom = [];
+    let lastTo = [];
+    console.log(from);
+    console.log(keep);
+    keep.map(j => {
+      if (from.indexOf(j.key) == -1) {
+        lastFrom.push(j);
+      }
+    });
+    console.log(lastFrom);
+    setKeepData(lastFrom);
+
+    keepAll.map(j => {
+      if (to.indexOf(j.name) == -1) {
+        lastTo.push(j);
+      }
+    });
+    console.log(lastTo);
+    setKeepTree(lastTo);
+
+    // let data = keepAll;
+    // data.map(k => {
+    //   console.log(k);
+    //   k.children.map((j, h) => {
+    //     console.log(j);
+    //     if (to.indexOf(j.name) != -1) {
+    //       console.log(j);
+    //       k.children.splice(h, 1);
+    //     }
+    //   });
+    // });
+    // console.log(data);
+    // setKeepTree(data);
+  };
+
   return (
     <Drawer
       title="反馈配置"
@@ -486,7 +760,7 @@ const AddModal = props => {
           </Col>
           <Col span={23}>
             <Item label="关联事件" name="relationEvent" labelCol={{ span: 4 }}>
-              <Select placeholder="选择关联事件类型" showSearch>
+              <Select placeholder="选择关联事件类型" onChange={e => onChangeEvent(e)} showSearch>
                 {eventData
                   ? eventData.map((item, index) => (
                       <Option key={index} value={item}>
@@ -497,6 +771,120 @@ const AddModal = props => {
               </Select>
             </Item>
           </Col>
+          <Col span={23}>
+            <span style={{ fontSize: '12px', color: '#bfbcbc', marginLeft: '80px' }}>
+              当配置了关联事件后，可配置字段映射规则
+            </span>
+            <br />
+            <span style={{ fontSize: '12px', color: '#bfbcbc', marginLeft: '80px' }}>
+              配置后，巡检发起的工单，可以传递该巡检任务信息
+            </span>
+          </Col>
+          <Col span={4} />
+          <Col span={19}>
+            <Item style={{ marginTop: '20px' }}>
+              <Form name="form" form={formAdd} onFieldsChange={changeValue}>
+                <Form.List name="parmars">
+                  {(fields, { add, remove }) => (
+                    <>
+                      {fields.map(({ key, name, fieldKey, ...restField }) => (
+                        <Space
+                          key={key}
+                          style={{
+                            display: 'flex',
+                            marginBottom: '5px',
+                            justifyContent: 'center',
+                          }}
+                          align="baseline"
+                        >
+                          <Form.Item
+                            {...restField}
+                            style={{ marginBottom: '5px' }}
+                            name={[name, 'fromField']}
+                            fieldKey={[fieldKey, 'key']}
+                            validateTrigger={['onChange', 'onBlur']}
+                            rules={[{ required: true, message: '请填写字段名' }]}
+                          >
+                            <Select
+                              placeholder="选择字段名"
+                              // onSelect={changTable}
+                              // optionLabelProp="key"
+                              showSearch
+                              style={{ width: '159px' }}
+                            >
+                              {keepData
+                                ? keepData.map((item, index) => (
+                                    <Option key={item.key} value={item.key}>
+                                      {item.key}
+                                    </Option>
+                                  ))
+                                : ''}
+                            </Select>
+                          </Form.Item>
+                          <img src={logo} style={{ height: '24px' }} alt="" />
+                          <Form.Item
+                            {...restField}
+                            style={{ marginBottom: '5px' }}
+                            name={[name, 'toField']}
+                            fieldKey={[fieldKey, 'key']}
+                            rules={[{ required: true, message: '请填写映射字段名' }]}
+                          >
+                            <Select
+                              placeholder="选择映射字段名"
+                              showSearch
+                              style={{ width: '159px' }}
+                            >
+                              {keepTree.length > 0
+                                ? keepTree.map((item, index) => (
+                                    <>
+                                      <Option key={item.name} value={item.name}>
+                                        {item.name}
+                                      </Option>
+                                    </>
+                                  ))
+                                : ''}
+                            </Select>
+                            {/* <TreeSelect
+                              showSearch
+                              style={{ width: '159px', marginLeft: '4px' }}
+                              // value={treeSelectValue}
+                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                              placeholder="请选择映射字段名 "
+                              allowClear
+                              treeDefaultExpandAll
+                              showCheckedStrategy
+                              // onChange={treeSelectOnchange}
+                            >
+                              {keepTree ? (
+                                keepTree.map(i => mapTree(i))
+                              ) : (
+                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
+                              )}
+                            </TreeSelect> */}
+                          </Form.Item>
+                          <MinusCircleOutlined
+                            onClick={() => remove(name)}
+                            style={{ marginLeft: '10px', fontSize: '20px' }}
+                          />
+                        </Space>
+                      ))}
+                      <Form.Item>
+                        <Button
+                          type="dashed"
+                          onClick={() => add()}
+                          block
+                          icon={<PlusOutlined />}
+                          disabled={!(keepData.length > 0)}
+                        >
+                          添加映射
+                        </Button>
+                      </Form.Item>
+                    </>
+                  )}
+                </Form.List>
+              </Form>
+            </Item>
+          </Col>
           {/* <Col span={23}>
             <Item label="分组" name="groupType" labelCol={{ span: 4 }}>
               <Input placeholder="请输入分组" />

src/services/PatrolFeedback/api.js

@@ -6,7 +6,7 @@
  * @LastEditTime: 2022-07-22 10:46:09
  * @LastEditors: leizhe
  */
-import { CITY_SERVICE, get, PUBLISH_SERVICE, post, postForm } from '../index';
+import { CITY_SERVICE, get, PUBLISH_SERVICE, post, postForm, PANDA_GIS } from '../index';
 
 // 加载巡检反馈
 export const CM_Feedback_LoadPatrolFeedbacks = data =>
@@ -43,3 +43,7 @@ export const CM_Feedback_LoadFields = feedbackTableName =>
 // 调整巡检反馈顺序
 export const CM_Feedback_ChangPatrolOrder = patrolOrder =>
   get(`${PUBLISH_SERVICE}/WorkOrderCenter/CM_Feedback_ChangPatrolOrder?patrolOrder=${patrolOrder}`);
+
+// 任务同步事件字段
+export const GetTaskSyncField = query =>
+  get(`${PANDA_GIS}/PatrolInspection/GetTaskSyncField`, query);