feat: '事件配置新增通用事件配置'

src/pages/bsmanager/workOrder/incident/AddModal/AddAccount/index.jsx

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

src/pages/bsmanager/workOrder/incident/AddModal/AddAccount/index.less

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

src/pages/bsmanager/workOrder/incident/AddModal/index.js

 import React, { useEffect, useState, useRef } from 'react';
-import { Drawer, Form, Input, notification, Space, Row, Col, Select, Checkbox, Button, Tooltip, Image, Switch, Spin } from 'antd';
+import { Drawer, Table, Form, Input, notification, Space, Row, Col, Select, Checkbox, Button, Tooltip, Image, Switch, Spin } from 'antd';
 import {
   GetCM_Event_LoadEventTypeTable,
   LoadEventFields,
@@ -20,6 +20,7 @@ import caseImg from '@/assets/images/workOptions/工单.png';
 import caseChooseImg from '@/assets/images/workOptions/工单发起选中.png';
 import eventChooseImg from '@/assets/images/workOptions/事件选中.png';
 import SelectField from './SelectField';
+import AddAccount from './AddAccount';
 
 const { Option } = Select;
 const { Item } = Form;
@@ -415,6 +416,7 @@ const AddModal = (props) => {
     maxLength,
     selectData,
     rember1,
+    businessArr
   } = props;
 
   const [checkedList1, setCheckedList1] = useState([]);
@@ -454,7 +456,12 @@ const AddModal = (props) => {
   const [eventFlowId, setEventFlowId] = useState(0);
   const [show, setShow] = useState('hidden');
   const [initWay, setInitWay] = useState(); // 初始上报方式
+  const [viewModal, setViewModal] = useState(false);
+  const [index, setIndex] = useState(0)
+  const [modalType, setModalType] = useState('');
+  const [viewMsg, setviewMsg] = useState({}); // 保存编辑的信息
   const selectFieldRef = useRef(null)
+  const tableData = useRef([]); // 通用事件回显的表格
 
   const onSubmit = () => {
     form.validateFields().then(validate => {
@@ -480,7 +487,7 @@ const AddModal = (props) => {
           notification.warning({ message: '提示', description: '事件权限必填' })
         } else {
           if (type == 'edit') {
-            CM_Event_EditEventTable({ ID: formObj.ID, ...obj, Order, EventFlowId: eventFlowId, })
+            CM_Event_EditEventTable({ ID: formObj.ID, ...obj, Order, EventFlowId: eventFlowId, SubEventInfo: tableData.current })
               .then(res => {
                 if (res.msg === 'Ok') {
                   form.resetFields();
@@ -500,7 +507,7 @@ const AddModal = (props) => {
             if (obj.Roles == undefined) {
               obj.Roles = '';
             }
-            CM_Event_AddEventTable({ ...obj, Order: maxLength }).then(res => {
+            CM_Event_AddEventTable({ ...obj, Order: maxLength, SubEventInfo: tableData.current }).then(res => {
               if (res.msg === 'Ok') {
                 form.resetFields();
                 setValue('');
@@ -525,6 +532,7 @@ const AddModal = (props) => {
       getRole();
       if (type === 'add') {
         form.setFieldsValue({ BusinessType: rember1 });
+        tableData.current = []
         setValue(1);
         getEventData();
         setSelectValue(selectData[0]);
@@ -554,6 +562,7 @@ const AddModal = (props) => {
             setReportType({ visibleCheck: Boolean(Reportable), ReportFromMobile, ReportFromWeb })
             setOrder(res.data.root.Order);
             form.setFieldsValue({ ...res.data.root });
+            tableData.current = res.data.root.SubEventInfo
             if (res.data.root.ImageExpression) {
               setImageUrl(`${window.location.origin}/civweb4/${res.data.root.ImageExpression}`);
               setIm(res.data.root.ImageExpression);
@@ -943,6 +952,54 @@ const AddModal = (props) => {
     setReportType({ ...reportType, ...values })
   }
 
+  // 定义表格
+  const columns = [
+    {
+      title: '事件名称',
+      dataIndex: 'SubFlowEventName',
+      align: 'center',
+      render: (text, record) => {
+        if (text === '(未配置)' || text === '(无)') {
+          return <span style={{ color: 'grey' }}>{text}</span>;
+        }
+        return <span>{text || record.WebPage}</span>;
+      },
+    },
+    // {
+    //   title: '源字段',
+    //   dataIndex: 'Fields',
+    //   align: 'center',
+    //   render: (text, record) => {
+    //     if (text === '(未配置)' || text === '(无)') {
+    //       return <span style={{ color: 'grey' }}>{text}</span>;
+    //     }
+    //     return <span>{text || record.WebPage}</span>;
+    //   },
+    // },
+    {
+      title: '操作',
+      align: 'center',
+      ellipsis: true,
+      render: record => (
+        <>
+          <Space>
+            <DeleteOutlined
+              onClick={() => delRow(record)}
+              style={{ fontSize: '16px', color: '#e86060' }}
+            />
+          </Space>
+        </>
+      ),
+    },
+  ];
+
+  const delRow = record => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    list = list.filter(item => item.SubFlowEventConfigID !== record.SubFlowEventConfigID);
+    tableData.current = list;
+    setFlag(flag + 1)
+  };
+
   const onOK = prop => {
     setIsVisible(false);
     let inputText = {};
@@ -1176,6 +1233,24 @@ const AddModal = (props) => {
     setShow('hidden');
   };
 
+  const saveView = (val, type) => {
+    let list = JSON.parse(JSON.stringify(tableData.current));
+    if (type === 'add') {
+      list.push({ ...val });
+    } else {
+      list[index] = val
+    }
+    tableData.current = list;
+    // nodeChage('AccountFlowNodeBackfillConfigs', tableData.current);
+    setViewModal(false);
+  };
+
+  const toEdit = val => {
+    setViewModal(true);
+    setModalType('edit');
+    setviewMsg(val);
+  };
+
   return (
     <Drawer
       title={type === 'add' ? '添加事件' : '编辑事件'}
@@ -1764,6 +1839,43 @@ const AddModal = (props) => {
                 </Item>
               </Col>
             </Row>
+            <Row>
+              <Col span={24}>
+                <Item
+                  label="通用事件"
+                  name="usualEvent"
+                  // style={{ height: '112px' }}
+                  labelCol={{ span: 5 }}
+                >
+                  <Button
+                    type="primary"
+                    onClick={() => {
+                      setViewModal(true);
+                      setModalType('add');
+                    }}
+                    style={{ display: 'flex', alignItems: 'center' }}
+                    icon={<PlusOutlined />}
+                  >
+                    新增通用事件
+                  </Button>
+                  <Table
+                    dataSource={tableData.current}
+                    columns={columns}
+                    rowKey={record => record.key}
+                    bordered
+                    size="small"
+                    scroll={{ y: 'calc(100vh - 630px)' }}
+                    onRow={(record, index) => ({
+                      onDoubleClick: () => {
+                        setIndex(index)
+                        toEdit(record, index);
+                      },
+                    })}
+                    pagination={false}
+                  />
+                </Item>
+              </Col>
+            </Row>
           </Form>
         )}
       </Spin>
@@ -1808,6 +1920,18 @@ const AddModal = (props) => {
         formObj={formObj}
       />
       <SelectField ref={selectFieldRef} filed={filed} filedArray={nu} submit={submitField} />
+      <AddAccount
+        tableName={form.getFieldValue('TableName')}
+        eventNames={businessArr.length ? businessArr[0].root : []}
+        tableData={tableData.current}
+        visible={viewModal}
+        msg={viewMsg}
+        modalType={modalType}
+        handleCancel={() => setViewModal(false)}
+        onSubumit={saveView}
+        // tableField={tableField}
+        addIndex={tableData.current && tableData.current.length}
+      />
     </Drawer>
   );
 };

src/pages/bsmanager/workOrder/incident/incident.jsx

@@ -57,6 +57,7 @@ import AddModal from './AddModal';
 import ProcessModal from './ProcessModal';
 import SortModal from './SortModal';
 import ViewModal from './ViewModal';
+import { LoadEventFields } from '@/services/tablemanager/tablemanager';
 
 const { Search } = Input;
 
@@ -706,6 +707,7 @@ const incident = () => {
           selectData={select}
           callBackSubmit={onSubmit}
           placement="right"
+          businessArr={keepIdValue.filter(item => item.businessType === '通用事件')}
         />
         <SortModal
           title="调整顺序"