食堂的所有表单校验修改

src/views/canteen/canteenCategory/form.vue

@@ -4,13 +4,18 @@
 			<el-row :gutter="24">
 				<el-col :span="14" class="mb20">
 					<el-form-item label="分类名称" prop="name">
-						<el-input v-model="form.name" placeholder="请输入分类名称" />
+						<el-input v-model.trim="form.name" placeholder="请输入分类名称" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="餐段类型" prop="categoryType">
 						<el-select v-model="form.categoryType" placeholder="请选择餐段类型" multiple>
-							<el-option :value="item.value" :label="item.label" v-for="(item, index) in daily_menu" :key="index"></el-option>
+							<el-option
+								:value="item.value"
+								:label="item.label"
+								v-for="(item, index) in daily_menu"
+								:key="index"
+							></el-option>
 						</el-select>
 					</el-form-item>
 				</el-col>
@@ -22,7 +27,7 @@
 
 				<el-col :span="14" class="mb20">
 					<el-form-item label="分类排序" prop="sort">
-						<el-input v-model="form.sort" placeholder="请输入分类排序" />
+						<el-input-number v-model="form.sort" :min="0" :precision="0" />
 					</el-form-item>
 				</el-col>
 
@@ -45,92 +50,92 @@
 </template>
 
 <script setup lang="ts" name="CanteenCategoryDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from '/@/hooks/message';
-import { getObj, addObj, putObj } from '/@/api/canteen/canteenCategory';
-import { rule } from '/@/utils/validate';
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/canteen/canteenCategory"
+import { rule } from "/@/utils/validate"
+const emit = defineEmits(["refresh"])
 
 // 定义变量内容
-const dataFormRef = ref();
-const visible = ref(false);
-const loading = ref(false);
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
 // 定义字典
-const { daily_menu } = useDict('daily_menu');
+const { daily_menu } = useDict("daily_menu")
 // 提交表单数据
 const form = reactive({
-	id: '',
-	parentId: '',
-	name: '',
-	picUrl: '',
-	sort: '',
-	status: '',
-	creator: '',
-	updater: '',
-	deleted: '',
-	deptId: '',
+	id: "",
+	parentId: "",
+	name: "",
+	picUrl: "",
+	sort: "",
+	status: "",
+	creator: "",
+	updater: "",
+	deleted: "",
+	deptId: "",
 	categoryType: [],
-});
+})
 
 // 定义校验规则
 const dataRules = ref({
-	name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
-	categoryType: [{ required: true, message: '餐段类型不能为空', trigger: 'blur' }],
-	sort: [{ required: true, message: '分类排序不能为空', trigger: 'blur' }],
-});
+	name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
+	categoryType: [{ required: true, message: "餐段类型不能为空", trigger: "blur" }],
+	sort: [{ required: true, message: "分类排序不能为空", trigger: "blur" }],
+})
 
 // 打开弹窗
 const openDialog = (id: string) => {
-	visible.value = true;
-	form.id = '';
+	visible.value = true
+	form.id = ""
 
 	// 重置表单数据
 	nextTick(() => {
-		dataFormRef.value?.resetFields();
-	});
+		dataFormRef.value?.resetFields()
+	})
 
 	// 获取canteenCategory信息
 	if (id) {
-		form.id = id;
-		getcanteenCategoryData(id);
+		form.id = id
+		getcanteenCategoryData(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;
+		loading.value = true
 		form.id
-			? await putObj({ ...form, categoryType: form.categoryType.join(',') })
-			: await addObj({ ...form, categoryType: form.categoryType.join(',') });
-		useMessage().success(form.id ? '修改成功' : '添加成功');
-		visible.value = false;
-		emit('refresh');
+			? await putObj({ ...form, categoryType: form.categoryType.join(",") })
+			: await addObj({ ...form, categoryType: form.categoryType.join(",") })
+		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 getcanteenCategoryData = (id: string) => {
 	// 获取数据
-	loading.value = true;
+	loading.value = true
 	getObj(id)
 		.then((res: any) => {
-			Object.assign(form, res.data, { categoryType: res.data.categoryType.split(',') });
+			Object.assign(form, res.data, { categoryType: res.data.categoryType.split(",") })
 		})
 		.finally(() => {
-			loading.value = false;
-		});
-};
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
 	openDialog,
-});
+})
 </script>

