线上点餐-菜品分类-新增，添加商户选项

src/views/canteen/canteenOnlineCategory/form.vue

@@ -1,6 +1,5 @@
 <template>
-    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
-      :close-on-click-modal="false" draggable>
 		<el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
 			<el-row :gutter="24">
 				<!--    <el-col :span="12" class="mb20">-->
@@ -9,6 +8,14 @@
 				<!--      </el-form-item>-->
 				<!--      </el-col>-->
 
+				<el-col :span="24" class="mb20">
+					<el-form-item label="商户" prop="merchantId">
+						<el-select v-model="form.merchantId" placeholder="请选择商户" style="width: 240px">
+							<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+
 				<el-col :span="12" class="mb20">
 					<el-form-item label="分类名称" prop="name">
 						<el-input v-model="form.name" placeholder="请输入分类名称" />
@@ -40,7 +47,6 @@
 				<!--        <el-input v-model="form.deptId" placeholder="请输入部门id"/>-->
 				<!--      </el-form-item>-->
 				<!--      </el-col>-->
-
 			</el-row>
 		</el-form>
 		<template #footer>
@@ -54,20 +60,22 @@
 
 <script setup lang="ts" name="CanteenOnlineCategoryDialog">
 import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
+import { useMessage } from '/@/hooks/message';
-import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineCategory'
+import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineCategory';
+import { selectMerchantList } from '/@/api/canteen/merchantInfo';
 import { rule } from '/@/utils/validate';
 const emit = defineEmits(['refresh']);
 
 // 定义变量内容
 const dataFormRef = ref();
-const visible = ref(false)
+const visible = ref(false);
-const loading = ref(false)
+const loading = ref(false);
-// 定义字典
+const merchantInfo = ref<any>([]); // 商户信息
 
 // 提交表单数据
 const form = reactive({
 	id: '',
+	merchantId: '',
 	parentId: '',
 	name: '',
 	picUrl: '',
@@ -78,24 +86,37 @@ const form = reactive({
 
 // 定义校验规则
 const dataRules = ref({
+	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
 	name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-    sort: [{required: true, message: '分类排序不能为空', trigger: 'blur'}, { validator: rule.number, trigger: 'blur' }],
+	sort: [
-})
+		{ required: true, message: '分类排序不能为空', trigger: 'blur' },
+		{ validator: rule.number, trigger: 'blur' },
+	],
+});
 
 // 打开弹窗
-const openDialog = (id: string) => {
+const openDialog = async (id: string) => {
-  visible.value = true
+	visible.value = true;
-  form.id = ''
+	form.id = '';
 
 	// 重置表单数据
-	nextTick(() => {
 	dataFormRef.value?.resetFields();
-	});
+
+	if (merchantInfo.value.length <= 0) {
+		try {
+			// 获取商户下拉框选项
+			const res = await selectMerchantList('1');
+			merchantInfo.value = res.data;
+		} catch (error) {
+			merchantInfo.value = [];
+			loading.value = false;
+		}
+	}
 
 	// 获取canteenOnlineCategory信息
 	if (id) {
-    form.id = id
+		form.id = id;
-    getcanteenOnlineCategoryData(id)
+		getcanteenOnlineCategoryData(id);
 	}
 };
 
@@ -117,20 +138,21 @@ const onSubmit = async () => {
 	}
 };
 
-
 // 初始化表单数据
 const getcanteenOnlineCategoryData = (id: string) => {
 	// 获取数据
-  loading.value = true
+	loading.value = true;
-  getObj(id).then((res: any) => {
+	getObj(id)
-    Object.assign(form, res.data)
+		.then((res: any) => {
-  }).finally(() => {
+			Object.assign(form, res.data);
-    loading.value = false
 		})
+		.finally(() => {
+			loading.value = false;
+		});
 };
 
 // 暴露变量
 defineExpose({
-  openDialog
+	openDialog,
 });
 </script>