299 lines
6.9 KiB
Vue
299 lines
6.9 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div style="margin-left: 4.5%;margin-top: 1.5%">
|
|
<el-select
|
|
v-model="merchantId"
|
|
placeholder="请选择商户"
|
|
size="large"
|
|
style="width: 240px; display: inline-block"
|
|
:disabled="merchantStatus"
|
|
@change="merchantSelect"
|
|
>
|
|
<el-option v-for="item in merchantInfo" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
<h1 class="title">今日菜谱</h1>
|
|
</div>
|
|
<table width="100%" class="titleTable">
|
|
<tr class="trclass">
|
|
<td @click="addClick(-1)"><</td>
|
|
<td
|
|
v-for="(item, index) in weekData.data"
|
|
:key="index"
|
|
@click="timeClick(item, index)"
|
|
class="tdclass"
|
|
:class="{ selectedSpan: isActive === index ? 'selected' : '' }"
|
|
>
|
|
<span>{{ item }}</span>
|
|
</td>
|
|
<td @click="addClick(1)">></td>
|
|
</tr>
|
|
</table>
|
|
<div class="dataDiv">
|
|
<table :style="{ width: tableWitch + 'px' }" class="foodTable">
|
|
<tr class="food">
|
|
<td @click="addFood(1)"> 早餐</td>
|
|
<td v-for="(item, index) in foodData1" :key="index">
|
|
<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="food" style="margin: 0px 5px 5px 0px">
|
|
<td @click="addFood(2)"> 中餐</td>
|
|
<td v-for="(item, index) in foodData2" :key="index">
|
|
<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
|
|
</td>
|
|
</tr>
|
|
<tr class="food">
|
|
<td @click="addFood(3)"> 晚餐</td>
|
|
<td v-for="(item, index) in foodData3" :key="index">
|
|
<img @click="delteData(item.tid)" :src="item.picUrl" class="imageCss" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<!-- 编辑、新增 -->
|
|
<form-dialog ref="formDialogRef" @success="selectTimeFood" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts" name="systemCanteenDailyMenu">
|
|
import { delObjs ,selectTimeFoodApi,selectWeekInfo,} from "/@/api/canteen/canteenDailyMenu";
|
|
import { useMessage, useMessageBox } from "/@/hooks/message";
|
|
import { useDict } from '/@/hooks/dict';
|
|
import {selectMerchantList} from "/@/api/canteen/merchantInfo";
|
|
|
|
// 引入组件
|
|
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
|
// 定义查询字典
|
|
|
|
const { daily_menu } = useDict('daily_menu')
|
|
// 定义变量内容
|
|
const formDialogRef = ref()
|
|
// 多选变量
|
|
const loading = ref(true) // 列表的加载中
|
|
|
|
// ---------新增业务变量
|
|
const message = useMessage() // 消息弹窗
|
|
const weekData = reactive({
|
|
data: []
|
|
}) //时间数组
|
|
const weekParams = reactive({
|
|
index: 0
|
|
})
|
|
const foodData1 = ref({})
|
|
const foodData2 = ref({})
|
|
const foodData3 = ref({})
|
|
let isActive = ref(-1)
|
|
let timedata = ''
|
|
const merchantId = ref()
|
|
const merchantStatus = ref(true)
|
|
const merchantInfo = ref([])
|
|
let tableWitch = 1000
|
|
|
|
|
|
const addFood = async (hourType: number) => {
|
|
if (!merchantId.value) {
|
|
useMessage().error('请选择商户再进行新增')
|
|
return
|
|
}
|
|
//打开新增框
|
|
formDialogRef.value.openDialog(null,timedata,hourType,merchantId.value)
|
|
}
|
|
//选中具体时间数据
|
|
const timeClick = async (time: string, index: number) => {
|
|
//数据查询操作
|
|
if (time) {
|
|
//时间处理
|
|
time = time.substring(0, time.indexOf('('))
|
|
timedata = time
|
|
//选中
|
|
isActive.value = index
|
|
selectTimeFood()
|
|
}
|
|
}
|
|
//切换时间
|
|
const addClick = async (index: number) => {
|
|
//数据值操作
|
|
weekParams.index = weekParams.index + index
|
|
fetchData()
|
|
}
|
|
const merchantSelect = async () => {
|
|
// getList()
|
|
fetchData()
|
|
}
|
|
|
|
const fetchData = async () => {
|
|
let weekDataRes= await selectWeekInfo(weekParams);
|
|
weekData.data = weekDataRes.data
|
|
isActive.value = 0
|
|
timedata = weekData.data[0]
|
|
//时间格式
|
|
timedata = timedata.substring(0, timedata.indexOf('('))
|
|
selectTimeFood()
|
|
}
|
|
|
|
const selectTimeFood = async () => {
|
|
foodData1.value = []
|
|
foodData2.value = []
|
|
foodData3.value = []
|
|
tableWitch = 1000
|
|
let params = {
|
|
time: timedata,
|
|
merchantId: merchantId.value
|
|
}
|
|
//最大长度
|
|
let count = 0
|
|
const result = await selectTimeFoodApi(params)
|
|
result.data.forEach((r) => {
|
|
if (r.dailyMenuVOS.length > count) {
|
|
count = r.dailyMenuVOS.length
|
|
}
|
|
switch (r.hourType) {
|
|
case 1:
|
|
foodData1.value = r.dailyMenuVOS
|
|
break
|
|
case 2:
|
|
foodData2.value = r.dailyMenuVOS
|
|
break
|
|
case 3:
|
|
foodData3.value = r.dailyMenuVOS
|
|
break
|
|
}
|
|
})
|
|
if (count > 0) {
|
|
tableWitch = count * 300 + 100
|
|
} else {
|
|
tableWitch = 600
|
|
}
|
|
|
|
}
|
|
/** 删除数据源按钮 */
|
|
const delteData = async (tid: number) => {
|
|
await message.delConfirm("确定删除菜品吗？",'今日菜品?')
|
|
await delObjs(tid)
|
|
message.success(('common.delSuccess'))
|
|
selectTimeFood()
|
|
}
|
|
|
|
|
|
|
|
// 删除操作
|
|
const handleDelete = async (ids: string[]) => {
|
|
try {
|
|
await useMessageBox().confirm('此操作将永久删除');
|
|
} catch {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await delObjs(ids);
|
|
// getDataList();
|
|
useMessage().success('删除成功');
|
|
} catch (err: any) {
|
|
useMessage().error(err.msg);
|
|
}
|
|
}
|
|
/** 查询列表 */
|
|
// const getList = async () => {
|
|
// loading.value = true
|
|
// try {
|
|
// const data = await fetchList(queryParams)
|
|
// list.value = data.list
|
|
// total.value = data.total
|
|
// } finally {
|
|
// loading.value = false
|
|
// }
|
|
// }
|
|
|
|
/** 初始化下拉框 */
|
|
const merchantInit = async () => {
|
|
// 获取下拉框
|
|
let res = await selectMerchantList("1")
|
|
merchantInfo.value=res.data
|
|
//默认选中第一个
|
|
if (merchantInfo.value) {
|
|
merchantId.value = merchantInfo.value[0].id
|
|
if (merchantInfo.value.length > 1) {
|
|
merchantStatus.value = false
|
|
}
|
|
// getList()
|
|
fetchData()
|
|
|
|
}
|
|
}
|
|
/** 初始化 **/
|
|
onMounted(() => {
|
|
merchantInit()
|
|
})
|
|
|
|
</script>
|
|
<style lang="scss">
|
|
.title {
|
|
font-size: 28px;
|
|
display: inline-block;
|
|
margin-left: 25%;
|
|
}
|
|
|
|
.titleTable {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin-top: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tdclass {
|
|
border: 1px solid rgb(233, 233, 233);
|
|
width: 13%;
|
|
height: 36px;
|
|
text-align: center;
|
|
background-color: white;
|
|
}
|
|
|
|
.trclass > td:first-child {
|
|
text-align: center;
|
|
}
|
|
.trclass > td:last-child {
|
|
text-align: center;
|
|
}
|
|
|
|
.foodTable {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.food td {
|
|
width: 250px;
|
|
height: 200px;
|
|
display: inline-block;
|
|
background-color: white;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.imageCss {
|
|
width: 250px;
|
|
}
|
|
|
|
.food td:first-child {
|
|
width: 60px;
|
|
height: 200px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: 4%;
|
|
background-color: transparent;
|
|
font-size: 26px;
|
|
cursor: pointer;
|
|
// text-decoration: blue underline;
|
|
color: rgb(0, 118, 228);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dataDiv {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.selectedSpan {
|
|
border: 1px solid rgb(255, 187, 0);
|
|
color: rgb(255, 187, 0);
|
|
}
|
|
</style>
|