import React, { useState, useEffect, useCallback, useRef } from 'react'; import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd'; import { } from '@/services/platform/bs' import styles from './index.less' import Sortable from 'sortablejs'; 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: 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 && 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) => { 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;