7.27 uploa组件代码

src/components/upload/upload.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-upload
+      :action="url"
+      list-type="picture-card"
+      :on-success="handleImageSuccess"
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+    >
+      <i class="el-icon-plus" />
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Upload',
+  props: {
+    value: {
+      type: [String, Array],
+      default: ''
+    },
+    url: {
+      type: String,
+      default: 'https://ht.9026.com/api/File'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      dialogImageUrl: '',
+      fileList: []
+    }
+  },
+  methods: {
+    emitInput() {
+      this.$emit('input', this.fileList)
+    },
+    // 查看图片
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.response.data.file
+      this.dialogVisible = true
+    },
+    // 文件上传成功
+    handleImageSuccess(res) {
+      if (res.code === 200) {
+        this.fileList.push(res.data.file)
+        this.emitInput()
+      } else {
+        this.$message.error('文件上传失败')
+      }
+    },
+    // 删除文件
+    handleRemove(file, fileList) {
+      this.fileList = fileList.map(o => {
+        return o.response.data.file
+      })
+      this.emitInput()
+    }
+  }
+}
+</script>

src/main.js

@@ -16,7 +16,9 @@ import '@/directives'
 import '@/icons' // icon
 import '@/permission' // permission control
 import TableWrapper from '@/components/TableWrapper/TableWrapper.vue'
+import Upload from '@/components/upload/upload.vue'
 Vue.component('TableWrapper', TableWrapper)
+Vue.component('Upload', Upload)
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/contracts/new_file.vue

@@ -29,7 +29,8 @@
       </div>
       <div>
         <div>
-          <el-upload
+          <Upload v-model="form.pics" />
+          <!-- <el-upload
             action="https://ht.9026.com/api/File"
             list-type="picture-card"
             :on-success="handlepics"
@@ -38,8 +39,8 @@
           </el-upload>
 
           <el-dialog :visible.sync="dialogVisible">
-            <img width="100%" :src="form.pics" />
-          </el-dialog>
+            <img width="100%" :src="form.pics">
+          </el-dialog> -->
         </div>
       </div>
       <!-- 发票附件图片 -->
@@ -56,7 +57,7 @@
           <i class="el-icon-plus" />
         </el-upload>
         <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="form.invoicePics" />
+          <img width="100%" :src="form.invoicePics">
         </el-dialog>
       </div>
       <!-- 贸易附件图片 -->
@@ -73,7 +74,7 @@
           <i class="el-icon-plus" />
         </el-upload>
         <el-dialog :visible.sync="dialogVisible">
-          <img width="100%" :src="form.tradePics" />
+          <img width="100%" :src="form.tradePics">
         </el-dialog>
       </div>
     </el-card>
@@ -83,11 +84,9 @@
       v-for="(item, index) in form.contractDrafts"
       :key="item.id"
       class="form"
-	  style="margin: 20px;border: 1px solid #c0c0c0;padding: 10px;border-radius: 10px;"
+      style="margin: 20px;border: 1px solid #c0c0c0;padding: 10px;border-radius: 10px;"
     >
 
-      
-
       <!-- 汇票名称 -->
       <el-form ref="form" :model="item" label-width="90px">
 
@@ -178,7 +177,7 @@
           />
         </el-form-item>
 
-		<!-- <el-form-item label="金额">
+        <!-- <el-form-item label="金额">
 		  <el-input
 		    v-model="item.money"
 		    class="ipwidth"
@@ -209,9 +208,9 @@
             />
             <el-option
               v-for="item in drawersName"
+              :key="item.id"
               :label="item"
               :value="item"
-              :key="item.id"
             />
           </el-select>
         </el-form-item>
@@ -220,19 +219,17 @@
           <el-select v-model="form.acceptorName" filterable placeholder="请选择承兑人">
             <el-option
               v-for="val in acceptorName"
+              :key="val"
               :label="val"
-              :value="val"
 
-              :key="val"
+              :value="val"
               @click.native="getRate(index)"
-            >
-            </el-option>
+            />
 
           </el-select>
         </el-form-item>
-		
 
-<!--              @click.native="getRate(index)"
+        <!--              @click.native="getRate(index)"
               :key="val.id"
             />
           </el-select>
