admin/apps/wisdom-legacy/src/views/outcome/modules/ContinuingEducationEdit.vue

<script setup lang="ts">
import type { UploadFile, UploadProps } from 'ant-design-vue';

import type { ContinuingEducationSubmitVO } from '#/api/outcome';

import { ref } from 'vue';

import { InboxOutlined } from '@ant-design/icons-vue';
import { Button, message, Upload, UploadDragger } from 'ant-design-vue';

import { useEditShell } from '#/adapter/shell';
import { useWorkroomStore } from '#/stores';

import { continuingEducationForm } from '../continuing-education.data';

const workroomStore = useWorkroomStore();

const PDF_MAX_SIZE = 50 * 1024 * 1024;

const pdfFileList = ref<UploadFile[]>([]);
const pdfUrl = ref<string>();
const pdfUploading = ref(false);
const submittingAction = ref<'draft' | 'publish' | null>(null);

function createUploadFile(url: string | undefined, name: string): UploadFile[] {
  if (!url) return [];
  return [
    {
      uid: '-1',
      name,
      status: 'done',
      url,
    },
  ];
}

function resetUploads() {
  pdfFileList.value = [];
  pdfUrl.value = void 0;
  pdfUploading.value = false;
  submittingAction.value = null;
}

const { Form, Shell, api } = useEditShell<ContinuingEducationSubmitVO>(
  continuingEducationForm,
  {
    onLoaded(model) {
      api.shell.setState({
        title: model.id ? '编辑继续教育项目' : '添加继续教育项目',
      });
    },
    handleLoad(model) {
      resetUploads();
      pdfUrl.value = model.fileUrl;
      pdfFileList.value = createUploadFile(model.fileUrl, '附件.pdf');
      return model;
    },
    handleSubmit(values) {
      const workroomId = values.workroomId || workroomStore.workroomId;
      if (!workroomId) {
        message.error('请先选择工作室');
        throw new Error('workroom required');
      }
      if (pdfUploading.value) {
        message.warning('文件上传中，请稍候');
        throw new Error('uploading');
      }
      if (!pdfUrl.value) {
        message.error('请上传附件PDF文件');
        throw new Error('pdf required');
      }
      if (!values.isLongTerm && !values.endDate) {
        message.error('请选择结束日期或勾选长期');
        throw new Error('endDate required');
      }

      return {
        ...values,
        workroomId,
        endDate: values.isLongTerm ? undefined : values.endDate,
        fileUrl: pdfUrl.value,
        publishStatus:
          submittingAction.value === 'draft' ? 'draft' : 'published',
      };
    },
    onClosed: resetUploads,
  },
);

async function handleClose() {
  await api.close();
}

async function handleSaveDraft() {
  submittingAction.value = 'draft';
  try {
    await api.submit();
    message.success('草稿已保存');
  } finally {
    submittingAction.value = null;
  }
}

async function handlePublish() {
  submittingAction.value = 'publish';
  try {
    await api.submit();
    message.success('发布成功');
  } finally {
    submittingAction.value = null;
  }
}

const beforePdfUpload: UploadProps['beforeUpload'] = (file) => {
  const isPdf =
    file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf');
  if (!isPdf) {
    message.error('仅支持PDF格式文件');
    return Upload.LIST_IGNORE;
  }
  if (file.size > PDF_MAX_SIZE) {
    message.error('文件大小不能超过50MB');
    return Upload.LIST_IGNORE;
  }

  pdfUrl.value = URL.createObjectURL(file);
  pdfFileList.value = [
    {
      uid: `${Date.now()}`,
      name: file.name,
      status: 'done',
      url: pdfUrl.value,
    },
  ];
  return false;
};

function onPdfRemove() {
  pdfUrl.value = void 0;
}
</script>

<template>
  <Shell>
    <div class="mx-4">
      <Form />

      <div class="pb-4">
        <div class="mb-2 text-sm font-medium">
          <span class="text-destructive mr-1">*</span>
          附件
        </div>
        <UploadDragger
          v-model:file-list="pdfFileList"
          :before-upload="beforePdfUpload"
          :max-count="1"
          accept=".pdf,application/pdf"
          @remove="onPdfRemove"
        >
          <p class="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p class="ant-upload-text">点击上传或拖拽PDF文件到此处</p>
          <p class="ant-upload-hint">
            仅支持PDF格式文件，建议文件大小不超过50MB
          </p>
        </UploadDragger>
      </div>
    </div>

    <template #footer>
      <div class="flex w-full justify-end gap-2">
        <Button @click="handleClose">取消</Button>
        <Button
          :loading="submittingAction === 'draft'"
          @click="handleSaveDraft"
        >
          保存草稿
        </Button>
        <Button
          type="primary"
          :loading="submittingAction === 'publish'"
          @click="handlePublish"
        >
          发布
        </Button>
      </div>
    </template>
  </Shell>
</template>