|
|
@@ -2,11 +2,461 @@
|
|
|
* @Description: 我的技能培训 => 技能培训详情 => 成绩和证书
|
|
|
* @Author: 空白格
|
|
|
* @Date: 2022-08-26 16:50:09
|
|
|
- * @LastEditors: 空白格
|
|
|
- * @LastEditTime: 2022-08-26 16:52:11
|
|
|
+ * @LastEditors: gcz
|
|
|
+ * @LastEditTime: 2022-08-29 16:24:54
|
|
|
* @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails\AchievementCertificate\AchievementCertificateIndex.vue
|
|
|
* @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
-->
|
|
|
<template>
|
|
|
- <div>成绩和证书</div>
|
|
|
+ <div class='certificate'>
|
|
|
+ <BannerBreadcrumb title="成绩与证书" :breadcrumb="true" :isRouter="true"/>
|
|
|
+ <section class="wrap-r u-flex u-col-top certificate-wrap">
|
|
|
+ <section class="certificate-list">
|
|
|
+ <div class="title">成绩与证书</div>
|
|
|
+ <div class="list u-flex u-flex-wrap u-row-between" v-if="total>=1">
|
|
|
+ <div class="list-item" :class="{even:(index+1)%2 == 0}" v-for="(item,index) in dataList" :key="item.id">
|
|
|
+ <div class="up">
|
|
|
+ <div class="examName">{{item.examName}}</div>
|
|
|
+ <div class="score">{{item.score}}</div>
|
|
|
+ <div class="fullScore">(满分{{item.fullScore}})</div>
|
|
|
+ <div class="certificateName" v-if="item.certificateName">
|
|
|
+ 获得<br />
|
|
|
+ {{item.certificateName}}
|
|
|
+ ({{getCertificateGradeName(item.grade)}})</div>
|
|
|
+ <el-image
|
|
|
+ v-if="item.imgUrl.length>0"
|
|
|
+ class="images" :src="item.imgUrl.split(',')[0]"
|
|
|
+ :preview-src-list="item.imgUrl.split(',')">
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ <div class="down u-flex">
|
|
|
+ <div class="passDate u-flex-1">{{item.passDate}}</div>
|
|
|
+ <div class="btns u-flex-1"><span class="del" @click="delCertificate(item.id)">删除</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-empty v-else description="暂无数据"></el-empty>
|
|
|
+ <!-- <div class="pagination" v-if="total>queryParams.pageSize">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="currentChange"
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ </section>
|
|
|
+ <section class="certificate-form">
|
|
|
+ <div class="title">+ 录入</div>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-form-item label="考试名称：" prop="examName">
|
|
|
+ <el-input v-model="form.examName "></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证书名称：" prop="certificateName">
|
|
|
+ <el-input v-model="form.certificateName "></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="成绩" prop="score">
|
|
|
+ <el-input v-model="form.score "></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="满分" prop="fullScore">
|
|
|
+ <el-input v-model="form.fullScore "></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="证书等级" prop="grade">
|
|
|
+ <el-select
|
|
|
+ v-model="form.grade"
|
|
|
+ placeholder="请选择证书等级"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in gradeList"
|
|
|
+ :key="item.index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="通过日期：" prop="passDate">
|
|
|
+ <div style="display: inline-block">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.passDate"
|
|
|
+ type="date"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="请选择通过日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传照片" prop="imgUrl">
|
|
|
+ <div class="inner-wrap">
|
|
|
+ <el-upload
|
|
|
+ class="uploader logo-uploader"
|
|
|
+ :action="upAction"
|
|
|
+ accept="image/*"
|
|
|
+ multiple
|
|
|
+ :show-file-list="true"
|
|
|
+ :on-success="fileUploadSuccess"
|
|
|
+ :on-remove="fileRemove"
|
|
|
+ :limit="2"
|
|
|
+ list-type="picture"
|
|
|
+ :file-list="fileList"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="logoTempImg"
|
|
|
+ :src="logoTempImg"
|
|
|
+ class="uploader-img"
|
|
|
+ />
|
|
|
+ <i v-else class="el-icon-plus uploader-icon"></i>
|
|
|
+ <div class="text">上传照片</div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="btn" @click="submitForm">提交</div>
|
|
|
+ </el-form>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
|
|
|
+import { getCertificateList,deleteCertificate,addCertificate,getCertificate } from "@/api/Certificate";
|
|
|
+import { getDictData } from "@/api/Dict";
|
|
|
+ export default {
|
|
|
+ name: '',
|
|
|
+ components: {BannerBreadcrumb},
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ upAction:process.env.VUE_APP_FILE_UPLOAD_URL,
|
|
|
+ skillTrainId:'',
|
|
|
+ fileList:[],
|
|
|
+ logoTempImg:'',
|
|
|
+ gradeList:[],
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ imgUrlArr:[],
|
|
|
+ form:{
|
|
|
+ skillTrainId:'',
|
|
|
+ examName:'',
|
|
|
+ score:'',
|
|
|
+ fullScore:'',
|
|
|
+ passDate:'',
|
|
|
+ certificateName:'',
|
|
|
+ imgUrl:'',
|
|
|
+ },
|
|
|
+ rules:{
|
|
|
+ examName: [
|
|
|
+ { required: true, message: "请输入考试名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ certificateName: [
|
|
|
+ { required: true, message: "请输入证书名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ score: [
|
|
|
+ { required: true, message: "请输入成绩", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ fullScore: [
|
|
|
+ { required: true, message: "请输入满分", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ passDate: [
|
|
|
+ { required: true, message: "请选择通过日期", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ grade: [
|
|
|
+ { required: true, message: "请选择证书等级", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ imgUrl: [
|
|
|
+ { required: true, message: "请上传证书图片", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ total:0,
|
|
|
+ loading:false,
|
|
|
+ dataList:[],
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ this.form.skillTrainId = this.$route.query.id;
|
|
|
+ this.getDataList();
|
|
|
+ this.getCertificateGrade();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取证书等级
|
|
|
+ */
|
|
|
+ getCertificateGrade() {
|
|
|
+ getDictData({ key:'certificate_grade' }).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ this.gradeList = res.data.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ value: item.text
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取证书等级名称
|
|
|
+ * @param {Object} value
|
|
|
+ */
|
|
|
+ getCertificateGradeName(value) {
|
|
|
+ let name;
|
|
|
+ this.gradeList.forEach(item => {
|
|
|
+ if (item.value == value) {
|
|
|
+ name = item.label
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return name;
|
|
|
+ },
|
|
|
+ // fileUploadSuccess(res, file) {
|
|
|
+ // // console.log("file", file);
|
|
|
+ // this.form.imgUrl = '';
|
|
|
+ // this.imgUrlArr = [];
|
|
|
+ // this.imgUrlArr.push(res.data.url,);
|
|
|
+ // this.form.imgUrl = this.imgUrlArr.toString();
|
|
|
+ // },
|
|
|
+ fileUploadSuccess(response, file, fileList) {
|
|
|
+ let that = this;
|
|
|
+ this.form.imgUrl = '';
|
|
|
+ this.imgUrlArr = [];
|
|
|
+ for (let index = 0; index < fileList.length; index++) {
|
|
|
+ const element = fileList[index].response.data;
|
|
|
+ that.imgUrlArr.push(element.url);
|
|
|
+ }
|
|
|
+ this.form.imgUrl = this.imgUrlArr.toString();
|
|
|
+ },
|
|
|
+ fileRemove(file, fileList) {
|
|
|
+ let that = this;
|
|
|
+ this.form.imgUrl = '';
|
|
|
+ this.imgUrlArr = [];
|
|
|
+ for (let index = 0; index < fileList.length; index++) {
|
|
|
+ const element = fileList[index].response.data;
|
|
|
+ that.imgUrlArr.push(element.url);
|
|
|
+ }
|
|
|
+ this.form.imgUrl = this.imgUrlArr.toString();
|
|
|
+ },
|
|
|
+ getDataList() {
|
|
|
+ this.loading = true;
|
|
|
+ getCertificateList(Object.assign(this.queryParams,{skillTrainId:this.form.skillTrainId})).then((res) => {
|
|
|
+ this.dataList = res.data;
|
|
|
+ this.total = res.data.length;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 分页切换
|
|
|
+ * @date 2022-08-12
|
|
|
+ * @param {any} page
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ // currentChange(page) {
|
|
|
+ // this.queryParams.pageNum = page;
|
|
|
+ // this.getDataList();
|
|
|
+ // },
|
|
|
+ resetFields(){
|
|
|
+ this.$refs['form'].resetFields();
|
|
|
+ this.fileList=[];
|
|
|
+ this.form.imgUrl = '';
|
|
|
+ this.imgUrlArr = [];
|
|
|
+ },
|
|
|
+ submitForm() {
|
|
|
+ this.$refs['form'].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ addCertificate(this.form).then(res=>{
|
|
|
+ this.$message.success(res.msg);
|
|
|
+ this.resetFields();
|
|
|
+ this.getDataList();
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('addCertificate err',err);
|
|
|
+ this.$message.error(err.msg)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ delCertificate(id){
|
|
|
+ this.$confirm("您确认删除该证书吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ }).then(()=>{
|
|
|
+ deleteCertificate({skillTrainId:id}).then(res=>{
|
|
|
+ console.log('res',res);
|
|
|
+ this.$message.success(res.msg);
|
|
|
+ this.getDataList();
|
|
|
+ }).catch(err=>{
|
|
|
+ console.log('deleteCertificate err',err);
|
|
|
+ this.$message.error(err.msg)
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='scss' scoped>
|
|
|
+.certificate{
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.wrap-r{
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ width:70%;
|
|
|
+ margin: 23px auto;
|
|
|
+}
|
|
|
+.title{
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1A1A1A;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+.certificate-wrap{
|
|
|
+ padding: 0;
|
|
|
+ width: 1200px;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ .certificate-list{
|
|
|
+ background-color: #fff;
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .list{
|
|
|
+ &-item{
|
|
|
+ width: 240px;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #FE5862;
|
|
|
+ &.even{
|
|
|
+ background: #FE9C37;
|
|
|
+ }
|
|
|
+ .up{
|
|
|
+ position: relative;
|
|
|
+ padding: 30px 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 314px;
|
|
|
+ background: url(@/assets/images/certificate-bg.png) no-repeat;
|
|
|
+ background-size: 200px 246px;
|
|
|
+ background-position: 52px 100px;
|
|
|
+
|
|
|
+ .images{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .examName{
|
|
|
+ font-size: 20px;
|
|
|
+ height: 80px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .score{
|
|
|
+ font-size: 60px;
|
|
|
+ line-height: 1;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .fullScore{
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(255,255,255,.4);
|
|
|
+ margin-bottom: 45px;
|
|
|
+ }
|
|
|
+ .certificateName{
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .down{
|
|
|
+ height: 44px;
|
|
|
+ background: rgba(255,255,255,.4);
|
|
|
+ .btns{
|
|
|
+ .del{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 15px;
|
|
|
+ border-radius: 24px;
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(255,255,255,0.70);
|
|
|
+ color: #FE5862;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .certificate-form{
|
|
|
+ background-color: #fff;
|
|
|
+ width: 380px;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-form{
|
|
|
+ // .el-form-item{
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ // }
|
|
|
+ .btn{
|
|
|
+ background: #709078;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ letter-spacing: 1.2px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.logo-uploader :deep(.el-upload){
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ // float: left;
|
|
|
+ & + .uploader {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .el-upload:hover {
|
|
|
+ border-color: #409eff;
|
|
|
+ }
|
|
|
+ .uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ line-height: 100px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .uploader-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+}
|
|
|
+// .pagination {
|
|
|
+// text-align: center;
|
|
|
+// margin-top: 20px;
|
|
|
+// :deep(.el-pager .active) {
|
|
|
+// background-color: #ff3939;
|
|
|
+// }
|
|
|
+// :deep(.el-pagination.is-background
|
|
|
+// .el-pager
|
|
|
+// li:not(.disabled).active) {
|
|
|
+// background-color: #ff3939;
|
|
|
+// }
|
|
|
+// }
|
|
|
+</style>
|
