数据汇集管理页面完善
This commit is contained in:
BianLzhaoMin
parent
b979d35a55
commit
fac9d8410a
|
|
@ -0,0 +1,19 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 获取左侧树列表接口
|
||||||
|
export function getLeftTreeListAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartArchives/***',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取数据列表接口
|
||||||
|
export function getListDataSetAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartArchives/***',
|
||||||
|
method: 'GET',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
<!-- 左侧树 -->
|
||||||
|
<div>
|
||||||
|
<el-card style="min-height: calc(100vh - 125px)">
|
||||||
|
<el-row :gutter="20" style="display: flex; align-items: center">
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-input
|
||||||
|
v-model="filterText"
|
||||||
|
placeholder="输入关键字"
|
||||||
|
@keyup.enter.native="onHandleSearch"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
@click="onHandleSearch"
|
||||||
|
>
|
||||||
|
搜索
|
||||||
|
</el-button>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-tree
|
||||||
|
ref="leftTreeRef"
|
||||||
|
:data="treeDataList"
|
||||||
|
default-expand-all
|
||||||
|
class="left-tree-list"
|
||||||
|
@node-click="onHandleNodeClick"
|
||||||
|
>
|
||||||
|
</el-tree>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getLeftTreeListAPI } from '@/api/data-collect/data-set-manage'
|
||||||
|
export default {
|
||||||
|
name: 'LeftTree',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
treeDataList: [
|
||||||
|
{
|
||||||
|
label: '数据汇集管理',
|
||||||
|
id: 1,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
label: '数据汇集1',
|
||||||
|
id: 11,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集2',
|
||||||
|
id: 12,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集3',
|
||||||
|
id: 13,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集4',
|
||||||
|
id: 14,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集5',
|
||||||
|
id: 15,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集6',
|
||||||
|
id: 16,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集7',
|
||||||
|
id: 17,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '数据汇集8',
|
||||||
|
id: 18,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 节点点击事件
|
||||||
|
onHandleNodeClick(data) {
|
||||||
|
console.log(data)
|
||||||
|
|
||||||
|
this.$emit('handleNodeClick', data)
|
||||||
|
},
|
||||||
|
// 获取左侧树列表
|
||||||
|
async getLeftTreeList() {
|
||||||
|
const res = await getLeftTreeListAPI()
|
||||||
|
// this.treeDataList = res.data
|
||||||
|
},
|
||||||
|
// 搜索
|
||||||
|
onHandleSearch() {
|
||||||
|
// console.log(this.filterText)
|
||||||
|
// this.getLeftTreeList()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.getLeftTreeList()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.left-tree-list {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<template>
|
||||||
|
<!-- 右侧表格 -->
|
||||||
|
<div>
|
||||||
|
<el-card style="min-height: calc(100vh - 125px)">
|
||||||
|
<!-- 查询 -->
|
||||||
|
<el-form
|
||||||
|
size="small"
|
||||||
|
ref="queryForm"
|
||||||
|
:inline="true"
|
||||||
|
:model="queryParams"
|
||||||
|
>
|
||||||
|
<el-form-item prop="dataTypeName">
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
placeholder="数据类型名称"
|
||||||
|
v-model="queryParams.dataTypeName"
|
||||||
|
@keyup.enter.native="onHandleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-search"
|
||||||
|
@click="onHandleQuery"
|
||||||
|
>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-refresh"
|
||||||
|
@click="onResetQuery"
|
||||||
|
>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table :data="tableData" border>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
:key="column.prop"
|
||||||
|
:prop="column.prop"
|
||||||
|
:label="column.label"
|
||||||
|
v-for="column in columns"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getListDataSetClassAPI } from '@/api/data-collect/data-set-manage'
|
||||||
|
export default {
|
||||||
|
name: 'RightTable',
|
||||||
|
props: {
|
||||||
|
selectedNodeId: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryParams: {
|
||||||
|
dataTypeName: undefined,
|
||||||
|
},
|
||||||
|
tableData: [],
|
||||||
|
columns: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 查询
|
||||||
|
onHandleQuery() {
|
||||||
|
console.log(this.queryParams)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
onResetQuery() {
|
||||||
|
this.queryParams = {}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取数据列表
|
||||||
|
async getListDataSetClassFun(id) {
|
||||||
|
// const res = await getListDataSetClassAPI({
|
||||||
|
// id,
|
||||||
|
// ...this.queryParams,
|
||||||
|
// })
|
||||||
|
// this.tableData = res.rows
|
||||||
|
// this.total = res.total
|
||||||
|
|
||||||
|
// 动态添加表格列和数据源
|
||||||
|
|
||||||
|
const num = Math.floor(Math.random() * 6) + 1
|
||||||
|
const num2 = Math.floor(Math.random() * 6) + 1
|
||||||
|
for (let i = 0; i < num; i++) {
|
||||||
|
this.columns.push({
|
||||||
|
label: `字段${i + 1}`,
|
||||||
|
prop: `dataTypeName${i}`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < num2; i++) {
|
||||||
|
const obj = {}
|
||||||
|
for (let j = 0; j < num; j++) {
|
||||||
|
obj[this.columns[j].prop] = `字段${j + 1}的值`
|
||||||
|
}
|
||||||
|
this.tableData.push(obj)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听选中的节点ID
|
||||||
|
watch: {
|
||||||
|
selectedNodeId: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.columns = []
|
||||||
|
this.tableData = []
|
||||||
|
this.getListDataSetClassFun(newVal.id)
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,11 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 数据汇集管理 -->
|
<!-- 数据汇集管理 -->
|
||||||
<div class="app-container"> 数据分类管理 </div>
|
<div class="app-container">
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="8">
|
||||||
|
<LeftTree @handleNodeClick="handleNodeClick" />
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="16">
|
||||||
|
<RightTable :selectedNodeId="selectedNodeId" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import LeftTree from './components/left-tree.vue'
|
||||||
|
import RightTable from './components/right-table.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'DataSetManage',
|
name: 'DataSetManage',
|
||||||
|
components: {
|
||||||
|
LeftTree,
|
||||||
|
RightTable,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 选中的节点ID
|
||||||
|
selectedNodeId: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 节点点击事件
|
||||||
|
handleNodeClick(data) {
|
||||||
|
console.log(data)
|
||||||
|
this.selectedNodeId = data.id
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue