mg-ocr-invoice 0.2.0 → 0.2.1

package/dist/types/components/InvoiceList/index.vue.d.ts

@@ -4,6 +4,7 @@ declare const _default: import("vue").DefineComponent<{
     listId: {
         required: true;
         type: StringConstructor;
+        default: string;
     };
     multiple: {
         required: true;
@@ -13,6 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     listId: {
         required: true;
         type: StringConstructor;
+        default: string;
     };
     multiple: {
         required: true;
@@ -21,5 +23,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onOk?: ((...args: any[]) => any) | undefined;
     onEdit?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
+}, {
+    listId: string;
+}, {}>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mg-ocr-invoice",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "types": "dist/types/index.d.ts",
   "module": "dist/index.es.js",

package/src/components/Invoice/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="Invoice">
-    <div class="top">
+    <div class="top" @click="openPreViewImg">
       <img :src="invoiceData.attachmentLink" alt="" />
     </div>
     <div class="company">
@@ -114,7 +114,13 @@
 import { ref } from 'vue'
 import '@/utils/disableZoom'
 import { __updateInvoice } from '@/api/invoice'
-import { showToast, Overlay, Loading, showFailToast } from 'vant'
+import {
+  showToast,
+  Overlay,
+  Loading,
+  showFailToast,
+  showImagePreview,
+} from 'vant'
 import { ElInputNumber } from 'element-plus'
 const { ids, invoiceData } = defineProps({
   ids: {
@@ -134,6 +140,9 @@ const showLoading = ref(false)
 const close = () => {
   emit('saveSuccess')
 }
+const openPreViewImg = () => {
+  showImagePreview([invoiceData.attachmentLink])
+}
 const editFlag = ref(false)
 const submit = async () => {
   if (!editFlag.value) {

package/src/components/InvoiceList/index.vue

@@ -1,17 +1,38 @@
 <template>
   <div class="InvoiceList">
+    <div class="selectAll">
+      <div class="left">已选 {{ selectedLength }}/{{ selectedLengthCount }}</div>
+      <div class="right">
+        <span>全选</span>
+        <input
+          type="checkbox"
+          @change.self="changeSelectAll"
+          v-model="selectedAll"
+          @click.stop
+          class="checkbox" />
+        <!-- <Checkbox
+          @change.self="changeSelectAll"
+          v-model="selectedAll"
+          @click.stop
+          icon-size="22px"></Checkbox> -->
+      </div>
+    </div>
+
     <div class="card">
       <ul>
         <li
           v-for="(item, index) in list"
           :key="index"
-          @click="openDetails(item)">
+          @click="clickItem(item)">
           <div class="li">
             <div
               class="item-card"
               v-if="
                 item.taskStatus === 'finish' || item.taskStatus === 'repeat'
               ">
+              <div class="details-btn" @click.stop="openDetails(item)">
+                详情
+              </div>
               <div
                 class="title"
                 :class="{ person: item.invoiceCompanyType === '公司' }">
@@ -21,7 +42,7 @@
                 <div class="name">
                   <div class="left">{{ item.sellerName }}</div>
                   <div class="right" v-if="item.taskStatus === 'repeat'">
-                    重复录入
+                    已收录
                   </div>
                 </div>
                 <div class="tags">
@@ -59,10 +80,13 @@
                     </div>
                   </div>
                   <div class="rightCheckbox">
-                    <Checkbox
+                    <input
                       @click.stop
+                      type="checkbox"
+                      class="checkbox"
+                      @change="changeItemCheckbox"
                       v-model="item.selected"
-                      icon-size="22px"></Checkbox>
+                      icon-size="22px" />
                   </div>
                 </div>
               </div>
@@ -83,7 +107,7 @@
               <Skeleton :loading="true" title :row="6"></Skeleton>
             </div>
             <div class="err-card" v-else>
-              <div class="left-img">
+              <div class="left-img" @click="openErrImg(item.fileUrlKey)">
                 <img :src="item.fileUrlKey" alt="" />
               </div>
               <div class="right-errText">
@@ -94,10 +118,11 @@
                     <p>可以重新拍照识别，或手动添加信息导入</p>
                   </div>
                   <div>
-                    <Checkbox
+                    <input
+                      type="checkbox"
+                      class="checkbox"
                       @click.stop
-                      v-model="item.selected"
-                      icon-size="22px"></Checkbox>
+                      v-model="item.selected" />
                   </div>
                 </div>
               </div>
@@ -141,7 +166,6 @@ import 'vant/lib/index.css'
 import { ref, onMounted, computed } from 'vue'
 import {
   Popup,
-  Checkbox,
   Skeleton,
   Loading,
   showToast,
@@ -161,14 +185,14 @@ import {
   const_taskStatus,
   setClass,
 } from './const'
-
+import { showImagePreview } from 'vant'
 // console.log(addNumber('495.28', '29.72'))
 const emit = defineEmits(['edit', 'ok'])
 const { listId, multiple } = defineProps({
   listId: {
     required: true,
     type: String,
-    // default: '1676054202318585856',
+    default: '1690918419274137620',
   },
   multiple: {
     required: true,
@@ -186,7 +210,8 @@ const selectId = computed(() => {
 const getList = async () => {
   return new Promise(async (resolve, reject) => {
     const data: any = {}
-    data.batchId = listId
+    data.batchId = listId || '1691015132836003840'
+    if (!data.batchId) return
     try {
       const res: any = await __getUploadInvoiceList(data, token.value)
       if (res.code === 200) {
@@ -205,7 +230,9 @@ const getList = async () => {
     }
   })
 }
-
+const clickItem = (row: any) => {
+  row.selected = !row.selected
+}
 const openDetails = (row: any) => {
   if (row.taskStatus !== 'finish' && row.taskStatus !== 'repeat') {
     return
@@ -219,6 +246,33 @@ const openDetails = (row: any) => {
     row
   )
 }
+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')
+  )
+}
+const selectedAll: any = ref(false)
+const changeSelectAll = (v: any) => {
+  list.value.forEach((item) => {
+    item.selected = everyStatus(item) && selectedAll.value
+  })
+}
+const changeItemCheckbox = () => {
+  const status = list.value
+    .filter((item) => everyStatus(item))
+    .every((item) => item.selected)
+  selectedAll.value = status
+}
 const deleteSelectItem = () => {
   if (selectId.value.length <= 0) {
     showToast({ type: 'text', message: '请先选择发票' })
@@ -276,23 +330,30 @@ const submitBtn = computed(() => {
   const flag = list.value
     .filter((item) => item.selected)
     .every((item) => {
-      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')
-      )
+      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
 })
-
+const selectedLength = computed(() => {
+  return list.value.filter((item) => item.selected && everyStatus(item)).length
+})
+const selectedLengthCount = computed(() => {
+  return list.value.filter((item) => everyStatus(item)).length
+})
+const openErrImg = (url: any) => {
+  showImagePreview([url])
+}
 const ok = () => {
   if (selectId.value.length <= 0) {
     showToast({ type: 'text', message: '请先选择发票' })
@@ -336,12 +397,25 @@ onMounted(() => {
   padding-bottom: 100px;
   position: relative;
   width: 100%;
-  min-height: 100%;
+  min-height: 100vh;
   background-color: #f3f4f6;
+  .selectAll {
+    background-color: #f3f4f6;
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    padding: 12px;
+    display: flex;
+    justify-content: space-between;
+    .right {
+      display: flex;
+      gap: 5px;
+      padding-right: 12px;
+    }
+  }
   .card {
     width: 100%;
     ul {
-      padding-top: 12px;
       display: flex;
       flex-direction: column;
       gap: 12px;
@@ -353,11 +427,24 @@ onMounted(() => {
         align-items: center;
         gap: 12px;
         overflow: hidden;
+
         .item-card {
           flex: 1;
+          position: relative;
+
           background-color: #fff;
           padding-bottom: 20px;
           min-width: 100%;
+          .details-btn {
+            position: absolute;
+            bottom: 12px;
+            right: 9px;
+            border: 1px solid #dcdee0;
+            padding: 4px 16px;
+            font-size: 14px;
+            color: #333;
+            border-radius: 2px;
+          }
           div.person {
             background-color: #ff8b26;
           }
@@ -597,4 +684,27 @@ onMounted(() => {
     }
   }
 }
+
+/* 重置复选框的默认样式 */
+.checkbox {
+  appearance: none; /* 去除默认外观 */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #c9cacd; /* 边框宽度和颜色 */
+  border-radius: 50%; /* 使复选框成为圆形 */
+  outline: none; /* 去除点击时的边框 */
+  cursor: pointer;
+}
+
+/* 根据复选框的选中状态设置颜色 */
+.checkbox:checked {
+  width: 22px;
+  height: 22px;
+  background: url('@/assets/xuanzhong@2x.png') no-repeat center;
+  background-size: 110%;
+  border: none;
+}
 </style>

package/src/components/OCRInvoice/index.vue

@@ -1,22 +1,25 @@
 <template>
   <div class="OCRInvoice">
-    <PaymentMode
-    :batchId="batchId"
-      :multiple="multiple"
-      @uploadSuccess="uploadSuccess"
-      v-if="activePage === 1"></PaymentMode>
-    <InvoiceList
-      :multiple="multiple"
-      :listId="listId"
-      @ok="submit"
-      @edit="edit"
-      v-if="activePage === 2">
-    </InvoiceList>
-    <Invoice
-      @saveSuccess="saveSuccess"
-      :ids="ids"
-      :invoiceData="invoiceData"
-      v-if="activePage === 3"></Invoice>
+    <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"
+        @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>
@@ -54,28 +57,13 @@ const { token, multiple, Base_URL, OCR_AuthDomain, batchId } = defineProps({
     required: false,
   },
 })
-const tempToken =
-  'z7v5gIDRD-sMhb9lRaspBmrWU8y--e5YK2xqWxMCIMTqBReMcoHNTJQ3XyNBdHmLVHiwommCp-HtP4wWSiK9oZDwTWvCW9CZswjLNNL4nGM'
+
 const initToken = () => {
-  activePage.value = 1
+  activePage.value = 2
   const params = getUrlParams(window.location.href)
   const linkToken = params.token
-  if (!linkToken && !token) {
-    // showToast({
-    //   type: 'fail',
-    //   message: '请在URL拼接token或者组件传递token',
-    //   duration: 0,
-    // })
-    sessionStorage.setItem('token', tempToken)
-  } else {
-    sessionStorage.setItem(
-      'token',
-      linkToken ||
-        token ||
-        'z7v5gIDRD-tZIqYE1f7is2aWk6u0y6RCK2xqWxMCIMTqBReMcoHNTJQ3XyNBdHmLVHiwommCp-HtP4wWSiK9oZDwTWvCW9CZswjLNNL4nGM'
-    )
-    activePage.value = 1
-  }
+  Cookies.set('token', linkToken || token)
+  ;('1690993442433269760')
 }
 const init_Base_URL = () => {
   const params = getUrlParams(window.location.href)
@@ -113,5 +101,9 @@ onMounted(() => {
 .OCRInvoice {
   width: 100%;
   height: 100%;
+  .box {
+    width: 100%;
+    min-height: 100%;
+  }
 }
 </style>