From 3d46014c56af4b86ee7613d255292e524657c00e Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期二, 24 十月 2023 14:39:25 +0800 Subject: [PATCH] 主题库全屏编辑-固定列 --- Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue | 115 ++++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 77 insertions(+), 38 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue b/Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue index adfb9af..9066963 100644 --- a/Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue +++ b/Source/UBCS-WEB/src/components/Theme/ThemeAttrCrud.vue @@ -23,7 +23,8 @@ </el-button-group> <el-button-group> <!-- 淇濆瓨--> - <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-check" plain size="small" + <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && editOpenFlag" icon="el-icon-check" plain + size="small" type="success" @click.prevent="addsHandler">淇濆瓨 </el-button> <!-- 棰勮鎺掑簭--> @@ -67,11 +68,14 @@ </el-button-group> <!-- 鏄惁寮�鍚紪杈� --> <el-button-group> - <el-button v-if="(!checkStatus|| crudLCStatus=='Editing') && !editOpenFlag && attrEditVisible == false && attrFlagChiledren==false" icon="el-icon-view" plain - size="small" - @click="editOpen">寮�鍚紪杈� + <el-button + v-if="(!checkStatus|| crudLCStatus=='Editing') && !editOpenFlag && attrEditVisible == false && attrFlagChiledren==false" + icon="el-icon-view" plain + size="small" + @click="editOpen">寮�鍚紪杈� </el-button> - <el-select v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" v-model="selectvalue" placeholder="璇烽�夋嫨" + <el-select v-if="(!checkStatus || crudLCStatus=='Editing') && editOpenFlag" v-model="selectvalue" + placeholder="璇烽�夋嫨" size="small"> <el-option v-for="item in selectoptions" @@ -300,8 +304,9 @@ <el-table v-if="this.crudArrayFlag" ref="referAttrCrud" v-loading="loading" + border :data="ProData" - :height="this.editStyleFlag? 800 : 343" + :height="this.tableHeight" style="width: 100%" @select="selectHandle" @cell-click="handleCellClicks" @@ -309,13 +314,13 @@ @row-click="rowClick" > <el-table-column - fixed + :fixed="!editStyleFlag ? 'left' : undefined" type="selection" width="55"> </el-table-column> <!--<el-table-column fixed label="搴忓彿" type="index" width="55"></el-table-column>--> <el-table-column v-for="(item,index) in this.option.column" v-if="item.edit !='referName'" :key="item.id" - :fixed="item.fixed" + :fixed="!editStyleFlag ? item.fixed : undefined" :formatter="formAttr" :label="item.label" :prop="item.prop" @@ -325,17 +330,20 @@ align="center" > <template slot-scope="{ row }"> - <el-input v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text' ||item.edit == 'refer' )" - :ref="'input' + row.oid" - v-show="!AddCellFlag" - v-model="row[item.prop]" - @blur="saveRows(row)" - ></el-input> - <el-input-number v-if="editingRows === row && editShows== item.prop && item.edit == 'number'" v-model="row[item.prop]" + <el-input + v-if="editingRows === row && editShows== item.prop && item.prop != 'codeDateFormat' && (item.edit == 'text' ||item.edit == 'refer' )" + v-show="!AddCellFlag" + :ref="'input' + row.oid" + v-model="row[item.prop]" + @blur="saveRows(row)" + ></el-input> + <el-input-number v-if="editingRows === row && editShows== item.prop && item.edit == 'number'" + v-model="row[item.prop]" :style="{width:(item.width-10)+'px'}" controls-position="right" size="small" @blur="saveRows"></el-input-number> - <el-select v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " slot="prepend" v-model="row[item.prop]" allow-create default-first-option + <el-select v-if="editingRows === row && editShows== item.prop && item.edit == 'select' " slot="prepend" + v-model="row[item.prop]" allow-create default-first-option filterable @blur="selectChangeHandler(item.editConfig,index)"> <el-option @@ -431,7 +439,7 @@ }, crudArrayFlag: { handler(newval, oldval) { - console.log('crudArrayFlag', newval) + // console.log('crudArrayFlag', newval) } }, crudArray: { @@ -455,16 +463,6 @@ } } }, - // editingRows:{ - // handler(newval,oldval){ - // if(newval){ - // const inputElement = document.querySelector(`#inputRef${newval.oid}`); - // if (inputElement) { - // inputElement.focus(); - // }; - // } - // } - // }, ProData: { handler(newval, oldval) { if (newval) { @@ -485,7 +483,7 @@ }, editOpenFlag: { handler(newval, oldval) { - console.log('editOpenFlag', newval) + // console.log('editOpenFlag', newval) }, deep: true, immediate: true @@ -494,8 +492,10 @@ }, data() { return { + //琛ㄦ牸楂樺害 + dynamicHeight: '', // 淇濆瓨鍗曞厓鏍肩姸鎬� - AddCellFlag:false, + AddCellFlag: false, //鍏ㄥ睆缂栬緫楂樺害鐘舵�� editStyleFlag: false, loading: false, @@ -642,6 +642,7 @@ addBtn: false, header: false, align: 'center', + columnBtn:false, menuAlign: 'center', column: [{ label: '', @@ -856,6 +857,7 @@ { label: "鍙傜収閰嶇疆", prop: "referConfig", + width: 105 }, { label: "绾ц仈鏌ヨ灞炴��", @@ -900,7 +902,7 @@ { label: "鍙栧�艰寖鍥�", prop: "valueArea", - }, + } ] }, // 瀛樺偍琛ㄦ牸鏁版嵁 @@ -1091,12 +1093,12 @@ { label: "灞炴�ц嫳鏂囧悕绉�", prop: "id", - width:100, + width: 100, }, { label: "灞炴�т腑鏂囧悕绉�", prop: "name", - width:100, + width: 100, }, { label: "闀垮害", @@ -1177,6 +1179,7 @@ List: [], option: { index: false, + columnBtn:false, border: true, editBtn: false, selection: true, @@ -1541,6 +1544,13 @@ }); return oids.join(","); }, + tableHeight() { + if (this.editStyleFlag) { + return '800px' + } else { + return 'calc(100vh - 595px)' + } + } }, mounted() { }, @@ -1802,7 +1812,7 @@ this.editOpenFlag = false; // 璋冪敤鐖剁粍浠朵慨鏀规寜閽姸鎬� this.$emit('editCloseChildren') - this.AddCellFlag=true; + this.AddCellFlag = true; }).catch(() => { this.$message.warning('淇濆瓨澶辫触锛岃鏌ョ湅鎺у埗鍙拌緭鍑猴紒') }); @@ -2024,7 +2034,13 @@ }, //鍒嗙被娉ㄥ叆淇濆瓨 injectAddHandle() { - const { classifyInvokeAttr, classifyInvokeAttrName, classifyInvokeLevel, classifyInvokeEditFlag, classifyNumber } = this.injectOption; + const { + classifyInvokeAttr, + classifyInvokeAttrName, + classifyInvokeLevel, + classifyInvokeEditFlag, + classifyNumber + } = this.injectOption; const data = { "娉ㄥ叆绫诲瀷": classifyInvokeAttr, @@ -2112,7 +2128,7 @@ this.editStyleFlag = true; this.attrEditVisible = true; this.attrFlag = true; - this.AddCellFlag=true; + this.AddCellFlag = true; } }, @@ -2126,7 +2142,7 @@ updataFormlaContent(val) { if (this.CurrentCell) { this.$set(this.CurrentCell, 'componentRule', val.replace(/"/g, '')) - this.componentRuleText= this.CurrentCell.componentRule + this.componentRuleText = this.CurrentCell.componentRule } else { this.$set(this.attrRow, 'componentRule', val.replace(/"/g, '')) } @@ -2143,12 +2159,12 @@ }, // 鎺掑簭 this.AddCellFlag=false; sortChange(val) { - console.log(val) + // console.log(val) }, //寮�鍚紪杈� editOpen() { this.editOpenFlag = true; - this.AddCellFlag=false; + this.AddCellFlag = false; }, //瀹氫箟涓�涓叧闂紪杈戠殑鏂规硶渚涘瓙缁勪欢浣跨敤 editClose() { @@ -2165,6 +2181,29 @@ </script> <style lang="scss" scoped> +//鍥哄畾鍒楅珮搴� +/deep/ .el-table__fixed { + height: calc(100vh - 612px)!important; +} +///deep/ .el-table__fixed[v-if='editStyleFlag'] { +// height: calc(100vh - 152px)!important; // 缂栬緫鐘舵�佷笅鐨勯珮搴� +//} +// 婊氬姩鏉℃牱寮忎慨鏀� +// 婊氬姩鏉$殑瀹藉害 +/deep/ .el-table__body-wrapper::-webkit-scrollbar { + height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓 + background: white; + border: white; + width: 10px; + +} +// 婊氬姩鏉$殑婊戝潡 +/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { + background-color: #ececec; + border-radius: 20px; + border: #ececec; +} + .app { /deep/ .el-button { //margin: 0 10px 10px 0; -- Gitblit v1.9.3