devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

发票自动识别功能前端开发(多表单动态生成)_发票验证开发

作者：weixin_40725706 | 2024-03-23 21:46:48

赞

踩

发票验证开发

一.先上效果图（全部代码见文章尾部）

8844a28034cc43abbf8821b3530106d5.jpeg

二.整体思路 

上面部分是v-for遍历生成走马灯的item标签（el-carousel-item），el-form放在每个标签里面去动态生成。

底部是自己写的一个滚动块，滚动块index和上面走马灯item的index下标实时保持对应。

应用流程/业务逻辑如下：（ocr模块支持图片和多张发票的pdf文件扫描上传）

        新增：

       点击底部滑块+号选择图片/pdf上传  -> 读取后端返回的数组对象，遍历并添加到el-carousel-item里面，移动滑块index到最新（上面的图片如果是照片就回显，如果是pdf文件，就显示一个默认logo,点击图片/pdf都打开新页面显示出来）  -> 编辑好信息后点击确定 -> 验证是否有重复，有重复阻止提交,并提示出重复的发票。

        编辑:

        编辑我这里业务相对简单，编辑的时候回显表单数据，隐藏底部滑块（意味着+号的新增也去掉了），发票号码，代码不可编辑，只可以对部分基础数据进行编辑。

 三.入参

 oriForm:表单数据，接收为数组，el-form根据这个值生成多组form表单

opeType：是新增还是编辑  参数为add/edit

  1. props: {
  2.     oriForm: {
  3.       type: Array,
  4.       default: [],
  5.     },
  6.     opeType: {
  7.       type: String,
  8.       default: "",
  9.     },
  10.   },

四.关键难点/坑点代码 

  1. <el-form
  2.      :ref="'dataForm' + mainIndex"        这里ref动态赋予
  3. >
  1. <el-upload
  2.     :ref="'elUpload' + mainIndex"    上传文件的ref动态赋予
  3. >
  1. this.$set(this.model[active], "statementNo", this.settlementNo);    //form表单给值得时候用this.$set
  2.  
  3. this.$forceUpdate(); //有时候页面无法刷新，用这个方法