@@ -263,9 +260,9 @@
           <el-col style="margin: 0 auto">
             <div class="titlesa">
               <span>附件</span>
-              <span style="color: #d05c39"
-                >*支持上传pdf、jpg/jpeg、png格式</span
-              >
+              <span
+                style="color: #d05c39"
+              >*支持上传pdf、jpg/jpeg、png格式</span>
             </div>
             <div>
               <el-upload
@@ -281,7 +278,7 @@
                   width="100%"
                   :src="form.contractDrafts[0].picUrls"
                   alt=""
-                />
+                >
               </el-dialog>
             </div>
           </el-col>
@@ -292,8 +289,7 @@
           type="primary"
           style="width: 100px; height: 50px; margin-top: 50px"
           @click="deletedraft(index)"
-          >删除汇票</el-button
-        >
+        >删除汇票</el-button>
       </div>
     </div>
     <!-- 新增汇票 -->
@@ -306,7 +302,7 @@
           type="warning"
           style="width: 180px; height: 45px; font-size: 16px"
           @click="onSubmit"
-          >确认上传
+        >确认上传
         </el-button>
       </div>
     </div>
@@ -326,106 +322,106 @@ export default {
       picsArray: [], // 合同图片上传数组
       invoicePicsArray: [], // 发票图片上传数组
       tradePicsArray: [], // 贸易图片上传数组
-      file: "",
+      file: '',
       form: {
         // 承兑人列表
         acceptorName: [],
         // 出票人列表
         drawersName: [],
-        contractNo: "",
+        contractNo: '',
         supplierId: 2,
-        name: "",
+        name: '',
         invoicePics: [],
         pics: [],
         tradePics: [],
         /* 汇票的数据 */
         contractDrafts: [
           {
-            name: "",
-            draftNo: "",
-            acceptorId: "",
-            drawersId: "",
-            money: "",
-            acceptDate: "",
-            loanLimit: "",
-            serviceRate: "",
-            serviceMoney: "",
-            interestRate: "",
-            interest: "",
+            name: '',
+            draftNo: '',
+            acceptorId: '',
+            drawersId: '',
+            money: '',
+            acceptDate: '',
+            loanLimit: '',
+            serviceRate: '',
+            serviceMoney: '',
+            interestRate: '',
+            interest: '',
             picUrls: [],
-            expectDiscountDate: "",
-            issueDate: "",
-            expireDate: "",
-            limitTime: "",
-            acceptDateTime: "",
-            expectDiscountDateTime: "",
-          },
-        ],
+            expectDiscountDate: '',
+            issueDate: '',
+            expireDate: '',
+            limitTime: '',
+            acceptDateTime: '',
+            expectDiscountDateTime: ''
+          }
+        ]
       },
       pickerOptions: {
         disabledDate(time) {
-          return time.getTime() > Date.now();
+          return time.getTime() > Date.now()
         },
         shortcuts: [
           {
-            text: "今天",
+            text: '今天',
             onClick(picker) {
-              picker.$emit("pick", new Date());
-            },
+              picker.$emit('pick', new Date())
+            }
           },
           {
-            text: "昨天",
+            text: '昨天',
             onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit("pick", date);
-            },
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24)
+              picker.$emit('pick', date)
+            }
           },
           {
-            text: "一周前",
+            text: '一周前',
             onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit("pick", date);
-            },
-          },
-        ],
-      },
-    };
+              const date = new Date()
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', date)
+            }
+          }
+        ]
+      }
+    }
   },
 
   mounted() {
     this.$request({
-      url: "/api/Contract/search",
-      method: "post",
+      url: '/api/Contract/search',
+      method: 'post',
       data: {
         pageIndex: 1,
-        pageSize: 100,
-      },
+        pageSize: 100
+      }
     }).then((res) => {
-      this.contractList = res.data.result;
-    });
+      this.contractList = res.data.result
+    })
     this.$request({
-      url: "/api/Acceptor/search",
-      method: "post",
+      url: '/api/Acceptor/search',
+      method: 'post',
       data: {
         pageIndex: 1,
-        pageSize: 100,
-      },
+        pageSize: 100
+      }
     }).then((res) => {
-      this.acceptorList = res.data.result;
-      this.acceptorName = Array.from(this.acceptorList, ({ name }) => name);
-    });
+      this.acceptorList = res.data.result
+      this.acceptorName = Array.from(this.acceptorList, ({ name }) => name)
+    })
     this.$request({
-      url: "/api/Drawer/search",
-      method: "post",
+      url: '/api/Drawer/search',
+      method: 'post',
       data: {
         pageIndex: 1,
-        pageSize: 100,
-      },
+        pageSize: 100
+      }
     }).then((res) => {
-      this.drawersList = res.data.result;
-      this.drawersName = Array.from(this.drawersList, ({ name }) => name);
+      this.drawersList = res.data.result
+      this.drawersName = Array.from(this.drawersList, ({ name }) => name)
       // 去除重复的出票人
       for (var i = 0; i < this.drawersName.length; i++) {
         // 首次遍历数组
@@ -433,94 +429,94 @@ export default {
           // 再次遍历数组
           if (this.drawersName[i] === this.drawersName[j]) {
             // 判断连个值是否相等
-            this.drawersName.splice(j, 1); // 相等删除后者
-            j--;
+            this.drawersName.splice(j, 1) // 相等删除后者
+            j--
           }
         }
       }
-    });
+    })
 
     /* 调用获取当前的时间 */
