mg-ocr-invoice 0.4.8 → 0.4.10

package/src/components/Invoice/index.vue

@@ -6,279 +6,258 @@
         @click.stop="openPreViewImg"
         alt="" />
     </div>
-    <div>
-      <Form label-width="70px">
-        <CellGroup inset>
-          <template #title>
-            <div class="Field-title">
-              <span class="titleLeft">公司信息</span>
-              <!-- <span class="titleright">重新查验</span> -->
+    <div class="inovice-content">
+      <div class="Field-title">
+        <span class="titleLeft">公司信息</span>
+        <!-- <span class="titleright">重新查验</span> -->
+      </div>
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>销售方</label>
+          <input
+            v-model="formData.sellerReq.sellerName"
+            placeholder="请输入销售方"
+            type="text" />
+          <div class="cell-icon">
+            <div @click="expandObj.showSeller = !expandObj.showSeller">
+              <i class="gg-chevron-down" v-if="!expandObj.showSeller" />
+              <i v-else class="gg-chevron-up" />
             </div>
-          </template>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              label="销售方"
-              placeholder="请输入销售方"
-              v-model="formData.sellerReq.sellerName">
-              <template #right-icon>
-                <div @click="expandObj.showSeller = !expandObj.showSeller">
-                  <Icon
-                    name="arrow-down"
-                    v-if="!expandObj.showSeller"
-                    color="#969799" />
-                  <Icon v-else name="arrow-up" color="#969799" />
-                </div>
-              </template>
-            </Field>
-            <div v-show="expandObj.showSeller">
-              <Field
-                autocomplete="off"
-                label="纳税人识别号"
+          </div>
+        </div>
+        <transition name="flod-fade" appear>
+          <div v-if="expandObj.showSeller">
+            <div class="inv-cell">
+              <label>纳税人识别号</label>
+              <input
+                v-model="formData.sellerReq.sellerId"
                 placeholder="请输入纳税人识别号"
-                v-model="formData.sellerReq.sellerId" />
-              <Field
-                autocomplete="off"
-                label="地址/电话"
-                autosize
-                type="textarea"
-                placeholder="请输入地址+电话"
-                v-model="formData.sellerReq.sellerContact" />
-              <!-- <Field
-                autocomplete="off"
-                label="电话"
-                placeholder="请输入电话"
-                v-model="formData.sellerReq.sellerName" /> -->
-              <Field
-                autocomplete="off"
-                autosize
-                type="textarea"
-                label="开户银行/银行账号"
+                type="text" />
+              <div class="cell-icon"></div>
+            </div>
+            <div class="inv-cell">
+              <label>地址/电话</label>
+              <textarea
+                autocapitalize="off"
+                v-model="formData.sellerReq.sellerContact"
+                placeholder="请输入地址/电话"
+                type="textarea" />
+            </div>
+            <div class="inv-cell">
+              <label>开户银行/银行账号</label>
+              <textarea
+                autocapitalize="off"
+                v-model="formData.sellerReq.sellerAccount"
                 placeholder="请输入开户银行+银行账户"
-                v-model="formData.sellerReq.sellerAccount" />
-              <!-- <Field
-                autocomplete="off"
-                label="银行账号"
-                placeholder="请输入银行账号"
-                v-model="formData.sellerReq.sellerName" /> -->
+                type="textarea" />
+            </div>
+          </div>
+        </transition>
+      </div>
+
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>购买方</label>
+          <input
+            v-model="formData.payerReq.payerName"
+            placeholder="请输入购买方名称"
+            type="text" />
+          <div class="cell-icon">
+            <div @click="expandObj.showPurchaser = !expandObj.showPurchaser">
+              <i class="gg-chevron-down" v-if="!expandObj.showPurchaser" />
+              <i v-else class="gg-chevron-up" />
             </div>
           </div>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              label="购买方"
