ssti-CollegeManage/src/views/ProjectManagementFund2.vue

<template>
    <div class="ProjectManagementFund2">
      <div class="right">
        <div class="vfpHeader">
            <div class="titleOne">预算经费</div>
            <el-button type="primary" @click="back">返回</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"
        style="height: 500px;"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        @selection-change="handleSelectionChange">
        
        <el-table-column
          prop="projectName"
          align="center"
          label="活动名称"
          >
        </el-table-column>
        <el-table-column
          prop="projectPerson"
          align="center"

          label="负责人"
          >
        </el-table-column>
        <el-table-column
          prop="relevancy"
          align="center"

          label="项目类型"
          >
        </el-table-column>
        <el-table-column
          prop="budget"
          align="center"

          label="申请经费(元)"
          >
        </el-table-column>
        <el-table-column
          prop="dept"
          align="center"

          label="所在部门"
          >
        </el-table-column>

        <el-table-column
          prop="date"
          align="center"

          label="申请时间"
         >
        </el-table-column>
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          width="250px"
          >
          <template #default="scope">
              <div class="operations">
                  <!-- <el-button type="primary" > -->
                        <el-button type="primary" class="bt1" @click="MADetails(scope)" size="mini" >查看详情</el-button>
                        <el-button type="primary" class="bt1" size="mini">表单查看</el-button>
                  <!-- </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>




      <!-- 查看详情对话框开始 -->
      <el-dialog
        title="创客资金申请"
        :visible.sync="fundDetail"
        width="900px"
        class="projectApplicationfundAddDialog2"
        :before-close="init">
        <hr>
        <div style="display: flex;align-items: center;flex-wrap: wrap;">
          <div class="deleteContent1">
            <div class="dagSpan">项目名称</div>
              <el-select v-model="values.projectName" transfer="true" :popper-append-to-body="false"
                style="width: 70%;" placeholder="请选择">
                <el-option
                  v-for="item in projectNameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </div>
          <div class="deleteContent1">
              <div class="dagSpan">项目类型</div>
              <el-select v-model="values.projectType"  placeholder="请选择">
                <el-option
                  v-for="item in projectTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </div>
        </div>
        
        <div class="dagRemark">
          经费支出支出类别(单位:元)
        </div>

        <!-- 支出类别(单位:元)第一部分开始 -->
        <div class="dagInpS">
          <div class="dagInpS1">
            <div class="dagSpan">直接经费</div>
            <el-select v-model="values.fund"
            transfer="true" :popper-append-to-body="false"
            placeholder="请选择">
                <el-option
                  v-for="item in fundOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">预算</div>
            <el-input v-model="datas.budget1" placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">已支付</div>
            <el-input v-model="datas.Paid1" placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">余额</div>
            <el-input v-model="datas.balance1" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="dagInpS2">
            <div class="dagSpan2">事由</div>
              <el-input
                type="textarea"
                :rows="3"
                resize="none"
                placeholder="请输入内容"
                v-model="datas.reason1">
              </el-input>
        </div>
        <!-- 支出类别(单位:元)第一部分结束-->

 <!-- 支出类别(单位:元)第二部分开始 -->
 <div class="dagInpS">
          <div class="dagInpS1">
            <div class="dagSpan" style="width: 70px;">其他</div>
            <el-input v-model="datas.rests" style="width: 200px;" placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">预算</div>
            <el-input v-model="datas.budget2"  placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">已支付</div>
            <el-input v-model="datas.Paid2" placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">余额</div>
            <el-input v-model="datas.balance2" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="dagInpS2">
            <div class="dagSpan2">事由</div>
              <el-input
                type="textarea"
                :rows="3"
                resize="none"
                class="textArea"
                placeholder="请输入内容"
                v-model="datas.reason2">
              </el-input>
        </div>
        <!-- 支出类别(单位:元)第二部分结束-->



        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="init" style="font-size:16px" size="small">生成表单</el-button>
          <el-button type="primary" @click="init" style="font-size:16px" size="small">返回</el-button>
        </span>
      </el-dialog>
      <!-- 查看详情对话框结束 -->

  </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            fundDetail:false,
              projectNameOptions:[
                {
                  value: '1',
                  label: '北京烤鸭'
                },
                {
                  value: '2',
                  label: '胡辣汤'
                },
              ],
              projectTypeOptions:[
                  {
                    value: '1',
                    label: '军事'
                  },
                  {
                    value: '2',
                    label: '饮食'
                  },
              ],
              fundOptions:[
                  {
                    value: '1',
                    label: '10000'
                  },
                  {
                    value: '饮食',
                    label: '100000000'
                  },
              ],
              values:{
                projectName:'',
                projectType:'',
                fund:''
              },
              tableData:[{
                projectName:'陆地游泳辅助器',
                projectPerson:'王多鱼',
                relevancy:'西虹市',
                budget:'200万',
                date:'2022年-11月-12日',
                tel:'16625153432',
                status:'已审核',
                dept:'中德制造'
              },
              {
                projectName:'北极运冰',
                projectPerson:'王多鱼',
                relevancy:'西虹市',
                budget:'500万',
                date:'2022年-11月-12日',
                tel:'16625153432',
                status:'已审核',
                dept:'中德制造'

              }
              ],
              datas:{
                budget1:'',   //预算
                budget2:'',
                Paid1:'',     //已支付
                Paid2:'',
                balance1:'',   //余额
                balance2:'',
                reason1:'',
                reason2:'',
                rests:"",
              }
          }
        },
        methods:{
          init(){
            this.fundDetail=false;
          },
          content(){
          //   alert('111')
            this.$router.push('/ProjectManagementFund1')
          },
          remark(){
            this.$router.push('/ProjectManagementFund2')
          },
          MADetails(){
            this.fundDetail=true;
          },
          handleSelectionChange(){

          },
        }
      }
  </script>
  
  <style lang="less">
  .ProjectManagementFund2{
 
     .right{
      width: 100%;
     }
    .pmFund1Footer{   //分页
        width: 400px;
        float: right;
        margin-top: 30px;
    }


  .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{
      font-size: 22px;
    }
    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>