修改每日菜谱

src/components/Select/SelectCtcg.vue

@@ -25,61 +25,61 @@
 </template>
 
 <script setup lang="ts" name="select-merchant">
-import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue';
-import * as cocApi from '/@/api/canteen/canteenOnlineCategory';
+import { reactive, computed, defineModel, withDefaults, defineProps } from "vue"
+import { fetchList as getCanteenCategory } from "/@/api/canteen/canteenCategory"
 
-const selectId = defineModel();
+const selectId = defineModel()
 
 export type Props = {
-	placeholder?: string;
-};
+	placeholder?: string
+}
 const props = withDefaults(defineProps<Props>(), {
-	placeholder: '请选择',
-});
+	placeholder: "请选择",
+})
 
 const queryForm = reactive<any>({
 	current: 1,
-	size: 10,
-});
+	size: 9999,
+})
 
 const state = reactive<any>({
 	loading: true,
 	selectId: selectId,
 	options: [],
-});
+})
 
 watch(
 	selectId,
 	(newVal, oldValue) => {
-		if (newVal == oldValue) return;
-		state.selectId = newVal;
-		getOptions();
+		if (newVal == oldValue) return
+		state.selectId = newVal
+		getOptions()
 	},
-	{ immediate: true }
-);
+	{ immediate: true },
+)
 
 async function getOptions() {
 	try {
-		state.loading = true;
+		state.loading = true
 		const _pa = {
 			...queryForm,
-		};
-		const { data } = await cocApi.fetchList(_pa);
-		state.options = data.records ?? [];
+		}
+		const { data } = await getCanteenCategory(_pa)
+		state.options = data.records ?? []
 	} finally {
-		setTimeout(() => (state.loading = false), 500);
+		setTimeout(() => (state.loading = false), 500)
 	}
 }
 
 function remoteSearch(params: string) {
 	if (params != queryForm.name) {
-		queryForm.name = params;
-		getOptions();
+		queryForm.name = params
+		getOptions()
 	}
 }
 
 function clear() {
-	state.selectId = null;
-	getOptions();
+	state.selectId = null
+	getOptions()
 }
 </script>

src/components/Select/SelectCtcgol.vue

@@ -25,61 +25,61 @@
 </template>
 
 <script setup lang="ts" name="select-merchant">
-import { reactive, computed, defineModel, withDefaults, defineProps } from 'vue';
-import { fetchList as getCanteenCategory } from '/@/api/canteen/canteenCategory';
+import { reactive, computed, defineModel, withDefaults, defineProps } from "vue"
+import * as cocApi from "/@/api/canteen/canteenOnlineCategory"
 
-const selectId = defineModel();
+const selectId = defineModel()
 
 export type Props = {
-	placeholder?: string;
-};
+	placeholder?: string
+}
 const props = withDefaults(defineProps<Props>(), {
-	placeholder: '请选择',
-});
+	placeholder: "请选择",
+})
 
 const queryForm = reactive<any>({
 	current: 1,
-	size: 9999,
-});
+	size: 10,
+})
 
 const state = reactive<any>({
 	loading: true,
 	selectId: selectId,
 	options: [],
-});
+})
 
 watch(
 	selectId,
 	(newVal, oldValue) => {
-		if (newVal == oldValue) return;
-		state.selectId = newVal;
-		getOptions();
+		if (newVal == oldValue) return
+		state.selectId = newVal
+		getOptions()
 	},
-	{ immediate: true }
-);
+	{ immediate: true },
+)
 
 async function getOptions() {
 	try {
-		state.loading = true;
+		state.loading = true
 		const _pa = {
 			...queryForm,
-		};
-		const { data } = await getCanteenCategory(_pa);
-		state.options = data.records ?? [];
+		}
+		const { data } = await cocApi.fetchList(_pa)
+		state.options = data.records ?? []
 	} finally {
-		setTimeout(() => (state.loading = false), 500);
+		setTimeout(() => (state.loading = false), 500)
 	}
 }
 
 function remoteSearch(params: string) {
 	if (params != queryForm.name) {
-		queryForm.name = params;
-		getOptions();
+		queryForm.name = params
+		getOptions()
 	}
 }
 
 function clear() {
-	state.selectId = null;
-	getOptions();
+	state.selectId = null
+	getOptions()
 }
 </script>

