import React, { useState, useEffect } from 'react'; import { Modal, Form, Select, Input, Checkbox, message } from 'antd'; import lodash from 'lodash'; import styles from './HomeConfigModal.less'; import { GetRoleGroups } from '@/services/webConfig/api'; import TreeSelect from '../menuconfig/NewTreeSelect'; const { Option } = Select; const HomeConfigModal = props => { const { handleCancel, productList, allProductList, visible, onFinish, currentPageConfig, userMode, client, curWeb, } = props; const [form] = Form.useForm(); const [checkList, setCheckList] = useState(null); useEffect(() => { if (visible) { form.setFieldsValue(currentPageConfig); getCheckList(); } else { setCheckList(null); form.resetFields(); } }, [visible]); // 保存配置 const onSubmit = () => { console.log(form.getFieldsValue().homePage); if (!form.getFieldsValue().homePage) { message.error('请填写主页url'); return; } if (!checkList || checkList.length === 0) { message.error('当前主页没有挂接角色'); return; } let obj = { homePage: form.getFieldsValue().homePage, productType: '' }; let arrUrl = obj.homePage.split('/'); // 用const声明常量 let allProList = JSON.parse(JSON.stringify(allProductList)); allProList.push({ PackageName: 'civ_base' }); const product = allProList.find(item => item.PackageName.includes(arrUrl[0])); if (!product) { // arrUrl.shift(); obj.homePage = `civweb4/${obj.homePage}`; } obj.productType = product?.PackageName || 'civweb4'; let proList = JSON.parse(JSON.stringify(productList)); proList.push({ PackageName: 'civ_base' }); if ( !proList.some(item => item.PackageName === obj.productType) && obj.productType !== 'civweb4' ) { message.error(`${obj.productType}未授权,不能使用该功能当主页`); return; } let roleName = []; let roleId = []; const getArr = arr => { arr.roleGroups.forEach(item => { if (item.roleGroups) { getArr(item); } else if (item.isCheck) { roleName.push(item.roleName); roleId.push(item.roleId); } }); }; getArr(checkList); console.log(checkList, { ...obj, roleName, roleId }, 'aaaaaa'); onFinish({ ...obj, roleName: roleName.join(','), roleId, keyIndex: currentPageConfig.keyIndex, }); handleCancel(); }; const getCheckList = () => { console.log(client, 'client'); if (!client) { return; } GetRoleGroups({ client }).then(res => { if (res.code === 0) { let childList = []; let defaultList = []; const chekMap = new Set(currentPageConfig.roleId); res.data.forEach(item => { if (item.groupName !== '默认') { let checks = []; item.roleGroups.forEach(ele => { if (chekMap.has(ele.roleId)) { checks.push(ele); } }); if (checks.length === item.roleGroups.length) { item.indeterminate = false; item.isCheck = true; } else if (checks.length === 0) { item.indeterminate = false; item.isCheck = false; } else { item.indeterminate = true; item.isCheck = false; } childList.push(item); } else { defaultList = item.roleGroups; } }); console.log(chekMap, currentPageConfig, 'chekMap'); let list = { groupName: '关联角色', isCheck: false, roleGroups: [...defaultList, ...childList].map((item, index) => { let obj = { groupName: item.groupName, isCheck: item.isCheck, indeterminate: item.indeterminate, index: [index], roleGroups: item.roleGroups?.map((ele, i) => ({ ...ele, isCheck: chekMap.has(ele.roleId), index: [index, i], })), }; let ojbChild = { ...item, isCheck: chekMap.has(item.roleId), index: [index] }; return item.roleGroups ? obj : ojbChild; }), }; console.log(list, 'list'); setCheckList(list); } }); }; // 多选 const changeAll = (e, item) => { console.log(item, 'itemasjdf'); let list = lodash.cloneDeep(checkList); let current = item.index ? item.index.reduce((acc, cur) => (acc.roleGroups ? acc.roleGroups[cur] : acc), list) : list; console.log(current); current.isCheck = e.target.checked; checkAll(e.target.checked, current.roleGroups); current.indeterminate = false; setCheckList(list); }; const checkAll = (checked, list) => { list.forEach(item => { if (item.roleGroups) { checkAll(checked, item.roleGroups); } item.isCheck = checked; }); }; const onChange = (e, item) => { let list = lodash.cloneDeep(checkList); console.log(item.index, list, 'asfd'); let current = item.index.reduce( (acc, cur) => (acc.roleGroups ? acc.roleGroups[cur] : acc), list, ); console.log(current, 'current'); current.isCheck = e.target.checked; let parentIndex = [...item.index]; parentIndex.pop(); let allCurrent = parentIndex.reduce( (acc, cur) => (acc.roleGroups ? acc.roleGroups[cur] : acc), list, ); console.log(allCurrent, 'allCurrent'); let num = allCurrent?.roleGroups?.filter(ele => ele.isCheck).length; if (num === allCurrent.roleGroups.length) { allCurrent.indeterminate = false; allCurrent.isCheck = true; } else if (num === 0) { allCurrent.indeterminate = false; allCurrent.isCheck = false; } else { allCurrent.indeterminate = true; } setCheckList(list); }; const checkRender = list => { console.log(list, 'fasldfjaslkdjf'); let num = list?.roleGroups?.filter(ele => ele.isCheck || ele.indeterminate).length; return ( <> <div className={styles.checkList}> {list?.groupName && ( <div className={styles.title}> <Checkbox onChange={e => changeAll(e, list)} checked={num === list?.roleGroups.length} indeterminate={num > 0 && num < list?.roleGroups.length} > {list?.groupName} </Checkbox> </div> )} {list?.roleGroups.map(item => { return ( <> {item.roleGroups ? ( checkRender(item) ) : ( <Checkbox onChange={e => onChange(e, item)} style={{ width: '150px', marginLeft: '0px', marginBottom: '10px' }} checked={item.isCheck} > {item.roleName} </Checkbox> )} </> ); })} </div> </> ); }; return ( <Modal width={800} title="主页配置" visible={visible} onCancel={handleCancel} maskClosable={false} onOk={onSubmit} destroyOnClose > <div className={styles.content}> <Form form={form} labelCol={{ span: 3 }} wrapperCol={{ span: 21 }} initialValues={{ remember: true }} > {/* <Form.Item label="产品类型" name="productType"> <Select placeholder="请选择主页产品类型"> {productList.map(item => ( <Option value={item.PackageName} key={item.PackageName}> {`${item.ProductName}(${item.PackageName})`} </Option> ))} </Select> </Form.Item> */} <Form.Item label="主页Url" name="homePage"> {/* <Input placeholder="请输入主页路径" autoComplete="off" /> */} <TreeSelect menuChange={val => {}} userMode={userMode} curWeb={curWeb} /> </Form.Item> </Form> <div className={styles.roleCheck}>{checkRender(checkList)}</div> </div> </Modal> ); }; export default HomeConfigModal;