library-management-system/src/views/visualCheck/checkManage/dataScreening/module/export.vue

<template>
  <el-dialog class="export-dialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" :before-close="handleCloseForm" :visible="formExportVisible" title="导出数据">
    <span class="dialog-right-top" />
    <span class="dialog-left-bottom" />
    <div class="setting-dialog">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px">
        <el-radio-group v-model="form.exportRadio">
          <el-radio :label="1">盘点统计表</el-radio>
          <el-radio v-if="type === 3" :label="2">盘点明细表</el-radio>
          <!-- <el-radio v-if="type === 3" :label="3">盘点差异表</el-radio> -->
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="handleCloseForm">取消</el-button>
        <el-button :loading="saveLoading" type="primary" @click="handleComfiredExport">继续</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import CRUD, { form } from '@crud/crud'
import { parseTime, saveAs, getBlob } from '@/utils/index'
import qs from 'qs'

const defaultForm = { exportRadio: 1 }
export default {
  name: 'DataForm',
  mixins: [
    form(function() {
      return Object.assign({ }, defaultForm)
    })
  ],
  props: {
    exportType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      saveLoading: false,
      formExportVisible: false,
      type: 1,
      rules: {
        exportRadio: [
          { required: true, message: '请选择需要导出得数据', trigger: 'change' }
        ]
      },
      params: {}
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
    },
    handleCloseForm() {
      this.$refs['form'].clearValidate()
      this.$refs['form'].resetFields()
      this.formExportVisible = false
    },
    handleComfiredExport() {
      console.log(this.form.exportRadio)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.saveLoading = true
          this.handleExport(this.params)
        } else {
          return false
        }
      })
    },
    handleExport(params) {
      if (this.form.exportRadio === 1) {
        // 导出盘点统计
        this.exportStockCheck(params)
      } else if (this.form.exportRadio === 2) {
        // 导出盘点明细统计
        this.exportStockDetailsCheck(params)
      }
      this.saveLoading = false
      this.handleCloseForm()
    },
    exportStockCheck(params) {
      const fileName = '盘点统计-' + parseTime(new Date()) + '.xlsx'
      getBlob(this.baseApi + '/api/stocktask-task/exportStockCheck' + '?' + qs.stringify(params, { indices: false }), function(blob) {
        saveAs(blob, fileName)
      })
    },
    exportStockDetailsCheck(params) {
      const fileName = '盘点明细统计-' + parseTime(new Date()) + '.xlsx'
      getBlob(this.baseApi + '/api/stocktask-task/exportStockDetailsCheck' + '?' + qs.stringify(params, { indices: false }), function(blob) {
        saveAs(blob, fileName)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.export-dialog{
  ::v-deep .el-dialog{
    width: 400px;
  }
}
</style>