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

<template>
  <div class='flex flex-justify-start flex-align-center flex-col'>
    <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='update'>
        {{ disabled ? '编 辑' : '保 存' }}
      </el-button>
    </div>
    <div class="mt-10 mb-10 full-width" style="width: 93%;">
      <base-button v-if='detail.can_update' title="新增年度" icon="Plus" @click='addYear(1)'/>
    </div>
    <div class='mt-10' style='width: 90%;'>
      <el-form
          :model="form"
          label-width='180px'
          :disabled='disabled'
          label-position="left"
          class='form-content flex flex-col'
      >
        <el-form-item v-for='(item,index) in completeCount' :key='item' label-width='0'>
          <div class='flex flex-col flex-center full-width'>
            <div class='flex flex-center  flex-justify-between  full-width'>
              <div class='flex-child-average full-width  flex flex-center'>
                <span style='width: 320px'>{{
                    form.month_plan_complete_amount[index] ? form.month_plan_complete_amount[index].year : ''
                  }}年度计划投资（万元）</span>
                <div class='disable-input' @change='change(item)'>
                  {{ form.month_plan_complete_amount[index] ? form.month_plan_complete_amount[index].sum : '2' }}
                </div>
              </div>
              <div style='width: 20px'></div>
              <div class='flex-child-average full-width  flex flex-center'>
                <span style='width: 380px'>{{
                    form.month_plan_complete_amount[index] ? form.month_plan_complete_amount[index].year : ''
                  }}年度累计投资（万元）</span>
                <div class='disable-input' @change='change(item)'>
                  {{ form.month_complete_amount[index] ? form.month_complete_amount[index].sum : '2' }}
                </div>
                <div class='btnSub pointer' @click='showMonth(form.month_complete_amount[index].year ,1,index)'>月填报
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="mt-20 mb-10 full-width" style="width: 93%;">
      <base-button v-if='detail.can_update' title="新增年度" icon="Plus" @click='addYear(2)'/>
    </div>
    <div class='mt-10' style='width: 90%;'>
      <el-form
          :model="form"
          label-width='180px'
          :disabled='disabled'
          label-position="left"
          class='form-content flex flex-col'
      >
        <el-form-item v-for='(item,index) in investmentCount' :key='item' label-width='0'>
          <div class='flex flex-col flex-center full-width'>
            <div class='flex flex-center  flex-justify-between  full-width'>
              <div class='flex-child-average full-width  flex flex-center'>
                <span style='width: 400px'>{{ form.month_plan_investment[index].year }}年度计划纳统投资（万元）</span>
                <el-input v-model='form.month_plan_investment[index].sum' @change='change(item)'></el-input>
              </div>
              <div style='width: 20px'></div>
              <div class='flex-child-average full-width  flex flex-center'>
                <span style='width: 440px'>{{ form.month_plan_investment[index].year }}年度累计纳统投资（万元）</span>
                <div class='disable-input' @change='change(item)'>{{ form.month_investment_amount.sum }}</div>
                <div class='btnSub pointer' @click='showMonth(form.month_plan_investment[index].year,2,index)'>月填报
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog v-model='show' :title='current ? current.year + "年度" : ""' width='1260px'
               @close='update(false)'>
      <div class='flex flex-center flex-align-start'>
        <div>
          <div class='padding-top'></div>
          <div class='padding-top mt-20 mr-10 bold'>计划投资:</div>
          <div class='padding-top mt-10 mr-10 bold'>累计投资:</div>
        </div>
        <div>
          <div class='mr-5  flex flex-center '>
            <div v-for='(item,index) in 11' :key='item' class='title'>
              <div v-if='index === 0'>
                1-2月
              </div>
              <div v-else>
                {{item + 1}}月
              </div>
            </div>
          </div>
          <div class='mr-5  flex flex-center'>
            <div v-for='(item,index) in current.planMonths' :key='item'>
              <input class='input' v-model="item.data" @change='changeMonth(item,1,index)'/>
            </div>
          </div>

          <div class='mr-5  flex flex-center'>
            <div v-for='(item,index) in current.months' :key='item.name'>
              <input class='input' v-model="item.data" @change='changeMonth(item,2,index)'>
            </div>
          </div>
        </div>
      </div>
      <div class='mt-20 full-width flex text-left red'>* 请按月份进行填报，单位：万元</div>
    </el-dialog>
  </div>
