zxl
2025-03-02 16f122cfcec09e65e4790ecee46bae1f1b7b8fff
src/views/projectEngineering/projectLibrary/component/FileDialog.vue
@@ -17,13 +17,13 @@
      <template slot="default">
        <div v-if="!isImportOrExport" class="dialog-content">
          <el-upload
            ref="uploadRef"
            ref="upload"
            class="upload-demo"
            :action="uploadUrl"
            :action="upload.url"
            :limit="1"
            :accept="accept"
            :headers="uploadHeaders"
            :disabled="uploadIsUploading"
            :headers="upload.headers"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
@@ -37,9 +37,9 @@
        </div>
        <div v-else-if="isImportOrExport" class="dialog-content">
          <el-button class="export-button" @click="handleDownloadTargetList">导出目标列表内容</el-button>
          <el-button class="export-button">导出所有列表内容</el-button>
          <el-button class="export-button">导出目标项目详情</el-button>
          <el-button class="export-button">导出所有项目详情</el-button>
          <el-button class="export-button" @click="handleDownloadAllList">导出所有列表内容</el-button>
          <el-button class="export-button" @click="handleDownloadDetailList">导出目标项目详情</el-button>
          <el-button class="export-button" @click="handleDownloadAllList">导出所有项目详情</el-button>
        </div>
      </template>
      <template slot="footer">
@@ -54,7 +54,7 @@
</template>
<script>
import { globalHeaders } from '@/utils/request';
import {getToken} from "@/utils/auth";
export default {
@@ -73,16 +73,31 @@
      default: function () {
        return [];
      }
    }
    },
    dataIdList: {
      type: Array,
      default: function () {
        return [];
      }
    },
  },
  data() {
    return {
      uploadRef: null,
      queryParams: {},
      targetColumn: [],
      accept: `.zip`,
      uploadUrl: '/project/import',
      uploadHeaders: {},
      uploadIsUploading: false
      upload:{
        // 是否显示弹出层(用户导入)
        open: false,
        // 弹出层标题(用户导入)
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/project/info/import'
      },
    };
  },
  methods: {
@@ -90,88 +105,47 @@
      console.log("子组件submit")
    },
    handleFileUploadProgress() {
      this.uploadIsUploading = true;
      this.upload.uploadIsUploading = true;
    },
    handleFileSuccess(response, file) {
      this.uploadIsUploading = false;
      if (this.uploadRef) {
        this.uploadRef.handleRemove(file);
      }
      if (response.code === 200) {
        this.$emit('fileDialogCancel');
        this.$message({
          message: response.msg,
          type: 'success'
        });
      } else {
        this.$message.error(response.msg);
      }
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
    },
    handleDownloadFile() {
      // fetch(`${process.env.VITE_APP_BASE_API}/project/info/export/template`, {
      //   method: 'GET',
      //   headers: self.upload.headers
      // })
      //   .then(response => response.blob())
      //   .then(blob => {
      //     const url = window.URL.createObjectURL(blob);
      //     const a = document.createElement('a');
      //     a.style.display = 'none';
      //     a.href = url;
      //     a.download = `项目文件模板_${new Date().getTime()}.zip`;
      //     document.body.appendChild(a);
      //     a.click();
      //     window.URL.revokeObjectURL(url);
      //   })
      //   .catch(error => {
      //     console.error('文件下载失败:', error);
      //   });
      const url = process.env.VUE_APP_BASE_API + '/project/info/export/template';
      axios.post(url, [], { // 发送一个空数组而不是空对象
        responseType: 'blob', // 告诉axios期望服务器返回的是blob类型
        headers: {
          'Content-Type': 'application/json',
          Authorization: "Bearer " + getToken()
        }
      })
        .then(response => {
          // 处理文件下载
          const blob = new Blob([response.data], { type: 'application/zip' }); // 指定MIME类型为zip
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.style.display = 'none';
          a.href = url;
          a.download = `项目文件模板_${new Date().getTime()}.zip`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
        })
        .catch(error => {
          console.error('There was an error!', error);
        });
      this.download('/project/info/export/template', {}, `项目文件模板_${new Date().getTime()}.zip`)
    },
    submitFileForm() {
      if (this.uploadRef) {
        this.uploadRef.submit();
      }
        this.$refs.upload.submit();
    },
    closeDialog() {
      this.$emit('fileDialogCancel');
    },
    handleDownloadTargetList() {
      console.log('导出目标列表内容', this.currentColumns);
      this.targetColumn = this.currentColumns.filter(item => item.visible);
      this.queryParams.fieldList = this.currentColumns.filter(item => item.visible).map(item =>item.id);
      this.queryParams.requireFile = false;
      this.download('project/info/export', {
          ...this.queryParams
        }, `项目库${new Date().getTime()}.xlsx`)
    },
    handleDownloadAllList() {
      this.queryParams.fieldList = this.currentColumns;
      this.queryParams.requireFile = false;
      this.download('project/info/export', {
        ...this.queryParams
      }, `项目库${new Date().getTime()}.xlsx`)
    },
    handleDownloadDetailList() {
      this.queryParams.dataIdList = this.dataIdList
      this.queryParams.requireFile = true;
      this.download('project/info/export', {
        ...this.queryParams
      }, `项目库${new Date().getTime()}.zip`)
    }
  },
  mounted() {
    this.uploadRef = this.$refs.uploadRef;
  },
  created() {
    this.isFileDialogVisible = this.fileDialogVisible;
  }
};
</script>