公共组件封装之：邮件导出弹框

需求描述：

    对页面上的表格数据进行导出。具体导出方式如下：

      1. 当数据量少于或等于 6000 条时，用户可以直接在页面上导出数据，不需要弹出弹框。

      2. 当数据量超过 6000 条时，需要执行以下步骤：

            ① 弹出一个提示框，要求用户输入他们的邮箱地址和备注信息，需校验邮箱必填和输入的必须是邮件格式。

           ②用户填写邮箱地址和备注信息后，点击确认按钮。

           ③后端将数据导出至用户提供的邮箱地址中。

1 封装的vue组件

2. 对封装的组件在man.js中，进行全局注册

// 封装的公共弹框组件
import exportPackage from "@/views/my-components/modal-to/exportPackage.vue" 

// 公共的导出组件
Vue.component("exportPackage",exportPackage) 

3. 由于交互数据是存放在vuex中的，vuex中也需要增加一些字段

这是vuex中的目录结构

const app = { 
  // 这是存放在 state 中的数据
  state: { 
    fileExport:false, // 邮件导出，是否显示弹框
    isSuccessful:false, // 邮件导出是否成功
    derivedParameter:{}, // 邮件导出时需要的请求参数
  },
  // 这是 mutations 中的方法，用来修改state 中的数据
  mutations:{
    // 修改 导出值，显示弹框输入邮件地址
    updataExport(state,data){
      state.fileExport = data
    },

    // 请求参数赋值
    updataParameter(state,data){
      state.derivedParameter = data
    },

    // 是否导出成功
    updataSuccessful(state,data){
      state.isSuccessful = data
    },
  }
}
export default app

 

4. 单独新建一个methodsEncapsulate.js的文件，对其中的方法进行封装

注意：这个methodsEncapsulate.js，也需要在main.js中全局注册

  /**
   * 邮件导出 统一封装
   * @param {Object} data
   * @param {String} code
   * @param {String} email
   * @param {String} emailDes
   */
  mailExport(data = "",code = "",email = "",emailDes = ""){
    let list = {
      email:email,
      emailDes:emailDes,
      methodNo:code,
      param:data
    }
    Api.csvExport(list).then(response =>{ // 这地方是调接口的，成功之后进行相关
      if(response.result.method === "1"){ //  1 表示数据量少 直接前端导出即可
        let urls = response.result.urls
        urls.forEach( item =>{           // urls 需要导出文件的数组
          window.open(item,"_blank")
        })
      }else if(response.result.method === "2"){ // 2 表示数据量大，需要邮件导出
        store.commit("updataExport",true)  // 显示弹框
        store.commit("updataParameter",list)  // 请求参数存起来
        // console.log("***",store.state.app.fileExport)
      }else if(response.result.code !== "0"){
        // 是否正常 0-正常，不是0，表示异常，-1方法字典值不存在，-2 没有需要导出的数据, -3 导出数据超过邮件导出条数，请增加筛选条件 -4有正在进行的导出 -99 其他 ,
        modalMesssage(response.result.message) // 抛出异常信息
      }else {
        store.commit("updataSuccessful",true)  // 文件导出成功
      }
    })
  }

5. 在需要的组件中使用

    // 导出
    derive(){
      if(this.status === '0'){
        let data = {
          projectCode:this.projectCode,
          projectName:this.project,
          orderType:this.orderTypes,
          policyHolder:this.subjectInsurance,
          insureTimeBegin:this.timeInsurance[0] ? moment(this.timeInsurance[0]).format("YYYY-MM-DD"):"",
          insureTimeEnd:this.timeInsurance[1] ? moment(this.timeInsurance[1]).format("YYYY-MM-DD"):"",
          orderNo:this.orderNumber,
          policyNo:this.warrantyNumber, 
          inscomName:this.insuranceCompany,
          account:this.statisticalNot === "all" ? "":this.statisticalNot
        }
        // 传递 四个参数 data 是请求对象、"yqGroupExport" 是导出的码值
        this.methodsEncapsulate.mailExport(data,"yqGroupExport","","")
      }else if(this.status === '1'){
        let data = {
          projectCode:this.projectCode,
          projectName:this.project,
          orderType:this.orderTypes,
          bussinessMode:this.serviceIdentification,
          claimDateBegin:this.claimCompletion[0] ? moment(this.claimCompletion[0]).format("YYYY-MM-DD"):"",
          claimDateEnd:this.claimCompletion[1] ? moment(this.claimCompletion[1]).format("YYYY-MM-DD"):"",
          orderNo:this.orderNumber,
          policyNo:this.warrantyNumber,
          inscomName:this.insuranceCompany,
          account:this.statisticalNot === "all" ? "":this.statisticalNot
        }
        this.methodsEncapsulate.mailExport(data,"yqDrugExport","","")
      }
    },

5. 导出时必须要加的导出组件

因为上面用到了 this.$store.subscribe，vuex订阅者模式，来订阅vuex中数据状态的变化，该状态的变化，大部分上都是在`created `钩子函数中订阅的。

想要订阅生效，就必须有地方要使用这个封装好的组件，来触发它，所以这里就要使用这个组件。