From 624344a0bd0f644b969c72779ce40a55eb95bd2d Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Mon, 15 Sep 2025 19:40:45 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E5=A4=8D=E5=85=B1=E5=AF=8C?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=88=86=E7=B1=BB=E5=9B=BE=E7=89=87=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=88=90=E5=8A=9F=E4=B8=8D=E5=9B=9E=E6=98=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/supermarket/mallCategory/form.vue | 260 ++++++++++----------
 1 file changed, 124 insertions(+), 136 deletions(-)

diff --git a/src/views/supermarket/mallCategory/form.vue b/src/views/supermarket/mallCategory/form.vue
index bc37ff7..cd73e38 100644
--- a/src/views/supermarket/mallCategory/form.vue
+++ b/src/views/supermarket/mallCategory/form.vue
@@ -1,189 +1,177 @@
 <template>
-    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
-      :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">
-      <el-form-item label="商户" prop="merchantId" required>
-        <el-select v-model="form.merchantId" placeholder="请选择商户" clearable>
-          <el-option
-            v-for="merchant in merchantOptions"
-            :key="merchant.value"
-            :label="merchant.label"
-            :value="merchant.value"
-          />
-        </el-select>
-      </el-form-item>
-    </el-col>
+	<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :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">
+					<el-form-item label="商户" prop="merchantId" required>
+						<el-select v-model="form.merchantId" placeholder="请选择商户" clearable>
+							<el-option v-for="merchant in merchantOptions" :key="merchant.value" :label="merchant.label" :value="merchant.value" />
+						</el-select>
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="父级分类" prop="parentId">
-        <el-select v-model="form.parentId" clearable placeholder="请选择父级分类">
-          <el-option
-            v-for="item in categoryOptions"
-            :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="parentId">
+						<el-select v-model="form.parentId" clearable placeholder="请选择父级分类">
+							<el-option v-for="item in categoryOptions" :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="请输入分类名称"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="分类名称" prop="name">
+						<el-input v-model="form.name" placeholder="请输入分类名称" />
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="排序" prop="sort">
-        <el-input-number :min="1" :max="1000" v-model="form.sort" placeholder="请输入排序"></el-input-number>
-      </el-form-item>
-    </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="排序" prop="sort">
+						<el-input-number :min="1" :max="1000" v-model="form.sort" placeholder="请输入排序"></el-input-number>
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="状态(0正常，1下架)" prop="status">
-            <el-radio-group v-model="form.status">
-             <el-radio :label="item.value" v-for="(item, index) in status" border :key="index">{{ item.label }}
-            </el-radio>
-            </el-radio-group>
-        </el-form-item>
-      </el-col>
-
-    <el-col :span="12" class="mb20">
-  <el-form-item label="分类图片" prop="picUrl">
-    <upload-img v-model="form.picUrl"></upload-img>
-  </el-form-item>
-  </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="状态(0正常，1下架)" prop="status">
+						<el-radio-group v-model="form.status">
+							<el-radio :label="item.value" v-for="(item, index) in status" border :key="index">{{ item.label }} </el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</el-col>
 
+				<el-col :span="12" class="mb20">
+					<el-form-item label="分类图片" prop="picUrl">
+						<upload-img v-model:imageUrl="form.picUrl"></upload-img>
+					</el-form-item>
+				</el-col>
 			</el-row>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="visible = false">取消</el-button>
-          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
-        </span>
-      </template>
-    </el-dialog>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="visible = false">取消</el-button>
+				<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
+			</span>
+		</template>
+	</el-dialog>
 </template>
 
 <script setup lang="ts" name="mallCategoryDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj, fetchList } from '/@/api/supermarket/mallCategory'
-import { selectOption as fetchMerchantSelect } from '/@/api/supermarket/mallMerchant';
-import { rule } from '/@/utils/validate';
-import { ref, reactive, nextTick, onMounted } from 'vue';
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj, fetchList } from "/@/api/supermarket/mallCategory"
+import { selectOption as fetchMerchantSelect } from "/@/api/supermarket/mallMerchant"
+import { rule } from "/@/utils/validate"
+import { ref, reactive, nextTick, onMounted } from "vue"
+const emit = defineEmits(["refresh"])
 
 // 定义变量内容