src/components/index.ts

@@ -1,79 +1,79 @@
-import Pagination from '/@/components/Pagination/index.vue';
-import RightToolbar from '/@/components/RightToolbar/index.vue';
-import DictTag from '/@/components/DictTag/index.vue';
-import DictSelect from '/@/components/DictSelect/index.vue';
-import UploadExcel from '/@/components/Upload/Excel.vue';
-import UploadFile from '/@/components/Upload/index.vue';
-import UploadImg from '/@/components/Upload/Image.vue';
-import UploadImgs from '/@/components/Upload/Images.vue';
-import DelWrap from '/@/components/DelWrap/index.vue';
-import Editor from '/@/components/Editor/index.vue';
-import Tip from '/@/components/Tip/index.vue';
-import TagList from '/@/components/TagList/index.vue';
-import SvgIcon from '/@/components/SvgIcon/index.vue';
-import PreviewImage from '/@/components/PreviewImage/index.vue';
+import Pagination from "/@/components/Pagination/index.vue"
+import RightToolbar from "/@/components/RightToolbar/index.vue"
+import DictTag from "/@/components/DictTag/index.vue"
+import DictSelect from "/@/components/DictSelect/index.vue"
+import UploadExcel from "/@/components/Upload/Excel.vue"
+import UploadFile from "/@/components/Upload/index.vue"
+import UploadImg from "/@/components/Upload/Image.vue"
+import UploadImgs from "/@/components/Upload/Images.vue"
+import DelWrap from "/@/components/DelWrap/index.vue"
+import Editor from "/@/components/Editor/index.vue"
+import Tip from "/@/components/Tip/index.vue"
+import TagList from "/@/components/TagList/index.vue"
+import SvgIcon from "/@/components/SvgIcon/index.vue"
+import PreviewImage from "/@/components/PreviewImage/index.vue"
 
 // 业务组件
-import SelectUser from '/@/components/Select/SelectUser.vue';
-import SelectWalletType from '/@/components/Select/SelectWalletType.vue';
-import SelectMch from '/@/components/Select/SelectMch.vue';
-import SelectDept from '/@/components/Select/SelectDept.vue';
-import SelectCtcg from '/@/components/Select/SelectCtcg.vue';
-import SelectCtcgd from '/@/components/Select/SelectCtcgd.vue';
+import SelectUser from "/@/components/Select/SelectUser.vue"
+import SelectWalletType from "/@/components/Select/SelectWalletType.vue"
+import SelectMch from "/@/components/Select/SelectMch.vue"
+import SelectDept from "/@/components/Select/SelectDept.vue"
+import SelectCtcg from "/@/components/Select/SelectCtcg.vue"
+import SelectCtcgol from "/@/components/Select/SelectCtcgol.vue"
 
 // 第三方组件
-import ElementPlus from 'element-plus';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import 'element-plus/dist/index.css';
-import { Pane, Splitpanes } from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css';
+import ElementPlus from "element-plus"
+import * as ElementPlusIconsVue from "@element-plus/icons-vue"
+import "element-plus/dist/index.css"
+import { Pane, Splitpanes } from "splitpanes"
+import "splitpanes/dist/splitpanes.css"
 // 日历组件
-import { setupCalendar } from 'v-calendar';
+import { setupCalendar } from "v-calendar"
 // @ts-ignore 引入VForm3库
-import VForm3 from 'form-designer-plus'; //
-import 'form-designer-plus/dist/designer.style.css'; //引入VForm3样式
+import VForm3 from "form-designer-plus" //
+import "form-designer-plus/dist/designer.style.css" //引入VForm3样式
 // 部门树组件
-import vue3TreeOrg from 'vue3-tree-org';
-import 'vue3-tree-org/lib/vue3-tree-org.css';
+import vue3TreeOrg from "vue3-tree-org"
+import "vue3-tree-org/lib/vue3-tree-org.css"
 
 // 导入声明
