test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(测试跟踪): 富文本框图片上传报错 

--bug=1017611 --user=陈建星 测试计划评论时添加图片报错 https://www.tapd.cn/55049933/s/1258676
This commit is contained in:
chenjianxing 2022-10-11 17:56:59 +08:00 committed by jianxing
parent 5e5f54f087
commit 8156ffef1f
12 changed files with 16 additions and 714 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api-test/frontend/src/business/commons/CustomFiledComponent.vue
View File

@ -114,7 +114,7 @@
<script>
import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
import MsInputTag from "@/business/automation/scenario/MsInputTag";
import MsMarkDownText from "./MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
import {getProjectMemberOption} from "@/api/project";
export default {

2
api-test/frontend/src/business/commons/FormRichTextItem.vue
View File

@ -5,7 +5,7 @@
</template>
<script>
import MsMarkDownText from "./MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
export default {
name: "FormRichTextItem",
components: {MsMarkDownText},

229
api-test/frontend/src/business/commons/MsMarkDownText.vue
View File

@ -1,229 +0,0 @@
<template>
<mavon-editor :id="id" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpenValue"
:xss-options="xssOptions" :style="{'min-height': customMinHeight + 'px', 'min-width': '100px'}"
@change="$emit('change')"
:subfield="false" :toolbars="toolbars" :language="language" :toolbarsFlag="!disabled"
@imgDel="imgDel" v-model="data[prop]" ref="md"/>
</template>
<script>
import {getUUID} from "metersphere-frontend/src/utils";
import {getCurrentUser} from "metersphere-frontend/src/utils/token";
import {deleteMarkDownImg, uploadMarkDownImg} from "@/api/image";
import {DEFAULT_XSS_ATTR} from "metersphere-frontend/src/utils/constants";
export default {
name: "MsMarkDownText",
components: {},
props: {
data: Object,
prop: String,
disabled: Boolean,
defaultOpen: {
type: String,
default() {
return 'preview';
}
},
autoReview: {
type: Boolean,
default() {
return true;
}
},
customMinHeight: {
type: [Number, String],
default() {
return 20;
}
},
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},
id: getUUID(),
xssOptions: {
whiteList: {
div: DEFAULT_XSS_ATTR,
p: DEFAULT_XSS_ATTR,
br: [],
h1: DEFAULT_XSS_ATTR,
h2: DEFAULT_XSS_ATTR,
h3: DEFAULT_XSS_ATTR,
h4: DEFAULT_XSS_ATTR,
h5: DEFAULT_XSS_ATTR,
h6: DEFAULT_XSS_ATTR,
hr: DEFAULT_XSS_ATTR,
span: DEFAULT_XSS_ATTR,
strong: DEFAULT_XSS_ATTR,
b: DEFAULT_XSS_ATTR,
i: DEFAULT_XSS_ATTR,
pre: DEFAULT_XSS_ATTR,
code: DEFAULT_XSS_ATTR,
tr: DEFAULT_XSS_ATTR,
table: [...DEFAULT_XSS_ATTR, 'width', 'border'],
td: [...DEFAULT_XSS_ATTR, 'width', 'colspan'],
th: [...DEFAULT_XSS_ATTR, 'width', 'colspan'],
a: [...DEFAULT_XSS_ATTR, 'target', 'href', 'title', 'rel'],
img: [...DEFAULT_XSS_ATTR, "src", "alt", "width", "height"],
tbody: DEFAULT_XSS_ATTR,
ul: DEFAULT_XSS_ATTR,
li: DEFAULT_XSS_ATTR,
ol: DEFAULT_XSS_ATTR,
dl: DEFAULT_XSS_ATTR,
dt: DEFAULT_XSS_ATTR,
em: DEFAULT_XSS_ATTR,
blockquote: DEFAULT_XSS_ATTR,
},
stripIgnoreTagBody: true
},
defaultOpenValue: 'preview'
}
},
computed: {
language() {
const user = getCurrentUser();
// 取值为空时默认中文，如：导出
if (!user) {
return 'zh_CN';
}
const language = user.language;
switch (language) {
case 'zh_CN':
return 'zh-CN';
case 'zh_TW':
return 'zh-TW';
case 'en_US':
return 'en';
default:
return 'zh-CN';
}
}
},
watch: {
defaultOpen() {
if (this.defaultOpen) {
this.defaultOpenValue = this.defaultOpen;
}
}
},
mounted() {
if (!this.disabled) {
// 点击编辑，失去焦点展示
let el = document.getElementById(this.id);
if (!this.autoReview) {
this.defaultOpenValue = null;
}
if (this.defaultOpen) {
this.defaultOpenValue = this.defaultOpen;
}
if (el) {
el.addEventListener('click', () => {
let imagePreview = el.getElementsByClassName('v-note-img-wrapper');
if (imagePreview.length > 0) { // 图片预览的时候不切换到编辑模式
if (this.autoReview) {
this.defaultOpenValue = 'preview';
}
} else {
if (this.autoReview) {
this.defaultOpenValue = null;
}
}
});
let input = el.getElementsByClassName('auto-textarea-input');
input[0].addEventListener('blur', () => {
if (this.autoReview) {
this.defaultOpenValue = 'preview';
}
});
}
}
},
methods: {
imgAdd(pos, file) {
this.result = true;
uploadMarkDownImg(file, (data) => {
this.$success(this.$t('commons.save_success'));
let url = '/resource/md/get?fileName=' + data;
this.$refs.md.$img2Url(pos, url);
this.result = false;
});
this.$emit('imgAdd', file);
},
imgDel(file) {
deleteMarkDownImg(file);
},
getContent() {
return this.$refs.md.d_render;
},
getTextareaDom() {
return this.$refs.md.getTextareaDom();
},
toolbar_left_click(param) {
this.$refs.md.toolbar_left_click(param);
}
}
}
</script>
<style scoped>
:deep(.v-note-wrapper) {
display: block !important;
position: static !important;
}
:deep(.dropdown-item.dropdown-images) {
display: none;
}
:deep(.v-note-op .v-left-item.transition .op-icon.fa.fa-mavon-picture-o.dropdown.dropdown-wrapper .op-image.popup-dropdown.transition) {
margin-left: 45px;
}
:deep(.v-note-op .v-left-item.transition .add-image-link-wrapper .add-image-link .op-btn.sure) {
background: #783887;
}
</style>

