rys-invoice v0.2.2

开票组件

引用

需要引入注册，依赖：

store: 当前项目的store
baseUrl: 项目请求的gateway环境，如 http://test-gateway.rys.com
request: 当前项目封装的请求过滤

使用方法

这里引用的组件将会全局挂靠，无需再次引用 
-- apply.js  
  import {
    install,
    // 申请蓝票
    applyInvoice,
    // 新增货品
    commodityDrawer,
    // // 列表分页
    // pagiNation,
    // 蓝票详情
    applyDetails,
    // 上传附件
    uploadImages,
    // 红票、作废详情
    otherDetails,
    // 发票预览
    invoiceFillPreview
  } from "rys-invoice";
  import request from "@/utils/axios2";
  import store from "./store";

  function plugin(Vue) {
    install(Vue, {
      store,
      request,
      baseUrl: baseUrl.api_url
    });
    Vue.use(applyInvoice);
    Vue.use(commodityDrawer);
    Vue.use(applyDetails);
    Vue.use(uploadImages);
    Vue.use(otherDetails);
    Vue.use(invoiceFillPreview)
  }
  export default plugin;  


-- main.js
import plugin from "./apply-invoice.js";
Vue.use(plugin);

需要依赖 babel-plugin-component 做按需引用
-- babel.config.js
  module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    plugins: [
      [
        "component",
        {
          libraryName: "rys-invoice",
          camel2Dash: false,
          style: false
        },
        "rys-invoice"
      ]
    ]
  };

otherDetails 红票/作废票详情

依赖组件:

uploadImages: 附件列表
invoiceFillPreview: 预览蓝票组件

入参：

value: Boolean 是否显示弹窗
applyCode(必填): String 申请单号
customId(必填): String 企业id
fromDzInfo: Object 来自代账机构端的信息
fromDz: Boolean 判断是否来自代账机构
eventName: Number 1:审核  2:提交开票 3:查看详情

demo:

<other-details v-model="showOtherDetailsDrawer" :applyCode="applyCode" :customId="customId" />

invoiceFillPreview 蓝票原票预览弹窗

依赖组件:

无

入参：

previewDialogVisible: Boolean 是否显示弹窗
kpOutputInvoiceId(必填): String 原票id

demo:

<other-details v-model="showOtherDetailsDrawer" :applyCode="applyCode" :customId="customId" />

applyDetails 蓝票申请详情

依赖组件:

pagiNation: 分页组件
uploadImages: 附件列表

入参：

value(必填): Boolean 申请单号 是否显示弹窗
applyCode(修改时必填): String 申请单号
customId(必填): String 企业id
fromDzInfo: Object 账机构端的信息
fromDz: Boolean 是否来自代账机构

demo:

<apply-details v-model="showDetailsDrawer" :applyCode="applyCode" :customId="customId" />

applyInfo 蓝票申请 -- 发票基础信息

依赖组件:

无

入参：

value(必填): Object 票面基础信息
customId(必填): String 企业id
isEdit: Boolean 是否过来编辑

demo:

<apply-info ref="info" :isEdit="isEdit" v-model="invoiceInfo" :customId="customId" :fromDz="fromDz"></apply-info>

applyMx 蓝票申请 -- 发票商品明细

依赖组件:

ChooseCommodityDrawer: 选择商品组件
commodityDrawer: 新增商品组件
glNodata: 全局表格无数据组件

入参：

value(必填): Array 票面商品明细
customId(必填): String 企业id
taxState(必填): String 单价类型 1含税 0不含税

demo:

<apply-mx ref="detailList" v-model="detailList" :taxState="invoiceInfo.priceIncludingTaxState" :customId="customId"></apply-mx>

uploadImages 图片附件

依赖组件:

无

入参：

value(必填): Array 附件值["a.b.c/d.jpg"]
isDetail: Boolean 是否详情--详情不可删除新增只能预览图片
maxSize: Number 单个图片最大值

demo:

<upload-images class="mt20" v-model="fileList" :isDetail="isDetail"></upload-images>

applyInvioce 蓝票申请组件（全）

依赖组件:

applyInfo: 发票票面信息
applyMx: 发票商品明细
uploadImages: 上传图片附件
ChooseCommodityDrawer: 选择商品组件
commodityDrawer: 新增商品组件
glNodata: 全局表格无数据组件

入参：

customId(必填): String 企业id
applyeer(必填): String 申请人
operationType(默认8): String * 操作类型 * 1：直接pc开票 * 2：冲红操作来源 * 3：复制开票开源 * 4：发票修改开票来源 * 5：app申请开票来源 6:批量开票拷贝数据 7:网商云谷 8：企业主web端
applyCode(编辑时必填):String 编辑的发票id
fromDz: Boolean 是否来自代账机构端

demo:

<apply-invoice
  :invoiceInfo="invoiceInfo"
  :applyCode="applyCode"
  :operationType="operationType"
  :customId="customId"
  :applyeer="userInfo.realName"
  @afterSave="afterSave"
></apply-invoice>

chooseGoods 蓝票申请 -- 选择商品

依赖组件:

pagiNation: 页码组件
commodityDrawer: 新增商品组件
glNodata: 全局表格无数据组件

入参：

showDrawer(必填): Boolean 是否显示弹窗
customId(必填): String 企业id
showAddGoods: Boolean 是否显示新增按钮

demo:

<!-- 选择货品 -->
<choose-commodity-drawer
  :customId="customId"
  v-if="showChooseCommodityDrawer"
  :showDrawer="showChooseCommodityDrawer"
  @chooseGoodsClose="chooseGoodsClose"
  @commodityChange="commodityChange"
/>