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

<template>
  <!-- 创客资金申请表单 -->
  <div v-loading="loading">
    <div class="vfpHeader">
      <div class="titleOne">活动资金详细</div>
      <el-button @click="$router.push('/makerfund')" type="primary" size="mini"
        >返回</el-button
      >
    </div>
    <hr />
    <!-- 项目名称、类型开始 -->
    <div class="Apply1">
      <div class="inpInterval">项目名称</div>
      <el-select
        disabled
        v-model="projectName"
        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="tabTit">
      <div>
        <p>经费支出类别(单位:元)</p>
      </div>
    </div>
    <hr />
    <table border="1" cellspacing="0" class="table">
      <tr>
        <th colspan="2">经济支出类别</th>
        <th>预算</th>
        <th>已支付</th>
        <th style="position: relative">
          本次申请<br />
          <div
            style="
              width: 100px;
              position: absolute;
              left: 50%;
              transform: translate(-50%);
              bottom: 1px;
            "
          >
            {{ create_at }}
          </div>
        </th>
        <th style="position: relative">
          实际使用<br />
          <div
            style="
              width: 100px;
              position: absolute;
              left: 50%;
              transform: translate(-50%);
              bottom: 1px;
            "
          >
            {{ endTime }}
          </div>
        </th>
        <th>余额</th>
        <th colspan="3">备注</th>
      </tr>
      <tr v-for="(item, index) in fundList" :key="index">
        <td colspan="2">{{ item.fundName }}</td>
        <td>
          {{ item.budget }}
        </td>
        <td>
          {{ item.havePaid }}
        </td>
        <td>
          {{ item.thisApply }}
        </td>
        <td v-if="!state" style="background-color: rgb(234, 252, 186)">
          <el-input
            type="number"
            autosize
            style="width: 100%"
            resize="none"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
            placeholder="请输入金额"
            @change="isMoreApply(index)"
            v-model="item.actualuse"
          >
          </el-input>
        </td>
        <td v-if="state > 0">
          {{ item.actualuse }}
        </td>
        <td>
          <!-- 预算 -->
          {{
            state > 0
              ? item.budget - item.havePaid
              : item.budget - item.havePaid - item.actualuse
          }}
          <!-- {{ item.budget-item.havePaid-item.actualuse }} -->
        </td>
        <td colspan="3" style="box-sizing: border-box; padding: 0 10px">
          {{ item.remark }}
        </td>
      </tr>
      <tr>
        <td>事由</td>
        <td colspan="10" class="textLeft">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 20 }"
            style="width: 100%"
            resize="none"
            placeholder=""
            v-model="intro"
          >
          </el-input>
        </td>
      </tr>
      <tr>
        <td v-for="(i, k) in 9" :key="k" style="border: none"></td>
      </tr>
    </table>
    <div class="baseBtn">
      <div class="blockWidth">
        <el-button type="primary" @click="download">生成表单</el-button>
        <el-button type="primary" v-if="!state" @click="submitData"
          >提交</el-button
        >
        <el-button type="primary" v-if="state > 0" class="disa">提交</el-button>
      </div>
    </div>

    <!-- 下载文档开始 -->
    <el-dialog
      title="生成Excel"
      :visible.sync="downLoadExcelDig"
      width="600px"
      class="pageSubmitData"
    >
      <span class="deleteContent">确定生成Excel?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="downLoadExcel" class="AllDialogBtn"
          >确认</el-button
        >
        <el-button @click="downLoadExcelDig = false" class="AllDialogBtn"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <!-- 下载文档结束-->

    <!-- 提交文档开始 -->
    <el-dialog
      title="提交"
      :visible.sync="submitDataDig"
      width="600px"
      class="pageSubmitData"
    >
      <span class="deleteContent">确定提交?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAll" class="AllDialogBtn"
          >确认</el-button
        >
        <el-button @click="submitDataDig = false" class="AllDialogBtn"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <!-- 提交文档结束-->
  </div>
</template>

