wt_project_web_bak/src/views/project/componens/info4.vue

<template>
  <wt-card
    title="投资基本情况"
    class="mt-10"
    :edit-btn="true"
    @edit="change"
    @save="save"
    @on-load="getFundsList(this.type)"
  >
    <div
      class="full-width text-right main-color pointer"
      style="margin-top: -10px"
      :style="styleObject"
      @click="openFundsList"
    >
      更多到位资金>>
    </div>
    <el-form class="mt-20" :disabled="disabled">
      <div style="display: flex; align-items: center">
        <el-button-group>
          <el-button type="primary" @click="getFundsList(1)"
            >到位资金</el-button
          >
          <el-button type="primary" @click="getFundsList(2)"
            >筹措资金<i class="el-icon-arrow-right el-icon--right"></i
          ></el-button>
        </el-button-group>
        <div style="margin-left: 20px">
          * 点击对应按钮，查看到位资金、筹措资金详情
        </div>
      </div>

      <div class="body_title">政策投资: 500万元</div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">中央预算内投资:</span>
            <el-input
              class="input"
              placeholder="中央预算内投资"
              v-model="this.data.investmentOfCentralBudget"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">银行贷款:</span>
            <el-input
              class="input"
              placeholder="银行贷款"
              v-model="this.data.bankLoans"
            ></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">专项债券资金:</span>
            <el-input
              class="input"
              placeholder="专项债券资金"
              v-model="this.data.specialBondFunds"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">抗疫特别国债资金:</span>
            <el-input
              class="input"
              placeholder="抗疫特别国债资金"
              v-model="this.data.antiEpidemicSpecialTreasuryBondFund"
            ></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">其他地方财政性建设资金:</span>
            <el-input
              class="input"
              placeholder="其他地方财政性建设资金"
              v-model="this.data.otherLocalFiscalConstructionFunds"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">政策性开发性金融工具（基金）投资:</span>
            <el-input
              class="input"
              placeholder="政策性开发性金融工具（基金）投资"
              v-model="this.data.policyBasedDevelopmentFinancialInvestment"
            ></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="body_title">地方预算内投资: 500万元</div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">省级预算内投资:</span>
            <el-input
              class="input"
              placeholder="省级预算内投资"
              v-model="this.data.investmentWithinProvincialBudget"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">市级预算内投资:</span>
            <el-input
              class="input"
              placeholder="市级预算内投资"
              v-model="this.data.investmentWithinMunicipalBudget"
            ></el-input>
          </div>
        </el-form-item>
      </div>
      <div class="flex flex-justify-center">
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item">
            <span class="title">县级预算内投资:</span>
            <el-input
              class="input"
              placeholder="县级预算内投资"
              v-model="this.data.investmentWithinCountyLevelBudget"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item class="full-width flex-child-average">
          <div class="flex flex-center full-width item"></div>
        </el-form-item>
      </div>
    </el-form>
  </wt-card>
</template>

<script>
import wtCard from '@/components/wt-card/index.vue'

export default {
  components: {
    wtCard
  },
  props: {
    projectId: {
      required: true,
      type: String,
      default: ''
    }
  },
  watch: {
    projectId: {
      handler(val) {
        if (val.length > 0) {
          this.getFundsList(1)
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      styleObject: {
        visibility: 'visible'
      },
      type: 1,
      disabled: true,
      data: {},
      t1: 0,
      t2: 0,
      t3: 0,
      t4: 0,
      t5: 0,
      t6: 0,
      t7: 0,
      t8: 0,
      t9: 0
    }
  },
  methods: {
    getFundsList(type) {
      this.type = type
      if (type === 2) {
        this.styleObject.visibility = 'hidden'
      } else {
        this.styleObject.visibility = 'visible'
      }
      this.$api.funds
        .fundsList({ projectId: this.projectId, type: type })
        .then(res => {
          if (res.code === 200) {
            if (type === 1) {
              res.data.forEach(item => {
                this.t1 = this.t1 + item.investmentOfCentralBudget
                this.t2 = this.t2 + item.bankLoans
                this.t3 = this.t3 + item.specialBondFunds
                this.t4 = this.t4 + item.antiEpidemicSpecialTreasuryBondFund
                this.t5 = this.t5 + item.otherLocalFiscalConstructionFunds
                this.t6 =
                  this.t6 + item.policyBasedDevelopmentFinancialInvestment
                this.t7 = this.t7 + item.investmentWithinProvincialBudget
                this.t8 = this.t8 + item.investmentWithinMunicipalBudget
                this.t9 = this.t9 + item.investmentWithinCountyLevelBudget
              })
              this.data.investmentOfCentralBudget = this.t1
              this.data.bankLoans = this.t2
              this.data.specialBondFunds = this.t3
              this.data.antiEpidemicSpecialTreasuryBondFund = this.t4
              this.data.otherLocalFiscalConstructionFunds = this.t5
              this.data.policyBasedDevelopmentFinancialInvestment = this.t6
              this.data.investmentWithinProvincialBudget = this.t7
              this.data.investmentWithinMunicipalBudget = this.t8
              this.data.investmentWithinCountyLevelBudget = this.t9
            } else {
              this.data = res.data[0]
            }
          }
        })
    },
    save() {
      if (this.type == 2) {
        this.$api.funds.fundsSaveOrUpdate(this.data).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        this.$message.warning('到位资金合计不可编辑！')
      }
    },
    change(res) {
      this.disabled = res
    },
    openFundsList() {
      const data = this.$router.resolve({
        path: '/funds/detail',
        query: { id: this.projectId }
      })
      window.open(data.href, '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 240px;
  padding-right: 10px;
  text-align: right;
}

.body_title {
  margin-left: 5%;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 90%;
  text-align: left;
}

.title-textarea {
  width: 85px;
  text-align: left;
}

.item {
  width: 90%;
}
.input {
  width: 50%;
}
</style>