<template>
|
<view>
|
<PageHeader title="出库台账" @back="goBack" />
|
<view class="search-section">
|
<view class="search-bar">
|
<view class="search-input">
|
<up-input
|
class="search-text"
|
placeholder="请输入产品名称搜索"
|
v-model="productCategoryValue"
|
@change="reloadPage"
|
clearable
|
/>
|
</view>
|
<view class="filter-button" @click="reloadPage">
|
<up-icon name="search" size="24" color="#999"></up-icon>
|
</view>
|
</view>
|
</view>
|
<view class="tabs">
|
<uni-segmented-control :current="tabCurrent" :values="tabItems" @clickItem="switchTab" />
|
</view>
|
<!-- <button class="mini-btn" type="primary" size="mini" style="margin-left: 0;margin-right: 0;" @click="openForm({},'add')">新增入库</button> -->
|
<view v-if="contentList?.length !== 0" class="content">
|
<view v-if="tabCurrent === 0">
|
<block v-for="item in contentList" :key="item.id">
|
<view class="item-box item-box0">
|
<view class="item">
|
<view class="label">出库日期</view>
|
<view class="value">{{ item.createTime }}</view>
|
</view>
|
<view class="item">
|
<view class="label">产品名称</view>
|
<view class="value">{{ item.productCategory }}</view>
|
</view>
|
<view class="item">
|
<view class="label">产品高度</view>
|
<view class="value">{{ item.specificationModel }}{{ item.unit }}</view>
|
</view>
|
<view class="item">
|
<view class="label">出库数量/件</view>
|
<view class="value">{{ item.inboundNum }}</view>
|
</view>
|
<view class="item">
|
<view class="label">每件数量/支</view>
|
<view class="value">{{ item.boxNum }}</view>
|
</view>
|
<view class="item">
|
<view class="label">单价（元）/支</view>
|
<view class="value">{{ item.taxInclusiveUnitPrice }}</view>
|
</view>
|
<view class="item">
|
<view class="label">纸箱规格</view>
|
<view class="value">{{ item.cartonSpecifications }}cm</view>
|
</view>
|
<view class="item">
|
<view class="label">出库人</view>
|
<view class="value">{{ item.createBy }}</view>
|
</view>
|
<view class="item" style="justify-content: flex-end;">
|
<button class="mini-btn" type="warn" size="mini" style="margin-left: 0;margin-right: 0;" @click="deleteGoods(item)">删除</button>
|
</view>
|
</view>
|
</block>
|
<uni-load-more :status="loadMoreStatus"></uni-load-more>
|
</view>
|
<view v-if="tabCurrent === 1">
|
<block v-for="item in contentList" :key="item.id">
|
<view class="item-box item-box1">
|
<view class="item">
|
<view class="label">产品图片</view>
|
<view class="value">
|
<image class="img" :src="baseUrl + item.url" mode="aspectFill" lazy-load></image>
|
</view>
|
</view>
|
<view class="item">
|
<view class="label">出库日期</view>
|
<view class="value">{{ item.createTime }}</view>
|
</view>
|
<view class="item">
|
<view class="label">产品名称</view>
|
<view class="value">{{ item.productCategory }}</view>
|
</view>
|
<view class="item">
|
<view class="label">产品高度</view>
|
<view class="value">{{ item.specificationModel }}{{ item.unit }}</view>
|
</view>
|
<view class="item">
|
<view class="label">出库数量/件</view>
|
<view class="value">{{ item.inboundNum }}</view>
|
</view>
|
<view class="item">
|
<view class="label">每件数量/支</view>
|
<view class="value">{{ item.boxNum }}</view>
|
</view>
|
<view class="item">
|
<view class="label">单价（元）/支</view>
|
<view class="value">{{ item.taxInclusiveUnitPrice }}</view>
|
</view>
|
<view class="item">
|
<view class="label">纸箱规格</view>
|
<view class="value">{{ item.cartonSpecifications }}cm</view>
|
</view>
|
<view class="item">
|
<view class="label">出库人</view>
|
<view class="value">{{ item.createBy }}</view>
|
</view>
|
<view class="item" style="justify-content: flex-end;">
|
<button class="mini-btn" type="warn" size="mini" style="margin-left: 0;margin-right: 0;" @click="deleteGoods(item)">删除</button>
|
</view>
|
</view>
|
</block>
|
<uni-load-more :status="loadMoreStatus"></uni-load-more>
|
</view>
|
</view>
|
<view v-if="contentList?.length === 0" class="no-data">
|
<text>暂无数据</text>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, reactive, computed } from 'vue'
|
import { listPage, listPageByCustom,stockmanagementDel } from '@/api/inventoryManagement/dispatchLog.js'
|
import { onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
import config from '@/config'
|
const productCategoryValue = ref('')
|
const baseUrl = config.imgUrl
|
// tab相关
|
const tabItems = reactive(['采购出库', '成品出库'])
|
const tabCurrent = ref(0)
|
|
const switchTab = (e) => {
|
if (tabCurrent.value !== e.currentIndex) {
|
tabCurrent.value = e.currentIndex
|
}
|
productCategoryValue.value = ''
|
reloadPage()
|
}
|
|
// 返回上一页
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
|
// 分页相关
|
const pageParams = reactive({
|
size: 10,
|
current: 1
|
})
|
const totalSize = ref(0)
|
const noMore = computed(() => {
|
return contentList.value.length >= totalSize.value
|
})
|
const loading = ref(false)
|
const contentList = ref([])
|
const loadMoreStatus = computed(() => {
|
if (loading.value) {
|
return 'loading'
|
}
|
if (noMore.value) {
|
return 'noMore'
|
}
|
return 'more'
|
})
|
const loadPage = () => {
|
if (noMore.value || loading.value) {
|
return
|
}
|
pageParams.current += 1
|
getList()
|
}
|
const reloadPage = () => {
|
pageParams.current = 1
|
contentList.value = []
|
getList()
|
}
|
const deleteGoods = async (goods) => {
|
uni.showModal({
|
title: '提示',
|
content: '确定要删除该商品的出库台账吗？',
|
success: function (res) {
|
if (res.confirm) {
|
uni.showLoading({
|
title: '删除中...'
|
})
|
let params = {ids:[goods.id]}
|
stockmanagementDel(params).then(res => {
|
uni.hideLoading()
|
reloadPage()
|
})
|
}
|
}
|
})
|
}
|
const getList = async () => {
|
let getListApi = null
|
if (tabCurrent.value == 1) {
|
getListApi = listPageByCustom
|
} else if (tabCurrent.value == 0) {
|
getListApi = listPage
|
}
|
loading.value = true
|
let params = pageParams
|
if(productCategoryValue.value){
|
params.productCategory = productCategoryValue.value
|
}
|
let resp = await getListApi(params)
|
loading.value = false
|
if (resp.code != 200 || !resp.data) {
|
contentList.value = []
|
totalSize.value = 0
|
return
|
}
|
contentList.value = [...contentList.value, ...resp.data.records]
|
console.log(resp.data.records)
|
totalSize.value = resp.data.total
|
}
|
|
onReachBottom(() => {
|
loadPage()
|
})
|
onPullDownRefresh(() => {
|
reloadPage()
|
uni.stopPullDownRefresh()
|
})
|
onShow(() => {
|
reloadPage()
|
})
|
|
</script>
|
|
<style lang='scss' scoped>
|
.tabs {
|
box-sizing: border-box;
|
padding: 20rpx 40rpx;
|
}
|
|
.no-data {
|
text-align: center;
|
padding: 40px 20px;
|
color: #999;
|
font-size: 14px;
|
}
|
.item-box{
|
box-sizing: border-box;
|
margin: 20rpx;
|
padding: 20rpx;
|
border-radius: 10rpx;
|
background-color: #f5f5f5;
|
}
|
|
.item {
|
display: flex;
|
justify-content: space-between;
|
margin: 10rpx 0;
|
|
.label {}
|
|
.value {
|
.img {
|
width: 200rpx;
|
height: 200rpx;
|
background-color: #999;
|
border-radius: 10rpx;
|
}
|
}
|
}
|
// 浮动按钮样式
|
.fab-button {
|
position: fixed;
|
bottom: calc(30px + env(safe-area-inset-bottom));
|
right: 30px;
|
width: 56px;
|
height: 56px;
|
background: #2979ff;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-shadow: 0 4px 16px rgba(41, 121, 255, 0.3);
|
z-index: 1000;
|
}
|
@import '@/styles/sales-common.scss';
|
</style>
|
