单据识别样例

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>
+      <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: "assets/invoice.pdf",
+      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
+      }
+    }
+  },
+  methods: {
+    save() {
+      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;
+}
+</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 {
+  width: 50%;
+  border-right: 1px solid #babec1;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+}
+.recognition-area {
+  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>
\ No newline at end of file

src/views/Business/Ditdck/Test.vue

+<template>
+  <div>
+		<c-button @click="click">KO</c-button>
+		<OcrInvoicesRecognition ref="ocrInvoices"></OcrInvoicesRecognition>
+	</div>
+</template>
+
+<script>
+import OcrInvoicesRecognition from "./OcrInvoicesRecognition.vue";
+
+export default {
+	components: { OcrInvoicesRecognition },
+	methods: {
+		click() {
+			this.$refs.ocrInvoices.show = true
+		}
+	}
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

src/views/Business/Ditdck/index.vue

@@ -80,6 +80,9 @@
           <el-tab-pane label="授信额度" name="limitbody">
             <m-limitbody :model="model" :codes="codes" />
           </el-tab-pane> 
+          <el-tab-pane label="Test" name="Test">
+            <Test/>
+          </el-tab-pane> 
         </c-tabs>
       </el-form>
       <c-grid-ety-prompt-dialog
@@ -106,6 +109,7 @@ import Ovwp from "./Ovwp";
 import Docpre from "./Docpre";
 import Shpdet from "./Shpdet";
 // import Limitbody from "./Limitbody";
+import Test from "./Test.vue";
 
 import Glepan from "~/views/Public/Glepan";
 import Setpan from "~/views/Public/Setpan";
@@ -129,6 +133,7 @@ export default {
     "m-limitbody": Limitbody,
     "m-coninfp": Coninfp,
     "m-ccvpan": Ccvpan,
+    Test
   },
   provide() {
     return {

src/views/Public/Engp.vue

@@ -126,7 +126,6 @@
 import Api from "~/service/Api"
 import CommonProcess from "~/mixin/CommonProcess";
 import CodeTable from "~/config/CodeTable"
-import Event from "~/model/Ditopn/Event"
 
 export default {
     inject: ['root'],
@@ -137,7 +136,18 @@ export default {
 
         }
     },
-    methods:{...Event},
+    methods:{
+        async onLiaallButmisamt() {
+            let rtnmsg = await this.executeRule("liaall_butmisamt")
+            if (rtnmsg.respCode == SUCCESS) {
+                //TODO 处理数据逻辑
+
+            }
+            else {
+                this.$notify.error({ title: '错误', message: '服务请求失败！' });
+            }
+        },
+    },
     created:function(){
 
     }

src/views/Public/Glepan.vue

@@ -9,7 +9,6 @@
 import Api from "~/service/Api"
 import CommonProcess from "~/mixin/CommonProcess";
 import CodeTable from "~/config/CodeTable"
-import Event from "~/model/Ditopn/Event"
 
 export default {
     inject: ['root'],
@@ -43,7 +42,9 @@ export default {
             immediate: true
         }
     },
-    methods:{...Event},
+    methods:{
+        
+    },
     created:function(){
 
     }

src/views/Public/Limitbody.vue

@@ -285,7 +285,7 @@
 import Api from "~/service/Api";
 import CommonProcess from "~/mixin/CommonProcess";
 import CodeTable from "~/config/CodeTable";
-import Event from "~/model/Ditopn/Event";
+// import Event from "~/model/Ditopn/Event";
 
 export default {
     inject: ['root'],
@@ -296,7 +296,29 @@ export default {
             tableData: {},
         };
     },
-    methods: { ...Event ,
+    methods: {
+        onSeainf() {
+        },
+        async onPreperButtxmsel() {
+            let rtnmsg = await this.executeRule("preper_buttxmsel")
+            if (rtnmsg.respCode == SUCCESS) {
+                //TODO 处理数据逻辑
+
+            }
+            else {
+                this.$notify.error({ title: '错误', message: '服务请求失败！' });
+            }
+        },
+        async onLimptsGet1() {
+            let rtnmsg = await this.executeRule("limpts_get1")
+            if (rtnmsg.respCode == SUCCESS) {
+                //TODO 处理数据逻辑
+
+            }
+            else {
+                this.$notify.error({ title: '错误', message: '服务请求失败！' });
+            }
+        },
         nonrevflg1Change(){
             if (this.model.liaall.limmod.limpts.nonrevflg1 == '1'){
                 this.model.liaall.limmod.limpts.pfcod1 = "";

src/views/Public/Setpan.vue

@@ -1026,7 +1026,7 @@
     </c-row>
 </template>
 <script>
-import Event from "~/model/Ditopn/Event";
+// import Event from "~/model/Ditopn/Event";
 import CommonProcess from "~/mixin/CommonProcess";
 import SetpanDialog from "./SetpanDialog.vue";
 import Api from "~/service/Api"
@@ -1075,7 +1075,6 @@ export default {
         };
     },
     methods: {
-        ...Event,
         //第一个表格
         addRow() {
             let newRow = { ...dialog };
@@ -1161,7 +1160,17 @@ export default {
         },
         onSetgllDetget(){
 
+        },
+        async onSetmodDet() {
+            let rtnmsg = await this.executeRule("setmod.det")
+            if (rtnmsg.respCode == SUCCESS) {
+                //TODO 处理数据逻辑
+
             }
+            else {
+                this.$notify.error({ title: '错误', message: '服务请求失败！' });
+            }
+        },
     },
     created: function () {},
 };

webpack.config.js

@@ -37,6 +37,10 @@ module.exports = (options = {}) => ({
           limit: 10000
         }
       }]
+    },
+    {
+      test: /\.pdf$/,
+      loader: 'file-loader?mimetype=application/pdf&name=[name].pdf'
     }
     ]
   },