wt_project_web_bak/src/views/invest/components/complete.vue

<template>
  <div class='flex flex-justify-start flex-col'>
    <span class='font-16 bold full-width text-left'>项目投资完成情况总览</span>
    <div class='full-width flex-justify-end  flex'>
      <el-select v-model="month" class="m-2" placeholder="请选择" ref='month' clearable @change='changeMonth'>
        <el-option
            v-for="item in selectOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
    <avue-crud
        :option="option"
        :data="data"
        ref="crud"
        v-model="form">
    </avue-crud>
  </div>
</template>

<script>
export default {
  name: 'complete',
  props: {
    type: {
      type: Number,
      default: 0
    },
    deptId: {
      type: String,
      default: ''
    }
  },
  watch: {
    type: {
      handler (val) {
        this.initOption(val)
      },
      immediate: false
    },
    deptId: {
      handler (val) {
        this.onLoad()
      },
      immediate: true
    }
  },
  data () {
    return {
      month: '',
      quarter: '',
      form: {},
      data: [],
      option: {
        height: '800',
        align: 'center',
        menuAlign: 'center',
        menu: false,
        size: 'mini',
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        border: true,
        index: true,
        column: [
          {
            label: '项目名称',
            prop: 'projectName'
          },
          {
            label: '计划完成投资(万元)',
            prop: 'yearlyPlanCompleteAmount'
          },
          {
            label: '完成投资（万元）',
            prop: 'yearlyCompleteAmount'
          },
          {
            label: '完成率',
            prop: 'rate'
          }
        ]
      },
      selectOption: []
    }
  },
  methods: {
    onLoad () {
      const data = {
        deptId: this.deptId === null ? '' : this.deptId,
        month: this.month,
        quarter: this.quarter
      }
      this.$api.invest.list(data).then(res => {
        if (res.code === 200) {
          this.data = res.data
        }
      })
    },
    initOption (res) {
      console.log('initOption')
      this.month = ''
      this.selectOption.length = 0
      switch (res.value) {
        case 1:
          for (let i = 1; i <= 3; i++) {
            const item = { label: i + '月', value: i }
            this.selectOption.push(item)
          }
          this.quarter = 1
          break
        case 2:
          for (let i = 4; i <= 6; i++) {
            const item = { label: i + '月', value: i }
            this.selectOption.push(item)
          }
          this.quarter = 2
          break
        case 3:
          for (let i = 7; i <= 9; i++) {
            const item = { label: i + '月', value: i }
            this.selectOption.push(item)
          }
          this.quarter = 3
          break
        case 4:
          for (let i = 10; i <= 12; i++) {
            const item = { label: i + '月', value: i }
            this.selectOption.push(item)
          }
          this.quarter = 4
          break
        default:
          for (let i = 1; i <= 12; i++) {
            const item = { label: i + '月', value: i }
            this.selectOption.push(item)
            this.month = ''
            this.quarter = ''
          }
          break
      }
      this.onLoad()
    },
    changeMonth (res) {
      console.log('changeMonth')
      this.month = res
      this.onLoad()
    }
  }
}
</script>

<style lang='scss' scoped>
.m-2 {
}
</style>