import React, { useState, useEffect, useCallback, useRef } from 'react'; import { Form, Modal, Space, Divider, Radio, Checkbox } from 'antd'; import styles from './incident.less'; import Sortable from 'sortablejs'; const CheckboxGroup = Checkbox.Group; const ChangeAddFlows = props =>{ const { callBackSubmit = () => { }, pickItem, visible, filed1, 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 onChangeList1 = (list, index, title) => { const checkedListArr = [...checkedList] checkedListArr[index] = list setCheckedList(checkedListArr); const indeterminateArr = [...indeterminate] const checkAllArr = [...checkAll] indeterminateArr[index] = !!list.length && list.length < filed1[title].length checkAllArr[index] = list.length === filed1[title].length setIndeterminate(indeterminateArr) setCheckAll(checkAllArr); }; const onSubmit = () => { console.log(selectData.join(",")) console.log(pickItem) console.log(checkedList) callBackSubmit({ checkedList, str: selectData.join(","), pickItem }); } 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) } useEffect(() => { console.log(characterValue) console.log(pickItem) console.log(filed1) let arr = Object.keys(filed1) console.log(arr, 'arr') setTitle(arr) let checkArr = [] let indeterminateArr = [] let checkAllArr = [] console.log(newCheckedList); arr.map((item, index) => { checkArr[index] = [] newCheckedList.map(checkItem => { if (filed1[item].includes(checkItem)) { checkArr[index].push(checkItem) } }) indeterminateArr.push(!!checkArr[index].length && checkArr[index].length < filed1[item].length) checkAllArr.push(checkArr[index].length === filed1[item].length) }) console.log(checkArr) 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='部门或角色' bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: '10px' }} width="700px" destroyOnClose centered={true} maskClosable={false} onOk={onSubmit} okText="确认" cancelText="取消" {...props} onOk={() => onSubmit()} 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={filed1[item]} checked={checkAll[index]}> </Checkbox></Divider> <CheckboxGroup options={filed1[item]} value={checkedList[index]} onChange={(e) => onChangeList1(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 ChangeAddFlows;