src/views/basic/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 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="1">备题组卷数据</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("-", "")
      }
      console.log({ ...query })
      const exportData = this.role == "ROLE_PERSONAL" ? this.$request.pExportData : this.$request.exportData
      const data = await exportData({ ...query });
      this.downLoading = false;
      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>