-import { App } from 'vue';
+import { App } from "vue"
 
 export default {
 	install(app: App) {
-		app.component('DictTag', DictTag);
-		app.component('DictSelect', DictSelect);
-		app.component('Pagination', Pagination);
-		app.component('RightToolbar', RightToolbar);
-		app.component('uploadExcel', UploadExcel);
-		app.component('UploadFile', UploadFile);
-		app.component('UploadImg', UploadImg);
-		app.component('UploadImgs', UploadImgs);
-		app.component('Editor', Editor);
-		app.component('Tip', Tip);
-		app.component('DelWrap', DelWrap);
-		app.component('TagList', TagList);
-		app.component('SvgIcon', SvgIcon);
-		app.component('PreviewImage', PreviewImage);
-		app.component('SelectUser', SelectUser);
-		app.component('SelectWalletType', SelectWalletType);
-		app.component('SelectMch', SelectMch);
-		app.component('SelectDept', SelectDept);
-		app.component('SelectCtcg', SelectCtcg);
-		app.component('SelectCtcgd', SelectCtcgd);
+		app.component("DictTag", DictTag)
+		app.component("DictSelect", DictSelect)
+		app.component("Pagination", Pagination)
+		app.component("RightToolbar", RightToolbar)
+		app.component("uploadExcel", UploadExcel)
+		app.component("UploadFile", UploadFile)
+		app.component("UploadImg", UploadImg)
+		app.component("UploadImgs", UploadImgs)
+		app.component("Editor", Editor)
+		app.component("Tip", Tip)
+		app.component("DelWrap", DelWrap)
+		app.component("TagList", TagList)
+		app.component("SvgIcon", SvgIcon)
+		app.component("PreviewImage", PreviewImage)
+		app.component("SelectUser", SelectUser)
+		app.component("SelectWalletType", SelectWalletType)
+		app.component("SelectMch", SelectMch)
+		app.component("SelectDept", SelectDept)
+		app.component("SelectCtcg", SelectCtcg)
+		app.component("SelectCtcgol", SelectCtcgol)
 
 		// 导入全部的elmenet-plus的图标
 		for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-			app.component(key, component);
+			app.component(key, component)
 			// 兼容性
-			app.component(`ele-${key}`, component);
+			app.component(`ele-${key}`, component)
 		}
 		// 导入布局插件
-		app.component('Splitpanes', Splitpanes);
-		app.component('Pane', Pane);
-		app.use(ElementPlus); // ELEMENT 组件
-		app.use(setupCalendar, {}); // 日历组件
-		app.use(VForm3); // 表单设计
-		app.use(vue3TreeOrg); // 组织架构组件
+		app.component("Splitpanes", Splitpanes)
+		app.component("Pane", Pane)
+		app.use(ElementPlus) // ELEMENT 组件
+		app.use(setupCalendar, {}) // 日历组件
+		app.use(VForm3) // 表单设计
+		app.use(vue3TreeOrg) // 组织架构组件
 	},
-};
+}

src/views/canteen/canteenDailyMenu/form.vue

@@ -29,15 +29,17 @@
 			</el-col> -->
 		</el-form>
 
-		<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin: 20px 0">预览图</h1>
-		<div style="width: 100%; display: flex; flex-wrap: wrap">
-			<img
-				style="width: 250px; height: 200px; margin: 10px"
-				v-for="(item, index) in selectedList"
-				:key="item.id"
-				:src="imageBaseUrl + item.picUrl"
-			/>
-		</div>
+		<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin-top: 20px">预览图</h1>
+		<table>
+			<tr class="food">
+				<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>
+					</td>
+				</div>
+			</tr>
+		</table>
 
 		<template #footer>
 			<span class="dialog-footer">
