filedConfig.jsx

import React, { useState, useEffect } from 'react';
import {
    Form,
    Modal,
    Space,
    Table,
    Button,
    Popconfirm,
    Spin,
    notification,
    Tooltip
} from 'antd';
import { EditOutlined, DeleteOutlined,SortDescendingOutlined,PlusSquareOutlined,RollbackOutlined  } from '@ant-design/icons';
import { reloadTableFields, removeFields, loadUnattachedTables } from '@/services/platform/bs';
import FieldEditor from './fieldEditor';
import { useHistory } from 'react-router-dom';
import styles from './index.less'
import AffiliateAdd from '../bsmanager/tablemanager/components/Field/affiliateAdd'
import LoadGroup from '../bsmanager/tablemanager/components/Field/loadGroup'
const AddModal = props => {
    const history = useHistory();
    const [allData, setAllData] = useState([]);
    const [tableList, setTableList] = useState([])
    const [tableData, setTableData] = useState([]);
    const [treeLoading, setTreeLoading] = useState(false);
    const [formObj, setFormObj] = useState('');
    const [flag, setFlag] = useState(0); // 弹窗类型
    const [isVisible, setIsVisible] = useState(false); // 弹窗
    const [isType, setIsType] = useState(''); // 弹窗类型
    const [itemData, setItemData] = useState({});
    const [select, setSelect] = useState([])
    const [selectTableName, setSelectTableName] = useState({})
    const [pramFormObj, setPramFormObj] = useState({});
    const [visible, setVisible] = useState(false); // 弹窗
    const [type, setType] = useState(''); // 弹窗类型
    const editor = record => {
        setIsType('edit');
        setIsVisible(true);
        setItemData(record);
    };
    const Submit = prop => {
        setIsVisible(false);
        setFlag(flag + 1);
    };
    const getField = () => {
        loadUnattachedTables().then(res => {
            if (res.data.root && res.data.root.length) {
                setTableList(res.data.root)
            }

        })
    }
    const expandedRowRender = (item) => {
        const columns = [
            {
                title: '字段名',
                dataIndex: 'name',
                key: 'name',
                width: 190,
                align: 'left',
                render: text => <div style={{ paddingLeft: '2rem' }}>{text}</div>,
            },
            {
                title: '别名',
                dataIndex: 'alias',
                key: 'alias',
                align: 'center',
                width: 200,
            },
            {
                title: '字段类型',
                dataIndex: 'storeType',
                key: 'storeType',
                align: 'center',
                width: 200,
            },
            {
                title: '形态',
                dataIndex: 'shape',
                key: 'shape',
                align: 'center',
                width: 200,
            },
            {
                title: '配置',
                dataIndex: 'config',
                key: 'config',
                align: 'center',
                width: 200,
            },

            {
                title: '只读',
                dataIndex: 'readOnly',
                key: 'readOnly',
                align: 'center',
                width: 200,
            },
            {
                title: '同步',
                dataIndex: 'syncEvent',
                key: 'syncEvent',
                align: 'center',
                width: 200,
            },
            {
                title: '操作',
                width: 250,
                ellipsis: true,
                align: 'center',
                render: (text, record) => (
                    <Space>
                        <Tooltip title="修改">
                            <EditOutlined  style={{ fontSize: '16px', color: '#1890FF' }}
                                onClick={() => {
                                    editor(record);
                                }}>
                                编辑
                            </EditOutlined>
                        </Tooltip>
                        <div onClick={e => e.stopPropagation()}>
                            <Popconfirm
                                title="是否删除该字段？"
                                okText="确认"
                                cancelText="取消"
                                onConfirm={() => {
                                    deleteChart(record);
                                }}
                            >
                                <Tooltip title="删除">
                                    <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }}>删除</DeleteOutlined>
                                </Tooltip>
                            </Popconfirm>
                        </div>
                    </Space>
                ),
            },
        ];

        return <Table columns={columns} onRow={record => {
            return {
                onDoubleClick: event => {
                    event.stopPropagation()
                    editor(record);
                },
                onClick: event => {
                    event.stopPropagation()
                    setSelectTableName(record)
                }, // 点击行
            }
        }} bordered rowClassName={setRowClassName} showHeader={false} dataSource={allData[item.type]} pagination={false} />;
    };
    const setRowClassName = (record) =>
        Object.entries(record).toString() === Object.entries(selectTableName).toString() ? styles.clickRowStyle : '';
    const columns = [

        {
            title: '字段名',
            dataIndex: 'type',
            key: 'type',
            align: 'left',
            width: 150,
            render: text => {
                return (<a >{text}(共{allData[text] ? allData[text].length : ''}条)</a>)
            }

        },
        {
            title: '别名',
            dataIndex: 'alias',
            key: 'alias',
            align: 'center',
            width: 200,
        },
        {
            title: '字段类型',
            dataIndex: 'storeType',
            key: 'storeType',
            align: 'center',
            width: 200,
        },
        {
            title: '形态',
            dataIndex: 'shape',
            key: 'shape',
            align: 'center',
            width: 200,
        },
        {
            title: '配置',
            dataIndex: 'config',
            key: 'config',
            align: 'center',
            width: 200,
        },

        {
            title: '只读',
            dataIndex: 'readOnly',
            key: 'readOnly',
            align: 'center',
            width: 200,
        },
        {
            title: '同步',
            dataIndex: 'syncEvent',
            key: 'syncEvent',
            align: 'center',
            width: 200,
        },
        {
            title: '操作',
            width: 250,
            ellipsis: true,
            key: 'title',
            align: 'center',

        },

    ];
    useEffect(() => {
        if (props.match.params.id) {
            setFormObj(props.match.params.id)
            setTreeLoading(true);
            reloadTableFields({
                tableName: props.match.params.id,
            }).then(res => {
                setTreeLoading(false);
                if (res.msg === 'Ok') {
                    let arr = formateArrDataA(res.data.root, 'group')
                    let newArr = []
                    Object.keys(arr).map((item, index) => {
                        newArr.push({ type: item, key: index, id: index })
                    })
                    setAllData(arr);
                    setTableData(newArr);
                    setSelect(newArr)
                }
            });
            getField()
        }
    }, [flag]);
    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 keys in tempObj) {
            let arr = []
            tempObj[keys].map((item, index) => {
                tempObj[keys] = arr;
                item.key = index
                arr.push(item)
            })
        }
        return tempObj
    }
    // 删除表字段
    const deleteChart = record => {
        removeFields({ fieldIDs: record.ID }).then(res => {
            if (res.msg === 'Ok' || res.msg === '') {
                notification.success({
                    message: '提示',
                    duration: 3,
                    description: '删除成功',
                });
                setFlag(flag + 1);
            } else {
                notification.error({
                    message: '提示',
                    duration: 3,
                    description: res.msg,
                });
            }
        });
    };
    // 返回上一级
    const back = () => {
        let template = props.history.location.state.template
        history.push({ pathname: '/platformCenter/bsmanger/tablemanger', state: { template } })
    }
    const onUnfold = (expanded, record) => {
        const data = [...select]
        let index = data.indexOf(record)
        if (expanded) {
            data.push(record)
        } else {
            data.splice(index, 1)
        }
        setSelect(data)
    }
    //附加
    const add = (record) => {
        setPramFormObj(props.history.location.state.template);
        setType('affiliateAdd');
        setVisible(true);
    }
    //分组与排序
    const sort = (record) => {
        setPramFormObj(props.history.location.state.template);
        setType('sort');
        setVisible(true);
    }
    const onSubmit = prop => {
        setVisible(false);
        setFlag(flag + 1)
    };
    return (

        <><Spin tip="loading..." spinning={treeLoading}>
            <div className={styles.containerBox}>
                <div className={styles.config}><div className={styles.title}>{formObj}(字段配置)</div>
                    <div className={styles.btn}>
                        <Button type="primary" icon={<PlusSquareOutlined />} onClick={add}>附加</Button>
                        <Button type="primary" icon={<SortDescendingOutlined /> }onClick={sort}>分组排序</Button>
                        <Button type="primary" icon={<RollbackOutlined />} onClick={back}>返回</Button></div>
                </div>

                <Table
                    columns={columns}
                    dataSource={tableData}
                    expandable={{ expandedRowRender }}
                    size="small"
                    rowKey='id'
                    expandedRowKeys={select.map(item => item.key)} //展开的行
                    expandRowByClick={true}
                    defaultExpandAllRows={true}
                    pagination={false}
                    scroll={{ y: 'calc(100vh - 186px)' }}
                    size="small"
                    onExpand={onUnfold} />
            </div>
        </Spin><FieldEditor
                isVisible={isVisible}
                isType={isType}
                itemData={itemData}
                formObj1={formObj}
                onCancel={() => setIsVisible(false)}
                callBackSubmit={Submit} />
            {visible && type === 'affiliateAdd' && (
                <AffiliateAdd
                    visible={visible}
                    tableList={tableList}
                    type={type}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                    formObj={pramFormObj}
                />
            )}

            {visible && type === 'sort' && (
                <LoadGroup
                    visible={visible}
                    type={type}
                    formObj={pramFormObj}
                    onCancel={() => setVisible(false)}
                    callBackSubmit={onSubmit}
                />
            )}</>

    );
};
export default AddModal;