wt_project_web_bak/src/views/home/component/summary_dialog.vue

<template>
  <div>
    <!--    汇总数据导出-->
    <el-dialog v-model='showSummary'
               append-to-body
               center
               @close="close"
               title="汇总数据导出"
               width="45%">
      <div class="flex flex-col flex-center">
        <span
            class="bold mb-10">共找到符合条件的项目 <span class="blue font-15">{{ selectNum }}</span> 个，请选择下面的字段信息，系统将对已选项自动进行汇总累加</span>
        <el-select
            v-model="year"
            clearable
            placeholder="年份筛选"
            prefix-icon="Search"
        >
          <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>
      </div>
      <div class="hide-scrollbar full-width mt-15" style="height: 20vh;overflow-x: scroll">
        <div class="flex flex-justify-between flex-center">
          <span class="bold font-15 grey ml-5 ">字段选择</span>
        </div>
        <div class="flex flex-wrap">
          <div v-for="(item,index) in fieldType" :key='item.id'
               class="flex flex-center padding pointer">
            <el-checkbox v-model=item.checked :label="item.code" size="large">
              {{ item.dictValue }}
            </el-checkbox>
          </div>
        </div>
      </div>
      <div class="flex flex-center mt-20 mb-5">
        <base-button title="重置" type="0" icon="Refresh"/>
        <base-button class="ml-15" title="导出表格" icon="el-icon-download" @click='exportExcel'/>
      </div>
    </el-dialog>
  </div>
</template>

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

export default {
  name: 'summary_dialog',
  components: {BaseButton},
  props: {
    dialogType: {
      type: String,
      default: -1
    },
    selectNum: {
      type: Number,
      default: 0
    }
  },
  watch: {
    dialogType: {
      handler(val) {
        if (val === 2) {
          this.showSummary = true
          this.getDict('summary_field')
        } else if (val === -1) {
          this.showSummary = false
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      year: '',
      loading: false,
      checked: true,
      showSummary: false,
      code: '',
      fieldType: [],
      yearList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const year = new Date().getFullYear()
      for (let i = year - 10; i <= year; i++) {
        this.yearList.push(i)
      }
    },
    getDict(code) {
      this.$api.common.dicList({code}).then(res => {
        if (res.code === 200) {
          this.fieldType = res.data.map(e => {
            e.checked = true
            return e
          })
        }
      })
    },
    close() {
      this.$emit('close')
    },
    exportExcel() {
      const tmp = this.fieldType.filter(e => e.checked).map(sub => sub.dictKey)
      if (this.year.length === 0) {
        this.$message.error('请选择年份')
        return
      }
      if (tmp.length === 0) {
        this.$message.error('请选择要导出的字段')
        return
      }
      const data = {columnName: tmp.join(','), year: this.year}
      this.$emit('export', data)
    }
  }
}

</script>

<style lang="scss" scoped>
.pic {
  width: 196px;
  height: 154px;
  margin-top: -20px;
}

.box-s {
  border: 1px solid #AC9A7C;
  width: 120px;
  height: 50px;
  color: #D1A55F;
}

.box {
  width: 120px;
  height: 50px;
  border: 1px solid transparent;
  background: #F1F2F7;
  color: #707070;
}
</style>