From 0be86c7fea44ebbdafa3a7bef1add5a504432d5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=89=E8=99=B9=E7=9D=BF?= <297504645@qq.com> Date: Tue, 29 Aug 2023 16:00:02 +0800 Subject: [PATCH] =?UTF-8?q?=E9=AB=98=E7=BA=A7=E7=AD=9B=E9=80=89=E9=AB=98?= =?UTF-8?q?=E5=BA=A6=E8=87=AA=E9=80=82=E5=BA=94=E6=9B=B4=E6=94=B9=E5=BC=80?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/commonTabel-drawer/index.vue | 13 + .../components/searchOverall/index copy.vue | 611 ++++++++++++++++++ .../Fe/src/components/searchOverall/index.vue | 86 ++- .../searchOverall/style/index copy.scss | 83 +++ .../components/searchOverall/style/index.scss | 36 +- .../components/tablePagination/index copy.vue | 402 ++++++++++++ .../src/components/tablePagination/index.vue | 67 +- 7 files changed, 1240 insertions(+), 58 deletions(-) create mode 100644 Code/Fe/src/components/searchOverall/index copy.vue create mode 100644 Code/Fe/src/components/searchOverall/style/index copy.scss create mode 100644 Code/Fe/src/components/tablePagination/index copy.vue diff --git a/Code/Fe/src/components/commonTabel-drawer/index.vue b/Code/Fe/src/components/commonTabel-drawer/index.vue index b881c01..8412328 100644 --- a/Code/Fe/src/components/commonTabel-drawer/index.vue +++ b/Code/Fe/src/components/commonTabel-drawer/index.vue @@ -61,6 +61,7 @@
{ + if(this.$refs.tablePaginationForMX_Ref && this.$refs.tablePaginationForMX_Ref.doFreshTableLayout){ + this.$refs.tablePaginationForMX_Ref.doFreshTableLayout() + } + }) + }, // tabs 切换页 handleClick (val) { this.$emit("currenTabsChange", val);//父级获取当前的tab内容 @@ -602,6 +614,7 @@ export default { } } }) + this.doFreshTableLayout() }, // 递归 子级层级 recursion(val){ diff --git a/Code/Fe/src/components/searchOverall/index copy.vue b/Code/Fe/src/components/searchOverall/index copy.vue new file mode 100644 index 0000000..862d824 --- /dev/null +++ b/Code/Fe/src/components/searchOverall/index copy.vue @@ -0,0 +1,611 @@ + + + \ No newline at end of file diff --git a/Code/Fe/src/components/searchOverall/index.vue b/Code/Fe/src/components/searchOverall/index.vue index ac881f9..e4dbc57 100644 --- a/Code/Fe/src/components/searchOverall/index.vue +++ b/Code/Fe/src/components/searchOverall/index.vue @@ -8,14 +8,15 @@ >
-
-
高级筛选
+ >
--> + - -
- + 添加筛选条件 -
- -
- - {{ item.label }} - - - +
+
+ + + 添加筛选条件 + + + 收起筛选 + + +
+ +
+ + {{ item.label }} + + + +
@@ -208,6 +223,13 @@ export default { if(this.primarySearchOption.length <= 0){ this.changeSearchOverallShow(n) this.changeMoreListShow(n) + this.$nextTick(()=>{ + this.componentsHeight = this.getAllSearchInnerHeight() + 20 + // 收起 + if(!n && this.$parent.changeTableHeight){ + this.$parent.changeTableHeight() + } + }) return } // 有普通查询配置 @@ -308,7 +330,7 @@ export default { moreListbuttons: [ { label: "搜索", type: "primary", name: "moreList-search" }, { label: '重置', name: 'moreList-reset' }, - { label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true} + // { label:'收起筛选', name:'moreList-up', type: 'text', icon:'el-icon-arrow-up', iconRight:true} ], // 高级筛选数据列表/值 moreListData: {filters:[]}, @@ -382,6 +404,10 @@ export default { getSearchPrimaryHeight(){ return document.getElementsByClassName('searchPrimaryComponent')[0].clientHeight }, + // 获取普高级筛选的高度,外部也有使用，用于动画样式 + getAllSearchInnerHeight(){ + return this.$refs.searchOverallComponent_inner ? this.$refs.searchOverallComponent_inner.clientHeight : 0 + }, // 配置普通筛选自定义按钮 setPrimarySearchAllButton(){ let _more_btn = [{ @@ -505,7 +531,7 @@ export default { this.overallSearchFormClick({name:'moreList-deleteRow'}) }, // 高级筛选列表-添加筛选条件行 - moreListPush() { + moreListPush(handle) { let data = { logic: "And", column: "", @@ -514,6 +540,12 @@ export default { } this.moreListData.filters.push(data) this.overallSearchFormClick({name:'moreList-addRow'}) + if(handle){ + this.$nextTick(()=>{ + this.componentsHeight = this.getAllSearchInnerHeight() + 20 + this.$parent.changeTableHeight(this.getAllSearchInnerHeight()) + }) + } }, // 重置数据，高级（单纯节点显示数据，不重新查询接口） resetMoreListData(){ diff --git a/Code/Fe/src/components/searchOverall/style/index copy.scss b/Code/Fe/src/components/searchOverall/style/index copy.scss new file mode 100644 index 0000000..9ce0bbe --- /dev/null +++ b/Code/Fe/src/components/searchOverall/style/index copy.scss @@ -0,0 +1,83 @@ +.searchOverallComponent{ + height: 0; + transition:all 0.5s; + z-index: 1; + overflow: hidden; + + .border-outer{ + position: relative; + background: #f8f9fb; + padding: 10px 20px 0; + border: #eff0f2 solid 1px; + margin-bottom: 10px; + } + + .fullPageCover{ + position: absolute; + background: rgba(255, 255, 255, 0.2); + left: 0; + right: 0; + // height: calc(100vh - 200px); + cursor: no-drop; + } + + .moreListOuter{ + margin-top: 10px; + position: relative; + } + + ::v-deep .navFilter { + // display: flex; + // flex-direction: column; + // width: 100%; + // height: 100%; + max-height: 30vh; + overflow: auto; + + .el-form { + // flex: 1; + // padding-left: 100px; + // padding-right: 100px; + display: flex; + align-content: flex-start; + flex-wrap: wrap; + overflow: hidden; + overflow-y: auto; + + .el-row{ + margin: 0 !important; + margin-left: -5px !important; + } + + + .el-select{ + width: 100%; + } + } + } + + .title{ + padding: 10px 0 15px 0; + font-weight: bold; + color: #333; + } + + .moreListPush-btn { + width: 100%; + padding-left: 5px; + color: rgb(64, 158, 255); + + span { + cursor: pointer; + + &:hover { + color: blue; + } + } + } + + .moreListBaseBts{ + padding: 20px 0; + } + + } \ No newline at end of file diff --git a/Code/Fe/src/components/searchOverall/style/index.scss b/Code/Fe/src/components/searchOverall/style/index.scss index 3a04134..8794ede 100644 --- a/Code/Fe/src/components/searchOverall/style/index.scss +++ b/Code/Fe/src/components/searchOverall/style/index.scss @@ -31,7 +31,7 @@ // flex-direction: column; // width: 100%; // height: 100%; - max-height: 30vh; + max-height: 170px; overflow: auto; .el-form { @@ -62,22 +62,28 @@ color: #333; } - .moreListPush-btn { - width: 100%; - padding-left: 5px; - color: rgb(64, 158, 255); + .buttonsContent{ + justify-content: space-between; + display: flex; + padding-bottom: 20px; + width: 890px; + } + // .moreListPush-btn { + // width: 100%; + // padding-left: 5px; + // color: rgb(64, 158, 255); - span { - cursor: pointer; + // span { + // cursor: pointer; - &:hover { - color: blue; - } - } - } + // &:hover { + // color: blue; + // } + // } + // } - .moreListBaseBts{ - padding: 20px 0; - } + // .moreListBaseBts{ + // padding: 20px 0; + // } } \ No newline at end of file diff --git a/Code/Fe/src/components/tablePagination/index copy.vue b/Code/Fe/src/components/tablePagination/index copy.vue new file mode 100644 index 0000000..c0238bc --- /dev/null +++ b/Code/Fe/src/components/tablePagination/index copy.vue @@ -0,0 +1,402 @@ + + + \ No newline at end of file diff --git a/Code/Fe/src/components/tablePagination/index.vue b/Code/Fe/src/components/tablePagination/index.vue index 900316d..da65c71 100644 --- a/Code/Fe/src/components/tablePagination/index.vue +++ b/Code/Fe/src/components/tablePagination/index.vue @@ -25,6 +25,7 @@ :tableColumns="tableColumns" @overallSearchFormClick="overallSearchFormClick" :httpOverallSearchData="httpOverallSearchData" + :selectMaxHeight="selectMaxHeight" > @@ -48,7 +49,7 @@ :tableColumns="tableColumns | isTableColumns" :isShowIndex="isShowIndex" :selectionTable="tableSelection" - :setUTableHeight="setUTableHeight || uTableTopHeight" + :setUTableHeight="uTableTopHeight" @sortChange="sortChange" @handleSelectionChange="handleSelectionChange" @inlineDialog="inlineDialog" @@ -95,6 +96,11 @@ export default { type:String, default:'calc(90vh - 280px)' }, + // 筛选条件最大高度 + selectMaxHeight:{ + type: String, + default: '174px' + }, // 筛选高度 searchOverallCoverHeight:{ type: String, @@ -226,6 +232,7 @@ export default { rowDropVisible: false, // table 重新渲染所需key isUpdate: false, + appRemoveHeight:165, // 除去table的高度 uTableTopHeight:165, // table外部高度控制，用于点击筛选动画处理 @@ -265,6 +272,8 @@ export default { } }, mounted(){ + this.appRemoveHeight = this.setUTableHeight || 165 + this.uTableTopHeight = this.appRemoveHeight this.uTableOuterHeight = this.$refs.tablePaginationTableRef.getTableHeight() this.uTableOuterHeight_init = Number(JSON.stringify(this.uTableOuterHeight)) @@ -281,6 +290,12 @@ export default { }) }, methods: { + // 重新渲染表格 + doFreshTableLayout(){ + if(this.$refs.tablePaginationTableRef && this.$refs.tablePaginationTableRef.doFreshLayout){ + this.$refs.tablePaginationTableRef.doFreshLayout() + } + }, rowDrop(data,type) { this.$emit('rowDrop',data,type) this.$nextTick(()=>{ @@ -296,27 +311,47 @@ export default { if(this.primarySearchOption && this.primarySearchOption.length > 0){ this.$nextTick(()=>{ let _search_height = this.$refs.searchOverallRef.getSearchPrimaryHeight() - if(this.showSearchOverall){ - let _margin = 20 - this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin - setTimeout(()=>{ - this.uTableTopHeight += _search_height + _margin - },0) - }else{ - this.uTableOuterHeight = this.uTableOuterHeight_init - setTimeout(()=>{ - this.uTableTopHeight = 165 - },0) - } + this.changeTableHeight(_search_height) + // if(this.showSearchOverall){ + // let _margin = 20 + // this.uTableOuterHeight = this.uTableOuterHeight_init - _search_height - _margin + // setTimeout(()=>{ + // this.uTableTopHeight += _search_height + _margin + // },0) + // }else{ + // this.uTableOuterHeight = this.uTableOuterHeight_init + // setTimeout(()=>{ + // this.uTableTopHeight = 165 + // },0) + // } }) } - } + this.$nextTick(()=>{ + let _search_height = this.$refs.searchOverallRef.getAllSearchInnerHeight() + this.changeTableHeight(_search_height) + }) + } // 字段设置 else if (val == 'field') { this.rowDropVisible = !this.rowDropVisible } this.$emit("topbutton", val,item) }, + // 更改筛选时候的table高度问题 + changeTableHeight(minusHeight=0){ + if(this.showSearchOverall){ + let _margin = 20 + this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin + setTimeout(()=>{ + this.uTableTopHeight = minusHeight + this.appRemoveHeight + _margin + },0) + }else{ + this.uTableOuterHeight = this.uTableOuterHeight_init + setTimeout(()=>{ + this.uTableTopHeight = this.appRemoveHeight + },0) + } + }, // 快速搜索 - 搜索按钮 quicklySearchClick (val,option) { this.$emit("quicklySearchClick", val,option,this.$refs.searchOverallRef) @@ -354,8 +389,8 @@ export default { this.$emit('sortChange', data) }, //点击table操作列(左侧)按钮 - buttonOperationClick_left(row, index, label) { - this.$emit("buttonOperationClick_left", row, index, label); + buttonOperationClick_left(row, item, index) { + this.$emit("buttonOperationClick_left", row, item, index); }, //点击table操作列(右侧)按钮 buttonOperationClick_right(row, item, index) {