-    this.loadTime();
+    this.loadTime()
   },
   methods: {
     /* 确实上传按钮 */
     onSubmit() {
       this.$request({
-        url: "/api/Contract",
-        method: "post",
-        data: this.form,
+        url: '/api/Contract',
+        method: 'post',
+        data: this.form
       }).then((res) => {
-        console.log(res);
+        console.log(res)
         this.$message({
-          message: "上传成功",
-          type: "success",
-        });
-      });
+          message: '上传成功',
+          type: 'success'
+        })
+      })
     },
 
     /* 默认时间 */
     loadTime() {
-      let myDate = new Date();
-      let wk = parseInt(Date.now() / 100000).toFixed(0) * 100000;
-      let yy = String(myDate.getFullYear());
+      const myDate = new Date()
+      const wk = parseInt(Date.now() / 100000).toFixed(0) * 100000
+      const yy = String(myDate.getFullYear())
       // let mm = myDate.getMonth() + 1
-      let mm = String(
+      const mm = String(
         myDate.getMonth() + 1 < 10
-          ? "0" + (myDate.getMonth() + 1)
+          ? '0' + (myDate.getMonth() + 1)
           : myDate.getMonth() + 1
-      );
-      let dd = String(
-        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
-      );
-      let nowDate = yy + "-" + mm + "-" + dd;
+      )
+      const dd = String(
+        myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate()
+      )
+      const nowDate = yy + '-' + mm + '-' + dd
       this.form.contractDrafts.forEach((item) => {
-        item.acceptDate = nowDate;
-        item.issueDate = nowDate;
-        item.expireDate = nowDate;
-        item.expectDiscountDate = nowDate;
-        item.expectDiscountDateTime = wk;
-        item.acceptDateTime = wk;
-        let nTime = item.acceptDateTime - item.expectDiscountDateTime;
-        item.limitTime = Math.floor(nTime / 86400000);
-      });
+        item.acceptDate = nowDate
+        item.issueDate = nowDate
+        item.expireDate = nowDate
+        item.expectDiscountDate = nowDate
+        item.expectDiscountDateTime = wk
+        item.acceptDateTime = wk
+        const nTime = item.acceptDateTime - item.expectDiscountDateTime
+        item.limitTime = Math.floor(nTime / 86400000)
+      })
     },
 
     /* 合同附件上传 */
     handlepics(res) {
       // 解构
-      const { file } = res.data;
-      this.picsArray.push(file);
-      this.form.pics = this.picsArray;
+      const { file } = res.data
+      this.picsArray.push(file)
+      this.form.pics = this.picsArray
     },
     /* 发票附件上传 */
     handleinvoicePics(res) {
-      const { file } = res.data;
-      this.invoicePicsArray.push(file);
-      this.form.invoicePics = this.invoicePicsArray;
+      const { file } = res.data
+      this.invoicePicsArray.push(file)
+      this.form.invoicePics = this.invoicePicsArray
     },
     /* 贸易附件上传 */
     handletradePics(res) {
-      const { file } = res.data;
-      this.tradePicsArray.push(file);
-      this.form.tradePics = this.tradePicsArray;
+      const { file } = res.data
+      this.tradePicsArray.push(file)
+      this.form.tradePics = this.tradePicsArray
     },
 
     /* 上传图片到浏览器成功回调 */
     handlepicUrls(res) {
       // 解构
-      const { file } = res.data;
-      this.filesArray.push(file);
-      this.form.contractDrafts[0].picUrls = this.filesArray;
+      const { file } = res.data
+      this.filesArray.push(file)
+      this.form.contractDrafts[0].picUrls = this.filesArray
     },
     getContractNo() {
       const temporaryList = this.contractList.filter(
         (item) => item.name === this.form.name
-      );
-      if (this.form.name === "" || temporaryList === "") {
-        this.form.contractNo = "";
+      )
+      if (this.form.name === '' || temporaryList === '') {
+        this.form.contractNo = ''
       } else {
-        this.form.contractNo = temporaryList[0].contractNo;
+        this.form.contractNo = temporaryList[0].contractNo
       }
     },
 
