mg-ocr-invoice 0.2.1 → 0.2.3-beta

package/src/components/Invoice/index.vue

@@ -1,104 +1,247 @@
 <template>
   <div class="Invoice">
-    <div class="top" @click="openPreViewImg">
-      <img :src="invoiceData.attachmentLink" alt="" />
+    <div class="top">
+      <img
+        :src="props.invoiceData.attachmentLink"
+        @click.stop="openPreViewImg"
+        alt="" />
     </div>
-    <div class="company">
-      <div class="title"><i></i> <span>公司</span></div>
-      <div class="cardText">
-        <p style="font-size: 13px; color: #888888">销售方</p>
-        <div class="card">
-          <div class="companyName">{{ invoiceData.sellerName }}</div>
-          <div class="sellerInformation">
-            <ul>
-              <li>
-                <i></i>
-                <span class="label"> 纳税人识别号：</span>
-                <span class="value">{{ invoiceData.sellerId }}</span>
-              </li>
-              <li>
-                <i></i>
-                <span class="label">地址、电话：</span>
-                <span class="value">{{ invoiceData.sellerContact }}</span>
-              </li>
-              <li>
-                <i></i>
-                <span class="label">开户银行及账户：</span>
-                <span class="value">{{ invoiceData.sellerAccount }}</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div class="purchaser">
-        <ul>
-          <li>
-            <div class="label">购买方：</div>
-            <div class="input">{{ invoiceData.payerName }}</div>
-          </li>
-          <li>
-            <div class="label">发票类型：</div>
-            <div class="input">{{ invoiceData.description }}</div>
-          </li>
-          <li>
-            <div class="label">费用类型：</div>
-            <div class="input">其他费</div>
-          </li>
-          <li>
-            <div class="label">票面金额：</div>
-            <div class="input">
-              {{
-                invoiceData.priceTaxTotalFigure || invoiceData.noTaxAmountTotal
-              }}
+    <div>
+      <Form label-width="65px">
+        <CellGroup inset>
+          <template #title>
+            <div class="Field-title">
+              <span class="titleLeft">公司信息</span>
+              <span class="titleright">重新查验</span>
             </div>
-          </li>
-          <li>
-            <div class="label">发票代码：</div>
-            <div class="input">
-              <ElInputNumber
-                :min="0"
-                :controls="false"
-                @input="editFlag = true"
-                v-model.trim="invoiceData.invoiceCode"></ElInputNumber>
+          </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>
-          </li>
-          <li>
-            <div class="label">
-              <span class="van-field__label--required"></span>发票号码：
+          </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 class="input">
-              <ElInputNumber
-                :min="0"
-                :controls="false"
-                @input="editFlag = true"
-                v-model.trim="invoiceData.invoiceNum"></ElInputNumber>
-              <!-- <input type="text" v-model.trim="invoiceData.invoiceNum" /> -->
-              <div v-if="showRequiredMsg" class="errColor">
-                发票号码不能为空！
-              </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>
-          </li>
-          <li>
-            <div class="label">校验码：</div>
-            <div class="input">{{ invoiceData.checkCode }}</div>
-          </li>
-          <li>
-            <div class="label">开票日期：</div>
-            <div class="input">{{ invoiceData.invoiceDate }}</div>
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="submit">
-      <span
-        style="width: 30%; background-color: #07c160; color: #fff"
-        @click="close"
-        >返回</span
-      >
-      <span @click="submit">保存</span>
+          </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="width: 30%; background-color: #07c160; color: #fff"
+            @click="close">
+            返回
+          </span>
+          <span @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;
@@ -113,27 +256,58 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import '@/utils/disableZoom'
-import { __updateInvoice } from '@/api/invoice'
+import { __updateInvoiceData } from '@/api/invoice'
 import {
   showToast,
   Overlay,
   Loading,
   showFailToast,
   showImagePreview,
+  CellGroup,
+  Field,
+  Form,
+  Icon,
+  Button,
+  ActionSheet,
+  Cell,
 } from 'vant'
