ssti-CollegeManage/src/views/projectManage/components/ProjectManagementActivity.vue

<template>
  <!-- 项目管理 活动开展 -->
    <div class="ProjectManagement3" v-loading="loading">
      <!-- <div class="vfpHeader"> -->
      <!-- 详情页 -->
        <!-- <div class="titleOne">项目管理</div>
        <div class="smallTitle" style="left: 100px;">项目进展详情</div>
        <el-button type="primary" @click="back">返回</el-button>
    </div>
      <hr> -->

      <!-- 跳转导航开始 -->
      <!-- <div class="AppBar">
        <div @click="content">项目基本内容</div>
        <div @click="remark">项目详情</div>
        <div @click="remark2" class="AppBarActive">活动开展</div>
        <div @click="remark4">项目附件</div>
        <div @click="remark5">项目结题附件</div>
      </div> -->
      <!-- 跳转导航结束 -->

      <!-- 表格部分开始 -->
      <div class="projectBlock">
        <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        width="100%"
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
       
        <el-table-column
          prop="title"
          label="活动名称"
          align="center"
          >
        </el-table-column>
        
        <el-table-column
          prop="pro_leader"
          label="负责人"
          align="center"
          >
        </el-table-column>
       
        <el-table-column
          prop="PName"
          label="关联项目"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="money"
          label="预算经费"
          align="center"
          >
        </el-table-column>
   
        <el-table-column
          prop="name"
          label="所在部门"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="date"
          label="活动时间"
          align="center"
          >
          <template #default="scope">
            {{ GetTime(scope.row.begin_at)}}
          </template>
        </el-table-column>


        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="220"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary"  size="mini" @click="detail(scope.row.acId)" style="background: #477edd">查看详情</el-button>
                      <!-- <el-button type="primary"  size="mini" @click='sqb' style="background: #477edd">申请表</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>
        <!-- 分页结束 -->

    </div>
  </template>
  
  <script>
      export default {
        props:['changeShow'],
        data() {
          return {
            loading:false,
            tableData:[],    //项目列表数据
            table:{         // 分页数据
              total:0,
              packageSize:9,
              currentPage:1
            },   
          }
        },
        methods:{
          getData(){
            this.loading = true;
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:this.$route.query['pid'],
              cid:"",
              leader:'',
              state:"",
              type:0,
              input:"",
              page:this.table.currentPage,
              lim:this.table.packageSize
            }
            // console.log(param);
            this.ajax
                  .get(this.$store.state.api+'/GetAllActivity',param)
                  .then(res=>{
                    this.tableData=res.data[0]
                    this.table.total=res.data[4][0].total
                    this.loading = false;
                  },err=>{
                    console.log(err);
                  })
          },
          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]
          }
        },
          handleCurrentChange(val) {   //当页数发生改变的时候调用获取列表数据请求
          // console.log(`当前页: ${val}`);
          this.table.currentPage=val
          this.getData()
        },
          detail(Id){
            // this.$router.push(`/ProjectManagementMain?Id=${this.$route.query['Id']}&pid=${this.$route.query['pid']}&aid=${Id}`);
            this.changeShow(5,Id)
          },    
        },
        mounted(){
          this.getData()
        }
      }
  </script>
  
  <style lang="less">
  .ProjectManagement3{
    .projectBlock{
      margin-top: 20px;
    }
    .pm1Tit{
        display: flex;
        margin-left: 20px;
        div{
          width: 130px;
          cursor: pointer;
          font-weight: 550;
        }
        .pr1TitBass{
          height: 2px;
          width: 100%;
          background: #3D67BC;
        }
    }
  }
  </style>