@@ -215,9 +217,8 @@ const getcanteenDailyMenuData = (id: string) => {
 // 点击选择菜品
 const handleClickSelect = async () => {
 	selectDialogVisible.value = true
-	if (state.dataList && state.dataList?.length <= 0) {
-		getDataList()
-	}
+	queryRef.value?.resetFields()
+	getDataList()
 
 	try {
 		const res = await getCanteenCategory()

src/views/canteen/canteenDailyMenu/index.vue

@@ -21,37 +21,49 @@
 			</tr>
 		</table>
 
-		<div class="overflow-y-auto">
-			<table class="my-4">
-				<tr>
-					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(1)">早餐</td>
-					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData1" :key="index">
-						<img
-							@click="delteData(item.tid)"
-							:src="imageBaseUrl + item.picUrl"
-							class="p-3 w-full h-full object-contain"
-						/>
-					</td>
+		<div class="dataDiv">
+			<table>
+				<tr class="food">
+					<td @click="addFood(1)">早餐</td>
+					<div class="food_list">
+						<td class="food_list_item" v-for="(item, index) in foodData1" :key="index">
+							<el-image
+								style="width: 80px; height: 80px"
+								:src="imageBaseUrl + item.picUrl"
+								fit="cover"
+								@click="delteData(item.tid)"
+							/>
+							<div class="w-full text-center text-black">{{ item.name }}</div>
+						</td>
+					</div>
 				</tr>
-				<tr>
-					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(2)">中餐</td>
-					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData2" :key="index">
-						<img
-							@click="delteData(item.tid)"
-							:src="imageBaseUrl + item.picUrl"
-							class="p-3 w-full h-full object-contain"
-						/>
-					</td>
+				<tr class="food">
+					<td @click="addFood(2)">中餐</td>
+					<div class="food_list">
+						<td class="food_list_item" v-for="(item, index) in foodData2" :key="index">
+							<el-image
+								style="width: 80px; height: 80px"
+								:src="imageBaseUrl + item.picUrl"
+								fit="cover"
+								@click="delteData(item.tid)"
+							/>
+							<div class="w-full text-center text-black">{{ item.name }}</div>
+						</td>
+					</div>
 				</tr>
-				<tr>
-					<td class="w-16 h-48 text-4xl text-center cursor-pointer text-blue-500" @click="addFood(3)">晚餐</td>
-					<td class="w-64 h-48 text-center" v-for="(item, index) in foodData3" :key="index">
-						<img
-							@click="delteData(item.tid)"
-							:src="imageBaseUrl + item.picUrl"
-							class="p-3 w-full h-full object-contain"
-						/>
-					</td>
+				<tr class="food">
+					<td @click="addFood(3)">晚餐</td>
+					<div class="food_list">
+						<td class="food_list_item" v-for="(item, index) in foodData3" :key="index">
+							<el-image
+								style="width: 80px; height: 80px"
+								:src="imageBaseUrl + item.picUrl"
+								fit="cover"
+								@click="delteData(item.tid)"
+							/>
+							<div class="w-full text-center text-black">{{ item.name }}</div>
+						</td>
+					</div>
 				</tr>
 			</table>
 		</div>
@@ -189,6 +201,46 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+.dataDiv {
+	overflow-x: auto;
+}
+
+.food {
+	display: flex;
+	align-items: center;
+	margin-top: 50px;
+
+	& > td {
+		width: 60px;
+		color: rgb(0, 118, 228);
+		font-size: 26px;
+		cursor: pointer;
+	}
+
+	&_list {
+		flex: 1;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		margin-left: 20px;
+
+		&_item {
+			display: inline-block;
+			margin: 0 0 10px 10px;
+			padding: 10px 6px;
+			background-color: #f2f2f2;
+			cursor: pointer;
+			box-shadow: #43475545 0 0 0.25em, #5a7dbc0d 0 0.25em 1em;
+			border-radius: 5px;
+			transition: all 0.2s ease;
+
+			&:hover {
+				transform: scale(1.1);
+				transition: all 0.2s ease;
+			}
+		}
+	}
+}
 .selectedSpan {
 	border: 2px solid rgb(255, 187, 0);
 	color: rgb(255, 187, 0);

src/views/canteen/canteenOnlineSpu/form.vue

@@ -14,7 +14,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品分类" prop="categoryId">
-						<select-ctcg v-model="form.categoryId" />
+						<select-ctcgol v-model="form.categoryId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="14" class="mb20">
@@ -50,7 +50,9 @@
 				<el-col :span="24" 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 spu_status" border :key="index">{{ item.label }} </el-radio>
+							<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index"
+								>{{ item.label }}
+							</el-radio>
 						</el-radio-group>
 					</el-form-item>
 				</el-col>
@@ -72,107 +74,107 @@
 </template>
 
 <script setup lang="ts" name="CanteenOnlineSpuDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from '/@/hooks/message';
-import { getObj, addObj, putObj } from '/@/api/canteen/canteenOnlineSpu';
-import { rule } from '/@/utils/validate';
-import { displayPrice, storePrice } from '/@/utils/formatMoney';
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/canteen/canteenOnlineSpu"
+import { rule } from "/@/utils/validate"
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+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 { spu_status } = useDict('spu_status');
+const { spu_status } = useDict("spu_status")
 
 // 提交表单数据
 const form = reactive({
-	id: '',
-	merchantId: '',
-	name: '',
-	introduction: '',
-	description: '<p></p>',
-	categoryId: '',
-	picUrl: '',
-	sliderPicUrls: '',
+	id: "",
+	merchantId: "",
+	name: "",
+	introduction: "",
+	description: "<p></p>",
+	categoryId: "",
+	picUrl: "",
+	sliderPicUrls: "",
 	sort: 0,
-	status: '0',
+	status: "0",
 	price: 0,
 	marketPrice: 0,
 	stock: 0,
-	giveIntegral: '',
-	salesCount: '',
-	virtualSalesCount: '',
-	browseCount: '',
-	deptId: '',
-});
+	giveIntegral: "",
+	salesCount: "",
+	virtualSalesCount: "",
+	browseCount: "",
+	deptId: "",
+})
 
 // 定义校验规则
 const dataRules = ref({
-	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
-	categoryId: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
-	name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
-	picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
-	price: [{ required: true, message: '商品价格', trigger: 'blur' }],
-	marketPrice: [{ required: true, message: '市场价', trigger: 'blur' }],
-	stock: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
-	status: [{ required: true, message: '请勾选上下架', trigger: 'blur' }],
-});
+	merchantId: [{ required: true, message: "商户不能为空", trigger: "blur" }],
+	categoryId: [{ required: true, message: "商品分类不能为空", trigger: "blur" }],
+	name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
+	picUrl: [{ required: true, message: "商品封面图不能为空", trigger: "blur" }],
+	price: [{ required: true, message: "商品价格", trigger: "blur" }],
+	marketPrice: [{ required: true, message: "市场价", trigger: "blur" }],
+	stock: [{ required: true, message: "请输入库存数量", trigger: "blur" }],
+	status: [{ required: true, message: "请勾选上下架", trigger: "blur" }],
+})
 
 // 打开弹窗
 const openDialog = async (id: string) => {
-	visible.value = true;
-	form.id = '';
+	visible.value = true
+	form.id = ""
 
 	// 重置表单数据
-	dataFormRef.value?.resetFields();
+	dataFormRef.value?.resetFields()
 
 	// 获取canteenOnlineSpu信息
 	if (id) {
-		form.id = id;
-		getcanteenOnlineSpuData(id);
+		form.id = id
+		getcanteenOnlineSpuData(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;
-		const _pa = { ...form, price: storePrice(form.price), marketPrice: storePrice(form.marketPrice) };
-		form.id ? await putObj(_pa) : await addObj(_pa);
-		useMessage().success(form.id ? '修改成功' : '添加成功');
-		visible.value = false;
-		emit('refresh');
+		loading.value = true
+		const _pa = { ...form, price: storePrice(form.price), marketPrice: storePrice(form.marketPrice) }
+		form.id ? await putObj(_pa) : await addObj(_pa)
+		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 getcanteenOnlineSpuData = (id: string) => {
 	// 获取数据
-	loading.value = true;
+	loading.value = true
 	getObj(id)
 		.then((res: any) => {
 			Object.assign(form, res.data, {
-				price: Number(displayPrice(res.data.price, '')),
-				marketPrice: Number(displayPrice(res.data.marketPrice, '')),
-				status: '' + res.data.status,
-			});
+				price: Number(displayPrice(res.data.price, "")),
+				marketPrice: Number(displayPrice(res.data.marketPrice, "")),
+				status: "" + res.data.status,
+			})
 		})
 		.finally(() => {
-			loading.value = false;
-		});
-};
+			loading.value = false
+		})
+}
 
 // 暴露变量
 defineExpose({
 	openDialog,
-});
+})
 </script>

