feat:库存商品口味

src/views/supermarketerp/supermarketSpu/components/taste-stock.vue

@@ -0,0 +1,89 @@
+<template>
+	<el-row class="mb-2">
+		<el-button type="primary" @click="pushEvent">新增</el-button>
+	</el-row>
+
+	<vxe-table
+		ref="tableRef"
+		show-overflow
+		max-height="340"
+		height="340"
+		:edit-rules="validRules"
+		:column-config="{ resizable: true }"
+		:row-config="{ isHover: true }"
+		:resizable-config="{ dragMode: 'fixed' }"
+		:data="smErpTasteStockEntityList"
+		:edit-config="{
+					trigger: 'click',
+					mode: 'cell',
+					beforeEditMethod({ row, column }:any) {
+						// 禁止编辑
+						if (column.property === '') {
+							return false
+						}
+						return true
+					},
+				}"
+		size="mini"
+		align="center"
+	>
+		<vxe-column type="seq" width="50" fixed="left" />
+		<vxe-column field="tasteName" title="口味" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+			<template #edit="{ row }">
+				<el-input v-model.trim="row.tasteName" />
+			</template>
+		</vxe-column>
+		<vxe-column field="stock" title="库存" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+			<template #edit="{ row }">
+				<el-input-number v-model.trim="row.stock" :min="0" :precision="2" />
+			</template>
+		</vxe-column>
+		<vxe-column title="操作">
+			<template #default="scope">
+				<el-popconfirm title="是否删除?" @confirm="removeRow(scope.$rowIndex)">
+					<template #reference><el-button size="small">删除</el-button></template>
+				</el-popconfirm>
+			</template>
+		</vxe-column>
+	</vxe-table>
+</template>
+
+<script setup lang="ts">
+import { nanoid } from "nanoid"
+
+type Row = {
+	id: string
+	tasteName: string
+	stock: number
+}
+
+const smErpTasteStockEntityList = defineModel<any>("modelValue", { default: [] })
+
+const tableRef = ref()
+
+const validRules = {
+	tasteName: [{ required: true, message: "口味单位不能为空", trigger: "blur" }],
+	stock: [{ required: true, message: "库存不能为空", trigger: "blur" }],
+}
+
+// 底部新增行
+const pushEvent = () => {
+	const newRow: Row = {
+		id: "tmp_" + nanoid(5),
+		tasteName: "",
+		stock: 0,
+	}
+	smErpTasteStockEntityList.value.push(newRow)
+	nextTick(() => {
+		const $table = tableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 删除行
+const removeRow = (rowIndex: number) => {
+	smErpTasteStockEntityList.value.splice(rowIndex, 1)
+}
+</script>

src/views/supermarketerp/supermarketSpu/form.vue

@@ -18,6 +18,9 @@
 				<el-tab-pane class="el-tab-pane" label="辅助条码" name="辅助条码">
 					<auxiliary-code v-model="form.smErpAuxiliaryCodeEntityList" :smErpUnitEntityList="form.smErpUnitEntityList" />
 				</el-tab-pane>
+				<el-tab-pane class="el-tab-pane" label="口味" name="口味">
+					<taste-stock v-model="form.smErpTasteStockEntityList" />
+				</el-tab-pane>
 			</el-tabs>
 		</el-form>
 
@@ -35,6 +38,7 @@ import BaseInfo from "./components/base-info.vue"
 import PackageUnit, { type rowVU } from "./components/package-unit.vue"
 import ProductInventory from "./components/product-inventory.vue"
 import AuxiliaryCode, { type rowVC } from "./components/auxiliary-code.vue"
+import TasteStock from "./components/taste-stock.vue"
 import { getObj, addObj, putObj } from "/@/api/supermarketerp/supermarketSpu"
 import { TabPaneName } from "element-plus"
 import { useMessage } from "/@/hooks/message"
@@ -47,7 +51,7 @@ const visible = ref(false)
 const loading = ref(false)
 const formRef = ref()
 const packageUnitRef = ref()
-const tabPaneName = ["基础信息", "包装单位", "库存", "辅助条码"]
+const tabPaneName = ["基础信息", "包装单位", "库存", "辅助条码", "口味"]
 const tabPaneActiveName = ref(tabPaneName[0])
 const tabPaneActiveIndex = ref(0)
 
@@ -71,6 +75,7 @@ const form = reactive<any>({
 	grossMargin: 0,
 	smErpUnitEntityList: [],
 	smErpAuxiliaryCodeEntityList: [],
+	smErpTasteStockEntityList: [],
 
 	barCode: "",
 	spec: "",
@@ -254,6 +259,15 @@ const settleAuxiliaryCode = () => {
 		})
 }
 
+// 整理辅助条码列表
+const settleSmErpTasteStockEntityList = () => {
+	const smErpTasteStockEntityList = [...form.smErpTasteStockEntityList]
+	return smErpTasteStockEntityList.map((item: rowVC) => {
+		if (item.id.startsWith("tmp_")) item.id = ""
+		return item
+	})
+}
+
 // 提交
 const onSubmit = async () => {
 	const valid = await formRef.value.validate().catch(() => {})
@@ -264,6 +278,7 @@ const onSubmit = async () => {
 
 	const smErpAuxiliaryCodeEntityList = settleAuxiliaryCode()
 	const smErpUnitEntityList = settlePackageUnitList()
+	const smErpTasteStockEntityList = settleSmErpTasteStockEntityList()
 	try {
 		loading.value = true
 		const _pa = {
@@ -271,6 +286,7 @@ const onSubmit = async () => {
 			...formatedStorePrice.value,
 			smErpAuxiliaryCodeEntityList,
 			smErpUnitEntityList,
+			smErpTasteStockEntityList,
 		}
 
 		// console.log("提交的数据", _pa)