mg-ocr-invoice 0.3.0 → 0.3.2

package/src/components/Invoice/index.vue

@@ -1,565 +1,564 @@
-<template>
-  <div class="Invoice">
-    <div class="top">
-      <img
-        :src="props.invoiceData.attachmentLink"
-        @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>
-          </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="纳税人识别号"
-                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="开户银行/银行账号"
-                placeholder="请输入开户银行+银行账户"
-                v-model="formData.sellerReq.sellerAccount" />
-              <!-- <Field
-                autocomplete="off"
-                label="银行账号"
-                placeholder="请输入银行账号"
-                v-model="formData.sellerReq.sellerName" /> -->
-            </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="纳税人识别号"
-                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" /> -->
-            </div>
-          </div>
-          <div class="marPX">
-            <Field
-              autocomplete="off"
-              readonly
-              label="发票类型"
-              :model-value="props.invoiceData.description" />
-          </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>
-                          {{
-                            computedTaxAmount(
-                              item.itemExTaxAmount,
-                              item.itemTaxRate
-                            )
-                          }}
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </template>
-              </Field>
-            </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="发票号码"
-                placeholder="请输入发票号码"
-                v-model="formData.codeReq.invoiceNum" />
-              <Field
-                autocomplete="off"
-                label="校验码"
-                placeholder="请输入校验码"
-                v-model="formData.codeReq.checkCode" />
-            </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>
-        </div>
-      </Form>
-    </div>
-  </div>
-  <ActionSheet 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>
-      </div>
-    </div>
-  </ActionSheet>
-  <Overlay
-    style="
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 999;
-    "
-    :show="showLoading">
-    <Loading class="loading" color="#0094ff">保存中...</Loading>
-  </Overlay>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import '@/utils/disableZoom'
-import { __updateInvoiceData } from '@/api/invoice'
-import {
-  showToast,
-  Overlay,
-  Loading,
-  showFailToast,
-  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'
-const props = defineProps(['ids', 'invoiceData'])
-const formData = ref({
-  codeReq: {
-    invoiceCode: '',
-    invoiceNum: '',
-    checkCode: '',
-  },
-  itemAmountReqs: [
-    {
-      detailCode: '',
-      itemExTaxAmount: 0,
-      itemTaxRate: 0,
-    },
-  ],
-  payerReq: {
-    payerAccount: '',
-    payerContact: '',
-    payerId: '',
-    payerName: '',
-  },
-  sellerReq: {
-    sellerAccount: '',
-    sellerContact: '',
-    sellerId: '',
-    sellerName: '',
-  },
-  taskId: '',
-})
-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])
-}
-const isEdit = computed(() => {
-  // true 允许
-  return (
-    props.invoiceData.realStatus === 'noNeed' ||
-    props.invoiceData.invoiceExceptionInfo === 'abnormal' ||
-    props.invoiceData.manualModify ||
-    props.invoiceData.realStatus === 'checkFail'||
-    props.invoiceData.realStatus === 'notCheck'
-  )
-})
-const submit = async () => {
-  showLoading.value = true
-  try {
-    const res: any = await __updateInvoiceData(formData.value)
-    if (res.code === 200) {
-      showToast({
-        type: 'success',
-        message: '保存成功',
-      })
-      emit('saveSuccess')
-    }
-  } catch (err: any) {
-    showFailToast(err.msg)
-    emit('saveSuccess')
-  }
-  showLoading.value = false
-}
-const initData = () => {
-  console.log(props.invoiceData)
-  // 销售方数据回显
-  formData.value.sellerReq.sellerName = props.invoiceData.sellerName
-  formData.value.sellerReq.sellerAccount = props.invoiceData.sellerAccount
-  formData.value.sellerReq.sellerContact = props.invoiceData.sellerContact
-  formData.value.sellerReq.sellerId = props.invoiceData.sellerId
-  // 购买方数据回显
-  formData.value.payerReq.payerAccount = props.invoiceData.payerAccount
-  formData.value.payerReq.payerContact = props.invoiceData.payerContact
-  formData.value.payerReq.payerName = props.invoiceData.payerName
-  formData.value.payerReq.payerId = props.invoiceData.payerId
-  // 发票代码回显
-  formData.value.codeReq.invoiceCode = props.invoiceData.invoiceCode
-  formData.value.codeReq.invoiceNum = props.invoiceData.invoiceNum
-  formData.value.codeReq.checkCode = props.invoiceData.checkCode
-  formData.value.taskId = props.invoiceData.taskId
-  // 金额数据回显
-  formData.value.itemAmountReqs = JSON.parse(
-    JSON.stringify(props.invoiceData.deatis)
-  ).map((item: any) => {
-    return {
-      detailCode: item.code,
-      itemExTaxAmount: item.itemExTaxAmount,
-      itemTaxRate: item.itemTaxRate.replace(/%/g, ''),
-    }
-  })
-}
-const showEdit = ref(false)
-const activeRow = ref<RowAttribute | any>({})
-const titleIndex = ref<number>(0)
-const editTitle = (index: number) => {
-  return `第${index + 1}行金额`
-}
-const openEditpopUp = (row: RowAttribute, index: number) => {
-  activeRow.value = JSON.parse(JSON.stringify(row))
-  activeRow.value.itemTaxRate = filterNumber(activeRow.value.itemTaxRate)
-  titleIndex.value = index
-  showEdit.value = true
-}
-const confirmEdit = () => {
-  formData.value.itemAmountReqs[titleIndex.value].detailCode =
-    activeRow.value.detailCode
-  formData.value.itemAmountReqs[titleIndex.value].itemExTaxAmount =
-    activeRow.value.itemExTaxAmount
-  formData.value.itemAmountReqs[titleIndex.value].itemTaxRate =
-    activeRow.value.itemTaxRate
-  showEdit.value = false
-}
-const blurInput = (e: any, key: any) => {
-  let value = activeRow.value[key]
-  activeRow.value[key] = filterNumber(value)
-}
-
-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))
-    ).toFixed(2)
-    count = count.plus(
-      new Decimal(filterNumber(item.itemExTaxAmount)).plus(tax_amount)
-    )
-  })
-  return count.toFixed(2)
-})
-const rateAmount = computed(() => {
-  return new Decimal(filterNumber(Number(activeRow.value.itemExTaxAmount)))
-    .times(new Decimal(filterNumber(activeRow.value.itemTaxRate / 100)))
-    .toFixed(2)
-})
-const computedTaxAmount = (ExTaxAmount: any, TaxRate: any) => {
-  let rate: any = TaxRate + ''
-  return new Decimal(filterNumber(ExTaxAmount))
-    .times(new Decimal(filterNumber(rate / 100)))
-    .toFixed(2)
-}
-onMounted(() => {
-  initData()
-})
-</script>
-
-<style lang="scss" scoped>
-.content {
-  background-color: #f7f8fa;
-  height: 200px;
-  :deep(.van-field__value) {
-    border: 1px solid #2196f3;
-    border-radius: 4px;
-    input {
-      padding-left: 12px;
-    }
-  }
-  .btn {
-    display: flex;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 12px 16px 0;
-    button {
-      flex: 1;
-      border-radius: 25px;
-    }
-  }
-}
-:deep(.van-cell-group) {
-  background-color: transparent;
-  .van-field__label {
-    color: #333333;
-    font-size: 16px;
-    font-weight: 400;
-  }
-  .van-field__control {
-    font-size: 16px;
-  }
-}
-
-.Invoice {
-  padding-bottom: 100px;
-  width: 100%;
-  min-height: 100%;
-  background-color: #f2f4f7;
-  .top {
-    width: 100%;
-    padding: 12px 4px;
-    img {
-      width: 100%;
-      height: 179px;
-      display: block;
-    }
-  }
-
-  .Field-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .titleLeft {
-      font-size: 16px;
-      color: #333333;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 600;
-      &::before {
-        margin-right: 4px;
-        display: inline-block;
-        content: '';
-        width: 4px;
-        height: 14px;
-        background-color: #266fe8;
-        border-radius: 2px;
-      }
-    }
-    .titleright {
-      font-size: 14px;
-      color: #266fe8;
-    }
-  }
-  .marPX {
-    margin-bottom: 12px;
-  }
-
-  table {
-    background-color: #fff;
-    border-radius: 4px;
-    border: 1px solid #f2f4f7;
-    width: 100%;
-    border-spacing: 0;
-  }
-  thead {
-    background-color: #f2f4f7;
-    font-size: 12px;
-    color: #666666;
-    th {
-      padding: 12px 0;
-      text-align: center;
-    }
-  }
-  tbody {
-    td {
-      text-align: center;
-      padding: 10px 0;
-      white-space: nowrap;
-    }
-  }
-  .submit {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    box-shadow: 0px -1px 12px 0px rgba(173, 173, 173, 0.1);
-    height: 90px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 12px;
-    z-index: 2;
-    background-color: #fff;
-    gap: 12px;
-    span {
-      flex: 2;
-      background-color: #266fe8;
-      // width: 68%;
-      font-size: 15px;
-      color: #fff;
-      height: 44px;
-      text-align: center;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-}
-</style>
+<template>
+  <div class="Invoice">
+    <div class="top">
+      <img
+        :src="props.invoiceData.attachmentLink"
+        @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>
+          </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="纳税人识别号"
+                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="开户银行/银行账号"
+                placeholder="请输入开户银行+银行账户"
+                v-model="formData.sellerReq.sellerAccount" />
+              <!-- <Field
+                autocomplete="off"
+                label="银行账号"
+                placeholder="请输入银行账号"
+                v-model="formData.sellerReq.sellerName" /> -->
+            </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="纳税人识别号"
+                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" /> -->
+            </div>
+          </div>
+          <div class="marPX">
+            <Field
+              autocomplete="off"
+              readonly
+              label="发票类型"
+              :model-value="props.invoiceData.description" />
+          </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>
+            </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="发票号码"
+                placeholder="请输入发票号码"
+                v-model="formData.codeReq.invoiceNum" />
+              <Field
+                autocomplete="off"
+                label="校验码"
+                placeholder="请输入校验码"
+                v-model="formData.codeReq.checkCode" />
+            </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>
+        </div>
+      </Form>
+    </div>
+  </div>
+  <ActionSheet 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>
+      </div>
+    </div>
+  </ActionSheet>
+  <Overlay
+    style="
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 999;
+    "
+    :show="showLoading">
+    <Loading class="loading" color="#0094ff">保存中...</Loading>
+  </Overlay>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import '@/utils/disableZoom'
+import { __updateInvoiceData } from '@/api/invoice'
+import {
+  showToast,
+  Overlay,
+  Loading,
+  showFailToast,
+  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'
+const props = defineProps(['ids', 'invoiceData'])
+const formData = ref({
+  codeReq: {
+    invoiceCode: '',
+    invoiceNum: '',
+    checkCode: '',
+  },
+  itemAmountReqs: [
+    {
+      detailCode: '',
+      itemExTaxAmount: 0,
+      itemTaxRate: 0,
+      itemTaxAmount:0
+    },
+  ],
+  payerReq: {
+    payerAccount: '',
+    payerContact: '',
+    payerId: '',
+    payerName: '',
+  },
+  sellerReq: {
+    sellerAccount: '',
+    sellerContact: '',
+    sellerId: '',
+    sellerName: '',
+  },
+  taskId: '',
+})
+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])
+}
+const isEdit = computed(() => {
+  // true 允许
+  return (
+    props.invoiceData.realStatus === 'noNeed' ||
+    props.invoiceData.invoiceExceptionInfo === 'abnormal' ||
+    props.invoiceData.manualModify ||
+    props.invoiceData.realStatus === 'checkFail'||
+    props.invoiceData.realStatus === 'notCheck'
+  )
+})
+const submit = async () => {
+  showLoading.value = true
+  try {
+    const res: any = await __updateInvoiceData(formData.value)
+    if (res.code === 200) {
+      showToast({
+        type: 'success',
+        message: '保存成功',
+      })
+      emit('saveSuccess')
+    }
+  } catch (err: any) {
+    showFailToast(err.msg)
+    emit('saveSuccess')
+  }
+  showLoading.value = false
+}
+const initData = () => {
+  console.log(props.invoiceData)
+  // 销售方数据回显
+  formData.value.sellerReq.sellerName = props.invoiceData.sellerName
+  formData.value.sellerReq.sellerAccount = props.invoiceData.sellerAccount
+  formData.value.sellerReq.sellerContact = props.invoiceData.sellerContact
+  formData.value.sellerReq.sellerId = props.invoiceData.sellerId
+  // 购买方数据回显
+  formData.value.payerReq.payerAccount = props.invoiceData.payerAccount
+  formData.value.payerReq.payerContact = props.invoiceData.payerContact
+  formData.value.payerReq.payerName = props.invoiceData.payerName
+  formData.value.payerReq.payerId = props.invoiceData.payerId
+  // 发票代码回显
+  formData.value.codeReq.invoiceCode = props.invoiceData.invoiceCode
+  formData.value.codeReq.invoiceNum = props.invoiceData.invoiceNum
+  formData.value.codeReq.checkCode = props.invoiceData.checkCode
+  formData.value.taskId = props.invoiceData.taskId
+  // 金额数据回显
+  formData.value.itemAmountReqs = JSON.parse(
+    JSON.stringify(props.invoiceData.deatis)
+  ).map((item: any) => {
+    return {
+      detailCode: item.code,
+      itemExTaxAmount: item.itemExTaxAmount,
+      itemTaxRate: item.itemTaxRate.replace(/%/g, ''),
+      itemTaxAmount:item.itemTaxAmount
+    }
+  })
+}
+const showEdit = ref(false)
+const activeRow = ref<RowAttribute | any>({})
+const titleIndex = ref<number>(0)
+const editTitle = (index: number) => {
+  return `第${index + 1}行金额`
+}
+const openEditpopUp = (row: RowAttribute, index: number) => {
+  activeRow.value = JSON.parse(JSON.stringify(row))
+  activeRow.value.itemTaxRate = filterNumber(activeRow.value.itemTaxRate)
+  titleIndex.value = index
+  showEdit.value = true
+}
+const confirmEdit = () => {
+  formData.value.itemAmountReqs[titleIndex.value].detailCode =
+    activeRow.value.detailCode
+  formData.value.itemAmountReqs[titleIndex.value].itemExTaxAmount =
+    activeRow.value.itemExTaxAmount
+  formData.value.itemAmountReqs[titleIndex.value].itemTaxRate =
+    activeRow.value.itemTaxRate
+  formData.value.itemAmountReqs[titleIndex.value].itemTaxAmount = Number(new Decimal(filterNumber(activeRow.value.itemExTaxAmount)).times(new Decimal(filterNumber(activeRow.value.itemTaxRate / 100))).toFixed(2))
+  showEdit.value = false
+}
+const blurInput = (e: any, key: any) => {
+  let value = activeRow.value[key]
+  activeRow.value[key] = filterNumber(value)
+}
+
+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))
+    )
+  })
+  return count.toFixed(2)
+})
+const rateAmount = computed(() => {
+  return new Decimal(filterNumber(Number(activeRow.value.itemExTaxAmount)))
+    .times(new Decimal(filterNumber(activeRow.value.itemTaxRate / 100)))
+    .toFixed(2)
+})
+const computedTaxAmount = (ExTaxAmount: any, TaxRate: any) => {
+  let rate: any = TaxRate + ''
+  return new Decimal(filterNumber(ExTaxAmount))
+    .times(new Decimal(filterNumber(rate / 100)))
+    .toFixed(2)
+}
+onMounted(() => {
+  initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.content {
+  background-color: #f7f8fa;
+  height: 200px;
+  :deep(.van-field__value) {
+    border: 1px solid #2196f3;
+    border-radius: 4px;
+    input {
+      padding-left: 12px;
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px 0;
+    button {
+      flex: 1;
+      border-radius: 25px;
+    }
+  }
+}
+:deep(.van-cell-group) {
+  background-color: transparent;
+  .van-field__label {
+    color: #333333;
+    font-size: 16px;
+    font-weight: 400;
+  }
+  .van-field__control {
+    font-size: 16px;
+  }
+}
+
+.Invoice {
+  padding-bottom: 100px;
+  width: 100%;
+  min-height: 100%;
+  background-color: #f2f4f7;
+  .top {
+    width: 100%;
+    padding: 12px 4px;
+    img {
+      width: 100%;
+      height: 179px;
+      display: block;
+    }
+  }
+
+  .Field-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .titleLeft {
+      font-size: 16px;
+      color: #333333;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 600;
+      &::before {
+        margin-right: 4px;
+        display: inline-block;
+        content: '';
+        width: 4px;
+        height: 14px;
+        background-color: #266fe8;
+        border-radius: 2px;
+      }
+    }
+    .titleright {
+      font-size: 14px;
+      color: #266fe8;
+    }
+  }
+  .marPX {
+    margin-bottom: 12px;
+  }
+
+  table {
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid #f2f4f7;
+    width: 100%;
+    border-spacing: 0;
+  }
+  thead {
+    background-color: #f2f4f7;
+    font-size: 12px;
+    color: #666666;
+    th {
+      padding: 12px 0;
+      text-align: center;
+    }
+  }
+  tbody {
+    td {
+      text-align: center;
+      padding: 10px 0;
+      white-space: nowrap;
+    }
+  }
+  .submit {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-shadow: 0px -1px 12px 0px rgba(173, 173, 173, 0.1);
+    height: 90px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+    z-index: 2;
+    background-color: #fff;
+    gap: 12px;
+    span {
+      flex: 2;
+      background-color: #266fe8;
+      // width: 68%;
+      font-size: 15px;
+      color: #fff;
+      height: 44px;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}
+</style>