296 lines
8.8 KiB
Vue
296 lines
8.8 KiB
Vue
<template>
|
|
<a-row>
|
|
<a-col :md="11">
|
|
<div class="linese"></div>
|
|
<!-- 查询区域 -->
|
|
<a-form layout="inline" @keyup.enter.native="gettagTables" style="margin-top: 10px;padding:10px; background: #e6e9f1;">
|
|
<a-row>
|
|
<a-col :span="10">
|
|
<a-form-item label="标签类型" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
|
|
<a-select placeholder="选择标签类型" option-filter-prop="children" v-model="queryRefsParam.tagId">
|
|
<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 :span="10">
|
|
<a-form-item label="关键词" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
|
|
<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" @click="gettagTables" icon="search">查询</a-button>
|
|
</a-col>
|
|
</span>
|
|
</a-row>
|
|
</a-form>
|
|
<!-- table区域-begin -->
|
|
<div style="height:calc(100vh - 360px);background: #e6e9f1;">
|
|
<a-table ref="tagtable" size="middle" :loading="tagloading" :row-selection="tagrowSelection" bordered rowKey="id" :pagination="false" :scroll="{ x: false, 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;padding:10px; background: #e6e9f1;">
|
|
<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="tableContainer" style="height:calc(100vh - 360px);background: #e6e9f1;">
|
|
<a-table ref="table" size="middle" :row-selection="rowSelection" bordered :loading="loading" :rowKey="getRowKey" :pagination="false" :scroll="{ x: false, 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",
|
|
width: 220,
|
|
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",
|
|
width: 220,
|
|
dataIndex: 'tableName',
|
|
},
|
|
{
|
|
title: '报文名',
|
|
align: "left",
|
|
dataIndex: 'tableMessName'
|
|
},
|
|
],
|
|
tagqueryParam: {
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
tagName: ""
|
|
},
|
|
selectedRowKeys: [],
|
|
tagselectedRowKeys: [],
|
|
selectedRowData: [],
|
|
tagselectedRowData: [],
|
|
tableScrollY: 0,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getdatatagSources()
|
|
this.calculateScrollY();
|
|
},
|
|
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: {
|
|
calculateScrollY() {
|
|
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
|
const container = this.$refs.tableContainer;
|
|
const paginationHeight = 64; // 根据实际分页栏高度调整
|
|
this.tableScrollY = container.clientHeight - paginationHeight;
|
|
},
|
|
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);
|
|
}
|
|
});
|
|
})
|
|
this.selectedRowData = [];
|
|
this.selectedRowKeys = [];
|
|
},
|
|
detag() {
|
|
var that = this;
|
|
this.tagselectedRowKeys.forEach(item => {
|
|
idcTableTagRefdelete({ id: item }).then((res) => {
|
|
if (res.success) {
|
|
that.gattable();
|
|
} else {
|
|
that.$message.warning(res.message);
|
|
}
|
|
});
|
|
});
|
|
this.tagselectedRowKeys = [];
|
|
this.tagselectedRowData = [];
|
|
},
|
|
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>
|
|
/deep/ .ant-table-bordered .ant-table-header>table {
|
|
border: none !important;
|
|
}
|
|
</style> |