mg-ocr-invoice 0.3.0 → 0.3.1

package/src/components/InvoiceList/index.vue

@@ -1,750 +1,750 @@
-<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="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 === '公司' }">
-                {{ 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 v-if="item.manualModify" class="manual">
-                    手工录入
-                  </span>
-                  <div v-else-if="item.invoiceExceptionInfo">
-                    <span :class="setClass(item.invoiceExceptionInfo)">{{
-                      const_invoiceExceptionInfo[item.invoiceExceptionInfo]
-                    }}</span>
-                  </div>
-                  <span v-else :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">
-                    <input
-                      @click.stop
-                      type="checkbox"
-                      class="checkbox"
-                      @change="changeItemCheckbox"
-                      v-model="item.selected"
-                      icon-size="22px" />
-                  </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" @click="openErrImg(item.fileUrlKey)">
-                <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>
-                    <input
-                      type="checkbox"
-                      class="checkbox"
-                      @click.stop
-                      v-model="item.selected" />
-                  </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,
-  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,
-  const_invoiceExceptionInfo,
-  setClass,
-  VerificationOfTruth,
-} from './const'
-import { showImagePreview } from 'vant'
-const emit = defineEmits(['edit', 'ok'])
-const { listId, multiple, catchList } = defineProps({
-  listId: {
-    required: false,
-    type: String,
-  },
-  multiple: {
-    required: true,
-    type: Boolean,
-  },
-  catchList: {},
-})
-const token: any = ref(sessionStorage.getItem('token'))
-const showLoading = ref(false)
-const showPopup = ref(false)
-const list: any = ref<Array<any>>([])
-if (catchList) {
-  list.value = catchList
-}
-const batchId = ref('')
-const selectId = computed(() => {
-  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
-    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 {
-            ...Object.assign(data, item),
-          }
-        })
-        batchId.value = res.data.batchId
-        if (list.value.length <= 0) {
-          selectedAll.value = false
-        } else {
-          changeItemCheckbox()
-        }
-        resolve(list.value)
-      }
-    } catch (error) {
-      console.log(error)
-      reject(error)
-    }
-  })
-}
-const clickItem = (row: any) => {
-  console.log(row.invoiceStatus)
-  if (row.invoiceStatus !== 'unused') {
-    return showToast('发票已被使用！')
-  }
-  row.selected = !row.selected
-}
-
-const openDetails = (row: any) => {
-  // if (!isEdit(row)) {
-  //   return
-  // }
-  emit(
-    'edit',
-    {
-      taskId: row.taskId,
-      batchId: batchId.value,
-    },
-    row,
-    list.value
-  )
-}
-const selectStatus = (item: any) => {
-  // 未使用&& (验真通过||无需验真|| 手工录入||验真异常) && 发票推断状态错误值为空 && 发票识别任务已完成
-  if (item.invoiceStatus === 'unused') {
-    if (item.manualModify) {
-      return true
-    }
-    if (!item.invoiceExceptionInfo) {
-      return true
-    }
-    return false
-  } else {
-    return false
-  }
-  // if (item.invoiceStatus==='unused') {
-  //   return true
-  // } else if (item.manualModify) {
-  //   return true
-  // } else if (!item.invoiceExceptionInfo) {
-  //   return true
-  // } else {
-  //   return false
-  // }
-}
-const selectedAll: any = ref(false)
-const changeSelectAll = (v: any) => {
-  if (selectedAll.value) {
-    showToast('存在已使用或异常发票, 已自动过滤')
-  }
-  list.value.forEach((item: any) => {
-    item.selected = selectStatus(item) && selectedAll.value
-  })
-}
-const changeItemCheckbox = () => {
-  const status = list.value
-    .filter((item: any) => selectStatus(item))
-    .every((item: any) => item.selected)
-  selectedAll.value = status
-}
-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: any) => item.selected)
-    .every((item: any) => {
-      return selectStatus(item)
-    })
-  return flag && list.value.filter((item: any) => item.selected).length > 0
-})
-const selectedLength = computed(() => {
-  return list.value.filter((item: any) => item.selected && selectStatus(item))
-    .length
-})
-const selectedLengthCount = computed(() => {
-  return list.value.filter((item: any) => selectStatus(item)).length
-})
-const openErrImg = (url: any) => {
-  showImagePreview([url])
-}
-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: any) => item.selected)
-    .map((item: any) => {
-      VerificationOfTruth
-      let data = VerificationOfTruth(item)
-      let obj: any = { ...item, ...data }
-      return obj
-    })
-  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: 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 {
-      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;
-          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;
-          }
-          .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;
-              .manual {
-                background-color: #facd91;
-                color: #c77458;
-              }
-              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;
-    }
-  }
-}
-
-/* 重置复选框的默认样式 */
-.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>
+<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="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 === '公司' }">
+                {{ 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 v-if="item.manualModify" class="manual">
+                    手工录入
+                  </span>
+                  <div v-else-if="item.invoiceExceptionInfo">
+                    <span :class="setClass(item.invoiceExceptionInfo)">{{
+                      const_invoiceExceptionInfo[item.invoiceExceptionInfo]
+                    }}</span>
+                  </div>
+                  <span v-else :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">
+                    <input
+                      @click.stop
+                      type="checkbox"
+                      class="checkbox"
+                      @change="changeItemCheckbox"
+                      v-model="item.selected"
+                      icon-size="22px" />
+                  </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" @click="openErrImg(item.fileUrlKey)">
+                <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>
+                    <input
+                      type="checkbox"
+                      class="checkbox"
+                      @click.stop
+                      v-model="item.selected" />
+                  </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,
+  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,
+  const_invoiceExceptionInfo,
+  setClass,
+  VerificationOfTruth,
+} from './const'
+import { showImagePreview } from 'vant'
+const emit = defineEmits(['edit', 'ok'])
+const { listId, multiple, catchList } = defineProps({
+  listId: {
+    required: false,
+    type: String,
+  },
+  multiple: {
+    required: true,
+    type: Boolean,
+  },
+  catchList: {},
+})
+const token: any = ref(sessionStorage.getItem('token'))
+const showLoading = ref(false)
+const showPopup = ref(false)
+const list: any = ref<Array<any>>([])
+if (catchList) {
+  list.value = catchList
+}
+const batchId = ref('')
+const selectId = computed(() => {
+  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
+    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 {
+            ...Object.assign(data, item),
+          }
+        })
+        batchId.value = res.data.batchId
+        if (list.value.length <= 0) {
+          selectedAll.value = false
+        } else {
+          changeItemCheckbox()
+        }
+        resolve(list.value)
+      }
+    } catch (error) {
+      console.log(error)
+      reject(error)
+    }
+  })
+}
+const clickItem = (row: any) => {
+  console.log(row.invoiceStatus)
+  if (row.invoiceStatus !== 'unused') {
+    return showToast('发票已被使用！')
+  }
+  row.selected = !row.selected
+}
+
+const openDetails = (row: any) => {
+  // if (!isEdit(row)) {
+  //   return
+  // }
+  emit(
+    'edit',
+    {
+      taskId: row.taskId,
+      batchId: batchId.value,
+    },
+    row,
+    list.value
+  )
+}
+const selectStatus = (item: any) => {
+  // 未使用&& (验真通过||无需验真|| 手工录入||验真异常) && 发票推断状态错误值为空 && 发票识别任务已完成
+  if (item.invoiceStatus === 'unused') {
+    if (item.manualModify) {
+      return true
+    }
+    if (!item.invoiceExceptionInfo) {
+      return true
+    }
+    return false
+  } else {
+    return false
+  }
+  // if (item.invoiceStatus==='unused') {
+  //   return true
+  // } else if (item.manualModify) {
+  //   return true
+  // } else if (!item.invoiceExceptionInfo) {
+  //   return true
+  // } else {
+  //   return false
+  // }
+}
+const selectedAll: any = ref(false)
+const changeSelectAll = (v: any) => {
+  if (selectedAll.value) {
+    showToast('存在已使用或异常发票, 已自动过滤')
+  }
+  list.value.forEach((item: any) => {
+    item.selected = selectStatus(item) && selectedAll.value
+  })
+}
+const changeItemCheckbox = () => {
+  const status = list.value
+    .filter((item: any) => selectStatus(item))
+    .every((item: any) => item.selected)
+  selectedAll.value = status
+}
+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: any) => item.selected)
+    .every((item: any) => {
+      return selectStatus(item)
+    })
+  return flag && list.value.filter((item: any) => item.selected).length > 0
+})
+const selectedLength = computed(() => {
+  return list.value.filter((item: any) => item.selected && selectStatus(item))
+    .length
+})
+const selectedLengthCount = computed(() => {
+  return list.value.filter((item: any) => selectStatus(item)).length
+})
+const openErrImg = (url: any) => {
+  showImagePreview([url])
+}
+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: any) => item.selected)
+    .map((item: any) => {
+      VerificationOfTruth
+      let data = VerificationOfTruth(item)
+      let obj: any = { ...item, ...data }
+      return obj
+    })
+  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: 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 {
+      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;
+          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;
+          }
+          .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;
+              .manual {
+                background-color: #facd91;
+                color: #c77458;
+              }
+              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;
+    }
+  }
+}
+
+/* 重置复选框的默认样式 */
+.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>