zsjz-ai/ai-frontend/packages/person/views/components/SpecialDateConfigModal.vue

<template>
  <ConfigManageModal
    :open="props.open"
    title="特殊日期管理"
    :width="1100"
    wrapClassName="special-date-config-modal"
    :summary="loading ? '正在同步特殊日期配置列表' : props.summary"
    :refresh-loading="loading"
    :show-refresh="false"
    create-text="新建日期"
    :table-height="420"
    :show-page-indicator="false"
    :total="total"
    :current="pagination.current"
    :total-pages="totalPages"
    :page-size="pagination.pageSize"
    :page-size-options="pageSizeOptions"
    :jump-page="jumpPage"
    @update:open="handleModalChange"
    @update:jumpPage="handleJumpPageInput"
    @cancel="closeModal"
    @create="openCreateModal"
    @prev-page="handlePrevPage"
    @next-page="handleNextPage"
    @page-size-change="handlePageSizeChange"
    @jump-page="handleJumpPage"
  >
    <template #default="{ tableMaxHeight }">
      <BasicTable
        v-if="rows.length"
        :columns="columns"
        :data-source="rows"
        :loading="loading"
        :pagination="false"
        :showIndexColumn="false"
        :show-table-setting="false"
        :table-setting="{ size: true, setting: true, redo: false, fullScreen: false }"
        :can-resize="true"
        :max-height="tableMaxHeight"
        row-key="rowKey"
      >
        <template #action="{ record }">
          <TableAction :actions="getActions(record)" :stopButtonPropagation="true" />
        </template>
      </BasicTable>
      <div v-else class="analysis-config-manage__empty special-date-modal__empty">
        <EmptyState
          :title="loading ? '正在加载特殊日期' : '暂无特殊日期'"
          :description="loading ? '请稍候...' : '接口返回后会在此展示列表'"
          variant="compact"
          :min-height="Math.max(240, tableMaxHeight)"
        />
      </div>
    </template>
  </ConfigManageModal>

  <ConfigEditorModal
    v-model:open="createOpen"
    :title="editorTitle"
    :confirmLoading="createSaving"
    :width="700"
    okText="保存"
    cancelText="取消"
    wrapClassName="special-date-editor-modal"
    @ok="handleSubmit"
    @cancel="closeCreateModal"
  >
    <Form class="special-date-form" :label-col="{ style: { width: '104px' } }">
      <div class="special-date-form__row">
        <Form.Item label="生效方式" required :validate-status="formErrors.type ? 'error' : ''" :help="formErrors.type">
          <div class="special-date-form__compact">
            <Select
              v-model:value="formState.type"
              class="special-date-form__field special-date-form__type-select"
              :options="typeOptions"
              placeholder="请选择生效方式"
              :getPopupContainer="getModalPopupContainer"
              @change="handleTypeChange"
            />
          </div>
        </Form.Item>
      </div>

      <div class="special-date-form__row">
        <Form.Item
          label="选择日期"
          required
          :validate-status="formErrors.specialDay ? 'error' : ''"
          :help="formErrors.specialDay"
        >
          <div class="special-date-form__compact special-date-form__date-selects">
            <Select
              v-model:value="formState.month"
              class="special-date-form__field special-date-form__date-select"
              :options="monthOptions"
              :placeholder="monthPlaceholder"
              :getPopupContainer="getModalPopupContainer"
              @change="handleMonthChange"
            />
            <Select
              v-model:value="formState.day"
              class="special-date-form__field special-date-form__date-select"
              :options="dayOptions"
              :placeholder="dayPlaceholder"
              :getPopupContainer="getModalPopupContainer"
            />
          </div>
        </Form.Item>
      </div>

      <div class="special-date-form__row">
        <Form.Item label="生效时长" :validate-status="formErrors.gap ? 'error' : ''" :help="formErrors.gap">
          <div class="special-date-form__compact special-date-form__duration">
            <span>前后</span>
            <InputNumber
              v-model:value="formState.gap"
              class="special-date-form__field special-date-form__duration-input"
              :min="0"
              :precision="0"
              placeholder="请输入生效时长"
            />
            <span>天</span>
          </div>
        </Form.Item>
      </div>

      <div class="special-date-form__row">
        <Form.Item label="说明">
          <Input.TextArea
            v-model:value="formState.name"
            class="special-date-form__textarea"
            :maxlength="50"
            :auto-size="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入日期说明，例如生日、纪念日"
          />
        </Form.Item>
      </div>
    </Form>
  </ConfigEditorModal>
