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

<template>
  <!-- 项目管理 项目资金使用情况 -->
  <div class="ProjectManagementFund1">
        <div class="vfpHeader">
            <div class="titleOne">预算经费</div>
            <el-button type="primary" @click="back">返回</el-button>
        </div>
          <hr>


          <!-- 跳转导航开始 -->
          <div class="AppBar">
              <div @click="content" class="AppBarActive">项目资金使用详情</div>
              <div @click="remark">资金申报明细</div>
          </div>

          <!-- 三个输入框开始 -->
          <div class="totalFund">
            <div class="totalFund1">
                <div class="totalFundLabel">预算总经费</div>
                <el-input v-model="allFund" placeholder="请输入内容"></el-input><span>(万)</span>
            </div>
            <div class="totalFund1">
                <div class="totalFundLabel" style="display: flex;justify-content: flex-end;">已经支出</div>
                <el-input v-model="useFund" placeholder="请输入内容"></el-input><span>(万)</span>
            </div>
            <div class="totalFund1">
                <div class="totalFundLabel" style="display: flex;justify-content: flex-end;">剩余</div>
                <el-input v-model="remainFund" placeholder="请输入内容"></el-input><span>(万)</span>
            </div>
          </div>
          <!-- 三个输入框结束 -->

          <!-- 经费月支出计划开始 -->
            <div class="tabTit">
              <div><p>经费月支出计划(元)</p></div>
            </div>
            <el-table
              :data="tableData"
              tooltip-effect="dark"
              stripe
              class="fontSize"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >
              <el-table-column
                prop="one"
                label="1月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="two"
                label="2月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="three"
                label="3月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="four"
                label="4月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="five"
                label="5月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="six"
                label="6月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="seven"
                label="7月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="eight"
                label="8月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="nine"
                label="9月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="ten"
                label="10月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="eleven"
                label="11月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="twelve"
                label="12月"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                align="center"
                width="100">
              </el-table-column>
            </el-table>
          <!-- 经费月支出计划结束-->

          <!-- 经费明细开始 -->
            <div class="tabTit">
              <div><p>经费明细</p></div>
              <!-- <el-button type="primary" @click="addBtn" >设置</el-button> -->
            </div>

            <el-table
              :data="tableData2"
              tooltip-effect="dark"
              stripe
              class="fontSize"
              style="height: 360px;"
              :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
              >
              <el-table-column
                prop="type"
                label="支出类别"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="disburseProject"
                label="支出项目"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="fund"
                label="金额(元)"
                align="center"
                >
              </el-table-column>
<!--               
              <el-table-column
                prop="state"
                label="状态"
                align="center"
                >
              </el-table-column> -->
              <el-table-column
                prop="textarea"
                label="备注"
                align="center"
               >
              </el-table-column>
              <!-- <el-table-column
                prop="operation"
                align="center"
                label="操作"
                >
                <template #default="scope">
                    <div class="operations">
                            <el-button type="primary" @click="lookDetail(scope)" size="mini">明细查看</el-button>
                    </div>
                </template>
                </el-table-column> -->
            </el-table>
          <!-- 经费明细结束 -->
            
          <!-- <div class="pmFund1Footer">
            <el-pagination
            background
            layout="prev, pager, next"
            :total="1">
            </el-pagination>
          </div> -->
</div>
</template>

<script>
    export default {
      data() {
        return {
          dialogVisible1:false,
          fundDetail:false,
          allFund:'',  //总经费
          useFund:0,   //已使用
          remainFund:'',  //剩余多少钱
          tableData:[],  //经费月支出经费计划
          tableData2:[],  //经费明细
          textarea:'',
          input:'',
          value: '',

        }
      },
      methods:{
        getData(){   //初始化完成获取基本数据进行填充
            let param={
              uid:this.$store.state.userInfo.userid,
              pid:JSON.parse(localStorage.getItem('pid'))
            }
              this.ajax
                    .get(this.$store.state.api+'/GetProjectDetailMessage',param)
                    .then(res=>{
                      console.log(res);
                      let GetData=JSON.parse(res.data[0][0].chapters)
                      // console.log(GetData);
                      // this.data=GetData
                      this.tableData=[GetData[1][0]]
                      this.tableData2=GetData[1][1]
                      console.log(this.tableData2);
                      this.tableData2.forEach((e)=>{
                        this.useFund=this.useFund+e.fund
                      })
                      this.allFund=res.data[0][0].money
                      this.useFund=this.useFund / 10000
                      this.remainFund=this.allFund - this.useFund
                      // console.log((this.useFund / 10000));
                      // console.log();
                    },err=>{
                      console.log(err);
                    })
          },
        content(){
          this.$router.push('/ProjectManagementFund1')
        },
        remark(){
          this.$router.push('/ProjectManagementFund2')
        },
      
        back(){
          this.$router.push('/ProjectManagement')
        }
      },
      mounted(){
        this.getData()
      }
    }
</script>

<style lang="less">
.ProjectManagementFund1{



  .pmFund1Footer{
      float: right;
      margin-top: 30px;
  }

  .totalFund{  //输入框样式  
    width: 85%;
    display: flex;
    justify-content: space-between;
    line-height: 25px;
    margin: 20px 0 30px;
    .totalFundLabel{
      min-width: 80px;
      display: inline-block;
      text-align: justify;
      text-justify:distribute-all-lines;
      text-align-last: justify;
      padding-right: 10px;
      font-size: 16px;
    }
    .totalFund1{
      width:320px;
      display: flex;
      align-items: center;
      position: relative;
      margin-right: 40px;
      span{
        position: absolute;
        top: 8px;
        right: -30px;
      }
    }
  
  }


  .newWidth{
    width: 150px;
  }

}
</style>