feat: 线上预订菜品支持从每日菜品导入

This commit is contained in:
weiwei committed 2025-08-12 16:57:55 +08:00
1 parent ddfc8fe48b
commit fcf7609a66
8 files changed
+284 -51

No files matched your search

+2 -2
View File
@@ -66,8 +66,8 @@
</template>
</el-table-column>
<el-table-column prop="sort" label="排序" show-overflow-tooltip min-width="100" />
<el-table-column prop="createBy" label="创建者" show-overflow-tooltip min-width="100" />
<el-table-column prop="updateBy" label="更新者" show-overflow-tooltip min-width="100" />
<!-- <el-table-column prop="createBy" label="创建者" show-overflow-tooltip min-width="100" /> -->
<!-- <el-table-column prop="updateBy" label="更新者" show-overflow-tooltip min-width="100" /> -->
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
<el-table-column label="操作" width="150" fixed="right">
<template #default="scope">
@@ -0,0 +1,191 @@
<template>
<el-dialog
v-model="dialogVisible"
title="选择菜品"
width="80%"
:close-on-click-modal="false"
draggable
@close="dialogVisible = false"
fullscreen
>
<el-row>
<el-form :model="queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList(true)">
<el-form-item label="菜品名称" prop="name">
<el-input placeholder="请输入菜品名称" v-model="queryForm.name" />
</el-form-item>
<el-form-item label="菜品分类" prop="categoryId">
<select-ctcg v-model="queryForm.categoryId" style="width: 200px" />
</el-form-item>
<el-form-item>
<el-button icon="search" type="primary" @click="getDataList" v-auth="'canteen_canteenSpu_view'"> 查询 </el-button>
<el-button icon="Refresh" @click="resetQuery" v-auth="'canteen_canteenSpu_view'">重置</el-button>
</el-form-item>
</el-form>
</el-row>
<el-table
ref="tableRef"
border
:data="dataList"
v-loading="loading"
:row-key="(row:any) => row.id"
:reserve-selection="true"
@selection-change=""
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column type="selection" width="40" />
<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="菜品封面图" width="160px" show-overflow-tooltip>
<template #default="scope">
<preview-image :src="scope.row.picUrl" />
</template>
</el-table-column>
<!-- <el-table-column prop="sliderPicUrls" label="菜品轮播图" show-overflow-tooltip /> -->
<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="isShow" label="是否在移动端显示" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="is_show" :value="scope.row.isShow"></dict-tag>
</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>
<pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
v-model:current-page="queryForm.current"
v-model:page-size="queryForm.size"
:total="total"
/>
<template #footer>
<div class="flex items-center w-1/3">
<div class="w-16 text-blue-600 text-base">商户:</div>
<select-mch v-model="merchantId" :apiParams="{ types: '1' }" />
</div>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogConfirm" :disabled="loading">确认</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { fetchList } from "/@/api/canteen/canteenSpu"
import { displayPrice } from "/@/utils/formatMoney"
import { useDict } from "/@/hooks/dict"
import { getAllSimple as getCanteenCategory } from "/@/api/canteen/canteenCategory"
import { useMessage } from "/@/hooks/message"
const emit = defineEmits(["getSelectedRows", "refresh"])
const { spu_status, is_show } = useDict("spu_status", "is_show")
const queryRef = ref()
const tableRef = ref() // 对话框多选表格ref
const loading = ref(false) // 对话框多选表格loading
const dialogVisible = ref(false)
const queryForm = reactive<any>({
current: 1,
size: 10,
})
const total = ref<number>(0)
const dataList = ref<any[]>([]) // 对话框多选表格数据
const categoryOptions = ref<any>([]) // 菜品分类选项
const merchantId = ref<string>("")
onMounted(async () => {
try {
const res = await getCanteenCategory()
categoryOptions.value = res.data
} catch (error) {
categoryOptions.value = []
}
})
// 打开弹窗
const openDialog = async () => {
dialogVisible.value = true
merchantId.value = ""
getDataList(false)
}
// 获取商品数据并且勾选
const getDataList = async (isSearch = false) => {
if (isSearch) {
queryForm.current = 1
}
loading.value = true
try {
const { code, data } = await fetchList(queryForm)
if (code === 0) {
dataList.value = data.records
total.value = data.total
}
} catch (error) {
dataList.value = []
} finally {
loading.value = false
}
}
// 分页变化
const sizeChangeHandle = (val: number) => {
queryForm.size = val
getDataList()
}
const currentChangeHandle = (val: number) => {
queryForm.current = val
getDataList()
}
const resetQuery = () => {
queryRef.value?.resetFields()
getDataList(true)
}
// 商品选择对话框确认
const dialogConfirm = () => {
if (!merchantId.value) return useMessage().error("请选择商户")
const $table = tableRef.value
if ($table) {
const currentSelectedRows = $table.getSelectionRows()
dialogVisible.value = false
emit("getSelectedRows", currentSelectedRows)
emit("refresh")
}
}
const tableStyle = {
cellStyle: { textAlign: "center" },
headerCellStyle: {
textAlign: "center",
background: "var(--el-table-row-hover-bg-color)",
color: "var(--el-text-color-primary)",
},
}
defineExpose({
openDialog,
})
</script>
+18 -3
View File
@@ -24,7 +24,16 @@
@click="formDialogRef.openDialog()"
v-auth="'canteen_canteenOnlineSpu_add'"
>
新 增
新增常驻菜品
</el-button>
<el-button
icon="folder-add"
type="primary"
class="ml10"
@click="exportFormDialogRef.openDialog()"
v-auth="'canteen_canteenOnlineSpu_add'"
>
导入每日菜品
</el-button>
<el-button
plain
@@ -109,6 +118,8 @@
<!-- 编辑、新增 -->
<form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<!-- 关联每日菜品 -->
<export-form-dialog ref="exportFormDialogRef" @getSelectedRows="getSelectedRows" @refresh="getDataList(false)" />
</div>
</template>
@@ -120,12 +131,13 @@ 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 ExportFormDialog = defineAsyncComponent(() => import("./export-form.vue"))
const { spu_status } = useDict("spu_status")
// 定义变量内容
const formDialogRef = ref()
const exportFormDialogRef = ref()
// 搜索变量
const queryRef = ref()
const showSearch = ref(true)
@@ -147,9 +159,12 @@ onMounted(async () => {
}
})
// table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
const getSelectedRows = (selectRows: any) => {
console.log(selectRows)
}
// 清空搜索条件
const resetQuery = () => {
// 清空搜索条件
+17 -17
View File
@@ -8,17 +8,17 @@
<!-- </el-form-item>-->
<!-- </el-col>-->
<el-col :span="14" class="mb20">
<el-form-item label="商品名称" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入商品名称" />
<el-form-item label="菜品名称" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入菜品名称" />
</el-form-item>
</el-col>
<el-col :span="14" class="mb20">
<el-form-item label="商品分类" prop="categoryId">
<el-form-item label="菜品分类" prop="categoryId">
<select-ctcg v-model="form.categoryId" />
</el-form-item>
</el-col>
<el-col :span="24" class="mb20">
<el-form-item label="商品封面图" prop="picUrl">
<el-form-item label="菜品封面图" prop="picUrl">
<upload-img v-model:imageUrl="form.picUrl" />
</el-form-item>
</el-col>
@@ -30,7 +30,7 @@
</el-col>
<el-col :span="14" class="mb20">
<el-form-item label="商品状态" prop="status">
<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-group>
@@ -38,8 +38,8 @@
</el-col>
<el-col :span="14" class="mb20">
<el-form-item label="商品价格" prop="price">
<el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入商品价格" />
<el-form-item label="菜品价格" prop="price">
<el-input-number v-model="form.price" :min="0" :precision="2" placeholder="请输入菜品价格" />
</el-form-item>
</el-col>
@@ -74,8 +74,8 @@
<!-- </el-col>-->
<!-- <el-col :span="24" class="mb20">-->
<!-- <el-form-item label="商品详情" prop="description">-->
<!-- <editor v-if="visible" v-model:get-html="form.description" placeholder="请输入商品详情"></editor>-->
<!-- <el-form-item label="菜品详情" prop="description">-->
<!-- <editor v-if="visible" v-model:get-html="form.description" placeholder="请输入菜品详情"></editor>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
</el-row>
@@ -131,24 +131,24 @@ const form = reactive({
// 定义校验规则
const dataRules = ref({
categoryId: [{ required: true, message: "商品分类不能为空", 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" }],
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" },
{ required: true, message: "菜品状态不能为空", trigger: "blur" },
],
marketPrice: [
{ validator: rule.number, trigger: "blur" },
{ required: true, message: "商品状态不能为空", trigger: "blur" },
{ required: true, message: "菜品状态不能为空", trigger: "blur" },
],
costPrice: [{ validator: rule.number, trigger: "blur" }],
stock: [
{ validator: rule.number, trigger: "blur" },
{ required: true, message: "商品状态不能为空", trigger: "blur" },
{ required: true, message: "菜品状态不能为空", trigger: "blur" },
],
giveIntegral: [{ validator: rule.number, trigger: "blur" }],
salesCount: [{ validator: rule.number, trigger: "blur" }],
@@ -205,7 +205,7 @@ const getcanteenSpuData = (id: string) => {
loading.value = false
})
}
const categoryList = ref<any>([]) // 商品分类树
const categoryList = ref<any>([]) // 菜品分类树
onMounted(async () => {
const data = await getAllSimple()
categoryList.value = data.data
+18 -18
View File
@@ -3,10 +3,10 @@
<div class="layout-padding-auto layout-padding-view">
<el-row v-show="showSearch">
<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 label="菜品名称" prop="name">
<el-input placeholder="请输入菜品名称" v-model="state.queryForm.name" />
</el-form-item>
<el-form-item label="商品分类" prop="categoryId">
<el-form-item label="菜品分类" prop="categoryId">
<select-ctcg v-model="state.queryForm.categoryId" style="width: 200px" />
</el-form-item>
<el-form-item>
@@ -51,30 +51,30 @@
>
<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>
<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>
<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="sliderPicUrls" label="商品轮播图" show-overflow-tooltip /> -->
<!-- <el-table-column prop="sliderPicUrls" label="菜品轮播图" show-overflow-tooltip /> -->
<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="isShow" label="是否在移动端显示" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="is_show" :value="scope.row.isShow"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="price" label="商品价格" show-overflow-tooltip>
<el-table-column prop="isShow" label="是否在移动端显示" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="is_show" :value="scope.row.isShow"></dict-tag>
</template>
</el-table-column>
<el-table-column prop="price" label="菜品价格" show-overflow-tooltip>
<template #default="scope">
{{ displayPrice(scope.row.price) }}
</template>
@@ -84,10 +84,10 @@
{{ 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="costPrice" label="成本价" show-overflow-tooltip />-->
<!-- <el-table-column prop="stock" label="库存" show-overflow-tooltip />-->
<!-- <el-table-column prop="giveIntegral" label="赠送积分" show-overflow-tooltip /> -->
<!-- <el-table-column prop="salesCount" label="商品销量" show-overflow-tooltip />-->
<!-- <el-table-column prop="salesCount" label="菜品销量" show-overflow-tooltip />-->
<!-- <el-table-column prop="virtualSalesCount" label="虚拟销量" show-overflow-tooltip /> -->
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip min-width="160" />
<el-table-column label="操作" width="150" fixed="right">
@@ -126,7 +126,7 @@ import { getAllSimple as getCanteenCategory } from "/@/api/canteen/canteenCatego
// 引入组件
const FormDialog = defineAsyncComponent(() => import("./form.vue"))
const { spu_status,is_show } = useDict("spu_status","is_show")
const { spu_status, is_show } = useDict("spu_status", "is_show")
// 定义变量内容
const formDialogRef = ref()
// 搜索变量
@@ -135,7 +135,7 @@ const showSearch = ref(true)
// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
const categoryOptions = ref<any>([]) // 商品分类选项
const categoryOptions = ref<any>([]) // 菜品分类选项
const state: BasicTableProps = reactive<BasicTableProps>({
queryForm: {},
@@ -25,18 +25,20 @@
:row-key="(row:any) => row.id"
:reserve-selection="true"
@selection-change=""
:cell-style="tableStyle.cellStyle"
:header-cell-style="tableStyle.headerCellStyle"
>
<el-table-column type="selection" width="50" reserve-selection fixed="left" align="center" />
<el-table-column type="index" label="#" width="50" fixed="left" align="center" />
<el-table-column prop="productName" label="商品名称" min-width="150px" align="center" show-overflow-tooltip />
<el-table-column prop="picUrl" label="封面图" align="center" show-overflow-tooltip>
<el-table-column type="selection" width="50" reserve-selection fixed="left" />
<el-table-column type="index" label="#" width="50" fixed="left" />
<el-table-column prop="productName" label="商品名称" min-width="150px" show-overflow-tooltip />
<el-table-column prop="picUrl" label="封面图" show-overflow-tooltip>
<template #default="scope">
<preview-image @click.stop :src="scope.row.picUrl" />
</template>
</el-table-column>
<el-table-column prop="stock" label="库存" min-width="80px" align="center" show-overflow-tooltip />
<el-table-column prop="productCode" label="货号" min-width="100px" align="center" show-overflow-tooltip />
<el-table-column label="包装单位" min-width="300px" align="center">
<el-table-column prop="stock" label="库存" min-width="80px" show-overflow-tooltip />
<el-table-column prop="productCode" label="货号" min-width="100px" show-overflow-tooltip />
<el-table-column label="包装单位" min-width="300px">
<template #default="scope">
<div v-if="scope.row.erpUnitVos && scope.row.erpUnitVos.length > 0">
<div class="flex flex-wrap gap-2">
@@ -49,12 +51,12 @@
<div v-else class="text-gray-400">无包装单位</div>
</template>
</el-table-column>
<el-table-column prop="productNature" label="商品性质" show-overflow-tooltip align="center" width="150">
<el-table-column prop="productNature" label="商品性质" show-overflow-tooltip width="150">
<template #default="scope">
<dict-tag :options="supermarket_nature" :value="scope.row.productNature" />
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="100px" align="center" show-overflow-tooltip>
<el-table-column prop="status" label="状态" min-width="100px" show-overflow-tooltip>
<template #default="scope">
<dict-tag :options="status" :value="scope.row.status" />
</template>
@@ -174,6 +176,15 @@ onMounted(async () => {
// }
})
const tableStyle = {
cellStyle: { textAlign: "center" },
headerCellStyle: {
textAlign: "center",
background: "var(--el-table-row-hover-bg-color)",
color: "var(--el-text-color-primary)",
},
}
defineExpose({
openDialog,
})
@@ -31,7 +31,14 @@
</el-row>
<el-row>
<div class="mb8" style="width: 100%">
<el-button icon="folder-add" type="primary" class="ml10" @click="create" v-auth="'supermarket_smErpInventoryRecords_add'">
<el-button
disabled
icon="folder-add"
type="primary"
class="ml10"
@click="create"
v-auth="'supermarket_smErpInventoryRecords_add'"
>
新 增
</el-button>
<el-button
@@ -80,6 +80,7 @@
覆盖导入
</el-button>
</el-tooltip>
<el-button plain class="ml10" icon="upload-filled" type="primary" @click="excelUploadPdRef.show()">~盘点导入~</el-button>
</div>
</el-row>
<el-table
@@ -178,12 +179,19 @@
@refreshDataList="refreshDataList"
/>
<upload-excel
<upload-excel-update
ref="excelUploadUpdateRef"
title="覆盖导入库存商品"
url="/supermarket/supermarketSpu/importNewUpdate"
@refreshDataList="refreshDataList"
/>
<upload-excel
ref="excelUploadPdRef"
title="pd导入"
url="/supermarket/supermarketSpu/importNewUpdate"
@refreshDataList="refreshDataList"
/>
</div>
</template>
@@ -193,6 +201,7 @@ import { fetchList, delObjs, getSupermarketCategory, getSupermarketBrand } from
import { useMessage, useMessageBox } from "/@/hooks/message"
import { useDict } from "/@/hooks/dict"
import UploadExcel from "./components/upload-excel.vue"
import UploadExcelUpdate from "./components/upload-excel-update.vue"
import { displayPrice } from "/@/utils/formatMoney"
import { getSupplierSimpleAll } from "/@/api/supermarketerp/smErpSupplier"