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

<template>
  <wt-card
    title="年度投资情况（单位：万元）"
    class="mt-10"
    :edit-btn="true"
    @edit="change"
    @save="save"
  >
    <el-form class="mt-20" :disabled="disabled">
      <div style="width: 1300px; text-align: left" class="mt-20 ml-10">
        <span class="title">年份:</span>
        <el-select v-model="selectYear" @change="changeYear">
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <table>
        <thead>
          <tr>
            <th>类型</th>
            <th v-for="item in month">
              {{ item.month != '合计' ? item.month + '月' : '合计' }}
            </th>
            <th>合计</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th>计划投资</th>
            <th v-for="item in month">
              <el-input
                class="th-input"
                v-model="item.planInvestment"
                @input="AddUpdateItem(item)"
              >
              </el-input>
            </th>
            <th>{{ allPlanInvestment }}</th>
          </tr>
          <tr>
            <th>累计投资</th>
            <th v-for="item in month">
              <el-input
                class="th-input"
                v-model="item.totalInvestment"
                @input="AddUpdateItem(item)"
              >
              </el-input>
            </th>
            <th>{{ allTotalInvestment }}</th>
          </tr>
          <tr>
            <th>计划纳统投资</th>
            <th v-for="item in month">
              <el-input
                class="th-input"
                v-model="item.planNtInvestment"
                @input="AddUpdateItem(item)"
              >
              </el-input>
            </th>
            <th>{{ allPlanNtInvestment }}</th>
          </tr>
          <tr>
            <th>累计纳统投资</th>
            <th v-for="item in month">
              <el-input
                class="th-input"
                v-model="item.totalNtInvestment"
                @input="AddUpdateItem(item)"
              >
              </el-input>
            </th>
            <th>{{ allTotalNtInvestment }}</th>
          </tr>
        </tbody>
      </table>
    </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) {
        this.initYear()
        if (val.length > 0) {
          this.getList()
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      allPlanInvestment: 0,
      allTotalInvestment: 0,
      allPlanNtInvestment: 0,
      allTotalNtInvestment: 0,
      updateItem: [],
      data: [],
      month: [
        { month: '1-2' },
        { month: '3' },
        { month: '4' },
        { month: '5' },
        { month: '6' },
        { month: '7' },
        { month: '8' },
        { month: '9' },
        { month: '10' },
        { month: '11' },
        { month: '12' }
      ],
      years: [],
      years2: [],
      selectYear: new Date().getFullYear(),
      disabled: true
    }
  },
  methods: {
    changeYear(res) {
      this.allPlanInvestment = 0
      this.allTotalInvestment = 0
      this.allPlanNtInvestment = 0
      this.allTotalNtInvestment = 0
      this.getList()
    },
    getList() {
      this.$api.project
        .projectAnnualInvestment({
          projectId: this.projectId,
          year: this.selectYear
        })
        .then(res => {
          if (res.code === 200) {
            this.data = res.data
            this.month.map(monthItem => {
              const sub = res.data.find(ele => ele.month === monthItem.month)
              if (sub) {
                monthItem.id = sub.id
                monthItem.createDept = sub.createDept
                monthItem.createTime = sub.createTime
                monthItem.createUser = sub.createUser
                monthItem.isDeleted = sub.isDeleted
                monthItem.planInvestment = sub.planInvestment
                monthItem.planNtInvestment = sub.planNtInvestment
                monthItem.projectId = sub.projectId
                monthItem.status = sub.status
                monthItem.totalInvestment = sub.totalInvestment
                monthItem.totalNtInvestment = sub.totalNtInvestment
                monthItem.updateTime = sub.updateTime
                monthItem.updateUser = sub.updateUser
                monthItem.year = sub.year

                this.allTotalNtInvestment =
                  this.allTotalNtInvestment + (sub.totalNtInvestment - 0)
                this.allPlanInvestment =
                  this.allPlanInvestment + (sub.planInvestment - 0)
                this.allTotalInvestment =
                  this.allTotalInvestment + (sub.totalInvestment - 0)
                this.allPlanNtInvestment =
                  this.allPlanNtInvestment + (sub.planNtInvestment - 0)
              } else {
                monthItem.planInvestment = 0
                monthItem.planNtInvestment = 0
                monthItem.projectId = this.projectId
                monthItem.totalInvestment = 0
                monthItem.totalNtInvestment = 0
                monthItem.year = this.selectYear
              }
            })
          }
        })
    },
    initYear() {
      this.years.length = 0
      const year = new Date().getFullYear()
      for (let i = 2017; i <= year + 1; i++) {
        const item = { label: i, value: i }
        this.years.push(item)
      }
      this.years.reverse()
    },
    AddUpdateItem(item) {
      const sub = this.updateItem.find(ele => ele.month === item.month)
      if (sub) {
        console.log('这个已经在更新列表中!')
      } else {
        this.updateItem.push(item)
      }

      const index = this.data.findIndex(ele => ele.month === item.month)
      if (index != -1) {
        this.data.splice(this.data.indexOf(index), 1)
      }
      this.data.push(item)
      //重新计算合计
      this.allPlanInvestment = 0
      this.allTotalInvestment = 0
      this.allPlanNtInvestment = 0
      this.allTotalNtInvestment = 0
      this.data.forEach(ele => {
        this.allTotalNtInvestment =
          this.allTotalNtInvestment + (ele.totalNtInvestment - 0)
        this.allPlanInvestment =
          this.allPlanInvestment + (ele.planInvestment - 0)
        this.allTotalInvestment =
          this.allTotalInvestment + (ele.totalInvestment - 0)
        this.allPlanNtInvestment =
          this.allPlanNtInvestment + (ele.planNtInvestment - 0)
      })
    },
    change(res) {
      this.disabled = res
    },
    save() {
      this.$api.project
        .batchSubmitAnnualInvestment(this.updateItem)
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
    }
  }
}
</script>

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

table {
  width: 1280px;
  margin: 10px;
  margin-top: 20px;
}

thead {
  background: #d7d7d7;
}

tr {
  height: 40px;
}

th {
  height: 40px;
  width: 7.69%;
  flex: 1;
  text-align: center;
  border: 1px solid #9c9c9c;
}

.th-input {
  height: 100%;
  width: 100%;
  text-align: center;
  border: none;
}

:deep(.el-input__wrapper) {
  border: none;
  border-radius: revert;
}

:deep(.el-input__inner) {
  text-align: center;
}
</style>