loadGroup.jsx 17.4 KB
Newer Older
1 2 3
import React, { useState, useEffect, useRef } from 'react';
import { Modal, Spin, Table, Button, Divider, Input, notification } from 'antd';
import classnames from 'classnames'
邓超's avatar
邓超 committed
4
import { LoadFieldsByGroup, LoadGroup } from '@/services/tablemanager/tablemanager'
shaoan123's avatar
shaoan123 committed
5
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
6 7
import Sortable from 'sortablejs';
import styles from './index.less'
shaoan123's avatar
shaoan123 committed
8 9
import {
    ChangeOrder
邓超's avatar
邓超 committed
10
} from '@/services/tablemanager/tablemanager'
11 12 13
import { DataRegion } from 'bizcharts/lib/components/Annotation';
import { Number } from 'core-js';
let list = {}
14
const AddModal = props => {
15
    let ref = useRef();
16 17 18
    const { callBackSubmit = () => { }, type, formObj, visible } = props;
    const [loading, setLoading] = useState(false);
    const [treeLoading, setTreeLoading] = useState(true)
shaoan123's avatar
shaoan123 committed
19
    const [isModalVisible, setIsModalVisible] = useState(false)
20 21
    const [allData, setAllData] = useState({})
    const [leftData, setLeftData] = useState([])
22
    const [flag, setFlag] = useState(0); // 弹窗类型
shaoan123's avatar
shaoan123 committed
23
    const [pickIndex, setPickIndex] = useState('')
24
    const [selectData, setSelectData] = useState('')
shaoan123's avatar
shaoan123 committed
25
    const [createName, setCreateName] = useState('')
26 27
    // 提交
    const onSubmit = () => {
shaoan123's avatar
shaoan123 committed
28
        setLoading(true);
29
        let arr = []
30 31 32 33
        leftData.map((item) => {
            allData[item].map(allItem => {
                arr.push({ groupName: item, ID: Number(allItem.ID) })
            })
34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
        })
        ChangeOrder(arr).then(res => {
            setLoading(false);
            if (res.msg === 'Ok' || res.msg === '') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '编辑成功',
                });
                callBackSubmit();
            }
            else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        })
53
    };
54

55 56 57 58 59 60 61 62 63 64 65
    useEffect(() => {
        if (type != '') {
            setTreeLoading(true)
            LoadGroup({
                tableName: formObj.tableName
            }).then(
                res => {
                    setTreeLoading(false)
                    if (res.msg === 'Ok') {
                        let arr = []
                        res.data.root.map(item => {
shaoan123's avatar
shaoan123 committed
66
                            arr.push(item.text)
67
                        })
68

69 70
                        LoadFieldsByGroup({ tableName: formObj.tableName, groupName: arr.join(",") }).then(respone => {
                            if (respone.msg === 'Ok') {
71 72 73 74 75 76
                                let data = formateArrDataA(respone.data.root, 'Group')
                                list = data
                                setLeftData(arr || [])
                                setSelectData(arr[0] || {})
                                setAllData(data)
                                draftSort()
77 78 79 80 81 82
                            }
                        })
                    }

                }
            )
83

84 85 86 87
        }

    }, [visible, flag]);
    const add = () => {
shaoan123's avatar
shaoan123 committed
88 89
        setCreateName('')
        setIsModalVisible(true)
90
    }
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

    const formateArrDataA = (initialArr, name) => {
        // 判定传参是否符合规则
        if (!(initialArr instanceof Array)) {
            return '请传入正确格式的数组'
        }
        if (!name) {
            return '请传入对象属性'
        }
        //先获取一下这个数组中有多少个"name"
        let nameArr = []
        for (let i in initialArr) {
            if (nameArr.indexOf(initialArr[i][`${name}`]) === -1) {
                nameArr.push(initialArr[i][`${name}`])
            }
        }
        //新建一个包含多个list的结果对象
        let tempObj = {}
        // 根据不同的"name"生成多个数组
        for (let k in nameArr) {
            for (let j in initialArr) {
                if (initialArr[j][`${name}`] == nameArr[k]) {
                    // 每次外循环时新建一个对应"name"的数组, 内循环时当前数组不变
                    tempObj[nameArr[k]] = tempObj[nameArr[k]] || []
                    tempObj[nameArr[k]].push(initialArr[j])
                }
            }
        }
        for (let key in tempObj) {
            let arr = []
            tempObj[key].map(item => {
                tempObj[key] = arr;
                arr.push(item)
            })
        }

        return tempObj
    }
129 130 131 132 133 134 135 136 137 138 139 140 141 142
    const handlerDatas = (arr) => {
        let obj = {};
        arr.forEach((item, index) => {
            let { Group } = item;
            if (!obj[Group]) {
                obj[Group] = {
                    Group,
                    children: []
                }
            }
            obj[Group].children.push(item);
        });
        return Object.values(obj); // 最终输出
    }
