ssti-CollegeManage/src/views/projectApply/projectApplication.vue

<template>
  <!-- 项目立项申请 -->
  <div class="projectApplication">
    <div class="pAHeader">
      <div class="pAHeader1">项目立项申请</div>
      <el-button  style="font-size: 16px;" @click="apply">项目立项申请</el-button>
    </div>
    <hr>

<!-- 搜索框开始 -->
    <div class="selects">
      <div class="selectsBlock">
        <div class="selectLabel">项目筛选</div>
        <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">
        <div class="selectLabel">部门</div>
        <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">
        <div class="selectLabel">分类</div>
        <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">
        <div class="selectLabel">负责人</div>
        <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">
        <div class="selectLabel">状态</div>
        <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"
        stripe
        class="fontSize core_dialogue"
        style="height: 481px;overflow: auto;"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        @selection-change="handleSelectionChange">
        <!-- selection-change批量选择功能后续可能用到 -->
<!-- 
        <el-table-column
          type="selection"
          width="25"
          >

        </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="name"
          align="center"
          label="所在部门"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="money"
          label="预算(万)"
          align="center"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="time"
          align="center"
          label="开始时间"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="phone"
          align="center"
          label="联系电话"
          min-width="10%">
        </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>
                </div>
            </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          width="350"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                  <!-- <el-button type="primary" > -->
                    <!-- <el-link class="btt" type="primary" :underline="false"> -->
                        <el-button type="primary"  size="mini" @click="lookDetail(scope.row.courseId)">查看详情</el-button>
                        <!-- <el-button type="primary"  size="mini" @click="audit(scope.row)">{{(status==-1?"审核": status?"撤回":"审核")}}</el-button> -->
                        <!-- <el-button type="primary"  size="mini" @click="audit(scope.row)">{{(scope.row.data==1?"审核": scope.row.data==1?"正在审核":"审核")}}</el-button> -->
                        <el-button v-if="scope.row.isupload==0" type="primary" style="width: 73.3px;" size="mini" @click="audit(scope.row)">审核</el-button>
                        <el-button type="info" style="background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" v-if="scope.row.isupload==1"  size="mini">审核中</el-button>
                        <el-button type="info" style="background-color: #c8c9cc;border-color: #c8c9cc;cursor: no-drop;" v-if="scope.row.isupload==2"  size="mini">已审核</el-button>

                        <el-button type="primary"  size="mini" @click="appTable(scope)" >申请表</el-button>
                        <el-button type="primary"  size="mini" @click="del(scope.row)">删除</el-button>
                      <!-- </el-link> -->
                  <!-- </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="pagination"
            :total="table.total">
          </el-pagination>
        <!-- 分页结束 -->

<!-- 立项撤回对话框开始 -->
      <el-dialog
        title="立项撤回提交"
        :visible.sync="dialogVisible1"
        width="700px"
        class="dialogWidth"
        :before-close="init">
        <div class="diaTit">
              <div class="spans">项目名称</div>
              <div class="spanCon">:人工智能分链机器</div>
              <div class="spans" style="margin-left: 50px;">项目负责人</div>
              <div class="spanCon">:徐晓霞</div>
        </div>

          <div class="diaTit1">
            <div class="spans1">所在部门</div>
            <div>
              <el-input v-model="input"  placeholder="信通学院"></el-input>
            </div>
          </div>

          <div class="diaTit1">
            <div class="spans1">预算总经费</div>
            <div>
              <el-input v-model="input"  placeholder="6000"></el-input>
            </div>
          </div>

          <div class="diaTit1">
            <div class="spans1">联系电话</div>
            <div>
              <el-input v-model="input" placeholder="13854449525"></el-input>
            </div>
          </div>

          <div class="diaTit1">
            <div class="spans1" style="position: relative;top:-20px">撤回意见</div>
            <div>
              <el-input
                type="textarea"
                :rows="4"
                resize="none"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
            </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="commit2" class="diaBtn" >确认提交</el-button>
            <el-button @click="init" class="diaBtn">取消</el-button>
          </div>
      </el-dialog>
<!-- 立项撤回对话框开始 -->