src/views/canteen/canteenDailyMenu/form.vue

@@ -35,7 +35,12 @@
 				<div class="food_list">
 					<td class="food_list_item" v-for="(item, index) in selectedList" :key="item.id">
 						<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
-						<div class="w-full text-center text-black">{{ item.name }}</div>
+						<div class="w-full flex justify-between items-center text-black">
+							<span>{{ item.name }}</span>
+							<span class="mx-1">|</span>
+							<span>{{ "某分类" }}</span>
+						</div>
+						<div class="w-full text-lg text-center text-red-600">{{ "￥6.6" }}</div>
 					</td>
 				</div>
 			</tr>

src/views/canteen/canteenDailyMenu/index.vue

@@ -47,7 +47,12 @@
 								fit="cover"
 								@click="delteData(item.tid)"
 							/>
-							<div class="w-full text-center text-black">{{ item.name }}</div>
+							<div class="w-full flex justify-between items-center text-black">
+								<span>{{ item.name }}</span>
+								<span class="mx-1">|</span>
+								<span>{{ "某分类" }}</span>
+							</div>
+							<div class="w-full text-lg text-center text-red-600">{{ "￥6.6" }}</div>
 						</td>
 					</div>
 				</tr>
@@ -225,7 +230,10 @@ onMounted(() => {
 		margin-left: 20px;
 
 		&_item {
-			display: inline-block;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: center;
 			margin: 0 0 10px 10px;
 			padding: 10px 6px;
 			background-color: #f2f2f2;

src/views/canteen/canteenOnlineCategory/form.vue

@@ -9,7 +9,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="分类名称" prop="name">
-						<el-input v-model="form.name" placeholder="请输入分类名称" />
+						<el-input v-model.trim="form.name" placeholder="请输入分类名称" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
@@ -19,7 +19,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="分类排序" prop="sort">
-						<el-input-number v-model="form.sort" placeholder="请输入分类排序" />
+						<el-input-number v-model="form.sort" :min="0" :precision="0" placeholder="请输入分类排序" />
 					</el-form-item>
 				</el-col>
 				<!--    <el-col :span="12" class="mb20">-->
@@ -41,86 +41,86 @@
 </template>
 
 <script setup lang="ts" name="CanteenOnlineCategoryDialog">
-import { useMessage } from '/@/hooks/message';
-import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineCategory';
-import { rule } from '/@/utils/validate';
-const emit = defineEmits(['refresh']);
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/canteen/canteenOnlineCategory"
+import { rule } from "/@/utils/validate"
+const emit = defineEmits(["refresh"])
 
 // 定义变量内容
-const dataFormRef = ref();
-const visible = ref(false);
-const loading = ref(false);
+const dataFormRef = ref()
+const visible = ref(false)
+const loading = ref(false)
 
 // 提交表单数据
 const form = reactive({
-	id: '',
-	merchantId: '',
-	parentId: '',
-	name: '',
-	picUrl: '',
+	id: "",
+	merchantId: "",
+	parentId: "",
+	name: "",
+	picUrl: "",
 	sort: 0,
-	status: '',
-	deptId: '',
-});
+	status: "",
+	deptId: "",
+})
 
 // 定义校验规则
 const dataRules = ref({
-	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
-	name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+	merchantId: [{ required: true, message: "商户不能为空", trigger: "blur" }],
+	name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
 	sort: [
-		{ required: true, message: '分类排序不能为空', trigger: 'blur' },
-		{ validator: rule.number, trigger: 'blur' },
+		{ required: true, message: "分类排序不能为空", trigger: "blur" },
+		{ validator: rule.number, trigger: "blur" },
 	],
-});
+})
 
 // 打开弹窗
 const openDialog = async (id: string) => {
-	visible.value = true;
-	form.id = '';
+	visible.value = true
+	form.id = ""
 
 	// 重置表单数据
-	dataFormRef.value?.resetFields();
+	dataFormRef.value?.resetFields()
 
 	// 获取canteenOnlineCategory信息
 	if (id) {
-		form.id = id;
-		getcanteenOnlineCategoryData(id);
+		form.id = id
+		getcanteenOnlineCategoryData(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 getcanteenOnlineCategoryData = (id: string) => {
 	// 获取数据
-	loading.value = true;
+	loading.value = true
 	getObj(id)
 		.then((res: any) => {
-			Object.assign(form, res.data);
+			Object.assign(form, res.data)
 		})
 		.finally(() => {
-			loading.value = false;
-		});
-};
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
 	openDialog,
-});
+})
 </script>

