4 changed files with 341 additions and 176 deletions
@ -0,0 +1,53 @@ |
|||
export const padListPageMixins = { |
|||
data() { |
|||
return{ |
|||
// searchForm:[],// 查询条件属性
|
|||
// searchFormData:null,//查询条件数据
|
|||
padListLoading:false,//页面加载
|
|||
padListData:[],//页面数据
|
|||
// 分页配置
|
|||
padListPager:{ |
|||
totalCount:null,//总条数
|
|||
pageSize:10,//当前页显示条数
|
|||
currentPage:0,//当前页
|
|||
totalPage:null,//总页
|
|||
}, |
|||
// 查询条件配置
|
|||
padListParams:{ |
|||
sorting: null, |
|||
maxResultCount: 10, |
|||
skipCount:0, |
|||
condition:{filters:null} |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
initPadParams(page){ |
|||
this.padListParams={ |
|||
sorting: null, |
|||
maxResultCount: this.padListPager.pageSize, |
|||
skipCount: this.padListPager.pageSize * (Number(page) - 1), |
|||
condition: { |
|||
filters: this.intSearchFilters(), |
|||
} |
|||
} |
|||
}, |
|||
// 查询条件拼接
|
|||
intSearchFilters(){ |
|||
let _filters = [] |
|||
this.searchForm.forEach(item => { |
|||
if(this.searchFormData[item.prop]){ |
|||
_filters.push( |
|||
{ |
|||
logic: 'And', |
|||
column: item.prop, |
|||
action: item.action || "==", |
|||
value: this.searchFormData[item.prop] |
|||
} |
|||
) |
|||
} |
|||
}); |
|||
return _filters |
|||
}, |
|||
} |
|||
} |
|||
@ -0,0 +1,243 @@ |
|||
<template> |
|||
<div class="padListPage"> |
|||
<!-- 搜索头部 --> |
|||
<div class="padListHeader"> |
|||
<div class="leftSearchHeader"> |
|||
<el-form :inline="true" :model="searchFormData" :size="'mini'"> |
|||
<el-form-item |
|||
v-for="(item,index) in searchForm" |
|||
:key="index" |
|||
:label="item.label" |
|||
> |
|||
<!-- input --> |
|||
<el-input |
|||
v-if="item.type == 'input'" |
|||
v-model="searchFormData[item.prop]" |
|||
:placeholder="item.label" |
|||
clearable |
|||
></el-input> |
|||
<!-- select --> |
|||
<el-select |
|||
v-if="item.type == 'select'" |
|||
v-model="searchFormData[item.prop]" |
|||
:placeholder="item.label" |
|||
> |
|||
<el-option |
|||
v-for="(opItem,opIndex) in item.options" |
|||
:key="opIndex" |
|||
:label="opItem.label" |
|||
:value="opItem.value" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="searchHandle">查询</el-button> |
|||
<el-button |
|||
v-for="(btnItem,btnIndex) in headerButton" |
|||
:key="btnIndex" |
|||
:type="btnItem.type" |
|||
v-show="typeof btnItem.hide == 'function' ? !btnItem.hide() : !btnItem.hide" |
|||
@click="headerButtonClick(btnItem,btnIndex)" |
|||
>{{ btnItem.label }}</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<el-button circle icon="el-icon-upload2" type="primary" class="pageToTop" @click="pageToTopHandle"></el-button> |
|||
</div> |
|||
<!-- 列表 --> |
|||
<div class="padListCard" v-show="padListPager.totalCount" id="padListCard"> |
|||
<div |
|||
class="padListRow" |
|||
v-for="(item,index) in padListData" |
|||
:key="index" |
|||
> |
|||
<!-- 主表 --> |
|||
<div class="mainDataBox"> |
|||
<curren-descriptions |
|||
:column="5" |
|||
:tabsDesTions="padMainColumn" |
|||
:propsData="item" |
|||
:labelStyle="{'margin-right':'5px'}" |
|||
></curren-descriptions> |
|||
</div> |
|||
<!-- 子表 todo：封装时候确定是否为子表直接显示数据--> |
|||
<div class="detailDataBox"> |
|||
<curren-descriptions |
|||
:column="4" |
|||
:tabsDesTions="padDeatilColumn" |
|||
:propsData="item.details[0]" |
|||
:labelStyle="{'margin-right':'5px'}" |
|||
></curren-descriptions> |
|||
</div> |
|||
<!-- 按钮 --> |
|||
<div class="listRowButtonBox"> |
|||
<el-button |
|||
v-for="(btnItem,btnIndex) in listRowButton" |
|||
:key="btnIndex" |
|||
:type="btnItem.type" |
|||
@click="headerButtonClick(btnItem,btnIndex)" |
|||
:size="'mini'" |
|||
>{{ btnItem.label }}</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- 无数据 --> |
|||
<el-empty v-show="!padListPager.totalCount || padListPager.totalCount<=0" description="暂无数据"></el-empty> |
|||
<!-- 页脚 --> |
|||
<div class="padListPager" v-if="padListPager.totalCount"> |
|||
<div v-loading="padListLoading" element-loading-text="拼命加载中">{{padListPager.currentPage}}/{{padListPager.totalPage}}</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getPageList } from "@/api/wms-api"; |
|||
import currenDescriptions from "@/components/currenDescriptions" |
|||
import { padListPageMixins } from "@/mixins/padListPageMixins" |
|||
export default { |
|||
name: 'padListPage', |
|||
components: { currenDescriptions }, |
|||
mixins: [ |
|||
padListPageMixins, |
|||
], |
|||
props:{ |
|||
// 列表链接 |
|||
listUrl: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
// 查询条件数据 |
|||
searchFormData:{ |
|||
type: Object, |
|||
default: null |
|||
}, |
|||
// 查询条件属性 |
|||
searchForm: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 头部其他自定义按钮 |
|||
headerButton: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 列表筛选条件 |
|||
filters: { |
|||
type: Array, |
|||
default: null |
|||
}, |
|||
// 主表数据配置 |
|||
padMainColumn: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 子表数据配置 |
|||
padDeatilColumn: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
// 列表每条数据的按钮区域 |
|||
listRowButton: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
}, |
|||
watch: { |
|||
// 配置值更改监听处理 |
|||
filters:{ |
|||
handler(val, oldVal) { |
|||
console.log(666,val) |
|||
}, |
|||
deep: true, |
|||
immediate: true, |
|||
}, |
|||
headerButton:{ |
|||
handler(val, oldVal) { |
|||
console.log(777,val) |
|||
}, |
|||
deep: true, |
|||
immediate: true, |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.initPage() |
|||
}, |
|||
methods: { |
|||
// 页面初始化 |
|||
initPage(){ |
|||
this.initPadParams(1) |
|||
this.getPadList() |
|||
let _this = this |
|||
document.getElementById("padListCard").addEventListener('scroll', function() { |
|||
_this.handleScroll() |
|||
}); |
|||
}, |
|||
// 回到顶部 |
|||
pageToTopHandle(){ |
|||
document.getElementById("padListCard").scrollTop = 0 |
|||
}, |
|||
// 滚动加载 |
|||
handleScroll(){ |
|||
let windowHeight = document.getElementById("padListCard").clientHeight; |
|||
let scrollHeight = document.getElementById("padListCard").scrollHeight; |
|||
let scrollTop = document.getElementById("padListCard").scrollTop; |
|||
if (scrollTop + windowHeight >= scrollHeight - 30) { |
|||
let page = Number(JSON.stringify(this.padListPager.currentPage + 1)) |
|||
if(Number(page) > Number(this.padListPager.totalPage))return |
|||
console.log('翻页') |
|||
this.initPadParams(page) |
|||
this.getPadList(page); |
|||
} |
|||
}, |
|||
getPadList(page=1){ |
|||
if(this.padListLoading)return |
|||
console.log('请求页数',page) |
|||
if(page != 1 && (Number(page) > Number(this.padListPager.totalPage)))return |
|||
if(page == 1){this.padListData = []} |
|||
this.padListLoading = true |
|||
console.log(21111,this.padListParams.skipCount) |
|||
getPageList(this.padListParams,this.listUrl,true).then(res => { |
|||
this.padListData = [ |
|||
...this.padListData, |
|||
...res.items, |
|||
]; |
|||
this.padListPager.totalCount = res.totalCount |
|||
this.padListPager.totalPage = Math.ceil(res.totalCount / this.padListPager.pageSize) |
|||
this.padListLoading = false |
|||
this.padListPager.currentPage = page |
|||
}).catch(err => { |
|||
this.padListLoading = false |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
// 查询按钮操作 |
|||
searchHandle(){ |
|||
this.getPadList() |
|||
}, |
|||
clearSearchHandle(){ |
|||
|
|||
}, |
|||
// 头部其他按钮点击事件 |
|||
headerButtonClick(item,index){ |
|||
this.$emit("headerButtonClick",item,index) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "@/styles/padMain.scss"; |
|||
</style> |
|||
Loading…
Reference in new issue