zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

批注列表显示

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/page/GenerateCharts.vue
View File

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

1
src/components/page/components/Tinymce/index.vue
View File

@@ -594,6 +594,7 @@ export default {
var content = window.tinymce.get(this.tinymceId).getContent(); var content = window.tinymce.get(this.tinymceId).getContent();
content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>'); content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>'); content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
content = content.replace(/&nbsp;/g, ' '); // 将所有 &nbsp; 替换为空格
this.$emit('getContent', type, content); this.$emit('getContent', type, content);
console.log('window.tinymce.get(this.tinymceId).getContent() at line 431:', content); console.log('window.tinymce.get(this.tinymceId).getContent() at line 431:', content);
}, },

13
src/components/page/components/table/word.vue
View File

@@ -363,6 +363,17 @@ export default {
font-size: 12px;display:inline-block; font-size: 12px;display:inline-block;
}
.isRemark .Resolved{
background-color: #67c23a;
margin-left:10px;
border-color: #67c23a;
color:#fff;
font-weight:bold;
border-radius:2px;
} }
@@ -415,7 +426,7 @@ export default {
const target = e.target; const target = e.target;
console.log('target at line 351:', target); console.log('target at line 351:', target);
if (target.classList.contains('isRemarkIcon')) { if (target.classList.contains('isRemarkIcon')||target.classList.contains('Resolved')) {
_this.$emit('onComment', target.getAttribute('main-id')); _this.$emit('onComment', target.getAttribute('main-id'));
} }
}); });

38
src/components/page/components/table/wordHtmlTypesetting.vue
View File

@@ -86,17 +86,23 @@
<!-- 当 isEditing 为 false 时，显示评论文本 --> <!-- 当 isEditing 为 false 时，显示评论文本 -->
<div style="display: flex; align-items: center; justify-content: space-between"> <div style="display: flex; align-items: center; justify-content: space-between">
<p style="min-height: 20px; width: calc(100%);white-space: normal;" v-html="comment.remark"> <p :style="isEditComment?'width: calc(100% - 40px)':'width: calc(100%)'" style="min-height: 20px; width: calc(100%);white-space: normal;" v-html="comment.remark">
<!-- <span @click="editComment(index)" style="cursor: pointer; color: #007bff; margin-left: 10px;">修改</span> --> <span @click="editComment(index)" style="cursor: pointer; color: #007bff; margin-left: 10px;">Edit</span>
</p> </p>
<!-- <i <i
class="el-icon-edit"
v-if="isEditComment"
@click="onAddComment(comment,index)"
style="color: #006699 ;margin-right: 10px;"
></i>
<i
class="el-icon-delete" class="el-icon-delete"
v-if="isShowComment" v-if="isEditComment"
@click="deleteComment(comment, index)" @click="deleteComment(comment, index)"
style="color: #cd5454" style="color: rgb(252, 98, 93)"
></i> --> ></i>
</div> </div>
<!-- 删除按钮 --> <!-- 删除按钮 -->
@@ -475,17 +481,32 @@ export default {
this.isEditing = null; // 退出编辑模式 this.isEditing = null; // 退出编辑模式
} }
}, },
onAddComment(comment) {
if (this.isEditComment) {
this.$emit('onAddComment',comment.am_id)
// this.isEditing = null; // 退出编辑模式
}
},
// 删除评论 // 删除评论
deleteComment(comment, index) { deleteComment(comment, index) {
if (this.isShowComment) { console.log('comment at line 480:', comment)
if (this.isEditComment) {
this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', { this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
confirmButtonText: 'Submit', confirmButtonText: 'Submit',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
type: 'warning' type: 'warning'
}) })
.then(() => { .then(() => {
this.comments.splice(index, 1); // 删除评论
this.$api
.post('api/Preaccept/clearMainsRemark', {
am_id: comment.am_id
})
.then((res) => {
this.getCommentList()
});
// this.comments.splice(index, 1); // 删除评论
}) })
.catch(() => {}); .catch(() => {});
} }
@@ -525,6 +546,7 @@ export default {
this.comments = res.data.list; this.comments = res.data.list;
console.log('this.comments at line 537:', this.comments); console.log('this.comments at line 537:', this.comments);
}); });
}, },
add(type) { add(type) {
this.$emit('add', type); this.$emit('add', type);