kaohe/ruoyi-ui/src/views/votepage.vue

<template>
  <div class="app-container">
    <div class="title">{{ vote.pingceName }}</div>
    <div class="title" style="font-size: 22px">{{ vote.voteTitle }}</div>
    <div class="time">时间：{{ vote.sTime }} - {{ vote.eTime }}</div>
    <div class="time" v-if="vote.khitemTypeid===1 && vote.umax">评优最大值为 {{ vote.umax }}</div>
    <div class="time" v-if="vote.khitemTypeid!==1 && vote.maxNum">评分最大值为 {{ vote.maxNum }}</div>
    <div class="des">{{ vote.vDescription }}</div>
    <el-row :gutter="10" class="tou_piao" v-if="vote.khitemTypeid===2||vote.khitemTypeid===3">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="item in voteList">
        <div class="tou_piao_item">
          <div>
            {{ item.bkhdxName }}
            <el-link type="primary" @click="goPage(item)" icon="el-icon-view" v-hasPermi="['system:dept:query','kaohe:employee:query']"></el-link>
          </div>
<!--          <div class="_desc">参与评分 {{ item.voteNum!==null?item.voteNum: ''}} 人 </div>
          <div class="_desc">均值：{{ item.avgScore!==null?item.avgScore: '' }} </div>-->
          <div class="mt10">
            <el-input-number v-model="item.score"></el-input-number>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="tou_piao" v-if="vote.khitemTypeid===1">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="item in voteList">
        <div class="tou_piao_item">
          <div>
            {{ item.bkhdxName }}
            <el-link type="primary" @click="goPage(item)" icon="el-icon-view" v-hasPermi="['system:dept:query','kaohe:employee:query']"></el-link>
          </div>
<!--          <div class="_desc">参与评分 {{ item.voteNum!==null?item.voteNum: ''}} 人 </div>
          <div class="_desc">均值：{{ item.avgScore!==null?item.avgScore: '' }} </div>-->
          <div class="mt10">
            <el-radio-group v-model="item.option" size="mini">
              <el-radio label="optionA">优秀</el-radio>
              <el-radio label="optionB">合格</el-radio>
              <el-radio label="optionC">基本合格</el-radio>
              <el-radio label="optionD">不合格</el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-col>
    </el-row>

    <div style="text-align: center; margin-top: 40px;">
      <el-button type="primary" icon="el-icon-s-promotion" @click="VoteSubmit" v-hasPermi="['kaohe:vote_emp:edit']">提交评分</el-button>
    </div>

    <!-- 详情对话框 -->
    <el-dialog :title="uploadFJ.title" :visible.sync="uploadFJ.open" width="800px" append-to-body class="my_dialog">

      <el-row :gutter="20" v-if="vote.bkhdxType==='0'">
        <el-col :span="24">
          <span>部门名称：</span><span>{{ detail.deptName }}</span>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-if="vote.bkhdxType==='1'">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <span>工号：</span><span>{{ detail.wordId }}</span>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <span>职工姓名：</span><span>{{ detail.empName }}</span>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <span>部门名称：</span><span>{{ detail.deptName }}</span>
        </el-col>
      </el-row>

      <el-row class="mt20" :gutter="20" v-for="item in uploadFJ.docDiscripList">
        <el-col :span="24">
          <span>附件主题：</span><span>{{ item.title }}</span>
        </el-col>
        <el-col class="mt5" :span="24">
          <span>附件简介：</span><span>{{ item.docDiscrip }}</span>
        </el-col>
      </el-row>

      <el-card style="margin-bottom: 10px;">
        <div slot="header">
          <span>附件</span>
        </div>
        <div v-for="(item,index) in uploadFJ.fileList" :key="item.url" class="yy_fj_list">
<!--          <a :href="item.url" :download="item.name" target="_blank">{{ item.name }}</a>-->
          <el-link type="primary" @click="downloadFJ(item)">{{ item.name }}</el-link>
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadFJ.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getVote } from "@/api/kaohe/vote"
import { listVote_emp, VoteEmpSubmit } from "@/api/kaohe/vote_emp"
import { getEmployee } from "@/api/kaohe/employee";
import { getDept } from "@/api/system/dept"
import { getVoteEmps } from "@/api/kaohe/votepage"
import axios from "axios";

