cashier_app/pageProduct/add-Product/components/edit-haocai.vue

<template>
	<view>
		<view class="default-box-padding bg-fff border-r-18">
			<view class="u-flex u-row-between">
				<view>商品名称</view>
			</view>
			<view class="border-bottom u-m-t-16 u-p-b-32">{{skuList.length}}{{goods.name}}</view>
			<view class="">
				<view class="list">
					<view class="u-p-b-32 u-p-t-32 border-bottom" v-for="(item,index) in consList" :key="index">
						<view class="color-666  u-flex">
							<view class="xuhao">序号</view>
							<view class="u-flex u-flex-1 u-p-l-32 gap-20">
								<view class="u-flex-1">耗材名称</view>
								<view class="u-flex-1">单位</view>
								<view class="u-flex-1">用量</view>
							</view>
						</view>
						<view class="u-m-t-32 color-666">
							<view class=" u-m-t-24 u-flex">
								<view class="xuhao">{{index+1}}</view>
								<view class="u-flex u-flex-1 u-p-l-32 gap-20">
									<view class="u-flex-1  ">
										<choose-haocai @change="conInfosChange($event,item)" :listMap="$haocaiMap"
											:list="haoCaiList" v-model="item.consInfoId"></choose-haocai>
									</view>
									<view class="u-flex-1  ">
										<choose-danwei v-model="item.conUnit"></choose-danwei>
									</view>
									<view class="u-flex-1  ">
										<view class="u-flex  input">
											<up-input border="none" v-model="item.surplusStock"></up-input>
											<up-icon @click="delHaocai(index)" color="#EA4025" :size="16"
												name="minus-circle-fill"></up-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="u-flex u-m-t-16 u-font-24" v-if="item.stockNumber">
								<view class="xuhao">
				
								</view>
								<view class="u-flex u-flex-1 u-p-l-32 gap-20">库存：{{item.stockNumber}}
									{{item.conUnit}}
								</view>
							</view>
						</view>
				
					</view>
				</view>
				<view class="u-flex">
					<view class=" u-p-t-32 u-flex" @click="addHaocai">
						<up-icon :size="18" color="#318AFE" name="plus-circle-fill"></up-icon>
						<view class="u-m-l-16">添加耗材</view>
					</view>
				
				</view>

			</view>
		</view>
		<view class="default-box-padding bg-fff border-r-18 u-flex u-row-between u-m-t-32">
			<view>当某个耗材的使用库存不足时，商品自动售罄。</view>
		
		</view>
		<view class="bottom">
			<my-button type="primary" shape="circle" font-weight="700"  @click="save">保存</my-button>
			<my-button bgColor="#F9F9F9" shape="circle" color="#999" @click="cancel">取消</my-button>
		</view>

	</view>

</template>

<script setup>
	import { ref, reactive, watch, computed, onMounted } from 'vue';
	import { deletetbProskuCon, } from "@/http/yskApi/consumable.js";

	import infoBox from '@/commons/utils/infoBox.js'
	import chooseHaocai from './choose-haocai.vue';
	import chooseDanwei from './choose-danwei.vue';
	import { hasPermission } from '@/commons/utils/hasPermission.js';
	
	import { getConsList } from '@/http/api/cons.js';
	import { productBindCons } from '@/http/api/product.js';
	
	const emits = defineEmits(['cancel', 'updateGoods'])

	const props = defineProps({
		goods: {
			type: Object,
			default: () => {
				return {
					consList: [],
					skuList: [],
					type: ''
				}
			}
		}
	})
	
	const pageData = reactive({
		isBindGuige: false,   //是否绑定至规格
	})
	
	let haoCaiList = ref([])
	let $haocaiMap = reactive({})
	const skuList = ref(props.goods.skuList)
	const consList = ref(props.goods.consList||[])
	watch(() => props.goods.consList, (newval) => {
		consList.value = newval
	})
	watch(() => props.goods.skuList, (newval) => {
		skuList.value = newval
	})
	
	onMounted(() => {
		init()
	})

	function init() {
		getConsList({
			"status": 1,
		}).then(res => {
			for (let i in res) {
				const item = res[i]
				$haocaiMap[item.id] = item
			}
			haoCaiList.value = res
		})
		
	}
	
	/**
	 * 取消耗材绑定
	 */
	function cancel() {
		emits('cancel')
	}
	
	/**
	 * 耗材选择
	 * @param {Object} newval
	 * @param {Object} item
	 */
	function conInfosChange(newval, item) {
		console.log(newval);
		item.stockNumber = newval.balance
		item.conUnit = newval.conUnit
	}

	/**
	 * 添加商品耗材
	 */
	function addHaocai() {
		consList.value.push({
			consInfoId: '',
			conUnit: '',
			surplusStock: ''
		})
	}
	
	/**
	 * 删除商品耗材
	 * @param {Object} index
	 */
	function delHaocai(index) {
		const item = consList.value[index]
		uni.showModal({
			title: '提示',
			content: '是否删除该耗材',
			success(res) {
				if (res.confirm) {
					consList.value.splice(index, 1)
				}
			}
		})

	}

	/**
	 * 保存
	 */
	async function save() {
		const bol = await hasPermission('允许修改商品')
		if (!bol) {
			return
		}
		let isPas = consList.value.every(v => {
			return v.consInfoId && v.conUnit && v.surplusStock > 0
		})

		if (!isPas) {
			return infoBox.showToast('请填写全部耗材选项值')
		}
		let ajaxData = {
			id: props.goods.id,
			consList: []
		}
		ajaxData.consList = consList.value.map(v => {
			return {
				id: v.id || '',
				consInfoId: v.consInfoId,
				productId: props.goods.id,
				surplusStock: v.surplusStock * 1,
			}
		})
		await productBindCons(ajaxData)
		emits('updateGoods')
		infoBox.showToast('修改成功')
	}
	
</script>

<style lang="scss" scoped>
	.bottom {
		padding: 84rpx 82rpx;
	}

	.xuhao {
		width: 52rpx;
		white-space: nowrap;
	}

	.input {
		width: 172rpx;
		padding: 10rpx 16rpx;
		height: 60rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 2rpx solid #E5E5E5;
		overflow: hidden;
	}

	.list .border-bottom:last-child {
		border: none;
	}
</style>