gtsoft-snail-job-admin/packages/work-flow/src/drawer/start-drawer.vue

<script setup lang="ts">
import { ref, watch } from 'vue';
import CronInput from '@sa/cron-input';
import { type FormInst, type FormItemRule, useMessage } from 'naive-ui';
import { blockStrategyOptions, triggerTypeOptions, workFlowNodeStatusOptions } from '../constants/business';
import { fetchGroupNameList } from '../api';
import { isNotNull } from '../utils/common';
import { useFlowStore } from '../stores';

defineOptions({
  name: 'StartDetail'
});

interface Props {
  modelValue?: Flow.NodeDataType;
  open?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  modelValue: () => ({})
});

interface Emits {
  (e: 'update:open', open: boolean): void;
  (e: 'save', form: Flow.NodeDataType): void;
}

const emit = defineEmits<Emits>();

const message = useMessage();
const store = useFlowStore();

let title: string = '';
const drawer = ref<boolean>(false);
const form = ref<Flow.NodeDataType>({});
const groupNameList = ref<string[]>([]);

watch(
  () => props.open,
  val => {
    drawer.value = val;
  },
  { immediate: true }
);

watch(
  () => props.modelValue,
  val => {
    form.value = val;
    if (val.workflowName) {
      title = val.workflowName;
    } else if (val.groupName) {
      title = val.groupName;
    } else {
      title = '请选择组';
    }
  },
  { immediate: true, deep: true }
);

const formRef = ref<FormInst>();

const close = () => {
  emit('update:open', false);
  drawer.value = false;
};

const save = () => {
  formRef.value
    ?.validate()
    .then(() => {
      close();
      emit('save', form.value);
    })
    .catch(() => {
      message.warning('请检查表单信息');
    });
};

const getGroupNameList = async () => {
  const { data, error } = await fetchGroupNameList();
  if (!error) {
    groupNameList.value = data;
  }
};

getGroupNameList();

const typeChange = (value: number) => {
  if (value === 1) {
    form.value.triggerInterval = '* * * * * ?';
  } else if (value === 2) {
    form.value.triggerInterval = '60';
  }
};

type Model = Pick<
  Flow.NodeDataType,
  'groupName' | 'triggerType' | 'triggerInterval' | 'executorTimeout' | 'blockStrategy' | 'workflowStatus'
>;

type RuleKey = keyof Model;

const rules: Record<RuleKey, FormItemRule> = {
  groupName: { required: true, message: '请选择组' },
  triggerType: { required: true, message: '请选择触发类型' },
  triggerInterval: { required: true, message: '请输入触发间隔' },
  executorTimeout: { required: true, message: '请输入执行超时时间' },
  blockStrategy: { required: true, message: '请选择阻塞策略' },
  workflowStatus: { required: true, message: '请选择工作流状态' }
};
</script>

<template>
  <NDrawer v-model:show="drawer" display-directive="if" :width="610" @after-leave="close">
    <NDrawerContent :title="title">
      <NForm ref="formRef" :model="form" :rules="rules" label-align="left" label-width="100px">
        <NFormItem path="workflowName" label="工作流名称">
          <NInput v-model:value="form.workflowName" placeholder="请输入工作流名称" />
        </NFormItem>
        <NFormItem path="groupName" label="组名称">
          <NSelect
            v-model:value="form.groupName"
            placeholder="请选择组"
            :disabled="store.type === 0 && isNotNull(store.id)"
            :options="
              groupNameList.map(groupName => {
                return {
                  label: groupName,
                  value: groupName
                };
              })
            "
          ></NSelect>
        </NFormItem>
        <NGrid :cols="24">
          <NGi :span="8">
            <NFormItem path="triggerType" label="触发类型">
              <NSelect
                v-model:value="form.triggerType"
                placeholder="请选择触发类型"
                :options="triggerTypeOptions"
                @update:value="typeChange"
              />
            </NFormItem>
          </NGi>
          <NGi :span="16">
            <NFormItem path="triggerInterval" label="触发间隔">
              <CronInput
                v-if="form.triggerType === 3"
                v-model:value="form.triggerInterval"
                placeholder="请输入Cron表达式"
              />
              <NInputNumber v-else v-model:value="form.triggerInterval as number" placeholder="请输入触发间隔">
                <template #suffix>秒</template>
              </NInputNumber>
            </NFormItem>
          </NGi>
        </NGrid>
        <NGrid :cols="24">
          <NGi :span="8">
            <NFormItem path="executorTimeout" label="执行超时时间">
              <NInputNumber v-model:value="form.executorTimeout" placeholder="请输入超时时间">
                <template #suffix>秒</template>
              </NInputNumber>
            </NFormItem>
          </NGi>
          <NGi :span="16">
            <NFormItem path="blockStrategy" label="阻塞策略">
              <NRadioGroup v-model:value="form.blockStrategy" :option="blockStrategyOptions" />
            </NFormItem>
          </NGi>
        </NGrid>
        <NFormItem path="workflowStatus" label="节点状态">
          <NRadioGroup v-model:value="form.workflowStatus" :option="workFlowNodeStatusOptions" />
        </NFormItem>
        <NFormItem path="description" label="描述">
          <NInput
            v-model:value="form.description"
            type="textarea"
            :autosize="{ minRows: 5 }"
            placeholder="请输入描述"
          />
        </NFormItem>
      </NForm>

      <template #footer>
        <NButton type="primary" @click="save">保存</NButton>
        <NButton class="ml-12px" @click="close">取消</NButton>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>