refactor
This commit is contained in:
hsueh chiahao
99
page/detail/dom.js
Normal file
99
page/detail/dom.js
Normal file
@@ -0,0 +1,99 @@
|
||||
/**
|
||||
* DOM 字段标签操作工具模块
|
||||
* 提供用于创建和管理字段标签 DOM 元素的辅助函数
|
||||
*/
|
||||
|
||||
import { FIELD_TYPES } from '../../utils/constants.js';
|
||||
import { COLORS, SPACING, IS_FIELD_TYPE_DISPLAY } from '../../features/add-field-label/settings.js';
|
||||
|
||||
/**
|
||||
* 创建带有适当样式的字段标签 span 元素
|
||||
* @param {Object} params - 标签参数配置
|
||||
* @param {string} params.code - 字段代码
|
||||
* @param {string} params.type - 字段类型（可选）
|
||||
* @param {number} params.width - 字段宽度（可选）
|
||||
* @returns {HTMLElement} 带有样式化 span 的容器 div 元素
|
||||
*/
|
||||
const createFieldSpanElement = ({ code, type, width }) => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
// 处理宽度和边距设置
|
||||
if (width !== undefined) {
|
||||
container.style.width = `${Number(width) - SPACING.TABLE_COLUMN_PADDING}px`; // 减去列填充
|
||||
container.style.marginLeft = `${SPACING.TABLE_COLUMN_PADDING}px`; // 添加左边距
|
||||
} else {
|
||||
container.style.width = '100%'; // 默认全宽度
|
||||
}
|
||||
|
||||
// 创建和样式化 span 元素
|
||||
const fieldSpan = document.createElement('span');
|
||||
fieldSpan.textContent = (IS_FIELD_TYPE_DISPLAY && type !== undefined) ? `${code} (${type})` : code; // 显示代码和类型
|
||||
fieldSpan.style.display = 'inline-block';
|
||||
fieldSpan.style.width = '100%';
|
||||
fieldSpan.style.color = COLORS.LABEL_TEXT; // 使用定义的工具提示文本颜色
|
||||
fieldSpan.style.overflowWrap = 'anywhere'; // 支持长文本换行
|
||||
fieldSpan.style.whiteSpace = 'pre-wrap'; // 保留空格和换行
|
||||
|
||||
// GROUP 类型字段的特殊样式
|
||||
if (type === FIELD_TYPES.GROUP) {
|
||||
fieldSpan.style.marginLeft = SPACING.GROUP_MARGIN_LEFT;
|
||||
}
|
||||
|
||||
container.appendChild(fieldSpan);
|
||||
return container;
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建字段标签容器元素
|
||||
* @param {Object} params - 标签参数配置
|
||||
* @param {string} params.code - 字段代码
|
||||
* @param {string} params.type - 字段类型（可选）
|
||||
* @param {number} params.width - 容器宽度（可选）
|
||||
* @returns {HTMLElement} 标签容器元素
|
||||
*/
|
||||
export const createFieldWithLabels = ({ code, type, width }) => {
|
||||
const container = document.createElement('div');
|
||||
container.style.display = 'inline-block'; // 布局的内联块显示
|
||||
|
||||
const fieldSpan = createFieldSpanElement({ code, type, width });
|
||||
container.appendChild(fieldSpan);
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建包含多个字段标签的容器
|
||||
* @param {Array<string>} fieldNames - 要为其创建标签的字段名称数组
|
||||
* @param {Array<number>} widths - 与字段名称对应的宽度
|
||||
* @param {string} fieldType - 字段类型（影响间距）
|
||||
* @returns {HTMLElement} 带有所有标签的 span 容器元素
|
||||
*/
|
||||
export const createFieldLabels = (fieldNames, widths, fieldType, specialSpacing = false) => {
|
||||
const container = document.createElement('span');
|
||||
|
||||
// 为引用表字段添加特殊间距
|
||||
if (fieldType === FIELD_TYPES.REFERENCE_TABLE && specialSpacing) {
|
||||
const spacerElement = document.createElement('span');
|
||||
spacerElement.style.width = SPACING.REFERENCE_TABLE_SPACER;
|
||||
spacerElement.style.display = 'inline-block';
|
||||
container.appendChild(spacerElement);
|
||||
}
|
||||
|
||||
// 为每个字段创建标签，调整宽度
|
||||
const labelElements = fieldNames.map((fieldName, index) => {
|
||||
// 稍稍减少最后一个元素的宽度以适应布局
|
||||
const adjustedWidth = index === fieldNames.length - 1
|
||||
? widths[index] - 1
|
||||
: widths[index];
|
||||
|
||||
return createFieldWithLabels({
|
||||
code: fieldName,
|
||||
width: adjustedWidth,
|
||||
});
|
||||
});
|
||||
|
||||
// 将所有标签元素添加到容器中
|
||||
labelElements.forEach(labelElement => container.appendChild(labelElement));
|
||||
|
||||
return container;
|
||||
};
|
||||
241
page/detail/field-label-processor.js
Normal file
241
page/detail/field-label-processor.js
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user