Commit 6cd7061e by 潘际乾

单据识别替换为图片

parent f8aa68f8
......@@ -17,7 +17,14 @@
<div class="invoices-recognition">
<div class="invoices-area">
<div class="file-name">{{ fileName }}</div>
<iframe class="pdf-file" :src="fileUrl" type="application/pdf" />
<!-- <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
......@@ -28,25 +35,35 @@
<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>
<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>
<el-col :span="24">
<el-form-item label="发票日期">
<c-input type="textarea" v-model="invoicesData.date"></c-input>
<c-input type="textarea" v-model="invoicesData.date"></c-input>
</el-form-item>
</el-col>
</el-col>
<el-col :span="24">
<el-form-item label="发票金额">
<c-input type="textarea" v-model="invoicesData.amount"></c-input>
<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>
<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>
......@@ -65,7 +82,8 @@ export default {
show: false,
fileName: "KZ3500220597AA-001.pdf",
// fileUrl: "/invoice.pdf",
fileUrl: "assets/invoice.pdf",
fileUrl: require("~/assets/KZ3500220597AA-001.pdf.jpg"),
imgContainerHeight: 0,
invoicesTypeOptions: [
{ label: "商业发票", value: "SYFP" },
{ label: "个人发票", value: "GRFP" },
......@@ -78,20 +96,34 @@ export default {
type: "SYFP",
date: "5 DEC 2021",
amount: "USD 223000.00",
original: 1
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.$emit("confirm");
this.close();
},
close() {
this.show = false
}
}
}
this.show = false;
},
},
};
</script>
<style>
......@@ -101,12 +133,16 @@ export default {
flex-direction: column;
margin-bottom: unset;
}
.ocr-invoices-dialog .el-dialog__header, .ocr-invoices-dialog .el-dialog__body {
.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>
......@@ -124,14 +160,17 @@ export default {
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;
......@@ -144,4 +183,4 @@ export default {
.invoices-area .pdf-file {
flex: 1;
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment