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

<template>
  <!-- 项目立项申请 -->
  <div class="projectApplication" v-loading="loading">
    <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=""></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=""></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=""></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"
        :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="sort"
          align="center"
          label="分类"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="fund"
          label="预算(万)"
          align="center"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="startTime"
          align="center"
          label="开始时间"
          min-width="11%">
        </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="550"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                <!-- {{ scope.row.isupload }} -->
                        <el-button type="primary"  size="mini" @click="lookDetail(scope.row.courseId,scope.row.typeid)">查看详情</el-button>

                        <el-button type="primary" v-show="scope.row.isupload==0" @click="audit(scope.row,0)"  size="mini" >审核</el-button> <!--0申请人审核 -->
                        <el-button type="primary" v-show="scope.row.isupload==1 " class="disa" size="mini" >审核中</el-button>
                        <el-button type="primary" v-show="scope.row.isupload==2"  class="disa"  size="mini">已审核</el-button>
                        <el-button type="primary" v-show="scope.row.isupload==3" class="disa" size="mini">待结项</el-button>
                        <el-button type="primary" v-show="scope.row.isupload==4" class="disa" size="mini">已结项</el-button>

                        
                        <el-button  v-show="scope.row.isupload==0" type="primary" class="disa" size="mini">审核</el-button>   <!--1管理员审核 -->
                        <el-button  v-show="scope.row.isupload==1" type="primary" size="mini" @click="audit(scope.row,1)">审核1</el-button>
                        <el-button  v-show="scope.row.isupload==2" type="primary" class="disa" size="mini">已审核</el-button>
                        <el-button  v-show="scope.row.isupload==3" type="primary" class="disa" size="mini">待结项</el-button>
                        <el-button  v-show="scope.row.isupload==4" type="primary" class="disa" size="mini">已结项</el-button>



                        <el-button type="primary"  size="mini" @click="appTable(scope.row.typeid,scope.row.courseId)" >申请表</el-button>

                        <el-button type="primary"  size="mini" @click="del(scope.row)">删除</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="dialogVisible"
          class="pageSubmitData"
          width="700px"
          :before-close="init">
        
          <div class="diaTit">
              <div class="addDialogLogo">LOGO</div>
              <div class="spans">项目名称：</div>
              <div class="spanCon">{{ auditDialog.projectName }}</div>
              <div class="spans">项目负责人：</div>
              <div class="spanCon">{{ auditDialog.person }}</div>
          </div>

            <div class="diaTit1">
              <div class="spans1">所在部门</div>
              <div class="inp">
                <el-input disabled v-model="auditDialog.department" placeholder="所在部门"></el-input>
              </div>
            </div>

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

            <div class="diaTit1">
              <div class="spans1">联系电话</div>
              <div class="inp">
                <el-input disabled v-model="auditDialog.tel" placeholder="联系电话"></el-input>
              </div>
            </div>
            <div class="diaTit1" v-show="isManager==1">
              <div class="spans1" style="position: relative;top:-24px">驳回意见</div>
              <div class="inp">
                <el-input
                  type="textarea"
                  :rows="5"
                  resize="none"
                  placeholder="请输入修改建议等..."
                  v-model="rejectApplyText">
                </el-input>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" v-show="isManager==0" @click="ApplyPersonCommit" class="AllDialogBtn" >审核</el-button>
              <el-button type="primary" v-show="isManager==1" @click="ManagerCommit" class="AllDialogBtn" >通过</el-button>
              <el-button type="primary" v-show="isManager==1" @click="rejectApply" class="AllDialogBtn" >驳回</el-button>
              <el-button @click="init" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
<!-- 立项审核对话框结束 -->
<!-- 删除通知开始 -->
      <el-dialog
      title="删除项目"
      :visible.sync="dialogVisible2"
      width="600px"
      class="pageSubmitData">
      <div class="addDialogLogo">LOGO</div>
      <div class="deleteContent">确定删除项目?</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDel" class="AllDialogBtn">确认删除</el-button>
        <el-button @click="init" class="AllDialogBtn" >取消</el-button>
      </span>
      </el-dialog>