-import { ElInputNumber } from 'element-plus'
-const { ids, invoiceData } = defineProps({
-  ids: {
-    type: Object,
-    required: true,
+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: '',
   },
-  invoiceData: {
-    type: Object,
-    required: true,
+  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)
@@ -141,27 +315,13 @@ const close = () => {
   emit('saveSuccess')
 }
 const openPreViewImg = () => {
-  showImagePreview([invoiceData.attachmentLink])
+  showImagePreview([props.invoiceData.attachmentLink])
 }
-const editFlag = ref(false)
+
 const submit = async () => {
-  if (!editFlag.value) {
-    emit('saveSuccess')
-    return
-  }
-  if (!invoiceData.invoiceNum) {
-    showRequiredMsg.value = true
-    return
-  } else {
-    showRequiredMsg.value = false
-  }
   showLoading.value = true
   try {
-    const res: any = await __updateInvoice({
-      ...ids,
-      invoiceNum: invoiceData.invoiceNum,
-      invoiceCode: invoiceData.invoiceCode,
-    })
+    const res: any = await __updateInvoiceData(formData.value)
     if (res.code === 200) {
       showToast({
         type: 'success',
@@ -175,37 +335,122 @@ const submit = async () => {
   }
   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) => {
+    count = count.plus(new Decimal(item.itemExTaxAmount))
+  })
+  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>
-::v-deep {
-  .el-input-number {
-    width: 100%;
-  }
-  .el-input {
-    .el-input__wrapper {
-      width: 100%;
-      padding: 0 !important;
-      box-shadow: none;
+.content {
+  background-color: #f7f8fa;
+  height: 200px;
+  :deep(.van-field__value) {
+    border: 1px solid #2196f3;
+    border-radius: 4px;
+    input {
+      padding-left: 12px;
     }
-    .el-input__inner {
-      width: 100%;
-      text-align: left;
-      box-shadow: none;
-      padding: 0 !important;
+  }
+  .btn {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 16px 0;
+    button {
+      flex: 1;
+      border-radius: 25px;
     }
   }
 }
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
+: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: #f3f4f6;
+  background-color: #f2f4f7;
   .top {
     width: 100%;
     padding: 12px 4px;
@@ -216,102 +461,55 @@ const submit = async () => {
     }
   }
 
-  .company {
-    height: inherit;
-    padding: 0 12px;
-    background-color: #fff;
-    .title {
-      padding: 18px 0;
+  .Field-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .titleLeft {
       font-size: 16px;
-      font-weight: 500;
-      display: flex;
-      align-items: center;
-      border-bottom: 1px dashed #e8e8e8;
-      margin-bottom: 18px;
-      i {
+      color: #333333;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 600;
+      &::before {
+        margin-right: 4px;
         display: inline-block;
+        content: '';
         width: 4px;
         height: 14px;
-        background: #266fe8;
+        background-color: #266fe8;
         border-radius: 2px;
       }
-
-      span {
-        font-size: 16px;
-        padding-left: 8px;
-      }
     }
-    .cardText {
-      .card {
-        margin-top: 8px;
-        border-radius: 4px;
-        background-color: #f6f6f6;
-        font-size: 14px;
-        .companyName {
-          padding: 15px;
-        }
-        .sellerInformation {
-          padding-left: 12px;
-          padding-bottom: 20px;
-          li {
-            list-style: none;
-            margin-bottom: 12px;
-            display: flex;
-            align-items: center;
-            i {
-              width: 4px;
-              height: 4px;
-              border-radius: 50%;
-              background-color: #266fe8;
-            }
-            .label {
-              width: 120px;
-              margin-left: 12px;
-              white-space: nowrap;
-            }
-            .value {
-              flex: 1;
-            }
-          }
-        }
-      }
+    .titleright {
+      font-size: 14px;
+      color: #266fe8;
     }
-    .purchaser {
-      ul {
-        li {
-          display: flex;
-          font-size: 16px;
-          height: 50px;
-          align-items: center;
-          gap: 45px;
-          .label {
-            width: 80px;
-            white-space: nowrap;
-            position: relative;
-            .van-field__label--required {
-              position: absolute;
-              top: 0;
-              left: -8px;
-            }
-          }
-          .input {
-            flex-grow: 1;
-            color: #999999;
+  }
+  .marPX {
+    margin-bottom: 12px;
+  }
 
-            input {
-              width: 100%;
-              color: #999999;
-              outline: none;
-              font-size: 16px;
-              border: none;
-            }
-            .errColor {
-              color: red;
-              font-size: 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 {