mg-ocr-invoice 0.3.0 → 0.3.2

package/src/components/OCRInvoice/const.ts

@@ -1,70 +1,70 @@
-export const data = {
-  angle: '0',
-  attachmentLink:
-    'https://filegw.nuonuo.com/U1ylUBa5YlUHWOpta7hoLSC6QX9pEcu8Kcy-JnCnHTGn6PYXKNdZosH32iDDaLWGzhkY0N88rGOaS4w2krdeCw.png',
-  description: '增值税专用发票',
-  invoiceType: 'vat_special_invoice',
-  invoiceRootType: '专票',
-  position: '[0,0,2048,0,0,928,2048,928]',
-  checkCode: '',
-  clerk: '江海珍',
-  electronicMark: '0',
-  electronicNumber: '',
-  invoiceCode: '3300231130',
-  invoiceDate: '2023年07月17日',
-  invoiceNum: '08148218',
-  itemNames: '*住宿服务*住宿费',
-  noTaxAmountTotal: '212.87',
-  note: '',
-  payee: '王宝存',
-  payerAccount: '中信银行上海虹桥商务区支行8110201012601374925',
-  payerContact: '上海市闵行区沪青平公路277号5楼13301773703',
-  payerId: '91310112MA7BGUJL15',
-  payerName: '上海半小妖科技有限公司',
-  priceTaxTotalFigure: '215.00',
-  printCode: '0814821',
-  printNum: '0814821',
-  producerStamp: '浙江',
-  recheck: '金芬兰',
-  seal: '1',
-  sellerAccount: '温州银行股份有限公司营业部 745000120190095098',
-  sellerContact: '温州市瓯海娄桥古岸头村(不作拆迁凭证)0577-88812123',
-  sellerId: '913303046845118206',
-  sellerName: '温州蔬农招待所有限公司',
-  serviceName: '住宿服务',
-  taxAmountTotal: '2.13',
-  title: '浙江增值税专用发票',
-  totalCn: '贰佰壹拾伍圆整',
-  vatInvoicePage: '发票联',
-  nuonuoFileId: '3232300437-7d12c82340b84855a04e1f6d9d059c2f',
-  deatis: [
-    {
-      itemExTaxAmount: '212.87',
-      itemExTaxPrice: '',
-      itemName: '*住宿服务*住宿费',
-      itemQuantity: '',
-      itemSpec: '',
-      itemTaxAmount: '2.13',
-      itemTaxRate: '1%',
-      itemUtil: '',
-      id: 1345,
-      code: '1691272134678020096',
-      tenantCode: 'af9390a20cccc90fd174e5706f302769',
-      brandCode: '1645512743732000029',
-      createdAt: 1692065673000,
-      updatedAt: 1692065673000,
-      invoiceTableCode: '1691272117275852800',
-    },
-  ],
-  status: 'entered',
-  invoiceStatus: 'unused',
-  realStatus: 'checked',
-  fileUrlKey:
-    'https://invoice-sit-1251881907.cos.ap-nanjing.myqcloud.com/f8c6ff4af53241269c39dbd70f59cf6a.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDwtmcPMRRMAe9d4Sju00wq7KQPKAvZ6Yt%26q-sign-time%3D1693876509%3B1693876689%26q-key-time%3D1693876509%3B1693876689%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Dd49201f59ae86085771f52b2df0b13f40556e848',
-  invoiceCompanyType: '公司',
-  taxRate: '1%',
-  taskStatus: 'repeat',
-  taskId: '1698867126367944704',
-  invoiceConsumptionType: 'accommodation',
-  invoiceConsumptionTypeInfo: '住宿费',
-}
+export const data = {
+  angle: '0',
+  attachmentLink:
+    'https://filegw.nuonuo.com/U1ylUBa5YlUHWOpta7hoLSC6QX9pEcu8Kcy-JnCnHTGn6PYXKNdZosH32iDDaLWGzhkY0N88rGOaS4w2krdeCw.png',
+  description: '增值税专用发票',
+  invoiceType: 'vat_special_invoice',
+  invoiceRootType: '专票',
+  position: '[0,0,2048,0,0,928,2048,928]',
+  checkCode: '',
+  clerk: '江海珍',
+  electronicMark: '0',
+  electronicNumber: '',
+  invoiceCode: '3300231130',
+  invoiceDate: '2023年07月17日',
+  invoiceNum: '08148218',
+  itemNames: '*住宿服务*住宿费',
+  noTaxAmountTotal: '212.87',
+  note: '',
+  payee: '王宝存',
+  payerAccount: '中信银行上海虹桥商务区支行8110201012601374925',
+  payerContact: '上海市闵行区沪青平公路277号5楼13301773703',
+  payerId: '91310112MA7BGUJL15',
+  payerName: '上海半小妖科技有限公司',
+  priceTaxTotalFigure: '215.00',
+  printCode: '0814821',
+  printNum: '0814821',
+  producerStamp: '浙江',
+  recheck: '金芬兰',
+  seal: '1',
+  sellerAccount: '温州银行股份有限公司营业部 745000120190095098',
+  sellerContact: '温州市瓯海娄桥古岸头村(不作拆迁凭证)0577-88812123',
+  sellerId: '913303046845118206',
+  sellerName: '温州蔬农招待所有限公司',
+  serviceName: '住宿服务',
+  taxAmountTotal: '2.13',
+  title: '浙江增值税专用发票',
+  totalCn: '贰佰壹拾伍圆整',
+  vatInvoicePage: '发票联',
+  nuonuoFileId: '3232300437-7d12c82340b84855a04e1f6d9d059c2f',
+  deatis: [
+    {
+      itemExTaxAmount: '212.87',
+      itemExTaxPrice: '',
+      itemName: '*住宿服务*住宿费',
+      itemQuantity: '',
+      itemSpec: '',
+      itemTaxAmount: '2.13',
+      itemTaxRate: '1%',
+      itemUtil: '',
+      id: 1345,
+      code: '1691272134678020096',
+      tenantCode: 'af9390a20cccc90fd174e5706f302769',
+      brandCode: '1645512743732000029',
+      createdAt: 1692065673000,
+      updatedAt: 1692065673000,
+      invoiceTableCode: '1691272117275852800',
+    },
+  ],
+  status: 'entered',
+  invoiceStatus: 'unused',
+  realStatus: 'checked',
+  fileUrlKey:
+    'https://invoice-sit-1251881907.cos.ap-nanjing.myqcloud.com/f8c6ff4af53241269c39dbd70f59cf6a.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDwtmcPMRRMAe9d4Sju00wq7KQPKAvZ6Yt%26q-sign-time%3D1693876509%3B1693876689%26q-key-time%3D1693876509%3B1693876689%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Dd49201f59ae86085771f52b2df0b13f40556e848',
+  invoiceCompanyType: '公司',
+  taxRate: '1%',
+  taskStatus: 'repeat',
+  taskId: '1698867126367944704',
+  invoiceConsumptionType: 'accommodation',
+  invoiceConsumptionTypeInfo: '住宿费',
+}