src/views/canteen/canteenOnlineSpu/index.vue

@@ -7,7 +7,7 @@
 						<el-input placeholder="请输入商品名称" v-model="state.queryForm.name" />
 					</el-form-item>
 					<el-form-item label="商品分类" prop="categoryId">
-						<select-ctcg v-model="state.queryForm.categoryId" style="width: 200px" />
+						<select-ctcgol v-model="state.queryForm.categoryId" style="width: 200px" />
 					</el-form-item>
 					<el-form-item>
 						<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
@@ -17,7 +17,13 @@
 			</el-row>
 			<el-row>
 				<div class="mb8" style="width: 100%">
-					<el-button icon="folder-add" type="primary" class="ml10" @click="formDialogRef.openDialog()" v-auth="'canteen_canteenOnlineSpu_add'">
+					<el-button
+						icon="folder-add"
+						type="primary"
+						class="ml10"
+						@click="formDialogRef.openDialog()"
+						v-auth="'canteen_canteenOnlineSpu_add'"
+					>
 						新 增
 					</el-button>
 					<el-button
@@ -83,10 +89,22 @@
 				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
 				<el-table-column label="操作" width="150" fixed="right">
 					<template #default="scope">
-						<el-button icon="edit-pen" text type="primary" v-auth="'canteen_canteenOnlineSpu_edit'" @click="formDialogRef.openDialog(scope.row.id)">
+						<el-button
+							icon="edit-pen"
+							text
+							type="primary"
+							v-auth="'canteen_canteenOnlineSpu_edit'"
+							@click="formDialogRef.openDialog(scope.row.id)"
+						>
 							编辑
 						</el-button>
