数据汇集管理页面完善
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>
|
||||
<!-- 数据汇集管理 -->
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import LeftTree from './components/left-tree.vue'
|
||||
import RightTable from './components/right-table.vue'
|
||||
export default {
|
||||
name: 'DataSetManage',
|
||||
components: {
|
||||
LeftTree,
|
||||
RightTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 选中的节点ID
|
||||
selectedNodeId: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 节点点击事件
|
||||
handleNodeClick(data) {
|
||||
console.log(data)
|
||||
this.selectedNodeId = data.id
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue