食堂的所有表单校验修改

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>