-						<el-button icon="delete" text type="primary" v-auth="'canteen_canteenOnlineSpu_del'" @click="handleDelete([scope.row.id])">
+						<el-button
+							icon="delete"
+							text
+							type="primary"
+							v-auth="'canteen_canteenOnlineSpu_del'"
+							@click="handleDelete([scope.row.id])"
+						>
 							删除
 						</el-button>
 					</template>
@@ -101,77 +119,82 @@
 </template>
 
 <script setup lang="ts" name="systemCanteenOnlineSpu">
-import { BasicTableProps, useTable } from '/@/hooks/table';
-import { fetchList, delObjs } from '/@/api/canteen/canteenOnlineSpu';
-import { useMessage, useMessageBox } from '/@/hooks/message';
-import { useDict } from '/@/hooks/dict';
-import { displayPrice } from '/@/utils/formatMoney';
-import { fetchList as getCanteenOnlineCategory } from '/@/api/canteen/canteenOnlineCategory';
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { fetchList, delObjs } from "/@/api/canteen/canteenOnlineSpu"
+import { useMessage, useMessageBox } from "/@/hooks/message"
+import { useDict } from "/@/hooks/dict"
+import { displayPrice } from "/@/utils/formatMoney"
+import { fetchList as getCanteenOnlineCategory } from "/@/api/canteen/canteenOnlineCategory"
 
 // 引入组件
-const FormDialog = defineAsyncComponent(() => import('./form.vue'));
+const FormDialog = defineAsyncComponent(() => import("./form.vue"))
 
-const { spu_status } = useDict('spu_status');
+const { spu_status } = useDict("spu_status")
 // 定义变量内容
-const formDialogRef = ref();
+const formDialogRef = ref()
 // 搜索变量
-const queryRef = ref();
-const showSearch = ref(true);
+const queryRef = ref()
+const showSearch = ref(true)
 // 多选变量
-const selectObjs = ref([]) as any;
-const multiple = ref(true);
-const categoryOptions = ref<any>([]); // 商品分类选项
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+const categoryOptions = ref<any>([]) // 商品分类选项
 const state: BasicTableProps = reactive<BasicTableProps>({
 	queryForm: {},
 	pageList: fetchList,
-});
+})
 
 onMounted(async () => {
 	try {
-		const res = await getCanteenOnlineCategory();
-		categoryOptions.value = res.data.records;
+		const res = await getCanteenOnlineCategory()
+		categoryOptions.value = res.data.records
 	} catch (error) {
-		categoryOptions.value = [];
+		categoryOptions.value = []
 	}
-});
+})
 
 // 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();
