file-parse/src/components/Home/index.vue

<template>
  <div class="body">
    <div class="content">
      <!-- 头部内容 -->
      <div class="header">
        <div class="img"></div>
      </div>
      <!-- 分割盒子 -->
      <div class="line"></div>
      <!-- 文件解析内容区域 -->
      <div class="box">
        <div class="box_header">文件解析</div>
        <div class="box_info">智能解析钉钉考勤表的工具</div>
        <div class="box_info2">快速、在线、无限制</div>
        <div class="form">
          <!-- 上传文件区域 -->
          <!-- 默认展示页面区域 -->
          <el-upload
            class="upload-demo"
            v-if="showPage == 1"
            :drag="hasDrag"
            action="none"
            :auto-upload="false"
            :limit="1"
            accept=".xls,.xlsx"
            :on-change="handleUpload"
            :on-exceed="handleExceed"
          >
            <div class="choose">选择文件</div>
            <div class="message">或拖放文件到这</div>
            <div class="tips">tips:只能上传xls/xlsx文件</div>
          </el-upload>

          <!-- 上传时展示的页面区域 -->
          <div class="upload-demo" v-if="showPage == 2">
            <div class="choose2">{{ info }}</div>
            <div class="message2">
              <el-progress
                type="line"
                text-inside
                :stroke-width="26"
                :percentage="percentage"
              ></el-progress>
            </div>
            <div class="form_name">
              <span>{{ form_name }}</span>
              <i class="el-icon-close" @click="handleRemove"></i>
            </div>
          </div>

          <!-- 解析时展示的页面区域 -->
          <div class="upload-demo" v-if="showPage == 3">
            <div class="choose2">您的任务正在处理,请稍等</div>
            <div class="message2">
              <el-progress
                type="line"
                text-inside
                :stroke-width="26"
                :percentage="parsePercentage"
              ></el-progress>
            </div>
            <div class="form_name">{{ form_name }}</div>
          </div>

          <!-- 解析完成时展示的区域 -->
          <div class="upload-demo" v-if="showPage == 4">
            <div class="choose2">您的任务处理完成,用时:{{ time_s }}秒</div>
            <div class="form_name">{{ form_name }}</div>
            <div class="handle">
              <el-button type="primary" icon="el-icon-download">下载</el-button>
              <el-button
                type="success"
                icon="el-icon-view"
                @click="handlePreview"
                >预览</el-button
              >
              <el-button type="danger" @click="handleRestart"
                >重新开始</el-button
              >
            </div>
          </div>

          <!-- 开始按钮 -->
          <div class="start" @click="handleStart">开始</div>
        </div>
        <!-- 设置按钮区域 -->
        <div class="button" @click="handleSet"></div>
      </div>

      <!-- 弹窗区域 -->
      <el-drawer
        :visible.sync="drawer"
        :with-header="false"
        :wrapperClosable="false"
        size="20%"
      >
        <div class="drawer_title">设置</div>
        <div class="drawer_body">
          <div class="drawer_item">
            墨轩湖每日打卡次数为<input v-model="clockIn_mo" type="text" />次
          </div>
          <div class="drawer_item">
            黄家湖每日打卡次数为<input v-model="clockIn_huang" type="text" />次
          </div>
        </div>
        <div class="drawer_foot">
          <el-button class="foot_button" @click="handleClose">取消</el-button>
          <el-button class="foot_button" type="primary">保存</el-button>
        </div>
      </el-drawer>

      <!-- 预览表格弹窗 -->
      <el-dialog title="预览" :visible.sync="dialogVisible" fullscreen center>
        <Form />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Form from "../Form";
