ssti-CollegeManage/src/views/activityManage/makerActvity.vue

<template>
  <!--创客活动 -->
  <div class="makerActvity" v-loading="loading">
    <div class="pAHeader">
      <div class="pAHeader1">创客活动</div>
      <!-- <el-button @click="makerActvityApply">创客活动申请</el-button> -->
    </div>
    <hr>

<!-- 搜索框开始 -->
    <div class="selectInp">
      <div class="manageSelects">
        <div class="selectsBlock">
          <div class="selectLabel">项目筛选</div>
          <el-select v-model="pavalues.value" @change="getData" placeholder="请选择">
            <el-option label="所有项目" value=""/>
            <el-option
              v-for="item in options"
              :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="pavalues.value4" @change="getData" placeholder="请选择">
            <el-option label="所有分类" value=""/>
            <el-option label="创客活动" :value="0"/>
            <el-option label="个人创客" :value="1"/>
            <!-- <el-option label="所有部门" value=""/>
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option> -->
          </el-select>
        </div>

        <div class="selectsBlock">
          <div class="selectLabel">所在部门</div>
          <el-select v-model="pavalues.value1" @change="getData" placeholder="请选择">
            <el-option label="所有部门" value=""/>
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <div class="selectLabel">负责人</div>
          <el-select v-model="pavalues.value2" @change="getData" placeholder="请选择">
            <el-option label="所有负责人" value=""></el-option>
            <el-option
              v-for="item in options2"
              :key="item.pro_leader"
              :label="item.pro_leader"
              :value="item.pro_leader">
            </el-option>
          </el-select>
        </div>

        <div class="selectsBlock">
          <div class="selectLabel">状态</div>
          <el-select v-model="pavalues.value3" @change="getData" placeholder="请选择">
            <el-option label="所有状态" value=""/>
            <el-option label="未审核" :value="0"/>
            <el-option label="未报销" :value="1"/> 
            <el-option label="已报销" :value="2"/>
          </el-select>
        </div>
      </div>
      <div class="ProjectManagementQuery">
        <el-input v-model="input" placeholder="请输入项目名称/编号"></el-input>
        <el-button type="primary" class="btn" size="mini" @click="getData">查询</el-button>
      </div>

    </div>
<!-- 搜索框结束 -->