src/views/canteen/canteenOnlineSpu/form.vue

@@ -9,7 +9,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品名称" prop="name">
-						<el-input v-model="form.name" placeholder="请输入商品名称" />
+						<el-input v-model.trim="form.name" placeholder="请输入商品名称" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="14" class="mb20">
@@ -19,17 +19,17 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品价格" prop="price">
-						<el-input-number v-model="form.price" :precision="2" placeholder="请输入商品价格" />
+						<el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="市场价" prop="marketPrice">
-						<el-input-number v-model="form.marketPrice" :precision="2" placeholder="请输入市场价" />
+						<el-input-number v-model="form.marketPrice" :min="0" :precision="2" placeholder="请输入市场价" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="库存" prop="stock">
-						<el-input-number v-model="form.stock" placeholder="请输入库存" />
+						<el-input-number v-model="form.stock" :min="0" :precision="0" placeholder="请输入库存" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
@@ -44,7 +44,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="排序字段" prop="sort">
-						<el-input-number v-model="form.sort" placeholder="请输入排序字段" />
+						<el-input-number v-model="form.sort" :min="0" :precision="0" placeholder="请输入排序字段" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">

src/views/canteen/canteenSpu/form.vue

@@ -9,7 +9,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品名称" prop="name">
-						<el-input v-model="form.name" placeholder="请输入商品名称" />
+						<el-input v-model.trim="form.name" placeholder="请输入商品名称" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="14" class="mb20">
@@ -36,7 +36,7 @@
 
 				<el-col :span="14" class="mb20">
 					<el-form-item label="排序" prop="sort">
-						<el-input v-model="form.sort" placeholder="请输入排序" />
+						<el-input-number v-model="form.sort" :min="0" :precision="0" />
 					</el-form-item>
 				</el-col>
 
@@ -52,19 +52,19 @@
 
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品价格" prop="price">
-						<el-input-number v-model="form.price" :precision="2" placeholder="请输入商品价格" />
+						<el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
 					</el-form-item>
 				</el-col>
 
 				<el-col :span="14" class="mb20">
 					<el-form-item label="市场价" prop="marketPrice">
-						<el-input-number v-model="form.marketPrice" :precision="2" placeholder="请输入市场价" />
+						<el-input-number v-model="form.marketPrice" :min="0" :precision="2" placeholder="请输入市场价" />
 					</el-form-item>
 				</el-col>
 
 				<el-col :span="14" class="mb20">
 					<el-form-item label="库存" prop="stock">
-						<el-input-number v-model="form.stock" placeholder="请输入库存" />
+						<el-input-number v-model="form.stock" :min="0" :precision="0" />
 					</el-form-item>
 				</el-col>
 

src/views/canteen/merchantInfo/index.vue

@@ -1,75 +1,110 @@
 <template>
