feat:口味不能重复校验

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

@@ -144,6 +144,7 @@ export interface rowVU {
 	isBase?: boolean | null
 	flag?: string
 	taste?: string
+	tasteId: string
 }
 export interface TasteItem {
 	id: string
@@ -218,6 +219,7 @@ const pushEvent = (row?: rowVU | undefined) => {
 			promotionPrice: 0,
 			costPrice: 0,
 			taste: "",
+			tasteId: "",
 		}
 		Object.assign(newRow, row)
 	}

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

@@ -13,7 +13,7 @@
 			:column-config="{ resizable: true }"
 			:row-config="{ isHover: true }"
 			:resizable-config="{ dragMode: 'fixed' }"
-			:data="tasteList || []"
+			:data="tableTasteList"
 			:edit-config="{
 					trigger: 'click',
 					mode: 'cell',
@@ -30,8 +30,8 @@
 		>
 			<vxe-column type="seq" width="50" fixed="left" />
 			<vxe-column field="tasteName" title="口味" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
-				<template #edit="{ row }">
+				<template #edit="slotParams">
-					<el-input v-model.trim="row.tasteName" />
+					<el-input v-model.trim="slotParams.row.tasteName" @input="slotInputChange(slotParams)" />
 				</template>
 			</vxe-column>
 			<vxe-column field="stock" title="库存" :edit-render="{ autoFocus: 'input', placeholder: '请输入' }">
@@ -50,6 +50,7 @@
 
 		<template #footer>
 			<el-button @click="visible = false">取消</el-button>
+			<el-button type="primary" @click="onConfirm">确认</el-button>
 		</template>
 	</el-dialog>
 </template>
@@ -64,15 +65,36 @@ type Row = {
 }
 
 const tasteList = defineModel<any>("modelValue", { default: [] })
-
+const tableTasteList = ref<Row[]>([])
 const tableRef = ref()
 const visible = ref(false)
 
 const validRules = {
-	tasteName: [{ required: true, message: "口味单位不能为空", trigger: "blur" }],
+	tasteName: [
+		{ required: true, message: "口味单位不能为空", trigger: "blur" },
+		{
+			validator({ cellValue, row, rowIndex }: any) {
+				if (
+					cellValue &&
+					tableTasteList.value
+						.filter((item: Row, index: number) => rowIndex != index && item.tasteName == row.tasteName)
+						.some((v: Row) => v.tasteName == row.tasteName)
+				)
+					return new Error("该口味已存在")
+			},
+		},
+	],
 	stock: [{ required: true, message: "库存不能为空", trigger: "blur" }],
 }
 
+// 自定义编辑模板的input校验
+const slotInputChange = (slotParams: any) => {
+	const $table = tableRef.value
+	if ($table) {
+		$table.updateStatus(slotParams)
+	}
+}
+
 // 底部新增行
 const pushEvent = () => {
 	const newRow: Row = {
@@ -80,7 +102,7 @@ const pushEvent = () => {
 		tasteName: "",
 		stock: 0,
 	}
-	tasteList.value.push(newRow)
+	tableTasteList.value.push(newRow)
 	nextTick(() => {
 		const $table = tableRef.value
 		if ($table) {
@@ -91,11 +113,28 @@ const pushEvent = () => {
 
 // 删除行
 const removeRow = (rowIndex: number) => {
-	tasteList.value.splice(rowIndex, 1)
+	tableTasteList.value.splice(rowIndex, 1)
 }
 
-const openDialog = (id: string) => {
+const openDialog = () => {
 	visible.value = true
+	tableTasteList.value = tasteList.value ? [...tasteList.value] : []
+}
+
+// 提交
+const onConfirm = async () => {
+	const $table = tableRef.value
+	if ($table) {
+		const errMap = await $table.validate(true)
+		if (errMap) {
+			console.log("全量校验失败！", errMap)
+			return
+		} else {
+			console.log("全量校验成功！")
+			visible.value = false
+			tasteList.value = [...tableTasteList.value]
+		}
+	}
 }
 
 defineExpose({

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

@@ -1,89 +0,0 @@
-<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

@@ -248,6 +248,7 @@ const settlePackageUnitList = () => {
 			item.isBase = false
 		}
 		if (item.id.startsWith("tmp_")) item.id = ""
+		if (item.tasteId.startsWith("tmp_")) item.tasteId = ""
 		// 转换金额单位
 		item.costPrice = storePrice(item.costPrice)
 		item.promotionPrice = storePrice(item.promotionPrice)