taais/src/components/ImportPicDataset/index.vue

<template>
  <el-dialog v-model="dialogVisible" :width="parameter.width" :top="parameter.top" :title="`${parameter.title}`" :destroy-on-close="true" draggable>
    <el-form class="drawer-multiColumn-form" label-width="100px">
      <el-form-item label="图片数据集压缩文件上传">
        <el-upload
          action="#"
          class="upload"
          :drag="true"
          :show-file-list="true"
          :http-request="uploadZip"
          :before-upload="beforeZipUpload"
          :on-exceed="handleExceed"
          :accept="parameter.ZipFileType!.join(',')"
        >
          <slot name="empty">
            <el-icon class="el-icon--upload">
              <upload-filled />
            </el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </slot>
          <template #tip>
            <slot name="tip">
              <div class="el-upload__tip text-center">请上传 .zip 标准格式文件，文件最大为 {{ parameter.fileSize }}M。</div>
            </slot>
          </template>
        </el-upload>
      </el-form-item>

      <!-- 新增的表单字段 -->
      <el-form-item label="批次号" prop="batchNum">
        <el-input v-model="formModel.batchNum" placeholder="请输入批次号" />
      </el-form-item>

      <el-form-item label="目标类型" prop="objectType">
        <el-input v-model="formModel.objectType" placeholder="请输入目标类型" />
      </el-form-item>

      <el-form-item label="目标子类型" prop="objectSubtype">
        <el-input v-model="formModel.objectSubtype" placeholder="请输入目标子类型" />
      </el-form-item>

      <el-form-item label="场景" prop="scene">
        <el-input v-model="formModel.scene" placeholder="请输入场景" />
      </el-form-item>

      <el-form-item label="数据源" prop="dataSource">
        <el-input v-model="formModel.dataSource" placeholder="请输入数据源" />
      </el-form-item>

      <el-form-item label="采集地点" prop="gatherSpot">
        <el-input v-model="formModel.gatherSpot" placeholder="请输入采集地点" />
      </el-form-item>

      <el-form-item label="采集时间" prop="gatherTime">
        <el-date-picker v-model="formModel.gatherTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择采集时间" />
      </el-form-item>

      <el-form-item label="数据类型" prop="dataType">
        <el-select v-model="formModel.dataType" placeholder="请选择数据类型">
          <el-option v-for="item in dataTypes" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
        </el-select>
      </el-form-item>

      <el-form-item label="是否已标注">
        <el-radio-group v-model="formModel.labeled">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确认</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ImportPicDataset">
import { ref } from 'vue'
import { ElNotification, UploadRequestOptions, UploadRawFile } from 'element-plus'

export interface ParameterProps {
  title: string
  fileSize?: number
  limit?: number
  top?: string
  width?: number
  multiple?: boolean
  fileType?: File.ExcelMimeType[]
  ZipFileType?: File.ZipMimeType[]
  tempApi?: (params: any) => Promise<any>
  importApi?: (params: any) => Promise<any>
  getTableList?: () => void
}

const formModel = ref({
  batchNum: '',
  name: '',
  objectType: '',
  objectSubtype: '',
  scene: '',
  dataSource: '',
  gatherSpot: '',
  gatherTime: '',
  dataType: '',
  labeled: false
})
const dataTypes = ref([
  { dictValue: '1', dictLabel: '训练' },
  { dictValue: '2', dictLabel: '测试' }
  // 添加更多数据类型
])
const dialogVisible = ref(false)
const parameter = ref<ParameterProps>({
  title: '',
  limit: 1,
  width: 500,
  top: '20vh',
  multiple: false,
  fileSize: 4096,
  fileType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
  ZipFileType: ['application/zip', 'application/x-zip-compressed', 'application/x-rar-compressed']
})

const acceptParams = (params: ParameterProps) => {
  parameter.value = { ...parameter.value, ...params }
  dialogVisible.value = true
  formModel.value = {
    batchNum: '',
    name: '',
    objectType: '',
    objectSubtype: '',
    scene: '',
    dataSource: '',
    gatherSpot: '',
    gatherTime: '',
    dataType: '',
    labeled: false
  }
}
const formData = new FormData()
const handleSubmit = async () => {
  const zipFile = formData.get('file')
  console.log(zipFile)
  if (!zipFile) {
    ElNotification({
      title: '温馨提示',
      message: '请上传一个压缩文件！',
      type: 'warning'
    })
    return
  }
  const formDataInfo = new FormData()
  formDataInfo.append('file', zipFile)
  for (const key in formModel.value) {
    if (Object.prototype.hasOwnProperty.call(formModel.value, key)) {
      formDataInfo.append(key, formModel.value[key])
    }
  }
  try {
    await parameter.value.importApi!(formDataInfo)
    ElNotification({
      title: '温馨提示',
      message: `文件上传成功`,
      type: 'success'
    })
    parameter.value.getTableList && parameter.value.getTableList()
    dialogVisible.value = false
  } catch (error) {
    // ElNotification({
    //   // title: '温馨提示',
    //   // message: `文件上传失败，请重新上传`,
    //   // type: 'error'
    // })
  }
}

const uploadZip = (param: UploadRequestOptions) => {
  formData.append('file', param.file)
}

const beforeZipUpload = (file: UploadRawFile) => {
  const isZip = parameter.value.ZipFileType!.includes(file.type as File.ZipMimeType)
  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!
  if (!isZip)
    ElNotification({
      title: '温馨提示',
      message: '上传文件只能是 zip 格式！',
      type: 'warning'
    })
  if (!fileSize)
    setTimeout(() => {
      ElNotification({
        title: '温馨提示',
        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
        type: 'warning'
      })
    }, 0)
  return isZip && fileSize
}

const handleExceed = () => {
  ElNotification({
    title: '温馨提示',
    message: '最多只能上传一个文件！',
    type: 'warning'
  })
}

defineExpose({
  acceptParams
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>