-  <div class="layout-padding">
-    <div class="layout-padding-auto layout-padding-view">
-      <el-row>
-        <div class="mb8" style="width: 100%">
-          <el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()"
-            v-auth="'canteen_merchantInfo_add'">
-            新 增
-          </el-button>
-          <el-button plain :disabled="multiple" icon="Delete" type="primary" v-auth="'canteen_merchantInfo_del'"
-            @click="handleDelete(selectObjs)">
-            删除
-          </el-button>
-          <right-toolbar v-model:showSearch="showSearch" :export="'canteen_merchantInfo_export'"
-            @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"
-            @queryTable="getDataList"></right-toolbar>
-        </div>
-      </el-row>
-      <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
-        :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
-        @sort-change="sortChangeHandle">
-        <el-table-column type="selection" width="40" align="center" />
-        <el-table-column type="index" label="#" width="40" />
-        <!-- <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
+	<div class="layout-padding">
+		<div class="layout-padding-auto layout-padding-view">
+			<el-row>
+				<div class="mb8" style="width: 100%">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="formDialogRef.openDialog()"
+						v-auth="'canteen_merchantInfo_add'"
+					>
+						新 增
+					</el-button>
+					<el-button
+						plain
+						:disabled="multiple"
+						icon="Delete"
+						type="primary"
+						v-auth="'canteen_merchantInfo_del'"
+						@click="handleDelete(selectObjs)"
+					>
+						删除
+					</el-button>
+					<right-toolbar
+						v-model:showSearch="showSearch"
+						:export="'canteen_merchantInfo_export'"
+						@exportExcel="exportExcel"
+						class="ml10 mr20"
+						style="float: right"
+						@queryTable="getDataList"
+					></right-toolbar>
+				</div>
+			</el-row>
+			<el-table
+				:data="state.dataList"
+				v-loading="state.loading"
+				border
+				:cell-style="tableStyle.cellStyle"
+				:header-cell-style="tableStyle.headerCellStyle"
+				@selection-change="selectionChangHandle"
+				@sort-change="sortChangeHandle"
+			>
+				<el-table-column type="selection" width="40" align="center" />
+				<el-table-column type="index" label="#" width="40" />
+				<!-- <el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
           <template #default="scope">
             <dict-tag :options="merchant_type" :value="scope.row.merchantType"></dict-tag>
           </template>
 </el-table-column> -->
-        <el-table-column prop="name" label="商户名" />
-        <el-table-column prop="logo" label="log">
-          <template #default="{ row }">
-            <preview-image :src="row.logo" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="deptName" label="部门" />
-        <el-table-column prop="collectMoneyCode" label="商户收款二维码" show-overflow-tooltip>
-          <template #default="{ row }">
-            <preview-image :src="row.logo" />
-          </template>
-        </el-table-column>
-        <el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
-        <el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip />
-        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
-        <el-table-column label="操作" width="150">
-          <template #default="scope">
-            <el-button icon="edit-pen" text type="primary" v-auth="'canteen_merchantInfo_edit'"
-              @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>
-            <el-button icon="delete" text type="primary" v-auth="'canteen_merchantInfo_del'"
-              @click="handleDelete([scope.row.id])">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
-    </div>
+				<el-table-column prop="name" label="商户名" />
+				<el-table-column prop="logo" label="logo">
+					<template #default="{ row }">
+						<preview-image :src="row.logo" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="deptName" label="部门" />
+				<el-table-column prop="collectMoneyCode" label="商户收款二维码" show-overflow-tooltip>
+					<template #default="{ row }">
+						<preview-image :src="row.logo" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
+				<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip />
+				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
+				<el-table-column label="操作" width="150">
+					<template #default="scope">
+						<el-button
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'canteen_merchantInfo_edit'"
+							@click="formDialogRef.openDialog(scope.row.id)"
+						>
+							编辑
+						</el-button>
+						<el-button
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'canteen_merchantInfo_del'"
+							@click="handleDelete([scope.row.id])"
+						>
+							删除
+						</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+		</div>
 
-    <!-- 编辑、新增  -->
-    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
-
-  </div>
+		<!-- 编辑、新增  -->
+		<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
+	</div>
 </template>
 
 <script setup lang="ts" name="systemMerchantInfo">
-import { BasicTableProps, useTable } from "/@/hooks/table";
-import { fetchList, delObjs } from "/@/api/canteen/merchantInfo";
-import { useMessage, useMessageBox } from "/@/hooks/message";
-import { useDict } from '/@/hooks/dict';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { fetchList, delObjs } from "/@/api/canteen/merchantInfo"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 // 定义查询字典
 
-const { merchant_type } = useDict('merchant_type')
+const { merchant_type } = useDict("merchant_type")
 // 定义变量内容
 const formDialogRef = ref()
 // 搜索变量
@@ -80,54 +115,48 @@ const selectObjs = ref([]) as any
 const multiple = ref(true)
 
 const state: BasicTableProps = reactive<BasicTableProps>({
-  queryForm: {},
-  pageList: fetchList
+	queryForm: {},
+	pageList: fetchList,
 })
 
 //  table hook
