96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<template>
|
|
<div class="food-record-form common-mobile-view">
|
|
<h2 style="text-align: center; margin: 0;">
|
|
{{ foodStore.recordApiType === 'ADD' ? '新增记录' : '编辑记录' }}
|
|
</h2>
|
|
|
|
<el-form ref="formRef" :model="foodStore.currentRecord"
|
|
:rules="rules" label-width="80">
|
|
<el-form-item label="菜谱名称" prop="name">
|
|
<el-select
|
|
v-model="foodStore.currentRecord.name"
|
|
@focus="foodStore.queryFoodNameList()"
|
|
allow-create filterable
|
|
:disabled="foodStore.recordApiType === 'UPDATE'"
|
|
placeholder="请输入或选择菜谱名称">
|
|
<el-option
|
|
v-for="(item, index) in foodStore.foodNameList"
|
|
:key="index" :label="item" :value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="完成时间" prop="date">
|
|
<el-date-picker
|
|
v-model="foodStore.currentRecord.date"
|
|
type="date" :editable="false" placeholder="请选择完成时间"
|
|
value-format="YYYY-MM-DD"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="图片" prop="imageUrl">
|
|
<upload-image v-model="foodStore.currentRecord.imageUrl"
|
|
:service-url="fileServiceUrl"
|
|
:image-limit="1"
|
|
:service-file-root-path="serviceFileRootPath"
|
|
:image-path="foodStore.imagePath"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="confirmClick">确认</el-button>
|
|
<el-button v-if="foodStore.recordApiType === 'UPDATE'"
|
|
type="danger" @click="deleteClick">删除</el-button>
|
|
<el-button type="info" @click="cancelClick">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { UploadImage } from 'vue3-common'
|
|
import { useFoodStore } from '@/store/food.ts'
|
|
import { ref, reactive } from 'vue'
|
|
import type { FormRules } from 'element-plus'
|
|
import { foodRecordRules } from '@/utils/element/elRules'
|
|
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
|
|
|
const rules = reactive<FormRules>(foodRecordRules)
|
|
|
|
const formRef = ref()
|
|
const foodStore = useFoodStore()
|
|
|
|
/**
|
|
* 点击确认按钮
|
|
*/
|
|
const confirmClick = () => {
|
|
formRef.value.validate().then(() => {
|
|
foodStore.handleRecordApi(foodStore.currentRecord)
|
|
history.back()
|
|
})
|
|
}
|
|
|
|
const cancelClick = () => {
|
|
history.back()
|
|
}
|
|
|
|
const deleteClick = () => {
|
|
commonElMessageBox('是否确认删除该记录?').then(() => {
|
|
foodStore.recordApiType = 'DELETE'
|
|
foodStore.handleRecordApi(foodStore.currentRecord)
|
|
history.back()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.food-record-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.button-container {
|
|
align-self: center;
|
|
}
|
|
}
|
|
</style>
|