357 lines
11 KiB
Vue
357 lines
11 KiB
Vue
<template>
|
|
<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>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="时间" prop="hourType">
|
|
<p v-if="form.hourType == 1">早餐</p>
|
|
<p v-else-if="form.hourType == 2">午餐</p>
|
|
<p v-else-if="form.hourType == 3">晚餐</p>
|
|
<p v-else>未知类型</p>
|
|
</el-form-item>
|
|
|
|
<!-- <el-form-item label="菜品" prop="spuId">
|
|
<el-select v-model="spuIds" placeholder="请选择菜品" multiple>
|
|
<el-option v-for="item in foodList" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="选择菜品">
|
|
<el-button @click="handleClickSelect">选择菜品</el-button>
|
|
</el-form-item>
|
|
|
|
<!-- <el-col :span="12" class="mb20">
|
|
<el-form-item label="归属时间 1早餐 2午餐 3晚餐" prop="hourType">
|
|
<el-input v-model="form.hourType" placeholder="请输入归属时间 1早餐 2午餐 3晚餐" />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
</el-form>
|
|
|
|
<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">
|
|
<td
|
|
class="food_list_item"
|
|
v-for="(item, index) in selectedFood"
|
|
:key="item.id"
|
|
@mouseenter="hoverIndex = index"
|
|
>
|
|
<el-icon
|
|
v-show="hoverIndex === index"
|
|
@click="removeSelectedItem(item.id)"
|
|
class="absolute right-[-5px] top-[-8px] text-xl text-blue-600"
|
|
>
|
|
<CircleClose />
|
|
</el-icon>
|
|
<el-image style="width: 80px; height: 80px" :src="imageBaseUrl + item.picUrl" fit="cover" />
|
|
<div class="w-full flex justify-around items-center text-black mt-2">
|
|
<span>{{ item.name }}</span>
|
|
<span class="mx-1">|</span>
|
|
<span class="text-sm">
|
|
{{ categoryOptions.find((v: any) => v.id == item.categoryId)?.name ?? "未知" }}
|
|
</span>
|
|
</div>
|
|
<div class="w-full text-lg text-center text-red-600">{{ displayPrice(item.price) }}</div>
|
|
</td>
|
|
</div>
|
|
</tr>
|
|
</table>
|
|
|
|
<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-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>
|
|
|
|
<div style="overflow: auto; max-height: 60vh">
|
|
<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" align="center" />
|
|
<el-table-column prop="name" label="商品名称" width="100px" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="categoryId" label="商品分类" width="100px" align="center" 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" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<preview-image :src="scope.row.picUrl" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sort" label="排序字段" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="status" label="上架状态" align="center" 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="商品价格" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ displayPrice(scope.row.price) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="marketPrice" label="市场价" align="center" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{ displayPrice(scope.row.marketPrice) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="costPrice" label="成本价" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="stock" label="库存" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="salesCount" label="商品销量" align="center" show-overflow-tooltip />
|
|
<el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip />
|
|
</el-table>
|
|
</div>
|
|
<!-- <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" :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 { useDict } from "/@/hooks/dict"
|
|
import { displayPrice } from "/@/utils/formatMoney"
|
|
import { fetchList as getCanteenCategory } from "/@/api/canteen/canteenCategory"
|
|
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 categoryOptions = ref<any>([]) // 商品分类选项
|
|
const dataRules = ref({}) // 定义校验规则
|
|
const hoverIndex = ref<number>(-1) // 预览中hover的菜品索引
|
|
|
|
// 提交表单数据
|
|
const form = reactive<any>({
|
|
id: "",
|
|
startTime: "",
|
|
hourType: "",
|
|
merchantId: "",
|
|
})
|
|
// 选择的菜品的数组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 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 = []
|
|
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
|
|
foodQueryForm.merchantId = form.merchantId
|
|
|
|
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()
|
|
}
|
|
}
|
|
}
|
|
|
|
// 打开弹窗
|
|
const openDialog = (id: string, time?: string, hourType?: number, merchantId?: number) => {
|
|
visible.value = true
|
|
form.id = ""
|
|
|
|
// 重置表单数据
|
|
dataFormRef.value?.resetFields()
|
|
foodQueryForm.current = 1
|
|
foodQueryForm.size = 9999
|
|
selectObjs.value = []
|
|
selectedFood.value = []
|
|
foodDataList.value = []
|
|
|
|
// 获取canteenDailyMenu信息
|
|
if (id) {
|
|
form.id = id
|
|
getcanteenDailyMenuData(id)
|
|
}
|
|
if (time) {
|
|
form.startTime = time
|
|
}
|
|
if (hourType) {
|
|
form.hourType = hourType
|
|
}
|
|
form.merchantId = merchantId
|
|
}
|
|
|
|
// 初始化表单数据
|
|
const getcanteenDailyMenuData = (id: string) => {
|
|
// 获取数据
|
|
loading.value = true
|
|
getObj(id)
|
|
.then((res: any) => {
|
|
Object.assign(form, res.data)
|
|
})
|
|
.finally(() => {
|
|
loading.value = false
|
|
})
|
|
}
|
|
|
|
// 点击选择菜品
|
|
const handleClickSelect = async () => {
|
|
queryRef.value?.resetFields()
|
|
selectDialogVisible.value = true
|
|
|
|
selectObjs.value = selectedFood.value
|
|
await getDataListAndSelect() // 获取菜品数据并且勾选表格行
|
|
|
|
try {
|
|
const res = await getCanteenCategory()
|
|
categoryOptions.value = res.data.records
|
|
} catch (error) {
|
|
categoryOptions.value = []
|
|
}
|
|
}
|
|
|
|
// 选择菜品点击确认
|
|
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) {
|
|
useMessage().warning("请选择菜品")
|
|
return
|
|
}
|
|
|
|
const valid = await dataFormRef.value.validate().catch(() => {})
|
|
if (!valid) return false
|
|
|
|
try {
|
|
loading.value = true
|
|
form.id ? await putObj({ ...form, spuIds: spuIds.value }) : await addObj({ ...form, spuIds: spuIds.value })
|
|
useMessage().success(form.id ? "修改成功" : "添加成功")
|
|
visible.value = false
|
|
emit("refresh")
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
openDialog,
|
|
})
|
|
</script>
|