GovernmentDataResourceCenter/web/client/src/sections/metadataManagement/containers/metaModelManagement.js

import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, Tree, Row, Col, Button } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import MetaModelModal from '../components/modelModal'
const TreeNode = Tree.TreeNode;
const DATABASE_TYPE = ['目录', '库', '表', '字段', '主键', '外键', '索引'];
function MetaModelManagement(props) {
    const { loading, clientHeight, actions, dispatch, metaModel } = props;
    const [selectedKeys, setSelectKeys] = useState([DATABASE_TYPE[0]])
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);

    const queryData = (search) => {
        const query = {
            limit: search ? 10 : pageSize || 10,
            page: search ? 1 : currentPage || 1,
            modelType: selectedKeys[0]
        }

        dispatch(actions.metadataManagement.getMetaModelList(query));
    }

    useEffect(() => {
        queryData();
    }, [pageSize, currentPage, selectedKeys]);

    const handleDelete = (id) => {
        dispatch(actions.metadataManagement.deleteMetaModel(id)).then(() => {
            queryData();
        });
    };

    const onFinish = async (values, editData) => {
        if (editData) {
            const dataToSave = { ...values }
            return dispatch(
                actions.metadataManagement.modifyMetaModel(editData.id, dataToSave, values?.msg || ''),
            ).then(() => {
                queryData();
            });
        }

        return dispatch(actions.metadataManagement.addMetaModel({
            modelType: selectedKeys[0],
            ...values,
        })).then(() => {
            queryData();
        });
    };

    const columns = [
        {
            title: '属性名称',
            dataIndex: 'attributeName',
            ellipsis: true,
            search: false,
        },
        {
            title: '属性代码',
            dataIndex: 'attributeCode',
            ellipsis: true,
            search: false,
        },
        {
            title: '数据类型',
            dataIndex: 'dataType',
            ellipsis: true,
            search: false,
        },
        {
            title: '输入控件',
            dataIndex: 'control',
            ellipsis: true,
            search: false,
        },
        {
            title: '长度',
            dataIndex: 'length',
            ellipsis: true,
            search: false,
        },
        {
            title: '允许为空',
            dataIndex: 'nullable',
            ellipsis: true,
            search: false,
            render: (text, record) => record?.nullable ? '是' : '否'
        },
        {
            title: '是否只读',
            dataIndex: 'readOnly',
            ellipsis: true,
            search: false,
            render: (text, record) => record?.readOnly ? '是' : '否'
        },
        {
            title: '描述',
            dataIndex: 'description',
            ellipsis: true,
            search: false,
        },
        {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];
                options.push(<MetaModelModal
                    triggerRender={<a>编辑</a>}
                    editData={record}
                    title="编辑模型"
                    onFinish={onFinish}
                    models={metaModel?.rows || []}
                    key="editModel"
                />)

                options.push(
                    <Popconfirm
                        key="del"
                        placement="top"
                        title="是否确认删除该模型？"
                        onConfirm={() => handleDelete(record.id)}
                        okText="是"
                        cancelText="否"
                    >
                        <a>删除</a>
                    </Popconfirm>)

                return options;

            },
        },
    ];
    return <Spin spinning={loading}>
        <Row>
            <Col style={{ width: 240 }}>
                <Tree
                    height={clientHeight - 95}
                    defaultExpandedKeys={[]}
                    selectedKeys={selectedKeys}
                    onSelect={(keys, e) => {
                        if (e.selected) {
                            setCurrentPage(1);
                            setSelectKeys(keys)
                        }
                    }}
                    defaultExpandAll={true}
                >
                    <TreeNode title={'数据库'} key={'数据库'} selectable={false}>
                        <TreeNode selectable={false} title={'关系型数据库'} key={'关系型数据库'}>
                            {DATABASE_TYPE.map(s => <TreeNode title={s} key={s} />)}
                        </TreeNode>
                    </TreeNode>
                    <TreeNode title={'文件'} key={'文件'} />
                    <TreeNode title={'接口'} key={'接口'} />
                </Tree>
            </Col>
            <Col style={{ width: 'calc(100% - 240px)' }}>
                <ProTable
                    columns={columns}
                    rowKey="id"
                    request={async (param) => {

                    }}
                    dateFormatter="string"
                    search={false}
                    scroll={
                        {
                            scrollToFirstRowOnChange: true,
                            y: clientHeight - 260
                        }
                    }
                    pagination={{
                        size: 'large',
                        total: metaModel?.count,
                        showSizeChanger: true,
                        // showQuickJumper: true,
                        current: currentPage,
                        pageSize: pageSize || 10,
                        pageSizeOptions: [10, 20, 50],
                        showTotal: (total) => {
                            return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                        },
                        onShowSizeChange: (currentPage, pageSize) => {
                            setCurrentPage(currentPage);
                            setPageSize(pageSize);

                        },
                        onChange: (page, pageSize) => {
                            setCurrentPage(page);
                            setPageSize(pageSize);

                        }
                    }}
                    dataSource={metaModel?.rows || []}
                    headerTitle={[
                        <MetaModelModal
                            triggerRender={<Button type='primary'>新建</Button>}
                            title="新建模型"
                            onFinish={onFinish}
                            key="addModel"
                            models={metaModel?.rows || []}
                        />
                    ]}
                    options={false}
                />
            </Col>
        </Row>
    </Spin>

}

function mapStateToProps(state) {
    const {
        auth, global, metaModel
    } = state;
    return {
        loading: metaModel.isRequesting,
        clientHeight: global.clientHeight,
        actions: global.actions,
        metaModel: metaModel?.data || {}
    };
}

export default connect(mapStateToProps)(MetaModelManagement);