import React, { useState, useEffect, useCallback, useRef } from 'react'; import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd'; import {} from '@/services/tablemanager/tablemanager'; import Sortable from 'sortablejs'; import styles from './index.less' const CheckboxGroup = Checkbox.Group; const AddModal = props => { const { callBackSubmit = () => {}, isType, formObj, 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(',') }); }; useEffect(() => { if (isType != '' && isType === 'rule') { setValue(formObj.numerical); setCheckValue(formObj.rule); } else if (isType === 'characteristics') { 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 handleChange = e => { setValue(e.target.value); if (e.target.value === '无') { setCheckValue([]); } }; // 复选框变化时触发的事件 const onChange = e => { setCheckValue(e); if (e.length && value == '无') { setValue(''); } }; // 拖拽初始化及逻辑 const draftSort = () => { let el = document.getElementById('doctor-drag-items'); if (el) { let sortable = Sortable.create(el, { animation: 100, // 动画参数 onEnd (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 getContainer={false} > {visible && isType === 'rule' && ( <> <Radio.Group onChange={handleChange} value={value}> <Space direction="vertical"> <Radio value="无">无(清空选中)</Radio> <Radio value="number">数值(number)</Radio> <Radio value="digits">整数(digits)</Radio> <Radio value="email">邮箱(email)</Radio> <Radio value="identity">身份证号(identity)</Radio> <Radio value="mobile">手机号(mobile)</Radio> <Radio value="bankAccount">银行卡号(bankAccount)</Radio> <Radio value="timeControl">时间控制(timeControl)</Radio> </Space> </Radio.Group> <Checkbox.Group style={{ width: '100%', marginTop: '1rem' }} onChange={onChange} value={checkValue} > <Space direction="vertical"> <Checkbox value="required">必填(required)</Checkbox> <Checkbox value="emphasis">强调(emphasis)</Checkbox> <Checkbox value="sensitive">敏感(sensitive)</Checkbox> </Space> </Checkbox.Group> </> )} {visible && isType === 'characteristics' && ( <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) => <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) => <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;