Merge branch 'master' of http://42.193.1.25:9521/r/project_management-vue

zhanghua

2024-11-23 145dbf06c42324c2eeff303ccf1b0414f33f6593

 src/views/projectEngineering/component/FileDialog.vue

@@ -1,3 +1,4 @@

<template>
  <div>
    <el-dialog
@@ -8,7 +9,7 @@
      close-on-click-modal
      @close="closeDialog"
    >
      <template slot="header">
      <template slot="title">
        <span style="padding-bottom: 18px">
          {{ isImportOrExport ? '请按照需求导出目标内容' : '请按照模板样式上传项目文件' }}
        </span>
@@ -18,17 +19,17 @@
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :action="upload.url"
            :action="uploadUrl"
            :limit="1"
            :accept="accept"
            :headers="upload.headers"
            :disabled="upload.isUploading"
            :headers=" uploadHeaders"
            :disabled="uploadIsUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">请上传<em>Zip</em>文件，大小在<em>100M</em>以内</div>
          </el-upload>
          <span>仅允许导入zip格式文件。</span>
@@ -53,15 +54,10 @@
</template>

<script>
// import UploadFilled from '@element/icons-vue/es/icons/UploadFilled.vue';
import { globalHeaders } from '@/utils/request';
import { FileTypeEnum } from '@/enums/fileType';

export default {
  name: 'FileDialog',
  // components: {
  //   UploadFilled
  // },
  props: {
    isImportOrExport: {
      type: Boolean,
@@ -82,49 +78,18 @@
    return {
      uploadRef: null,
      targetColumn: [],
      accept: `${FileTypeEnum.ZIP}`,
      upload: {
        open: false,
        title: '',
        isUploading: false,
        updateSupport: 0,
        headers: globalHeaders(),
        url: process.env.VITE_APP_BASE_API + '/project/import'
      }
      accept: `.zip`,
      uploadUrl: '/project/import',
      uploadHeaders: globalHeaders(),
      uploadIsUploading: false
    };
  },
  computed: {
    // In Vue 2, computed properties don't use setters and getters as objects.
    // Instead, you define them as functions for reading and use methods for writing.
    // However, in this case, we can use a watcher to update the prop.
    fileDialogVisible: {
      get() {
        return this.isFileDialogVisible;
      },
      set(value) {
        this.$emit('update:fileDialogVisible', value);
      }
    }
    // Note: In Vue 2, you cannot directly define a computed property with a setter for a prop.
    // Instead, you should use a watcher or a method to handle changes.
    // Since `fileDialogVisible` is a prop, we'll use a watcher to sync it with the internal state.
    // However, for simplicity, we'll rename `fileDialogVisible` to `isFileDialogVisible` in data and use a watcher.
  },
  watch: {
    fileDialogVisible(newVal) {
      this.isFileDialogVisible = newVal;
    },
    isFileDialogVisible(newVal) {
      this.$emit('update:fileDialogVisible', newVal);
    }
  },
  methods: {
    handleFileUploadProgress() {
      this.upload.isUploading = true;
      this.uploadIsUploading = true;
    },
    handleFileSuccess(response, file) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.uploadIsUploading = false;
      if (this.uploadRef) {
        this.uploadRef.handleRemove(file);
      }
@@ -140,24 +105,24 @@
    },
    handleDownloadFile() {
      const self = this;
      fetch(`${process.env.VITE_APP_BASE_API}/project/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);
        });
      // fetch(`${process.env.VITE_APP_BASE_API}/project/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);
      //   });
    },
    submitFileForm() {
      if (this.uploadRef) {
@@ -172,8 +137,11 @@
      this.targetColumn = this.currentColumns.filter(item => item.visible);
    }
  },
  mounted() {
    this.uploadRef = this.$refs.uploadRef;
  },
  created() {
    // Initialize the computed property as a data property in Vue 2

    this.isFileDialogVisible = this.fileDialogVisible;
  }
};
@@ -186,6 +154,7 @@
  align-items: center;
  flex-direction: column;
  height: 300px;

  .export-button {
    margin-left: 0;
    margin-bottom: 10px;
@@ -198,4 +167,10 @@
.upload-demo {
  width: 100%;
}
::v-deep  .el-upload{
  width: 100%;
}
::v-deep .el-upload .el-upload-dragger{
  width: 100%;
}
</style>