/* eslint-disable no-shadow */ /* eslint-disable arrow-body-style */ /* eslint-disable array-callback-return */ /* eslint-disable indent */ import React, { useState, useEffect, useCallback, useRef } from 'react'; import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd'; import styles from './standingBook.less'; import Sortable from 'sortablejs'; import DragTable from '@/components/DragTable/DragTable'; const CheckboxGroup = Checkbox.Group; const AddModal = props => { // 自定义获取改变后的值hooks const usePrevious = value => { const ref = useRef(); useEffect(() => { ref.current = value; }); return ref.current; }; const { callBackSubmit, pickItem, visible, filed, newCheckedList } = 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 [isFirst, setIsFirst] = useState(true); const prevAmount = usePrevious({ checkedList }); const onChangeList = (list, index, title) => { const checkedListArr = [...checkedList]; checkedListArr[index] = list; 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 onCheckAllChange = e => { const indeterminateArr = [...indeterminate]; const checkAllArr = [...checkAll]; const checkedListArr = [...checkedList]; checkAllArr[e.target.index] = e.target.checked; indeterminateArr[e.target.index] = false; // eslint-disable-next-line no-unused-expressions e.target.checked ? (checkedListArr[e.target.index] = e.target.checkvalue) : (checkedListArr[e.target.index] = []); setCheckedList(checkedListArr); setIndeterminate(indeterminateArr); setCheckAll(checkAllArr); }; // 监听用户选择的字段名 useEffect(() => { if (prevAmount) { selectAll(); } }, [checkedList]); const selectAll = () => { if (!visible) { return; } // 是否第一次保存数据 if (isFirst) { setIsFirst(false); return; } // 新的选择后的数据(已选字段列表数据) let newSelect = JSON.parse(JSON.stringify(selectData)); // 当前选中的 let currentArr; // 上一次选中的 let preArr; // 获取扁平化后的数组 currentArr = new Set(checkedList.flat()); preArr = new Set(prevAmount.checkedList.flat()); // 找出相同的部分 let someArr = [...new Set([...currentArr].filter(x => preArr.has(x)))]; // 复选框事选中还是取消选中 add or del let checkType; if ([...currentArr].length > [...preArr].length) { checkType = 'add'; } else if ([...currentArr].length < [...preArr].length) { checkType = 'del'; } if (checkType === 'add') { // 添加新选中的元素 currentArr.forEach(item => { if (someArr.indexOf(item) === -1) { newSelect.push({ name: item }); } }); } else if (checkType === 'del') { // 删除取消勾选的元素 preArr.forEach(item => { if (someArr.indexOf(item) === -1) { newSelect.splice(newSelect.findIndex(ele => ele.name === item), 1); } }); } console.log(newSelect); setSelectData(newSelect); }; const onSubmit = () => { let newArr = selectData.map(item => item.name); callBackSubmit({ checkedList, str: newArr.join(','), pickItem }); }; const columns = [ { title: '字段名', dataIndex: 'name', width: 150, key: 'name', ellipsis: true, }, ]; useEffect(() => { if (visible) { let arr = Object.keys(filed); setTitle(arr); let checkArr = []; let indeterminateArr = []; let checkAllArr = []; 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); }); setCheckedList(checkArr); setIndeterminate(indeterminateArr); setCheckAll(checkAllArr); // eslint-disable-next-line arrow-body-style let newArr = newCheckedList.map(item => { return { name: item }; }); if (newArr.length === 1 && newArr[0].name === '') { newArr = []; } console.log(newArr); setSelectData(newArr); } else { // 弹窗关闭时清空数据 setSelectData([]); setCheckedList([]); setCheckAll([]); setIndeterminate([]); setIsFirst(true); } }, [visible]); const dragCallBack = arr => { console.log(arr); if (arr && !isFirst) { setSelectData(arr); } }; return ( <Modal title="字段集选择" bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: '10px' }} width="750px" centered maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} confirmLoading={loading} forceRender getContainer={false} destroyOnClose > {visible && ( <div className={styles.listCard}> <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}> <Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }} > 待选字段列表 </Divider> <div className={styles.cardContent}> {title.map((item, index) => { return ( <div className={styles.cardItemData} key={index}> <Divider orientation="left" style={{ margin: '0 0 10px 0', color: '#15428b', borderTopColor: '#99bbe8', }} > {item}{' '} <Checkbox indeterminate={indeterminate[index]} onChange={onCheckAllChange} index={index} checkvalue={filed[item]} checked={checkAll[index]} > {' '} </Checkbox> </Divider> <CheckboxGroup options={filed[item]} value={checkedList[index]} onChange={e => onChangeList(e, index, item)} /> </div> ); })} </div> </div> <div className={styles.cardItem}> <Divider orientation="left" style={{ margin: '0 0 10px 0', backgroundColor: '#dfe8f6' }} > 已选字段列表 </Divider> <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 AddModal;