更改数据检索界面，对接接口
This commit is contained in:
wangchengming
parent
efdc3ee43e
commit
23332e9dfd
|
|
@ -2,8 +2,10 @@ import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
|
||||||
|
|
||||||
const metaDataTypeTree = (params)=>getAction("/dataManager/getAllTable",params);
|
const metaDataTypeTree = (params)=>getAction("/dataManager/getAllTable",params);
|
||||||
const metaDatalist = (params)=>getAction("/dataManager/getTableColumns",params);
|
const metaDatalist = (params)=>getAction("/dataManager/getTableColumns",params);
|
||||||
|
const tableDataList = (params)=>getAction("/dataManager/getTableData",params);
|
||||||
|
|
||||||
export {
|
export {
|
||||||
metaDataTypeTree,
|
metaDataTypeTree,
|
||||||
metaDatalist
|
metaDatalist,
|
||||||
|
tableDataList
|
||||||
}
|
}
|
||||||
|
|
@ -1,425 +1,204 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<a-card :bordered="false">
|
||||||
<div class="table-page-search-wrapper" style="background: #e6e9f1;padding:10px;">
|
<!-- 查询区域 -->
|
||||||
<a-select placeholder="选择数据类型" v-model="datatypequeryParam.schemaName">
|
<div class="table-page-search-wrapper">
|
||||||
<a-select-option key="1">
|
<a-form layout="inline">
|
||||||
{{ d.cnName }}
|
<a-row :gutter="30">
|
||||||
</a-select-option>
|
<a-col :md="20">
|
||||||
<a-select-option key="2">
|
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
|
||||||
{{ d.cnName }}
|
</span>
|
||||||
</a-select-option>
|
</a-col>
|
||||||
<a-select-option key="3">
|
</a-row>
|
||||||
{{ d.cnName }}
|
<a-row :gutter="24">
|
||||||
</a-select-option>
|
<a-col :md="6" :sm="8">
|
||||||
</a-select>
|
<a-form-item label="数据类型">
|
||||||
<!-- <a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
<a-select placeholder="选择同步状态" option-filter-prop="children" size="large" v-model="queryParam.schemaMass"
|
||||||
<a-select-option v-for="d in dataTypedataSources" :key="d.enName">
|
@change="handleTypeChange">
|
||||||
{{ d.cnName }}
|
<a-select-option key="平台">
|
||||||
</a-select-option>
|
平台
|
||||||
</a-select> -->
|
</a-select-option>
|
||||||
</div>
|
<a-select-option key="编队">
|
||||||
<a-row>
|
编队
|
||||||
<a-col :span="6">
|
</a-select-option>
|
||||||
<div class="flodContent">
|
<a-select-option key="航空兵">
|
||||||
<div class="linese"></div>
|
航空兵
|
||||||
<div class="siderHeader echartsTitle">
|
</a-select-option>
|
||||||
<div class="ecicon"></div>
|
<a-select-option key="陆战队">
|
||||||
数据检索
|
陆战队
|
||||||
<!-- <a-button type="primary" style="margin-left: 21px;float: right;" @click="searchgetFileList">添加</a-button> -->
|
</a-select-option>
|
||||||
</div>
|
<a-select-option key="作战">
|
||||||
<a-dropdown>
|
作战
|
||||||
<a-directory-tree
|
</a-select-option>
|
||||||
:tree-data="treeData"
|
<a-select-option key="反潜">
|
||||||
v-model:expandedKeys="expandedKeys"
|
反潜
|
||||||
class="teeediv"
|
</a-select-option>
|
||||||
v-model:selectedKeys="selectedKeys"
|
<a-select-option key="舰炮">
|
||||||
@select="changeSelect"
|
舰炮
|
||||||
>
|
</a-select-option>
|
||||||
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id" :title="itemNode.title" :value="itemNode">
|
</a-select>
|
||||||
</a-tree-node>
|
</a-form-item>
|
||||||
</a-directory-tree>
|
</a-col>
|
||||||
</a-dropdown>
|
<a-col :md="6" :sm="8">
|
||||||
<div class="linese"></div>
|
<a-form-item label="关键词">
|
||||||
</div>
|
<a-input placeholder="请输入搜索关键词" v-model="queryParam.massKey"></a-input>
|
||||||
</a-col>
|
</a-form-item>
|
||||||
<a-col :span="18">
|
</a-col>
|
||||||
<div class="righttop">
|
</a-row>
|
||||||
<div class="linese"></div>
|
</a-form>
|
||||||
<div class="rtable" ref="tableContainer">
|
</div>
|
||||||
<a-table
|
|
||||||
ref="table"
|
<a-row :gutter="30" style="padding: 0 10px;">
|
||||||
bordered
|
<a-col :md="6">
|
||||||
size="middle"
|
<div class="linese"></div>
|
||||||
rowKey="id"
|
<!-- 分类区域 -->
|
||||||
:columns="columns"
|
<div style="height:calc(100vh - 300px);background: #e6e9f1;padding:10px;">
|
||||||
class="fileTable"
|
<a-tree :tree-data="treeDate" @select="onSelect" />
|
||||||
:pagination="false"
|
</div>
|
||||||
:scroll="{ x:false,y:tableScrollY }"
|
<div class="linese"></div>
|
||||||
:dataSource="dataSource"
|
</a-col>
|
||||||
:loading="loading"
|
<a-col :md="18">
|
||||||
@change="handleTableChange"
|
<div class="linese"></div>
|
||||||
>
|
<!-- 表格区域 -->
|
||||||
<span slot="action" slot-scope="text, record">
|
<div style="height:calc(100vh - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
|
||||||
<a @click="download(record, $event)">下载</a> <a @click="viewFile(record, $event)">预览</a>
|
<a-table size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
|
||||||
<a @click="DeleteFile(record, $event)">删除</a>
|
:pagination="pagination" :scroll="{ x: 1200, y: 'calc(100vh - 450px)' }" rowKey="序号"
|
||||||
</span>
|
@change="handleTableChange"></a-table>
|
||||||
</a-table>
|
</div>
|
||||||
</div>
|
<div class="linese"></div>
|
||||||
<div class="linese"></div>
|
</a-col>
|
||||||
</div>
|
</a-row>
|
||||||
</a-col>
|
</a-card>
|
||||||
</a-row>
|
|
||||||
<a-modal v-model="isopen" :title="modalTitle" ok-text="确认" cancel-text="取消" @ok="hideModal">
|
|
||||||
<a-input placeholder="请输入" v-model="dirName" style="color: #000000 !important"></a-input>
|
|
||||||
</a-modal>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import guaz from '@assets/guaz.png'
|
import { metaDataTypeTree, tableDataList } from '@/api/metaData'
|
||||||
import { getDataManagerInfo,
|
|
||||||
getAllSchemaName,
|
|
||||||
getAllTable,
|
|
||||||
getTableData,
|
|
||||||
getTableColumns,
|
|
||||||
getTableIndexes,
|
|
||||||
updateIndexSafe,
|
|
||||||
dropIndex,
|
|
||||||
DmExportTool,
|
|
||||||
getExportLog } from '@/api/dataManage'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'dataSearch',
|
name: "metadata",
|
||||||
components: {
|
components: {
|
||||||
uploadModal,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
dirName: '',
|
|
||||||
guaz,
|
|
||||||
expandedKeys: [],
|
|
||||||
selectedKeys: [],
|
|
||||||
treeData: [],
|
|
||||||
isopen: false,
|
|
||||||
tableScrollY: 0,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
width: 70,
|
|
||||||
customRender: (text, record, index) => `${index + 1}`,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '文件名称',
|
|
||||||
align: 'center',
|
|
||||||
dataIndex: 'fileName',
|
|
||||||
width: 120,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '文件后缀',
|
|
||||||
align: 'center',
|
|
||||||
width: 100,
|
|
||||||
dataIndex: 'fileSuffix',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '文件大小',
|
|
||||||
align: 'center',
|
|
||||||
width: 120,
|
|
||||||
dataIndex: 'fileSize',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
title: '文件类型',
|
|
||||||
align: 'center',
|
|
||||||
width: 80,
|
|
||||||
dataIndex: 'fileTypeName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '创建人',
|
|
||||||
align: 'center',
|
|
||||||
width: 100,
|
|
||||||
dataIndex: 'createByName',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'action',
|
|
||||||
scopedSlots: { customRender: 'action' },
|
|
||||||
align: 'center',
|
|
||||||
width: 170,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
dataSource: [],
|
|
||||||
loading: false,
|
loading: false,
|
||||||
selectedRowKeys: [],
|
// 查询条件
|
||||||
selectId: '',
|
queryParam: {
|
||||||
modalTitle: '',
|
sourceType: 1,
|
||||||
modelType: '',
|
schemaMass: null,
|
||||||
searchFile: {
|
massKey: null
|
||||||
dirId: '',
|
|
||||||
queryCondition: '',
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 9999999,
|
|
||||||
},
|
},
|
||||||
fileNum: {
|
pagination: {
|
||||||
document: 0,
|
defaultCurrent: 1, // 默认当前页数
|
||||||
pictures: 0,
|
defaultPageSize: 10, // 默认当前页显示数据的大小total: 0, // 总数，必须先有
|
||||||
video: 0,
|
showSizeChanger: true,
|
||||||
dbfile: 0,
|
showQuickJumper: false,
|
||||||
audio: 0,
|
pageSizeOptions: ['10', '20', '30'],
|
||||||
total: 0,
|
showTotal: total => `总共 ${total} 个项目`, // 显示总数
|
||||||
|
onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
|
||||||
},
|
},
|
||||||
|
tableParams: {
|
||||||
|
schemaMass: null,
|
||||||
|
tableName: null,
|
||||||
|
pageSize: 10,
|
||||||
|
pageNum: 1
|
||||||
|
},
|
||||||
|
treeDate: [],
|
||||||
|
dataSource: [],
|
||||||
|
columns: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
watch: {
|
||||||
// this.getDirList()
|
'queryParam.massKey'(value) {
|
||||||
// this.getcountFileNum()
|
this.queryParam.massKey = value
|
||||||
// this.calculateScrollY();
|
this.getMetaDataTypeTree()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getMetaDataTypeTree()
|
||||||
},
|
},
|
||||||
computed: {},
|
|
||||||
methods: {
|
methods: {
|
||||||
calculateScrollY() {
|
getMetaDataTypeTree() {
|
||||||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
metaDataTypeTree(this.queryParam).then(res => {
|
||||||
const container = this.$refs.tableContainer;
|
if (res.code == 200) {
|
||||||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
this.treeDate = []
|
||||||
this.tableScrollY = container.clientHeight - paginationHeight;
|
var keys = Object.keys(res.result)
|
||||||
},
|
keys.forEach((element, index) => {
|
||||||
clickfile() {
|
const _children = res.result[element]
|
||||||
if (this.selectId.length <= 0) {
|
var childrenList = []
|
||||||
this.$message.warning('必须选择文件上传目录')
|
_children.forEach((childrenNode, chil) => {
|
||||||
return
|
childrenList.push({
|
||||||
}
|
key: 'children_' + chil,
|
||||||
console.log('dirid=' + this.searchFile.dirId)
|
type: 'childern',
|
||||||
this.$refs.modalForm.title = '文件上传'
|
title: childrenNode
|
||||||
this.$refs.modalForm.dirId = this.searchFile.dirId
|
})
|
||||||
this.$refs.modalForm.add()
|
});
|
||||||
},
|
this.treeDate.push({
|
||||||
getcountFileNum() {
|
key: 'type_' + index,
|
||||||
var that = this
|
type: 'parentType',
|
||||||
countFileNum({}).then((res) => {
|
title: element,
|
||||||
if (res.success) {
|
children: childrenList
|
||||||
res.result.forEach((item, index) => {
|
})
|
||||||
that.setcountFileNum(item)
|
});
|
||||||
})
|
|
||||||
} else {
|
|
||||||
this.$message.warning(res.message)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
setcountFileNum(item) {
|
handleTypeChange(value) {
|
||||||
switch (item.FILETYPE) {
|
this.queryParam.schemaMass = value
|
||||||
case 'document':
|
this.getMetaDataTypeTree()
|
||||||
this.fileNum.document = item.NUMS
|
},
|
||||||
break
|
onSelect(selectedKeys, info) {
|
||||||
case 'pictures':
|
if (info.node.dataRef.type && info.node.dataRef.type == 'childern') {
|
||||||
this.fileNum.pictures = item.NUMS
|
this.tableParams.schemaMass = info.node.$parent.dataRef.title
|
||||||
break
|
this.tableParams.tableName = info.node.dataRef.title
|
||||||
case 'video':
|
this.getTableDataList()
|
||||||
this.fileNum.video = item.NUMS
|
|
||||||
break
|
|
||||||
case 'dbfile':
|
|
||||||
this.fileNum.dbfile = item.NUMS
|
|
||||||
break
|
|
||||||
case 'audio':
|
|
||||||
this.fileNum.audio = item.NUMS
|
|
||||||
break
|
|
||||||
case 'total':
|
|
||||||
this.fileNum.total = item.NUMS
|
|
||||||
break
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
download(item) {
|
handleTableChange (pagination, filters, sorter) {
|
||||||
let apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
|
this.pagination = pagination
|
||||||
window.open(apiBaseUrl + '/file/downloadFile?fileId=' + item.id)
|
this.tableParams.pageNum = pagination.current - 1
|
||||||
|
this.tableParams.pageSize = pagination.pageSize
|
||||||
|
this.getTableDataList()
|
||||||
},
|
},
|
||||||
viewFile(item) {
|
// //筛选需要重写handleTableChange
|
||||||
filePreview({ fileId: item.id }).then((res) => {
|
// handleTableChange(pagination, filters, sorter) {
|
||||||
if (res.success) {
|
// //分页、排序、筛选变化时触发
|
||||||
window.open('http://' + res.result, '_blank')
|
// //TODO 筛选
|
||||||
} else {
|
// if (Object.keys(sorter).length > 0) {
|
||||||
this.$message.warning(res.message)
|
// this.isorter.column = sorter.field;
|
||||||
}
|
// this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||||
})
|
// }
|
||||||
},
|
// this.pagination = pagination;
|
||||||
DeleteFile(item) {
|
// this.getTableDataList();
|
||||||
var that = this
|
// },
|
||||||
that.$confirm({
|
getTableDataList() {
|
||||||
title: '确认删除',
|
tableDataList(this.tableParams).then(res => {
|
||||||
content: '是否删除选中文件?',
|
if (res.code == 200) {
|
||||||
onOk: function () {
|
// this.dataSource = []
|
||||||
logicDeleteFile({ id: item.id }).then((res) => {
|
// this.dataSource = res.result
|
||||||
that.$message.warning(res.message)
|
// if (res.result.total) {
|
||||||
that.searchgetFileList()
|
// this.ipagination.total = res.result.total;
|
||||||
|
// }
|
||||||
|
this.columns = []
|
||||||
|
res.result.columnNames.forEach(columns => {
|
||||||
|
this.columns.push({
|
||||||
|
title: columns,
|
||||||
|
dataIndex: columns,
|
||||||
|
ellipsis: true,
|
||||||
|
width: 180
|
||||||
|
})
|
||||||
})
|
})
|
||||||
},
|
|
||||||
})
|
const pagination = { ...this.pagination }
|
||||||
},
|
pagination.total = res.result.total
|
||||||
onSelectChange(selectedRowKeys, selectedRows) {
|
|
||||||
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
|
|
||||||
},
|
|
||||||
handleTableChange() {},
|
|
||||||
reloadFileList() {
|
|
||||||
this.searchFile.queryCondition = ''
|
|
||||||
this.searchFile.pageNum = 1
|
|
||||||
this.searchFile.pageSize = 10
|
|
||||||
this.getFileList()
|
|
||||||
},
|
|
||||||
searchgetFileList() {
|
|
||||||
this.searchFile.dirId = this.selectId
|
|
||||||
this.getFileList()
|
|
||||||
},
|
|
||||||
getFileList() {
|
|
||||||
if (this.selectId.length <= 0) {
|
|
||||||
this.$message.warning('必须选择查询目录')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
pageList(this.searchFile).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
this.dataSource = res.result.rows
|
this.dataSource = res.result.rows
|
||||||
} else {
|
this.pagination = pagination
|
||||||
this.$message.warning(res.message)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
},
|
}
|
||||||
hideModal() {
|
}
|
||||||
this.isopen = false
|
|
||||||
switch (this.modelType) {
|
|
||||||
case 'create':
|
|
||||||
createDir({ pid: this.selectId, dirName: this.dirName }).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
this.treeData = res.result
|
|
||||||
this.getDirList()
|
|
||||||
} else {
|
|
||||||
this.$message.warning(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
break
|
|
||||||
case 'rename':
|
|
||||||
renameDir({ id: this.selectId, dirName: this.dirName }).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
this.treeData = res.result
|
|
||||||
this.getDirList()
|
|
||||||
} else {
|
|
||||||
this.$message.warning(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getDirList() {
|
|
||||||
dirtreeList({ dirName: '' }).then((res) => {
|
|
||||||
if (res.success) {
|
|
||||||
this.treeData = res.result
|
|
||||||
} else {
|
|
||||||
this.$message.warning(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
menuClick(value) {
|
|
||||||
switch (value.key) {
|
|
||||||
case '1':
|
|
||||||
this.createDir()
|
|
||||||
break
|
|
||||||
case '2':
|
|
||||||
this.renameDir()
|
|
||||||
break
|
|
||||||
case '3':
|
|
||||||
this.logicDelDir()
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
createDir() {
|
|
||||||
this.modalTitle = '添加节点'
|
|
||||||
this.isopen = true
|
|
||||||
this.modelType = 'create'
|
|
||||||
this.dirName = ''
|
|
||||||
},
|
|
||||||
logicDelDir() {
|
|
||||||
var that = this
|
|
||||||
this.$confirm({
|
|
||||||
title: '确认删除',
|
|
||||||
content: '是否删除选中目录?',
|
|
||||||
onOk: function () {
|
|
||||||
logicDelDir({ id: that.selectId }).then((res) => {
|
|
||||||
that.$message.warning(res.message)
|
|
||||||
that.getDirList()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
renameDir() {
|
|
||||||
this.modalTitle = '重命名节点'
|
|
||||||
this.isopen = true
|
|
||||||
this.modelType = 'rename'
|
|
||||||
this.dirName = ''
|
|
||||||
},
|
|
||||||
changeSelect(selectedKeys, e) {
|
|
||||||
this.selectId = e.node.dataRef.id
|
|
||||||
this.searchFile.dirId = this.selectId
|
|
||||||
this.searchgetFileList()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/deep/ .ant-table-bordered .ant-table-header > table {
|
|
||||||
border: none !important;
|
|
||||||
}
|
|
||||||
.menu {
|
|
||||||
background: #ffffff !important;
|
|
||||||
}
|
|
||||||
.filecontent {
|
|
||||||
height: calc(100vh - 48px);
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flodContent {
|
|
||||||
height: calc(100vh - 240px);
|
|
||||||
overflow-y: auto;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
.siderHeader {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.teeediv {
|
|
||||||
height: calc(100vh - 320px);
|
|
||||||
background: #e6e9f1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.righttop {
|
|
||||||
height: calc(100vh - 240px);
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.righttop .search{
|
|
||||||
height: 58px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quarter-div {
|
|
||||||
height: 130px;
|
|
||||||
float: left;
|
|
||||||
margin-right: 20px;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 16px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px 0;
|
|
||||||
background:#092776;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quarter-div .ant-col-11 {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
.quarter-div div {
|
|
||||||
text-align: left;
|
|
||||||
padding-left: 14px;
|
|
||||||
}
|
|
||||||
.quarter-div .datanum {
|
|
||||||
padding-top: 12px;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.quarter-div .dataText {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
.rtable {
|
|
||||||
height: calc(100vh - 516px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue
Block a user