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

<template>
  <!-- 项目管理 资金申报明细 -->
    <div class="ProjectManagementFund2" v-loading="loading">
        <div class="vfpHeader">
            <div class="titleOne">预算经费</div>
            <el-button type="primary" @click="$router.push('/ProjectManagement')">返回</el-button>
        </div>
          <hr>
         <!-- 跳转导航开始 -->
         <div class="AppBar">
              <div @click="content">项目资金使用详情</div>
              <div @click="remark" class="AppBarActive">资金申报明细</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="title"
          align="center"
          label="活动名称"
          >
        </el-table-column>
        <el-table-column
          prop="pro_leader"
          align="center"
          label="负责人"
          >
        </el-table-column>
        <el-table-column
          prop="type"
          align="center"

          label="项目类型"
          >
        </el-table-column>
        <el-table-column
          prop="fund"
          align="center"
          label="申请经费(元)"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="所在部门"
          >
        </el-table-column>

        <el-table-column
          prop="dateTime"
          align="center"
          label="申请时间"
         >
        </el-table-column>
      </el-table>
      <!-- 表格结束 -->


        <el-pagination
        background
        class="paginations"
        layout="prev, pager, next"
        :total="1">
        </el-pagination>

  </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            tableData:[],
            loading:false,
          }
        },
        methods:{
          content(){
            this.$router.push('/ProjectManagementFund1')
          },
          remark(){
            this.$router.push('/ProjectManagementFund2')
          },
          getData(){
            this.loading = true;
            let param={
              uid:this.$store.state.userInfo.userid,
              cid:JSON.parse(localStorage.getItem('pid'))
            }
            // console.log(param);
            // return
            this.ajax
                .get(this.$store.state.api+'/SelectFundDetail',param)
                .then(res=>{
                    console.log(res.data[0]);
                    this.tableData=res.data[0]
                    this.loading = false;
                },err=>{
                    console.log(err);
                })
          },
        },
        mounted(){
          this.getData()
        }
      }
  </script>
  
  <style lang="less">
  .ProjectManagementFund2{
 
     .right{
      width: 100%;
     }
    .pmFund1Footer{   //分页
       display: flex;
       justify-content: flex-end;
       margin: 20px 50px 0 0;
    }


  .projectApplicationfundAddDialog2{


    .el-header {
      background-color: #3d67bc;
      color: #333;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-select-dropdown__item{
      text-align: left;
    }
    .el-dialog__title{
      color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
    }
    font-size: 16px !important;
    .el-dialog__header{
      display: flex;
      font-weight: bold;
      justify-content: flex-start;
    }
    .el-dialog__body{
      padding-top: 0px;
    }
    .dagSpan{
      min-width: 65px;
      max-width: 65px;
      display: flex;
      justify-content:flex-end;
      margin-right: 9px;
      align-items: center;
      font-size: 16px;
    }
    .deleteContent1{
      width: 55%;
      margin-bottom: 10px;
      display: flex;
    }

    .dagRemark{
      display: flex;
      margin: 20px 0px;
      font-size: 16px;
      font-weight: 550;
    }
    .dagInpS{
      // width: 100%;
      display: flex;
      font-size: 16px;

      justify-content: space-between;
      .dagInpS1{
        display: flex;
        min-width: 23%;
        max-width: 23%;
        font-size: 16px;

      }
      .dagInpS1:nth-child(1){
        min-width: 30%;
        max-width: 30%;
        .dagSpan{
          font-size: 16px;
          display: inline-block;
          text-align: justify;
          text-justify:distribute-all-lines;
          text-align-last: justify;
          transform: translate(0,22%);
        }
      }
      .dagInpSf1:nth-child(n+2) .dagSpan{
        font-size: 16px;
        min-width: 50px;
        max-width: 50px;

      }
    }
    .dagInpS2{
        margin:20px 0 20px 0;
        display: flex;
        font-size: 16px;

        .dagSpan2{
          font-size: 16px;

          max-width: 65px;
          min-width: 65px;
          margin-right: 10px;
          // text-align: right;
          display: inline-block;
          text-align: justify;
          text-justify:distribute-all-lines;
          text-align-last: justify;
        }
    }
  }

  .newWidth{
    width: 150px;
  }


  }
  </style>