<script>
import getFundNo from "@/components/tool/getProjectNo";
import BeUpload from "../../components/tool/beUpload.vue";
// import getExcel from "@/components/tool/getExcel";
import { getExcel2 } from "@/components/tool/downloadExcel";
export default {
  components: {
    BeUpload,
  },
  data() {
    return {
			loading:false,
      projectFilter: [], //项目名称列表
      projectName: "", //所选名称
      downLoadExcelDig: false, //下载Excel对话框
      submitDataDig: false, //提交对话框
      allFund: 0, //总经费
      fundList: [
        //table遍历数据
        {
          fundName: "小型仪器设备费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark: "项目开展所需的小型专用仪器设备、工具、配件购置或租赁费用。",
        },
        {
          fundName: "材料费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark:
            "项目开展需消耗的各种原材料、辅助材料等低值易耗品的采购费用。",
        },
        {
          fundName: "测试化验加工费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark:
            "项目开展过程中支付给外单位的检验、测试、化验、计算、分析及加工费等费用。",
        },
        {
          fundName: "项目协作费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark: "按合同规定支付给协作单位的费用",
        },
        {
          fundName: "项目成功鉴定费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark: "学术会务费、评审费、鉴定费、成果集制作费等费用。",
        },
        {
          fundName: "参展参赛费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark:
            "参加创客展会、竞赛等所需的报名费、展位费、布展费、宣传推广费及差旅费等费用。",
        },
        {
          fundName: "创客交流活动费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark:
            "创客交流活动中支付给校外专家的指导费、咨询费、授课费等费用。",
        },
        {
          fundName: "知识产权事务费",
          budget: "",
          havePaid: 0,
          thisApply: "",
          actualuse: "",
          remark: "论文版面费、专利及其他知识产权事务等费用。",
        },
      ],
      haveFund: "", //已支付经费
      intro: "", //事由
      tit: "", //活动名称
      ty: "", //活动类型
      state: 0,
      endTime: "",
      create_at: "",
    };
  },
  methods: {
    // console.log(this.projectName);
    //total：总经费
    //小型仪器设备费：device
    //材料费：Material
    //测试化验加工费：processing
    //项目协作费：Collaboration
    //项目成果鉴定费：APPRAISAL
    //参展参赛费：entery
    //创客交流活动费：activities
    //知识产权事务费：Transaction

    getData() {
			if(this.loading)return;
			this.loading = true;
      //获取活动经费的数据
      let param = {
        uid: this.$store.state.userInfo.userid,
        fid: this.$route.query["Id"],
        aid: this.$route.query["paid"],
      };
      // console.log(param);
      this.ajax
        .get(this.$store.state.api + "/selectActivityFundDetail", param)
        .then(
          (res) => {
            //  console.log(res.data);
            let data = res.data;
            console.log(data);
            let applyfund = JSON.parse(data[0][0]["applyfund"]);
            let fund = "";
            // console.log(data[0][0]['applyfund']);
            if (data[0][0]["af"] != null) {
              fund = JSON.parse(data[0][0]["af"]);
            } else {
              fund = JSON.parse(data[0][0]["pf"]);
            }
            //    return  console.log(111);

            // let usedFund=JSON.parse(data['usedFund'])
            let actualuse = JSON.parse(data[0][0]["actualuse"]);
            // this.tit=data.title;
            // this.ty=data.type;

            let arr = res["data"][1].filter((e) => {
              return e.actualuse != null;
            });
            // console.log(arr);

            // let isUse = arr;
            if (arr) {
              // console.log(111);
              arr.forEach((item) => {
                let JP = JSON.parse(item["actualuse"]);
                this.fundList[0]["havePaid"] += Number(JP["device"]);
                this.fundList[1]["havePaid"] += Number(JP["Material"]);
                this.fundList[2]["havePaid"] += Number(JP["processing"]);
                this.fundList[3]["havePaid"] += Number(JP["Collaboration"]);
                this.fundList[4]["havePaid"] += Number(JP["APPRAISAL"]);
                this.fundList[5]["havePaid"] += Number(JP["entery"]);
                this.fundList[6]["havePaid"] += Number(JP["activities"]);
                this.fundList[7]["havePaid"] += Number(JP["Transaction"]);
              });
            }

            // 本次申请
            this.fundList[0].thisApply = applyfund.device;
            this.fundList[1].thisApply = applyfund.Material;
            this.fundList[2].thisApply = applyfund.processing;
            this.fundList[3].thisApply = applyfund.Collaboration;
            this.fundList[4].thisApply = applyfund.APPRAISAL;
            this.fundList[5].thisApply = applyfund.entery;
            this.fundList[6].thisApply = applyfund.activities;
            this.fundList[7].thisApply = applyfund.Transaction;

            // console.log(applyfund);

            // 预算
            this.fundList[0].budget = fund.device;
            this.fundList[1].budget = fund.Material;
            this.fundList[2].budget = fund.processing;
            this.fundList[3].budget = fund.Collaboration;
            this.fundList[4].budget = fund.APPRAISAL;
            this.fundList[5].budget = fund.entery;
            this.fundList[6].budget = fund.activities;
            this.fundList[7].budget = fund.Transaction;

            // if (data['usedFund']!=null) {    //已使用
            //     this.fundList[0].havePaid=usedFund.device
            //     this.fundList[1].havePaid=usedFund.Material
            //     this.fundList[2].havePaid=usedFund.processing
            //     this.fundList[3].havePaid=usedFund.Collaboration
            //     this.fundList[4].havePaid=usedFund.APPRAISAL
            //     this.fundList[5].havePaid=usedFund.entery
            //     this.fundList[6].havePaid=usedFund.activities
            //     this.fundList[7].havePaid=usedFund.Transaction
            // }

            // 实际使用
            if (data[1][0]["actualuse"] != null) {
              this.fundList[0].actualuse = actualuse.device;
              this.fundList[1].actualuse = actualuse.Material;
              this.fundList[2].actualuse = actualuse.processing;
              this.fundList[3].actualuse = actualuse.Collaboration;
              this.fundList[4].actualuse = actualuse.APPRAISAL;
              this.fundList[5].actualuse = actualuse.entery;
              this.fundList[6].actualuse = actualuse.activities;
              this.fundList[7].actualuse = actualuse.Transaction;
            }
            // console.log(data.state);
            // if (data.state>0) {
            //     this.fundList.forEach(e=>{
            //         e.remark=e.budget*1-e.havePaid*1
            //     })
            // }

            // return

            this.intro = data[0][0].intro;
            this.state = data[0][0].state;
            this.create_at = data[0][0].createTime;
            console.log(this.create_at);
            this.endTime = data[0][0].endTime;
						this.loading = false;
          },
          (err) => {
            console.log(err);
          }
        );
    },

    download() {
      // if(!this.projectName) return this.$message.error('请选择项目名称')
      this.downLoadExcelDig = true;
    },
    downLoadExcel() {
      //生成表单
      getExcel2(this.fundList, this.intro, this.tit, this.ty);
      this.downLoadExcelDig = false;
    },
    submitData() {
      if (!this.projectName) return this.$message.error("请选择项目名称");
      this.allFund = 0;
      this.fundList.forEach((e) => {
        this.allFund += e.budget * 1;
      });
      console.log(this.allFund);

      let arr = [
        this.fundList[0].actualuse,
        this.fundList[1].actualuse,
        this.fundList[2].actualuse,
        this.fundList[3].actualuse,
        this.fundList[4].actualuse,
        this.fundList[5].actualuse,
        this.fundList[6].actualuse,
        this.fundList[7].actualuse,
      ];
      let arr2 = [
        this.fundList[0].havePaid,
        this.fundList[1].havePaid,
        this.fundList[2].havePaid,
        this.fundList[3].havePaid,
        this.fundList[4].havePaid,
        this.fundList[5].havePaid,
        this.fundList[6].havePaid,
        this.fundList[7].havePaid,
      ];

      // console.log(arr);
      let fund = arr.reduce((prev, cur, index, arr) => {
        return prev + cur * 1;
      }, 0);
      let fund2 = arr2.reduce((prev, cur, index, arr) => {
        return prev + cur * 1;
      }, 0);
      // console.log(fund,fund2);
      if (fund == 0) return this.$message.error("请输入实际使用金额");
      if (fund + fund2 > this.allFund)
        return this.$message.error("申请金额已大于预算");
      this.submitDataDig = true;
    },
    submitAll() {
      //提交创客资金申请
      //    getFundNo("ZJ").then((result)=>{

      // let arr={
      //     device:(this.fundList[0].actualuse+this.haveFund.device*1),
      //     Material:this.fundList[1].actualuse+this.haveFund.Material*1,
      //     processing:this.fundList[2].actualuse+this.haveFund.processing*1,
      //     Collaboration:this.fundList[3].actualuse+this.haveFund.Collaboration*1,
      //     APPRAISAL:this.fundList[4].actualuse+this.haveFund.APPRAISAL*1,
      //     entery:this.fundList[5].actualuse+this.haveFund.entery*1,
      //     activities:this.fundList[6].actualuse+this.haveFund.activities*1,
      //     Transaction:this.fundList[7].actualuse+this.haveFund.Transaction*1,
      // }

      //  console.log(arr);

      let param = {
        uid: this.$store.state.userInfo.userid,
        // fNo:result, //项目编号
        fid: this.$route.query["Id"],
        intro: this.intro,
        f: JSON.stringify({
          device: this.fundList[0].actualuse,
          Material: this.fundList[1].actualuse,
          processing: this.fundList[2].actualuse,
          Collaboration: this.fundList[3].actualuse,
          APPRAISAL: this.fundList[4].actualuse,
          entery: this.fundList[5].actualuse,
          activities: this.fundList[6].actualuse,
          Transaction: this.fundList[7].actualuse,
        }),
      };
      // return console.log(param);
      this.ajax
        .post(this.$store.state.api + "/updateActivityFundDetail", param)
        .then(
          (res) => {
            console.log(res);
            if (res.data == 1) {
              this.$message.success("提交成功");
              this.submitDataDig = false;
              this.$router.push("/makerfund");
            } else {
              this.$message.error("提交失败");
            }
          },
          (err) => {
            console.log(err);
          }
        );
      // })
    },
    isMoreApply(i) {
      if (
        this.fundList[i].budget - this.fundList[i].actualuse <
        0
      ) {
        this.$message({
          message: "实际使用不能超过余额!",
          type: "warning",
        });
        this.fundList[i].actualuse = 0;
        return;
      }
    },
  },

  mounted() {
    this.getData();
    this.projectName = this.$route.query["tit"];
    console.log(this.$route.query["Id"]);
    console.log(this.$route.query["tit"]);
    console.log(this.$route.query["paid"]);
  },
};
</script>

