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 | 271 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 245 insertions(+), 26 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 5509441..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
@@ -27,11 +27,14 @@
<basic-container>
<avue-crud
v-if="!tableStatus"
+ ref="crud"
:data="data"
:option="option"
:page.sync="page"
@size-change="sizeChange"
- @current-change="currentChange">
+ @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;">
@@ -40,7 +43,8 @@
</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
@@ -59,23 +63,28 @@
</avue-crud>
<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 {gridPortalVIDatas} from "@/api/UI/formDefine/api"
+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";
@@ -85,6 +94,16 @@
components: {FormDialog, TableDialog},
data() {
return {
+ tipList: [
+ "瀵煎叆涓氬姟绫诲瀷鍚嶇О涓嶅彲涓虹┖",
+ "瀵煎叆鍚嶇О涓嶅彲涓虹┖涓斿悕绉板彧鑳戒负鑻辨枃瀛楁瘝",
+ "涓婁紶鐨勬枃浠朵负鍘嬬缉鏂囦欢锛屼笖鍘嬬缉鏍煎紡浠呰兘涓簔ip鏍煎紡"
+ ],
+ upFileType: ['zip'],
+ fileUrl: 'api/portalVIController/importData',
+ lastIndex: null,
+ selectList: [],
+ topName: '',
page: {
currentPage: 1,
pageSize: 10,
@@ -119,8 +138,15 @@
treeRadio: "0",
treeData: [],
treeOption: {
- addBtn: false
- }
+ addBtn: false,
+ props: {
+ label: 'id',
+ value: 'id',
+ children: 'children'
+ }
+ },
+ dbClickList: [],
+ defaultData: [], // 鐢ㄤ簬鏌ヨ鎭㈠鍘熷鍊�
}
},
created() {
@@ -128,7 +154,7 @@
},
computed: {
tableStatus() {
- return func.isEmptyObject(this.nodeRow)
+ return func.isEmptyObject(this.nodeRow);
}
},
methods: {
@@ -138,8 +164,13 @@
this.$message.error('璇峰湪琛ㄦ牸涓婃柟閫夋嫨鏂板绫诲瀷');
return;
}
-
- this.tableRadio === "0" ? this.$refs.formDialog.visible = true : this.$refs.tableDialog.visible = true;
+ if (this.tableRadio === "0") {
+ this.$refs.formDialog.visible = true;
+ this.$refs.formDialog.getTreeList();
+ } else {
+ this.$refs.tableDialog.visible = true;
+ this.$refs.tableDialog.getDbList();
+ }
},
// 鍒濆鍖栨爲璇锋眰
@@ -147,12 +178,15 @@
this.treeLoading = true;
getBizTypes().then(res => {
const data = res.data.data.map(item => {
- item.label = item.attributes.id;
- return item;
+ this.processChildren(item); // 澶勭悊姣忎釜鑺傜偣
+ item.attributes.id = item.attributes.id;
+ return item.attributes; // 杩斿洖澶勭悊鍚庣殑 attributes
});
this.treeData = data;
this.treeLoading = false;
- })
+ }).catch(error => {
+ loading.close();
+ });
},
// 宸︿晶涓氬姟绫诲瀷鍒囨崲
@@ -162,16 +196,16 @@
if (val === "0") {
getBizTypes().then(res => {
const data = res.data.data.map(item => {
- item.label = item.attributes.id;
- return item;
+ this.processChildren(item); // 澶勭悊姣忎釜鑺傜偣
+ item.attributes.id = item.attributes.id;
+ return item.attributes; // 杩斿洖澶勭悊鍚庣殑 attributes
});
this.treeData = data;
- this.treeLoading = false;
- })
+ });
} else {
gridLink().then(res => {
const data = res.data.data.map(item => {
- item.label = item.name;
+ item.id = item.name;
return item;
});
this.treeData = data;
@@ -180,9 +214,19 @@
}
},
+ // 澶勭悊鏍戝舰缁撴瀯
+ 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) {
- console.log(row);
this.tableRadio = null;
this.nodeRow = row;
this.getRightPortalVIDatas(row);
@@ -197,15 +241,15 @@
// 鍙充晶 琛ㄦ牸 琛ㄥ崟 淇℃伅鏌ヨ
getRightPortalVIDatas() {
const params = {
- 'conditionMap[typeName]': this.treeRadio === '0' ? this.nodeRow.attributes.id : this.nodeRow.name,
+ '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 => {
- console.log(res);
if (res.data.code === 200) {
const data = res.data.data;
this.data = data;
+ this.defaultData = data;
this.page.total = res.data.total;
}
})
@@ -227,6 +271,182 @@
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;
+ }
}
}
</script>
@@ -265,7 +485,6 @@
.headerCon > .el-button:nth-child(7) {
margin-left: 0;
}
-
.smallBtn {
width: 82px;
--
Gitblit v1.9.3