veterans_client_web/src/views/PersonalCenter/SkillTraining/SkillsTrainingDetails/AchievementCertificate/AchievementCertificateIndex.vue

<!--
 * @Description: 我的技能培训 => 技能培训详情 => 成绩和证书
 * @Author: 空白格
 * @Date: 2022-08-26 16:50:09
 * @LastEditors: gcz
 * @LastEditTime: 2022-08-29 16:20:04
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails\AchievementCertificate\AchievementCertificateIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <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>