批注列表显示

2025-01-02 16:21:50 +08:00
parent 46fd1eefc1
commit 349e5ea72a
4 changed files with 84 additions and 51 deletions
--- a/src/components/page/GenerateCharts.vue
+++ b/src/components/page/GenerateCharts.vue
@@ -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);
        // }
@@ -457,44 +457,42 @@ export default {
                // 1. 移除不允许的标签
                content = content.replace(/<(?!\/?(img|b|i|sub|sup|span|strong|em |blue)\b)[^>]+>/g, '');

-// 2. 移除所有 style 属性
-content = content.replace(/\s*style="[^"]*"/g, '');
-
-// 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>
+                // 2. 移除所有 style 属性
+                content = content.replace(/\s*style="[^"]*"/g, '');

+                // 3. 将 <strong> 转换为 <b>，<em> 转换为 <i>

                var div = document.createElement('div');
-div.innerHTML = content; // 将 HTML 字符串加载到 div 中
+                div.innerHTML = content; // 将 HTML 字符串加载到 div 中

-// 替换所有 <strong> 为 <b>
-var strongTags = div.getElementsByTagName('strong');
-for (var i = 0; i < strongTags.length; 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++) {
+                // 替换所有 <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;
+                // 获取最终修改后的 HTML
+                content = div.innerHTML;
+                console.log('content at line 486:', content);

+                // // 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>
                    
                `;
--- a/src/components/page/components/Tinymce/index.vue
+++ b/src/components/page/components/Tinymce/index.vue
@@ -594,6 +594,7 @@ export default {
            var content = window.tinymce.get(this.tinymceId).getContent();
            content = content.replace(/<strong>/g, '<b>').replace(/<\/strong>/g, '</b>');
            content = content.replace(/<em>/g, '<i>').replace(/<\/em>/g, '</i>');
+            content = content.replace(/&nbsp;/g, ' '); // 将所有 &nbsp; 替换为空格
            this.$emit('getContent', type, content);
            console.log('window.tinymce.get(this.tinymceId).getContent() at line 431:', content);
        },
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -363,6 +363,17 @@ export default {
    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;
                            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'));
                            }
                        });
--- a/src/components/page/components/table/wordHtmlTypesetting.vue
+++ b/src/components/page/components/table/wordHtmlTypesetting.vue
@@ -86,17 +86,23 @@

                                <!-- 当 isEditing 为 false 时，显示评论文本 -->
                                <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>

-                                    <!-- <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"
-                                        v-if="isShowComment"
+                                        v-if="isEditComment"
                                        @click="deleteComment(comment, index)"
-                                        style="color: #cd5454"
-                                    ></i> -->
+                                        style="color: rgb(252, 98, 93)"
+                                    ></i>
                                </div>

                                <!-- 删除按钮 -->
@@ -475,17 +481,32 @@ export default {
                this.isEditing = null; // 退出编辑模式
            }
        },
+        onAddComment(comment) {
+            if (this.isEditComment) {
+                this.$emit('onAddComment',comment.am_id)
+                // this.isEditing = null; // 退出编辑模式
+            }
+        },

        // 删除评论
        deleteComment(comment, index) {
-            if (this.isShowComment) {
+        console.log('comment at line 480:', comment)
+            if (this.isEditComment) {
                this.$confirm(this.$t('commonTable.removeAnnotations'), 'Prompt', {
                    confirmButtonText: 'Submit',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                })
                    .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(() => {});
            }
@@ -525,6 +546,7 @@ export default {
                    this.comments = res.data.list;
                    console.log('this.comments at line 537:', this.comments);
                });
+          
        },
        add(type) {
            this.$emit('add', type);