fix: 用例执行页面评论框中的图片加载失败

--bug=1008860 --user=陈建星 [github#8449]测试跟踪，用例执行页面评论框中的图片加载失败 https://www.tapd.cn/55049933/s/1080960
2021-12-15 15:03:45 +08:00 · 2021-12-15 15:03:45 +08:00 · f01549aa92
parent 2841335576
commit f01549aa92
6 changed files with 121 additions and 189 deletions
--- a/frontend/src/business/components/track/case/components/MsMarkDownText.vue
+++ b/frontend/src/business/components/track/case/components/MsMarkDownText.vue
@ -1,5 +1,5 @@
 <template>
-    <mavon-editor :id="id" v-if="active" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpen" class="mavon-editor"
+      <mavon-editor :id="id" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpen" class="mavon-editor"
                  :xss-options="xssOptions"
                  @change="$emit('change')"
                  :subfield="false" :toolbars="toolbars" :language="language" :toolbarsFlag="disabled ? false : true" @imgDel="imgDel" v-model="data[prop]"  ref="md"/>
@ -7,10 +7,61 @@

 <script>
 import {getCurrentUser, getUUID} from "@/common/js/utils";
+import {deleteMarkDownImg, uploadMarkDownImg} from "@/network/image";
 export default {
  name: "MsMarkDownText",
  components: {},
-  props: ['data', 'prop', 'disabled'],
+  props: {
+    data: Object,
+    prop: String,
+    disabled: Boolean,
+    autoReview: {
+      type: Boolean,
+      default() {
+        return true;
+      }
+    },
+    toolbars: {
+      type: Object,
+      default() {
+        return {
+          bold: true, // 粗体
+          italic: true, // 斜体
+          header: true, // 标题
+          underline: true, // 下划线
+          strikethrough: true, // 中划线
+          mark: true, // 标记
+          superscript: true, // 上角标
+          subscript: true, // 下角标
+          quote: true, // 引用
+          ol: true, // 有序列表
+          ul: true, // 无序列表
+          link: true, // 链接
+          imagelink: true, // 图片链接
+          code: true, // code
+          table: true, // 表格
+          fullscreen: true, // 全屏编辑
+          readmodel: true, // 沉浸式阅读
+          htmlcode: true, // 展示html源码
+          help: true, // 帮助
+          /* 1.3.5 */
+          undo: true, // 上一步
+          redo: true, // 下一步
+          trash: true, // 清空
+          save: false, // 保存（触发events中的save事件）
+          /* 1.4.2 */
+          navigation: true, // 导航目录
+          /* 2.1.8 */
+          alignleft: true, // 左对齐
+          aligncenter: true, // 居中
+          alignright: true, // 右对齐
+          /* 2.2.1 */
+          subfield: true, // 单双栏模式
+          preview: true, // 预览
+        }
+      }
+    }
+  },
  data() {
    return {
      result: {loading: false},
@ -21,51 +72,11 @@ export default {
        },
        stripIgnoreTagBody: true
      },
-      defaultOpen: 'preview',
-      toolbars: {
-        bold: true, // 粗体
-        italic: true, // 斜体
-        header: true, // 标题
-        underline: true, // 下划线
-        strikethrough: true, // 中划线
-        mark: true, // 标记
-        superscript: true, // 上角标
-        subscript: true, // 下角标
-        quote: true, // 引用
-        ol: true, // 有序列表
-        ul: true, // 无序列表
-        link: true, // 链接
-        imagelink: true, // 图片链接
-        code: true, // code
-        table: true, // 表格
-        fullscreen: true, // 全屏编辑
-        readmodel: true, // 沉浸式阅读
-        htmlcode: true, // 展示html源码
-        help: true, // 帮助
-        /* 1.3.5 */
-        undo: true, // 上一步
-        redo: true, // 下一步
-        trash: true, // 清空
-        save: false, // 保存（触发events中的save事件）
-        /* 1.4.2 */
-        navigation: true, // 导航目录
-        /* 2.1.8 */
-        alignleft: true, // 左对齐
-        aligncenter: true, // 居中
-        alignright: true, // 右对齐
-        /* 2.2.1 */
-        subfield: true, // 单双栏模式
-        preview: true, // 预览
-      }
+      defaultOpen: 'preview'
    }
  },
+
  computed: {
-    active() {
-      if (this.data[this.prop] !== undefined) {
-        return true;
-      }
-      return false;
-    },
    language() {
      const user = getCurrentUser();
      const language = user.language;
@ -84,31 +95,31 @@ export default {
  mounted() {
    // 点击编辑，失去焦点展示
    let el = document.getElementById(this.id);
+    if (!this.autoReview) {
+      this.defaultOpen = null;
+    }
    if (el) {
      el.addEventListener('click', () => {
        let imagePreview = el.getElementsByClassName('v-note-img-wrapper');
        if (imagePreview.length > 0) { // 图片预览的时候不切换到编辑模式
-          this.defaultOpen = 'preview';
+          if (this.autoReview)
+            this.defaultOpen = 'preview';
        } else {
-          this.defaultOpen = null;
+          if (this.autoReview)
+            this.defaultOpen = null;
        }
      });
      let input = el.getElementsByClassName('auto-textarea-input');
      input[0].addEventListener('blur', () => {
-        this.defaultOpen = 'preview';
+        if (this.autoReview)
+          this.defaultOpen = 'preview';
      });
    }
  },
  methods: {
    imgAdd(pos, file){
-      let param = {
-        id: getUUID().substring(0, 8)
-      };
-      file.prefix = param.id;
      this.result.loading = true;
-      // 带括号和空格，可能无法展示
-      param.fileName = file.name.replace("(", "").replace(")", "").replace(" ", "");
-      this.$fileUpload('/resource/md/upload', file, null, param, () => {
+      uploadMarkDownImg(file, (response, param) => {
        this.$success(this.$t('commons.save_success'));
        this.$refs.md.$img2Url(pos, '/resource/md/get/'  + param.id + '_' + param.fileName);
        this.result.loading = false;
@ -116,10 +127,11 @@ export default {
      this.$emit('imgAdd', file);
    },
    imgDel(file) {
-      if (file) {
-        this.$get('/resource/md/delete/' + file[1].prefix + "_" + file[1].name);
-      }
+      deleteMarkDownImg(file);
    },
+    getContent() {
+      return this.$refs.md.d_render;
+    }
  }
 }
 </script>
--- a/frontend/src/business/components/track/case/components/TestCaseComment.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseComment.vue
@ -4,10 +4,7 @@
    <div v-loading="result.loading">
      <div class="editors_div_style">
        <div id="editorsDiv">
-          <mavon-editor :disabled="isReadOnly"
-                        :xss-options="xssOptions"
-                        @imgAdd="imgAdd" :default-open="'edit'" class="review-mavon-editor" :imageFilter="imageFilter"
-                        :toolbars="richDataToolbars" @imgDel="imgDel" v-model="textarea" ref="md"/>
+          <ms-mark-down-text prop="description" :data="from" :toolbars="toolbars"/>
        </div>
      </div>
      <div>
@ -22,11 +19,12 @@

 <script>
 import ReviewCommentItem from "@/business/components/track/review/commom/ReviewCommentItem";
-import {getUUID} from "@/common/js/utils";
+import {uploadMarkDownImg} from "@/network/image";
+import MsMarkDownText from "@/business/components/track/case/components/MsMarkDownText";

 export default {
  name: "TestCaseComment",
-  components: {ReviewCommentItem},
+  components: {MsMarkDownText, ReviewCommentItem},
  props: {
    caseId: String,
    reviewId: String,
@ -34,16 +32,12 @@ export default {
  data() {
    return {
      result: {},
-      textarea: '',
+      from: {
+        description: ''
+      },
      isReadOnly: false,
      dialogTableVisible: false,
-      xssOptions: {
-        whiteList: {
-          img: ["src", "alt", "width", "height"],
-        },
-        stripIgnoreTagBody: true
-      },
-      richDataToolbars: {
+      toolbars: {
        bold: false, // 粗体
        italic: false, // 斜体
        header: false, // 标题
@ -87,59 +81,21 @@ export default {
    sendComment() {
      let comment = {};
      comment.caseId = this.caseId;
-      comment.description = this.textarea;
-      if (!this.textarea) {
+      comment.description = this.from.description;
+      if (!comment.description) {
        this.$warning(this.$t('test_track.comment.description_is_null'));
        return;
      }
      this.result = this.$post('/test/case/comment/save', comment, () => {
        this.$success(this.$t('test_track.comment.send_success'));
        this.refresh(comment.caseId);
-        this.textarea = '';
+        this.from.description = '';
        this.dialogTableVisible = false;
      });
    },
    refresh(id) {
      this.$emit('getComments');
-    },
-    //富文本框
-    imgAdd(pos, file) {
-      let param = {
-        id: getUUID().substring(0, 8)
-      };
-
-      file.prefix = param.id;
-      this.result = this.$fileUpload('/resource/md/upload', file, null, param, () => {
-        this.$success(this.$t('commons.save_success'));
-        this.$refs.md.$img2Url(pos, '/resource/md/get/'  + param.id+"_"+file.name);
-        this.sendComment();
-      });
-      this.$emit('imgAdd', file);
-    },
-    imageFilter(file){
-      let isImg = false;
-      if(file){
-        if(file.name){
-          if (file.name.indexOf("[")> 0 || file.name.indexOf("]") > 0||file.name.indexOf("([)")> 0 || file.name.indexOf(")") > 0){
-            this.$error("图片名称不能含有特殊字符");
-            isImg = false;
-          }else {
-            isImg = true;
-          }
-        }
-      }
-      return isImg;
-    },
-    imgDel(file) {
-      let fileUrl = file[1].prefix + "_" + file[1].name;
-      let comments = this.$refs.reviewComments;
-      comments.forEach(item => {
-        let imgCheckResult = item.checkByUrls(fileUrl);
-        if(imgCheckResult){
-          item.deleteComment();
-        }
-      });
-    },
+    }
  }
 };
 </script>
@ -159,10 +115,4 @@ export default {
  height: 300px;
  overflow: auto
 }
-
-.review-mavon-editor {
-  min-height: 20px;
-  height: 300px;
-  overflow: auto
-}
 </style>
--- a/frontend/src/business/components/track/issue/IssueDescriptionTableItem.vue
+++ b/frontend/src/business/components/track/issue/IssueDescriptionTableItem.vue
@ -11,9 +11,7 @@
        trigger="hover"
        popper-class="issues-popover"
      >
-        <mavon-editor :editable="false" default-open="preview" class="mavon-editor"
-                      :xss-options="xssOptions"
-                      :subfield="false" :toolbarsFlag="false" v-model="scope.row.description" ref="md"/>
+        <ms-mark-down-text prop="description" :data="scope.row" :disabled="true"/>
        <el-button slot="reference" type="text">{{ $t('test_track.issue.preview') }}</el-button>
      </el-popover>
    </template>
@ -22,20 +20,10 @@

 <script>
 import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
+import MsMarkDownText from "@/business/components/track/case/components/MsMarkDownText";
 export default {
  name: "IssueDescriptionTableItem",
-  components: {MsTableColumn},
-  data() {
-    return {
-      readConfig: {toolbar: []},
-      xssOptions: {
-        whiteList: {
-          img: ["src", "alt", "width", "height"],
-        },
-        stripIgnoreTagBody: true
-      },
-    };
-  },
+  components: {MsMarkDownText, MsTableColumn},
  props: {
    field: Object,
    fieldsWidth: Object
--- a/frontend/src/business/components/track/review/commom/ReviewComment.vue
+++ b/frontend/src/business/components/track/review/commom/ReviewComment.vue
@ -17,9 +17,7 @@
    <div>
      <div class="editors_div_style">
        <div id="editorsDiv" >
-          <mavon-editor v-if="showEditor" @imgAdd="imgAdd" :default-open="'edit'" class="review-mavon-editor" :imageFilter="imageFilter"
-                        :xss-options="xssOptions"
-                        :toolbars="richDataToolbars"  @imgDel="imgDel" v-model="textarea"  ref="md"/>
+          <ms-mark-down-text prop="description" :data="from" :toolbars="toolbars"/>
        </div>
      </div>

@ -35,11 +33,12 @@
 <script>
 import ReviewCommentItem from "./ReviewCommentItem";
 import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
-import {getUUID} from "@/common/js/utils";
+import {uploadMarkDownImg} from "@/network/image";
+import MsMarkDownText from "@/business/components/track/case/components/MsMarkDownText";

 export default {
  name: "ReviewComment",
-  components: {ReviewCommentItem,FormRichTextItem},
+  components: {MsMarkDownText, ReviewCommentItem,FormRichTextItem},
  props: {
    caseId: String,
    comments: Array,
@ -49,18 +48,14 @@ export default {
  data() {
    return {
      result: {},
-      textarea: '',
+      from: {
+        description: ''
+      },
      loadCommenItem:true,
      labelWidth: '120px',
      showEditor:true,
      isReadOnly: false,
-      xssOptions: {
-        whiteList: {
-          img: ["src", "alt", "width", "height"],
-        },
-        stripIgnoreTagBody: true
-      },
-      richDataToolbars: {
+      toolbars: {
        bold: false, // 粗体
        italic: false, // 斜体
        header: false, // 标题
@ -108,10 +103,10 @@ export default {
    sendComment() {
      let comment = {};
      comment.caseId = this.caseId;
-      comment.description = this.textarea;
+      comment.description = this.from.description;
      comment.reviewId = this.reviewId;
      comment.status = this.reviewStatus;
-      if (!this.textarea) {
+      if (!comment.description) {
        this.$warning(this.$t('test_track.comment.description_is_null'));
        return;
      }
@ -140,45 +135,7 @@ export default {
    refresh() {
      this.resetInputLight();
      this.$emit('getComments');
-    },
-    //富文本框
-    imgAdd(pos, file) {
-      let param = {
-        id: getUUID().substring(0, 8)
-      };
-
-      file.prefix = param.id;
-      this.result = this.$fileUpload('/resource/md/upload', file, null, param, () => {
-        this.$success(this.$t('commons.save_success'));
-        this.$refs.md.$img2Url(pos, '/resource/md/get/'  + param.id+"_"+file.name);
-        this.sendComment();
-      });
-      this.$emit('imgAdd', file);
-    },
-    imageFilter(file){
-      let isImg = false;
-      if(file){
-        if(file.name){
-          if (file.name.indexOf("[")> 0 || file.name.indexOf("]") > 0||file.name.indexOf("([)")> 0 || file.name.indexOf(")") > 0){
-            this.$error("图片名称不能含有特殊字符");
-            isImg = false;
-          }else {
-            isImg = true;
-          }
-        }
-      }
-      return isImg;
-    },
-    imgDel(file) {
-      let fileUrl = file[1].prefix + "_" + file[1].name;
-      let comments = this.$refs.reviewComments;
-      comments.forEach(item => {
-        let imgCheckResult = item.checkByUrls(fileUrl);
-        if(imgCheckResult){
-          item.deleteComment();
-        }
-      });
-    },
+    }
  }
 };
 </script>
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@ -1 +1 @@
-Subproject commit f5b0d929be13f4a1e4fea6c14d2834fa78703b60
+Subproject commit 992bf5c0bc50e23ced47cdb1aa87e3061c3a6a5d
--- a/frontend/src/network/image.js
+++ b/frontend/src/network/image.js
@ -0,0 +1,25 @@
+import {getUUID} from "@/common/js/utils";
+import {fileUpload} from "@/common/js/ajax";
+import {baseGet} from "@/network/base-network";
+
+export function uploadMarkDownImg(file, callback) {
+  let param = {
+    id: getUUID().substring(0, 8)
+  };
+  file.prefix = param.id;
+  // 带括号和空格，可能无法展示
+  param.fileName = file.name.replace("(", "").replace(")", "").replace(" ", "");
+  return fileUpload('/resource/md/upload', file, null, param, (response) => {
+    if (callback) {
+      callback(response, param);
+    }
+  });
+}
+
+export function deleteMarkDownImg(file, callback) {
+  if (file) {
+    let fileName = file.name.replace("(", "").replace(")", "").replace(" ", "");
+    return baseGet('/resource/md/delete/' + file[1].prefix + "_" + fileName, callback);
+  }
+  return {};
+}