批注列表显示

This commit is contained in:
2025-01-02 16:21:50 +08:00
parent 46fd1eefc1
commit 349e5ea72a
4 changed files with 84 additions and 51 deletions

View File

@@ -68,6 +68,7 @@
ref="commonWordHtmlTypeSetting"
@onDragStart="onDragStart"
@huifu="huifu"
@onAddComment="onAddComment"
@add="handleImageAdd"
@addComment="addCommentSetting"
@goToComment="goToComment"
@@ -128,7 +129,7 @@
<el-upload
:data="{ article_id: articleId }"
class="avatar-uploader"
:action="baseUrl+'api/Preaccept/up_img_mainImage'"
:action="baseUrl + 'api/Preaccept/up_img_mainImage'"
:show-file-list="false"
name="mainImage"
accept=".jpg,.jpeg,.png,.tif"
@@ -147,7 +148,7 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" >
<span slot="footer" class="dialog-footer">
<el-button @click="pictVisible = false"> Cancel </el-button>
<el-button type="primary" @click="savePic">
<i class="el-icon-finished" style="margin-right: 5px"></i>
@@ -401,7 +402,6 @@ export default {
// console.log('value1 或 value2 发生变化');
// console.log('新值:', newVal);
// console.log('旧值:', oldVal);
// // 处理任意一个值变化的逻辑
// this.updateWordTiffImage(newVal);
// }
@@ -453,48 +453,46 @@ export default {
},
async getContent(type, content) {
if (type == 'content') {
// 使用正则表达式移除所有不允许的标签
// 1. 移除不允许的标签
content = content.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
// 使用正则表达式移除所有不允许的标签
// 1. 移除不允许的标签
content = content.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');
// 2. 移除所有 style 属性
content = content.replace(/\s*style="[^"]*"/g, '');
// 2. 移除所有 style 属性
content = content.replace(/\s*style="[^"]*"/g, '');
// 3. 将 <strong> 转换为 <b><em> 转换为 <i>
// 3. 将 <strong> 转换为 <b><em> 转换为 <i>
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
var div = document.createElement('div');
div.innerHTML = content; // 将 HTML 字符串加载到 div 中
// 替换所有 <strong> 为 <b>
var strongTags = div.getElementsByTagName('strong');
for (var i = 0; i < strongTags.length; i++) {
var bTag = document.createElement('b');
bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
}
// 替换所有 <strong> 为 <b>
var strongTags = div.getElementsByTagName('strong');
for (var i = 0; i < strongTags.length; i++) {
var bTag = document.createElement('b');
bTag.innerHTML = strongTags[i].innerHTML; // 保留内容
strongTags[i].parentNode.replaceChild(bTag, strongTags[i]);
}
// 替换所有 <em> 为 <i>
var emTags = div.getElementsByTagName('em');
for (var i = 0; i < emTags.length; i++) {
var iTag = document.createElement('i');
iTag.innerHTML = emTags[i].innerHTML; // 保留内容
emTags[i].parentNode.replaceChild(iTag, emTags[i]);
}
// 替换所有 <em> 为 <i>
var emTags = div.getElementsByTagName('em');
for (var i = 0; i < emTags.length; i++) {
var iTag = document.createElement('i');
iTag.innerHTML = emTags[i].innerHTML; // 保留内容
emTags[i].parentNode.replaceChild(iTag, emTags[i]);
}
// 获取最终修改后的 HTML
content = div.innerHTML;
console.log('content at line 486:', content);
// 获取最终修改后的 HTML
content = div.innerHTML;
// // 4. 去除多余的空格:替换连续的空格、换行符、制表符等
// content = content.replace(/\s+/g, ' ').trim(); // 将多个空白字符替换为一个空格,并去除前后空白
// // 5. 去除标签之间的空格
// content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
// 4. 去除多余的空格:替换连续的空格、换行符、制表符等
content = content.replace(/\s+/g, ' ').trim(); // 将多个空白字符替换为一个空格,并去除前后空白
// 5. 去除标签之间的空格
content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
// 6. 如果需要,还可以去除 <span> 标签内部的空格
// content = content.replace(/<span[^>]*>\s*([^<]+)\s*<\/span>/g, '<span>$1</span>'); // 清理 <span> 标签内部的空格
// 6. 如果需要,还可以去除 <span> 标签内部的空格
// content = content.replace(/<span[^>]*>\s*([^<]+)\s*<\/span>/g, '<span>$1</span>'); // 清理 <span> 标签内部的空格
this.saveContent(content);
} else if (type == 'table') {
@@ -558,7 +556,6 @@ content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
if (res.code == 0) {
this.ManuscirptContent = res.data.list;
this.$refs.commonWordHtmlTypeSetting.getCommentList();
}
});
},
@@ -690,9 +687,7 @@ content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
this.$forceUpdate();
this.commentVisible = false;
this.getDate();
this.$nextTick(() => {
});
this.$nextTick(() => {});
} else {
this.$message.error(res.msg);
}
@@ -717,6 +712,7 @@ content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
console.log('data at line 575:', data);
},
async onAddComment(dataId) {
console.log('dataId at line 721:', dataId);
var data = this.Main_List.find((item) => item.am_id == dataId);
this.commentForm = {
...data
@@ -878,11 +874,14 @@ content = content.replace(/>\s+</g, '><'); // 去除标签之间的空格
//批注
let contentHtml = '';
var isRemark = ``;
if (item.state == 2 && item.remark && item.remark != '') {
if (item.remark && item.remark != '') {
// isRemark = `<img class="isRemark" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width:20px;height:20px;"/>`;
isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${this.remarkImageUrl}" alt="" style="width: 20px; height: 20px" />
isRemark = `<span class="isRemark" main-id="${item.am_id}"><img class="isRemarkIcon" main-id="${item.am_id}" src="${
this.remarkImageUrl
}" alt="" style="width: 20px; height: 20px" />
<span class="isRemarkIcon" main-id="${item.am_id}" > (${item.am_id})</span>
${item.state == 0 ? `<span class="Resolved" main-id="${item.am_id}">Resolved</span>` : ''}
</span>
`;