表格参考文献的预览

2026-04-13 16:42:26 +08:00
parent 563def58a5
commit eff107aa15
8 changed files with 268 additions and 27 deletions
--- a/src/components/page/GenerateCharts.vue
+++ b/src/components/page/GenerateCharts.vue
@@ -57,6 +57,8 @@
                            table: 'api/Preaccept/getMainTables'
                        }"
                        :articleId="articleId"
+                        :bodyCiteIdOrder="articleCiteIdOrder"
+                        :chanFerForm="chanFerForm"
                        :content="ManuscirptContent"
                        ref="commonWordHtmlTypeSetting"
                        @onDragStart="onDragStart"
--- a/src/components/page/components/Tinymce/index.vue
+++ b/src/components/page/components/Tinymce/index.vue
@@ -681,11 +681,12 @@ export default {
                    const noCite = ref ? citeMap[String(id)] : null;
                    const noTable =
                        useTableBracketNums && tableNums[String(id)] != null ? tableNums[String(id)] : null;
+                    // 单元格内 [n] 按 Original order（table 序号）匹配；角标展示与正文一致，优先用 citeMap 对应序号
                    const num =
-                        noTable != null && noTable !== '' && !Number.isNaN(Number(noTable))
-                            ? String(noTable)
-                            : noCite != null && noCite !== ''
-                              ? String(noCite)
+                        noCite != null && noCite !== '' && !Number.isNaN(Number(noCite))
+                            ? String(noCite)
+                            : noTable != null && noTable !== '' && !Number.isNaN(Number(noTable))
+                              ? String(noTable)
                              : null;
                    return { id, ref, num };
                });
--- a/src/components/page/components/table/DynamicTable.vue
+++ b/src/components/page/components/table/DynamicTable.vue
@@ -58,9 +58,25 @@
 <script>
 import { TableUtils } from '@/common/js/TableUtils';
 import { mediaUrl } from '@/common/js/commonJS.js';
