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

<template>
    <a-row :gutter="30">
      <a-col :md="11" :sm="1" >
        <!-- 查询区域 -->
        <a-form layout="inline" @keyup.enter.native="getTables" style="margin-top: 10px; margin-left: 4px;">
            <a-row :gutter="24">
            <a-col :md="10" :sm="1">
              <a-form-item label="标签类型">
                    <a-select  placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryRefsParam.tagId" style="width: 200px;">
                        <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="2">
              <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:900px;overflow-y:auto;">
            <a-table
              ref="tagtable"
              size="middle"
              :row-selection="tagrowSelection"
              bordered
              rowKey="id"
              :pagination="false"
              :scroll="{ y: 800 }"
              :columns="tagcolumns"
              :dataSource="dataRefsSources">
      <!--        :locale="myLocale"-->
  
              <!-- 字符串超长截取省略号显示-->
            </a-table>
          </div>
      </a-col>
      <a-col :md="2" :sm="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" :sm="3" >
        <a-form layout="inline" @keyup.enter.native="getTables" 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 style="height:900px;overflow-y:auto;">
            <a-table
              ref="table"
              size="middle"
              :row-selection="rowSelection"
              bordered
              :rowKey="getRowKey"
              :pagination="false"
              :scroll="{ y: 800 }"
              :columns="columns"
              :dataSource="dataSource">
      <!--        :locale="myLocale"-->
  
              <!-- 字符串超长截取省略号显示-->
            </a-table>
          </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'
import get from 'lodash.get'
    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:[
          ],
          columns: [
            {
              title: '表名',
              align:"center",
              dataIndex: 'tableName',
            },
            {
              title: '报文名',
              align:"center",
              dataIndex: 'tableMessName'
            },
          ],
          tagcolumns: [
            {
              title: '#',
              dataIndex: '',
              key:'id',
              width:60,
              align:"center",
              customRender:function (t,r,index) {
                return parseInt(index)+1;
              }
            },
            {
              title: '表名',
              align:"center",
              dataIndex: 'tableName',
            },
            {
              title: '报文名',
              align:"center",
              dataIndex: 'tableMessName'
            },
          ],
          tagqueryParam: {
            pageNum :1,
            pageSize:20,
            tagName:""
          },
          selectedRowKeys: [],
          tagselectedRowKeys: [],
        }
      },
      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: {
        handleSelectChange(selectedRowKeys,row) {
          this.selectedRowKeys = selectedRowKeys
          console.log(row);
        },
        taghandleSelectChange(selectedRowKeys) {
          this.tagselectedRowKeys = selectedRowKeys
        },
        getdatatagSources(){
          idcTableTaglist(this.tagqueryParam).then((res) => {
              if (res.success) {
                  this.datatagSources = res.result.records;
                  this.queryRefsParam.tagId = res.result.records[0].id;
                  this.getalltable();
                  this.gettagTables();
              } else {
                  this.$message.warning(res.message);
              }
          });
        },
        dataAdd(){
          getAction("/dataSpecial/special").then((res) => {
              if (res.success) {
                  this.$message.success(res.message);
              }
          });
        },
        addtag(){

        },
        detag(){
          
        },
        getalltable(){
          this.queryParam.tagId  = this.queryRefsParam.tagId 
          getAllTable(this.queryParam).then((res) => {
              if (res.success) {
                  this.dataSource = res.result;
              } else {
                  this.$message.warning(res.message);
              }
          });
        },
        gettagTables(){
          getTableTagRefs(this.queryRefsParam).then((res) => {
              if (res.success) {
                  this.dataRefsSources = res.result.records;
              } else {
                  this.$message.warning(res.message);
              }
          });
        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less';
    /deep/.ant-checkbox-inner {
      border: 1px solid #000 !important;
    }
    /deep/.ant-checkbox-checked .ant-checkbox-inner {
      background-color: #fff !important; /* 将背景颜色修改为白色 */
      border-color: #000 !important; /* 将边框颜色修改为黑色 */
    }
    /deep/.ant-checkbox-checked .ant-checkbox-inner::after {
      border-bottom: 2px solid #000;
      border-right: 2px solid #000;
    }
  </style>