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

<template>
  <!-- 项目管理页面 -->
  <div class="ProjectManagement" v-loading="loading">
    <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=""></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.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 class="selectsBlock">
        <span class="selectLabel">年份</span>
        <el-select v-model="selectInp.year" @change="getData" placeholder="请选择">
          <el-option label="所有年份" value=""></el-option>
          <el-option
            v-for="(item,index) in options.yearData"
            :key="index"
            :label="item.time+'年'"
            :value="item.time">
          </el-option>
        </el-select>
      </div>

      </div>
      <div class="ProjectManagementQuery">
        <el-input v-model="selectText" placeholder="请输入项目名称/编号"></el-input>
        <el-button type="primary" class="btn" size="mini" @click="getData">查询</el-button>
      </div>
    </div>
<!-- 搜索栏结束 -->
      
      <!-- 表格开始 -->
    <div>
      <el-table
        ref="multipleTable"
        :data="items"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }">
        <el-table-column
          prop="ProjectNo"
          label="项目编号"
          align="center"
          min-width="9%">
        </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="9%">
        </el-table-column>

        <el-table-column
          prop="dName"
          align="center"
          label="所在部门"
          min-width="10%">
          
        </el-table-column>
        <el-table-column
          prop="tName"
          align="center"
          label="分类"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="fund"
          label="预算(万)"
          align="center"
          min-width="8%">
          <template #default="scope">
            <div>
              {{ scope.row.fund/10000 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          label="开始时间"
          min-width="9%">
          <template #default="scope">
            <div>
              {{ scope.row.startTime.split(' ')[0] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="联系电话"
          min-width="10%">
          <template #default="scope">
            <div>
              {{ scope.row.phone!=null||scope.row.phone==''?scope.row.phone:"-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
          min-width="6%">
          <template #default="scope">
                <div>
                    <!-- {{scope.row.name + (scope.row.status==0?"":"(已屏蔽)")}} -->
                    <!-- {{ (scope.row.isupload==0?"未审核": scope.row.data==1?"正在审核":"已审核")  }} -->

                    <span v-if="scope.row.isupload==0">未审核</span>
                    <span v-if="scope.row.isupload==1">审核中</span>
                    <span v-if="scope.row.isupload==2">进行中</span>
                    <span v-if="scope.row.isupload==3">待结项</span>
                    <span v-if="scope.row.isupload==4">已结项</span>

                </div>
            </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          width="300"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                <el-button type="primary" @click="scheduleDetail(scope.row.courseId,scope.row.typeid)"   size="mini" >进度详细</el-button>
                <el-button type="primary" @click="fundStatus(scope.row.courseId)"  size="mini" >资金情况</el-button>
                <el-button type="primary" v-show="scope.row.isupload==2"  @click="finish(scope.row)"   size="mini">提交结项</el-button>
                <el-button type="primary" v-show="scope.row.isupload==3"  @click="amendFinish(scope.row)" size="mini">修改结项</el-button>
                <el-button type="primary" v-show="scope.row.isupload==4" disabled class="disa" size="mini">已结项</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- 表格结束 -->




<!-- 提示哪些活动没有完成开始 -->
  <el-dialog
      title="提示"
      :visible.sync="NoReportActivity"
      width="600px"
      class="endDialog"
      >
      
      <div class="deleteContent">"{{ tit }}"项目</div>
      <div class="download checkActivity" v-show="checkActivityFinishData.length>0">
            <span style="color: black;">未完结活动:</span><span v-for="(item,index) in checkActivityFinishData" :key="index">{{ item.title }}</span>
      </div>
      <div class="download checkActivity" v-show="checkFundFinishData.length>0">
            <span style="color: black;">未完结资金:</span>
            <span style="cursor: pointer;" @click="fundDetail(item.id,item.title,item.pid)" v-for="(item,index) in checkFundFinishData" :key="index" >{{ item.title }}/{{ item.applyfund - item.actualuse }}（元）</span>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
        <!-- <el-button type="primary" @click="init" class="AllDialogBtn">确认</el-button> -->
        <el-button @click="NoReportActivity=false" class="AllDialogBtn">取消</el-button>
      </div>
    </el-dialog>
<!-- 提示哪些活动没有完成结束 -->


    <!-- 结项书开始 -->
    <el-dialog
      title="结项书"
      :visible.sync="endDialog"
      class="endDialogBlock"
      >
      
      <!-- <div class="deleteContent">"{{ tit }}"项目，是否确定完结？</div>
      <div class="download checkActivity" v-show="checkFundEndData.length>0">
            <span style="color: black;">剩余资金:</span>
      </div>
      <div class="deleteContent1">活动完结报告</div>
        <div class="download" v-for="item in file" :key="item.fid">
            <span>{{ item.fileName }}</span>
            <div class="downloadBtn">
              <el-button type="primary" @click="checkDelFile(item.url)" size="mini">删除文件</el-button>
            </div>
        </div>
        <el-progress v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
      <div class="addMoneyBtn" style="margin-left: 0;">
          <div class="jia">+</div>添加
          <div id="upFile">
            <beUpload @getFile="getFile" :navName="'上传文件'" :accept="accept" :progress="progress"> </beUpload>
          </div>
      </div> -->

      <Closingstatement :myArrayProp="myArrayProp"></Closingstatement>
      
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: center;">
        <el-button type="primary" @click="ending" class="AllDialogBtn">确认</el-button>
        <el-button @click="endDialog=false" class="AllDialogBtn">取消</el-button>
      </div>
    </el-dialog>
    <!-- 结项书结束 -->





    <!-- 分页 -->
    <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>
  <!-- 分页结束 -->
    
  </div>
</template>

<script>
import beUpload from '../../components/tool/beUpload'
import Closingstatement from './components/Closingstatement.vue'
    export default {
      components:{beUpload,Closingstatement},
      data() {
        return {
          accept:"*",
          iid:'',
          selectText:'',   //文字搜素框数据
          endDialog:false,
          DelFileDialog:false,
          NoReportActivity:false,
          loading:false,
          tit:'',    //完结框项目名称
          items:[],      //项目列表数据
          table:{         // 分页数据
            total:0,
            packageSize:5,
            currentPage:1
          }, 
          progress:{     //进度条
            value:0,
            show:false
          },  
          DelFileData:{
            fid:"",
            fileName:"",
          },
          options:{    //头部搜索框下拉框数据
            projectFilter:[],//项目筛选
            department:[],//部门
            sort:[],//分类
            person:[],//负责人
            state:[//状态
              {
                value:'',
                label:'全部'
              },
              {
                value:2,
                label:'进行中'
              },
              {
                value:3,
                label:'待结题'
              },
              {
                value:4,
                label:"已结题"
              },
            ],
            yearData:[],
          },
          selectInp:{     //select选定所显示的值 
            filter:'',     //不要带引号，select框是根据id来选择下面数据的
            department:'',
            sort:'',
            state:'',
            leader:'',
            year:new Date().getFullYear().toString(),
          },
          file:[],
          checkActivityFinishData:[],  //未完成活动
          checkFundFinishData:[],  //未完成资金
          // checkFundEndData:[],
          submitData:{     //结项书要填写的数据
            brief:'',
            plan:'',
            technology:'',
            business:'',
            innovate:'',
            resultAccessory:[],
            firmAccessory:[],
            competitionAccessory:[],
            exchangeAccessory:[],
            conversionAccessory:[],
            talentsAccessory:[],
            targetPlan:'',
            realityResult:'',
            socialValue:'',
            taskAccessory:[]
          },
          myArrayProp:[], //结项书-后端获取的数据
          // amendFinishArrayProp:[]  //结项书-后端获取的修改结项数据
        }
      },
      methods:{
        fundDetail(val,tit,pid){   //跳转到未完结资金那里去
          // console.log(val);
          // window.open(`/#/makerfundDetails?Id=${val}`)
          this.$router.push(`/makerfundDetails?Id=${val}&tit=${tit}&paid=${pid}`);
        },
        ProgressFormat(value){        //进度条
          return value ==100?'100%':`${value}%`
        },
        checkDelFile(url){   //删除文件
          this.file = this.file.filter(item=>item.url!=url);
        },
        getFile(val) {//上传文件
          this.file.push(val);
          // console.log(this.file);
          this.progress.show = false;
        },



        ending(){   //结项书提交
        //  return console.log(this.myArrayProp[0]);

          this.ajax.post(this.$store.state.api+"/updateClosingstatementData",{
            uid:this.$store.state.userInfo.userid,
            cid:this.iid,
            submitData:JSON.stringify(this.myArrayProp[0]['ClosingstatementData']),
            state:3
          }).then(res=>{
            console.log(res);
            if(res.data==1){
              this.$message.success("提交成功");
              this.endDialog = false;
              this.progress.show = false;
            }else{
              this.$message.error("提交失败")
            }
            this.getData();
          },err=>{
            console.log(err);
          })

          this.endDialog=false;

        },
        scheduleDetail(val,tid){//进度详情
          this.$router.push(`/ProjectManagementMain?Id=${tid}&pid=${val}`)
        },
        fundStatus(Id){//资金情况
          // localStorage.setItem('pid',JSON.stringify(Id))
          this.$router.push(`/ProjectManagementFundDetail?pid=${Id}`)
        },

        finish(val){     //结项对话框显示
          this.iid=val.courseId;          // 提交结项时候的用

          this.checkActivityFinishData = [];  //未完成项目
          this.checkFundFinishData=[];          //未完成资金
          // this.checkFundEndData=[];
          this.ajax.get(this.$store.state.api+"/GetActivityNoReportByPId",{
            uid:this.$store.state.userInfo.userid,
            pid:val.courseId
          }).then(res=>{
            if(res.data[0].length>0 || res.data[1].length>0){
              this.checkActivityFinishData = res.data[0];
              if (res.data[1].length>0) {
                let acsum=0
                let apsum=0
                res.data[1].forEach(e=>{
                  e.applyfund=JSON.parse(e.applyfund)
                  for(let k in e.applyfund){
                    acsum+=e.applyfund[k]*1
                  }
                  e.applyfund=acsum
                })

                res.data[1].forEach(e=>{
                  if (e.actualuse!=null) {
                    e.actualuse=JSON.parse(e.actualuse)
                    for(let k in e.actualuse){
                      apsum+=e.actualuse[k]*1
                    }
                    e.actualuse=apsum
                  }
                })
              }
              this.checkFundFinishData = res.data[1];
              this.tit = val.title;
              this.NoReportActivity = true;
            }else{
              // this.myArrayProp=[]

            this.iid=val.courseId;

            //提交结项书版本          
            this.ajax.get(this.$store.state.api+"/getClosingstatementData",{
              uid:this.$store.state.userInfo.userid,
              pid:val.courseId,
            }).then(res=>{
              let num=0
              res.data[1].forEach(i=>{            //计算出已经使用过的金钱
                // console.log(i);
                i['actualuse']=JSON.parse(i['actualuse'])
                for(let key in i['actualuse']){
                   if (i['actualuse'][key]) {
                    num = i['actualuse'][key]*1 + num
                   }
                }
              })
              console.log(num);

              let data=res.data[0]

              data[0].course_student=JSON.parse(data[0].course_student)
              data[0].course_teacher=JSON.parse(data[0].course_teacher)
              if (data[0].multiSelectProject!=null) {
                data[0].multiSelectProject=JSON.parse(data[0].multiSelectProject)
              }
              
              data[0].money=JSON.parse(data[0].money)

              this.myArrayProp=data
              this.myArrayProp[0].actualuse=num    //添加已经使用过的经费
              this.myArrayProp[0].ClosingstatementData=this.submitData

              console.log(this.myArrayProp);
              this.endDialog=true;

            }).catch(err=>{
              console.log(err)
            })

    
              }
            }).catch(err=>{
              console.log(err)
          })
        },  
        amendFinish(val){         //修改结项按钮（获取结项时提交的文件）

          //#region 上传文件版本结项
          // this.checkFundEndData=[];  
          // this.ajax.post(this.$store.state.api+"/UpdateAmendFinish",{
          //   uid:this.$store.state.userInfo.userid,
          //   pid:val
          // }).then(res=>{
          //   console.log(res);
          //   console.log(res.data);
          //   if (res.data[0].length>0) {
          //       let data=JSON.parse(res.data[0][0].endFile)
          //       this.file=data;
          //   }
          //   // let data=JSON.parse(res.data[0][0].endFile)
          //   this.tit=tit;
            // this.endDialog=true;
            // this.ClosingstatementData=val
          //   // console.log(this.file);
          // }).catch(err=>{
          //   console.log(err)
          // })
          //#endregion
          this.submitData={
            brief:'',
            plan:'',
            technology:'',
            business:'',
            innovate:'',
            resultAccessory:[],
            firmAccessory:[],
            competitionAccessory:[],
            exchangeAccessory:[],
            conversionAccessory:[],
            talentsAccessory:[],
            targetPlan:'',
            realityResult:'',
            socialValue:'',
            taskAccessory:[]
          };
          this.iid=val.courseId;

          //      
           this.ajax.get(this.$store.state.api+"/selectAmendFinish",{
            uid:this.$store.state.userInfo.userid,
            pid:val.courseId,
          }).then(res=>{
            // return console.log(res);

            let num=0
              res.data[1].forEach(i=>{            //计算出已经使用过的金钱
                // console.log(i);
                i['actualuse']=JSON.parse(i['actualuse'])
                for(let key in i['actualuse']){
                   if (i['actualuse'][key]) {
                    num = i['actualuse'][key]*1 + num
                   }
                }
              })
              console.log(num);

            let data=res.data[0]
            data[0].course_student=JSON.parse(data[0].course_student)
            data[0].course_teacher=JSON.parse(data[0].course_teacher)
            data[0].multiSelectProject=JSON.parse(data[0].multiSelectProject)
            data[0].ClosingstatementData=JSON.parse(data[0].ClosingstatementData)
            data[0].money=JSON.parse(data[0].money)
            // data[0].multiSelectProject=JSON.parse(data[0].multiSelectProject)

            this.myArrayProp=data
            this.myArrayProp[0].actualuse=num    //添加已经使用过的经费

            console.log(this.myArrayProp);
            this.endDialog=true;

          }).catch(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,  //当前账号id
            pid:this.selectInp.filter,  //筛选
            did:this.selectInp.department,  //部门
            tid:this.selectInp.sort,    //分类
            leader:this.selectInp.leader,  //负责人
            endState:this.selectInp.state,
            year:this.selectInp.year, //年份
            textInp:this.selectText,
            page:this.table.currentPage,  //当前页
            lim:this.table.packageSize,  //限制获取几条数据
          }
          // console.log(param);
          this.ajax    
            .get(this.$store.state.api+'/SelectAllProjectManagement',param)
              .then(res=>{
                let data=res.data;
                // console.log(data)
                if (data[0].length==0 && data[5][0]['total'] != 0&&this.table.currentPage!=1) {
                  this.table.currentPage=1
                  return this.getData()
                }
                let a=this.options;
                this.items=data[0];
                a.projectFilter=data[1];
                a.department=data[2];
                a.sort=data[3];
                a.person=data[4];
                a.yearData = data[6]
                if(a.yearData.filter(item=>item['time']==new Date().getFullYear().toString()).length==0){
                  a.yearData.push({time:new Date().getFullYear().toString()})
                }
                this.table.total=data[5][0].total
                this.loading = false;
              },err=>{
                console.log(err);
              })  
        }
     },

     mounted(){
      this.getData()   //页面加载完成后自动获取渲染数据
     }
    }
</script>

<style lang="less">
.ProjectManagement{
  // .pagination{
  //   float: right;
  //   margin: 0px 85px 10px;
  // }
    // .projectBlock{   //循环列表大框
    //   width: 100%;
    //   // height: 560px;
    //   display: flex;
    //   flex-wrap: wrap;
    //   overflow:auto;
    //   .classBlock{   //每个独立小框
    //       flex-shrink: 0;
    //       overflow: hidden;
    //       position: relative;
    //       margin-right: 20px;
    //       margin-bottom: 5px;
    //       width: 250px;
    //       height: 300px;
    //       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: 140px;
    //         object-fit: cover;
    //       }

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

    //       .classBlockBtn{  //按钮栏
    //         box-sizing: border-box;
    //         padding:0 6px;
    //         display: flex;
    //         flex: 1;
    //         width: 100%;
    //         max-height: 40px;
    //         justify-content: space-around;
    //         align-items: center;
    //         background-color:#F5F4F4 ;
    //         span{
    //           font-size: 14px;
    //           color: black;
    //           transition: .1s;
    //           cursor: pointer;
    //           &:hover{
    //             color: #79a2ff;
    //           }
    //         }

    //         .bt1{
    //           width: 100px;
    //           height: 35px;
    //           font-size: 14px;
    //         }
    //       }
    //   }
    // }

  .endDialog{      //结项对话框的
    .el-dialog__header{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
    background: #32455b;
    }
    .el-dialog__title{
      color:rgb(246, 247, 246);
      display: flex;
      font-size: 18px;
      position: relative;
      top: -2px;
      justify-content: center;
    }
    .el-dialog{
          width: 600px;
          border-radius: 5px;
          overflow: hidden;
        }
    .el-dialog__body{
      box-sizing: border-box;
      padding: 30px 20px 0 20px;
    }
    .deleteContent{
      width: 100%;
      font-size: 22px;
      color: #000;
      box-sizing: border-box;
      // padding: 0 20px;
      display: flex;
      justify-content: center;
    }
    .deleteContent1{
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight: bold;
      color: #000;
      margin-top: 30px;
    }
    .download{
      margin: 10px 0 20px;
      width: 100%;
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      color: #5391fd;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // background: #ccc;
    }

    .addDialogLogo{
      width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
    }
  }


  .endDialogBlock{      //结项书弹框样式
    .el-dialog__header{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      background: #32455b;
    }
    .el-dialog__title{
      color:rgb(246, 247, 246);
      display: flex;
      font-size: 18px;
      position: relative;
      top: -2px;
      justify-content: center;
    }
    .el-dialog{
          width: 1300px;
          border-radius: 5px;
          overflow: hidden;
        }
    .el-dialog__body{
      box-sizing: border-box;
      padding: 30px 20px 0 20px;
    }
    .addDialogLogo{
      width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
    }
  }


  }
  .checkActivity{
    // float:left;
    display: flex;
    justify-content: flex-start !important;
    span{
      margin: 10px 20px;
    }

  }
</style>