天联信息研发文档平台

# data-transfer 数据批量导入

公用数据导入导出组件，功能包含有数据介质模板下载（空或部分业务数据）、数据介质模板导出以及数据介质文件导入（上传）

详细的业务需求，请参考 产品设计 - 数据批量导入 内容

# 安装

安装业务定制化组件集

# 聚合包
npm i -S @plugins-business/main
# 独立包
npm i -S @plugins-business/data-transfer

项目中配置

// src/config/plugins.js

import Vue from 'vue'
import { post, get } from '@/config/settings/http'

// 使用聚合包
import { DataTransfer } from '@plugins-business/main'
// 使用独立包
import DataTransfer from '@plugins-business/data-transfer'

Vue.use(DataTransfer, {
  // 执行文件导入
  doImport (params, options) {
    return post('/file-import', params, options)
  },
  // 获得导入介质模板
  doGetTemplate (params) {
    return get(`/file-import-template/${params.module}`)
  }
})
旧版包使用方式

安装业务定制化组件集

npm i -S @plugins/business

项目中配置

// src/config/plugins.js

import Vue from 'vue'
import HttpRequest, { post, get } from '@/config/settings/http'
import { DataTransfer } from '@plugins/business'
import { sendSms, smsVerify } from '@/api/business'
// 导入模块内容定义
import modules from '@/business/import-modules'

Vue.use(DataTransfer, {
  modules: modules,
  setupPhone () {
    const { phone } = profile()
    return phone || ''
  },
  // 使用手机号码获取短信验证码
  doSend (data) {
    return sendSms(data)
  },
  // 验证手机号与验证码
  doVerify (data) {
    return smsVerify(data)
  },
  // 执行文件导入
  doImport (params, options) {
    return post('/file-import', params, options)
  },
  // 获得导入介质模板
  doGetTemplate (params) {
    return get('/file-import-template/' + params.code)
  }
})

模块定义内容样例

// src/business/import-modules/index.js

export default {
  'BUSINESS_MODULE-CODE': {
    // 业务模块编码，与功能菜单编码保持一致
    type: 'BUSINESS_MODULE-CODE',
    // 导入模块的填报需知描述文本
    description: `
      <p>1、红色必填项，若未填写则会上传失败。</p>
      <p>2、一次上传最多上传 300 条数据。</p>
      <p>3、上传前请确认您已在存货档案中添加了相应的存货档案、如未添加，则将无法导入。</p>
      <p>4、上传前请确认您已在区域设置中添加了相应的区域信息、如未添加，则将无法导入。</p>
      <p>5、当一级大区和产品相同时会修改产品的价格。</p>
    `,
    // 模块名称，将应用于窗口标题、模块标题等区域
    businessName: '产品价格',
    // 下载介质文件模板的提示文本
    download: '下载《产品价格表》，统一设置产品价格，点击',
    // 导出带数据的介质文件的提示文本 *
    export: '导出所有产品价格信息，批量修改产品价格信息，点击',
    // 上传完成填报后的介质文件的提示文本
    upload: '上传填写好的信息表，点击',
    // 数据导入是否使用短信验证码验证身份 *
    importNeedSmsVerify: false,
    // 数据导出是否使用短信验证码验证身份 *
    exportNeedSmsVerify: true,
    // 验证身份结果的存储键值 *
    cacheKey: 'exportCustomer',
    // 是否有导入模块 *
    haveImport: true,
    // 是否有导出模块 *
    haveExport: true,
    // 导出模块中设置导出文件的文件名前缀
    fileName: '产品价格(导出)'
  },
  ...
}

设置选项描述中带有 * 符号的内容或将被移除功能

# 数据接口

插件涉及到数据交互的数据接口

# 获得业务数据填报模板

// request
GET https://api.maimaimai.com/v1/file-import-template/:code

// response
{
  "code": 0,
  "msg": "ok",
  "data": {
    "url": "https://product-site/template.xls"
  }
}

https://api.maimaimai.com/v1 仅作为举例说明，实际项目将该网址替换为实际内容，下同

# 数据上传

// request
POST https://api.maimaimai.com/v1/file-import

// request 请求参数
{
  // File 格式的文件流对象
  "file": File,
  // 业务编码
  "code": string,
  // 业务参数集
  "where": {}
}

// response
{
  "code": 0,
  "msg": "ok",
  "data": {
    // 上传成功条数
    "successCount": number,
    // 失败情况报表
    "fail": object
  }
}

执行该数据接口时，考虑到数据上传及业务校验的时间周期，此处将数据处理超时时间设置为 120 秒

数据上传结果分为 成功 与 失败 两种场景，根据不同场景，返回的数据结构设定有所不同

  • 上传成功
{
  "code": 0,
  "msg": "ok",
  "data": {
    "successCount": 120,
    "fail": {}
  }
}

