/* eslint-disable no-plusplus */ /* eslint-disable array-callback-return */ /* eslint-disable no-unused-expressions */ /* eslint-disable no-shadow */ import React, { useState, useEffect } from 'react'; import { Modal, Checkbox, Tabs, Input, Button, Pagination, Empty } from 'antd'; import { CM_Event_LoadDepartmentAndRoles } from '@/services/standingBook/api'; import styles from './incident.less'; const CheckboxGroup = Checkbox.Group; const { TabPane } = Tabs; const ChangeAddFlows = props => { const { callBackSubmit = () => {}, pickItem, visible, filed11, newCheckedList } = props; const [value, setValue] = useState(''); const [checkValue, setCheckValue] = useState([]); const [title, setTitle] = useState([]); const [checkedList, setCheckedList] = useState([]); // 选中复选框内容 const [flagg, setFlagg] = useState(0); const [searchWord, setSearchWord] = useState(''); // 关键字 const { Search } = Input; const [total, setTotal] = useState(); const [pageSize, setPageSize] = useState(40); const [currentPage, setCurrentPage] = useState(1); const [roleValue, setRoleValue] = useState([]); 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 [keyValue, setKeyValue] = useState('0'); const [emptyValue, setEmptyValue] = useState(0); 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(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(newCheckedList); console.log(saveCheckValue); let data = []; saveCheckValue.map((item, index) => { data = data.concat(item); }); callBackSubmit({ saveCheckValue, str: data.join(','), pickItem, stt: data, title, filed22: filed1, }); setIsCheck(0); setIsCheck1(0); setIsCheck2(0); setKeyValue('0'); setSearchWord(''); }; useEffect(() => { setKeepOption1(filed11['部门']); setKeepOption2(filed11['站点']); getRoles('角色', '', pageSize, 1); setRoleValue(filed1); setFlagg(1); let arr = Object.keys(filed1); setTitle(arr); let checkArr = []; console.log(newCheckedList); // 已选中数组 let listdata = []; newCheckedList.map(checkItem => { if (filed11['角色'].includes(checkItem)) { listdata.push(checkItem); } }); setCheckDataRole(listdata); checkArr[0] = listdata; console.log(listdata); // 按对象数组格式 setSaveCheckValue(checkArr); setCheckedList(checkArr); let pmdata = []; newCheckedList.map(checkItem => { if (filed11['部门'].includes(checkItem)) { pmdata.push(checkItem); } }); console.log(pmdata); setCheckDataPm(pmdata); let sitedata = []; newCheckedList.map(checkItem => { if (filed11['站点'].includes(checkItem)) { sitedata.push(checkItem); } }); console.log(sitedata); setCheckDataSite(sitedata); }, [visible]); const submitSearchUser = () => { if (searchWord != '') { setSearchFlag(1); } if (keepTabKey == 0) { sreachRoles('角色', searchWord, pageSize, 1); } if (keepTabKey == 1) { sreachRoles('部门', searchWord, pageSize, 1); } if (keepTabKey == 2) { sreachRoles('站点', searchWord, pageSize, 1); } }; // 获取搜索框的值 const handleSearch = e => { if (e.target.value == '') { setSearchFlag(0); } setSearchWord(e.target.value); }; // 监听分页 const paginationChange = (page, pageSizes) => { if (keepTabKey == 0) { getRoles('角色', searchWord, pageSizes, page); } if (keepTabKey == 1) { getRoles('部门', searchWord, pageSizes, page); } if (keepTabKey == 2) { getRoles('站点', searchWord, pageSizes, page); } setCurrentPage(page); setPageSize(pageSizes); }; // 搜索时获取数据 const sreachRoles = (type, keywords, pageSizes, pageIndex) => { CM_Event_LoadDepartmentAndRoles({ type, keywords, pageSize: pageSizes, pageIndex, }).then(res => { if (res.msg === 'Ok') { setRoleValue(formateArrDataA1(res.data, 'groupType')); setFiled1(formateArrDataA1(res.data, 'groupType')); console.log(res.data.count); setCurrentPage(1); setTotal(res.data.count); if (res.data.count == 0) { setEmptyValue(1); } else { setEmptyValue(0); } } }); }; // 重置 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 = (type, keywords, pageSizes, pageIndex) => { CM_Event_LoadDepartmentAndRoles({ type, keywords, pageSize: pageSizes, pageIndex, }).then(res => { if (res.msg === 'Ok') { setTotal(res.data.count); setRoleValue(formateArrDataA1(res.data, 'groupType')); setFiled1(formateArrDataA1(res.data, 'groupType')); if (res.data.count == 0) { setEmptyValue(1); } else { setEmptyValue(0); } } }); }; 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] = []; 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 = []; let a1 = []; let a2; let a3 = []; initialArr.data.map(i => { a2 = i.groupType; a1 = i.root; a1.map(j => { j.group = a2; }); aa.push(i.root); }); aa.map(p => { p.map(o => { a3.push(o); }); }); console.log(a3); // 判定传参是否符合规则 if (!(a3 instanceof Array)) { return '请传入正确格式的数组'; } if (!name) { return '请传入对象属性'; } // 先获取一下这个数组中有多少个"name" let nameArr = []; a3.map(i => { if (nameArr.indexOf(i.group) === -1) { nameArr.push(i.group); } }); console.log(nameArr); // 新建一个包含多个list的结果对象 let tempObj = {}; // 根据不同的"name"生成多个数组 for (let k in nameArr) { for (let j in a3) { if (a3[j].group == nameArr[k]) { // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变 tempObj[nameArr[k]] = tempObj[nameArr[k]] || []; tempObj[nameArr[k]].push(a3[j]); } } } console.log(tempObj); for (let key in tempObj) { let arr = []; tempObj[key].map(item => { tempObj[key] = arr; arr.push(item.Name); }); } return tempObj; }; 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 => { setKeyValue(key); // setSearchWord(''); setSearchFlag(0); setCurrentPage(1); setKeepTabKey(key); let value; if (key == 0) { value = '角色'; getRoles('角色', searchWord, pageSize, 1); } if (key == 1) { value = '部门'; getRoles('部门', searchWord, pageSize, 1); } if (key == 2) { value = '站点'; getRoles('站点', searchWord, pageSize, 1); } }; 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} afterClose={() => { setKeyValue('0'); setSearchWord(''); }} > <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 activeKey={keyValue} className={styles.tab} onChange={handleParChange}> <TabPane tab="角色" key="0"> <div className={styles.cardItemData1}> {emptyValue == 0 ? ( <CheckboxGroup options={roleValue['角色']} value={checkedList[0]} onChange={onChangeListNew} /> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" /> )} </div> </TabPane> <TabPane tab="部门" key="1"> <div className={styles.cardItemData1}> {emptyValue == 0 ? ( <CheckboxGroup options={roleValue['部门']} value={checkedList[1]} onChange={onChangeListNew1} /> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" /> )} </div> </TabPane> <TabPane tab="站点" key="2"> <div className={styles.cardItemData1}> {emptyValue == 0 ? ( <CheckboxGroup options={roleValue['站点']} value={checkedList[2]} onChange={onChangeListNew2} /> ) : ( <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无数据" /> )} </div> </TabPane> </Tabs> </div> </div> <div className={styles.cardItem11}> <div className={styles.cardContent1}> <Tabs // defaultActiveKey="0" className={styles.tab} activeKey={keyValue} onChange={handleParChange} > <TabPane tab="角色" key="0"> {checkDataRole.map((item, index) => ( <div key={index} style={{ marginBottom: '5px', }} > {item} </div> ))} </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> </div> )} <Pagination total={total} showTotal={item => `共 ${item} 条`} defaultPageSize={pageSize} defaultCurrent={1} current={currentPage} onChange={paginationChange} pageSizeOptions={[10, 20, 40, 100]} style={{ marginBottom: '10px' }} size="small" showQuickJumper /> </Modal> ); }; export default ChangeAddFlows;