100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
/**
|
|
* 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;
|
|
};
|