fix: '维保增加事件字段映射'

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

@@ -24,6 +24,7 @@ import {
   DownOutlined,
   StepForwardFilled,
   InfoCircleOutlined,
+  MinusCircleOutlined,
 } from '@ant-design/icons';
 import { setAutoFreeze } from 'immer';
 import styles from './maintenance.less';
@@ -34,6 +35,9 @@ import {
   CM_XWBPlan_DataList,
 } from '@/services/maintenance/api';
 
+import { GetTaskSyncField } from '@/services/PatrolFeedback/api';
+import { reloadTableFields } from '@/services/tablemanager/tablemanager';
+
 import {
   GetCM_Event_LoadEventTable,
   CM_Event_LoadDepartmentAndRoles,
@@ -42,6 +46,8 @@ import RMSComponents from '@/components/RolePmSite/index';
 
 import ChangeAdd from './ChangeAdd';
 
+import logo from '@/assets/images/icons/值映射.png';
+
 const { Option } = Select;
 const AddModal = props => {
   const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;
@@ -68,8 +74,23 @@ const AddModal = props => {
   const [visibleChecked1, setVisibleChecked1] = useState(false);
   const [eventData, setEventData] = useState([]);
   const [autoFlag, setAutoFlag] = useState(false); // 禁用自动派发
+  const [keepData, setKeepData] = useState('');
+  const [keep, setKeep] = useState([
+    '任务编码',
+    '设备编码',
+    '计划编码',
+    '任务类型',
+    '设备类型',
+    '坐标位置',
+    '详细地址',
+    '执行人',
+  ]); // 保存初始完整任务同步事件字段
+  const [keepAllData, setKeepAllData] = useState([]); // 保存所有关联事件类型数据
+  const [keepTree, setKeepTree] = useState([]);
+  const [keepAll, setKeepAll] = useState([]); // 保存所选关联事件下完整的字段值
 
   const [form] = Form.useForm();
+  const [formAdd] = Form.useForm();
   const { Item } = Form;
   const { TextArea } = Input;
   const { TreeNode } = TreeSelect;
@@ -119,12 +140,13 @@ const AddModal = props => {
   ]);
 
   useEffect(() => {
+    getEventData();
     if (visible) {
       getRole();
-      getEventData();
       if (type === 'add') {
         setChee('否');
         form.setFieldsValue({ isSubmit: '否', docycle: '一周一次' });
+        getGetTaskSyncField();
         setType1('');
         setType2('');
         setFiled1({});
@@ -140,6 +162,11 @@ const AddModal = props => {
           setVisibleChecked1(data.autoAssign == '是');
           console.log(data);
           data && form.setFieldsValue({ ...data });
+          let mappingFields = JSON.parse(data.mappingFields);
+
+          getGetTaskSyncField(mappingFields); // 获取字段名数据
+          onChangeEvent(data.relationEvent, mappingFields); // 改变关联事件类型
+
           setType1(data.businessType);
           setType2(data.accountName);
         });
@@ -150,6 +177,9 @@ const AddModal = props => {
       setVisibleChecked1(false);
       setChee('');
       form.resetFields();
+      formAdd.resetFields();
+      setKeepTree([]);
+      setKeepData('');
     }
   }, [visible]);
 
@@ -164,11 +194,14 @@ const AddModal = props => {
     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);
       }
     });
