feat:新增andon模块

src/views/deviceManagement/deviceinspect/index.vue

@@ -100,7 +100,27 @@
 
           <el-col :lg="24">
             <el-form-item label="图片" prop="image">
-              <UploadImage v-model="form.image" :data="{ uploadType: 1, filePath: 'device/inspect' }" />
+              <el-upload
+                list-type="picture-card"
+                :action="uploadImgUrl"
+                :on-success="handleUploadSuccess"
+                :before-upload="handleBeforeUpload"
+                :on-exceed="handleExceed"
+                :on-remove="handleRemove"
+                :on-error="handleUploadError"
+                name="file"
+                :show-file-list="true"
+                :data="{ uploadType: 1, filePath: 'device/inspect' }"
+                :limit="1"
+                :file-list="fileList"
+                :on-preview="handlePictureCardPreview"
+                :class="{hide: this.fileList.length >= 1}"
+                :headers="headers">
+                <i slot="default" class="el-icon-plus"></i>
+              </el-upload>
+              <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
+                <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
+              </el-dialog>
             </el-form-item>
           </el-col>
 
@@ -150,6 +170,7 @@
 <script>
 import { listDeviceInspect, addDeviceInspect, delDeviceInspect, updateDeviceInspect, getDeviceInspect } from '@/api/deviceManagement/deviceinspect'
 import formconfig from '@/views/deviceManagement/deviceformconfig/index'
+import { getToken } from '@/utils/auth'
 
 export default {
   name: 'deviceinspect',
@@ -236,6 +257,14 @@ export default {
       options: {
         typeOptions: [],
         statusOptions: []
+      },
+      // 图片上传相关
+      dialogImageUrl: '',
+      dialogVisible: false,
+      fileList: [],
+      uploadImgUrl: process.env.VUE_APP_BASE_API + (process.env.VUE_APP_UPLOAD_URL || '/common/upload'),
+      headers: {
+        Authorization: 'Bearer ' + getToken()
       }
     }
   },
@@ -309,6 +338,7 @@ export default {
         updatedBy: null,
         updatedTime: null
       }
+      this.fileList = []
       this.resetForm('formRef')
     },
     // 添加按钮操作
@@ -331,6 +361,10 @@ export default {
           this.form = {
             ...data
           }
+          // 初始化图片列表
+          if (data.image) {
+            this.fileList = [{ name: data.image, url: data.image }]
+          }
         }
       })
     },
@@ -375,7 +409,68 @@ export default {
         // 父组件向子组件传值
         this.parentMessage = this.form.id
       }
+    },
+    // 图片上传相关方法
+    handleUploadSuccess(res) {
+      if (res.code != 200) {
+        this.$message.error(`上传失败，原因:${res.msg}!`)
+        return
+      }
+      this.fileList.push({ name: res.data.fileName, url: res.data.url })
+      this.form.image = res.data.url
+    },
+    handleBeforeUpload(file) {
+      const fileType = ['png', 'jpg', 'jpeg', 'webp']
+      const isImg = fileType.some((type) => {
+        return file.type.indexOf(type) > -1
+      })
+      
+      if (!isImg) {
+        this.$message.error(`文件格式不正确, 请上传${fileType.join('/')}图片格式文件!`)
+        return false
+      }
+      
+      const isLt = file.size / 1024 / 1024 < 5
+      if (!isLt) {
+        this.$message.error('上传头像图片大小不能超过 5 MB!')
+        return false
+      }
+      return true
+    },
+    handleExceed() {
+      this.$message.error('上传文件数量不能超过 1 个!')
+    },
+    handleRemove() {
+      this.fileList = []
+      this.form.image = null
+    },
+    handleUploadError() {
+      this.$message({
+        type: 'error',
+        message: '上传失败'
+      })
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
     }
   }
 }
 </script>
+
+<style scoped>
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+/* 去掉动画效果 */
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter,
+.el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+</style>