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

<template>
  <!-- 项目结项 -->
  <div class="projectSettlement" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">项目结项</div>
    </div>
    <hr>
    <!-- 搜索栏开始 -->
    <div class="selects">
      <div class="selectsBlock">
        <span class="selectLabel">项目筛选</span>
        <el-select v-model="selectInp.filter" @change="getData" placeholder="我的项目">
          <el-option label="所有项目" value=''></el-option>
          <el-option
            v-for="item in options.projectFilter"
            :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="selectInp.department" @change="getData" placeholder="请选择">
          <el-option label="所有部门" value=""></el-option>

          <el-option
            v-for="item in options.department"
            :key="item.classid"
            :label="item.name"
            :value="item.classid">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">分类</span>
        <el-select v-model="selectInp.sort" @change="getData" placeholder="请选择">
          <el-option label="所有分类" value=""></el-option>

          <el-option
            v-for="item in options.sort"
            :key="item.typeid"
            :label="item.name"
            :value="item.typeid">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">负责人</span>
        <el-select v-model="selectInp.person" @change="getData" placeholder="请选择">
          <el-option label="所有负责人" value=""></el-option>
          <el-option
            v-for="(item,index) in options.person"
            :key="index"
            :label="item.pro_leader"
            :value="item.pro_leader">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">状态</span>
        <el-select v-model="selectInp.state" @change="getData" placeholder="请选择">
          <el-option
            v-for="item in options.state"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
<!-- 搜索栏结束 -->

