ele-component

npm 安装

借助babel插件babel-plugin-component实现

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i ele-component -S

快速上手

本节将介绍如何在项目中使用组件库。

引入 EleComponent

你可以引入整个 EleComponent，或是根据需要仅引入部分组件。

详情可以通过公司内网查看：http://10.1.1.129:8080/#/guide/install

完整引入

在 main.js 中写入以下内容：

import Vue from 'vue';
import EleComponent from 'ele-component';
import 'ele-component/lib/theme/index.css';
import App from './App.vue';

Vue.use(EleComponent);

new Vue({
  el: '#app',
  render: h => h(App)
});

注意：样式文件需要单独引入。

按需引入

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc 修改为：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "ele-component",
        "styleLibraryName": "theme"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如只需要引入通用模块中的Input组件，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Input } from 'ele-component';
import App from './App.vue';

Vue.component(Input.name, Input);
/* 或写为
 * Vue.use(Input)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

Ticket

该组件为票样详情组件，括号中为发票对应code码，具体使用见每个模块下方代码演示

注：若后端字段与案例不一致，需对接口返回数据格式化处理，具体方案参考如下：

let detailObj = res.data ? res.data.map((item,index) => {
  item.invoiceCode = item.code;
  item.invoiceNo = item.no;
  ......
  return item
})

（一）航空客运电子客票行程单（93）

:::demo

<template>
  <v-ticket :detail-obj="detailObjHK" :invoice-type-code="invoiceTypeCode1"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailObjHK: {},
      invoiceTypeCode1: '93'
    }
  },
  methods: {}
}
</script>

【航空行程单详情字段说明】：
detailObj: {
  invoiceCode: '',            // 印刷序号
  passenger: '',              // 旅客姓名
  identityNumber: '',         // 有效身份证件号码
  remark: '',                 // 签注
  departCity: '',             // 出发城市
  arriveCity: '',             // 到达城市
  flightNumber: '',           // 航班号
  seatLevel: '',              // 座位等级
  startDate: '',              // 开始日期
  endDate: '',                // 结束日期
  drivingTime: '',            // 时间
  // 客票级别/客票类别（未知、暂取不到）
  // 客票生效日期（未知、暂取不到）
  // 有效截止日期（未知、暂取不到）
  // 免费行李（未知、暂取不到）
  fare: '',                    // 票价
  caacDevelopmentFund: '',     // 机场建设费
  fuelSurcharge: '',           // 燃油附加费
  otherTaxes: '',              // 其他税费
  totalAmount: '',             // 合计
  electronicTicketNumber: '',  // 电子客票号码
  // 验证码（未知、暂取不到）
  // 提示信息（未知、暂取不到）
  insurance: '',               // 保险费
  agentCode: '',               // 销售单位代号
  issueBy: '',                 // 填开单位
  dateOfIssue: '',             // 填开日期
  picture: ''                  // 影像地址
}

:::

（二）增值税普通发票（04）、增值税电子普通发票（10）、增值税专用发票（01）、通行费电子普票（14）

:::demo

<template>
  <v-ticket :detail-obj="detailObjZP" :invoice-type-code="invoiceTypeCode2"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailObjZP: {},
      invoiceTypeCode2: '01',
    }
  },
  methods: {}
}
</script>

【增票详情字段说明】：
detailObj: {
  invoiceCode: '',            // 发票代码
  invoiceNo: '',              // 发票号码
  verifyCode: '',             // 校验码
  machineNo: '',              // 机器编号
  invoiceDate: '',            // 开票日期
  /* 购买方 */
  buyerName: '',              // 名称
  buyerTaxNo: '',             // 纳税人识别号
  buyerTel: '',               // 地址、电话
  buyerAddress: '',           // 开户行及账号
  /* 销售方 */
  salerName: '',              // 名称
  salerTaxNo: '',             // 纳税人识别号
  salerTel: '',               // 地址、电话
  salerAddress: '',           // 开户行及账号
  remark: '',                 // 备注
  /* 密码区 */
  passwordArea: '',           // 密码
  totalAmount: '',            // 价税合计
  detail: [{
    goodsName: '',            // 货物或应税劳务、服务名称（电票）
    model: '',                // 规格型号
    unit: '',                 // 单位
    num: '',                  // 数量
    unitPrice: '',            // 单价
    noTaxAmount: '',          // 金额
    invoiceAmount: '',        // 合计金额
    taxRate: '',              // 税率
    taxAmount: '',            // 税额
    goodsName: '',            // 项目名称
    plateNo: '',              // 车牌号
    type: '',                 // 类型
    trafficDateStart: '',     // 通行日期起
    trafficDateEnd: '',       // 通行日期止
  },...],
  receiver: '',               // 收款人
  reviewer: '',               // 复核人
  drawer: '',                 // 开票人
  picture: ''                 // 影像地址
}

:::

（三）机动车销售统一发票（03）

:::demo

<template>
  <v-ticket :detail-obj="detailObj" :invoice-type-code="invoiceTypeCode3"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailObj: {},
      invoiceTypeCode3: '03'
    }
  },
  methods: {}
}
</script>

