|
@@ -2,16 +2,16 @@
|
|
|
<el-card shadow="always" :body-style="{ padding: '10px' }">
|
|
|
<div class="app-container">
|
|
|
<!-- 头部 -->
|
|
|
- <div class='container-header'>
|
|
|
+ <div class='container-header'>
|
|
|
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
|
|
|
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url +
|
|
|
- '?updateSupport=' +
|
|
|
- upload.updateSupport +
|
|
|
- '&tableName=' +
|
|
|
- tableName +
|
|
|
- '&sqlKey=' +
|
|
|
- tableKey
|
|
|
- " v-loading="upload.isUploading" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
|
|
+ '?updateSupport=' +
|
|
|
+ upload.updateSupport +
|
|
|
+ '&tableName=' +
|
|
|
+ tableName +
|
|
|
+ '&sqlKey=' +
|
|
|
+ tableKey
|
|
|
+ " v-loading="upload.isUploading" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress"
|
|
|
:on-success="handleFileSuccess" :auto-upload="false" :onChange="handleChange" drag>
|
|
|
<i class="el-icon-upload"></i>
|
|
|
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
@@ -35,39 +35,41 @@
|
|
|
<right-toolbar :showCount.sync="showCount" :showSearch.sync="showSearch" :counts="true"
|
|
|
@queryTable="pageList"></right-toolbar>
|
|
|
</el-row>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
<!-- 内容 -->
|
|
|
- <div class='container-body'>
|
|
|
+ <div class='container-body'>
|
|
|
<!-- 左侧树形 -->
|
|
|
<div class='container-left'>
|
|
|
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
|
|
</div>
|
|
|
<!-- 右侧 -->
|
|
|
<div class='container-right'>
|
|
|
- <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" ref="tableRef"
|
|
|
- :cell-style="cellStyle" :reserve-selection="true" :row-key="getRowKey">
|
|
|
- <el-table-column type="selection" width="55" reserve-selection align="center" >
|
|
|
+ <el-table v-if="tableList.length > 0" v-loading="loading" :data="tableList"
|
|
|
+ @selection-change="handleSelectionChange" ref="tableRef" :cell-style="cellStyle" :reserve-selection="true"
|
|
|
+ :row-key="getRowKey">
|
|
|
+ <el-table-column type="selection" width="55" reserve-selection align="center">
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-for="item in columns" :key="item.key" :label="item.value" align="center" :prop="item.key">
|
|
|
+ <el-table-column v-for="item in columns" :key="item.key" :label="item.value" align="center"
|
|
|
+ :prop="item.key">
|
|
|
<template slot-scope="scope">
|
|
|
<!-- 存在字段样式或字典样式 -->
|
|
|
<template v-if="scope.row.styleFieldObj != undefined &&
|
|
|
- scope.row.styleFieldObj[item.key]
|
|
|
- ">
|
|
|
+ scope.row.styleFieldObj[item.key]
|
|
|
+ ">
|
|
|
<!-- 字段样式 -->
|
|
|
<template v-if="scope.row.styleFieldObj[item.key].styleType == 1">
|
|
|
<!-- 一般字体样式 -->
|
|
|
<template v-if="scope.row.styleFieldObj[item.key].fieldStyleType == 0">
|
|
|
<span :style="`color:${scope.row.styleFieldObj[item.key].fontColor
|
|
|
- }`">{{ scope.row[item.key] }}</span>
|
|
|
+ }`">{{ scope.row[item.key] }}</span>
|
|
|
</template>
|
|
|
<!-- 标签字体样式 -->
|
|
|
<template v-else-if="scope.row.styleFieldObj[item.key].fieldStyleType == 1
|
|
|
- ">
|
|
|
+ ">
|
|
|
<el-tag :type="scope.row.styleFieldObj[item.key].tagType" :effect="scope.row.styleFieldObj[item.key].isTagFullBg
|
|
|
- ? 'dark'
|
|
|
- : 'light'
|
|
|
- ">
|
|
|
+ ? 'dark'
|
|
|
+ : 'light'
|
|
|
+ ">
|
|
|
{{ scope.row[item.key] }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
@@ -75,12 +77,12 @@
|
|
|
<!-- 字典样式 -->
|
|
|
<template v-else-if="scope.row.styleFieldObj[item.key].styleType == 2">
|
|
|
<span v-if="scope.row.styleFieldObj[item.key].listClass == '' ||
|
|
|
- scope.row.styleFieldObj[item.key].listClass == 'default'
|
|
|
- ">{{ scope.row.styleFieldObj[item.key].dictLabel }}</span>
|
|
|
+ scope.row.styleFieldObj[item.key].listClass == 'default'
|
|
|
+ ">{{ scope.row.styleFieldObj[item.key].dictLabel }}</span>
|
|
|
<el-tag v-else :type="scope.row.styleFieldObj[item.key].listClass == 'primary'
|
|
|
- ? ''
|
|
|
- : scope.row.styleFieldObj[item.key].listClass
|
|
|
- ">{{ scope.row.styleFieldObj[item.key].dictLabel }}
|
|
|
+ ? ''
|
|
|
+ : scope.row.styleFieldObj[item.key].listClass
|
|
|
+ ">{{ scope.row.styleFieldObj[item.key].dictLabel }}
|
|
|
</el-tag>
|
|
|
</template>
|
|
|
</template>
|
|
@@ -90,15 +92,16 @@
|
|
|
</template>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column v-if="isShowExcuteCol" label="操作" width="150" align="center" class-name="small-padding fixed-width" fixed="right">
|
|
|
+ <el-table-column v-if="isShowExcuteCol" label="操作" width="150" align="center"
|
|
|
+ class-name="small-padding fixed-width" fixed="right">
|
|
|
<template slot-scope="scope">
|
|
|
<Menu :row="scope.row" v-for="btnObj in excuteBtnArr" :key="btnObj.id" :listAll="btnObj"
|
|
|
@excuteHandler="excuteHandler"></Menu>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
|
|
- @pagination="pageList" />
|
|
|
+ <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize" @pagination="pageList" />
|
|
|
|
|
|
<!-- 添加或修改 -->
|
|
|
<el-dialog :title="title" :visible.sync="open" append-to-body>
|
|
@@ -163,9 +166,9 @@
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</el-card>
|
|
|
</template>
|
|
|
<script>
|
|
@@ -180,6 +183,9 @@ import {
|
|
|
batchEdit,
|
|
|
getStatisticList,
|
|
|
} from "@/api/tablelist/commonTable";
|
|
|
+import {
|
|
|
+ getTreeData
|
|
|
+} from "@/api/treeTableList/commonTable";
|
|
|
import { listData } from "@/api/system/tenant/data";
|
|
|
import { getToken } from "@/utils/auth";
|
|
|
import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
|
|
@@ -258,6 +264,7 @@ export default {
|
|
|
children: 'children',
|
|
|
label: 'label'
|
|
|
},
|
|
|
+ templateData: {},
|
|
|
QueryfromLoading: false,
|
|
|
// 当前table唯一标识
|
|
|
tableKey: null,
|
|
@@ -422,25 +429,47 @@ export default {
|
|
|
},
|
|
|
created() {
|
|
|
// 得到当前展示的table的唯一标识
|
|
|
+ // this.treeData = []
|
|
|
this.tableKey = this.$route.query.tableKey;
|
|
|
this.treeTableKey = this.$route.query.treeTableKey;
|
|
|
- // console.log('this.treeTableKey,this.tableKey', this.treeTableKey, this.tableKey)
|
|
|
- // console.log('this.queryParams', this.queryParams)
|
|
|
// 优化共通模版查询调用逻辑 (Don't fucking change it)
|
|
|
this.getList(this.queryParams);
|
|
|
+ // console.log('[this.treeTableKey]',this.treeTableKey)
|
|
|
+ this.getLeftTreeData(this.treeTableKey);
|
|
|
+
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.initFormGroupDialog();
|
|
|
},
|
|
|
methods: {
|
|
|
+ getLeftTreeData(treeTableKey) {
|
|
|
+ getTreeData(treeTableKey).then(res => {
|
|
|
+ if (res.code === 200 && res.data && res.data.template) {
|
|
|
+ const templateData = JSON.parse(res.data.template);
|
|
|
+ this.templateData = templateData
|
|
|
+ const data = JSON.parse(res.data.data);
|
|
|
+ console.log('[Template Data]', templateData);
|
|
|
+ console.log('[Data]', data);
|
|
|
+ if (templateData && data) {
|
|
|
+ this.treeData = data
|
|
|
+ this.defaultProps.label = templateData.treeShowLabel
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
handleNodeClick(data) {
|
|
|
console.log('treeData', data);
|
|
|
+ console.log('[tableList]',this.tableList)
|
|
|
+
|
|
|
},
|
|
|
isUpperCase(char) {
|
|
|
return char === char.toUpperCase();
|
|
|
},
|
|
|
|
|
|
getList(queryParams) {
|
|
|
+ console.log('queryParams',queryParams)
|
|
|
this.loading = true;
|
|
|
// 序列化当前查询参数列表
|
|
|
queryParams && (this.queryParams.queryMap = Object.assign({}, queryParams.queryMap));
|
|
@@ -1995,16 +2024,23 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
- .container-body {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .container-left {
|
|
|
- width:20%
|
|
|
- }
|
|
|
- .container-right {
|
|
|
- width:80%
|
|
|
- }
|
|
|
- ::v-deep .myDiv .el-button--medium {
|
|
|
- padding: 10px 10px;
|
|
|
- }
|
|
|
+.container-body {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.container-left {
|
|
|
+ width: 20%
|
|
|
+}
|
|
|
+
|
|
|
+.container-right {
|
|
|
+ width: 80%
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .myDiv .el-button--medium {
|
|
|
+ padding: 10px 10px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__empty-block {
|
|
|
+ width: 100% !important;
|
|
|
+}
|
|
|
</style>
|