From 00bbdc680e2390f96ab7934d228b471724910990 Mon Sep 17 00:00:00 2001
From: zhangyongzhangyong <2012005003@qq.com>
Date: Mon, 6 Dec 2021 15:00:03 +0800
Subject: [PATCH] =?UTF-8?q?=E7=96=AB=E6=83=85=E9=98=B2=E6=8E=A7--=E7=96=AB?=
 =?UTF-8?q?=E8=8B=97=E6=8E=A5=E7=A7=8D=E7=99=BB=E8=AE=B0=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=EF=BC=8C=E6=8E=A5=E7=A7=8D=E7=99=BB=E8=AE=B0=E6=97=B6=E5=8F=AF?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/epidemic/regist.vue | 218 +++++++++++++++++++++++++-
 1 file changed, 215 insertions(+), 3 deletions(-)

diff --git a/src/views/modules/epidemic/regist.vue b/src/views/modules/epidemic/regist.vue
index 2e06c6b..7d774e5 100644
--- a/src/views/modules/epidemic/regist.vue
+++ b/src/views/modules/epidemic/regist.vue
@@ -97,6 +97,18 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <el-form-item label="上传图片" prop="images">
+        <el-upload  accept="image/png, image/jpeg"
+                    :action="uploadUrl"
+                    list-type="picture-card"
+                    :file-list="dataForm.images"
+                    :limit="3"
+                    :on-success="handleAvatarActSuccess"
+                    :on-remove="removeImage"
+                    :on-exceed="handleExceed">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
     </el-form>
 
     <!--  -->
@@ -110,7 +122,7 @@
 
 <script>
 import debounce from 'lodash/debounce'
-
+import Cookies from 'js-cookie'
 export default {
   props: {
     dataForm: {
@@ -145,7 +157,8 @@ export default {
         batchNo: '',
         distinctNum: 0,
         vaccinationNum: 0,
-        vaccinationState: 1
+        vaccinationState: 1,
+        images: []
       },
       options: [],
       companyOptions: [],
@@ -163,7 +176,9 @@ export default {
         { dictValue: '女', dictName: '女' }
       ],
       vueLoading: true,
-      id: ''
+      id: '',
+      uploadUrl: '',
+      imgDataRule: true
     }
   },
   computed: {
@@ -186,10 +201,18 @@ export default {
         ],
         companyId: [
           { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        images: [
+          { required: this.imgDataRule, message: this.$t('validate.required'), trigger: 'blur' }
         ]
       }
     }
   },
+  created () {
+    this.$nextTick(() => {
+      this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+    })
+  },
   methods: {
     init () {
       this.visible = true
@@ -200,6 +223,7 @@ export default {
       this.getCompanyOptions()
       this.$nextTick(() => {
         this.$refs['vaccinationDataForm'].resetFields()
+        this.dataForm.images = []
         if (this.dataForm.id) {
           this.getInfo()
         }
@@ -303,6 +327,11 @@ export default {
           this.dataForm.vaccinationState = 1
         }
         this.historyCompanyId = res.data.historyCompanyId
+        if (this.dataForm.images.length > 0) {
+          this.imgDataRule = false
+        } else {
+          this.imgDataRule = true
+        }
       }).catch(() => { })
     },
     // 表单提交
@@ -356,7 +385,190 @@ export default {
     btKeyUpRelationPeople (e) {
       e.target.value = e.target.value.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~！@#￥%……&*（）——+={}|《》？：“”【】、；‘’，。、]/g, '')
       this.dataForm.relationPeople = e.target.value
+    },
+    // 图片处理
+    handleAvatarActSuccess (res, file) {
+      let image = {}
+      image.name = Math.round(Math.random() * 5)
+      image.url = res.data.url
+      this.dataForm.images.push(image)
+      this.imgDataRule = false
+    },
+    removeImage (file, fileList) {
+      this.dataForm.images = fileList
+      if (this.dataForm.images.length > 0) {
+        this.imgDataRule = false
+      } else {
+        this.imgDataRule = true
+      }
+    },
+    handleExceed () {
+      this.$message({
+        showClose: true,
+        message: '精彩瞬间最多只能上传三张照片',
+        type: 'warning'
+      })
     }
   }
 }
 </script>
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+<style lang="scss">
+.project-handle {
+  .el-timeline {
+    padding-left: 9px;
+    font-size: 13px;
+  }
+  .el-textarea {
+    width: 600px !important;
+  }
+  .el-input {
+    width: 600px !important;
+  }
+}
+.el-form-item__label {
+  font-weight: bold;
+}
+</style>
+<style lang="scss" scoped>
+.project-handle {
+  width: 100%;
+  height: calc(100vh - 120px);
+  background: #ffffff;
+  box-sizing: border-box;
+  padding: 10px;
+  .project-detail {
+    width: 100%;
+    height: 49%;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    padding: 10px;
+    padding-top: 20px;
+    float: left;
+    margin-bottom: 1%;
+    position: relative;
+    .project-detail-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #4ac38b;
+      text-align: center;
+    }
+    .el-form {
+      width: 58%;
+      height: 100%;
+      float: left;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #ccc;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #fff;
+      }
+    }
+    .container {
+      width: 40%;
+      height: 100%;
+      float: right;
+      .location {
+        height: 30px;
+        line-height: 30px;
+      }
+      #map {
+        width: 100%;
+        height: calc(100% - 30px);
+      }
+    }
+  }
+  .project-progress {
+    width: 20%;
+    height: 100%;
+    float: right;
+    border: 2px solid #ccc;
+    box-sizing: border-box;
+    margin-left: 1%;
+    padding-top: 20px;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+  }
+  .handle-operation {
+    padding-top: 30px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 49%;
+    box-sizing: border-box;
+    border: 2px solid #ccc;
+    float: left;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background: #aaa;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      background: #ccc;
+    }
+    .handle-operation-tip {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 80px;
+      height: 30px;
+      line-height: 30px;
+      color: #ffffff;
+      background: #ff7600;
+      text-align: center;
+    }
+  }
+}
+</style>