<!-- 立项审核对话框开始 -->
      <el-dialog
          title="立项审核"
          :visible.sync="dialogVisible"
          class="dialogWidth"
          :before-close="init">
        
          <div class="diaTit">
              <div class="spans">项目名称</div>
              <div class="spanCon">:{{ auditDialog.projectName }}</div>
              <div class="spans" style="margin-left: 30px;">项目负责人</div>
              <div class="spanCon">:{{ auditDialog.person }}</div>
          </div>

            <div class="diaTit1">
              <div class="spans1">所在部门</div>
              <div>
                <el-input v-model="auditDialog.department" placeholder="信通学院"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">预算总经费</div>
              <div>
                <el-input v-model="auditDialog.fund" placeholder="6000"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">联系电话</div>
              <div>
                <el-input v-model="auditDialog.tel" placeholder="13854449525"></el-input>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="commit" class="diaBtn" >确认提交</el-button>
              <el-button @click="init" class="diaBtn">取消</el-button>
            </div>
      </el-dialog>
<!-- 立项审核对话框结束 -->
<!-- 删除通知开始 -->
      <el-dialog
      title="删除项目"
      :visible.sync="dialogVisible2"
      width="600px"
      class="addDialog">
      <div class="addDialogLogo">LOGO</div>
      <span class="deleteContent">确定删除项目?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDel" class="btn5">确认删除</el-button>
        <el-button @click="init" class="btn5" >取消</el-button>
      </span>
      </el-dialog>
<!-- 删除通知结束-->
  </div>
</template>

<script>

    export default {
      data() {
        return {
          iid:'',
          textarea:'',
          input:'',
          dialogVisible:false,//立项审核
          dialogVisible1:false,//立项撤回提交
          dialogVisible2:false,//删除
          // 分页数据
          table:{
            total:0,
            packageSize:8,
            currentPage:1
          },   
          tableData:[],    //列表数据
          
          selectInp:{  // 头部搜索框的内容
            filter:0,
            department:0,
            sort:0,
            person:'',
            state:99,
          },
          options:{    //头部搜索框下拉框数据
            projectFilter:[],//项目筛选
            department:[],//部门
            sort:[],//分类
            person:[],//负责人
            state:[//状态
              {
                value:99,
                label:'全部'
              },
              {
                value:0,
                label:'未审核'
              },
              {
                value:1,
                label:'正在审核'
              },
              {
                value:2,
                label:"已审核"
              },
            ],
          },
          auditDialog:{    //审核对话框数据
                projectName:'',
                person:'',
                department:'',
                fund:'',
                tel:''
          }
        }
      },
      methods:{
             
        init(){   
          this.dialogVisible=false;
          this.dialogVisible1=false;
          this.dialogVisible2=false;
        },
        audit(val){      //审核按钮
          // if(this.status==-1){
          //   this.dialogVisible=true;
          //   return
          // }else if(this.status){
          //   this.dialogVisible1=true;
          //   return
          // }else{
          //   this.dialogVisible=true;
          // }
          // console.log(val);
          // this.dialogVisible2=true
          this.iid=val   //将要删除的id进行存储供删除对话框使用
          if (val.isupload==0) {
            this.dialogVisible=true;
            // console.log(val);
            this.auditDialog.projectName=val.title;
            this.auditDialog.person=val.pro_leader;
            this.auditDialog.department=val.name;
            this.auditDialog.fund=val.money;
            this.auditDialog.tel=val.phone;
          }
            
            
        },
        appTable(val){   //查看申请表
          
        },
        commit(){    //立项审核对话框里面的确定提交按钮
          // console.log(this.iid);
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:this.iid.courseId
            }
            this.ajax
                .post(this.$store.state.api+"/ApproveProject",param)
                .then(res=>{
                    // console.log(res);
                    this.dialogVisible=false;
                    this.$message.success('提交成功')
                    this.getData()
                },err=>{
                  console.log(err);
                })
        },

        commit2(val){   //立项撤回对话框里面的确定撤回按钮
          this.dialogVisible1=false;
          this.status--
          // console.log(this.status);
        },

        handleSelectionChange(val) {   //批量选择功能后续可能用到 
          // console.log(val);
          this.multipleSelection = val;
        },
       
        lookDetail(val){    //查看详情按钮
          // console.log(val);
          localStorage.setItem("pid",JSON.stringify(val))
          this.$router.push('/projectApplicationDetails')
        },
        apply(){     //项目立项申请按钮
          this.$router.push('/projectApplicationApplyMain')
        },
        getData(){    //获取表格数据
          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,  //审核状态
            textInp:'',
            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.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
              },err=>{
                console.log(err);
              })  
        },
        del(val) {   //表格删除按钮，点击显示删除对话框
          // console.log(val);
          this.dialogVisible2=true
          this.iid=val   //将要删除的id进行存储供删除对话框使用
        },
        dialogDel(){   //确定删除这个项目
          // console.log(this.iid)
          if (this.iid.userid == this.$store.state.userInfo.userid) {
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:this.iid.courseId
            }
            this.ajax
                .post(this.$store.state.api+"/DeleteProject",param)
                .then(res=>{
                    // console.log(res);
                    if (res.data) {
                        this.$message.success('删除成功')
                        this.getData()
                        this.dialogVisible2=false
                        return
                    }else{
                      this.$message.error('删除失败')
                    }
                },err=>{
                  console.log(err);
                })
            }
          
        },
        handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getData()
        },
      },
      watch:{    //监视选择框的变化，实施刷新表格数据
          // options:{
          //   handler(){
          //     immediate:true
          //     deep:true
          //     this.getData()
          //   }
          // }
      },
      mounted(){      //跳转到此页面立刻获取数据
        this.getData();     //获取表格数据
      }

    }
