Files
tougao_web/src/components/page/img.vue
徐哼唧L 5ed3073b6e 0
2022-12-09 16:18:12 +08:00

221 lines
7.7 KiB
Vue

<template>
<div>
<div class="container">
<el-form
ref="import"
:model="upform"
label-width="120px"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<el-form-item label="Course">
<el-select @change="selectChanged" v-model="upform.course" placeholder="Please select course">
<el-option v-for="item in courses" :key="item.dirname" :label="item.dirname" :value="item.dirname"></el-option>
</el-select>
<el-button type="text" @click="clear">清除课程下所有证书</el-button>
</el-form-item>
<el-form-item label="File">
<el-upload
:action="up_url"
name="importExcel"
:on-remove="handleRemove"
accept=".xlsx"
:before-upload="checkfile"
:limit="1"
:on-exceed="handleExceed"
:on-success="upSuccess"
:on-error="uperror"
>
<el-button size="small" type="text">upload excel</el-button>
<div slot="tip" class="el-upload__tip">Only excel files can be uploaded(.xlsx)</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onsubmit">制作证书</el-button>
<el-progress type="circle" :percentage="bfb" v-show="jdt"></el-progress>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getlinkurl">下载</el-button>
</el-form-item>
</el-form>
<el-divider></el-divider>
<el-table :data="tabledata" border empty-text="New messages (0)">
<el-table-column prop="username" label="学员名" align="center"></el-table-column>
<el-table-column prop="has" label="出证状态" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
new_num: 0,
has_num: 0,
bfb: 0,
jdt:false,
mediaUrl: this.Common.mediaUrl,
baseUrl: this.Common.baseUrl,
username: localStorage.getItem('U_name'),
upform: {
course: '',
url: ''
},
courses: [],
items: [],
tabledata: [],
sudata: [],
erdata: [],
dialogFormVisible: false
};
},
created() {
this.initCourse();
},
computed: {
up_url: function () {
return this.baseUrl + 'api/Img/up_import';
}
},
methods: {
onsubmit() {
if (this.upform.course == '' || this.upform.url == '') {
this.$message.error('please select course and upload a excel');
return false;
}
if (this.new_num == 0) {
this.$message.error('new data is null');
return false;
}
this.$api.post('api/Img/reviewerImport', this.upform).then((res) => {
this.getInfo();
this.jdt = true;
// this.$message.success('程序已启动,请等待一会后刷新此页面,待全部出证完成点击下载!!');
});
},
//下载文件
download() {
this.$api.post('api/Img/downLoad', this.upform).then((res) => {});
},
getInfo() {
// 轮询获取更新过程中的信息
if (this.timer) {
clearInterval(this.timer);
} else {
this.timer = setInterval(() => {
// 在这里发送请求获取数据
this.$api.post('api/Img/getAllNum', this.upform).then((res) => {
this.bfb = parseInt(((res - this.has_num) * 100) / this.new_num);
if (res - this.has_num == this.new_num) {
clearInterval(this.timer);
this.timer = null;
this.$router.go(0);
}
});
// this.updateInfo.push('升级的第' + num++ + '步');
// if (num === 3) {
// clearInterval(this.timer);
// this.timer = null;
// }
}, 1500);
}
},
//移除文件
handleRemove() {},
//审查文件
checkfile(file) {
// let isslx =
// file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
// file.type === 'application/vnd.ms-excel';
// if (!isslx) {
// this.$message.error('Only excel files can be uploaded(.xls,.xlsx)');
// }
// return isslx;
},
uperror(err) {
this.$message.error(err);
},
//初始化课程选项
initCourse() {
this.$api
.post('api/Img/getCourse')
.then((res) => {
this.courses = res;
this.upform.course = res[0]['dirname'];
this.gettables();
})
.catch((err) => {
console.log(err);
});
},
clear() {
this.$confirm('此操作将永久删除证书, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$api.post('api/Img/clear', this.upform).then((res) => {
this.$message({
type: 'success',
message: '删除成功!'
});
});
this.$router.go(0);
});
},
selectChanged(){
this.gettables();
},
getlinkurl() {
this.$api.post('api/Img/getZip', this.upform).then((res) => {
let url = this.baseUrl + res.data.url;
let a = document.createElement('a');
a.href = url;
a.click();
});
},
// changeCourse(course) {
// this.$api
// .post('api/Img/getImgs', { course: course })
// .then((res) => {
// this.tabledata = res;
// })
// .catch((err) => {
// console.log(err);
// });
// },
handleExceed() {
this.$message.error('limit one file');
},
//文件上传成功后的操作
upSuccess(res, file) {
if (res.code == 0) {
this.upform.url = 'zhengshu/import/' + res.upurl;
this.gettables();
} else {
this.$message.error('service error' + res.msg);
}
},
//获取table数据
gettables() {
this.$api.post('api/Img/getExcelData', this.upform).then((res) => {
this.tabledata = res.list;
this.new_num = res.count;
this.has_num = res.has;
});
}
}
};
</script>
<style>
.el-table .warning-row {
background: rgb(252, 158, 158);
}
.el-table .success-row {
background: #d7f1c8;
}
</style>