feat:重构模块

src/components/Travel/Form/TravelRecordDialog.vue

@@ -0,0 +1,106 @@
+<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>