127 lines
3.5 KiB
Vue
127 lines
3.5 KiB
Vue
|
<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>
|