|
|
@@ -0,0 +1,429 @@
|
|
|
+<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>
|