export default {
  name: "votepage",
  data() {
    return {
      vote: {},
      loading: null,
      voteList: [],
      // 附件详情参数
      uploadFJ: {
        // 是否显示弹出层
        open: false,
        // 标题
        title: '',
        // 附件上传
        fileList: [],
        // 附件上传
        docDiscripList: []
      },
      // 修改内容行
      detail: {},
    }
  },
  created() {
    this.getVote();
  },
  methods: {
    getVote(){
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      getVote(this.$route.query.id).then(response => {
        this.vote = response.data;
        this.getList();
      })
    },
    /** 查询投票评测列表 */
    getList() {
      getVoteEmps({
        voteId: this.$route.query.id,
        pageNum: 1,
        pageSize: 10000000,
      }).then(response => {
        this.voteList = response.rows;
        this.loading.close()
      })
    },
    VoteSubmit(){
      let voteEmpList = [];
      let flag = true;
      let bkhdxName = '';
      let pyA = 0
      if(this.vote.khitemTypeid===2 || this.vote.khitemTypeid===3){

        let VoteList =  this.voteList;
        for (let i = 0; i < VoteList.length; i++) {
          if(VoteList[i].score===null||VoteList[i].score===undefined){
            flag = false;
            this.$alert(`【${ VoteList[i].bkhdxName }】未评分，请去评分！`, `提示`, {
              type: 'Danger'
            })
            break;
          }else if(VoteList[i].score > this.vote.maxNum){
            flag = false;
            this.$alert(`【${ VoteList[i].bkhdxName }】评分值不能超过评分最大值${this.vote.maxNum}，请重新去评分！`, `提示`, {
              type: 'Danger'
            })
            break;
          }else {
            voteEmpList.push({
              id: VoteList[i].id,
              bkhdxId: VoteList[i].bkhdxId,
              bkhdxName: VoteList[i].bkhdxName,
              score: VoteList[i].score,
            })
          }
        }
      }
      if(this.vote.khitemTypeid===1){
        this.voteList.forEach(item => {
          let obj = {
            id: item.id,
            bkhdxId: item.bkhdxId,
            bkhdxName: item.bkhdxName,
            optionA: 0,
            optionB: 0,
            optionC: 0,
            optionD: 0,
          }
          if(item.option){
            obj[item.option] = 1;
          }else {
            flag = false;
            bkhdxName += item.bkhdxName+'，'
          }
          if(item.option&&item.option==='optionA'){
            pyA += 1;
          }
          voteEmpList.push(obj);
        });
        bkhdxName=bkhdxName.slice(0, -1);
      }
      if(this.vote.umax && pyA>this.vote.umax){
        flag = false;
        this.$alert(`评优数量不能超过评优最大值！`, `提示`, {
          type: 'Danger'
        })
      }
      if(flag){
        if(new Date(this.vote.eTime) > (new Date())){
          this.$confirm('是否确认提交评分?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            VoteEmpSubmit({
              khitemTypeid : this.vote.khitemTypeid,
              pingceId : this.vote.pingceId,
              voteId : this.vote.id,
              userId : this.$store.state.user.id,
              userName : this.$store.state.user.name,
              uid : 1,
              voteEmpList: voteEmpList
            }).then(response => {
              this.$modal.msgSuccess("提交成功");
              this.$router.go(-1)
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交操作'
            });
          });
        }else {
          this.$alert(`已超时，无法提交评分！`, `提示`, {
            type: 'Danger'
          })
        }
      }else if(bkhdxName){
        this.$alert(`【${ bkhdxName }】未评分，请去评分！`, `提示`, {
          type: 'Danger'
        })
      }
    },
    // 表单重置
    reset() {
      this.detail = {};
      this.uploadFJ = {
        // 是否显示弹出层
        open: false,
        // 附件上传
        fileList: [],
        // 附件上传
        docDiscripList: []
      };
    },
    goPage(row){
      this.reset()
      // 0 组织架构
      if(this.vote.bkhdxType==='0'){
        this.zzjgDetail(row)
      }
      // 1 职工
      if(this.vote.bkhdxType==='1'){
        this.zgDetail(row)
      }
    },
    // 组织架构详情
    zzjgDetail(row){
      getDept(row.bkhdxId).then(response => {
        this.detail = response.data;
        if(this.detail.docs){
          let arr = this.detail.docs.split(';');
          arr.forEach( item => {
            let arr1 = item.split(',');
            this.uploadFJ.fileList.push({
              name: arr1[0],
              url: arr1[1]
            });
          })
        }
        if(this.detail.docDiscrip){
          this.uploadFJ.docDiscripList = JSON.parse(this.detail.docDiscrip);
        }else {
          this.uploadFJ.docDiscripList=[{
            title:'',
            docDiscrip:'',
          }]
        }
        this.uploadFJ.open = true;
        this.uploadFJ.title = '组织架构详情';
      })
    },
    // 职工详情
    zgDetail(row){
      getEmployee(row.bkhdxId).then(response => {
        this.detail = response.data;
        if(this.detail.docs){
          let arr = this.detail.docs.split(';');
          arr.forEach( item => {
            let arr1 = item.split(',');
            this.uploadFJ.fileList.push({
              name: arr1[0],
              url: arr1[1]
            });
          })
        }
        if(this.detail.docDiscrip){
          this.uploadFJ.docDiscripList = JSON.parse(this.detail.docDiscrip);
        }else {
          this.uploadFJ.docDiscripList=[{
            title:'',
            docDiscrip:'',
          }]
        }
        this.uploadFJ.open = true;
        this.uploadFJ.title = '职工详情';
      })
    },
    // 下载
    downloadFJ(row){
      axios({
        url: row.url,
        method: 'get',
        responseType: 'blob'
      }).then(res => {
        const blob = new Blob([res.data], { type: res.headers['content-type'] });
        const fileName = row.name; // 根据实际需求动态生成
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(link.href);
        document.body.removeChild(link);
      }).catch(err => {
        console.error('下载失败', err);
      });
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  margin: 0 auto;
  padding: 30px;

  .title{
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }
  .des{
    padding: 10px;
    color: #666666;
  }
  .time{
    padding: 5px;
    color: #af5e5e;
  }

  .tou_piao{
    font-size: 14px;

    .tou_piao_item{
      border: 1px solid #eee;
      padding: 10px;
      box-sizing: border-box;
      margin-bottom: 10px;

      ._desc{
        font-size: 12px;
        color: #666666;
        margin: 10px 0;
      }

      .el-radio{
        margin-top: 10px;
      }
    }
  }
}

.el-dialog__body{
  padding: 20px;

  .el-card{
    margin-top: 10px;
  }

  .yy_fj_list {
    //height: 36px;
    line-height: 36px;
    border-bottom: 1px solid #39CCCC;
  }
}

@media (max-width: 757px){
  ::v-deep.my_dialog .el-dialog{
    width: 95% !important;
  }
}
</style>