273 lines
7.8 KiB
Vue
273 lines
7.8 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="content"><!-- @touchmove="touchmoveMethod" -->
|
|
<Navbar title="选择货品" :showRightText="false" :isBack="false" />
|
|
<view style="width: 100%;height: calc(100vh - 60px);">
|
|
<view class="search-form">
|
|
<uni-easyinput class="searchInput" placeholder="输入货品编码/名称" v-model="searchValue" suffixIcon="search"
|
|
@iconClick="search"
|
|
@keyup.enter.native="search"></uni-easyinput>
|
|
</view>
|
|
<uni-table ref="uniTable" :th-style="{backgroundColor:'#3c94fd'}" type="selection"
|
|
@selection-change="selectChange" border stripe empty-text="暂无更多数据">
|
|
<view class="tableHeader">
|
|
<uni-tr style="display:flex;width: 100%">
|
|
<uni-th align="center" style="width: 25vw">货品编码</uni-th>
|
|
<uni-th align="center" style="width: 25vw">货品名称</uni-th>
|
|
<uni-th align="center" style="width: 25vw">货品类别</uni-th>
|
|
<uni-th align="center" style="width: 25vw">计量单位</uni-th>
|
|
</uni-tr>
|
|
</view>
|
|
<scroll-view class="chronic-science" style="margin-top: 44px;overflow-y: auto;height: 68vh;" scroll-y="true"
|
|
@scrolltolower="onScrollTolower">
|
|
<uni-tr style="height: 64rpx;width: 100%;max-width: 100vw;"
|
|
:style="{display: 'flex',flexDirection: 'row',justifyContent: 'space-between'}"
|
|
v-for="(item,index) in tableList" :key="index">
|
|
<uni-td class="list_item">{{ item.materialCode }}</uni-td>
|
|
<uni-td class="list_item">{{ item.materialName }}</uni-td>
|
|
<uni-td class="list_item">{{ item.materialTypeName }}</uni-td>
|
|
<uni-td class="list_item">{{ item.unitName }}</uni-td>
|
|
</uni-tr>
|
|
</scroll-view>
|
|
</uni-table>
|
|
<view style="width: 100%;background: #ffffff;padding: 20rpx 0;height: 100rpx;position: sticky;bottom: 0;z-index: 99;">
|
|
<u-button
|
|
style="width:180rpx;background: linear-gradient( 270deg, #FFB679 0%, #EF882E 100%);border: 0;position: fixed;bottom: 20rpx;right: 10px;height:70rpx"
|
|
type="primary"
|
|
@click="navigateTo('/pages/enterAndExit/exit/add')">确认
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import UButton from '@/uni_modules/uview-ui/components/u-button/u-button.vue'
|
|
import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
|
|
import { getInBoundGoodsApi } from '@/api/enterExit'
|
|
import UniTr from '@/uni_modules/uni-table/components/uni-tr/uni-tr.vue'
|
|
import UniTd from '@/uni_modules/uni-table/components/uni-td/uni-td.vue'
|
|
import UniTh from '@/uni_modules/uni-table/components/uni-th/uni-th.vue'
|
|
import UniTable from '@/uni_modules/uni-table/components/uni-table/uni-table.vue'
|
|
|
|
export default {
|
|
components: { UniTable, UniTh, UniTd, UniTr, UniEasyinput, UButton },
|
|
data() {
|
|
return {
|
|
fontValue: uni.getStorageSync('fontSize') || 8,
|
|
tableList: [],
|
|
allChecked: false,
|
|
searchValue: '',
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
total: 0,
|
|
status: 'loadmore',
|
|
form: '',
|
|
selectList: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
console.log('options:', options)
|
|
this.form = options.form ? JSON.parse(decodeURIComponent(options.form)) : this.form
|
|
this.selectList = options.selectList ? JSON.parse(decodeURIComponent(options.selectList)) : []
|
|
console.log('form:', this.form)
|
|
this.getList()
|
|
},
|
|
onShow() {
|
|
},
|
|
methods: {
|
|
search() {
|
|
console.log('Searching for:', this.searchValue)
|
|
this.pageNum = 1
|
|
this.getList()
|
|
},
|
|
// 翻页
|
|
onScrollTolower() {
|
|
console.log(this.tableList.length)
|
|
if (this.total > this.tableList.length) {
|
|
this.pageNum++
|
|
this.getList()
|
|
}
|
|
},
|
|
//获取订单列表
|
|
async getList() {
|
|
console.log('获取列表')
|
|
let params = {
|
|
pageNum: this.pageNum,
|
|
pageSize: this.pageSize,
|
|
areaId: this.form.areaId,
|
|
warehouseId: this.form.warehouseId,
|
|
materialName: this.searchValue
|
|
}
|
|
try {
|
|
const res = await getInBoundGoodsApi(params)
|
|
console.log('?? ~ getList ~ res:', res)
|
|
this.total = Number(res.total)
|
|
if (this.pageNum == 1) {
|
|
this.tableList = res.rows
|
|
} else {
|
|
this.tableList.push(...res.rows)
|
|
}
|
|
this.tableList.map(item => {
|
|
item.checked = false
|
|
})
|
|
this.selectList.forEach(selectItem => {
|
|
this.tableList.map(item => {
|
|
if (item.materialId === selectItem.materialId) {
|
|
item.checked = true
|
|
item.fetchNum = selectItem.fetchNum
|
|
}
|
|
})
|
|
})
|
|
this.$nextTick(() => {
|
|
if (this.$refs.uniTable) {
|
|
this.tableList.forEach((item, index) => {
|
|
if (item.checked) {
|
|
this.$refs.uniTable.toggleRowSelection(index, true)
|
|
}
|
|
})
|
|
} else {
|
|
console.warn('uniTable未挂载或setSelection方法不存在')
|
|
}
|
|
})
|
|
this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
selectChange(e){
|
|
let arr = []
|
|
this.selectList = []
|
|
let selectedIndex = []
|
|
selectedIndex = e.detail.index
|
|
selectedIndex.forEach(i => {
|
|
if (!this.selectList.some(item => item.materialId === this.tableList[i].materialId)) {
|
|
this.selectList.push(this.tableList[i])
|
|
}
|
|
})
|
|
},
|
|
navigateTo(url) {
|
|
let pages = getCurrentPages();
|
|
let prePage = pages[pages.length - 2]; //上一个页面
|
|
prePage.$vm["getGoodData"]({
|
|
selectList: encodeURIComponent(JSON.stringify(this.selectList)),
|
|
form: JSON.stringify(this.form)
|
|
});
|
|
uni.navigateBack(-1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.uni-page-body {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
width: 100%;
|
|
.search-form {
|
|
display: flex;
|
|
width: 98%;
|
|
|
|
.searchInput {
|
|
width: 300px;
|
|
height: 40px;
|
|
margin-left: 10px;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC-Regular;
|
|
}
|
|
|
|
.searchBtn {
|
|
margin-left: 10px;
|
|
height: 35px;
|
|
}
|
|
}
|
|
|
|
}
|
|
.list_item {
|
|
width: 25vw;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: PingFang SC-Regular;
|
|
color: #453C37;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.text-area {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
color: #8f8f94;
|
|
}
|
|
/deep/ .tableHeader {
|
|
font-weight: bold;
|
|
color: #333;
|
|
background: #f8f8f8;
|
|
z-index: 20;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
}
|
|
|
|
/deep/ .uni-table-td[data-v-321f8e79] {
|
|
display: flex;
|
|
padding: 12px 10px;
|
|
font-size: 14px;
|
|
border-bottom: 1px #EBEEF5 solid;
|
|
font-weight: 400;
|
|
color: #606266;
|
|
line-height: 23px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/deep/ .tr-table--border[data-v-c2c83a8e] {
|
|
border-right: 1px #ebeef5 solid;
|
|
display: flex;
|
|
}
|
|
|
|
::v-deep .u-checkbox {
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
|
|
/deep/ uni-checkbox .uni-checkbox-input {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
|
|
border-color: #ddd;
|
|
color: #fff !important;
|
|
background-color: #3E34FF !important;
|
|
}
|
|
|
|
/deep/ uni-checkbox .uni-checkbox-input {
|
|
border-color: #ddd;
|
|
}
|
|
|
|
/deep/ uni-checkbox .uni-checkbox-input:hover {
|
|
border-color: #ddd;
|
|
}
|
|
/deep/.uni-table{
|
|
min-width: 0 !important;
|
|
}
|
|
</style>
|
|
|