项目库bug修改、优化

xiangpei

2024-11-26 e7028b6de4b90dd77ee9ff78e7b4d320e3be9a71

 src/views/projectEngineering/component/FileDialog.vue

New file
@@ -0,0 +1,176 @@

<template>
  <div>
    <el-dialog
      :visible.sync="fileDialogVisible"
      ref="formDialogRef"
      width="35%"
      append-to-body
      close-on-click-modal
      @close="closeDialog"
    >
      <template slot="title">
        <span style="padding-bottom: 18px">
          {{ isImportOrExport ? '请按照需求导出目标内容' : '请按照模板样式上传项目文件' }}
        </span>
      </template>
      <template slot="default">
        <div v-if="!isImportOrExport" class="dialog-content">
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :action="uploadUrl"
            :limit="1"
            :accept="accept"
            :headers="uploadHeaders"
            :disabled="uploadIsUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">请上传<em>Zip</em>文件，大小在<em>100M</em>以内</div>
          </el-upload>
          <span>仅允许导入zip格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="handleDownloadFile">下载模板</el-link>
        </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>
        </div>
      </template>
      <template slot="footer">
        <div v-if="!isImportOrExport" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
        <div v-else-if="isImportOrExport"></div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { globalHeaders } from '@/utils/request';

export default {
  name: 'FileDialog',
  props: {
    isImportOrExport: {
      type: Boolean,
      default: false
    },
    fileDialogVisible: {
      type: Boolean,
      default: false
    },
    currentColumns: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      uploadRef: null,
      targetColumn: [],
      accept: `.zip`,
      uploadUrl: '/project/import',
      uploadHeaders: {},
      uploadIsUploading: false
    };
  },
  methods: {
    handleFileUploadProgress() {
      this.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);
      }
    },
    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);
      //   });
    },
    submitFileForm() {
      if (this.uploadRef) {
        this.uploadRef.submit();
      }
    },
    closeDialog() {
      this.$emit('fileDialogCancel');
    },
    handleDownloadTargetList() {
      console.log('导出目标列表内容', this.currentColumns);
      this.targetColumn = this.currentColumns.filter(item => item.visible);
    }
  },
  mounted() {
    this.uploadRef = this.$refs.uploadRef;
  },
  created() {

    this.isFileDialogVisible = this.fileDialogVisible;
  }
};
</script>

<style scoped lang="scss">
.dialog-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 300px;

  .export-button {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.upload-demo {
  width: 100%;
}
::v-deep  .el-upload{
  width: 100%;
}
::v-deep .el-upload .el-upload-dragger{
  width: 100%;
}
</style>