From aa869225a5f2054cb0253d8f037863aaec866c6e Mon Sep 17 00:00:00 2001
From: wangting <675591594@qq.com>
Date: 星期五, 27 九月 2024 09:51:36 +0800
Subject: [PATCH] UI定义页面
---
Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue | 387 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 366 insertions(+), 21 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue
index 8693e99..78bea66 100644
--- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue
+++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue
@@ -4,13 +4,13 @@
<el-aside>
<basic-container>
<div ref="TreeBox" style="height: calc(100vh - 144px);!important;">
- <!-- 宸︿晶鏍� -->
- <div style="height: calc(100vh - 280px);">
+ <!-- 宸︿晶鏍� -->
+ <div style="height: calc(100vh - 220px);">
<div style="margin-bottom: 10px;display: flex;justify-content: center">
- <el-radio v-model="treeRadio" label="0">涓氬姟绫诲瀷鏍�</el-radio>
- <el-radio v-model="treeRadio" label="1">閾炬帴绫诲瀷鏍�</el-radio>
+ <el-radio v-model="treeRadio" label="0" @input="TreeRadioChange">涓氬姟绫诲瀷鏍�</el-radio>
+ <el-radio v-model="treeRadio" label="1" @input="TreeRadioChange">閾炬帴绫诲瀷鏍�</el-radio>
</div>
- <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
+ <avue-tree v-loading="treeLoading" :data="treeData" :option="treeOption" @node-click="nodeClick">
<span slot-scope="{ node, data }" class="el-tree-node__label">
<span style="font-size: 15px">
<i class="el-icon-s-promotion"></i>
@@ -26,17 +26,25 @@
<el-main>
<basic-container>
<avue-crud
+ v-if="!tableStatus"
+ ref="crud"
:data="data"
- :option="option">
+ :option="option"
+ :page.sync="page"
+ @size-change="sizeChange"
+ @current-change="currentChange"
+ @selection-change="selectChangeHandler"
+ @row-click="rowClickHandler">
<template slot="menuLeft">
<div style="display: flex; align-items: center;">
<span style="display: inline-block; margin-right: 10px;">
- <el-radio v-model="tableRadio" label="0">琛ㄥ崟</el-radio>
- <el-radio v-model="tableRadio" label="1">琛ㄦ牸<span style="color: red;">锛堝厛瀵煎叆琛ㄥ崟锛屽啀瀵煎叆琛ㄦ牸锛侊級</span></el-radio>
+ <el-radio v-model="tableRadio" label="0" @input="tableRadioChange">琛ㄥ崟</el-radio>
+ <el-radio v-model="tableRadio" label="1" @input="tableRadioChange">琛ㄦ牸<span style="color: red;">锛堝厛瀵煎叆琛ㄥ崟锛屽啀瀵煎叆琛ㄦ牸锛侊級</span></el-radio>
</span>
<span style="display: flex;align-items: center; margin-right: 10px;">
<p style="display: flex; flex-shrink: 0;font-size: 14px">鍚嶇О锛�</p>
- <el-input v-model="input" placeholder="璇疯緭鍏ュ唴瀹�" size="mini"></el-input>
+ <el-input v-model="topName" placeholder="璇疯緭鍏ュ唴瀹�" size="mini" style="margin-right: 10px;"></el-input>
+ <el-button plain size="mini" type="success" @click="nameSearchHandler">鏌ヨ</el-button>
</span>
<span style="display: flex; align-items: center;">
<p
@@ -53,53 +61,391 @@
</el-button>
</template>
</avue-crud>
- <div style="display: flex;justify-content: center;margin-top: 15px">
+ <div v-if="!tableStatus" style="display: flex;justify-content: center;margin-top: 15px">
<el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">澧炲姞</el-button>
- <el-button icon="el-icon-delete" plain size="small" type="danger">鍒犻櫎</el-button>
+ <el-button icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">鍒犻櫎</el-button>
<el-button icon="el-icon-document-add" plain size="small" type="primary">鍏嬮殕</el-button>
- <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadHandler">瀵煎叆</el-button>
- <el-button icon="el-icon-download" plain size="small" type="primary" @click="downLoadHandler">瀵煎嚭</el-button>
+ <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">瀵煎叆</el-button>
+ <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">瀵煎嚭
+ </el-button>
</div>
</basic-container>
</el-main>
- <form-dialog ref="formDialog"></form-dialog>
- <table-dialog ref="tableDialog"></table-dialog>
+ <form-dialog ref="formDialog" :TreeNodeRow="this.nodeRow" :treeRadio="treeRadio"></form-dialog>
+ <table-dialog ref="tableDialog" :TreeNodeRow="this.nodeRow" :treeRadio="treeRadio"
+ @updataTable="getRightPortalVIDatas"></table-dialog>
+ <!-- 瀵煎叆 -->
+ <upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="瀵煎叆"
+ @updata="getRightPortalVIDatas"></upload-file>
</el-container>
</template>
<script>
import basicOption from "@/util/basic-option";
import FormDialog from "@/views/modelingMenu/ui/formDefine/components/formDialog";
-import TableDialog from "@/views/modelingMenu/ui/formDefine/components/tableDialog"
+import TableDialog from "@/views/modelingMenu/ui/formDefine/components/tableDialog";
+import {gridPortalVIDatas, getPortalVIById, deleteByIds, exportExcel} from "@/api/UI/formDefine/api";
+import {getBizTypes} from "@/api/modeling/businessType/api";
+import {gridLink} from "@/api/modeling/linkType/api";
+import func from "@/util/func";
export default {
name: "index",
components: {FormDialog, TableDialog},
data() {
return {
+ tipList: [
+ "瀵煎叆涓氬姟绫诲瀷鍚嶇О涓嶅彲涓虹┖",
+ "瀵煎叆鍚嶇О涓嶅彲涓虹┖涓斿悕绉板彧鑳戒负鑻辨枃瀛楁瘝",
+ "涓婁紶鐨勬枃浠朵负鍘嬬缉鏂囦欢锛屼笖鍘嬬缉鏍煎紡浠呰兘涓簔ip鏍煎紡"
+ ],
+ upFileType: ['zip'],
+ fileUrl: 'api/portalVIController/importData',
+ lastIndex: null,
+ selectList: [],
+ topName: '',
+ page: {
+ currentPage: 1,
+ pageSize: 10,
+ total: 0,
+ pageSizes: [10, 30, 50, 100],
+ },
+ nodeRow: {},
+ treeLoading: false,
option: {
...basicOption,
addBtn: false,
editBtn: false,
- delBtn: false
+ delBtn: false,
+ column: [
+ {
+ label: '涓氬姟鍚嶇О',
+ prop: 'typeName',
+ },
+ {
+ label: '鍚嶇О',
+ prop: 'viName',
+ sortable: true,
+ },
+ {
+ label: '绫诲瀷',
+ prop: 'viTypeText',
+ },
+ ]
},
data: [],
tableRadio: "",
treeRadio: "0",
treeData: [],
treeOption: {
- addBtn: false
- }
+ addBtn: false,
+ props: {
+ label: 'id',
+ value: 'id',
+ children: 'children'
+ }
+ },
+ dbClickList: [],
+ defaultData: [], // 鐢ㄤ簬鏌ヨ鎭㈠鍘熷鍊�
+ }
+ },
+ created() {
+ this.getTreeList();
+ },
+ computed: {
+ tableStatus() {
+ return func.isEmptyObject(this.nodeRow);
}
},
methods: {
+ // 鍙充晶鏂板
addClickHandler() {
if (!this.tableRadio) {
this.$message.error('璇峰湪琛ㄦ牸涓婃柟閫夋嫨鏂板绫诲瀷');
return;
}
+ if (this.tableRadio === "0") {
+ this.$refs.formDialog.visible = true;
+ this.$refs.formDialog.getTreeList();
+ } else {
+ this.$refs.tableDialog.visible = true;
+ this.$refs.tableDialog.getDbList();
+ }
+ },
- this.tableRadio === "0" ? this.$refs.formDialog.visible = true : this.$refs.tableDialog.visible = true;
+ // 鍒濆鍖栨爲璇锋眰
+ getTreeList() {
+ this.treeLoading = true;
+ getBizTypes().then(res => {
+ const data = res.data.data.map(item => {
+ this.processChildren(item); // 澶勭悊姣忎釜鑺傜偣
+ item.attributes.id = item.attributes.id;
+ return item.attributes; // 杩斿洖澶勭悊鍚庣殑 attributes
+ });
+ this.treeData = data;
+ this.treeLoading = false;
+ }).catch(error => {
+ loading.close();
+ });
+ },
+
+ // 宸︿晶涓氬姟绫诲瀷鍒囨崲
+ TreeRadioChange(val) {
+ this.treeLoading = true;
+ this.resetTable();
+ if (val === "0") {
+ getBizTypes().then(res => {
+ const data = res.data.data.map(item => {
+ this.processChildren(item); // 澶勭悊姣忎釜鑺傜偣
+ item.attributes.id = item.attributes.id;
+ return item.attributes; // 杩斿洖澶勭悊鍚庣殑 attributes
+ });
+ this.treeData = data;
+ });
+ } else {
+ gridLink().then(res => {
+ const data = res.data.data.map(item => {
+ item.id = item.name;
+ return item;
+ });
+ this.treeData = data;
+ this.treeLoading = false;
+ })
+ }
+ },
+
+ // 澶勭悊鏍戝舰缁撴瀯
+ processChildren(item) {
+ if (item.children && item.children.length > 0) {
+ item.attributes.children = item.children.map(child => {
+ child.attributes.id = child.attributes.id;
+ this.processChildren(child); // 閫掑綊澶勭悊姣忎釜瀛愯妭鐐�
+ return child.attributes; // 鍙繑鍥炲瓙鑺傜偣鐨� attributes
+ });
+ }
+ },
+
+ // 宸︿晶鏍戠偣鍑�
+ nodeClick(row) {
+ this.tableRadio = null;
+ this.nodeRow = row;
+ this.getRightPortalVIDatas(row);
+ },
+
+ // 閲嶇疆琛ㄦ牸灞曠ず淇℃伅 鍜� 琛ㄦ牸琛ㄥ崟閫夐」
+ resetTable() {
+ this.data = [];
+ this.tableRadio = null;
+ },
+
+ // 鍙充晶 琛ㄦ牸 琛ㄥ崟 淇℃伅鏌ヨ
+ getRightPortalVIDatas() {
+ const params = {
+ 'conditionMap[typeName]': this.treeRadio === '0' ? this.nodeRow.id : this.nodeRow.name,
+ 'conditionMap[viType]': this.tableRadio === '0' ? 'Form' : this.tableRadio === '1' ? 'Table' : '',
+ 'conditionMap[viTypeFlag]': this.treeRadio === '0' ? 'BtmType' : this.treeRadio === '1' ? 'LinkType' : '',
+ }
+ gridPortalVIDatas(this.page.currentPage, this.page.pageSize, params).then(res => {
+ if (res.data.code === 200) {
+ const data = res.data.data;
+ this.data = data;
+ this.defaultData = data;
+ this.page.total = res.data.total;
+ }
+ })
+ },
+
+ sizeChange(val) {
+ this.page.pageSize = val;
+ this.getRightPortalVIDatas();
+ },
+
+ // 椤电爜
+ currentChange(val) {
+ this.page.currentPage = val;
+ this.getRightPortalVIDatas();
+ },
+
+ // 琛ㄦ牸 琛ㄥ崟鍒囨崲
+ tableRadioChange() {
+ this.getRightPortalVIDatas();
+ },
+
+ // 缂栬緫鎸夐挳
+ editBtnClick(row) {
+ // 琛ㄦ牸
+ if (row.viType === 0) {
+ const params = {
+ id: row.id,
+ viType: row.viType
+ };
+
+ getPortalVIById(params).then(res => {
+ if (res.data.code === 200) {
+ const data = res.data.obj.prm;
+ const prmItem = data.prmItemList[0] || {}; // 鍙栧嚭绗竴涓厓绱犲苟鎻愪緵榛樿鍊�
+
+ // 鑾峰彇鍒濆鍖栬〃鏍奸噷闇�瑕佺殑榛樿鏁版嵁
+ this.$refs.tableDialog.getFormSelectList();
+
+ // 鏇存柊琛ㄥ崟
+ this.$refs.tableDialog.form = {
+ ...prmItem,
+ viName: res.data.obj.viName,
+ editNodeId: row.id,
+ itemOutFieldList: (prmItem.itemOutFieldList || []).map(item => ({id: item})),
+ itemSearchFieldList: (prmItem.itemSearchFieldList || []).map(item => ({id: item})),
+ itemKeyFieldList: (prmItem.itemKeyFieldList || []).map(item => ({id: item})),
+ searchLabel: prmItem.itemSeniorQueryCols || '',
+ searchNumber: prmItem.itemSeniorQueryColsCounts || '1',
+ searchSql: prmItem.itemQuerySql || '',
+ itemFileWidthSelect: (prmItem.itemFieldWidthList && prmItem.itemFieldWidthList.length > 0) ? prmItem.itemFieldWidthList[0].key : '',
+ itemWidth: (prmItem.itemFieldWidthList && prmItem.itemFieldWidthList.length > 0) ? prmItem.itemFieldWidthList[0].value : '250'
+ };
+
+ // 澶勭悊鍥剧墖瀹介珮
+ const [width = '0', height = '0'] = (prmItem.itemImgWH || '0,0').split(',');
+ this.$refs.tableDialog.itemImgWidth = width;
+ this.$refs.tableDialog.itemImgHeight = height;
+
+ // 鍙屽嚮鎿嶄綔鑾峰彇鏁版嵁鏂规硶
+ this.$refs.tableDialog.getDbList();
+
+ // 鏄剧ず瀵硅瘽妗�
+ this.$refs.tableDialog.visible = true;
+ }
+ });
+ } else {
+ const params = {
+ id: row.id,
+ viType: row.viType
+ };
+
+ getPortalVIById(params).then(res => {
+ if (res.data.code === 200) {
+ const data = res.data.obj.prm.prmItemList;
+
+ const updatedData = data.map(item => {
+ const {itemField, ...rest} = item;
+ return {
+ text: itemField,
+ ...rest
+ };
+ });
+ this.$refs.formDialog.formList = updatedData;
+ this.$refs.formDialog.getTreeList();
+ this.$refs.formDialog.topForm.viName = res.data.obj.viName;
+ this.$refs.formDialog.topForm.columnNumber = this.getValueBasedOnInput(res.data.obj.prm.showCols);
+
+ this.$refs.formDialog.visible = true;
+ }
+ })
+ }
+ },
+
+ // 鏍规嵁浼犲叆姣忚鍒楁暟 鏉ュ垽鏂璭l-col :span鏄灏�
+ getValueBasedOnInput(val) {
+ const n = JSON.parse(val ? val : '3');
+ switch (n) {
+ case 1:
+ return 24;
+ case 2:
+ return 12;
+ case 3:
+ return 8;
+ case 4:
+ return 6;
+ case 5:
+ return 4;
+ case 6:
+ return 4;
+ case 7:
+ case 8:
+ return 3;
+ case 9:
+ return 2;
+ default:
+ return n > 10 ? 1 : 8; // 榛樿缁�8
+ }
+ },
+
+ // 鍚嶇О鏌ヨ
+ nameSearchHandler() {
+ if (!this.topName) {
+ this.data = this.defaultData;
+ return;
+ }
+
+ const list = this.data.filter(item => item.viName.includes(this.topName.trim()));
+ this.data = list;
+ },
+
+ // 鍒犻櫎鎸夐挳
+ deleteClickHandler() {
+ if (this.selectList.length <= 0) {
+ this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�');
+ return;
+ }
+ const params = {
+ ids: this.selectList.map(item => item.id).join(',')
+ }
+ deleteByIds(params).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success('鍒犻櫎鎴愬姛');
+ this.getRightPortalVIDatas();
+ }
+ })
+
+ },
+ rowDeleteHandler(row){
+ deleteByIds({ids:row.id}).then(res => {
+ if (res.data.code === 200) {
+ this.$message.success('鍒犻櫎鎴愬姛');
+ this.getRightPortalVIDatas();
+ }
+ })
+ },
+ // 澶氶��
+ selectChangeHandler(row) {
+ this.selectList = row;
+ },
+
+ // 琛岀偣鍑�
+ rowClickHandler(row) {
+ func.rowClickHandler(
+ row,
+ this.$refs.crud,
+ this.lastIndex,
+ (newIndex) => {
+ this.lastIndex = newIndex;
+ },
+ () => {
+ this.selectList = [];
+ }
+ );
+ },
+
+ // 瀵煎嚭
+ exportClickHandler() {
+ if (this.selectList.length <= 0) {
+ this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�');
+ return;
+ }
+
+ const params = {
+ ids: this.selectList.map(item => item.id).join(',')
+ }
+ exportExcel(params).then(res => {
+ func.downloadFileByBlobHandler(res);
+ this.$message.success('瀵煎嚭鎴愬姛');
+ }).catch(err => {
+ this.$message.error(err);
+ });
+ },
+
+ // 瀵煎叆
+ upLoadClickHandler() {
+ this.$refs.upload.visible = true;
}
}
}
@@ -139,7 +485,6 @@
.headerCon > .el-button:nth-child(7) {
margin-left: 0;
}
-
.smallBtn {
width: 82px;
--
Gitblit v1.9.3