/** * 详情页面字段标签处理器模块 * 负责处理不同页面上的字段和间距标签 */ 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; } } }