caseEditor/src/view/vrmodel/addCaseFile.vue

<template>
  <el-form
    ref="form"
    :model="caseFile"
    label-width="90px"
    class="camera-from dispatch-file-from jm-file-upload"
  >
    <el-form-item label="分类：" class="mandatory">
      <el-radio-group v-model="caseFile.sourceType">
        <el-radio value="orig">原始数据</el-radio>
        <el-radio value="offline">离线包</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="操作：" class="mandatory uploadFile">
      <el-upload
        v-model:file-list="caseFile.file"
        class="upload-demo"
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        multiple
        :before-upload="upload"
        :http-request="uploadFiles" 
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        accept=".zip"
        :limit="1"
        :on-exceed="handleExceed"
      >
        <el-button type="primary">上传</el-button>
      </el-upload>
    </el-form-item>
    <div style="padding-left: 82px">
      <span v-if="caseFile.sourceType == 'orig'"
        >‌支持采集完成后，U 盘导出的场景原始数据上传计算。</span
      >
      <div style="width: 360px" v-else>
        <div>重要提醒：</div>
        <div
          >数据上传规则‌：只接收‌其他单位/部门私有化部署的系统‌（比如XX分局自建的平台）下载的数据，本平台已有的场景‌‌不能重复上传‌；</div
        >
        <div
          >‌版本号核对‌：请确保来源平台和本平台的版本号完全一致，如来源平台是
          v2.2.0，本平台也必须是 v2.2.0。</div
        >
      </div>
      </div>
  </el-form>
</template>

<script setup lang="ts">
import { uploadFiles, addByMediaLiBrary, SceneCheck, SceneOrig } from "@/store/case";
import viewImg from "@/components/viewImg/index.vue"
import {
  DrawFormatDesc,
  DrawFormats,
  FileDrawType,
  OtherFormatDesc,
  OtherFormats,
} from "@/constant/caseFile";
import { maxFileSize } from "@/constant/caseFile";
import { useUpload } from "@/hook/upload";
import { CaseFile, addCaseFile } from "@/store/caseFile";
import { ElMessage, UploadFile, ElMessageBox } from "element-plus";
import { computed, ref, watchEffect, onMounted } from "vue";
import { QuiskExpose } from "@/helper/mount";
import { updateSelectByTreeFileLists } from "@/store/case";

const props = defineProps<{
  caseId: number;
  fileType: number;
  filesTypeName: [string];
  fileInfo?: Object;
}>();
const mtkList = ref([]);
onMounted(async () => {
});

const caseFile = ref({
  sourceType: "orig",
  caseId: props.caseId,
  file:[],
  filesTypeId: props.fileType,
  filesTitle: "",
  dictId: '',
  uploadId: '',
  filesType: 1,
});
console.log('caseFile', props.fileInfo);
// const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
//   maxSize:  5 * 1024 * 1024 * 1024,
//   formats:  [".zip"],
// });

  const upload = async (file: File, fileLists) => {
    if(!file.name) return false;
    const fileType = file.name && file.name.substring(file.name.lastIndexOf(".")).toUpperCase();
    console.log('uploadts', file, fileType);
    if (fileType !== '.ZIP') {
      ElMessage.error(`请上传zip文件`);
      return false;
    } else if (file.size >  5 * 1024 * 1024 * 1024 ) {
      ElMessage.error(`请上传5GB以内的文件`);
      return false;
    } else {
      return true;
    }
  };

const formatDesc = computed(() => {
  return 'zip上传'
});

// 上传请求
const handleSuccess = (option) => {
  console.log('handleSuccess', option);
}
const handleExceed = (option) => {
  ElMessage.error("只能上传1个文件！");
}

const handleItem = (type, item) => {
  console.log("handleItem", type, item);
  if(type == 'delete'){
    mtkList.value = mtkList.value.filter(ele => ele.id != item.id)
  }
};
const Submit = async (filePath) => {
    const res = await SceneOrig({ filePath, sourceType: caseFile.value.sourceType });
    // loading.value = false;
    console.log('res', res, filePath);
    ElMessage.success('上传成功。');
    caseFile.value.file = [];
};
defineExpose<QuiskExpose>({
  async submit() {
    let filesTypeId = caseFile.value.filesTypeId && Array.isArray(caseFile.value.filesTypeId)?caseFile.value.filesTypeId.slice(-1):caseFile.value.filesTypeId
    let file = caseFile.value.file[0];
    let filePath = ''
    if (!file) {
      ElMessage.error("请上传文件");
      throw "请上传文件";
    }else{
      filePath = file?.response?.data
    }
    const {data} = await SceneCheck({ filePath, sourceType: caseFile.value.sourceType });
    let resCheck = data;
    console.log('caseFile', caseFile.value, resCheck);
    if (
     resCheck.code == 60042 && await ElMessageBox.confirm(`此场景原属于${resCheck.data}，继续上传将重新计算并覆盖原场景：\n归属权转移至当前账号；\n清除原所有者的权限设置；\n清空场景内由用户手动添加的空间模型。\n确定继续吗？`, '提示')
    ) {
       return Submit(filePath);
    } 
    if (
     resCheck.code == 60043 && await ElMessageBox.confirm(`此场景此前已上传过‌，继续上传将重新计算并覆盖原场景，场景内由用户手动添加的空间模型也会清空，确定继续吗？`, '提示')
    ) {
       return Submit(filePath);
    } 
    
    if (
     resCheck.code == 60051 && await ElMessageBox.confirm(resCheck.data, '提示')
    ) {
       return Submit(filePath);
    } 
        
    if (
     resCheck.code == 60051 && await ElMessageBox.confirm(resCheck.data, '提示')
    ) {
       return Submit(filePath);
    } 
    return Submit(filePath);
  },
});
</script>

<style scoped lang="scss">
.upload-demo {
  overflow: hidden;
}

.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }

  .name {
    margin-left: 10px;
  }
}
.jm-file-upload {
  // .mtk {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>