-const {
-  getDataList,
-  currentChangeHandle,
-  sizeChangeHandle,
-  sortChangeHandle,
-  downBlobFile,
-  tableStyle
-} = useTable(state)
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } =
+	useTable(state)
 
 // 清空搜索条件
 const resetQuery = () => {
-  // 清空搜索条件
-  queryRef.value?.resetFields()
-  // 清空多选
-  selectObjs.value = []
-  getDataList()
+	// 清空搜索条件
+	queryRef.value?.resetFields()
+	// 清空多选
+	selectObjs.value = []
+	getDataList()
 }
 
 // 导出excel
 const exportExcel = () => {
-  downBlobFile('/canteen/merchantInfo/export', Object.assign(state.queryForm, { ids: selectObjs }), 'merchantInfo.xlsx')
+	downBlobFile("/canteen/merchantInfo/export", Object.assign(state.queryForm, { ids: selectObjs }), "merchantInfo.xlsx")
 }
 
 // 多选事件
 const selectionChangHandle = (objs: { id: string }[]) => {
-  selectObjs.value = objs.map(({ id }) => id);
-  multiple.value = !objs.length;
-};
+	selectObjs.value = objs.map(({ id }) => id)
+	multiple.value = !objs.length
+}
 
 // 删除操作
 const handleDelete = async (ids: string[]) => {
-  try {
-    await useMessageBox().confirm('此操作将永久删除');
-  } catch {
-    return;
-  }
+	try {
+		await useMessageBox().confirm("此操作将永久删除")
+	} catch {
+		return
+	}
 
-  try {
-    await delObjs(ids);
-    getDataList();
-    useMessage().success('删除成功');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  }
-};
+	try {
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	}
+}
 </script>

src/views/wallet/mch-manage/form.vue

@@ -1,180 +1,187 @@
 <template>
-  <el-dialog :title="form.id ? '编辑' : '新增'" width="40%" 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-dialog :title="form.id ? '编辑' : '新增'" width="40%" 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="24" class="mb20">
+					<el-form-item label="商户名" prop="name">
+						<el-input v-model.trim="form.name" placeholder="请输入商户名" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="商户名" prop="name">
-            <el-input v-model="form.name" placeholder="请输入商户名" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="部门" prop="deptId">
+						<select-dept v-model="form.deptId" placeholder="请选择部门" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="部门" prop="deptId">
-            <select-dept v-model="form.deptId" placeholder="请选择部门" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="商户类型" prop="merchantType">
+						<el-checkbox-group v-model="form.merchantType">
+							<el-checkbox :label="item.value" v-for="(item, index) in merchant_type" border :key="index">
+								{{ item.label }}
+							</el-checkbox>
+						</el-checkbox-group>
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="商户类型" prop="merchantType">
-            <el-checkbox-group v-model="form.merchantType">
-              <el-checkbox :label="item.value" v-for="(item, index) in merchant_type" border :key="index">
-                {{ item.label }}
-              </el-checkbox>
-            </el-checkbox-group>
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="商户logo" prop="logoPic">
+						<upload-img v-model:imageUrl="form.logoPic"></upload-img>
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="商户logo" prop="logoPic">
-            <upload-img v-model:imageUrl="form.logoPic"></upload-img>
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="轮播图" prop="swiperPic">
+						<upload-imgs v-model:imageUrls="form.swiperPic" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="轮播图" prop="swiperPic">
-            <upload-imgs v-model:imageUrls="form.swiperPic" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="联系电话" prop="phone">
+						<el-input v-model.trim="form.phone" placeholder="请输入联系电话" />
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="联系电话" prop="phone">
-            <el-input v-model="form.phone" placeholder="请输入联系电话" />
-          </el-form-item>
-        </el-col>
+				<el-col :span="24" class="mb20">
+					<el-form-item label="营业时间" prop="rangeDate">
+						<el-time-picker
+							v-model="form.rangeDate"
+							placeholder="请选择营业时间"
+							is-range
+							range-separator="至"
+							start-placeholder="开始日期"
+							end-placeholder="结束日期"
+							value-format="HH:mm"
+							format="HH:mm"
+						/>
+					</el-form-item>
+				</el-col>
 
