fix: '新维保方案'

package.json

@@ -124,6 +124,7 @@
         "lodash": "4.17.11",
         "minimist": "1.2.0",
         "panda-xform": "^5.2.2",
+        "parseForm": "^2.3.8",
         "prop-types": "15.7.2",
         "quill": "^1.3.7",
         "rc-tween-one": "^3.0.6",

src/components/DragTable/DragTable.jsx

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Table } from 'antd';
 
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -7,21 +7,29 @@ import { DndProvider } from 'react-dnd';
 import DraggableBodyRow from './DraggableBodyRow';
 
 const DragTable = props => {
-  const { columns, dataSource, dragCallBack, ItemTypes } = props;
+  const { columns, dataSource, dragCallBack, ItemTypes, editEventType, setSelectColor } = props;
   const [data, setData] = useState(null); // 分组后的数组
+  const moving = useRef(false);
   const components = {
     body: {
       row: DraggableBodyRow,
     },
   };
   useEffect(() => {
+    moving.current = false;
     if (dataSource.length > 0) {
       setData(dataSource);
     }
   }, [dataSource]);
   // 每次拖拽后返回
   useEffect(() => {
-    dragCallBack(data);
+    if (ItemTypes === 'maintenance') {
+      let moveState = moving.current;
+      let val = { data, moveState };
+      dragCallBack(val);
+    } else {
+      dragCallBack(data);
+    }
   }, [data]);
   // 移动数组元素到指定位置
   const moveInArray = (arr, from, to) => {
@@ -41,6 +49,7 @@ const DragTable = props => {
   };
   // 拖拽表格
   const moveRow = (dragIndex, hoverIndex) => {
+    moving.current = true;
     setData(val => {
       let newData = JSON.parse(JSON.stringify(val));
       newData = moveInArray(newData, dragIndex, hoverIndex);
@@ -50,19 +59,40 @@ const DragTable = props => {
   return (
     <div>
       <DndProvider backend={HTML5Backend}>
-        <Table
-          bordered
-          columns={columns}
-          dataSource={data}
-          components={components}
-          onRow={(record, index) => ({
-            index,
-            ItemTypes,
-            moveRow,
-            onClick: () => props.onClick && props.onClick(record),
-          })}
-          {...props}
-        />
+        {ItemTypes === 'maintenance' ? (
+          <Table
+            bordered
+            columns={columns}
+            dataSource={data}
+            components={components}
+            onRow={(record, index) => ({
+              index,
+              ItemTypes,
+              moveRow,
+              onClick: () => props.onClick && props.onClick(record),
+              onDoubleClick: event => {
+                event.stopPropagation();
+                setSelectColor(record.id);
+                editEventType(record);
+              }, // 双击
+            })}
+            {...props}
+          />
+        ) : (
+          <Table
+            bordered
+            columns={columns}
+            dataSource={data}
+            components={components}
+            onRow={(record, index) => ({
+              index,
+              ItemTypes,
+              moveRow,
+              onClick: () => props.onClick && props.onClick(record),
+            })}
+            {...props}
+          />
+        )}
       </DndProvider>
     </div>
   );

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

+/* eslint-disable no-else-return */
+/* eslint-disable prefer-promise-reject-errors */
+/* eslint-disable indent */
+/* eslint-disable camelcase */
+/* eslint-disable no-unused-expressions */
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import {
+  Drawer,
+  Form,
+  Input,
+  notification,
+  Row,
+  Col,
+  Select,
+  Button,
+  Dropdown,
+  Tooltip,
+  Menu,
+  Space,
+  Radio,
+  Switch,
+  TreeSelect,
+  message,
+  AutoComplete,
+  InputNumber,
+  Popconfirm,
+  Table,
+  Modal,
+  Spin,
+  Empty,
+} from 'antd';
+import {
+  PlusOutlined,
+  DownOutlined,
+  StepForwardFilled,
+  InfoCircleOutlined,
+  MinusCircleOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
+import { setAutoFreeze } from 'immer';
+import styles from './maintenance.less';
+import RuleConfig from '@/components/RuleConfig';
+import { FormRender } from 'panda-xform';
+import {
+  CM_XWBPlan_AccountTable,
+  CM_XWBPlan_feedbackTable,
+  CM_XWBPlan_DataEditORAdd,
+  CM_XWBPlan_DataList,
+  CM_XWBPlan_DeviceAccountTable,
+  GetParentDeviceTemplate,
+  GetFeedbackTableFields,
+  GetAccountConfigInfo,
+} from '@/services/maintenance/api';
+import BaseTimeConfig from './components/BaseTimeConfig';
+
+import { GetTaskSyncField } from '@/services/PatrolFeedback/api';
+import { reloadTableFields } from '@/services/tablemanager/tablemanager';
+
+import {
+  GetCM_Event_LoadEventTable,
+  CM_Event_LoadDepartmentAndRoles,
+} from '@/services/standingBook/api';
+import RMSComponents from '@/components/RolePmSite/index';
+
+import ChangeAdd from './ChangeAdd';
+
+import logo from '@/assets/images/icons/值映射.png';
+import { objectExpression } from '@babel/types';
+
+const { Option } = Select;
+const AddModal = props => {
+  const { callBackSubmit = () => {}, visible, type, formObj, keepTableData } = props;
+
+  const [Type1, setType1] = useState('');
+  const [Type2, setType2] = useState('');
+  const [selectValue, setSelectValue] = useState('');
+  const [selectValue1, setSelectValue1] = useState('');
+  const [treeData, setTreeData] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+  const [filed, setFiled] = useState([]); // 传给子组件列表数据
+  const [keepFeed, setKeepFeed] = useState([]);
+  const [filed1, setFiled1] = useState({}); // 传给子组件列表数据
+  const [types, setTypes] = useState(''); // 弹窗类型
+  const [pickItem, setPickItem] = useState(''); // 复选框数据填入项
+  const [checkedList1, setCheckedList1] = useState([]); // 最新选择数据
+  const [characterValue, setCharacterValue] = useState(''); // 打开弹框之前数据
+  const [ff, setFf] = useState([]);
+  const [chee, setChee] = useState('');
+  const [isVisibleRoles, setIsVisibleRoles] = useState(false);
+  const [groupName, setGroupName] = useState('角色');
+  const [chooseGroupName, setChooseGroupName] = useState(['角色']);
+  const [keepFiled, setKeepFiled] = useState([]);
+  const [visibleChecked, setVisibleChecked] = useState(false);
+  const [visibleChecked1, setVisibleChecked1] = useState(false);
+  const [eventData, setEventData] = useState([]);
+  const [autoFlag, setAutoFlag] = useState(false); // 禁用自动派发
+  const [keepData, setKeepData] = useState('');
+  const [parentList, setParentList] = useState([]);
+  const [keep, setKeep] = useState([]); // 保存初始完整任务同步事件字段
+  const [keepAllData, setKeepAllData] = useState([]); // 保存所有关联事件类型数据
+  const [keepTree, setKeepTree] = useState([]);
+  const [keepAll, setKeepAll] = useState([]); // 保存所选关联事件下完整的字段值
+  const [showRule, setShowRule] = useState(false);
+  const [fieldList, setFieldList] = useState([]);
+  const [record, setRecord] = useState();
+  const [loading, setLoading] = useState(false);
+  const timeData = useRef(null);
+  const [keepTimeData, setKeepTimeData] = useState('');
+
+  const [form] = Form.useForm();
+  const [formAdd] = Form.useForm();
+  const { Item } = Form;
+  const { TextArea } = Input;
+  const { TreeNode } = TreeSelect;
+
+  const [characteristics1, setCharacteristics1] = useState([
+    {
+      name: '一日一次',
+      ID: 0,
+    },
+    {
+      name: '一周一次',
+      ID: 1,
+    },
+    {
+      name: '半月一次',
+      ID: 2,
+    },
+    {
+      name: '一月一次',
+      ID: 3,
+    },
+    {
+      name: '季度一次',
+      ID: 4,
+    },
+    {
+      name: '半年一次',
+      ID: 5,
+    },
+    {
+      name: '一年一次',
+      ID: 6,
+    },
+    {
+      name: '小时类',
+      ID: 7,
+      children: [
+        '1小时一次',
+        '2小时一次',
+        '3小时一次',
+        '4小时一次',
+        '6小时一次',
+        '8小时一次',
+        '12小时一次',
+      ],
+    },
+  ]);
+  const [formJson, setFormJson] = useState(null);
+  const [visibleLook, setVisibleLook] = useState(false);
+
+  const EditableContext = React.createContext(null);
+  const [dataSource, setDataSource] = useState([]);
+  const [count, setCount] = useState(2);
+  const handleDelete = key => {
+    const newData = dataSource.filter(item => item.key !== key);
+    setDataSource(newData);
+  };
+  const defaultColumns = [
+    {
+      title: '反馈名称',
+      dataIndex: 'name',
+      width: '70%',
+      editable: true,
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      align: 'center',
+      render: (_, record) =>
+        dataSource.length >= 1 ? (
+          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+            <span
+              onClick={() => handleLook(record.name)}
+              style={{ color: '#0e8ef7', cursor: 'pointer' }}
+            >
+              预览
+            </span>
+            <span
+              onClick={() => handleDelete(record.key)}
+              style={{ color: '#fb8686', cursor: 'pointer' }}
+            >
+              移除
+            </span>
+          </div>
+        ) : null,
+    },
+  ];
+  const EditableRow = ({ index, ...props }) => {
+    const [formFeed] = Form.useForm();
+    return (
+      <Form form={formFeed} component={false}>
+        <EditableContext.Provider value={formFeed}>
+          <tr {...props} />
+        </EditableContext.Provider>
+      </Form>
+    );
+  };
+
+  const EditableCell = ({
+    title,
+    editable,
+    children,
+    dataIndex,
+    record,
+    handleSave,
+    ...restProps
+  }) => {
+    const [editing, setEditing] = useState(false);
+    const inputRef = useRef(null);
+    const formBack = useContext(EditableContext);
+    useEffect(() => {
+      if (editing && inputRef.current) {
+        inputRef.current.focus();
+      }
+    }, [editing]);
+    const toggleEdit = () => {
+      setEditing(!editing);
+      formBack.setFieldsValue({
+        [dataIndex]: record[dataIndex],
+      });
+    };
+    const save = async () => {
+      try {
+        const values = await formBack.validateFields();
+        toggleEdit();
+        handleSave({
+          ...record,
+          ...values,
+        });
+      } catch (errInfo) {
+        console.log('Save failed:', errInfo);
+      }
+    };
+    let childNode = children;
+    if (editable) {
+      childNode = editing ? (
+        <Form.Item
+          style={{
+            margin: 0,
+          }}
+          name={dataIndex}
+          rules={[
+            {
+              required: true,
+              message: `${title} is required.`,
+            },
+          ]}
+        >
+          <Select ref={inputRef} showSearch onPressEnter={save} onBlur={save}>
+            {filed
+              ? filed.map((item, index) => (
+                  <Option key={index} value={item}>
+                    {item}
+                  </Option>
+                ))
+              : ''}
+          </Select>
+        </Form.Item>
+      ) : (
+        <div
+          className="editable-cell-value-wrap"
+          style={{
+            paddingRight: 24,
+          }}
+          onClick={toggleEdit}
+        >
+          {children}
+        </div>
+      );
+    }
+    return <td {...restProps}>{childNode}</td>;
+  };
+
+  const handleAdd = () => {
+    const newData = {
+      key: count,
+      name: `${filed[0]}`,
+    };
+    setDataSource([...dataSource, newData]);
+    setCount(count + 1);
+  };
+  const handleSave = row => {
+    const newData = [...dataSource];
+    const index = newData.findIndex(item => row.key === item.key);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+    setDataSource(newData);
+  };
+  const components = {
+    body: {
+      row: EditableRow,
+      cell: EditableCell,
+    },
+  };
+
+  useEffect(() => {
+    let list = [];
+    keepFeed.forEach(i => {
+      let index = dataSource.find(val => val.name === i);
+      if (!index) {
+        list.push(i);
+      }
+    });
+    setFiled(list);
+    let arr = [];
+    dataSource.map(i => {
+      arr.push(i.name);
+    });
+    onChangeFeed(arr.toString(), 1);
+  }, [dataSource]);
+
+  const columns = defaultColumns.map(col => {
+    if (!col.editable) {
+      return col;
+    }
+    return {
+      ...col,
+      onCell: record => ({
+        record,
+        editable: col.editable,
+        dataIndex: col.dataIndex,
+        title: col.title,
+        handleSave,
+      }),
+    };
+  });
+
+  useEffect(() => {
+    if (!visibleLook) {
+      setFormJson(null);
+    }
+  }, [visibleLook]);
+
+  useEffect(() => {
+    getEventData();
+    if (visible) {
+      getRole();
+      if (type === 'add') {
+        setChee('否');
+        form.setFieldsValue({ isSubmit: '否', feedbackRule: '' });
+        getGetTaskSyncField();
+        setType1('');
+        setType2('');
+        setFiled1({});
+      } else if (type === 'edit') {
+        getParentList();
+
+        CM_XWBPlan_DataList({ id: formObj.id }).then(res => {
+          if (res.data[0].docycle.indexOf('{') === -1) {
+            setKeepTimeData(null);
+          } else {
+            let list = JSON.parse(res.data[0].docycle);
+            setKeepTimeData(list);
+          }
+
+          let data = res.data[0];
+          let mappingFields = JSON.parse(data.mappingFields);
+          onChangeEvent(data.relationEvent, mappingFields); // 改变关联事件类型
+          onChangeFeed(
+            formObj.feedbackName,
+            '',
+            formObj.mappingFields && JSON.parse(formObj.mappingFields),
+          );
+          if (data.isSubmit === '是') {
+            setAutoFlag(true);
+          } else {
+            setAutoFlag(false);
+          }
+          let str = data.feedbackName?.split(',');
+          let arr = [];
+          str?.forEach((i, index) => {
+            arr.push({ key: index + 1, name: i });
+          });
+          setDataSource(arr);
+          setVisibleChecked(data.isSubmit === '是');
+          setVisibleChecked1(data.autoAssign === '是');
+          data && form.setFieldsValue({ ...data });
+          if (data.parentBusinessName) {
+            form.setFieldsValue({ parentId: data.parentId });
+          } else {
+            form.setFieldsValue({ parentId: '' });
+          }
+
+          setType1(data.businessType);
+          setType2(data.accountName);
+        });
+      }
+    } else {
+      setKeepTimeData('');
+      setFormJson(null);
+      setDataSource([]);
+      setAutoFlag(false);
+      setVisibleChecked(false);
+      setVisibleChecked1(false);
+      setChee('');
+      form.resetFields();
+      formAdd.resetFields();
+      setKeepAll([]);
+      setKeepTree([]);
+      setKeepData([]);
+      setKeep([]);
+    }
+  }, [visible]);
+
+  useEffect(() => {
+    getRole();
+    getList();
+    getFeedbackTable();
+  }, []);
+
+  useEffect(() => {}, [keepData]);
+
+  const getParentList = e => {
+    let value = e ? e : formObj.accountName;
+    GetParentDeviceTemplate({ accountName: value }).then(res => {
+      if (res.code === 0) {
+        setParentList(res.data);
+      }
+    });
+  };
+
+  // 获取关联事件数据
+  const getEventData = () => {
+    GetCM_Event_LoadEventTable().then(res => {
+      if (res.code === 0) {
+        let aa = [];
+        let bb = [];
+        res.data.forEach(i => {
+          i.root.forEach(j => {
+            aa.push(j.name);
+            bb.push(j);
+          });
+        });
+        setKeepAllData(bb);
+        setEventData(aa);
+      }
+    });
+  };
+
+  const getList = () => {
+    CM_XWBPlan_DeviceAccountTable().then(res => {
+      if (res.code === 0) {
+        setTreeData(res.data);
+      }
+    });
+  };
+
+  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.forEach(i => {
+                let data = i.fromField.split('%');
+                i.fromField = data[0];
+                i.fromTable = data[1];
+              });
+            obj.isSubmit = visibleChecked === true ? '是' : '否';
+            obj.autoAssign = visibleChecked1 === true ? '是' : '否';
+            let datas = detailTimeData(timeData.current.getdata);
+            obj.docycle = JSON.stringify(datas);
+            let arr = [];
+            dataSource.forEach(i => {
+              arr.push(i.name);
+            });
+            obj.feedbackName = arr.toString();
+            if (type === 'add') {
+              CM_XWBPlan_DataEditORAdd({
+                ...obj,
+                mappingFields: mappingFields && JSON.stringify(mappingFields),
+              }).then(res => {
+                if (res.msg === '') {
+                  form.resetFields();
+                  callBackSubmit();
+                  notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '添加成功',
+                  });
+                } else {
+                  notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: res.msg,
+                  });
+                }
+              });
+            }
+            if (type === 'edit') {
+              obj.isSubmit = visibleChecked === true ? '是' : '否';
+              obj.autoAssign = visibleChecked1 === true ? '是' : '否';
+              CM_XWBPlan_DataEditORAdd({
+                ...obj,
+                id: formObj.id,
+                mappingFields: mappingFields && JSON.stringify(mappingFields),
+              }).then(res => {
+                if (res.msg === '') {
+                  form.resetFields();
+                  callBackSubmit();
+                  notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '编辑成功',
+                  });
+                } else {
+                  notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: res.msg,
+                  });
+                }
+              });
+            }
+          }
+        });
+      }
+    });
+  };
+
+  const detailTimeData = val => {
+    let data = '';
+    if (val.Unit === 'month') {
+      data = {
+        type: '月',
+        cycle: val.CycleLen,
+        begin: val.startLen,
+        excTime: [
+          {
+            mold: 'begin',
+            day: Number(val.MonthDayType1),
+            type: val.MonthType1,
+          },
+          {
+            mold: 'end',
+            day: Number(val.MonthDayType2),
+            type: val.MonthType2,
+          },
+        ],
+      };
+      return data;
+    } else if (val.Unit === 'week') {
+      data = {
+        type: '周',
+        cycle: val.startLen,
+        excTime: [
+          {
+            mold: 'begin',
+            day: detailWeekToNum(val.cities),
+            type: 'now',
+          },
+          {
+            mold: 'end',
+            day: detailWeekToNum(val.secondCity),
+            type: val.secondCity.indexOf('下') !== -1 ? 'next' : 'now',
+          },
+        ],
+      };
+      return data;
+    } else if (val.Unit === 'day') {
+      data = {
+        type: '日',
+        cycle: val.CycleLen,
+      };
+      return data;
+    } else if (val.Unit === 'hour') {
+      data = {
+        type: '小时',
+        cycle: val.CycleLen,
+      };
+      return data;
+    }
+  };
+
+  const detailWeekToNum = val => {
+    if (val.indexOf('周一') !== -1) {
+      return 1;
+    } else if (val.indexOf('周二') !== -1) {
+      return 2;
+    } else if (val.indexOf('周三') !== -1) {
+      return 3;
+    } else if (val.indexOf('周四') !== -1) {
+      return 4;
+    } else if (val.indexOf('周五') !== -1) {
+      return 5;
+    } else if (val.indexOf('周六') !== -1) {
+      return 6;
+    } else if (val.indexOf('周日') !== -1) {
+      return 7;
+    }
+  };
+  const inputType1 = e => {
+    setType1(e.target.value);
+    form.setFieldsValue({ businessType: e.target.value });
+  };
+  const inputType2 = e => {
+    setType2(e.target.value);
+    form.setFieldsValue({ accountName: e.target.value });
+  };
+
+  const pickFiled = fileds => {
+    if (form.getFieldValue(fileds)) {
+      setTypes('add');
+      setCharacterValue(form.getFieldValue(fileds));
+      setCheckedList1(form.getFieldValue(fileds).split(','));
+      setPickItem(fileds);
+      setIsVisible(true);
+    } else {
+      setTypes('add');
+      setCharacterValue(form.getFieldValue(fileds));
+      setCheckedList1([]);
+      setPickItem(fileds);
+      setIsVisible(true);
+    }
+  };
+  const pickFiled1 = fileds => {
+    if (form.getFieldValue(fileds)) {
+      setTypes('app');
+      setCheckedList1(form.getFieldValue(fileds).split(','));
+      setPickItem(fileds);
+      setIsVisibleRoles(true);
+    } else {
+      setTypes('app');
+      setCheckedList1([]);
+      setPickItem(fileds);
+      setIsVisibleRoles(true);
+    }
+  };
+  const getRole = () => {
+    CM_Event_LoadDepartmentAndRoles().then(res => {
+      if (res.msg === 'Ok') {
+        setFiled1(formateArrDataA1(res.data, 'groupType'));
+        setKeepFiled(groupArr(res.data, 'groupType'));
+        setFf(filed1['角色']);
+      }
+    });
+  };
+
+  const groupArr = (initialArr, name) => {
+    let list = {};
+    initialArr.data.forEach(i => {
+      let ar = [];
+      i.root.forEach(j => {
+        let ss = {};
+        ss.label = j.Name;
+        ss.value = j.ID.toString();
+        ar.push(ss);
+        // console.log(ss);
+      });
+      list[i.groupType] = ar;
+    });
+    return list;
+  };
+  const getFeedbackTable = () => {
+    CM_XWBPlan_feedbackTable().then(res => {
+      if (res.code === 0) {
+        let arr = [];
+        res.data.forEach((item, index) => {
+          arr.push(item.accountName);
+        });
+        setFiled(arr);
+        setKeepFeed(arr);
+      }
+    });
+  };
+  const formateArrDataA1 = (initialArr, name) => {
+    let aa = [];
+    let a1 = [];
+    let a2;
+    let a3 = [];
+    initialArr.data.forEach(i => {
+      a2 = i.groupType;
+      a1 = i.root;
+      a1.forEach(j => {
+        j.group = a2;
+      });
+      aa.push(i.root);
+    });
+    aa.forEach(p => {
+      p.forEach(o => {
+        a3.push(o);
+      });
+    });
+    // 判定传参是否符合规则
+    if (!(a3 instanceof Array)) {
+      return '请传入正确格式的数组';
+    }
+    if (!name) {
+      return '请传入对象属性';
+    }
+    // 先获取一下这个数组中有多少个"name"
+    let nameArr = [];
+    a3.forEach(i => {
+      if (nameArr.indexOf(i.group) === -1) {
+        nameArr.push(i.group);
+      }
+    });
+    // 新建一个包含多个list的结果对象
+    let tempObj = {};
+    // 根据不同的"name"生成多个数组
+    for (let k in nameArr) {
+      for (let j in a3) {
+        if (a3[j].group == nameArr[k]) {
+          // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
+          tempObj[nameArr[k]] = tempObj[nameArr[k]] || [];
+          tempObj[nameArr[k]].push(a3[j]);
+        }
+      }
+    }
+    for (let key in tempObj) {
+      let arr = [];
+      tempObj[key].map(item => {
+        tempObj[key] = arr;
+        arr.push(item.Name);
+      });
+    }
+    return tempObj;
+  };
+
+  const onOK = prop => {
+    setIsVisibleRoles(false);
+    let inputText = {};
+    inputText[prop.pickItem] = prop.str;
+    setCheckedList1(prop.stt);
+    form.setFieldsValue(inputText);
+  };
+
+  const onOK1 = prop => {
+    setIsVisible(false);
+    let inputText = {};
+    inputText[prop.pickItem] = prop.str;
+    setCheckedList1(prop.stt);
+    form.setFieldsValue(inputText);
+  };
+
+  const inputType = value => {
+    if (value) {
+      form.setFieldsValue({ businessType: value });
+    }
+  };
+
+  const change = e => {
+    if (e === true) {
+      setVisibleChecked1(false);
+    }
+    setVisibleChecked(e);
+    setAutoFlag(e);
+  };
+
+  const change1 = e => {
+    setVisibleChecked1(e);
+  };
+
+  const mapTreeSelect = org => {
+    if (org.children) {
+      return (
+        <TreeNode value={org.name} title={org.name} disabled>
+          {org.children.map(item => mapTreeSelect(item))}
+        </TreeNode>
+      );
+    }
+    if (org.name) {
+      return <TreeNode value={org.name} title={org.name} />;
+    }
+    return <TreeNode value={org} title={org} key={org} />;
+  };
+
+  const mapTree = org => {
+    if (org.Value) {
+      return (
+        <TreeNode value={org.Key} title={org.Key} disabled>
+          {org.Value.map(item => mapTree(item))}
+        </TreeNode>
+      );
+    }
+    return <TreeNode value={org} title={org} key={org} />;
+  };
+
+  const mapTreeFiled = (org, parent) => {
+    if (org.TableFields) {
+      return (
+        <TreeNode value={org.TableName} title={org.TableName} disabled>
+          {org.TableFields.map(item => mapTreeFiled(item, org.TableName))}
+        </TreeNode>
+      );
+    }
+    return (
+      <TreeNode value={`${org.FieldName}%${parent}`} title={org.FieldName} key={org.FieldName} />
+    );
+  };
+
+  // 获取字段名数据
+  const getGetTaskSyncField = (e, newKeep) => {
+    // 编辑时初始处理数据为下拉框过滤调已选数据
+    let dataList = newKeep ? newKeep : keep;
+    if (e) {
+      // 编辑时
+      let datalist = [...e];
+      let aa = e;
+      let from = [];
+      aa.forEach(i => {
+        if (i && i.fromField) {
+          from.push(`${i.fromField}%${i.fromTable}`);
+        }
+      });
+      let lastFrom = [];
+      dataList.forEach(j => {
+        if (from.indexOf(j) === -1) {
+          lastFrom.push(j);
+        }
+      });
+      // let bb = detailData(dataList, from);
+      // setKeepData(lastFrom);
+      // setKeep(lastFrom);
+      let arr = [];
+      datalist.forEach(i => {
+        if (i.fromTable) {
+          arr.push({ fromField: `${i.fromField}%${i.fromTable}`, toField: i.toField });
+        } else {
+          arr.push({ fromField: i.fromField, toField: i.toField });
+        }
+      });
+      setTimeout(() => {
+        formAdd.setFieldsValue({ parmars: arr }); // 处理数据让下拉框回显title值
+      }, 0);
+    } else {
+      setKeepData(dataList);
+    }
+  };
+
+  const changeValue = () => {
+    let aa = formAdd.getFieldsValue().parmars;
+    if (aa) {
+      let from = [];
+      let to = [];
+      aa.forEach(i => {
+        if (i && i.fromField) {
+          from.push(i.fromField);
+        }
+        if (i && i.toField) {
+          to.push(i.toField);
+        }
+      });
+      let lastTo = [];
+      let lastFrom = [];
+      keep.forEach(j => {
+        if (from.indexOf(j) === -1) {
+          lastFrom.push(j);
+        }
+      });
+      // let bb = detailData(keep, from);
+      // setKeepData(lastFrom);
+      keepAll.forEach(j => {
+        if (to.indexOf(j.name) === -1) {
+          lastTo.push(j);
+        }
+      });
+      setKeepTree(lastTo);
+    }
+  };
+
+  const detailData = (val, from) => {
+    let newKeep = {};
+    val.forEach(i => {
+      i.TableFields.forEach(j => {
+        let data = `${j.FieldName}%${i.TableName}`;
+        // if (from.indexOf(data) === -1) {
+        //   if (!newKeep[i.TableName]) {
+        //     newKeep[i.TableName] = [j];
+        //   } else {
+        //     newKeep[i.TableName].push(j);
+        //   }
+        // }
+
+        if (from.indexOf(data) === -1) {
+          j.show = true;
+        } else {
+          j.show = false;
+        }
+      });
+    });
+    let arr = [];
+    let keys = Object.keys(newKeep);
+    keys.forEach(item => {
+      arr.push({ TableName: item, TableFields: newKeep[item] });
+    });
+    return val;
+  };
+
+  // 改变关联事件类型
+  const onChangeEvent = (e, i) => {
+    if (!i || !e) {
+      setKeepData(keep);
+      formAdd.resetFields();
+    }
+    let aa = keepAllData.find(item => item.name === e);
+    if (aa) {
+      getReloadTableField(aa.tableName, i); // 找到关联事件对应事件表获取对应表的所有字段
+    }
+  };
+
+  const getReloadTableField = (e, i) => {
+    reloadTableFields({
+      tableName: e,
+    }).then(res => {
+      if (res.msg === 'Ok') {
+        setKeepAll(res.data.root);
+        // 编辑时过滤下l拉框初始数据
+        if (i) {
+          let aa = i;
+          let to = [];
+          aa.forEach(j => {
+            if (j && j.toField) {
+              to.push(j.toField);
+            }
+          });
+          let lastTo = [];
+          res.data.root.forEach(b => {
+            if (to.indexOf(b.name) === -1) {
+              lastTo.push(b);
+            }
+          });
+          setKeepTree(lastTo);
+        } else {
+          setKeepTree(res.data.root);
+        }
+
+        let arrList = [];
+        let data = {};
+        let listArr = [];
+        res.data.root.forEach(item => {
+          arrList.push(item.name);
+        });
+        data.TableFieldNames = arrList;
+        data.TableName = e;
+        listArr.push(data);
+        let arr = formateArrDataA(res.data.root, 'group');
+        let newArr = [];
+        Object.keys(arr).forEach((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);
+        });
+        // setKeepTree(aa);
+        // setKeepAll(aa);
+        // all.current = aa;
+      }
+    });
+  };
+  const formateArrDataA = (initialArr, name) => {
+    // 判定传参是否符合规则
+    if (!(initialArr instanceof Array)) {
+      return '请传入正确格式的数组';
+    }
+    if (!name) {
+      return '请传入对象属性';
+    }
+    let arr = {};
+    initialArr.forEach((item, index) => {
+      let data = item.group;
+      if (!arr[data]) {
+        arr[data] = [item];
+      } else {
+        arr[data].push(item);
+      }
+    });
+    return arr;
+  };
+
+  const onChangeFeed = (val, flag, str) => {
+    GetFeedbackTableFields({ feedbackName: val }).then(res => {
+      if (res.code === 0) {
+        let newData = [res.data.DeviceData];
+        res.data.FeedbackData.length > 0 &&
+          res.data.FeedbackData.forEach(i => {
+            newData.push(i);
+          });
+        setKeepData(newData);
+        setKeep(newData);
+        if (str) {
+          // 编辑初次回显处理过滤下拉款数据
+          getGetTaskSyncField(str, newData);
+        }
+      }
+    });
+    GetAccountConfigInfo({ accountName: val }).then(res => {
+      if (res.code === 0) {
+        let list = res.data.editFieldGroup.split(',');
+        let newList = list.filter(i => i && i.trim());
+        let data = [{ TableName: res.data.tableName, TableFieldNames: newList }];
+        setFieldList(data);
+      }
+    });
+    if (flag) {
+      formAdd.setFieldsValue({ parmars: [] });
+    }
+  };
+
+  const handleLook = val => {
+    setVisibleLook(true);
+    setLoading(true);
+    setRecord(val);
+    GetAccountConfigInfo({ accountName: val }).then(res => {
+      setLoading(false);
+      if (res.code === 0) {
+        let obj = res.data.formJson && JSON.parse(res.data.formJson).properties;
+
+        if (Object.keys(obj).length !== 0) {
+          setFormJson({ formJson: res.data.formJson });
+        } else {
+          setFormJson(null);
+        }
+      }
+    });
+  };
+
+  const saveRule = e => {
+    form.setFieldsValue({ feedbackRule: e });
+    setShowRule(false);
+  };
+
+  const editRule = () => {
+    setShowRule(true);
+  };
+
+  const options = [
+    {
+      value: '巡检',
+    },
+    {
+      value: '保养',
+    },
+    {
+      value: '水箱清洗',
+    },
+    {
+      value: '扫码巡检',
+    },
+  ];
+
+  const timeChange = e => {};
+
+  return (
+    <Drawer
+      title="模板配置"
+      visible={visible}
+      destroyOnClose
+      width="600px"
+      {...props}
+      footer={
+        <Space>
+          <Button onClick={onSubmit} type="primary">
+            确定
+          </Button>
+        </Space>
+      }
+    >
+      <Form form={form} labelCol={{ span: 7 }} style={{ overflowY: 'scroll' }}>
+        <Row>
+          <Col span={24}>
+            <div className={styles.titleIcon}>
+              <div className={styles.icon} />
+              <div className={styles.font}>模板基础信息</div>
+            </div>
+          </Col>
+          <Col span={24}>
+            <Item
+              label="业务名称"
+              name="businessName"
+              labelCol={{ span: 5 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请输入业务名称',
+                },
+                {
+                  validator: (rule, value) => {
+                    let aa = form.getFieldValue().businessName;
+                    if (type === 'add' && keepTableData.indexOf(aa) != -1) {
+                      return Promise.reject('业务名称已存在');
+                    }
+                    if (
+                      type === 'edit' &&
+                      keepTableData.indexOf(aa) != -1 &&
+                      aa != formObj.businessName
+                    ) {
+                      return Promise.reject('业务名称已存在');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Input placeholder="业务名称不可重复" />
+            </Item>
+          </Col>
+          <Col span={24}>
+            <Item
+              label="业务类型"
+              name="businessType"
+              labelCol={{ span: 5 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请输入业务名称',
+                },
+                {
+                  validator: (rule, value) => {
+                    if (form.getFieldsValue().businessType == '') {
+                      return Promise.reject('业务类型必填');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <AutoComplete placeholder="选择业务类型" options={options} allowClear />
+            </Item>
+          </Col>
+          <Col span={24}>
+            <div className={styles.titleIcon}>
+              <div className={styles.icon} />
+              <div className={styles.font}>模板应用范围</div>
+            </div>
+          </Col>
+          <Col span={24}>
+            <Item
+              label="维保设备"
+              name="accountName"
+              labelCol={{ span: 5 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请选择维保设备',
+                },
+              ]}
+            >
+              <TreeSelect
+                showSearch
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder="请选择维保设备"
+                allowClear
+                treeDefaultExpandAll
+                showCheckedStrategy
+                onChange={e => {
+                  getParentList(e);
+                }}
+              >
+                {treeData.map(i => mapTree(i))}
+              </TreeSelect>
+            </Item>
+          </Col>
+          {form.getFieldsValue().accountName ? (
+            <Col span={24}>
+              <Item
+                label={
+                  <div className={styles.labelItem}>
+                    <Tooltip title="针对组合设备的反馈模板方式，可独立配置模板并挂接父子关系，批量反馈">
+                      <InfoCircleOutlined
+                        style={{
+                          color: 'rgb(24, 144, 255)',
+                          marginLeft: '5px',
+                          marginRight: '3px',
+                        }}
+                      />
+                    </Tooltip>
+                    父业务模板
+                  </div>
+                }
+                name="parentId"
+                labelCol={{ span: 5 }}
+              >
+                <Select placeholder="选择父业务模板" showSearch allowClear>
+                  {parentList
+                    ? parentList.map((item, index) => (
+                        <Option key={index.ID} value={item.ID}>
+                          {item.TemplateName}
+                        </Option>
+                      ))
+                    : ''}
+                </Select>
+              </Item>
+            </Col>
+          ) : (
+            <Col span={24}>
+              <Item
+                label={
+                  <div className={styles.labelItem}>
+                    <Tooltip title="针对组合设备的反馈模板方式，可独立配置模板并挂接父子关系，批量反馈">
+                      <InfoCircleOutlined
+                        style={{
+                          color: 'rgb(24, 144, 255)',
+                          marginLeft: '5px',
+                          marginRight: '3px',
+                        }}
+                      />
+                    </Tooltip>
+                    父业务模板
+                  </div>
+                }
+                name="parentId"
+                labelCol={{ span: 5 }}
+              >
+                <Select placeholder="选择父业务模板" disabled>
+                  {parentList
+                    ? parentList.map((item, index) => (
+                        <Option key={index.ID} value={item.ID}>
+                          {item.TemplateName}
+                        </Option>
+                      ))
+                    : ''}
+                </Select>
+              </Item>
+            </Col>
+          )}
+          <Col span={24}>
+            <Item
+              label={
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <div
+                    style={{
+                      color: '#fb0000',
+                      marginRight: '4px',
+                      marginTop: '3px',
+                      fontSize: '15px',
+                    }}
+                  >
+                    *
+                  </div>
+                  <span>填报内容</span>
+                </div>
+              }
+              name="feedbackName"
+              labelCol={{ span: 5 }}
+              rules={[
+                {
+                  validator: (rule, value) => {
+                    if (dataSource.length === 0) {
+                      return Promise.reject('填报内容必填');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+              style={{ marginBottom: '10px' }}
+            >
+              {/* <Select
+                placeholder="请选择填报内容"
+                showSearch
+                allowClear
+                onChange={e => onChangeFeed(e, 1)}
+              >
+                {filed
+                  ? filed.map((item, index) => (
+                      <Option key={index} value={item}>
+                        {item}
+                      </Option>
+                    ))
+                  : ''}
+              </Select> */}
+              <div
+                style={{
+                  fontSize: '12px',
+                  color: '#bfbcbc',
+                  marginTop: '6px',
+                  marginBottom: '5px',
+                }}
+              >
+                请选择此设备巡检后的反馈表单，来源与类型维设备反馈的台账
+              </div>
+              <Table
+                size="small"
+                components={components}
+                rowClassName={() => 'editable-row'}
+                bordered
+                dataSource={dataSource}
+                columns={columns}
+                pagination={false}
+                id="box"
+              />
+            </Item>
+          </Col>
+          <Col span={24}>
+            <Button
+              onClick={handleAdd}
+              icon={<EditOutlined />}
+              style={{
+                marginBottom: 16,
+                marginLeft: 114,
+                borderRadius: '5px',
+              }}
+            >
+              添加设备反馈
+            </Button>
+          </Col>
+          {/* <Col span={24}>
+            <Item label="执行周期" name="docycle" labelCol={{ span: 5 }}>
+              <TreeSelect
+                showSearch
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                placeholder="请选择执行周期"
+                allowClear
+                treeDefaultExpandAll
+                showCheckedStrategy
+              >
+                {characteristics1.map(i => mapTreeSelect(i))}
+              </TreeSelect>
+            </Item>
+          </Col> */}
+          <BaseTimeConfig
+            keepTimeData={keepTimeData}
+            ref={timeData}
+            visible={visible}
+            type={type}
+          />
+          {/* <Col span={24}>
+            <Item label="周期模式" name="docycle1" labelCol={{ span: 5 }}>
+              <Radio.Group value={timeData} onChange={timeChange}>
+                <Radio value={1}>按小时</Radio>
+                <Radio value={2}>按日</Radio>
+                <Radio value={3}>按周</Radio>
+                <Radio value={4}>按月</Radio>
+                <Radio value={5}>按季度</Radio>
+                <Radio value={6}>按年</Radio>
+              </Radio.Group>
+            </Item>
+          </Col>
+          <Col span={24}>
+            <Item label="周期设置" labelCol={{ span: 5 }} style={{ marginBottom: '0' }}>
+              <Row>
+                <Col span={8}>
+                  <Item name="docycle2">
+                    <InputNumber min={1} defaultValue={1} style={{ width: '50px' }} />
+                  </Item>
+                </Col>
+                <Col span={3}>
+                  <div style={{ marginTop: '5px', marginLeft: '2px' }}>日</div>
+                </Col>
+                <Col span={8}>
+                  <Item name="docycle3">
+                    <InputNumber min={1} defaultValue={1} style={{ width: '50px' }} />
+                  </Item>
+                </Col>
+                <Col span={3}>
+                  <div style={{ marginTop: '5px', marginLeft: '2px' }}>次</div>
+                </Col>
+              </Row>
+            </Item>
+          </Col>
+          <Col span={24}>
+            <Item label="执行时间" name="docycle4" labelCol={{ span: 5 }}>
+              <Input />
+            </Item>
+          </Col> */}
+          <Col span={24}>
+            <div className={styles.titleIcon}>
+              <div className={styles.icon} />
+              <div className={styles.font}>任务执行角色</div>
+            </div>
+          </Col>
+          <Col span={24}>
+            <Item
+              label="执行角色"
+              name="doRole"
+              labelCol={{ span: 5 }}
+              rules={[
+                {
+                  validator: (rule, value) => {
+                    if (form.getFieldValue().doRole === '') {
+                      return Promise.reject('执行角色必填');
+                    }
+                    return Promise.resolve();
+                  },
+                },
+                {
+                  required: true,
+                  message: '请选择执行角色',
+                },
+              ]}
+            >
+              <div style={{ display: 'flex' }}>
+                <Item name="doRole" style={{ marginBottom: 0, width: '100%' }}>
+                  <Input placeholder="请选择执行角色" allowClear />
+                </Item>
+                <Button
+                  type="dashed"
+                  onClick={() => pickFiled1('doRole')}
+                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
+                  style={{ marginLeft: '10px', width: '70px' }}
+                />
+              </div>
+            </Item>
+          </Col>
+          {/* <Col span={12}>
+            <Item
+              label={
+                <div style={{ display: 'flex', alignItems: 'center' }}>
+                  <Tooltip title="任务提前生成天数，仅适用于接口定时执行">
+                    <InfoCircleOutlined
+                      style={{
+                        color: '#1890ff',
+                        marginRight: '2px',
+                      }}
+                    />
+                  </Tooltip>
+
+                  <span>预生成天数</span>
+                </div>
+              }
+              labelCol={{ span: 10 }}
+              name="produceDays"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入预生成天数',
+                },
+              ]}
+            >
+              <Input placeholder="请输入预生成天数" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item
+              label="在线任务量"
+              name="onLines"
+              labelCol={{ span: 10 }}
+              rules={[
+                {
+                  required: true,
+                  message: '请输入在线任务量',
+                },
+              ]}
+            >
+              <Input placeholder="请输入在线任务量" />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item label="自动派发" name="autoAssign" labelCol={{ span: 10 }}>
+              <Switch
+                checkedChildren="是"
+                unCheckedChildren="否"
+                checked={visibleChecked1}
+                onChange={change1}
+                disabled={autoFlag}
+              />
+            </Item>
+          </Col>
+          <Col span={12}>
+            <Item label="是否送审" name="isSubmit" labelCol={{ span: 10 }}>
+              <Switch
+                checkedChildren="是"
+                unCheckedChildren="否"
+                checked={visibleChecked}
+                onChange={change}
+              />
+            </Item>
+          </Col>
+          <Col span={24}>
+            <Item
+              label="SQL过滤"
+              name="filterCondition"
+              labelCol={{ span: 5 }}
+              rules={[
+                {
+                  validator: (rule, value) => {
+                    let filterValue = form.getFieldsValue().filterCondition;
+                    if (filterValue) {
+                      if (
+                        filterValue.substring(0, 3) !== 'and' &&
+                        filterValue.substring(0, 3) !== 'AND'
+                      ) {
+                        return Promise.reject('请以and开头');
+                      }
+                      return Promise.resolve();
+                    }
+                    return Promise.resolve();
+                  },
+                },
+              ]}
+            >
+              <Input placeholder="例如：and 泵房品牌='熊猫'（SQL表达式）" />
+            </Item>
+          </Col> */}
+          <Col span={24}>
+            <div className={styles.titleIcon}>
+              <div className={styles.icon} />
+              <div className={styles.font}>异常事件联动</div>
+            </div>
+          </Col>
+          <Col span={24}>
+            <Item label="联动条件" name="feedbackRule" labelCol={{ span: 5 }}>
+              <div
+                style={{
+                  border: '2px solid #6A98FA',
+                  minHeight: '34px',
+                  lineHeight: '34px',
+                  textAlign: 'center',
+                }}
+                onClick={() => {
+                  if (dataSource && dataSource.length === 0) {
+                    message.warning('请先选择填报内容！');
+                  } else {
+                    editRule();
+                  }
+                }}
+              >
+                <span>{form.getFieldsValue().feedbackRule}</span>
+              </div>
+            </Item>
+          </Col>
+          {form.getFieldsValue().feedbackRule !== '' ? (
+            <Col span={24}>
+              <Item
+                label="关联事件"
+                name="relationEvent"
+                labelCol={{ span: 5 }}
+                rules={[{ required: true, message: '请选择关联事件类型' }]}
+              >
+                <Select
+                  placeholder="选择关联事件类型"
+                  showSearch
+                  onChange={e => onChangeEvent(e)}
+                  allowClear
+                >
+                  {eventData
+                    ? eventData.map((item, index) => (
+                        <Option key={index} value={item}>
+                          {item}
+                        </Option>
+                      ))
+                    : ''}
+                </Select>
+              </Item>
+            </Col>
+          ) : (
+            <Col span={24}>
+              <Item label="关联事件" name="relationEvent" labelCol={{ span: 5 }}>
+                <Select
+                  placeholder="选择关联事件类型"
+                  showSearch
+                  onChange={e => onChangeEvent(e)}
+                  allowClear
+                >
+                  {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: '114px' }}>
+              当配置了关联事件后，可配置字段映射规则
+            </span>
+            <br />
+            <span style={{ fontSize: '12px', color: '#bfbcbc', marginLeft: '114px' }}>
+              配置后，设备维保发起的工单，可以传递该维保任务信息
+            </span>
+          </Col>
+          <Col span={4} />
+          <Col span={19}>
+            <Item style={{ marginTop: '20px', marginLeft: '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: '请填写字段名' },
+                              {
+                                validator: (rule, value) => {
+                                  if (value) {
+                                    let filterValue = formAdd.getFieldsValue().parmars;
+                                    let num = filterValue.findIndex(i => i.fromField === value);
+                                    let index = rule.field.split('.')[1];
+                                    if (num !== undefined && num !== Number(index)) {
+                                      return Promise.reject('字段重复');
+                                    }
+                                  }
+                                  return Promise.resolve();
+                                },
+                              },
+                            ]}
+                          >
+                            <TreeSelect
+                              showSearch
+                              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                              placeholder="请选择字段名"
+                              treeDefaultExpandAll
+                              style={{ width: '159px' }}
+                              showCheckedStrategy
+                              onFocus={() => {
+                                if (dataSource && dataSource.length === 0) {
+                                  message.warning('请先选择填报内容！');
+                                }
+                              }}
+                            >
+                              {keepData.length > 0 && keepData.map(i => mapTreeFiled(i))}
+                            </TreeSelect>
+                          </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: '7px', width: '423px' }}
+                          // disabled={keepData && !(keepData.length > 0)}
+                        >
+                          添加映射
+                        </Button>
+                      </Form.Item>
+                    </>
+                  )}
+                </Form.List>
+              </Form>
+            </Item>
+          </Col>
+        </Row>
+      </Form>
+      <ChangeAdd
+        visible={isVisible}
+        onCancel={() => setIsVisible(false)}
+        callBackSubmit={onOK1}
+        newCheckedList={checkedList1}
+        isType={types}
+        filed={filed}
+        type={type}
+        filed1={filed1}
+        ff={ff}
+        pickItem={pickItem}
+        characterValue={characterValue}
+      />
+      <RMSComponents
+        visible={isVisibleRoles}
+        onCancel={() => setIsVisibleRoles(false)}
+        callBackSubmit={onOK}
+        newCheckedList={checkedList1} // 单选框中的值
+        pickItem={pickItem}
+        groupName={groupName} // 打开组件展示的分组名，用来首次获取数据
+        chooseGroupName={chooseGroupName} // 可选分组名
+        keepFiled={keepFiled}
+        dataType="name"
+      />
+      <RuleConfig
+        RuleContent={form.getFieldsValue().feedbackRule || ''}
+        tableName={form.getFieldsValue().feedbackName}
+        fieldList={fieldList}
+        visible={showRule}
+        handleCancel={() => setShowRule(false)}
+        onSubumit={e => saveRule(e)}
+        flag={2}
+      />
+      <Modal
+        title={record}
+        visible={visibleLook}
+        onCancel={() => setVisibleLook(false)}
+        width="1536px"
+        bodyStyle={{ height: '700px', overflow: 'scroll' }}
+        footer={null}
+      >
+        <Spin spinning={loading}>
+          {formJson ? (
+            <FormRender schemaValues={formJson} />
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: '300px' }} />
+          )}
+        </Spin>
+      </Modal>
+    </Drawer>
+  );
+};
+export default AddModal;

src/pages/bsmanager/patrolMaintenance/maintenance/components/BaseTimeConfig.jsx

+/* eslint-disable no-lonely-if */
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-else-return */
+// 基础信息配置
+import { Form, Radio, Select, Row, Col } from 'antd';
+import React, { useEffect, useRef, useState } from 'react';
+
+import styles from './BaseTimeConfig.less';
+const provinceData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+const cityData = {
+  周一: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+  周二: ['周二', '周三', '周四', '周五', '周六', '周日', '下周一'],
+  周三: ['周三', '周四', '周五', '周六', '周日', '下周一', '下周二'],
+  周四: ['周四', '周五', '周六', '周日', '下周一', '下周二', '下周三'],
+  周五: ['周五', '周六', '周日', '下周一', '下周二', '下周三', '下周四'],
+  周六: ['周六', '周日', '下周一', '下周二', '下周三', '下周四', '下周五'],
+  周日: ['周日', '下周一', '下周二', '下周三', '下周四', '下周五', '下周六'],
+};
+const BaseConfig = (props, ref) => {
+  const Mobj = {
+    首: 1,
+    次: 2,
+    末: 3,
+  };
+  const weekArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+  const [CycleLen, setCycleLen] = useState(2); // xx周期 一次
+  const [MonthType1, setMonthType1] = useState('首'); // 月选择 首次末
+  const [MonthType2, setMonthType2] = useState('首');
+  const [MonthType3, setMonthType3] = useState('首');
+  const [MonthDayType1, setMonthDayType1] = useState('1'); // 月选择-日期
+  const [MonthDayType2, setMonthDayType2] = useState('1'); // 月选择-日期
+  const [cities, setCities] = useState('周一');
+  const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0]);
+  const [startLen, setstartLen] = useState(1); // 开始日期
+  const [Unit, setValue] = useState();
+
+  useEffect(() => {
+    if (props.keepTimeData) {
+      let aa = props.keepTimeData;
+      let type = props.keepTimeData.type;
+      let num = props.keepTimeData.cycle;
+      if (type === '月') {
+        setValue('month');
+        setCycleLen(num);
+        setstartLen(props.keepTimeData.begin);
+        // setMonthType3(props.keepTimeData.begin.type);
+        setMonthType1(props.keepTimeData.excTime[0].type);
+        setMonthType2(props.keepTimeData.excTime[1].type);
+        setMonthDayType1(props.keepTimeData.excTime[0].day);
+        setMonthDayType2(props.keepTimeData.excTime[1].day);
+      } else if (type === '周') {
+        setValue('week');
+        setstartLen(num);
+        let start = props.keepTimeData.excTime[0];
+        let data = detailNumToWeek(start);
+        let end = props.keepTimeData.excTime[1];
+        let data1 = detailNumToWeek(end);
+        setCities(data);
+        setSecondCity(data1);
+      } else if (type === '日') {
+        setValue('day');
+        setCycleLen(num);
+      } else if (type === '小时') {
+        setValue('hour');
+        setCycleLen(num);
+      }
+    } else if (props.keepTimeData === '') {
+      if (props.type === 'add') {
+        setValue('day');
+      }
+    } else if (props.keepTimeData === null) {
+      setValue('day');
+    }
+  }, [props.keepTimeData]);
+
+  useEffect(() => {
+    if (!props.visible) {
+      setValue('');
+    }
+  }, [props.visible]);
+
+  const detailNumToWeek = val => {
+    if (val.day === 1) {
+      return val.type === 'now' ? '周一' : '下周一';
+    } else if (val.day === 2) {
+      return val.type === 'now' ? '周二' : '下周二';
+    } else if (val.day === 3) {
+      return val.type === 'now' ? '周三' : '下周三';
+    } else if (val.day === 4) {
+      return val.type === 'now' ? '周四' : '下周四';
+    } else if (val.day === 5) {
+      return val.type === 'now' ? '周五' : '下周五';
+    } else if (val.day === 6) {
+      return val.type === 'now' ? '周六' : '下周六';
+    } else if (val.day === 7) {
+      return val.type === 'now' ? '周日' : '下周日';
+    }
+  };
+
+  const handleProvinceChange = value => {
+    setCities(value);
+    setSecondCity(cityData[value][0]);
+  };
+  const onSecondCityChange = value => {
+    setSecondCity(value);
+  };
+
+  const onChange = e => {
+    if (e.target.value === 'hour') {
+      setCycleLen(2);
+    } else if (e.target.value === 'day') {
+      setCycleLen(2);
+    } else if (e.target.value === 'week') {
+      setstartLen(1);
+      setCities('周一');
+      setSecondCity('周一');
+    } else if (e.target.value === 'month') {
+      setCycleLen(2);
+      setstartLen(1);
+      setMonthType1('首');
+      setMonthType2('首');
+      setMonthDayType1('1');
+      setMonthDayType1('1');
+    }
+    setValue(e.target.value);
+  };
+
+  React.useImperativeHandle(ref, () => ({
+    // test即为子组件暴露给父组件的方法
+    getdata: {
+      CycleLen,
+      MonthType1,
+      MonthType2,
+      // MonthType3,
+      MonthDayType1,
+      MonthDayType2,
+      cities,
+      secondCity,
+      startLen,
+      Unit,
+    },
+  }));
+  const randerZqsz = value => {
+    if (value == 'day') {
+      return (
+        <>
+          <Select
+            value={CycleLen}
+            style={{
+              width: 100,
+            }}
+            onChange={value => {
+              setCycleLen(value);
+            }}
+            options={[1, 2, 3].map(province => ({
+              label: province,
+              value: province,
+            }))}
+          />{' '}
+          <span
+            style={{
+              margin: '5px',
+            }}
+          >
+            日一次
+          </span>
+        </>
+      );
+    }
+    if (value == 'week') {
+      return (
+        <div>
+          <span>从</span>
+          <Select
+            key="Select1"
+            value={startLen}
+            style={{
+              width: 80,
+              margin: '0 5px',
+            }}
+            onChange={value => {
+              setstartLen(value);
+              setCities(detailNumToWeek({ type: 'now', day: value }));
+              setSecondCity(detailNumToWeek({ type: 'now', day: value }));
+            }}
+            options={[1, 2, 3, 4, 5, 6, 7].map((city, i) => ({
+              label: weekArr[i],
+              value: city,
+            }))}
+          />
+          <span>开始</span>
+        </div>
+      );
+    }
+    if (value == 'month') {
+      return (
+        <div style={{ display: 'flex', width: '400px' }}>
+          <Select
+            value={CycleLen}
+            style={{
+              width: 60,
+            }}
+            onChange={value => {
+              setCycleLen(value);
+              setMonthType1('首');
+              setMonthType2('首');
+              setstartLen('1');
+              setMonthDayType1('1');
+              setMonthDayType2('1');
+            }}
+            options={[1, 2, 3].map(province => ({
+              label: province,
+              value: province,
+            }))}
+          />{' '}
+          <span
+            style={{
+              margin: '5px',
+            }}
+          >
+            月一次
+          </span>
+          <div>
+            <span style={{ marginLeft: '44px' }}>从</span>
+
+            {/* <Select
+              style={{
+                width: 65,
+                margin: '0 5px',
+              }}
+              onChange={(value) => {
+                setMonthType3(value);
+              }}
+              defaultValue={MonthType3}
+              options={['首', '次', '末'].map((city) => ({
+                label: city,
+                value: city,
+              }))}
+            /> */}
+            <Select
+              key="Select2"
+              value={startLen}
+              style={{
+                width: 65,
+                margin: '0 5px',
+              }}
+              onChange={value => {
+                setstartLen(value);
+                if (MonthType1 === '首') {
+                  setMonthDayType1(value);
+                }
+                if (MonthType2 === '首') {
+                  setMonthDayType2(value);
+                }
+              }}
+              options={[
+                '1',
+                '2',
+                '3',
+                '4',
+                '5',
+                '6',
+                '7',
+                '8',
+                '9',
+                '10',
+                '11',
+                '12',
+                '13',
+                '14',
+                '15',
+                '16',
+                '17',
+                '18',
+                '19',
+                '20',
+                '21',
+                '22',
+                '23',
+                '24',
+                '25',
+                '26',
+                '27',
+                '28',
+              ].map(city => ({
+                label: city,
+                value: city,
+              }))}
+            />
+            <span>号开始</span>
+          </div>
+        </div>
+      );
+    }
+    if (value == 'hour') {
+      /*  else if(value =='year'){
+ return     <Select
+ defaultValue='半年一次'
+      style={{
+        width: 120,
+        margin: '0 5px',
+      }}
+      options={['半年一次', '一年一次'].map((city) => ({
+        label:  city,
+        value: city,
+      }))}
+    ></Select>
+    }
+    else if(value =='quarter'){
+      return <span style={{color:'red'}}>按照1-3月、4-6月、7-9月、10-12月 覆盖计划起止时间，每季度一次</span>
+    } */
+      return (
+        <>
+          <Select
+            defaultValue={2}
+            value={CycleLen}
+            style={{
+              width: 100,
+            }}
+            onChange={value => {
+              setCycleLen(value);
+            }}
+            options={[2, 3, 4, 6, 8, 12].map(province => ({
+              label: province,
+              value: province,
+            }))}
+          />{' '}
+          <span
+            style={{
+              margin: '5px',
+            }}
+          >
+            小时一次
+          </span>
+        </>
+      );
+    }
+    return <></>;
+  };
+  const randerZxsj = (secondCity, value) => {
+    console.log(secondCity, value, 'secondCity');
+
+    if (value == 'day') {
+      if (secondCity == '两') {
+        return (
+          <>
+            {' '}
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                // justifyContent: 'center',
+              }}
+            >
+              <span>0时-</span>
+              <Select
+                style={{
+                  width: 65,
+                  margin: '0 5px',
+                }}
+                options={[
+                  1,
+                  2,
+                  3,
+                  4,
+                  5,
+                  6,
+                  7,
+                  8,
+                  9,
+                  10,
+                  11,
+                  12,
+                  13,
+                  14,
+                  15,
+                  16,
+                  17,
+                  18,
+                  19,
+                  20,
+                  21,
+                  22,
+                  23,
+                ].map(city => ({
+                  label: city + '时',
+                  value: city + '时',
+                }))}
+              />
+              <span>-24时</span>
+            </div>
+            <div style={{ color: 'red' }}>* 0:00到24:00</div>
+          </>
+        );
+      }
+      if (secondCity == '三') {
+        return (
+          <>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <span>0时-</span>
+              <Select
+                style={{
+                  width: 65,
+                  margin: '0 5px',
+                }}
+                options={[
+                  1,
+                  2,
+                  3,
+                  4,
+                  5,
+                  6,
+                  7,
+                  8,
+                  9,
+                  10,
+                  11,
+                  12,
+                  13,
+                  14,
+                  15,
+                  16,
+                  17,
+                  18,
+                  19,
+                  20,
+                  21,
+                  22,
+                  23,
+                ].map(city => ({
+                  label: city + '时',
+                  value: city + '时',
+                }))}
+              />
+              <span>-</span>
+              <Select
+                style={{
+                  width: 65,
+                  margin: '0 5px',
+                }}
+                options={[
+                  1,
+                  2,
+                  3,
+                  4,
+                  5,
+                  6,
+                  7,
+                  8,
+                  9,
+                  10,
+                  11,
+                  12,
+                  13,
+                  14,
+                  15,
+                  16,
+                  17,
+                  18,
+                  19,
+                  20,
+                  21,
+                  22,
+                  23,
+                ].map(city => ({
+                  label: city + '时',
+                  value: city + '时',
+                }))}
+              />
+              <span>-24时</span>
+            </div>
+            <div style={{ color: 'red' }}>* 0:00到24:00</div>
+          </>
+        );
+      } else {
+        return null;
+
+        {
+          <div style={{ color: 'red' }}>* 0:00到24:00</div>;
+        }
+      }
+    } else if (value == 'week') {
+      return (
+        <>
+          <span style={{ marginRight: '5px' }}>从</span>
+          <>
+            <Select
+              //  defaultValue={provinceData[0]}
+              value={cities}
+              style={{
+                width: 90,
+              }}
+              onChange={handleProvinceChange}
+              options={provinceData.map(province => ({
+                label: province,
+                value: province,
+                disabled: detailSort(province) ? true : false,
+              }))}
+            />{' '}
+            <span
+              style={{
+                margin: '5px',
+              }}
+            >
+              到
+            </span>
+            <Select
+              style={{
+                width: 90,
+              }}
+              value={secondCity}
+              onChange={onSecondCityChange}
+              options={cityData[cities].map(city => ({
+                label: city,
+                value: city,
+              }))}
+            />
+            <span
+              style={{
+                margin: '5px',
+              }}
+            >
+              执行任务
+            </span>
+          </>
+        </>
+      );
+    } else if (value == 'month') {
+      return (
+        <>
+          <span>从</span>
+
+          <Select
+            style={{
+              width: 65,
+              margin: '0 5px',
+            }}
+            onChange={value => {
+              setMonthType1(value);
+              setMonthType2(value);
+            }}
+            value={MonthType1}
+            options={['首', '次', '末'].slice(0, CycleLen).map(city => ({
+              label: city,
+              value: city,
+            }))}
+          />
+          <span>月</span>
+          <Select
+            style={{
+              width: 65,
+              margin: '0 5px',
+            }}
+            onChange={value => {
+              setMonthDayType1(value);
+            }}
+            value={MonthDayType1}
+            options={[
+              1,
+              2,
+              3,
+              4,
+              5,
+              6,
+              7,
+              8,
+              9,
+              10,
+              11,
+              12,
+              13,
+              14,
+              15,
+              16,
+              17,
+              18,
+              19,
+              20,
+              21,
+              22,
+              23,
+              24,
+              25,
+              26,
+              27,
+              28,
+            ].map(city => ({
+              label: city,
+              value: city,
+              disabled: MonthType1 === '首' && city < startLen ? true : false,
+            }))}
+          />
+          <span
+            style={{
+              margin: '5px',
+            }}
+          >
+            号到
+          </span>
+
+          <Select
+            key="MonthType2"
+            style={{
+              width: 65,
+              margin: '0 5px',
+            }}
+            value={MonthType2}
+            onChange={value => setMonthType2(value)}
+            options={['首', '次', '末'].slice(0, CycleLen).map(city => ({
+              label: city,
+              value: city,
+              disabled: Mobj[city] < Mobj[MonthType1] ? true : false,
+            }))}
+          />
+          <span>月</span>
+          <Select
+            style={{
+              width: 65,
+              margin: '0 5px',
+            }}
+            onChange={value => {
+              setMonthDayType2(value);
+            }}
+            value={MonthDayType2}
+            options={[
+              1,
+              2,
+              3,
+              4,
+              5,
+              6,
+              7,
+              8,
+              9,
+              10,
+              11,
+              12,
+              13,
+              14,
+              15,
+              16,
+              17,
+              18,
+              19,
+              20,
+              21,
+              22,
+              23,
+              24,
+              25,
+              26,
+              27,
+              28,
+            ].map(city => ({
+              label: city,
+              value: city,
+              disabled: MonthType1 === MonthType2 && city < MonthDayType1 ? true : false,
+            }))}
+          />
+          <span
+            style={{
+              margin: '5px',
+            }}
+          >
+            号
+          </span>
+        </>
+      );
+
+      /*  <CheckBox 
+      key={'month'}
+      checkedList={[1]}
+      plainOptions={['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号','11号','12号','13号','14号','15号','16号','17号','18号','19号','20号','21号','22号','23号','24号','25号','26号','27号','28号','29号','30号','31号']}
+      ></CheckBox> */
+    } else if (value == 'hour') {
+      if (CycleLen == 2) {
+        return (
+          <span style={{ color: 'red' }}>*每天 0-2时 2-4时 4-6时 6-8时 8-10时 执行以此类推..</span>
+        );
+      }
+      if (CycleLen == 3) {
+        return (
+          <span style={{ color: 'red' }}>
+            *每天 0-3时 3-6时 6-9时 9-12时 12-15时 执行以此类推..
+          </span>
+        );
+      }
+      if (CycleLen == 4) {
+        return (
+          <span style={{ color: 'red' }}>
+            *每天 0-4时 4-8时 8-12时 12-16时 16-20时 执行以此类推..
+          </span>
+        );
+      }
+      if (CycleLen == 6) {
+        return <span style={{ color: 'red' }}>*每天 0-6时 6-12时 12-1时 18-24时 执行</span>;
+      }
+      if (CycleLen == 8) {
+        return <span style={{ color: 'red' }}>*每天 0-8时 8-16时 16-24时 执行</span>;
+      }
+
+      if (CycleLen == 12) {
+        return <span style={{ color: 'red' }}>*每天 0-12时 12-24时 执行</span>;
+      }
+    } else {
+      return;
+    }
+  };
+
+  const detailSort = val => {
+    let newVal = numChange(val);
+    if (newVal < startLen) {
+      return true;
+    }
+    return false;
+  };
+
+  const numChange = val => {
+    if (val === '周一') {
+      return 1;
+    } else if (val === '周二') {
+      return 2;
+    } else if (val === '周三') {
+      return 3;
+    } else if (val === '周四') {
+      return 4;
+    } else if (val === '周五') {
+      return 5;
+    } else if (val === '周六') {
+      return 6;
+    } else if (val === '周日') {
+      return 7;
+    }
+  };
+
+  return (
+    <div className={styles.baseForm}>
+      {Unit && (
+        <Row>
+          <Col span={24}>
+            <Form.Item
+              labelCol={{ span: 5 }}
+              name="zqms"
+              label="周期模式"
+              initialValue={Unit}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <div>
+                <Radio.Group onChange={onChange} value={Unit}>
+                  <Radio value="hour">按小时</Radio>
+                  <Radio value="day">按日</Radio>
+                  <Radio value="week">按周</Radio>
+                  <Radio value="month">按月</Radio>
+                  {/* <Radio value={'quarter'}>按季度</Radio>
+                    <Radio value={'year'}>按年</Radio> */}
+                </Radio.Group>
+              </div>
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item labelCol={{ span: 5 }} name="zqsz" label="周期设置">
+              {randerZqsz(Unit)}
+            </Form.Item>
+          </Col>
+          {Unit !== 'day' && (
+            <Col span={24}>
+              <Form.Item labelCol={{ span: 5 }} name="zxsj" label="执行时间">
+                <div id="aaa">{randerZxsj(secondCity, Unit)}</div>
+              </Form.Item>
+            </Col>
+          )}
+        </Row>
+      )}
+    </div>
+  );
+};
+
+export default React.forwardRef(BaseConfig);

src/pages/bsmanager/patrolMaintenance/maintenance/components/BaseTimeConfig.less

+.baseForm {
+  display: flex;
+  flex-wrap: wrap;
+
+  width: 100%;
+  justify-content: space-between;
+  margin-top: 15px;
+}
+.FormLast {
+  color: red;
+}

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

@@ -2,7 +2,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable camelcase */
 import React, { useState, useEffect, useMemo } from 'react';
-import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag } from 'antd';
+import { Space, Table, Popconfirm, Tooltip, Button, notification, Tag, message } from 'antd';
 import {
   CM_XWBPlan_DataList,
   CM_XWBPlan_RemovePlan,
@@ -19,11 +19,14 @@ import {
 } from '@ant-design/icons';
 import styles from './maintenance.less';
 import AddModal from './AddModal';
+import AddModalNew from './AddModalNew';
 import OptionEditModal from './OptionEditModal';
 import SortModal from './SortModal';
+import DragTable from '@/components/DragTable/DragTable';
 
 const maintenance = () => {
   const [addVisible, setAddVisible] = useState(false);
+  const [addVisibleNew, setAddVisibleNew] = useState(false);
   const [optionVisible, setOptionVisible] = useState(false);
   const [type, setType] = useState('');
   const [formObj, setFormObj] = useState('');
@@ -33,10 +36,15 @@ const maintenance = () => {
   const [tableData, setTableData] = useState([]);
   const [keepTableData, setKeepTableData] = useState([]);
   const [activeName, setActiveName] = useState('template');
+  const [selectColor, setSelectColor] = useState({}); //
+
+  const setRowClassName = nodeID => {
+    return nodeID == selectColor ? styles.clickRowStyle : '';
+  };
 
   useEffect(() => {
     setTreeLoading(true);
-    if (activeName === 'template') {
+    if (activeName === 'template' || activeName === 'project') {
       getDataList();
     } else {
       getConfigList();
@@ -112,11 +120,19 @@ const maintenance = () => {
             },
           }),
           align: 'center',
-          render: record => (
-            <Tooltip placement="topLeft" title={record}>
-              {record}
-            </Tooltip>
-          ),
+          render: record => {
+            if (record === '保养') {
+              return <Tag color="purple">保养</Tag>;
+            } else if (record === '巡检') {
+              return <Tag color="geekblue">巡检</Tag>;
+            } else if (record === '水箱清洗') {
+              return <Tag color="cyan">水箱清洗</Tag>;
+            } else if (record === '扫码巡检') {
+              return <Tag color="cyan">扫码巡检</Tag>;
+            } else {
+              return <Tag color="orange">{record}</Tag>;
+            }
+          },
         },
         {
           title: '执行周期',
@@ -124,6 +140,19 @@ const maintenance = () => {
           key: 'docycle',
           width: 100,
           align: 'center',
+          onCell: () => ({
+            style: {
+              maxWidth: 100,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+          render: record => (
+            <Tooltip placement="topLeft" title={record}>
+              {record}
+            </Tooltip>
+          ),
         },
         {
           title: '维保设备',
@@ -157,6 +186,7 @@ const maintenance = () => {
           title: '反馈名称',
           dataIndex: 'feedbackName',
           key: 'feedbackName',
+          width: 200,
           onCell: () => ({
             style: {
               maxWidth: 200,
@@ -178,6 +208,7 @@ const maintenance = () => {
           dataIndex: 'doRole',
           key: 'doRole',
           align: 'center',
+          width: 200,
           onCell: () => ({
             style: {
               maxWidth: 200,
@@ -202,7 +233,7 @@ const maintenance = () => {
           align: 'center',
           onCell: () => ({
             style: {
-              maxWidth: 80,
+              maxWidth: 90,
               overflow: 'hidden',
               whiteSpace: 'nowrap',
               textOverflow: 'ellipsis',
@@ -218,7 +249,7 @@ const maintenance = () => {
           align: 'center',
           onCell: () => ({
             style: {
-              maxWidth: 80,
+              maxWidth: 90,
               overflow: 'hidden',
               whiteSpace: 'nowrap',
               textOverflow: 'ellipsis',
@@ -298,6 +329,219 @@ const maintenance = () => {
           ),
         },
       ];
+    } else if (activeName === 'project') {
+      return [
+        {
+          title: '业务名称',
+          dataIndex: 'businessName',
+          key: 'businessName',
+          width: 250,
+          onCell: () => ({
+            style: {
+              maxWidth: 250,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+          align: 'center',
+          render: record => (
+            <Tooltip placement="topLeft" title={record}>
+              {record}
+            </Tooltip>
+          ),
+        },
+        {
+          title: '业务类型',
+          dataIndex: 'businessType',
+          key: 'businessType',
+          width: 100,
+          onCell: () => ({
+            style: {
+              maxWidth: 100,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+          align: 'center',
+          render: record => {
+            if (record === '保养') {
+              return <Tag color="#2db7f5">保养</Tag>;
+            } else if (record === '巡检') {
+              return <Tag color="#08979c">巡检</Tag>;
+            } else if (record === '水箱清洗') {
+              return <Tag color="#d3adf7">水箱清洗</Tag>;
+            } else if (record === '扫码巡检') {
+              return <Tag color="#e3799e">扫码巡检</Tag>;
+            } else {
+              return <Tag color="#f50">{record}</Tag>;
+            }
+          },
+        },
+        {
+          title: '执行周期',
+          dataIndex: 'docycle',
+          key: 'docycle',
+          align: 'center',
+          width: 100,
+          onCell: () => ({
+            style: {
+              maxWidth: 100,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+          render: record => {
+            if (record) {
+              if (record.indexOf('{') === -1) {
+                return record;
+              } else {
+                let list = JSON.parse(record);
+                if (list.type === '小时') {
+                  return `${list.cycle}小时一次`;
+                } else if (list.type === '日') {
+                  return `${list.cycle}日一次`;
+                } else if (list.type === '周') {
+                  return `一周一次`;
+                } else if (list.type === '月') {
+                  return `${list.cycle}月一次`;
+                }
+              }
+            }
+          },
+        },
+        {
+          title: '维保设备',
+          dataIndex: 'accountName',
+          key: 'accountName',
+          width: 200,
+          onCell: () => ({
+            style: {
+              maxWidth: 200,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+          align: 'center',
+        },
+        {
+          title: '填报内容',
+          dataIndex: 'feedbackName',
+          key: 'feedbackName',
+          width: 300,
+          onCell: () => ({
+            style: {
+              maxWidth: 300,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+          align: 'center',
+          render: record => (
+            <Tooltip placement="topLeft" title={record}>
+              {record}
+            </Tooltip>
+          ),
+        },
+        {
+          title: '联动条件',
+          dataIndex: 'feedbackRule',
+          key: 'feedbackRule',
+          align: 'center',
+          width: 100,
+          render: record => {
+            if (record) {
+              return <Tag color="green">是</Tag>;
+            } else {
+              return <Tag color="blue">否</Tag>;
+            }
+          },
+        },
+        {
+          title: '执行角色',
+          dataIndex: 'doRole',
+          key: 'doRole',
+          align: 'center',
+          width: 300,
+          onCell: () => ({
+            style: {
+              maxWidth: 300,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+            },
+          }),
+
+          render: record => (
+            <Tooltip placement="topLeft" title={record}>
+              {record}
+            </Tooltip>
+          ),
+        },
+        {
+          title: '父业务模板',
+          dataIndex: 'parentBusinessName',
+          key: 'parentBusinessName',
+          width: 100,
+          align: 'center',
+        },
+        // {
+        //   title: '台账过滤条件',
+        //   dataIndex: 'filterCondition',
+        //   key: 'filterCondition',
+        //   width: 150,
+        //   onCell: () => ({
+        //     style: {
+        //       maxWidth: 150,
+        //       overflow: 'hidden',
+        //       whiteSpace: 'nowrap',
+        //       textOverflow: 'ellipsis',
+        //     },
+        //   }),
+        //   align: 'center',
+        //   render: record => (
+        //     <Tooltip placement="topLeft" title={record}>
+        //       {record}
+        //     </Tooltip>
+        //   ),
+        // },
+        {
+          title: '操作',
+          ellipsis: true,
+          key: 'action',
+          align: 'center',
+          render: (text, record) => (
+            <Space>
+              <Tooltip title="修改">
+                <EditTwoTone
+                  onClick={() => {
+                    editEventType(record);
+                    setSelectColor(record.id);
+                  }}
+                  style={{ fontSize: '16px' }}
+                />
+              </Tooltip>
+              <Tooltip title="删除">
+                <Popconfirm
+                  placement="bottomRight"
+                  title={<p>是否确认删除？</p>}
+                  okText="确认"
+                  cancelText="取消"
+                  onConfirm={() => {
+                    deleteEventType(record);
+                  }}
+                >
+                  <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} />
+                </Popconfirm>
+              </Tooltip>
+            </Space>
+          ),
+        },
+      ];
     } else {
       return [
         {
@@ -444,11 +688,20 @@ const maintenance = () => {
   }, [activeName]);
 
   const add = () => {
-    setAddVisible(true);
+    if (activeName === 'project') {
+      setAddVisibleNew(true);
+    } else {
+      setAddVisible(true);
+    }
+
     setType('add');
   };
   const editEventType = record => {
-    setAddVisible(true);
+    if (activeName === 'project') {
+      setAddVisibleNew(true);
+    } else {
+      setAddVisible(true);
+    }
     setType('edit');
     setFormObj(record);
   };
@@ -484,6 +737,8 @@ const maintenance = () => {
   const onSubmit = () => {
     if (activeName === 'template') {
       setAddVisible(false);
+    } else if (activeName === 'project') {
+      setAddVisibleNew(false);
     } else {
       setOptionVisible(false);
     }
@@ -515,6 +770,26 @@ const maintenance = () => {
     });
   };
 
+  // 拖拽回调函数
+  const dragCallBack = value => {
+    if (value && value.moveState) {
+      let arr = [];
+      value.data.forEach(i => {
+        arr.push(i.id);
+      });
+      let aa = arr.toString();
+      setTreeLoading(true);
+      CM_XWBPlan_ChangeOrder(aa).then(res => {
+        setTreeLoading(false);
+        if (res.code === 0) {
+          setTableData(value.data);
+        } else {
+          message.error(res.msg);
+        }
+      });
+    }
+  };
+
   return (
     <div className={styles.maintenanceContainer}>
       <div className={styles.contentContainers}>
@@ -532,12 +807,18 @@ const maintenance = () => {
             >
               设备库配置
             </div>
+            <div
+              className={activeName === 'project' ? styles.active : ''}
+              onClick={() => setActiveName('project')}
+            >
+              方案制定
+            </div>
           </div>
           <span
             style={{
               float: 'right',
               marginRight: '10px',
-              display: activeName === 'template' ? 'block' : 'none',
+              display: activeName === 'template' || activeName === 'project' ? 'block' : 'none',
             }}
           >
             <Button
@@ -552,45 +833,72 @@ const maintenance = () => {
             >
               <span style={{ marginTop: '-2px' }}>新增</span>
             </Button>
-            <Button
-              icon={<OrderedListOutlined className={styles.icon} />}
-              onClick={sort}
-              style={{
-                verticalAlign: 'middle',
-                marginTop: '10px',
-              }}
-            >
-              <span style={{ marginTop: '-2px' }}>调序</span>
-            </Button>
+            {activeName === 'template' && (
+              <Button
+                icon={<OrderedListOutlined className={styles.icon} />}
+                onClick={sort}
+                style={{
+                  verticalAlign: 'middle',
+                  marginTop: '10px',
+                }}
+              >
+                <span style={{ marginTop: '-2px' }}>调序</span>
+              </Button>
+            )}
           </span>
         </div>
-        <Table
-          // rowClassName={setRowClassName}
-          size="small"
-          rowKey="ID"
-          bordered
-          loading={treeLoading}
-          onRow={record => ({
-            onDoubleClick: event => {
-              event.stopPropagation();
-              if (activeName === 'template') {
-                editEventType(record);
-              } else {
-                editOption(record);
-              }
-            }, // 双击
-          })}
-          columns={columns}
-          dataSource={tableData}
-          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
-          pagination={{
-            showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
-            pageSizeOptions: [10, 20, 50, 100],
-            defaultPageSize: 20,
-            showQuickJumper: true,
-            showSizeChanger: true,
-          }}
-        />
+        {activeName === 'project' ? (
+          <DragTable
+            rowClassName={record => setRowClassName(record.id)}
+            size="small"
+            ItemTypes="maintenance"
+            rowKey={record => record.id}
+            bordered
+            loading={treeLoading}
+            dragCallBack={dragCallBack}
+            editEventType={editEventType}
+            setSelectColor={setSelectColor}
+            columns={columns}
+            dataSource={tableData}
+            scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
+            pagination={{
+              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+              pageSizeOptions: [10, 20, 50, 100],
+              defaultPageSize: 20,
+              showQuickJumper: true,
+              showSizeChanger: true,
+            }}
+          />
+        ) : (
+          <Table
+            // rowClassName={setRowClassName}
+            size="small"
+            rowKey="ID"
+            bordered
+            loading={treeLoading}
+            onRow={record => ({
+              onDoubleClick: event => {
+                event.stopPropagation();
+                if (activeName === 'template') {
+                  editEventType(record);
+                } else {
+                  editOption(record);
+                }
+              }, // 双击
+            })}
+            columns={columns}
+            dataSource={tableData}
+            scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
+            pagination={{
+              showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
+              pageSizeOptions: [10, 20, 50, 100],
+              defaultPageSize: 20,
+              showQuickJumper: true,
+              showSizeChanger: true,
+            }}
+          />
+        )}
+
         {/* 添加事件 */}
         <AddModal
           visible={addVisible}
@@ -601,6 +909,15 @@ const maintenance = () => {
           keepTableData={keepTableData}
           placement="right"
         />
+        <AddModalNew
+          visible={addVisibleNew}
+          type={type}
+          onClose={() => setAddVisibleNew(false)}
+          callBackSubmit={onSubmit}
+          formObj={formObj}
+          keepTableData={keepTableData}
+          placement="right"
+        />
         <OptionEditModal
           visible={optionVisible}
           onClose={() => setOptionVisible(false)}

src/pages/bsmanager/patrolMaintenance/maintenance/maintenance.less

 .maintenanceContainer {
   height: 100%;
+  .ant-table-body {
+    height: calc(100vh - 150px) !important;
+    width: 100%;
+  }
+  .ant-table-tbody {
+    .clickRowStyle {
+      background: #cfe7fd;
+    }
+    .clickRowStyle:hover > td {
+      background: #aed8fa;
+    }
+  }
 
   .contentContainers {
     height: 100%;
@@ -24,7 +36,7 @@
       margin-left: 10px;
       height: 100%;
 
-      >div {
+      > div {
         margin-right: 10px;
         border: 1px solid gainsboro;
         padding: 5px 10px;
@@ -33,8 +45,8 @@
           cursor: pointer;
         }
         &.active {
-          border-color: rgb(24,144,255);
-          color: rgb(24,144,255);
+          border-color: rgb(24, 144, 255);
+          color: rgb(24, 144, 255);
         }
       }
     }
@@ -53,7 +65,8 @@
   height: 38rem;
   overflow-y: scroll;
 
-  .ant-form-item-label>label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+  .ant-form-item-label
+    > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
     display: none;
   }
 
@@ -88,7 +101,6 @@
 }
 
 .optionModal {
-  
 }
 
 .doctorTable {
@@ -148,12 +160,12 @@
       width: 300px;
       overflow: hidden;
       white-space: nowrap;
-      margin-top:6px;
+      margin-top: 6px;
       .ant-checkbox + span {
         // width: 280px;
         // overflow: hidden;
         // text-overflow: ellipsis;
-    }
+      }
     }
   }
 }
@@ -173,4 +185,44 @@
   z-index: 1000;
   height: 99%;
   overflow: hidden;
-}
\ No newline at end of file
+}
+.titleIcon {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  .icon {
+    width: 3px;
+    height: 14px;
+    background-color: #0389f7;
+    margin-right: 10px;
+    border-radius: 10px;
+  }
+  .font {
+    font-size: 15px;
+    font-weight: bold;
+  }
+}
+.labelItem {
+  display: flex;
+  align-items: center;
+}
+:global {
+  .editable-cell {
+    position: relative;
+  }
+
+  .editable-cell-value-wrap {
+    padding: 5px 12px;
+    cursor: pointer;
+  }
+
+  .editable-row:hover .editable-cell-value-wrap {
+    padding: 4px 11px;
+    border: 1px solid #d9d9d9;
+    border-radius: 2px;
+  }
+
+  [data-theme='dark'] .editable-row:hover .editable-cell-value-wrap {
+    border: 1px solid #434343;
+  }
+}

src/pages/platformCenter/gis/schemeConfig/TileConfig/TileConfig.jsx

@@ -106,16 +106,20 @@ const TileData = props => {
     GetMaplayerByTerminalType({
       terminalType: 'baseMapscheme',
       isBaseMap: false,
-    }).then(res => {
-      console.log('res', res);
-      if (res.code == '0') {
-        setTreeLoading(false);
-        console.log(res.data.optionalLayer.layers);
-        setCardData(res.data.optionalLayer.layers);
-      } else {
+    })
+      .then(res => {
+        console.log('res', res);
+        if (res.code == '0') {
+          setTreeLoading(false);
+          console.log(res.data.optionalLayer.layers);
+          setCardData(res.data.optionalLayer.layers);
+        } else {
+          setTreeLoading(false);
+        }
+      })
+      .catch(() => {
         setTreeLoading(false);
-      }
-    });
+      });
   }, [flagAdd]);
   const changebaseMap = record => {
     setType('edit');
@@ -204,28 +208,32 @@ const TileData = props => {
     GettMaplayer({
       terminalType: 'base',
       isBaseMap: true,
-    }).then(res => {
-      if (res.code == '0') {
-        setTreeLoading(false);
-        setTileData(res.data.general.baseMap.layers);
-        let data = [];
-        res.data.general.baseMap.layers.map(item => {
-          data.push(item.servicename);
-          let index = baseMapData.indexOf(item.servicename);
-          if (index != -1) {
-            baseMapData.splice(index, 1);
-          }
-        });
-        setName(data);
-        setBaseMap(baseMapData);
-      } else {
+    })
+      .then(res => {
+        if (res.code == '0') {
+          setTreeLoading(false);
+          setTileData(res.data.general.baseMap.layers);
+          let data = [];
+          res.data.general.baseMap.layers.map(item => {
+            data.push(item.servicename);
+            let index = baseMapData.indexOf(item.servicename);
+            if (index != -1) {
+              baseMapData.splice(index, 1);
+            }
+          });
+          setName(data);
+          setBaseMap(baseMapData);
+        } else {
+          setTreeLoading(false);
+          notification.error({
+            message: '获取失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(() => {
         setTreeLoading(false);
-        notification.error({
-          message: '获取失败',
-          description: res.message,
-        });
-      }
-    });
+      });
   };
 
   const addType = () => {

src/pages/platformCenter/gis/schemeConfig/VectorData/VectorPreviewModal.jsx

@@ -147,7 +147,7 @@ const VectorPreviewModal = props => {
               getMapInfo={e => getMapInfo(e)}
               config={currentMeta}
               client="sandbox"
-              // widgets={[]}
+              widgets={[]}
             />
           )}
         </div>

src/routes/config.js

@@ -381,7 +381,7 @@ export default {
                 },
                 {
                   path: '/biz/patrolMaintenance/maintenance',
-                  name: '维保模板',
+                  name: '维保方案',
                   component: Maintenance,
                 },
               ],

src/utils/request/defaultConfig.js

@@ -98,6 +98,18 @@ const bizDataAdapter = response => {
   return response;
 };
 
+// 7. 请求超时
+const bizTimeoutHandler = response => {
+  const { status } = response;
+  if (status === 500) {
+    notification.warning({
+      title: '提示',
+      message: '请求超时',
+      duration: 4,
+    });
+  }
+};
+
 export default {
   bizDataAdapter,
   bizDevErrorAdapter,
@@ -105,4 +117,5 @@ export default {
   bizSuccessMessageAdapter,
   bizNotifyHandler,
   bizRedirectHandler,
+  bizTimeoutHandler,
 };

src/utils/request/index.js

@@ -8,6 +8,7 @@ import isFunction from 'lodash/isFunction';
 import extendConfig from './defaultConfig';
 const globalConfig = {
   bizRedirectHandler: extendConfig.bizRedirectHandler,
+  bizTimeoutHandler: extendConfig.bizTimeoutHandler,
 };
 const globalConfigMatchers = [];
 /* no-unused-vars */
@@ -27,6 +28,7 @@ const getMatchedConfig = requestConfig => {
   }
 };
 axios.defaults.withCredentials = true;
+axios.defaults.timeout = 60000;
 axios.interceptors.request.use(
   function(request) {
     const token = localStorage.getItem('token');
@@ -68,6 +70,8 @@ axios.interceptors.response.use(
       switch (error.response.status) {
         case 401:
           globalConfig.bizRedirectHandler(error.response);
+        case 500:
+          globalConfig.bizTimeoutHandler(error.response);
       }
     }
     return Promise.reject(error);
@@ -104,6 +108,7 @@ export const request = (config, ctx) => {
     bizDataAdapter,
     bizParamsAdapter,
     bizRequestAdapter,
+    bizTimeoutHandler,
   } = curConf;
 
   let finalParams = params || {};
@@ -162,6 +167,11 @@ export const request = (config, ctx) => {
           // 6. 数据转换
           const data = bizDataAdapter ? bizDataAdapter(res) : res;
 
+          // 7. 请求超时
+          if (bizTimeoutHandler) {
+            bizTimeoutHandler(res);
+          }
+
           resolve(data);
         }),
     );