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

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

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

import { ref } from 'vue';

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

import { useEditShell } from '#/adapter/shell';
import { invokeMethod } from '#/adapter/vxe-table/proxy/invoke-method';
import { uploadFileMethod } from '#/api/common';
import { useWorkroomStore } from '#/stores';

import { treatmentPlanForm } from '../treatment-plan.data';

const workroomStore = useWorkroomStore();

const pdfFileList = ref<UploadFile[]>([]);
const pdfUrl = ref<string>();
const pdfUploading = ref(false);

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;
}

async function uploadImmediately(file: File) {
  const uploadFile: UploadFile = {
    uid: `${Date.now()}`,
    name: file.name,
    status: 'uploading',
    percent: 0,
  };
  pdfFileList.value = [uploadFile];
  pdfUploading.value = true;

  try {
    const url = await invokeMethod(uploadFileMethod(file), { force: true });
    if (!url) {
      throw new Error('upload empty url');
    }
    pdfUrl.value = url;
    pdfFileList.value = [
      {
        ...uploadFile,
        status: 'done',
        url,
      },
    ];
  } catch {
    pdfUrl.value = void 0;
    pdfFileList.value = [
      {
        ...uploadFile,
        status: 'error',
      },
    ];
    message.error(`${file.name} 上传失败，请重试`);
  } finally {
    pdfUploading.value = false;
  }
}

const { Form, Shell } = useEditShell<TreatmentPlanSubmitVO>(treatmentPlanForm, {
  handleLoad(model) {
    resetUploads();
    pdfUrl.value = model.pdfUrl;
    pdfFileList.value = createUploadFile(model.pdfUrl, '诊疗方案.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');
    }

    return {
      ...values,
      workroomId,
      pdfUrl: pdfUrl.value,
    };
  },
  onClosed: resetUploads,
});

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;
  }
  void uploadImmediately(file);
  return false;
};

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

<template>
  <Shell>
    <Form />

    <div class="pb-4">
      <div class="mb-2 text-sm">
        <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格式</p>
      </UploadDragger>
    </div>
  </Shell>
</template>