Cxx0822/food-hub-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:增加菜谱记录功能

Browse Source
This commit is contained in:
Cxx0822
2025-06-26 23:27:01 +08:00
parent 99f828381d
commit 233d7de144
8 changed files with 271 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Food/FoodCard.vue
View File

@@ -69,6 +69,7 @@ import { formatDate } from 'vue3-common/utils/dateUtil'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
import { ElMessage } from 'element-plus'
const router = useRouter()
const foodStore = useFoodStore()
@@ -94,14 +95,9 @@ const getRecord = (recordList: IRecord[]) => {
}
const editClick = async () => {
const id = props.foodItem?.id
foodStore.recipeApiType = 'UPDATE'
// await foodStore.queryRecipe(id as number)
// foodStore.foodRecipeDialog = {
// title: '编辑菜谱',
// visible: true,
// data: deepCopyObject(foodStore.currentFoodRecipe)
// }
await foodStore.queryRecipe(props.foodItem.id as number)
await router.push('/record/recipeForm')
}
const viewClick = async () => {
@@ -111,7 +107,7 @@ const viewClick = async () => {
const deleteClick = () => {
foodStore.recipeApiType = 'DELETE'
commonElMessageBox(`请确认是否删除该菜谱: ${props.foodItem?.name}?`).then(() => {
// foodStore.handleRecipeApi(props.foodItem as IRecipe)
foodStore.handleRecipeApi(props.foodItem as IRecipe)
})
}

100
src/components/Food/FoodMaterialDialog.vue Normal file
View File

@@ -0,0 +1,100 @@
<template>
<el-dialog v-model="foodStore.materialDialog.visible"
:title="foodStore.materialDialog.title"
align-center center @open="openDialogEvent"
class="food-material-dialog">
<el-form ref="formRef" :model="foodStore.materialDialog.data"
:rules="rules" label-width="60px">
<el-form-item label="类型" prop="type">
<el-select
v-model="foodStore.materialDialog.data.type"
placeholder="请选择类型">
<el-option
v-for="(item, index) in foodMaterialTypeList"
:key="index" :label="item" :value="item"
/>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="name">
<el-input v-model="foodStore.materialDialog.data.name" autocomplete="off"
placeholder="请输入名称" clearable
show-word-limit maxlength="20">
</el-input>
</el-form-item>
<el-form-item label="分量" prop="amount">
<el-input v-model="foodStore.materialDialog.data.amount" autocomplete="off"
placeholder="请输入分量（1斤/2勺/适量）" clearable
show-word-limit maxlength="20">
</el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelClick">取消</el-button>
<el-button type="danger" @click="deleteClick">删除</el-button>
<el-button type="primary" @click="confirmClick">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { useFoodStore } from '@/store/food'
import { nextTick, reactive, ref } from 'vue'
import { FormRules } from 'element-plus'
import { foodMaterialRules } from '@/utils/element/elRules'
const rules = reactive<FormRules>(foodMaterialRules)
const formRef = ref()
const foodStore = useFoodStore()
const foodMaterialTypeList = ['主料', '辅料', '调料']
/**
* 打开对话框事件
*/
const openDialogEvent = () => {
nextTick(() => {
formRef.value?.clearValidate()
})
}
/**
* 点击确认按钮
*/
const confirmClick = () => {
formRef.value.validate().then(async () => {
if (foodStore.materialApiType === 'UPDATE') {
const { editMaterialIndex: index } = foodStore
foodStore.currentRecipe.materialList[index] = foodStore.materialDialog.data
} else {
foodStore.currentRecipe.materialList.push(foodStore.materialDialog.data)
}
foodStore.materialDialog.visible = false
})
}
const deleteClick = () => {
const { editMaterialIndex: index } = foodStore
foodStore.materialApiType = 'DELETE'
foodStore.currentRecipe.materialList.splice(index, 1)
foodStore.materialDialog.visible = false
}
const cancelClick = () => {
foodStore.materialDialog.visible = false
}
</script>
<style lang="scss">
.food-material-dialog {
width: 85%;
.el-dialog__body {
// height: 50vh;
}
}
</style>

16
src/components/Food/FoodMaterialForm.vue
View File

@@ -4,7 +4,7 @@
<el-button type="primary" @click="addClick">新增</el-button>
</div>
<el-table :data="foodStore.currentRecipe.materialList"
border stripe class="material-table">
border stripe @row-click="handleRowClick" class="material-table">
<el-table-column type="index" align="center" width="40" />
<el-table-column prop="type" label="类型" align="center" min-width="10%"/>
<el-table-column prop="name" label="名称" align="center" min-width="20%"/>
@@ -17,7 +17,6 @@
import { useFoodStore } from '@/store/food'
import type { IMaterial } from '@/types/food'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
const foodStore = useFoodStore()
@@ -30,22 +29,15 @@ const addClick = () => {
}
}
const editClick = (index: number, material: IMaterial) => {
foodStore.editMaterialIndex = index
const handleRowClick = (row: IMaterial) => {
foodStore.editMaterialIndex = foodStore.currentRecipe.materialList.indexOf(row)
foodStore.materialApiType = 'UPDATE'
foodStore.materialDialog = {
title: '编辑食材',
visible: true,
data: deepCopyObject(material)
data: deepCopyObject(row)
}
}
const deleteClick = (index: number, material: IMaterial) => {
foodStore.materialApiType = 'DELETE'
commonElMessageBox(`确认删除该食材: ${material.name}?`).then(() => {
foodStore.currentRecipe.materialList.splice(index, 1)
})
}
</script>
<style lang="scss">

98
src/components/Food/FoodStepDialog.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<el-dialog v-model="foodStore.stepDialog.visible"
:title="foodStore.stepDialog.title"
center @open="openDialogEvent"
class="food-step-dialog">
<el-form ref="formRef" :model="foodStore.stepDialog.data"
:rules="rules" label-width="60px">
<el-form-item label="内容" prop="content">
<el-input v-model="foodStore.stepDialog.data.content" autocomplete="off"
placeholder="请输入内容" clearable
type="textarea" :rows="3"
show-word-limit maxlength="50">
</el-input>
</el-form-item>
<el-form-item label="图片">
<upload-image v-model="foodStore.stepDialog.data.imageUrl"
:service-url="fileServiceUrl"
:image-limit="1"
:service-file-root-path="serviceFileRootPath"
:image-path="foodStore.imagePath"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancelClick">取消</el-button>
<el-button type="danger" @click="deleteClick">删除</el-button>
<el-button type="primary" @click="confirmClick">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { UploadImage } from 'vue3-common'
import { useFoodStore } from '@/store/food'
import { ref, reactive, nextTick } from 'vue'
import { FormRules } from 'element-plus'
import { foodStepRules } from '@/utils/element/elRules'
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
const rules = reactive<FormRules>(foodStepRules)
const formRef = ref()
const foodStore = useFoodStore()
/**
* 打开对话框事件
*/
const openDialogEvent = () => {
nextTick(() => {
formRef.value?.clearValidate()
})
}
/**
* 点击确认按钮
*/
const confirmClick = () => {
formRef.value.validate()
.then(async () => {
if (foodStore.stepApiType === 'UPDATE') {
const { editStepIndex: index } = foodStore
foodStore.currentRecipe.stepList[index] = foodStore.stepDialog.data
} else {
foodStore.currentRecipe.stepList.push(foodStore.stepDialog.data)
}
foodStore.stepDialog.visible = false
})
}
const deleteClick = () => {
const { editStepIndex: index } = foodStore
foodStore.stepApiType = 'DELETE'
foodStore.currentRecipe.stepList.splice(index, 1)
foodStore.currentRecipe.stepList.forEach((item) => {
if (item.sort > index) {
item.sort -= 1
}
})
foodStore.stepDialog.visible = false
}
const cancelClick = () => {
foodStore.stepDialog.visible = false
}
</script>
<style lang="scss">
.food-step-dialog {
width: 85%;
.el-dialog__body {
// height: 50vh;
}
}
</style>

21
src/components/Food/FoodStepForm.vue
View File

@@ -5,7 +5,7 @@
</div>
<el-table :data="foodStore.currentRecipe.stepList"
border class="food-step-table">
border stripe @row-click="handleRowClick" class="food-step-table">
<el-table-column type="index" align="center" width="40" />
<el-table-column prop="content" label="内容" align="center" min-width="20%" />
<el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
@@ -22,7 +22,6 @@
import { useFoodStore } from '@/store/food'
import type { IStep } from '@/types/food'
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { serviceFileRootPath } from '@/utils'
const foodStore = useFoodStore()
@@ -37,27 +36,15 @@ const addClick = () => {
}
}
const editClick = (index: number, step: IStep) => {
foodStore.editStepIndex = index
const handleRowClick = (row: IStep) => {
foodStore.editStepIndex = foodStore.currentRecipe.stepList.indexOf(row)
foodStore.stepApiType = 'UPDATE'
foodStore.stepDialog = {
title: '编辑步骤',
visible: true,
data: deepCopyObject(step)
data: deepCopyObject(row)
}
}
const deleteClick = (index: number) => {
commonElMessageBox('确认删除该步骤?').then(() => {
foodStore.stepApiType = 'DELETE'
foodStore.currentRecipe.stepList.splice(index, 1)
foodStore.currentRecipe.stepList.forEach((item) => {
if (item.sort > index) {
item.sort -= 1
}
})
})
}
</script>
<style lang="scss">

57
src/layout/index.vue
View File

@@ -7,6 +7,20 @@
<tab-bar />
<draggable-button v-show="checkIsShow()" @click="addClick"/>
<el-dialog v-model="dialogFormVisible" title="选择新增类型"
width="80%" align-center center class="choose-dialog">
<el-radio-group v-model="addType">
<el-radio value="recipe">菜谱</el-radio>
<el-radio value="record">记录</el-radio>
</el-radio-group>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="confirmClick">确认</el-button>
</div>
</template>
</el-dialog>
</section>
</template>
@@ -17,12 +31,16 @@ import DraggableButton from '@/components/DraggableButton.vue'
import { useRouter, useRoute } from 'vue-router'
import { useAppStore } from '@/store/app'
import { useFoodStore } from '@/store/food'
import { ref } from 'vue'
const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const foodStore = useFoodStore()
const dialogFormVisible = ref(false)
const addType = ref('recipe')
const checkIsShow = (): boolean => {
if (route.path.includes('Form') || route.path.includes('detail')) {
return false
@@ -32,7 +50,7 @@ const checkIsShow = (): boolean => {
return true
}
if (route.path.includes('record') && foodStore.recordSegment !== 'timeline') {
if (route.path.includes('record')) {
return true
}
@@ -40,23 +58,8 @@ const checkIsShow = (): boolean => {
}
const addClick = () => {
appStore.isShowMobileBack = true
if (route.path.includes('record')) {
switch (foodStore.recordSegment) {
case 'recipe':
foodStore.recipeApiType = 'ADD'
foodStore.currentRecipe = foodStore.getEmptyRecipe()
router.push('/record/recipeForm')
break
case 'daily':
foodStore.recordApiType = 'ADD'
foodStore.currentRecord = foodStore.getEmptyRecord()
router.push('/record/recordForm')
break
default:
break
}
dialogFormVisible.value = true
}
if (route.path.includes('moment')) {
@@ -65,8 +68,28 @@ const addClick = () => {
router.push('/moment/momentForm')
}
}
const confirmClick = () => {
dialogFormVisible.value = false
if (addType.value === 'recipe') {
foodStore.recipeApiType = 'ADD'
foodStore.currentRecipe = foodStore.getEmptyRecipe()
router.push('/record/recipeForm')
} else {
foodStore.recordApiType = 'ADD'
foodStore.currentRecord = foodStore.getEmptyRecord()
router.push('/record/recordForm')
}
}
</script>
<style lang="scss">
@use "@/styles/mobile.home.layout.module.scss";
.choose-dialog {
.el-dialog__body {
display: flex;
justify-content: center;
}
}
</style>

19
src/views/login/index.vue
View File

@@ -42,19 +42,20 @@ onUnmounted(() => {
</script>
<style lang="scss">
$form-item-width: 300px;
$form-item-width: 90vw;
$login-height: 500px;
.login-view {
height: 100%;
display: grid;
place-items: center;
// display: grid;
// place-items: center;
.login-container {
// height: $login-height;
padding: 30px;
border-radius: 15px;
box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
margin-top: 20vh;
height: $login-height;
// padding: 30px;
// border-radius: 15px;
// box-shadow: 2px 2px 5px #D3D3D3, 4px 4px 10px #A9A9A9;
display: flex;
flex-direction: column;
@@ -102,7 +103,7 @@ $login-height: 500px;
.el-divider {
.el-divider__text {
color: #A9A9A9;
font-size: 0.8rem;
font-size: 1rem;
}
}
@@ -126,7 +127,7 @@ $login-height: 500px;
display: flex;
justify-content: center;
span {
font-size: 0.9rem;
font-size: 1.2rem;
}
}
}

16
src/views/record/recipeForm.vue
View File

@@ -1,15 +1,15 @@
<template>
<div class="food-recipe-form common-mobile-view">
<el-form ref="formRef" :model="foodStore.currentRecipe"
:rules="rules" label-width="80px">
<el-form-item label="美食名称" prop="name">
:rules="rules" label-width="60px">
<el-form-item label="名称" prop="name">
<el-input v-model="foodStore.currentRecipe.name" autocomplete="off"
placeholder="请输入名称" clearable
show-word-limit maxlength="20">
</el-input>
</el-form-item>
<el-form-item label="美食菜系" prop="category">
<el-form-item label="菜系" prop="category">
<el-select v-model="foodStore.currentRecipe.category"
placeholder="请选择或输入菜系">
<el-option v-for="(item, index) in foodCategoryList"
@@ -17,7 +17,7 @@
</el-select>
</el-form-item>
<el-form-item label="推荐指数" prop="recommendRate">
<el-form-item label="推荐" prop="recommendRate">
<el-rate v-model="foodStore.currentRecipe.recommendRate"
:colors="foodStore.rateColorList"/>
</el-form-item>
@@ -33,7 +33,8 @@
<el-form-item label="备注">
<el-input v-model="foodStore.currentRecipe.remark" autocomplete="off"
placeholder="请输入备注" clearable
show-word-limit maxlength="20">
type="textarea" :rows="3"
show-word-limit maxlength="50">
</el-input>
</el-form-item>
</el-form>
@@ -43,12 +44,17 @@
<el-button type="danger" @click="deleteClick">删除</el-button>
<el-button type="info" @click="cancelClick">取消</el-button>
</div>
<food-material-dialog />
<food-step-dialog />
</div>
</template>
<script lang="ts" setup>
import FoodMaterialForm from '@/components/Food/FoodMaterialForm.vue'
import FoodStepForm from '@/components/Food/FoodStepForm.vue'
import FoodMaterialDialog from '@/components/Food/FoodMaterialDialog.vue'
import FoodStepDialog from '@/components/Food/FoodStepDialog.vue'
import { useFoodStore } from '@/store/food'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'