<!-- 删除通知结束-->
      <!-- 文档预览开始 -->
        <el-dialog
        title="文档预览"
        :visible.sync="WordPreview"
        width="60%"
        class="pageSubmitData">
        <div class="addDialogLogo">LOGO</div>
        <MakerSpaceWordPreview v-if="PreviewTid == '5f7a66d5-c206-11ed-a4cd-509a4c5b67cf' && WordPreview " :data="PreviewData"/>
        <studentMakerProjectPreview v-if="PreviewTid == '5e21b204-c206-11ed-a4cd-509a4c5b67cf' && WordPreview" :data="PreviewData"/>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="downWord" class="AllDialogBtn">下载文档</el-button>
          <el-button @click="WordPreview = false" class="AllDialogBtn" >取消</el-button>
        </span>
        </el-dialog>
        
      <!-- <el-dialog
      title="文档预览"
      :visible.sync="WordPreview"
      width="60%"
      class="pageSubmitData">
      <div class="addDialogLogo">LOGO</div>
      <MakerSpaceWordPreview v-if="PreviewTid == '5f7a66d5-c206-11ed-a4cd-509a4c5b67cf' && WordPreview" :data="PreviewData"/>
      <studentMakerProjectPreview v-if="PreviewTid == '2f4c6e78-f2e7-11ed-a3f6-509a4c5b67cf' && WordPreview" :data="PreviewData"/>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downWord" class="AllDialogBtn">下载文档</el-button>
        <el-button @click="WordPreview = false" class="AllDialogBtn" >取消</el-button>
      </span>
      </el-dialog> -->
      <!-- 文档预览结束 -->
  </div>
</template>

