Browse Source

修改换行

yangg 4 months ago
parent
commit
1e7201b254
2 changed files with 107 additions and 111 deletions
  1. 51 109
      src/views/project/ProjectInput.vue
  2. 56 2
      src/views/project/components/dataList.vue

+ 51 - 109
src/views/project/ProjectInput.vue

@@ -734,92 +734,64 @@ export default {
       try {
         // 获取编辑器的最新内容
         const editorContent = this.$refs.wordEditor.editorRef.command.getHTML();
+        
+        // 获取当前的字体样式配置
+        const fontStyle = this.editorOptions || {
+          font: 'Arial',
+          size: 14,
+          align: 'left'
+        };
 
-        // 更新 contentForm
-        this.contentForm.content = editorContent.main;
-        // 处理富文本内容
-        const processContent = (htmlContent) => {
-          /* const tempDiv = document.createElement("div");
-          tempDiv.innerHTML = htmlContent;
-
-          // 处理图片:保留样式属性
-          const images = tempDiv.getElementsByTagName("img");
-          Array.from(images).forEach((img) => {
-            const style = img.getAttribute("style") || "";
-            const className = img.getAttribute("class") || "";
-            const imgPlaceholder = `[图片:${img.src}|style=${style}|class=${className}]`;
-            img.replaceWith(document.createTextNode(imgPlaceholder));
-          });
-
-          // 处理表格:保留完整的样式属性,包括边框
-          const tables = tempDiv.getElementsByTagName("table");
-          Array.from(tables).forEach((table) => {
-            const tableStyle = table.getAttribute("style") || "";
-            const tableClass = table.getAttribute("class") || "";
-            const tableBorder = table.getAttribute("border") || "";
-
-            const rows = Array.from(table.rows).map((row) => {
-              return Array.from(row.cells)
-                .map((cell) => {
-                  const cellStyle = cell.getAttribute("style") || "";
-                  const cellClass = cell.getAttribute("class") || "";
-                  const cellBorder = cell.getAttribute("border") || "";
-                  const content = cell.textContent.trim();
-
-                  // 合并所有样式属性
-                  const cellStyles = [
-                    cellStyle,
-                    cellBorder ? `border: ${cellBorder}px solid #000;` : "",
-                  ]
-                    .filter(Boolean)
-                    .join(" ");
-
-                  return `${content}${
-                    cellStyles || cellClass
-                      ? `[style=${cellStyles}|class=${cellClass}]`
-                      : ""
-                  }`;
-                })
-                .join("|");
-            });
-
-            // 合并表格的样式属性
-            const tableStyles = [
-              tableStyle,
-              tableBorder ? `border: ${tableBorder}px solid #000;` : "",
-            ]
-              .filter(Boolean)
-              .join(" ");
-
-            const tablePlaceholder = `[表格|style=${tableStyles}|class=${tableClass}]\n${rows.join(
-              "\n"
-            )}`;
-            table.replaceWith(document.createTextNode(tablePlaceholder));
-          });
-
-          // 处理文本样式
-          const styledSpans = tempDiv.getElementsByTagName("span");
-          Array.from(styledSpans).forEach((span) => {
-            const style = span.getAttribute("style") || "";
-            const className = span.getAttribute("class") || "";
-            if (style || className) {
-              const content = span.textContent;
-              span.replaceWith(
-                document.createTextNode(
-                  `[文本:${content}|style=${style}|class=${className}]`
-                )
-              );
-            }
-          });
+        // 创建样式字符串
+        const styleString = `font-family: ${fontStyle.font}; font-size: ${fontStyle.size}px; text-align: ${fontStyle.align};}`;
+        
+        // 处理表格内容
+        const processedContent = editorContent.main.replace(
+          /<table[^>]*>([\s\S]*?)<\/table>/g,
+          (tableMatch) => {
+            // 首先处理表格级别的空白和换行
+            const cleanTableMatch = tableMatch
+              .replace(/>\s+</g, '><') // 移除标签之间的空白
+              .replace(/\n/g, '') // 移除所有换行符
+              .replace(/<div style="text-align: justify;">([\s\S]*?)<\/div>/g, '$1') // 移除对齐div标签
+              .replace(/<a[^>]*>([\s\S]*?)<\/a>/g, (match, content) => {
+                // 使用配置的字体样式替换超链接文本
+                return `<span style="${styleString}">${content}</span>`;
+              });
+
+            return cleanTableMatch.replace(
+              /(<td[^>]*>)([\s\S]*?)(<\/td>)/g,
+              (tdMatch, tdOpen, content, tdClose) => {
+                // 处理单元格内容
+                const cleanContent = content
+                  .replace(/<div style="text-align: justify;">([\s\S]*?)<\/div>/g, '$1') // 移除对齐div标签
+                  .replace(/<a[^>]*>([\s\S]*?)<\/a>/g, (match, linkContent) => {
+                    // 使用配置的字体样式替换超链接文本
+                    return `<span style="${styleString}">${linkContent}</span>`;
+                  })
+                  .replace(/\n/g, '') // 移除所有换行
+                  .replace(/\s+/g, ' ') // 多个空格变成一个
+                  .replace(/^\s+|\s+$/g, '') // 移除首尾空格
+                  .replace(/—\s+/g, '— ') // 处理破折号后的空格
+                  .replace(/\s+—/g, ' —') // 处理破折号前的空格
+                  .replace(/\s*([,.])\s*/g, '$1 '); // 处理标点符号周围的空格
+
+                return tdOpen + cleanContent + tdClose;
+              }
+            );
+          }
+        );
 
