IDCDatasync-vue/src/views/data/dataCataloguing.vue
2025-03-08 12:53:29 +08:00

312 lines
10 KiB
Vue

<template>
<a-row :gutter="30">
<a-col :md="11" :sm="1" >
<!-- 查询区域 -->
<a-form layout="inline" @keyup.enter.native="gettagTables" 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" @change="gattable" 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"
:loading="tagloading"
: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="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 style="height:900px;overflow-y:auto;">
<a-table
ref="table"
size="middle"
:row-selection="rowSelection"
bordered
:loading="loading"
: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:[
],
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: [],
}
},
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
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';
/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>