可单选设置基础包装单位

2025-02-26 19:55:32 +08:00
1 parent 20acfe34b4
commit d618aca278
@@ -1,32 +1,31 @@
 <template>
-	<div class="w-full h-full p-1">
+	<div class="w-full h-full">
+		<el-tooltip effect="light" placement="right">
+			<template #content>
+				<el-alert class="w-[500px] h-24" type="warning" show-icon :closable="false">
+					<p>注：最小售卖单位的总库存,否则无法换算完成库存扣减,每卖出一个包装形式的商品，都会进行总库存-内装数，实现多种包装形式售卖</p>
+				</el-alert>
+			</template>
+			<el-icon class="text-xl my-auto ml-4 text-yellow-600"><WarningFilled /></el-icon>
+		</el-tooltip>
+
 		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px">
-			<el-row :gutter="24">
+			<el-row>
 				<el-col :span="24" class="mb20">
 					<el-form-item label="总库存" prop="stock" class="flex w-full h-full">
-						<el-tooltip effect="light" placement="right">
-							<template #content>
-								<el-alert class="w-[500px] h-24" type="warning" show-icon :closable="false">
-									<p>
-										注：最小售卖单位的总库存,否则无法换算完成库存扣减,每卖出一个包装形式的商品，都会进行总库存-内装数，实现多种包装形式售卖
-									</p>
-								</el-alert>
-							</template>
-							<el-icon class="text-xl my-auto ml-4 text-yellow-600"><WarningFilled /></el-icon>
-						</el-tooltip>
-						<el-input-number v-model="form.stock" :min="0" :precision="0" />
+						<el-input-number v-model="stock" :min="0" :precision="0" />
 					</el-form-item>
 				</el-col>

 				<el-col :span="24" class="mb20">
 					<el-form-item label="库存上限" prop="inventoryUpperLimit">
-						<el-input-number v-model="form.inventoryUpperLimit" :min="0" :precision="0" />
+						<el-input-number v-model="inventoryUpperLimit" :min="0" :precision="0" />
 					</el-form-item>
 				</el-col>

 				<el-col :span="24" class="mb20">
 					<el-form-item label="库存下限" prop="inventoryLowerLimit">
-						<el-input-number v-model="form.inventoryLowerLimit" :min="0" :precision="0" />
+						<el-input-number v-model="inventoryLowerLimit" :min="0" :precision="0" />
 					</el-form-item>
 				</el-col>
 			</el-row>
@@ -36,23 +35,46 @@

 <script setup lang="ts">
 import { ref } from "vue"
-const stock = defineModel("stock", { default: 0 })
-const inventoryUpperLimit = defineModel("inventoryUpperLimit", { default: 0 })
-const inventoryLowerLimit = defineModel("inventoryLowerLimit", { default: 0 })
+const stock = defineModel<number | null>("stock")
+const inventoryUpperLimit = defineModel<number | null>("inventoryUpperLimit")
+const inventoryLowerLimit = defineModel<number | null>("inventoryLowerLimit")

 const dataFormRef = ref()