<script>
import {MakerSpaceWord,MakerStudentWord} from '@/components/tool/getWord.js'
import MakerSpaceWordPreview from '@/components/MakerSpaceWordPreview.vue';
import studentMakerProjectPreview from '@/components/studentMakerProjectPreview.vue'
    export default {
      components:{MakerSpaceWordPreview,studentMakerProjectPreview},
      data() {
        return {
          iid:'',
          loading:false,
          textarea:'',
          input:'',
          dialogVisible:false,//立项审核
          dialogVisible1:false,//立项撤回提交
          dialogVisible2:false,//删除
          WordPreview:false,//文档预览
          PreviewTid:"",//预览分类ID
          PreviewData:"",//预览数据
          rejectApplyText:'',  //驳回-修改建议

          isManager:0,  //0申请人审核科-----  1管理员审核框
          // 分页数据
          table:{
            total:0,
            packageSize:7,
            currentPage:1
          },   
          tableData:[],    //列表数据
          
          selectInp:{  // 头部搜索框的内容
            filter:'',
            department:'',
            sort:'',
            person:'',
            state:'',
          },
          options:{    //头部搜索框下拉框数据
            projectFilter:[],//项目筛选
            department:[],//部门
            sort:[],//分类
            person:[],//负责人
            state:[//状态
              {
                value:'',
                label:'全部'
              },
              {
                value:0,
                label:'未审核'
              },
              {
                value:1,
                label:'审核中'
              },
              {
                value:2,
                label:'已审核'
              },
              {
                value:3,
                label:"待结项"
              },
              {
                value:4,
                label:"已结项"
              },
              
            ],
          },
          auditDialog:{    //审核对话框数据
                projectName:'',
                person:'',
                department:'',
                fund:'',
                tel:'',
                // cid:''
          }
        }
      },
      methods:{
        downWord(){
          if(this.PreviewTid=='5f7a66d5-c206-11ed-a4cd-509a4c5b67cf'){
            MakerSpaceWord(this.PreviewData[0],this.PreviewData[1]);
          }else{
            console.log(11);
            MakerStudentWord(this.PreviewData[0],this.PreviewData[1]);
          }
        },
        init(){   
          this.dialogVisible=false;
          this.dialogVisible1=false;
          this.dialogVisible2=false;
        },
        audit(val,num){      //审核按钮
            this.isManager=num;
            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.fund;
            this.auditDialog.tel=val.phone || '-';
            // this.auditDialog.cid=courseId
          // }
            
            
        },
        appTable(tid,pid){   //查看申请表
          if(tid=="5e21b204-c206-11ed-a4cd-509a4c5b67cf"){
            // downloadFile('/file/附件2：2023年学生创客项目申报书模板(2).docx',"2023年学生创客项目申报书模板.docx",(_b)=>this.loading = _b);
            this.ajax.get(this.$store.state.api+"/SelectProjectWordMakerStudent",{
              uid:this.$store.state.userInfo.userid,
              pid:pid
            }).then(res=>{
              // console.log(res['data']);
              this.PreviewData = [res['data'][0][0],res['data'][1]];
              
              // return console.log(this.PreviewData);
              this.WordPreview = true;
              this.PreviewTid = tid;
            }).catch(err=>{
              console.log(err)
            })
          }else if(tid=="5f7a66d5-c206-11ed-a4cd-509a4c5b67cf"){
            this.ajax.get(this.$store.state.api+"/SelectProjectWordMakerSpace",{
              uid:this.$store.state.userInfo.userid,
              pid:pid
            }).then(res=>{
              this.PreviewData = [res['data'][0][0],res['data'][1]];
              this.WordPreview = true;
              this.PreviewTid = tid;
              // MakerSpaceWord(res['data'][0][0],res['data'][1]);
            }).catch(err=>{
              console.log(err)
            })
          }else{
            this.$message.error("错误")
          }


        },
        ManagerCommit(){    //立项审核对话框里面的管理员通过按钮
          // console.log(this.iid);
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:this.iid.courseId,
              num:2
            }
            this.ajax
                // .post(this.$store.state.api+"/ApproveProject",param)
                .post(this.$store.state.api+"/updateIsupload",param)
                .then(res=>{
                    // console.log(res);
                    this.dialogVisible=false;
                    this.$message.success('提交成功')
                    this.getData()
                },err=>{
                  console.log(err);
                })
        },
        ApplyPersonCommit(){  //申请人审核按钮
          let param={
              uid:this.$store.state.userInfo.userid,
              pid:this.iid.courseId,
              num:1
            }
          this.ajax
              .post(this.$store.state.api+"/updateIsupload",param)    //updateIsupload
              .then(res=>{
                this.dialogVisible=false
                this.$message.success('已提交')
                this.getData()
              })
        },
        rejectApply(){   //立项审核对话框里面的驳回申请
          let param={
              uid:this.$store.state.userInfo.userid,
              pid:this.iid.courseId,
              num:0
            }
          this.ajax
              .post(this.$store.state.api+"/updateIsupload",param)
              .then(res=>{
                this.dialogVisible=false
                this.$message.success('已驳回项目申请')
                this.getData()
              })
              
        },

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

        handleSelectionChange(val) {   //批量选择功能后续可能用到 
          // console.log(val);
          this.multipleSelection = val;
        },
       
        lookDetail(val,tid){    //查看详情按钮
          console.log(tid);
          localStorage.setItem("pid",JSON.stringify(val))
          this.$router.push(`/projectApplicationDetailMain?Id=${tid}`)
        },
        apply(){     //项目立项申请按钮
          this.$router.push('/projectApplicationApplyMain')
        },
        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,  //审核状态
            endState:"",
            year:"",
            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=>{
                let data=res.data;
                console.log(data);
                if (data[0].length==0 && data[5][0]['total'] != 0) {
                  this.table.currentPage=1
                  return this.getData()
                }
                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.tableData.forEach(item=>{
                //   if(item['time']!=null&&item['time']!=''){
                //     item['time']=JSON.parse(item['time'])
                //   }else{
                //     item['time'] = []
                //   }
                // })
                this.loading = false;

                // console.log(this.tableData)
              },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;
  }

//   .addDialog{          //文档预览
//   font-size: 18px;
//   .el-dialog{
//     border-radius: 5px;
//     overflow: hidden;
//   }
//   .el-dialog__body{
//     display: flex;
//     justify-content: center;
//   }
//   .deleteContent{
//     // margin: 30px 0;
//     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;
//      position: relative;
//      top: -2px;
//   }
//   .el-dialog__title{
//     color:#fff;
//         display: flex;
//         justify-content: center;
//         font-size: 18px;
//         position: relative;
//         top: -2px;
//   }
//   .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;
//   }
// }

 
}

</style>