123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 搜索 -->
|
||
<div class="search">
|
||
<u-input
|
||
v-model="keyWord"
|
||
placeholder="请输入搜索内容"
|
||
suffixIcon="search"
|
||
suffixIconStyle="color: #666"
|
||
shape="circle"
|
||
@blur="handleSearch"
|
||
></u-input>
|
||
</div>
|
||
<!-- 列表 -->
|
||
<div class="list-cont" v-for="(item, index) in tableList" :key="index">
|
||
<u-row justify="space-between" customStyle="margin-bottom: 10px; padding: 0 15px;">
|
||
<u-col span="6">
|
||
<div>{{ item.name }}</div>
|
||
</u-col>
|
||
<u-col span="6">
|
||
<div style="text-align: end; color: #999">{{ item.model }}</div>
|
||
</u-col>
|
||
</u-row>
|
||
<u-line style="margin-bottom: 5px"></u-line>
|
||
<div class="list-item">
|
||
<span>材料类型：</span>
|
||
<span>{{ item.type }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span>库存数量：</span>
|
||
<span style="color: #5ae725">{{ item.kcNum }}</span>
|
||
</div>
|
||
<div class="list-item">
|
||
<span>报废数量：</span>
|
||
<span style="color: #f9ae3d">{{ item.dbfNum }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<u-loadmore :status="status" line v-if="tableList.length > 0" />
|
||
|
||
<!-- 空状态 -->
|
||
<u-empty v-if="tableList.length == 0" mode="data"></u-empty>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getInventoryList } from '@/api/aqSafety'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyWord: '',
|
||
status: 'loadmore',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
tableList: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
handleSearch() {
|
||
this.pageSize = 10
|
||
this.getList()
|
||
},
|
||
async getList() {
|
||
try {
|
||
const params = {
|
||
encryptedData: JSON.stringify({ keyWord: this.keyWord }),
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize
|
||
}
|
||
console.log('🚀 ~ getList ~ params', params)
|
||
const res = await getInventoryList(params)
|
||
console.log('🚀 ~ getList ~ res', res)
|
||
this.tableList = res.data.list
|
||
this.total = res.data.total
|
||
} catch (error) {
|
||
console.log('🚀 ~ getList ~ error', error)
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
console.log('🚀 ~ onReachBottom ~ ')
|
||
if (this.total < 10 || this.total == this.tableList.length) {
|
||
this.status = 'nomore'
|
||
return
|
||
}
|
||
this.status = 'loading'
|
||
setTimeout(() => {
|
||
this.pageSize += 10
|
||
this.getList()
|
||
if (this.tableList.length != this.total) this.status = 'loadmore'
|
||
else this.status = 'nomore'
|
||
}, 500)
|
||
console.log('加载..', this.pageSize)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
padding: 15px;
|
||
background-color: #f8f8f8;
|
||
}
|
||
.search {
|
||
margin-bottom: 15px;
|
||
}
|
||
.list-cont {
|
||
padding: 15px 0;
|
||
margin-bottom: 15px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
||
|
||
.list-item {
|
||
padding: 5px 15px;
|
||
}
|
||
}
|
||
</style>
|