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