/** * 详情页面字段标签处理器模块 * 负责处理不同页面上的字段和间距标签 */ import { getColumnWidths, safelyInsertLabel, safelyAppendLabel } from '@/utils/dom-utils.js'; import { createFieldWithLabels, createFieldLabels } from './dom.js'; import { FieldTypeChecker } from '@/utils/field-utils.js'; import { STYLES } 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; } beforeProcess(rawFieldsMap, rawLayout, fields, spacers) { } /** * 创建表类型标签元素 * @param {Object} field - 字段配置 * @returns {HTMLElement} 标签元素 */ createTableLabel(field) { const tableCodeLabel = createFieldWithLabels({ code: field.code, type: field.type, }); tableCodeLabel.style.display = 'block'; return tableCodeLabel; } /** * 为子表字段元素添加标签 * @param {Object} field - 字段配置信息 * @param {HTMLElement} fieldElement - 字段 DOM 元素 */ addSubtableLabel(field, fieldElement) { // 在表上方添加字段代码标签 const tableCodeLabel = this.createTableLabel(field); 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); } /** * 为引用表字段元素添加标签 * @param {Object} field - 字段配置信息 * @param {HTMLElement} fieldElement - 字段 DOM 元素 */ addReferenceTableLabel(field, fieldElement) { // 在引用表上方添加字段代码标签 safelyInsertLabel(fieldElement, this.createTableLabel(field)); // 添加显示字段标签(如果存在) if (field.referenceTable?.displayFields) { const displayFields = field.referenceTable.displayFields; const columnWidths = getColumnWidths(fieldElement, field.type); const hasData = !!fieldElement.querySelector('tbody > tr'); const displayLabels = createFieldLabels(displayFields, columnWidths, field.type, hasData); safelyInsertLabel(fieldElement, displayLabels); } } /** * 为组字段元素添加标签 * @param {Object} field - 字段配置信息 * @param {HTMLElement} fieldElement - 字段 DOM 元素 */ addGroupLabel(field, fieldElement) { const parentElement = fieldElement.parentElement; if (!parentElement) { console.warn(`[Kintone Helper Extension] Parent element for group field ${field.code} does not exist`); return; } const groupLabel = createFieldWithLabels({ code: field.code, type: field.type, }); safelyInsertLabel(parentElement, groupLabel); } /** * 为标准字段元素添加标签 * @param {Object} field - 字段配置信息 * @param {HTMLElement} fieldElement - 字段 DOM 元素 */ addStandardFieldLabel(field, fieldElement) { const fieldLabel = createFieldWithLabels({ code: field.code, type: field.type, }); safelyInsertLabel(fieldElement, fieldLabel); } /** * 处理并为页面上的所有字段元素添加标签 * @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(`[Kintone Helper Extension] Error occurred while processing label for field ${field.code}:`, fieldError); skippedCount++; } } console.log(`[Kintone Helper Extension] Field label processing completed: ${processedCount} successful, ${skippedCount} skipped`); } catch (error) { console.error('[Kintone Helper Extension] 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 = STYLES.SPACER_BORDER; processedCount++; } catch (spacerError) { console.error(`[Kintone Helper Extension] Error occurred while processing label for spacer element ${spacer.elementId}:`, spacerError); skippedCount++; } } document.querySelectorAll('.spacer-cybozu:not([id])').forEach(spacerElement => { spacerElement.style.border = STYLES.SPACER_BORDER; safelyAppendLabel(spacerElement, createFieldWithLabels({ code: '', type: LAYOUT_TYPES.SPACER, })); }); } catch (error) { console.error('[Kintone Helper Extension] Error occurred while processing spacer element labels:', error); throw error; } } }