</template>

<script lang="ts" setup name="PersonSpecialDateConfigModal">
  import { computed, ref, watch } from 'vue';
  import { Select, Input, Form, InputNumber } from 'ant-design-vue';
  import { BasicTable, TableAction } from '@jeesite/core/components/Table';
  import { EmptyState } from '@jeesite/core/components/EmptyState';
  import { useMessage } from '@jeesite/core/hooks/web/useMessage';
  import { getModalPopupContainer as resolveModalPopupContainer } from '@jeesite/core/utils';
  import ConfigManageModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigManageModal.vue';
  import ConfigEditorModal from '@jeesite/core/components/AnalysisConfigModal/src/ConfigEditorModal.vue';
  import componentSetting from '@jeesite/core/settings/componentSetting';
  import {
    createSpecialDateConfig,
    deleteSpecialDateConfig,
    listSpecialDateConfig,
    updateSpecialDateConfig,
  } from '@jeesite/person/api/personApi';

  const props = withDefaults(
    defineProps<{
      open: boolean;
      summary?: string;
    }>(),
    {
      summary: '统一维护敏感日期分析使用的特殊日期配置',
    },
  );

  const emit = defineEmits<{
    (e: 'update:open', value: boolean): void;
  }>();

  const { createMessage } = useMessage();
  const getModalPopupContainer = (triggerNode?: HTMLElement) => resolveModalPopupContainer(triggerNode);

  const loading = ref(false);
  const sourceRows = ref<any[]>([]);
  const createOpen = ref(false);
  const createSaving = ref(false);
  const editId = ref('');
  const pagination = ref({
    current: 1,
    pageSize: componentSetting.table.defaultPageSize,
  });
  const jumpPage = ref('1');

  const typeOptions = [
    { label: '公历', value: 0 },
    { label: '农历', value: 1 },
  ];

  const solarMonthOptions = Array.from({ length: 12 }, (_, index) => {
    const value = String(index + 1).padStart(2, '0');
    return { label: value, value };
  });

  const lunarMonthLabels = [
    '正月',
    '二月',
    '三月',
    '四月',
    '五月',
    '六月',
    '七月',
    '八月',
    '九月',
    '十月',
    '冬月',
    '腊月',
  ];
  const lunarMonthParseLabels = [
    ['正月', '一月'],
    ['二月'],
    ['三月'],
    ['四月'],
    ['五月'],
    ['六月'],
    ['七月'],
    ['八月'],
    ['九月'],
    ['十月'],
    ['冬月', '十一月'],
    ['腊月', '十二月'],
  ];
  const lunarDayLabels = [
    '初一',
    '初二',
    '初三',
    '初四',
    '初五',
    '初六',
    '初七',
    '初八',
    '初九',
    '初十',
    '十一',
    '十二',
    '十三',
    '十四',
    '十五',
    '十六',
    '十七',
    '十八',
    '十九',
    '二十',
    '廿一',
    '廿二',
    '廿三',
    '廿四',
    '廿五',
    '廿六',
    '廿七',
    '廿八',
    '廿九',
    '三十',
  ];

  const formState = ref({
    name: '',
    month: undefined as string | undefined,
    day: undefined as string | undefined,
    flag: 1,
    innerFlag: 0,
    type: 0,
    gap: undefined as number | undefined,
  });

  const formErrors = ref({
    specialDay: '',
    type: '',
    gap: '',
  });

  const pageSizeOptions = componentSetting.table.pageSizeOptions.map((value) => ({
    label: value,
    value,
  }));

  const columns = [
    { title: '序号', dataIndex: 'serialNo', key: 'serialNo', width: 80 },
    { title: '特殊日期', dataIndex: 'specialDate', key: 'specialDate', width: 260 },
    { title: '生效时长', dataIndex: 'durationText', key: 'durationText', width: 220 },
    { title: '日期说明', dataIndex: 'description', key: 'description', width: 320 },
    { title: '操作', dataIndex: 'action', key: 'action', width: 160, fixed: 'right', align: 'center', slot: 'action' },
  ];

  const editorTitle = computed(() => (editId.value ? '编辑特殊日期' : '新建特殊日期'));
  const total = computed(() => sourceRows.value.length);
  const totalPages = computed(() => {
    if (!total.value) return 1;
    return Math.max(1, Math.ceil(total.value / pagination.value.pageSize));
  });
  const rows = computed(() => {
    const start = (pagination.value.current - 1) * pagination.value.pageSize;
    return sourceRows.value.slice(start, start + pagination.value.pageSize);
  });

  const normalizeObjectArray = (value: any): Record<string, any>[] => {
    if (Array.isArray(value)) return value;
    const candidates = [
      value?.records,
      value?.list,
      value?.data,
      value?.data?.records,
      value?.data?.list,
      value?.data?.data,
      value?.result,
    ];
    for (const item of candidates) {
      if (Array.isArray(item)) return item;
    }
    return [];
  };

  const fallbackText = (value: unknown) => {
    if (value === 0) return '0';
    if (value === null || value === undefined || value === '') return '-';
    return String(value);
  };

  const normalizeSpecialDateType = (value: unknown) => {
    if (value === null || value === undefined || value === '') return undefined;
    const text = String(value).trim();
    if (text === '0' || text.includes('公')) return 0;
    if (text === '1' || text.includes('农')) return 1;
    return undefined;
  };

  const parseLunarSpecialDate = (value: string) => {
    const text = value.trim();
    if (!text) return '';
    for (let monthIndex = 0; monthIndex < lunarMonthParseLabels.length; monthIndex += 1) {
      const monthLabels = lunarMonthParseLabels[monthIndex];
      const matchedMonthLabel = monthLabels.find((label) => text.startsWith(label));
      if (!matchedMonthLabel) continue;
      const restText = text.slice(matchedMonthLabel.length);
      const numericDay = restText.match(/^(\d{1,2})$/);
      if (numericDay) {
        return `${String(monthIndex + 1).padStart(2, '0')}-${numericDay[1].padStart(2, '0')}`;
      }
      const dayIndex = lunarDayLabels.findIndex((label) => label === restText);
      if (dayIndex >= 0) {
        return `${String(monthIndex + 1).padStart(2, '0')}-${String(dayIndex + 1).padStart(2, '0')}`;
      }
    }
    return '';
  };

  const normalizeSpecialDateValue = (row: Record<string, any>) => {
    const rawValue =
      row.specialDay ||
      row.spDate ||
      row.specialDate ||
      row.festivalDate ||
      row.date ||
      row.day ||
      row.holidayDate ||
      row.nMd;
    if (rawValue) {
      const text = String(rawValue).trim();
      const matched = text.match(/(\d{1,2})-(\d{1,2})/);
      if (matched) {
        return `${matched[1].padStart(2, '0')}-${matched[2].padStart(2, '0')}`;
      }
      const lunarValue = parseLunarSpecialDate(text);
      if (lunarValue) return lunarValue;
    }
    const gDatetime = String(row.gDatetime || row.gDate || '').trim();
    if (/^\d{4}-\d{2}-\d{2}$/.test(gDatetime)) return gDatetime.slice(5);
    return '';
  };

  const getSpecialDateMaxDay = (month?: string, type?: number) => {
    if (!month) return 31;
    if (type === 1) return 30;
    if (month === '02') return 29;
    if (['04', '06', '09', '11'].includes(month)) return 30;
    return 31;
  };

  const dayOptions = computed(() => {
    const maxDay = getSpecialDateMaxDay(formState.value.month, formState.value.type);
    return Array.from({ length: maxDay }, (_, index) => {
      const value = String(index + 1).padStart(2, '0');
      const label = formState.value.type === 1 ? lunarDayLabels[index] || value : value;
      return { label, value };
    });
  });

  const monthOptions = computed(() => {
    if (formState.value.type === 1) {
      return lunarMonthLabels.map((label, index) => ({ label, value: String(index + 1).padStart(2, '0') }));
    }
    return solarMonthOptions;
  });

  const monthPlaceholder = computed(() => (formState.value.type === 1 ? '请选择特殊月' : '请选择月份'));
  const dayPlaceholder = computed(() => (formState.value.type === 1 ? '请选择特殊日' : '请选择日期'));

  const formatSpecialDatePayloadValue = (month?: string, day?: string) => {
    if (!month || !day) return '';
    return `${month}-${day}`;
  };

  const formatSpecialDateText = (row: Record<string, any>) => {
    const dateText = normalizeSpecialDateValue(row) || '-';
    const calendarType =
      normalizeSpecialDateType(
        row.workType ?? row.type ?? row.calendarType ?? row.dateType ?? row.calType ?? row.specialDateType,
      ) ?? 0;
    const calendarLabel = calendarType === 1 ? '农历' : '公历';
    if (calendarType === 1 && dateText !== '-') {
      const [month, day] = dateText.split('-');
      const monthLabel = lunarMonthLabels[Number(month) - 1] || month;
      const dayLabel = lunarDayLabels[Number(day) - 1] || day;
      return `${monthLabel}${dayLabel}（${calendarLabel}）`;
    }
    return `${dateText}（${calendarLabel}）`;
  };

  const formatSpecialDateDuration = (row: Record<string, any>) => {
    const gap = row.dayGap ?? row.gap ?? row.duration ?? row.effectDuration ?? row.validDuration;
    if (gap === null || gap === undefined || gap === '') return '前后0天';
    return `前后${Number(gap) || 0}天`;
  };

  const formatSpecialDateDescription = (row: Record<string, any>) =>
    fallbackText(row.name || row.description || row.dateDesc || row.remark || row.festivalName || '-');

  const getSpecialDateDescriptionValue = (row?: Record<string, any>) =>
    String(row?.name || row?.description || row?.dateDesc || row?.remark || row?.festivalName || '').trim();

  const resetForm = () => {
    formState.value = {
      name: '',
      month: undefined,
      day: undefined,
      flag: 1,
      innerFlag: 0,
      type: 0,
      gap: undefined,
    };
    formErrors.value = {
      specialDay: '',
      type: '',
      gap: '',
    };
  };

  const validateForm = () => {
    const { month, day, type, gap } = formState.value;
    const maxDay = getSpecialDateMaxDay(month?.trim(), type);
    formErrors.value = {
      type: type === 0 || type === 1 ? '' : '请选择历法类型',
      specialDay: month && day && Number(day) >= 1 && Number(day) <= maxDay ? '' : '请选择正确的月日',
      gap: gap !== undefined && gap !== null && gap < 0 ? '请输入有效生效时长' : '',
    };
    return !Object.values(formErrors.value).some(Boolean);
  };

  const syncDay = () => {
    const day = formState.value.day;
    if (!day) return;
    const maxDay = getSpecialDateMaxDay(formState.value.month, formState.value.type);
    if (Number(day) > maxDay) {
      formState.value.day = String(maxDay).padStart(2, '0');
    }
  };

  const handleTypeChange = () => {
    syncDay();
  };

  const handleMonthChange = () => {
    syncDay();
  };

  const syncJumpPage = () => {
    jumpPage.value = String(pagination.value.current);
  };

  const loadList = async () => {
    loading.value = true;
    try {
      const response = await listSpecialDateConfig();
      const list = normalizeObjectArray(response);
      sourceRows.value = list.map((item, index) => ({
        rowKey: String(item.id ?? item.sdcId ?? index),
        serialNo: index + 1,
        specialDate: formatSpecialDateText(item),
        durationText: formatSpecialDateDuration(item),
        description: formatSpecialDateDescription(item),
        raw: item,
      }));
      pagination.value.current = Math.min(pagination.value.current, totalPages.value);
      syncJumpPage();
    } catch (error) {
      console.error('获取特殊日期列表失败', error);
      sourceRows.value = [];
      pagination.value.current = 1;
      syncJumpPage();
      createMessage.warning('特殊日期列表获取失败');
    } finally {
      loading.value = false;
    }
  };

  const openModal = async () => {
    pagination.value.current = 1;
    syncJumpPage();
    await loadList();
  };

  const closeModal = () => {
    emit('update:open', false);
  };

  const handleModalChange = (value: boolean) => {
    emit('update:open', value);
  };

  const openCreateModal = () => {
    resetForm();
    editId.value = '';
    createOpen.value = true;
  };

  const closeCreateModal = () => {
    createOpen.value = false;
    editId.value = '';
    resetForm();
  };

  const fillForm = (record?: Record<string, any>) => {
    const rawType =
      normalizeSpecialDateType(
        record?.workType ??
          record?.type ??
          record?.calendarType ??
          record?.dateType ??
          record?.calType ??
          record?.specialDateType,
      ) ?? 0;
    const specialDay = normalizeSpecialDateValue(record || {});
    const [month, day] = specialDay ? specialDay.split('-') : [undefined, undefined];
    const flag = record?.flag ?? 1;
    const innerFlag = record?.innerFlag ?? 0;
    formState.value = {
      name: getSpecialDateDescriptionValue(record),
      month,
      day,
      flag: Number.isFinite(Number(flag)) ? Number(flag) : 1,
      innerFlag: Number.isFinite(Number(innerFlag)) ? Number(innerFlag) : 0,
      type: rawType,
      gap:
        record?.dayGap !== undefined && record?.dayGap !== null
          ? Number(record.dayGap)
          : record?.gap !== undefined && record?.gap !== null
            ? Number(record.gap)
            : undefined,
    };
    formErrors.value = {
      specialDay: '',
      type: '',
      gap: '',
    };
  };

  const openEditModal = (row: any) => {
    const raw = row?.raw || {};
    const nextEditId = String(raw.id ?? raw.sdcId ?? '').trim();
    if (!nextEditId) {
      createMessage.warning('缺少特殊日期ID，暂无法编辑');
      return;
    }
    editId.value = nextEditId;
    fillForm(raw);
    createOpen.value = true;
  };

  const handleSubmit = async () => {
    if (!validateForm()) return;
    createSaving.value = true;
    try {
      const spDate = formatSpecialDatePayloadValue(formState.value.month, formState.value.day);
      const payload = {
        ...(editId.value ? { id: editId.value } : {}),
        name: formState.value.name.trim() || undefined,
        flag: formState.value.flag,
        type: formState.value.type,
        gap: formState.value.gap ?? 0,
        spDate,
      };
      if (editId.value) {
        await updateSpecialDateConfig(payload);
      } else {
        await createSpecialDateConfig(payload);
      }
      createMessage.success(editId.value ? '特殊日期更新成功' : '特殊日期新增成功');
      createOpen.value = false;
      await loadList();
      editId.value = '';
      resetForm();
    } catch (error) {
      console.error(editId.value ? '更新特殊日期失败' : '新增特殊日期失败', error);
      createMessage.warning(editId.value ? '特殊日期更新失败' : '特殊日期新增失败');
    } finally {
      createSaving.value = false;
    }
  };

  const handleDelete = async (row: any) => {
    const raw = row?.raw || {};
    const deleteId = String(raw.id ?? raw.sdcId ?? '').trim();
    if (!deleteId) {
      createMessage.warning('缺少特殊日期ID，暂无法删除');
      return;
    }
    try {
      await deleteSpecialDateConfig(deleteId);
      createMessage.success('特殊日期删除成功');
      await loadList();
    } catch (error) {
      console.error('删除特殊日期失败', error);
      createMessage.warning('特殊日期删除失败');
    }
  };

  const getActions = (row: any) => [
    {
      label: '编辑',
      onClick: () => openEditModal(row),
    },
    {
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '确认删除特殊日期',
        content: `确定要删除“${row?.specialDate || formatSpecialDateText(row?.raw || {})}”吗？删除后无法恢复。`,
        placement: 'left',
        confirm: () => handleDelete(row),
      },
    },
  ];

  const handlePrevPage = () => {
    if (pagination.value.current <= 1) return;
    pagination.value.current -= 1;
    syncJumpPage();
  };

  const handleNextPage = () => {
    if (pagination.value.current >= totalPages.value) return;
    pagination.value.current += 1;
    syncJumpPage();
  };

  const handlePageSizeChange = (value: string | number) => {
    pagination.value.pageSize = Number(value);
    pagination.value.current = 1;
    syncJumpPage();
  };

  const handleJumpPage = () => {
    const next = Number(jumpPage.value);
    if (!Number.isInteger(next) || next < 1) {
      createMessage.warning('请输入正确页码');
      syncJumpPage();
      return;
    }
    pagination.value.current = Math.min(next, totalPages.value);
    syncJumpPage();
  };

  const handleJumpPageInput = (value: string) => {
    jumpPage.value = value;
  };

  watch(
    () => props.open,
    (value) => {
      if (value) {
        void openModal();
      } else {
        closeCreateModal();
      }
    },
  );