+import {
+  buildCiteMapFromRefs,
+  applyCiteLabelsToTableRows
+} from '@/common/js/citeTablePreview.js';

 export default {
  name: 'TablePreviewer',
+  props: {
+    /** 与稿面 chanFerForm 一致，用于把单元格内 <mycite> 显示为 [n] */
+    referenceList: {
+      type: Array,
+      default: () => []
+    },
+    /** 正文引用首次出现顺序（p_refer_id），与 GenerateCharts articleCiteIdOrder 一致 */
+    bodyCiteIdOrder: {
+      type: Array,
+      default: () => []
+    }
+  },
  data() {
    return {
      visible: false,
@@ -70,23 +86,32 @@ export default {
      mediaUrl,
    };
  },
+  computed: {
+    previewCiteMap() {
+      return buildCiteMapFromRefs(this.referenceList, this.bodyCiteIdOrder);
+    }
+  },
  methods: {
-    async open(type, item,isNoBg) {
+    async open(type, item, isNoBg) {
      this.visible = true;
      this.type = type;
+      const hideOddRowBg = isNoBg === true || isNoBg === 'true' || isNoBg === 1 || isNoBg === '1';
      
      if (type === 'table') {
        this.loading = true;
        setTimeout(() => {
          try {
-            const processed = this.processTableData(item.table);
+            const processed = this.processTableData(item.table, {
+              refs: this.referenceList,
+              citeMap: this.previewCiteMap
+            });
            this.processedItem = Object.freeze({
              ...item,
              table: {
                ...item.table,
                tableHeader: processed.tableHeader,
                tableContent: processed.tableContent,
-                oddRowIds: isNoBg ? [] : processed.oddRowIds
+                oddRowIds: hideOddRowBg ? [] : processed.oddRowIds
              }
            });
          } catch (err) {
@@ -97,6 +122,7 @@ export default {
        }, 50);
      } else {
        this.processedItem = item;
+
      }

      // 数学公式渲染
@@ -105,12 +131,20 @@ export default {
      }, 500);
    },

-    processTableData(rawContent) {
+    processTableData(rawContent, citeCtx) {
      try {
        const tableList = typeof rawContent === 'string' ? JSON.parse(rawContent) : rawContent;
        const { header, content } = TableUtils.splitTable(tableList);
        const { rowData, rowIds } = TableUtils.addRowIdToData(content);
-        return { tableHeader: header, tableContent: rowData, oddRowIds: rowIds };
+        const refs = citeCtx && citeCtx.refs;
+        const citeMap = citeCtx && citeCtx.citeMap;
+        let tableHeader = header;
+        let tableContent = rowData;
+        if (Array.isArray(refs) && refs.length > 0 && citeMap && typeof citeMap === 'object') {
+          tableHeader = applyCiteLabelsToTableRows(header, refs, citeMap);
+          tableContent = applyCiteLabelsToTableRows(rowData, refs, citeMap);
+        }
+        return { tableHeader, tableContent, oddRowIds: rowIds };
      } catch (e) {
        return { tableHeader: [], tableContent: [], oddRowIds: [] };
      }
@@ -238,6 +272,16 @@ export default {
  background: rgb(250, 231, 232) !important;
 }

+/* 与稿面 mycite 引用样式一致，弹窗内可见 [n] */
+.table_Box ::v-deep mycite {
+  display: inline;
+  vertical-align: baseline;
+  color: rgb(0, 130, 170) !important;
+  cursor: inherit;
+  text-decoration: none;
+  background-color: rgba(0, 130, 170, 0.08);
+}
+
 .table-fade-enter-active, .table-fade-leave-active { transition: opacity 0.3s ease; }
 .table-fade-enter, .table-fade-leave-to { opacity: 0; }
 </style>
--- a/src/components/page/components/table/word.vue
+++ b/src/components/page/components/table/word.vue
@@ -1102,21 +1102,21 @@
                    :key="`body-${it.id}-${idx}`"
                    :class="['cite-preview-item', { 'is-active': idx === citePreviewActiveIndex }]"
                >
-                    <div class="cite-preview-line cite-preview-num-auth">
+                    <span class="cite-preview-line cite-preview-num-auth">
                        <span class="cite-preview-num">{{ it.no }}.</span>
                        <span v-if="it.author" class="cite-preview-auth">{{ it.author }}</span>
-                    </div>
-                    <div v-if="it.title && it.title !== '-'" class="cite-preview-line cite-preview-article-title">
+                    </span>
+                    <span v-if="it.title && it.title !== '-'" class="cite-preview-line cite-preview-article-title">
                        {{ it.title }}
-                    </div>
-                    <div
+                    </span>
+                    <span
                        v-if="it.joura || it.dateno"
                        class="cite-preview-line cite-preview-journal-row"
                    >
                        <em v-if="it.joura" class="cite-preview-journal">{{ it.joura }}</em>
                        <span v-if="it.joura && it.dateno">&nbsp;</span>
                        <span v-if="it.dateno" class="cite-preview-dateno">{{ it.dateno }}</span>
-                    </div>
+                    </span>
                    <a v-if="it.doi" class="cite-preview-doi" :href="it.doi" target="_blank">{{ it.doi }}</a>
                </div>
            </div>
--- a/src/components/page/components/table/wordHtml.vue
+++ b/src/components/page/components/table/wordHtml.vue
@@ -252,10 +252,11 @@
             
            </ul>
        </div>
-        <DynamicTable 
-      ref="myTableModal" 
-     
-    />
+        <DynamicTable
+            ref="myTableModal"
+            :reference-list="chanFerForm || []"
+            :body-cite-id-order="bodyCiteIdOrder || []"
+        />
    </div>
 </template>

@@ -264,7 +265,18 @@
 import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑
 import DynamicTable from './DynamicTable.vue';
 export default {
-    props: ['articleId', 'imgWidth', 'imgHeight', 'scale', 'isEdit', 'isShowEdit', 'urlList', 'content'],
+    props: [
+        'articleId',
+        'imgWidth',
+        'imgHeight',
+        'scale',
+        'isEdit',
+        'isShowEdit',
+        'urlList',
+        'content',
+        'chanFerForm',
+        'bodyCiteIdOrder'
+    ],
    data() {
        return {
            identity: localStorage.getItem('U_role'),
--- a/src/components/page/components/table/wordHtmlTypesetting.vue
+++ b/src/components/page/components/table/wordHtmlTypesetting.vue
@@ -464,10 +464,11 @@
                </li>
            </ul>
        </div>
-        <DynamicTable 
-      ref="myTableModal" 
-     
-    />
+        <DynamicTable
+            ref="myTableModal"
+            :reference-list="chanFerForm || []"
+            :body-cite-id-order="bodyCiteIdOrder || []"
+        />
    </div>
 </template>

@@ -476,7 +477,20 @@ import DynamicTable from './DynamicTable.vue';
 import { mediaUrl } from '@/common/js/commonJS.js'; // 引入通用逻辑

 export default {
-    props: ['articleId', 'imgWidth', 'imgHeight', 'scale', 'isEdit', 'isShowEdit', 'urlList', 'content'],
+    props: [
+        'articleId',
+        'imgWidth',
+        'imgHeight',
+        'scale',
+        'isEdit',
+        'isShowEdit',
+        'urlList',
+        'content',
+        /** 参考文献列表，供表格预览把 mycite 显示为 [n] */
+        'chanFerForm',
+        /** 正文引用顺序，与稿面 articleCiteIdOrder 一致 */
+        'bodyCiteIdOrder'
+    ],
    data() {
        return {
            isShowComment: false,