143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204
    //拖拽初始化及逻辑
    const draftSort = () => {
        let el = document.getElementById('doctor-drag-items');

        if (el) {
            let sortable = Sortable.create(el, {
                animation: 100, //动画参数
                group: {
                    name: 'shared',
                    pull: true,// To clone: set pull to 'clone'
                    put: false // 不允许拖拽进这个列表
                },
                onEnd: function (evt) { //拖拽完毕之后发生,只需关注该事件
                    let maxLegth = 0
                    let leftNewest = []
                    let flagData = ''
                    setLeftData(data => {
                        maxLegth = 225 + data.length * 45;
                        leftNewest = data
                        return data
                    })

                    setSelectData(data => {
                        flagData = data
                        return data
                    })
                    if (evt.originalEvent.clientX < 983 && evt.originalEvent.clientY > 225 && evt.originalEvent.clientY < maxLegth) {
                        let index = Math.ceil((evt.originalEvent.clientY - 225) / 40)
                        let name = evt.from.children[0].getAttribute('group')
                        setAllData((data) => {
                            let obj = { ...data }
                            if (obj[name][evt.oldIndex]) {
                                obj[leftNewest[index - 1]].push(obj[name][evt.oldIndex])
                            }
                            obj[flagData].splice(evt.oldIndex, 1)
                            return obj
                        })
                    }
                    else {
                        let arr = [];
                        let len = evt.from.children.length;
                        for (let i = 0; i < len; i++) {
                            let child = evt.from.children[i]
                            arr.push({ ID: child.getAttribute('drag-id'), Name: child.getAttribute('drag-name'), Shape: child.getAttribute('drag-shape'), Group: child.getAttribute('group') })
                        }
                        setAllData((data) => {
                            let obj = { ...data }
                            obj[flagData] = arr
                            return obj
                        })
                    }




                },
                animation: 1000,

                direction: 'vertical',
                forceFallback: true,

            });
205

206 207
        }
    }
shaoan123's avatar
shaoan123 committed
208
    //完成拖拽
shaoan123's avatar
shaoan123 committed
209
    const onDrop = (info) => {
shaoan123's avatar
shaoan123 committed
210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235
        const dropKey = info.node.props.eventKey;
        const dragKey = info.dragNode.props.eventKey;
        const dropPos = info.node.props.pos.split('-');
        const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);

        const loop = (data, key, callback) => {
            for (let i = 0; i < data.length; i++) {
                if (data[i].key === key) {
                    return callback(data[i], i, data);
                }
                if (data[i].children) {
                    loop(data[i].children, key, callback);
                }
            }
        };
        const changeData = [...data];
        // Find dragObject
        let dragObj;
        if (info.dragNode.top) {
            return
        } else {
            loop(changeData, dragKey, (item, index, arr) => {
                arr.splice(index, 1);
                dragObj = item;
            });
        }
236 237


shaoan123's avatar
shaoan123 committed
238 239 240 241 242 243
        if (!info.dropToGap) {
            // Drop on the content
            loop(data, dropKey, item => {
                item.children = item.children || [];
                // where to insert 示例添加到尾部,可以是随意位置
                item.children.push(dragObj);
244 245 246
            });
        }

shaoan123's avatar
shaoan123 committed
247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277
        else if (
            !info.dragNode.top && info.node.children &&
            dropPosition === 1 // On the bottom gap
        ) {
            loop(data, dropKey, item => {
                item.children = item.children || [];
                // where to insert 示例添加到头部,可以是随意位置
                item.children.unshift(dragObj);
            });
        } else {
            let ar;
            let i;

            info.dragNode.top ? '' : loop(data, dropKey, (item, index, arr) => {
                ar = arr;
                i = index;
            });
            if (dropPosition === -1) {
                info.dragNode.top ? '' : ar.splice(i, 0, dragObj);
            } else {
                info.dragNode.top ? '' : ar.splice(i + 1, 0, dragObj);
            }
        }
        //changeData就是拖拽结束后改变的数据格式, 需要在这里重新赋值 即可显示最新拖拽之后的结果
        setData(changeData)
    };
    /**
     *
     * @param {Array} selectedKeys  选中的key 数组存放,单多选
     * @param {Node} e 被选择中的node信息,可以拿到 数据源, 层级关系等...
     */
278 279 280 281 282 283 284 285 286
    // //完成选择
    // const onSelect = (selectedKeys, e) => {
    //     if (e.node.top) {
    //         const index = data.findIndex(item => item.key === e.node.key)
    //         setPickIndex(index)
    //     }
    //     else {
    //         setPickIndex('')
    //     }
287

288
    // }
shaoan123's avatar
shaoan123 committed
289 290
    const del = () => {
        if (pickIndex !== '') {
291 292 293 294 295 296 297 298 299 300
            let arr = [...leftData]
            let newArr = { ...allData }
            let index = arr.findIndex(item => { return pickIndex == item })
            arr.splice(index, 1)
            if(newArr["(未分组)"]){
                newArr["(未分组)"]=newArr["(未分组)"].concat(newArr[pickIndex])
            }
            delete newArr[pickIndex]
            setLeftData(arr)
            setAllData(newArr)
shaoan123's avatar
shaoan123 committed
301 302 303
        }
    }
    const handleOk = () => {
304 305 306 307 308 309 310 311
        let arr = [...leftData]
        let newArr = { ...allData }
        if (createName !== '') {
            arr.push(createName)
            newArr[createName] = []
        }
        setLeftData(arr)
        setAllData(newArr)
shaoan123's avatar
shaoan123 committed
312 313 314 315 316 317 318
        setIsModalVisible(false)
    }
    const handleCancel = () => {
        setIsModalVisible(false)
    }
    const change = (e) => {
        setCreateName(e.target.value)
319
    }
