sweet-hut-ui/src/components/Plan/PlanDialog.vue

<template>
  <el-dialog v-model="dialogData.visible" :title="dialogData.title"
             center @open="openDialogEvent"
             class="plan-dialog">
    <el-form ref="formRef" :model="dialogData.data"
             :rules="rules" label-width="80px" class="plan-form">
      <el-form-item label="计划标题" prop="title">
        <el-input v-model="dialogData.data.title" autocomplete="off"
                  placeholder="请输入标题" clearable
                  show-word-limit maxlength="10">
        </el-input>
      </el-form-item>

      <el-form-item label="计划内容">
        <el-input v-model="dialogData.data.content" autocomplete="off"
                  placeholder="请输入标题" :rows="2" type="textarea" clearable
                  show-word-limit maxlength="20">
        </el-input>
      </el-form-item>

      <div style="display: flex;justify-content: space-between;">
        <el-form-item label="开始日期">
          <el-date-picker v-model="dialogData.data.date"
                          type="date" placeholder="请选择日期" :editable="false"
                          value-format="YYYY-MM-DD" style="width: 150px;"
                          :disabled-date="disabledDate" @change="changeDateEvent"/>
        </el-form-item>

        <el-form-item label="开始时间">
          <el-time-picker v-model="dialogData.data.startTime"
                          placeholder="请选择开始时间" :editable="false"
                          format="HH:mm" value-format="HH:mm" style="width: 150px;"
                          :disabled="dialogData.data.date === null"
                          @change="changeStartTimeEvent"/>
        </el-form-item>

        <el-form-item label="结束时间">
          <el-time-picker v-model="dialogData.data.endTime"
                          placeholder="请选择结束时间" :editable="false"
                          :disabled="dialogData.data.startTime === null"
                          format="HH:mm" value-format="HH:mm" style="width: 150px;"/>
        </el-form-item>
      </div>

      <div style="display: flex;gap: 40px;">
        <el-form-item label="提醒时间">
          <el-date-picker v-model="dialogData.data.alterTime"
                          type="datetime" placeholder="请选择提醒时间" :editable="false"
                          format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm:ss"
                          @change="changeAlterTimeEvent"
                          :disabled-date="disabledDate" style="width: 200px;"/>
        </el-form-item>

        <el-form-item label="邮箱地址" prop="email">
          <el-input v-model="dialogData.data.email"
                    placeholder="请输入邮箱地址" clearable
                    :disabled="dialogData.data.alterTime === null"
                    style="width: 200px;">
            <template #prefix>
              <i class="fa-solid fa-envelope"></i>
            </template>
          </el-input>
        </el-form-item>
      </div>

      <div style="display: flex;justify-content: space-between;">
        <el-form-item label="类别">
          <el-input v-model="dialogData.data.tag" autocomplete="off"
                    placeholder="请输入类别" clearable
                    show-word-limit maxlength="10" style="width: 150px;">
          </el-input>
        </el-form-item>

        <el-form-item label="置顶">
          <el-switch v-model="dialogData.data.isTop"
                     :active-value="1" :inactive-value="0"
                     @change="changeTopEvent"
          />
        </el-form-item>

        <el-form-item label="优先级">
          <el-select v-model="dialogData.data.priority"
                     placeholder="请选择优先级" style="width: 150px;"
                     :disabled="!!dialogData.data.isTop">
            <el-option v-for="(item, index) in priorityOptionList"
                       :key="index" :label="item.label" :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
    </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="planStore.planApiType === 'UPDATE'"
                   type="danger" @click="deleteClick">删除</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { planRules } from '@/utils/element/elRules.ts'
import { computed, nextTick, reactive, ref } from 'vue'
import { isBeforeTime } from '@/utils/home/planUtil.ts'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { usePlanStore } from '@/store/plan.ts'
import { useUserStore } from '@/store/user.ts'

const formRef = ref<FormInstance>()
const rules = reactive<FormRules>(planRules)
const planStore = usePlanStore()
const userStore = useUserStore()

const dialogData = computed(() => planStore.planDialog)

const priorityOptionList = [{
  value: 0,
  label: '高'
},
{
  value: 1,
  label: '中'
},
{
  value: 2,
  label: '低'
}]

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7
}

/**
 * 打开对话框事件
 */
const openDialogEvent = async () => {
  await nextTick(() => {
    formRef.value?.clearValidate()
  })
}

const changeDateEvent = (value: string) => {
  if (!value) {
    dialogData.value.data.startTime = null
    dialogData.value.data.endTime = null
  }
}

const changeStartTimeEvent = (value: string) => {
  if (!value) {
    dialogData.value.data.endTime = null
  }
}

const changeAlterTimeEvent = (value: string) => {
  if (value) {
    dialogData.value.data.email = userStore.userInfo.email
  }
}

const changeTopEvent = (value: number) => {
  if (value) {
    dialogData.value.data.priority = 0
  }
}

const validatePlan = (): boolean => {
  const { startTime, endTime } = dialogData.value.data
  if (startTime && endTime) {
    if (!isBeforeTime(startTime, endTime)) {
      ElMessage.error('请确认结束时间大于开始时间')
      return false
    }
  }

  return true
}

/**
 * 点击确认按钮
 */
const confirmClick = () => {
  formRef.value?.validate().then(async () => {
    if (validatePlan()) {
      await planStore.handlePlanApi(dialogData.value.data)
    }
  })
}

const deleteClick = () => {
  commonElMessageBox('是否确认删除该计划内容?').then(() => {
    planStore.planApiType = 'DELETE'
    planStore.handlePlanApi(dialogData.value.data)
  })
}

const cancelClick = () => {
  planStore.planDialog.visible = false
}
</script>

<style lang="scss">
.plan-dialog {
  width:40%;
  min-width: 800px;
}
</style>