export default {
  name: "Home",
  components: { Form },
  data() {
    return {
      // 控制页面的切换
      showPage: 1,
      // 控制弹窗显示隐藏
      drawer: false,
      // 是否支持拖拽文件上传
      hasDrag: true,
      // 上传时显示的文字
      info: "上传中，请稍等",
      // 上传文件进度条数据
      percentage: 0,
      // 解析文件进度条数据
      parsePercentage: 0,
      // 定时器
      timer: null,
      // 文件名称
      form_name: "考勤表",
      // 墨轩湖打卡次数
      clockIn_mo: 4,
      // 黄家湖打卡次数
      clockIn_huang: 3,
      time_s: 1,
      // 预览表格弹窗
      dialogVisible: false,
    };
  },
  methods: {
    // 点击设置按钮回调
    handleSet() {
      this.drawer = true;
    },
    // 点击开始按钮回调
    handleStart() {
      if (this.showPage == 2 && this.percentage == 100) {
        this.showPage = 3;
        this.timer = setInterval(() => {
          this.parsePercentage += 20;
          this.time_s += 1;
          if (this.parsePercentage >= 100) {
            this.parsePercentage = 100;
            clearInterval(this.timer);
            this.showPage = 4;
          }
        }, 1000);
      } else if (this.showPage == 3) {
        this.$message.error("解析中，请勿重复点击");
      } else {
        this.$message.error("请先上传文件");
      }
    },
    // 文件上传回调
    async handleUpload(file) {
      if (file) {
        this.form_name = file.name;
        this.hasDrag = false;
        this.showPage = 2;
        let formData = new FormData();
        formData.append("file", file.raw);

        let config = {
          onUploadProgress: (progressEvent) => {
            // 计算出当前进度
            this.percentage =
              (progressEvent.loaded / progressEvent.total).toFixed(2) * 100;
          },
          headers: {
            "Content-Type": "multipart/form-data",
            "admin_token":
              "eyJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOjMsImlhdCI6MTY2Mzc0MjY3OCwiZXhwIjoxNjY0OTUyMjc4fQ.tRT4VbTcITCIEp1LfZgXuQpXG9gbK0tq1ljvUI7nW-4",
          },
        };

        let res = await this.$axios.post(
          "/api/tuitionpayment/payableinfo/importByExcel",
          formData,
          config
        );
        // console.log(res);
        if (res.data.success) {
          this.info = "上传完成，请点击开始按钮开始解析";
        } else {
          this.$message.error(res.data.message);
          this.percentage = 0;
          this.info = res.data.message;
        }
      } else {
        this.$message.error("请先导入文件");
        return false;
      }
    },
    // 删除列表文件时的回调
    handleRemove() {
      this.hasDrag = true;
      this.showPage = 1;
      this.info = "上传中，请稍等";
      this.percentage = 0;
    },
    // 预览按钮回调
    handlePreview() {
      this.dialogVisible = true;
    },
    // 重新开始按钮回调
    handleRestart() {
      this.hasDrag = true;
      this.showPage = 1;
      this.info = "上传中，请稍等";
      this.percentage = 0;
      this.parsePercentage = 0;
    },
    // 文件超出个数限制时的钩子
    handleExceed() {
      this.$message.error("只能同时上传一个文件");
    },
    // 关闭弹窗回调
    handleClose() {
      this.drawer = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: #eee;
  .content {
    width: 1540px;
    height: 870px;
    background-color: #fff;
    .header {
      display: flex;
      align-items: center;
      height: 125px;
      .img {
        margin-left: 115px;
        width: 280px;
        height: 80px;
        background: url(@/assets/logo.jpg) no-repeat center;
        background-size: 80% 80%;
      }
    }
    .line {
      height: 5px;
      border: 1px solid #949494;
    }
    .box {
      position: relative;
      height: 740px;
      .box_header {
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 28px;
        font-weight: bold;
      }
      .box_info {
        height: 30px;
        text-align: center;
      }
      .box_info2 {
        height: 60px;
        line-height: 60px;
        text-align: center;
      }
      .form {
        height: 550px;
        .upload-demo {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 auto;
          width: 1214px;
          height: 358px;
          border: 2px dashed #0040ff;
          .choose {
            margin: 0 auto;
            margin-top: 80px;
            width: 110px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border-radius: 5px;
            color: #fff;
            background-color: #0040ff;
          }
          .choose2 {
            margin: 0 auto;
            margin-top: 80px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            color: #000;
          }
          .message {
            margin: 0 auto;
            margin-top: 45px;
            width: 200px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            color: #000;
          }
          .message2 {
            margin: 0 auto;
            margin-top: 45px;
            width: 330px;
          }
          .tips {
            margin-top: 10px;
            color: #606266;
          }
          .form_name {
            margin-top: 45px;
            font-size: 10px;
            color: #606266;
            span {
              margin-right: 5px;
            }
            i {
              cursor: pointer;
            }
          }
          .handle {
            display: flex;
            justify-content: space-evenly;
            margin-top: 45px;
            width: 400px;
            height: 45px;
            line-height: 45px;
          }
        }
        .start {
          margin-top: 15px;
          margin-left: 1270px;
          width: 110px;
          height: 45px;
          line-height: 45px;
          text-align: center;
          border-radius: 15px;
          color: #fff;
          font-weight: bold;
          background-color: #ff6900;
          cursor: pointer;
        }
      }
      .button {
        position: absolute;
        top: 60px;
        right: 0;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        background: #1890ff url(@/assets/set.png) no-repeat center;
        background-size: 60% 60%;
        cursor: pointer;
      }
    }
    .drawer_title {
      flex: 1;
      margin-left: 10px;
      font-size: 20px;
      font-weight: bold;
      line-height: 200%;
    }
    .drawer_body {
      flex: 15;
      .drawer_item {
        margin: 10px 0 10px 10px;
        input {
          margin: 0 5px;
          width: 20px;
          text-align: center;
        }
      }
    }
    .drawer_foot {
      flex: 2;
      text-align: center;
      border-top: 1px solid #000;
      .foot_button {
        margin-top: 25px;
      }
    }
  }
}

// 调整文件拖拽区域的大小
::v-deep .el-upload-dragger {
  width: 1214px;
  height: 358px;
  border: none;
}

::v-deep .el-drawer__body {
  display: flex;
  flex-direction: column;
}
</style>