320 321 322 323 324
    const pickData = (e, item) => {
        e.stopPropagation();
        setSelectData(item);
        setPickIndex(item)
    }
325 326 327 328
    return (
        <>
            <Modal
                title='字段配置'
329
                bodyStyle={{ width: '100%', minHeight: '100px', height: '40rem' }}
330
                style={{ top: '50px', left: '50px' }}
331
                width='42%'
332 333 334 335 336 337 338 339 340 341 342
                destroyOnClose
                maskClosable={false}
                cancelText="取消"
                okText="确认"
                {...props}
                onOk={() => onSubmit()}
                confirmLoading={loading}
                forceRender={true}
                getContainer={false}
            >
                {visible && (
343 344 345 346
                    <Spin tip="loading..." spinning={treeLoading}>
                        <div className={styles.cardList}>

                            {/* <Card bordered={true} extra={<div style={{ display: 'flex' }}><Button onClick={add} style={{ display: 'flex', alignItems: 'center', marginRight: '1rem' }}>添加分组<PlusOutlined /></Button><Button danger onClick={del} style={{ display: 'flex', alignItems: 'center' }}>删除分组<DeleteOutlined /></Button> </div>} style={{ width: '100%' }}>
shaoan123's avatar
shaoan123 committed
347 348 349 350 351 352 353 354
                            <Tree
                                draggable //是否可以拖拽
                                blockNode //是否节点占据一行   
                                showLine  //    是否展示连接线
                                treeData={data} //数据源 格式 Array 每项的数据格式Object { key:..., title:...,... }
                                onDrop={onDrop} //拖拽结束后触发的回调函数
                                onSelect={onSelect} // 选中某一级的回调函数
                            />
355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405
                        </Card> */}
                            <div style={{ display: 'flex', width: '96.4%', justifyContent: 'flex-end' }}><Button onClick={add} style={{ display: 'flex', alignItems: 'center', marginRight: '1rem' }}>添加分组<PlusOutlined /></Button><Button danger onClick={del} style={{ display: 'flex', alignItems: 'center' }}>删除分组<DeleteOutlined /></Button> </div>
                            <div className={styles.listCard}>
                                <div className={styles.cardItem} style={{ borderRight: '1px solid #99bbe8' }}>
                                    <div className={styles.doctorTable}>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <td>组名称</td>
                                                </tr>
                                            </thead>
                                            <tbody id='doctor-drag-items1'>
                                                {leftData && leftData.length > 0 ?
                                                    leftData.map((item, index) => {
                                                        return <tr  className={classnames({
                                                            [styles.defaultTile]: true,
                                                            [styles.activeTile]: pickIndex==item,
                                                          
                                                        })} onClick={e => pickData(e, item)} drag-id={item} key={index} style={{ cursor: 'pointer' }}>
                                                            <td><span title={item}>{item}</span></td>
                                                        </tr>
                                                    })
                                                    : <tr><td colSpan='12' style={{ textAlign: 'center' }}>暂无数据</td></tr>
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div className={styles.cardItem}>
                                    <div className={styles.cardContent}>
                                        <div className={styles.doctorTable}>
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <td>字段名</td>
                                                        <td>形态</td>
                                                    </tr>
                                                </thead>
                                                <tbody id='doctor-drag-items'>
                                                    {allData[selectData] && allData[selectData].length > 0 ?
                                                        allData[selectData].map((item, index) => {
                                                            return <tr drag-id={item.ID} drag-name={item.Name} drag-shape={item.Shape} key={index} group={item.Group} style={{ cursor: 'move' }}>
                                                                <td><span title={item.Name}>{item.Name}</span></td>
                                                                <td><span title={item.Shape}>{item.Shape}</span></td>
                                                            </tr>
                                                        })
                                                        : <tr><td colSpan='12' style={{ textAlign: 'center' }}>暂无数据</td></tr>
                                                    }
                                                </tbody>
                                            </table>
                                        </div>
406

407 408 409 410
                                    </div>
                                </div>
                            </div>
                        </div>
411

412
                    </Spin>)}
413
            </Modal>
shaoan123's avatar
shaoan123 committed
414 415 416 417 418 419 420 421 422 423 424
            <Modal title="添加分组" style={{ top: '200px', left: '50px' }} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Input
                    value={createName}
                    className="site-input-right"
                    onChange={change}
                    style={{
                        width: 400,
                    }}
                    placeholder="请输入分组名称"
                />
            </Modal>
425 426 427 428
        </>
    );
};
export default AddModal;