cashier_app/pageConsumables/addConsumables.vue

<template>
	<view class="topTitle">
		耗材信息
	</view>
	<view class="addConsumables">
		<view>
			<view>
				<view> 单位 </view>
				<view> <input type="text" placeholder="请输入单位" v-model="datas.form.conUnit" name="" id=""> </view>
			</view>
			<view>
				<view> 耗材名称 </view>
				<view> <input type="text" placeholder="请输入耗材名称" v-model="datas.form.conName" name="" id=""> </view>
			</view>
			<view>
				<view> 耗材价格 </view>
				<view> <input class="uni-input" placeholder="请输入耗材价格" type="digit" v-model="datas.form.price" > </view>
			</view>
			<view>
				<view> 预警值 </view>
				<view> <input type="number" placeholder="请输入预警值" v-model="datas.form.conWarning" name="" id=""> </view>
			</view>
			<view v-if="!datas.form.id" style="justify-content: space-between;">
				<view> 耗材类型 </view>
				<view style="width: 54%;" @tap="datas.show = !datas.show">
					{{datas.consGroupName||'请选择耗材类型'}}
				</view>
				<uni-icons type="bottom" size="16"></uni-icons>
			</view>
		</view>
	</view>

	<view class="bottombutton">
		<up-button type="primary" style="background-color:  #318AFE;color: #fff;" @tap="sumbit" :plain="true"
			text="保存"></up-button>
	</view>
	<up-picker :show="datas.show" :columns="datas.typeList" keyName="name" @cancel="datas.show=false" @confirm="confirmConsGroup" ></up-picker>
	<!-- 消息提示 -->
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	import { getConsGrpupList, addCons, editCons } from '@/http/api/cons.js';
	
	let datas = reactive({
		show: false,
		form: {
			conUnit: '',
			conName: '',
			price: '',
			conWarning: 999,
			consGroupId: null,
		},
		consGroupName: '',
		typeList: [],
	})
	
	onLoad((options) => {
		if( options && options.item ) {
			let obj = JSON.parse(options.item)
			datas.form = obj
		} else {
			gettbConsTypeList()
		}
		uni.setNavigationBarTitle({
			title: !datas.form.id ? '添加耗材' : '编辑耗材'
		})
	})
	
	/**
	 * 获取耗材类别
	 */
	let gettbConsTypeList = () => {
		getConsGrpupList({
			page: 1,
			size: 30,
		}).then(res => {
			datas.typeList = [res]
		})
	}

	function confirmConsGroup(e){
		datas.show = false
		datas.form.consGroupId = e.value[0].id
		datas.consGroupName = e.value[0].name
	}

	let sumbit = async () => {
		let conUnitdata = datas.form.conUnit.replace(/(^\s*)|(\s*$)/g, "")
		if (!conUnitdata) {
			uni.$utils.showToast('单位不能为空')
			return
		}
		if (!datas.form.price) {
			uni.$utils.showToast('价格不能为空')
			return
		}
		if (!datas.form.consGroupId) {
			uni.$utils.showToast('耗材类型不能为空')
			return
		}
		if ( !datas.form.id) {
			await addCons({...datas.form})
		} else {
			await editCons({...datas.form})
		}
		uni.navigateBack()
	}

</script>
<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style scoped lang="less">
	.topTitle {
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		margin: 32rpx 28rpx;
	}

	.addConsumables {
		width: 694rpx;
		height: 640rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		margin: 32rpx;
		padding: 1rpx 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;
		}
	}

	.status {
		margin: 0 32rpx;
		position: absolute;
		// top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	.df() {
		display: flex;
		align-items: center;
	}
</style>