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

<template>
    <a-row>
      <a-col :md="11" style="padding:0 20px;">
        <div class="linese"></div>
        <!-- 查询区域 -->
        <a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px; margin-left: 4px;">
            <a-row :gutter="24">
            <a-col :md="10" :sm="2">
                <a-form-item label="标签类型">
                    <a-select  placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryRefsParam.tagId" style="width: 180px;">
                        <a-select-option v-for="d in datatagSources" :key="d.id">
                        {{ d.tagName  }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :md="10" :sm="1">
                <a-form-item label="关键词">
                    <a-input placeholder="请输入搜索关键词" v-model="queryRefsParam.tableName"></a-input>
                </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="4" :sm="3" >
                    <a-button type="primary"  style="left: 10px" @click="gettagTables" icon="search">查询</a-button>
                </a-col>
            </span>
            </a-row>
        </a-form>
          <!-- table区域-begin -->
          <div style="height:calc(100vh - 324px);">
            <a-table
              ref="tagtable"
              size="middle"
              :loading="tagloading"
              :row-selection="tagrowSelection"
              bordered
              rowKey="id"
              :pagination="false"
              :scroll="{ y: tableScrollY  }"
              :columns="tagcolumns"
              :dataSource="dataRefsSources">
            </a-table>
          </div>
          <div class="linese"></div>
      </a-col>
      <a-col :md="2">
        <div style="padding-top: 100%; padding-left: 15%;">
            <a-button type="primary" @click="addtag"> <a-icon type="left" />添加标签 </a-button>
            <div style="height: 50px;"></div>
            <a-button type="primary" @click="detag">移除标签<a-icon type="right" /> </a-button>
        </div>
      </a-col>
      <a-col :md="11" style="padding:0 20px;">
        <div class="linese"></div>
        <a-form layout="inline" @keyup.enter.native="getalltable" style="margin-top: 10px; margin-left: 4px;">
            <a-row :gutter="24">
            <a-col :md="20" :sm="1">
                <a-form-item label="关键词">
                    <a-input placeholder="请输入搜索关键词" v-model="queryParam.tableName"></a-input>
                </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="4" :sm="3" >
                    <a-button type="primary"  style="left: 10px" @click="getalltable" icon="search">查询</a-button>
                </a-col>
            </span>
            </a-row>
        </a-form>
          <!-- table区域-begin -->
          <div  ref="tableWrapper" style="height:calc(100vh - 324px);">
            <a-table
              ref="table"
              size="middle"
              :row-selection="rowSelection"
              bordered
              :loading="loading"
              :rowKey="getRowKey"
              :pagination="false"
              :scroll="{ y:tableScrollY }"
              :columns="columns"
              :dataSource="dataSource">
            </a-table>
          </div>
          <div class="linese"></div>
      </a-col>
    </a-row>
    
  </template>
  
  <script>
    import store from '@/store/'
    import {getAction} from '@/api/manage'
    import { idcTableTagRef,
    getTableTagRefs,
    getAllTable,
    idcTableTagRefdelete } from '@/api/idcTableTagRef'
    import { idcTableTaglist } from '@/api/tag'
    export default {
      name: "dataManage",
      components: {
      },
      data () {
        return {
          description: '标准库',
          contentList:[],
          percent:0,
          websock:{},
          queryRefsParam: {
            tableName :"",
            tagId:"",
            pageNum :1,
            pageSize:9999999,
          },
          queryParam: {
            tableName :"",
            tagId:"",
            pageNum :1,
            pageSize:9999999,
          },
          datatagSources: [],
          dataRefsSources:[],
          dataSource:[
          ],
          tagloading:false,
          loading:false,
          columns: [
            {
              title: '表名',
              align:"left",
              dataIndex: 'tableName',
            },
            {
              title: '报文名',
              align:"left",
              dataIndex: 'tableMessName'
            },
          ],
          tagcolumns: [
            {
              title: '#',
              dataIndex: '',
              key:'id',
              width:60,
              align:"center",
              customRender:function (t,r,index) {
                return parseInt(index)+1;
              }
            },
            {
              title: '表名',
              align:"left",
              dataIndex: 'tableName',
            },
            {
              title: '报文名',
              align:"left",
              dataIndex: 'tableMessName'
            },
          ],
          tagqueryParam: {
            pageNum :1,
            pageSize:20,
            tagName:""
          },
          selectedRowKeys: [],
          tagselectedRowKeys: [],
          selectedRowData: [],
          tagselectedRowData: [],
          tableScrollY:0,
        }
      },
      mounted() { 
            this.getdatatagSources()
      },
      computed: {
        getRowKey(record) {
           return `${record.schemaName}_${record.tableName}`
        },
        rowSelection() {
          return {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.handleSelectChange,
            preserveSelectedRowKeys: true,  // 保持选中项key
            type: 'checkbox',  // 多选模式
            columnWidth: 60,   // 选择列宽度
            getCheckboxProps: record => ({
              // 可以在这里设置禁用条件
              // disabled: record.disabled  
            })
          }
        },
        tagrowSelection() {
            return {
              selectedRowKeys: this.tagselectedRowKeys,
              onChange: this.taghandleSelectChange,
              preserveSelectedRowKeys: true,  // 保持选中项key
              type: 'checkbox',  // 多选模式
              columnWidth: 60,   // 选择列宽度
              getCheckboxProps: record => ({
                // 可以在这里设置禁用条件
                // disabled: record.disabled  
              })
            }
        }
      },
      destroyed: function () { 
      },
      created () {
  
      },
      methods: {
        updateScrollY() {
          const container = this.$refs.tableWrapper;
          const paginationHeight = 64; // 分页栏高度
          const tableHeaderHeight = 55; // 表头高度
          this.tableScrollY = container.clientHeight - paginationHeight - tableHeaderHeight;
        },
        handleSelectChange(selectedRowKeys,row) {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRowData = row
        },
        taghandleSelectChange(selectedRowKeys,row) {
          this.tagselectedRowKeys = selectedRowKeys
          this.tagselectedRowData = row
        },
        gattable(){
          this.getalltable();
          this.gettagTables();
        },
        getdatatagSources(){
          idcTableTaglist(this.tagqueryParam).then((res) => {
              if (res.success) {
                  this.datatagSources = res.result.records;
                  this.queryRefsParam.tagId = res.result.records[0].id;
                  this.gattable();
              } else {
                  this.$message.warning(res.message);
              }
          });
        },
        dataAdd(){
          getAction("/dataSpecial/special").then((res) => {
              if (res.success) {
                  this.$message.success(res.message);
              }
          });
        },

        addtag(){
          var that = this;
          this.selectedRowData.forEach(item => { 
            idcTableTagRef({
              "tagId": that.queryParam.tagId, 
              "tableName": item.tableName, 
              "schemaName": item.schemaName
            }).then((res) => {
              if (res.success) {
                that.gattable();
              } else {
                that.$message.warning(res.message);
              }
            });
          })
        },
        detag(){
          var that = this;
          this.tagselectedRowKeys.forEach(item => {
            idcTableTagRefdelete({id: item}).then((res) => {
              if (res.success) {
                that.gattable();
              } else {
                that.$message.warning(res.message);
              }
            });
          });
        },
        getalltable(){
          this.queryParam.tagId  = this.queryRefsParam.tagId 
          this.loading = true;
          getAllTable(this.queryParam).then((res) => {
              if (res.success) {
                  this.dataSource = res.result;
              } else {
                  this.$message.warning(res.message);
              }
              this.loading = false;
          });
        },
        gettagTables(){
          this.tagloading = true;
          getTableTagRefs(this.queryRefsParam).then((res) => {
              if (res.success) {
                  this.dataRefsSources = res.result.records;
              } else {
                  this.$message.warning(res.message);
              }
              this.tagloading = false;
          });
        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less';
  </style>