-        <el-col :span="24" class="mb20">
-          <el-form-item label="营业时间" prop="rangeDate">
-            <el-time-picker v-model="form.rangeDate" placeholder="请选择营业时间" is-range range-separator="至"
-              start-placeholder="开始日期" end-placeholder="结束日期" value-format="HH:mm" format="HH:mm" />
-          </el-form-item>
-        </el-col>
-
-        <el-col :span="24" class="mb20">
-          <el-form-item label="店铺地址" prop="address">
-            <el-input type="textarea" v-model="form.address" 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-col :span="24" class="mb20">
+					<el-form-item label="店铺地址" prop="address">
+						<el-input type="textarea" v-model.trim="form.address" 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>
 </template>
 
 <script setup lang="ts" name="MerchantInfoDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from "/@/hooks/message";
-import { getObj, addObj, putObj } from '/@/api/wallet/mch-manage'
-import { rule } from '/@/utils/validate';
-import { parseTime } from '/@/utils/formatTime'
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/wallet/mch-manage"
+import { rule } from "/@/utils/validate"
+import { parseTime } from "/@/utils/formatTime"
+const emit = defineEmits(["refresh"])
 
 // 定义变量内容
-const dataFormRef = ref();
+const dataFormRef = ref()
 const visible = ref(false)
 const loading = ref(false)
 //定义业务变量内容
 
 // 定义字典
-const { merchant_type } = useDict('merchant_type')
+const { merchant_type } = useDict("merchant_type")
 
 // 提交表单数据
 const form = reactive({
-  id: '',
-  deptId: '',
-  name: '',
-  merchantType: [],
-  logoPic: '',
-  collectMoneyCode: '',
-  swiperPic: [],
-  phone: '',
-  businessTime: '',
-  address: '',
-  jobStartTime: '',
-  jobEndTime: '',
-  rangeDate: [],
-});
+	id: "",
+	deptId: "",
+	name: "",
+	merchantType: [],
+	logoPic: "",
+	collectMoneyCode: "",
+	swiperPic: [],
+	phone: "",
+	businessTime: "",
+	address: "",
+	jobStartTime: "",
+	jobEndTime: "",
+	rangeDate: [],
+})
 
 // 定义校验规则
 const dataRules = ref({
-  name: [{ required: true, message: '商户名不能为空', trigger: 'blur' }],
-  types: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
-  logoPic: [{ required: true, message: '请上传商户logo', trigger: 'change' }],
-  swiperPic: [{ required: true, message: '请上传商户轮播图', trigger: 'change' }],
-  rangeDate: [{ required: true, message: '请选择营业时间', trigger: 'change' }],
-  deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
-  merchantType: [{ required: true, message: '请选择商户类型', trigger: 'change' }],
+	name: [{ required: true, message: "商户名不能为空", trigger: "blur" }],
+	types: [{ required: true, message: "请选择商户类型", trigger: "change" }],
+	logoPic: [{ required: true, message: "请上传商户logo", trigger: "change" }],
+	swiperPic: [{ required: true, message: "请上传商户轮播图", trigger: "change" }],
+	rangeDate: [{ required: true, message: "请选择营业时间", trigger: "change" }],
+	deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
+	merchantType: [{ required: true, message: "请选择商户类型", trigger: "change" }],
 })
 
 // 打开弹窗
 const openDialog = (id: string) => {
-  visible.value = true
-  form.id = ''
+	visible.value = true
+	form.id = ""
 
-  // 重置表单数据
-  nextTick(() => {
-    dataFormRef.value?.resetFields();
-  });
+	// 重置表单数据
+	nextTick(() => {
+		dataFormRef.value?.resetFields()
+	})
 
-  // 获取merchantInfo信息
-  if (id) {
-    form.id = id
-    getmerchantInfoData(id)
-  }
-};
+	// 获取merchantInfo信息
+	if (id) {
+		form.id = id
+		getmerchantInfoData(id)
+	}
+}
 
 const parseDate = (timeString: string) => {
-  const now = new Date();
-  const [hours, minutes] = timeString.split(":").map(Number)
-  now.setHours(hours)
-  now.setMinutes(minutes)
-  now.setSeconds(0)
-  now.setMilliseconds(0)
-  return parseTime(now, "{h}:{i}:{s}")
+	const now = new Date()
+	const [hours, minutes] = timeString.split(":").map(Number)
+	now.setHours(hours)
+	now.setMinutes(minutes)
+	now.setSeconds(0)
+	now.setMilliseconds(0)
+	return parseTime(now, "{h}:{i}:{s}")
 }
 
 // 提交
 const onSubmit = async () => {
-  const valid = await dataFormRef.value.validate().catch(() => { });
-  if (!valid) return false;
-  const _pa = { ...form, types: form.merchantType.join(",") }
-  if (_pa.rangeDate && _pa.rangeDate.length) {
-    _pa.jobStartTime = parseDate(_pa.rangeDate[0])
-    _pa.jobEndTime = parseDate(_pa.rangeDate[1])
-  }
-  try {
-    loading.value = true;
-    form.id ? await putObj(form) : await addObj(_pa);
-    useMessage().success(form.id ? '修改成功' : '添加成功');
-    visible.value = false;
-    emit('refresh');
-  } catch (err: any) {
-    useMessage().error(err.msg);
-  } finally {
-    loading.value = false;
-  }
-};
-
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return false
+	const _pa = { ...form, types: form.merchantType.join(",") }
+	if (_pa.rangeDate && _pa.rangeDate.length) {
+		_pa.jobStartTime = parseDate(_pa.rangeDate[0])
+		_pa.jobEndTime = parseDate(_pa.rangeDate[1])
+	}
+	try {
+		loading.value = true
+		form.id ? await putObj(form) : await addObj(_pa)
+		useMessage().success(form.id ? "修改成功" : "添加成功")
+		visible.value = false
+		emit("refresh")
+	} catch (err: any) {
+		useMessage().error(err.msg)
+	} finally {
+		loading.value = false
+	}
+}
 
 // 初始化表单数据
 const getmerchantInfoData = (id: string) => {
-  // 获取数据
-  loading.value = true
-  getObj(id).then((res: any) => {
-    Object.assign(form, res.data)
-  }).finally(() => {
-    loading.value = false
-  })
-};
+	// 获取数据
+	loading.value = true
+	getObj(id)
+		.then((res: any) => {
+			Object.assign(form, res.data, { merchantType: res.data.types.split(",") })
+		})
+		.finally(() => {
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
-  openDialog
-});
+	openDialog,
+})
 </script>

