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">8</span> 个，请选择下面的字段信息，系统将对已选项自动进行汇总累加</span>
        <el-select
            v-model="keyWords"
            clearable
            placeholder="年份筛选"
            prefix-icon="Search"
        />
      </div>
      <div class="hide-scrollbar full-width mt-15" style="height: 20vh;overflow-x: scroll">
        <!--        <div v-if='attaches.length === 0' class='full-width flex flex-center '>-->
        <!--          <el-empty image-size='100'/>-->
        <!--        </div>-->
        <div class="flex flex-justify-between flex-center">
          <span class="bold font-15 grey ml-5 ">字段选择</span>
        </div>
        <div class="flex flex-wrap" v-if='selectIndex !== -1'>
          <div v-for="(item,index) in fieldType[selectIndex].params" :key='item.id'
               class="flex flex-center padding pointer">
            <el-checkbox v-model=item.checked :label="item.code" size="large" @change='change(selectIndex,index)'>
              {{ 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";
import uploads from "@/components/uploads.vue";

export default {
  name: "summary_dialog",
  components: {BaseButton, uploads},
  props: {
    dialogType: {
      type: String,
      default: -1
    }
  },
  watch: {
    dialogType: {
      handler(val) {
        if (val === 2) {
          this.showSummary = true
          this.getDict('params_type')
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      loading: false,
      active: 0,
      checked: true,
      showSummary: false,
      showExport: false,
      attaches: [],
      keyWords: '',
      code: '',
      fieldType: [],
      paramsList: [],
      checkList: [],
      selectIndex: -1,
      resultParams: []
    }
  },

  methods: {
    getDict(code) {
      this.$api.common.dicList({code}).then(res => {
        if (res.code === 200) {
          this.fieldType = res.data.map(e => {
            e.isSelect = false
            e.count = 0
            e.parmas = []
            return e
          })
        }
      })
    },
    close() {
      this.$emit('close')
    },
    upload(res) {
      console.log(res)
      this.attaches = res.fileList
      this.$message.success('操作成功')
      this.showImport = false
    },
    before(files) {
      console.log(files)
      this.attaches = files
    },
    removeFile(item) {
      this.attaches = this.attaches.filter(sub => sub.uid !== item.uid)
    },
    switchTab(item, index) {
      this.fieldType[index].isSelect = !this.fieldType[index].isSelect
      this.selectIndex = index
      if (this.fieldType[index].params === undefined) {
        this.$api.params.getListByKey({type: this.fieldType[index].dictKey}).then(res => {
          if (res.code === 200) {
            this.fieldType[index].params = res.data.records.map(e => {
              e.checked = true
              return e
            })
            this.fieldType[index].count = res.data.total
          }
        })
      }
    },
    importExcel() {
      this.$refs.upload.submit()
    },
    change(parentIndex, index) {
      const tmp = this.fieldType[parentIndex].params.filter(e => e.checked)
      this.fieldType[parentIndex].count = tmp.length
      for (let i = 0; i < tmp.length; i++) {
        console.log(tmp[i])
        this.resultParams.push(tmp[i])
      }
    },
    exportExcel() {
      const params = this.fieldType.filter(sub => sub.params).map(sub => sub.params)
      const tmps = [].concat.apply([], params)
      const tmpsList = tmps.filter(sub => sub.checked)
      if (tmpsList && tmpsList.length > 0) {
        const result = tmpsList.map(sub => sub.code).join(',')
        this.$emit('export', result)
      } else {
        this.$message.error('未选择任何字段进行导出')
      }
    }
  }
}


</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>