From e358d69fc18870584dd2d9f531910b7838ea27d9 Mon Sep 17 00:00:00 2001 From: wangting <wangting@vci-tech.com> Date: 星期四, 02 一月 2025 09:58:53 +0800 Subject: [PATCH] 调整行点击后的回调 --- Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/formDefine/index.vue | 569 +++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 538 insertions(+), 31 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 42ae94d..d15ee7b 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,15 +4,15 @@ <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"> + <span> <i class="el-icon-s-promotion"></i> {{ (node || {}).label }} </span> @@ -25,80 +25,588 @@ <el-main> <basic-container> + <div v-if="!tableStatus" style="display: flex;justify-content: left;margin-top: 15px"> + <el-button v-if="permissionList.addBtn" icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">澧炲姞</el-button> + <el-button v-if="permissionList.delBtn" icon="el-icon-delete" plain size="small" type="danger" @click="deleteClickHandler">鍒犻櫎</el-button> + <el-button v-if="permissionList.cloneBtn" icon="el-icon-document-add" plain size="small" type="primary" @click="copyClickHandler">鍏嬮殕 + </el-button> + <el-button v-if="permissionList.importBtn" icon="el-icon-upload2" plain size="small" type="primary" @click="upLoadClickHandler">瀵煎叆</el-button> + <el-button v-if="permissionList.exportBtn" icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">瀵煎嚭 + </el-button> + </div> <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> - </span> - <span style="display: flex; align-items: center;"> - <p - style="display: flex; align-items: center; margin: 0 10px 0 0;flex-shrink: 0;font-size: 14px">鍏嬮殕鐩爣锛�</p> - <el-input v-model="input" placeholder="璇疯緭鍏ュ唴瀹�" size="mini" style="margin-right: 10px;"></el-input> - <el-button plain size="mini" type="success">鍏嬮殕鐩爣</el-button> + <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> </div> </template> <template slot="menu" slot-scope="scope"> - <el-button icon="el-icon-edit" size="small" type="text" @click="editBtnClick(scope.row)">缂栬緫 + <el-button v-if="permissionList.editBtn" icon="el-icon-edit" size="small" type="text" @click="editBtnClick(scope.row)">缂栬緫 </el-button> - <el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">鍒犻櫎 + <el-button v-if="permissionList.delBtn" icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">鍒犻櫎 </el-button> </template> </avue-crud> - <div 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-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> - </div> </basic-container> </el-main> - <form-dialog ref="formDialog"></form-dialog> + <form-dialog ref="formDialog" :TreeNodeRow="this.nodeRow" :editRow="editRow" :treeRadio="treeRadio" + @updataTable="getRightPortalVIDatas"></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-dialog + v-dialogDrag + :visible.sync="cloneVisible" + append-to-body="true" + class="avue-dialog" + title="鍏嬮殕" + width="50%"> + <basic-container> + <div ref="TreeBox" style="height: calc(100vh - 294px);!important;"> + <!-- 宸︿晶鏍� --> + <div style="height: calc(100vh - 370px);"> + <div style="margin-bottom: 10px;display: flex;justify-content: center"> + <el-radio v-model="cloneTreeRadio" label="0" @input="cloneTreeRadioChange">涓氬姟绫诲瀷鏍�</el-radio> + <el-radio v-model="cloneTreeRadio" label="1" @input="cloneTreeRadioChange">閾炬帴绫诲瀷鏍�</el-radio> + </div> + <avue-tree ref="cloneTree" v-loading="cloneTreeLoading" :data="cloneTreeData" :option="treeOption" + @node-click="cloneTreeNodeClick"> + <span slot-scope="{ node, data }" class="el-tree-node__label"> + <span> + <i class="el-icon-s-promotion"></i> + {{ (node || {}).label }} + </span> + </span> + </avue-tree> + </div> + </div> + </basic-container> + <span slot="footer" class="dialog-footer"> + <el-button @click="cloneVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="cloneSaveHandler">纭� 瀹�</el-button> + </span> + </el-dialog> </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, getPortalVIById, deleteByIds, exportExcel, clone} from "@/api/UI/formDefine/api"; +import {getBizTypes} from "@/api/modeling/businessType/api"; +import {gridLink} from "@/api/modeling/linkType/api"; +import func from "@/util/func"; +import {mapGetters} from "vuex"; export default { name: "index", - components: {FormDialog}, + components: {FormDialog, TableDialog}, data() { return { + cloneTreeNode: {}, + cloneTreeRadio: '0', + cloneTreeData: [], + cloneTreeLoading: false, + cloneVisible: false, + 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, + calcHeight: -60, + 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: [], // 鐢ㄤ簬鏌ヨ鎭㈠鍘熷鍊�, + editRow: {}, + } + }, + created() { + this.getTreeList(); + }, + computed: { + ...mapGetters(["permission"]), + permissionList() { + return { + addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false), + delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false), + editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false), + exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false), + importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false), + cloneBtn: this.vaildData(this.permission[this.$route.query.id].clone, false), + }; + }, + tableStatus() { + return func.isEmptyObject(this.nodeRow); } }, methods: { + // 鍙充晶鏂板 addClickHandler() { if (!this.tableRadio) { this.$message.error('璇峰湪琛ㄦ牸涓婃柟閫夋嫨鏂板绫诲瀷'); return; } if (this.tableRadio === "0") { + this.editRow.id = ""; this.$refs.formDialog.visible = true; + this.$refs.formDialog.getTreeList(); + } else { + this.$refs.tableDialog.visible = true; + this.$refs.tableDialog.getDbList(); // 鍙屽嚮鎿嶄綔涓嬫媺鎺ュ彛 + this.$refs.tableDialog.getSearchSelectList(); // 閫夋嫨琛ㄥ崟涓嬫媺鎺ュ彛 + this.$refs.tableDialog.getFormSelect(); // 鏌ヨ妯℃澘涓嬫媺鎺ュ彛 } + }, + + // 鍒濆鍖栨爲璇锋眰 + 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 => { + this.treeLoading = false; + }); + }, + + // 宸︿晶涓氬姟绫诲瀷鍒囨崲 + 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; + this.treeLoading = false; + }); + } 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, + itemFieldWidthList: prmItem.itemFieldWidthList.map(item => { + return { + ...item, + $cellEdit: true, + } + }), + viName: res.data.obj.viName, + itemQtName: res.data.obj.prm.formQtName, + editNodeId: row.id, + itemOutFieldList: (prmItem.itemOutFieldList || []), + itemSearchFieldList: (prmItem.itemSearchFieldList || []).map(item => ({id: item})), + itemKeyFieldList: (prmItem.itemKeyFieldList || []), + searchNumber: '1', + 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.visible = true; + } + }); + } else { + const params = { + id: row.id, + viType: row.viType + }; + this.editRow = row; + 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.itemQtName = res.data.obj.prm.formQtName; + this.$refs.formDialog.topForm.columnNumber = this.getValueBasedOnInput(res.data.obj.prm.showCols); + this.$refs.formDialog.topForm.showColumn = 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.getRightPortalVIDatas(); + return; + } + + const list = this.defaultData.filter(item => item.viName.includes(this.topName.trim())); + this.data = list; + this.page.total = this.data.length; + }, + + // 鍒犻櫎鎸夐挳 + 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 = [row]; + } + ); + }, + + // 瀵煎嚭 + 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('瀵煎嚭鎴愬姛'); + }); + }, + + // 瀵煎叆 + upLoadClickHandler() { + this.$refs.upload.visible = true; + }, + + // 鍏嬮殕 + copyClickHandler() { + if (this.selectList.length <= 0) { + this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�'); + return; + } + + if (this.selectList.length > 1) { + this.$message.error('鍙兘閫夋嫨涓�鏉℃暟鎹�'); + return; + } + + this.cloneVisible = true; + this.cloneTreeLoading = 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.cloneTreeData = data; + this.cloneTreeLoading = false; + }).catch(error => { + this.cloneTreeLoading = false; + }); + }, + + // 鍏嬮殕鏍戠偣鍑� + cloneTreeNodeClick(row) { + this.cloneTreeNode = row; + }, + + // 鍏嬮殕鏍戠被鍨嬪垏鎹� + cloneTreeRadioChange(val) { + this.cloneTreeLoading = true; + 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.cloneTreeData = data; + this.cloneTreeLoading = false; + }); + } else { + gridLink().then(res => { + const data = res.data.data.map(item => { + item.id = item.name; + return item; + }); + this.cloneTreeData = data; + this.cloneTreeLoading = false; + }) + } + }, + + // 鏌ヨ琛ㄦ牸鏁版嵁璇︽儏 + searchDetail() { + return new Promise((resolve, reject) => { + const params = { + id: this.selectList[0].id, + viType: this.selectList[0].viType + }; + getPortalVIById(params).then(res => { + const obj = res.data.obj; + resolve(obj); + }).catch(error => { + reject(error); + }); + }); + }, + + // 鍏嬮殕淇濆瓨 + async cloneSaveHandler() { + if (func.isEmptyObject(this.cloneTreeNode)) { + this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹繘琛屽厠闅�'); + return; + } + const obj = await this.searchDetail(); + this.$prompt('璇疯緭鍏ュ厠闅嗘枃浠跺悕绉�', '鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + }).then(({value}) => { + const params = { + clonePortalVIDTOList: [ + { + viName: value, + typeName: this.cloneTreeRadio === '0' ? this.cloneTreeNode.id : this.cloneTreeNode.name, + typeFlag: this.cloneTreeRadio, + oldPortalVIDTO: {...obj} + } + ], + } + clone(params).then(res => { + if (res.data.code === 200) { + this.$message.success('鍏嬮殕鎴愬姛'); + this.cloneVisible = false; + } + }) + }).catch(() => { + this.$message({ + type: 'info', + message: '鍙栨秷杈撳叆' + }); + }); } } } @@ -138,7 +646,6 @@ .headerCon > .el-button:nth-child(7) { margin-left: 0; } - .smallBtn { width: 82px; -- Gitblit v1.9.3