-              placeholder="请输入购买方名称"
-              v-model="formData.payerReq.payerName">
-              <template #right-icon>
-                <div
-                  @click="expandObj.showPurchaser = !expandObj.showPurchaser">
-                  <Icon
-                    name="arrow-down"
-                    v-if="!expandObj.showPurchaser"
-                    color="#969799" />
-                  <Icon v-else name="arrow-up" color="#969799" />
-                </div>
-              </template>
-            </Field>
-            <div v-show="expandObj.showPurchaser">
-              <Field
-                autocomplete="off"
-                label="纳税人识别号"
+        </div>
+        <transition name="flod-fade" appear>
+          <div v-if="expandObj.showPurchaser">
+            <div class="inv-cell">
+              <label>纳税人识别号</label>
+              <input
+                v-model="formData.payerReq.payerId"
                 placeholder="请输入纳税人识别号"
-                v-model="formData.payerReq.payerId" />
-              <Field
-                autocomplete="off"
-                label="地址/电话"
-                type="textarea"
-                placeholder="请输入地址+电话"
-                v-model="formData.payerReq.payerContact" />
-              <!-- <Field
-                autocomplete="off"
-                label="电话"
-                placeholder="请输入电话"
-                v-model="formData.payerReq.sellerName" /> -->
-              <Field
-                autocomplete="off"
-                autosize
-                type="textarea"
-                label="开户银行/银行账号"
-                placeholder="请输入开户银行+银行账户"
-                v-model="formData.payerReq.payerAccount" />
-              <!-- <Field
-                autocomplete="off"
-                label="银行账号"
-                placeholder="请输入银行账号"
-                v-model="formData.payerReq.sellerName" /> -->
+                type="text" />
+            </div>
+            <div class="inv-cell">
+              <label>地址/电话</label>
+              <input
+                v-model="formData.payerReq.payerContact"
+                placeholder="请输入地址/电话"
+                type="textarea" />
+            </div>
+            <div class="inv-cell">
+              <label>开户银行/银行账号</label>
+              <input
+                v-model="formData.payerReq.payerAccount"
+                placeholder="请输入开户银行/银行账号"
+                type="textarea" />
+            </div>
+          </div>
+        </transition>
+      </div>
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>发票类型</label>
+          <input
+            readonly
+            :value="props.invoiceData.description"
+            placeholder="请输入开户银行/银行账号"
+            type="text" />
+        </div>
+      </div>
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>价税合计</label>
+          <input readonly :value="computed_amount" placeholder="" type="text" />
+          <div class="cell-icon">
+            <div @click="expandObj.showPrice = !expandObj.showPrice">
+              <i class="gg-chevron-down" v-if="!expandObj.showPrice" />
+              <i v-else class="gg-chevron-up" />
             </div>
           </div>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              readonly
