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'; const CheckboxGroup = Checkbox.Group; const AddModal = props => { const { callBackSubmit = () => { }, isType, pickItem, visible, filed, characterValue, 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([]) let objArr = [] 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 e.target.checked ? checkedListArr[e.target.index] = e.target.checkvalue : checkedListArr[e.target.index] = [] setCheckedList(checkedListArr); setIndeterminate(indeterminateArr); setCheckAll(checkAllArr); }; //监听用户选择的字段名 useEffect(() => { selectAll() }, [checkedList]); const selectAll = () => { objArr = [] checkedList.map(item => { objArr = objArr.concat(item) }) setSelectData(objArr) } const onSubmit = () => { isType === 'rule' ? callBackSubmit(`${value === '无' || value === '' ? '' : value + ','}${checkValue.join(',')}`) : callBackSubmit({ checkedList, str: selectData.join(","), pickItem }); }; useEffect(() => { if (isType != '') { 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) let newArr = characterValue.length ? characterValue.split(",") : [] setSelectData(newArr) draftSort() } }, [visible]); //拖拽初始化及逻辑 const draftSort = () => { let el = document.getElementById('doctor-drag-items'); if (el) { let sortable = Sortable.create(el, { animation: 100, //动画参数 onEnd: function (evt) { //拖拽完毕之后发生,只需关注该事件 let arr = []; let len = evt.from.children.length; for (let i = 0; i < len; i++) { arr.push(evt.from.children[i].getAttribute('drag-id')) } setSelectData(arr) } }); } } return ( <Modal title={isType === 'rule' ? '选择验证规则' : '字段集选择'} bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: '10px' }} width="700px" destroyOnClose centered={true} maskClosable={false} cancelText="取消" okText="确认" {...props} onOk={() => onSubmit()} confirmLoading={loading} forceRender={true} getContainer={false} > {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}> <table> <thead> <tr> <td>字段名</td> </tr> </thead> <tbody id='doctor-drag-items'> {selectData && selectData.length > 0 ? selectData.map((item, index) => { return <tr drag-id={item} key={index} style={{ cursor: 'move' }}> <td><span title={item}>{item}</span></td> </tr> }) : <tr><td colSpan='10' style={{ textAlign: 'center' }}>暂无数据</td></tr> } </tbody> </table> </div> </div> </div> </div> ) } </Modal> ); }; export default AddModal;