<!-- 表格开始 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        @selection-change="handleSelectionChange">
        <!-- <el-table-column
          type="selection"
          >
        </el-table-column> -->
        <el-table-column
          prop="title"
          label="项目名称"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="pro_leader"
          align="center"
          label="项目负责人"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="name"
          label="所在部门"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="fund"
          label="预算总经费(万)"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
          min-width="10%">
          <template #default="scope">
            <div>
              {{ scope.row.phone==''||scope.row.phone==null?'-':scope.row.phone }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
          min-width="8%">
          <template #default="scope">
            <div>
              <span v-if="scope.row.isupload == 1">进行中</span>
              <span v-if="scope.row.isupload == 2">已结题</span>
           </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          width="300"
          align="center"
          >
          <template #default="scope">
              <div class="operations">
                        <el-button type="primary" size="mini" @click="details(scope.row)">查看详情</el-button>
                        
                        <el-button type="primary"  v-if="scope.row.isupload==1" style="width: 73.3px;" @click="audit(scope.row.courseId,scope.row.title)" size="mini">审核</el-button>
                        <el-button type="info"  disabled v-if="scope.row.isupload==2" style="background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;"  size="mini">已审核</el-button>
                        <!-- <el-button type="primary" disabled v-if="scope.row.isupload==0" style="width: 73.3px;background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;"  @click="audit(scope.row.courseId,scope.row.title)" size="mini">审核</el-button> -->

                        <el-button v-show="scope.row.isupload==2" type="primary" size="mini" @click="edit(scope.row.courseId,scope.row.typeid)">成果查看</el-button>
                        <el-button v-show="scope.row.isupload!=2" type="info" disabled="" size="mini">成果查看</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 表格结束 -->
    <!-- 分页 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="table.currentPage"
      :page-size="table.packageSize"
      layout=" prev, pager, next"
      background
      class="paginations"
      :total="table.total">
    </el-pagination>
  <!-- 分页结束 -->

      <!-- 提交对话框开始 -->
      <el-dialog
          title="提示"
          :visible.sync="submitHint"
          width="600px"
          class="projectApplicationfundAddDialog"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
          <div class="deleteContent">确定“{{tit}}”完结？</div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitAll" class="AllDialogBtn">确认提交</el-button>
            <el-button @click="init" size="small" class="AllDialogBtn">取消</el-button>
          </span>
        </el-dialog>
      <!-- 提交对话框结束 -->
  </div>
</template>

<script>
// import { threadId } from 'worker_threads'

    export default {
      data() {
        return {
          submitHint:false,
          loading:false,
          iid:'',
          tit:'',
          options:{    //头部搜索框下拉框数据
            projectFilter:[],//项目筛选
            department:[],//部门
            sort:[],//分类
            person:[],//负责人
            state:[//状态
              {
                value:'',
                label:'全部'
              },
              {
                value:0,
                label:'未审核'
              },
              {
                value:1,
                label:'进行中'
              },
              {
                value:2,
                label:"已审核"
              },
            ],
          },
           // 分页数据
           table:{
            total:0,
            packageSize:8,
            currentPage:1
          },   
          tableData:[],   //结项数据表
          selectInp:{
            filter:'',
            department:'',
            sort:'',
            person:'',
            state:'',
          }
        }
      },
      methods:{
        init(){
          this.submitHint=false
        },
        audit(cid,tit){
            this.iid=cid;
            this.tit=tit;
            this.submitHint=true;
        },
        submitAll(){  //提交结项审核
          let param={
            uid:this.$store.state.userInfo.userid,
            cid:this.iid
          }
          this.ajax
                .post(this.$store.state.api+'/UpdateSettlementIsUpload',param)
                .then(res=>{
                  console.log(res);
                  this.submitHint=false;
                  this.getData();
                },err=>{
                  console.log(err);
                })
        },
        handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getData()
        },
        getData(){    //获取表格数据
          this.loading = true;
          let param={
            uid:this.$store.state.userInfo.userid,
            pid:this.selectInp.filter,  //筛选
            did:this.selectInp.department,  //部门
            tid:this.selectInp.sort,    //分类
            leader:this.selectInp.person,  //负责人
            st:this.selectInp.state,  //审核状态
            page:this.table.currentPage,  //当前页
            lim:this.table.packageSize  //限制获取几条数据
          }
          // return console.log(param);
          // console.log(param)
          this.ajax    
            .get(this.$store.state.api+'/SelectSettlement',param)
              .then(res=>{
                console.log(res.data);
                let data=res.data;
                let a=this.options;
                this.tableData=data[0];
                a.projectFilter=data[1];
                a.department=data[2];
                a.sort=data[3];
                a.person=data[4];
                this.table.total=data[5][0].total
                this.loading = false;
              },err=>{
                console.log(err);
              })  
        },
        edit(cid,tid){
          // console.log(rowId)
          window.open(`/resultShowDetail?pid=${cid}&tid=${tid}`)
        },
        details(val){
          this.$router.push(`/projectSettlementDetailMain?pid=${val['courseId']}&tid=${val['typeid']}`);
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      },
      mounted(){
        this.getData();
      }
    }
</script>

<style lang="less">
.projectSettlement{


  .pagination{   //分页
    float: right;
    margin: 20px 35px 10px;
  }


   //提交对话框开始
   .projectApplicationfundAddDialog{  
 
      .el-dialog__header{
        border-radius: 10px 10px 0 0;
      }
      .el-dialog{
        border-radius:10px ;
        top: 10%;
      }
      
      .deleteContent{
        width: 100%;
        text-align: center;
        font-size: 22px;
        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__header{
      background: #32455b;
      }
      .el-dialog__title{
        position: relative;
        top: -2px;
        font-size: 18px;
        margin-left:250px;
        font-size: 18px;
        color:rgb(246, 247, 246);
      }

      .dialog-footer{
      display: flex;
      justify-content: center;

      }
      }
      //提交对话框结束

  // .selects{
  //   width: 100%;
  //   margin-top: 20px;
  //   display: flex;
  //   flex-wrap: wrap;
  //   margin-bottom: 20px;

  //   .selectsBlock{
  //     display: flex; 
  //     margin-right: 30px;
  //     margin-bottom: 20px;
  //   }
  //   .selectLabel{
  //     width: 64px;
  //     font-size: 16px;
  //     margin-right: 10px;
  //     display: inline-block;
  //     font-weight:bolder;
  //     text-align: justify;
  //     text-justify:distribute-all-lines;
  //     text-align-last: justify;
  //     transform: translate(0,22%);
  //   }
  // }

  label{
    color: #000;
  }
}
</style>