图片转url修改

src/components/input/normalArea.vue

@@ -10,7 +10,6 @@ import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'
 import 'tinymce/themes/silver/theme'
 import 'tinymce/icons/default/icons'
-import axios from 'axios'
 
 export default {
   components: {
@@ -35,7 +34,6 @@ export default {
   },
   data() {
     return {
-      fileUpload: false,
       inputValue: '',
       edit: false,
       init: {
@@ -61,8 +59,6 @@ export default {
   watch: {
     value: {
       handler(newV, oldV) {
-        // console.log(newV)
-        this.getImages(newV)
         this.inputValue = newV
       },
       immediate: true
@@ -80,84 +76,6 @@ export default {
       this.inputValue = e
       this.$emit('update:value', this.inputValue)
       this.$emit('change', this.inputValue)
-    },
-    async getImages(node) { // 获取图片
-      const reg = /<img.*?(?:>|\/>)/gi
-      const imgArr = node.match(reg) // 获取图片数组
-      if (imgArr && imgArr.length > 0) {
-        for (const value of imgArr) {
-          const regSrc = /<img.*?src="(.*?)".*?\/?>/i
-          const src = value.match(regSrc)
-          if (src[1].indexOf('base64') > 0) {
-            const file = this.dataURLtoFile(src[1], this.generateMixed(15) + '.png', 'image/png')
-            await this.beforeUpload(file)
-          }
-        }
-      }
-    },
-    generateMixed(len) { // 图片随机名字生成
-      const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
-      let res = ''
-      for (let i = 0; i < len; i++) {
-        const id = Math.ceil(Math.random() * 35)
-        res += chars[id]
-      }
-      return res
-    },
-    dataURLtoFile(base64, filename, contentType) { // base64 -> file
-      var arr = base64.split(',') // 去掉base64格式图片的头部
-      var bstr = atob(arr[1]) // atob()方法将数据解码
-      var leng = bstr.length
-      var u8arr = new Uint8Array(leng)
-      while (leng--) {
-        u8arr[leng] = bstr.charCodeAt(leng) // 返回指定位置的字符的 Unicode 编码
-      }
-      return new File([u8arr], filename, { type: contentType })
-    },
-    async beforeUpload(file) { // 上传前
-      try {
-        const res = await this.updateFile(file)
-        // const res = { data: { url: '//pt-starimg.didistatic.com/static/starimg/node/elczkYKpzb1598698408779.png' }}
-        let url = ''
-        if (res.data) {
-          url = 'http:' + res.data.url
-        }
-        const img = `<img src="${url}" />`
-        console.log(img)
-        this.successUpload(img)
-      } catch (error) {
-        this.successUpload('')
-      }
-      return new Promise((resolve, reject) => { resolve() })
-    },
-    updateFile(file) { // 上传图片
-      const param = new FormData() // 创建form对象
-      param.append('file', file)// 通过append向form对象添加数据
-      const config = {
-        headers: {
-          'Content-Type': 'multipart/form-data'
-        },
-        withCredentials: false
-      } // 添加请求头
-      return new Promise((resolve, reject) => {
-        axios.post('http://star.xiaojukeji.com/upload/img.node', param, config)
-          .then(response => {
-            resolve(response)
-          }).catch(err => {
-            reject(err)
-          })
-      })
-    },
-    async successUpload(file) { // 图片上传成功
-      const reg = /<img.*?(?:>|\/>)/gi
-      let newStr = ''
-      this.inputValue.replace(reg, function(match, ...rest) {
-        newStr = rest[1].substring(0, rest[0]) + file + rest[1].substring(rest[0] + match.length, rest[1].length)
-        return rest[1]
-      })
-      this.$nextTick(() => {
-        this.inputValue = newStr
-      })
     }
   }
 }

src/utils/handleTinymce.js

@@ -0,0 +1,80 @@
+import axios from 'axios'
+const _ = require('lodash')
+export async function getContainImgHTMLNode(node) { // 获取包含图片的html文本
+  const nowHandleText = _.cloneDeep(node)
+  const reg = /<img.*?(?:>|\/>)/gi // 获取<img />的正则
+  const imgArr = node.match(reg) // 获取图片数组
+  const newImgUrlList = [] // 返回的图片URl数组
+  if (imgArr && imgArr.length > 0) {
+    for await (const value of imgArr) {
+      const regSrc = /<img.*?src="(.*?)".*?\/?>/i// 获取<img />中的src的正则
+      const src = value.match(regSrc)
+      if (src[1].indexOf('base64') > 0) {
+        const file = dataURLtoFile(src[1], generateMixed(15) + '.png', 'image/png') // base64转成file格式
+        const imgUrl = await beforeUpload(file) // 获取图片上传服务器后的url
+        newImgUrlList.push(imgUrl)
+      }
+    }
+    return setNewHtmlString(newImgUrlList, nowHandleText)
+  } else {
+    return node
+  }
+}
+export function generateMixed(len) { // 图片随机名字生成
+  const chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+  let res = ''
+  for (let i = 0; i < len; i++) {
+    const id = Math.ceil(Math.random() * 35)
+    res += chars[id]
+  }
+  return res
+}
+export function dataURLtoFile(base64, filename, contentType) { // base64 -> file
+  const arr = base64.split(',') // 去掉base64格式图片的头部
+  const bstr = atob(arr[1]) // atob()方法将数据解码
+  let length = bstr.length
+  const u8arr = new Uint8Array(length)
+  while (length--) {
+    u8arr[length] = bstr.charCodeAt(length) // 返回指定位置的字符的 Unicode 编码
+  }
+  return new File([u8arr], filename, { type: contentType })
+}
+export async function beforeUpload(file) { // 上传前
+  try {
+    const res = await updateFile(file)
+    // const res = { data: { url: '//pt-starimg.didistatic.com/static/starimg/node/elczkYKpzb1598698408779.png' }}
+    let url = ''
+    if (res.data) {
+      url = 'http:' + res.data.url
+    }
+    const img = `<img src="${url}" />`
+    return img
+  } catch (error) {
+    return ''
+  }
+}
+export function updateFile(file) { // 上传图片
+  const param = new FormData() // 创建form对象
+  param.append('file', file)// 通过append向form对象添加数据
+  const config = {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    withCredentials: false
+  } // 添加请求头
+  return new Promise((resolve, reject) => {
+    axios.post('http://star.xiaojukeji.com/upload/img.node', param, config)
+      .then(response => {
+        resolve(response)
+      }).catch(err => {
+        reject(err)
+      })
+  })
+}
+export async function setNewHtmlString(fileList, nowHandleText) { // 更换图片地址
+  const reg = /<img.*?(?:>|\/>)/gi
+  nowHandleText = nowHandleText.replace(reg, function(match, ...rest) {
+    return fileList.shift()
+  })
+  return nowHandleText
+}

src/views/quality/components/developmentCycle.vue

@@ -94,9 +94,11 @@ export default {
     },
     toLink(params) {
       if (this.type === 'require') {
-        this.$router.push({ name: '需求详情', query: { id: params.data[2] }})
+        const newTab = this.$router.resolve({ name: '需求详情', query: { id: params.data[2] }})
+        window.open(newTab.href, '_blank')
       } else if (this.type === 'task') {
-        this.$router.push({ name: '任务详情', query: { id: params.data[2] }})
+        const newTab = this.$router.resolve({ name: '任务详情', query: { id: params.data[2] }})
+        window.open(newTab.href, '_blank')
       }
     }
   }

src/views/quality/defectStatistics.vue

@@ -1006,6 +1006,5 @@ export default {
 /deep/.el-tabs__nav-wrap::after{
   height: 1px;
   background-color: #E4E7ED !important;
-  opacity: 0.2;
 }
 </style>

src/views/quality/requireStatistics.vue

@@ -602,6 +602,6 @@ export default {
   font-size: 18px !important;
 }
 /deep/.el-tabs__nav-wrap:after {
-    background-color: #E4E7ED !important;
+  background-color: #E4E7ED !important;
 }
 </style>

src/views/quality/taskStatistics.vue

@@ -149,7 +149,7 @@
         <belong-chart :chart-data="moduleDistributeData" />
       </div>
       <div class="chart-item">
-        <h3>排期发生变更的任务（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
+        <h3>排期发生变更的需求（<span class="strong-font">{{ changeTotal }}</span>个）</h3>
         <change-require-chart :chart-data="changeTaskData" />
       </div>
       <div class="chart-item">

src/views/reportManagement/daily/dailyTemplate.vue

@@ -1,7 +1,18 @@
 <template>
   <!-- 新增测试日报 -->
-  <div class="parent-style">
-    <el-form ref="fromCreateData" class="dailyFrom" :model="fromCreateData" :rules="serviceDataRules">
+  <div
+    v-loading.fullscreen.lock="loading"
+    element-loading-text="数据上传中，请稍后"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+    class="parent-style"
+  >>
+    <el-form
+      ref="fromCreateData"
+      class="dailyFrom"
+      :model="fromCreateData"
+      :rules="serviceDataRules"
+    >
       <div class="Layout_space_between">
         <div>
           <span style="color: #f56b6c">*</span>
@@ -36,11 +47,13 @@
 </template>
 
 <script>
+import { Loading } from 'element-ui'
 import '@/styles/PublicStyle/index.scss'
 import normalArea from '@/components/input/normalArea'
 import { taskList as allTaskList } from '@/api/taskIndex'
 import iconDisplay from '@/views/reportManagement/daily/components/iconDisplay.vue'
 import { settingGetReportModuleById, dailyReportCreate, dailyReportUpdate } from '@/api/reportTemplate' // 模版添删改查
+import { getContainImgHTMLNode } from '@/utils/handleTinymce'
 
 export default {
   name: 'DailyNewsAdded',
@@ -62,7 +75,8 @@ export default {
       tasksDetailList: [], // 已有任务项目
       taskid_arr: [], // taskIds
       moduleId: '', // 模块id
-      selectTask: false // 选择的任务id
+      selectTask: false, // 选择的任务id
+      loading: false // loading状态
     }
   },
   watch: {
@@ -151,12 +165,20 @@ export default {
         this.taskid_arr = []
         return false
       }
-      this.$refs.fromCreateData.validate((valid) => {
+      this.$refs.fromCreateData.validate(async(valid) => {
         if (valid) {
           this.fromCreateData.bizId = localStorage.getItem('bizId')
           this.fromCreateData.reportor = localStorage.getItem('usernames')
           this.fromCreateData.taskIds = this.taskid_arr
           this.fromCreateData.moduleId = this.moduleId
+          this.loading = true
+          try {
+            this.fromCreateData.content = await getContainImgHTMLNode(this.fromCreateData.content)
+          } catch (error) {
+            this.loading = false
+            throw error
+          }
+          this.loading = false
           if (val) { // 编辑
             dailyReportUpdate(this.fromCreateData).then(res => {
               if (res.code === 200) {