feat:库存商品不同口味的库存

src/views/supermarketerp/supermarketSpu/components/package-unit.vue

@@ -10,8 +10,9 @@
 					</p>
 				</el-alert>
 			</template>
-			<el-icon class="text-xl my-auto ml-4 text-yellow-600"><WarningFilled /></el-icon>
+			<el-icon class="text-xl my-auto mx-4 text-yellow-600"><WarningFilled /></el-icon>
 		</el-tooltip>
+		<el-button type="primary" @click="tasteFormRef.openDialog()">新增口味</el-button>
 	</el-row>
 
 	<vxe-table
@@ -57,9 +58,20 @@
 				<el-input v-model.trim="slotParams.row.unit" @input="slotInputChange(slotParams)" />
 			</template>
 		</vxe-column>
-		<vxe-column field="taste" title="口味" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
+		<vxe-column field="tasteId" title="口味" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
-			<template #edit="slotParams">
+			<!-- <template #edit="slotParams">
 				<el-input v-model.trim="slotParams.row.taste" @input="slotInputChange(slotParams)" />
+			</template> -->
+			<template #default="{ row }">
+				{{ tasteList?.find((item) => item.id === row.tasteId)?.tasteName || "" }}
+			</template>
+			<template #edit="{ row }">
+				<el-select v-model="row.tasteId" placeholder="请选择包装单位">
+					<el-option v-for="item in tasteList" :key="item.id" :label="item.tasteName" :value="item.id">
+						<span class="float-left">口味:{{ item.tasteName }}</span>
+						<span class="float-right ml-4">库存:{{ item.stock }}</span>
+					</el-option>
+				</el-select>
 			</template>
 		</vxe-column>
 		<vxe-column field="status" title="状态" :edit-render="{}">
@@ -108,11 +120,14 @@
 			</template>
 		</vxe-column>
 	</vxe-table>
+
+	<taste-form ref="tasteFormRef" v-model="tasteList" />
 </template>
 
 <script setup lang="ts">
 import { VxeTablePropTypes } from "vxe-table"
 import { nanoid } from "nanoid"
+import TasteForm from "./taste-form.vue"
 
 export interface rowVU {
 	id: string
@@ -130,10 +145,17 @@ export interface rowVU {
 	flag?: string
 	taste?: string
 }
+export interface TasteItem {
+	id: string
+	tasteName: string
+	stock: number
+}
 
 const packageUnitList = defineModel<rowVU[]>("modelValue", { default: [] })
+const tasteList = defineModel<TasteItem[]>("tasteList", { default: [] })
 
 const tableRef = ref()
+const tasteFormRef = ref()
 
 const validRules = ref<VxeTablePropTypes.EditRules<rowVU>>({
 	barCode: [{ required: true, message: "不能为空" }],

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

@@ -0,0 +1,104 @@
+<template>
+	<el-dialog width="60%" title="新增口味" v-model="visible" :close-on-click-modal="false" draggable destroy-on-close>
+		<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="tasteList || []"
+			: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 #footer>
+			<el-button @click="visible = false">取消</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script setup lang="ts">
+import { nanoid } from "nanoid"
+
+type Row = {
+	id: string
+	tasteName: string
+	stock: number
+}
+
+const tasteList = defineModel<any>("modelValue", { default: [] })
+
+const tableRef = ref()
+const visible = ref(false)
+
+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,
+	}
+	tasteList.value.push(newRow)
+	nextTick(() => {
+		const $table = tableRef.value
+		if ($table) {
+			$table.setEditRow(newRow)
+		}
+	})
+}
+
+// 删除行
+const removeRow = (rowIndex: number) => {
+	tasteList.value.splice(rowIndex, 1)
+}
+
+const openDialog = (id: string) => {
+	visible.value = true
+}
+
+defineExpose({
+	openDialog,
+})
+</script>

src/views/supermarketerp/supermarketSpu/form.vue

@@ -6,7 +6,7 @@
 					<base-info v-model="form" />
 				</el-tab-pane>
 				<el-tab-pane class="el-tab-pane" label="包装单位" name="包装单位">
-					<package-unit ref="packageUnitRef" v-model="form.smErpUnitEntityList" />
+					<package-unit ref="packageUnitRef" v-model="form.smErpUnitEntityList" v-model:tasteList="form.smErpTasteStockEntityList" />
 				</el-tab-pane>
 				<el-tab-pane class="el-tab-pane" label="库存" name="库存">
 					<product-inventory
@@ -18,9 +18,6 @@
 				<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>
 
@@ -38,8 +35,8 @@ 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 { fetchList } from "/@/api/supermarketerp/smErpTasteStock"
 import { TabPaneName } from "element-plus"
 import { useMessage } from "/@/hooks/message"
 import { displayPrice, storePrice } from "/@/utils/formatMoney"
@@ -51,7 +48,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)
 
@@ -185,6 +182,8 @@ const openDialog = async (id: string) => {
 
 		// 设置基础包装单位的单选行
 		packageUnitRef.value.setRadioRow(form.smErpUnitEntityList.findIndex((item: any) => item.isBase))
+
+		await getAllTasteList(id)
 	}
 }
 
@@ -219,11 +218,22 @@ const getsupermarketSpuData = async (id: string) => {
 	}
 }
 
+// 获取全部口味
+const getAllTasteList = async (spuId: string) => {
+	const { code, data, msg } = await fetchList({ spuId, current: 1, size: 1000 })
+	if (code !== 0) {
+		form.smErpTasteStockEntityList = []
+		return useMessage().error(msg)
+	}
+	form.smErpTasteStockEntityList = data.records ?? []
+}
+
 // 重置表单数据
 const resetForm = () => {
 	formRef.value?.resetFields()
 	form.smErpUnitEntityList = []
 	form.smErpAuxiliaryCodeEntityList = []
+	form.smErpTasteStockEntityList = []
 }
 
 // 整理包装单位列表
@@ -259,7 +269,7 @@ const settleAuxiliaryCode = () => {
 		})
 }
 
-// 整理辅助条码列表
+// 整理口味
 const settleSmErpTasteStockEntityList = () => {
 	const smErpTasteStockEntityList = [...form.smErpTasteStockEntityList]
 	return smErpTasteStockEntityList.map((item: rowVC) => {