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="getTables" style="margin-top: 10px; margin-left: 4px;">
            <a-row :gutter="24">
            <a-col :md="10" :sm="1">
                <a-form-item label="关键词">
                    <a-input placeholder="请输入搜索关键词" v-model="queryParam.name"></a-input>
                </a-form-item>
            </a-col>
            <a-col :md="10" :sm="2">
                <a-form-item label="标签类型">
                    <a-select  placeholder="选择标签类型" option-filter-prop="children" size="large" v-model="queryParam.type" style="width: 200px;">
                        <a-select-option v-for="d in dataTypedataSources" :key="d.id">
                        {{ d.cnName }}
                        </a-select-option>
                    </a-select>
                </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="loadData" icon="search">查询</a-button>
                </a-col>
            </span>
            </a-row>
        </a-form>
          <!-- table区域-begin -->
          <div style="height:calc(100vh - 324px);">
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource">
      <!--        :locale="myLocale"-->
  
              <!-- 字符串超长截取省略号显示-->
            </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"> <a-icon type="left" />添加标签 </a-button>
            <div style="height: 50px;"></div>
            <a-button type="primary">移除标签<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="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.name"></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="loadData" icon="search">查询</a-button>
                </a-col>
            </span>
            </a-row>
        </a-form>
          <!-- table区域-begin -->
          <div style="height:calc(100vh - 324px);">
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="endataSource">
      <!--        :locale="myLocale"-->
  
              <!-- 字符串超长截取省略号显示-->
            </a-table>
          </div>
          <div class="linese"></div>
      </a-col>
    </a-row>
    
  </template>
  
  <script>
    import store from '@/store/'
    import {getAction} from '@/api/manage'
    import { 
      dataTypePageList,
      dataTypeDeleteById } from '@/api/dataType'
    export default {
      name: "dataManage",
      components: {
      },
      data () {
        return {
          description: '标准库',
          contentList:[],
          percent:0,
          websock:{},
          queryParam: {
            name :"",
            type:"侦察预警"
          },
          dataTypedataSources: [],
          dataSource:[
            {
              tableName:"LA_DATA_TABLE_0001",
              data1:"舰艇综合导航信息II",
            },
            {
              tableName:"LA_DATA_TABLE_0002",
              data1:"动力报文",
            },
            {
              tableName:"LA_DATA_TABLE_0003",
              data1:"电测试报文",
            },
            {
              tableName:"LA_DATA_TABLE_0004",
              data1:"损管测试报文",
            },
            {
              tableName:"LA_DATA_TABLE_0005",
              data1:"舰炮测试报文",
            },
            {
              tableName:"LA_DATA_TABLE_0006",
              data1:"反潜测试报文",
            },
          ],
          columns: [
            {
              title: '#',
              dataIndex: '',
              key:'id',
              width:60,
              align:"id",
              customRender:function (t,r,index) {
                return parseInt(index)+1;
              }
            },
            {
              title: '表名',
              align:"center",
              dataIndex: 'tableName',
            },
            {
              title: '报文名',
              align:"center",
              dataIndex: 'data1'
            },
          ],
          endataSource:[
            {
              tableName:"LA_DATA_TABLE_0009",
              data1:"舰艇综合导航信息I",
            },
            {
              tableName:"LA_DATA_TABLE_0010",
              data1:"动力报文I",
            },
          ],
        }
      },
      mounted() { 
            this.getselect()
      },
      computed: {
      },
      destroyed: function () { 
      },
      created () {
  
      },
      methods: {
        dataAdd(){
          getAction("/dataSpecial/special").then((res) => {
              if (res.success) {
                  this.$message.success(res.message);
              }
          });
        },
        getselect(){

        },
        getTables(){

        },
      }
    }
  </script>
  <style scoped>
    @import '~@assets/less/common.less';
  </style>