ssti-CollegeManage/src/views/ProjectManagementFund2.vue

<template>
    <div class="ProjectManagementFund2">
      <div class="right">
          <div class="pAHeader">
              <div class="pAHeader1">预算经费</div>
              <div @click="$router.back()" style="margin-top: 10px;cursor: pointer;">返回</div>
          </div>
          <hr>
         <!-- 跳转导航开始 -->
         <div class="AppBar">
              <div class="newWidth" @click="content">项目资金使用详情</div>
              <div class="newWidth">
                <div @click="remark" style="width: 100%;">资金申报明细</div>
                <div class="pr1TitBass"></div>
              </div>
          </div>
          <!-- 跳转导航结束 -->
              

      <!-- 表格开始 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :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="850px"
        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="value" style="width: 70%;" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :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="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :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="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :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="input" placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">已支付</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
          <div class="dagInpS1">
            <div class="dagSpan">余额</div>
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="dagInpS2">
            <div class="dagSpan2">事由</div>
              <el-input
                type="textarea"
                :rows="3"
                resize="none"
                placeholder="请输入内容"
                v-model="textarea">
              </el-input>
        </div>
        <!-- 支出类别(单位:元)第一部分结束-->

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



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

  </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            fundDetail:false,
            options: [ 
              {
                value: '选项5',
                label: '北京烤鸭'
              }],
  
              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:'中德制造'

              }
              ],
            tableData2:[{
              sort:'人工智能设备购买',
              Fund:'20000.00',
              projectName:'项目协作费用',
              remark:'',
              state:'已使用'
              },
            ],
            textarea:'',
            input:'',
            value: '',
  
          }
        },
        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{

  .el-header {
      background-color: #3d67bc;
      color: #333;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .homeExitContent{
        color: #fff;
        display: flex;
        justify-content: space-between;
        width: 150px;
        // height: 30px;
        .homeName{
          float: left;
        }
        
      }
    }
  
  .pAHeader{
      width: 90%;
      display: flex;
      justify-content:space-between;
      .pAHeader1STit{
        font-size: 14px;
        line-height: 40px;
      }
      .pAHeader1{
        width: 150px;
        font-weight: 600;
        font-size: 22px;
        flex-shrink: 0;
      }
      .pAHeader2{
        height: 35px;
        line-height: 5px;
        color: #fff;
        background: #477edd;
      }
    }
     .right{
      width: 100%;
     }
    .pmFund1Footer{
        width: 400px;
        float: right;
        margin-top: 30px;
    }
    .textArea{
      display: flex;
      justify-content: flex-start;
        resize: none;outline: none;
        background: #f2f2f2;
        box-sizing: border-box;
        padding: 10px;
    }
    
    .table{
      border: #ccc 1px solid;
    }
    .projectApplicationfundAddDialog{
    position: relative;
    .deleteContent{
      // margin: 30px 0;
      width: 100%;
      text-align: center;
      font-size: 25px;
      color: #000;
    }
    .addDialogLogo{
      width: 60px;
      height: 30px;
      line-height: 30px;
      background: #f2f2f2;
      position: absolute;
      left: 10px;
      top: 10px;
      text-align: center;
    }
    .el-dialog__header{
      background: #32455b;
    }
    .el-dialog__title{
      margin-left:250px;
      color:rgb(246, 247, 246);
    }

    .dialog-footer{
      display: flex;
      justify-content: center;
      .btn5{
        background: #0e72e6;
        width: 200px;
      }
    }
  }
  .projectApplicationfundAddDialog2{
    .el-dialog__header{
      display: flex;
      font-weight: bold;
      justify-content: flex-start;
    }
    .el-dialog__body{
      padding-top: 0px;
    }
    .dagSpan{
      min-width: 60px;
      max-width: 60px;
      display: flex;
      justify-content:flex-end;
      margin-right: 9px;
      align-items: center;
    }
    .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;
      justify-content: space-between;
      .dagInpS1{
        display: flex;
        min-width: 23%;
        max-width: 23%;
      }
      .dagInpS1:nth-child(1){
        min-width: 30%;
        max-width: 30%;
        .dagSpan{
          display: inline-block;
          text-align: justify;
          text-justify:distribute-all-lines;
          text-align-last: justify;
          transform: translate(0,22%);
        }
      }
      .dagInpS1:nth-child(n+2) .dagSpan{
        min-width: 45px;
        max-width: 45px;

      }
    }
    .dagInpS2{
        margin:20px 0 20px 0;
        display: flex;
        .dagSpan2{
          max-width: 60px;
          min-width: 60px;
          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>