ssti-CollegeManage/src/views/projectManage/ProjectManagement.vue

<template>
  <!-- 项目管理页面 -->
  <div class="ProjectManagement">
    <div class="pAHeader">
      <div class="pAHeader1">项目管理</div>
    </div>
    <hr>
    

<!-- 搜索栏开始 -->
    <div class="selectInp">
      <div class="manageSelects">
      <div class="selectsBlock">
        <span class="selectLabel">项目筛选</span>
        <el-select v-model="selectInp.filter" @change="getData" placeholder="我的项目">
          <el-option label="所有项目"  :value="0"></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="0"></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="0"></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.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 class="selectsBlock">
        <span class="selectLabel">负责人</span>
        <el-select v-model="selectInp.leader" @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>
      <div class="ProjectManagementQuery">
        <el-input v-model="selectText" style="340px" placeholder="请输入项目名称"></el-input>
        <el-button type="primary" class="btn" size="mini">查询</el-button>
      </div>
    </div>
<!-- 搜索栏结束 -->
      
      
<!-- 循环展示框列表开始 -->
    <div class="projectBlock core_dialogue">
      <div class="classBlock" v-for="(item,index) in items" :key="index">
        <div class="projectBlockPosition">
          <!-- {{ item.isupload }} -->
          <span v-if="item.isupload==0">未结题</span>
          <span v-if="item.isupload==1">进行中</span>
          <span v-if="item.isupload==2">已结题</span>

        </div>
        <img :src="item.image" alt="">
        <div class="classBlock1">
            <div class="classBlock2">{{ item.title }}</div>
            <div class="classBlock3">
              <div>{{ item.pro_leader }}</div>
              <div>{{ item.name }}</div>
            </div>
            <div class="classBlock3 classBlock4">
              <div style="color:#9e9e9e">{{ item.typeName }}</div>
              <div>项目编号{{ index }}</div>
            </div>
        </div>

            <div class="classBlockBtn">
              <el-button type="primary" class="bt1" size="mini" @click="scheduleDetail(item.courseId)">进度详情</el-button>
              <el-button type="primary" class="bt1" size="mini" @click="fundStatus(item.courseId)">资金情况</el-button>
              <el-button type="primary" class="bt1" size="mini" @click="finish">结项</el-button>
            </div>
       
      </div>
    </div>
<!-- 循环展示框列表结束 -->
          <!-- 分页 -->
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="table.currentPage"
            :page-size="table.packageSize"
            layout=" prev, pager, next"
            background
            class="pagination"
            :total="table.total">
          </el-pagination>
        <!-- 分页结束 -->
    
  </div>
</template>

<script>
    export default {
      data() {
        return {
          selectText:'',
          items:[],      //项目列表数据
          table:{         // 分页数据
            total:0,
            packageSize:8,
            currentPage:1
          },   
          options:{    //头部搜索框下拉框数据
            projectFilter:[],//项目筛选
            department:[],//部门
            sort:[],//分类
            person:[],//负责人
            state:[//状态
              {
                value:99,
                label:'全部'
              },
              {
                value:0,
                label:'未审核'
              },
              {
                value:1,
                label:'正在审核'
              },
              {
                value:2,
                label:"已审核"
              },
            ],
          },
          selectInp:{     //select选定所显示的值 
            filter:0,     //不要带引号，select框是根据id来选择下面数据的
            department:0,
            sort:0,
            state:99,
            leader:'',
          }
        }
      },
      methods:{
        scheduleDetail(val){      //进度详情
          console.log(val);
          localStorage.setItem('pid',JSON.stringify(val))
          this.$router.push(`/ProjectManagement1`)
        },
        fundStatus(Id){     //资金情况
          this.$router.push(`/ProjectManagementFund1`)
        },
        init(){       //对话框重置
          
        },
        finish(){     //结项

        },
        handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getData()
        },
        getData(){        //获取渲染数据
          let param={
            uid:this.$store.state.userInfo.userid,  //当前账号id
            pid:this.selectInp.filter,  //筛选
            did:this.selectInp.department,  //部门
            tid:this.selectInp.sort,    //分类
            leader:this.selectInp.leader,  //负责人
            st:this.selectInp.state,  //审核状态
            textInp:this.selectText,
            page:this.table.currentPage,  //当前页
            lim:this.table.packageSize,  //限制获取几条数据
          }
          // return console.log(param);
          // console.log(param)
          this.ajax    
            .get(this.$store.state.api+'/SelectAllProject',param)
              .then(res=>{
                // console.log(res);
                let data=res.data;
                // console.log(res);
                let a=this.options;
                this.items=data[0];
                // console.log(this.items);
                a.projectFilter=data[1];
                a.department=data[2];
                a.sort=data[3];
                a.person=data[4];
                this.table.total=data[5][0].total
              },err=>{
                console.log(err);
              })  
        }
     },
     watch:{    //监视选择框的变化，实施刷新表格数据
      selectText:{
            handler(){
              immediate:true
              deep:true
              this.getData()
            }
          }
      },
     mounted(){
      this.getData()   //页面加载完成后自动获取渲染数据
     }
    }
</script>

<style lang="less">
.ProjectManagement{
  .pagination{
    float: right;
    margin: 0px 85px 10px;
  }
    .projectBlock{   //大框
      width: 100%;
      height: 560px;
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      overflow:auto;
      .classBlock{   //每个独立小框
          flex-shrink: 0;
          overflow: hidden;
          position: relative;
          margin-right: 20px;
          margin-bottom: 5px;
          width: 320px;height: 260px;
          background-color: rgb(255, 255, 255);
          box-shadow: 1px 2px 3px #ccc;
          border: 1px solid #ccc;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          .projectBlockPosition{    //完成状态
            border-radius: 30px;
            position: absolute;
            top: 5px;
            left: 5px;
            width: 80px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            opacity: 0.7;
            font-size: 16px;
            color:#fff;
            // font-size: 14px;
          }
          img{
            width: 100%;height: 125px;
          }

          .classBlock1{   //中间栏
            margin-bottom: 10px;
            margin-top: 0px;
            box-sizing: border-box;
            padding: 0 5px;
            .classBlock2{   //项目名称
              margin-left: 5px;
              margin-bottom: 4px;
              margin-top: 4px;
              text-align: left;
              font-size: 18px;
            }
            .classBlock3{   //学校、姓名
              box-sizing: border-box;
              padding: 0 5px;
              font-size: 16px;
              width: 100%;
              margin-top: 4px;
              display: flex;
              justify-content: space-between;
            }
            .classBlock4{  //博客、编号
              margin-top: 4px;
            }
          }

          .classBlockBtn{  //按钮栏
            box-sizing: border-box;
            padding:0 6px;
            display: flex;
            flex: 1;
            width: 100%;
            justify-content: center;
            align-items: center;
            background-color:#F5F4F4 ;
            .bt1{
              width: 100px;
              height: 35px;
              font-size: 14px;
            }
          }
      }
    }



    
  }
</style>