【机动车销售统一发票详情字段说明】：
detailObj: {
  invoiceDate: '',                  // 开票日期
  invoiceCode: '',                  // 发票代码/机打代码
  invoiceNo: '',                    // 发票号码/机打号码
  drawer: '',                       // 开票人
  machineNo: '',                    // 机器编号
  taxAuthorityCode: '',             // 税控码
  buyerName: '',                    // 购买方名称
  idNo: '',                         // 身份证号码/组织机构代码
  buyerTaxNo: '',                   // 纳税人识别号
  vehicleType: '',                  // 车辆类型
  bandModel: '',                    // 厂牌型号
  produceArea: '',                  // 产地
  taxPaymentCertificateNo: '',      // 合格证号
  certificateOfImport: '',          // 进口证明书号
  commodityInspectionNo: '',        // 商检单号
  engineNo: '',                     // 发动机号码
  vehicleIdentificationNo: '',      // 车辆识别代号/车架号码
  totalAmount: '',                  // 价税合计
  salerName: '',                    // 销货单位名称
  salerBankAccount: '',             // 账号
  salerAddressMotorVehicle: '',     // 地址
  salerBankName: '',                // 开户银行
  taxRate: '',                      // 增值税税率或征收率
  taxAmount: '',                    // 增值税税额
  taxAuthorityName: '',             // 主管税务
  taxAuthorityCode: '',             // 机关及代码
  invoiceAmount: '',                // 不含税价
  taxPaymentCertificateNo: '',      // 完税凭证号码
  tonnage: '',                      // 吨位
  limitedPeopleCount: '',           // 限乘人数
  picture: ''                       // 影像地址
}

:::

（四）增值税普通发票(卷式)（11）

:::demo

<template>
  <v-ticket :detail-obj="detailObj" :invoice-type-code="invoiceTypeCode4"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailObj: {},
      invoiceTypeCode4: '11'
    }
  },
  methods: {}
}
</script>

【卷票发票详情字段说明】：
detailObj: {
  invoiceCode: '',      // 发票代码
  invoiceNo: '',        // 发票号码/机打号码
  machineNo: '',        // 机器编号
  salerName: '',        // 销售方名称
  salerTaxNo: '',       // 销售方纳税人识别号
  invoiceDate: '',      // 开票日期
  receiver: '',         // 收款员
  buyerName: '',        // 购买方名称
  buyerTaxNo: '',       // 购买方纳税人识别号
  detail: [{
    goodsName: '',      // 项目
    unitPrice: '',      // 单价
    num: '',            // 数量
    noTaxAmount: '',    // 不含税金额
    taxAmount: '',      // 含税金额
  },...],
  remark: '',           // 备注
  totalAmount: '',      // 合计金额
  verifyCode: '',       // 校验码
  picture: ''           // 影像地址
}

:::

（五）火车票（92）

:::demo

<template>
  <v-ticket :detail-obj="detailTrain" :invoice-type-code="invoiceTypeCode5"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailTrain: {},
      invoiceTypeCode5: '92'
    }
  },
  methods: {}
}
</script>

【火车票详情字段说明】：
detailObj: {
  flightNumber: '',               // 编号
  departCity: '',                 // 起始站
  trainNumber: '',                // 班次
  arriveCity: '',                 // 到达站
  invoiceDate: '',                // 日期
  fare: '',                       // 金额
  seatLevel: '',                  // 座位等级
  identityNumber: '',             // 身份证号
  passenger: '',                  // 乘客姓名
  electronicTicketNumber: '',     // 当次编码
  picture: ''                     // 影像地址
}

:::

（六）其他客票(实名)（87）、水路运输客票(实名)（88）、公路运输客票(实名)（89）

:::demo

<template>
  <v-ticket :detail-obj="detailObj" :invoice-type-code="invoiceTypeCode6"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailObj: {},
      invoiceTypeCode6: '87'
    }
  },
  methods: {}
}
</script>

【客票详情字段说明】：
detailObj: {
  invoiceTypeCode: '',          // 发票类型
  electronicTicketNumber: '',   // 发票号码
  invoiceDate: '',              // 开票日期
  passenger: '',                // 乘坐人
  identityNumber: '',           // 证件号
  trainNumber: '',              // 车次/班次
  departCity: '',               // 出发地
  arriveCity: '',               // 到达地
  totalAmount: '',              // 票价
  amount: '',                   // 金额(不含税)
  taxRate: '',                  // 税率
  taxAmount: '',                // 税额
  picture: ''                   // 影像地址
}

:::

（七）出租车票（91）、定额（95）、通用机打（97）、汽车（94）、其他（00）等

:::demo

<template>
  <v-ticket :detail-obj="detailObj" :invoice-type-code="invoiceTypeCode7"><v-ticket>
</template>
<script>
export default {
  data () {
    return {
      detailObj: {},
      invoiceTypeCode7: '00'
    }
  },
  methods: {}
}
</script>

【其他票详情字段说明】：
detailObj: {
  invoiceTypeCode: '',            // 发票类型
  invoiceNo: '',                  // 发票号码
  invoiceDate: '',                // 开票日期
  totalAmount: '',                // 票面金额
  signatureTime: '',              // 出发时间
  picture: ''                     // 影像地址
}

:::