单据识别类型切换

src/views/Business/Ditdck/Docpre.vue

@@ -227,7 +227,7 @@
         </span>
       </el-dialog>
     </c-col>
-    <OcrInvoicesRecognition ref="ocrInvoices" v-on:confirm="selectGridPDF"></OcrInvoicesRecognition>
+    <OcrRecognition ref="ocrRecognition" v-on:confirm="selectGridPDF"></OcrRecognition>
   </div>
 </template>
 <script>
@@ -236,13 +236,13 @@ import commonProcess from "~/mixin/commonProcess";
 import CodeTable from "~/config/CodeTable";
 import Event from "~/model/Ditdck/Event";
 
-import OcrInvoicesRecognition from "./OcrInvoicesRecognition.vue";
+import OcrRecognition from "./OcrRecognition.vue";
 
 export default {
   inject: ["root"],
   props: ["model", "codes"],
   mixins: [commonProcess],
-  components: { OcrInvoicesRecognition },
+  components: { OcrRecognition },
   data() {
     return {
       addDialogVisible: false,
@@ -363,7 +363,7 @@ export default {
         this.selectPDFData = idx;
     },
     openPdfDialog(id, idx) {
-      this.$refs.ocrInvoices.show = true
+      this.$refs.ocrRecognition.show = true
       this.selectedPdf.id = id;
       this.selectedPdf.index = idx;
     },

src/views/Business/Ditdck/OcrInvoicesRecognition.vue

-<template>
-  <!-- OCR 单据智能识别 -->
-  <el-dialog
-    custom-class="ocr-invoices-dialog"
-    :visible.sync="show"
-    :show-close="false"
-    width="80%"
-    top="10vh"
-  >
-    <div slot="title" class="ocr-title">
-      <span style="font-weight: bold;">OCR智能识别</span>
-      <div>
-        <c-button type="primary" @click="save">保存</c-button>
-        <c-button type="primary" @click="close">关闭</c-button>
-      </div>
-    </div>
-    <div class="invoices-recognition">
-      <div class="invoices-area">
-        <div class="file-name">{{ fileName }}</div>
-        <!-- <iframe class="pdf-file" :src="fileUrl" type="application/pdf" /> -->
-        <div class="pdf-file">
-          <el-scrollbar :style="{ height: imgContainerHeight + 'px' }">
-            <div style="height: 100%;display: flex;justify-content: center;">
-              <img :src="fileUrl" alt="单据" style="display: block;" />
-            </div>
-          </el-scrollbar>
-        </div>
-      </div>
-      <div class="recognition-area">
-        <el-form
-          v-model="invoicesData"
-          label-width="100px"
-          label-position="right"
-        >
-          <el-col :span="24">
-            <el-form-item label="">
-              <c-select v-model="invoicesData.type">
-                <el-option
-                  v-for="(item, idx) in invoicesTypeOptions"
-                  :key="idx"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </c-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="发票日期">
-              <c-input type="textarea" v-model="invoicesData.date"></c-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="发票金额">
-              <c-input type="textarea" v-model="invoicesData.amount"></c-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="是否正本">
-              <c-select v-model="invoicesData.original" style="width: 100%;">
-                <el-option
-                  v-for="(item, idx) in invoicesOriginalOptions"
-                  :key="idx"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
-              </c-select>
-            </el-form-item>
-          </el-col>
-        </el-form>
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import invoicePdf from "~/assets/invoice.pdf";
-
-export default {
-  name: "OcrInvoicesRecognition",
-  data() {
-    return {
-      show: false,
-      fileName: "KZ3500220597AA-001.pdf",
-      // fileUrl: "/invoice.pdf",
-      fileUrl: require("~/assets/KZ3500220597AA-001.pdf.jpg"),
-      imgContainerHeight: 0,
-      invoicesTypeOptions: [
-        { label: "商业发票", value: "SYFP" },
-        { label: "个人发票", value: "GRFP" },
-      ],
-      invoicesOriginalOptions: [
-        { label: "是", value: 1 },
-        { label: "否", value: 0 },
-      ],
-      invoicesData: {
-        type: "SYFP",
-        date: "5 DEC 2021",
-        amount: "USD 223000.00",
-        original: 1,
-      },
-    };
-  },
-  watch: {
-    show(newVal, oldVal) {
-      if (!this.imgContainerHeight) {
-        if (newVal) {
-          this.$nextTick(() => {
-            const ele = this.$el.querySelector(
-              ".invoices-recognition .invoices-area .pdf-file"
-            );
-            this.imgContainerHeight = ele.clientHeight;
-          });
-        }
-      }
-    },
-  },
-  methods: {
-    save() {
-      this.$emit("confirm");
-      this.close();
-    },
-    close() {
-      this.show = false;
-    },
-  },
-};
-</script>
-
-<style>
-.ocr-invoices-dialog {
-  height: 85%;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: unset;
-}
-.ocr-invoices-dialog .el-dialog__header,
-.ocr-invoices-dialog .el-dialog__body {
-  padding: 0;
-}
-.ocr-invoices-dialog .el-dialog__body {
-  flex: 1;
-}
-.ocr-invoices-dialog .el-scrollbar__wrap {
-  overflow-x: auto;
-}
-</style>
-
-<style scoped>
-.ocr-title {
-  display: flex;
-  justify-content: space-between;
-  padding: 5px 10px 5px 20px;
-  border-bottom: 1px solid #dadbdd;
-}
-.invoices-recognition {
-  height: 100%;
-  display: flex;
-  background-color: #f6fbff;
-  padding: 20px;
-  box-sizing: border-box;
-}
-.invoices-area {
-  height: 100%;
-  width: 50%;
-  border-right: 1px solid #babec1;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px;
-  overflow: hidden;
-}
-.recognition-area {
-  height: 100%;
-  width: 50%;
-  border-left: 1px solid #babec1;
-  box-sizing: border-box;
-}
-
-.invoices-area .file-name {
-  padding-bottom: 10px;
-  text-align: center;
-}
-.invoices-area .pdf-file {
-  flex: 1;
-}
-</style>