更改数据检索界面，对接接口
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 metaDatalist = (params)=>getAction("/dataManager/getTableColumns",params);
|
||||
const tableDataList = (params)=>getAction("/dataManager/getTableData",params);
|
||||
|
||||
export {
|
||||
metaDataTypeTree,
|
||||
metaDatalist
|
||||
metaDatalist,
|
||||
tableDataList
|
||||
}
|
||||
|
|
@ -1,425 +1,204 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table-page-search-wrapper" style="background: #e6e9f1;padding:10px;">
|
||||
<a-select placeholder="选择数据类型" v-model="datatypequeryParam.schemaName">
|
||||
<a-select-option key="1">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
<a-select-option key="2">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
<a-select-option key="3">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<!-- <a-select placeholder="选择数据类型" option-filter-prop="children" v-model="datatypequeryParam.schemaName" @change="getTables" style="width: 40%;">
|
||||
<a-select-option v-for="d in dataTypedataSources" :key="d.enName">
|
||||
{{ d.cnName }}
|
||||
</a-select-option>
|
||||
</a-select> -->
|
||||
</div>
|
||||
<a-row>
|
||||
<a-col :span="6">
|
||||
<div class="flodContent">
|
||||
<div class="linese"></div>
|
||||
<div class="siderHeader echartsTitle">
|
||||
<div class="ecicon"></div>
|
||||
数据检索
|
||||
<!-- <a-button type="primary" style="margin-left: 21px;float: right;" @click="searchgetFileList">添加</a-button> -->
|
||||
</div>
|
||||
<a-dropdown>
|
||||
<a-directory-tree
|
||||
:tree-data="treeData"
|
||||
v-model:expandedKeys="expandedKeys"
|
||||
class="teeediv"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
@select="changeSelect"
|
||||
>
|
||||
<a-tree-node v-for="itemNode in treeData" :key="itemNode.id" :title="itemNode.title" :value="itemNode">
|
||||
</a-tree-node>
|
||||
</a-directory-tree>
|
||||
</a-dropdown>
|
||||
<div class="linese"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="righttop">
|
||||
<div class="linese"></div>
|
||||
<div class="rtable" ref="tableContainer">
|
||||
<a-table
|
||||
ref="table"
|
||||
bordered
|
||||
size="middle"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
class="fileTable"
|
||||
:pagination="false"
|
||||
:scroll="{ x:false,y:tableScrollY }"
|
||||
:dataSource="dataSource"
|
||||
:loading="loading"
|
||||
@change="handleTableChange"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a @click="download(record, $event)">下载</a> <a @click="viewFile(record, $event)">预览</a>
|
||||
<a @click="DeleteFile(record, $event)">删除</a>
|
||||
</span>
|
||||
</a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</div>
|
||||
</a-col>
|
||||
</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>
|
||||
<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" size="large" v-model="queryParam.schemaMass"
|
||||
@change="handleTypeChange">
|
||||
<a-select-option key="平台">
|
||||
平台
|
||||
</a-select-option>
|
||||
<a-select-option key="编队">
|
||||
编队
|
||||
</a-select-option>
|
||||
<a-select-option key="航空兵">
|
||||
航空兵
|
||||
</a-select-option>
|
||||
<a-select-option key="陆战队">
|
||||
陆战队
|
||||
</a-select-option>
|
||||
<a-select-option key="作战">
|
||||
作战
|
||||
</a-select-option>
|
||||
<a-select-option key="反潜">
|
||||
反潜
|
||||
</a-select-option>
|
||||
<a-select-option key="舰炮">
|
||||
舰炮
|
||||
</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-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 - 300px);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 - 300px);background: #e6e9f1;overflow:hidden;padding: 15px;">
|
||||
<a-table size="middle" bordered :columns="columns" :data-source="dataSource" :loading="loading"
|
||||
:pagination="pagination" :scroll="{ x: 1200, y: 'calc(100vh - 450px)' }" rowKey="序号"
|
||||
@change="handleTableChange"></a-table>
|
||||
</div>
|
||||
<div class="linese"></div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
<script>
|
||||
import guaz from '@assets/guaz.png'
|
||||
import { getDataManagerInfo,
|
||||
getAllSchemaName,
|
||||
getAllTable,
|
||||
getTableData,
|
||||
getTableColumns,
|
||||
getTableIndexes,
|
||||
updateIndexSafe,
|
||||
dropIndex,
|
||||
DmExportTool,
|
||||
getExportLog } from '@/api/dataManage'
|
||||
|
||||
import { metaDataTypeTree, tableDataList } from '@/api/metaData'
|
||||
export default {
|
||||
name: 'dataSearch',
|
||||
name: "metadata",
|
||||
components: {
|
||||
uploadModal,
|
||||
},
|
||||
data() {
|
||||
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,
|
||||
selectedRowKeys: [],
|
||||
selectId: '',
|
||||
modalTitle: '',
|
||||
modelType: '',
|
||||
searchFile: {
|
||||
dirId: '',
|
||||
queryCondition: '',
|
||||
pageNum: 1,
|
||||
pageSize: 9999999,
|
||||
// 查询条件
|
||||
queryParam: {
|
||||
sourceType: 1,
|
||||
schemaMass: null,
|
||||
massKey: null
|
||||
},
|
||||
fileNum: {
|
||||
document: 0,
|
||||
pictures: 0,
|
||||
video: 0,
|
||||
dbfile: 0,
|
||||
audio: 0,
|
||||
total: 0,
|
||||
pagination: {
|
||||
defaultCurrent: 1, // 默认当前页数
|
||||
defaultPageSize: 10, // 默认当前页显示数据的大小total: 0, // 总数，必须先有
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: false,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: total => `总共 ${total} 个项目`, // 显示总数
|
||||
onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize)
|
||||
},
|
||||
tableParams: {
|
||||
schemaMass: null,
|
||||
tableName: null,
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
},
|
||||
treeDate: [],
|
||||
dataSource: [],
|
||||
columns: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getDirList()
|
||||
// this.getcountFileNum()
|
||||
// this.calculateScrollY();
|
||||
watch: {
|
||||
'queryParam.massKey'(value) {
|
||||
this.queryParam.massKey = value
|
||||
this.getMetaDataTypeTree()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.getMetaDataTypeTree()
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
calculateScrollY() {
|
||||
// 获取父容器高度（需减去表格内其他元素的高度，如分页栏）
|
||||
const container = this.$refs.tableContainer;
|
||||
const paginationHeight = 64; // 根据实际分页栏高度调整
|
||||
this.tableScrollY = container.clientHeight - paginationHeight;
|
||||
},
|
||||
clickfile() {
|
||||
if (this.selectId.length <= 0) {
|
||||
this.$message.warning('必须选择文件上传目录')
|
||||
return
|
||||
}
|
||||
console.log('dirid=' + this.searchFile.dirId)
|
||||
this.$refs.modalForm.title = '文件上传'
|
||||
this.$refs.modalForm.dirId = this.searchFile.dirId
|
||||
this.$refs.modalForm.add()
|
||||
},
|
||||
getcountFileNum() {
|
||||
var that = this
|
||||
countFileNum({}).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.forEach((item, index) => {
|
||||
that.setcountFileNum(item)
|
||||
})
|
||||
} else {
|
||||
this.$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: 'children_' + chil,
|
||||
type: 'childern',
|
||||
title: childrenNode
|
||||
})
|
||||
});
|
||||
this.treeDate.push({
|
||||
key: 'type_' + index,
|
||||
type: 'parentType',
|
||||
title: element,
|
||||
children: childrenList
|
||||
})
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
setcountFileNum(item) {
|
||||
switch (item.FILETYPE) {
|
||||
case 'document':
|
||||
this.fileNum.document = item.NUMS
|
||||
break
|
||||
case 'pictures':
|
||||
this.fileNum.pictures = item.NUMS
|
||||
break
|
||||
case 'video':
|
||||
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
|
||||
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.title
|
||||
this.getTableDataList()
|
||||
}
|
||||
},
|
||||
download(item) {
|
||||
let apiBaseUrl = window._CONFIG['domianURL'] || '/jeecg-boot'
|
||||
window.open(apiBaseUrl + '/file/downloadFile?fileId=' + item.id)
|
||||
handleTableChange (pagination, filters, sorter) {
|
||||
this.pagination = pagination
|
||||
this.tableParams.pageNum = pagination.current - 1
|
||||
this.tableParams.pageSize = pagination.pageSize
|
||||
this.getTableDataList()
|
||||
},
|
||||
viewFile(item) {
|
||||
filePreview({ fileId: item.id }).then((res) => {
|
||||
if (res.success) {
|
||||
window.open('http://' + res.result, '_blank')
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
DeleteFile(item) {
|
||||
var that = this
|
||||
that.$confirm({
|
||||
title: '确认删除',
|
||||
content: '是否删除选中文件?',
|
||||
onOk: function () {
|
||||
logicDeleteFile({ id: item.id }).then((res) => {
|
||||
that.$message.warning(res.message)
|
||||
that.searchgetFileList()
|
||||
// //筛选需要重写handleTableChange
|
||||
// handleTableChange(pagination, filters, sorter) {
|
||||
// //分页、排序、筛选变化时触发
|
||||
// //TODO 筛选
|
||||
// if (Object.keys(sorter).length > 0) {
|
||||
// this.isorter.column = sorter.field;
|
||||
// this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
|
||||
// }
|
||||
// this.pagination = pagination;
|
||||
// this.getTableDataList();
|
||||
// },
|
||||
getTableDataList() {
|
||||
tableDataList(this.tableParams).then(res => {
|
||||
if (res.code == 200) {
|
||||
// this.dataSource = []
|
||||
// this.dataSource = res.result
|
||||
// if (res.result.total) {
|
||||
// this.ipagination.total = res.result.total;
|
||||
// }
|
||||
this.columns = []
|
||||
res.result.columnNames.forEach(columns => {
|
||||
this.columns.push({
|
||||
title: columns,
|
||||
dataIndex: columns,
|
||||
ellipsis: true,
|
||||
width: 180
|
||||
})
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
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) {
|
||||
|
||||
const pagination = { ...this.pagination }
|
||||
pagination.total = res.result.total
|
||||
this.dataSource = res.result.rows
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
this.pagination = pagination
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
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>
|
||||
|
||||
<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>
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user