src/views/dataSync/index.vue

<template>
  <div>
    <back-box>
      <template slot="title">
        <span>数据同步</span>
      </template>
    </back-box>
    <div class="page-content">
      <div class="down-item">
        <p class="h-title">从U盘上传</p>
        <p class="txt">
          本功能帮助无法上网的授课端软件，将本地数据同步到云平台。
        </p>
        <el-upload
          class="upload-demo"
          ref="upload"
          :action="url"
          :multiple="false"
          :with-credentials="true"
          :limit="1"
          :on-change="change"
          :on-success="upSuccess"
          :on-error="upError"
        >
          <div class="btn-box">
            <i class="fa fa-cloud-upload"></i>
            <el-button type="primary" round>选择文件</el-button>
          </div>
        </el-upload>
      </div>
      <div class="down-item">
        <p class="h-title">数据导出至U盘</p>
        <p class="txt">
          本功能将云平台的数据导出到U盘。
        </p>
        <div class="btn-box btn-box2" v-loading="downLoading">
          <i class="fa fa-cloud-download" @click="downloadFile"></i>
          <el-button type="primary" round @click="downloadFile"
            >文件下载</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils";
export default {
  data() {
    return {
      downLoading: false,
      url: "/api_html/teaching/importData",
      file: {},
    };
  },
  methods: {
    async downloadFile() {
      if (this.downLoading) return;
      this.downLoading = true;
      const data = await this.$request.exportData();
      this.downLoading = false;
      console.log(data)
      if (data) {
        let blob = new Blob([data], {type: 'application/octet-stream'})
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        document.body.appendChild(link);
        link.download = this.$store.getters.info.name+formatDate(new Date,'yyyy_MM_dd_hh_mm_ss')+"文件.json";
        link.href = url;
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(url);
      } else {
        this.$message.error("下载失败，请重试");
      }
    },
    async submitUpload() {
      this.$refs.upload.submit();
      // const formData = new FormData()
      // formData.append('id',this.componentId)
      // formData.append('file',new File(this.file.raw))
      // let {status,info} = await uploadExcel(formData);
      // if(status===0){
      //   this.$message.success(info);
      //   this.$emit("upSuccess")
      // } else {
      //   this.$message.error(info);
      // }
    },
    upSuccess(res) {
      debugger
      if (res && res.status == 0 ) {
        this.$message.success("上传成功");
        this.$emit("upSuccess");
      } else {
        this.$message.error(res.info);
      }
    },
    upError(res) {
      debugger
      if (res && res.status == 0) {
        this.$message.error("上传失败");
      } else {
        this.$message.error(res.message);
      }
    },
    change(file) {
      this.file = file;
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  padding: 50px;
  display: flex;
  justify-content: center;
  .down-item {
    width: 400px;
    border-radius: 20px;
    margin: 20px;
    background: #f8f8f8;
    box-shadow: 2px 2px 5px #ccc;
    .h-title {
      font-size: 16px;
      color: #667ffd;
      padding: 16px 0 16px 12px;
    }
    .txt {
      height: 80px;
      padding: 0 20px;
      font-size: 16px;
      color: #7f7f7f;
      line-height: 24px;
      text-align: center;
    }
  }
  .upload-demo {
    display: flex;
    justify-content: center;
  }
  :deep(.el-upload) {
    margin: 0 auto;
  }
  .btn-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
    .fa {
      font-size: 80px;
      color: #aeaeae;
      padding-bottom: 10px;
      cursor: pointer;
    }
  }
  .btn-box {
    width: 100%;
  }
}
</style>