kintone-helper-extenstion/page/detail/field-label-processor.js

/**
 * 详情页面字段标签处理器模块
 * 负责处理不同页面上的字段和间距标签
 */

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;
    }
  }
}