导入功能组件重制版

由于后台弹窗导入功能使用过于复杂，源码维护困难，每次使用都需要做很多重复的事情，后端也是如此，于是秉着“使用简单”、“可维护性强”、“性能合理提升”的原则，前后端通力合作重新封装了导入功能组件。

源码位置

源码可以研究探讨，但是为了组件的可维护性，请勿随意修改源码

1	/src/components/ImportDialogUpgrade

首次提交 git 分支

1	feature/vDOE-qa4-1006368

组件的引入

避免每次使用都需要引入一次，在 plugins 里进行了全局组件注册，它将被 main.js 引入，即在项目中任何地方都可以直接使用组件

1
2
3

// 专门用于引入组件、插件的文件: /src/plugins
import ImportDialogUpgrade from '@/components/ImportDialogUpgrade'
Vue.component('ImportDialogUpgrade', ImportDialogUpgrade)

使用示例

在页面底部使用组件标签 <import-dialog-upgrade>, 通过属性、事件的配置实现具体导入功能

<template>
  <div>
    <!-- 页面原本内容 -->
    <import-dialog-upgrade
      title="导入客户"
      template="导入指定客户"
      :data="{type: 'couponWhiteSkuSelected'}"
      :visible="visible"
      @updateVisible="updateVisible">
    </import-dialog-upgrade>
  </div>
</template>

属性 Props

title

描述: 导入功能组件弹窗的标题文字
类型: String
必填: 否
默认值: 无

1	<import-dialog-upgrade title="导入客户"></import-dialog-upgrade>

template

描述: 下载模板的名字
类型: String
必填: 否
默认值: 无

1	<import-dialog-upgrade title="导入客户" template="导入指定客户"></import-dialog-upgrade>

templateApiParams

描述: 通过接口下载模板时，需要的参数
类型: Object
必填: 否
默认值: 无

1	<import-dialog-upgrade title="导入客户" template="导入指定客户" :templateApiParams="{is_all: 1, plan_id: 97}"></import-dialog-upgrade>

data

描述: 提供给后端接口的额外参数
类型: Object
必填: 是
默认值: 无

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}">
</import-dialog-upgrade>

visible

描述: 控制组件弹窗是否显示的变量
类型: Boolean
必填: 是
默认值: false

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}"
  :visible="visible">
</import-dialog-upgrade>

tipsShow

描述: 是否显示 “温馨提示”
类型: Boolean
必填: 否
默认值: true

tipsDefault

描述: 是否使用 “温馨提示默认选项”
类型: Boolean
必填: 否
默认值: true

tipsOption

描述: 自定义温馨提示选项，顺着 “温馨提示默认选项” 后面排列，如果不使用 “温馨提示默认选项” （tipsDefault 为 false）则索引从 1 开始计
类型: Array
必填: 否
默认值: [ ]

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}"
  :visible="visible"
  :tipsOption="[
    '第一条自定义温馨提示语句',
    '第二条自定义温馨提示语句',
    '第三条自定义温馨提示语句'
  ]">
</import-dialog-upgrade>

效果图如下:

isGoOn

描述: 导入成功之后，按钮文案显示是否为 “继续导入”，默认为 “重新导入”
类型: Boolean
必填: 否
默认值: false

效果图如下:

isGoOn 为 false 时，导入成功后:

isGoOn 为 true 时，导入成功后:

queryFields

描述: 有时候导入完成之后，会需要使用导入的ID请求接口获取数据来做相应的业务处理，queryFields 则是请求该接口所需要的额外参数
类型: String
必填: 否
默认值: 无

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}"
  :visible="visible"
  :tipsOption="[
    '第一条自定义温馨提示语句',
    '第二条自定义温馨提示语句',
    '第三条自定义温馨提示语句'
  ]"
  queryFields="customer_id">
</import-dialog-upgrade>

事件 Event

updateVisible

描述: 更新组件弹窗的显示状态,即改变 visible 属性的值
必填: 是
参数类型: Boolean

由于调用方、以及组件内部源码，都需要操作弹窗是否显示，根据单向数据流的原则，我们单独使用 visible 无法满足需求，组件内部是无法改变调用方的 visible 的值的，于是我们就需要用到 updateVisible 事件，通过事件去驱动 visible 的状态改变

组件部分，绑定一个函数

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}"
  :visible="visible"
  @updateVisible="updateVisible">
</import-dialog-upgrade>

JS部分，方法的实现

1
2
3

updateVisible(val) {
  this.visible = val
},

完成上面两步之后，我们就可以在任意时机调用 updateVisible 方法，来实现打开或者关闭弹窗

1	<el-button type="primary" @click="updateVisible(true)" plain size="small">测试导入功能</el-button>

result

描述: 获取组件导入成功之后，请求接口返回的结果
内置参数: 即返回结果
必填: 否

组件部分，绑定一个函数

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}"
  :visible="visible"
  queryFields="customer_id"
  @result="getResult">
</import-dialog-upgrade>

JS部分，通过内置参数获取结果

1
2
3

getResult(res) {
  // do something...
},

完整模板

你可以通过模板快速复制到页面中进行使用

组件部分

<import-dialog-upgrade
  title="导入客户"
  template="导入指定客户"
  :data="{type: 'couponWhiteSkuSelected'}"
  :visible="visible"
  queryFields="customer_id"
  @result="getResult"
  @updateVisible="updateVisible"
  tipsShow
  tipsDefault
  :tipsOption="tipsOption">
</import-dialog-upgrade>

js 部分

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      visible: false,
      tipsOption: [
        '第一条自定义温馨提示语句',
        '第二条自定义温馨提示语句',
        '第三条自定义温馨提示语句'
      ]
    }
  },
  methods: {
    // 打开或者关闭弹窗
    updateVisible(val) {
      this.visible = val
    },
    // 获取导入成功之后的结果
    getResult(res) {
      // do something...
    }
  }
}
</script>