五.整体代码

  1. <template>
  2.   <div
  3.     class="invoice-form"
  4.     v-loading="pageLoading"
  5.     element-loading-text="发票识别中..."
  6.   >
  7.     <el-carousel
  8.       indicator-position="none"
  9.       :autoplay="false"
  10.       ref="elCarousel"
  11.       :loop="false"
  12.       height="490px"
  13.       @change="changeCarousel"
  14.     >
  15.       <el-carousel-item
  16.         :name="mainIndex.toString()"
  17.         v-for="(mainItem, mainIndex) in model"
  18.         :key="mainIndex"
  19.       >
  20.         <el-form
  21.           :model="mainItem"
  22.           :ref="'dataForm' + mainIndex"
  23.           :rules="formRule"
  24.         >
  25.           <div class="invoice-img middle-center">
  26.             <i
  27.               v-if="opeType != 'edit'"
  28.               class="el-icon-delete upload-delete-cl"
  29.               @click.stop="deleteImg(mainIndex)"
  30.             ></i>
  31.             <el-upload
  32.               action="/personal/ocr/invoice"
  33.               :ref="'elUpload' + mainIndex"
  34.               :disabled="opeType == 'edit'"
  35.               drag
  36.               :limit="1"
  37.               :show-file-list="false"
  38.               :before-upload="beforeUpload"
  39.               :on-exceed="onExceed"
  40.               :on-error="onError"
  41.               :on-success="
  42.                 (row, info, c) => {
  43.                   return onSuccess(row, info, c, mainIndex);
  44.                 }
  45.               "
  46.               class="el-upload-block"
  47.             >
  48.               <div class="top-img-box">
  49.                 <div
  50.                   class="full-box"
  51.                   @click.stop="openPdf(mainItem.invoiceImage)"
  52.                   v-if="mainItem.contentType == 'application/pdf'"
  53.                 >
  54.                   <div class="block-one middle-center">
  55.                     <img src="../imgs/pdf4.jpg" class="pdf-img-cl" />
  56.                   </div>
  57.  
  58.                   <div class="pdf-name-cl">{{ mainItem.fileName }}</div>
  59.                 </div>
  60.  
  61.                 <div v-else class="full-box middle-center">
  62.                   <div
  63.                     class="upload-img-box middle-center"
  64.                     v-if="mainItem.invoiceImage"
  65.                   >
  66.                     <img
  67.                       class="top-img-cl"
  68.                       :src="$baseUrl + mainItem.invoiceImage"
  69.                     />
  70.                   </div>
  71.  
  72.                   <div v-else>
  73.                     <i class="el-icon-upload"></i>
  74.                     <div class="el-upload__text">
  75.                       将发票文件拖到此处自动识别，或<em>点击上传</em>
  76.                     </div>
  77.                   </div>
  78.                 </div>
  79.               </div>
  80.             </el-upload>
  81.           </div>
  82.           <el-row type="flex">
  83.             <el-form-item
  84.               class="item-cl"
  85.               :label-width="labelWidth"
  86.               label="对账单编号"
  87.               prop="statementNo"
  88.             >
  89.               <select-remote
  90.                 :ref="'statementSelectRemote' + mainIndex"
  91.                 class="input-cl"
  92.                 :disabled="opeType == 'edit'"
  93.                 keyName="settlementNo"
  94.                 labelName="settlementNo"
  95.                 size="small"
  96.                 valueName="settlementNo"
  97.                 remoteUrl="/personal/credent/reconciliation/list"
  98.                 @change="(row) => changeStatement(row, mainIndex)"
  99.                 placeholder="支持对账单编号模糊查询"
  100.                 queryField="settlementNo"
  101.                 :pagination="true"
  102.                 :resultLine="['data', 'list']"
  103.               ></select-remote>
  104.             </el-form-item>
  105.             <el-form-item
  106.               class="item-cl"
  107.               :label-width="labelWidth"
  108.               label="发票号码"
  109.               prop="invoiceNo"
  110.             >
  111.               <el-input
  112.                 clearable
  113.                 :disabled="opeType == 'edit'"
  114.                 placeholder="请输入发票号码"
  115.                 class="input-cl"
  116.                 size="small"
  117.                 v-model.trim="mainItem.invoiceNo"
  118.               />
  119.             </el-form-item>
  120.           </el-row>
  121.           <el-row type="flex">
  122.             <el-form-item
  123.               class="item-cl"
  124.               :label-width="labelWidth"
  125.               label="发票代码"
  126.               prop="invoiceCode"
  127.             >
  128.               <el-input
  129.                 clearable
  130.                 :disabled="opeType == 'edit'"
  131.                 placeholder="请输入发票代码"
  132.                 class="input-cl"
  133.                 size="small"
  134.                 v-model.trim="mainItem.invoiceCode"
  135.               />
  136.             </el-form-item>
  137.             <el-form-item
  138.               class="item-cl"
  139.               :label-width="labelWidth"
  140.               label="开票日期"
  141.               prop="billingShow"
  142.             >
  143.               <el-date-picker
  144.                 :unlink-panels="true"
  145.                 size="small"
  146.                 v-model.trim="mainItem.billingShow"
  147.                 type="datetime"
  148.                 value-format="yyyy-MM-dd HH:mm:ss"
  149.                 placeholder="请选择开票日期"
  150.                 class="input-cl"
  151.                 :clearable="false"
  152.               >
  153.               </el-date-picker>
  154.             </el-form-item>
  155.           </el-row>
  156.  
  157.           <el-row type="flex">
  158.             <el-form-item
  159.               class="item-cl"
  160.               :label-width="labelWidth"
  161.               label="合计金额"
  162.               prop="totalAmt"
  163.             >
  164.               <el-input-number
  165.                 size="small"
  166.                 class="input-cl"
  167.                 v-model="mainItem.totalAmt"
  168.                 controls-position="right"
  169.                 :precision="2"
  170.                 :min="0"
  171.               ></el-input-number>
  172.             </el-form-item>
  173.             <el-form-item
  174.               class="item-cl"
  175.               :label-width="labelWidth"
  176.               label="票面金额"
  177.               prop="invoiceAmt"
  178.             >
  179.               <el-input-number
  180.                 size="small"
  181.                 class="input-cl"
  182.                 v-model="mainItem.invoiceAmt"
  183.                 controls-position="right"
  184.                 :precision="2"
  185.                 :min="0"
  186.               ></el-input-number>
  187.             </el-form-item>
  188.           </el-row>
  189.           <el-row type="flex">
  190.             <el-form-item
  191.               class="item-cl"
  192.               :label-width="labelWidth"
  193.               label="税额"
  194.               prop="taxAmt"
  195.             >
  196.               <el-input-number
  197.                 size="small"
  198.                 class="input-cl"
  199.                 v-model="mainItem.taxAmt"
  200.                 controls-position="right"
  201.                 :min="0"
  202.                 :precision="2"
  203.               ></el-input-number>
  204.             </el-form-item>
  205.           </el-row>
  206.         </el-form>
  207.       </el-carousel-item>
  208.     </el-carousel>
  209.     <!-- 底部滚动模块 -->
  210.     <div class="img-scoll middle-center" v-if="opeType != 'edit'">
  211.       <div class="left-point middle-center">
  212.         <i class="el-icon-arrow-left arr-cl" @click="moveLeft"></i>
  213.       </div>
  214.       <div class="middle-block">
  215.         <div
  216.           v-for="(mainItem, mainIndex) in model"
  217.           :class="{
  218.             'img-block-one': true,
  219.             'middle-center': true,
  220.             'active-class': carouselIndex == mainIndex,
  221.           }"
  222.           :key="mainIndex"
  223.           @click="clickImg(mainIndex)"
  224.         >
  225.           <div class="for-center">
  226.             <div
  227.               v-if="mainItem.contentType == 'application/pdf'"
  228.               class="bottom-img-box middle-center"
  229.             >
  230.               <img style="width: 70%" src="../imgs/pdf4.jpg" />
  231.             </div>
  232.             <div v-else class="bottom-img-box middle-center">
  233.               <img
  234.                 style="width: 100%"
  235.                 v-if="mainItem.invoiceImage"
  236.                 :src="$baseUrl + mainItem.invoiceImage"
  237.               />
  238.               <el-empty
  239.                 v-else
  240.                 :image-size="50"
  241.                 description="描述文字"
  242.               ></el-empty>
  243.             </div>
  244.           </div>
  245.         </div>
  246.         <div class="img-block-one middle-center" @click="addNewInvoice">
  247.           <div class="for-center middle-center">
  248.             <i class="el-icon-plus add-invoice"></i>
  249.           </div>
  250.         </div>
  251.       </div>
  252.       <div class="right-point middle-center" @click="moveRight">
  253.         <i class="el-icon-arrow-right arr-cl"> </i>
  254.       </div>
  255.     </div>
  256.   </div>
  257. </template>
  258.     <script>
  259. import { getInvoiceFormRules } from "../configFiles/invoiceFormRules.js";
  260. import selectRemote from "@/components/select/selectRemote.vue";
  261. import { changeTime, changeDate } from "@/utils/public.js";
  262. import {
  263.   addInvoice,
  264.   fileDetail,
  265.   updateInvoice,
  266.   getSelectRegistList,
  267. } from "@/api/personalApi.js";
  268. export default {
  269.   components: { selectRemote },
  270.   props: {
  271.     oriForm: {
  272.       type: Array,
  273.       default: [],
  274.     },
  275.     opeType: {
  276.       type: String,
  277.       default: "",
  278.     },
  279.   },
  280.   watch: {
  281.     oriForm: {
  282.       handler(val) {
  283.         this.model = JSON.parse(JSON.stringify(val));
  284.         console.log(this.model);
  285.       },
  286.       immediate: true,
  287.     },
  288.   },
  289.   created() {
  290.     console.log("传入的数据为:", this.model);
  291.     this.formRule = getInvoiceFormRules(); //规则加载
  292.     this.$nextTick(() => {
  293.       this.oriData(); //针对1个需要懒加载的select框进行处理
  294.     });
  295.     if (this.opeType == "edit") {
  296.       this.loadFileInfo(); //加载文件信息
  297.       this.formatTime();
  298.     }
  299.   },
  300.   data() {
  301.     return {
  302.       labelWidth: "100px",
  303.       model: [],
  304.       pageLoading: false,
  305.       carouselIndex: 0, //幻灯片到哪一张了
  306.       settlementNo: "", //一组发票信息只有一个对账单编号,记录编号
  307.     };
  308.   },
  309.   methods: {
  310.     oriData() {
  311.       //查询对账单数据
  312.       let _params = {
  313.         settlementNo: "",
  314.         pageNum: 1,
  315.         pageSize: 20,
  316.       };
  317.       if (this.opeType == "edit") {
  318.         _params.settlementNo = this.model[0].statementNo; //对账单编号始终保持一致，任意取一个
  319.         this.settlementNo = this.model[0].statementNo;
  320.       }
  321.  
  322.       getSelectRegistList(_params).then((res) => {
  323.         this.model.forEach((item, mainIndex) => {
  324.           let _aimRef = `statementSelectRemote${mainIndex}`;
  325.           if (this.opeType == "edit") {
  326.             //编辑的情况
  327.             this.$refs[_aimRef][0].loadFirstData(res, _params.settlementNo);
  328.           } else {
  329.             this.$refs[_aimRef][0].loadFirstData(res);
  330.           }
  331.         });
  332.       });
  333.     },
  334.  
  335.     changeCarousel(active, ori) {
  336.       this.carouselIndex = active;
  337.  
  338.       //重新赋值一次最新的对账单编号
  339.  
  340.       this.$nextTick(() => {
  341.         let _aimRef = `statementSelectRemote${active}`;
  342.         this.$refs[_aimRef][0].initData(this.settlementNo);
  343.         console.log("this.settlementN", this.settlementNo);
  344.         this.$set(this.model[active], "statementNo", this.settlementNo);
  345.         this.$forceUpdate();
  346.       });
  347.     },
  348.  
  349.     formatTime() {
  350.       this.model.forEach((item, index) => {
  351.         this.$set(
  352.           this.model[index],
  353.           "billingShow",
  354.           changeDate(item.billingDate) + " " + changeTime(item.billingTime)
  355.         );
  356.       });
  357.     },
  358.  
  359.     loadFileInfo() {
  360.       this.setFileInfo(this.model[0].invoiceImage);
  361.     },
  362.  
  363.     clickImg(active) {
  364.       this.$refs.elCarousel.setActiveItem(active);
  365.     },
  366.  
  367.     moveLeft() {
  368.       if (this.carouselIndex > 0) {
  369.         this.clickImg(this.carouselIndex - 1);
  370.       }
  371.     },
  372.  
  373.     addNewInvoice() {
  374.       let _judge = this.judgeForm();
  375.       if (_judge._canAdd) {
  376.         this.model.push({
  377.           billingShow: "",
  378.         });
  379.         this.$nextTick(() => {
  380.           this.$refs.elCarousel.setActiveItem(this.model.length - 1);
  381.         });
  382.       } else {
  383.         this.$message({
  384.           message: _judge._errorMsg,
  385.           type: "warning",
  386.         });
  387.       }
  388.     },
  389.  
  390.     openPdf(fileNo) {
  391.       window.open(this.$baseUrl + fileNo, "_blank");
  392.     },
  393.  
  394.     confirm() {
  395.       let _judge = this.confirmJudgeForm();
  396.       if (_judge._canAdd) {
  397.         console.log("即将提交的数为:", this.model);
  398.         //对时间做一下处理
  399.         this.dealTime();
  400.         if (this.opeType == "edit") {
  401.           updateInvoice(this.model[0]).then((res) => {
  402.             if (res.code == 200) {
  403.               this.goSuccess("更新成功!");
  404.             } else {
  405.               this.goError("更新失败");
  406.             }
  407.           });
  408.         } else {
  409.           addInvoice(this.model).then((res) => {
  410.             if (res.code == 200) {
  411.               this.goSuccess("新增成功!");
  412.             } else {
  413.               this.goError("新增失败");
  414.             }
  415.           });
  416.         }
  417.       } else {
  418.         this.$message({
  419.           message: _judge._errorMsg,
  420.           type: "warning",
  421.         });
  422.       }
  423.     },
  424.  
  425.     dealTime() {
  426.       this.model.forEach((item) => {
  427.         item.billingDate = item.billingShow.split(" ")[0].replaceAll("-", "");
  428.         item.billingTime = item.billingShow.split(" ")[1].replaceAll(":", "");
  429.         // delete item.billingShow;
  430.       });
  431.     },
  432.  
  433.     goSuccess(msg) {
  434.       this.$emit("btnConfirm");
  435.       this.$message({
  436.         message: msg,
  437.         type: "success",
  438.       });
  439.     },
  440.  
  441.     goError(msg) {
  442.       this.$message({
  443.         message: msg,
  444.         type: "error",
  445.       });
  446.     },
  447.  
  448.     confirmJudgeForm() {
  449.       let fiJudge = this.judgeForm();
  450.       if (!fiJudge._canAdd) {
  451.         return fiJudge;
  452.       }
  453.  
  454.       //继续对重复数据的校验
  455.       let fKey,
  456.         sKey,
  457.         countArr = [],
  458.         _canAdd = true,
  459.         _errorMsg = "";
  460.       this.model.forEach((item, index) => {
  461.         countArr[index] = 0;
  462.       });
  463.       this.model.forEach((fItem, fIndex) => {
  464.         fKey = fItem.invoiceNo + "-" + fItem.invoiceCode;
  465.         this.model.forEach((sItem, sIndex) => {
  466.           sKey = sItem.invoiceNo + "-" + sItem.invoiceCode;
  467.           if (fKey == sKey) {
  468.             countArr[fIndex]++;
  469.           }
  470.         });
  471.       });
  472.  
  473.       let _model = this.model,
  474.         reArr = [],
  475.         _msg = "";
  476.       countArr.forEach((item, index) => {
  477.         if (item > 1) {
  478.           _canAdd = false;
  479.           _msg =
  480.             "发票号码:" +
  481.             _model[index].invoiceNo +
  482.             "," +
  483.             "发票代码:" +
  484.             _model[index].invoiceCode +
  485.             "数据存在重复;" +
  486.             " ";
  487.           reArr.push(_msg);
  488.         }
  489.       });
  490.       reArr = new Set(reArr);
  491.       reArr = Array.from(reArr);
  492.       _errorMsg = reArr.join("");
  493.       return {
  494.         _canAdd,
  495.         _errorMsg,
  496.       };
  497.     },
  498.  
  499.     judgeForm() {
  500.       let _canAdd = true,
  501.         _errorMsg = "存在未填写数据";
  502.  
  503.       this.model.forEach((item, index) => {
  504.         let _aim = `dataForm${index}`;
  505.         this.$refs[_aim][0].validate((valid) => {
  506.           if (!valid) {
  507.             _canAdd = false;
  508.             return false;
  509.           }
  510.         });
  511.  
  512.         //同时检查一下照片的invoiceImage是否存在
  513.         if (!item.invoiceImage) {
  514.           _canAdd = false;
  515.           _errorMsg = "存在发票信息未上传";
  516.         }
  517.       });
  518.  
  519.       return {
  520.         _canAdd,
  521.         _errorMsg,
  522.       };
  523.     },
  524.  
  525.     moveRight() {
  526.       if (this.carouselIndex < this.model.length - 1) {
  527.         this.clickImg(this.carouselIndex + 1);
  528.       }
  529.     },
  530.  
  531.     beforeUpload(file) {
  532.       console.log("file文件为:", file);
  533.       if (
  534.         file.type == "image/jpeg" ||
  535.         file.type == "image/png" ||
  536.         file.type == "application/pdf"
  537.       ) {
  538.         this.pageLoading = true;
  539.         return true;
  540.       } else {
  541.         this.$message({
  542.           message: "仅支持jpg，png,pdf格式文件",
  543.           type: "error",
  544.         });
  545.         return false;
  546.       }
  547.     },
  548.  
  549.     changeStatement(row, mainIndex) {
  550.       this.settlementNo = row.value;
  551.       this.model.forEach((item, index) => {
  552.         this.$set(this.model[index], "statementNo", row.value);
  553.       });
  554.     },
  555.  
  556.     deleteImg(mainIndex) {
  557.       if (this.model.length == 1) {
  558.         this.$message.warning("至少保留一张发票");
  559.         return;
  560.       }
  561.       this.$confirm(`确认删除当前发票?`, "提示", {
  562.         confirmButtonText: "确定",
  563.         cancelButtonText: "取消",
  564.         type: "warning",
  565.       }).then(() => {
  566.         this.model.splice(mainIndex, 1);
  567.  
  568.         this.$nextTick(() => {
  569.           this.$refs.elCarousel.setActiveItem(mainIndex - 1);
  570.         });
  571.         this.$forceUpdate();
  572.       });
  573.     },
  574.  
  575.     onExceed() {
  576.       this.$message.error("请先删除当前文件再进行上传");
  577.     },
  578.  
  579.     onError() {
  580.       this.pageLoading = false;
  581.     },
  582.  
  583.     onSuccess(row, info, c, mainIndex) {
  584.       console.log("发票返回信息为:", info);
  585.       let _result = info.response;
  586.       this.pageLoading = false;
  587.       if (_result.code != 200) {
  588.         this.$message({
  589.           message: _result.msg,
  590.           type: "error",
  591.         });
  592.         let _aimRef = `elUpload${mainIndex}`;
  593.         this.$refs[_aimRef][0].clearFiles();
  594.         return;
  595.       }
  596.  
  597.       _result.data.forEach((item, reIndex) => {
  598.         this.changeOriForm(this.model.length - 1, item, reIndex);
  599.       });
  600.  
  601.       this.$forceUpdate();
  602.  
  603.       //再新增一个操作，将光标移动到最后一个位置
  604.       this.$nextTick(() => {
  605.         this.$refs.elCarousel.setActiveItem(this.model.length - 1);
  606.       });
  607.  
  608.       this.$message.success("发票识别成功");
  609.     },
  610.  
  611.     changeOriForm(_index, item, reIndex) {
  612.       let _taxAmt = item.totalTax ? item.totalTax : "";
  613.       let _billingShow = item.billingDate
  614.         ? this.changeTimeFormat(item.billingDate, item)
  615.         : "";
  616.       let _invoiceAmt = item.amountTax ? item.amountTax : "";
  617.       let _invoiceImage = item.fileNo ? item.fileNo : "";
  618.       let _invoiceCode = item.invoiceCode ? item.invoiceCode : "";
  619.       let _invoiceNo = item.invoiceNumber ? item.invoiceNumber : "";
  620.       let _totalAmt = item.totalAmount ? item.totalAmount : "";
  621.       let _billingTime = ""; //开票时间是没有的
  622.  
  623.       if (reIndex == 0) {
  624.         //第一张发票覆盖，后面的push
  625.         this.$set(this.model[_index], "taxAmt", _taxAmt); //税额
  626.         this.$set(this.model[_index], "billingShow", _billingShow); //开票日期
  627.         this.$set(this.model[_index], "invoiceAmt", _invoiceAmt); //票面金额
  628.         this.$set(this.model[_index], "invoiceImage", _invoiceImage); //回显文件编号
  629.         this.$set(this.model[_index], "invoiceCode", _invoiceCode); //发票代码
  630.         this.$set(this.model[_index], "invoiceNo", _invoiceNo); //发票号码
  631.         this.$set(this.model[_index], "totalAmt", _totalAmt); //合计金额
  632.         console.log(this.model);
  633.       } else {
  634.         let _obj = {
  635.           taxAmt: _taxAmt,
  636.           billingShow: _billingShow,
  637.           invoiceAmt: _invoiceAmt,
  638.           invoiceImage: _invoiceImage,
  639.           invoiceCode: _invoiceCode,
  640.           invoiceNo: _invoiceNo,
  641.           totalAmt: _totalAmt,
  642.         };
  643.         this.model.push(_obj);
  644.       }
  645.  
  646.       this.setFileInfo(_invoiceImage); //同时将文件的类型合名称设置进去
  647.     },
  648.  
  649.     setFileInfo(_invoiceNo) {
  650.       let _index = this.model.length - 1;
  651.       fileDetail({ fileNo: _invoiceNo }).then((res) => {
  652.         this.$set(this.model[_index], "fileName", res.data.fileName);
  653.         this.$set(this.model[_index], "contentType", res.data.contentType);
  654.       });
  655.     },
  656.  
  657.     changeTimeFormat(time, mainItem) {
  658.       if (mainItem.billingTime) {
  659.         return time + " " + item.billingTime;
  660.       } else {
  661.         return time + " " + "00:00:00";
  662.       }
  663.     },
  664.   },
  665. };
  666. </script>
  667. <style lang="scss" scoped>
  668. ::-webkit-scrollbar {
  669.   width: 8px;
  670.   height: 8px;
  671. }
  672. /* 滚动槽 */
  673. ::-webkit-scrollbar-track {
  674.   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  675.   border-radius: 10px;
  676. }
  677. /* 滚动条滑块 */
  678. ::-webkit-scrollbar-thumb {
  679.   border-radius: 10px;
  680.   background: rgba(0, 0, 0, 0.1);
  681.   -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  682. }
  683. .invoice-form {
  684.   .full-box {
  685.     width: 100%;
  686.     height: 100%;
  687.   }
  688.   .invoice-img {
  689.     width: 100%;
  690.  
  691.     .top-img-box {
  692.       width: 100%;
  693.       height: 100%;
  694.  
  695.       .block-one {
  696.         width: 100%;
  697.         margin-top: 20px;
  698.  
  699.         .pdf-img-cl {
  700.           width: 160px;
  701.           height: 160px;
  702.         }
  703.       }
  704.  
  705.       .pdf-name-cl {
  706.         width: 100%;
  707.       }
  708.     }
  709.  
  710.     .upload-img-box {
  711.       width: 100%;
  712.       height: 100%;
  713.       overflow: auto;
  714.  
  715.       .top-img-cl {
  716.         width: 100%;
  717.       }
  718.     }
  719.  
  720.     .upload-delete-cl {
  721.       position: absolute;
  722.       right: 12%;
  723.       cursor: pointer;
  724.       top: 0px;
  725.       font-size: 18px;
  726.     }
  727.  
  728.     .el-upload-block {
  729.       margin-bottom: 15px;
  730.       width: 70%;
  731.       height: 230px;
  732.  
  733.       /deep/.el-upload {
  734.         width: 100%;
  735.  
  736.         .el-upload-dragger {
  737.           width: 100%;
  738.           display: flex;
  739.           align-items: center;
  740.           justify-content: center;
  741.           height: 220px;
  742.         }
  743.  
  744.         .el-upload-dragger .el-icon-upload {
  745.           margin: auto;
  746.           line-height: 80px;
  747.         }
  748.       }
  749.     }
  750.   }
  751.  
  752.   .img-scoll {
  753.     width: 100%;
  754.     height: 98px;
  755.     display: flex;
  756.     margin-top: 20px;
  757.  
  758.     .left-point {
  759.       width: 25px;
  760.       height: 100%;
  761.       cursor: pointer;
  762.  
  763.       &:hover {
  764.         background: #efefef;
  765.       }
  766.     }
  767.  
  768.     .middle-block {
  769.       width: calc(100% - 72px);
  770.       padding: 0px 6px;
  771.       white-space: nowrap;
  772.       overflow: auto;
  773.       display: flex;
  774.  
  775.       /deep/.el-empty {
  776.         padding: 0px;
  777.         .el-empty__description {
  778.           display: none;
  779.         }
  780.       }
  781.  
  782.       .img-block-one {
  783.         width: 80px;
  784.         display: inline-block;
  785.         height: 80px;
  786.         border: 1px solid lightgray;
  787.         margin-right: 10px;
  788.         cursor: pointer;
  789.  
  790.         .add-invoice {
  791.           font-size: 25px;
  792.         }
  793.  
  794.         .for-center {
  795.           width: 100%;
  796.           height: 100%;
  797.  
  798.           .bottom-img-box {
  799.             width: 100%;
  800.             height: 100%;
  801.           }
  802.         }
  803.       }
  804.  
  805.       .active-class {
  806.         border: 2px solid #3388fb;
  807.         width: 79px;
  808.         height: 79px;
  809.       }
  810.     }
  811.  
  812.     .right-point {
  813.       width: 25px;
  814.       height: 100%;
  815.       cursor: pointer;
  816.  
  817.       &:hover {
  818.         background: #efefef;
  819.       }
  820.     }
  821.  
  822.     .arr-cl {
  823.       font-size: 30px;
  824.       font-weight: bold;
  825.       color: lightgray;
  826.       cursor: pointer;
  827.     }
  828.   }
  829.  
  830.   .item-cl {
  831.     width: 50%;
  832.  
  833.     .input-cl {
  834.       width: 90%;
  835.  
  836.       /deep/.el-input {
  837.         width: 100%;
  838.       }
  839.     }
  840.   }
  841. }
  842. </style>

 select-remote组件是我封装的远程搜索下拉组件，见前面的文章

invoiceFormRules.js文件是规则文件,类似如下:

  1. export function getInvoiceFormRules() {
  2.     return {
  3.         statementNo: [{
  4.             required: true,
  5.             message: "请选择对账单编号",
  6.             trigger: "change",
  7.         }],
  8.     }
  9. }

changTime,changeDate方法比较简单

  1. export function changeDate(str) { //将yyyyMMdd转换为yyyy-MM-dd 
  2.     if (!str) return '';
  3.     str = str.substr(0, 4) +
  4.         "-" +
  5.         str.substr(4, 2) +
  6.         "-" +
  7.         str.substr(6, 2);
  8.     return str;
  9. }
  10.  
  11. export function changeTime(str) { //将hhmmss转换为hh:mm:ss
  12.     if (!str) return '';
  13.     str = str.substr(0, 2) +
  14.         ":" +
  15.         str.substr(2, 2) +
  16.         ":" +
  17.         str.substr(4, 2);
  18.     return str;
  19. }

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/297864
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号