distribution-uni/package2/stock/addStockList.vue

<!-- 新增库存页 -->
<template>
	<view class="page1">
		<view class="content">
			<view class="content-box">
				<view class="shop-box" v-if="stock.delFlag == 0"
					style="width:100%;height:132rpx;border-bottom: 1px solid #eee;margin-bottom: 20rpx;">
					<u-grid :col="2" border>
						<u-grid-item index="add" @tap.stop="scanCodeAdd">
							<u-icon name="scan" size="36"></u-icon>
							<text>扫一扫</text>
						</u-grid-item>
						<u-grid-item @tap.stop="goodsAdd">
							<u-icon name="plus" size="28"></u-icon>
							<text>添加商品</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="shop-box" style="border-top:5px solid #eee;" v-for="(item,index) in stockList"
					:key="index">
					<view class="shop-name">
						<img class="img-radius" :src="item.productPicture" alt=""
							style="width: 140rpx;height: 140rpx;margin: 30rpx 0 0 30rpx;" v-if="item.productPicture">
						<view class="noPic" v-else>暂无图片</view>
						<view class="shop-productName">
							<view style="color:black;" v-if="item.productName!=null">品名：{{item.productName}}</view>
							<view style="color:black;">货号：{{item.productSn}}</view>
							<view style="color:#FF5809;" v-if="item.extraCount > 0">盘盈总数：{{item.extraCount}} 盘盈总额：{{item.extraTotal}}</view>
							<view style="color:blue;" v-if="item.lessCount > 0">盘亏总数：{{item.lessCount}} 盘亏总额：{{item.lessTotal}}</view>
							<view style="position: absolute;top: 30rpx;right: 30rpx;" @tap.stop="delShop(item)">
								<uni-icons color="red" type="trash" size="26"></uni-icons>
							</view>
						</view>
					</view>
					<view class="tui-order-content">
						<u-collapse>
							<u-collapse-item :title="'点击查看商品盘点详情'">
								<view
									style="display: flex;border-bottom: 1px solid #eee;height: 50rpx;line-height: 50rpx;">
									<view style="width: 60%;text-align: center;border-right: 1px solid #eee;">商品规格
									</view>
									<view style="width: 20%;text-align: center;">原数量</view>
									<view style="width: 20%;text-align: center;">盘点数</view>
								</view>
								<view v-for="(item1,index1) in item.checkStockAttributeVos" :key="index1">
									<view style='height: 50rpx;line-height: 50rpx;' :style="{color:item1.color}">
										<view
											style="width: 60%;text-align: center;border-right: 1px solid #eee;float: left;">
											{{item1.attributeList | sliceMsg}}
										</view>
										<view style="width: 20%;text-align: center;float: left;">
											{{item1.stockCount}}
										</view>
										<view style="width: 20%;text-align: center;float: left;">
											{{item1.pdNum}}
										</view>
									</view>
								</view>
							</u-collapse-item>
						</u-collapse>
					</view>
				</view>
			</view>
			<view class="content-box" style="margin-bottom:60rpx;">
				<view class="content-list" v-if="stock.delFlag == 1">
					<view class="list-name">备注：{{stock.remark == null ?'':stock.remark}}</view>
				</view>
				<view class="price-box-list" v-else>
					<view class="content-list">
						<view class="list-name">备注</view>
						<view class="">
							<textarea v-model="remark" />
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-loadmore :status="status" />
		<view class="bottom-box">
			<view class="bottom-left">
				<text>共盘点：{{znum}}款</text>
			</view>
			<view class="bottom-right" v-if="stock.delFlag == 0">
				<view class="bottom-btn" @tap='inventorySubmit'>确认盘点</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import {
		mapState
	} from 'vuex';
	import base from '@/utils/ossUploadFile/base64.js';
	export default {
		computed: mapState(['shopName']),
		data() {
			return {
				stockId: '',
				stockList: [],
				stock: [],
				status: 'loadmore',
				pages: 1,
				totalPages: 0,
				remark: '',
				znum:0,
			}
		},
		filters: {
			sliceMsg(val) {
				var name = ''
				if (typeof(val) == 'string') {
					let newObj = JSON.parse(val)
					for (let as in newObj) {
						name += newObj[as] + '/'
					}
				}
				return name;
			}
		},
		onShow() {
			this.pages = 1;
			this.stockList = []
			this.getStockList();
		},
		onLoad() {
			this.stockId = uni.getStorageSync('stockId')
		},
		onReachBottom() {
			if (this.pages >= this.totalPages) return;
			this.status = 'loading';
			this.pages ++
			this.getStockList();
		},
		methods: {
			// 获取
			getStockList() {
				this.tui.request("/app/checkStock/getCheckStock", "POST", {
					checkStockId: this.stockId,
					pageNum: this.pages,
					pageSize: 10
				}, false, false).then((res) => {
					if (res.code == 200) {
						this.stock = res.result
						this.znum = res.result.checkStockDetailVoList.total
						this.status = 'nomore';
						if (this.pages == 1) {
							this.stockList = res.result.checkStockDetailVoList.records
						} else {
							this.stockList = [...this.stockList, ...res.result.checkStockDetailVoList.records]
						}
						for(let i=0;i<res.result.checkStockDetailVoList.records.length;i++){
							let lessCount = 0
							let extraCount = 0
							for(let m=0;m<res.result.checkStockDetailVoList.records[i].checkStockAttributeVos.length;m++){
								res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].color = '#000'
								if(res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].pdNum - res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].stockCount > 0){
									res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].color = 'red'
									extraCount += res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].pdNum - res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].stockCount
								}else if(res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].pdNum - res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].stockCount < 0){
									res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].color = 'blue'
									lessCount += res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].stockCount - res.result.checkStockDetailVoList.records[i].checkStockAttributeVos[m].pdNum
								}
							}
							res.result.checkStockDetailVoList.records[i].lessCount = lessCount
							res.result.checkStockDetailVoList.records[i].lessTotal = (lessCount * res.result.checkStockDetailVoList.records[i].purchasePrice).toFixed(2)
							res.result.checkStockDetailVoList.records[i].extraCount = extraCount
							res.result.checkStockDetailVoList.records[i].extraTotal = (extraCount * res.result.checkStockDetailVoList.records[i].purchasePrice).toFixed(2)
						}
						this.totalPages = res.result.checkStockDetailVoList.pages
						this.carType = this.stockList.length
					} else {
						this.tui.toast(res.message)
					}

				}).catch((res) => {})
			},
			//通过商品id查询商品详细信息
			getById(id) {
				this.tui.request("/app/product/getById/" + id, "POST", {}, false, true).then((res) => {
					if (res.code == 200) {
						if (res.result.delFlag == 0 || res.result.purchasePrice == null || res.result
							.inStorageStatus == 0) {
							this.tui.toast("请将商品上架或入库后再操作！")
							return
						} else {
							uni.navigateTo({
								url: '/package2/stock/stockDetail?item=' + JSON.stringify(res.result)
							})
						}
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//扫一扫功能
			scanCodeAdd() {
				let that = this;
				uni.scanCode({
					success: (res) => {
						if (res.scanType == "QR_CODE") { //二维码

							let shopId = base.decode(res.result.split(',')[1])
							if (shopId == uni.getStorageSync('shopId').substring('10','12')) {
								that.productId = base.decode(res.result.split(',')[0])
								that.getById(base.decode(res.result.split(',')[0]));
								if (item.saleDetailDTOList) {
									for (let i = 0; i < item.saleDetailDTOList.length; i++) {
										that.carList.push(item.saleDetailDTOList[i])
									}
								}
							} else {
								that.tui.toast('您的店铺中暂无该商品！')
							}
						} else {
							that.productId = base.decode(res.result)
							that.tui.request("/app/product/getByBarcode", "POST", {
								barcode: res.result
							}, false, true).then((res1) => {
								if (res1.code == 200) {
									if (res1.result == '') {
										that.tui.toast('您的店铺中暂无该商品！')
									} else {
										that.getById(res1.result[0].id);
										if (item.saleDetailDTOList) {
											for (let i = 0; i < item.saleDetailDTOList.length; i++) {
												that.carList.push(item.saleDetailDTOList[i])
											}
										}
									}

								} else {
									that.tui.toast(res.message)
								}
							}).catch((res) => {
								that.tui.toast(res)
							})
						}

					},
					fail: (res) => {
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			goodsAdd() {
				uni.navigateTo({
					url: "/package2/stock/addStock"
				})
			},
			//删除整条商品
			delShop(item) {
				var that = this;
				let dataList = []
				var itemData;
				itemData = {
					checkStockId: uni.getStorageSync('stockId'),
					productId: item.productId,
					productName: item.productName,
					productPicture: item.productPicture,
					productSn: item.productSn,
					checkStockAttributeVos: []
				}
				dataList.push(itemData)
				uni.showModal({
					title: "提示",
					content: "确定删除此条商品吗？",
					success: function(res) {
						if (res.confirm) {
							that.tui.request("/app/checkStockDetail/addCheckStockDetail", "POST", dataList,
								false, false).then((res) => {
								if (res.code == 200) {
									that.getStockList()
								} else {
									that.tui.toast(res.message)
								}
							}).catch((res) => {})
						}

					}
				})

			},
			//确认盘点
			inventorySubmit() {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "请再次确认盘点信息是否正确，确认完成盘点吗？",
					success: function(res) {
						if (res.confirm) {
							that.tui.request("/app/checkStock/submitToStock", "post", {
								id: uni.getStorageSync('stockId'),
								remark: that.remark
							}, false, true).then((res) => {
								if (res.code == 200) {
									uni.showToast({
										title: "盘点成功",
										icon: 'none'
									})
									setTimeout(res => {
										uni.switchTab({
											url: '/pages/index/index'
										});
									}, 2000)

								} else {
									uni.showToast({
										title: "盘点失败",
										icon: 'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.page1 {
		height: 100%;
		font-size: 28rpx;
	}

	.content {
		border-top: 1px solid #eee;
		overflow-y: scroll;
		height: 100%;
	}

	.content-box {
		width: 100%;
		height: auto;
		background: #fff;
		margin-bottom: 20rpx;

	}

	.content-list {
		width: 95%;
		margin: 0 auto;
		display: flex;
		height: 80rpx;
		border-bottom: 1px solid #eee;
	}

	.content-list:last-child {
		border-bottom: none;
		height: auto;
	}

	.list-name {
		width: 200rpx;
		text-align: left;
		line-height: 80rpx;
		height: 80rpx;
		padding-left: 20rpx;
	}

	.list-val {
		width: 560rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.list-val input {
		width: 400rpx;
		height: 60rpx;
		display: inline-block;
		line-height: 60rpx;
		float: left;
		margin-top: 10rpx;
		padding-left: 20rpx;
		border-bottom: 1px solid #088FEB;
	}

	.uni-data-select {
		width: 80%;
		text-align: center;
	}

	.uni-select {
		border: none !important;
		border-radius: 0 !important;
	}

	.uni-select__input-placeholder {
		color: #6a6a6a;
		font-size: 28rpx !important;
		width: 400rpx;
	}

	.uni-select__input-box {
		.uni-icons {
			margin-left: 100rpx;
		}
	}

	.shop-box {
		width: 95%;
		margin: 0 auto;
		position: relative;
		background: #fff;
	}

	.shop-name {
		width: 100%;
		height: 240rpx;
		line-height: 80rpx;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;

		.uni-icons {
			color: #088FEB !important;
		}
	}

	.shop-productName {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 20rpx;
	}

	.shop-productName view {
		height: 55rpx;
	}

	.shop-collapse {
		display: flex;
		height: 80rpx;
		font-size: 26rpx;
		line-height: 80rpx;
	}

	.shop-collapse text {
		width: 40%;
		text-align: center;
		padding-right: 40rpx;
		border-right: 1px solid #eee;
	}

	.price-box-title {
		width: 95%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
		display: flex;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.price-box-title text {
		flex: 1;
	}

	.uni-list-cell {
		display: flex;
		margin-right: 20rpx;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		background: #fff;
		border-top: 1px solid #eee;
		height: 110rpx;
	}

	.bottom-left {
		flex: 1;
		height: 110rpx;
		line-height: 110rpx;
	}

	.bottom-right {
		flex: 1;
		height: 110rpx;
	}

	.bottom-left text {
		line-height: 84rpx;
		display: inline-block;
		padding-left: 20rpx;
	}

	.bottom-btn {
		width: 320rpx;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		color: #fff;
		border-radius: 50rpx;
		height: 85rpx;
		margin-top: 15rpx;
		line-height: 85rpx;
		text-align: center;
	}

	textarea {
		margin: 20rpx;
		border: 1px solid #eee;
		height: 150rpx;
		width: 500rpx;
	}

	.shop-popup-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		height: 1200rpx;
		background-color: #fff;
		margin-bottom: 30rpx;
		overflow: scroll;
	}

	.shop-popup-title {
		display: flex;
		height: 180rpx;
		border-bottom: 1px solid #eee;
		margin-top: 20rpx;
	}

	.shop-popup-title-left {
		width: 150rpx;
		height: 150rpx;
	}

	.shop-popup-title-left img {
		width: 150rpx;
		height: 150rpx;

	}

	.shop-popup-title-right {
		width: 400rpx;
		margin-left: 30rpx;
	}

	.shop-popup-title-right-box {
		height: 50rpx;
		line-height: 50rpx;
	}

	.shop-popup-container {
		width: 100%;
		background: #fff;
		height: 50rpx;
	}

	.shop-title-fur {
		width: 95%;
		height: 70rpx;
		margin: 0 auto;
	}

	.shop-title-name {
		font-size: 30rpx;
		width: 50%;
		float: left;
		height: 70rpx;
		line-height: 70rpx;
	}

	.shop-attrs {
		text {
			display: inline-block;
			border: 1px solid #5fd9ee;
			margin: 20rpx;
			background-color: #fff;
			color: #5fd9ee;
			width: 100rpx;
			line-height: 70rpx;
			height: 70rpx;
			text-align: center;
		}

		.checkedText {
			background-color: $u-primary;
			color: #fff;
		}
	}

	.shop-checkList {
		display: flex;
		height: 50rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		margin: 20rpx 0;
	}

	.shop-checkList-box {
		height: 50rpx;
		width: 60%;
	}

	.shop-popup-bottom {
		width: 95%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 2.5%;
		display: flex;
		z-index: 99;
		background: #fff;
	}

	.shop-popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}

	.shop-popup-bottom-right {
		width: 50%;
		line-height: 100rpx;

		.bottom-btn {
			width: 70%;
			line-height: 70rpx;
			height: 70rpx;
			text-align: center;
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
			background: linear-gradient(90deg, #60F3FF, #088FEB);
			border-radius: 70rpx;
		}
	}

	.noPic {
		width: 150rpx;
		height: 150rpx;
		border-radius: 10px;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
		margin-top: 20rpx;
	}

	.tui-order-content {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.u-collapse-content {
		display: flex;
		justify-content: space-between;
		line-height: 60rpx;
	}
</style>