src/views/wallet/mch-manage/index.vue

@@ -20,7 +20,7 @@
 						v-auth="'wallet_mchManage_del'"
 						@click="handleDelete(selectObjs)"
 					>
-						删除
+						删 除
 					</el-button>
 					<right-toolbar
 						v-model:showSearch="showSearch"
@@ -44,7 +44,7 @@
 				<el-table-column type="selection" width="40" align="center" />
 				<el-table-column type="index" label="#" width="40" />
 				<el-table-column prop="name" label="商户名" />
-				<el-table-column prop="logoPic" label="log">
+				<el-table-column prop="logoPic" label="logo">
 					<template #default="{ row }">
 						<preview-image :src="row.logoPic" />
 					</template>
@@ -54,7 +54,7 @@
 						<preview-image :src="row.collectionCode" />
 					</template>
 				</el-table-column>
-				<el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip>
+				<el-table-column prop="merchantType" label="商户类型" show-overflow-tooltip :min-width="160">
 					<template #default="{ row }">
 						<div class="flex justify-center items-center">
 							<div v-for="(v, i) in row.types.split(',')" :key="i" class="mr-1">
@@ -65,7 +65,7 @@
 				</el-table-column>
 				<el-table-column prop="deptName" label="部门" />
 				<el-table-column prop="phone" label="联系电话" show-overflow-tooltip />
-				<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip>
+				<el-table-column prop="businessTime" label="结束营业时间" show-overflow-tooltip :min-width="160">
 					<template #default="{ row }">
 						<div>
 							<span>{{ row.jobStartTime }}</span>
@@ -74,7 +74,7 @@
 						</div>
 					</template>
 				</el-table-column>
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip />
+				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip :min-width="160" />
 				<el-table-column label="操作" width="150">
 					<template #default="scope">
 						<el-button