baoman / Ezquiz_Platform

  <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) {
        if (res && res.code == 0 && res.success) {
          this.$message.success("上传成功");
          this.$emit("upSuccess");
        } else {
          this.$message.error(res.message);
        }
      },
      upError(res) {
        if (res && res.status == 0) {
          this.$message.success("上传成功");
          this.$emit("upSuccess");
        } 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>