refactor

page/detail/field-label-processor.js

@@ -0,0 +1,241 @@
+/**
+ * 详情页面字段标签处理器模块
+ * 负责处理不同页面上的字段和间距标签
+ */
+
+import {
+  getColumnWidths,
+  safelyInsertLabel,
+  safelyAppendLabel
+} from '../../utils/dom-utils.js';
+import {
+  createFieldWithLabels,
+  createFieldLabels
+} from './dom.js';
+import { FieldTypeChecker } from '../../utils/field-utils.js';
+import { COLORS } from '../../features/add-field-label/settings.js';
+import { LAYOUT_TYPES } from '../../utils/constants.js';
+
+/**
+ * 用于处理不同页面上字段和间距标签的字段标签处理器类
+ */
+export class FieldLabelProcessor {
+  /**
+   * 构造函数
+   * @param {Object} options - 配置选项
+   * @param {number} options.appId - App ID
+   * @param {string} options.pageType - 页面类型上下文（例如，'detail'，'edit'）
+   */
+  constructor(options = {}) {
+    this.appId = options.appId;
+    this.pageType = options.pageType;
+  }
+
+  /**
+   * 返回是否为预览模式
+   * @returns {boolean} 是否预览
+   */
+  isPreview() {
+    return false;
+  }
+
+  /**
+   * 为子表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addSubtableLabel(field, fieldElement) {
+    try {
+      // 在表上方添加字段代码标签
+      const tableCodeLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+      tableCodeLabel.style.display = 'block';
+      safelyInsertLabel(fieldElement, tableCodeLabel);
+      // 添加列标签
+      const fieldNames = Object.keys(field.fields);
+      const columnWidths = getColumnWidths(fieldElement, field.type);
+      const columnLabels = createFieldLabels(fieldNames, columnWidths, field.type);
+
+      safelyInsertLabel(fieldElement, columnLabels);
+
+    } catch (error) {
+      console.error(`Failed to add label for subtable field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 为引用表字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addReferenceTableLabel(field, fieldElement) {
+    try {
+      // 在引用表上方添加字段代码标签
+      const tableCodeLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+      tableCodeLabel.style.display = 'block';
+
+      safelyInsertLabel(fieldElement, tableCodeLabel);
+
+      // 如果可用，添加显示字段标签
+      if (field.referenceTable?.displayFields) {
+        const displayFields = field.referenceTable.displayFields;
+        const columnWidths = getColumnWidths(fieldElement, field.type);
+        const dataExist = !!fieldElement.querySelector('tbody > tr');
+        const displayLabels = createFieldLabels(displayFields, columnWidths, field.type, dataExist);
+
+        safelyInsertLabel(fieldElement, displayLabels);
+      }
+
+    } catch (error) {
+      console.error(`Failed to add label for reference table field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 为组字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addGroupLabel(field, fieldElement) {
+    try {
+      // 在组的父元素之前添加标签
+      const parentElement = fieldElement.parentElement;
+      if (parentElement) {
+        const groupLabel = createFieldWithLabels({
+          code: field.code,
+          type: field.type,
+        });
+
+        safelyInsertLabel(parentElement, groupLabel);
+      } else {
+        console.warn(`Parent element for group field ${field.code} does not exist`);
+      }
+
+    } catch (error) {
+      console.error(`Failed to add label for group field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 为标准字段元素添加标签
+   * @param {Object} field - 字段配置信息
+   * @param {HTMLElement} fieldElement - 字段 DOM 元素
+   */
+  addStandardFieldLabel(field, fieldElement) {
+    try {
+      const fieldLabel = createFieldWithLabels({
+        code: field.code,
+        type: field.type,
+      });
+
+      safelyInsertLabel(fieldElement, fieldLabel);
+
+    } catch (error) {
+      console.error(`Failed to add label for standard field ${field.code}:`, error);
+    }
+  }
+
+  /**
+   * 处理并为页面上的所有字段元素添加标签
+   * @param {Array} fieldsWithLabels - 已处理的字段对象数组
+   */
+  processFieldLabels(fieldsWithLabels) {
+    try {
+      // 统计处理结果
+      let processedCount = 0;
+      let skippedCount = 0;
+
+      for (const field of fieldsWithLabels) {
+        try {
+          // 获取字段元素
+          const fieldElement = kintone.app.record.getFieldElement(field.code);
+
+          if (!fieldElement) {
+            skippedCount++;
+            continue;
+          }
+
+          // 根据字段类型选择合适的标签添加方法
+          if (FieldTypeChecker.isSubtable(field)) {
+            this.addSubtableLabel(field, fieldElement);
+          } else if (FieldTypeChecker.isReferenceTable(field)) {
+            this.addReferenceTableLabel(field, fieldElement);
+          } else if (FieldTypeChecker.isGroup(field)) {
+            this.addGroupLabel(field, fieldElement);
+          } else {
+            this.addStandardFieldLabel(field, fieldElement);
+          }
+
+          processedCount++;
+
+        } catch (fieldError) {
+          console.error(`Error occurred while processing label for field ${field.code}:`, fieldError);
+          skippedCount++;
+        }
+      }
+
+      console.log(`Field label processing completed: ${processedCount} successful, ${skippedCount} skipped`);
+
+    } catch (error) {
+      console.error('Error occurred while processing field labels:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 处理并为页面上的间距元素添加标签
+   * @param {Array} spacerElements - 间距元素配置数组
+   */
+  processSpacerLabels(spacerElements) {
+    try {
+      // 统计处理结果
+      let processedCount = 0;
+      let skippedCount = 0;
+
+      for (const spacer of spacerElements) {
+        try {
+          // 获取间距元素
+          const spacerElement = kintone.app.record.getSpaceElement(spacer.elementId);
+
+          if (!spacerElement) {
+            skippedCount++;
+            continue;
+          }
+          // 添加标签并设置边框
+          const spacerLabel = createFieldWithLabels({
+            code: spacer.elementId,
+            type: spacer.type,
+          });
+
+          safelyAppendLabel(spacerElement, spacerLabel);
+
+          // 添加红色虚线边框
+          spacerElement.style.border = COLORS.SPACER_BORDER;
+
+          processedCount++;
+
+        } catch (spacerError) {
+          console.error(`Error occurred while processing label for spacer element ${spacer.elementId}:`, spacerError);
+          skippedCount++;
+        }
+      }
+
+      document.querySelectorAll('.spacer-cybozu:not([id])').forEach(spacerElement => {
+        spacerElement.style.border = COLORS.SPACER_BORDER;
+        safelyAppendLabel(spacerElement, createFieldWithLabels({
+          code: '',
+          type: LAYOUT_TYPES.SPACER,
+        }));
+      });
+
+    } catch (error) {
+      console.error('Error occurred while processing spacer element labels:', error);
+      throw error;
+    }
+  }
+}