<!-- 表格开始 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <el-table-column
          prop="ActivityNo"
          label="活动编号"
          align="center"
          min-width="7%">
        </el-table-column>
        <el-table-column
          prop="title"
          label="活动名称"
          align="center"
          min-width="10%">
        </el-table-column>
        <el-table-column
          prop="pro_leader"
          label="负责人"
          align="center"
          min-width="7%">
        </el-table-column>
        <el-table-column
          prop="PName"
          align="center"
          label="关联项目"
          min-width="9%">
          <template #default="scope">
            <div>
              {{ scope.row.PName!=null||scope.row.PName==''?scope.row.PName:"-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="money"
          align="center"
          label="预算经费（元）"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="所在部门"
          min-width="8%">
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          align="center"
          min-width="7%">
          <template #default="scope">
                <span v-if="scope.row.state==0">未审核</span>
                <span v-if="scope.row.state==1">待审核</span>
                <span v-if="scope.row.state==2">已审核</span>
                <span v-if="scope.row.state==3">已报销</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="begin_at"
          align="center"
          label="活动时间"
          min-width="12%">
          <template #default="scope">
            {{ GetTime(scope.row.begin_at)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          width="400"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                        <el-button type="primary"  @click="MADetails(scope.row.acId)" size="mini">查看详情</el-button>

                        <el-button type="primary" v-if="scope.row.state==0"  @click="audi(scope.row,0)" size="mini">审核</el-button>
                        <el-button type="primary" disabled v-show="scope.row.state>=1" class="disa" size="mini">审核</el-button>

                        <!-- <el-button type="primary"  @click="audi(scope.row,1)" size="mini">管理审核</el-button> -->
                        <el-button type="primary"  v-show="scope.row.state==1" @click="audi(scope.row,1)" size="mini">管审核</el-button>
                        <el-button type="primary" disabled v-show="scope.row.state==2" class="disa" size="mini">管审核</el-button>
                        <el-button type="primary" disabled v-show="scope.row.state!=2 && scope.row.state!=1" class="disa" size="mini">管审核</el-button>

                        
                        <!-- <el-button type="primary"  size="mini" @click="edit(scope.row.acId)">申请表</el-button> -->

                        <el-button type="primary" v-show="scope.row.state!=2 && scope.row.state!=3" class="disa" size="mini" @click="end(scope.row)" >完结</el-button>
                        <el-button type="primary" v-show="scope.row.state==2" size="mini" @click="end(scope.row)" >完结</el-button>
                        <el-button type="primary" v-show="scope.row.state==3" size="mini" class="disa">已完结</el-button>

              </div>
          </template>
        </el-table-column>
      </el-table>
<!-- 表格结束 -->
      <!-- 活动审核对话框开始 -->
      <el-dialog
          title="活动审核"
          :visible.sync="auditDialog"
          class="dialogWidth"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
        
          <div class="diaTit">
              <div class="spans">项目名称:</div>
              <div class="spanCon">{{ processTable.name }}</div>
              <div class="spans" style="margin-left: 30px;">项目负责人:</div>
              <div class="spanCon">{{ processTable.leader }}</div>
          </div>

            <div class="diaTit1">
              <div class="spans1">所在部门</div>
              <div>
                <el-input disabled v-model="processTable.className"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">预算总经费</div>
              <div>
                <el-input disabled v-model="processTable.money"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">联系电话</div>
              <div>
                <el-input disabled v-model="processTable.phone"></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" @click="Commit(1)" v-show="isManager==0" class="AllDialogBtn">确认提交</el-button>
              <el-button type="primary" @click="Commit(2)"  v-show="isManager==1" class="AllDialogBtn">通过</el-button>
              <el-button type="primary" @click="rejectApply"  v-show="isManager==1" class="AllDialogBtn">驳回</el-button>
              <el-button @click="init" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog>
      <!-- 活动审核对话框结束 -->

      <!-- 驳回提交对话框开始 -->
      <!-- <el-dialog
          title="驳回提交"
          :visible.sync="rejectDialog"
          class="dialogWidth"
          width="700px"
          :before-close="init">
          <div class="addDialogLogo">LOGO</div>
        
          <div class="diaTit">
              <div class="spans">项目名称:</div>
              <div class="spanCon">{{ processTable.name }}</div>
              <div class="spans" style="margin-left: 30px;">项目负责人:</div>
              <div class="spanCon">{{ processTable.leader }}</div>
          </div>

            <div class="diaTit1">
              <div class="spans1">所在部门</div>
              <div>
                <el-input disabled v-model="processTable.className"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">预算总经费</div>
              <div>
                <el-input disabled v-model="processTable.money"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1">联系电话</div>
              <div>
                <el-input disabled v-model="processTable.phone"></el-input>
              </div>
            </div>

            <div class="diaTit1">
              <div class="spans1" style="position: relative;top:-23px">撤回意见</div>
              <div>
                <el-input
                  type="textarea"
                  :rows="4"
                  style="width:200px"
                  resize="none"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input>
              </div>
            </div>


            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="commit2" class="AllDialogBtn">确认提交</el-button>
              <el-button @click="init" class="AllDialogBtn">取消</el-button>
            </div>
      </el-dialog> -->
      <!-- 驳回提交对话框结束 -->

    <!-- 完结对话框开始 -->
    <el-dialog
      title="提示"
      :visible.sync="endDialog"
      width="600px"
      class="endDialog"
      :before-close="init">
      <div class="addDialogLogo">LOGO</div>
      <div class="deleteContent">"{{ endTable.title }}"项目活动，是否确定完结？</div>
      <div class="deleteContent1">活动完结报告</div>
      <div class="download" v-for="(item,index) in endTable.file" :key="index">
        <div>{{ item.fileName }}</div>
        <el-button type="primary" @click="delEndTableFile(item.url)" size="mini">删除文件</el-button>
      </div>
      <el-progress style="margin-top:20px" v-show="progress.show" :percentage="progress.value" :format="ProgressFormat"></el-progress>
      <div class="addMoneyBtn">
          <div class="jia">+</div>添加
          <div id="upFile">
            <beUpload @getFile="getFile" :navName="'上传文件'" :progress="progress" :accept="accept"> </beUpload>
          </div>
      </div>
      <!-- <div class="DelBtn" style="margin-left: 0;" v-if="endTable.file!=''&&endTable.file!=null">
          <el-button type="primary" @click="endTable.file=''">删除文件</el-button>
      </div> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ending" class="AllDialogBtn">确认提交</el-button>
        <el-button @click="endDialog=false" class="AllDialogBtn">取消</el-button>
      </div>
    </el-dialog>

    <!-- 未完结资金查看开始 -->
    <el-dialog
      title="提示"
      :visible.sync="endFundDialog"
      width="600px"
      class="endDialog"
      :before-close="init">
      <div class="addDialogLogo">LOGO</div>
      <div class="deleteContent">"{{ endTable.title }}"项目活动还有资金未完结！</div>
      <div class="deleteContent1">未完结资金编号</div>

      <div class="download" v-for="(item,index) in endFundData" :key="item.fid">
        <div>{{ item.fundNo }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="endFundDialog = false" class="AllDialogBtn">确认</el-button>
        <el-button @click="endFundDialog=false" class="AllDialogBtn">取消</el-button>
      </div>
    </el-dialog>
    <!-- 未完结资金查看结束 -->
    <!-- 完结对话框结束 -->
    <!-- 活动管理word文档预览开始 -->
    <!-- <el-dialog
      title="提示"
      :visible.sync="activityWord"
      width="65%"
      top="50px"
      class="endDialog">
      <div class="addDialogLogo">LOGO</div>
      <div class="core_dialogue">
        <makerActivityWord :data="wordData"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getWord()" class="AllDialogBtn">下载</el-button>
        <el-button @click="activityWord = false" class="AllDialogBtn">取消</el-button>
      </div>

    </el-dialog> -->
    <!-- 活动管理word文档预览结束 -->
    <!-- 分页 -->
    <el-pagination
        @current-change="CurrentChange"
        :page-size="Page.lim"
        layout=" prev, pager, next"
        background
        class="paginations"
        :total="Page.total">
      </el-pagination>
  </div>
</template>

<script>
import beUpload from '../../components/tool/beUpload';
import makerActivityWord from '@/components/makerActivityWord.vue';
import { ActivityWord } from '@/components/tool/getWord';
// import downloadFile from '@/components/tool/downloadFile.js';
    export default {
      components:{beUpload,makerActivityWord},
      data() {
        return {
          loading:false,
          accept:"*",
          status:1,
          textarea:'',
          input:'',
          btnState:0,
          isManager:'',  //审核框与驳回框的区别 0申请人 1管理员
          endDialog:false,  //完结对话框
          auditDialog:false,   //审核对话框
          rejectDialog:false,   //驳回对话框
          endFundDialog:false,//未完结资金
          endFundData:[],
          // activityWord:false,
          rejectApplyText:'',//驳回数据
          options:[],
          options1:[],
          options2:[],
          // 表格数据
          tableData:[],
          // 四个下拉框数据
          pavalues:{
            value:'',//项目ID
            value1:'',//部门ID
            value2:'',//负责人
            value3:'',//状态
            value4:"",//分类
          },
          Page:{
            nowPage:1,
            total:10,
            lim:8
          },
          processTable:{
            Id:"",
            name:"",
            leader:"",
            className:"",
            money:"",
            phone:""
          },
          endTable:{
            Id:"",
            title:"",
            file:[],
          },
          progress:{
            value:0,
            show:false
          },
          wordData:{},
        }
      },
      methods:{
        getFile(val) {//上传文件
          this.endTable.file.push(val);
          this.progress.show = false;
        },
        delEndTableFile(url){
          this.endTable.file = this.endTable.file.filter(item=>item.url!=url);
        },
        // cancelEndTableFile(){
        //   if(this.endTable.file.length>=1){
        //     this.$confirm('文件还未上传,确定取消吗?', '提示', {
        //       confirmButtonText: '确定',
        //       cancelButtonText: '取消',
        //       type: 'warning'
        //     }).then(() => {
        //       this.endDialog = false;
        //     })
        //   }else{
        //     this.endDialog = false;
        //   }
        // },
        init(){//重置
          this.auditDialog=false;
          this.endDialog=false;
          this.rejectDialog=false;
        },
        
        

        // 驳回对话框确定
        commit2(){
          this.rejectDialog=false;
          this.status++
        },

        controlActiveState(){    //控制活动状态

        },


        end(val){//完结按钮
          this.ajax.get(this.$store.state.api+'/getNoEndFundByActivity',{
            uid:this.$store.state.userInfo.userid,
            aid:val.acId
          }).then(result=>{
            console.log(result);
            if(result['data'][0].length>0){
              this.endTable.title = val.title;
              this.endFundData = result['data'][0];
              this.endFundDialog = true;
            }else{
              this.endTable.title = val.title;
              this.endTable.Id = val.acId;
              this.endTable.file = val.reportFile==''||val.reportFile==null?[]:val.reportFile;
              this.endDialog=true;
            }
          }).catch(err=>{
            console.log(err);
          })
   
        },
        ending(){   //完结提交
          if(this.endTable.file.length<=0)return this.$message.error("请上传完结报告");
          this.ajax.post(this.$store.state.api+"/UploadActivityFile",{
            uid:this.$store.state.userInfo.userid,
            aid:this.endTable.Id,
            file:JSON.stringify(this.endTable.file),
          }).then(res=>{
            if(res.data==1){
              this.ajax.post(this.$store.state.api+"/UpdateActivityState",{
                uid:this.$store.state.userInfo.userid,
                aid:this.endTable.Id,
                st:3,
              }).then(res2=>{
                if(res2.data==1){
                  this.$message.success("结项成功");
                  this.endDialog = false;
                  this.getData()
                }else{
                  this.$message.error("结项失败")
                }
                this.getData();
              }).catch(err2=>{
                console.log(err2)
              })
            }else{
              this.$message.error("结项失败")
            }
          })
        },
        
        // edit(Id){ // 申请表按钮
        //   this.ajax.get(this.$store.state.api+"/SelectActivityWord",{
        //     uid:this.$store.state.userInfo.userid,
        //     aid:Id
        //   }).then(res=>{
        //     // ActivityWord(res.data[0][0])
        //     this.wordData = res.data[0][0];
        //     this.activityWord = true;
        //   }).catch(err=>{
        //     this.$message.error("错误"+err.message)
        //   })
        //   // downloadFile('/file/附件 2：创客专项资金项目申请表（创客活动）.doc',"创客专项资金项目申请表（创客活动）.doc",(_b)=>this.loading = _b);
        // },

        //下载申请表
        getWord(){
          ActivityWord(this.wordData) 
        },
             
        audi(row,num){  // 管理员、申请人，审核按钮
          this.isManager=num
          this.processTable.Id = row.acId;
          this.processTable.name = row.title;
          this.processTable.leader = row.pro_leader;
          this.processTable.money = row.money,
          this.processTable.phone = row.phone,
          this.processTable.className = row.name;
          this.auditDialog = true;
        },

        Commit(val){
          this.ajax.post(this.$store.state.api+"/UpdateActivityState",{
            uid:this.$store.state.userInfo.userid,
            aid:this.processTable.Id,
            st:val,
          }).then(res=>{
            if(res.data==1){
              this.$message.success("审核成功");
              this.auditDialog = false;
              for(let i in this.processTable)this.processTable[i] = '';
              this.getData()
            }else{
              this.$message.error("审核失败")
            }
            this.getData();
          }).catch(err=>{
            this.$message.error(err.message)
          })
        },

        rejectApply(){
          this.ajax.post(this.$store.state.api+"/UpdateActivityState",{
            uid:this.$store.state.userInfo.userid,
            aid:this.processTable.Id,
            st:0,
          }).then(res=>{
            if(res.data==1){
              this.$message.success("已驳回");
              this.auditDialog = false;
              for(let i in this.processTable)this.processTable[i] = '';
              this.getData()
            }else{
              this.$message.error("驳回失败")
            }
            this.getData();
          }).catch(err=>{
            this.$message.error(err.message)
          })
        },
        makerActvityApply(){  // 创客活动申请按钮
          this.$router.push('/makerActvityApplyMain')
        },
   
        MADetails(Id){   // 查看详情
          this.$router.push(`/makerActvityWordDetail?Id=${Id}`)
        },
        CurrentChange(nowPage){
          this.Page.nowPage = nowPage;
          this.getData();
        },
        getData(){
          this.loading = true;
          this.ajax.get(this.$store.state.api+"/GetAllActivity",{
            uid:this.$store.state.userInfo.userid,
            pid:this.pavalues.value,
            cid:this.pavalues.value1,
            leader:this.pavalues.value2,
            state:this.pavalues.value3,
            type:this.pavalues.value4,
            inp:this.input,
            page:this.Page.nowPage,
            lim:this.Page.lim,
          }).then(res=>{
            let data = res.data;
            if(data[0].length==0&&data[4][0]['total']!=0){
              this.Page.nowPage = 1;
              this.getData(); 
            }
            data[0].forEach(item=>item.reportFile = item.reportFile==''||item.reportFile==null?[]:JSON.parse(item.reportFile));
            this.tableData = data[0];
            this.options = data[1];
            this.options1 = data[2];
            this.options2 = data[3];
            this.Page.total = data[4][0]['total'];
            this.loading = false;
          }).catch(err=>{
            this.$message.error(err.message)
          })
        },
        GetTime(data){
          let cdata = JSON.parse(data);
          if(cdata[0]==cdata[1])return cdata[0];
          let sp1 = cdata[0].split(' ')[0].split('-')
          let sp2 = cdata[1].split(' ')[0].split('-')
          if(sp1[0]==sp2[0]){
            if(sp1[1]==sp2[1]){
              return `${sp1[0]}-${sp1[1]}-${sp1[2]} 至 ${sp2[2]}`
            }else{
              return `${sp1[0]}-${sp1[1]}-${sp1[2]} 至 ${sp2[1]}-${sp2[2]}`
            }           
          }else{
            return cdata[0]+" 至 "+cdata[1]
          }
        },
        //精度条样式
        ProgressFormat(value){
          return value ==100?'100%':`${value}%`
        }
      },
      mounted() {
        this.getData();
      },
    }
</script>

<style lang="less">
.makerActvity{
  position: relative;
  width: 100%;
  height: 100%;

  .dialogWidth{
      .el-input__inner{
        width: 300px;
      }
      .el-textarea__inner{
        width: 380px;
      }
      .el-dialog{
          width: 600px;
          border-radius: 5px;
          overflow: hidden;
        }
        .el-dialog__body{
          padding:30px 0px 30px 90px ;
        }
        .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{
          display: flex;
          justify-content: center;
          background: #32455b;
        }
        .el-dialog__title{
          color: #fff;
          position: relative;
          top: -2px;
          font-size: 18px;
        }

        .diaTit{     //dialog项目名称、负责人
            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;
        }

  .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;
      justify-content: center;
      position: relative;
      top: -2px;
      font-size: 18px;
    }
    .el-dialog{
          width: 600px;
          border-radius: 5px;
          overflow: hidden;
        }
    .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 10px;
      width: 100%;
      text-align: left;
      font-size: 16px;
      font-weight: bold;
      color: #5391fd;
      display: flex;
      justify-content: space-between;
    }

    .addDialogLogo{
      width: 60px;
        height: 30px;
        display: flex;
        justify-content: center;
        line-height: 30px;
        border-radius: 5px;
        background: #f2f2f2;
        position: absolute;
        left: 20px; top: 15px; 
    }
  }
}
.pagination{
  // position: absolute;
    float: right;
    margin: 20px 35px 10px;
  }
  .downloadList{
        width: 80%;
      }
</style>