数据汇集管理
This commit is contained in:
parent
4878d9c12f
commit
53d74048a1
|
|
@ -52,17 +52,23 @@ export default {
|
|||
methods: {
|
||||
// 节点点击事件
|
||||
onHandleNodeClick(data) {
|
||||
console.log(data)
|
||||
|
||||
this.$emit('handleNodeClick', data)
|
||||
},
|
||||
convertToVueTree(data) {
|
||||
return data.map(item => ({
|
||||
id: item.code,
|
||||
label: item.name,
|
||||
children: item.kyDataClassifyList ? item.kyDataClassifyList.map(child => ({
|
||||
id: child.id,
|
||||
label: child.dataTypeName,
|
||||
children: []
|
||||
})) : []
|
||||
}));
|
||||
},
|
||||
// 获取左侧树列表
|
||||
async getLeftTreeList() {
|
||||
const res = await getLeftTreeListAPI()
|
||||
const transformedData = res.rows.map(item => ({
|
||||
id: item.id,
|
||||
label: item.dataTypeName
|
||||
}));
|
||||
const transformedData = this.convertToVueTree(res.rows)
|
||||
this.treeDataList[0].children = transformedData
|
||||
// 保存原始数据
|
||||
this.originalTreeData = JSON.parse(JSON.stringify(this.treeDataList))
|
||||
|
|
|
|||
|
|
@ -20,27 +20,46 @@
|
|||
</el-form>
|
||||
|
||||
<!-- 表格 -->
|
||||
<el-table :data="filteredTableData" border :height="tableHeight" style="width: 100%">
|
||||
<el-table :data="filteredTableData" border :height="tableHeight" style="width: 100%" header-align="center">
|
||||
<el-table-column v-if="tableData && tableData.length" type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column align="center" :key="column.prop" :prop="column.prop" :label="column.label"
|
||||
v-for="column in columns" />
|
||||
<el-table-column v-if="tableData && tableData.length" label="操作" width="100" align="center" fixed="right" class-name="action-col" label-class-name="action-col-header">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button plain type="primary" size="mini" class="action-btn" icon="el-icon-share" @click="handleShare(row)">分享</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Share v-if="isflag" :rowData="row" :title="title"
|
||||
@closeDialog="closeDialog" @showColose="showColose" :dataForm="row" :disabled="loading" :width="600" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getListDataSetAPI } from '@/api/data-collect/data-set-manage'
|
||||
import Share from './share.vue'
|
||||
export default {
|
||||
name: 'RightTable',
|
||||
components: {
|
||||
Share
|
||||
},
|
||||
props: {
|
||||
selectedNodeId: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
selectedNodeName: {
|
||||
type: [String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isflag: false,
|
||||
loading: false,
|
||||
row: {},
|
||||
title: '分享',
|
||||
queryParams: {
|
||||
dataTypeName: undefined,
|
||||
},
|
||||
|
|
@ -59,6 +78,21 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
// 分享
|
||||
handleShare(row) {
|
||||
this.isflag = true;
|
||||
row.selectedNodeName = this.selectedNodeName;
|
||||
row.selectedNodeId = this.selectedNodeId;
|
||||
console.log(row);
|
||||
|
||||
this.row = row;
|
||||
},
|
||||
closeDialog() {
|
||||
this.isflag = false;
|
||||
},
|
||||
showColose() {
|
||||
this.isflag = false;
|
||||
},
|
||||
// 查询：按第一列字段做模糊匹配
|
||||
onHandleQuery() {
|
||||
if (!Array.isArray(this.columns) || this.columns.length < 1) return
|
||||
|
|
@ -164,6 +198,12 @@ export default {
|
|||
},
|
||||
immediate: true, // 表示立即执行
|
||||
},
|
||||
selectedNodeName: {
|
||||
handler(newVal2) {
|
||||
this.selectedNodeName = newVal2
|
||||
},
|
||||
immediate: true, // 表示立即执行
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
|
@ -201,4 +241,23 @@ export default {
|
|||
::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
|
||||
/* 操作列样式统一，避免按钮受表格行样式影响抖动或换行 */
|
||||
/* 操作列单元格与其它列统一高度与内边距，避免不对齐 */
|
||||
::v-deep .action-col .cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 8px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::v-deep .action-col-header .cell {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 3px 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<!-- 小型弹窗 -->
|
||||
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||
<div>
|
||||
<!-- 文档式表格 -->
|
||||
<div class="doc-wrap">
|
||||
<table class="doc-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>名称</th>
|
||||
<td>获取{{ rowData.selectedNodeName }}接口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>描述</th>
|
||||
<td>依据ID获取{{ rowData.selectedNodeName }}相关信息</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>URL</th>
|
||||
<td>smartArchives/data/Collect/list?id={{ rowData.id }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>HTTP请求方式</th>
|
||||
<td>GET</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>请求参数</th>
|
||||
<td>
|
||||
<table class="inner-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>参数名称</th>
|
||||
<th>必选</th>
|
||||
<th>类型及范围</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>id</td>
|
||||
<td>true</td>
|
||||
<td>字符串</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>返回结果</th>
|
||||
<td>
|
||||
<pre class="code" v-text="resultJson"></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button class="clear-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Share",
|
||||
props: ["width", "dataForm", "title", "disabled", "rowData"],
|
||||
data() {
|
||||
return {
|
||||
lDialog: this.width > 500 ? "w700" : "w500",
|
||||
dialogVisible: true,
|
||||
isDisabled: true,
|
||||
resultJson: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initFormData();
|
||||
},
|
||||
methods: {
|
||||
/** 初始化表单数据 */
|
||||
initFormData() {
|
||||
if (this.rowData) {
|
||||
// 将 rowData 的 data 字段（对象或数组）美化成 JSON 文本展示
|
||||
let payload = this.rowData && this.rowData.data
|
||||
if (payload === undefined) {
|
||||
// 兼容没有 data 字段时，直接把 rowData 作为展示对象
|
||||
payload = this.rowData
|
||||
}
|
||||
try {
|
||||
this.resultJson = JSON.stringify(payload, null, 2)
|
||||
} catch (e) {
|
||||
this.resultJson = String(payload)
|
||||
}
|
||||
}
|
||||
},
|
||||
/*关闭弹窗 */
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = true;
|
||||
});
|
||||
},
|
||||
/**确认弹窗 */
|
||||
sureBtnClick() {
|
||||
this.dialogVisible = false;
|
||||
this.$emit("closeDialog");
|
||||
setTimeout(() => {
|
||||
this.dialogVisible = true;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.w700 .el-dialog {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.w500 .el-dialog__header,
|
||||
.w700 .el-dialog__header {
|
||||
// background: #eeeeee;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.yxq .el-range-separator {
|
||||
margin-right: 7px !important;
|
||||
}
|
||||
|
||||
.el-date-editor--daterange.el-input__inner {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select-style {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.doc-wrap {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.doc-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.doc-table th,
|
||||
.doc-table td {
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 8px 10px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.doc-table th {
|
||||
width: 120px;
|
||||
background: #f5f7fa;
|
||||
color: #303133;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.doc-table .inner-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.doc-table .inner-table th,
|
||||
.doc-table .inner-table td {
|
||||
border: 1px solid #e4e7ed;
|
||||
padding: 6px 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #f8f8f8;
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<LeftTree @handleNodeClick="handleNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<RightTable :selectedNodeId="selectedNodeId" />
|
||||
<RightTable :selectedNodeId="selectedNodeId" :selectedNodeName="selectedNodeName" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
|
|
@ -25,12 +25,14 @@ export default {
|
|||
return {
|
||||
// 选中的节点ID
|
||||
selectedNodeId: 0,
|
||||
selectedNodeName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 节点点击事件
|
||||
handleNodeClick(data) {
|
||||
this.selectedNodeId = data.id
|
||||
this.selectedNodeName = data.label
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue