From 9969094ee800566945141262786073cae3c5e4c8 Mon Sep 17 00:00:00 2001
From: weiwei <ctw@example.com>
Date: Mon, 8 Sep 2025 18:01:59 +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=9F=8E=E5=95=86=E6=88=B7=E5=9B=BE=E7=89=87=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=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/mallMerchant/form.vue | 319 ++++++++++----------
 1 file changed, 162 insertions(+), 157 deletions(-)

diff --git a/src/views/supermarket/mallMerchant/form.vue b/src/views/supermarket/mallMerchant/form.vue
index 0e3b567..306e4cb 100644
--- a/src/views/supermarket/mallMerchant/form.vue
+++ b/src/views/supermarket/mallMerchant/form.vue
@@ -1,212 +1,217 @@
 <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="name">
-        <el-input v-model="form.name" placeholder="请输入商户名称"/>
-      </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="name">
+						<el-input v-model="form.name" placeholder="请输入商户名称" />
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="商户简称" prop="shortName">
-        <el-input v-model="form.shortName" placeholder="请输入商户简称"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="商户简称" prop="shortName">
+						<el-input v-model="form.shortName" placeholder="请输入商户简称" />
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="联系人" prop="contactName">
-        <el-input v-model="form.contactName" placeholder="请输入联系人"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="联系人" prop="contactName">
+						<el-input v-model="form.contactName" placeholder="请输入联系人" />
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="联系电话" prop="contactPhone">
-        <el-input v-model="form.contactPhone" placeholder="请输入联系电话"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="联系电话" prop="contactPhone">
+						<el-input v-model="form.contactPhone" placeholder="请输入联系电话" />
+					</el-form-item>
+				</el-col>
 
-<!--    <el-col :span="12" class="mb20">-->
-<!--      <el-form-item label="邮箱" prop="email">-->
-<!--        <el-input v-model="form.email" placeholder="请输入邮箱"/>-->
-<!--      </el-form-item>-->
-<!--      </el-col>-->
+				<!--    <el-col :span="12" class="mb20">-->
+				<!--      <el-form-item label="邮箱" prop="email">-->
+				<!--        <el-input v-model="form.email" placeholder="请输入邮箱"/>-->
+				<!--      </el-form-item>-->
+				<!--      </el-col>-->
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="营业时间" prop="businessHours">
-        <el-time-picker
-          v-model="businessHoursRange"
-          is-range
-          range-separator="至"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          format="HH:mm"
-          value-format="HH:mm"
-          placeholder="请选择营业时间"
-        />
-      </el-form-item>
-    </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="营业时间" prop="businessHours">
+						<el-time-picker
+							v-model="businessHoursRange"
+							is-range
+							range-separator="至"
+							start-placeholder="开始时间"
+							end-placeholder="结束时间"
+							format="HH:mm"
+							value-format="HH:mm"
+							placeholder="请选择营业时间"
+						/>
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="状态" prop="status">
-            <el-radio-group v-model="form.status">
-             <el-radio :label="item.value" v-for="(item, index) in common_data_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="status">
+						<el-radio-group v-model="form.status">
+							<el-radio :label="item.value" v-for="(item, index) in common_data_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="licenseNo">
-        <el-input v-model="form.licenseNo" placeholder="请输入营业执照号"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="营业执照号" prop="licenseNo">
+						<el-input v-model="form.licenseNo" placeholder="请输入营业执照号" />
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-      <el-form-item label="详细地址" prop="address">
-        <el-input type="textarea" v-model="form.address" placeholder="请输入详细地址"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="详细地址" prop="address">
+						<el-input type="textarea" v-model="form.address" placeholder="请输入详细地址" />
+					</el-form-item>
+				</el-col>
 
-    <el-col :span="12" class="mb20">
-  <el-form-item label="商户图片" prop="images">
-    <upload-img v-model="form.images"></upload-img>
-  </el-form-item>
-  </el-col>
-
-    <el-col :span="12" class="mb20">
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="form.remark" placeholder="请输入备注"/>
-      </el-form-item>
-      </el-col>
+				<el-col :span="12" class="mb20">
+					<el-form-item label="商户图片" prop="images">
+						<upload-img v-model:imageUrl="form.images"></upload-img>
+					</el-form-item>
+				</el-col>
 
+				<el-col :span="12" class="mb20">
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model="form.remark" placeholder="请输入备注" />
+					</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="MallMerchantDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj } from '/@/api/supermarket/mallMerchant'
-import { rule } from '/@/utils/validate';
-import { ref, reactive, nextTick, watch } from 'vue';
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/supermarket/mallMerchant"
+import { rule } from "/@/utils/validate"
+import { ref, reactive, nextTick, watch } from "vue"
+const emit = defineEmits(["refresh"])
 
 // 定义变量内容
-const dataFormRef = ref();
+const dataFormRef = ref()
 const visible = ref(false)
 const loading = ref(false)
 // 定义字典
-const { common_data_status } = useDict('common_data_status')
+const { common_data_status } = useDict("common_data_status")
 
 // 提交表单数据
 const form = reactive({
-		id:'',
-	  name: '',
-	  shortName: '',
-	  contactName: '',
-	  contactPhone: '',
-	  email: '',
-	  businessHours: '', // 营业时间
-	  status: 1, // 默认正常状态
-	  licenseNo: '',
-	  address: '',
-	  images: '',
-	  remark: '',
-	  deptId: '',
-});
+	id: "",
+	name: "",
+	shortName: "",
+	contactName: "",
+	contactPhone: "",
+	email: "",
+	businessHours: "", // 营业时间
+	status: 1, // 默认正常状态
+	licenseNo: "",
+	address: "",
+	images: "",
+	remark: "",
+	deptId: "",
+})
 
 // 营业时间范围选择器
-const businessHoursRange = ref<[string, string] | null>(null);
+const businessHoursRange = ref<[string, string] | null>(null)
 
 // 监听营业时间范围变化，转换为数据库格式
-watch(businessHoursRange, (newRange) => {
-  if (newRange && newRange.length === 2) {
-    form.businessHours = `${newRange[0]}-${newRange[1]}`;
-  } else {
-    form.businessHours = '';
-  }
-}, { immediate: true });
+watch(
+	businessHoursRange,
+	(newRange) => {
+		if (newRange && newRange.length === 2) {
+			form.businessHours = `${newRange[0]}-${newRange[1]}`
+		} else {
+			form.businessHours = ""
+		}
+	},
+	{ immediate: true },
+)
 
 // 定义校验规则
 const dataRules = ref({
-        name: [{required: true, message: '商户名称不能为空', trigger: 'blur'}],
-        contactName: [{required: true, message: '联系人不能为空', trigger: 'blur'}],
-    contactPhone: [{required: true, message: '联系电话不能为空', trigger: 'blur'}, { validator: rule.mobilePhone, trigger: 'blur' }],
-    businessHours: [{required: true, message: '营业时间不能为空', trigger: 'change'}],
+	name: [{ required: true, message: "商户名称不能为空", trigger: "blur" }],
+	contactName: [{ required: true, message: "联系人不能为空", trigger: "blur" }],
+	contactPhone: [
+		{ required: true, message: "联系电话不能为空", trigger: "blur" },
+		{ validator: rule.mobilePhone, trigger: "blur" },
+	],
+	businessHours: [{ required: true, message: "营业时间不能为空", trigger: "change" }],
 })
 
 // 打开弹窗
 const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
+	visible.value = true
+	form.id = ""
 
-  // 重置表单数据
+	// 重置表单数据
 	nextTick(() => {
-		dataFormRef.value?.resetFields();
+		dataFormRef.value?.resetFields()
 		// 新增时设置默认状态为正常
 		if (!id) {
-			form.status = 1;
+			form.status = 1
 		}
 		// 重置营业时间
-		businessHoursRange.value = null;
-	});
+		businessHoursRange.value = null
+	})
 
-  // 获取mallMerchant信息
-  if (id) {
-    form.id = id
-    getmallMerchantData(id)
-  }
-};
+	// 获取mallMerchant信息
+	if (id) {
+		form.id = id
+		getmallMerchantData(id)
+	}
+}
 
 // 提交
 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 getmallMerchantData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-    
-    // 处理营业时间回显
-    if (res.data.businessHours) {
-      const timeRange = res.data.businessHours.split('-');
-      if (timeRange.length === 2) {
-        businessHoursRange.value = [timeRange[0], timeRange[1]];
-      }
-    }
-  }).finally(() => {
-    loading.value = false
-  })
-};
+	// 获取数据
+	loading.value = true
+	getObj(id)
+		.then((res: any) => {
+			Object.assign(form, res.data)
+
+			// 处理营业时间回显
+			if (res.data.businessHours) {
+				const timeRange = res.data.businessHours.split("-")
+				if (timeRange.length === 2) {
+					businessHoursRange.value = [timeRange[0], timeRange[1]]
+				}
+			}
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
-  openDialog
-});
+	openDialog,
+})
 </script>