新增银行回单上传

src/api/common/index.js

@@ -18,7 +18,7 @@ export function uploadFileApi(data) {
   })
 }
 
-// 文件上传
+// 发票上传
 export function uploadInvoiceApi(data) {
   return request({
     url: '/accounting/invoices/identify',
@@ -26,3 +26,12 @@ export function uploadInvoiceApi(data) {
     data: data
   })
 }
+
+// 银行回单上传
+export function uploadBankSlipApi(data) {
+  return request({
+    url: '/archives/bank-slip/bankReceipt/identify',
+    method: 'post',
+    data: data
+  })
+}

src/components/UploadBankSlip/index.vue

@@ -0,0 +1,218 @@
+<!--  -->
+<template>
+  <div class="out">
+    <el-upload
+      :class="{ hide: hideUpload }"
+      ref="imgListRef"
+      :limit="1"
+      :file-list="fileList"
+      :on-change="onUploadChange"
+      :before-upload="beforeFileUpload"
+      action="#"
+      :accept="imgType"
+      list-type="picture-card"
+      :auto-upload="false"
+    >
+      <i class="el-icon-plus"></i>
+      <div
+        slot="file"
+        slot-scope="{ file }"
+        style="position: relative; height: 100%"
+      >
+        <!-- pdf -->
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-if="!isPdf"
+          :src="file.url"
+          alt
+        />
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-else
+          src="~@/assets/images/pdf.png"
+          alt
+        />
+        <div v-if="isPdf" class="pdf-name">{{ pdfName }}</div>
+
+        <!-- ofd -->
+        <img
+          class="el-upload-list__item-thumbnail"
+          v-if="!isOfd"
+          :src="file.url"
+          alt
+        />
+        <img class="el-upload-list__item-thumbnail" v-else alt />
+        <div v-if="isOfd" class="pdf-name">{{ ofdName }}</div>
+        <span class="el-upload-list__item-actions">
+          <span
+            class="el-upload-list__item-preview"
+            @click="handlePictureCardPreview(file)"
+          >
+            <i class="el-icon-zoom-in"></i>
+          </span>
+          <span
+            class="el-upload-list__item-delete"
+            @click="handleRemove(file, fileList)"
+          >
+            <i class="el-icon-delete"></i>
+          </span>
+        </span>
+      </div>
+    </el-upload>
+    <div class="title">支持.jpeg, .jpg, .png格式上传</div>
+    <div class="inside">
+      <el-button type="primary" @click="handleScan" size="small" plain
+        >银行回单识别</el-button
+      >
+    </div>
+    <el-image-viewer
+      v-if="dialogVisible"
+      :zIndex="9999"
+      :on-close="closeImgViewer"
+      :url-list="imgList"
+    />
+    <!-- 文件在线预览 -->
+    <FilePreview
+      :previewFile="previewFile"
+      :fileUrl="fileUrl"
+      @update="previewFile = false"
+    />
+  </div>
+</template>
+
+<script>
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import { uploadBankSlipApi } from "@/api/common";
+export default {
+  name: "",
+  props: {
+    files: Array,
+  },
+  watch: {
+    files: {
+      handler(list) {
+        this.fileList = list;
+        if (list.length >= 1) {
+          this.hideUpload = true;
+        } else {
+          this.hideUpload = false;
+        }
+      },
+    },
+    deep: true,
+  },
+  data() {
+    return {
+      hideUpload: false,
+      imgType: ".jpeg, .jpg, .png",
+      fileList: [],
+      dialogVisible: false,
+      isPdf: false,
+      isOfd: false,
+      pdfName: null,
+      ofdName: null,
+      imgList: null,
+      fileUrl: null,
+      previewFile: false,
+      invoiceForm: {},
+    };
+  },
+  components: {
+    ElImageViewer,
+    FilePreview: () => import("@/components/FilePreview"),
+  },
+  computed: {},
+  methods: {
+    // 删除照片时的回调方法
+    handleRemove(file, files) {
+      this.fileList = [];
+      this.$emit("onConfirm", this.fileList);
+      return false;
+    },
+    // 上传照片时的回调方法
+    onUploadChange(file, fileList) {
+      this.beforeFileUpload(file, fileList);
+    },
+    beforeFileUpload(file, fileList) {
+      console.log(file);
+      //选择图片后做图片格式限制（手动上传图片时，before-upload钩子无效，使用此方法替代）
+      const isImage =
+        file.raw.type == "image/png" ||
+        file.raw.type == "image/jpg" ||
+        file.raw.type == "image/jpeg" ||
+        file.raw.type == "application/pdf" ||
+        file.raw.type == "application/ofd";
+      // const isLt5M = file.size < 1024 * 1024 * 5;
+      if (!isImage) {
+        this.$message.warning("上传只能是png,jpg,jpeg格式!");
+      }
+      if (file.raw.type == "application/pdf") {
+        this.isPdf = true;
+        this.pdfName = file.raw.name;
+      } else {
+        this.isPdf = false;
+      }
+      if (file.raw.type == "application/ofd") {
+        this.isOfd = true;
+        this.pdfName = file.raw.name;
+      } else {
+        this.isOfd = false;
+      }
+      let FormDatas = new FormData();
+      FormDatas.append("multipartFile", file.raw);
+      this.$modal.loading("正在上传，请稍候...");
+      uploadBankSlipApi(FormDatas).then((res) => {
+        this.invoiceForm = res.data;
+        this.fileList.push({ name: file.name, url: res.data.fileUrl }); //成功过后手动将文件添加到展示列表里
+        this.$emit("onConfirm", this.fileList);
+        this.$modal.closeLoading();
+      });
+    },
+    closeImgViewer() {
+      this.dialogVisible = false;
+    },
+    // 图片预览
+    handlePictureCardPreview(file) {
+      if (file.name.indexOf(".pdf") > -1) {
+        this.fileUrl = this.fileList[0].url;
+        this.previewFile = true;
+      } else {
+        this.imgList = [file.url];
+        this.dialogVisible = true;
+      }
+    },
+    // 发票识别
+    handleScan() {
+      if (this.fileList.length) {
+        this.$emit("onScan", this.invoiceForm);
+      } else {
+        this.$fm("请先上银行回单!");
+      }
+    },
+    // // 发票验真
+    // handleCheck() {
+    //   if (this.fileList.length) {
+    //     this.$emit("onCheck");
+    //   } else {
+    //     this.$fm("请先上传发票!");
+    //   }
+    // },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/styles/form/index.scss";
+.pdf-name {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  top: 115px;
+  line-height: 15px;
+  font-size: smaller;
+  bottom: 0;
+}
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+  // height: auto !important;
+  object-fit: cover;
+}
+</style>

src/views/accounting/bankSlip/index.vue

@@ -284,7 +284,7 @@
       width="1000px"
       append-to-body
     >
-      <el-upload
+      <!-- <el-upload
         class="upload-demo"
         drag
         :limit="1"
@@ -297,14 +297,18 @@
       >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      </el-upload>
+      </el-upload> -->
-      <el-form
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
-        ref="form"
+        <el-row>
-        :model="form"
+          <el-col :span="8">
-        :rules="rules"
+            <UploadBankSlip
-        label-width="110px"
+              :files="fileList"
-        style="margin-top: 20px"
+              @onConfirm="handleImg"
-      >
+              @onScan="handleScan"
+            />
+          </el-col>
+        </el-row>
+        <el-divider>银行回单信息</el-divider>
         <el-row>
           <el-col :span="8">
             <el-form-item label="交易日期" prop="tradTime">
@@ -612,7 +616,7 @@ import { listUser } from "@/api/system/user";
 
 export default {
   name: "BankSlip",
-  components: {},
+  components: { UploadBankSlip: () => import("@/components/UploadBankSlip") },
   data() {
     return {
       // 遮罩层
@@ -701,6 +705,22 @@ export default {
     this.getUserList();
   },
   methods: {
+    // 上传文件事件
+    handleImg(list) {
+      this.fileList = list;
+      this.reset();
+    },
+    handleScan(form) {
+      console.log(form);
+      this.form = form;
+      this.form.adverseCompany = form.adverseCompany.slice(9, -2);
+      this.form.bank = form.bank.slice(9, -2);
+      this.form.digest = form.digest.slice(9, -2);
+      this.form.myCompany = form.myCompany.slice(9, -2);
+      this.form.purpose = form.purpose.slice(9, -2);
+      this.form.receiptNum = form.receiptNum.slice(9, -2);
+      this.form.serialNum = form.serialNum.slice(9, -2);
+    },
     /** 查询列表 */
     getList() {
       this.loading = true;
@@ -822,6 +842,7 @@ export default {
       this.reset();
       this.open = true;
       this.title = "添加银行回单";
+      this.fileList = [];
     },
     // 上传成功的函数
     handleSuccess(res) {