-const dataFormRef = ref();
+const dataFormRef = ref()
 const visible = ref(false)
 const loading = ref(false)
 // 定义字典
-const { status } = useDict('status')
+const { status } = useDict("status")
 
 // 提交表单数据
 const form = reactive({
-		id:'',
-	  merchantId: '',
-	  parentId: '',
-	  name: '',
-	  sort: 0,
-	  status: '0',
-	  picUrl: '',
-});
+	id: "",
+	merchantId: "",
+	parentId: "",
+	name: "",
+	sort: 0,
+	status: "0",
+	picUrl: "",
+})
 
 // 定义校验规则
 const dataRules = ref({
-        merchantId: [{ required: true, message: '商户不能为空', trigger: 'change' }],
-        name: [{required: true, message: '分类名称不能为空', trigger: 'blur'}],
+	merchantId: [{ required: true, message: "商户不能为空", trigger: "change" }],
+	name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
 })
 
 // 分类选项
-const categoryOptions = ref<any[]>([]);
+const categoryOptions = ref<any[]>([])
 
 // 商户选项
-const merchantOptions = ref<any[]>([]);
+const merchantOptions = ref<any[]>([])
 
 // 获取所有分类（排除自身）
 const loadCategories = async () => {
-  const res = await fetchList({ size: 9999 });
-  if (res && res.data && res.data.records) {
-    // 排除自己，避免自己作为自己的父级
-    categoryOptions.value = res.data.records.filter((item: any) => item.id !== form.id);
-  }
-};
+	const res = await fetchList({ size: 9999 })
+	if (res && res.data && res.data.records) {
+		// 排除自己，避免自己作为自己的父级
+		categoryOptions.value = res.data.records.filter((item: any) => item.id !== form.id)
+	}
+}
 
 // 加载商户选项
 const loadMerchantOptions = async () => {
-  const res = await fetchMerchantSelect();
-  merchantOptions.value = res.data || [];
-};
+	const res = await fetchMerchantSelect()
+	merchantOptions.value = res.data || []
+}
 
 onMounted(() => {
-  loadCategories();
-  loadMerchantOptions();
-});
+	loadCategories()
+	loadMerchantOptions()
+})
 
 // 打开弹窗
 const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
+	visible.value = true
+	form.id = ""
 
-  // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-    form.merchantId = '';
-    form.status = '0';
-  });
+	// 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields()
+		form.merchantId = ""
+		form.status = "0"
+	})
 
-  // 获取mallCategory信息
-  if (id) {
-    form.id = id
-    getmallCategoryData(id)
-  } else {
-    // 新增时直接加载分类和商户
-    loadCategories();
-    loadMerchantOptions();
-  }
-};
+	// 获取mallCategory信息
+	if (id) {
+		form.id = id
+		getmallCategoryData(id)
+	} else {
+		// 新增时直接加载分类和商户
+		loadCategories()
+		loadMerchantOptions()
+	}
+}
 
 // 提交
 const onSubmit = async () => {
-	const valid = await dataFormRef.value.validate().catch(() => {});
-	if (!valid) return false;
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return false
 
 	try {
-    loading.value = true;
-		form.id ? await putObj(form) : await addObj(form);
-		useMessage().success(form.id ? '修改成功' : '添加成功');
-		visible.value = false;
-		emit('refresh');
+		loading.value = true
+		form.id ? await putObj(form) : await addObj(form)
+		useMessage().success(form.id ? "修改成功" : "添加成功")
+		visible.value = false
+		emit("refresh")
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	} finally {
-    loading.value = false;
-  }
-};
-
+		loading.value = false
+	}
+}
 
 // 初始化表单数据
 const getmallCategoryData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-    // 编辑时加载分类和商户并排除自己
-    loadCategories();
-    loadMerchantOptions();
-  }).finally(() => {
-    loading.value = false
-  })
-};
+	// 获取数据
+	loading.value = true
+	getObj(id)
+		.then((res: any) => {
+			Object.assign(form, res.data)
+			// 编辑时加载分类和商户并排除自己
+			loadCategories()
+			loadMerchantOptions()
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
-  openDialog
-});
+	openDialog,
+})
 </script>