njzscloud-dispose-web/src/pages/sys/scheduleRecode/SchedulerecodeForm.vue

<template>
  <ElDialog v-model="showDialog"
    :close-on-click-modal="false"
    destroy-on-close
    width="25vw">
    <ElForm :model="task_schedule_recodeFormData"
      class="sys_task_schedule_recode-form"
      label-width="auto">
      <ElFormItem label="任务 Id">
        <ElInput
          v-model="task_schedule_recodeFormData.taskId"
          :disabled="status === 'view'"
          placeholder="任务 Id"/>
      </ElFormItem>
      <ElFormItem label="任务名称">
        <ElInput
          v-model="task_schedule_recodeFormData.taskName"
          :disabled="status === 'view'"
          placeholder="任务名称"/>
      </ElFormItem>
      <ElFormItem label="任务执行函数">
        <ElInput
          v-model="task_schedule_recodeFormData.fn"
          :disabled="status === 'view'"
          placeholder="任务执行函数"/>
      </ElFormItem>
      <ElFormItem label="调度方式">
        <ElInput
          v-model="task_schedule_recodeFormData.scheduleType"
          :disabled="status === 'view'"
          placeholder="调度方式"/>
      </ElFormItem>
      <ElFormItem label="调度配置">
        <ElInput
          v-model="task_schedule_recodeFormData.scheduleConf"
          :disabled="status === 'view'"
          placeholder="调度配置"/>
      </ElFormItem>
      <ElFormItem label="调度时间">
        <ElInput
          v-model="task_schedule_recodeFormData.scheduleTime"
          :disabled="status === 'view'"
          placeholder="调度时间"/>
      </ElFormItem>
      <ElFormItem label="任务开始时间">
        <ElInput
          v-model="task_schedule_recodeFormData.startTime"
          :disabled="status === 'view'"
          placeholder="任务开始时间"/>
      </ElFormItem>
      <ElFormItem label="任务结束时间">
        <ElInput
          v-model="task_schedule_recodeFormData.endTime"
          :disabled="status === 'view'"
          placeholder="任务结束时间"/>
      </ElFormItem>
      <ElFormItem label="任务状态">
        <ElInput
          v-model="task_schedule_recodeFormData.taskStatus"
          :disabled="status === 'view'"
          placeholder="任务状态"/>
      </ElFormItem>
      <ElFormItem label="是否为内内置任务">
        <ElInput
          v-model="task_schedule_recodeFormData.builtin"
          :disabled="status === 'view'"
          placeholder="是否为内内置任务"/>
      </ElFormItem>
      <ElFormItem label="本次调度是否为手动触发">
        <ElInput
          v-model="task_schedule_recodeFormData.manually"
          :disabled="status === 'view'"
          placeholder="本次调度是否为手动触发"/>
      </ElFormItem>
      <ElFormItem label="备注">
        <ElInput
          v-model="task_schedule_recodeFormData.memo"
          :disabled="status === 'view'"
          placeholder="备注"/>
      </ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="showDialog = false">{{ status === 'view' ? '关闭' : '取消' }}</ElButton>
      <ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ElDialog>
</template>
<script lang="ts" setup>
import Task_schedule_recodeApi from '@/pages/sys/task_schedule_recode/task_schedule_recode-api.ts'
import Strings from '@/common/utils/strings.ts'
import { ElMessage } from 'element-plus'

const emits = defineEmits([ 'editSucc' ])
const showDialog = ref(false)
const submiting = ref(false)
const status = ref<'add' | 'view' | 'modify'>('add')
const task_schedule_recodeFormData = reactive<Task_schedule_recodeTypes.SearchTask_schedule_recodeResult>({})

function submitHandler() {
  if (status.value === 'view') return
  submiting.value = true
  if (task_schedule_recodeFormData.id != null) {
    Task_schedule_recodeApi.modify(task_schedule_recodeFormData)
      .then(() => {
        ElMessage.success('修改成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  } else {
    Task_schedule_recodeApi.add(task_schedule_recodeFormData)
      .then(() => {
        ElMessage.success('添加成功')
        emits('editSucc')
        showDialog.value = false
      })
      .finally(() => {
        submiting.value = false
      })
  }
}

defineExpose({
  open(data: Task_schedule_recodeTypes.SearchTask_schedule_recodeResult = {}) {
    showDialog.value = true
    if (!Strings.isBlank(data.id)) {
      status.value = 'modify'
      Task_schedule_recodeApi.detail(data.id!)
        .then(res => {
          Object.assign(task_schedule_recodeFormData, res.data)
        })
    } else {
      status.value = 'add'
      Object.assign(task_schedule_recodeFormData, {})
    }
  },
})
</script>
<style lang="stylus" scoped>
.sys_task_schedule_recode-form {
  padding 20px
}
</style>