12
framework/sdk-parent/frontend/src/api/img.js
View File

@ -1,5 +1,5 @@
import {getUUID} from "../utils";
import {get, request} from "../plugins/request"
import {fileUpload, get} from "../plugins/request"
export function uploadMarkDownImg(file) {
@ -8,15 +8,7 @@ export function uploadMarkDownImg(file) {
};
file.prefix = param.id;
param.fileName = file.name.substring(file.name.lastIndexOf('.'));
let config = {
method: 'POST',
url: '/plugin/add',
data: param,
headers: {
'Content-Type': undefined
}
};
return request(config);
return fileUpload('/resource/md/upload', file, param);
}
export function deleteMarkDownImg(file) {

2
framework/sdk-parent/frontend/src/components/FormRichTextItem.vue
View File

@ -5,7 +5,7 @@
</template>
<script>
import MsMarkDownText from "./MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
export default {
name: "FormRichTextItem",
components: {MsMarkDownText},

13
framework/sdk-parent/frontend/src/components/MsMarkDownText.vue
View File

@ -184,12 +184,13 @@ export default {
methods: {
imgAdd(pos, file) {
this.result.loading = true;
uploadMarkDownImg(file, (data) => {
this.$success(this.$t('commons.save_success'));
let url = '/resource/md/get?fileName=' + data;
this.$refs.md.$img2Url(pos, url);
this.result.loading = false;
});
uploadMarkDownImg(file)
.then((r) => {
this.$success(this.$t('commons.save_success'));
let url = '/resource/md/get?fileName=' + r.data;
this.$refs.md.$img2Url(pos, url);
this.result.loading = false;
});
this.$emit('imgAdd', file);
},
imgDel(file) {

2
framework/sdk-parent/frontend/src/components/template/CustomFiledComponent.vue
View File

@ -116,7 +116,7 @@
import MsTableColumn from "../table/MsTableColumn";
import MsInputTag from "../MsInputTag";
import {getProjectMemberOption} from "../../api/user";
import MsMarkDownText from "../MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
export default {
name: "CustomFiledComponent",

231
project-management/frontend/src/business/menu/common/MsMarkDownText.vue
View File

@ -1,231 +0,0 @@
<template>
<mavon-editor :id="id" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpenValue"
:xss-options="xssOptions" :style="{'min-height': customMinHeight + 'px', 'min-width': '100px'}"
@change="$emit('change')"
:subfield="false" :toolbars="toolbars" :language="language" :toolbarsFlag="!disabled"
@imgDel="imgDel" v-model="data[prop]" ref="md"/>
</template>
<script>
import {getCurrentUser} from "metersphere-frontend/src/utils/token";
import {getUUID} from "metersphere-frontend/src/utils";
import {deleteMarkDownImg, uploadMarkDownImg} from "../../../api/img";
import {DEFAULT_XSS_ATTR} from "metersphere-frontend/src/utils/constants";
export default {
name: "MsMarkDownText",
components: {},
props: {
data: Object,
prop: String,
disabled: Boolean,
defaultOpen: {
type: String,
default() {
return 'preview';
}
},
autoReview: {
type: Boolean,
default() {
return true;
}
},
customMinHeight: {
type: [Number, String],
default() {
return 20;
}
},
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},
id: getUUID(),
xssOptions: {
whiteList: {
div: DEFAULT_XSS_ATTR,
p: DEFAULT_XSS_ATTR,
br: [],
h1: DEFAULT_XSS_ATTR,
h2: DEFAULT_XSS_ATTR,
h3: DEFAULT_XSS_ATTR,
h4: DEFAULT_XSS_ATTR,
h5: DEFAULT_XSS_ATTR,
h6: DEFAULT_XSS_ATTR,
hr: DEFAULT_XSS_ATTR,
span: DEFAULT_XSS_ATTR,
strong: DEFAULT_XSS_ATTR,
b: DEFAULT_XSS_ATTR,
i: DEFAULT_XSS_ATTR,
pre: DEFAULT_XSS_ATTR,
code: DEFAULT_XSS_ATTR,
tr: DEFAULT_XSS_ATTR,
table: [...DEFAULT_XSS_ATTR, 'width', 'border'],
td: [...DEFAULT_XSS_ATTR, 'width', 'colspan'],
th: [...DEFAULT_XSS_ATTR, 'width', 'colspan'],
a: [...DEFAULT_XSS_ATTR, 'target', 'href', 'title', 'rel'],
img: [...DEFAULT_XSS_ATTR, "src", "alt", "width", "height"],
tbody: DEFAULT_XSS_ATTR,
ul: DEFAULT_XSS_ATTR,
li: DEFAULT_XSS_ATTR,
ol: DEFAULT_XSS_ATTR,
dl: DEFAULT_XSS_ATTR,
dt: DEFAULT_XSS_ATTR,
em: DEFAULT_XSS_ATTR,
blockquote: DEFAULT_XSS_ATTR,
},
stripIgnoreTagBody: true
},
defaultOpenValue: 'preview'
}
},
computed: {
language() {
const user = getCurrentUser();
// 取值为空时默认中文，如：导出
if (!user) {
return 'zh_CN';
}
const language = user.language;
switch (language) {
case 'zh_CN':
return 'zh-CN';
case 'zh_TW':
return 'zh-TW';
case 'en_US':
return 'en';
default:
return 'zh-CN';
}
}
},
watch: {
defaultOpen() {
if (this.defaultOpen) {
this.defaultOpenValue = this.defaultOpen;
}
}
},
mounted() {
if (!this.disabled) {
// 点击编辑，失去焦点展示
let el = document.getElementById(this.id);
if (!this.autoReview) {
this.defaultOpenValue = null;
}
if (this.defaultOpen) {
this.defaultOpenValue = this.defaultOpen;
}
if (el) {
el.addEventListener('click', () => {
let imagePreview = el.getElementsByClassName('v-note-img-wrapper');
if (imagePreview.length > 0) { // 图片预览的时候不切换到编辑模式
if (this.autoReview) {
this.defaultOpenValue = 'preview';
}
} else {
if (this.autoReview) {
this.defaultOpenValue = null;
}
}
});
let input = el.getElementsByClassName('auto-textarea-input');
input[0].addEventListener('blur', () => {
if (this.autoReview) {
this.defaultOpenValue = 'preview';
}
});
}
}
},
methods: {
imgAdd(pos, file) {
this.result.loading = true;
uploadMarkDownImg(file).then(data => {
this.$success(this.$t('commons.save_success'));
let url = '/resource/md/get?fileName=' + data;
this.$refs.md.$img2Url(pos, url);
this.result.loading = false;
})
this.$emit('imgAdd', file);
},
imgDel(file) {
deleteMarkDownImg(file);
},
getContent() {
return this.$refs.md.d_render;
},
getTextareaDom() {
return this.$refs.md.getTextareaDom();
},
toolbar_left_click(param) {
this.$refs.md.toolbar_left_click(param);
}
}
}
</script>
<style scoped>
:deep(.v-note-wrapper) {
display: block !important;
position: static !important;
}
:deep(.dropdown-item.dropdown-images) {
display: none;
}
:deep(.v-note-op .v-left-item.transition .op-icon.fa.fa-mavon-picture-o.dropdown.dropdown-wrapper .op-image.popup-dropdown.transition) {
margin-left: 45px;
}
:deep(.v-note-op .v-left-item.transition .add-image-link-wrapper .add-image-link .op-btn.sure) {
background: #783887;
}
</style>

2
project-management/frontend/src/business/menu/template/CustomFiledComponent.vue
View File

@ -121,7 +121,7 @@
<script>
import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
import MsInputTag from "metersphere-frontend/src/components/MsInputTag";
import MsMarkDownText from "../common/MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
import {getProjectMemberOption} from "metersphere-frontend/src/api/user"
export default {

2
project-management/frontend/src/business/menu/template/ext/FormRichTextItem.vue
View File

@ -5,7 +5,7 @@
</template>
<script>
import MsMarkDownText from "../../common/MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
export default {
name: "FormRichTextItem",

231
report-stat/frontend/src/business/compnent/form/MsMarkDownText.vue
View File

@ -1,231 +0,0 @@
<template>
<mavon-editor :id="id" :editable="!disabled" @imgAdd="imgAdd" :default-open="defaultOpenValue"
:xss-options="xssOptions" :style="{'min-height': customMinHeight + 'px', 'min-width': '100px'}"
@change="$emit('change')"
:subfield="false" :toolbars="toolbars" :language="language" :toolbarsFlag="!disabled"
@imgDel="imgDel" v-model="data[prop]" ref="md"/>
</template>
<script>
import {getCurrentUser} from "metersphere-frontend/src/utils/token";
import {getUUID} from "metersphere-frontend/src/utils";
import {deleteMarkDownImg, uploadMarkDownImg} from "@/api/img";
import {DEFAULT_XSS_ATTR} from "metersphere-frontend/src/utils/constants";
export default {
name: "MsMarkDownText",
components: {},
props: {
data: Object,
prop: String,
disabled: Boolean,
defaultOpen: {
type: String,
default() {
return 'preview';
}
},
autoReview: {
type: Boolean,
default() {
return true;
}
},
customMinHeight: {
type: [Number, String],
default() {
return 20;
}
},
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},
id: getUUID(),
xssOptions: {
whiteList: {
div: DEFAULT_XSS_ATTR,
p: DEFAULT_XSS_ATTR,
br: [],
h1: DEFAULT_XSS_ATTR,
h2: DEFAULT_XSS_ATTR,
h3: DEFAULT_XSS_ATTR,
h4: DEFAULT_XSS_ATTR,
h5: DEFAULT_XSS_ATTR,
h6: DEFAULT_XSS_ATTR,
hr: DEFAULT_XSS_ATTR,
span: DEFAULT_XSS_ATTR,
strong: DEFAULT_XSS_ATTR,
b: DEFAULT_XSS_ATTR,
i: DEFAULT_XSS_ATTR,
pre: DEFAULT_XSS_ATTR,
code: DEFAULT_XSS_ATTR,
tr: DEFAULT_XSS_ATTR,
table: [...DEFAULT_XSS_ATTR, 'width', 'border'],
td: [...DEFAULT_XSS_ATTR, 'width', 'colspan'],
th: [...DEFAULT_XSS_ATTR, 'width', 'colspan'],
a: [...DEFAULT_XSS_ATTR, 'target', 'href', 'title', 'rel'],
img: [...DEFAULT_XSS_ATTR, "src", "alt", "width", "height"],
tbody: DEFAULT_XSS_ATTR,
ul: DEFAULT_XSS_ATTR,
li: DEFAULT_XSS_ATTR,
ol: DEFAULT_XSS_ATTR,
dl: DEFAULT_XSS_ATTR,
dt: DEFAULT_XSS_ATTR,
em: DEFAULT_XSS_ATTR,
blockquote: DEFAULT_XSS_ATTR,
},
stripIgnoreTagBody: true
},
defaultOpenValue: 'preview'
}
},
computed: {
language() {
const user = getCurrentUser();
// 取值为空时默认中文，如：导出
if (!user) {
return 'zh_CN';
}
const language = user.language;
switch (language) {
case 'zh_CN':
return 'zh-CN';
case 'zh_TW':
return 'zh-TW';
case 'en_US':
return 'en';
default:
return 'zh-CN';
}
}
},
watch: {
defaultOpen() {
if (this.defaultOpen) {
this.defaultOpenValue = this.defaultOpen;
}
}
},
mounted() {
if (!this.disabled) {
// 点击编辑，失去焦点展示
let el = document.getElementById(this.id);
if (!this.autoReview) {
this.defaultOpenValue = null;
}
if (this.defaultOpen) {
this.defaultOpenValue = this.defaultOpen;
}
if (el) {
el.addEventListener('click', () => {
let imagePreview = el.getElementsByClassName('v-note-img-wrapper');
if (imagePreview.length > 0) { // 图片预览的时候不切换到编辑模式
if (this.autoReview) {
this.defaultOpenValue = 'preview';
}
} else {
if (this.autoReview) {
this.defaultOpenValue = null;
}
}
});
let input = el.getElementsByClassName('auto-textarea-input');
input[0].addEventListener('blur', () => {
if (this.autoReview) {
this.defaultOpenValue = 'preview';
}
});
}
}
},
methods: {
imgAdd(pos, file) {
this.result.loading = true;
uploadMarkDownImg(file).then(response => {
this.$success(this.$t('commons.save_success'));
let url = '/resource/md/get?fileName=' + response.data;
this.$refs.md.$img2Url(pos, url);
this.result.loading = false;
})
this.$emit('imgAdd', file);
},
imgDel(file) {
deleteMarkDownImg(file);
},
getContent() {
return this.$refs.md.d_render;
},
getTextareaDom() {
return this.$refs.md.getTextareaDom();
},
toolbar_left_click(param) {
this.$refs.md.toolbar_left_click(param);
}
}
}
</script>
<style scoped>
:deep(.v-note-wrapper) {
display: block !important;
position: static !important;
}
:deep(.dropdown-item.dropdown-images) {
display: none;
}
:deep(.v-note-op .v-left-item.transition .op-icon.fa.fa-mavon-picture-o.dropdown.dropdown-wrapper .op-image.popup-dropdown.transition) {
margin-left: 45px;
}
:deep(.v-note-op .v-left-item.transition .add-image-link-wrapper .add-image-link .op-btn.sure) {
background: #783887;
}
</style>

2
report-stat/frontend/src/business/enterprisereport/components/container/ReportAttachInfo.vue
View File

@ -17,7 +17,7 @@
<script>
import MsMarkDownText from "@/business/compnent/form/MsMarkDownText";
import MsMarkDownText from "metersphere-frontend/src/components/MsMarkDownText";
export default {
name: "ReportAttachInfo",