IDCDatasync-vue/src/views/data/dataIndexing.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" v-model="queryParam.schemaMass" @change="handleTypeChange">
                <a-select-option v-for="d in dataTypedataSources" :key="d.cnName">
                  {{ d.cnName }}
                </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-col :md="6" :sm="8">
            <a-button type="primary" @click="handleAdd" icon="plus" style="margin-left: 8px;left: 10px">添加</a-button>
          </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 size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
            :pagination="false" :scroll="{ y: 'calc(100vh - 380px)' }" rowKey="id">
            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="Delete(record, $event)">删除</a>
            </span>
          </a-table>
        </div>
        <div class="linese"></div>
      </a-col>
    </a-row>
    <dataIndexingModal ref="modalForm" @ok="getTableIndexList"></dataIndexingModal>
  </a-card>
</template>
<script>
import { metaDataTypeTree, tableIndexes } from '@/api/metaData'
import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
import dataIndexingModal from './modules/dataIndexingModal'

export default {
  name: "dataIndexing",
  components: {
    dataIndexingModal
  },
  data() {
    return {
      loading: false,
      // 查询条件
      queryParam: {
        sourceType: 1,
        schemaMass: null,
        massKey: null
      },
      tableParams: {
        schemaMass: null,
        tableName: null,
      },
      treeDate: [],
      dataSource: [],
      columns: [
        {
          title: '序号',
          width: 70,
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '索引名称',
          align: "center",
          dataIndex: 'indexName',
        },
        {
          title: '字段',
          align: "center",
          dataIndex: 'columnName',
        },
        {
          title: '索引类型',
          align: "center",
          dataIndex: 'indexType',
        },
        {
          title: '是否唯一',
          align: "center",
          dataIndex: 'uniqueness',
        },
        {
          title: '列在索引中的位置',
          align: "center",
          dataIndex: 'columnPosition',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          width: 260,
          scopedSlots: { customRender: 'action' },
        }
      ],
      dataTypedataSources:[]
    }
  },
  watch: {
    'queryParam.massKey'(value) {
      this.queryParam.massKey = value
      this.getMetaDataTypeTree()
    }
  },
  mounted() {

  },
  computed: {
    
  },
  created() {
    this.getselect();
  },
  methods: {
    getselect(){
      getAction("/dataType/getExistingDataTypes", {}).then((res) => {
        if (res.success) {
          this.dataTypedataSources = res.result.result.DATA_CONN_STANDARD
          if(res.result.result.DATA_CONN_STANDARD.length > 0){
            this.queryParam.schemaMass = res.result.result.DATA_CONN_STANDARD[0].cnName
          }
          this.getMetaDataTypeTree();
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    handleAdd(){
      if(this.tableParams.schemaMass == null || this.tableParams.tableName == null){
        this.$message.warning("请先选择表信息");
        return;
      }
      this.$refs.modalForm.add();
      this.$refs.modalForm.schemaMass = this.tableParams.schemaMass;
      this.$refs.modalForm.tableName= this.tableParams.tableName;
    },
    handleEdit(record){
      if(this.tableParams.schemaMass == null || this.tableParams.tableName == null){
        this.$message.warning("请先选择表信息");
        return;
      }
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.schemaMass = this.tableParams.schemaMass;
      this.$refs.modalForm.tableName= this.tableParams.tableName;
    },
    Delete(item) {
      var that = this
      that.$confirm({
        title: '确认删除',
        content: '是否删除选中索引?',
        onOk: function () {
          postAction("/tableIndex/dropIndex?schemaMass="+that.tableParams.schemaMass+"&tableName="+that.tableParams.tableName+"&indexName="+item.indexName+"&columns="+item.columnName+"&indexTypeCode="+item.indexType,{}).then(res => {
            if (res.success) {
              that.$message.success(res.message);
              that.getTableIndexList();
            } else {
              that.$message.warning(res.message);
            }
          })
        },
      })
    },
    getMetaDataTypeTree() {
      metaDataTypeTree(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.getTableIndexList()
      }
    },
    getTableIndexList() {
      tableIndexes(this.tableParams).then(res => {
        if (res.code == 200) {
          this.dataSource = res.result
        }

      })
    }
  }
}
</script>