supervision-test-frontend-repo/src/components/semri/process/FlowScheduleStartModal.vue

<template>
  <j-modal
    :title="title"
    :width="720"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
  >
    <a-form :model="formData" :label-col="{ style: { width: '120px' } }" :wrapper-col="{ span: 16 }">
      <a-form-item label="发起类型">
        <a-radio-group v-model:value="formData.triggerMode">
          <a-radio value="immediate">立即发起</a-radio>
          <a-radio value="recurring">重复发起</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="deptOptions.length" label="被督办部门">
        <a-select
          v-model:value="formData.deptIds"
          mode="multiple"
          :options="deptOptions"
          placeholder="请选择被督办部门"
          allow-clear
          style="width: 100%"
          :getPopupContainer="(node) => node?.parentNode"
        />
      </a-form-item>

      <template v-if="showSuoleaderFields">
        <a-form-item label="是否所办领导审批">
          <j-switch v-model:value="formData.isNeedAppro" />
        </a-form-item>

        <a-form-item label="所办领导">
          <j-select-user
            v-model:value="formData.supDeptleaderid"
            :disabled="String(formData.isNeedAppro) !== '1'"
            allow-clear
          />
        </a-form-item>
      </template>

      <template v-if="formData.triggerMode === 'recurring'">
        <a-form-item label="重复周期">
          <JDictSelectTag
            v-model:value="formData.intervalType"
            dictCode="sup_interval_type"
            placeholder="重复周期"
            :getPopupContainer="(node) => node?.parentNode"
          />
        </a-form-item>

        <a-form-item label="重复次数">
          <a-input-number
            v-model:value="formData.startCount"
            :min="1"
            :precision="0"
            placeholder="重复次数"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="重复开始日期">
          <a-date-picker
            v-model:value="formData.intervalStartTime"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="重复开始日期"
            style="width: 100%"
            :getPopupContainer="(node) => node?.parentNode"
          />
        </a-form-item>
      </template>
    </a-form>

    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">提交</a-button>
    </template>
  </j-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, watch } from 'vue';
  import JModal from '/src/components/Modal/src/JModal/JModal.vue';
  import JDictSelectTag from '/src/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSwitch from '/src/components/Form/src/jeecg/components/JSwitch.vue';
  import JSelectUser from '/src/components/Form/src/jeecg/components/JSelectUser.vue';
  import { useMessage } from '/src/hooks/web/useMessage';

  interface ModalPayload {
    title?: string;
    payload?: Record<string, any>;
    deptOptions?: DeptOption[];
    showSuoleaderFields?: boolean;
    isNeedAppro?: string | number;
    supDeptleaderid?: string | string[];
  }

  interface DeptOption {
    label: string;
    value: string;
  }

  const emit = defineEmits(['confirm']);
  const { createMessage } = useMessage();

  const title = ref('发起流程');
  const visible = ref(false);
  const contextData = ref<Record<string, any>>({});
  const deptOptions = ref<DeptOption[]>([]);
  const showSuoleaderFields = ref(false);
  const formData = reactive({
    triggerMode: 'immediate',
    intervalType: undefined as number | string | undefined,
    startCount: undefined as number | undefined,
    intervalStartTime: undefined as string | undefined,
    deptIds: [] as string[],
    isNeedAppro: '0',
    supDeptleaderid: '' as string | string[],
  });

  function resetForm() {
    formData.triggerMode = 'immediate';
    formData.intervalType = undefined;
    formData.startCount = undefined;
    formData.intervalStartTime = undefined;
    formData.deptIds = [];
    formData.isNeedAppro = '0';
    formData.supDeptleaderid = '';
    deptOptions.value = [];
    showSuoleaderFields.value = false;
  }

  function normalizeDeptOptions(options: DeptOption[] = []) {
    const optionMap = new Map<string, DeptOption>();
    options.forEach((item) => {
      const value = String(item?.value || '').trim();
      if (!value || optionMap.has(value)) {
        return;
      }
      optionMap.set(value, {
        value,
        label: item?.label || value,
      });
    });
    return Array.from(optionMap.values());
  }

  function open(data: ModalPayload = {}) {
    resetForm();
    title.value = data.title || '发起流程';
    contextData.value = data.payload || {};
    deptOptions.value = normalizeDeptOptions(data.deptOptions || []);
    formData.deptIds = deptOptions.value.map((item) => item.value);
    showSuoleaderFields.value = !!data.showSuoleaderFields;
    formData.isNeedAppro = String(data.isNeedAppro ?? '0');
    formData.supDeptleaderid = data.supDeptleaderid || '';
    if (String(formData.isNeedAppro) !== '1') {
      formData.supDeptleaderid = '';
    }
    visible.value = true;
  }

  function handleCancel() {
    visible.value = false;
  }

  function handleOk() {
    if (formData.triggerMode === 'recurring') {
      if (!formData.intervalType) {
        createMessage.warning('Please select interval type');
        return;
      }
      if (!formData.startCount) {
        createMessage.warning('Please input repeat count');
        return;
      }
      if (!formData.intervalStartTime) {
        createMessage.warning('Please select start time');
        return;
      }
    }
    if (deptOptions.value.length && !formData.deptIds.length) {
      createMessage.warning('请选择责任部门');
      return;
    }

    emit('confirm', {
      payload: contextData.value,
      options: {
        triggerType: formData.triggerMode === 'recurring' ? 2 : 1,
        intervalType: formData.triggerMode === 'recurring' ? Number(formData.intervalType) : undefined,
        startCount: formData.triggerMode === 'recurring' ? Number(formData.startCount) : undefined,
        intervalStartTime: formData.triggerMode === 'recurring' ? formData.intervalStartTime : undefined,
        deptId: formData.deptIds.join(','),
        deptIds: [...formData.deptIds],
        isNeedAppro: showSuoleaderFields.value ? formData.isNeedAppro : undefined,
        supDeptleaderid: showSuoleaderFields.value ? (String(formData.isNeedAppro) === '1' ? formData.supDeptleaderid : '') : undefined,
      },
    });
    handleCancel();
  }

  watch(
    () => formData.isNeedAppro,
    (value) => {
      if (String(value) !== '1') {
        formData.supDeptleaderid = '';
      }
    }
  );

  defineExpose({
    open,
  });
</script>