套餐选择菜品

src/views/canteen/canteenSpu/form.vue

@@ -28,7 +28,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="菜品分类" prop="categoryId">
-						<select-ctcg v-model="form.categoryId" />
+						<select-ctcg v-model="form.categoryId" :merchant-id="form.merchantId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
@@ -125,10 +125,13 @@
 			</span>
 		</template>
 
-		<el-dialog v-model="childPickerVisible" title="选择组成菜品" width="780px" append-to-body :close-on-click-modal="false">
+		<el-dialog v-model="childPickerVisible" title="选择组成菜品" width="860px" append-to-body :close-on-click-modal="false">
 			<el-form :inline="true" class="mb-3">
-				<el-form-item>
-					<select-ctcg v-model="childQuery.categoryId" :merchant-id="form.merchantId" placeholder="菜品分类" style="width: 180px" />
+				<el-form-item label="商户">
+					<select-mch v-model="childQuery.merchantId" :apiParams="{ types: '1' }" style="width: 200px" />
+				</el-form-item>
+				<el-form-item label="分类">
+					<select-ctcg v-model="childQuery.categoryId" :merchant-id="childQuery.merchantId" placeholder="菜品分类" style="width: 180px" />
 				</el-form-item>
 				<el-form-item>
 					<el-input v-model="childQuery.name" placeholder="菜品名称" clearable @keyup.enter="handleChildSearch" />
@@ -243,7 +246,13 @@ const childPickerVisible = ref(false)
 const childList = ref<any[]>([])
 const childTotal = ref(0)
 const childSelected = ref<any[]>([])
-const childQuery = reactive({ current: 1, size: 10, name: "", categoryId: "" as string | number | "" })
+const childQuery = reactive({
+	current: 1,
+	size: 10,
+	name: "",
+	categoryId: "" as string | number | "",
+	merchantId: "" as string | number | "",
+})
 
 const validateCombo = (_: any, __: any, cb: any) => {
 	if (form.spuType !== 2) return cb()
@@ -276,13 +285,44 @@ const onSpuTypeChange = () => {
 	}
 }
 
+watch(
+	() => form.merchantId,
+	(mid, oldMid) => {
+		if (mid === oldMid) return
+		form.categoryId = ""
+		childQuery.merchantId = mid || ""
+		childQuery.categoryId = ""
+	},
+)
+
+watch(
+	() => childQuery.merchantId,
+	(mid, oldMid) => {
+		if (!childPickerVisible.value) return
+		if (mid === oldMid) return
+		childQuery.categoryId = ""
+		childQuery.current = 1
+		searchChildren()
+	},
+)
+
 const openChildPicker = () => {
-	childPickerVisible.value = true
+	if (!form.merchantId) {
+		useMessage().warning("请先选择商户")
+		return
+	}
+	childQuery.merchantId = form.merchantId
+	childQuery.categoryId = ""
 	childQuery.current = 1
+	childPickerVisible.value = true
 	searchChildren()
 }
 
 const handleChildSearch = () => {
+	if (!childQuery.merchantId) {
+		useMessage().warning("请先选择商户")
+		return
+	}
 	childQuery.current = 1
 	searchChildren()
 }
@@ -290,18 +330,24 @@ const handleChildSearch = () => {
 const resetChildQuery = () => {
 	childQuery.name = ""
 	childQuery.categoryId = ""
+	childQuery.merchantId = form.merchantId || ""
 	childQuery.current = 1
 	searchChildren()
 }
 
 const searchChildren = async () => {
+	if (!childQuery.merchantId) {
+		childList.value = []
+		childTotal.value = 0
+		return
+	}
 	try {
 		const res: any = await fetchSimpleList({
 			current: childQuery.current,
 			size: childQuery.size,
 			name: childQuery.name || undefined,
 			categoryId: childQuery.categoryId || undefined,
-			merchantId: form.merchantId || undefined,
+			merchantId: childQuery.merchantId,
 		})
 		childList.value = (res.data?.records || []).filter((r: any) => String(r.id) !== String(form.id))
 		childTotal.value = res.data?.total || 0