wt_project_web_bak/src/views/home/component/params/params7.vue

<template>
  <div class="flex flex-center flex-col">
    <!-- title and btn -->
    <div class="flex flex-center full-width flex-justify-between mt-10 mb-10">
      <span class="full-width text-left bold">{{ info.dictValue }}</span>
      <el-button
        v-if="detail.can_update"
        type="primary"
        @click="disabled = !disabled"
        >{{ disabled ? '编 辑' : '保 存' }}
      </el-button>
    </div>
    <!-- content list -->
    <div style="width: 93%" class="mt-20">
      <div class="flex flex-justify-start ml-20">
        <el-select v-model="selectYear">
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="ml-20"
          @click="addYear(1)"
          >新增年度
        </el-button>
      </div>
    </div>

    <div style="width: 90%" class="mt-20">
      <div class="flex flex-justify-start flex-col border padding">
        <div
          v-for="(item, index) in amount"
          :key="item"
          class="flex flex-center full-width mb-10 mt-10"
        >
          <div
            class="flex flex-justify-start flex-align-center full-width flex-child-average"
          >
            <div class="value flex flex-justify-end">
              {{ item.year }}年度计划投资（万元）
            </div>
            <el-input
              v-model="item.planSum"
              type="number"
              :disabled="disabled"
            ></el-input>
          </div>

          <div
            class="flex flex-justify-start flex-align-center full-width flex-child-average"
          >
            <div class="value flex flex-justify-end">年度累计投资（万元）</div>
            <div class="ml-20 value-box flex flex-justify-start">
              {{ item.actualSum }}
            </div>
          </div>
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              round
              class="ml-10"
              @click="updateMonth(item, 1, index)"
              >月填报
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 纳统投资 -->
    <div style="width: 93%" class="mt-20">
      <div class="flex flex-justify-start ml-20">
        <el-select v-model="selectYear2">
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="ml-20"
          @click="addYear(2)"
          >新增年度
        </el-button>
      </div>
    </div>

    <div style="width: 90%" class="mt-20">
      <div class="flex flex-justify-start border padding flex-col mb-10 mt-10">
        <div
          v-for="(item, index) in investment"
          :key="item"
          class="flex flex-center full-width mb-10 mt-10"
        >
          <div
            class="flex flex-justify-start flex-align-center full-width flex-child-average"
          >
            <div class="value flex flex-justify-end">
              {{ item.year }}年度计划纳统投资（万元）
            </div>
            <el-input
              type="number"
              v-model="item.planSum"
              :disabled="disabled"
            ></el-input>
          </div>

          <div
            class="flex flex-justify-start flex-align-center full-width flex-child-average"
          >
            <div class="value flex flex-justify-end">
              年度累计纳统投资（万元）
            </div>
            <div class="ml-20 value-box flex flex-justify-start">
              {{ item.actualSum }}
            </div>
          </div>
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              round
              class="ml-10"
              @click="updateMonth(item, 2, index)"
              >月填报
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- dialog -->
    <el-dialog
      v-model="show"
      title="投资情况"
      v-if="currentMonth"
      width="1250px"
    >
      <div>
        <div>
          <div class="flex flex-center mb-20">
            <div>
              <div class="title-box bold" style="background-color: white"></div>
              <div class="title-box bold flex flex-center">计划投资：</div>
              <div class="title-box bold mt-10 flex flex-center">
                实际投资：
              </div>
            </div>
            <div>
              <div class="flex flex-center">
                <div
                  v-for="i in currentMonth.monthData"
                  :key="i"
                  class="month-box bold flex flex-center"
                  @focus="focusin"
                >
                  {{ i.month }}月
                </div>
              </div>

              <div class="flex flex-center">
                <div
                  v-for="i in currentMonth.monthData"
                  :key="i"
                  class="month-box flex flex-center"
                >
                  <el-input type="number" v-model="i.planData"></el-input>
                </div>
              </div>

              <div class="flex flex-center mt-5">
                <div
                  v-for="i in currentMonth.monthData"
                  :key="i"
                  class="month-box flex flex-center"
                >
                  <el-input type="number" v-model="i.actualData"></el-input>
                </div>
              </div>
            </div>
          </div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-check"
              class="full-width flex flex-center flex-justify-end light-blue-bg"
              @click="save"
              >保存
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: null
    },
    detail: {
      type: Object,
      default: null
    }
  },
  watch: {
    detail: {
      immediate: true,
      deep: true,
      handler(val) {
        this.form = val
        if (val.amount && val.amount.data) {
          this.amount = val.amount.data
        }
        if (val.investment && val.investment.data) {
          this.investment = val.investment.data
        }
        this.initYear()
      }
    },
    disabled: {
      handler(val) {
        if (val) {
          this.save()
        }
      }
    }
  },
  data() {
    return {
      form: null,
      disabled: true,
      amount: [],
      investment: [],
      currentMonth: null,
      show: false,
      years: [],
      selectYear: '',
      selectYear2: ''
    }
  },
  methods: {
    initYear() {
      this.years.length = 0
      let localYears = []
      if (this.detail && this.detail.investment) {
        localYears = this.detail.investment.data.map(ele => ele.year)
      }
      const year = new Date().getFullYear()
      for (let i = 2017; i <= year + 1; i++) {
        const item = { label: i, value: i }
        if (localYears.findIndex(sub => sub === i) === -1) {
          this.years.push(item)
        }
      }
      this.years.reverse()
    },
    /**
     * 新增年度
     * @param {*} type 1，新增年度投资 2 新增纳统投资
     */
    addYear(type) {
      if (
        (type === 1 && this.selectYear.length === 0) ||
        (type === 2 && this.selectYear2.length === 0)
      ) {
        this.$message.error('请选择新增年度')
        return
      }
      const newMonthData = []
      for (let i = 1; i <= 11; i++) {
        const sub = {
          actualData: 0,
          planData: 0,
          month: i === 1 ? '1-2' : (i + 1).toString(),
          year: type === 1 ? this.selectYear : this.selectYear2
        }
        newMonthData.push(sub)
      }
      const newYearObj = {
        year: type === 1 ? this.selectYear : this.selectYear2,
        actualSum: 0,
        planSum: 0,
        monthData: newMonthData
      }
      if (type === 1) {
        this.amount.splice(0, 0, newYearObj)
      } else if (type === 2) {
        this.investment.splice(0, 0, newYearObj)
      }
    },
    /**
     * 更新数据
     * @param type 1 计划 2 纳统 index
     */
    updateMonth(item, type, index) {
      this.currentMonth = item
      this.currentMonth.updateIndex = index
      this.currentMonth.updateType = type
      this.show = !this.show
    },
    save() {
      if (this.currentMonth && this.currentMonth.updateType === 1) {
        this.form.amount.data[this.currentMonth.updateIndex].monthData =
          this.currentMonth.monthData.map(sub => {
            sub.planData = Number.parseInt(sub.planData)
            sub.actualData = Number.parseInt(sub.actualData)
            return sub
          })
        this.form.amount.data[this.currentMonth.updateIndex].actualSum =
          this.getSum(
            this.form.amount.data[this.currentMonth.updateIndex].monthData.map(
              sub => sub.actualData
            )
          )
      } else if (this.currentMonth && this.currentMonth.updateType === 2) {
        this.form.investment.data[this.currentMonth.updateIndex].monthData =
          this.currentMonth.monthData.map(sub => {
            sub.planData = Number.parseInt(sub.planData)
            sub.actualData = Number.parseInt(sub.actualData)
            return sub
          })
        this.form.investment.data[this.currentMonth.updateIndex].actualSum =
          this.getSum(
            this.form.investment.data[
              this.currentMonth.updateIndex
            ].monthData.map(sub => sub.actualData)
          )
      }
      delete this.form._id
      this.$api.project.proUpdate(this.detail).then(res => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.show = false
      })
    },
    getSum(list) {
      let sum = 0
      console.log(list)
      list.forEach(sub => {
        if (sub) {
          sum = sum + Number.parseInt(sub)
        }
      })
      return sum
    }
  }
}
</script>
<style lang="scss" scoped>
.value {
  width: 300px;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #343434;
}

.value-box {
  width: 100%;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 10px 10px;
  border: #e5e7ec solid 1px;
}

.month-box {
  width: 90px;
  background-color: #f5f7fa;
  margin: 5px;
  height: 35px;
}

.title-box {
  width: 80px;
  height: 42px;
}
</style>