ssti-CollegeManage/src/views/fundManage/makerfundDetails.vue

<template>
  <!-- 创客资金申请表单 -->
<div class="makerfundApply">
  <div class="vfpHeader">
      <div class="titleOne">创客资金申请详情</div>
      <el-button type="primary" @click="$router.back()">返回</el-button>
  </div>
  <hr>


  <!-- 项目名称、类型开始 -->
  <div class="Apply1">
      <div class="inpInterval">项目名称</div>
      <el-select v-model="selects.projectName" disabled style="width: 30%;" placeholder="请选择">
          <el-option
          v-for="item in projectFilter"
          :key="item.id"
          :label="item.title"
          :value="item.id">
          </el-option>
      </el-select>
  </div>
  <div class="Apply1">
      <div class="inpInterval">项目类型</div>
      <el-select v-model="selects.projectType" disabled placeholder="请选择">
          <el-option
          v-for="item in projectType"
          :key="item.id"
          :label="item.name"
          :value="item.name">
          </el-option>
      </el-select>
  </div>
  <!-- 项目名称、类型结束 -->




  <div class="tabTit">
          <div>
              <p>经费支出类别(单位:元)</p>
          </div>
  </div>
  <hr>
  <div class="moneyBlock" v-for="(item,index) in directFundBlock" :key="index">          <!-- 直接经费 -->
      <div class="howMoneyFlex">
          <div class="howMoney">
              <div class="inpInterval">直接经费</div>
              <el-select v-model="item.directFundData" placeholder="请选择">
                  <el-option
                  v-for="item in item.directFundSelects"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
          </div>
          <div class="howMoney">
              <div class="inpInterval twoStyle">预算</div>
              <el-input v-model="item.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
          </div>
          <div class="howMoney">
              <div class="inpInterval twoStyle">已支付</div>
              <el-input v-model="item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
          </div>
          <div class="howMoney">
              <div class="inpInterval twoStyle">余额</div>
              <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
          </div>
          <el-button v-show="index!=0" type="primary" style="font-size: 16px;" @click="delDerData(index)">删除</el-button>
      </div>
      <div class="howMoney" style="margin-top:20px">
          <div class="inpInterval" style="position: relative;top:-20px">事由</div>
          <el-input
          type="textarea"
          :rows="3"
          class="textArea"
          resize="none"
          style="width:800px"
          placeholder="请输入内容"
          v-model="item.reason">
          </el-input>
      </div>
  </div>
  <div>
      <div class="addMoneyBtn" @click="addDirectFund">
          <div class="jia">+</div>添加
      </div>
  </div>


  <div>                                                                                  <!-- 间接经费 -->
      <div class="moneyBlock" v-for="(item,i) in indirectFundBlock" :key="i">       
          <div class="howMoneyFlex">
              <div class="howMoney">
                  <div class="inpInterval">间接经费</div>
                  <el-select v-model="item.indirectFundData" placeholder="请选择">
                      <el-option
                      v-for="item in item.indirectFundSelects"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                  </el-select>
              </div>
              <div class="howMoney">
                  <div class="inpInterval twoStyle">预算</div>
                  <el-input v-model="item.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
              </div>
              <div class="howMoney">
                  <div class="inpInterval twoStyle">已支付</div>
                  <el-input v-model="item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>

              </div>
              <div class="howMoney">
                  <div class="inpInterval twoStyle">余额</div>
                  <el-input disabled :value="item.budget - item.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
              </div>
              <el-button v-show="i!=0" type="primary" style="font-size: 16px;" @click="delInDerData(i)">删除</el-button>
          </div>
          <div class="howMoney" style="margin-top:20px">
              <div class="inpInterval" style="position: relative;top:-20px">事由</div>
              <el-input
              type="textarea"
              :rows="3"
              class="textArea"
              resize="none"
              style="width:800px"
              placeholder="请输入内容"
              v-model="item.reason">
              </el-input>
          </div>
         
      </div>
  </div>
  <div>
      <div class="addMoneyBtn" @click="addIndirectFund">
          <div class="jia">+</div>添加
      </div>
  </div>



  <div class="moneyBlock">          <!-- 其他经费 -->
      <div class="howMoneyFlex">
          <div class="howMoney">
              <div class="inpInterval" >其他</div>
              <el-input v-model="residue.elseReason" placeholder="请输入内容"></el-input>
          </div>
          <div class="howMoney">
              <div class="inpInterval twoStyle">预算</div>
              <el-input v-model="residue.budget" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
          </div>
          <div class="howMoney">
              <div class="inpInterval twoStyle">已支付</div>
              <el-input v-model="residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
          </div>
          <div class="howMoney">
              <div class="inpInterval twoStyle">余额</div>
              <el-input disabled :value="residue.budget - residue.usedFund" type="number" class="inputNumber howMoneyInp" placeholder="金额"></el-input>
          </div>
      </div>
      <div class="howMoney" style="margin-top:20px">
          <div class="inpInterval" style="position: relative;top:-20px">备注</div>
          <el-input
          type="textarea"
          :rows="3"
          resize="none"
          class="textArea"
          style="width:800px"
          placeholder="请输入内容"
          v-model="residue.reason">
          </el-input>
      </div>

  </div>


  <div>                            <!-- 附件上传 -->
      <div class="tabTit">
          <div><p>附件上传</p></div>
      </div>
      <hr>
      <div style="display: flex;flex-wrap: wrap;width: 100%;margin-bottom: 45px;">

              <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              style="position: relative;margin-left: 10px;"
              disabled
              :on-remove="handleRemove">
              <BeUpload @getFile="getFile" style="position: absolute;left: 0;width: 147px;height: 100%;opacity: 0;" class="uploadPic" :navName="'上传封面'" :accept="accept"></BeUpload>
              <i class="el-icon-plus"></i>
              </el-upload>

              <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              class="delUpload"
              style="position: relative;"
              v-show="file[0]"
              disabled
              v-for="(item,index) in this.file" :key="index"
              >
              
              <span class="delUploadBtnSty" @click="delUploadBtn(index)">×</span>
              <img style="position: absolute;left: -1px;top:-1px;width: 149px;height: 101%;border-radius: 5px;" :src="dialogImageUrl" alt="">
              <div style="position: absolute;left: -20%;bottom: -30px;width: 200px;height: 30px;color: #000;line-height: 30px;display: flex;justify-content: center;">{{ item.fileName }}</div>
              <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
              </el-upload>
             
      </div>
  </div>



  <div class="baseBtn">
      <div class="blockWidth">
          <el-button type="primary">生成表单</el-button>
          <el-button type="primary" @click="uploadData">保存</el-button>
          <el-button v-show="status==0" style="width: 120px;" @click="endDialogShow()"  type="primary">审核</el-button>
          <el-button v-show="status==1" style="width: 120px;background-color: #c8c9cc !important;border-color: #c8c9cc;cursor: no-drop;" type="primary">审核</el-button>
          <el-button v-show="status==2" style="width: 120px;background-color: #c8c9cc !important;border-color: #c8c9cc;cursor: no-drop;" type="primary">审核</el-button>
      </div>
  </div>

      <!-- 提交对话框开始 -->
      <el-dialog
        title="提示"
        :visible.sync="submitHint"
        width="600px"
        class="projectApplicationfundAddDialog"
        :before-close="init">
        <div class="addDialogLogo">LOGO</div>
        <div class="deleteContent">确定修改？</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitAll" class="AllDialogBtn">确认提交</el-button>
          <el-button @click="init" class="AllDialogBtn" size="small">取消</el-button>
        </span>
      </el-dialog>
    <!-- 提交对话框结束 -->

      <!-- 审核对话框框开始 -->
      <el-dialog
        title="提示"
        :visible.sync="auditDialog"
        width="600px"
        class="projectApplicationfundAddDialog"
        :before-close="init">
        <div class="addDialogLogo">LOGO</div>
        <div class="deleteContent">确定完成审核？</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitAudit" class="AllDialogBtn">确认审核</el-button>
          <el-button @click="auditDialog=false" class="AllDialogBtn" size="small">取消</el-button>
        </span>
      </el-dialog>
    <!-- 审核对话框结束 -->