</script>

<style lang="less">
  .special-date-config-modal {
    .ant-modal {
      max-width: calc(100vw - 48px);
    }

    .ant-modal-content {
      max-height: min(720px, calc(100vh - 80px));
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      overflow: hidden;
    }

    .ant-modal-header {
      flex: 0 0 auto;
      background: @modal-header-bg-color;
    }

    .ant-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      padding: 16px;
    }
  }

  .special-date-modal {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: hidden;

    &__empty {
      flex: 1 1 auto;
      min-height: 0;
      border: 1px dashed #dbe5ef;
      border-radius: 6px;
      background: #fafcff;
    }
  }

  .special-date-editor-modal {
    .ant-modal-content {
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 18px 45px rgb(15 23 42 / 18%);
    }

    .ant-modal-header {
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
      background: @modal-header-bg-color;
    }

    .ant-modal-body {
      padding: 16px;
    }

    .ant-modal-footer {
      padding: 8px 16px 10px;
      border-top: 1px solid #e5e7eb;
    }
  }

  .special-date-form {
    padding-top: 4px;

    &__row {
      margin-bottom: 22px;
    }

    .ant-form-item {
      margin-bottom: 0;
    }

    .ant-form-item-label > label {
      color: #111827;
      font-size: 14px;
      height: 40px;
    }

    .ant-form-item-explain-error {
      margin-top: 6px;
      font-size: 12px;
    }

    &__field,
    textarea.ant-input {
      border-radius: 8px;
    }

    &__compact {
      width: 476px;
      max-width: 476px;
    }

    &__date-selects {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      flex-wrap: nowrap;
      width: 476px;
      max-width: 476px;
    }

    &__date-select {
      width: 230px;
      max-width: 230px;
      flex: 0 0 230px;
      min-width: 0;
    }

    &__type-select {
      width: 476px;
      max-width: 476px;
    }

    &__duration {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #374151;
    }

    &__duration-input {
      width: 140px;
    }

    &__textarea {
      width: 540px;
      max-width: 540px;
    }

    .ant-select-selector,
    .ant-input-number,
    textarea.ant-input {
      min-height: 40px;
      border-color: #d1d5db;
    }

    .ant-select {
      width: 100%;
    }

    .ant-select-single .ant-select-selector {
      height: 40px;
      padding: 0 14px;
      align-items: center;
    }

    .ant-select-selection-item,
    .ant-select-selection-placeholder {
      line-height: 38px;
    }

    .ant-input-number {
      display: inline-flex;
      align-items: center;
    }

    .ant-input-number-input-wrap {
      height: 100%;
    }

    .ant-input-number-input {
      text-align: center;
      height: 38px;
    }

    textarea.ant-input {
      padding: 12px 16px;
      line-height: 22px;
    }
  }

  @media screen and (max-width: 640px) {
    .special-date-form__duration {
      width: 100%;
    }

    .special-date-form__compact,
    .special-date-form__type-select,
    .special-date-form__date-selects,
    .special-date-form__date-select,
    .special-date-form__duration-input,
    .special-date-form__textarea {
      width: 100%;
      max-width: none;
    }

    .special-date-form__date-selects {
      flex-direction: column;
    }

    .special-date-editor-modal .ant-modal-body,
    .special-date-editor-modal .ant-modal-footer {
      padding: 16px;
    }
  }
</style>