-              label="发票类型"
-              :model-value="props.invoiceData.description" />
+        </div>
+        <transition name="flod-fade">
+          <div v-if="!expandObj.showPrice">
+            <div class="inv-cell">
+              <table>
+                <thead>
+                  <tr>
+                    <th>商品金额(不含税)</th>
+                    <th>税率</th>
+                    <th>税额</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(item, index) in formData.itemAmountReqs"
+                    @click="openEditpopUp(item, index)">
+                    <td>{{ item.itemExTaxAmount }}</td>
+                    <td>{{ item.itemTaxRate }}</td>
+                    <td>{{ item.itemTaxAmount }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
-          <div class="marPX">
-            <Cell title="价税合计" :value="computed_amount">
-              <template #value>
-                <div
-                  style="
-                    color: #333;
-                    font-weight: 400;
-                    font-size: 16px;
-                    margin-right: 12px;
-                  ">
-                  {{ computed_amount }}
-                </div>
-              </template>
-              <template #right-icon>
-                <div @click="expandObj.showPrice = !expandObj.showPrice">
-                  <Icon
-                    name="arrow-down"
-                    v-if="!expandObj.showPrice"
-                    color="#969799" />
-                  <Icon v-else name="arrow-up" color="#969799" />
-                </div>
-              </template>
-            </Cell>
-            <div v-show="!expandObj.showPrice">
-              <Field>
-                <template #input>
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>商品金额(不含税)</th>
-                        <th>税率</th>
-                        <th>税额</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr
-                        v-for="(item, index) in formData.itemAmountReqs"
-                        @click="openEditpopUp(item, index)">
-                        <td>{{ item.itemExTaxAmount }}</td>
-                        <td>{{ item.itemTaxRate }}</td>
-                        <td>{{ item.itemTaxAmount }}</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </template>
-              </Field>
+        </transition>
+      </div>
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>发票代码</label>
+          <input
+            v-model="formData.codeReq.invoiceCode"
+            placeholder="请输入发票代码"
+            type="text" />
+          <div class="cell-icon">
+            <div @click="expandObj.invoiceCode = !expandObj.invoiceCode">
+              <i class="gg-chevron-down" v-if="!expandObj.invoiceCode" />
+              <i v-else class="gg-chevron-up" />
             </div>
           </div>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              label="发票代码"
-              placeholder="请输入发票代码"
-              v-model="formData.codeReq.invoiceCode">
-              <template #right-icon>
-                <div @click="expandObj.invoiceCode = !expandObj.invoiceCode">
-                  <Icon
-                    name="arrow-down"
-                    v-if="!expandObj.invoiceCode"
-                    color="#969799" />
-                  <Icon v-else name="arrow-up" color="#969799" />
-                </div>
-              </template>
-            </Field>
-            <div v-show="expandObj.invoiceCode">
-              <Field
-                autocomplete="off"
-                label="发票号码"
+        </div>
+        <transition name="flod-fade" appear>
+          <div v-if="expandObj.invoiceCode">
+            <div class="inv-cell">
+              <label>发票号码</label>
+              <input
+                v-model="formData.codeReq.invoiceNum"
                 placeholder="请输入发票号码"
-                v-model="formData.codeReq.invoiceNum" />
-              <Field
-                autocomplete="off"
-                label="校验码"
+                type="text" />
+            </div>
+            <div class="inv-cell">
+              <label>校验码</label>
+              <input
+                v-model="formData.codeReq.checkCode"
                 placeholder="请输入校验码"
-                v-model="formData.codeReq.checkCode" />
+                type="text" />
             </div>
           </div>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              label="开票日期"
-              readonly
-              v-model="props.invoiceData.invoiceDate" />
-          </div>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              label="查验状态"
-              readonly
-              :model-value="const_realStatus[props.invoiceData.realStatus]" />
-          </div>
-        </CellGroup>
-        <div class="submit">
-          <span
-            style="flex: 1; background-color: #07c160; color: #fff"
-            @click="close">
-            返回
-          </span>
-          <span v-if="isEdit" @click="submit">保存</span>
+        </transition>
+      </div>
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>开票日期</label>
+          <input
+            readonly
+            :value="props.invoiceData.invoiceDate"
+            placeholder="请输入校验码"
+            type="text" />
         </div>
-      </Form>
+      </div>
+      <div class="marPX">
+        <div class="inv-cell">
+          <label>查验状态</label>
+          <input
+            :value="const_realStatus[props.invoiceData.realStatus]"
+            placeholder=""
+            type="text" />
+        </div>
+      </div>
+      <div class="submit">
+        <span
+          class="back-btn"
+          style="flex: 1; background-color: #07c160; color: #fff"
+          @click="close">
+          返回
+        </span>
+        <span class="save-btn" v-if="isEdit" @click="submit">保存</span>
+      </div>
     </div>
   </div>
-  <ActionSheet :z-index="9527" v-model:show="showEdit" :title="editTitle(titleIndex)">
-    <div class="content">
-      <Form ref="REF_editForm">
-        <Field
-          autocomplete="off"
-          @blur="blurInput($event, 'itemExTaxAmount')"
-          label="不含税金额"
-          v-model="activeRow.itemExTaxAmount" />
-        <Field
-          autocomplete="off"
-          label="税率"
-          @blur="blurInput($event, 'itemTaxRate')"
-          v-model="activeRow.itemTaxRate">
-          <template #right-icon>%</template>
-        </Field>
-        <Cell title="税额" :value="rateAmount"> </Cell>
-      </Form>
-      <div class="btn">
-        <Button type="primary" @click="confirmEdit">确定</Button>
+
+  <InvoicePopup v-model="showEdit" :title="editTitle(titleIndex)">
+    <template #content>
+      <div class="content">
+        <div class="inv-cell">
+          <label>不含税金额</label>
+          <input
+            class="input-color"
+            v-model="activeRow.itemExTaxAmount"
+            @blur="blurInput($event, 'itemExTaxAmount')"
+            placeholder="请输入金额"
+            type="text" />
+          <div class="cell-icon"></div>
+        </div>
+        <div class="inv-cell">
+          <label>税率</label>
+          <input
+            class="input-color"
+            v-model="activeRow.itemTaxRate"
+            @blur="blurInput($event, 'itemTaxRate')"
+            placeholder="请输入税率"
+            type="text" />
+          <div class="cell-icon">%</div>
+        </div>
+        <div class="inv-cell">
+          <label>税额</label>
+          <input :value="rateAmount" readonly placeholder="" type="text" />
+        </div>
       </div>
-    </div>
-  </ActionSheet>
-  <Overlay
-  :z-index="9527"
-    style="
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 999;
-    "
-    :show="showLoading">
-    <Loading class="loading" color="#0094ff">保存中...</Loading>
-  </Overlay>
+    </template>
+
+    <template #footer>
+      <div class="footer-confirm-btn">
+        <button class="confirm-btn" @click="confirmEdit">确定</button>
+      </div>
+    </template>
+  </InvoicePopup>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
+import InvoicePopup from '../InvoicePopup/InvoicePopup.vue'
 import '@/utils/disableZoom'
 import { __updateInvoiceData } from '@/api/invoice'
-import {
-  showToast,
-  Overlay,
-  Loading,
-  showImagePreview,
-  CellGroup,
-  Field,
-  Form,
-  Icon,
-  Button,
-  ActionSheet,
-  Cell,
-} from 'vant'
 import { onMounted } from 'vue'
 import { const_realStatus } from '../InvoiceList/const'
 import { RowAttribute } from './const'
 import { filterNumber } from '@/utils/number'
 import { computed } from 'vue'
 import Decimal from 'decimal.js'
-import Cookies from 'js-cookie'
+import { api as viewerApi } from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
+import { OCR_getMaxZIndex } from '@/utils/common'
+import { CreateLoading, showMessage } from '@/utils/components'
+
 const props = defineProps(['ids', 'invoiceData'])
 const formData = ref({
   codeReq: {
@@ -311,14 +290,16 @@ const formData = ref({
 const emit = defineEmits(['saveSuccess'])
 document.title = '发票信息'
 const expandObj: any = ref({})
-const showRequiredMsg = ref(false)
-// const modules = ref([Pagination])
-const showLoading = ref(false)
 const close = () => {
   emit('saveSuccess')
 }
 const openPreViewImg = () => {
-  showImagePreview([props.invoiceData.attachmentLink])
+  viewerApi({
+    images: [props.invoiceData.attachmentLink],
+    options: {
+      zIndex: OCR_getMaxZIndex() + 1,
+    },
+  })
 }
 const isEdit = computed(() => {
   // true 允许
@@ -331,31 +312,27 @@ const isEdit = computed(() => {
   )
 })
 const submit = async () => {
-  showLoading.value = true
+  const ld = new CreateLoading()
+  ld.show()
   try {
     const res: any = await __updateInvoiceData(formData.value)
     if (res.code === 200) {
-      showToast({
+      showMessage({
         type: 'success',
         message: '保存成功',
-        teleport: Cookies.get('teleport') || null,
-        zIndex: 9527,
       })
       emit('saveSuccess')
     }
   } catch (err: any) {
-    showToast({
-      type: 'fail',
+    showMessage({
+      type: 'error',
       message: err.msg,
-      teleport: Cookies.get('teleport') || null,
-      zIndex: 9527,
     })
     emit('saveSuccess')
   }
-  showLoading.value = false
+  ld.hide()
 }
 const initData = () => {
-  console.log(props.invoiceData)
   // 销售方数据回显
   formData.value.sellerReq.sellerName = props.invoiceData.sellerName
   formData.value.sellerReq.sellerAccount = props.invoiceData.sellerAccount
@@ -403,7 +380,7 @@ const confirmEdit = () => {
   formData.value.itemAmountReqs[titleIndex.value].itemTaxRate =
     activeRow.value.itemTaxRate
   formData.value.itemAmountReqs[titleIndex.value].itemTaxAmount = Number(
-    new Decimal(filterNumber(activeRow.value.itemExTaxAmount))
+    new Decimal(filterNumber(activeRow.value.itemExTaxAmount) || 0)
       .times(new Decimal(filterNumber(activeRow.value.itemTaxRate / 100)))
       .toFixed(2)
   )
@@ -411,21 +388,15 @@ const confirmEdit = () => {
 }
 const blurInput = (e: any, key: any) => {
   let value = activeRow.value[key]
-  activeRow.value[key] = filterNumber(value)
+  activeRow.value[key] = filterNumber(value) || 0
 }
 
 const computed_amount = computed(() => {
   let count = new Decimal(0)
   formData.value.itemAmountReqs.forEach((item) => {
-    // let tax_amount = new Decimal(filterNumber(item.itemExTaxAmount)).times(
-    //   new Decimal(filterNumber(item.itemTaxRate / 100))
-    // )
-    // count = count.plus(
-    //   new Decimal(filterNumber(item.itemExTaxAmount)).plus(tax_amount)
-    // )
     count = count.plus(
-      new Decimal(filterNumber(item.itemExTaxAmount)).plus(
-        new Decimal(item.itemTaxAmount)
+      new Decimal(filterNumber(item.itemExTaxAmount) || 0).plus(
+        new Decimal(item.itemTaxAmount || 0)
       )
     )
   })
@@ -450,7 +421,6 @@ onMounted(() => {
 <style lang="scss" scoped>
 .content {
   background-color: #f7f8fa;
-  height: 200px;
   :deep(.van-field__value) {
     border: 1px solid #2196f3;
     border-radius: 4px;
@@ -480,12 +450,80 @@ onMounted(() => {
     font-size: 16px;
   }
 }
-
+.footer-confirm-btn {
+  margin-top: 12px;
+  margin-bottom: 6px;
+  width: 100%;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .confirm-btn {
+    width: calc(100% - 24px);
+    padding: 12px 0;
+    color: #fff;
+    background-color: #1989fa;
+    border: none;
+    border-radius: 25px;
+  }
+}
+.inv-cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background-color: #fff;
+  padding: 12px;
+  label {
+    margin-right: 4px;
+    font-size: 14px;
+    font-weight: 700;
+    width: 100px;
+    color: #333;
+  }
+  .cell-icon {
+    margin-left: 4px;
+    min-width: 16px;
+    text-align: right;
+    i {
+      color: #8c8d8fe3;
+    }
+  }
+  input {
+    flex: 1;
+    color: #333;
+    border: none;
+    height: 24px;
+    outline: none;
+    font-size: 14px;
+    font-weight: 500;
+    &::placeholder {
+      color: #d1d2d5;
+    }
+  }
+  textarea {
+    flex: 1;
+    height: 60px;
+    padding: 4px;
+    border: none;
+    outline: none;
+    resize: none;
+    &::placeholder {
+      color: #d1d2d5;
+    }
+  }
+  .input-color {
+    border: 1px solid #1989fa;
+    border-radius: 5px;
+    padding: 0 1em;
+  }
+}
 .Invoice {
   padding-bottom: 100px;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   background-color: #f2f4f7;
+  overflow: auto;
+  padding-bottom: 100px;
   .top {
     width: 100%;
     padding: 12px 4px;
@@ -493,13 +531,17 @@ onMounted(() => {
       width: 100%;
       height: 179px;
       display: block;
+      object-fit: contain;
     }
   }
-
+  .inovice-content {
+    padding: 0 16px;
+  }
   .Field-title {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 12px;
     .titleLeft {
       font-size: 16px;
       color: #333333;
@@ -538,6 +580,7 @@ onMounted(() => {
     th {
       padding: 12px 0;
       text-align: center;
+      font-size: 14px;
     }
   }
   tbody {
@@ -575,4 +618,17 @@ onMounted(() => {
     }
   }
 }
+.flod-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.flod-fade-leave-active {
+  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.flod-fade-enter-from,
+.flod-fade-leave-to {
+  transform: translateY(-20px);
+  opacity: 0;
+}
 </style>