mg-ocr-invoice 0.1.7 → 0.1.8

package/src/components/InvoiceList/index.vue

@@ -0,0 +1,593 @@
+<template>
+  <div class="InvoiceList">
+    <div class="card">
+      <ul>
+        <li
+          v-for="(item, index) in list"
+          :key="index"
+          @click="openDetails(item)">
+          <div class="li">
+            <div
+              class="item-card"
+              v-if="
+                item.taskStatus === 'finish' || item.taskStatus === 'repeat'
+              ">
+              <div
+                class="title"
+                :class="{ person: item.invoiceCompanyType === '公司' }">
+                {{ item.invoiceCompanyType }}
+              </div>
+              <div class="storeName">
+                <div class="name">
+                  <div class="left">{{ item.sellerName }}</div>
+                  <div class="right" v-if="item.taskStatus === 'repeat'">
+                    重复录入
+                  </div>
+                </div>
+                <div class="tags">
+                  <span :class="setClass(item.realStatus)">{{
+                    const_realStatus[item.realStatus]
+                  }}</span>
+                  <span :class="setClass(item.invoiceStatus)">{{
+                    const_invoiceStatus[item.invoiceStatus]
+                  }}</span>
+                  <!-- <span class="error">识别失败</span>
+                  <span class="default">已使用</span>
+                  <span class="success">识别成功</span> -->
+                </div>
+                <div class="InvoiceInfo">
+                  <div class="leftinfo">
+                    <div class="item-info">
+                      <span class="label">发票金额</span>
+                      <span class="value price"
+                        >¥{{
+                          item.priceTaxTotalFigure || item.noTaxAmountTotal
+                        }}</span
+                      >
+                    </div>
+                    <div class="item-info">
+                      <span class="label">发票抬头</span>
+                      <span class="value">{{ item.payerName }}</span>
+                    </div>
+                    <div class="item-info">
+                      <span class="label">发票类型</span>
+                      <span class="value">{{ item.description }}</span>
+                    </div>
+                    <div class="item-info">
+                      <span class="label">发票时间</span>
+                      <span class="value">{{ item.invoiceDate }}</span>
+                    </div>
+                  </div>
+                  <div class="rightCheckbox">
+                    <Checkbox
+                      @click.stop
+                      v-model="item.selected"
+                      icon-size="22px"></Checkbox>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-else-if="
+                item.taskStatus === 'ocr_doing' ||
+                item.taskStatus === 'ocr_success'
+              "
+              style="
+                background-color: #fff;
+                padding: 21px 0 15px 12px;
+                position: relative;
+                width: 100%;
+              ">
+              <Loading class="loading" color="#0094ff">识别中...</Loading>
+              <Skeleton :loading="true" title :row="6"></Skeleton>
+            </div>
+            <div class="err-card" v-else>
+              <div class="left-img">
+                <img :src="item.fileUrlKey" alt="" />
+              </div>
+              <div class="right-errText">
+                <div class="title"><span>识别失败</span></div>
+                <div class="content">
+                  <div class="recognitionResult">
+                    <p class="errContent">OCR识别失败</p>
+                    <p>可以重新拍照识别，或手动添加信息导入</p>
+                  </div>
+                  <div>
+                    <Checkbox
+                      @click.stop
+                      v-model="item.selected"
+                      icon-size="22px"></Checkbox>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="btn-form">
+      <div class="operate">
+        <div class="delete">
+          <span @click="deleteSelectItem">移除</span>
+        </div>
+        <div class="right-btn">
+          <span class="add" @click="add">继续添加发票</span>
+          <span class="ok" :class="{ disabledColor: !submitBtn }" @click="ok"
+            >确定选择</span
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+  <Popup v-model:show="showPopup" position="bottom" closeable>
+    <div class="boxPopup">
+      <div class="title">
+        <span>添加发票</span>
+      </div>
+      <div style="padding-bottom: 24px" @click="selectImg(1)">从相册中选择</div>
+      <div @click="selectImg(2)">拍照上传</div>
+    </div>
+  </Popup>
+  <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 'vant/lib/index.css'
+import { ref, onMounted, computed } from 'vue'
+import {
+  Popup,
+  Checkbox,
+  Skeleton,
+  Loading,
+  showToast,
+  showConfirmDialog,
+  Overlay,
+} from 'vant'
+import '@/utils/disableZoom'
+import { selectPhoto, takePhoto } from '@/utils/upload'
+import {
+  __deleteInvoice,
+  __getUploadInvoiceList,
+  __uploadInvoice,
+} from '@/api/invoice'
+import {
+  const_invoiceStatus,
+  const_realStatus,
+  const_taskStatus,
+  setClass,
+} from './const'
+
+// console.log(addNumber('495.28', '29.72'))
+const emit = defineEmits(['edit', 'ok'])
+const { listId, multiple } = defineProps({
+  listId: {
+    required: true,
+    type: String,
+    // default: '1676054202318585856',
+  },
+  multiple: {
+    required: true,
+    type: Boolean,
+  },
+})
+const token: any = ref(sessionStorage.getItem('token'))
+const showLoading = ref(false)
+const showPopup = ref(false)
+const list = ref<Array<any>>([])
+const batchId = ref('')
+const selectId = computed(() => {
+  return list.value.filter((item) => item.selected).map((item) => item.taskId)
+})
+const getList = async () => {
+  return new Promise(async (resolve, reject) => {
+    const data: any = {}
+    data.batchId = listId
+    try {
+      const res: any = await __getUploadInvoiceList(data, token.value)
+      if (res.code === 200) {
+        list.value = res.data.invoiceList.map((item: any) => {
+          return {
+            ...item,
+            selected: false,
+          }
+        })
+        batchId.value = res.data.batchId
+        resolve(list.value)
+      }
+    } catch (error) {
+      console.log(error)
+      reject(error)
+    }
+  })
+}
+
+const openDetails = (row: any) => {
+  if (row.taskStatus !== 'finish' && row.taskStatus !== 'repeat') {
+    return
+  }
+  emit(
+    'edit',
+    {
+      taskId: row.taskId,
+      batchId: batchId.value,
+    },
+    row
+  )
+}
+const deleteSelectItem = () => {
+  if (selectId.value.length <= 0) {
+    showToast({ type: 'text', message: '请先选择发票' })
+    return
+  }
+  showConfirmDialog({
+    title: '提醒',
+    message: '请确认是否需要移除选中项，移除后不可恢复!',
+  })
+    .then(async () => {
+      var urlencoded = new URLSearchParams()
+      urlencoded.append('batchId', batchId.value)
+      const idsStr = selectId.value.join(',')
+      urlencoded.append('taskIds', idsStr)
+      const res: any = await __deleteInvoice(urlencoded, token.value)
+      if (res.code === 200) {
+        showToast({ type: 'success', message: '移除成功' })
+        getList()
+      }
+    })
+    .catch(() => {
+      // on cancel
+    })
+}
+const add = () => {
+  showPopup.value = true
+}
+
+const selectImg = async (type: number) => {
+  let fd: FormData
+  if (type === 1) {
+    fd = await selectPhoto(multiple)
+  } else {
+    fd = await takePhoto()
+  }
+  fd.append('batchId', batchId.value)
+  showLoading.value = true
+  showPopup.value = false
+  try {
+    const res: any = await __uploadInvoice(fd)
+    if (res.code === 200) {
+      showToast({
+        type: 'success',
+        message: '上传成功',
+      })
+      setTimeGetList()
+    }
+  } catch (error) {
+    console.log(error)
+    setTimeGetList()
+  }
+  showLoading.value = false
+}
+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')
+      )
+    })
+  return flag && list.value.filter((item) => item.selected).length > 0
+})
+
+const ok = () => {
+  if (selectId.value.length <= 0) {
+    showToast({ type: 'text', message: '请先选择发票' })
+    return
+  }
+  if (!submitBtn.value) {
+    showToast({ type: 'text', message: '存在无效发票，无法提交' })
+    return
+  }
+  // showDeleteBtn.value = false
+  const selectData = list.value.filter((item) => item.selected)
+  emit('ok', selectData, batchId.value)
+}
+const timeID: any = ref(null)
+const setTimeGetList = () => {
+  getList()
+    .then((res: any) => {
+      const flag = res.some(
+        (item: any) =>
+          item.taskStatus === 'ocr_doing' || item.taskStatus === 'ocr_success'
+      )
+      if (!flag) {
+        return
+      }
+      setTimeout(setTimeGetList, 2000)
+    })
+    .catch((err) => {
+      setTimeout(setTimeGetList, 2000)
+    })
+}
+onMounted(() => {
+  setTimeGetList()
+})
+</script>
+<style lang="scss" scoped>
+.disabledColor {
+  opacity: 0.6; /* 降低不透明度以表示禁用状态 */
+  cursor: not-allowed; /* 鼠标指针样式设置为禁用 */
+}
+.InvoiceList {
+  padding-bottom: 100px;
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  background-color: #f3f4f6;
+  .card {
+    width: 100%;
+    ul {
+      padding-top: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      .li {
+        width: 100%;
+        border-radius: 4px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        overflow: hidden;
+        .item-card {
+          flex: 1;
+          background-color: #fff;
+          padding-bottom: 20px;
+          min-width: 100%;
+          div.person {
+            background-color: #ff8b26;
+          }
+          .title {
+            color: #fff;
+            display: flex;
+            width: max-content;
+            text-align: center;
+            align-items: center;
+            font-size: 12px;
+            border-radius: 4px 0px 4px 0px;
+            padding: 2px 4px;
+            background-color: #266fe8;
+            margin-bottom: 5px;
+          }
+
+          .storeName {
+            padding: 0 12px;
+            .name {
+              display: flex;
+              justify-content: space-between;
+              width: 100%;
+              align-items: center;
+              .left {
+                font-size: 15px;
+                color: #333333;
+                font-weight: 700;
+              }
+              .right {
+                font-size: 12px;
+                color: #ee0a24;
+              }
+            }
+            .tags {
+              display: flex;
+              align-items: center;
+              gap: 7px;
+              margin-top: 8px;
+              margin-bottom: 15px;
+              span {
+                padding: 2px 4px;
+                font-size: 12px;
+                font-weight: 400;
+                border-radius: 2px;
+                &.ok {
+                  background-color: rgba(38, 111, 232, 0.1);
+                  color: #266fe8;
+                }
+                &.warning {
+                  background-color: rgba(255, 251, 230, 1);
+                  color: #ff8f26;
+                }
+                &.error {
+                  background-color: rgba(255, 242, 240, 1);
+                  color: #ff4d4f;
+                }
+                &.default {
+                  background-color: rgba(153, 153, 153, 0.2);
+                  color: #666666;
+                }
+                &.success {
+                  background-color: #e6ffdd;
+                  color: #2ba500;
+
+                  opacity: 0.68;
+                }
+              }
+            }
+            .InvoiceInfo {
+              display: flex;
+              justify-content: space-between;
+              .leftinfo {
+                .item-info {
+                  display: flex;
+                  align-items: center;
+                  gap: 16px;
+                  margin-bottom: 8px;
+                  &:last-child {
+                    margin-bottom: 0;
+                  }
+                  span {
+                    font-size: 14px;
+                    &.label {
+                      color: #999999;
+                    }
+                    &.value {
+                      color: #333333;
+                    }
+                    &.price {
+                      color: #266fe8;
+                      font-weight: 700;
+                    }
+                  }
+                }
+              }
+              .rightCheckbox {
+                height: max-content;
+              }
+            }
+          }
+        }
+
+        .err-card {
+          background-color: #fff;
+          width: 100%;
+          display: flex;
+          gap: 9px;
+          .left-img {
+            width: 113px;
+            height: 79px;
+            margin: 10px 0;
+            margin-left: 10px;
+            flex-shrink: 0;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .right-errText {
+            .title {
+              color: #fff;
+              display: flex;
+              text-align: right;
+              align-items: center;
+              justify-content: flex-end;
+              margin-bottom: 5px;
+              span {
+                background-color: rgba(238, 10, 36, 0.1);
+                color: #ee0a24;
+                padding: 2px 4px;
+                font-size: 12px;
+                border-radius: 0 4px 0 4px;
+              }
+            }
+            .content {
+              display: flex;
+              padding-right: 12px;
+              align-items: center;
+              font-size: 12px;
+              gap: 18px;
+              .recognitionResult {
+                gap: 5px;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                p {
+                  color: #666666;
+                }
+              }
+            }
+          }
+        }
+      }
+      .loading {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 100;
+      }
+    }
+  }
+
+  .btn-form {
+    z-index: 999;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    height: 90px;
+    width: 100%;
+
+    .operate {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      gap: 12px;
+      padding: 12px;
+      padding-bottom: 34px;
+      font-size: 15px;
+      span {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+        font-size: 15px;
+        justify-content: center;
+      }
+      .delete {
+        border: 1px solid #e8e8e8;
+        display: flex;
+        align-items: center;
+        padding: 0 44px;
+      }
+      .right-btn {
+        display: flex;
+        flex: 1;
+        span {
+          color: #fff;
+        }
+        .add {
+          background-color: #ff8b26;
+          border-radius: 4px 0px 0px 4px;
+        }
+        .ok {
+          border-radius: 0px 4px 4px 0px;
+          background-color: #266fe8;
+        }
+      }
+    }
+  }
+}
+.boxPopup {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  // align-items: center;
+  // justify-content: space-around;
+  padding: 16px 23px 34px;
+  div {
+    width: 100%;
+    font-size: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .title {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    // padding: 24px 0;
+    font-size: 16px;
+    font-weight: 700;
+    padding-bottom: 24px;
+    .close {
+      font-size: 22px;
+    }
+  }
+}
+</style>

package/src/components/OCRInvoice/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="OCRInvoice">
+    <PaymentMode
+      :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>
+</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'
+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 } = defineProps({
+  token: {
+    required: false,
+    type: String,
+  },
+  multiple: {
+    required: false,
+    default: true,
+  },
+  Base_URL: {
+    required: false,
+  },
+  OCR_AuthDomain: {
+    required: false,
+  },
+})
+const tempToken =
+  'z7v5gIDRD-sMhb9lRaspBmrWU8y--e5YK2xqWxMCIMTqBReMcoHNTJQ3XyNBdHmLVHiwommCp-HtP4wWSiK9oZDwTWvCW9CZswjLNNL4nGM'
+const initToken = () => {
+  activePage.value = 1
+  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
+  }
+}
+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({})
+const uploadSuccess = (id: any) => {
+  listId.value = id
+  activePage.value = 2
+}
+const edit = (id: object, row: any) => {
+  ids.value = id
+  invoiceData.value = row
+  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: 100%;
+}
+</style>