fix：工单详情图片放大；token过期提示

src/common/api/axios.js

@@ -7,6 +7,7 @@ const axios = Axios.create({
   baseURL: window.apiHostSetting.VUE_APP_BASE_URL + '/api',
   timeout: 30 * 1000,
 })
+let HTTPNUM = 0
 axios.interceptors.request.use((config) => {
   if (config.data && typeof config.data === 'object') {
     const data = config.data
@@ -45,25 +46,27 @@ axios.interceptors.response.use(
         })
         return Promise.reject(res.data)
       } else if (res.data.code === 403) {
-        console.log(Vue)
         // token过期
-        Vue.prototype.$message({
-          type: 'error',
-          message: res.data.message,
-        })
-        router
-          .replace({
-            name: 'login',
-          })
-          .catch((err) => {
-            console.log(err)
+        if (HTTPNUM === 0) {
+          HTTPNUM++
+          Vue.prototype.$message({
+            type: 'error',
+            message: res.data.message,
           })
+          router
+            .replace({
+              name: 'login',
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        }
         return Promise.reject(res.data)
       } else if (res.data.code === 500) {
         Vue.prototype.$alert(
           '<div style="max-height:500px;overflow:auto">' +
-            res.data.message +
-            '</div>',
+          res.data.message +
+          '</div>',
           '错误提示',
           {
             dangerouslyUseHTMLString: true,
@@ -75,23 +78,26 @@ axios.interceptors.response.use(
         if (res.data) {
           const fileReader = new FileReader()
           fileReader.readAsText(res.data)
-          fileReader.onload = function (ev) {
+          fileReader.onload = function(ev) {
             console.log(ev.target.result)
             Vue.prototype.$alert(ev.target.result, '提示', {
               confirmButtonText: '确定',
-              callback: () => {},
+              callback: () => {
+              },
             })
           }
         } else {
           Vue.prototype.$alert('请求参数有误', '提示', {
             confirmButtonText: '确定',
-            callback: () => {},
+            callback: () => {
+            },
           })
         }
       } else if (res.status === 404) {
         Vue.prototype.$alert('请求不存在', '提示', {
           confirmButtonText: '确定',
-          callback: () => {},
+          callback: () => {
+          },
         })
       }
     }
@@ -101,11 +107,13 @@ axios.interceptors.response.use(
   (error) => {
     Vue.prototype.$alert(error.message, 'Error', {
       confirmButtonText: '确定',
-      callback: () => {},
+      callback: () => {
+      },
     })
     return Promise.reject(error)
   },
 )
+
 export function get(url, params) {
   return new Promise((resolve, reject) => {
     axios.get(url, { params })
@@ -121,6 +129,7 @@ export function get(url, params) {
       })
   })
 }
+
 export function post(url, params, headers) {
   return new Promise((resolve, reject) => {
     axios.post(url, params, headers)
@@ -136,4 +145,5 @@ export function post(url, params, headers) {
       })
   })
 }
+
 export default axios

src/views/taskManage/index.vue

@@ -218,7 +218,7 @@
       title='详情'
       :close-on-click-modal='false'
       :visible.sync='detailVisible'
-      width='1100px'
+      width='1200px'
       @close='getlist()'
     >
       <!-- <div class="step-bar">
@@ -315,10 +315,19 @@
             >
               <span class='label'>工单内容</span>
               <span
-                style='flex: 1; display: inline-block;padding:0 3%'
+                style='flex: 1; display: inline-block;max-width: 84%;'
                 class='value'
+                @click.stop='hanldeImage($event)'
                 v-html='detail.content'
               ></span>
+              <el-image-viewer
+                v-if='imgPreviewUrl'
+                :initial-index='subscript'
+                :src='imgPreviewUrl'
+                :on-close='closeViewer'
+                :url-list='imgList'
+                style='z-index: 3000'
+              ></el-image-viewer>
             </p>
             <p
               class='item'
@@ -326,7 +335,7 @@
             >
               <span class='label'>备注</span>
               <span
-                style='flex: 1; display: inline-block;padding:0 3%'
+                style='flex: 1; display: inline-block;padding:0 3%;'
                 class='value'
                 v-html='detail.remark'
               ></span>
@@ -714,6 +723,7 @@ import resumetWork from '@/assets/work/resume.png'
 import closetWork from '@/assets/work/close.png'
 import updateWork from '@/assets/work/update.png'
 import anceingWork from '@/assets/work/anceing.png'
+import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
 
 export default {
   name: 'task_center',
@@ -722,6 +732,7 @@ export default {
     ChooseTimePeriod,
     tableView,
     Edit,
+    ElImageViewer,
   },
   data() {
     const userInfo = localStorage.getItem('user')
@@ -853,6 +864,9 @@ export default {
       ],
       pendingVisible: false,
       pendingForm: {},
+      imgPreviewUrl: '',
+      subscript: 0,
+      imgList: [],
     }
   },
   mounted() {
@@ -1642,12 +1656,36 @@ export default {
         this.detailLoading = false
       }
     },
+    getimgsrc(htmlstr) {
+      const reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/g
+      const arr = []
+      let tem = 0
+      while ((tem = reg.exec(htmlstr))) {
+        arr.push(tem[2]) // eslint-disable-line
+      }
+      return arr
+    },
+    closeViewer() {
+      this.imgPreviewUrl = ''
+      document.documentElement.style.overflowY = 'auto'
+    },
+    hanldeImage(event) {
+      if (event.target.nodeName === 'IMG' || event.target.nodeName === 'img') {
+        this.imgPreviewUrl = decodeURIComponent(event.target.currentSrc)
+        const subscript = this.imgList.indexOf(this.imgPreviewUrl)
+        this.subscript = subscript > -1 ? subscript : 0
+        document.documentElement.style.overflowY = 'hidden'
+      }
+    },
     async showDetail(item) {
       this.currentRowId = item.id
       await axios.get(`platform/platformWorkOrder/get?id=${item.id}`,
       ).then(res => {
         if (res.code === 200) {
           this.detail = res.data
+          this.imgList = Object.values(this.getimgsrc(this.detail.content))
+          const subscript = this.imgList.indexOf(this.imgPreviewUrl)
+          this.subscript = subscript > -1 ? subscript : 0
         } else {
           this.detailLoading = false
         }
@@ -1666,7 +1704,8 @@ export default {
       this.detailVisible = true
       this.textarea = ''
     },
-  },
+  }
+  ,
 }
 </script>
 <style lang='scss' scoped>
@@ -1772,7 +1811,7 @@ export default {
 }
 
 .content {
-  max-height: 68vh;
+  max-height: 61vh;
   overflow: auto;
 }