Skip to content

C
CivManage
Commit 99f2f0ee authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

修改多级模态

parent d5c89a6b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 213 additions and 186 deletions
package.json
View file @ 99f2f0ee
......@@ -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
View file @ 99f2f0ee
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)
}
......@@ -242,53 +248,19 @@ const AddModal = props => {
}
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 {
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
View file @ 99f2f0ee
......@@ -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 0 → 100644
View file @ 99f2f0ee
/*
* @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
View file @ 99f2f0ee
......@@ -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
View file @ 99f2f0ee
......@@ -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
View file @ 99f2f0ee
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
View file @ 99f2f0ee
......@@ -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()}
......@@ -963,7 +966,7 @@ const AddModal = props => {
</Form>
<ChangeAdd
visible={isVisible}
onCancel={onCancel}
onClose={onCancel}
callBackSubmit={onOK}
newCheckedList={checkedList1}
isType={types}
......@@ -973,6 +976,7 @@ const AddModal = props => {
pickItem={pickItem}
characterValue={characterValue}
formObj={formObj}
placement="right"
/>
<ChangeImage
visible={isVisible1}
......
src/pages/platformCenter/bsmanager/workOrder/AddViewModal.jsx
View file @ 99f2f0ee
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
View file @ 99f2f0ee
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
View file @ 99f2f0ee
......@@ -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
View file @ 99f2f0ee
......@@ -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
View file @ 99f2f0ee
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}
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}
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.jsx
View file @ 99f2f0ee
......@@ -24,7 +24,7 @@ import {
ApartmentOutlined,
DesktopOutlined
} from '@ant-design/icons';
import {GetCM_Event_LoadEventTable, CM_Event_RemoveEventTable, CM_Event_ReOrder, GetCM_Event_LoadEventTypeTable} from '@/services/standingBook/api';
import { GetCM_Event_LoadEventTable, CM_Event_RemoveEventTable, CM_Event_ReOrder, GetCM_Event_LoadEventTypeTable } from '@/services/standingBook/api';
import classnames from 'classnames';
import AddModal from './AddModal'
import ProcessModal from './ProcessModal'
......@@ -50,7 +50,7 @@ const incident = () => {
const [sortData,setSortData] = useState([])
const [sortData, setSortData] = useState([])
const [rember, setRember] = useState(0)
const [rember1, setRember1] = useState()
......@@ -110,17 +110,13 @@ const incident = () => {
,
{
title: '上报字段',
dataIndex: 'reportPage',
key: 'reportPage',
dataIndex: 'reportFields',
key: 'reportFields',
width: 100,
render: item => (
<div
ref={r => {
if (r) {
r.innerHTML = item;
}
}}
/>
<span style={{ color: 'grey' }} key={item}>
{item}
</span>
),
}
,
......@@ -130,13 +126,9 @@ const incident = () => {
key: 'displayFields',
width: 100,
render: item => (
<div
ref={r => {
if (r) {
r.innerHTML = item;
}
}}
/>
<span style={{ color: 'grey' }} key={item}>
{item}
</span>
),
}
......@@ -146,15 +138,11 @@ const incident = () => {
dataIndex: 'editable',
key: 'editable',
width: 50,
render: item =>(
<div
ref={r => {
if (r) {
r.innerHTML = item;
}
}}
/>
)
render: item => (
<span style={{ color: 'grey' }} key={item}>
{item}
</span>
),
}
,
{
......@@ -162,7 +150,7 @@ const incident = () => {
dataIndex: 'editableFields',
key: 'editableFields',
width: 100,
render: item =>(
render: item => (
<div
ref={r => {
if (r) {
......@@ -257,11 +245,11 @@ const incident = () => {
}
]
useEffect(()=>{
useEffect(() => {
setTreeLoading(true);
GetCM_Event_LoadEventTable().then(res =>{
GetCM_Event_LoadEventTable().then(res => {
setTreeLoading(false);
if(res.msg==='Ok'){
if (res.msg === 'Ok') {
console.log(res.data)
// setMaxLength(res.data.root.length + 1)
let arr = formateArrDataA(res.data, 'businessType')
......@@ -269,7 +257,7 @@ const incident = () => {
let newArr = []
let newapp = []
let newabb = []
let aa= []
let aa = []
let zz = []
Object.keys(arr).map((item, index) => {
newArr.push(item)
......@@ -279,24 +267,24 @@ const incident = () => {
newapp.push(item)
})
console.log(newapp)
newapp.map((item, index)=>{
newapp.map((item, index) => {
console.log(item)
item.map((item1, index)=>{
item.map((item1, index) => {
newabb.push(item1.root)
console.log(item1.root)
})
})
console.log(newabb)
newabb.map((item, index)=>{
newabb.map((item, index) => {
console.log(item)
aa.push(item)
})
console.log(aa)
aa.map((item, index)=>{
aa.map((item, index) => {
console.log(item)
item.map((item1, index)=>{
item.map((item1, index) => {
console.log(item1)
zz.push({...item1})
zz.push({ ...item1 })
})
})
console.log(zz)
......@@ -309,18 +297,18 @@ const incident = () => {
setTreeData(newArr)
}
})
},[flag])
useEffect(()=>{
}, [flag])
useEffect(() => {
GetCM_Event_LoadEventTypeTable().then(res => {
if (res.msg === 'Ok') {
let arr = []
res.data.map((item, index)=>{
res.data.map((item, index) => {
arr.push(item.text)
})
setSelect(arr)
}
})
},[])
}, [])
const formateArrDataA = (initialArr, name) => {
console.log(initialArr)
console.log(name)
......@@ -373,7 +361,7 @@ const incident = () => {
}
//删除事件类型
const deleteEventType = record => {
CM_Event_RemoveEventTable(record.ID).then(res =>{
CM_Event_RemoveEventTable(record.ID).then(res => {
if (res.msg === '') {
notification.success({
message: '提示',
......@@ -407,15 +395,15 @@ const incident = () => {
setViewVisible(true)
setTitle2(record.name)
}
const onSubmit =()=>{
const onSubmit = () => {
setAddvisible(false)
setFlag(flag + 1)
}
const onOK = prop =>{
const onOK = prop => {
setSortVisible(false)
let aa= (prop.str).toString()
let aa = (prop.str).toString()
console.log(aa)
CM_Event_ReOrder(aa).then(res =>{
CM_Event_ReOrder(aa).then(res => {
if (res.msg === 'Ok') {
notification.success({
message: '提示',
......@@ -432,10 +420,11 @@ const incident = () => {
}
})
}
const onOK1 =()=>{
const onOK1 = () => {
setProcessVisible(false)
setFlag(flag + 1)
}
const onOK11 =()=>{
const onOK11 = () => {
setViewVisible(false)
}
return (
......@@ -472,11 +461,11 @@ const incident = () => {
</Tooltip>
<hr style={{ width: '100%', color: '#eeecec' }} />
{
treeData.length>0 && (treeData.map((item, index) => {
treeData.length > 0 && (treeData.map((item, index) => {
return <div className={classnames({
[styles.listItem]: true,
[styles.pickItem]: item === pickItem,
})} onClick={e => {setPickItem(item);setRember(index);setRember1(item)}} key={index}>{item}（{tableData[item] ? tableData[item].length : ''}） {item === pickItem ? <RightOutlined /> : ''} </div>
})} onClick={e => { setPickItem(item); setRember(index); setRember1(item) }} key={index}>{item}（{tableData[item] ? tableData[item].length : ''}） {item === pickItem ? <RightOutlined /> : ''} </div>
})
)}
</div>
......@@ -516,7 +505,7 @@ const incident = () => {
bordered
onRow={record => {
return {
onDoubleClick: event => {event.stopPropagation(); editEventType(record)}, //双击
onDoubleClick: event => { event.stopPropagation(); editEventType(record) }, //双击
};
}}
columns={columns}
......
src/pages/platformCenter/bsmanager/workOrder/incident.less
View file @ 99f2f0ee
......@@ -184,7 +184,7 @@
padding: 0.5rem;
}
.cardContent{
height: 30rem;
// height: 30rem;
overflow-y: scroll;
width: 19rem;
}
......@@ -215,3 +215,10 @@
}
}
}
.ant-checkbox-group-item {
width: 260px;
}
.ant-drawer-footer {
display:flex;
justify-content: flex-end;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment