From e5748ecbc12ea91d702e61af9a19667d19d19510 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期一, 29 五月 2023 17:55:16 +0800
Subject: [PATCH] 动态表格组件更新
---
Source/UBCS-WEB/src/components/code-dialog-page/referConfigCrudDialog.vue | 431 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 300 insertions(+), 131 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/code-dialog-page/referConfigCrudDialog.vue b/Source/UBCS-WEB/src/components/code-dialog-page/referConfigCrudDialog.vue
index 2ea5f05..54f330f 100644
--- a/Source/UBCS-WEB/src/components/code-dialog-page/referConfigCrudDialog.vue
+++ b/Source/UBCS-WEB/src/components/code-dialog-page/referConfigCrudDialog.vue
@@ -3,13 +3,13 @@
title="閫夋嫨鍙傜収閰嶇疆"
append-to-body
:visible.sync="isShowReferConfigCrud"
- width="94%"
+ width="95%"
id="refer-config-dialog"
style="height: 115vh; margin-top: -14vh; overflow-y: hidden">
<div style="width: 100%; overflow-y: auto; height: 70vh">
<el-row style="width: 100%; height:70%">
- <el-col style="width: 70%; height: 100%;">
- <basic-container style="width: 100%; ">
+ <el-col :style="toggleCrudWidth">
+ <basic-container style="width: 100%;">
<avue-crud :option="referConfigCrudOption"
class="refer-config-crud"
:page.sync="referConfigParams.referConfigPage"
@@ -17,9 +17,11 @@
:data="referConfigParams.referConfigData"
:ref= "referConfigParams.ref"
@row-click="referConfigRowClick"
- @selection-change="referConfigDataChange"
@search-change="referConfigSearchChange"
- @search-reset="referConfigSearchReset">
+ @search-reset="referConfigSearchReset"
+ @current-change="referConfigCurrentChange"
+ @size-change="referConfigSizeChange"
+ @on-load="referConfigOnload">
<template #radio="{row}">
<el-radio v-model="referConfigParams.referConfigSelectedRow"
:label="row.$index">
@@ -29,26 +31,38 @@
</avue-crud>
</basic-container>
</el-col>
- <el-col v-show="true" style="width: 30%; height: 100%;">
- <basic-container style="width: 100%;">
+ <el-col v-show="isShowForm" style="height: 100%; width: 30%;">
+ <basic-container style="width: 100%; height: 100vh; overflow-y: hidden">
<avue-form ref="refereConfigForm"
- style="height: 65vh;"
- :option="formOption"
- class="refer-confg-form"
- ></avue-form>
+ style="height: 65vh; overflow-y: auto;"
+ :option="formOption"
+ v-model="referConfigForm"
+ class="refer-confg-form">
+ </avue-form>
</basic-container>
</el-col>
</el-row>
- <el-row style="width: 100%; height:30%; margin-top: 130px">
- <basic-container style="width: 100%; height:100%;">
- <avue-crud :option="attrAndSrchCondOption"
- class="refer-attrorsrchcond-crud"
- :table-loading="attrAndSrchCondParams.attrAndSrchCondLoading"
- :data="attrAndSrchCondParams.attrAndSrchCondData"
- :ref= "attrAndSrchCondParams.ref"
- @row-click="attrAndSrchCondRowClick">
- </avue-crud>
- </basic-container>
+ <el-row style="width: 100%; height:30%; margin-top: 130px" v-show="srchCondParams.isShow && showAttrParams.isShow">
+ <el-col v-show="srchCondParams.isShow" style="width: 40%;">
+ <basic-container style="width: 100%; height:100%;">
+ <avue-crud :option="srchCondOption"
+ class="refer-srchcond-crud"
+ :table-loading="srchCondParams.srchCondLoading"
+ :data="srchCondParams.srchCondData"
+ :ref= "srchCondParams.ref">
+ </avue-crud>
+ </basic-container>
+ </el-col>
+ <el-col v-show="showAttrParams.isShow" style="width: 60%;">
+ <basic-container style="width: 100%; height:100%;">
+ <avue-crud :option="showAttrOption"
+ class="refer-attr-crud"
+ :table-loading="showAttrParams.showAttrLoading"
+ :data="showAttrParams.showAttrData"
+ :ref= "showAttrParams.ref">
+ </avue-crud>
+ </basic-container>
+ </el-col>
</el-row>
</div>
<div slot="footer" class="dialog-footer">
@@ -60,6 +74,7 @@
<script>
//import func from "@/util/func";
+import { getReferConfigPage } from "@/api/code/codeReferConfig";
export default {
name: "referConfigDialog",
props: {
@@ -69,7 +84,7 @@
isShowReferConfigCrud:false,
referConfigCrudOption: {
border: true,
- height: '56vh',
+ height: '45vh',
tip: false,
searchShow: true,
searchMenuSpan: 6,
@@ -118,7 +133,7 @@
},{
label: '鍙傜収绐楀彛绫诲瀷',
search: false,
- prop: 'typeText'
+ prop: 'typeText',
}
],
},
@@ -139,37 +154,72 @@
formOption: {
submitBtn: false,
emptyBtn: false,
- labelWidth: '110', //榛樿鏍囩瀹藉害
- column: [{
- label: '姣忛〉鏄剧ず鏉℃暟',
- prop: 'limit',
- span: 24,
- disabled: true,
- row: true,
- placeholder: ' ',
- },{
- label: '鎺掑簭瀛楁',
- prop: 'sortField',
- span: 24,
- disabled: true,
- row: true,
- placeholder: ' ',
- },{
- label: '鎺掑簭绫诲瀷',
- prop: 'sortType',
- span: 24,
- dicData: [{
- label: '鍗囧簭', value: 'asc'
- }, {
- label: '闄嶅簭', value: 'desc'
- }],
- type: 'select',
- disabled: true,
- row: true,
- placeholder: ' ',
- }
- ]
+ labelWidth: '150', //榛樿鏍囩瀹藉害
+ // 榛樿閰嶇疆灏变负鏍戝舰绫诲瀷锛屾敼浜嗕細鍑虹幇闂
+ column: [{
+ label: '鏍戝舰鐨勪笂绾у睘鎬�',
+ prop: 'parentFieldName',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ },{
+ label: '涓婄骇灞炴�у�煎搴斿睘鎬�',
+ prop: 'parentUsedField',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ },{
+ label: '鏍硅妭鐐圭殑鍊�',
+ prop: 'parentValue',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ },
+ {
+ label: '鏍戝姞杞芥柟寮�',
+ prop: 'loadType',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ dicData: [{
+ label: '鍏ㄩ儴', value: 'all'
+ }, {
+ label: '閫愮骇鍔犺浇', value: 'node'
+ }],
+ },{
+ label: '鏄惁鍙兘閫夋嫨鍙跺瓙鑺傜偣',
+ prop: 'onlyLeaf',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ },{
+ label: '鎺掑簭瀛楁',
+ prop: 'sortField',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ },{
+ label: '鎺掑簭绫诲瀷',
+ prop: 'sortType',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ dicData: [{
+ label: '鍗囧簭', value: 'asc'
+ }, {
+ label: '闄嶅簭', value: 'desc'
+ }],
+ },
+ ],
},
+ referConfigForm:{},
// 鎺掑簭绫诲瀷鐨勮〃鍗曢厤缃�
sortColumn:[{
label: '姣忛〉鏄剧ず鏉℃暟',
@@ -189,95 +239,98 @@
label: '鎺掑簭绫诲瀷',
prop: 'sortType',
span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
dicData: [{
label: '鍗囧簭', value: 'asc'
}, {
label: '闄嶅簭', value: 'desc'
}],
- type: 'select',
- disabled: true,
- row: true,
- placeholder: ' ',
}],
// 鏍戝舰绫诲瀷鐨勮〃鍗曢厤缃�
treeColumn:[{
label: '鏍戝舰鐨勪笂绾у睘鎬�',
prop: 'parentFieldName',
- span: 7,
- tip: '鏍戝舰灞曠ず鐨勬椂鍊欙紝涓婁笅绾у叧绯绘煡鎵剧殑灞炴�с��',
- tipPlacement: 'right',
- rules: [{
- required: true,
- message: "(鏍戝舰鐨勪笂绾у睘鎬�)蹇呭～椤逛笉鑳戒负绌�",
- trigger: "blur",
- }],
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
},{
label: '涓婄骇灞炴�у�煎搴斿睘鎬�',
prop: 'parentUsedField',
- span: 7,
- tip: '涓婄骇灞炴�у瓨鍌ㄧ殑鍊�,鏄笂绾ф暟鎹殑浠�涔堝睘鎬с�備竴鑸兘鏄痮id銆�',
- value: 'oid',
- tipPlacement: 'right',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
},{
label: '鏍硅妭鐐圭殑鍊�',
prop: 'parentValue',
- span: 7,
- tip: '鏍戝舰灞曠ず鐨勬椂鍊欙紝涓婄骇鐨勫�笺��',
- tipPlacement: 'right',
- },{
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
+ },
+ {
label: '鏍戝姞杞芥柟寮�',
prop: 'loadType',
- span: 7,
- value: 'all',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
dicData: [{
label: '鍏ㄩ儴', value: 'all'
}, {
label: '閫愮骇鍔犺浇', value: 'node'
}],
- type: 'select',
},{
label: '鏄惁鍙兘閫夋嫨鍙跺瓙鑺傜偣',
prop: 'onlyLeaf',
- span: 7,
- value: false,
- type: 'switch',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
},{
label: '鎺掑簭瀛楁',
prop: 'sortField',
- span: 7,
- //type: 'table',
- tip: '鏌ヨ鏁版嵁鏃剁殑鎺掑簭瀛楁',
- tipPlacement: 'right',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
},{
label: '鎺掑簭绫诲瀷',
prop: 'sortType',
- span: 7,
- type: 'select',
- value: 'asc',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
dicData: [{
label: '鍗囧簭', value: 'asc'
}, {
label: '闄嶅簭', value: 'desc'
}],
- },],
+ },
+ ],
// 骞冲彴绫诲瀷鐨勮〃鍗曢厤缃�
standColumn:[{
label: '鍙傝�冪殑UI涓婁笅鏂�',
prop: 'referContent',
- span: 7,
- tip: '鍙湁鍙傜収绐楀彛绫诲瀷鏄痵tand鏃舵墠蹇呴』璁剧疆,涓斿湪stand绫诲瀷涓嬫墠鑳界敓鏁�',
- tipPlacement: 'right',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
},
{
label: '骞冲彴鐨勮〃鏍肩紪鍙�',
prop: 'displayTable',
- span: 7,
- tip: '涓庡弬鐓х殑UI涓婁笅鏂囦簰鏂ワ紝鍙湁鍙傜収绐楀彛绫诲瀷鏄痵tand鏃舵墠蹇呴』璁剧疆锛屼笖鍦╯tand绫诲瀷涓嬫墠鑳界敓鏁�',
- tipPlacement: 'right',
+ span: 24,
+ disabled: true,
+ row: true,
+ placeholder: ' ',
}],
- // 鏄剧ず鐨勫睘鎬у拰鏌ヨ鏉′欢琛ㄦ牸鍖哄煙
- attrAndSrchCondOption: {
+ // 鏌ヨ鏉′欢琛ㄦ牸鍖哄煙
+ srchCondOption: {
border: true,
height: '40vh',
tip: false,
@@ -309,7 +362,36 @@
prop: 'filterValue',
}
],
- },{
+ },
+ ],
+ },
+ srchCondParams: {
+ ref: "srchCondCrud",
+ srchCondLoading: false,
+ srchCondData: [],
+ isShow: true,
+ },
+
+ //鏄剧ず鐨勫睘鎬ц〃鏍奸厤缃尯鍩�
+ showAttrOption: {
+ border: true,
+ height: '40vh',
+ tip: false,
+ searchShow: false,
+ searchMenuSpan: 6,
+ index: true,
+ selection: false,
+ menu: false,
+ addBtn: false,
+ refreshBtn: false,
+ searchShowBtn: false,
+ columnBtn: false,
+ dialogClickModal: false,
+ highlightCurrentRow: true,
+ align: 'center',
+ menuAlign: 'center',
+ column: [
+ {
label: '鏄剧ず鐨勫睘鎬�',
children: [
{
@@ -343,20 +425,42 @@
},{
label: 'js鏄剧ず浠ｇ爜',
prop: 'templet'
+ },{
+ label: '鏄惁蹇�熸煡璇�',
+ prop: 'isQuery'
}
]
},
],
},
- attrAndSrchCondParams: {
- ref: "attrOrSrchCondCrud",
- attrAndSrchCondLoading: false,
- attrAndSrchCondData: [],
+ showAttrParams: {
+ ref: "showAttrCrud",
+ showAttrLoading: false,
+ showAttrData: [],
+ isShow: true,
},
-
+
+ // 鏄惁鏄剧ず鍙樺姩鐨勮〃鍗曞尯鍩�
+ isShowForm: true,
+ toggleCrudWidth: {
+ height: '100%',
+ width: '70%',
+ },
+ defaultOrGridForm: ['limit','sortField','sortType'],
+ standForm: ['referContent','displayTable'],
+ treeForm: [
+ 'parentFieldName',
+ 'parentUsedField',
+ 'parentValue',
+ 'loadType',
+ 'onlyLeaf',
+ 'sortField',
+ 'sortType'
+ ],
}
},
methods: {
+
// 涓嬩竴姝ヨ杩涜鐨勬搷浣滈�夋嫨骞朵繚瀛樻垨閫夋嫨骞朵慨鏀�
selectedreferConfig(condition) {
// 褰撳墠閫変腑鐨勫弬鐓ч厤缃
@@ -366,34 +470,41 @@
return;
}
if(condition == "selectedSave"){
- console.log(currentSeletedRow);
+ //console.log(currentSeletedRow);
}else {
- console.log(currentSeletedRow);
+ //console.log(currentSeletedRow);
}
},
- referConfigOnload(page, params = {}){
- this.referConfigParams.referConfigLoading = true;
- this.referConfigParams.referConfigData = [
- {
- id: 'test',
- name: '娴嬭瘯',
- referType: 'test',
- textField: 'test',
- valueField: 'test',
- typeText:'榛樿閰嶇疆',
- },{
- id: 'test1',
- name: '娴嬭瘯1',
- referType: 'test1',
- textField: 'test1',
- valueField: 'test1',
- typeText:'骞冲彴閰嶇疆',
+ referConfigOnload(){
+ let refer = this.referConfigParams;
+ refer.referConfigLoading = true;
+ let param = {};
+ // 澶氫釜conditionMap杩欐牱浼犲弬
+ if(refer.referConfigQuery){
+ Object.keys(refer.referConfigQuery).forEach(key=>{
+ param['conditionMap['+key+']'] = refer.referConfigQuery[key];
+ });
+ }
+ getReferConfigPage(
+ refer.referConfigPage.currentPage,
+ refer.referConfigPage.pageSize,
+ param
+ ).then(res=>{
+ const data = res.data.data;
+ this.referConfigParams.referConfigPage.total = data.total;
+ this.referConfigParams.referConfigData = data.records;
+ this.referConfigParams.referConfigLoading = false;
+ //console.log(this.referConfigParams.referConfigData.length > 0);
+ if(this.referConfigParams.referConfigData.length > 0) {
+ this.$nextTick(() => {
+ this.$refs[this.referConfigParams.ref].doLayout()
+ this.referConfigParams.referConfigSelectedRow = 0;
+ this.$refs[this.referConfigParams.ref].setCurrentRow(this.referConfigParams.referConfigData[0]);
+ this.attrAndSrchCondOnload(this.referConfigParams.referConfigData[0]);
+ this.loadDefaultOrGridOrStandOrTreeForm(this.referConfigParams.referConfigData[0]);
+ })
}
- ];
- this.$nextTick(() => {
- this.$refs[this.referConfigParams.ref].doLayout()
- })
- this.referConfigParams.referConfigLoading = false;
+ });
},
referBtmTypeSizeChange(pageSize){
this.referConfigParams.referConfigPage.pageSize = pageSize;
@@ -402,27 +513,82 @@
this.referConfigParams.referConfigPage.currentPage = currentPage;
},
referConfigRowClick(row){
+ // 瀵瑰綋鍓嶉�変腑琛岃繘琛岃褰�
this.referConfigParams.referConfigSelectedRowData = row;
+ // 鍗曢�夋閫変腑
this.referConfigParams.referConfigSelectedRow = row.$index
this.attrAndSrchCondOnload(row);
+ this.loadDefaultOrGridOrStandOrTreeForm(row);
},
- referConfigDataChange(params, done){
+ referConfigSearchChange(params, done){
this.referConfigParams.referConfigQuery = params;
this.referConfigParams.referConfigPage.currentPage = 1;
- this.referConfigOnload(this.referConfigParams.referConfigPage, params);
+ this.referConfigOnload();
done();
},
referConfigSearchReset(){
this.referConfigParams.referConfigQuery = {};
this.referConfigOnload(this.referConfigParams.referConfigPage);
},
+ referConfigCurrentChange(currentPage){
+ this.referConfigParams.referConfigPage.currentPage = currentPage;
+ },
+ referConfigSizeChange(pageSize){
+ this.referConfigParams.referConfigPage.pageSize = pageSize;
+ },
+ // 鍔犺浇琛ㄥ崟鏄剧ず鍐呭
+ loadDefaultOrGridOrStandOrTreeForm(currentFormData){
+ if(currentFormData.type != 'tree' &
+ currentFormData.type != 'stand' &
+ currentFormData.type != 'default'&
+ currentFormData.type != 'grid') {
+ //鎺у埗鍙傜収閰嶇疆琛ㄦ牸鍜岃〃鍗曟樉绀烘瘮渚�
+ this.isShowForm = false;
+ this.toggleCrudWidth.width = '100%';
+ }else {
+ this.isShowForm = true;
+ this.toggleCrudWidth.width = '70%';
+ this.toggleFormOption(currentFormData);
+ }
+ //console.log(this.isShowForm);
+ //console.log(this.toggleCrudWidth.width);
+ },
+ // 鏍规嵁type鐨勫彉鍔ㄥ垏鎹㈣〃鍗曠殑閰嶇疆option
+ toggleFormOption(data){
+ //console.log(data);
+ let currentForm = '';
+ if(data.type=='default' || data.type=='grid'){
+ this.formOption.column = this.sortColumn;
+ currentForm = 'defaultOrGridForm'
+ }else if(data.type == 'stand'){
+ this.formOption.column = this.standColumn;
+ currentForm = 'standForm';
+ }else if(data.type == 'tree'){
+ this.formOption.column = this.treeColumn;
+ currentForm = 'treeForm'
+ }
+ this.referConfigForm = {},
+ console.log( this.formOption);
+ this[currentForm].forEach(item=>{
+ Vue.set(this.referConfigForm, item, data[item])
+ //this.referConfigForm = Object.assign(this.referConfigForm,{[item]:data[item]})
+ })
+ console.log(this.referConfigForm);
+ },
// 鏄剧ず鐨勫睘鎬у拰鏌ヨ鏉′欢鐩稿叧鏂规硶
attrAndSrchCondOnload(row){
- this.attrAndSrchCondParams.attrAndSrchCondLoading = true;
- this.attrAndSrchCondParams.attrAndSrchCondParams = row.attrAndSrchCondParams
- this.attrAndSrchCondParams.attrAndSrchCondLoading = false;
+ this.srchCondParams.srchCondLoading = true;
+ this.showAttrParams.showAttrLoading = true;
+ this.$nextTick(() => {
+ this.$refs[this.srchCondParams.ref].doLayout()
+ this.$refs[this.showAttrParams.ref].doLayout()
+ });
+ this.srchCondParams.srchCondData = row.codeSrchCondConfigVOS
+ this.showAttrParams.showAttrData = row.codeShowFieldConfigVOS
+ this.srchCondParams.srchCondLoading = false;
+ this.showAttrParams.showAttrLoading = false;
},
},
@@ -434,7 +600,10 @@
.refer-config-crud > .el-card > .el-card__body > .avue-crud__menu {
display: none!important;
}
- .refer-attrorsrchcond-crud > .el-card > .el-card__body > .avue-crud__menu {
+ .refer-srchcond-crud > .el-card > .el-card__body > .avue-crud__menu {
+ display: none!important;
+ }
+ .refer-attr-crud > .el-card > .el-card__body > .avue-crud__menu {
display: none!important;
}
--
Gitblit v1.9.3