107 lines
3.2 KiB
Vue
107 lines
3.2 KiB
Vue
<template>
|
|
<el-dialog v-model="dialogData.visible" :title="dialogData.title"
|
|
center @open="openDialogEvent" class="travel-record-dialog">
|
|
<el-form ref="formRef" :model="dialogData.data"
|
|
:rules="rules" label-width="80">
|
|
<el-form-item label="景点名称" prop="name">
|
|
<el-select
|
|
v-model="travelStore.travelRecordDialog.data.name"
|
|
@focus="travelStore.queryTravelSpotNameList()"
|
|
:disabled="travelStore.travelRecordApiType === 'UPDATE'"
|
|
placeholder="请选择景点名称">
|
|
<el-option
|
|
v-for="(item, index) in travelStore.travelSpotNameList"
|
|
:key="index" :label="item" :value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="旅行日期" prop="date">
|
|
<el-date-picker
|
|
v-model="dialogData.data.date"
|
|
type="date" placeholder="请选择日期"
|
|
value-format="YYYY-MM-DD"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="旅行人员" prop="persons">
|
|
<multi-input :data="dialogData.data.persons"
|
|
:size="5"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="图片">
|
|
<upload-image v-model="dialogData.data.imageList"
|
|
:service-url="fileServiceUrl"
|
|
:image-limit="3"
|
|
:service-file-root-path="serviceFileRootPath"
|
|
:image-path="travelStore.travelImagePath"/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="cancelClick">取消</el-button>
|
|
<el-button type="primary" @click="confirmClick">保存</el-button>
|
|
<el-button v-if="travelStore.travelRecordApiType === 'UPDATE'"
|
|
type="danger" @click="deleteClick">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { UploadImage } from 'vue3-common'
|
|
import { useTravelStore } from '@/store/travel.ts'
|
|
import { ref, reactive, computed, nextTick } from 'vue'
|
|
import { FormRules } from 'element-plus'
|
|
import { travelRecordRules } from '@/utils/element/elRules.ts'
|
|
import { MultiInput } from 'vue3-common'
|
|
import { fileServiceUrl, serviceFileRootPath } from '@/utils'
|
|
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
|
|
|
|
const rules = reactive<FormRules>(travelRecordRules)
|
|
|
|
const formRef = ref()
|
|
const travelStore = useTravelStore()
|
|
|
|
const dialogData = computed(() => travelStore.travelRecordDialog)
|
|
|
|
/**
|
|
* 打开对话框事件
|
|
*/
|
|
const openDialogEvent = async () => {
|
|
await nextTick(() => {
|
|
formRef.value?.clearValidate()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击确认按钮
|
|
*/
|
|
const confirmClick = () => {
|
|
formRef.value.validate().then(() => {
|
|
travelStore.handleTravelRecordApi(dialogData.value.data)
|
|
})
|
|
}
|
|
|
|
const cancelClick = () => {
|
|
dialogData.value.visible = false
|
|
}
|
|
|
|
const deleteClick = () => {
|
|
commonElMessageBox('是否确认删除该记录?').then(() => {
|
|
travelStore.travelRecordApiType = 'DELETE'
|
|
travelStore.handleTravelRecordApi(dialogData.value.data)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.travel-record-dialog {
|
|
width: 40%;
|
|
|
|
.el-dialog__body {
|
|
height: 45vh;
|
|
}
|
|
}
|
|
</style>
|