</template>

<script>
import baseButton from '@/components/base-button.vue'

export default {
  name: 'params3',
  components: { baseButton },
  props: {
    info: {
      type: Object,
      default: null
    },
    detail: {
      type: Object,
      default: null
    }
  },
  watch: {
    detail: {
      handler (val) {
        if (Object.keys(val).length > 1) {
          this.init(val)
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      show: false,
      disabled: true,
      investmentCount: 0,
      completeCount: 0,
      list1: [],
      list2: [],
      form: {},
      current: null
    }
  },
  methods: {
    /**
     *
     * @param type 1计划投资  2 纳统投资
     */
    addYear (type) {
      this.disabled = false
      if (type === 1) {
        this.form.month_complete_amount.splice(0, 0, this.nextYear(Number.parseInt(this.form.month_complete_amount[0].year)))
        this.form.month_plan_complete_amount.splice(0, 0, this.nextYear(Number.parseInt(this.form.month_plan_complete_amount[0].year)))
        this.completeCount = this.completeCount + 1
      } else if (type === 2) {
        this.form.month_investment_amount.splice(0, 0, this.nextYear(Number.parseInt(this.form.month_investment_amount[0].year)))
        this.form.month_plan_investment.splice(0, 0, this.nextYear(Number.parseInt(this.form.month_plan_investment[0].year)))
        this.investmentCount = this.investmentCount + 1
      }
    },
    nextYear (year) {
      const tmp2 = {}
      tmp2.year = (year + 1).toString()
      tmp2.sum = ''
      tmp2.monthlyData = []
      for (let i = 1; i <= 12; i++) {
        const item2 = { year: tmp2.year, data: '', month: i.toString() }
        tmp2.monthlyData.push(item2)
      }
      return tmp2
    },
    init (res) {
      this.investmentCount = Math.max(res.month_plan_investment.length, res.month_investment_amount.length)
      // 求出差集
      const dd = res.month_plan_investment.filter((sub) => {
        return res.month_investment_amount.findIndex(ele => sub.year !== ele.year) !== -1
      }).map(sub => { // data -》 ''
        sub.monthlyData.map(ele => {
          ele.data = ele.data ? ele.data : ''
          return ele
        })
        return sub
      })
      // 复制差集
      if (res.month_plan_investment.length === this.completeCount) {
        dd.forEach(sub => {
          res.month_investment_amount.push(sub)
        })
      } else {
        dd.forEach(sub => {
          res.month_plan_investment.push(sub)
        })
      }

      this.completeCount = Math.max(res.month_complete_amount.length, res.month_plan_complete_amount.length)
      // 求出差集
      const d = res.month_complete_amount.filter((sub) => {
        return res.month_plan_complete_amount.findIndex(ele => sub.year !== ele.year) !== -1
      }).map(sub => { // data -》 ''
        sub.monthlyData.map(ele => {
          ele.data = ele.data ? ele.data : ''
          return ele
        })
        return sub
      })
      // 复制差集
      if (res.month_complete_amount.length === this.completeCount) {
        d.forEach(sub => {
          if (res.month_plan_complete_amount.findIndex(ele => ele.year === sub.year) === -1) {
            res.month_plan_complete_amount.push(sub)
          }
        })
      } else {
        d.forEach(sub => {
          if (res.month_complete_amount.findIndex(ele => ele.year === sub.year) === -1) {
            res.month_complete_amount.push(sub)
          }
        })
      }
      this.form = res
    },
    change (item) {
      this.form[item.code] = item.value
      this.form[item.code2] = item.value2
    },
    update (show = Boolean) {
      this.disabled = !this.disabled
      this.form.projectId = this.form.id
      delete this.form._id
      this.$api.project.proUpdate(this.detail).then(res => {
        if (res.code === 200) {
          if (show) {
            this.$message.success(res.msg)
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     *
     * @param year
     * @param type 1 年度投资 2 纳统投资
     * @param index 索引
     */
    showMonth (year, type, index) {
      this.$nextTick(() => {
        const item = { editType: type, year, index }
        if (type === 1) {
          item.planMonths = this.form.month_plan_complete_amount.find(sub => sub.year === year).monthlyData
          item.months = this.form.month_complete_amount.find(sub => sub.year === year).monthlyData
        } else if (type === 2) {
          item.planMonths = this.form.month_plan_investment.find(sub => sub.year === year).monthlyData
          item.months = this.form.month_investment_amount.find(sub => sub.year === year).monthlyData
        }
        this.current = Object.assign({}, item)
        for (let i = 1; i <= 11; i++) {
          const index = this.current.months.findIndex(sub => sub.month === i.toString())
          if (index === -1 && this.current.months.length < 11) {
            const ele = { month: i.toString(), data: '', year: '' }
            this.current.months.push(ele)
          }
          const planIndex = this.current.planMonths.findIndex(sub => sub.month === i.toString())
          if (planIndex === -1 && this.current.planMonths.length < 11) {
            const sub = { month: i.toString(), data: '', year: '' }
            this.current.planMonths.push(sub)
          }
        }
      })
      this.show = !this.show
    },
    /**
     *
     * @param res
     * @param type 1 计划 2 累计
     * current 1 年度投资 2 纳统投资
     */
    changeMonth (res, type, index) {
      setTimeout(() => {
        console.log(res)
        if (this.current.editType === 1) {
          if (type === 1) {
            this.form.month_plan_complete_amount[this.current.index].monthlyData[index] = res
          } else {
            this.form.month_complete_amount[this.current.index].monthlyData[index] = res
          }
        } else if (this.current.editType === 2) {
          console.log(this.current)
          if (type === 1) {
            this.form.month_plan_investment[this.current.index].monthlyData[index] = res
          } else {
            this.form.month_investment_amount[this.current.index].monthlyData[index] = res
          }
        }
        console.log(this.form.month_plan_complete_amount)
      }, 1000)
    },
    getSum (list) {
      let sum = 0
      list.forEach(sub => {
        if (sub.data.length > 0) {
          sum = sum + Number.parseInt(sub.data)
        }
      })
      return sum
    }
  }
}
</script>

<style lang='scss' scoped>
.form-content {
  border: 1px solid #eeeeee;
  padding: 20px;

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

  :deep(.el-textarea.is-disabled .el-textarea__inner) {
    color: #343434;
  }
}

.grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 20px;
}

.title {
  width: 70px;
  padding: 0 11px;
  margin-bottom: 10px;
  font-weight: bold;
}

.input {
  width: 70px;
  height: 30px;
  border: #e7e7e7 solid 1px;
  padding: 0 10px;
  border-right: none;
}

.input:last-child {
  width: 70px;
  height: 40px;
  padding: 0 10px;
  border-right: #e7e7e7 solid 1px;
}

.disable-input {
  height: 30px;
  width: 100%;
  border-radius: 4px;
  background-color: #F5F7FA;
  border: #E6E8ED solid 1px;
  text-align: left;
  padding: 0 10px;
  color: #343434;
}

.btnSub {
  color: white;
  width: 120px;
  margin-left: 10px;
  height: 30px;
  background-color: #EDAC56;
  border-radius: 30px;
  padding: 0 10px;
}
</style>