From a2f3faa28f013b1b2a8057dfab3a7770b224f016 Mon Sep 17 00:00:00 2001
From: wangwei <1610949092@qq.com>
Date: Fri, 14 Apr 2023 11:26:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=A5=A8=E9=A1=B5=E9=9D=A2=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/inout/DialogInvoice.vue | 219 ++++++++++++++++--------------
 1 file changed, 120 insertions(+), 99 deletions(-)

diff --git a/src/views/inout/DialogInvoice.vue b/src/views/inout/DialogInvoice.vue
index 022c1d0..27bbdac 100644
--- a/src/views/inout/DialogInvoice.vue
+++ b/src/views/inout/DialogInvoice.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form :model="inputQuery" :rules="formRules" ref="dataForm">
+    <el-form :model="inputQuery" :rules="formRules" ref="dataForm" label-width="110px">
       <el-card style="margin-top: -30px">
         <el-button-group style="display: flex">
           <el-button type="primary" @click.native="submitUpload()" style="margin: 0 60px 10px auto; height: 35px"
@@ -8,114 +8,74 @@
           </el-button>
         </el-button-group>
         <el-row>
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>规格型号：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="name">
+          <el-col :span="11">
+            <el-form-item label="规格型号:" prop="code">
               <el-input v-model="inputQuery.ggxh" auto-complete="off" :disabled="true"></el-input>
             </el-form-item>
           </el-col>
 
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>物资名称：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="code">
+
+          <el-col :span="11">
+            <el-form-item label="物资名称:" prop="code">
               <el-input v-model="inputQuery.cpmctymc" auto-complete="off" :disabled="true"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
 
-        <el-row>
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>机械编码：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="name">
+        <el-row >
+          <el-col :span="11">
+            <el-form-item  label="机械编码:" prop="name">
               <el-input v-model="inputQuery.machineNo" auto-complete="off" ></el-input>
             </el-form-item>
           </el-col>
 
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>发票代码：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="code">
+
+          <el-col :span="11">
+            <el-form-item label="发票代码:" prop="code">
               <el-input v-model="inputQuery.invoiceCode" auto-complete="off" ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
         <el-row>
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>发票编码：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="name">
+
+          <el-col :span="11">
+            <el-form-item label="发票编码:"  prop="invoiceEncode">
               <el-input v-model="inputQuery.invoiceEncode" auto-complete="off" ></el-input>
             </el-form-item>
           </el-col>
 
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>发票价格：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="code">
+
+          <el-col :span="11">
+            <el-form-item label="发票价格:" prop="price">
               <el-input v-model="inputQuery.price" auto-complete="off" ></el-input>
             </el-form-item>
           </el-col>
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>备注：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="code">
-              <el-input v-model="inputQuery.remark" auto-complete="off" ></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>开票日期：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item prop="code">
+
+          <el-col :span="11">
+            <el-form-item label="开票日期:" prop="invoiceDate">
               <el-date-picker
                 v-model="inputQuery.invoiceDate"
                 type="datetime"
                 placeholder="请选择日期"
                 clearable
                 value-format="yyyy-MM-dd HH:mm:ss"
-                style="width: 90%"
+                style="width: 100%"
               >
               </el-date-picker>
             </el-form-item>
           </el-col>
-        </el-row>
 
+          <el-col :span="11">
+            <el-form-item label="备注:" prop="remark">
+              <el-input v-model="inputQuery.remark" auto-complete="off" ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
 
 
         <el-row>
-          <el-col :span="3">
-            <div class="ao-text">
-              <span>文件：</span>
-            </div>
-          </el-col>
-          <el-col :span="8">
-            <el-form-item>
+          <el-col :span="11">
+            <el-form-item label="文件:">
               <el-upload
                 :disabled="formData.auditStatus == 1"
                 class="upload-demo"
@@ -138,14 +98,21 @@
                 </el-button>
                 <div>只能上传 jpg,png,pdf,doc 文件，且不超过 10 MB</div>
               </el-upload>
-              <!--                            <el-button type="primary" size="mini" icon="search" @click="toViewCompanyCert"-->
-              <!--                                       style="text-align:right"-->
-              <!--                            >文件预览-->
-              <!--                            </el-button-->
-              <!--                            >-->
+            </el-form-item>
+          </el-col>
 
+
+          <el-col :span="11">
+            <el-form-item label="文件预览:">
+            <el-button type="success" size="mini" icon="search" v-if="this.inputQuery.licenseUrl!=null"
+                       style="text-align:right" @click="showImgViewer" >
+              文件预览
+            </el-button>
             </el-form-item>
+            <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList"/>
+
           </el-col>
+
         </el-row>
       </el-card>
     </el-form>