-          return tempDiv.textContent || tempDiv.innerText; */
-        };
+        // 更新 contentForm
+        this.contentForm.content = processedContent;
 
         const submitData = {
           ...this.contentForm,
           id: this.contentForm.id,
-          content: this.contentForm.content, // processContent(this.contentForm.content),
+          content: this.contentForm.content,
+          font_style: this.editorOptions // 保存字体样式配置
         };
+        
         await projectUpdate(submitData);
         this.$message.success("内容更新成功");
         this.contentDialogVisible = false;
@@ -838,12 +810,6 @@ export default {
         sequence: row.sequence,
         project: row.project,
         content: row.content,
-        status: row.status,
-        // 保留其他必要字段,但不包含 score
-        name: row.name,
-        tech_report_location: row.tech_report_location,
-        department: row.department,
-        content: row.content,
       };
       this.remarkDialogVisible = true;
     },
@@ -1052,30 +1018,6 @@ export default {
       this.gsprForm = { ...row };
       this.gsprDialogVisible = true;
     },
-    /*  // 修改编辑内容显示方法
-    handleEditContent(row) {
-      const selectedProject = this.projectOptions.find(
-        (p) => p.id === this.selectedProjectId
-      );
-
-      // 处理content内容,将文本格式转换为HTML并清理空样式
-      const processedContent = this.cleanEmptyStyles(
-        this.convertTextToHtml(row.content)
-      );
-
-      this.contentForm = {
-        sequence: row.sequence,
-        project: selectedProject.id,
-        project_name: selectedProject.name,
-        id: row.id,
-        tech_report_location: row.tech_report_location,
-        content: processedContent,
-        name: row.name,
-        department: row.department,
-      };
-      this.contentDialogVisible = true;
-    }, */
-
     // 修改回显方法,解析样式
     convertTextToHtml(text) {
       if (!text) return "";

+ 56 - 2
src/views/project/components/dataList.vue

@@ -551,6 +551,27 @@ export default {
 
       // 处理表格
       tempDiv.querySelectorAll('table').forEach((table) => {
+        // 添加固定布局属性,防止列宽自适应
+        table.style.tableLayout = 'fixed'
+        
+        // 保存原始列宽
+        const firstRow = table.querySelector('tr')
+        if (firstRow) {
+          const cells = firstRow.querySelectorAll('td, th')
+          cells.forEach((cell, index) => {
+            // 获取原始宽度
+            const width = cell.getAttribute('width') || cell.style.width
+            if (width) {
+              // 为所有行的相同位置单元格设置相同宽度
+              table.querySelectorAll(`tr td:nth-child(${index + 1}), tr th:nth-child(${index + 1})`).forEach(td => {
+                td.style.width = width
+                // 确保宽度不会被覆盖
+                td.setAttribute('width', width)
+              })
+            }
+          })
+        }
+        
         if (this.isTableWithBorder(table)) {
           table.setAttribute('data-code', 'active')
         } else {
@@ -604,12 +625,21 @@ export default {
             </xml>
             <style>
               /* 基础样式 */
-            
-              /* 保持原有表格样式 */
+              
+              /* 保持表格固定布局,防止自适应 */
               table {
                 width: 100%;
                 border-collapse: collapse !important;
                 margin: 8px 0;
+                table-layout: fixed !important;
+                word-wrap: break-word;
+              }
+              
+              /* 确保单元格宽度固定 */
+              table td, table th {
+                word-wrap: break-word;
+                overflow-wrap: break-word;
+                overflow: hidden;
               }
               
               /* 有边框表格样式 */
@@ -645,6 +675,7 @@ export default {
                 mso-tstyle-rowband-size: 0;
                 mso-tstyle-colband-size: 0;
                 mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
+                table-layout: fixed !important;
               }
               
               /* 确保空格正确显示 */
@@ -835,6 +866,9 @@ export default {
 
       // 处理所有表格
       tempDiv.querySelectorAll('table').forEach((table) => {
+        // 确保表格使用固定布局
+        table.style.tableLayout = 'fixed'
+        
         // 检查表格是否有边框
         const hasBorder = this.detectTableBorder(table)
 
@@ -870,6 +904,26 @@ export default {
             cell.style.padding = '6px'
           })
         }
+        
+        // 保存第一行的列宽并应用到所有行
+        const firstRow = table.querySelector('tr')
+        if (firstRow) {
+          const cells = firstRow.querySelectorAll('td, th')
+          cells.forEach((cell, index) => {
+            // 获取原始宽度
+            const width = cell.getAttribute('width') || cell.style.width
+            if (width) {
+              // 为所有行的相同位置单元格设置相同宽度
+              table.querySelectorAll(`tr td:nth-child(${index + 1}), tr th:nth-child(${index + 1})`).forEach(td => {
+                td.style.width = width
+                // 确保宽度不会被覆盖
+                td.setAttribute('width', width)
+                // 添加Word特定的宽度属性
+                td.setAttribute('w:w', width.replace(/[^\d]/g, ''))
+              })
+            }
+          })
+        }
       })
 
       return tempDiv.innerHTML