+	queryRef.value?.resetFields()
 	// 清空多选
-	selectObjs.value = [];
-	getDataList();
-};
+	selectObjs.value = []
+	getDataList()
+}
 
 // 导出excel
 const exportExcel = () => {
-	downBlobFile('/canteen/canteenOnlineSpu/export', Object.assign(state.queryForm, { ids: selectObjs }), 'canteenOnlineSpu.xlsx');
-};
+	downBlobFile(
+		"/canteen/canteenOnlineSpu/export",
+		Object.assign(state.queryForm, { ids: selectObjs }),
+		"canteenOnlineSpu.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('此操作将永久删除');
+		await useMessageBox().confirm("此操作将永久删除")
 	} catch {
-		return;
+		return
 	}
 
 	try {
-		await delObjs(ids);
-		getDataList();
-		useMessage().success('删除成功');
+		await delObjs(ids)
+		getDataList()
+		useMessage().success("删除成功")
 	} catch (err: any) {
-		useMessage().error(err.msg);
+		useMessage().error(err.msg)
 	}
-};
+}
 </script>

src/views/canteen/canteenSpu/form.vue

@@ -14,7 +14,7 @@
 				</el-col>
 				<el-col :span="14" class="mb20">
 					<el-form-item label="商品分类" prop="categoryId">
-						<select-ctcgd v-model="form.categoryId" />
+						<select-ctcg v-model="form.categoryId" />
 					</el-form-item>
 				</el-col>
 				<el-col :span="24" class="mb20">
@@ -43,7 +43,9 @@
 				<el-col :span="14" 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 spu_status" border :key="index">{{ item.label }}</el-radio>
+							<el-radio :label="item.value" v-for="(item, index) in spu_status" border :key="index">{{
+								item.label
+							}}</el-radio>
 						</el-radio-group>
 					</el-form-item>
 				</el-col>
@@ -95,127 +97,127 @@
 </template>
 
 <script setup lang="ts" name="CanteenSpuDialog">
