From 73dbe864eb18a1a4df4f41caed1dd128faf1b2ec Mon Sep 17 00:00:00 2001 From: ludc Date: 星期五, 02 六月 2023 19:11:27 +0800 Subject: [PATCH] 引用码段关于业务类型接口的联调,重复使用的界面抽离成单独组件 --- Source/UBCS-WEB/src/components/code-dialog-page/referConfigFormDialog.vue | 606 +++++++++--------------------------------------------- 1 files changed, 102 insertions(+), 504 deletions(-) diff --git a/Source/UBCS-WEB/src/components/code-dialog-page/referConfigFormDialog.vue b/Source/UBCS-WEB/src/components/code-dialog-page/referConfigFormDialog.vue index 24293a2..6a91563 100644 --- a/Source/UBCS-WEB/src/components/code-dialog-page/referConfigFormDialog.vue +++ b/Source/UBCS-WEB/src/components/code-dialog-page/referConfigFormDialog.vue @@ -141,38 +141,14 @@ <el-button @click="isShowReferConfigForm = false">鍙� 娑�</el-button> </div> - <el-dialog title="涓恒�愬弬鐓х殑涓氬姟绫诲瀷銆戦�夊彇鍊�" - append-to-body - :visible.sync="isShowReferBtmType" - width="70%" - destroy-on-close - @close="clearTableRowSelection('referType')" - style="height: 110vh; margin-top: -12vh; overflow-y: hidden"> - <avue-crud :option="selectionReferBtmTypeOption" - :table-loading="selectReferBtmTypeLoading" - :data="selectReferBtmTypeData" - :page.sync="selectReferBtmTypePage" - ref="selectReferBtmTypeCrud" - class="referBtmType-crud" - @row-click="referBtmTypeRowClick" - @search-change="referBtmTypeSearchChange" - @search-reset="referBtmTypeSearchReset" - @current-change="referBtmTypeCurrentChange" - @size-change="referBtmTypeSizeChange"> - <template #radio="{row}"> - <el-radio v-model="referBtmTypeSelectRow" - :label="row.$index"> - - </el-radio> - </template> - </avue-crud> - <div slot="footer" class="dialog-footer"> - <el-button type="primary" @click="selectedReferBtmType">纭� 瀹�</el-button> - <el-button @click="isShowReferBtmType = false">鍙� 娑�</el-button> - </div> - </el-dialog> + <!-- 瀵硅瘽妗�,涓恒�愬弬鐓у紩鐢ㄧ殑涓氬姟绫诲瀷銆戦�夊彇鍊煎璇濇 --> + <refer-btm-type-crud-dialog + :visible.sync="referBtmDialogParams.selectReferBtmSettingBox" + :ref="referBtmDialogParams.ref" + @echoReferBtmType="echoReferBtmType"> + </refer-btm-type-crud-dialog> - <el-dialog title="涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊�" + <!-- <el-dialog title="涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊�" append-to-body :visible.sync="isShowSortField" width="70%" @@ -200,7 +176,14 @@ <el-button type="primary" @click="selectedSortField">纭� 瀹�</el-button> <el-button @click="isShowSortField = false">鍙� 娑�</el-button> </div> - </el-dialog> + </el-dialog> --> + + <refer-select-btm-attr-dialog + title="涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊�" + :visible.sync="selectedBtmTypeAttrParams.selectedBtmTypeAttrSettingBox" + :ref="selectedBtmTypeAttrParams.ref" + @echoSelectedAttr="echoSelectedAttr"> + </refer-select-btm-attr-dialog> <el-dialog title="閫夋嫨鏄剧ず瀛楁" append-to-body @@ -461,212 +444,21 @@ activeName: 'first', //褰撳墠娲诲姩鐨則abs - //涓恒�愬弬鐓х殑涓氬姟绫诲瀷銆戦�夊彇鍊煎璇濇 - selectionReferBtmTypeOption: { - border: true, - height: '260', - tip: false, - //searchShow: false, - index: true, - selection: false, - menu: false, - addBtn: false, - refreshBtn: false, - searchShowBtn: false, - columnBtn: false, - dialogClickModal: false, - highlightCurrentRow: true, - align: 'center', - menuAlign: 'center', - column: [{ - label: '-', - prop: 'radio', - width: 60, - hide: false - },{ - label: '涓氬姟绫诲瀷缂栧彿', - width: 120, - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'id' - },{ - label: '涓氬姟绫诲瀷鍚嶇О', - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'name' - },{ - label: '鎻忚堪', - search: false, - prop: 'description' - }], + /** 鍙傜収寮曠敤鐨勪笟鍔$被鍨嬪璇濇鐩稿叧鍙傛暟 */ + referBtmDialogParams: { + ref: 'crudReferBtm', + selectReferBtmSettingBox: false, }, - selectReferBtmTypeLoading: false, - selectReferBtmTypeData: [], - selectReferBtmTypePage: { - pageSize: 10, - currentPage: 1, - total: 0 + /** 閫夋嫨鍏宠仈鐨勪笟鍔$被鍨嬪睘鎬х浉鍏崇殑瀵硅瘽妗嗙浉鍏冲弬鏁� */ + selectedBtmTypeAttrParams: { + ref: 'selectedBtmTypeAttrCrud', + selectedBtmTypeAttrSettingBox: false, }, - referBtmTypeQuery: {}, - isShowReferBtmType: false, - referBtmTypeSelectRowData: '', - referBtmTypeSelectRow: '', - - - // 涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊煎璇濇 - isShowSortField: false, - selectionSortFieldOption: { - border: true, - height: '220px', - tip: false, - //searchShow: false, - index: true, - selection: false, - addBtn: false, - menu: false, - refreshBtn: false, - searchShowBtn: false, - columnBtn: false, - dialogClickModal: false, - highlightCurrentRow: true, - align: 'center', - menuAlign: 'center', - border: true, - column: [{ - label: '-', - prop: 'radio', - width: 60, - hide: false - },{ - label: '灞炴�ц嫳鏂囩紪鍙�', - width: 120, - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'id' - },{ - label: '灞炴�т腑鏂囧悕绉�', - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'name' - },{ - label: '灞炴�ч暱搴�', - search: false, - prop: 'attrLength' - },{ - label: '灞炴�х被鍨�', - search: false, - prop: 'attrType' - }], + seletedBtmTypeAttrOptions: { + title: '', //瀵硅瘽妗嗘樉绀虹殑鏍囬 + condition: '', //褰撳墠鎵撳紑瀵硅瘽妗嗙殑绫诲瀷 + btmTypeId: '', //鏌ヨ鏉′欢锛屼笟鍔$被鍨媔d }, - selectSortFieldLoading: false, - selectSortFieldData: [], - selectSortFieldPage: { - pageSize: 10, - currentPage: 1, - total: 0 - }, - sortFieldQuery: {}, - sortFieldSelectRow: '', - sortFieldSelectRowData: '', - - - //閫夋嫨鏄剧ず瀛楁 - isShowShowField: false, - selectionShowFieldOption: { - border: true, - height: '220px', - tip: false, - //searchShow: false, - index: true, - selection: true, - addBtn: false, - menu: false, - refreshBtn: false, - searchShowBtn: false, - columnBtn: false, - dialogClickModal: false, - highlightCurrentRow: true, - align: 'center', - menuAlign: 'center', - border: true, - column: [{ - label: '灞炴�ц嫳鏂囩紪鍙�', - width: 120, - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'id' - },{ - label: '灞炴�т腑鏂囧悕绉�', - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'name' - },{ - label: '灞炴�ч暱搴�', - search: false, - prop: 'attrLength' - },{ - label: '灞炴�х被鍨�', - search: false, - prop: 'attrType' - }], - }, - showFieldQuery: {}, - selectShowFieldLoading: false, - selectShowFieldData: [], - showFieldSelectList: [], - - //娣诲姞鏌ヨ鏉′欢 - isShowSearchCondition: false, - selectionSearchConditionOption: { - border: true, - height: '220px', - tip: false, - //searchShow: false, - index: true, - selection: true, - addBtn: false, - menu: false, - refreshBtn: false, - searchShowBtn: false, - columnBtn: false, - dialogClickModal: false, - highlightCurrentRow: true, - align: 'center', - menuAlign: 'center', - border: true, - column: [{ - label: '灞炴�ц嫳鏂囩紪鍙�', - width: 120, - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'id' - },{ - label: '灞炴�т腑鏂囧悕绉�', - search: true, - searchSpan: 8, - searchLabelWidth: 100, - prop: 'name' - },{ - label: '灞炴�ч暱搴�', - search: false, - prop: 'attrLength' - },{ - label: '灞炴�х被鍨�', - search: false, - prop: 'attrType' - }], - }, - selectSearchConditionLoading: false, - selectSearchConditionData: [], - searchConditionQuery: {}, - searchConditionSelectList: [], //涓婁竴娆$偣鍑荤殑琛岀紪杈戞暟鎹� preClickAttrRow: '', @@ -1340,28 +1132,7 @@ checkArrayIsUndefined(val){ return typeof val === 'array' && (val.length === 0 ||val === null || typeof val === 'undefined'); }, - // 鎵撳紑琛ㄦ牸閫夋嫨妗� - openSelectionTable(condition){ - if (condition == 'referType'){ - this.isShowReferBtmType = true; - this.referBtmTypeOnLoad(); - }else if (condition == 'sortField'){ - this.isShowSortField = true; - this.sortFieldOnLoad(); - }else { - if(this.form.referType == '' || this.form.referType == null){ - this.$message.warning("璇疯緭鍏ュ弬鐓х殑涓氬姟绫诲瀷") - return; - } - if(condition == 'addSearchCondition'){ - this.isShowSearchCondition = true; - this.selectSearchConditionDataOnload(); - }else { - this.isShowShowField = true; - this.selectShowFieldDataOnload(); - } - } - }, + // 娓呯┖琛ㄦ牸閫夋嫨妗� clearSelectionTable(condition){ if(condition == 'referType'){ @@ -1371,257 +1142,84 @@ this.form.sortField = ''; } }, - // 鍏抽棴瀵硅瘽妗嗘椂瀵归�変腑鍐呭杩涜娓呯┖锛屽苟瑙g粦鍏ㄥ眬鐩戝惉浜嬩欢 - clearTableRowSelection(condition){ + // 鎵撳紑琛ㄦ牸閫夋嫨妗� + openSelectionTable(condition){ + // 鎵撳紑閫夋嫨鍙傜収寮曠敤瀵硅瘽妗� + if (condition == 'referType'){ + this.referBtmDialogParams.selectReferBtmSettingBox = true; + // console.log(this.referBtmDialogParams.ref); + // 璋冪敤瀛愮粍浠跺埛鏂拌〃鏍兼暟鎹� + this.$refs[this.referBtmDialogParams.ref].referBtmOnLoad(); + return; + } + // 鎻愮ず + if(this.form.referType == '' || this.form.referType == null){ + this.$message.warning("璇疯緭鍏ュ弬鐓х殑涓氬姟绫诲瀷") + return; + } + let params = this.seletedBtmTypeAttrOptions; + params.btmTypeId = this.form.referType + // 閫夋嫨鎺掑簭瀛楁 if(condition == 'sortField'){ - this.sortFieldSelectRow = ''; - this.sortFieldSelectRowData = ''; - }else if(condition == 'referType'){ - this.referBtmTypeSelectRow=''; - this.referBtmTypeSelectRowData = ''; + params.title = '涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊煎璇濇'; + params.condition = 'sortField'; + }else if(condition == 'addSearchCondition'){ + // 閫夋嫨鏌ヨ鏉′欢 + params.title = '閫夋嫨鏌ヨ鏉′欢'; + params.condition = 'addSearchCondition'; + }else{ + // 閫夋嫨灞炴�� + params.title = '閫夋嫨鏄剧ず瀛楁'; + params.condition = 'selectAttr'; } - + this.$refs[this.selectedBtmTypeAttrParams.ref].selectedBtmTypeAttrOnLoad(params); + this.selectedBtmTypeAttrParams.selectedBtmTypeAttrSettingBox = true; + }, + + /** 涓恒�愬弬鐓у紩鐢ㄧ殑涓氬姟绫诲瀷銆戦�夊彇鍊间箣鍚庣殑鍐呭鍥炴樉鏃惰皟鐢� */ + echoReferBtmType(content){ + // 瀹炵幇鍥炴樉 + this.form.referTypeName = content.name; + this.form.referType = content.id; + }, + /** 鎺掑簭瀛楁銆佹樉绀虹殑灞炴�с�佹煡璇㈡潯浠剁殑琛ㄦ牸琛岄�夋嫨涔嬪悗鍥炴樉 */ + echoSelectedAttr(data){ + console.log(data); + // 涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊� + if(data.condition === 'sortField'){ + this.form.sortField = data.selectedArrary[0].id; + }else if(data.condition === 'addSearchCondition') { + data.selectedArrary.forEach(item => { + this.form.codeSrchCondConfigVOS.push( + { + filterField: item.id, + filterType: '=', + filterTypeText: item.name, + filterValue: '', + $cellEdit: false + } + ) + }) + }else{ + // 閫夋嫨鏄剧ず瀛楁 + data.selectedArrary.forEach(item => { + this.codeShowFieldConfigVOS.push( + { + field: item.id, + title: item.id, + fieldType: item.attrType, + fieldTypeText: item.attrTypeText, + sort: false, + attrSortField: item.id, + width: item.attrLength, + isquery: false, + $cellEdit: false + } + ) + }) + } }, - // 涓恒�愬弬鐓х殑涓氬姟绫诲瀷銆戦�夊彇鍊� - referBtmTypeOnLoad(page, params = {}){ - this.selectReferBtmTypeLoading = true; - // 璋冪敤api璇锋眰 - const data = { - total: 2, - data: [{ - id: 't2', - name: 'test2', - description: 'test2', - }, { - id: 't3', - name: 'test3', - description: 'test3', - }] - } - this.selectReferBtmTypeData = data.data; - this.selectReferBtmTypePage.total = data.total; - this.selectReferBtmTypeLoading = false; - }, - referBtmTypeSizeChange(pageSize){ - this.selectReferBtmTypePage.pageSize = pageSize; - }, - referBtmTypeSearchChange(params, done){ - this.referBtmTypeQuery = params; - this.selectReferBtmTypePage.currentPage = 1; - this.referBtmTypeOnLoad(this.page, params); - done(); - }, - referBtmTypeSearchReset(){ - this.referBtmTypeQuery = {}; - this.referBtmTypeOnLoad(this.selectReferBtmTypePage); - }, - referBtmTypeRowClick(row){ - this.referBtmTypeSelectRowData = row; - this.referBtmTypeSelectRow = row.$index - //console.log( this.referBtmTypeSelectRowData); - }, - referBtmTypeCurrentChange(currentPage){ - this.selectReferBtmTypePage.currentPage = currentPage; - }, - selectedReferBtmType(){ - if(!this.referBtmTypeSelectRowData) { - this.$message.warning("璇烽�夋嫨涓�鏉℃暟鎹�"); - return; - } - this.form.referTypeName = this.referBtmTypeSelectRowData.name; - this.form.referType = this.referBtmTypeSelectRowData.id; - this.isShowReferBtmType = false; - }, - - // 涓恒�愭帓搴忓瓧娈点�戦�夊彇鍊� - sortFieldOnLoad(page, params = {}){ - this.selectSortFieldLoading = true; - // 璋冪敤api璇锋眰 - const data = { - total: 2, - data: [{ - id: 'test', - name: '娴嬭瘯', - attrLength: 11, - attrType: '瀛楃涓�' - }, { - id: 'test1', - name: '娴嬭瘯1', - attrLength: 12, - attrType: '鏁板瓧' - }] - } - this.selectSortFieldData = data.data; - this.selectSortFieldPage.total = data.total; - this.selectSortFieldLoading = false; - }, - sortFieldSizeChange(pageSize){ - this.selectSortFieldPage.pageSize = pageSize; - }, - sortFieldSearchChange(params, done){ - this.sortFieldQuery = params; - this.selectSortFieldPage.currentPage = 1; - this.sortFieldOnLoad(this.page, params); - done(); - }, - sortFieldSearchReset(){ - this.sortFieldQuery = {}; - this.sortFieldOnLoad(this.selectSortFieldPage); - }, - sortFieldRowClick(row){ - this.sortFieldSelectRowData = row; - this.sortFieldSelectRow = row.$index - //console.log( this.sortFieldSelectRowData); - }, - sortFieldCurrentChange(currentPage){ - this.selectReferBtmTypePage.currentPage = currentPage; - }, - selectedSortField(){ - if(!this.sortFieldSelectRowData) { - this.$message.warning("璇烽�夋嫨涓�鏉℃暟鎹�"); - return; - } - this.form.sortField = this.sortFieldSelectRowData.id; - this.isShowSortField = false; - }, - - // 閫夋嫨鏄剧ず瀛楁 - selectShowFieldDataOnload(params = {}){ - this.selectShowFieldLoading = true; - // 璋冪敤api璇锋眰 - const data = { - total: 2, - data: [{ - id: 'test', - name: '娴嬭瘯', - attrLength: 11, - attrType: 'text', - attrTypeText: '鏂囨湰妗�' - }, { - id: 'test1', - name: '娴嬭瘯1', - attrLength: 12, - attrType: 'number', - attrTypeText: '鏁板瓧' - }, { - id: 'test2', - name: '娴嬭瘯2', - attrLength: 13, - attrType: 'date', - attrTypeText: '鏃ユ湡' - }] - } - this.selectShowFieldData = data.data; - this.selectShowFieldLoading = false; - }, - selectionShowFieldDataChange(list){ - this.showFieldSelectList = list; - this.$refs.selectShowFieldCrud.setCurrentRow(this.showFieldSelectList[list.length-1]); - }, - showFieldRowClick(row){ - //this.showFieldSelectList.push(row); - this.$refs.selectShowFieldCrud.setCurrentRow(row); - this.$refs.selectShowFieldCrud.toggleRowSelection(row); //閫変腑褰撳墠琛� - }, - showFieldSearchChange(params, done){ - this.showFieldQuery = params; - this.selectShowFieldDataOnload(params); - done(); - }, - showFieldSearchReset(){ - this.showFieldQuery = {}; - this.sortFieldOnLoad(); - }, - selectedShowField(){ - //console.log(this.showFieldSelectList); - if(this.showFieldSelectList.length <= 0) { - this.$message.warning("璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�"); - return; - } - //this.showFieldSelectList; - this.showFieldSelectList.forEach(item => { - this.codeShowFieldConfigVOS.push( - { - field: item.id, - title: item.id, - fieldType: item.attrType, - fieldTypeText: item.attrTypeText, - sort: false, - attrSortField: item.id, - width: item.attrLength, - isquery: false, - $cellEdit: false - } - ) - - }) - this.isShowShowField = false; - }, - - - // 閫夋嫨鏌ヨ鏉′欢 - selectSearchConditionDataOnload(params = {}){ - this.selectSearchConditionLoading = true; - // 璋冪敤api璇锋眰 - this.selectSearchConditionData = [{ - id: 'test', - name: '娴嬭瘯', - attrLength: 11, - attrType: '瀛楃涓�', - $cellEdit: false, - }, { - id: 'test1', - name: '娴嬭瘯1', - attrLength: 12, - attrType: '鏁板瓧', - $cellEdit: false, - }, { - id: 'test2', - name: '娴嬭瘯2', - attrLength: 13, - attrType: '鏃ユ湡', - $cellEdit: false, - }]; - this.selectSearchConditionLoading = false; - }, - searchConditionRowClick(row){ - this.$refs.selectSearchConditionCrud.setCurrentRow(row); - this.$refs.selectSearchConditionCrud.toggleRowSelection(row); //閫変腑褰撳墠琛� - }, - searchConditionDataChange(list){ - this.searchConditionSelectList = list; - this.$refs.selectSearchConditionCrud.setCurrentRow(this.searchConditionSelectList[list.length-1]); - }, - searchConditionSearchChange(params, done){ - this.searchConditionQuery = params; - this.selectSearchConditionDataOnload(params); - done(); - }, - searchConditionSearchReset(){ - this.searchConditionQuery = {}; - this.sortFieldOnLoad(); - }, - selectedSearchCondition(){ - // console.log(this.searchConditionSelectList); - if(this.searchConditionSelectList.length <= 0) { - this.$message.warning("璇疯嚦灏戦�夋嫨涓�鏉℃暟鎹�"); - return; - } - this.searchConditionSelectList.forEach(item => { - this.form.codeSrchCondConfigVOS.push( - { - filterField: item.id, - filterType: '=', - filterTypeText: item.name, - filterValue: '', - $cellEdit: false - } - ) - - }) - this.isShowSearchCondition = false; - }, } }; -- Gitblit v1.9.3