From 3a62f5ba564528f5a223d39552232d939c8ecb17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=8B=E4=BA=8E=E5=88=9D=E8=A7=81?= <752204717@qq.com>
Date: Thu, 26 Dec 2024 13:06:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/page/articleListEditor_B1.vue  |   6 +-
 src/components/page/comArtHtmlCreatNew.vue    | 287 ++++++++++++++++++
 src/components/page/components/table/word.vue |  21 +-
 src/router/index.js                           |   7 +
 4 files changed, 309 insertions(+), 12 deletions(-)
 create mode 100644 src/components/page/comArtHtmlCreatNew.vue

diff --git a/src/components/page/articleListEditor_B1.vue b/src/components/page/articleListEditor_B1.vue
index 7f0ddcb..4331ee0 100644
--- a/src/components/page/articleListEditor_B1.vue
+++ b/src/components/page/articleListEditor_B1.vue
@@ -2058,13 +2058,13 @@
 			// 6----校对文章
 			htmlContet() {
 				this.$api
-					.post('api/Production/getProductionMains', {
-						p_article_id: this.p_article_id
+					.post('api/Preaccept/getArticleMains', {
+						article_id: this.detailMes.article_id
 					})
 					.then(res => {
 						if (res.code == 0) {
 							this.$router.push({
-								path: 'comArtHtmlCreat',
+								path: 'comArtHtmlCreatNew',
 								query: {
 									id: this.p_article_id
 								}
diff --git a/src/components/page/comArtHtmlCreatNew.vue b/src/components/page/comArtHtmlCreatNew.vue
new file mode 100644
index 0000000..b24b779
--- /dev/null
+++ b/src/components/page/comArtHtmlCreatNew.vue
@@ -0,0 +1,287 @@
+<template>
+    <div style="height: 98%;">
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item> <i class="el-icon-document-copy"></i> Artcile Html </el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container" style="height: 97%; min-width: 1000px; background-color: #fafafa; padding: 10px 0 0 0">
+          
+
+            <common-word
+            :readonly="true"
+                v-if="htmlContent"
+                ref="commonWord"
+                :value="htmlContent"
+                :wordStyle="wordStyle"
+                style="width: calc(100%); height: calc(100%); "
+                :style="`100%`"
+            ></common-word>
+        </div>
+    </div>
+</template>
+
+<script>
+import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
+export default {
+    data() {
+        return {
+            wordStyle: `
+            p {
+            position: relative;
+            padding: 8px 15px;
+            min-height: 22px;
+            border: 2px dashed #fff;
+            border-radius: 5px;
+            color: #606266;
+            }
+            p {
+            font-size: 14px;
+            line-height: 22px;
+            }
+
+            .imgBox .chNumer {
+            position: absolute;
+            top: -2px;
+            right: -1px;
+            border-radius: 3px;
+            font-size: 10px;
+            background-color: rgb(0 102 153 / 85%);
+            color: #fff;
+            padding: 0 6px;
+            }
+
+            .MaxPicture {
+            text-align: center;
+            }
+
+            .MaxPicture > img {
+            margin-bottom: 10px;
+            }
+
+            .font {
+            display: block;
+            margin: 0 auto;
+            font-size: 13px;
+            }
+            .tableTitle{
+                text-align:center!important;
+                font-weight: bold;
+            }
+            `,
+            detailMes: {},
+            baseUrl: this.Common.baseUrl,
+            mediaUrl: mediaUrl, //
+            Art_Id: this.$route.query.id,
+            Art_Doi: this.$route.query.doi,
+            Art_web_Id: this.$route.query.artID,
+            Art_P_Id: '',
+            btnDisble: true,
+            detailTitle: '',
+            htmlContent: '',
+            Main_List: [],
+            exegesis: "The following contents'<b></b>,<i></i>'are necessary for the generation phase, please do not delete them!!!"
+        };
+    },
+
+    created() {
+        this.getInfo();
+    },
+    activated() {
+        this.getInfo();
+    },
+    methods: {
+        async getInfo() {
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading...',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            // 获取文章信息
+            await this.$api
+                .post('api/Production/getProductionDetail', { p_article_id: this.Art_Id })
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.detailTitle = res.data.production.title
+                        this.detailMes = res.data.production;
+                        await this.getDate(loading);
+
+                        loading.close();
+                    } else {
+                        this.$message.error(res.msg);
+                        loading.close();
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                    loading.close();
+                });
+        },
+        getWord() {
+            var htmlContent = `<h3 class="man_Title"  contenteditable="false">${this.detailTitle} </h3>`;
+            htmlContent += this.Main_List.map((item) => {
+                //批注
+                let contentHtml = '';
+                var isRemark = ``;
+                // if (item.state == 2 && 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" />
+                       
+                //          <span class="isRemarkIcon"  main-id="${item.am_id}" > (${item.am_id})</span>
+                // </span>
+                    
+                // `;
+                // }
+                // 判断是否是图片
+                if (item.type == 1) {
+                   
+
+                    var extension = item.image.url.split('.').pop().toLowerCase();
+                    if (extension == 'tif') {
+                        contentHtml = `
+                        <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${item.ami_id}" main-id="${
+                            item.am_id
+                        }">
+            <img src="" data-img-id="${item.ami_id}" style="width: ${item.width ? `${item.width}px` : '100%'}" />
+            <font class="font" style="width: ${item.width ? `${item.width}px` : '100%'}">${item.image.note ? item.image.note : ''}</font>
+        </p>
+                            `;
+                    } else if (['jpg', 'jpeg', 'png'].includes(extension)) {
+                        contentHtml = `
+                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
+                            item.ami_id
+                        }" main-id="${item.am_id}">
+                                    ${isRemark}
+                                    <img src="${this.mediaUrl + item.image.url}" style="width: ${
+                            item.width ? `${item.width}px` : '100%'
+                        }"  />
+                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
+                            item.image.note ? item.image.note : ''
+                        }</font>
+                                </p>
+                            `;
+                    } else {
+                        contentHtml = `
+                                <p contenteditable="false" main-state="${item.state}" class="MaxPicture pMain" data-id="${
+                            item.ami_id
+                        }" main-id="${item.am_id}">
+                                   ${isRemark}
+                                    <span
+                                            style="
+                                                text-align: center;
+                                                font-size: 30px;
+                                                display: flex;
+                                                align-items: center;
+                                                justify-content: center;
+                                            "
+                                        >
+                                        Figures ( .${item.image.url.split('.').pop().toUpperCase()})
+                                              </span>
+
+                                   <font  class="font" style="width: ${item.width ? `${item.width}px` : '100%'}" >${
+                            item.image.note ? item.image.note : ''
+                        }</font>
+                                </p>
+                            `;
+                    }
+                } else if (item.type == 2) {
+                    var tableList = JSON.parse(item.table.table_data);
+
+                    contentHtml = `
+    <div contenteditable="false" data-id="${item.amt_id}" main-state="${item.state}" main-id="${
+                        item.am_id
+                    }" class="thumbnailTableBox wordTableHtml table_Box pMain" style="width: 100%; padding: 8px 15px; box-sizing: border-box; border-radius: 4px; position: relative;">
+        ${isRemark}
+        <font  class="font tableTitle" style="width:100%" >${item.table.title ? item.table.title : ''}</font>
+                    <table border="1" style="width: auto; border-collapse: collapse; text-align: center; ">
+            ${tableList
+                .map((row) => {
+                    return `
+                    <tr>
+                        ${row
+                            .map((cell) => {
+                                return `
+                                <td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}">
+                                    <span>${cell.text || ''}</span>
+                                </td>
+                            `;
+                            })
+                            .join('')} <!-- join the cells in the row -->
+                    </tr>
+                `;
+                })
+                .join('')} <!-- join the rows -->
+        </table>
+        <font  class="font" style="width:100%" >${item.table.note ? item.table.note : ''}</font>
+    </div>
+`;
+                } else {
+                    contentHtml = `<p class="pMain" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}">${isRemark}${item.content}</p>`;
+                }
+
+                // 判断是否是表格类型
+
+                return contentHtml;
+            }).join('');
+            this.htmlContent = htmlContent;
+        },
+        async getDate(loading) {
+            let urlLInk = '';
+            let urlTask = {};
+            if (this.Art_Id != undefined) {
+                urlLInk = 'api/Preaccept/getArticleMains';
+                urlTask.article_id = this.detailMes.article_id;
+            }
+
+            // 获取文章信息
+            await this.$api
+                .post(urlLInk, urlTask)
+                .then(async (res) => {
+                    if (res.code == 0) {
+                        this.Main_List = res.data.list;
+                        // this.detailTitle = res.data.production.title
+                        for (let i = 0; i < this.Main_List.length; i++) {
+                            this.Main_List[i].text = this.Main_List[i].content;
+                            this.Main_List[i].getnum = 0;
+                        }
+
+                        // setTimeout(async () => {
+                        this.$nextTick(async () => {
+                            await this.getWord();
+                            loading.close();
+                        });
+                        loading.close();
+                    } else {
+                        this.$message.error(res.msg);
+                        loading.close();
+                    }
+                })
+                .catch((err) => {
+                    this.$message.error(err);
+                    loading.close();
+                });
+        }
+    }
+};
+</script>
+
+<style scoped>
+.man_Title {
+    background-color: #fff;
+    margin: 0 0 10px 0;
+    border-bottom: 1px solid #dde1eb;
+    box-shadow: 0 5px 5px -2px rgb(134 134 134);
+    padding: 12px 25px 8px 25px;
+    font-size: 16px;
+    line-height: 24px;
+    color: #333;
+    position: relative;
+}
+
+.man_Title button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+</style>
diff --git a/src/components/page/components/table/word.vue b/src/components/page/components/table/word.vue
index e368e10..b7796d7 100644
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -123,6 +123,12 @@ export default {
         id: {
             type: String
         },
+        readonly: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
         value: {
             type: String,
             default: ''
@@ -380,7 +386,8 @@ export default {
                 content_css: 'default',
 
                 setup(ed) {
-                    ed.on('click', function (e) {
+                    if(!_this.readonly){
+ed.on('click', function (e) {
                         // 判断点击的是否是目标元素
                         const target = e.target;
                         console.log('target at line 351:', target);
@@ -422,7 +429,6 @@ export default {
                         }
                     });
                     // 监听焦点变化并高亮当前选中的元素
-
                     ed.on('selectionChange', function () {
                         _this.updateCurrentTag(ed);
                     });
@@ -430,8 +436,7 @@ export default {
                     ed.on('mouseup', function () {
                         _this.updateCurrentTag(ed);
                     });
-
-                    ed.on('blur', function () {
+  ed.on('blur', function () {
                         console.log('_this.lastPTag at line 367:', _this.lastTag);
                         if (_this.lastTag) {
                             _this.lastTag.style.backgroundColor = ''; // 清除之前的高亮
@@ -619,11 +624,6 @@ export default {
                         // 将容器添加到页面中
                         document.body.appendChild(wordButtonContainer);
                     }
-
-                    // 获取 TinyMCE iframe 内部的 document 对象
-
-                    // 监听 TinyMCE iframe 内容区域的滚动事件
-
                     ed.on('mousedown', function (e) {
                         // 检查点击的位置是否是删除按钮或选中的 <p> 标签
                         if (!currentParagraph || (e.target !== wordButtonContainer && !currentParagraph.contains(e.target))) {
@@ -633,6 +633,9 @@ export default {
                             }
                         }
                     });
+                    }
+                    
+                  
                 },
 
                 init_instance_callback: (editor) => {
diff --git a/src/router/index.js b/src/router/index.js
index 999e293..7f4f176 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -173,6 +173,13 @@ export default new Router({
 				title: 'Artcile Html'
 			}
 		},
+		{
+			path: 'comArtHtmlCreatNew',
+			component: () => import('../components/page/comArtHtmlCreatNew.vue'),
+			meta: {
+				title: 'Artcile Html'
+			}
+		},
 		{
 			path: 'comArtHtmlEdit',
 			component: () => import('../components/page/comArtHtmlEdit.vue'),