@@ -528,43 +524,43 @@ export default {
     getRate(index) {
       const list = this.acceptorList.filter(
         (item) => item.name === this.form.acceptorName
-      );
-      this.form.contractDrafts[index].interestRate = list[index].interest;
-      this.form.contractDrafts[index].serviceRate = list[index].serviceRate;
+      )
+      this.form.contractDrafts[index].interestRate = list[index].interest
+      this.form.contractDrafts[index].serviceRate = list[index].serviceRate
     },
     addDrawer() {
       this.$router.push({
-        path: "/form/addTicketdrawer",
-      });
+        path: '/form/addTicketdrawer'
+      })
     },
     // 新增汇票
     adddraft() {
       this.form.contractDrafts.push({
-        name: "",
-        draftNo: "",
-        acceptorId: "",
-        drawersId: "",
-        money: "",
-        acceptDate: "",
-        loanLimit: "",
-        serviceRate: "",
-        serviceMoney: "",
-        interestRate: "",
-        interest: "",
+        name: '',
+        draftNo: '',
+        acceptorId: '',
+        drawersId: '',
+        money: '',
+        acceptDate: '',
+        loanLimit: '',
+        serviceRate: '',
+        serviceMoney: '',
+        interestRate: '',
+        interest: '',
         picUrls: [],
-        expectDiscountDate: "",
-        issueDate: "",
-        expireDate: "",
-        limitTime: "",
-      });
+        expectDiscountDate: '',
+        issueDate: '',
+        expireDate: '',
+        limitTime: ''
+      })
     },
     // 删除汇票
     deletedraft(index) {
-      const contractDraftsLength = this.form.contractDrafts.length;
+      const contractDraftsLength = this.form.contractDrafts.length
       if (contractDraftsLength > 1) {
-        this.form.contractDrafts.splice(index, 1);
+        this.form.contractDrafts.splice(index, 1)
       } else {
-        this.$message.error("至少一个");
+        this.$message.error('至少一个')
       }
     },
 
@@ -573,9 +569,9 @@ export default {
 
     /* 获取金额 */
     getMoney(index) {
-      this.getloanLimt(index);
-      this.getSerMoney(index);
-      this.getInterMoney(index);
+      this.getloanLimt(index)
+      this.getSerMoney(index)
+      this.getInterMoney(index)
     },
     /* 计算最高贷款额度 */
     getloanLimt(i) {
@@ -591,7 +587,7 @@ export default {
             this.form.contractDrafts[i].limitTime) /
             360 +
           1
-        ).toFixed(2);
+        ).toFixed(2)
       }
     },
     /* 计算服务费 */
@@ -611,10 +607,10 @@ export default {
             this.form.contractDrafts[i].serviceRate *
             this.form.contractDrafts[i].limitTime) /
           360
-        ).toFixed(2);
+        ).toFixed(2)
       }
     },
-    /*利息*/
+    /* 利息*/
     getInterMoney(i) {
       if (
         this.form.contractDrafts[i].money &&
@@ -631,11 +627,11 @@ export default {
             this.form.contractDrafts[i].interestRate *
             this.form.contractDrafts[i].limitTime) /
           360
-        ).toFixed(2);
+        ).toFixed(2)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss">