Browse Source

高级筛选高度优化处理

noToken
安虹睿 2 years ago
parent
commit
f8411642d8
  1. 7
      PC/InterFace.Dash/src/components/commonTabel-drawer/index.vue
  2. 46
      PC/InterFace.Dash/src/components/filterForDetailPage/index.vue
  3. 34
      PC/InterFace.Dash/src/components/searchOverall/index.vue
  4. 4
      PC/InterFace.Dash/src/components/searchOverall/style/index.scss
  5. 15
      PC/InterFace.Dash/src/components/tablePagination/index.vue
  6. 1
      PC/UI.WinIn.FasterZ.Job/src/components/commonTabel-drawer/index.vue
  7. 1
      PC/UI.WinIn.FasterZ.Job/src/components/filterForDetailPage/index.vue
  8. 6
      PC/UI.WinIn.FasterZ.Job/src/components/searchOverall/index.vue
  9. 2
      PC/UI.WinIn.FasterZ.Job/src/components/searchOverall/style/index.scss
  10. 15
      PC/UI.WinIn.FasterZ.Job/src/components/tablePagination/index.vue
  11. 3
      PC/UI.WinIn.FasterZ.Store/src/components/commonTabel-drawer/index.vue
  12. 37
      PC/UI.WinIn.FasterZ.Store/src/components/filterForDetailPage/index.vue
  13. 34
      PC/UI.WinIn.FasterZ.Store/src/components/searchOverall/index.vue
  14. 4
      PC/UI.WinIn.FasterZ.Store/src/components/searchOverall/style/index.scss
  15. 15
      PC/UI.WinIn.FasterZ.Store/src/components/tablePagination/index.vue

7
PC/InterFace.Dash/src/components/commonTabel-drawer/index.vue

@ -69,6 +69,7 @@
@rowDrop="rowDrop"
:searchOverallCoverHeight="'calc(100vh - 345px)'"
:rowSource="'detail_api'"
:selectMaxHeight="'116px'"
:rowMaxHeight="rowMaxHeight"
:totalCount="totalCountForDetail"
:MaxResultCount="MaxResultCount"
@ -164,6 +165,7 @@ import searchOverall from "@/components/searchOverall"
import currenButton from "@/components/currenButton"
import currenDescriptions from "@/components/currenDescriptions"
import currenTabs from "@/components/currenTabs"
import currenTable from "@/components/currenTable"
import pagination from "@/components/Pagination"
import rowDrop from "@/components/rowDrop/index.vue"
import * as allUrlOption from '@/utils/baseData/urlOption'
@ -175,6 +177,7 @@ export default {
currenButton,
currenDescriptions,
currenTabs,
currenTable,
searchOverall,
rowDrop
},
@ -380,8 +383,8 @@ export default {
methods: {
// -
getDetailList(data,successFn,errorFn){
//
if(data)this.PageListParams.condition.filters = []
//
let _hasId = false
this.PageListParams.condition.filters.forEach(item=>{
if(item.column == this.URLOption_masterId){
@ -577,7 +580,7 @@ export default {
this.zdyTableColumns = []
this.otherData = []
// this.firstTabs = val.name
// tab
// tab
// if (item.functionName == 'getListByItemcode') {
// let params = {
// itemCode: this.propsData.code

46
PC/InterFace.Dash/src/components/filterForDetailPage/index.vue

@ -1,5 +1,5 @@
<template>
<div class="filterForDetailPage" v-if="dialogShow">
<div class="filterForDetailPage" v-if="dialogShow">
<el-dialog
title="明细查询"
:visible.sync="dialogShow"
@ -30,6 +30,7 @@
:multipleSelection="multipleSelection"
:MaxResultCount="PageListParams.MaxResultCount"
:setUTableHeight="setUTableHeight"
:selectMaxHeight="'116px'"
@topbutton="topbutton"
@inlineDialog="inlineDialog"
@sortChange="sortChange"
@ -118,17 +119,17 @@
<el-table-column property="address" label="地址"></el-table-column>
</el-table> -->
</el-dialog>
</div>
</template>
<script>
import currenDescriptions from "@/components/currenDescriptions"
import { tableMixins } from "@/mixins/TableMixins";
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins";
import { LoadingMixins } from "@/mixins/LoadingMixins";
import { mixins } from "@/mixins/mixins";
import { filterSelectMixins } from '@/mixins/filter-Select'
import {getListDesById,getPageListForDetail} from "@/api/wms-api"
export default {
</div>
</template>
<script>
import currenDescriptions from "@/components/currenDescriptions"
import { tableMixins } from "@/mixins/TableMixins";
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins";
import { LoadingMixins } from "@/mixins/LoadingMixins";
import { mixins } from "@/mixins/mixins";
import { filterSelectMixins } from '@/mixins/filter-Select'
import {getListDesById,getPageListForDetail} from "@/api/wms-api"
export default {
name: 'filterForDetailPage',
mixins: [
tableMixins,
@ -203,6 +204,10 @@ export default {
data () {
return {
dialogShow:true,
// URLOption_detailList:allUrlOption[this.$route.name].detailListURL,//-
// URLOption_masterId:allUrlOption[this.$route.name].masterId || 'masterId',//-id
// URLOption_masterName:allUrlOption[this.$route.name].masterName,//-//-title
// URLOption_parent:allUrlOption[this.$route.name].parentURL ? allUrlOption[this.$route.name].parentURL : allUrlOption[this.$route.name].detailURL,//-
currenButtonData: [],//
operaButtons:[],//
showParentDialog:false,//
@ -311,10 +316,11 @@ export default {
// })
},
}
}
</script>
<style lang="scss">
.filterForDetailPage {
}
</script>
<style lang="scss">
.filterForDetailPage {
.mainTable-dialog{
.el-dialog{
height: calc(100% - 100px);
@ -324,9 +330,9 @@ export default {
min-height: 200px;
padding-bottom: 20px !important;
}
}
.filterForDetailPage-list{
}
.filterForDetailPage-list{
height: calc(100%);
overflow: auto;
}
</style>
}
</style>

34
PC/InterFace.Dash/src/components/searchOverall/index.vue

@ -1,11 +1,11 @@
<template>
<!-- 全面的筛选组件初级普通筛选 + 高级筛选按照配置来判断显示情况-->
<!-- todo:使用v-if每次重新赋值与接口查询保持一致 -->
<div
<!-- 全面的筛选组件初级普通筛选 + 高级筛选按照配置来判断显示情况-->
<!-- todo:使用v-if每次重新赋值与接口查询保持一致 -->
<div
class="searchOverallComponent"
:style="{height:componentsHeight+'px',overflow:isShowMoreList ? 'unset' : 'hidden'}"
v-show="isShow"
>
>
<div
class="border-outer"
ref="searchOverallComponent_inner"
@ -32,6 +32,7 @@
<!-- 高级筛选界面 -->
<div v-if="isShow && isShowMoreList" class="moreListOuter">
<curren-Form
:style="`--navFilterMaxHeight: ${selectMaxHeight};`"
class="navFilter"
size="medium"
labelWidth="0"
@ -206,11 +207,11 @@
</div>
</div>
</div>
</div>
</template>
<script>
import searchPrimary from "@/components/searchPrimary"
export default {
</div>
</template>
<script>
import searchPrimary from "@/components/searchPrimary"
export default {
name:'searchOverallComponent',
components: {
searchPrimary,
@ -259,6 +260,11 @@ export default {
}
},
props: {
//
selectMaxHeight:{
type: String,
default: '174px'
},
//
searchOverallCoverHeight:{
type: String,
@ -636,8 +642,8 @@ export default {
},
}
}
</script>
<style lang="scss" scoped>
@import "./style/index.scss";
</style>
}
</script>
<style lang="scss" scoped>
@import "./style/index.scss";
</style>

4
PC/InterFace.Dash/src/components/searchOverall/style/index.scss

@ -1,4 +1,4 @@
.searchOverallComponent{
.searchOverallComponent{
height: 0;
transition:all 0.5s;
z-index: 1;
@ -31,7 +31,7 @@
// flex-direction: column;
// width: 100%;
// height: 100%;
max-height: 170px;
max-height: var(--navFilterMaxHeight);
overflow: auto;
.el-form {

15
PC/InterFace.Dash/src/components/tablePagination/index.vue

@ -25,6 +25,7 @@
:tableColumns="tableColumns"
@overallSearchFormClick="overallSearchFormClick"
:httpOverallSearchData="httpOverallSearchData"
:selectMaxHeight="selectMaxHeight"
>
<!-- 插槽预留 -->
<slot name="searchPrimarySlot"></slot>
@ -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))
@ -328,12 +337,12 @@ export default {
let _margin = 20
this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin
setTimeout(()=>{
this.uTableTopHeight = minusHeight + 165 + _margin
this.uTableTopHeight = minusHeight + this.appRemoveHeight + _margin
},0)
}else{
this.uTableOuterHeight = this.uTableOuterHeight_init
setTimeout(()=>{
this.uTableTopHeight = 165
this.uTableTopHeight = this.appRemoveHeight
},0)
}
},

1
PC/UI.WinIn.FasterZ.Job/src/components/commonTabel-drawer/index.vue

@ -69,6 +69,7 @@
@rowDrop="rowDrop"
:searchOverallCoverHeight="'calc(100vh - 345px)'"
:rowSource="'detail_api'"
:selectMaxHeight="'116px'"
:rowMaxHeight="rowMaxHeight"
:totalCount="totalCountForDetail"
:MaxResultCount="MaxResultCount"

1
PC/UI.WinIn.FasterZ.Job/src/components/filterForDetailPage/index.vue

@ -30,6 +30,7 @@
:multipleSelection="multipleSelection"
:MaxResultCount="PageListParams.MaxResultCount"
:setUTableHeight="setUTableHeight"
:selectMaxHeight="'116px'"
@topbutton="topbutton"
@inlineDialog="inlineDialog"
@sortChange="sortChange"

6
PC/UI.WinIn.FasterZ.Job/src/components/searchOverall/index.vue

@ -32,6 +32,7 @@
<!-- 高级筛选界面 -->
<div v-if="isShow && isShowMoreList" class="moreListOuter">
<curren-Form
:style="`--navFilterMaxHeight: ${selectMaxHeight};`"
class="navFilter"
size="medium"
labelWidth="0"
@ -259,6 +260,11 @@ export default {
}
},
props: {
//
selectMaxHeight:{
type: String,
default: '174px'
},
//
searchOverallCoverHeight:{
type: String,

2
PC/UI.WinIn.FasterZ.Job/src/components/searchOverall/style/index.scss

@ -31,7 +31,7 @@
// flex-direction: column;
// width: 100%;
// height: 100%;
max-height: 170px;
max-height: var(--navFilterMaxHeight);
overflow: auto;
.el-form {

15
PC/UI.WinIn.FasterZ.Job/src/components/tablePagination/index.vue

@ -25,6 +25,7 @@
:tableColumns="tableColumns"
@overallSearchFormClick="overallSearchFormClick"
:httpOverallSearchData="httpOverallSearchData"
:selectMaxHeight="selectMaxHeight"
>
<!-- 插槽预留 -->
<slot name="searchPrimarySlot"></slot>
@ -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))
@ -328,12 +337,12 @@ export default {
let _margin = 20
this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin
setTimeout(()=>{
this.uTableTopHeight = minusHeight + 165 + _margin
this.uTableTopHeight = minusHeight + this.appRemoveHeight + _margin
},0)
}else{
this.uTableOuterHeight = this.uTableOuterHeight_init
setTimeout(()=>{
this.uTableTopHeight = 165
this.uTableTopHeight = this.appRemoveHeight
},0)
}
},

3
PC/UI.WinIn.FasterZ.Store/src/components/commonTabel-drawer/index.vue

@ -69,6 +69,7 @@
@rowDrop="rowDrop"
:searchOverallCoverHeight="'calc(100vh - 345px)'"
:rowSource="'detail_api'"
:selectMaxHeight="'116px'"
:rowMaxHeight="rowMaxHeight"
:totalCount="totalCountForDetail"
:MaxResultCount="MaxResultCount"
@ -579,7 +580,7 @@ export default {
this.zdyTableColumns = []
this.otherData = []
// this.firstTabs = val.name
// tab
// tab
// if (item.functionName == 'getListByItemcode') {
// let params = {
// itemCode: this.propsData.code

37
PC/UI.WinIn.FasterZ.Store/src/components/filterForDetailPage/index.vue

@ -1,5 +1,5 @@
<template>
<div class="filterForDetailPage" v-if="dialogShow">
<div class="filterForDetailPage" v-if="dialogShow">
<el-dialog
title="明细查询"
:visible.sync="dialogShow"
@ -30,6 +30,7 @@
:multipleSelection="multipleSelection"
:MaxResultCount="PageListParams.MaxResultCount"
:setUTableHeight="setUTableHeight"
:selectMaxHeight="'116px'"
@topbutton="topbutton"
@inlineDialog="inlineDialog"
@sortChange="sortChange"
@ -118,17 +119,17 @@
<el-table-column property="address" label="地址"></el-table-column>
</el-table> -->
</el-dialog>
</div>
</template>
<script>
import currenDescriptions from "@/components/currenDescriptions"
import { tableMixins } from "@/mixins/TableMixins";
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins";
import { LoadingMixins } from "@/mixins/LoadingMixins";
import { mixins } from "@/mixins/mixins";
import { filterSelectMixins } from '@/mixins/filter-Select'
import {getListDesById,getPageListForDetail} from "@/api/wms-api"
export default {
</div>
</template>
<script>
import currenDescriptions from "@/components/currenDescriptions"
import { tableMixins } from "@/mixins/TableMixins";
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins";
import { LoadingMixins } from "@/mixins/LoadingMixins";
import { mixins } from "@/mixins/mixins";
import { filterSelectMixins } from '@/mixins/filter-Select'
import {getListDesById,getPageListForDetail} from "@/api/wms-api"
export default {
name: 'filterForDetailPage',
mixins: [
tableMixins,
@ -315,10 +316,10 @@ export default {
// })
},
}
}
</script>
<style lang="scss">
.filterForDetailPage {
}
</script>
<style lang="scss">
.filterForDetailPage {
.mainTable-dialog{
.el-dialog{
@ -333,5 +334,5 @@ export default {
.filterForDetailPage-list{
height: calc(100%);
overflow: auto;
}
</style>
}
</style>

34
PC/UI.WinIn.FasterZ.Store/src/components/searchOverall/index.vue

@ -1,11 +1,11 @@
<template>
<!-- 全面的筛选组件初级普通筛选 + 高级筛选按照配置来判断显示情况-->
<!-- todo:使用v-if每次重新赋值与接口查询保持一致 -->
<div
<!-- 全面的筛选组件初级普通筛选 + 高级筛选按照配置来判断显示情况-->
<!-- todo:使用v-if每次重新赋值与接口查询保持一致 -->
<div
class="searchOverallComponent"
:style="{height:componentsHeight+'px',overflow:isShowMoreList ? 'unset' : 'hidden'}"
v-show="isShow"
>
>
<div
class="border-outer"
ref="searchOverallComponent_inner"
@ -32,6 +32,7 @@
<!-- 高级筛选界面 -->
<div v-if="isShow && isShowMoreList" class="moreListOuter">
<curren-Form
:style="`--navFilterMaxHeight: ${selectMaxHeight};`"
class="navFilter"
size="medium"
labelWidth="0"
@ -206,11 +207,11 @@
</div>
</div>
</div>
</div>
</template>
<script>
import searchPrimary from "@/components/searchPrimary"
export default {
</div>
</template>
<script>
import searchPrimary from "@/components/searchPrimary"
export default {
name:'searchOverallComponent',
components: {
searchPrimary,
@ -259,6 +260,11 @@ export default {
}
},
props: {
//
selectMaxHeight:{
type: String,
default: '174px'
},
//
searchOverallCoverHeight:{
type: String,
@ -636,8 +642,8 @@ export default {
},
}
}
</script>
<style lang="scss" scoped>
@import "./style/index.scss";
</style>
}
</script>
<style lang="scss" scoped>
@import "./style/index.scss";
</style>

4
PC/UI.WinIn.FasterZ.Store/src/components/searchOverall/style/index.scss

@ -1,4 +1,4 @@
.searchOverallComponent{
.searchOverallComponent{
height: 0;
transition:all 0.5s;
z-index: 1;
@ -31,7 +31,7 @@
// flex-direction: column;
// width: 100%;
// height: 100%;
max-height: 170px;
max-height: var(--navFilterMaxHeight);
overflow: auto;
.el-form {

15
PC/UI.WinIn.FasterZ.Store/src/components/tablePagination/index.vue

@ -25,6 +25,7 @@
:tableColumns="tableColumns"
@overallSearchFormClick="overallSearchFormClick"
:httpOverallSearchData="httpOverallSearchData"
:selectMaxHeight="selectMaxHeight"
>
<!-- 插槽预留 -->
<slot name="searchPrimarySlot"></slot>
@ -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))
@ -328,12 +337,12 @@ export default {
let _margin = 20
this.uTableOuterHeight = this.uTableOuterHeight_init - minusHeight - _margin
setTimeout(()=>{
this.uTableTopHeight = minusHeight + 165 + _margin
this.uTableTopHeight = minusHeight + this.appRemoveHeight + _margin
},0)
}else{
this.uTableOuterHeight = this.uTableOuterHeight_init
setTimeout(()=>{
this.uTableTopHeight = 165
this.uTableTopHeight = this.appRemoveHeight
},0)
}
},

Loading…
Cancel
Save