修改多级模态

package.json

@@ -98,6 +98,7 @@
     "connected-react-router": "6.4.0",
     "copy-webpack-plugin": "5.0.0",
     "cross-env": "5.0.0",
+    "dragm": "^0.0.5",
     "express": "4.16.4",
     "fontfaceobserver": "2.1.0",
     "gojs": "^2.1.37",

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

-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect} from 'react';
 import { Modal, Form, Input, notification, Row, Col, Select, Button, Dropdown, Menu } from 'antd';
 import styles from './maintenance.less'
+import ModalDrag from './ModalDrag';
 import { CM_XWBPlan_AccountTable, CM_XWBPlan_feedbackTable, CM_XWBPlan_DataEditORAdd, CM_XWBPlan_DataList } from '@/services/maintenance/api'
 import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api'
-import { PlusOutlined, DownOutlined } from '@ant-design/icons'
+import { PlusOutlined, DownOutlined, StepForwardFilled } from '@ant-design/icons'
 import ChangeAdd from './ChangeAdd'
 
 const { Option } = Select;
@@ -23,6 +24,7 @@ const AddModal = props => {
     const [pickItem, setPickItem] = useState('')//复选框数据填入项
     const [checkedList1, setCheckedList1] = useState([])//最新选择数据
     const [characterValue, setCharacterValue] = useState('')//打开弹框之前数据
+    const [ff, setFf] = useState([])
 
     const [form] = Form.useForm();
     const { Item } = Form;
@@ -151,6 +153,10 @@ const AddModal = props => {
         CM_Event_LoadDepartmentAndRoles().then(res => {
             if (res.msg === 'Ok') {
                 setFiled1(formateArrDataA1(res.data, 'groupType'))
+                console.log(filed1)
+                console.log(filed1['角色'])
+                setFf(filed1['角色'])
+                console.log(ff)
                 console.log(res.data)
 
             }
@@ -241,54 +247,20 @@ const AddModal = props => {
         setSelectValue1(value)
     }
     const onOK = prop => {
-        console.log(prop.isType)
-        if (prop.isType == "app") {
-            let title = prop.title
-            let selectData = prop.stt
-            console.log(prop.stt)
-            let ff = prop.filed22
-            let aa = []
-            let bb = 0
-            title.map((item, index) => {
-                console.log(ff[item])
-                aa = []
-                selectData.map((item1, index1) => {
-                    console.log(item1)
-                    if (ff[item].indexOf(item1) != -1) {
-                        aa.push(item1)
-                    }
-                })
-                console.log(aa)
-                if (aa.length == 0) {
-                    bb = 1
-                }
-            })
-            console.log(aa)
-            if (bb == 1) {
-                notification.error({
-                    message: '提示',
-                    description: '权限角色部门必须都选至少一项',
-                });
-            } else {
-                setIsVisible(false)
-                let inputText = { ...inputValue }
-                inputText[prop.pickItem] = prop.str
-                setCheckedList1(prop.checkedList)
-                setInputValue(inputText)
-            }
-        } else {
+            console.log(prop.isType)
             setIsVisible(false)
             let inputText = { ...inputValue }
             inputText[prop.pickItem] = prop.str
             setCheckedList1(prop.checkedList)
             setInputValue(inputText)
-        }
     }
+    const title = <ModalDrag title="巡维保计划配置" />
     return (
         <Modal
-            title='巡维保计划配置'
+            title={title}
             visible={visible}
             maskClosable={false}
+            mask={false}
             destroyOnClose
             width="800px"
             destroyOnClose
@@ -530,7 +502,7 @@ const AddModal = props => {
                     </Col>
                 </Row>
             </Form>
-            <ChangeAdd
+            {/* <ChangeAdd
                 visible={isVisible}
                 onCancel={() => setIsVisible(false)}
                 callBackSubmit={onOK}
@@ -538,8 +510,22 @@ const AddModal = props => {
                 isType={types}
                 filed={filed}
                 filed1={filed1}
+                ff={ff}
+                pickItem={pickItem}
+                characterValue={characterValue}
+            /> */}
+            <ChangeAdd
+                visible={isVisible}
+                onClose={() => setIsVisible(false)}
+                callBackSubmit={onOK}
+                newCheckedList={checkedList1}
+                isType={types}
+                filed={filed}
+                filed1={filed1}
+                ff={ff}
                 pickItem={pickItem}
                 characterValue={characterValue}
+                placement="right"
             />
         </Modal>
     )

src/pages/platformCenter/bsmanager/maintenance/ChangeAdd.less

@@ -58,11 +58,8 @@
 }
 .listCard{
     display: flex;
-    .cardItem{
-        padding: 0.5rem;
-    }
+    
     .cardContent{
-        height: 30rem;
         overflow-y: scroll;
         width: 100%;
     }
@@ -72,3 +69,9 @@
         margin-bottom: 1rem;
     }
 }
+.ant-modal-body {
+    padding: 0px; 
+}
+.ant-modal-footer {
+    padding: 28px 40px; 
+}
\ No newline at end of file

src/pages/platformCenter/bsmanager/maintenance/ModalDrag.js

+/*
+ * @Description: 
+ * @Author: leizhe
+ * @Date: 2021-10-09 15:08:18
+ * @LastEditTime: 2021-10-11 10:21:35
+ * @LastEditors: leizhe
+ */
+import React, {PureComponent } from "react";
+import DragM from "dragm";
+
+export default class ModalDrag extends PureComponent {
+    updateTransform = transformStr =>{
+        this.modalDom.style.transform = transformStr;
+
+    };
+    componentDidMount(){ 
+        this.modalDom = document.getElementsByClassName("ant-modal-wrap")[0]
+    }
+    render(){
+        const {title} = this.props;
+        return (
+            <DragM updateTransform={this.updateTransform}>
+                <div>{title}</div>
+            </DragM>
+        )
+    }
+}
\ No newline at end of file

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

@@ -168,10 +168,7 @@ const maintenance = () => {
                     duration: 3,
                     description: '删除成功',
                 });
-                console.log(111)
                 setFlag(flag + 1)
-                console.log(222)
-                console.log(flag)
             } else {
                 notification.error({
                     message: '提示',
@@ -209,7 +206,7 @@ const maintenance = () => {
                     }}
                     columns={columns}
                     dataSource={tableData}
-                    scroll={{ y: 'calc(100vh - 155px)' }}
+                    scroll={{ y: 'calc(100vh - 215px)' }}
                     pagination={{
                         showTotal: (total, range) =>
                             `第${range[0]}-${range[1]} 条/共 ${total} 条`,

src/pages/platformCenter/bsmanager/maintenance/maintenance.less

@@ -5,6 +5,7 @@
     .pickItem{
         background-color: #F5F6F9;
     }
+    
 }
 .formData{
     height: 38rem;
@@ -68,20 +69,16 @@
     }
     .cardItemData{
         display:inline-block;
-        padding: 1rem;
-        border: 1px solid #b5b8c8;
-        margin-bottom: 1rem;
-        width:30.5%;
-        margin-right:15px;
-        margin-left:17px;
-        height: 30rem;
-        overflow-y: scroll;
-    }
-    .cardItemData1{
-        padding: 1rem;
+        padding: 0.5rem;
         border: 1px solid #b5b8c8;
-        margin-bottom: 1rem;
-        height: 30rem;
+        width:100%;
+        // height: 30rem;
         overflow-y: scroll;
     }
 }
+.ant-modal-body {
+    padding: 10px 24px 0px 24px; 
+}
+.ant-modal-footer {
+    padding: 0px 48px 10px 40px; 
+}

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

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Input, notification, message, Row, Col, Select, Checkbox, Radio, Button } from 'antd';
+import { Modal, Form, Input, notification, message, Row, Col, Select, Drawer, Space, Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import ChangeAddFlows from './ChangeAddFlows'
 import { CM_Event_ReloadFlows, CM_Event_LoadDepartmentAndRoles, CM_Event_AddEvenFlow, CM_Event_EditEvenFlow } from '@/services/standingBook/api';
@@ -7,7 +7,7 @@ import styles from './incident.less';
 
 const { Option } = Select;
 const AddFlowsModal = props => {
-    const { callBackSubmit = () => { }, type, visible, onCancel, formObj, obj, maxLength, record } = props;
+    const { callBackSubmit = () => { }, type, visible, onClose, formObj, obj, maxLength, record } = props;
     const [form] = Form.useForm();
     const { Item } = Form;
 
@@ -161,7 +161,6 @@ const AddFlowsModal = props => {
         callBackSubmit();
         // setLoading(true);
         let aa = form.getFieldsValue().FlowName
-
         console.log(aa)
         console.log(inputValue)
         console.log(strr)
@@ -171,7 +170,7 @@ const AddFlowsModal = props => {
             CM_Event_AddEvenFlow({
                 eventTypeId: formObj.ID,
                 flowName: aa,
-                roles: strr,
+                roles: inputValue.Roles,
                 order: maxLength,
             })
                 .then(res => {
@@ -205,7 +204,7 @@ const AddFlowsModal = props => {
             CM_Event_EditEvenFlow({
                 eventTypeId: formObj.ID,
                 eventFlowId: record.ID,
-                roles: strr
+                roles: inputValue.Roles
             })
                 .then(res => {
                     // setLoading(false);
@@ -300,14 +299,19 @@ const AddFlowsModal = props => {
 
     }
     return (
-        <Modal
+        <Drawer
             title={type === 'add' ? '添加受理流程' : '编辑受理流程'}
             visible={visible}
-            onCancel={onCancel}
             width='800px'
-            onOk={onSumbit}
-            okText="确认"
-            cancelText="取消"
+            onClose={onClose}
+            destroyOnClose
+            footer={
+                <Space>
+                  <Button onClick={onSumbit} type="primary">
+                    确定
+                  </Button>
+                </Space>
+              } 
         >
             <Form form={form} labelCol={{ span: 7 }} style={{ height: '8rem', overflowY: 'scroll' }}>
                 <Row>
@@ -361,15 +365,16 @@ const AddFlowsModal = props => {
             </Form>
             <ChangeAddFlows
                 visible={visible1}
-                onCancel={() => setVisible1(false)}
+                onClose={() => setVisible1(false)}
                 callBackSubmit={onOKk}
                 newCheckedList={checkedList1}
                 filed1={filed1}
                 pickItem={pickItem}
                 characterValue={characterValue}
                 formObj={formObj}
+                placement="right"
             />
-        </Modal>
+        </Drawer>
     )
 }
 export default AddFlowsModal
\ No newline at end of file

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

@@ -4,6 +4,7 @@ import { GetCM_Event_LoadEventTypeTable, LoadEventFields, CM_Event_LoadDepartmen
 import styles from './incident.less';
 import ChangeAdd from './changeAdd'
 import ChangeImage from './ChangeImage'
+import ModalDrag from '../maintenance/ModalDrag';
 import { PlusOutlined, DownOutlined } from '@ant-design/icons'
 import { set } from 'immutable';
 import { getRoleGroup } from '@/services/userCenter/roleManage/api';
@@ -581,13 +582,15 @@ const AddModal = props => {
         setIsVisible1(false)
        
     }
+    const title = <ModalDrag title={type === 'add' ? '添加事件类型' : '编辑事件类型'} />
     return (
         <Modal
-            title={type === 'add' ? '添加事件类型' : '编辑事件类型'}
+            title={title}
             maskClosable={false}
             width="800px"
             destroyOnClose
             okText="确认"
+            mask={false}
             cancelText="取消"
             {...props}
             onOk={() => onSubmit()}
@@ -961,18 +964,19 @@ const AddModal = props => {
                     </Col>
                 </Row>
             </Form>
-            <ChangeAdd
-                visible={isVisible}
-                onCancel={onCancel}
-                callBackSubmit={onOK}
-                newCheckedList={checkedList1}
-                isType={types}
-                filed={filed}
-                flag={flag}
-                filed1={filed1}
-                pickItem={pickItem}
-                characterValue={characterValue}
-                formObj={formObj}
+            <ChangeAdd 
+               visible={isVisible}
+               onClose={onCancel}
+               callBackSubmit={onOK}
+               newCheckedList={checkedList1}
+               isType={types}
+               filed={filed}
+               flag={flag}
+               filed1={filed1}
+               pickItem={pickItem}
+               characterValue={characterValue}
+               formObj={formObj}
+               placement="right" 
             />
             <ChangeImage
                 visible={isVisible1}

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

 import React, { useEffect, useState } from 'react';
-import { Modal, Form, Input, notification, Row, Col} from 'antd';
+import { Drawer, Form, Input, notification, Row, Col, Button, Space} from 'antd';
 import { CM_Event_OperateEventExtendPage, GetEventExtendPage} from '@/services/standingBook/api';
 import { IdcardTwoTone } from '@ant-design/icons';
 const AddViewModal = props => {
-    const { callBackSubmit = () => { }, visible, onCancel, maxLength, title2, obj, type } = props;
+    const { callBackSubmit = () => { }, visible, onClose, maxLength, title2, obj, type } = props;
     const [id, setId]= useState('')
 
     const [form] = Form.useForm();
@@ -89,12 +89,18 @@ const AddViewModal = props => {
         }
     }, [visible])
     return (
-        <Modal
+        <Drawer
             visible={visible}
-            onCancel={onCancel}
+            onClose={onClose}
+            width="500px"
             title={type=='edit' ? '编辑事件辅助视图配置':'添加事件辅助视图配置'}
-            onOk={() => onSubmit()}
-
+            footer={
+                <Space>
+                  <Button onClick={onSubmit} type="primary" >
+                    确定
+                  </Button>
+                </Space>
+              } 
         >
             <Form form={form} labelCol={{ span: 7 }} style={{ height: '24rem', overflowY: 'scroll' }}>
                 <Row>
@@ -161,7 +167,7 @@ const AddViewModal = props => {
                 </Row>
 
             </Form>
-        </Modal>
+        </Drawer>
     )
 }
 export default AddViewModal;
\ No newline at end of file

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

 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd';
+import { Form, Drawer, Space, Divider, Radio, Checkbox, Button } from 'antd';
 
 import styles from './incident.less';
 import Sortable from 'sortablejs';
@@ -112,21 +112,19 @@ const ChangeAddFlows = props =>{
 
 
     return (
-        <Modal
+        <Drawer
             title='部门或角色'
             bodyStyle={{ width: '100%', minHeight: '100px' }}
-            style={{ top: '10px' }}
             width="700px"
             destroyOnClose
-            centered={true}
-            maskClosable={false}
-            onOk={onSubmit}
-            okText="确认"
-            cancelText="取消"
             {...props}
-            onOk={() => onSubmit()}
-            forceRender={true}
-            getContainer={false}
+            footer={
+                <Space>
+                  <Button onClick={onSubmit} type="primary" >
+                    确定
+                  </Button>
+                </Space>
+              }
         >
             {visible && (
                 <div className={styles.listCard}>
@@ -169,7 +167,7 @@ const ChangeAddFlows = props =>{
             )
 
             }
-        </Modal>
+        </Drawer>
     )
     
 };

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

@@ -25,15 +25,15 @@ const ProcessModal = props => {
             key: 'FlowName',
             width: 150,
             ellipsis: true,
-            render: item => (
-                <div
-                    ref={r => {
-                        if (r) {
-                            r.innerHTML = item;
-                        }
-                    }}
-                />
-            )
+            // render: item => (
+            //     <div
+            //         ref={r => {
+            //             if (r) {
+            //                 r.innerHTML = item;
+            //             }
+            //         }}
+            //     />
+            // )
         }
         ,
         {
@@ -42,15 +42,15 @@ const ProcessModal = props => {
             key: 'FlowRoles',
             width: 400,
             ellipsis: true,
-            render: item => (
-                <div
-                    ref={r => {
-                        if (r) {
-                            r.innerHTML = item;
-                        }
-                    }}
-                />
-            )
+            // render: item => (
+            //     <div
+            //         ref={r => {
+            //             if (r) {
+            //                 r.innerHTML = item;
+            //             }
+            //         }}
+            //     />
+            // )
         },
         {
             title: () => (<span style={{fontWeight:'bold'}}>操作</span>),
@@ -180,8 +180,9 @@ const ProcessModal = props => {
                 type={isType} 
                 record={record1}
                 maxLength={maxLength}
-                onCancel={() => setAddVisible(false)}
+                onClose={() => setAddVisible(false)}
                 callBackSubmit={onOK}
+                placement="right"
             />
         </Modal>
     )

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

@@ -238,11 +238,12 @@ const ViewModal = props => {
             <AddViewModal
                 visible={addViewVisible} 
                 title="事件辅助视图配置"
-                onCancel={()=>setAddViewVisible(false)}
+                onClose={()=>setAddViewVisible(false)}
                 title2={title2}
                 callBackSubmit={okk}
                 obj={obj}
                 type={type}
+                placement="right"
             />
         </Modal>
     )

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

 import React, { useState, useEffect, useCallback, useRef } from 'react';
-import { Form, Modal, Space, Divider, Radio, Checkbox, notification } from 'antd';
+import { Form, Drawer, Space, Divider, Checkbox,  Button } from 'antd';
 
 import styles from './incident.less';
 import Sortable from 'sortablejs';
@@ -143,20 +143,20 @@ const AddModal = props => {
     }
     if (isType != 'app') {
         return (
-            <Modal
+            <Drawer
                 title='字段集选择'
                 bodyStyle={{ width: '100%', minHeight: '100px' }}
                 style={{ top: '10px' }}
                 width="700px"
-                destroyOnClose
-                centered={true}
-                maskClosable={false}
-                onOk={onSubmit}
-                okText="确认"
-                cancelText="取消"
-                {...props}
-                forceRender={true}
-                getContainer={false}
+                destroyOnClose                    
+                {...props} 
+                footer={
+                    <Space>
+                      <Button onClick={onSubmit} type="primary">
+                        确定
+                      </Button>
+                    </Space>
+                  }              
             >
                 {visible && (
                     <div className={styles.listCard}>
@@ -222,24 +222,24 @@ const AddModal = props => {
                 )
 
                 }
-            </Modal>
+            </Drawer>
         );
     } else if (isType === 'app') {
         return (
-            <Modal
+            <Drawer
                 title= '部门或角色'
                 bodyStyle={{ width: '100%', minHeight: '100px' }}
                 style={{ top: '10px' }}
                 width="700px"
-                destroyOnClose
-                centered={true}
-                maskClosable={false}
-                onOk={onSubmit}
-                okText="确认"
-                cancelText="取消"
-                {...props}
-                forceRender={true}
-                getContainer={false}
+                destroyOnClose                    
+                {...props}   
+                footer={
+                    <Space>
+                      <Button onClick={onSubmit} type="primary" >
+                        确定
+                      </Button>
+                    </Space>
+                  }      
             >
                 {visible && (
                     <div className={styles.listCard}>
@@ -282,7 +282,7 @@ const AddModal = props => {
                 )
 
                 }
-            </Modal>
+            </Drawer>
         );
     }
 };

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

@@ -184,7 +184,7 @@
         padding: 0.5rem;
     }
     .cardContent{
-        height: 30rem;
+        // height: 30rem;
         overflow-y: scroll;
         width: 19rem;
     }
@@ -214,4 +214,11 @@
           }
       }
     }
-  }
+  }
\ No newline at end of file
+  .ant-checkbox-group-item {
+    width: 260px;
+}
+.ant-drawer-footer {
+    display:flex;
+    justify-content: flex-end;
+}
\ No newline at end of file