From c07a9afa70e53ae54e3586d6cb982e215ad8cb29 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期五, 27 九月 2024 16:43:38 +0800 Subject: [PATCH] 整合代码添加校验 --- Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue | 382 ++++++++++++++++++++++++++++++------------------------ 1 files changed, 210 insertions(+), 172 deletions(-) diff --git a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue index 8638262..bba8a82 100644 --- a/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue +++ b/Source/plt-web/plt-web-ui/src/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/index.vue @@ -1,5 +1,5 @@ <template> - <basic-container> + <div> <avue-crud ref="crud" v-model="form" @@ -21,37 +21,24 @@ </el-button> </template> - <!-- eventKey鎿嶄綔鎸夐挳 --> - <template slot="eventButtonForm" slot-scope="scope"> - <div style="width: 100%;display: flex;justify-content: center"> - <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">鍒涘缓</el-button> - <el-button plain size="mini" type="danger" @click="formDataDelClickHandler">鍒犻櫎</el-button> - <el-button plain size="mini" type="primary" @click="moveUp">涓婄Щ</el-button> - <el-button plain size="mini" type="primary" @click="moveDown">涓嬬Щ</el-button> - </div> - </template> <!-- eventKey浠ュ強eventValue鏄剧ず鍖哄煙 --> <template slot="bottomValueForm" slot-scope="scope"> - <div style="height: 200px; width: 95%; border: 1px solid #bdbbbb;overflow-y: auto"> - <!-- 鍐呭 --> - <el-table - :data="FormData" - :highlight-current-row="true" - style="width: 100%" - @row-click="formDataRowClick"> - <el-table-column - align="center" - label="EventKey" - prop="eventKey"> - </el-table-column> - <el-table-column - align="center" - label="EventValue" - prop="eventValue"> - </el-table-column> - </el-table> - </div> + <avue-crud + :data="eventData" + :option="eventOption" + @row-click="formDataRowClick"> + <template slot="menuLeft" slot-scope="scope"> + <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">鍒涘缓</el-button> + </template> + + <template slot="menu" slot-scope="scope"> + <el-button plain size="mini" type="danger" @click="formDataDelClickHandler(scope.row)">鍒犻櫎</el-button> + <el-button plain size="mini" type="primary" @click="moveUp(scope.row)">涓婄Щ</el-button> + <el-button plain size="mini" type="primary" @click="moveDown(scope.row)">涓嬬Щ</el-button> + </template> + </avue-crud> </template> + <!-- 鍒囨崲鎼滅储绫诲瀷 婧愬璞� 鐩爣瀵硅薄鏄剧ずlabel鍒囨崲 --> <template slot="showTypeLabel" slot-scope="{}"> @@ -68,9 +55,9 @@ append-to-body="true" class="avue-dialog" title="閰嶇疆鎸夐挳" - width="70%" + width="75%" @close="dialogClose"> - <el-container> + <el-container v-loading="dialogLoading"> <el-header style="height: 40px !important;"> <div style="display: flex"> <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">娣诲姞 @@ -129,7 +116,12 @@ <el-form-item label="Action锛�" prop="Action"> <el-col :span="14"> - <el-input v-model="basicForm.actionOId" :readonly="disabledBtn"></el-input> + <div style="display: flex"> + <el-input v-model="basicForm.actionName" :readonly="disabledBtn"></el-input> + <el-button :disabled="disabledBtn" size="mini" style="margin-left: 10px" type="success" + @click="actionFoucus">閫夋嫨 + </el-button> + </div> </el-col> </el-form-item> @@ -168,10 +160,12 @@ <el-divider content-position="left">鍙傛暟淇℃伅</el-divider> <avue-crud ref="paramsCrud" + v-model="paramsForm" :data="paramsData" :option="paramsOption" style="margin-top: 20px" - @row-save="paramsRowSave"> + @row-save="paramsRowSave" + @row-update="paramsRowUpdate"> <template slot="menuLeft" slot-scope="scope"> <el-button :disabled="disabledBtn" icon="el-icon-plus" plain size="small" type="primary" @click="paramsRowAddClickHandler">鍒涘缓 @@ -179,6 +173,9 @@ </template> <template slot="menu" slot-scope="scope"> + <el-button :disabled="disabledBtn" icon="el-icon-edit" size="small" type="text" + @click="paramsRowEditHandler(scope.row)">淇敼 + </el-button> <el-button :disabled="disabledBtn" icon="el-icon-delete" size="small" type="text" @click="paramsRowDeleteHandler(scope.row)">鍒犻櫎 </el-button> @@ -190,80 +187,90 @@ </el-container> </el-container> </el-dialog> - </basic-container> + <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog> + </div> </template> <script> import basicOption from "@/util/basic-option"; import func from "@/util/func"; import { + getPLPageDefinations, getBtmDatasByPage, getPortalVIDatasByPage, getQTInfoDatasByPage, getTabButtons, addTapButton, - updateTapButton + updateTapButton, getTabByContextIdAndType } from "@/api/UI/uiDefine"; +import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action'; export default { props: { sourceData: { - type: Array, - default: () => [ - { - "controlPath": "", - "description": "", - "eventKey": "", - "eventMap": null, - "eventValue": "", - "expandCols": "", - "expandMode": "", - "extAttr": "", - "id": "ABAE25CE-867E-9C73-AC1A-B316FD91C65B", - "isShowImage": "", - "linkType": "parttodocument", - "name": "鎶�鏈枃浠�", - "navigatorType": "", - "orderField": "", - "orderMode": "", - "orientation": "", - "qryType": null, - "queryTemplateName": "QueryPartEngineeringTechnology", - "refTreeSet": "", - "returnRows": "", - "rootContent": "", - "searchTarger": "2", - "separator": "", - "seq": "1", - "showAbs": "", - "showContent": "", - "showContentRelation": "", - "showContentTable": "", - "showContentType": "", - "showExpression": "", - "showExpressionRoot": "", - "showLinkAbs": "", - "showType": "document", - "subUILayout": "", - "subUIObjType": "", - "tabPageOId": "98F9082F-BAF4-FB81-3230-32590B34A329", - "templateId": "PartEngineeringTechnology_list", - "templateType": "1", - "type": 3, - "uiLayout": null, - "uiParser": "", - "validity": "" - } - ] + type: Object, + default: () => { + } }, height: { type: String, default: () => "auto" } }, + components: { + actionDialog + }, name: "index", data() { return { + paramsForm:{}, + eventOption: { + ...basicOption, + addBtn: false, + editBtn: false, + delBtn: false, + refreshBtn: false, + highlightCurrentRow: true, + height: 200, + column: [ + { + label: 'EventKey', + prop: 'eventKey', + type: 'select', + value: 'SelectionEvent', + dicData: [ + { + label: 'SelectionEvent', + value: 'SelectionEvent' + }, + { + label: 'DBClickEvent', + value: 'DBClickEvent' + }, + { + label: 'ClickEvent', + value: 'ClickEvent' + } + ], + cell: true + }, + { + label: 'EventValue', + prop: 'eventValue', + cell: true, + rules: [ + { + required: true, + message: '璇疯緭鍏ventValue', + trigger: 'blur' + } + ] + } + ] + }, + eventData: [], + btnActionVisible: false, + dialogLoading: false, saveType: '', disabledBtn: true, paramsData: [], @@ -279,11 +286,27 @@ column: [ { label: '鍚嶇О', - prop: 'name' + prop: 'name', + span: 24, + rules: [ + { + required: true, + message: '璇疯緭鍏ュ悕绉�', + trigger: 'blur' + } + ] }, { label: '鍊�', - prop: 'value' + prop: 'value', + span: 24, + rules: [ + { + required: true, + message: '璇疯緭鍏ュ��', + trigger: 'blur' + } + ] } ] }, @@ -299,13 +322,7 @@ basicForm: { seq: 1 }, - treeData: [ - { - label: this.sourceData[0].name, - oId: 'parentNode', - children: [] - } - ], + treeData: [], treeOption: { menu: false, addBtn: false, @@ -320,7 +337,7 @@ btnDesignVisible: false, FormData: [], form: {}, - data: this.sourceData, + data: [], option: { ...basicOption, height: this.height, @@ -473,7 +490,6 @@ ], group: [ { - icon: 'el-icon-folder-opened', label: '', arrow: false, prop: 'group1', @@ -766,45 +782,15 @@ ] }, { - icon: 'el-icon-folder-opened', label: '', arrow: false, prop: 'group2', column: [ { - label: 'EventKey', - prop: 'eventKey', - type: 'select', - value: 'SelectionEvent', - dicData: [ - { - label: 'SelectionEvent', - value: 'SelectionEvent' - }, - { - label: 'DBClickEvent', - value: 'DBClickEvent' - }, - { - label: 'ClickEvent', - value: 'ClickEvent' - } - ], - }, - { - label: 'EventValue', - prop: 'eventValue', - labelWidth: 100 - }, - { - label: '', - prop: 'eventButton', - span: 24 - }, - { label: '', prop: 'bottomValue', - span: 24 + span: 24, + labelWidth: 10 }, ] } @@ -816,8 +802,33 @@ formDataRow: {}, } }, + watch: { + sourceData: { + handler(val) { + if (val && val.plOId) { + this.getTableList() + } else { + this.data = []; + } + }, + immediate: true, + deep: true + } + }, computed: {}, methods: { + //鑾峰彇鍒楄〃鏁版嵁 + getTableList() { + const params = { + pageContextOId: this.sourceData.plOId + } + getPLPageDefinations(params).then(res => { + this.data = res.data.data; + this.selectList = []; + this.$refs.crud.clearSelection(); + this.tableLoading = false; + }) + }, // 鏍规嵁涓嶅悓鍊煎尯鍒嗙被鍨� templateTypeValueHandler(val) { const componentMap = { @@ -854,6 +865,11 @@ // 澧炲姞 addClickHandler() { + console.log(this.sourceData); + if (!this.sourceData || !this.sourceData.plOId) { + this.$message.error('璇峰湪涓婃柟閫夋嫨涓�鏉℃暟鎹悗杩涜娣诲姞'); + return; + } this.$refs.crud.rowAdd(); }, @@ -864,41 +880,37 @@ // 瀵硅瘽妗嗚〃鏍兼坊鍔� formDataAddClickHandler() { - if (!this.form.eventKey) { - this.$message.error('璇烽�夋嫨EventKey'); - return; - } - - if (!this.form.eventValue) { - this.$message.error('璇疯緭鍏ventValue'); - return; - } - - if (this.FormData.length >= 1) { - const eventValueStatus = this.FormData.some(item => item.eventValue === this.form.eventValue); - - if (eventValueStatus) { - this.$message.error('宸插瓨鍦ㄧ浉鍚岀殑 EventValue锛屼笉鑳介噸澶嶆坊鍔�'); - return; - } - } + // if (!this.form.eventKey) { + // this.$message.error('璇烽�夋嫨EventKey'); + // return; + // } + // + // if (!this.form.eventValue) { + // this.$message.error('璇疯緭鍏ventValue'); + // return; + // } + // + // if (this.eventData.length >= 1) { + // const eventValueStatus = this.eventData.some(item => item.eventValue === this.form.eventValue); + // + // if (eventValueStatus) { + // this.$message.error('宸插瓨鍦ㄧ浉鍚岀殑 EventValue锛屼笉鑳介噸澶嶆坊鍔�'); + // return; + // } + // } const obj = { - index: this.FormData.length, - eventKey: this.form.eventKey, - eventValue: this.form.eventValue + index: this.eventData.length, + eventKey: this.form.eventKey || 'SelectionEvent', + eventValue: this.form.eventValue, + $cellEdit: true } - this.FormData.push(obj); + this.eventData.push(obj); }, // 瀵硅瘽妗嗚〃鏍煎垹闄� - formDataDelClickHandler() { - if (func.isEmptyObject(this.formDataRow)) { - this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹�'); - return; - } - - this.FormData = this.FormData.filter(item => item.index !== this.formDataRow.index); + formDataDelClickHandler(row) { + this.eventData = this.eventData.filter(item => item.index !== row.index); }, // 妯℃澘绫诲瀷鏄剧ず闅愯棌鏂规硶 @@ -957,22 +969,22 @@ }, // 涓婄Щ - moveUp() { - const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue); + moveUp(row) { + const index = this.findIndexByEventValue(this.eventData, row.eventValue); if (index > 0) { - // 浣跨敤 splice 鏂规硶鏉ユā鎷熶氦鎹� - const temp = this.FormData.splice(index - 1, 1, this.FormData[index])[0]; // 绉婚櫎 index-1 鐨勫厓绱狅紝骞跺湪鐩稿悓浣嶇疆鎻掑叆 index 鐨勫厓绱狅紝杩斿洖琚Щ闄ょ殑鍏冪礌 - this.FormData.splice(index, 1, temp); // 鍦� index 浣嶇疆鎻掑叆涔嬪墠琚Щ闄ょ殑鍏冪礌 + // 浣跨敤 splice 鏉ユā鎷熶氦鎹� + const temp = this.eventData.splice(index - 1, 1, this.eventData[index])[0]; // 绉婚櫎 index-1 鐨勫厓绱� 骞跺湪鐩稿悓浣嶇疆鎻掑叆 index 鐨勫厓绱� 杩斿洖琚Щ闄ょ殑鍏冪礌 + this.eventData.splice(index, 1, temp); // 鍦� index 浣嶇疆鎻掑叆涔嬪墠琚Щ闄ょ殑鍏冪礌 } }, // 涓嬬Щ - moveDown() { - const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue); - const length = this.FormData.length; + moveDown(row) { + const index = this.findIndexByEventValue(this.eventData, row.eventValue); + const length = this.eventData.length; if (index < length - 1) { - const temp = this.FormData[index]; - this.FormData.splice(index, 1, this.FormData.splice(index + 1, 1, temp)[0]); + const temp = this.eventData[index]; + this.eventData.splice(index, 1, this.eventData.splice(index + 1, 1, temp)[0]); } }, @@ -983,12 +995,8 @@ // 鎸夐挳璁捐 btnDesignClickHandler() { - if (this.selectList.length <= 0) { - this.$message.error('璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�'); - return; - } - if (this.selectList.length > 1) { - this.$message.error('鏈�澶氶�夋嫨涓�鏉℃暟鎹�'); + if (this.selectList.length != 1) { + this.$message.error('璇烽�夋嫨涓�鏉℃暟鎹�'); return; } this.btnDesignVisible = true; @@ -1004,7 +1012,11 @@ getTabButtons(params).then(res => { if (res.data.code === 200) { const data = res.data.data; - this.treeData[0].children = data; + this.treeData = [{ + label: this.selectList[0].name, + oId: 'parentNode', + children: data + }]; this.treeLoading = false; } else { this.$message.error('璇锋鏌ユ帶鍒跺彴閿欒'); @@ -1028,9 +1040,20 @@ this.paramsData.splice(row.$index, 1) }, + // 鎸夐挳璁捐淇℃伅鍙傛暟淇℃伅淇敼 + paramsRowEditHandler(row) { + this.$refs.paramsCrud.rowEdit(row); + }, + // 鎸夐挳璁捐鍙傛暟淇℃伅娣诲姞鎸夐挳 paramsRowAddClickHandler() { this.$refs.paramsCrud.rowAdd(); + }, + + // 鎸夐挳璁捐鍙傛暟淇℃伅淇敼淇濆瓨 + paramsRowUpdate(row, index, done, loading) { + this.paramsData.splice(index, 1, row); + done(); }, // 鎸夐挳璁捐鍙傛暟淇℃伅淇濆瓨 @@ -1064,7 +1087,7 @@ // 鎸夐挳璁捐淇敼 editClickBtnHandler() { if (func.isEmptyObject(this.nodeTreeRow)) { - this.$message.error('璇烽�夋嫨鑺傜偣杩涜娣诲姞'); + this.$message.error('璇烽�夋嫨鑺傜偣杩涜淇敼'); return; } @@ -1087,6 +1110,7 @@ // 鎸夐挳璁捐淇濆瓨 saveClickBtnHandler() { + this.dialogLoading = true; const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton; const bottomParams = {}; if (this.paramsData.length > 0) { @@ -1112,7 +1136,10 @@ this.getTabBtnTree(); this.basicForm = {}; this.paramsData = []; + this.dialogLoading = false; } + }).catch(err => { + this.dialogLoading = false; }) }, @@ -1141,6 +1168,17 @@ }); }); }, + + // 閫夋嫨action + actionFoucus() { + this.$refs.actionDialog.btnActionVisible = true; + }, + + // 淇濆瓨action + actionSaveHandler(val) { + this.$set(this.basicForm, 'actionName', val.plName); + this.$set(this.basicForm, 'actionOId', val.plOId); + } } } </script> -- Gitblit v1.9.3