package/src/components/OCRInvoice/index.vue

@@ -1,116 +1,116 @@
-<template>
-  <div class="OCRInvoice">
-    <div v-if="activePage === 1" class="box">
-      <PaymentMode
-        :batchId="batchId"
-        :multiple="multiple"
-        @uploadSuccess="uploadSuccess"></PaymentMode>
-    </div>
-    <div v-if="activePage === 2" class="box">
-      <InvoiceList
-        :multiple="multiple"
-        :listId="listId"
-        :catchList="catchList"
-        @ok="submit"
-        @edit="edit">
-      </InvoiceList>
-    </div>
-    <div v-if="activePage === 3" class="box">
-      <Invoice
-        @saveSuccess="saveSuccess"
-        :ids="ids"
-        :invoiceData="invoiceData"></Invoice>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { PaymentMode, Invoice, InvoiceList } from '@/components/index'
-import { getUrlParams } from '@/utils/getUrlParams'
-import { showToast } from 'vant'
-import Cookies from 'js-cookie'
-// import eruda from 'eruda'
-// eruda.init()
-import VConsole from 'vconsole'
-// import { data as dataObj } from './const'
-
-const setLog = () => {
-  if (getUrlParams(window.location.href).log == 1) {
-    const vConsole = new VConsole()
-  }
-}
-setLog()
-const emit = defineEmits(['submit'])
-const { token, multiple, Base_URL, OCR_AuthDomain, batchId } = defineProps({
-  token: {
-    required: false,
-    type: String,
-  },
-  multiple: {
-    required: false,
-    default: true,
-  },
-  Base_URL: {
-    required: false,
-  },
-  OCR_AuthDomain: {
-    required: false,
-  },
-  batchId: {
-    required: false,
-    
-  },
-})
-
-const initToken = () => {
-  activePage.value = 1
-  const params = getUrlParams(window.location.href)
-  const linkToken = params.token
-  Cookies.set('token', linkToken || token)
-}
-const init_Base_URL = () => {
-  const params = getUrlParams(window.location.href)
-  Cookies.set(
-    'OCR_Base_URL',
-    params.Base_URL || Base_URL || 'https://invoice.imugua.team/'
-  )
-  Cookies.set('OCR_AuthDomain', params.OCR_AuthDomain || OCR_AuthDomain)
-}
-const activePage = ref(0)
-const listId: any = ref(null)
-const ids = ref({})
-const invoiceData = ref({})
-// invoiceData.value = dataObj
-const uploadSuccess = (id: any) => {
-  listId.value = id
-  activePage.value = 2
-}
-const catchList: any = ref(null)
-const edit = (id: object, row: any, list: any) => {
-  ids.value = id
-  invoiceData.value = row
-  catchList.value = list
-  activePage.value = 3
-}
-const saveSuccess = (id: object) => {
-  activePage.value = 2
-}
-const submit = (data: any, id: string) => {
-  emit('submit', data, id)
-}
-onMounted(() => {
-  initToken()
-  init_Base_URL()
-})
-</script>
-<style lang="scss" scoped>
-.OCRInvoice {
-  width: 100%;
-  height: 100vh;
-  .box {
-    width: 100%;
-    min-height: 100%;
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <div class="OCRInvoice">
+    <div v-if="activePage === 1" class="box">
+      <PaymentMode
+        :batchId="batchId"
+        :multiple="multiple"
+        @uploadSuccess="uploadSuccess"></PaymentMode>
+    </div>
+    <div v-if="activePage === 2" class="box">
+      <InvoiceList
+        :multiple="multiple"
+        :listId="listId"
+        :catchList="catchList"
+        @ok="submit"
+        @edit="edit">
+      </InvoiceList>
+    </div>
+    <div v-if="activePage === 3" class="box">
+      <Invoice
+        @saveSuccess="saveSuccess"
+        :ids="ids"
+        :invoiceData="invoiceData"></Invoice>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { PaymentMode, Invoice, InvoiceList } from '@/components/index'
+import { getUrlParams } from '@/utils/getUrlParams'
+import { showToast } from 'vant'
+import Cookies from 'js-cookie'
+// import eruda from 'eruda'
+// eruda.init()
+import VConsole from 'vconsole'
+// import { data as dataObj } from './const'
+
+const setLog = () => {
+  if (getUrlParams(window.location.href).log == 1) {
+    const vConsole = new VConsole()
+  }
+}
+setLog()
+const emit = defineEmits(['submit'])
+const { token, multiple, Base_URL, OCR_AuthDomain, batchId } = defineProps({
+  token: {
+    required: false,
+    type: String,
+  },
+  multiple: {
+    required: false,
+    default: true,
+  },
+  Base_URL: {
+    required: false,
+  },
+  OCR_AuthDomain: {
+    required: false,
+  },
+  batchId: {
+    required: false,
+    
+  },
+})
+
+const initToken = () => {
+  activePage.value = 1
+  const params = getUrlParams(window.location.href)
+  const linkToken = params.token
+  Cookies.set('token', linkToken || token)
+}
+const init_Base_URL = () => {
+  const params = getUrlParams(window.location.href)
+  Cookies.set(
+    'OCR_Base_URL',
+    params.Base_URL || Base_URL || 'https://invoice.imugua.team/'
+  )
+  Cookies.set('OCR_AuthDomain', params.OCR_AuthDomain || OCR_AuthDomain)
+}
+const activePage = ref(0)
+const listId: any = ref(null)
+const ids = ref({})
+const invoiceData = ref({})
+// invoiceData.value = dataObj
+const uploadSuccess = (id: any) => {
+  listId.value = id
+  activePage.value = 2
+}
+const catchList: any = ref(null)
+const edit = (id: object, row: any, list: any) => {
+  ids.value = id
+  invoiceData.value = row
+  catchList.value = list
+  activePage.value = 3
+}
+const saveSuccess = (id: object) => {
+  activePage.value = 2
+}
+const submit = (data: any, id: string) => {
+  emit('submit', data, id)
+}
+onMounted(() => {
+  initToken()
+  init_Base_URL()
+})
+</script>
+<style lang="scss" scoped>
+.OCRInvoice {
+  width: 100%;
+  height: 100vh;
+  .box {
+    width: 100%;
+    min-height: 100%;
+    height: 100%;
+  }
+}
+</style>

package/src/components/PaymentMode/index.vue

@@ -1,144 +1,144 @@
-<template>
-  <div class="PaymentMode">
-    <div class="title">选择识别方式</div>
-    <div class="list">
-      <div
-        class="method-item"
-        @click="handleClickText(item.text)"
-        v-for="(item, index) in payList"
-        :key="item.id || index">
-        <div class="left-text">
-          <span class="icon-left">
-            <i class="iconfont" :class="item.leftIcon"></i>
-          </span>
-          <span class="text">{{ item.text }}</span>
-        </div>
-        <div class="right-icon">
-          <i class="iconfont icon-xiangyou"></i>
-        </div>
-      </div>
-    </div>
-  </div>
-  <Overlay
-    style="display: flex; justify-content: center; align-items: center"
-    :show="showLoading">
-    <Loading class="loading" color="#0094ff">上传中...</Loading>
-  </Overlay>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import '@/utils/disableZoom'
-import { selectPhoto, takePhoto } from '@/utils/upload'
-import { __uploadInvoice } from '@/api/invoice'
-import { showToast, Overlay, Loading, showFailToast } from 'vant'
-const props = defineProps(['multiple', 'batchId'])
-const emit = defineEmits(['uploadSuccess'])
-const payList: any = [
-  {
-    text: '拍照',
-    leftIcon: 'icon-xiangji',
-  },
-  {
-    text: '相册',
-    leftIcon: 'icon-xiangce',
-  },
-  // {
-  //   text: '微信',
-  //   leftIcon: 'icon-weixin3',
-  // },
-  // {
-  //   text: '支付宝',
-  //   leftIcon: 'icon-zhifubao',
-  // },
-]
-document.title = '请选择添加费用方式'
-const showLoading = ref(false)
-const handleClickText = async (text: any) => {
-  let fd: any
-  if (text == '拍照') {
-    fd = await takePhoto()
-  }
-  if (text == '相册') {
-    fd = await selectPhoto(props.multiple)
-  }
-  if (props.batchId) {
-    fd.append('batchId', props.batchId)
-  }
-  showLoading.value = true
-  try {
-    const res: any = await __uploadInvoice(fd)
-    if (res.code === 200) {
-      showToast({
-        type: 'success',
-        message: '上传成功',
-      })
-      emit('uploadSuccess', res.data)
-    }
-  } catch (err: any) {
-    console.log(err)
-    showFailToast(err.msg)
-  }
-  showLoading.value = false
-}
-</script>
-<style scoped lang="scss">
-.PaymentMode {
-  width: 100%;
-  height: 100%;
-  padding: 20px 12px 0;
-  background-color: #f3f4f6;
-  .title {
-    font-size: 14px;
-    font-weight: 600;
-  }
-  .list {
-    .method-item {
-      width: 100%;
-      height: 60px;
-      background-color: #fff;
-      margin-top: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 12px;
-      .left-text {
-        // display: flex;
-        // align-items: center;
-        // gap: 11px;
-        // font-size: 16px;
-        // font-weight: 700;
-        display: grid;
-        grid-auto-flow: column;
-        grid-template-columns: auto;
-        grid-template-rows: auto;
-        grid-gap: 11px;
-        font-size: 16px;
-        font-weight: 700;
-        span {
-          align-self: center;
-        }
-        .icon-left {
-          i {
-            font-size: 22px;
-            font-weight: initial;
-          }
-        }
-      }
-      .right-icon {
-        background-color: rgba(38, 111, 232, 0.1);
-        border-radius: 50%;
-        width: 24px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        i {
-          color: #266fe8;
-          font-size: 12px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="PaymentMode">
+    <div class="title">选择识别方式</div>
+    <div class="list">
+      <div
+        class="method-item"
+        @click="handleClickText(item.text)"
+        v-for="(item, index) in payList"
+        :key="item.id || index">
+        <div class="left-text">
+          <span class="icon-left">
+            <i class="iconfont" :class="item.leftIcon"></i>
+          </span>
+          <span class="text">{{ item.text }}</span>
+        </div>
+        <div class="right-icon">
+          <i class="iconfont icon-xiangyou"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <Overlay
+    style="display: flex; justify-content: center; align-items: center"
+    :show="showLoading">
+    <Loading class="loading" color="#0094ff">上传中...</Loading>
+  </Overlay>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import '@/utils/disableZoom'
+import { selectPhoto, takePhoto } from '@/utils/upload'
+import { __uploadInvoice } from '@/api/invoice'
+import { showToast, Overlay, Loading, showFailToast } from 'vant'
+const props = defineProps(['multiple', 'batchId'])
+const emit = defineEmits(['uploadSuccess'])
+const payList: any = [
+  {
+    text: '拍照',
+    leftIcon: 'icon-xiangji',
+  },
+  {
+    text: '相册',
+    leftIcon: 'icon-xiangce',
+  },
+  // {
+  //   text: '微信',
+  //   leftIcon: 'icon-weixin3',
+  // },
+  // {
+  //   text: '支付宝',
+  //   leftIcon: 'icon-zhifubao',
+  // },
+]
+document.title = '请选择添加费用方式'
+const showLoading = ref(false)
+const handleClickText = async (text: any) => {
+  let fd: any
+  if (text == '拍照') {
+    fd = await takePhoto()
+  }
+  if (text == '相册') {
+    fd = await selectPhoto(props.multiple)
+  }
+  if (props.batchId) {
+    fd.append('batchId', props.batchId)
+  }
+  showLoading.value = true
+  try {
+    const res: any = await __uploadInvoice(fd)
+    if (res.code === 200) {
+      showToast({
+        type: 'success',
+        message: '上传成功',
+      })
+      emit('uploadSuccess', res.data)
+    }
+  } catch (err: any) {
+    console.log(err)
+    showFailToast(err.msg)
+  }
+  showLoading.value = false
+}
+</script>
+<style scoped lang="scss">
+.PaymentMode {
+  width: 100%;
+  height: 100%;
+  padding: 20px 12px 0;
+  background-color: #f3f4f6;
+  .title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .list {
+    .method-item {
+      width: 100%;
+      height: 60px;
+      background-color: #fff;
+      margin-top: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 12px;
+      .left-text {
+        // display: flex;
+        // align-items: center;
+        // gap: 11px;
+        // font-size: 16px;
+        // font-weight: 700;
+        display: grid;
+        grid-auto-flow: column;
+        grid-template-columns: auto;
+        grid-template-rows: auto;
+        grid-gap: 11px;
+        font-size: 16px;
+        font-weight: 700;
+        span {
+          align-self: center;
+        }
+        .icon-left {
+          i {
+            font-size: 22px;
+            font-weight: initial;
+          }
+        }
+      }
+      .right-icon {
+        background-color: rgba(38, 111, 232, 0.1);
+        border-radius: 50%;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        i {
+          color: #266fe8;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/index.ts

@@ -1,5 +1,5 @@
-import Invoice from './Invoice/index.vue'
-import InvoiceList from './InvoiceList/index.vue'
-import PaymentMode from './PaymentMode/index.vue'
-import OCRInvoice from './OCRInvoice/index.vue'
-export { Invoice, InvoiceList, PaymentMode, OCRInvoice }
+import Invoice from './Invoice/index.vue'
+import InvoiceList from './InvoiceList/index.vue'
+import PaymentMode from './PaymentMode/index.vue'
+import OCRInvoice from './OCRInvoice/index.vue'
+export { Invoice, InvoiceList, PaymentMode, OCRInvoice }