@@ -187,13 +220,27 @@ const AddModal = props => {
   };
 
   const onSubmit = () => {
+    formAdd.validateFields().then(validate1 => {
+      if (validate1) {
         form.validateFields().then(validate => {
           if (validate) {
             let obj = form.getFieldsValue();
+            let mappingFields = formAdd.getFieldValue('parmars');
+            mappingFields &&
+              mappingFields.map(i => {
+                keep.map(j => {
+                  if (j === i.fromField) {
+                    i.fromField = j;
+                  }
+                });
+              });
             obj.isSubmit = visibleChecked == true ? '是' : '否';
             obj.autoAssign = visibleChecked1 == true ? '是' : '否';
             if (type == 'add') {
-          CM_XWBPlan_DataEditORAdd(obj).then(res => {
+              CM_XWBPlan_DataEditORAdd({
+                ...obj,
+                mappingFields: mappingFields && JSON.stringify(mappingFields),
+              }).then(res => {
                 if (res.msg == '') {
                   form.resetFields();
                   callBackSubmit();
@@ -219,6 +266,7 @@ const AddModal = props => {
               CM_XWBPlan_DataEditORAdd({
                 ...obj,
                 id: formObj.id,
+                mappingFields: mappingFields && JSON.stringify(mappingFields),
               }).then(res => {
                 if (res.msg == '') {
                   form.resetFields();
@@ -239,6 +287,8 @@ const AddModal = props => {
             }
           }
         });
+      }
+    });
   };
   const inputType1 = e => {
     setType1(e.target.value);
@@ -434,6 +484,200 @@ const AddModal = props => {
     return <TreeNode value={org} title={org} key={org} />;
   };
 
+  // 获取字段名数据
+  const getGetTaskSyncField = e => {
+    // 编辑时处理数据为下拉框过滤调已选数据
+    if (e) {
+      let datalist = [...e];
+      datalist.map(i => {
+        keep.map(j => {
+          if (j === i.fromField) {
+            i.fromField = j;
+          }
+        });
+      });
+      formAdd.setFieldsValue({ parmars: datalist }); // 处理数据让下拉框回显title值
+      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) == -1) {
+          lastFrom.push(j);
+        }
+      });
+      setKeepData(lastFrom);
+    } else {
+      setKeepData(keep);
+    }
+    // setKeep(res.data);
+  };
+
+  const changeValue = () => {
+    console.log(formAdd.getFieldsValue().parmars);
+    let aa = formAdd.getFieldsValue().parmars;
+    if (aa) {
+      console.log(aa);
+      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) == -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);
+  };
+
+  // 改变关联事件类型
+  const onChangeEvent = (e, i) => {
+    console.log(e, i, '666');
+    if (!i) {
+      setKeepData(keep);
+      formAdd.resetFields();
+    }
+    let aa = keepAllData.find(i => i.name === e);
+    console.log(keepAllData, e, '666');
+    if (aa) {
+      getReloadTableField(aa.tableName, i); // 找到关联事件对应事件表获取对应表的所有字段
+    }
+  };
+
+  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);
+        // 编辑时过滤下l拉框初始数据
+        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;
+  };
+
   return (
     <Drawer
       title="巡维保计划配置"
@@ -678,19 +922,6 @@ const AddModal = props => {
               <Input placeholder="请输入在线任务量" />
             </Item>
           </Col>
-          <Col span={24}>
-            <Item label="关联事件" name="relationEvent" labelCol={{ span: 5 }}>
-              <Select placeholder="选择关联事件类型" showSearch>
-                {eventData
-                  ? eventData.map((item, index) => (
-                      <Option key={index} value={item}>
-                        {item}
-                      </Option>
-                    ))
-                  : ''}
-              </Select>
-            </Item>
-          </Col>
           <Col span={24}>
             <Item label="是否送审" name="isSubmit" labelCol={{ span: 5 }}>
               <Switch
@@ -742,6 +973,117 @@ const AddModal = props => {
               <TextArea placeholder="例如：and 泵房品牌='熊猫'(SQL表达式)" />
             </Item>
           </Col>
+          <Col span={24}>
+            <Item label="关联事件" name="relationEvent" labelCol={{ span: 5 }}>
+              <Select placeholder="选择关联事件类型" showSearch onChange={e => onChangeEvent(e)}>
+                {eventData
+                  ? eventData.map((item, index) => (
+                      <Option key={index} value={item}>
+                        {item}
+                      </Option>
+                    ))
+                  : ''}
+              </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} value={item}>
+                                      {item}
+                                    </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>
+                          </Form.Item>
+                          <MinusCircleOutlined
+                            onClick={() => remove(name)}
+                            style={{ marginLeft: '10px', fontSize: '20px' }}
+                          />
+                        </Space>
+                      ))}
+                      <Form.Item>
+                        <Button
+                          type="dashed"
+                          onClick={() => add()}
+                          block
+                          icon={<PlusOutlined />}
+                          style={{ marginLeft: '-2px' }}
+                          disabled={keepData && !(keepData.length > 0)}
+                        >
+                          添加映射
+                        </Button>
+                      </Form.Item>
+                    </>
+                  )}
+                </Form.List>
+              </Form>
+            </Item>
+          </Col>
         </Row>
       </Form>
       <ChangeAdd