修改事件权限交互

src/pages/platformCenter/bsmanager/maintenance/maintenance.jsx

+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
-import styles from './maintenance.less'
+import { Space, Table, Popconfirm, Tooltip, Button, notification } from 'antd';
 import {
-    Space,
-    Table,
-    Popconfirm,
-    Tooltip,
-    Button,
-    notification
-} from 'antd';
-import {CM_XWBPlan_DataList, CM_XWBPlan_RemovePlan} from '@/services/maintenance/api';
-import {
-    EditTwoTone,
-    DeleteOutlined,
-    PlusOutlined
-} from '@ant-design/icons';
-import AddModal from './AddModal'
+  CM_XWBPlan_DataList,
+  CM_XWBPlan_RemovePlan,
+} from '@/services/maintenance/api';
+import { EditTwoTone, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import styles from './maintenance.less';
+import AddModal from './AddModal';
 
 const maintenance = () => {
-    const [addVisible, setAddVisible] = useState(false)
-    const [type, setType] = useState('')
-    const [formObj, setFormObj] = useState('')
+  const [addVisible, setAddVisible] = useState(false);
+  const [type, setType] = useState('');
+  const [formObj, setFormObj] = useState('');
   const [treeLoading, setTreeLoading] = useState(false);
   const [flag, setFlag] = useState(0);
-    const [tableData, setTableData] = useState([])
+  const [tableData, setTableData] = useState([]);
 
   const columns = [
     {
@@ -30,7 +24,7 @@ const maintenance = () => {
       dataIndex: 'businessName',
       key: 'businessName',
       width: 100,
-            align:'center',
+      align: 'center',
     },
     {
       title: '业务类型',
@@ -38,14 +32,14 @@ const maintenance = () => {
       key: 'businessType',
       width: 100,
       ellipsis: true,
-            align:'center',
+      align: 'center',
     },
     {
       title: '执行周期',
       dataIndex: 'docycle',
       key: 'docycle',
       width: 100,
-            align:'center',
+      align: 'center',
     },
     {
       title: '台账名称',
@@ -53,14 +47,14 @@ const maintenance = () => {
       key: 'accountName',
       width: 200,
       ellipsis: true,
-            align:'center',
+      align: 'center',
     },
     {
       title: '反馈名称',
       dataIndex: 'feedbackName',
       key: 'feedbackName',
       width: 200,
-            align:'center',
+      align: 'center',
     },
     {
       title: '台账过滤条件',
@@ -68,14 +62,14 @@ const maintenance = () => {
       key: 'filterCondition',
       width: 200,
       ellipsis: true,
-            align:'center',
+      align: 'center',
     },
     {
       title: '是否送审',
       dataIndex: 'isSubmit',
       key: 'isSubmit',
       width: 100,
-            align:'center',
+      align: 'center',
     },
     {
       title: '执行角色',
@@ -83,14 +77,14 @@ const maintenance = () => {
       key: 'doRole',
       width: 200,
       ellipsis: true,
-            align:'center',
+      align: 'center',
     },
     {
       title: '预生成天数',
       dataIndex: 'produceDays',
       key: 'produceDays',
       width: 100,
-            align:'center',
+      align: 'center',
     },
     {
       title: '在线任务量',
@@ -98,14 +92,14 @@ const maintenance = () => {
       key: 'onLines',
       width: 100,
       ellipsis: true,
-            align:'center',
+      align: 'center',
     },
     {
       title: '启停',
       dataIndex: 'doNot',
       key: 'doNot',
       width: 100,
-            align:'center',
+      align: 'center',
     },
     {
       title: '操作',
@@ -123,11 +117,7 @@ const maintenance = () => {
           <Tooltip title="删除">
             <Popconfirm
               placement="bottomRight"
-                            title={
-                                <p>
-                                    是否确认删除？
-                                </p>
-                            }
+              title={<p>是否确认删除？</p>}
               okText="确认"
               cancelText="取消"
               onConfirm={() => deleteEventType(record)}
@@ -138,37 +128,36 @@ const maintenance = () => {
         </Space>
       ),
     },
+  ];
 
-    ]
-
-    useEffect(()=>{
+  useEffect(() => {
     setTreeLoading(true);
-        CM_XWBPlan_DataList().then(res=>{
+    CM_XWBPlan_DataList().then(res => {
       setTreeLoading(false);
-            if(res.msg == 'Ok'){
-                setTableData(res.data)
+      if (res.msg === 'Ok') {
+        setTableData(res.data);
       }
-        })
-    },[flag])
+    });
+  }, [flag]);
 
-    const add =()=>{
-        setAddVisible(true)
-        setType('add')
-    }
-    const editEventType =record=>{
-        setAddVisible(true)
-        setType('edit')
+  const add = () => {
+    setAddVisible(true);
+    setType('add');
+  };
+  const editEventType = record => {
+    setAddVisible(true);
+    setType('edit');
     setFormObj(record);
-    }
-    const deleteEventType = record =>{
-        CM_XWBPlan_RemovePlan({planId:record.id}).then(res =>{
+  };
+  const deleteEventType = record => {
+    CM_XWBPlan_RemovePlan({ planId: record.id }).then(res => {
       if (res.msg === '') {
         notification.success({
           message: '提示',
           duration: 3,
           description: '删除成功',
         });
-                setFlag(flag + 1)
+        setFlag(flag + 1);
       } else {
         notification.error({
           message: '提示',
@@ -176,19 +165,27 @@ const maintenance = () => {
           description: res.msg,
         });
       }
-        })
-    }
-    const onSubmit =()=>{
-        setAddVisible(false)
-        setFlag(flag + 1)
-    }
+    });
+  };
+  const onSubmit = () => {
+    setAddVisible(false);
+    setFlag(flag + 1);
+  };
 
   return (
     <div className={styles.maintenanceContainer}>
       <div className={styles.contentContainers}>
         <div style={{ height: '50px', backgroundColor: 'white' }}>
           <span style={{ float: 'right', marginRight: '10px' }}>
-                        <Button icon={<PlusOutlined className={styles.icon} />} onClick={add} style={{ marginLeft: '30px', verticalAlign: 'middle', marginTop: '10px' }}>
+            <Button
+              icon={<PlusOutlined className={styles.icon} />}
+              onClick={add}
+              style={{
+                marginLeft: '30px',
+                verticalAlign: 'middle',
+                marginTop: '10px',
+              }}
+            >
               添加
             </Button>
           </span>
@@ -196,17 +193,18 @@ const maintenance = () => {
         <Table
           // rowClassName={setRowClassName}
           size="small"
-                    rowKey='ID'
+          rowKey="ID"
           bordered
           loading={treeLoading}
-                    onRow={record => {
-                        return {
-                            onDoubleClick: event => { event.stopPropagation(); editEventType(record) }, //双击
-                        };
-                    }}
+          onRow={record => ({
+            onDoubleClick: event => {
+              event.stopPropagation();
+              editEventType(record);
+            }, // 双击
+          })}
           columns={columns}
           dataSource={tableData}
-                    scroll={{ y: 'calc(100vh - 215px)' }}
+          scroll={{ y: 'calc(100vh - 215px)', x: 'max-content' }}
           pagination={{
             showTotal: (total, range) =>
               `第${range[0]}-${range[1]} 条/共 ${total} 条`,
@@ -227,7 +225,7 @@ const maintenance = () => {
         />
       </div>
     </div>
-    )
+  );
 };
 
-export default maintenance
\ No newline at end of file
+export default maintenance;

src/pages/platformCenter/bsmanager/workOrder/incident.less

@@ -2,14 +2,14 @@
   line-height: 35px;
 }
 .ant-btn .anticon.anticon-plus > svg {
-    margin-top:-5px;
+  margin-top: -5px;
 }
-.incidentContainer{
+.incidentContainer {
   .ant-card-body {
     padding: 12px 24px 24px 24px;
   }
 
-    .linkDrowp{
+  .linkDrowp {
     position: absolute;
     left: 93.5%;
     width: 1rem;
@@ -17,25 +17,25 @@
     display: flex;
     align-items: center;
   }
-    .listItem{
+  .listItem {
     display: flex;
     justify-content: space-between;
     font-size: 14px;
     font-weight: 400;
-        color: #414E65;
+    color: #414e65;
     cursor: pointer;
     line-height: 28px;
     align-items: center;
     padding: 8px 14px;
-
   }
-    .ant-btn .anticon.anticon-plus > svg, .ant-btn .anticon.anticon-minus > svg {
+  .ant-btn .anticon.anticon-plus > svg,
+  .ant-btn .anticon.anticon-minus > svg {
     margin-top: -5px;
   }
-    .pickItem{
-        background-color: #F5F6F9;
+  .pickItem {
+    background-color: #f5f6f9;
   }
-    .contentContainers{
+  .contentContainers {
     display: flex;
     width: 100%;
     position: relative;
@@ -45,7 +45,7 @@
       overflow-x: hidden;
       border: none;
     }
-        .orgContainer{
+    .orgContainer {
       height: calc(100vh - 74px);
       width: 250px;
       left: 0;
@@ -53,33 +53,33 @@
       overflow-x: hidden;
       margin-right: 10px;
       position: relative;
-            transition-property:width,left;
+      transition-property: width, left;
       transition-duration: 0.5s;
       white-space: nowrap;
-            .ant-tree{
+      .ant-tree {
         padding-top: 6px;
-                .ant-tree-switcher{
+        .ant-tree-switcher {
           line-height: 1;
           margin-right: 0px !important;
-                    color:#1890FF;
-                    .ant-tree-switcher-line-icon{
+          color: #1890ff;
+          .ant-tree-switcher-line-icon {
             margin-left: 5px;
           }
         }
       }
-            .switcher{
+      .switcher {
         display: block;
         position: absolute;
         font-size: 18px;
-                color: #1890FF!important;
+        color: #1890ff !important;
         top: 50%;
         right: 2px;
-                transform: translate(0%,-50%);
+        transform: translate(0%, -50%);
         z-index: 1;
       }
     }
 
-        .orgContainerHide{
+    .orgContainerHide {
       // transform: translateX(-230px);
       left: 0px;
       top: 0;
@@ -88,7 +88,7 @@
     .ant-popover-message-title {
       padding-left: 20px;
     }
-        .userContainer{
+    .userContainer {
       height: calc(100vh - 74px) !important;
       z-index: 999;
       min-width: 800px;
@@ -96,72 +96,73 @@
       width: 100%;
       position: relative;
       transition: width 0.5s;
-            .title{
+      .title {
         margin: 16px 0 10px 16px;
         display: inline-block;
         width: 270px;
         cursor: pointer;
         overflow: hidden;
-                text-overflow:ellipsis;
+        text-overflow: ellipsis;
         white-space: nowrap;
       }
-            .ant-table-pagination{
+      .ant-table-pagination {
         padding-right: 12px;
         background: white;
         margin: 1px 0;
         padding: 8px;
         padding-right: 20px;
       }
-            .ant-btn{
+      .ant-btn {
         margin: 0px 10px;
-                .ant-btn-primary{
+        .ant-btn-primary {
           background: #50aefc;
         }
       }
-            .ant-input-search-button{
+      .ant-input-search-button {
         margin-left: 0px !important;
       }
-            .ant-table-thead tr th{
+      .ant-table-thead tr th {
         font-weight: 600;
-                color:rgba(0,0,0,0.85);
-                background-color:#F6F9FE;
+        color: rgba(0, 0, 0, 0.85);
+        background-color: #f6f9fe;
       }
-            .ant-table-cell{
-                text-align:center;
+      .ant-table-cell {
+        text-align: center;
         overflow: hidden;
         // text-overflow:ellipsis;
         white-space: nowrap;
       }
-            .ant-table-body{
-                height:calc(100vh - 210px);
+      .ant-table-body {
+        height: calc(100vh - 210px);
         border-right: white;
         overflow: auto !important;
       }
-            .clickRowStyle{
+      .clickRowStyle {
         background: #cfe7fd;
       }
-            .ant-pagination{
+      .ant-pagination {
         z-index: 999;
         border-top: 1px solid #f0eded;
       }
     }
   }
-    .icon{
+  .icon {
     margin-top: -5px !important;
     vertical-align: text-bottom;
   }
 }
-.formData{
+.formData {
   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;
   }
-    .formData_label{
+  .formData_label {
     display: flex;
     align-items: center;
   }
-    .filed_listItem{
+  .filed_listItem {
     display: flex;
     height: 3.6rem;
     .ant-btn-icon-only {
@@ -176,21 +177,48 @@
       justify-content: center;
     }
   }
+  .ant-modal-root .ant-checkbox-group .ant-checkbox-group-item {
+    margin-right: 0px !important;
+    min-width: 200px !important;
+  }
 }
-.listCard{
+.listCard {
   display: flex;
-    .cardItem{
+  justify-content: space-around;
+  width: 100%;
+  .cardItem {
     padding: 0.5rem;
+    width: 50%;
   }
-    .cardContent{
+  .cardContent {
     height: 30rem;
     overflow-y: scroll;
     width: 19rem;
   }
-    .cardItemData{
+  .cardItemData {
+    padding: 1rem;
+    border: 1px solid #b5b8c8;
+    margin-bottom: 1rem;
+    overflow-x: hidden;
+  }
+}
+.listCard1 {
+  display: flex;
+  .cardItem1 {
+    padding: 0.5rem;
+  }
+  .cardContent1 {
+    height: 33rem;
+    overflow-y: scroll;
+    width: 1350px;
+    display: flex;
+    justify-content: space-around;
+  }
+  .cardItemData1 {
     padding: 1rem;
     border: 1px solid #b5b8c8;
     margin-bottom: 1rem;
+    width: 33.3%;
     overflow-x: hidden;
   }
 }
@@ -205,39 +233,37 @@
     thead {
       tr {
         font-weight: 600;
-          background: #FAFAFA;
+        background: #fafafa;
       }
     }
-      tbody{
-          tr:hover{
-              background-color:#ededed ;
+    tbody {
+      tr:hover {
+        background-color: #ededed;
       }
     }
   }
-  }
-  .ant-checkbox-group-item {
-    width: 260px;
 }
+
 .ant-drawer-footer {
-    display:flex;
+  display: flex;
   justify-content: flex-end;
 }
-.config{
+.config {
   display: flex;
   padding: 1rem 0 0.5rem 0.5rem;
   justify-content: space-between;
   width: calc(100% - 10px);
-    .title{
+  .title {
     font-size: 18px;
     color: rgba(0, 114, 255, 1);
     font-weight: bold;
   }
-    .btn{
+  .btn {
     display: flex;
     justify-content: flex-end;
     width: 20rem;
   }
-    .ant-btn{
+  .ant-btn {
     display: flex;
     align-items: center;
     margin-left: 20px;
@@ -245,22 +271,25 @@
 }
 .containerBox {
   width: 100vm;
-    height: calc(100vh - 90px) ;
+  height: calc(100vh - 90px);
   background: #ffffff;
-    .ant-table.ant-table-small .ant-table-tbody .ant-table-wrapper:only-child .ant-table{
+  .ant-table.ant-table-small
+    .ant-table-tbody
+    .ant-table-wrapper:only-child
+    .ant-table {
     margin-left: 0;
   }
-    .ant-table.ant-table-bordered > .ant-table-container{
+  .ant-table.ant-table-bordered > .ant-table-container {
     border: none;
   }
-    .clickRowStyle{
+  .clickRowStyle {
     background: #cfe7fd;
   }
-    .ant-table-thead tr th{
+  .ant-table-thead tr th {
     font-weight: 600;
-        color:rgba(0,0,0,0.85);
+    color: rgba(0, 0, 0, 0.85);
   }
 }
-.panda-pro-pages-platform-center-bsmanager-work-order-incident-filed_listItem{
-    display:flex
+.panda-pro-pages-platform-center-bsmanager-work-order-incident-filed_listItem {
+  display: flex;
 }

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

+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable camelcase */
 import React, { useEffect, useState } from 'react';
-import { Modal, Table, Tooltip, notification, Space, Popconfirm, Spin, Button } from 'antd';
+import {
+  Modal,
+  Table,
+  Tooltip,
+  notification,
+  Space,
+  Popconfirm,
+  Spin,
+  Button,
+} from 'antd';
 import {
   PlusSquareFilled,
   EditTwoTone,
   DeleteOutlined,
   PlusSquareOutlined,
-    RollbackOutlined
+  RollbackOutlined,
 } from '@ant-design/icons';
 import { useHistory } from 'react-router-dom';
 import styles from './incident.less';
-import { GetCM_Event_LoadEvenFlows, CM_Event_RemoveEvenFlow } from '@/services/standingBook/api';
-import AddFlowsModal from './AddFlowsModal'
-const incidentFlow = (props) => {
-    const [tableData, setTableData] = useState([])
+import {
+  GetCM_Event_LoadEvenFlows,
+  CM_Event_RemoveEvenFlow,
+} from '@/services/standingBook/api';
+import AddFlowsModal from './AddFlowsModal';
+const incidentFlow = props => {
+  const [tableData, setTableData] = useState([]);
   const history = useHistory();
-    const [addVisible, setAddVisible] = useState(false)
+  const [addVisible, setAddVisible] = useState(false);
   const [treeLoading, setTreeLoading] = 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: 250,
       ellipsis: true,
-        }
-        ,
+    },
     {
-            title: () => (<span style={{ fontWeight: 'bold' }}>受理权限</span>),
+      title: () => <span style={{ fontWeight: 'bold' }}>受理权限</span>,
       dataIndex: 'FlowRoles',
       key: 'FlowRoles',
       ellipsis: true,
     },
     {
-            title: () => (<span style={{ fontWeight: 'bold' }}>操作</span>),
+      title: () => <span style={{ fontWeight: 'bold' }}>操作</span>,
       key: 'action',
       width: 150,
       aligin: 'center',
@@ -53,11 +65,7 @@ const incidentFlow = (props) => {
           <Tooltip title="删除">
             <Popconfirm
               placement="bottomRight"
-                            title={
-                                <p>
-                                    即将删除事件流程，是否确认删除？
-                                </p>
-                            }
+              title={<p>即将删除事件流程，是否确认删除？</p>}
               okText="确认"
               cancelText="取消"
               onConfirm={() => deleteEventType(record)}
@@ -66,53 +74,53 @@ const incidentFlow = (props) => {
             </Popconfirm>
           </Tooltip>
         </Space>
-            )
-
-        }
-    ]
+      ),
+    },
+  ];
 
   useEffect(() => {
-        console.log(props)
-        console.log(props.location.state.title1)
+    console.log(props);
+    console.log(props.location.state.title1);
     setTreeLoading(true);
-        GetCM_Event_LoadEvenFlows({ eventTypeId: props.location.state.formObj.ID }).then(res => {
+    GetCM_Event_LoadEvenFlows({
+      eventTypeId: props.location.state.formObj.ID,
+    }).then(res => {
       setTreeLoading(false);
       if (res.msg === 'Ok') {
-                console.log(res.data)
-                setTableData(res.data)
+        console.log(res.data);
+        setTableData(res.data);
       }
-        })
-    }, [flag])
+    });
+  }, [flag]);
   const addIncident = () => {
-        console.log(props.location.state.formObj.ID)
-        setObj(props.location.state.formObj.ID)
-        setAddVisible(true)
-        setIsType('add')
-    }
+    console.log(props.location.state.formObj.ID);
+    setObj(props.location.state.formObj.ID);
+    setAddVisible(true);
+    setIsType('add');
+  };
   const editEventType = record => {
-        setObj(props.location.state.formObj.ID)
-        setRecord1(record)
+    setObj(props.location.state.formObj.ID);
+    setRecord1(record);
     setIsType('edit');
-        setAddVisible(true)
-    }
+    setAddVisible(true);
+  };
   const back = () => {
-        let rember = props.location.state.rember;
+    let { rember } = props.location.state;
     history.push({
       pathname: '/platformCenter/bsmanger/incident',
       state: { rember },
     });
   };
   const deleteEventType = record => {
-        console.log(record)
+    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: '提示',
@@ -120,24 +128,28 @@ const incidentFlow = (props) => {
           description: res.msg,
         });
       }
-        })
-    }
+    });
+  };
   const onOK = () => {
-        setAddVisible(false)
-        GetCM_Event_LoadEvenFlows({ eventTypeId: props.location.state.formObj.ID }).then(res => {
+    setAddVisible(false);
+    GetCM_Event_LoadEvenFlows({
+      eventTypeId: props.location.state.formObj.ID,
+    }).then(res => {
       if (res.msg === 'Ok') {
-                console.log(res.data)
-                setTableData(res.data)
-            }
-        })
+        console.log(res.data);
+        setTableData(res.data);
       }
+    });
+  };
 
   return (
     <>
       <Spin tip="loading..." spinning={treeLoading}>
         <div className={styles.containerBox}>
           <div className={styles.config}>
-                        <div className={styles.title}>{`${props.location.state.title1}受理流程和权限`}</div>
+            <div className={styles.title}>{`${
+              props.location.state.title1
+            }受理流程和权限`}</div>
             <div className={styles.btn}>
               <Button
                 type="primary"
@@ -147,7 +159,11 @@ const incidentFlow = (props) => {
                 新增
               </Button>
 
-                            <Button type="primary" icon={<RollbackOutlined />} onClick={()=>back()}>
+              <Button
+                type="primary"
+                icon={<RollbackOutlined />}
+                onClick={() => back()}
+              >
                 返回
               </Button>
             </div>
@@ -155,17 +171,19 @@ const incidentFlow = (props) => {
 
           <Table
             size="small"
-                        rowKey='ID'
+            rowKey="ID"
             bordered
-                        style={{ overflowY: 'scroll'}}
-                        onRow={record => {
-                            return {
-                                onDoubleClick: event => { event.stopPropagation(); editEventType(record); }, //双击
-                            };
-                        }}
+            style={{ overflowY: 'scroll' }}
+            onRow={record => ({
+              onDoubleClick: event => {
+                event.stopPropagation();
+                editEventType(record);
+              }, // 双击
+            })}
             columns={columns}
             dataSource={tableData}
-                        pagination={false} />
+            pagination={false}
+          />
         </div>
       </Spin>
       <AddFlowsModal
@@ -180,8 +198,6 @@ const incidentFlow = (props) => {
         placement="right"
       />
     </>
-
-
-    )
-}
+  );
+};
 export default incidentFlow;