-import { useDict } from '/@/hooks/dict';
-import { useMessage } from '/@/hooks/message';
-import { getObj, addObj, putObj } from '/@/api/canteen/canteenSpu';
-import { getAllSimple } from '/@/api/canteen/canteenCategory';
-import { rule } from '/@/utils/validate';
-import { displayPrice, storePrice } from '/@/utils/formatMoney';
-const emit = defineEmits(['refresh']);
+import { useDict } from "/@/hooks/dict"
+import { useMessage } from "/@/hooks/message"
+import { getObj, addObj, putObj } from "/@/api/canteen/canteenSpu"
+import { getAllSimple } from "/@/api/canteen/canteenCategory"
+import { rule } from "/@/utils/validate"
+import { displayPrice, storePrice } from "/@/utils/formatMoney"
+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 { spu_status } = useDict('spu_status');
+const { spu_status } = useDict("spu_status")
 
 // 提交表单数据
 const form = reactive({
-	id: '',
-	merchantId: '',
-	name: '',
-	introduction: '',
-	description: '',
-	categoryId: '',
-	picUrl: '',
-	sliderPicUrls: '',
-	sort: '',
-	status: '0',
+	id: "",
+	merchantId: "",
+	name: "",
+	introduction: "",
+	description: "",
+	categoryId: "",
+	picUrl: "",
+	sliderPicUrls: "",
+	sort: "",
+	status: "0",
 	price: 0,
 	marketPrice: 0,
-	costPrice: '',
+	costPrice: "",
 	stock: 0,
-	giveIntegral: '',
-	salesCount: '',
-	virtualSalesCount: '',
-	browseCount: '',
-	deptId: '',
-});
+	giveIntegral: "",
+	salesCount: "",
+	virtualSalesCount: "",
+	browseCount: "",
+	deptId: "",
+})
 
 // 定义校验规则
 const dataRules = ref({
-	categoryId: [{ required: true, message: '商品分类不能为空', trigger: 'blur' }],
-	merchantId: [{ required: true, message: '商户不能为空', trigger: 'blur' }],
-	name: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
-	picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
-	status: [{ required: true, message: '商品状态不能为空', trigger: 'blur' }],
-	sort: [{ validator: rule.number, trigger: 'blur' }],
+	categoryId: [{ required: true, message: "商品分类不能为空", trigger: "blur" }],
+	merchantId: [{ required: true, message: "商户不能为空", trigger: "blur" }],
+	name: [{ required: true, message: "商品名称不能为空", trigger: "blur" }],
+	picUrl: [{ required: true, message: "商品封面图不能为空", trigger: "blur" }],
+	status: [{ required: true, message: "商品状态不能为空", trigger: "blur" }],
+	sort: [{ validator: rule.number, trigger: "blur" }],
 	price: [
-		{ validator: rule.number, trigger: 'blur' },
-		{ required: true, message: '商品状态不能为空', trigger: 'blur' },
+		{ validator: rule.number, trigger: "blur" },
+		{ required: true, message: "商品状态不能为空", trigger: "blur" },
 	],
 	marketPrice: [
-		{ validator: rule.number, trigger: 'blur' },
-		{ required: true, message: '商品状态不能为空', trigger: 'blur' },
+		{ validator: rule.number, trigger: "blur" },
+		{ required: true, message: "商品状态不能为空", trigger: "blur" },
 	],
-	costPrice: [{ validator: rule.number, trigger: 'blur' }],
+	costPrice: [{ validator: rule.number, trigger: "blur" }],
 	stock: [
-		{ validator: rule.number, trigger: 'blur' },
-		{ required: true, message: '商品状态不能为空', trigger: 'blur' },
+		{ validator: rule.number, trigger: "blur" },
+		{ required: true, message: "商品状态不能为空", trigger: "blur" },
 	],
-	giveIntegral: [{ validator: rule.number, trigger: 'blur' }],
-	salesCount: [{ validator: rule.number, trigger: 'blur' }],
-	virtualSalesCount: [{ validator: rule.number, trigger: 'blur' }],
-});
+	giveIntegral: [{ validator: rule.number, trigger: "blur" }],
+	salesCount: [{ validator: rule.number, trigger: "blur" }],
+	virtualSalesCount: [{ 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()
 
 	// 获取canteenSpu信息
 	if (id) {
-		form.id = id;
-		getcanteenSpuData(id);
+		form.id = id
+		getcanteenSpuData(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;
-		const _pa = { ...form, price: storePrice(form.price), marketPrice: storePrice(form.marketPrice) };
-		form.id ? await putObj(_pa) : await addObj(_pa);
-		useMessage().success(form.id ? '修改成功' : '添加成功');
-		visible.value = false;
-		emit('refresh');
+		loading.value = true
+		const _pa = { ...form, price: storePrice(form.price), marketPrice: storePrice(form.marketPrice) }
+		form.id ? await putObj(_pa) : await addObj(_pa)
+		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 getcanteenSpuData = (id: string) => {
 	// 获取数据
-	loading.value = true;
+	loading.value = true
 	getObj(id)
 		.then((res: any) => {
 			Object.assign(form, res.data, {
-				price: Number(displayPrice(res.data.price, '')),
-				marketPrice: Number(displayPrice(res.data.marketPrice, '')),
-				status: '' + res.data.status,
-			});
+				price: Number(displayPrice(res.data.price, "")),
+				marketPrice: Number(displayPrice(res.data.marketPrice, "")),
+				status: "" + res.data.status,
+			})
 		})
 		.finally(() => {
-			loading.value = false;
-		});
-};
-const categoryList = ref<any>([]); // 商品分类树
+			loading.value = false
+		})
+}
+const categoryList = ref<any>([]) // 商品分类树
 onMounted(async () => {
-	const data = await getAllSimple();
-	categoryList.value = data.data;
-});
+	const data = await getAllSimple()
+	categoryList.value = data.data
+})
 // 暴露变量
 defineExpose({
 	openDialog,
-});
+})
 </script>