cashier_app/pageConsumables/warehouseEntry.vue

<template>
	<view class="warehouseEntry">
		<view>
			<view>
				<view> 耗材名称 </view>
				<view> {{datas.item.conName}} </view>
			</view>
			<view>
				<view> 现有库存 </view>
				<view> {{datas.item.stockNumber}} </view>
			</view>
			<view>
				<view> <text style="color: red;">*</text> 入库时间 </view>
				<view > 	
					 <up-datetime-picker
						hasInput
					    v-model="datas.form.inOutDate"
					    mode="date"
						
					    ></up-datetime-picker>
				</view>
			</view>
			<view>
				<view> <text style="color: red;">*</text> 入库数量 </view>
				<view> <input type="number" placeholder="请输入数量" v-model="datas.form.bodyList.inOutNumber" @change="datas.form.bodyList.inOutNumber = $utils.isNumber(datas.form.bodyList.inOutNumber)" name="" id=""> </view>
			</view>
			<view>
				<view> <text style="color: red;">*</text>单价 </view>
				<view> <input type="number" placeholder="请输入单价(元)" v-model="datas.form.bodyList.purchasePrice" @change="datas.form.bodyList.purchasePrice = $utils.isMoney(datas.form.bodyList.purchasePrice)" name="" id=""> </view>
			</view>
			<view style="justify-content: space-between;">
				<view> 单位 </view>
				<view> <input type="text" placeholder="请输入单位" v-model="datas.form.bodyList.conUnit" name="" id=""> </view>
			</view>
			<view>
				<view> 应付金额 </view>
				<view> {{datas.form.bodyList.inOutNumber*datas.form.bodyList.purchasePrice|0}} </view>
			</view>
			<view>
				<view> 实付金额 </view>
				<view> <input placeholder="请输入现有库存" type="text" v-model="datas.form.actualPaymentAmount" /> </view>
			</view>
			<view style="justify-content: space-between;align-items: center;">
				<view> 供应商 </view>
				<picker @change="changeNowStatusIndex" :value="nowStatusIndex" :range="datas.status">
					<view class="color-333" style="height: 84rpx;line-height: 84rpx;">{{datas.status[nowStatusIndex]}}</view>
				</picker>
				<uni-icons type="bottom" size="16"></uni-icons>
				<view style="color: #318AFE;width: 80rpx;text-align: center;" @tap="toggle"> 新增 </view>
			</view>
		</view>



	</view>
	<view class="bottombutton">
		<up-button type="primary" style="background-color:  #318AFE;color: #fff;width: 100%!important;" @tap="sumbit"
			:plain="true" text="保存"></up-button>
	</view>
	
	<!-- 消息提示 -->
	<up-toast ref="uToastRef"></up-toast>
</template>


<script setup>
	import { ref, computed, reactive } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js';
	import dayjs from 'dayjs';
	
	import { getVendorPage } from '@/http/api/vendor.js';
	import { consStockIn } from '@/http/api/cons.js';
	
	let showStatus = ref(false)
	let datas = reactive({
		show: false,
		// 供应商列表
		list: [],
		// 供应商渲染数组
		status: [],
		// 单位列表
		unitList: [],
		inOutDate: '',
		form: {
			bodyList: {},
			actualPaymentAmount: 0,
			inOutDate: Date.now()
		},
		item: ""
	})
	
	onLoad((options) => {
		console.log(options)
		datas.item = JSON.parse(options.item)
		datas.form = Object.assign(datas.form, datas.item)
		// 单位列表
		datas.unitList = [ datas.form.conUnit, datas.form.conUnitTwo]
		datas.form.bodyList.unit = datas.form.defaultUnit
		datas.form.bodyList.conName = datas.form.conName
		datas.form.bodyList.unitName = datas.form.unitName
	})
	onShow(() => {
		getList()
	})

	function toggle() {
		go.to('PAGES_ADD_SUPPLIER')
	}
	
	/**
	 * 获取供应商列表
	 */
	function getList() {
		getVendorPage({
			page: 1,
			size: 100,
		}).then(res => {
			datas.list = res.records
			res.records.forEach(ele => {
				datas.status.push(ele.name)
			})
		})
	}
	
	let nowStatusIndex = ref(0)
	
	/**
	 * 入库时间
	 * @param {Object} i
	 */
	function inOutDateChange(i) {
		datas.inOutDate = dayjs(datas.form.inOutDate).format('YYYY-MM-DD')
	}
	
	/**
	 * 供应商选择
	 * @param {Object} i
	 */
	function changeNowStatusIndex(i) {
		nowStatusIndex.value = i.detail.value
		console.log(nowStatusIndex.value)
		showStatus.value = false
	}


	let sumbit = uni.$utils.debounce(() => {
		if (!datas.form.bodyList.inOutNumber) {
			uni.$utils.showToast("请输入必填项")
			return
		}
		if (!datas.form.bodyList.purchasePrice) {
			uni.$utils.showToast("请输入必填项")
			return
		}
	
		datas.form.bodyList.conId = datas.item.id
		datas.form.bodyList = [datas.form.bodyList]
		datas.form.inOutDate = dayjs(datas.form.inOutDate).format('YYYY-MM-DD')
		consStockIn({
			...datas.form,
			// 供应商id
			vendorId: datas.list[nowStatusIndex.value].id,
			amountPayable: datas.form.bodyList[0].inOutNumber * datas.form.bodyList[0].purchasePrice,
		}).then(res => {
			uni.$utils.showToast("保存成功")
			setTimeout(() => {
				go.back()
			}, 1000)
		})
	},1000)
	// 获取供应商
	const statusHeight = computed(() => {
		return 30 * datas.status.length + 14 + 'px'
	})
</script>
<style>
	page {
		background-color: #f9f9f9;
	}

	/* .u-button {
		width: 64rpx!important;
	} */
</style>
<style scoped lang="less">
	.df() {
		display: flex;
		align-items: center;
	}

	ul,
	li {
		list-style: none;
		padding: 0;
	}
	::v-deep.u-input{
		border: none!important;
	}
	.status {
		margin: 0 32rpx;
		position: absolute;
		// top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.warehouseEntry {
		width: 694rpx;
		// height: 640rpx;

		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 32rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;

		>view {
			>view {
				width: 646rpx;
				height: 84rpx;
				background: #fcfcfc;
				border: 2rpx solid #F9F9F9;
				margin-top: 32rpx;
				.df;

				>view:first-child {
					width: 190rpx;
					height: 84rpx;
					line-height: 84rpx;
					// text-align: left;
					padding-left: 24rpx;
					background: #F9F9F9;
					border-radius: 8rpx 0rpx 0rpx 8rpx;
					border: 2rpx solid #F9F9F9;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}
	}

	.bottombutton {
		margin-top: 84rpx;
		padding: 0 24rpx;

		>button {
			width: 530rpx;
			height: 80rpx;
			border-radius: 56rpx 56rpx 56rpx 56rpx;
		}
	}
</style>