kuaiyidian-HD/pages/inventory/changeGoods.vue

<template>
	<view>
		<view class="headerBox box">
			<view class="img">
				<image src="../../static/images/logo.png" mode=""></image>
			</view>
			<view class="content">
				<view class="">
				</view>
				<text>{{goodsDetail.productSn }}</text>
			</view>
		</view>
		<view class="box">
			<uni-forms ref="form" :modelValue="goodsDetail" labelWidth="75px" :rules="rules">
				<uni-forms-item label="采购价" name="purchasePrice" required>
					<uni-easyinput type="digit" v-model="goodsDetail.purchasePrice" placeholder="请输入采购价" trim="all" />
				</uni-forms-item>
				<uni-forms-item label="批发价" name="wholesalePrice" required>
					<uni-easyinput type="digit" v-model="goodsDetail.wholesalePrice" placeholder="请输入批发价" trim="all" />
				</uni-forms-item>
				<uni-forms-item label="市场价" name="price" required>
					<uni-easyinput type="digit" v-model="goodsDetail.price" placeholder="请输入市场价" trim="all" />
				</uni-forms-item>
				<!-- 				<uni-forms-item label="应付金额" name="shouldPay">
					<uni-easyinput type="number" v-model="goodsDetail.shouldPay" trim="all" disabled/>
				</uni-forms-item>
				<uni-forms-item label="已付金额" name="alreadyPay">
					<uni-easyinput type="number" v-model="goodsDetail.alreadyPay" placeholder="请输入已付金额" trim="all"/>
				</uni-forms-item>
				<uni-forms-item label="未付金额" name="noPay">
					<uni-easyinput type="number" v-model="goodsDetail.noPay" placeholder="请输入未付金额" trim="all"/>
				</uni-forms-item> -->
				<view class="attr">
					<view class="content" v-for="(item,index) in goodsDetail.attributeList" :key="index">
						<view class="attrName">
							{{item.name}}
						</view>
						<view class="attrs">
							<uni-data-checkbox v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
							<text v-for="(itemTag, index1) in item.value" :key="index1"
								@tap.stop="attrNameChange(index,index1) "
								:class="itemTag.isChecked ? 'checkedText' : '' "> {{itemTag.value}}</text>
						</view>
					</view>
				</view>
				<uni-forms-item label="采购数量" name="productCount" required>
					<uni-easyinput type="number" v-model="goodsDetail.productCount" placeholder="请输入采购数量" trim="all" />
				</uni-forms-item>
				<uni-forms-item label="金额" name="productCount">
					<uni-easyinput type="number" :value="goodsDetail.productCount * goodsDetail.purchasePrice"
						disabled />
				</uni-forms-item>
			</uni-forms>

		</view>
		<view class="tui-tabbar">
			<u-button type="primary" :plain="true" @tap.stop="submit">确认入库</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				goodsDetail: {},
				attrNameList: [],
				rules: {
					// 对name字段进行必填验证
					productCount: {
						rules: [{
							required: true,
							errorMessage: '请填写入库数量',
						}, ],

						validateTrigger: 'submit'
					},
					price: {
						rules: [{
							required: true,
							errorMessage: '请填写市场价',
						}, ],

						validateTrigger: 'submit'
					},
					wholesalePrice: {
						rules: [{
							required: true,
							errorMessage: '请填写批发价',
						}, ],

						validateTrigger: 'submit'
					},
					purchasePrice: {
						rules: [{
							required: true,
							errorMessage: '请填写采购价',
						}, ],

						validateTrigger: 'submit'
					},
				}
			};
		},
		onLoad(options) {
			this.goodsDetail = JSON.parse(decodeURIComponent(options.info))
			let newObj = JSON.parse(this.goodsDetail.attributeList)
			let newArr = []
			for (let val in newObj) {
				let valueObj = [];
				for (var i = 0; i < newObj[val].length; i++) {
					valueObj.push({
						value: newObj[val][i],
						isChecked: false
					})
					this.attrNameList.push({
						value: newObj[val][i],
						name: val,
						isChecked: false
					})
				}
				newArr.push({
					name: val,
					value: valueObj
				})
			}
			this.goodsDetail.attributeList = newArr;
		},
		methods: {
			attrNameChange(index, index1) {
				this.goodsDetail.attributeList[index].value.forEach(item => {
					item.isChecked = false;
				})
				this.goodsDetail.attributeList[index].isChecked = true;
				this.goodsDetail.attributeList[index].value[index1].isChecked = true;
			},
			submit() {
				let newObj = {};
				for (let val in this.goodsDetail.attributeList) {
					console.log(val,this.goodsDetail.attributeList[val]);
					if (!this.goodsDetail.attributeList[val].isChecked) {
						return uni.showToast({
							title: "请添加属性",
							icon: "none"
						})
					} else {
						newObj[this.goodsDetail.attributeList[val].name] = this.goodsDetail.attributeList[val].value.map(item => {
							 if(item.isChecked == true ) {
								return item.value	
							}
						})
						for (let val in newObj) {
							newObj[val] = newObj[val].filter(Boolean)
						}
					}
				}
				this.$refs.form.validate().then(res => {
					res.productId = this.goodsDetail.id;
					res.attributeList = JSON.stringify(newObj) 
					res.allPrice = this.goodsDetail.productCount * this.goodsDetail.purchasePrice
					let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.purchaseDetails.push(res)
					uni.navigateBack({
						delta: 1
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 14rpx;
		box-shadow: 0px 1px 10px 2px #e2e2e2;
		background-color: #fff;

		.redText {
			color: #f00;
		}
	}

	.attrs {
		text {
			display: inline-block;
			border: 1px solid $u-primary;
			padding: 7px 20rpx;
			margin: 20rpx;
			background-color: #fff;
			color: $u-primary;
		}

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

	.headerBox {
		display: flex;
		image {
			width: 150rpx;
			height: 150rpx;
		}

		.content {
			padding-left: 14rpx;

			view {
				line-height: 50rpx;
			}

			text {
				color: #909399;
			}
		}
	}
</style>