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="24">
              <a-col :md="12">
                <a-form-item label="型号">
                  <a-select placeholder="选择型号" option-filter-prop="children" show-search :filter-option="filterOption" v-model="queryParam.mdl" @change="changemdl">
                    <a-select-option v-for="item in shipModel" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="12">
                <a-form-item label="舷号">
                  <a-select placeholder="选择舷号" option-filter-prop="children" show-search :filter-option="filterOption" v-model="queryParam.hn" @change="changehn">
                    <a-select-option v-for="item in shipNumber" :value="item">
                      {{ item }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :md="12">
                <a-form-item label="数据类型">
                  <a-select placeholder="选择数据类型"  option-filter-prop="children" @change="getMetaDataTypeTree" v-model="queryParam.schemaMass">
                    <a-select-option v-for="item in dataTypeList" :value="item.cnName">
                      {{ item.cnName }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="12">
                <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);overflow: auto;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'
import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
export default {
    name: "metadata",
    components: {
    },
    data() {
        return {
            loading: false,
            // 查询条件
            tableParams: {
                schemaMass: null,
                tableName: null
            },
            queryParam: {
              mdl:"",
              hn:"",
              schemaMass:"",
              sourceType:1,
              massKey: null
            },
            dataTypeList:[],
            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',
                }
            ],
            dataTypedataSources:[],
            shipModel:[],
            shipNumber:[],
            existingDataTypes:{}
        }
    },
    watch: {
        'queryParam.massKey'(value) {
            this.queryParam.massKey = value
            this.getMetaDataTypeTree()
        }
    },
    mounted() {
    },
    computed: {

    },
    created() {
        this.getselect()
    },
    methods: {
        filterOption(input, option) {
          return (
            option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
          );
        },
        changemdl(value) {
          var number = Object.keys(this.existingDataTypes[value])
          this.shipNumber = []
          number.forEach((element, index) => {
            this.shipNumber.push(element);
          });
          this.dataTypeList =this.existingDataTypes[value][this.shipNumber[0]]
          this.queryParam.mdl = value
          this.queryParam.hn = this.shipNumber[0]
          this.queryParam.schemaMass = this.dataTypeList[0].cnName
          this.getMetaDataTypeTree()
        },
        changehn(value) {
          this.dataTypeList =this.existingDataTypes[this.queryParam.mdl][value]
          this.queryParam.schemaMass = this.dataTypeList[0].cnName
          this.queryParam.hn = value
          this.getMetaDataTypeTree()
        },
        getselect() {
          getAction("/dataType/getExistingDataTypes", {}).then((res) => {
            if (res.success) {
              this.existingDataTypes = res.result.result.original
              var ship = Object.keys(this.existingDataTypes)
              ship.forEach((element, index) => {
                this.shipModel.push(element);
              });
              var number = Object.keys(this.existingDataTypes[this.shipModel[0]])
              number.forEach((element, index) => {
                this.shipNumber.push(element);
              });
              this.dataTypeList =this.existingDataTypes[this.shipModel[0]][this.shipNumber[0]]

              this.queryParam.mdl = this.shipModel[0]
              this.queryParam.hn = this.shipNumber[0]
              this.queryParam.schemaMass = this.dataTypeList[0].cnName
              this.getMetaDataTypeTree()
            } else {
              this.$message.warning(res.message);
            }
          });
        },
        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: childrenNode.tableName,
                                type: 'childern',
                                title: childrenNode.massName
                            })
                        });
                        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.key
                this.tableParams.tableName = info.node.dataRef.key
                this.tableParams.mdl = this.queryParam.mdl
                this.tableParams.hn = this.queryParam.hn
                this.getMetaDatalist()
            }
        },
        getMetaDatalist() {
            metaDatalist(this.tableParams).then(res => {
                if (res.code == 200) {
                    this.dataSource = []
                    this.dataSource = res.result
                }

            })
        }
    }
}
</script>