wt_project_web_bak/src/views/invest/components/amount.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: 'amount',
  props: {
    type: {
      type: Number,
      default: 0
    },
    deptId: {
      type: String,
      default: ''
    },
    year: {
      type: String,
      default: ''
    }
  },
  watch: {
    type: {
      handler(val) {
        this.initOption(val)
      },
      immediate: true
    },
    deptId: {
      handler(val) {
        this.onLoad()
      },
      immediate: true
    },
    year: {
      handler(val) {
        this.onLoad()
      },
      immediate: true
    }
  },
  data() {
    return {
      month: '',
      quarter: '',
      form: {},
      data: [],
      option: {
        height: '550',
        align: 'center',
        menuAlign: 'center',
        menu: false,
        size: 'mini',
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        border: true,
        index: true,
        column: [
          {
            label: '部门/乡镇',
            prop: 'deptName'
          },
          {
            label: '责任目标',
            prop: 'planCompleteAmount',
            sortable: true,
            formatter: (row, value) => {
              return value.toLocaleString()
            }
          },
          {
            label: '完成投资(万元)',
            prop: 'totalCompleteAmount',
            sortable: true,
            formatter: (row, value) => {
              return Number.parseFloat(value).toLocaleString()
            }
          },
          {
            label: '完成率',
            prop: 'completionRate',
            sortable: true
          },
          {
            label: '计划入库',
            prop: 'storageNum',
            sortable: true
          }
        ]
      },
      selectOption: []
    }
  },
  methods: {
    onLoad() {
      this.$api.invest
        .list({
          deptId: this.deptId === null ? '' : this.deptId,
          year: this.year === null ? '' : this.year,
          month: this.month,
          quarter: this.quarter
        })
        .then(res => {
          if (res.code === 200) {
            this.data = res.data
          }
        })
    },
    initOption(res) {
      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) {
      this.month = res
      this.onLoad()
    }
  }
}
</script>

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