<style lang="less" scoped>
.Apply1 {
  //顶部下拉框
  height: 45px;
  width: 50%;
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
}
.inpInterval {
  //label
  min-width: 80px;
  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;
}
.table {
  border: none;
  border-top: solid 1px black;
  // border-right:  solid 1px black;
  width: 90%;
  margin: auto;
  margin-top: 30px;
  .textLeft {
    :deep(.el-textarea__inner) {
      border: none;
      border-radius: 0px;
      text-align: left !important;
      font-size: 16px;
    }
  }
  tr th {
    height: 70px;
    border: none;
    border-bottom: solid 1px black;
    border-right: solid 1px black;
    &:nth-child(1) {
      border-left: solid 1px black;
    }
  }
  tr td {
    border: none;
    border-bottom: solid 1px black;
    border-right: solid 1px black;
    height: 50px;
    text-align: center;
    line-height: 30px;
    width: 80px;

    &:nth-child(1) {
      border-left: solid 1px black;
    }
    p {
      font-weight: 600;
    }
    :deep(.el-select .el-input .el-select__caret) {
      display: none;
    }
    :deep(.el-textarea__inner) {
      // padding: 0;
      border: none;
      border-radius: 0px;
      text-align: center;
      font-size: 16px;
    }
    :deep(.el-input__inner) {
      border: none;
      background: rgb(234, 252, 186);
      border-radius: 0px;
      text-align: center;
      font-size: 16px;
      //去除input number样式
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
      }
      &[type="number"] {
        -moz-appearance: textfield;
      }
    }
  }
}
.textLeft {
  :deep(.el-textarea__inner) {
    border: none;
    border-radius: 0px;
    text-align: left !important;
    font-size: 16px;
  }
}
:depp(.el-input.is-disabled) {
  color: black !important;
}

:deep(.el-select .el-input.is-disabled .el-input__inner) {
  //项目名称字体颜色
  color: #000;
}
</style>