cashier_app/pageProduct/invoicing-check/invoicing-check.vue

<template>
	<view class="min-page bg-gray u-p-30">
		<view v-for="(item,index) in pageData.list" :key="index">
			<list-item :data="item"></list-item>
		</view>
		<view class="u-m-t-44" v-if="pageData.totalElements>0">
			<my-pagination :size="pageData.query.size" :totalElements="pageData.totalElements"
				@change="pageChange"></my-pagination>
			<view style="height: 200rpx;"></view>
		</view>
		<template v-if="pageData.hasAjax&&!pageData.list.length">
			<my-img-empty tips="暂无数据"></my-img-empty>
		</template>
	</view>



	<view class="u-fixed fixed-b">
		<my-button shape="circle" @tap="formShow">变动库存</my-button>
	</view>

	<my-mask ref="refMask">
		<view class="u-p-30 ">
			<view class="bg-fff border-r-18 default-box-padding">
				<uni-forms :label-width="100" ref="refForm" :model="formData">
					<uni-forms-item label="账存数量" required>
						<uni-easyinput  disabled v-model="formData.stock" placeholder="请输入账存数量" />
					</uni-forms-item>
					<uni-forms-item label="实际数量" required>
						<uni-number-box 
						:max="999999999"
						v-model="formData.stocktakinNum" ></uni-number-box>
						<!-- <uni-easyinput v-model="formData.stocktakinNum" placeholder="请输入实际数量" /> -->
					</uni-forms-item>
					<view :class="{red:computedNumber<0}">
						<uni-forms-item label="盈亏数量" required>
							<uni-easyinput disabled v-model="computedNumber" placeholder="请输入盈亏数量" />
						</uni-forms-item>
					</view>
					
					<uni-forms-item label="单价" required>
						<uni-easyinput disabled v-model="formData.price" placeholder="请输入单价" />
					</uni-forms-item>
					<view :class="{red:computedMoney<0}">
						<uni-forms-item label="盈亏金额" required>
							<uni-easyinput disabled v-model="computedMoney" placeholder="请输入盈亏金额" />
						</uni-forms-item>
					</view>
					
					<uni-forms-item label="备注" required>
						<uni-easyinput type="textarea" v-model="formData.note" placeholder="请输入备注" />
					</uni-forms-item>
					<view class="u-flex u-m-t-30">
						<view class="u-flex-1 u-p-r-16">
							<my-button type="default" shape="circle" @tap="formHide">取消</my-button>
						</view>
						<view class="u-flex-1 u-p-l-16">
							<my-button shape="circle" @tap="addStocktakin">确定</my-button>
						</view>

					</view>
				</uni-forms>
			</view>
		</view>

	</my-mask>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		$addStocktakin,
		$getStocktakin
	} from '@/http/yskApi/goods.js'
	import infoBox from "@/commons/utils/infoBox.js"
	import listItem from './components/list-item';
	import {
		$pageData
	} from '@/commons/goodsData.js'
	
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const refForm = ref(null)
	const refMask = ref(null)

	function formShow() {
		refMask.value.open()
	}
	
	function formHide() {
		formData.note=''
		refMask.value.close()
	}
	const formData = reactive({
		stock:0,
		note: '',
		price:'',
		productId:"",
		skuId:'',
		stocktakinNum:0
	})
	const computedMoney=computed(()=>{
		return (formData.stocktakinNum-formData.stock)*formData.price
	})
	
	const computedNumber=computed(()=>{
		return formData.stocktakinNum-formData.stock
	})
	
	const pageData = reactive({
		...$pageData,
		query: {
			...$pageData.query,
			name: '',
			skuId: '',
			sort: 'id,desc'
		}
	})
	// 页数改变事件
	function pageChange(page) {
		pageData.query.page=page-1
		init()
	}
	async function addStocktakin() {
		const res = await $addStocktakin(formData)
		infoBox.showToast('添加成功')
		formHide()
		init()
	}
	async function init() {
		const res = await $getStocktakin(pageData.query)
		pageData.hasAjax=true
		if(pageData.query.page===0&&res.content.length){
			const zero=res.content[0]
			formData.stock=zero.inventoryStock*1
			formData.stocktakinNum=formData.stock
			formData.price=zero.price
		}else{
			formData.stock=option.stock*1
			formData.stocktakinNum=formData.stock
			formData.price=option.price*1
		}
		pageData.list = res.content
		pageData.totalElements = res.totalElements
	}
	let option={}
	onLoad(opt => {
		console.log(opt);
		if (JSON.stringify(opt) !== '{}') {
			option=opt
			Object.assign(pageData.query, opt)
			formData.skuId=opt.skuId
			formData.productId=opt.productId
			init()
		}
	})
</script>

<style lang="scss" scoped>
	.form-box {
		margin: auto;
	}

	::v-deep.uni-forms-item {
		min-height: 100rpx;
	}

	::v-deep.uni-forms-item .uni-forms-item__label {
		text-indent: 0;
		font-size: 28rpx !important;
		font-weight: bold;
		color: #333;
		text-align: right;
	}

	::v-deep .none-label .uni-forms-item.is-direction-top {
		padding: 0 !important;
		min-height: initial !important;
	}

	::v-deep .none-label .uni-forms-item .uni-forms-item__label {
		padding: 0 !important;
	}
	::v-deep.is-disabled .uni-easyinput__placeholder-class{
		color: #333;
	}
	.fixed-b {
		bottom: 80rpx;
		left: 110rpx;
		right: 110rpx;
	}
	
	::v-deep.uni-input-input{
		color: #333;
	}
	::v-deep .red .uni-input-input{
		color: $my-red-color;
	}
</style>