Commit a45a0c8c authored by 皮倩雯's avatar 皮倩雯

事件权限交互重构

parent 2565e509
......@@ -130,7 +130,7 @@ const AddFlowsModal = props => {
let a1 = [];
let a2;
let a3 = [];
initialArr.map(i => {
initialArr.data.map(i => {
// console.log(i.groupType)
a2 = i.groupType;
// console.log(a2)
......
......@@ -46,6 +46,7 @@ import {
} from '@/services/standingBook/api';
import styles from './incident.less';
import ChangeAdd from './changeAdd';
import ChangeEdit from './changeEdit';
import ChangeImage from './ChangeImage';
import ModalDrag from '../maintenance/ModalDrag';
import { PlusOutlined, DownOutlined } from '@ant-design/icons';
......@@ -491,7 +492,8 @@ const AddModal = props => {
const [Type1, setType1] = useState('');
const [number, setNumber] = useState('');
const [isVisible, setIsVisible] = useState(false); // 弹窗
const [isVisible, setIsVisible] = useState(false); // 事件权限弹窗
const [isVisibleEdit, setIsVisibleEdit] = useState(false); // 字段弹框
const [isVisible1, setIsVisible1] = useState(false); // 弹窗
const [characterValue, setCharacterValue] = useState('');
const [form] = Form.useForm();
......@@ -796,7 +798,7 @@ const AddModal = props => {
let a1 = [];
let a2;
let a3 = [];
initialArr.map(i => {
initialArr.data.map(i => {
// console.log(i.groupType)
a2 = i.groupType;
// console.log(a2)
......@@ -892,53 +894,68 @@ const AddModal = props => {
console.log(prop.stt);
console.log(prop.filed22);
console.log(prop.title);
if (prop.isType == 'app') {
let title = prop.title;
let selectData = 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 (item == '外部字段' && aa.length == 0) {
bb = 0;
} else {
// eslint-disable-next-line no-lonely-if
if (aa.length == 0) {
bb = 1;
}
}
});
console.log(aa);
if (bb == 1) {
notification.error({
message: '提示',
description: '部门站点角色必须都选至少一项',
});
} else {
setIsVisible(false);
let inputText = { ...inputValue };
console.log(inputText);
console.log(prop.str);
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);
}
setIsVisible(false);
let inputText = { ...inputValue };
inputText[prop.pickItem] = prop.str;
setCheckedList1(prop.stt);
setInputValue(inputText);
// if (prop.isType == 'app') {
// let title = prop.title;
// let selectData = 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 (item == '外部字段' && aa.length == 0) {
// bb = 0;
// } else {
// // eslint-disable-next-line no-lonely-if
// if (aa.length == 0) {
// bb = 1;
// }
// }
// });
// console.log(aa);
// if (bb == 1) {
// notification.error({
// message: '提示',
// description: '部门站点角色必须都选至少一项',
// });
// } else {
// setIsVisible(false);
// let inputText = { ...inputValue };
// console.log(inputText);
// console.log(prop.str);
// inputText[prop.pickItem] = prop.str;
// setCheckedList1(prop.stt);
// setInputValue(inputText);
// }
// } else {
// setIsVisible(false);
// let inputText = { ...inputValue };
// inputText[prop.pickItem] = prop.str;
// setCheckedList1(prop.stt);
// setInputValue(inputText);
// }
};
const onOK1 = prop => {
console.log(prop.isType);
console.log(prop.stt);
console.log(prop.title);
setIsVisibleEdit(false);
let inputText = { ...inputValue };
inputText[prop.pickItem] = prop.str;
setCheckedList1(prop.stt);
setInputValue(inputText);
};
const oKK = prop => {
setIsVisible1(false);
......@@ -977,7 +994,7 @@ const AddModal = props => {
setCharacterValue(inputValue[fileds]);
setCheckedList1(inputValue[fileds].split(','));
setPickItem(fileds);
setIsVisible(true);
setIsVisibleEdit(true);
};
const pickFiled1 = fileds => {
let pp = formateArrDataA1(nu1, 'group');
......@@ -1092,6 +1109,9 @@ const AddModal = props => {
const onCancel = () => {
setIsVisible(false);
};
const onCancel11 = () => {
setIsVisibleEdit(false);
};
const onCancel1 = () => {
setIsVisible1(false);
};
......@@ -1632,7 +1652,19 @@ const AddModal = props => {
isType={types}
filed={filed}
flag={flag}
filed1={filed1}
filed11={filed1}
pickItem={pickItem}
characterValue={characterValue}
formObj={formObj}
/>
<ChangeEdit
visible={isVisibleEdit}
onCancel={onCancel11}
callBackSubmit={onOK1}
newCheckedList={checkedList1}
filed={filed}
flag={flag}
filed11={filed1}
pickItem={pickItem}
characterValue={characterValue}
formObj={formObj}
......
/* eslint-disable no-cond-assign */
/* eslint-disable react/no-array-index-key */
/* eslint-disable no-undef */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable camelcase */
......@@ -12,232 +15,90 @@
/* eslint-disable eqeqeq */
/* eslint-disable no-plusplus */
import React, { useState, useEffect, useCallback, useRef } from 'react';
import {
Form,
Modal,
Divider,
Checkbox,
Tabs,
Input,
Button,
Pagination,
} from 'antd';
import DragTable from '@/components/DragTable/DragTable';
import { Form, Modal, Checkbox, Tabs, Input, Button, Pagination } from 'antd';
import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api';
import Sortable from 'sortablejs';
import { add } from 'lodash-es';
import { string } from 'prop-types';
import { setServiceType } from '@/services/webConfig/api';
import { ContinuousLegend } from '@antv/g2/lib/dependents';
import { ConsoleSqlOutlined } from '@ant-design/icons';
import styles from './incident.less';
const CheckboxGroup = Checkbox.Group;
const { TabPane } = Tabs;
const AddModal = props => {
const ChangeAdd = props => {
const usePrevious = value => {
const ref = useRef();
useEffect(() => {
ref.current = value;
});
return ref.current;
};
const {
callBackSubmit = () => {},
isType,
pickItem,
visible,
filed,
filed1,
characterValue,
filed11,
newCheckedList,
flag,
} = props;
const [loading, setLoading] = useState(false);
const [value, setValue] = useState('');
const [checkValue, setCheckValue] = useState([]);
const [form] = Form.useForm();
const [title, setTitle] = useState([]);
const { Item } = Form;
const [checkedList, setCheckedList] = useState([]); // 选中的复选框内容
const [indeterminate, setIndeterminate] = useState([]);
const [checkAll, setCheckAll] = useState([]);
const [selectData, setSelectData] = useState([]);
const [arrValue, setArrValue] = useState([]);
const [data, setData] = useState([]);
const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
const [flagg, setFlagg] = useState(0);
const [type, setType] = useState(); // 是否全选
const [searchWord, setSearchWord] = useState(''); // 关键字
const { Search } = Input;
const [total, setTotal] = useState();
const [pageSize, setPageSize] = useState(10);
const [pageSize, setPageSize] = useState(42);
const [currentPage, setCurrentPage] = useState(1);
const [roleValue, setRoleValue] = useState([]);
let objArr = [];
const onChangeList = (list, index, title) => {
const checkedListArr = [...checkedList];
checkedListArr[index] = list;
// 将第一次打开回显数据先存成数组
let oldArr = [];
let addArr = [];
let newArr = [];
// if (flagg == 0) {
arrValue.map((item, index) => {
oldArr = oldArr.concat(item);
});
const [checkDataRole, setCheckDataRole] = useState([]);
const [checkDataPm, setCheckDataPm] = useState([]);
const [checkDataSite, setCheckDataSite] = useState([]);
const [filed1, setFiled1] = useState([]); // 角色全部数据
const [saveCheckValue, setSaveCheckValue] = useState([]); // 保存选中值
const [isCheck, setIsCheck] = useState(0); // 是否点击了角色复选框下的
const [isCheck1, setIsCheck1] = useState(0); // 是否点击了部门复选框下的
const [isCheck2, setIsCheck2] = useState(0); // 是否点击了站点复选框下的
const [keepOption1, setKeepOption1] = useState([]); // 保存了获取的部门列表数据
const [keepOption2, setKeepOption2] = useState([]); // 保存了获取的站点列表数据
const [keepTabKey, setKeepTabKey] = useState(0);
const [searchFlag, setSearchFlag] = useState(0);
const [keepSearchList, setkeepSearchList] = useState([]); // 保存搜索后出现的选中列表
const [list, setList] = useState([]);
const [listPm, setListPm] = useState([]);
const [listSite, setListSite] = useState([]);
const prevAmount = usePrevious({ list });
const prevAmountPm = usePrevious({ checkDataPm });
const prevAmountSite = usePrevious({ listSite });
console.log(oldArr);
// 将第一次打开回显数据存入已选择数组里
oldArr.map(item => {
newArr.push(item);
});
console.log(newArr);
// 获取本次新增数据后的数组
let objArr = [];
checkedListArr.map(item => {
objArr = objArr.concat(item);
});
console.log(checkedListArr);
console.log(objArr); // 本次增加数据后数组
console.log(arrValue); // 上次数组
// 获取新增数据
objArr.map((item1, index1) => {
if (arrValue.indexOf(item1) == -1) {
addArr.push(item1);
}
});
// } else {
// arrValue.map((item, index) => {
// oldArr = oldArr.concat(item);
// });
// console.log(oldArr);
// // 将第一次打开回显数据存入已选择数组里
// oldArr.map(item => {
// newArr.push(item);
// });
// console.log(newArr);
// // 获取本次新增数据后的数组
// let objArr = [];
// checkedListArr.map(item => {
// objArr = objArr.concat(item);
// });
// console.log(objArr); // 本次增加数据后数组
// console.log(oldArr); // 上次数组
// // 获取新增数据
// objArr.map((item1, index1) => {
// if (oldArr.indexOf(item1) == -1) {
// addArr.push(item1);
// }
// });
// }
// 将每次新增数据从尾部写入已选择数组里
console.log(addArr);
if (addArr.length != 0) {
addArr.map(item => {
newArr.push(item);
});
}
console.log(newArr);
// 保存此次所有数据顺序
setArrValue(newArr);
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);
setFlagg(0);
};
const onChangeList1 = (list, index, title) => {
const checkedListArr = [...checkedList];
checkedListArr[index] = list;
// 将第一次打开回显数据先存成数组
let oldArr = [];
let addArr = [];
let newArr = [];
if (flagg == 0) {
arrValue.map((item, index) => {
oldArr = oldArr.concat(item);
});
console.log(oldArr);
// 将第一次打开回显数据存入已选择数组里
oldArr.map(item => {
newArr.push(item);
});
console.log(newArr);
// 获取本次新增数据后的数组
let objArr = [];
checkedListArr.map(item => {
objArr = objArr.concat(item);
});
console.log(objArr); // 本次增加数据后数组
console.log(arrValue); // 上次数组
// 获取新增数据
objArr.map((item1, index1) => {
if (arrValue.indexOf(item1) == -1) {
addArr.push(item1);
}
});
} else {
arrValue.map((item, index) => {
oldArr = oldArr.concat(item);
});
console.log(oldArr);
// 将第一次打开回显数据存入已选择数组里
oldArr.map(item => {
newArr.push(item);
});
console.log(newArr);
// 获取本次新增数据后的数组
let objArr = [];
checkedListArr.map(item => {
objArr = objArr.concat(item);
});
console.log(objArr); // 本次增加数据后数组
console.log(oldArr); // 上次数组
// 获取新增数据
objArr.map((item1, index1) => {
if (oldArr.indexOf(item1) == -1) {
addArr.push(item1);
const onSubmit = () => {
// 没有勾选部门下的选项
if (saveCheckValue[1] == undefined) {
let data = [];
newCheckedList.map(checkItem => {
if (keepOption1.includes(checkItem)) {
data.push(checkItem);
}
});
console.log(data);
saveCheckValue[1] = data;
}
// 将每次新增数据从尾部写入已选择数组里
console.log(addArr);
if (addArr.length != 0) {
addArr.map(item => {
newArr.push(item);
console.log(saveCheckValue);
// 没有勾选站点下的选项
if (saveCheckValue[2] == undefined) {
let data = [];
newCheckedList.map(checkItem => {
if (keepOption2.includes(checkItem)) {
data.push(checkItem);
}
});
console.log(data);
saveCheckValue[2] = data;
}
console.log(newArr);
// 保存此次所有数据顺序
setArrValue(newArr);
setCheckedList(checkedListArr);
console.log(checkedListArr);
// setSelectData(checkedListArr);
const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll];
indeterminateArr[index] =
!!list.length && list.length < filed1[title].length;
checkAllArr[index] = list.length === filed1[title].length;
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
setFlagg(0);
};
const onSubmit1 = () => {
console.log(selectData);
let aRR = [];
selectData.map(item => {
console.log(typeof item);
if (typeof item == 'string') {
console.log(1111);
aRR = selectData;
} else {
aRR.push(item.name);
}
console.log(newCheckedList);
console.log(saveCheckValue);
let data = [];
saveCheckValue.map((item, index) => {
data = data.concat(item);
});
console.log(aRR);
let newArr = selectData.map(item => item.name);
isType === 'rule'
? callBackSubmit(
`${
......@@ -245,272 +106,118 @@ const AddModal = props => {
}${checkValue.join(',')}`,
)
: callBackSubmit({
checkedList,
str: aRR.join(','),
saveCheckValue,
str: data.join(','),
pickItem,
stt: aRR,
stt: data,
title,
filed22: filed1,
isType,
});
setIsCheck(0);
setIsCheck1(0);
setIsCheck2(0);
setList([]);
setSearchWord('');
};
const onSubmit = () => {
console.log(selectData);
let aRR = [];
selectData.map(item => {
console.log(typeof item);
if (typeof item == 'string') {
aRR = selectData;
} else {
console.log(112212);
console.log(item.name);
aRR.push(item.name);
console.log(63467246);
console.log(aRR);
}
});
// const onCheckAllChange = e => {
// setData(1);
// const indeterminateArr = [...indeterminate];
// const checkAllArr = [...checkAll];
// const checkedListArr = [...checkedList];
// 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);
// setType(e.target.checked);
// setIndeterminate(indeterminateArr);
// setCheckAll(checkAllArr);
// };
console.log(aRR);
isType === 'rule'
? callBackSubmit(
`${
value === '无' || value === '' ? '' : `${value},`
}${checkValue.join(',')}`,
)
: callBackSubmit({
checkedList,
str: aRR.join(','),
pickItem,
stt: aRR,
title,
filed22: filed1,
isType,
});
};
const onCheckAllChange1 = e => {
setData(1);
const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll];
const checkedListArr = [...checkedList];
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] = []);
setType(e.target.checked);
setCheckedList(checkedListArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
};
const onCheckAllChange = e => {
setData(1);
const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll];
const checkedListArr = [...checkedList];
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);
setType(e.target.checked);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
};
useEffect(() => {
// 不是第一次
if (flagg == 0) {
selectAll();
}
// 是否是全选
if (data == 1) {
selectAll();
}
setData(0);
}, [checkedList]);
console.log(filed11);
setKeepOption1(filed11['部门']);
setKeepOption2(filed11['站点']);
getRoles('角色', '', pageSize, 1);
setRoleValue(filed1);
setFlagg(1);
console.log(filed1);
let arr = Object.keys(filed1);
console.log(arr, 'arr');
setTitle(arr);
let checkArr = [];
console.log(newCheckedList); // 已选中数组
// arr.map((item, index) => {
// checkArr[index] = [];
// newCheckedList.map(checkItem => {
// if (filed1[item].includes(checkItem)) {
// checkArr[index].push(checkItem);
// }
// });
// });
const selectAll = () => {
objArr = [];
let lastArr = [];
// 处理未排序的勾选数据扁平化
checkedList.map(item => {
objArr = objArr.concat(item);
// console.log(characterValue);
// let newArr = characterValue.length ? characterValue.split(',') : [];
// console.log(newArr);
// let newArr1 = newCheckedList.map(item => ({ name: item }));
// if (newArr1.length === 1 && newArr1[0].name === '') {
// newArr1 = [];
// }
// console.log(newArr1);
let listdata = [];
newCheckedList.map(checkItem => {
if (filed11['角色'].includes(checkItem)) {
listdata.push(checkItem);
}
});
console.log(arrValue);
console.log(objArr);
// 判断是否操作全部勾选的复选框
if (data == 1) {
// 处理上次选中改变顺序后的数据扁平化
let newArr = [];
arrValue.map(item => {
if (item.name == undefined) {
newArr = arrValue;
} else {
newArr = arrValue.map(item => item.name);
}
});
console.log(newArr);
// 判断是否为全选
if (type == false) {
// 判断上次有顺序的数据是否包含这次未排序已选列表数据
newArr.map(item => {
if (objArr.indexOf(item) != -1) {
lastArr.push(item);
}
});
let newArr1 = lastArr.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(lastArr);
console.log(newArr1);
setSelectData(newArr1);
setArrValue(lastArr);
} else {
// 全选状态时
let addArr = [];
objArr.map(item => {
if (newArr.indexOf(item) == -1) {
addArr.push(item);
}
});
console.log(addArr);
addArr.map(item => {
newArr.push(item);
});
console.log(newArr);
let newArr1 = newArr.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(newArr1);
setSelectData(newArr1);
setArrValue(newArr);
setCheckDataRole(listdata);
checkArr[0] = listdata;
console.log(listdata); // 按对象数组格式
setSaveCheckValue(checkArr);
setCheckedList(checkArr);
let pmdata = [];
newCheckedList.map(checkItem => {
if (filed11['部门'].includes(checkItem)) {
pmdata.push(checkItem);
}
} else {
// 判断扁平处理后的选中未排序列表数据是否存在于上次已选数组中
arrValue.map(item => {
if (objArr.indexOf(item) != -1) {
lastArr.push(item);
}
});
let newArr1 = lastArr.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
});
console.log(pmdata);
setCheckDataPm(pmdata);
let sitedata = [];
newCheckedList.map(checkItem => {
if (filed11['站点'].includes(checkItem)) {
sitedata.push(checkItem);
}
console.log(lastArr);
console.log(newArr1);
setSelectData(newArr1);
setArrValue(lastArr);
}
};
});
console.log(sitedata);
setCheckDataSite(sitedata);
}, [visible]);
useEffect(() => {
setRoleValue(filed1);
if (visible) {
setFlagg(1);
if (isType != '' && isType === 'add') {
let arr = Object.keys(filed);
console.log(arr, 'arr');
setTitle(arr);
let checkArr = [];
let indeterminateArr = [];
let checkAllArr = [];
console.log(newCheckedList);
arr.map((item, index) => {
checkArr[index] = [];
newCheckedList.map(checkItem => {
if (filed[item].includes(checkItem)) {
checkArr[index].push(checkItem);
}
});
indeterminateArr.push(
!!checkArr[index].length &&
checkArr[index].length < filed[item].length,
);
checkAllArr.push(checkArr[index].length === filed[item].length);
});
console.log(checkArr);
console.log(indeterminateArr);
console.log(checkAllArr);
setCheckedList(checkArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
console.log(characterValue);
let newArr = characterValue.length ? characterValue.split(',') : [];
console.log(newArr);
let newArr1 = newCheckedList.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(newArr1);
setSelectData(newArr1);
setArrValue(newArr1);
} else if (isType === 'app') {
console.log(filed1);
let arr = Object.keys(filed1);
console.log(arr, 'arr');
setTitle(arr);
let checkArr = [];
let indeterminateArr = [];
let checkAllArr = [];
console.log(newCheckedList);
arr.map((item, index) => {
checkArr[index] = [];
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);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
console.log(characterValue);
let newArr = characterValue.length ? characterValue.split(',') : [];
console.log(newArr);
let newArr1 = newCheckedList.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(newArr1);
setSelectData(newArr1);
setArrValue(newArr1);
}
} else {
setSelectData([]);
setArrValue([]);
const submitSearchUser = () => {
console.log(keepTabKey);
if (searchWord != '') {
setSearchFlag(1);
}
}, [visible]);
// useEffect(() => {
// setCurrentPage(1);
// }, [visible]);
const dragCallBack = arr => {
console.log(arr);
if (arr) {
console.log(111);
setSelectData(arr);
let newArr = [];
arr.map(item => {
newArr.push(item.name);
});
console.log(newArr);
setArrValue(newArr);
if (keepTabKey == 0) {
sreachRoles('角色', searchWord, pageSize, 1);
}
if (keepTabKey == 1) {
sreachRoles('部门', searchWord, pageSize, 1);
}
if (keepTabKey == 2) {
sreachRoles('站点', searchWord, pageSize, 1);
}
};
const submitSearchUser = () => {};
// 获取搜索框的值
const handleSearch = e => {
if (e.target.value == '') {
setSearchFlag(0);
}
setSearchWord(e.target.value);
};
......@@ -519,19 +226,148 @@ const AddModal = props => {
// 分页时清空复选框
setCurrentPage(page);
setPageSize(pageSizes);
// let username = form.getFieldValue('username');
// getData(username, page, pageSizes);
if (keepTabKey == 0) {
getRoles('角色', '', pageSizes, page);
}
if (keepTabKey == 1) {
getRoles('部门', '', pageSizes, page);
}
if (keepTabKey == 2) {
getRoles('站点', '', pageSizes, page);
}
};
// 搜索时获取数据
const sreachRoles = (type, keywords, pageSizes, pageIndex) => {
console.log(type);
CM_Event_LoadDepartmentAndRoles({
type,
keywords,
pageSize: pageSizes,
pageIndex,
}).then(res => {
if (res.msg === 'Ok') {
console.log(formateArrDataA1(res.data, 'groupType'));
setRoleValue(formateArrDataA1(res.data, 'groupType'));
setFiled1(formateArrDataA1(res.data, 'groupType'));
console.log(checkedList);
console.log(checkDataRole);
let data = [];
if (type == '角色') {
checkDataRole.forEach(item => {
if (
formateArrDataA1(res.data, 'groupType')[type].indexOf(item) != -1
) {
data.push(item);
}
});
}
if (type == '部门') {
checkDataPm.forEach(item => {
if (
formateArrDataA1(res.data, 'groupType')[type].indexOf(item) != -1
) {
data.push(item);
}
});
// setListPm(data);
}
if (type == '站点') {
checkDataSite.forEach(item => {
if (
formateArrDataA1(res.data, 'groupType')[type].indexOf(item) != -1
) {
data.push(item);
}
});
}
setkeepSearchList(data);
}
});
};
// 重置
const onReset = () => {
setSearchFlag(0);
// setListPm([]);
if (keepTabKey == 0) {
getRoles('角色', '', pageSize, 1);
}
if (keepTabKey == 1) {
getRoles('部门', '', pageSize, 1);
}
if (keepTabKey == 2) {
getRoles('站点', '', pageSize, 1);
}
setCurrentPage(1);
setSearchWord('');
};
const getRoles = () => {
CM_Event_LoadDepartmentAndRoles().then(res => {
const getRoles = (type, keywords, pageSizes, pageIndex) => {
console.log(type);
console.log(keywords);
CM_Event_LoadDepartmentAndRoles({
type,
keywords,
pageSize: pageSizes,
pageIndex,
}).then(res => {
if (res.msg === 'Ok') {
// setRoleValue(formateArrDataA1(res.data, 'groupType'));
setTotal(res.data.count);
console.log(formateArrDataA1(res.data, 'groupType'));
setRoleValue(formateArrDataA1(res.data, 'groupType'));
setFiled1(formateArrDataA1(res.data, 'groupType'));
}
});
};
useEffect(() => {
let arr = Object.keys(filed1);
setTitle(arr);
let checkArr = [];
console.log(saveCheckValue);
console.log(newCheckedList); // 已选中数组
let data = [];
saveCheckValue.map((item, index) => {
data = data.concat(item);
});
arr.forEach(item => {
if (item == '角色') {
checkArr[0] = [];
console.log(filed1);
checkDataRole.map(checkItem => {
if (filed1['角色'].includes(checkItem)) {
checkArr[0].push(checkItem);
}
});
// setCheckDataRole(checkArr[0]);
console.log(arr);
console.log(checkArr); // 按对象数组格式
setCheckedList(checkArr);
} else if (item == '部门') {
checkArr[1] = [];
checkDataPm.map(checkItem => {
if (filed1['部门'].includes(checkItem)) {
checkArr[1].push(checkItem);
}
});
// setCheckDataPm(checkArr[1]);
console.log(checkArr); // 按对象数组格式
setCheckedList(checkArr);
} else if (item == '站点') {
checkArr[2] = [];
console.log(checkDataSite);
checkDataSite.map(checkItem => {
if (filed1['站点'].includes(checkItem)) {
checkArr[2].push(checkItem);
}
});
// setCheckDataSite(checkArr[2]);
console.log(checkArr); // 按对象数组格式
setCheckedList(checkArr);
}
});
}, [filed1]);
const formateArrDataA1 = (initialArr, name) => {
console.log(initialArr);
let aa = [];
......@@ -591,247 +427,259 @@ const AddModal = props => {
return tempObj;
};
const columns = [
{
title: '已选列表',
dataIndex: 'name',
width: 150,
key: 'name',
},
];
useEffect(() => {
let checkedListArr = [...saveCheckValue];
setIsCheck(1);
let data = checkDataRole;
let DataValue = [];
checkDataRole.forEach(item => {
if (roleValue['角色'].indexOf(item) != -1) {
DataValue.push(item);
}
});
console.log(DataValue);
// del
if (DataValue.length > list.length) {
DataValue.forEach(item => {
if (list.indexOf(item) == -1) {
data.splice(data.findIndex(ele => ele === item), 1);
}
});
} else {
// add
list.forEach(item => {
if (data.indexOf(item) == -1) {
data.push(item);
}
});
}
checkedListArr[0] = data;
setCheckDataRole(data);
setSaveCheckValue(checkedListArr);
setCheckedList(checkedListArr);
}, [list]);
useEffect(() => {
let checkedListArr = [...saveCheckValue];
setIsCheck(1);
setIsCheck1(1);
let data = checkDataPm;
let DataValue = [];
checkDataPm.forEach(item => {
if (roleValue['部门'].indexOf(item) != -1) {
DataValue.push(item);
}
});
console.log(DataValue);
// del
if (DataValue.length > listPm.length) {
DataValue.forEach(item => {
if (listPm.indexOf(item) == -1) {
data.splice(data.findIndex(ele => ele === item), 1);
}
});
} else {
// add
listPm.forEach(item => {
if (data.indexOf(item) == -1) {
data.push(item);
}
});
}
checkedListArr[1] = data;
setCheckDataPm(data);
setSaveCheckValue(checkedListArr);
setCheckedList(checkedListArr);
}, [listPm]);
useEffect(() => {
setIsCheck(1);
const checkedListArr = [...saveCheckValue];
setIsCheck(1);
let data = checkDataSite;
let DataValue = [];
checkDataSite.forEach(item => {
if (roleValue['站点'].indexOf(item) != -1) {
DataValue.push(item);
}
});
console.log(DataValue);
// del
if (DataValue.length > listSite.length) {
DataValue.forEach(item => {
if (listSite.indexOf(item) == -1) {
data.splice(data.findIndex(ele => ele === item), 1);
}
});
} else {
// add
listSite.forEach(item => {
if (data.indexOf(item) == -1) {
data.push(item);
}
});
}
checkedListArr[2] = data;
setCheckDataSite(data);
setSaveCheckValue(checkedListArr);
setCheckedList(checkedListArr);
}, [listSite]);
const handleParChange = key => {
setSearchFlag(0);
setCurrentPage(1);
console.log(key);
setKeepTabKey(key);
let value;
if (key == 0) {
value = '角色';
getRoles('角色', '', pageSize, 1);
}
if (key == 1) {
value = '部门';
getRoles('部门', '', pageSize, 1);
}
if (key == 2) {
value = '站点';
getRoles('站点', '', pageSize, 1);
}
console.log(value);
// getRoles();
};
if (isType != 'app') {
return (
<Modal
title="字段集选择"
bodyStyle={{ width: '100%', minHeight: '100px' }}
width="750px"
destroyOnClose
centered
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit1()}
forceRender
getContainer={false}
>
{visible && (
<div className={styles.listCard}>
<div
className={styles.cardItem}
style={{ borderRight: '1px solid #99bbe8' }}
>
{flag === 0 ? (
<>
<div className={styles.cardContent}>
<span
style={{
color: 'red',
fontSize: '1rem',
marginLeft: '25px',
}}
>
请先选择事件主表
</span>
const onChangeListNew = list => {
setList(list);
};
const onChangeListNew1 = list => {
setListPm(list);
};
const onChangeListNew2 = list => {
setListSite(list);
};
return (
<Modal
title="权限选择"
bodyStyle={{ width: '100%', height: '650px', overflowY: 'scorll' }}
width="1000px"
style={{ top: '10px' }}
destroyOnClose
centered
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
forceRender
getContainer={false}
>
<Search
style={{
width: 260,
marginRight: '20px',
marginBottom: '10px',
}}
placeholder="搜索"
onSearch={submitSearchUser}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
<Button type="primary" htmlType="submit" onClick={onReset}>
重置
</Button>
{visible && (
<div className={styles.listCard1}>
<div className={styles.cardItem1}>
<div className={styles.cardContent1}>
<Tabs
defaultActiveKey="0"
className={styles.tab}
onChange={handleParChange}
>
<TabPane tab="角色" key="0">
<div className={styles.cardItemData1}>
<CheckboxGroup
options={roleValue['角色']}
value={checkedList[0]}
onChange={onChangeListNew}
/>
</div>
</>
) : (
<>
{JSON.stringify(filed) == '{}' ? (
<>
<div className={styles.cardContent}>
<span
style={{
color: 'red',
fontSize: '1rem',
marginLeft: '25px',
}}
>
表字段缺失请先配置表/字段
</span>
</div>
</>
) : (
<>
<div className={styles.cardContent}>
{title.map((item, index) => (
<div className={styles.cardItemData} key={index}>
<Divider
orientation="left"
style={{
margin: '0 0 10px 0',
color: '#15428b',
borderTopColor: '#99bbe8',
}}
>
<Checkbox
indeterminate={indeterminate[index]}
onChange={onCheckAllChange1}
index={index}
checkvalue={filed[item]}
checked={checkAll[index]}
style={{ marginRight: '7px' }}
/>
{item}
</Divider>
<CheckboxGroup
options={filed[item]}
value={checkedList[index]}
onChange={e => onChangeList(e, index, item)}
/>
</div>
))}
</div>
</>
)}
</>
)}
</div>
<div className={styles.cardItem}>
<div className={styles.cardContent}>
<div className={styles.doctorTable}>
<DragTable
bordered
style={{ marginBottom: '10px' }}
rowKey={record => record.name}
columns={columns}
dataSource={selectData}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="stadingOrder"
/>
</div>
</div>
</TabPane>
<TabPane tab="部门" key="1">
<div className={styles.cardItemData1}>
<CheckboxGroup
options={roleValue['部门']}
value={checkedList[1]}
onChange={onChangeListNew1}
/>
</div>
</TabPane>
<TabPane tab="站点" key="2">
<div className={styles.cardItemData1}>
<CheckboxGroup
options={roleValue['站点']}
value={checkedList[2]}
onChange={onChangeListNew2}
/>
</div>
</TabPane>
</Tabs>
</div>
</div>
)}
</Modal>
);
}
if (isType === 'app') {
return (
<Modal
title="权限选择"
bodyStyle={{ width: '100%', height: '650px', overflowY: 'scorll' }}
width="1000px"
style={{ top: '10px' }}
destroyOnClose
centered
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit()}
forceRender
getContainer={false}
>
{/* <Search
style={{
width: 260,
marginRight: '20px',
marginBottom: '10px',
}}
placeholder="搜索"
onSearch={submitSearchUser}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
<Button
type="primary"
htmlType="submit"
// onClick={() => {
// setCurrentPage(1);
// getData('', 1, pageSize);
// form.setFieldsValue({ username: '' });
// }}
>
重置
</Button> */}
{visible && (
<div className={styles.listCard1}>
<div className={styles.cardItem1}>
<div className={styles.cardContent1}>
<Tabs
defaultActiveKey="0"
className={styles.tab}
onChange={handleParChange}
>
{title.map((item, index) => (
<TabPane tab={item} key={index}>
<div className={styles.cardItemData1} key={index}>
<Divider
orientation="left"
style={{
margin: '0 0 10px -10px',
color: '#15428b',
borderTopColor: '#99bbe8',
}}
>
<Checkbox
indeterminate={indeterminate[index]}
onChange={onCheckAllChange}
index={index}
checkvalue={roleValue[item]}
checked={checkAll[index]}
style={{ marginRight: '7px' }}
/>
{item}
</Divider>
<CheckboxGroup
options={roleValue[item]}
value={checkedList[index]}
onChange={e => onChangeList1(e, index, item)}
/>
</div>
</TabPane>
<div className={styles.cardItem11}>
<div className={styles.cardContent1}>
<Tabs defaultActiveKey="0" className={styles.tab}>
<TabPane tab="角色" key="0">
{checkDataRole.map((item, index) => (
<div
key={index}
style={{
marginBottom: '5px',
}}
>
{item}
</div>
))}
</Tabs>
</div>
</div>
<div className={styles.cardItem11}>
<DragTable
bordered
style={{ marginBottom: '10px' }}
rowKey={record => record.name}
columns={columns}
dataSource={selectData}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="stadingOrder"
/>
</TabPane>
<TabPane tab="部门" key="1">
{checkDataPm.map((item, index) => (
<div
key={index}
style={{
marginBottom: '5px',
}}
>
{item}
</div>
))}
</TabPane>
<TabPane tab="站点" key="2">
{checkDataSite.map((item, index) => (
<div
key={index}
style={{
marginBottom: '5px',
}}
>
{item}
</div>
))}
</TabPane>
</Tabs>
</div>
</div>
)}
{/* <Pagination
total={total}
showTotal={item => `共 ${item} 条`}
defaultPageSize={pageSize}
defaultCurrent={1}
current={currentPage}
onChange={paginationChange}
style={{ marginBottom: '10px' }}
size="small"
showQuickJumper
/> */}
</Modal>
);
}
</div>
)}
<Pagination
total={total}
showTotal={item => `共 ${item} 条`}
defaultPageSize={pageSize}
defaultCurrent={1}
current={currentPage}
onChange={paginationChange}
style={{ marginBottom: '10px' }}
size="small"
showQuickJumper
/>
</Modal>
);
};
export default AddModal;
export default ChangeAdd;
/* eslint-disable no-undef */
/* eslint-disable guard-for-in */
/* eslint-disable no-restricted-syntax */
/* eslint-disable camelcase */
/* eslint-disable react/jsx-no-undef */
/* eslint-disable valid-typeof */
/* eslint-disable no-unused-vars */
/* eslint-disable consistent-return */
/* eslint-disable no-shadow */
/* eslint-disable indent */
/* eslint-disable no-unused-expressions */
/* eslint-disable array-callback-return */
/* eslint-disable eqeqeq */
/* eslint-disable no-plusplus */
import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Form, Modal, Divider, Checkbox, Tabs } from 'antd';
import DragTable from '@/components/DragTable/DragTable';
import styles from './incident.less';
const CheckboxGroup = Checkbox.Group;
const EditModal = props => {
const {
callBackSubmit = () => {},
pickItem,
visible,
filed,
characterValue,
newCheckedList,
flag,
} = props;
const [loading, setLoading] = useState(false);
const [value, setValue] = useState('');
const [checkValue, setCheckValue] = useState([]);
const [form] = Form.useForm();
const [title, setTitle] = useState([]);
const { Item } = Form;
const [checkedList, setCheckedList] = useState([]); // 选中复选框内容
const [indeterminate, setIndeterminate] = useState([]);
const [checkAll, setCheckAll] = useState([]);
const [selectData, setSelectData] = useState([]);
const [arrValue, setArrValue] = useState([]);
const [data, setData] = useState([]);
const [flagg, setFlagg] = useState(0);
const [type, setType] = useState(); // 是否全选
let objArr = [];
const onChangeList = (list, index, title) => {
const checkedListArr = [...checkedList];
checkedListArr[index] = list;
// 将第一次打开回显数据先存成数组
let oldArr = [];
let addArr = [];
let newArr = [];
// if (flagg == 0) {
arrValue.map((item, index) => {
oldArr = oldArr.concat(item);
});
console.log(oldArr);
// 将第一次打开回显数据存入已选择数组里
oldArr.map(item => {
newArr.push(item);
});
console.log(newArr);
// 获取本次新增数据后的数组
let objArr = [];
checkedListArr.map(item => {
objArr = objArr.concat(item);
});
console.log(checkedListArr);
console.log(objArr); // 本次增加数据后数组
console.log(arrValue); // 上次数组
// 获取新增数据
objArr.map((item1, index1) => {
if (arrValue.indexOf(item1) == -1) {
addArr.push(item1);
}
});
// 将每次新增数据从尾部写入已选择数组里
console.log(addArr);
if (addArr.length != 0) {
addArr.map(item => {
newArr.push(item);
});
}
console.log(newArr);
// 保存此次所有数据顺序
setArrValue(newArr);
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);
setFlagg(0);
};
const onSubmit1 = () => {
console.log(selectData);
let aRR = [];
selectData.map(item => {
console.log(typeof item);
if (typeof item == 'string') {
console.log(1111);
aRR = selectData;
} else {
aRR.push(item.name);
}
});
console.log(aRR);
let newArr = selectData.map(item => item.name);
callBackSubmit({
checkedList,
str: aRR.join(','),
pickItem,
stt: aRR,
title,
});
};
const onCheckAllChange1 = e => {
setData(1);
const indeterminateArr = [...indeterminate];
const checkAllArr = [...checkAll];
const checkedListArr = [...checkedList];
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] = []);
setType(e.target.checked);
console.log(checkedListArr);
setCheckedList(checkedListArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
};
useEffect(() => {
console.log(flagg);
// 不是第一次
if (flagg == 0) {
console.log(12121);
selectAll();
}
// 是否是全选
if (data == 1) {
selectAll();
}
setData(0);
}, [checkedList]);
const selectAll = () => {
objArr = [];
let lastArr = [];
// 处理未排序的勾选数据扁平化
checkedList.map(item => {
objArr = objArr.concat(item);
});
console.log(arrValue);
console.log(objArr);
// 判断是否操作全部勾选的复选框
if (data == 1) {
// 处理上次选中改变顺序后的数据扁平化
let newArr = [];
arrValue.map(item => {
if (item.name == undefined) {
newArr = arrValue;
} else {
newArr = arrValue.map(item => item.name);
}
});
console.log(newArr);
// 判断是否为全选
if (type == false) {
// 判断上次有顺序的数据是否包含这次未排序已选列表数据
newArr.map(item => {
if (objArr.indexOf(item) != -1) {
lastArr.push(item);
}
});
let newArr1 = lastArr.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(lastArr);
console.log(newArr1);
setSelectData(newArr1);
setArrValue(lastArr);
} else {
// 全选状态时
let addArr = [];
objArr.map(item => {
if (newArr.indexOf(item) == -1) {
addArr.push(item);
}
});
console.log(addArr);
addArr.map(item => {
newArr.push(item);
});
console.log(newArr);
let newArr1 = newArr.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(newArr1);
setSelectData(newArr1);
setArrValue(newArr);
}
} else {
// 判断扁平处理后的选中未排序列表数据是否存在于上次已选数组中
arrValue.map(item => {
if (objArr.indexOf(item) != -1) {
lastArr.push(item);
}
});
let newArr1 = lastArr.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(lastArr);
console.log(newArr1);
setSelectData(newArr1);
setArrValue(lastArr);
}
};
useEffect(() => {
if (visible) {
setFlagg(1);
let arr = Object.keys(filed);
console.log(arr, 'arr');
setTitle(arr);
let checkArr = [];
let indeterminateArr = [];
let checkAllArr = [];
console.log(newCheckedList);
arr.map((item, index) => {
checkArr[index] = [];
newCheckedList.map(checkItem => {
if (filed[item].includes(checkItem)) {
checkArr[index].push(checkItem);
}
});
indeterminateArr.push(
!!checkArr[index].length &&
checkArr[index].length < filed[item].length,
);
checkAllArr.push(checkArr[index].length === filed[item].length);
});
console.log(checkArr);
console.log(indeterminateArr);
console.log(checkAllArr);
setCheckedList(checkArr);
setIndeterminate(indeterminateArr);
setCheckAll(checkAllArr);
console.log(characterValue);
let newArr = characterValue.length ? characterValue.split(',') : [];
console.log(newArr);
let newArr1 = newCheckedList.map(item => ({ name: item }));
if (newArr1.length === 1 && newArr1[0].name === '') {
newArr1 = [];
}
console.log(newArr1);
setSelectData(newArr1);
setArrValue(newArr1);
}
}, [visible]);
const dragCallBack = arr => {
console.log(arr);
if (arr) {
setSelectData(arr);
let newArr = [];
arr.map(item => {
newArr.push(item.name);
});
setArrValue(newArr);
}
};
const columns = [
{
title: '已选列表',
dataIndex: 'name',
width: 150,
key: 'name',
},
];
return (
<Modal
title="字段集选择"
bodyStyle={{ width: '100%', minHeight: '100px' }}
width="750px"
destroyOnClose
centered
cancelText="取消"
okText="确认"
{...props}
onOk={() => onSubmit1()}
forceRender
getContainer={false}
>
{visible && (
<div className={styles.listCard}>
<div
className={styles.cardItem}
style={{ borderRight: '1px solid #99bbe8' }}
>
{flag === 0 ? (
<>
<div className={styles.cardContent}>
<span
style={{
color: 'red',
fontSize: '1rem',
marginLeft: '25px',
}}
>
请先选择事件主表
</span>
</div>
</>
) : (
<>
{JSON.stringify(filed) == '{}' ? (
<>
<div className={styles.cardContent}>
<span
style={{
color: 'red',
fontSize: '1rem',
marginLeft: '25px',
}}
>
表字段缺失请先配置表/字段
</span>
</div>
</>
) : (
<>
<div className={styles.cardContent}>
{title.map((item, index) => (
<div className={styles.cardItemData} key={index}>
<Divider
orientation="left"
style={{
margin: '0 0 10px 0',
color: '#15428b',
borderTopColor: '#99bbe8',
}}
>
<Checkbox
indeterminate={indeterminate[index]}
onChange={onCheckAllChange1}
index={index}
checkvalue={filed[item]}
checked={checkAll[index]}
style={{ marginRight: '7px' }}
/>
{item}
</Divider>
<CheckboxGroup
options={filed[item]}
value={checkedList[index]}
onChange={e => onChangeList(e, index, item)}
/>
</div>
))}
</div>
</>
)}
</>
)}
</div>
<div className={styles.cardItem}>
<div className={styles.cardContent}>
<div className={styles.doctorTable}>
<DragTable
bordered
style={{ marginBottom: '10px' }}
rowKey={record => record.name}
columns={columns}
dataSource={selectData}
pagination={false}
size="small"
dragCallBack={dragCallBack}
ItemTypes="stadingOrder"
/>
</div>
</div>
</div>
</div>
)}
</Modal>
);
};
export default EditModal;
......@@ -219,11 +219,9 @@
width: 70%;
}
.cardItem11 {
padding: 0rem 0.5rem;
border: 1px solid #b5b8c8;
padding: 0.5rem;
width: 30%;
height: 34.5rem;
overflow-y: scroll;
overflow-x: scroll;
}
.cardContent1 {
height: 33rem;
......
......@@ -28,6 +28,7 @@ const CardCheck = props => {
useEffect(() => {
if (prevAmount) {
let newCheckList = [...checkList];
console.log(newCheckList);
// 当前选中的
let currentArr = checkedList;
// 上一次选中的
......
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