fix: '1.事件配置项交互样式优化2.表配置新增是否附加字段'

src/pages/bsmanager/base/tablemanager/components/TableView.jsx

@@ -76,6 +76,11 @@ const EditableCell = ({
         [dataIndex]: record[dataIndex],
       });
     }
+    if (record && dataIndex === 'IsAddFieldConfig') {
+      form.setFieldsValue({
+        [dataIndex]: record[dataIndex],
+      });
+    }
   }, []);
 
   useEffect(() => {
@@ -109,6 +114,15 @@ const EditableCell = ({
     });
     handleSave({ ...record, ...values, index });
   };
+
+  const saveAddCheckBox = async e => {
+    const values = await form.validateFields();
+    form.setFieldsValue({
+      [dataIndex]: values.IsAddFieldConfig,
+    });
+    handleSave({ ...record, ...values, index });
+  };
+
   const rendeFrom = val => {
     let lengthMin = 0;
     let lengthMax = 0;
@@ -206,7 +220,7 @@ const EditableCell = ({
       return <td {...restProps}>--</td>;
     }
     // 只读
-    if (record.ReadOnly && title !== '允许空值') {
+    if (record.ReadOnly && title !== '允许空值' && title !== '是否附加') {
       return <td {...restProps}>{childNode}</td>;
     }
     // 表单规则
@@ -282,6 +296,19 @@ const EditableCell = ({
         </Form.Item>
       );
     }
+    if (title === '是否附加') {
+      childNode = (
+        <Form.Item
+          style={{
+            margin: 0,
+          }}
+          name={dataIndex}
+          valuePropName={record.IsAddFieldConfig ? 'checked' : ''}
+        >
+          <Checkbox onChange={saveAddCheckBox} />
+        </Form.Item>
+      );
+    }
   }
 
   return <td {...restProps}>{childNode}</td>;
@@ -448,6 +475,7 @@ const TableView = props => {
       FieldLength: 255,
       DecimalPlace: 0,
       IsNullable: true,
+      IsAddFieldConfig: true,
     };
     setDataSource([...dataSource, newData]);
     setCount(count + 1);
@@ -609,13 +637,20 @@ const TableView = props => {
       editable: true,
       align: 'center',
     },
-    // {
-    //   title: '允许空值',
-    //   dataIndex: 'IsNullable',
-    //   width: 100,
-    //   editable: true,
-    //   align: 'center',
-    // },
+    {
+      title: '允许空值',
+      dataIndex: 'IsNullable',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
+    {
+      title: '是否附加',
+      dataIndex: 'IsAddFieldConfig',
+      width: 100,
+      editable: true,
+      align: 'center',
+    },
     {
       title: '操作',
       width: 100,

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

@@ -405,7 +405,7 @@ const AddFlowsModal = props => {
               />
             </Item>
           </Col>
-          <Col span={24}>
+          {/* <Col span={24}>
             <Item label="受理权限" name="Roles" labelCol={{ span: 5 }}>
               <div style={{ display: 'flex', alignContent: 'flex-start' }}>
                 <TextArea
@@ -423,7 +423,7 @@ const AddFlowsModal = props => {
                 />
               </div>
             </Item>
-          </Col>
+          </Col> */}
         </Row>
       </Form>
       {/* <ChangeAddFlows

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

@@ -47,6 +47,7 @@ import {
   CM_Event_EditEventTable,
   GetCM_Event_QueryEventType,
   CM_Event_AddEventTable,
+  GetCM_Event_LoadEvenFlows,
 } from '@/services/standingBook/api';
 import {
   PlusOutlined,
@@ -60,6 +61,9 @@ import ChangeAdd from './changeAdd';
 import ChangeEdit from './changeEdit';
 import RMSComponents from '@/components/RolePmSite/index';
 import PreviewModal from './PreviewModal';
+import EditTypeModal from './EditTypeModal';
+import eventImg from '@/assets/images/workOptions/事件.png';
+import caseImg from '@/assets/images/workOptions/工单.png';
 
 const { Option } = Select;
 const AddModal = props => {
@@ -494,6 +498,9 @@ const AddModal = props => {
   const [keepImgeUrl, setKeepImgeUrl] = useState('');
   const [im, setIm] = useState();
   const [previewModal, setPreviewModal] = useState(false);
+  const [editTypeModal, setEditTypeModal] = useState(false);
+  const [flowTableData, setFlowTableData] = useState([]);
+  const [evenFlowId, setEvenFlowId] = useState('');
   const [show, setShow] = useState('hidden');
   const [visibleChecked, setVisibleChecked] = useState(false);
   const [initWay, setInitWay] = useState(); // 初始上报方式
@@ -543,7 +550,8 @@ const AddModal = props => {
         } else {
           obj.Reportable = false;
         }
-        if ((obj.Roles == '' || obj.Roles == undefined) && obj.CreateMode === '0') {
+        // if ((obj.Roles == '' || obj.Roles == undefined) && obj.CreateMode === '0' ) {
+        if ((obj.Roles == '' || obj.Roles == undefined) && value === 0) {
           console.log(obj.CreateMode);
           notification.warning({
             message: '提示',
@@ -555,6 +563,7 @@ const AddModal = props => {
               ID: formObj.ID,
               ...obj,
               Order,
+              EvenFlowId: evenFlowId,
             }).then(res => {
               setLoading(false);
               if (res.msg === 'Ok') {
@@ -643,6 +652,7 @@ const AddModal = props => {
           if (res.data.root) {
             setEditable(res.data.root.Editable);
             setInitWay(res.data.root.CreateMode);
+            setValue(res.data.root.CreateMode);
             setReportFromMobile(res.data.root.ReportFromMobile);
             setReportFromWeb(res.data.root.ReportFromWeb);
             if (res.data.root.Reportable === false) {
@@ -1122,10 +1132,20 @@ const AddModal = props => {
     setEditable(e.target.checked);
   };
   const onChange2 = e => {
-    if (e.target.value === 1 && initWay === 0) {
-      message.warning('事件模型切换为工单模型流程会清空，请谨慎修改');
+    if (e === 1 && initWay === 0) {
+      // message.warning('事件模型切换为工单模型流程会清空，请谨慎修改');
+      GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
+        if (res.msg === 'Ok') {
+          if (res.data.length && res.data.length === 1) {
+            setEvenFlowId(res.data[0].ID);
+          } else {
+            setFlowTableData(res.data);
+            setEditTypeModal(true);
+          }
+        }
+      });
     }
-    setValue(e.target.value);
+    setValue(e);
   };
   const onChange3 = e => {
     setReportFromWeb(e.target.checked);
@@ -1197,6 +1217,10 @@ const AddModal = props => {
     }
   };
 
+  const chooseFlowOk = prop => {
+    setEvenFlowId(prop);
+  };
+
   const pickFiled = fileds => {
     if (form.getFieldsValue().TableName) {
       setFlag(flag + 1);
@@ -1387,6 +1411,56 @@ const AddModal = props => {
     >
       <Form form={form}>
         <Row>
+          {/* <Col span={24}>
+            <Item
+              label={
+                <div style={{ display: 'flex', alignItems: 'center', fontWeight: 'bold' }}>
+                  <Tooltip title="选择仅上报时，事件权限必填">
+                    <InfoCircleOutlined
+                      style={{
+                        color: '#1890ff',
+                      }}
+                    />
+                  </Tooltip>
+                  <span>上报方式</span>
+                </div>
+              }
+              name="CreateMode"
+              labelCol={{ span: 5 }}
+            >
+              <Radio.Group onChange={onChange2} value={value} defaultValue={chee}>
+                <Radio value={1}>立即发起（工单模型）</Radio>
+                <Radio value={0}>仅上报（事件模型）</Radio>
+              </Radio.Group>
+            </Item>
+          </Col> */}
+          <Col span={24}>
+            <Item name="CreateMode" labelCol={{ span: 5 }}>
+              <div
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                className={styles.eventType}
+              >
+                <img
+                  onClick={() => onChange2(1)}
+                  style={{
+                    flex: 1,
+                    marginRight: '5px',
+                    transform: value === 1 ? 'scale(1.1)' : 'scale(1)',
+                  }}
+                  src={caseImg}
+                  alt=""
+                />
+                <Tooltip title="选择仅上报时，事件权限必填">
+                  <img
+                    onClick={() => onChange2(0)}
+                    style={{ flex: 1, transform: value === 0 ? 'scale(1.1)' : 'scale(1)' }}
+                    src={eventImg}
+                    alt=""
+                  />
+                </Tooltip>
+              </div>
+            </Item>
+          </Col>
           <Col span={15}>
             <Item
               label="事件类型"
@@ -1533,23 +1607,6 @@ const AddModal = props => {
             </Item>
           </Col>
         </Row>
-        <Item style={{ marginBottom: '0px' }}>
-          <span style={{ marginLeft: '112px' }}>客户端上报（需配置事件权限、受理流程）</span>
-        </Item>
-        <div style={{ display: 'inline-block', marginLeft: '112px', marginRight: '50px' }}>
-          <Item name="ReportFromWeb">
-            <Checkbox onChange={onChange3} checked={ReportFromWeb}>
-              前端
-            </Checkbox>
-          </Item>
-        </div>
-        <div style={{ display: 'inline-block' }}>
-          <Item name="ReportFromMobile">
-            <Checkbox onChange={onChange4} checked={ReportFromMobile}>
-              手持
-            </Checkbox>
-          </Item>
-        </div>
         {/* </Item> */}
 
         {/* <Col span={5}>
@@ -1563,7 +1620,7 @@ const AddModal = props => {
             </Item>
           </Col> */}
         <Row>
-          <Col span={24}>
+          {/* <Col span={24}>
             <Item
               label={
                 <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -1585,7 +1642,7 @@ const AddModal = props => {
                 <Radio value={0}>仅上报（事件模型）</Radio>
               </Radio.Group>
             </Item>
-          </Col>
+          </Col> */}
           <Col span={24}>
             <Item
               label={
@@ -1645,6 +1702,7 @@ const AddModal = props => {
               </div>
             </Item>
           </Col>
+          {value === 0 ? (
             <Col span={24}>
               <Item
                 label={
@@ -1692,6 +1750,8 @@ const AddModal = props => {
                 </div>
               </Item>
             </Col>
+          ) : null}
+          {value === 0 ? (
             <Col span={24}>
               <Item
                 label={
@@ -1739,6 +1799,7 @@ const AddModal = props => {
                 </div>
               </Item>
             </Col>
+          ) : null}
           {/* <Col span={24}>
             <Item
               label={
@@ -1818,21 +1879,6 @@ const AddModal = props => {
               </div>
             </Item>
           </Col>
-          <Col span={24}>
-            <Item label="事件权限" name="Roles" labelCol={{ span: 5 }}>
-              <div style={{ display: 'flex' }}>
-                <Form.Item name="Roles" style={{ marginBottom: 0, width: '100%' }}>
-                  <Input placeholder="请选择事件权限" allowClear />
-                </Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => pickFiled1('Roles')}
-                  icon={<PlusOutlined style={{ marginTop: '5px' }} />}
-                  style={{ marginLeft: '10px', width: '70px' }}
-                />
-              </div>
-            </Item>
-          </Col>
           {/* <Col span={24}>
             <Item label="置顶条件" name="TopWhere" labelCol={{ span: 5 }}>
               <Input placeholder="请输入置顶条件" allowClear />
@@ -1886,17 +1932,12 @@ const AddModal = props => {
               </div>
             </Item>
           </Col> */}
-          <Col span={24}>
-            <Item label="接口配置" name="InterfaceConfig" labelCol={{ span: 5 }}>
-              <Input placeholder="请输入接口配置" />
-            </Item>
-          </Col>
           <Col span={24}>
             <Item
               name="Reportable"
               label={
                 <div style={{ display: 'flex', alignItems: 'center' }}>
-                  <Tooltip title="内置事件将无法上报和正常办理">
+                  <Tooltip title="开启内置使用后，仅用于内部功能调用，工单系统中无法使用；关闭内置使用后，可通过勾选 前端/手持，来控制是否展示事件的填报入口，勾选即展示。">
                     <InfoCircleOutlined
                       style={{
                         color: '#1890ff',
@@ -1904,20 +1945,70 @@ const AddModal = props => {
                       }}
                     />
                   </Tooltip>
-                  <span>内置使用</span>
+                  <span>使用方式</span>
                 </div>
               }
               labelCol={{ span: 5 }}
             >
+              <div style={{ display: 'flex' }}>
+                <span style={{ marginRight: '5px' }}>内置使用</span>
                 <Switch
                   checkedChildren="是"
                   unCheckedChildren="否"
                   checked={visibleChecked}
                   onChange={change}
                 />
+              </div>
+            </Item>
+          </Col>
+          <div style={{ display: 'inline-block', marginLeft: '112px', marginRight: '50px' }}>
+            <Item name="ReportFromWeb">
+              <Checkbox
+                onChange={onChange3}
+                checked={ReportFromWeb && !visibleChecked}
+                disabled={visibleChecked}
+              >
+                前端
+              </Checkbox>
+            </Item>
+          </div>
+          <div style={{ display: 'inline-block' }}>
+            <Item name="ReportFromMobile">
+              <Checkbox
+                onChange={onChange4}
+                checked={ReportFromMobile && !visibleChecked}
+                disabled={visibleChecked}
+              >
+                手持
+              </Checkbox>
+            </Item>
+          </div>
+          {value === 0 ? (
+            <Col span={24}>
+              <Item label="事件权限" name="Roles" labelCol={{ span: 5 }}>
+                <div style={{ display: 'flex' }}>
+                  <Form.Item name="Roles" style={{ marginBottom: 0, width: '100%' }}>
+                    <Input placeholder="请选择事件权限" allowClear />
+                  </Form.Item>
+                  <Button
+                    type="dashed"
+                    onClick={() => pickFiled1('Roles')}
+                    icon={<PlusOutlined style={{ marginTop: '5px' }} />}
+                    style={{ marginLeft: '10px', width: '70px' }}
+                  />
+                </div>
+              </Item>
+            </Col>
+          ) : null}
+          <Col span={24}>
+            <Item label="接口配置" name="InterfaceConfig" labelCol={{ span: 5 }}>
+              <Input placeholder="请输入接口配置" />
             </Item>
           </Col>
         </Row>
+        {/* <Item style={{ marginBottom: '0px' }}>
+          <span style={{ marginLeft: '112px' }}>客户端上报（需配置事件权限、受理流程）</span>
+        </Item> */}
         <Row>
           <Col span={10}>
             <Item
@@ -2021,6 +2112,14 @@ const AddModal = props => {
         type={type}
         callBackSubmit={onOk}
       />
+      <EditTypeModal
+        visible={editTypeModal}
+        tableData={flowTableData}
+        onCancel={() => {
+          setEditTypeModal(false);
+        }}
+        callBackSubmit={chooseFlowOk}
+      />
       <RMSComponents
         visible={isVisible}
         onCancel={onCancel}

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

 import React, { useEffect, useState } from 'react';
 import { Modal, Table, Tooltip, notification, Space, Popconfirm } from 'antd';
-import {
-    PlusSquareFilled,
-    EditTwoTone,
-    DeleteOutlined,
-} from '@ant-design/icons';
+import { PlusSquareFilled, EditTwoTone, DeleteOutlined } from '@ant-design/icons';
 import styles from './incident.less';
 import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api';
-import AddFlowsModal from './AddFlowsModal'
+import AddFlowsModal from './AddFlowsModal';
 const ProcessModal = props => {
-    const { callBackSubmit = () => { }, title1, visible, onCancel, formObj, maxLength} = props;
-    const [tableData, setTableData] = useState([])
-    const [addVisible, setAddVisible] = useState(false)
+  const { callBackSubmit = () => {}, title1, visible, onCancel, formObj, maxLength } = props;
+  const [tableData, setTableData] = useState([]);
+  const [addVisible, setAddVisible] = useState(false);
   const [isType, setIsType] = useState(''); // 弹窗类型
-    const [record1, setRecord1] = useState('')
-    const [obj, setObj] = useState('')
-    const [flag, setFlag] = useState(0)
-
+  const [record1, setRecord1] = useState('');
+  const [obj, setObj] = useState('');
+  const [flag, setFlag] = useState(0);
 
   const columns = [
     {
-            title: () => (<span style={{fontWeight:'bold'}}>流程名称</span>),
+      title: () => <span style={{ fontWeight: 'bold' }}>流程名称</span>,
       dataIndex: 'FlowName',
       key: 'FlowName',
       width: 150,
@@ -34,10 +29,9 @@ const ProcessModal = props => {
       //         }}
       //     />
       // )
-        }
-        ,
+    },
     {
-            title: () => (<span style={{fontWeight:'bold'}}>受理权限</span>),
+      title: () => <span style={{ fontWeight: 'bold' }}>受理权限</span>,
       dataIndex: 'FlowRoles',
       key: 'FlowRoles',
       width: 400,
@@ -53,26 +47,18 @@ const ProcessModal = props => {
       // )
     },
     {
-            title: () => (<span style={{fontWeight:'bold'}}>操作</span>),
+      title: () => <span style={{ fontWeight: 'bold' }}>操作</span>,
       key: 'action',
       aligin: 'center',
       render: record => (
         <Space size="middle">
-
           <Tooltip title="编辑用户">
-                        <EditTwoTone
-                            onClick={() => editEventType(record)}
-                            style={{ fontSize: '16px' }}
-                        />
+            <EditTwoTone onClick={() => editEventType(record)} style={{ fontSize: '16px' }} />
           </Tooltip>
           <Tooltip title="删除">
             <Popconfirm
               placement="bottomRight"
-                            title={
-                                <p>
-                                    即将删除事件流程，是否确认删除？
-                                </p>
-                            }
+              title={<p>即将删除事件流程，是否确认删除？</p>}
               okText="确认"
               cancelText="取消"
               onConfirm={() => deleteEventType(record)}
@@ -81,42 +67,40 @@ const ProcessModal = props => {
             </Popconfirm>
           </Tooltip>
         </Space>
-            )
-
-        }
-    ]
+      ),
+    },
+  ];
 
   useEffect(() => {
     GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
       if (res.msg === 'Ok') {
-                console.log(res.data)
-                setTableData(res.data)
+        console.log(res.data);
+        setTableData(res.data);
       }
-        })
-    },[visible,flag])
+    });
+  }, [visible, flag]);
   const addIncident = () => {
-        console.log(formObj.ID)
-        setObj(formObj.ID)
-        setAddVisible(true)
-        setIsType('add')
-    }
+    console.log(formObj.ID);
+    setObj(formObj.ID);
+    setAddVisible(true);
+    setIsType('add');
+  };
   const editEventType = record => {
-        setObj(formObj.ID)
-        setRecord1(record)
+    setObj(formObj.ID);
+    setRecord1(record);
     setIsType('edit');
-        setAddVisible(true)
-    }
+    setAddVisible(true);
+  };
   const deleteEventType = record => {
-        console.log(record)
-        CM_Event_RemoveEvenFlow({ eventFlowIds: record.ID }).then(res=>{
+    console.log(record);
+    CM_Event_RemoveEvenFlow({ eventFlowIds: record.ID }).then(res => {
       if (res.msg === '') {
         notification.success({
           message: '提示',
           duration: 3,
           description: '删除成功',
-                    
         });
-                setFlag(flag+1)
+        setFlag(flag + 1);
       } else {
         notification.error({
           message: '提示',
@@ -124,20 +108,20 @@ const ProcessModal = props => {
           description: res.msg,
         });
       }
-        })
-    }
+    });
+  };
   const onOK = () => {
-        setAddVisible(false)
+    setAddVisible(false);
     GetCM_Event_LoadEvenFlows({ eventTypeId: formObj.ID }).then(res => {
       if (res.msg === 'Ok') {
-                console.log(res.data)
-                setTableData(res.data)
-            }
-        })
+        console.log(res.data);
+        setTableData(res.data);
       }
+    });
+  };
   const onSumbit = () => {
-        callBackSubmit()
-    }
+    callBackSubmit();
+  };
   return (
     <Modal
       title={`${title1}受理流程和权限`}
@@ -145,7 +129,6 @@ const ProcessModal = props => {
       width="800px"
       onCancel={onCancel}
       onOk={onSumbit}
-            
     >
       <Tooltip title="添加事件类型">
         <PlusSquareFilled
@@ -155,20 +138,21 @@ const ProcessModal = props => {
             fontSize: '25px',
             verticalAlign: 'middle',
             marginLeft: '25px',
-                        marginBottom: '10px'
+            marginBottom: '10px',
           }}
         />
       </Tooltip>
       <Table
         size="small"
-                rowKey='ID'
+        rowKey="ID"
         bordered
         style={{ height: '15rem', overflowY: 'scroll', width: '700px', marginLeft: '25px' }}
-                onRow={record => {
-                    return {
-                      onDoubleClick: event => {event.stopPropagation(); editEventType(record)}, //双击
-                    };
-                  }}
+        onRow={record => ({
+          onDoubleClick: event => {
+            event.stopPropagation();
+            editEventType(record);
+          }, // 双击
+        })}
         columns={columns}
         dataSource={tableData}
         pagination={false}
@@ -185,6 +169,6 @@ const ProcessModal = props => {
         placement="right"
       />
     </Modal>
-    )
-}
+  );
+};
 export default ProcessModal;

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

@@ -28,20 +28,15 @@ const incidentFlow = props => {
       title: () => <span style={{ fontWeight: 'bold' }}>流程名称</span>,
       dataIndex: 'FlowName',
       key: 'FlowName',
-      width: 250,
-      ellipsis: true,
-    },
-    {
-      title: () => <span style={{ fontWeight: 'bold' }}>受理权限</span>,
-      dataIndex: 'FlowRoles',
-      key: 'FlowRoles',
+      // width: 600,
       ellipsis: true,
+      align: 'center',
     },
     {
       title: () => <span style={{ fontWeight: 'bold' }}>操作</span>,
       key: 'action',
       width: 150,
-      aligin: 'center',
+      align: 'center',
       render: record => (
         <Space size="middle">
           <Tooltip title="编辑用户">