-const form = reactive({
-	stock: stock.value,
-	inventoryUpperLimit: inventoryUpperLimit.value,
-	inventoryLowerLimit: inventoryLowerLimit.value,
+const form = reactive<{
+	stock: number | null | undefined
+	inventoryUpperLimit: number | null | undefined
+	inventoryLowerLimit: number | null | undefined
+}>({
+	stock: null,
+	inventoryUpperLimit: null,
+	inventoryLowerLimit: null,
 })

 watch(
-	() => form,
+	() => stock.value,
 	(val) => {
-		stock.value = val.stock
-		inventoryUpperLimit.value = val.inventoryUpperLimit
-		inventoryLowerLimit.value = val.inventoryLowerLimit
+		form.stock = val
+	},
+	{
+		immediate: true,
+	},
+)
+watch(
+	() => inventoryUpperLimit.value,
+	(val) => {
+		form.inventoryUpperLimit = val
+	},
+	{
+		immediate: true,
+	},
+)
+watch(
+	() => inventoryLowerLimit.value,
+	(val) => {
+		form.inventoryLowerLimit = val
+	},
+	{
+		immediate: true,
 	},
 )

@@ -21,6 +21,7 @@
 			border
 			show-overflow
 			max-height="380"
+			:radio-config="{ highlight: true }"
 			:column-config="{ resizable: true }"
 			:row-config="{ isHover: true }"
 			:resizable-config="{ dragMode: 'fixed' }"
@@ -41,6 +42,7 @@
 			align="center"
 		>
 			<vxe-column type="checkbox" width="40" fixed="left" />
+			<vxe-column type="radio" title="基础单位" fixed="left" />
 			<vxe-column type="seq" width="50" fixed="left" />
 			<vxe-column field="barCode" title="条码" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
 				<template #edit="{ row }">
@@ -60,8 +62,8 @@
 			<vxe-column field="status" title="状态" :edit-render="{ autoFocus: 'input', placeholder: '请选择' }">
 				<template #edit="{ row }">
 					<el-select v-model="row.status">
-						<el-option label="正常" :value="0"></el-option>
-						<el-option label="停销" :value="1"></el-option>
+						<el-option label="正常" :value="0" />
+						<el-option label="停销" :value="1" />
 					</el-select>
 				</template>
 				<template #default="{ row }">
@@ -169,6 +171,23 @@ const removeSelectRowEvent = () => {
 	}
 }

+// 获取单选的行
+const getRadioEvent = () => {
+	const $table = editableTableRef.value
+	if ($table) {
+		const currRadioRow = $table.getRadioRecord()
+		return currRadioRow
+	}
+}
+
+// 设置单选的行
+const setRadioRow = (index: number) => {
+	const $table = editableTableRef.value
+	if ($table) {
+		$table.setRadioRow(supermarketUnitEntityList.value[index])
+	}
+}
+
 // 校验可编辑表格 成功返回 true 失败返回 false
 const editableTableValidate = async () => {
 	// 全量校验
@@ -187,5 +206,7 @@ const editableTableValidate = async () => {

 defineExpose({
 	editableTableValidate,
+	getRadioEvent,
+	setRadioRow,
 })
 </script>
@@ -192,23 +192,14 @@ const form = reactive<any>({
 	status: "0",
 	costPrice: 0,
 	stock: 0,
-	giveIntegral: 0,
 	spec: "",
 	origin: "",
 	packageNum: 0,
 	retailPrice: 0,
 	purchasePrice: 0,
 	supplierId: "",
-	memberPrice1: 0,
-	memberPrice2: 0,
-	memberPrice3: 0,
-	wholesalePrice1: 0,
-	wholesalePrice2: 0,
-	wholesalePrice3: 0,
 	promotionPrice: 0,
 	productNature: "",
-	introduction: "",
-	description: "<p></p>",
 	inventoryUpperLimit: 0,
 	inventoryLowerLimit: 0,
 	grossMargin: 0,
@@ -285,6 +276,10 @@ const getsupermarketSpuData = async (id: string) => {
 			})

 			Object.assign(form, res.data)
+
+			// 设置基础包装单位单选行
+			supermarketUnitEntityListRef.value.setRadioRow(form.smErpUnitEntityList.findIndex((item: any) => item.isBase))
+
 			console.log("获取的商品详情：", res.data)
 		}
 	} catch (error: any) {
@@ -298,17 +293,23 @@ const resetForm = () => {
 	dataFormRef.value?.resetFields()
 	form.smErpUnitEntityList = []
 	form.smErpAuxiliaryCodeEntityList = []
-	form.stock = 0
-	form.inventoryUpperLimit = 0
-	form.inventoryLowerLimit = 0
+	form.stock = null
+	form.inventoryUpperLimit = null
+	form.inventoryLowerLimit = null
 }

 // tab栏切换
 const handleTabChange = (name: TabPaneName) => (currentTabPaneIndex.value = tabPaneEnum.findIndex((item) => item === name))

 // 整理包装单位列表
-const handleUnit = computed(() => {
+const useHandleUnit = () => {
+	const curRadioRow = supermarketUnitEntityListRef.value.getRadioEvent()
 	return form.smErpUnitEntityList.map((item: any) => {
+		if (item.id === curRadioRow.id) {
+			item.isBase = true
+		} else {
+			item.isBase = null
+		}
 		item.costPrice = storePrice(item.costPrice)
 		item.promotionPrice = storePrice(item.promotionPrice)
 		item.purchasePrice = storePrice(item.purchasePrice)
@@ -317,34 +318,39 @@ const handleUnit = computed(() => {
 			item.id = ""
 			delete item.isNew
 		}
+		return item
 	})
-})
+}

 // 整理辅助条码列表
-const handleAuxiliaryCode = computed(() => {
+const useHandleAuxiliaryCode = () => {
 	return form.smErpAuxiliaryCodeEntityList.map((item: any) => {
 		if (item.isNew) {
 			item.id = ""
 			delete item.isNew
 		}
+		return item
 	})
-})
+}

 // 提交
 const onSubmit = async () => {
 	console.log("提交的数据", form)

 	const valid = await dataFormRef.value.validate().catch(() => {})
-	if (!valid) return useMessage().warning("基础信息必填项未填写完整")
+	// if (!valid) return useMessage().warning("基础信息必填项未填写完整")
 	if (!form.smErpUnitEntityList || form.smErpUnitEntityList.length <= 0) return useMessage().warning("请添加包装单位")
-	if (!form.smErpAuxiliaryCodeEntityList || form.smErpAuxiliaryCodeEntityList.length <= 0) return useMessage().warning("请添加辅助条码")
 	if (!(await supermarketUnitEntityListRef.value.editableTableValidate())) return useMessage().warning("包装单位必填项未填写完整")
+	if (!supermarketUnitEntityListRef.value.getRadioEvent()) return useMessage().warning("请选择基础包装单位")
 	if (!(await supermarketInventoryRef.value.stockValidate())) return useMessage().warning("库存必填项未填写完整")
+	if (!form.smErpAuxiliaryCodeEntityList || form.smErpAuxiliaryCodeEntityList.length <= 0) return useMessage().warning("请添加辅助条码")
 	if (!(await supermarketAuxiliaryCodeEntityList.value.editableTableValidate())) return useMessage().warning("辅助条码必填项未填写完整")

+	const handleUnit = useHandleUnit()
+	const handleAuxiliaryCode = useHandleAuxiliaryCode()
 	try {
 		loading.value = true
-		const _pa = { ...form, smErpUnitEntityList: handleUnit.value, smErpAuxiliaryCodeEntityList: handleAuxiliaryCode.value }
+		const _pa = { ...form, smErpUnitEntityList: handleUnit, smErpAuxiliaryCodeEntityList: handleAuxiliaryCode }
 		form.id ? await putObj(_pa) : await addObj(_pa)
 		useMessage().success(form.id ? "修改成功" : "添加成功")
 		visible.value = false