mg-ocr-invoice 0.2.1 → 0.2.3-beta

package/src/components/Invoice copy/index.vue

@@ -0,0 +1,343 @@
+<template>
+  <div class="Invoice">
+    <div class="top" @click="openPreViewImg">
+      <img :src="invoiceData.attachmentLink" alt="" />
+    </div>
+    <div class="company">
+      <div class="title"><i></i> <span>公司</span></div>
+      <div class="cardText">
+        <p style="font-size: 13px; color: #888888">销售方</p>
+        <div class="card">
+          <div class="companyName">{{ invoiceData.sellerName }}</div>
+          <div class="sellerInformation">
+            <ul>
+              <li>
+                <i></i>
+                <span class="label"> 纳税人识别号：</span>
+                <span class="value">{{ invoiceData.sellerId }}</span>
+              </li>
+              <li>
+                <i></i>
+                <span class="label">地址、电话：</span>
+                <span class="value">{{ invoiceData.sellerContact }}</span>
+              </li>
+              <li>
+                <i></i>
+                <span class="label">开户银行及账户：</span>
+                <span class="value">{{ invoiceData.sellerAccount }}</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="purchaser">
+        <ul>
+          <li>
+            <div class="label">购买方：</div>
+            <div class="input">{{ invoiceData.payerName }}</div>
+          </li>
+          <li>
+            <div class="label">发票类型：</div>
+            <div class="input">{{ invoiceData.description }}</div>
+          </li>
+          <li>
+            <div class="label">费用类型：</div>
+            <div class="input">其他费</div>
+          </li>
+          <li>
+            <div class="label">票面金额：</div>
+            <div class="input">
+              {{
+                invoiceData.priceTaxTotalFigure || invoiceData.noTaxAmountTotal
+              }}
+            </div>
+          </li>
+          <li>
+            <div class="label">发票代码：</div>
+            <div class="input">
+              <ElInputNumber
+                :min="0"
+                :controls="false"
+                @input="editFlag = true"
+                v-model.trim="invoiceData.invoiceCode"></ElInputNumber>
+            </div>
+          </li>
+          <li>
+            <div class="label">
+              <span class="van-field__label--required"></span>发票号码：
+            </div>
+            <div class="input">
+              <ElInputNumber
+                :min="0"
+                :controls="false"
+                @input="editFlag = true"
+                v-model.trim="invoiceData.invoiceNum"></ElInputNumber>
+              <!-- <input type="text" v-model.trim="invoiceData.invoiceNum" /> -->
+              <div v-if="showRequiredMsg" class="errColor">
+                发票号码不能为空！
+              </div>
+            </div>
+          </li>
+          <li>
+            <div class="label">校验码：</div>
+            <div class="input">{{ invoiceData.checkCode }}</div>
+          </li>
+          <li>
+            <div class="label">开票日期：</div>
+            <div class="input">{{ invoiceData.invoiceDate }}</div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="submit">
+      <span
+        style="width: 30%; background-color: #07c160; color: #fff"
+        @click="close"
+        >返回</span
+      >
+      <span @click="submit">保存</span>
+    </div>
+  </div>
+  <Overlay
+    style="
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 999;
+    "
+    :show="showLoading">
+    <Loading class="loading" color="#0094ff">保存中...</Loading>
+  </Overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import '@/utils/disableZoom'
+import { __updateInvoice } from '@/api/invoice'
+import {
+  showToast,
+  Overlay,
+  Loading,
+  showFailToast,
+  showImagePreview,
+} from 'vant'
+import { ElInputNumber } from 'element-plus'
+const { ids, invoiceData } = defineProps({
+  ids: {
+    type: Object,
+    required: true,
+  },
+  invoiceData: {
+    type: Object,
+    required: true,
+  },
+})
+const emit = defineEmits(['saveSuccess'])
+document.title = '发票信息'
+const showRequiredMsg = ref(false)
+// const modules = ref([Pagination])
+const showLoading = ref(false)
+const close = () => {
+  emit('saveSuccess')
+}
+const openPreViewImg = () => {
+  showImagePreview([invoiceData.attachmentLink])
+}
+const editFlag = ref(false)
+const submit = async () => {
+  if (!editFlag.value) {
+    emit('saveSuccess')
+    return
+  }
+  if (!invoiceData.invoiceNum) {
+    showRequiredMsg.value = true
+    return
+  } else {
+    showRequiredMsg.value = false
+  }
+  showLoading.value = true
+  try {
+    const res: any = await __updateInvoice({
+      ...ids,
+      invoiceNum: invoiceData.invoiceNum,
+      invoiceCode: invoiceData.invoiceCode,
+    })
+    if (res.code === 200) {
+      showToast({
+        type: 'success',
+        message: '保存成功',
+      })
+      emit('saveSuccess')
+    }
+  } catch (err: any) {
+    showFailToast(err.msg)
+    emit('saveSuccess')
+  }
+  showLoading.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .el-input-number {
+    width: 100%;
+  }
+  .el-input {
+    .el-input__wrapper {
+      width: 100%;
+      padding: 0 !important;
+      box-shadow: none;
+    }
+    .el-input__inner {
+      width: 100%;
+      text-align: left;
+      box-shadow: none;
+      padding: 0 !important;
+    }
+  }
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.Invoice {
+  padding-bottom: 100px;
+  width: 100%;
+  min-height: 100%;
+  background-color: #f3f4f6;
+  .top {
+    width: 100%;
+    padding: 12px 4px;
+    img {
+      width: 100%;
+      height: 179px;
+      display: block;
+    }
+  }
+
+  .company {
+    height: inherit;
+    padding: 0 12px;
+    background-color: #fff;
+    .title {
+      padding: 18px 0;
+      font-size: 16px;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px dashed #e8e8e8;
+      margin-bottom: 18px;
+      i {
+        display: inline-block;
+        width: 4px;
+        height: 14px;
+        background: #266fe8;
+        border-radius: 2px;
+      }
+
+      span {
+        font-size: 16px;
+        padding-left: 8px;
+      }
+    }
+    .cardText {
+      .card {
+        margin-top: 8px;
+        border-radius: 4px;
+        background-color: #f6f6f6;
+        font-size: 14px;
+        .companyName {
+          padding: 15px;
+        }
+        .sellerInformation {
+          padding-left: 12px;
+          padding-bottom: 20px;
+          li {
+            list-style: none;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            i {
+              width: 4px;
+              height: 4px;
+              border-radius: 50%;
+              background-color: #266fe8;
+            }
+            .label {
+              width: 120px;
+              margin-left: 12px;
+              white-space: nowrap;
+            }
+            .value {
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+    .purchaser {
+      ul {
+        li {
+          display: flex;
+          font-size: 16px;
+          height: 50px;
+          align-items: center;
+          gap: 45px;
+          .label {
+            width: 80px;
+            white-space: nowrap;
+            position: relative;
+            .van-field__label--required {
+              position: absolute;
+              top: 0;
+              left: -8px;
+            }
+          }
+          .input {
+            flex-grow: 1;
+            color: #999999;
+
+            input {
+              width: 100%;
+              color: #999999;
+              outline: none;
+              font-size: 16px;
+              border: none;
+            }
+            .errColor {
+              color: red;
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .submit {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-shadow: 0px -1px 12px 0px rgba(173, 173, 173, 0.1);
+    height: 90px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+    z-index: 2;
+    background-color: #fff;
+    span {
+      background-color: #266fe8;
+      width: 68%;
+      font-size: 15px;
+      color: #fff;
+      height: 44px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>

package/src/components/InvoiceList/const.ts

@@ -7,9 +7,17 @@ export const const_invoiceStatus: any = {
 export const const_realStatus: any = {
   noNeed: '无需验真',
   notCheck: '未验真',
-  checked: '已验真',
+  checked: '验真通过',
   checkFail: '验真异常',
 }
+export const const_invoiceExceptionInfo: any = {
+  abnormal: '异常发票',
+  invalid: '无效发票',
+}
+export const const_manualModify: any = {
+  '手动录入': true,
+  '非手动录入': false,
+}
 export const const_taskStatus: any = {
   init: '初始状态',
   upload_fail_cos: 'COS 上传失败',

package/src/components/InvoiceList/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="InvoiceList">
     <div class="selectAll">
-      <div class="left">已选 {{ selectedLength }}/{{ selectedLengthCount }}</div>
+      <div class="left">
+        已选 {{ selectedLength }}/{{ selectedLengthCount }}
+      </div>
       <div class="right">
         <span>全选</span>
         <input
@@ -20,10 +22,7 @@
 
     <div class="card">
       <ul>
-        <li
-          v-for="(item, index) in list"
-          :key="index"
-          @click="clickItem(item)">
+        <li v-for="(item, index) in list" :key="index" @click="clickItem(item)">
           <div class="li">
             <div
               class="item-card"
@@ -46,7 +45,10 @@
                   </div>
                 </div>
                 <div class="tags">
-                  <span :class="setClass(item.realStatus)">{{
+                  <span v-if="item.manualModify" class="manual">
+                    手工录入
+                  </span>
+                  <span v-else :class="setClass(item.realStatus)">{{
                     const_realStatus[item.realStatus]
                   }}</span>
                   <span :class="setClass(item.invoiceStatus)">{{
@@ -186,42 +188,52 @@ import {
   setClass,
 } from './const'
 import { showImagePreview } from 'vant'
-// console.log(addNumber('495.28', '29.72'))
 const emit = defineEmits(['edit', 'ok'])
-const { listId, multiple } = defineProps({
+const { listId, multiple, catchList } = defineProps({
   listId: {
-    required: true,
+    required: false,
     type: String,
-    default: '1690918419274137620',
   },
   multiple: {
     required: true,
     type: Boolean,
   },
+  catchList: {},
 })
 const token: any = ref(sessionStorage.getItem('token'))
 const showLoading = ref(false)
 const showPopup = ref(false)
-const list = ref<Array<any>>([])
+const list: any = ref<Array<any>>([])
+if (catchList) {
+  list.value = catchList
+}
 const batchId = ref('')
 const selectId = computed(() => {
-  return list.value.filter((item) => item.selected).map((item) => item.taskId)
+  return list.value
+    .filter((item: any) => item.selected)
+    .map((item: any) => item.taskId)
 })
+
 const getList = async () => {
   return new Promise(async (resolve, reject) => {
     const data: any = {}
-    data.batchId = listId || '1691015132836003840'
+    data.batchId = listId
     if (!data.batchId) return
     try {
       const res: any = await __getUploadInvoiceList(data, token.value)
       if (res.code === 200) {
         list.value = res.data.invoiceList.map((item: any) => {
+          let data = list.value.find((v: any) => v.taskId === item.taskId) || {}
           return {
-            ...item,
-            selected: false,
+            ...Object.assign(data, item),
           }
         })
         batchId.value = res.data.batchId
+        if (list.value.length <= 0) {
+          selectedAll.value = false
+        } else {
+          changeItemCheckbox()
+        }
         resolve(list.value)
       }
     } catch (error) {
@@ -243,34 +255,33 @@ const openDetails = (row: any) => {
       taskId: row.taskId,
       batchId: batchId.value,
     },
-    row
+    row,
+    list.value
   )
 }
 const everyStatus = (item: any) => {
   return (
-    item.invoiceStatus === 'unused' &&
-    (item.taskStatus === 'ocr_success' ||
-      item.taskStatus === 'repeat' ||
-      item.taskStatus === 'finish' ||
-      item.invoiceStatus === 'invalid' ||
-      item.invoiceStatus === 'invalid' ||
-      item.invoiceStatus === 'used' ||
-      item.realStatus === 'noNeed' ||
-      item.realStatus === 'notCheck' ||
-      item.realStatus === 'checked' ||
-      item.realStatus === 'checkFail')
+    item.invoiceStatus === 'unused' ||
+    item.invoiceStatus === 'invalid' ||
+    item.taskStatus === 'ocr_success' ||
+    item.taskStatus === 'repeat' ||
+    item.taskStatus === 'finish' ||
+    item.realStatus === 'noNeed' ||
+    item.realStatus === 'notCheck' ||
+    item.realStatus === 'checked' ||
+    item.realStatus === 'checkFail'
   )
 }
 const selectedAll: any = ref(false)
 const changeSelectAll = (v: any) => {
-  list.value.forEach((item) => {
+  list.value.forEach((item: any) => {
     item.selected = everyStatus(item) && selectedAll.value
   })
 }
 const changeItemCheckbox = () => {
   const status = list.value
-    .filter((item) => everyStatus(item))
-    .every((item) => item.selected)
+    .filter((item: any) => everyStatus(item))
+    .every((item: any) => item.selected)
   selectedAll.value = status
 }
 const deleteSelectItem = () => {
@@ -328,28 +339,18 @@ const selectImg = async (type: number) => {
 }
 const submitBtn = computed(() => {
   const flag = list.value
-    .filter((item) => item.selected)
-    .every((item) => {
+    .filter((item: any) => item.selected)
+    .every((item: any) => {
       return everyStatus(item)
-      //   item.invoiceStatus === 'unused' &&
-      //   (item.taskStatus === 'ocr_success' ||
-      //     item.taskStatus === 'repeat' ||
-      //     item.taskStatus === 'finish' ||
-      //     item.invoiceStatus === 'invalid' ||
-      //     item.invoiceStatus === 'invalid' ||
-      //     item.invoiceStatus === 'used' ||
-      //     item.realStatus === 'noNeed' ||
-      //     item.realStatus === 'notCheck' ||
-      //     item.realStatus === 'checked' ||
-      //     item.realStatus === 'checkFail')
     })
-  return flag && list.value.filter((item) => item.selected).length > 0
+  return flag && list.value.filter((item: any) => item.selected).length > 0
 })
 const selectedLength = computed(() => {
-  return list.value.filter((item) => item.selected && everyStatus(item)).length
+  return list.value.filter((item: any) => item.selected && everyStatus(item))
+    .length
 })
 const selectedLengthCount = computed(() => {
-  return list.value.filter((item) => everyStatus(item)).length
+  return list.value.filter((item: any) => everyStatus(item)).length
 })
 const openErrImg = (url: any) => {
   showImagePreview([url])
@@ -364,7 +365,35 @@ const ok = () => {
     return
   }
   // showDeleteBtn.value = false
-  const selectData = list.value.filter((item) => item.selected)
+  const selectData = list.value
+    .filter((item: any) => item.selected)
+    .map((item: any) => {
+      let obj: any = { ...item }
+      // 验真状态 1,绿色 2,黄色, 3,红色
+      // 绿色: 验真成功或(无需验真且金额校验成功)或无需验证
+      // 黄色: (未验真或验真异常)且金额校验失败
+      // 剩下的场景都为红色
+      if (
+        item.realStatus === 'checked' ||
+        (item.realStatus === 'noNeed' && !item.manualModify)
+      ) {
+        obj.verifyTruth = 1
+      } else if (item.manualModify) {
+        obj.verifyTruth = 2
+      } else {
+        obj.verifyTruth = 3
+      }
+      // 验重状态 1,绿色 2,黄色, 3,红色
+      if (item.invoiceStatus === 'unused') {
+        obj.checkWeight = 1
+      } else if (item.invoiceStatus === 'invalid') {
+        obj.checkWeight = 2
+      } else {
+        obj.checkWeight = 3
+      }
+      return obj
+    })
+  console.log(selectData, 'selectData')
   emit('ok', selectData, batchId.value)
 }
 const timeID: any = ref(null)
@@ -484,6 +513,10 @@ onMounted(() => {
               gap: 7px;
               margin-top: 8px;
               margin-bottom: 15px;
+              .manual {
+                background-color: #facd91;
+                color: #c77458;
+              }
               span {
                 padding: 2px 4px;
                 font-size: 12px;

package/src/components/OCRInvoice/const.ts

@@ -0,0 +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: '住宿费',
+}