在数据上传成功时，仅需要反馈成功上传的记录数，插件将在消息对话框中进行通知并关闭插件

  • 上传失败
{
  "code": 0,
  "msg": "ok",
  "data": {
    // 作为结果成功失败的依据，在导入数据失败时，successCount 的值必须为 0
    "successCount": 0,
    // 失败原因报表
    "fail": {
      "header": {
        "failReason": "失败原因",
        "name": "货物名称",
        "code": "货物编码",
        "price": "货物单价"
        ...
      },
      "body": [
        {
          "failReason": "货物编码已存在",
          "name": "素天下辣条",
          "code": "BX123",
          "price": 12.00,
          ...
        }
      ]
    }
  }
}

失败情况报表

根据失败情况报表设置，第一列固定设置为失败原因列，在数据列中固定以 failReason 字段输出

# 属性（prop）

设置插件应用于模块时的功能选项

提示

插件通过 v-model 绑定值来控制组件的弹出与关闭

# module 必填

  • 类型：string

应用的功能模块编码（菜单编码）

# moduleName 必填

  • 类型: string

功能模块名称

# title

  • 类型：string
  • 默认：'批量导入/导出/修改'

组件弹窗中显示的标题

# tipDownload

  • 类型：string
  • 默认：'下载模版，批量填写相关信息，点击'

模板下载的提示信息文本

# tipUpload

  • 类型：string
  • 默认：'上传填写好的信息表，点击'

介质文件上传的提示信息文本

# maxRecord

  • 类型：number
  • 默认：300

单次文件上传数据记录数上限值

# preview

  • 类型：boolean
  • 默认：true

是否启用上传文件的内容预览模块，在 maxRecord 选项设定为较大的数值且单次上传的数据记录数较多时，进行数据预览会导致加载、处理及渲染过程较慢，在该情况下不推荐启用预览功能

# customCheck

  • 类型：boolean
  • 默认：false

自定义内容（slot）中若有业务判断，则需要该参数对导入操作进行限制

满足业务检查后设置为 true

若自定义内容（slot）中没有业务限制，则直接设置为 true

在使用插槽（slot）内容的前提下，只有该值为 true 时 “开始导入” 按钮才允许点击

<template>
  <v-data-transfer
    :custom-check="check"
  >
    <template #before>
      <div>
        请选择用户
        <select v-model="user">
          <option value="张三">张三</option>
          <option value="李四">李四</option>
          <option value="王五">王五</option>
          <option value="赵六">赵六</option>
        </select>
        <button type="button" @click="doCheck">检查</button>
      </div>
    </template>
  </v-data-transfer>
</template>

<script>
export default {
  data () {
    return {
      check: false,
      user: ''
    }
  },
  methods: {
    doCheck () {
      // 只有列表选择项为 '王五' 时，自定义业务检查通过
      this.check = this.user === '王五'
    }
  }
}
</script>

# where

  • 类型：object

业务参数集、过滤条件集

# 插槽（slot）

组件允许通过插槽来自定义部分内容设置

# 默认插槽

默认插槽是作为数据模板的填报需知内容设置的区域

<template>
  <v-data-transfer
    v-model="dataImport"
    module="WORKBENCH_SALARY_MANAGE_FILE"
    module-name="薪资档案"
    :max-record="1000"
  >
    <p>1、红色必填项，若未填写则会上传失败。</p>
    <p>2、一次上传最多上传300条数据。</p>
    <p>3、在上传时候确保部门和员工信息在员工档案中已经存在，否则会上传失败。</p>
  </v-data-transfer>
</template>

效果展示

注意

要求内容以行为单位使用 <p></p> 标签进行包裹

# before 前置验证步骤

before 前置验证插槽，是作为在用户在数据导入之前需要在界面上执行自定义业务验证，并在验证成功后才允许导入数据的需求，该插槽需要配合 customCheck prop 使用

<template>
  <v-data-transfer
    v-model="dataImport"
    module="WORKBENCH_SALARY_MANAGE_FILE"
    module-name="薪资档案"
    :max-record="1000"
    :preview="true"
    :custom-check="customCheck"
  >
    <p>1、红色必填项，若未填写则会上传失败。</p>
    <p>2、一次上传最多上传300条数据。</p>
    <p>3、在上传时候确保部门和员工信息在员工档案中已经存在，否则会上传失败。</p>

    <template #before>
      <span>
        我的自定义校验环节
        <button
          type="button"
          class="btn btn-primary btn-sm"
          @click="completeCustom"
        >完成自定义校验</button>
      </span>
    </template>
  </v-data-transfer>
</template>

<script>
export default {
  data () {
    return {
      customCheck: false
    }
  },
  methods: {
    completeCustom () {
      // 执行业务校验
      ...
      this.customCheck = true
    }
  }
}
</script>

效果展示

# download 自定义模板下载

该插槽用于自定义模板下载模块

