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 txt2">本功能将云平台的数据导出到U盘。</p>

          <div class="btn-box btn-box2" v-loading="downLoading">

            <p class="p1">
              <el-checkbox-group v-model="type">
                <el-checkbox :label="0">班级信息</el-checkbox>
                <el-checkbox :label="2">备题组卷数据</el-checkbox>
                <el-checkbox :label="2">报表数据</el-checkbox>
              </el-checkbox-group>
            </p>
            <p class="p1">
              <el-radio-group v-model="dateType">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">最近一个月</el-radio>
              </el-radio-group>
            </p>
            <el-button type="primary" round @click="downloadFile">文件下载</el-button>

          </div>
        </div>
      </div>

      <el-dialog :close-on-click-modal="false" 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 {

        role: "",

        downLoading: false,
        url: "/api_html/teaching/importData",
        file: {},
        dialogVisible: false,
        tipData: {
          paperNum: 0,
          periodNum: 0,
          examNum: 0,
        },

        type: [0, 1, 2],
        dateType: 0

      };
    },

    created() {
      this.role =
        this.$store.getters.info.showRole ||
        this.$store.getters.info.permissions[0].role;
      if (this.role == "ROLE_PERSONAL") {
        this.url = "/api_html/personal/importData"
      }
    },

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

  
        let query = {}
        if (this.type.length == 3 || this.type.length == 0) {
          query.type = []
        } else {
          query.type = this.type
        }
        if (this.dateType == 1) {
          let times = new Date().getTime() - 30 * 24 * 60 * 60 * 1000
          query.exportData = formatDate(times, "yyyy-MM-dd");
          query.exportData = query.exportData.replaceAll("-", "")
        }
        const exportData = this.role == "ROLE_PERSONAL" ? this.$request.pExportData : this.$request.exportData
        const data = await 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.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;
      }

  
      .txt2 {
        height: 60px;
      }
  
      .p1 {
        margin-bottom: 30px;
      }

    }

    .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>