zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改每日菜谱

Browse Source
This commit is contained in:
ctw committed 2025-01-15 18:09:19 +08:00
1 parent 219272d576
commit 88e8062a19
3 files changed
+194 -98
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.env.development
+23
View File
@@ -0,0 +1,23 @@
# port 端口号
VITE_PORT = 8888
#浏览器自动打开
VITE_OPEN = true
# 本地环境
ENV = 'development'
# ADMIN 服务地址
# VITE_ADMIN_PROXY_PATH = http://123.156.230.15:8089/api/ # 线上
# VITE_ADMIN_PROXY_PATH = http://pjcloud.center.takin.cc/
# VITE_ADMIN_PROXY_PATH = http://localhost:9999/
VITE_ADMIN_PROXY_PATH = http://192.168.101.29:9999/ # 邓-本地
# 图片访问基础地址
# VITE_IMAGE_BASE_PATH = http://123.156.230.15:8089/api # 线上
# VITE_IMAGE_BASE_PATH = http://pjcloud.center.takin.cc
# VITE_IMAGE_BASE_PATH = http://localhost:9999
VITE_IMAGE_BASE_PATH = http://192.168.101.29:9999 # 邓-本地
# 代码生成服务地址
VITE_GEN_PROXY_PATH = http://192.168.110.156:5003
src/api/canteen/canteenDailyMenu.ts
+10 -1
View File
@@ -56,7 +56,7 @@ export function selectWeekInfo(query?: Object) {
})
}
// //获取当前选中的菜品信息
//获取当前选中的菜品信息
export function selectTimeFoodApi(query?: Object) {
return request({
url: "/canteen/canteenDailyMenu/selectTimeFood",
@@ -64,3 +64,12 @@ export function selectTimeFoodApi(query?: Object) {
params: query,
})
}
// 根据每日日期和每日餐段类型获取可添加的不重复的菜品列表
export function getCanteenDailyMenuList(query?: Object) {
return request({
url: "/canteen/canteenSpu/pageDaily",
method: "get",
params: query,
})
}
src/views/canteen/canteenDailyMenu/form.vue
+161 -97
View File
@@ -1,5 +1,5 @@
<template>
<el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
<el-dialog title="新增" 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-form-item label="日期" prop="hourType">
<p>{{ form.startTime }}</p>
@@ -29,7 +29,7 @@
</el-col> -->
</el-form>
<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin-top: 20px">预览图</h1>
<h1 style="font-size: 16px; font-weight: bold; color: #000000; margin-top: 20px">预览</h1>
<table>
<tr class="food">
<div class="food_list" @mouseleave="hoverIndex = -1">
@@ -66,102 +66,112 @@
<el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
</span>
</template>
</el-dialog>
<el-dialog v-model="selectDialogVisible" title="选择菜品" width="60%" :close-on-click-modal="false" draggable>
<el-row>
<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
<el-form-item label="商品名称" prop="name">
<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" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="getDataList">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-row>
<!-- 菜品选择对话框 -->
<el-dialog
v-model="selectDialogVisible"
title="选择菜品"
width="60%"
:close-on-click-modal="false"
draggable
@close="() => (selectObjs = [])"
>
<el-row>
<el-form :model="foodQueryForm" ref="queryRef" :inline="true" @keyup.enter="getDataListAndSelect">
<el-form-item label="商品名称" prop="name">
<el-input placeholder="请输入商品名称" v-model="foodQueryForm.name" />
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<select-ctcg v-model="foodQueryForm.categoryId" style="width: 200px" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="getDataListAndSelect">查询</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</el-row>
<el-table
:data="state.dataList"
v-loading="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="50" />
<el-table-column prop="name" label="商品名称" width="120px" show-overflow-tooltip />
<el-table-column prop="categoryId" label="商品分类" width="100px" show-overflow-tooltip>
<template #default="{ row }">
{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
</template>
</el-table-column>
<el-table-column prop="picUrl" label="商品封面图" align="center" width="160px" show-overflow-tooltip>
<template #default="scope">
<preview-image :src="scope.row.picUrl" />
</template>
</el-table-column>
<el-table-column prop="sort" label="排序字段" show-overflow-tooltip />
<el-table-column prop="status" label="上架状态" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="spu_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.price) }}
</template>
</el-table-column>
<el-table-column prop="marketPrice" label="市场价" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.marketPrice) }}
</template>
</el-table-column>
<el-table-column prop="costPrice" label="成本价" show-overflow-tooltip />
<el-table-column prop="stock" label="库存" show-overflow-tooltip />
<el-table-column prop="salesCount" label="商品销量" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
</el-table>
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
<el-table
ref="foodMultipleTableRef"
:data="foodDataList"
v-loading="loading"
@selection-change="selectionChangeHandle"
>
<el-table-column type="selection" width="40" align="center" />
<el-table-column type="index" label="#" width="50" />
<el-table-column prop="name" label="商品名称" width="120px" show-overflow-tooltip />
<el-table-column prop="categoryId" label="商品分类" width="100px" show-overflow-tooltip>
<template #default="{ row }">
{{ categoryOptions?.find((item: any) => item?.id === row?.categoryId)?.name }}
</template>
</el-table-column>
<el-table-column prop="picUrl" label="商品封面图" align="center" width="160px" show-overflow-tooltip>
<template #default="scope">
<preview-image :src="scope.row.picUrl" />
</template>
</el-table-column>
<el-table-column prop="sort" label="排序字段" show-overflow-tooltip />
<el-table-column prop="status" label="上架状态" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="spu_status" :value="scope.row.status" />
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.price) }}
</template>
</el-table-column>
<el-table-column prop="marketPrice" label="市场价" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.marketPrice) }}
</template>
</el-table-column>
<el-table-column prop="costPrice" label="成本价" show-overflow-tooltip />
<el-table-column prop="stock" label="库存" show-overflow-tooltip />
<el-table-column prop="salesCount" label="商品销量" show-overflow-tooltip />
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
</el-table>
<pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
v-model:current-page="foodQueryForm.current"
v-model:page-size="foodQueryForm.size"
:total="total"
/>
<template #footer>
<div class="dialog-footer">
<el-button @click="selectDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSelectDialogConfirm">确认</el-button>
</div>
</template>
</el-dialog>
<template #footer>
<div class="dialog-footer">
<el-button @click="selectDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSelectDialogConfirm" :disabled="loading">确认</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts" name="CanteenDailyMenuDialog">
import { useMessage } from "/@/hooks/message"
import { rule } from "/@/utils/validate"
import { BasicTableProps, useTable } from "/@/hooks/table"
import { useDict } from "/@/hooks/dict"
import { displayPrice } from "/@/utils/formatMoney"
import { fetchList as getCanteenCategory } from "/@/api/canteen/canteenCategory"
import { getObj, addObj, putObj } from "/@/api/canteen/canteenDailyMenu"
import { fetchList } from "/@/api/canteen/canteenSpu"
import { getObj, addObj, putObj, getCanteenDailyMenuList } from "/@/api/canteen/canteenDailyMenu"
const emit = defineEmits(["refresh"])
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
const { spu_status } = useDict("spu_status")
const dataFormRef = ref()
const visible = ref(false)
const queryRef = ref()
const selectObjs = ref([]) as any // 表格多选的数据
const selectedFood = ref<any>([])
const loading = ref(false)
const foodMultipleTableRef = ref<any>() // 菜品多选表格ref
const selectDialogVisible = ref<boolean>(false) // 选择菜品对话框开关
const { spu_status } = useDict("spu_status")
const categoryOptions = ref<any>([]) // 商品分类选项
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
const dataRules = ref({}) // 定义校验规则
const hoverIndex = ref<number>(-1) // 预览图片hover的索引
const hoverIndex = ref<number>(-1) // 预览中hover的菜品索引
// 提交表单数据
const form = reactive<any>({
@@ -170,30 +180,81 @@ const form = reactive<any>({
hourType: "",
merchantId: "",
})
// 选择的菜品的id数组
const spuIds = computed(() => {
return selectedFood.value?.map((item: any) => item.id)
// 选择的菜品的数组ids
const spuIds = computed(() => selectedFood.value?.map((item: any) => item.id))
// 菜品查询表单
const foodQueryForm = reactive<any>({
current: 1,
size: 9999,
startTime: "",
hourType: undefined,
})
// 菜品列表
const foodDataList = ref<any>([])
const total = ref(0) // 菜品总数
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
pageList: fetchList,
})
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state)
// 多选选择菜品
const selectionChangHandle = (objs: any) => {
// 菜品表格多选
const selectionChangeHandle = (objs: any) => {
// console.log("aaaaaaa", objs)
// const add = objs.filter((row: any) => !temp.some((item: any) => item.id == row.id))
// console.log(add)
// const remove = temp.filter((item: any) => !objs.some((row: any) => row.id == item.id))
// console.log(remove)
// temp = [...objs]
// if (add.length > 0 && remove.length <= 0) {
// // 添加勾选
// return (selectObjs.value = [...selectObjs.value, ...add])
// }
// if (add.length <= 0 && remove.length > 0) {
// // 取消勾选
// selectObjs.value = selectObjs.value.filter((item: any) => !remove.some((row: any) => row.id == item.id))
// }
selectObjs.value = objs
}
// 清空搜索条件
const resetQuery = () => {
// 清空搜索条件
queryRef.value?.resetFields()
// 清空多选
selectObjs.value = []
getDataList()
foodQueryForm.current = 1
foodQueryForm.size = 9999
getDataListAndSelect()
}
// 分页变化
const sizeChangeHandle = (val: number) => {
foodQueryForm.size = val
// 再次发起查询操作
getDataListAndSelect()
}
const currentChangeHandle = (val: number) => {
foodQueryForm.current = val
getDataListAndSelect()
}
// 获取菜品数据并且勾选表格行
const getDataListAndSelect = async () => {
loading.value = true
// 添加请求参数
foodQueryForm.startTime = form.startTime
foodQueryForm.hourType = form.hourType
const res = await getCanteenDailyMenuList(foodQueryForm).finally(() => (loading.value = false))
if (res.code === 0) {
foodDataList.value = res.data.records
total.value = res.data.total
// 转换菜品表格多选的选择状态
if (foodDataList.value && foodDataList.value.length > 0 && selectedFood.value.length > 0) {
const target = foodDataList.value.filter((row: any) => selectedFood.value.some((item: any) => row.id === item.id))
target.forEach((row: any) => nextTick(() => foodMultipleTableRef.value!.toggleRowSelection(row)))
} else {
foodMultipleTableRef.value!.clearSelection()
}
}
}
// 打开弹窗
@@ -203,9 +264,11 @@ const openDialog = (id: string, time?: string, hourType?: number, merchantId?: n
// 重置表单数据
dataFormRef.value?.resetFields()
foodQueryForm.current = 1
foodQueryForm.size = 9999
selectObjs.value = []
selectedFood.value = []
state.dataList = []
foodDataList.value = []
// 获取canteenDailyMenu信息
if (id) {
@@ -236,9 +299,11 @@ const getcanteenDailyMenuData = (id: string) => {
// 点击选择菜品
const handleClickSelect = async () => {
selectDialogVisible.value = true
queryRef.value?.resetFields()
getDataList()
selectDialogVisible.value = true
selectObjs.value = selectedFood.value
await getDataListAndSelect() // 获取菜品数据并且勾选表格行
try {
const res = await getCanteenCategory()
@@ -248,17 +313,17 @@ const handleClickSelect = async () => {
}
}
// 移除预览
const removeSelectedItem = (id: string) => {
selectedFood.value = selectedFood.value.filter((item: any) => item.id !== id)
}
// 选择菜品点击确认
const handleSelectDialogConfirm = () => {
selectDialogVisible.value = false
selectedFood.value = selectObjs.value
}
// 移除预览
const removeSelectedItem = (id: string) => {
selectedFood.value = selectedFood.value.filter((item: any) => item.id !== id)
}
// 提交
const onSubmit = async () => {
if (selectedFood.value.length <= 0) {
@@ -282,7 +347,6 @@ const onSubmit = async () => {
}
}
// 暴露变量
defineExpose({
openDialog,
})