ssti-CollegeManage/src/views/credit/credit1.vue

<template>
  <!-- 学分登记修改 -->
    <div class="credit1" v-loading="loading">

      <div class="vfpHeader">
        <div class="titleOne">学分登记</div>
        <el-button type="primary" @click="$router.back()">返回</el-button>
      </div>

      <hr>
         <!-- 活动申请填写信息区域开始 -->
         <div class="select">
                <div class="selectTop">
                  <div class="label">项目名称</div>
                  <el-input disabled v-model="tableData.title"></el-input>
                </div>
                <div class="selectMid">
                  <div class="selectLeft">
                      <div class="inpBlock">
                          <div class="label">项目负责人</div>
                          <el-input disabled v-model="tableData.pro_leader"></el-input>
                      </div>
                      <div class="inpBlock">
                          <div class="label">所在部门</div>
                          <el-input disabled v-model="tableData.class"></el-input>
                      </div>
                      <div class="inpBlock">
                          <div class="label">联系电话</div>
                          <el-input disabled v-model="tableData.phone"></el-input>
                      </div>
                  </div>

                  <div class="selectRight">
                    <div class="inpBlock">
                          <div class="label">项目开始时间</div>
                          <el-date-picker
                            disabled
                            v-model="tableData.begin_at"
                            type="date"
                            style="width: 100%;">
                          </el-date-picker>
                      </div>
                      <div class="inpBlock">
                          <div class="label">预算总经费</div>
                          <el-input disabled v-model="tableData.money"></el-input>
                      </div>
                      <div class="inpBlock">
                          <div class="label">分类</div>
                          <el-input disabled v-model="tableData.type"></el-input>
                      </div>
                  </div>
                </div>
      </div>
      <!-- 活动申请填写信息区域结束 -->

      <!-- 成员学分登记开始 -->
        <div class="tabTit">
          <div><p>成员学分登记</p></div>
          <el-button @click="selectProject" type="primary" size="mini">项目详情</el-button>
        </div>
        <hr>
        <el-table
          :data="tableData.course_student"
          tooltip-effect="dark"
          stripe
          class="fontSize"
          :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
          >
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="class"
            label="班级"
            align="center"
            >
          </el-table-column>
  
          <el-table-column
            prop="phone"
            label="电话"
            align="center"
            >
          </el-table-column>
  
          <el-table-column
            prop="score"
            label="学分"
            align="center"
            >
          </el-table-column>
          
          <el-table-column
            prop="operation"
            label="操作"
            
            >
            <template #default="scope">
                <div class="operations">
                        <el-button type="primary" @click="setCredit(scope.row)" size="mini">设置学分</el-button>
                </div>
            </template>
          </el-table-column>
        </el-table>
      <!-- 成员学分登记结束 -->


      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary" @click="$router.back()">返回</el-button>
        </div>
      </div>
      <el-dialog
        title="查看学分"
        :visible.sync="changeScoreDialog"
        width="600px"
        class="MAputIn AddMember">
        <div class="addDialogLogo">LOGO</div>
        <div class="littleBlock">
              <div class="dialogLabel">姓名</div>
              <div>
                <el-input disabled  v-model="changeScoreTable.name"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">班级</div>
              <div>
                <el-input disabled v-model="changeScoreTable.class"></el-input>
              </div>
            </div>

            <div class="littleBlock">
              <div class="dialogLabel">电话</div>
              <div>
                <el-input disabled type="number" class="inputNumber" v-model="changeScoreTable.phone"></el-input>
              </div>
            </div>
            <div class="littleBlock">
              <div class="dialogLabel">分数</div>
              <div>
                <el-input type="number" class="inputNumber" v-model.number="changeScoreTable.score"></el-input>
              </div>
            </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="changeScore" class="AllDialogBtn" size="small">修改</el-button>
            <el-button @click="changeScoreDialog = false" class="AllDialogBtn" size="small">取消</el-button>
        </span>
      </el-dialog>
    </div>

  </template>
  
  <script>
      export default {
        data() {
          return {
            changeScoreDialog:false,
            loading:false,
            changeScoreTable:{
              id:"",
              class:"",
              name:"",
              phone:"",
              score:"",
            },
            tableData:{
              title:"",
              type:"",
              pro_leader:"",
              phone:"",
              money:"",
              course_student:[],
              class:"",
              begin_at:"",
            },
          }
        },
        methods:{
          selectProject(){
            localStorage.setItem('pid',JSON.stringify(this.$route.query["Id"]))
            this.$router.push(`/ProjectManagement1`)
          },
          setCredit(row){
            this.changeScoreTable = row;
            this.changeScoreDialog = true;
          },
          getData(){
            this.loading = true;
            this.ajax.get(this.$store.state.api+"/GetProjectEndByID",{
              uid:this.$store.state.userInfo.userid,
              pid:this.$route.query["Id"]
            }).then(res=>{
              let data = res.data[0][0]
              data['course_student'] = JSON.parse(data['course_student'])
              this.tableData = data;
              this.loading = false;
            }).catch(err=>{
              console.log(err)
            })
          },
          changeScore(){
            if(this.changeScoreTable.score<0||this.changeScoreTable.score>100)return this.$message.warning("学分只在0~100之间")
            let newData = [...this.tableData.course_student];
            newData.forEach(item=>item = item.id==this.changeScoreTable.id?this.changeScoreTable:item);
            this.ajax.post(this.$store.state.api+"/UpdateStudentScore",{
              uid:this.$store.state.userInfo.userid,
              pid:this.$route.query["Id"],
              st:JSON.stringify(newData)
            }).then(res=>{
              if(res.data==1){
                this.$message.success("修改分数成功")
                this.changeScoreDialog = false;
              }else{
                this.$message.error("修改分数失败")
              }
              this.getData();
            }).catch(err=>{
              console.log(err)
            })
          }
        },
        mounted(){
          this.getData();
        }
      }
  </script>
  
  <style lang="less">
    .MAputIn{   //提交对话框样式
  .deleteContent{
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
  }
 
  .el-dialog__title{
    color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
  }
  
  .dialog-footer{
    display: flex;
    justify-content: center;
    // .btn5{
    //   // background: #0e72e6;
    //   height: 40px;
    //   width: 200px;
    //   font-size: 16px;
    // }
  }
}
  </style>