wms-antdvue/.svn/pristine/26/267401dd918ccb52057bd08192acbe3ac6f85135.svn-base

<template>
  <a-modal
      v-model:visible="props.visible"
      :title="props.jobId?'编辑':'新增'"
      width="600px"
       @cancel="dialogClose"
  >
    <a-form
        class="ls-form"
        ref="formRef"
        :model="formData"
       :label-col="{ style: { width: '110px' }}"
    >
      <a-form-item
          label="任务名称"
          name="jobName"
          :rules="{ required: true, message: '请输入任务名称', trigger: 'blur' }"
      >
        <a-input
            class="ls-input"
            v-model:value="formData.jobName"
            placeholder="请输入任务名称"
            allow-clear
        />
      </a-form-item>
      <a-form-item
          label="任务别名"
          name="jobAlias"
          :rules="{ required: true, message: '请输入任务别名', trigger: 'blur' }"
      >
        <a-input
            class="ls-input"
            v-model:value="formData.jobAlias"
            placeholder="请输入任务别名"
            allow-clear
        />
      </a-form-item>
      <a-form-item
          label="任务分组"
          name="jobGroup"
          :rules="{ required: true, message: '请输入任务分组', trigger: 'blur' }"
      >
        <a-select v-model:value="formData.jobGroup" placeholder="请选择任务分组">
            <a-select-option value="DEFAULT">DEFAULT</a-select-option>
          </a-select>
      </a-form-item>
      <a-form-item
          label="任务触发器"
          name="jobTrigger"
          :rules="{ required: true, message: '请输入任务触发器', trigger: 'blur' }"
      >
        <a-input
            class="ls-input"
            v-model:value="formData.jobTrigger"
            placeholder="请输入任务触发器"
            allow-clear
        />
      </a-form-item>
      <a-form-item
          label="任务状态"
          name="status"
          :rules="{ required: true, message: '请选择任务状态', trigger: 'blur' }"
      >
      <a-select v-model:value="formData.status" placeholder="请选择任务状态">
            <a-select-option :value="0">未发布</a-select-option>
            <a-select-option :value="1">运行中</a-select-option>
            <a-select-option :value="2">暂停</a-select-option>
            <a-select-option :value="3">删除</a-select-option>
          </a-select>
      </a-form-item>
      <a-form-item
          label="正则表达式"
          name="cronExpression"
          :rules="{ required: true, message: '请输入正则表达式', trigger: 'blur' }"
      >
        <a-input
            class="ls-input"
            v-model:value="formData.cronExpression"
            placeholder="请输入正则表达式"
            allow-clear
        />
      </a-form-item>
      <a-form-item
          label="执行策略"
          name="executePolicy"
          :rules="{ required: true, message: '请选择执行策略', trigger: 'blur' }"
      >
      <a-select v-model:value="formData.executePolicy" placeholder="请选择执行策略">
            <a-select-option :value="1">立即执行</a-select-option>
            <a-select-option :value="2">执行一次</a-select-option>
            <a-select-option :value="3">放弃执行</a-select-option>
          </a-select>
      </a-form-item>
      <a-form-item label="是否同步任务" name="isSync" class="flex-1">
          <a-radio-group v-model:value="formData.isSync" name="isSync">
            <a-radio :value="1">是</a-radio>
            <a-radio :value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
      <a-form-item
          label="任务URL"
          name="url"
          :rules="{ required: true, message: '请输入任务URL', trigger: 'blur' }"
      >
      <a-input
            class="ls-input"
            v-model:value="formData.url"
            placeholder="请输入任务URL"
            allow-clear
        />
      </a-form-item>
      <a-form-item label="任务备注" name="note" :rules="{ required: true, message: '请输入任务备注', trigger: 'blur' }">
        <a-input v-model:value="formData.note" type="textarea"/>
      </a-form-item>
    </a-form>
    <template #footer>
      <span class="dialog-footer">
        <a-button @click="dialogClose">取消</a-button>
        <a-button :loading="subLoading" type="primary" @click="submit">
          确定
        </a-button>
      </span>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
import {getJobDetail,jobAdd,jobUpdate} from "@/api/monitor/job";
import {onMounted, reactive, shallowRef} from "vue";
import { message } from 'ant-design-vue';
import {useLockFn} from "@/utils/useLockFn";

const emit = defineEmits(["success", "update:visible"]);
const formRef = shallowRef<FormInstance>();
const formData = reactive({
  id: "",
  jobName: "",
  jobAlias: "",
  jobGroup: "",
  jobTrigger: "",
  status: "",
  cronExpression: "",
  executePolicy: "",
  isSync: 0,
  url:"",
  note: ""
});

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false
  },
  jobId: {
    type: Number,
    required: true,
    default: 0
  }
});

const handleSubmit = async () => {
    await formRef.value?.validate();
    props.jobId ? await jobUpdate(formData) : await jobAdd(formData);
    message.success("操作成功");
    emit("update:visible", false);
    emit("success");
};

const dialogClose = () => {
  emit("update:visible", false);
};

const { isLock:subLoading,lockFn: submit } = useLockFn(handleSubmit);


const setFormData = async () => {
  const data = await getJobDetail(props.jobId);
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};

onMounted(() => {
  if (props.jobId) {
    setFormData();
  }
});

</script>