添加查看图片详情

src/containers/management/repair/repair.vue

@@ -77,7 +77,7 @@
         <el-form-item v-if="selected.uploadImg" class="col-line-1" label="图片" label-width="100px">
           <div class="previewRow">
             <div class="previewItem" v-for="(item, index) in selected.uploadImg.split(',')" :key="index">
-              <img :src="item" alt="">
+              <img :src="item" alt="" @click="showDetail(item)">
             </div>
           </div>
         </el-form-item>
@@ -93,6 +93,12 @@
         <el-button type="primary" @click="resetEditDialog">确 定</el-button>
       </div>
     </drag-dialog>
+    <drag-dialog title="查看图片" :visible.sync="dialogImgVisible" :before-close="resetImgDialog" width="70%">
+      <img style="width: 100%;" :src="imgUrl" alt="">
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="resetImgDialog">确 定</el-button>
+      </div>
+    </drag-dialog>
   </div>
 </template>
 
@@ -136,6 +142,8 @@ export default {
           value: '教师',
         },
       ],
+      dialogImgVisible: false,
+      imgUrl: '',
     };
   },
   created() {
@@ -204,6 +212,14 @@ export default {
           this.$message.error(err.msg || '处理失败！');
         });
     },
+    resetImgDialog() {
+      this.imgUrl = '';
+      this.dialogImgVisible = false;
+    },
+    showDetail(imgUrl) {
+      this.imgUrl = imgUrl;
+      this.dialogImgVisible = true;
+    },
   },
 };
 </script>