</div>
</template>

<script>
  import BeUpload from "../../components/tool/beUpload.vue";

export default {
  components: {
      BeUpload,
    },
  data() {
      return {
          accept:"*",
          status:'',   //审核状态
          fid:'',
          submitHint:false,   //提交按钮
          auditDialog:false,   //审核按钮
          dialogImageUrl:require('../../assets/img/zzpic426.jpg'),
          disabled: false,
          file:[],
          selects:{
              projectName:'',
              projectType:''
          },
          projectFilter:[],    //项目名称
          projectType:[     //项目类型
              {
                  id:1,
                  name:'个人创客'
              },
              {
                  id:2,
                  name:'创客活动'
              }
          ],      
          directFundBlock:[   //直接经费
              {
                  directFundData:'',
                  directFundSelects:[
                      {
                          value:1,
                          label:'小型仪器设备费'
                      },
                      {
                          value:2,
                          label:'材料费'
                      },
                      {
                          value:3,
                          label:'测试化验加工费'
                      },
                      {
                          value:4,
                          label:'项目协作费'
                      },
                      {
                          value:5,
                          label:'其他支出'
                      },
                  ],
                  budget:'',         //预算
                  usedFund:'',       //已使用
                  reason:''          //理由
              }
          ], 
          newDirectFundBlock:{     //添加直接经费
              directFundData:'',
              directFundSelects:[
                      {
                          value:1,
                          label:'小型仪器设备费'
                      },
                      {
                          value:2,
                          label:'材料费'
                      },
                      {
                          value:3,
                          label:'测试化验加工费'
                      },
                      {
                          value:4,
                          label:'项目协作费'
                      },
                      {
                          value:5,
                          label:'其他支出'
                      },
              ],
              budget:'',         //预算
              usedFund:'',       //已使用
              reason:''          //理由
          },



          indirectFundBlock:[    //间接经费
              {
                  indirectFundData:'',
                  indirectFundSelects:[
                      {
                          value:1,
                          label:'项目成功鉴定费'
                      },
                      {
                          value:2,
                          label:'参展参赛费'
                      },
                      {
                          value:3,
                          label:'创客交流活动费'
                      },
                      {
                          value:4,
                          label:'知识产权事务费'
                      },
                      {
                          value:5,
                          label:'其他支出'
                      },
                  ],
                  budget:'',         //预算
                  usedFund:'',       //已使用
                  reason:''          //理由
              }
          ], 
          newIndirectFundBlock:{    //添加间接经费
              indirectFundData:'',
              indirectFundSelects:[
                      {
                          value:1,
                          label:'项目成功鉴定费'
                      },
                      {
                          value:2,
                          label:'参展参赛费'
                      },
                      {
                          value:3,
                          label:'创客交流活动费'
                      },
                      {
                          value:4,
                          label:'知识产权事务费'
                      },
                      {
                          value:5,
                          label:'其他支出'
                      },
              ],
              budget:'',         //预算
              usedFund:'',       //已使用
              reason:''          //理由
          },
          

          residue:{                 //其他
                  elseReason:'',
                  budget:'',
                  usedFund:'',
                  reason:'',
              }
          ,
      }
  },

  methods:{
    endDialogShow(){    //审核对话框显示
        this.auditDialog=true
    },
    submitAudit(){       //确定审核
        let param={
            uid:this.$store.state.userInfo.userid,
            fid:this.fid,
            status:1
          }
          this.ajax
              .post(this.$store.state.api+"/UpdateMakerFundState",param)
              .then(res=>{
                  this.auditDialog=false;
                  if (res.data) {
                      this.$message.success('审核成功')
                      this.getData()
                    }else{
                      this.$message.error('审核失败')
                    }
              },err=>{
                console.log(err);
              })
    },
      delInDerData(index){                       //删除间接经费
          this.indirectFundBlock.splice(index,1)
      },
      delDerData(index){                   //删除直接经费
          console.log(index);
          this.directFundBlock.splice(index,1)
      },
      delUploadBtn(index){           //删除上传文件
          console.log(index);
          this.file.splice(index,1)
          this.$message.success('删除成功')
      },
      handleRemove(index) {
          console.log(index);
      },
      uploadData(){
          this.submitHint=true;
      },
      submitAll(){
          if(this.selects.projectName=='') return this.$message.error('请选择项目名称')
          if(this.selects.projectType=='') return this.$message.error('请选择项目类型')

          let dirSum = this.directFundBlock.reduce((per,cur)=>{
              return per*1+cur.budget*1
          },0)
          let indirSum =this.indirectFundBlock.reduce((per,cur)=>{
              return per*1+cur.budget*1
          },0)
          let allSum=dirSum+indirSum+this.residue.budget*1

          let usedDirSum = this.directFundBlock.reduce((per,cur)=>{
              return per*1+cur.usedFund*1
          },0)
          let usedIndirSum =this.indirectFundBlock.reduce((per,cur)=>{
              return per*1+cur.usedFund*1
          },0)
          let usedAllSum=usedDirSum+usedIndirSum+this.residue.usedFund*1


          let param={
              uid:this.$store.state.userInfo.userid,
              cid:this.selects.projectName,
              fid:this.$route.query['Id'],
              type:this.selects.projectType,
              dir:JSON.stringify(this.directFundBlock),
              indir:JSON.stringify(this.indirectFundBlock),
              elseFund:JSON.stringify(this.residue),
              file:JSON.stringify(this.file),
              AllSum:allSum,
              usedSum:usedAllSum
          }
          this.ajax
              .post(this.$store.state.api+'/UpdateMakerFund',param)
              .then(res=>{
                  console.log(res);
                  if (res.data==1){
                      this.$message.success('创建成功')
                      return this.submitHint=false
                  }else{
                      this.$message.error('创建失败')
                  }
              },err=>{
                  console.log(err);
              })
      },
      getFile(val) {       //上传封面
          console.log(val);
          this.file.push(val)
      },
      getData(){
          let param={
            uid:this.$store.state.userInfo.userid,
            fid:this.$route.query['Id']
          }
          // console.log(param);
          this.ajax
              .get(this.$store.state.api+'/SelectMakerFundSelects',param)
              .then(res=>{
                  console.log(res.data);
                  let data=res.data;
                  this.directFundBlock=JSON.parse(data[0][0].directFund);
                  this.indirectFundBlock=JSON.parse(data[0][0].indirectFund);
                  this.residue=JSON.parse(data[0][0].elseFund);
                  this.file=JSON.parse(data[0][0].fundFile);
                  this.selects.projectName=data[0][0].courseId;
                  this.selects.projectType=data[0][0].type;
                  this.status=data[0][0].state;
                  this.fid=data[0][0].fid;
                  this.projectFilter=data[1];
              },err=>{
                  console.log(err);
              })
      },
      addDirectFund(){           //添加直接经费
          let oldArr={};
          Object.assign(oldArr,this.newDirectFundBlock)
          this.directFundBlock.push(oldArr)
          for(let k in this.newDirectFundBlock) return this.newDirectFundBlock[k]=''
      },
      addIndirectFund(){         //添加间接经费
          // this.indirectFundBlock.push(this.newIndirectFundBlock)
          let oldArr={};
          Object.assign(oldArr,this.newIndirectFundBlock)
          this.indirectFundBlock.push(oldArr)
          for(let k in this.newIndirectFundBlock) return this.newIndirectFundBlock[k]=''
      },
      init(){
              //重置
              this.submitHint=false;
              
      },
  },
  mounted(){
      this.getData()
    //   console.log(this.$route.query['Id']);
  }
}
</script>