</script>

<style lang="less">
.projectApplication{


  .el-table::before{
    height: 0;
  }
  .pagination{
    float: right;
    margin: 20px 35px 10px;
  }
  .addDialog{   //删除框
  font-size: 18px;
  .el-dialog{
    border-radius: 5px;
    overflow: hidden;
  }
  .deleteContent{
    margin: 30px 0;
    font-size: 22px;
    color: #000;
  }
  .addDialogLogo{
    width: 60px;
    height: 30px;
    line-height: 30px;
    background: #f2f2f2;
    position: absolute;
    left: 20px; top: 15px; 
  }
  .el-dialog__header{
  background: #32455b;
  }
  .el-dialog__title{
    color:#fff;
    font-size: 22px;
  }
  .addDialogMid{
    box-sizing: border-box;
    padding:0 60px 0 10px;
    .addDialogTit{
      display: flex;
      span{
        width: 80px;
        font-size: 16px;
        line-height: 40px;
        text-align: left;
        
      }
    }
    .addDialogTit1{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }
    .addDialogTit2{
      margin-top: 10px;
      font-size: 16px;
      color: #000;
      text-indent: 2em;
    }
    .addDialogCon{
      margin-top: 20px;
    }
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    .btn5{
      font-size: 16px;
    }
  }
}

  .dialogWidth{
      .el-input__inner{
        width: 300px;
      }
      .el-textarea__inner{
        width: 430px;
      }
      .el-dialog{
          width: 600px;
          border-radius: 5px;
          overflow: hidden;
        }
        .el-dialog__body{
          padding:30px 0px 30px 70px ;
        }
        
        .el-dialog__header{
          background: #32455b;
        }
        .el-dialog__title{
          color: #fff;
          position: relative;
          top: -5px;
          font-size: 18px;
        }

        .diaTit{     //项目名称、负责人
            width: 100%;
            display: flex;
            .spans{
              width: 84px;
              font-size: 16px;
              margin-right: 10px;
              display: inline-block;
              text-align: justify;
              color: #000;
              font-size: 16px;
              text-justify:distribute-all-lines;
              text-align-last: justify;
              transform: translate(0,22%);
              margin-bottom: 10px;
            }
            
        }
        .spanCon{
              font-size: 16px;
              margin-top: 5px;
              color: #a0a0a0;
            }
        .spans1{      //label
              min-width: 84px;
              font-size: 16px;
              color: #000;
              margin-right: 10px;
              display: inline-block;
              text-align: justify;
              text-justify:distribute-all-lines;
              text-align-last: justify;
              transform: translate(0,22%);
            }
          
          .diaTit1{   //label和input框
            display: flex;
            width: 80%;
            margin-top: 20px;
            
          }
          
        .dialog-footer{
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            .diaBtn{
              // width: 180px;
              // height: 35px;
              // line-height: 5px;
              font-size: 16px;
            }
        }
  }
  
}

</style>