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

<template>
  <!-- 学分登记 -->
  <div class="credit">
    <div class="pAHeader">
      <div class="pAHeader1">学分登记</div>
    </div>
    <hr>
<!-- 搜索框开始 -->
    <div class="selects">
      <div class="selectsBlock">
        <span class="selectLabel">项目筛选</span>
        <el-select v-model="pavalues.value" @change="getData" placeholder="我的项目">
          <el-option label="所有项目" :value="0"></el-option>
          <el-option
            v-for="item in options"
            :key="item.courseId"
            :label="item.title"
            :value="item.courseId">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">部门</span>
        <el-select v-model="pavalues.value1" @change="getData" placeholder="请选择">
          <el-option label="所有部门" :value="0"></el-option>
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">分类</span>
        <el-select v-model="pavalues.value2" @change="getData" placeholder="请选择">
          <el-option label="所有分类" :value="0"></el-option>
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">负责人</span>
        <el-select v-model="pavalues.value3" @change="getData" placeholder="请选择">
          <el-option label="所有负责人" value=""></el-option>
          <el-option
            v-for="item in options3"
            :key="item.pro_leader"
            :label="item.pro_leader"
            :value="item.pro_leader">
          </el-option>
        </el-select>
      </div>
    </div>
<!-- 搜索框结束 -->

<!-- 表格开始 -->
    <div>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <!-- <el-table-column
          type="selection"
          min-width="20%">
        </el-table-column> -->
        <el-table-column
          prop="title"
          label="项目名称"
          align="center"
          min-width="20%">
        </el-table-column>
        <el-table-column
          prop="pro_leader"
          label="项目负责人"
          align="center"
          min-width="20%">
        </el-table-column>

        <el-table-column
          prop="course_student.length"
          label="小组成员"
          align="center"
          min-width="15%">
        </el-table-column>

        <el-table-column
          prop="endProjectTime"
          label="结题时间"
          align="center"
          min-width="20%">
        </el-table-column>
        
       
        <el-table-column
          prop="operation"
          min-width="25%"
          align="center"

          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary" class="bt1" size="mini" @click="queryScore(scope.row)">查看学分</el-button>
                      <el-button type="primary" class="bt1" size="mini" @click="edit(scope.row.courseId)">修改</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 查看学分弹窗START -->
      <el-dialog
        title="查看学分"
        :visible.sync="queryScoreDialog"
        width="800px"
        class="MAputIn AddMember">
        <div class="addDialogLogo">LOGO</div>
        <!-- <div class="deleteContent">是否删除“{{ delTeacherTable.Name}}”指导老师？</div> -->
        <el-table
          :data="ScoreData"
          tooltip-effect="dark"
          stripe
          class="fontSize core_dialogue"
          style="height:65%;overflow: auto;"
          :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <el-table-column
          prop="name"
          label="成员名称"
          align="center"
          min-width="20%">
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          align="center"
          min-width="20%">
        </el-table-column>

        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
          min-width="25%">
        </el-table-column>

        <el-table-column
          prop="score"
          label="学分"
          align="center"
          min-width="20%">
        </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="queryScoreDialog = false" class="btn5" size="small">确认</el-button>
        </span>
      </el-dialog>
      <!-- 查看学分弹窗END -->
      <el-pagination
        @current-change="CurrentChange"
        :page-size="Page.lim"
        layout=" prev, pager, next"
        background
        class="paginations"
        :total="Page.total">
      </el-pagination>
    </div>
<!-- 表格结束 -->

  </div>
</template>

<script>
    export default {
      data() {
        return {
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          tableData:[],
          ScoreData:[],
          queryScoreDialog:false,
          pavalues:{
            value:0,
            value1:0,
            value2:0,
            value3:'',
            value4:'',
          },
          Page:{
            nowPage:1,
            total:10,
            lim:10
          },
        }
      },
      methods:{
        edit(Id){
            this.$router.push(`/credit1?Id=${Id}`)
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        getData(){
          this.ajax.get(this.$store.state.api+"/GetProjectIsEndProject",{
            uid:this.$store.state.userInfo.userid,
            pid:this.pavalues.value,
            cid:this.pavalues.value1,
            tid:this.pavalues.value2,
            leader:this.pavalues.value3,
            page:this.Page.nowPage,
            lim:this.Page.lim,
          }).then(res=>{
            let data = res.data[0];
            console.log(res);
            data.forEach(item=>item["course_student"] = JSON.parse(item['course_student']));
            this.options = res.data[1]
            this.options1 = res.data[2]
            this.options2 = res.data[3]
            this.options3 = res.data[4]
            this.Page.total = res.data[5][0]['total']
            this.tableData = data;
          }).catch(err=>{
            console.log(err)
          })
        },
        CurrentChange(nowPage){
          this.Page.nowPage = nowPage;
          this.getData();
        },
        queryScore(row){
          this.ScoreData = row['course_student'];
          this.queryScoreDialog = true;
        }
      },
      mounted(){
        this.getData()
      }
    }
</script>

<style lang="less">
.credit{
  width: 100%;
  height: 100%;
  position: relative;
}
.pagination{
    position: absolute;
    // float: right;
    bottom: 0;
    right: 0;
    margin: 20px 35px 10px;
  }
  .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{
    display: flex;
    justify-content: center;
    color:rgb(246, 247, 246);
    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>