<style lang="less">
.makerfundApply{

  .delUpload{
      width: 147px;
      margin-left: 60px;
      margin-bottom: 60px;
  }
  .delUploadBtnSty{
      position: absolute;
      right: 0;top: 0px;
      line-height: 20px;
      display: flex;
      justify-content: center;
      width: 20px;
      height: 20px;
      font-size: 35px;
      z-index: 10;
      color: #000;
      // background: #fff;
  }

  .avatar-uploader .el-upload {         //文件上传
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }

  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
  }
  .avatar {
      width: 178px;
      height: 178px;
      display: block;
  }

 //提交对话框开始
 .projectApplicationfundAddDialog{  

  .el-dialog__header{
      display: flex;
      justify-content: center;
  }
  .el-dialog{
      border-radius: 5px;
      overflow: hidden;

      top: 10%;
  }
  
  .deleteContent{
      width: 100%;
      text-align: center;
      font-size: 22px;
      color: #000;
  }
  .addDialogLogo{
      width: 60px;
      height: 30px;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      line-height: 30px;
      background: #f2f2f2;
      position: absolute;
      left: 20px; top: 15px; 
  }
  .el-dialog__header{
      background: #32455b;
  }
  .el-dialog__title{
    color:#fff;
        display: flex;
        justify-content: center;
        font-size: 18px;
        position: relative;
        top: -2px;
  }
  .addDialogMid{
      box-sizing: border-box;
      padding:0 60px 0 10px;
  .addDialogTit{
      display: flex;
      span{
      width: 80px;
      line-height: 40px;
      text-align: left;
      }
  }
  .addDialogTit1{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
  }
  .addDialogTit2{
      margin-top: 10px;
      font-size: 18px;
      color: #000;
      text-indent: 2em;
  }
  .addDialogCon{
      margin-top: 20px;
  }
  }
  .dialog-footer{
    display: flex;
    justify-content: center;

  }
  }
  //提交对话框结束



.Apply1{         //顶部两个下拉框
  height: 45px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  .inpName{
      height: 40px;
      outline:none ;
      width: 600px;
      border: #ccc 1px solid;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 1px 15px;
  }
}



.moneyBlock{
  max-width: 100%;
  margin-bottom: 20px;
  .howMoneyFlex{
      display: flex;
      flex-wrap: wrap;
  }
  .howMoney{
      display: flex;
      margin-right: 10px;
      .howMoneyInp{
          .el-input__inner{
              width: 170px;
          }
      }
      
  }
}
  .inpInterval{
      min-width: 70px;
      display: inline-block;
      text-align: justify;
      text-justify:distribute-all-lines;
      text-align-last: justify;
      transform: translate(0,22%);
      padding-right: 15px;
      font-size: 16px;
  }

  .addMoneyBtn{   //添加样式
          margin: 15px 85px 30px;
  }

}

</style>