IDCDatasync-vue/src/views/data/metadata.vue

<template>
    <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="30">
                    <a-col :md="20">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                        </span>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :md="6" :sm="8">
                        <a-form-item label="数据类型">
                            <a-select placeholder="选择同步状态" option-filter-prop="children" size="large"
                                v-model="queryParam.schemaMass" @change="handleTypeChange">
                                <a-select-option key="平台">
                                    平台
                                </a-select-option>
                                <a-select-option key="编队">
                                    编队
                                </a-select-option>
                                <a-select-option key="航空兵">
                                    航空兵
                                </a-select-option>
                                <a-select-option key="陆战队">
                                    陆战队
                                </a-select-option>
                                <a-select-option key="作战">
                                    作战
                                </a-select-option>
                                <a-select-option key="反潜">
                                    反潜
                                </a-select-option>
                                <a-select-option key="舰炮">
                                    舰炮
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="8">
                        <a-form-item label="关键词">
                            <a-input placeholder="请输入搜索关键词" v-model="queryParam.massKey"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-row :gutter="30" style="padding: 0 10px;">
            <a-col :md="6">
                <div class="linese"></div>
                <!-- 分类区域 -->
                <div style="height:calc(100vh - 316px);background: #e6e9f1;padding:10px;">
                    <a-tree :tree-data="treeDate" @select="onSelect" />
                </div>
                <div class="linese"></div>
            </a-col>
            <a-col :md="18">
                <div class="linese"></div>
                <!-- 表格区域 -->
                <div style="height:calc(100vh - 316px);background: #e6e9f1;overflow:hidden;padding: 15px;">
                    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
                        :pagination="false" :loading="loading" :scroll="{y: 'calc(100vh - 380px)' }">

                        <!-- 字符串超长截取省略号显示-->
                        <!-- <span slot="name" slot-scope="text">
                            <j-ellipsis :value="text" :length="20" />
                        </span>
                        <span slot="describe" slot-scope="text">
                            <j-ellipsis :value="text" :length="20" />
                        </span> -->
                    </a-table>
                </div>
                <div class="linese"></div>
            </a-col>
        </a-row>
    </a-card>
</template>
<script>
import {metaDataTypeTree, metaDatalist, metaViewDataTypeTree} from '@/api/metaData'
export default {
    name: "metadata",
    components: {
    },
    data() {
        return {
            loading: false,
            // 查询条件
            queryParam: {
                sourceType: 1,
                schemaMass: null,
                massKey: null
            },
            tableParams: {
                schemaMass: null,
                tableName: null
            },
            treeDate: [],
            dataSource: [],
            columns: [
                {
                    title: '序号',
                    dataIndex: 'columnId',
                    width: 60,
                    align: "center",
                },
                {
                    title: '字段名称',
                    align: "center",
                    dataIndex: 'columnName',
                },
                {
                    title: '数据类型',
                    align: "center",
                    dataIndex: 'dataType',
                },
                {
                    title: '数据长度',
                    align: "center",
                    dataIndex: 'dataLength',
                },
                {
                    title: '是否为空',
                    align: "center",
                    dataIndex: 'nullable',
                },
                {
                    title: '默认值',
                    align: "center",
                    dataIndex: 'dataDefault',
                }
            ]
        }
    },
    watch: {
        'queryParam.massKey'(value) {
            this.queryParam.massKey = value
            this.getMetaDataTypeTree()
        }
    },
    mounted() {

    },
    computed: {

    },
    created() {
        this.getMetaDataTypeTree()
    },
    methods: {
        getMetaDataTypeTree() {
          metaViewDataTypeTree(this.queryParam).then(res => {
                if (res.code == 200) {
                    this.treeDate = []
                    var keys = Object.keys(res.result)
                    keys.forEach((element, index) => {
                        const _children = res.result[element]
                        var childrenList = []
                        _children.forEach((childrenNode, chil) => {
                            childrenList.push({
                                key: 'children_' + chil,
                                type: 'childern',
                                title: childrenNode
                            })
                        });
                        this.treeDate.push({
                            key: 'type_' + index,
                            type: 'parentType',
                            title: element,
                            children: childrenList
                        })
                    });
                }
            })
        },
        handleTypeChange(value) {
            this.queryParam.schemaMass = value
            this.getMetaDataTypeTree()
        },
        onSelect(selectedKeys, info) {
            if (info.node.dataRef.type && info.node.dataRef.type == 'childern') {
                this.tableParams.schemaMass = info.node.$parent.dataRef.title
                this.tableParams.tableName = info.node.dataRef.title
                this.getMetaDatalist()
            }
        },
        getMetaDatalist() {
            metaDatalist(this.tableParams).then(res => {
                if (res.code == 200) {
                    this.dataSource = []
                    this.dataSource = res.result
                }

            })
        }
    }
}
</script>