163 lines
4.8 KiB
Vue
163 lines
4.8 KiB
Vue
<template>
|
|
<div class="mobile-food-record-form common-mobile-view">
|
|
<el-form ref="formRef" :model="foodStore.currentFoodRecord"
|
|
:rules="rules" label-width="80">
|
|
<el-form-item label="菜谱名称" prop="name">
|
|
<el-select
|
|
v-model="foodStore.currentFoodRecord.name"
|
|
@focus="foodStore.queryFoodNameList()"
|
|
allow-create filterable
|
|
:disabled="foodStore.foodRecordApiType === '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.currentFoodRecord.date"
|
|
type="date" :editable="false" placeholder="请选择完成时间"
|
|
value-format="YYYY-MM-DD"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="完成人" prop="person">
|
|
<el-select
|
|
v-model="foodStore.currentFoodRecord.person"
|
|
placeholder="请选择完成人">
|
|
<el-option
|
|
v-for="(item, index) in ['哥哥', '宝宝']"
|
|
:key="index" :label="item" :value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="图片">
|
|
<el-upload
|
|
v-model:file-list="imageFileList"
|
|
list-type="picture-card"
|
|
:accept="acceptImageTypes"
|
|
:limit="1"
|
|
:before-upload="beforeUpload"
|
|
:http-request="httpRequest"
|
|
:on-success="handleSuccess"
|
|
:on-exceed="handleExceed"
|
|
:before-remove="beforeRemove"
|
|
:on-remove="handleRemove"
|
|
>
|
|
<el-icon><Plus /></el-icon>
|
|
<template #tip>
|
|
<div class="el-upload__tip">
|
|
请上传小于10M的图片
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="confirmClick">确认</el-button>
|
|
<el-button type="danger" @click="deleteClick">删除</el-button>
|
|
<el-button type="info" @click="cancelClick">取消</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useFoodStore } from '@/store/food.ts'
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import { ElMessage, ElMessageBox, FormRules, UploadProps, UploadRawFile, UploadRequestOptions, UploadUserFile } from 'element-plus'
|
|
import { foodRecordRules } from '@/utils/element/elRules.ts'
|
|
import { AListPath } from '@/utils'
|
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { beforeUploadImage, httpRequestFile } from '@/utils/element/elUpload.ts'
|
|
import { acceptImageTypes } from '@/utils/home/file.ts'
|
|
|
|
const rules = reactive<FormRules>(foodRecordRules)
|
|
|
|
const formRef = ref()
|
|
const foodStore = useFoodStore()
|
|
const appStore = useAppStore()
|
|
|
|
const imageFileList = ref<UploadUserFile[]>([])
|
|
|
|
onMounted(() => {
|
|
appStore.isShowMobileBack = true
|
|
|
|
initImageFileList()
|
|
})
|
|
|
|
const initImageFileList = () => {
|
|
imageFileList.value = []
|
|
const { imageUrl } = foodStore.currentFoodRecord
|
|
if (imageUrl) {
|
|
imageFileList.value.push({
|
|
name: 'image',
|
|
url: `${AListPath}${imageUrl}`
|
|
})
|
|
}
|
|
}
|
|
|
|
const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
|
|
return beforeUploadImage(rawFile)
|
|
}
|
|
|
|
const httpRequest: UploadProps['httpRequest'] = async (options: UploadRequestOptions): Promise<any> => {
|
|
await httpRequestFile(foodStore.foodImagePath, options)
|
|
}
|
|
|
|
const handleSuccess = (response: string) => {
|
|
foodStore.currentFoodRecord.imageUrl = `p/${response}`
|
|
}
|
|
|
|
const handleExceed: UploadProps['onExceed'] = () => {
|
|
ElMessage.warning('最多上传1张图片')
|
|
}
|
|
|
|
const handleRemove: UploadProps['onRemove'] = () => {
|
|
foodStore.currentFoodRecord.imageUrl = ''
|
|
}
|
|
|
|
const beforeRemove: UploadProps['beforeRemove'] = () => {
|
|
return ElMessageBox.confirm('确认删除该文件?').then(() => true, () => false)
|
|
}
|
|
|
|
/**
|
|
* 点击确认按钮
|
|
*/
|
|
const confirmClick = () => {
|
|
formRef.value.validate().then(() => {
|
|
foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
|
|
history.back()
|
|
})
|
|
}
|
|
|
|
const cancelClick = () => {
|
|
history.back()
|
|
appStore.isShowMobileBack = false
|
|
}
|
|
|
|
const deleteClick = () => {
|
|
commonElMessageBox('是否确认删除该记录?').then(() => {
|
|
foodStore.foodRecordApiType = 'DELETE'
|
|
foodStore.handleFoodRecordApi(foodStore.currentFoodRecord)
|
|
history.back()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mobile-food-record-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.button-container {
|
|
align-self: center;
|
|
}
|
|
}</style>
|