@@ -158,6 +125,9 @@ import draggable from "vuedraggable";
 import store from "@/store";
 import {insertCompanyCert, updateCompanyCert} from "@/api/purchase/companyCert";
 import {updateById} from '@/api/inout/orderDetailBiz'
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import { previewImage } from '@/api/purchase/supCompany'
+
 
 export default {
   name: "DialogInvoice",
@@ -175,6 +145,8 @@ export default {
   },
   data() {
     return {
+      imgList:[],
+      imgViewerVisible:false,
       BASE_URL: process.env.VUE_APP_BASE_API,
       code: "",
       formData: {
@@ -187,14 +159,23 @@ export default {
         remark:"",
         licenseUrl:""
       },
-      // formRules: {
-      //   name: [
-      //     {required: true, message: "请输入证书名称", trigger: "blur"}
-      //   ],
-      //   code: [
-      //     {required: true, message: "请输入证书编号", trigger: "blur"}
-      //   ],
-      // },
+      formRules: {
+        name: [
+          {required: true, message: "请输入机械编码", trigger: "blur"}
+        ],
+        code: [
+          {required: true, message: "请输入发票代码", trigger: "blur"}
+        ],
+        invoiceEncode: [
+          {required: true, message: "请输入发票编码", trigger: "blur"}
+        ],
+        price: [
+          {required : true, message: "请输入发票价格", trigger:"blur"}
+        ],
+        remark: [
+          {required : true, message: "请输入备注", trigger:"blur"}
+        ],
+      },
       loading: false,
       uploadUrl: "",
       fileList: [],
@@ -204,22 +185,44 @@ export default {
     };
   },
   components: {
-    draggable,
+    draggable,ElImageViewer
   },
   methods: {
     submitUpload() {
-      updateById(this.inputQuery).then((res) =>{
-          if(res.code==20000){
-            this.$message({
-              type: "success",
-              message: "修改成功！",
-            });
-            this.closeDialog();
-          }
-
-      } )
-
+      this.$refs["dataForm"].validate(valid => {
+          if (valid) {
+            if (this.$isBlank(this.inputQuery.machineNo)) {
+              this.$message.error("机械编码不能为空！");
+              return;
+            }
+            if (this.$isBlank(this.inputQuery.invoiceCode)) {
+              this.$message.error("发票代码不能为空！");
+              return;
+            }
+            if (this.$isBlank(this.inputQuery.invoiceEncode)) {
+              this.$message.error("发票编码不能为空！");
+              return;
+            }
+            if (this.$isBlank(this.inputQuery.price)) {
+              this.$message.error("发票价格不能为空！");
+              return;
+            }
+            if (this.$isBlank(this.inputQuery.remark)) {
+              this.$message.error("备注不能为空！");
+              return;
+            }
+            updateById(this.inputQuery).then((res) => {
+              if (res.code == 20000) {
+                this.$message({
+                  type: "success",
+                  message: "修改成功！",
+                });
+                this.closeDialog();
+              }
 
+            })
+          }
+      })
     },
 
     // onSubmit() {
@@ -264,6 +267,7 @@ export default {
     //
     // },
     uploadHandleRemove(file, fileList) {
+      this.inputQuery.licenseUrl=null;
       console.log(file, fileList);
     },
     uploadHandlePreview(file) {
@@ -310,11 +314,28 @@ export default {
     uploadHandleError() {
 
     },
-
-    toViewCompanyCert() {
+    showImgViewer(){
       this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
-      window.open(this.certFileUrl + this.formData.filePath);
+      this.imgList=[];
+      previewImage({imageUrl:this.inputQuery.licenseUrl,certFileUrl:this.certFileUrl}).then(response => {
+        if (response.code === 20000) {
+          this.imgList=response.data;
+        }
+        console.log(this.imgList)
+        this.imgViewerVisible = true;
+      });
+      const m = (e) => { e.preventDefault() };
+      document.body.style.overflow = 'hidden';
+      document.addEventListener("touchmove", m, false); // 禁止页面滑动
+    },
+
+    closeImgViewer(){
+      this.imgViewerVisible = false;
+      const m = (e) => { e.preventDefault() };
+      document.body.style.overflow = 'auto';
+      document.removeEventListener("touchmove", m, true);
     },
+
   },
   filters: {},
   mounted() {
@@ -337,7 +358,7 @@ export default {
       this.formData = this.inputQuery.formData;
       console.log(this.inputQuery.formData);
     }
-    if (this.formData.filePath != null) {
+    if (this.inputQuery.licenseUrl != null) {
       this.choiceFile = "更换文件";
     } else {
       this.choiceFile = "选取文件";