IntelliClass_FE/components/ResourceUploader.vue

<script lang="ts" setup>
import { toast } from 'vue-sonner'
import { createResource } from '~/api/course'
import { uploadFile } from '~/api/file'
import type { FetchError, IResource } from '~/types'

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    accept?: string
  }>(),
  {
    accept: '.docx, .pptx, .pdf, .png, .jpg, .mp4, .mp3',
  },
)

const emit = defineEmits<{
  'update:modelValue': [isOpen: boolean]
  'on-create': [resource: IResource]
}>()

const isDialogOpen = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value),
})

const loginState = useLoginState()

// const isDialogOpen = ref(false);
const loading = ref(false)

const selectedFile = ref<File | null>(null)

const onUpload = async () => {
  if (!selectedFile.value) {
    toast.error('请先选择文件', { id: 'file-upload-error-no-file-selected' })
    return
  }
  loading.value = true

  toast.promise(
    new Promise((resolve, reject) => {
      uploadFile(selectedFile.value!, 'resource')
        .then((url) => {
          createResource({
            resourceName: selectedFile.value!.name,
            resourceSize: selectedFile.value!.size,
            resourceType: 'resource',
            resourceUrl: url,
            allowDownload: true,
            isRepo: false,
            ownerId: loginState.user.userId,
          })
            .then((result) => {
              if (result.code !== 200) {
                reject(new Error(result.msg || '文件上传失败'))
              }
              else {
                emit('on-create', {
                  id: result.resourceId,
                  resourceName: selectedFile.value!.name,
                  resourceSize: selectedFile.value!.size,
                  resourceType: 'resource',
                  resourceUrl: url,
                  allowDownload: true,
                  isRepo: false,
                  ownerId: loginState.user.userId,
                })
                resolve('文件上传成功')
              }
            })
            .catch((error) => {
              reject(error)
            })
        })
        .catch((error) => {
          reject(error)
        })
    }),
    {
      loading: '正在上传文件...',
      success: () => {
        isDialogOpen.value = false
        return '文件上传成功'
      },
      error: (error: FetchError) => {
        return error.message || '文件上传失败，请稍后重试'
      },
      finally: () => {
        loading.value = false
      },
    },
  )
}
</script>

<template>
  <Dialog v-model:open="isDialogOpen">
    <DialogTrigger as-child>
      <slot name="trigger" />
    </DialogTrigger>
    <DialogContent class="sm:max-w-[520px]">
      <DialogHeader>
        <DialogTitle>资源上传</DialogTitle>
        <DialogDescription>
          <p>上传资源文件并将其添加到课程中。</p>
          <p>
            支持的格式：<span class="font-medium">{{ accept }}</span>
          </p>
        </DialogDescription>
      </DialogHeader>
      <div class="flex flex-col gap-4">
        <FormField name="file">
          <FormItem>
            <FormLabel>选择文件</FormLabel>
            <FormControl>
              <Input
                type="file"
                :accept="accept"
                @change="(e: any) => {
                  const files = e.target.files;
                  if (files && files.length > 0) {
                    selectedFile = files[0];
                  }
                  else {
                    selectedFile = null;
                  }
                }"
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>
        <input
          type="hidden"
          name="courseId"
        />
        <div class="text-xs text-muted-foreground space-y-2">
          <p>
            根据国家《出版管理条例》《网络出版服务管理规定》及教育部《职业教育专业教学资源库建设工作手册》等相关规定，上传的资源必须符合以下要求：
          </p>
          <ul
            class="list-disc list-inside space-y-1 text-[11px] text-muted-foreground/80 text-justify"
          >
            <li>
              没有法律、法规禁止出版的内容，没有政治性、道德性问题和科学性错误，不泄露国家秘密。
            </li>
            <li>
              不含有侵犯他人著作权、肖像权、名誉权等权益的内容，资源具有原创性，引用需指明作者姓名、作品名称，使用他人作品应取得许可。
            </li>
            <li>
              采用法定计量单位，名词、术语、符号等符合国家统一规定，尚无统一规定的，可采用习惯用法并保持一致。
            </li>
            <li>
              地图具有严肃的政治性、严密的科学性和严格的法定性，使用的地图应根据《地图管理条例》的要求已送相关部门审核并标注审图号。
            </li>
            <li>不含有商业广告、商业性宣传内容。</li>
            <li>不含有色情、赌博、迷信、暴力等内容。</li>
          </ul>
        </div>
      </div>
      <DialogFooter>
        <Button
          :disabled="loading"
          @click="onUpload"
        >
          {{ loading ? "上传中..." : "上传" }}
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<style scoped></style>