Commit 99f2f0ee authored by 皮倩雯's avatar 皮倩雯

修改多级模态

parent d5c89a6b
...@@ -98,6 +98,7 @@ ...@@ -98,6 +98,7 @@
"connected-react-router": "6.4.0", "connected-react-router": "6.4.0",
"copy-webpack-plugin": "5.0.0", "copy-webpack-plugin": "5.0.0",
"cross-env": "5.0.0", "cross-env": "5.0.0",
"dragm": "^0.0.5",
"express": "4.16.4", "express": "4.16.4",
"fontfaceobserver": "2.1.0", "fontfaceobserver": "2.1.0",
"gojs": "^2.1.37", "gojs": "^2.1.37",
......
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 { Modal, Form, Input, notification, Row, Col, Select, Button, Dropdown, Menu } from 'antd';
import styles from './maintenance.less' 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_XWBPlan_AccountTable, CM_XWBPlan_feedbackTable, CM_XWBPlan_DataEditORAdd, CM_XWBPlan_DataList } from '@/services/maintenance/api'
import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/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' import ChangeAdd from './ChangeAdd'
const { Option } = Select; const { Option } = Select;
...@@ -23,6 +24,7 @@ const AddModal = props => { ...@@ -23,6 +24,7 @@ const AddModal = props => {
const [pickItem, setPickItem] = useState('')//复选框数据填入项 const [pickItem, setPickItem] = useState('')//复选框数据填入项
const [checkedList1, setCheckedList1] = useState([])//最新选择数据 const [checkedList1, setCheckedList1] = useState([])//最新选择数据
const [characterValue, setCharacterValue] = useState('')//打开弹框之前数据 const [characterValue, setCharacterValue] = useState('')//打开弹框之前数据
const [ff, setFf] = useState([])
const [form] = Form.useForm(); const [form] = Form.useForm();
const { Item } = Form; const { Item } = Form;
...@@ -151,6 +153,10 @@ const AddModal = props => { ...@@ -151,6 +153,10 @@ const AddModal = props => {
CM_Event_LoadDepartmentAndRoles().then(res => { CM_Event_LoadDepartmentAndRoles().then(res => {
if (res.msg === 'Ok') { if (res.msg === 'Ok') {
setFiled1(formateArrDataA1(res.data, 'groupType')) setFiled1(formateArrDataA1(res.data, 'groupType'))
console.log(filed1)
console.log(filed1['角色'])
setFf(filed1['角色'])
console.log(ff)
console.log(res.data) console.log(res.data)
} }
...@@ -241,54 +247,20 @@ const AddModal = props => { ...@@ -241,54 +247,20 @@ const AddModal = props => {
setSelectValue1(value) setSelectValue1(value)
} }
const onOK = prop => { const onOK = prop => {
console.log(prop.isType) 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) setIsVisible(false)
let inputText = { ...inputValue } let inputText = { ...inputValue }
inputText[prop.pickItem] = prop.str inputText[prop.pickItem] = prop.str
setCheckedList1(prop.checkedList) setCheckedList1(prop.checkedList)
setInputValue(inputText) setInputValue(inputText)
}
} }
const title = <ModalDrag title="巡维保计划配置" />
return ( return (
<Modal <Modal
title='巡维保计划配置' title={title}
visible={visible} visible={visible}
maskClosable={false} maskClosable={false}
mask={false}
destroyOnClose destroyOnClose
width="800px" width="800px"
destroyOnClose destroyOnClose
...@@ -530,7 +502,7 @@ const AddModal = props => { ...@@ -530,7 +502,7 @@ const AddModal = props => {
</Col> </Col>
</Row> </Row>
</Form> </Form>
<ChangeAdd {/* <ChangeAdd
visible={isVisible} visible={isVisible}
onCancel={() => setIsVisible(false)} onCancel={() => setIsVisible(false)}
callBackSubmit={onOK} callBackSubmit={onOK}
...@@ -538,8 +510,22 @@ const AddModal = props => { ...@@ -538,8 +510,22 @@ const AddModal = props => {
isType={types} isType={types}
filed={filed} filed={filed}
filed1={filed1} 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} pickItem={pickItem}
characterValue={characterValue} characterValue={characterValue}
placement="right"
/> />
</Modal> </Modal>
) )
......
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, PureComponent } from 'react';
import { Modal, Divider, Checkbox } from 'antd'; import {Drawer, Divider, Checkbox, Space, Button} from 'antd';
import styles from './maintenance.less' import styles from './maintenance.less'
const CheckboxGroup = Checkbox.Group; const CheckboxGroup = Checkbox.Group;
const ChangeAdd = props => { const ChangeAdd = props => {
const { callBackSubmit = () => { }, isType, visible, newCheckedList, filed1, filed, pickItem, characterValue } = props; const { callBackSubmit = () => { }, isType, visible, newCheckedList, filed1, filed, pickItem, characterValue, ff } = props;
const [title, setTitle] = useState([])//分组名
const [checkedList, setCheckedList] = useState([]);//选中的复选框内容 const [checkedList, setCheckedList] = useState([]);//选中的复选框内容
const [indeterminate, setIndeterminate] = useState([]);//全选样式控制 const [indeterminate, setIndeterminate] = useState(true);//全选样式控制
const [checkAll, setCheckAll] = useState([]);//全选 const [checkAll, setCheckAll] = useState(false);//全选
const [selectData, setSelectData] = useState([])//选中复选框的值集合 const [selectData, setSelectData] = useState([])//选中复选框的值集合
let objArr = [] let objArr = []
const onChangeList = (list) => { const onChangeList = (list) => {
let arr= [] let arr = []
list.map((item, index)=>{ list.map((item, index) => {
arr.push(item) arr.push(item)
}) })
console.log(list) console.log(list)
console.log(arr) console.log(arr)
setCheckedList(arr) setCheckedList(arr)
// const checkedListArr = [...checkedList] setIndeterminate(!!list.length && list.length < filed.length)
// checkedListArr[index] = list setCheckAll(list.length === filed.length)
// setCheckedList(checkedListArr);
// const indeterminateArr = [...indeterminate]
// const checkAllArr = [...checkAll]
// indeterminateArr[index] = !!list.length && list.length < filed[title].length
// checkAllArr[index] = list.length === filed[title].length
// setIndeterminate(indeterminateArr)
// setCheckAll(checkAllArr);
}; };
const onChangeList1 = (list, index, title) => { const onChangeList1 = (list) => {
const checkedListArr = [...checkedList] let arr = []
checkedListArr[index] = list list.map((item, index) => {
setCheckedList(checkedListArr); arr.push(item)
console.log(checkedListArr) })
const indeterminateArr = [...indeterminate] console.log(list)
const checkAllArr = [...checkAll] console.log(arr)
indeterminateArr[index] = !!list.length && list.length < filed1[title].length setCheckedList(arr)
checkAllArr[index] = list.length === filed1[title].length setIndeterminate(!!list.length && list.length < ff.length)
setIndeterminate(indeterminateArr) setCheckAll(list.length === ff.length)
setCheckAll(checkAllArr);
}; };
const onSubmit = () => { const onSubmit = () => {
isType === 'rule' ? callBackSubmit(`${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`) : callBackSubmit({ checkedList, str: selectData.join(","), pickItem, stt:selectData, title:title, filed22:filed1, isType:isType }); isType === 'rule' ? callBackSubmit(`${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`) : callBackSubmit({ checkedList, str: selectData.join(","), pickItem, stt: selectData, filed22: filed1, isType: isType });
} }
const onCheckAllChange = e => { const onCheckAllChange = e => {
const indeterminateArr = [...indeterminate] setCheckedList(e.target.checked ? filed : [])
const checkAllArr = [...checkAll] setIndeterminate(false)
const checkedListArr = [...checkedList] setCheckAll(e.target.checked)
checkAllArr[e.target.index] = e.target.checked
indeterminateArr[e.target.index] = false
e.target.checked ? checkedListArr[e.target.index] = e.target.checkvalue : checkedListArr[e.target.index] = []
setCheckedList(checkedListArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
}; };
const onCheckAllChange1 = e => {
setCheckedList(e.target.checked ? ff : [])
setIndeterminate(false)
setCheckAll(e.target.checked)
}
useEffect(() => { useEffect(() => {
selectAll() selectAll()
}, [checkedList]); }, [checkedList]);
...@@ -72,134 +62,110 @@ const ChangeAdd = props => { ...@@ -72,134 +62,110 @@ const ChangeAdd = props => {
} }
useEffect(() => { useEffect(() => {
console.log(indeterminate)
if (isType != '' && isType === 'add') { if (isType != '' && isType === 'add') {
// console.log(filed)
// let arr = Object.keys(filed)
// console.log(arr, 'arr')
// setTitle(arr)
let checkArr = [] let checkArr = []
// let indeterminateArr = []
// let checkAllArr = []
console.log(newCheckedList); console.log(newCheckedList);
// arr.map((item, index) => { newCheckedList.map(checkItem => {
// checkArr[index] = [] if (filed.includes(checkItem)) {
newCheckedList.map(checkItem => { checkArr.push(checkItem)
if (filed.includes(checkItem)) { }
checkArr.push(checkItem)
}
// })
// indeterminateArr.push(!!checkArr[index].length && checkArr[index].length < filed[item].length)
// checkAllArr.push(checkArr[index].length === filed[item].length)
}) })
setCheckedList(checkArr) setCheckedList(checkArr)
// setIndeterminate(indeterminateArr) setIndeterminate(!!newCheckedList.length && newCheckedList.length < filed.length)
// setCheckAll(checkAllArr) setCheckAll(newCheckedList.length === filed.length)
let newArr = characterValue.length ? characterValue.split(",") : [] let newArr = characterValue.length ? characterValue.split(",") : []
setSelectData(newArr) setSelectData(newArr)
} else if (isType === 'app') { } else if (isType === 'app') {
console.log(filed1)
let arr = Object.keys(filed1)
console.log(arr, 'arr')
setTitle(arr)
let checkArr = [] let checkArr = []
let indeterminateArr = []
let checkAllArr = []
console.log(newCheckedList); console.log(newCheckedList);
console.log(characterValue) newCheckedList.map(checkItem => {
arr.map((item, index) => { if (ff.includes(checkItem)) {
checkArr[index] = [] checkArr.push(checkItem)
newCheckedList.map(checkItem => { }
if (filed1[item].includes(checkItem)) {
checkArr[index].push(checkItem)
}
})
indeterminateArr.push(!!checkArr[index].length && checkArr[index].length < filed1[item].length)
checkAllArr.push(checkArr[index].length === filed1[item].length)
}) })
setCheckedList(checkArr) setCheckedList(checkArr)
setIndeterminate(indeterminateArr) setIndeterminate(!!newCheckedList.length && newCheckedList.length < ff.length)
setCheckAll(checkAllArr) setCheckAll(newCheckedList.length === ff.length)
let newArr = characterValue.length ? characterValue.split(",") : [] let newArr = characterValue.length ? characterValue.split(",") : []
setSelectData(newArr) setSelectData(newArr)
} }
}, [visible]); }, [visible]);
if (isType != 'app') { if (isType != 'app') {
return ( return (
<div className={styles.ChangeAddContainer}> <div className={styles.ChangeAddContainer}>
<Modal <Drawer
title='反馈名称' title="反馈名称"
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }} style={{ top: '10px' }}
width="500px" width="450px"
destroyOnClose destroyOnClose
centered={true} {...props}
maskClosable={false} footer={
onOk={onSubmit} <Space>
okText="确认" <Button onClick={onSubmit} type="primary">
cancelText="取消" 确定
{...props} </Button>
forceRender={true} </Space>
getContainer={false} }
> >
{visible && ( {visible && (
<div className={styles.listCard}> <div className={styles.listCard}>
<div className={styles.cardItem}> <div className={styles.cardItem}>
{JSON.stringify(filed) == "{}" ? {JSON.stringify(filed) == "{}" ?
<> <>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<span style={{color: 'red',fontSize: '1rem', marginLeft: '25px'}}>暂无数据请先配置台账管理台账名称为反馈</span> <span style={{ color: 'red', fontSize: '1rem', marginLeft: '25px' }}>暂无数据请先配置台账管理台账名称为反馈</span>
</div> </div>
</> </>
: :
<> <>
<div className={styles.cardContent}> <div className={styles.cardContent}>
<div className={styles.cardItemData1}> <div className={styles.cardItemData}>
{/* <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}></Checkbox> */} <Divider orientation="left" style={{ margin: '0 0 5px 0', color: '#15428b', borderTopColor: '#99bbe8' }}>全选<Checkbox style={{ marginLeft: '10px' }} indeterminate={indeterminate} onChange={onCheckAllChange} checkvalue={filed} checked={checkAll}> </Checkbox></Divider>
<CheckboxGroup options={filed} value={checkedList} onChange={(e) => onChangeList(e)} style={{width:'400px'}} /></div> <CheckboxGroup options={filed} value={checkedList} onChange={(e) => onChangeList(e)} /></div>
</div> </div>
</> </>
} }
</div>
</div> </div>
</div> )
) }
</Drawer>
}
</Modal>
</div> </div>
); );
} else if (isType === 'app') { } else if (isType === 'app') {
return ( return (
<Modal <Drawer
title= '角色' title="角色"
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }} style={{ top: '10px' }}
width="1200px" width="450px"
destroyOnClose destroyOnClose
centered={true}
maskClosable={false}
onOk={onSubmit}
okText="确认"
cancelText="取消"
{...props} {...props}
forceRender={true} footer={
getContainer={false} <Space>
<Button onClick={onSubmit} type="primary">
确定
</Button>
</Space>
}
> >
{visible && ( {visible && (
<div className={styles.listCard}> <div className={styles.listCard}>
<div className={styles.cardItem}> <div className={styles.cardItem}>
<div className={styles.cardContent}> <div className={styles.cardContent}>
{title.map((item, index) => { <div className={styles.cardItemData} >
return <div className={styles.cardItemData} key={index}> <Divider orientation="left" style={{ margin: '0 0 5px 0', color: '#15428b', borderTopColor: '#99bbe8' }}>全选<Checkbox style={{ marginLeft: '10px' }} indeterminate={indeterminate} onChange={onCheckAllChange1} checkvalue={ff} checked={checkAll}> </Checkbox></Divider>
<Divider orientation="left" style={{ margin: '0 0 10px 0', color: '#15428b', borderTopColor: '#99bbe8' }}>{item} <Checkbox indeterminate={indeterminate[index]} onChange={onCheckAllChange} index={index} checkvalue={filed1[item]} checked={checkAll[index]}> </Checkbox></Divider> <CheckboxGroup options={ff} value={checkedList} onChange={(e) => onChangeList1(e)} /></div>
<CheckboxGroup options={filed1[item]} value={checkedList[index]} onChange={(e) => onChangeList1(e, index, item)} /></div> </div>
})}
</div>
</div> </div>
</div> </div>
) )
} }
</Modal> </Drawer>
); );
} }
}; };
......
...@@ -58,11 +58,8 @@ ...@@ -58,11 +58,8 @@
} }
.listCard{ .listCard{
display: flex; display: flex;
.cardItem{
padding: 0.5rem;
}
.cardContent{ .cardContent{
height: 30rem;
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
} }
...@@ -72,3 +69,9 @@ ...@@ -72,3 +69,9 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
.ant-modal-body {
padding: 0px;
}
.ant-modal-footer {
padding: 28px 40px;
}
\ No newline at end of file
/*
* @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
...@@ -168,10 +168,7 @@ const maintenance = () => { ...@@ -168,10 +168,7 @@ const maintenance = () => {
duration: 3, duration: 3,
description: '删除成功', description: '删除成功',
}); });
console.log(111)
setFlag(flag + 1) setFlag(flag + 1)
console.log(222)
console.log(flag)
} else { } else {
notification.error({ notification.error({
message: '提示', message: '提示',
...@@ -209,7 +206,7 @@ const maintenance = () => { ...@@ -209,7 +206,7 @@ const maintenance = () => {
}} }}
columns={columns} columns={columns}
dataSource={tableData} dataSource={tableData}
scroll={{ y: 'calc(100vh - 155px)' }} scroll={{ y: 'calc(100vh - 215px)' }}
pagination={{ pagination={{
showTotal: (total, range) => showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`, `第${range[0]}-${range[1]} 条/共 ${total} 条`,
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
.pickItem{ .pickItem{
background-color: #F5F6F9; background-color: #F5F6F9;
} }
} }
.formData{ .formData{
height: 38rem; height: 38rem;
...@@ -68,20 +69,16 @@ ...@@ -68,20 +69,16 @@
} }
.cardItemData{ .cardItemData{
display:inline-block; display:inline-block;
padding: 1rem; padding: 0.5rem;
border: 1px solid #b5b8c8;
margin-bottom: 1rem;
width:30.5%;
margin-right:15px;
margin-left:17px;
height: 30rem;
overflow-y: scroll;
}
.cardItemData1{
padding: 1rem;
border: 1px solid #b5b8c8; border: 1px solid #b5b8c8;
margin-bottom: 1rem; width:100%;
height: 30rem; // height: 30rem;
overflow-y: scroll; overflow-y: scroll;
} }
} }
.ant-modal-body {
padding: 10px 24px 0px 24px;
}
.ant-modal-footer {
padding: 0px 48px 10px 40px;
}
import React, { useState, useEffect } from 'react'; 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 { PlusOutlined } from '@ant-design/icons';
import ChangeAddFlows from './ChangeAddFlows' import ChangeAddFlows from './ChangeAddFlows'
import { CM_Event_ReloadFlows, CM_Event_LoadDepartmentAndRoles, CM_Event_AddEvenFlow, CM_Event_EditEvenFlow } from '@/services/standingBook/api'; 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'; ...@@ -7,7 +7,7 @@ import styles from './incident.less';
const { Option } = Select; const { Option } = Select;
const AddFlowsModal = props => { 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 [form] = Form.useForm();
const { Item } = Form; const { Item } = Form;
...@@ -161,7 +161,6 @@ const AddFlowsModal = props => { ...@@ -161,7 +161,6 @@ const AddFlowsModal = props => {
callBackSubmit(); callBackSubmit();
// setLoading(true); // setLoading(true);
let aa = form.getFieldsValue().FlowName let aa = form.getFieldsValue().FlowName
console.log(aa) console.log(aa)
console.log(inputValue) console.log(inputValue)
console.log(strr) console.log(strr)
...@@ -171,7 +170,7 @@ const AddFlowsModal = props => { ...@@ -171,7 +170,7 @@ const AddFlowsModal = props => {
CM_Event_AddEvenFlow({ CM_Event_AddEvenFlow({
eventTypeId: formObj.ID, eventTypeId: formObj.ID,
flowName: aa, flowName: aa,
roles: strr, roles: inputValue.Roles,
order: maxLength, order: maxLength,
}) })
.then(res => { .then(res => {
...@@ -205,7 +204,7 @@ const AddFlowsModal = props => { ...@@ -205,7 +204,7 @@ const AddFlowsModal = props => {
CM_Event_EditEvenFlow({ CM_Event_EditEvenFlow({
eventTypeId: formObj.ID, eventTypeId: formObj.ID,
eventFlowId: record.ID, eventFlowId: record.ID,
roles: strr roles: inputValue.Roles
}) })
.then(res => { .then(res => {
// setLoading(false); // setLoading(false);
...@@ -300,14 +299,19 @@ const AddFlowsModal = props => { ...@@ -300,14 +299,19 @@ const AddFlowsModal = props => {
} }
return ( return (
<Modal <Drawer
title={type === 'add' ? '添加受理流程' : '编辑受理流程'} title={type === 'add' ? '添加受理流程' : '编辑受理流程'}
visible={visible} visible={visible}
onCancel={onCancel}
width='800px' width='800px'
onOk={onSumbit} onClose={onClose}
okText="确认" destroyOnClose
cancelText="取消" footer={
<Space>
<Button onClick={onSumbit} type="primary">
确定
</Button>
</Space>
}
> >
<Form form={form} labelCol={{ span: 7 }} style={{ height: '8rem', overflowY: 'scroll' }}> <Form form={form} labelCol={{ span: 7 }} style={{ height: '8rem', overflowY: 'scroll' }}>
<Row> <Row>
...@@ -361,15 +365,16 @@ const AddFlowsModal = props => { ...@@ -361,15 +365,16 @@ const AddFlowsModal = props => {
</Form> </Form>
<ChangeAddFlows <ChangeAddFlows
visible={visible1} visible={visible1}
onCancel={() => setVisible1(false)} onClose={() => setVisible1(false)}
callBackSubmit={onOKk} callBackSubmit={onOKk}
newCheckedList={checkedList1} newCheckedList={checkedList1}
filed1={filed1} filed1={filed1}
pickItem={pickItem} pickItem={pickItem}
characterValue={characterValue} characterValue={characterValue}
formObj={formObj} formObj={formObj}
placement="right"
/> />
</Modal> </Drawer>
) )
} }
export default AddFlowsModal export default AddFlowsModal
\ No newline at end of file
...@@ -4,6 +4,7 @@ import { GetCM_Event_LoadEventTypeTable, LoadEventFields, CM_Event_LoadDepartmen ...@@ -4,6 +4,7 @@ import { GetCM_Event_LoadEventTypeTable, LoadEventFields, CM_Event_LoadDepartmen
import styles from './incident.less'; import styles from './incident.less';
import ChangeAdd from './changeAdd' import ChangeAdd from './changeAdd'
import ChangeImage from './ChangeImage' import ChangeImage from './ChangeImage'
import ModalDrag from '../maintenance/ModalDrag';
import { PlusOutlined, DownOutlined } from '@ant-design/icons' import { PlusOutlined, DownOutlined } from '@ant-design/icons'
import { set } from 'immutable'; import { set } from 'immutable';
import { getRoleGroup } from '@/services/userCenter/roleManage/api'; import { getRoleGroup } from '@/services/userCenter/roleManage/api';
...@@ -581,13 +582,15 @@ const AddModal = props => { ...@@ -581,13 +582,15 @@ const AddModal = props => {
setIsVisible1(false) setIsVisible1(false)
} }
const title = <ModalDrag title={type === 'add' ? '添加事件类型' : '编辑事件类型'} />
return ( return (
<Modal <Modal
title={type === 'add' ? '添加事件类型' : '编辑事件类型'} title={title}
maskClosable={false} maskClosable={false}
width="800px" width="800px"
destroyOnClose destroyOnClose
okText="确认" okText="确认"
mask={false}
cancelText="取消" cancelText="取消"
{...props} {...props}
onOk={() => onSubmit()} onOk={() => onSubmit()}
...@@ -961,18 +964,19 @@ const AddModal = props => { ...@@ -961,18 +964,19 @@ const AddModal = props => {
</Col> </Col>
</Row> </Row>
</Form> </Form>
<ChangeAdd <ChangeAdd
visible={isVisible} visible={isVisible}
onCancel={onCancel} onClose={onCancel}
callBackSubmit={onOK} callBackSubmit={onOK}
newCheckedList={checkedList1} newCheckedList={checkedList1}
isType={types} isType={types}
filed={filed} filed={filed}
flag={flag} flag={flag}
filed1={filed1} filed1={filed1}
pickItem={pickItem} pickItem={pickItem}
characterValue={characterValue} characterValue={characterValue}
formObj={formObj} formObj={formObj}
placement="right"
/> />
<ChangeImage <ChangeImage
visible={isVisible1} visible={isVisible1}
......
import React, { useEffect, useState } from 'react'; 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 { CM_Event_OperateEventExtendPage, GetEventExtendPage} from '@/services/standingBook/api';
import { IdcardTwoTone } from '@ant-design/icons'; import { IdcardTwoTone } from '@ant-design/icons';
const AddViewModal = props => { 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 [id, setId]= useState('')
const [form] = Form.useForm(); const [form] = Form.useForm();
...@@ -89,12 +89,18 @@ const AddViewModal = props => { ...@@ -89,12 +89,18 @@ const AddViewModal = props => {
} }
}, [visible]) }, [visible])
return ( return (
<Modal <Drawer
visible={visible} visible={visible}
onCancel={onCancel} onClose={onClose}
width="500px"
title={type=='edit' ? '编辑事件辅助视图配置':'添加事件辅助视图配置'} 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' }}> <Form form={form} labelCol={{ span: 7 }} style={{ height: '24rem', overflowY: 'scroll' }}>
<Row> <Row>
...@@ -161,7 +167,7 @@ const AddViewModal = props => { ...@@ -161,7 +167,7 @@ const AddViewModal = props => {
</Row> </Row>
</Form> </Form>
</Modal> </Drawer>
) )
} }
export default AddViewModal; export default AddViewModal;
\ No newline at end of file
import React, { useState, useEffect, useCallback, useRef } from 'react'; 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 styles from './incident.less';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
...@@ -112,21 +112,19 @@ const ChangeAddFlows = props =>{ ...@@ -112,21 +112,19 @@ const ChangeAddFlows = props =>{
return ( return (
<Modal <Drawer
title='部门或角色' title='部门或角色'
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }}
width="700px" width="700px"
destroyOnClose destroyOnClose
centered={true}
maskClosable={false}
onOk={onSubmit}
okText="确认"
cancelText="取消"
{...props} {...props}
onOk={() => onSubmit()} footer={
forceRender={true} <Space>
getContainer={false} <Button onClick={onSubmit} type="primary" >
确定
</Button>
</Space>
}
> >
{visible && ( {visible && (
<div className={styles.listCard}> <div className={styles.listCard}>
...@@ -169,7 +167,7 @@ const ChangeAddFlows = props =>{ ...@@ -169,7 +167,7 @@ const ChangeAddFlows = props =>{
) )
} }
</Modal> </Drawer>
) )
}; };
......
...@@ -25,15 +25,15 @@ const ProcessModal = props => { ...@@ -25,15 +25,15 @@ const ProcessModal = props => {
key: 'FlowName', key: 'FlowName',
width: 150, width: 150,
ellipsis: true, ellipsis: true,
render: item => ( // render: item => (
<div // <div
ref={r => { // ref={r => {
if (r) { // if (r) {
r.innerHTML = item; // r.innerHTML = item;
} // }
}} // }}
/> // />
) // )
} }
, ,
{ {
...@@ -42,15 +42,15 @@ const ProcessModal = props => { ...@@ -42,15 +42,15 @@ const ProcessModal = props => {
key: 'FlowRoles', key: 'FlowRoles',
width: 400, width: 400,
ellipsis: true, ellipsis: true,
render: item => ( // render: item => (
<div // <div
ref={r => { // ref={r => {
if (r) { // if (r) {
r.innerHTML = item; // r.innerHTML = item;
} // }
}} // }}
/> // />
) // )
}, },
{ {
title: () => (<span style={{fontWeight:'bold'}}>操作</span>), title: () => (<span style={{fontWeight:'bold'}}>操作</span>),
...@@ -180,8 +180,9 @@ const ProcessModal = props => { ...@@ -180,8 +180,9 @@ const ProcessModal = props => {
type={isType} type={isType}
record={record1} record={record1}
maxLength={maxLength} maxLength={maxLength}
onCancel={() => setAddVisible(false)} onClose={() => setAddVisible(false)}
callBackSubmit={onOK} callBackSubmit={onOK}
placement="right"
/> />
</Modal> </Modal>
) )
......
...@@ -238,11 +238,12 @@ const ViewModal = props => { ...@@ -238,11 +238,12 @@ const ViewModal = props => {
<AddViewModal <AddViewModal
visible={addViewVisible} visible={addViewVisible}
title="事件辅助视图配置" title="事件辅助视图配置"
onCancel={()=>setAddViewVisible(false)} onClose={()=>setAddViewVisible(false)}
title2={title2} title2={title2}
callBackSubmit={okk} callBackSubmit={okk}
obj={obj} obj={obj}
type={type} type={type}
placement="right"
/> />
</Modal> </Modal>
) )
......
import React, { useState, useEffect, useCallback, useRef } from 'react'; 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 styles from './incident.less';
import Sortable from 'sortablejs'; import Sortable from 'sortablejs';
...@@ -143,20 +143,20 @@ const AddModal = props => { ...@@ -143,20 +143,20 @@ const AddModal = props => {
} }
if (isType != 'app') { if (isType != 'app') {
return ( return (
<Modal <Drawer
title='字段集选择' title='字段集选择'
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }} style={{ top: '10px' }}
width="700px" width="700px"
destroyOnClose destroyOnClose
centered={true} {...props}
maskClosable={false} footer={
onOk={onSubmit} <Space>
okText="确认" <Button onClick={onSubmit} type="primary">
cancelText="取消" 确定
{...props} </Button>
forceRender={true} </Space>
getContainer={false} }
> >
{visible && ( {visible && (
<div className={styles.listCard}> <div className={styles.listCard}>
...@@ -222,24 +222,24 @@ const AddModal = props => { ...@@ -222,24 +222,24 @@ const AddModal = props => {
) )
} }
</Modal> </Drawer>
); );
} else if (isType === 'app') { } else if (isType === 'app') {
return ( return (
<Modal <Drawer
title= '部门或角色' title= '部门或角色'
bodyStyle={{ width: '100%', minHeight: '100px' }} bodyStyle={{ width: '100%', minHeight: '100px' }}
style={{ top: '10px' }} style={{ top: '10px' }}
width="700px" width="700px"
destroyOnClose destroyOnClose
centered={true} {...props}
maskClosable={false} footer={
onOk={onSubmit} <Space>
okText="确认" <Button onClick={onSubmit} type="primary" >
cancelText="取消" 确定
{...props} </Button>
forceRender={true} </Space>
getContainer={false} }
> >
{visible && ( {visible && (
<div className={styles.listCard}> <div className={styles.listCard}>
...@@ -282,7 +282,7 @@ const AddModal = props => { ...@@ -282,7 +282,7 @@ const AddModal = props => {
) )
} }
</Modal> </Drawer>
); );
} }
}; };
......
...@@ -24,7 +24,7 @@ import { ...@@ -24,7 +24,7 @@ import {
ApartmentOutlined, ApartmentOutlined,
DesktopOutlined DesktopOutlined
} from '@ant-design/icons'; } 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 classnames from 'classnames';
import AddModal from './AddModal' import AddModal from './AddModal'
import ProcessModal from './ProcessModal' import ProcessModal from './ProcessModal'
...@@ -43,14 +43,14 @@ const incident = () => { ...@@ -43,14 +43,14 @@ const incident = () => {
const [viewVisible, setViewVisible] = useState(false) const [viewVisible, setViewVisible] = useState(false)
const [isType, setIsType] = useState(''); // 弹窗类型 const [isType, setIsType] = useState(''); // 弹窗类型
const [formObj, setFormObj] = useState(''); const [formObj, setFormObj] = useState('');
const [flag, setFlag] = useState(0); const [flag, setFlag] = useState(0);
const [title1, setTitle1] = useState('') const [title1, setTitle1] = useState('')
const [title2, setTitle2] = useState('') const [title2, setTitle2] = useState('')
const [select, setSelect] = useState('') const [select, setSelect] = useState('')
const [sortData,setSortData] = useState([]) const [sortData, setSortData] = useState([])
const [rember, setRember] = useState(0) const [rember, setRember] = useState(0)
const [rember1, setRember1] = useState() const [rember1, setRember1] = useState()
...@@ -110,18 +110,14 @@ const incident = () => { ...@@ -110,18 +110,14 @@ const incident = () => {
, ,
{ {
title: '上报字段', title: '上报字段',
dataIndex: 'reportPage', dataIndex: 'reportFields',
key: 'reportPage', key: 'reportFields',
width: 100, width: 100,
render: item => ( render: item => (
<div <span style={{ color: 'grey' }} key={item}>
ref={r => { {item}
if (r) { </span>
r.innerHTML = item; ),
}
}}
/>
),
} }
, ,
{ {
...@@ -130,14 +126,10 @@ const incident = () => { ...@@ -130,14 +126,10 @@ const incident = () => {
key: 'displayFields', key: 'displayFields',
width: 100, width: 100,
render: item => ( render: item => (
<div <span style={{ color: 'grey' }} key={item}>
ref={r => { {item}
if (r) { </span>
r.innerHTML = item; ),
}
}}
/>
),
} }
, ,
...@@ -146,15 +138,11 @@ const incident = () => { ...@@ -146,15 +138,11 @@ const incident = () => {
dataIndex: 'editable', dataIndex: 'editable',
key: 'editable', key: 'editable',
width: 50, width: 50,
render: item =>( render: item => (
<div <span style={{ color: 'grey' }} key={item}>
ref={r => { {item}
if (r) { </span>
r.innerHTML = item; ),
}
}}
/>
)
} }
, ,
{ {
...@@ -162,15 +150,15 @@ const incident = () => { ...@@ -162,15 +150,15 @@ const incident = () => {
dataIndex: 'editableFields', dataIndex: 'editableFields',
key: 'editableFields', key: 'editableFields',
width: 100, width: 100,
render: item =>( render: item => (
<div <div
ref={r => { ref={r => {
if (r) { if (r) {
r.innerHTML = item; r.innerHTML = item;
} }
}} }}
/> />
) )
} }
, ,
{ {
...@@ -217,7 +205,7 @@ const incident = () => { ...@@ -217,7 +205,7 @@ const incident = () => {
align: 'center', align: 'center',
render: record => ( render: record => (
<Space size="middle"> <Space size="middle">
<Tooltip title="编辑事件类型"> <Tooltip title="编辑事件类型">
<EditTwoTone <EditTwoTone
onClick={() => editEventType(record)} onClick={() => editEventType(record)}
...@@ -248,7 +236,7 @@ const incident = () => { ...@@ -248,7 +236,7 @@ const incident = () => {
<Tooltip title="辅助视图"> <Tooltip title="辅助视图">
<DesktopOutlined <DesktopOutlined
onClick={() => auxiliaryView(record)} onClick={() => auxiliaryView(record)}
style={{ fontSize: '16px', color: '#1890FF' }} style={{ fontSize: '16px', color: '#1890FF' }}
/> />
</Tooltip> </Tooltip>
</Space> </Space>
...@@ -257,11 +245,11 @@ const incident = () => { ...@@ -257,11 +245,11 @@ const incident = () => {
} }
] ]
useEffect(()=>{ useEffect(() => {
setTreeLoading(true); setTreeLoading(true);
GetCM_Event_LoadEventTable().then(res =>{ GetCM_Event_LoadEventTable().then(res => {
setTreeLoading(false); setTreeLoading(false);
if(res.msg==='Ok'){ if (res.msg === 'Ok') {
console.log(res.data) console.log(res.data)
// setMaxLength(res.data.root.length + 1) // setMaxLength(res.data.root.length + 1)
let arr = formateArrDataA(res.data, 'businessType') let arr = formateArrDataA(res.data, 'businessType')
...@@ -269,7 +257,7 @@ const incident = () => { ...@@ -269,7 +257,7 @@ const incident = () => {
let newArr = [] let newArr = []
let newapp = [] let newapp = []
let newabb = [] let newabb = []
let aa= [] let aa = []
let zz = [] let zz = []
Object.keys(arr).map((item, index) => { Object.keys(arr).map((item, index) => {
newArr.push(item) newArr.push(item)
...@@ -279,25 +267,25 @@ const incident = () => { ...@@ -279,25 +267,25 @@ const incident = () => {
newapp.push(item) newapp.push(item)
}) })
console.log(newapp) console.log(newapp)
newapp.map((item, index)=>{ newapp.map((item, index) => {
console.log(item) console.log(item)
item.map((item1, index)=>{ item.map((item1, index) => {
newabb.push(item1.root) newabb.push(item1.root)
console.log(item1.root) console.log(item1.root)
}) })
}) })
console.log(newabb) console.log(newabb)
newabb.map((item, index)=>{ newabb.map((item, index) => {
console.log(item) console.log(item)
aa.push(item) aa.push(item)
}) })
console.log(aa) console.log(aa)
aa.map((item, index)=>{ aa.map((item, index) => {
console.log(item) console.log(item)
item.map((item1, index)=>{ item.map((item1, index) => {
console.log(item1) console.log(item1)
zz.push({...item1}) zz.push({ ...item1 })
}) })
}) })
console.log(zz) console.log(zz)
let arrr = formateArrDataA(zz, 'businessType') let arrr = formateArrDataA(zz, 'businessType')
...@@ -309,18 +297,18 @@ const incident = () => { ...@@ -309,18 +297,18 @@ const incident = () => {
setTreeData(newArr) setTreeData(newArr)
} }
}) })
},[flag]) }, [flag])
useEffect(()=>{ useEffect(() => {
GetCM_Event_LoadEventTypeTable().then(res => { GetCM_Event_LoadEventTypeTable().then(res => {
if (res.msg === 'Ok') { if (res.msg === 'Ok') {
let arr = [] let arr = []
res.data.map((item, index)=>{ res.data.map((item, index) => {
arr.push(item.text) arr.push(item.text)
}) })
setSelect(arr) setSelect(arr)
} }
}) })
},[]) }, [])
const formateArrDataA = (initialArr, name) => { const formateArrDataA = (initialArr, name) => {
console.log(initialArr) console.log(initialArr)
console.log(name) console.log(name)
...@@ -373,7 +361,7 @@ const incident = () => { ...@@ -373,7 +361,7 @@ const incident = () => {
} }
//删除事件类型 //删除事件类型
const deleteEventType = record => { const deleteEventType = record => {
CM_Event_RemoveEventTable(record.ID).then(res =>{ CM_Event_RemoveEventTable(record.ID).then(res => {
if (res.msg === '') { if (res.msg === '') {
notification.success({ notification.success({
message: '提示', message: '提示',
...@@ -407,15 +395,15 @@ const incident = () => { ...@@ -407,15 +395,15 @@ const incident = () => {
setViewVisible(true) setViewVisible(true)
setTitle2(record.name) setTitle2(record.name)
} }
const onSubmit =()=>{ const onSubmit = () => {
setAddvisible(false) setAddvisible(false)
setFlag(flag + 1) setFlag(flag + 1)
} }
const onOK = prop =>{ const onOK = prop => {
setSortVisible(false) setSortVisible(false)
let aa= (prop.str).toString() let aa = (prop.str).toString()
console.log(aa) console.log(aa)
CM_Event_ReOrder(aa).then(res =>{ CM_Event_ReOrder(aa).then(res => {
if (res.msg === 'Ok') { if (res.msg === 'Ok') {
notification.success({ notification.success({
message: '提示', message: '提示',
...@@ -432,10 +420,11 @@ const incident = () => { ...@@ -432,10 +420,11 @@ const incident = () => {
} }
}) })
} }
const onOK1 =()=>{ const onOK1 = () => {
setProcessVisible(false) setProcessVisible(false)
setFlag(flag + 1)
} }
const onOK11 =()=>{ const onOK11 = () => {
setViewVisible(false) setViewVisible(false)
} }
return ( return (
...@@ -454,7 +443,7 @@ const incident = () => { ...@@ -454,7 +443,7 @@ const incident = () => {
style={{ style={{
fontSize: '15px ', fontSize: '15px ',
fontWeight: 'bold', fontWeight: 'bold',
}} }}
> >
事件列表 事件列表
...@@ -471,14 +460,14 @@ const incident = () => { ...@@ -471,14 +460,14 @@ const incident = () => {
/> />
</Tooltip> </Tooltip>
<hr style={{ width: '100%', color: '#eeecec' }} /> <hr style={{ width: '100%', color: '#eeecec' }} />
{ {
treeData.length>0 && (treeData.map((item, index) => { treeData.length > 0 && (treeData.map((item, index) => {
return <div className={classnames({ return <div className={classnames({
[styles.listItem]: true, [styles.listItem]: true,
[styles.pickItem]: item === pickItem, [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> </div>
<div className={styles.switcher}> <div className={styles.switcher}>
{treeVisible && ( {treeVisible && (
...@@ -508,17 +497,17 @@ const incident = () => { ...@@ -508,17 +497,17 @@ const incident = () => {
</Button> </Button>
</span> </span>
</div> </div>
<Table <Table
// rowClassName={setRowClassName} // rowClassName={setRowClassName}
size="small" size="small"
rowKey='ID' rowKey='ID'
bordered bordered
onRow={record => { onRow={record => {
return { return {
onDoubleClick: event => {event.stopPropagation(); editEventType(record)}, //双击 onDoubleClick: event => { event.stopPropagation(); editEventType(record) }, //双击
}; };
}} }}
columns={columns} columns={columns}
dataSource={tableData[pickItem]} dataSource={tableData[pickItem]}
scroll={{ y: 'calc(100vh - 155px)' }} scroll={{ y: 'calc(100vh - 155px)' }}
...@@ -531,14 +520,14 @@ const incident = () => { ...@@ -531,14 +520,14 @@ const incident = () => {
showSizeChanger: true, showSizeChanger: true,
}} }}
/> />
</div> </div>
{/* Modal弹框 */} {/* Modal弹框 */}
{/* 添加事件 */} {/* 添加事件 */}
<AddModal <AddModal
visible={addVisible} visible={addVisible}
type={isType} type={isType}
formObj={formObj} formObj={formObj}
rember1={rember1} rember1={rember1}
maxLength={maxLength} maxLength={maxLength}
onCancel={() => setAddvisible(false)} onCancel={() => setAddvisible(false)}
......
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
padding: 0.5rem; padding: 0.5rem;
} }
.cardContent{ .cardContent{
height: 30rem; // height: 30rem;
overflow-y: scroll; overflow-y: scroll;
width: 19rem; width: 19rem;
} }
...@@ -214,4 +214,11 @@ ...@@ -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
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