<template>
  <v-data-transfer
    v-model="dataImport"
    module="WORKBENCH_SALARY_MANAGE_FILE"
    module-name="薪资档案"
    :max-record="1000"
  >
    <p>1、红色必填项，若未填写则会上传失败。</p>
    <p>2、一次上传最多上传300条数据。</p>
    <p>3、在上传时候确保部门和员工信息在员工档案中已经存在，否则会上传失败。</p>

    <template #download>
      <span>我是自定义下载模块</span>
    </template>
  </v-data-transfer>
</template>

效果展示

# 事件

# done

  • done()

插件操作完成的响应事件，包含以下场景

  1. 上传成功自动关闭
  2. 上传失败，手动关闭弹窗或点击关闭按钮

# 历史应用模块记录


展开查看目前已配置并使用的业务场景

# 素+平台

业务模块 编码 导入 导出
通讯录 ADDRESS_BOOK ✔️ ✔️
客户档案 WORKBENCH_CUSTOMER_FILE ✔️ ✔️
组织架构 ENTERPRISE_ORGANIZATION ✔️ ❌
常购产品 WORKBENCH_SALE_PRICE_CUSTOMER_PRICE ✔️ ✔️
存货档案 WORKBENCH_STOCK_FILE ✔️ ✔️
客户活动政策 WORKBENCH_SALE_ACTIVITY_POLICY ❌ ✔️
销售订单 WORKBENCH_SALE_ORDER_LIST ❌ ✔️
期初数据 WORKBENCH_WAREHOUSE_BASE_INITIAL_DATA ✔️ ❌
销售发货数据 WORKBENCH_SALE_SHIP ✔️ ✔️
薪资档案 WORKBENCH_SALARY_MANAGE_FILE ✔️ ✔️
产品价格 WORKBENCH_TARGET-PLAN_CONFIG_PRODUCT-PRICE ✔️ ❌
年度业绩目标 WORKBENCH_TARGET-PLAN_MANAGE_YEAR-PERFORMANCE ✔️ ✔️
同期业绩目标 WORKBENCH_TARGET-PLAN_MANAGE_SAME-PERIOD-PERFORMANCE ✔️ ✔️
利润率 WORKBENCH_TARGET-PLAN_MANAGE_PROFIT-MARGIN ✔️ ✔️
费用率 WORKBENCH_TARGET-PLAN_MANAGE_EXPENSE-RATIO ✔️ ✔️
月度计划 WORKBENCH_TARGET-PLAN_PLAN_MONTH ✔️ ✔️
业绩源数据 WORKBENCH_TARGET-PLAN_PERFORMANCE_SOURCE ✔️ ✔️
个人业绩档案 WORKBENCH_TARGET-PLAN_PERFORMANCE_PROFILE ❌ ✔️
个人利润档案 WORKBENCH_TARGET-PLAN_PERFORMANCE_PROFIT ❌ ✔️
销售费用登记 WORKBENCH_TARGET-PLAN_COST_SALES ✔️ ❌
费用统计 WORKBENCH_TARGET-PLAN_COST_COUNT ❌ ✔️
退货单 WORKBENCH_TARGET-PLAN_PERFORMANCE_RETURN-ORDER ✔️ ✔️
公司调价利润 WORKBENCH_TARGET-PLAN_BASE_ADJUST-PROFIT ✔️ ❌
个人毛利档案 WORKBENCH_TARGET-PLAN_PERFORMANCE_GROSS-MARGIN ❌ ✔️

# 小牛制造

业务模块 编码 导入 导出
采购 - 采购单 PURCHASE_ORDER ✔️ ❌
配料 - 产品配方 INGREDIENTS_PRODUCT-FORMULA ✔️ ❌
配料 - 制料记录 INGREDIENTS_MAKING-MATERIALS ❌ ✔️
配料 - 用料明细 INGREDIENTS_USE-MATERIALS ❌ ✔️
配料 - 混合料配方 INGREDIENTS_MIXED-MATERIAL-FORMULA ✔️ ❌
配料 - 混合料记录 INGREDIENTS_MIXED-MATERIAL-RECORD ❌ ✔️
配料 - 混合料用料明细 INGREDIENTS_MIXED-MATERIAL-USAGE-RECORD ❌ ✔️
库存 - 原料库存 STOCK_RAW-MATERIAL ❌ ✔️
库存 - 在制品库存 STOCK_IN-PRODUCTION ❌ ✔️
库存 - 成品库存 STOCK_FINISHED-GOODS ❌ ✔️
库存 - 采购入库 STOCK_PURCHASE-INBOUND ❌ ✔️
库存 - 入库流水 STOCK_INBOUND-RECORD ❌ ✔️
库存 - 出库流水 STOCK_OUTBOUND-RECORD ❌ ✔️
物料 - 物料档案 MATERIAL_FILE ✔️ ❌
物料 - 物料对照表 MATERIAL_CHART ✔️ ❌
最后更新时间: 9/15/2021, 8:55:52 AM

← data-exporter 数据批量导出 →