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>

      <el-dialog title="" :visible.sync="dialogVisible" width="300" center>
        <el-result icon="success" title="上传成功"> </el-result>
        <el-descriptions title="" :column="1">
          <el-descriptions-item label="导入答题卡数量">{{tipData.paperNum}}</el-descriptions-item>
          <el-descriptions-item label="导入随堂问报表数量">{{tipData.periodNum}}</el-descriptions-item>
          <el-descriptions-item label="导入即时测报表数量">{{tipData.examNum}}</el-descriptions-item>
        </el-descriptions>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>

    </div>

  </template>
  
  <script>

  import { formatDate } from "@/utils";

  export default {

    data() {
      return {

        downLoading: false,

        url: "/api_html/personal/importData",

        file: {},

        dialogVisible: false,
        tipData: {
          paperNum: 0,
          periodNum: 0,
          examNum: 0,
        },

      };
    },
    methods: {

      async downloadFile() {
        if (this.downLoading) return;
        this.downLoading = true;

        const data = await this.$request.pExportData();

        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.status == 0) {
          this.tipData = res.data
          this.dialogVisible = true

        } 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;

      height:330px;

      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 {

      padding:0 20px 20px;
      :deep(.el-upload--text){
        display: block;
      }

    }
    :deep(.el-upload) {

      margin: 0 auto;

    }
    .btn-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding-bottom: 10px;

      .fa {
        font-size: 80px;
        color: #aeaeae;
        padding-bottom: 10px;
        cursor: pointer;
      }
    }
    .btn-box {
      width: 100%;
    }
  }

  </style>