import type { QualityComponentDefinition, QualityProps } from '../core/types';
|
|
import { parseColumnSpec } from '../core/column-spec';
|
import { cssStyle, escapeHtml } from '../core/html';
|
import { QUALITY_ICONS } from '../core/icons';
|
import { QUALITY_CATEGORY } from '../core/types';
|
|
/** 样品信息默认展示的字段，值全部来自报告上下文 */
|
const SAMPLE_FIELDS: { expr: string; label: string }[] = [
|
{ label: '样品编号', expr: '{{report.sampleNo}}' },
|
{ label: '产品名称', expr: '{{report.productName}}' },
|
{ label: '规格型号', expr: '{{report.spec}}' },
|
{ label: '批次号', expr: '{{report.batchNo}}' },
|
{ label: '检验日期', expr: '{{report.inspectDate}}' },
|
{ label: '检验员', expr: '{{report.inspector}}' },
|
];
|
|
const CELL_BORDER = '1px solid #d9d9d9';
|
|
function textOf(value: unknown): string {
|
return String(value ?? '').trim();
|
}
|
|
/**
|
* 出表用的字段：填了 fields 就整块照它来，否则用默认字段。
|
* <p>
|
* 与分组检验项表共用同一套 `字段名=绑定表达式` 语法（见 {@link parseColumnSpec}），
|
* 免得同一个「键值对列表」长出两种写法。合并标记 `#` 在这里没有意义，解析出来也只是被丢掉，
|
* 所以 validate 里明确拦下，不让用户以为自己写对了。
|
*/
|
function effectiveFields(properties: QualityProps): { expr: string; label: string }[] {
|
const custom = parseColumnSpec(textOf(properties.fields));
|
return custom.items.length > 0
|
? custom.items.map((field) => ({ label: field.label, expr: field.expr }))
|
: SAMPLE_FIELDS;
|
}
|
|
function buildRows(
|
pairsPerRow: number,
|
showBorder: boolean,
|
fields: { expr: string; label: string }[],
|
): string {
|
const perRow = Math.max(pairsPerRow, 1);
|
const border = showBorder ? CELL_BORDER : 'none';
|
const rows: string[] = [];
|
for (let index = 0; index < fields.length; index += perRow) {
|
const rowFields = fields.slice(index, index + perRow);
|
// 末行凑不满一组时，让最后一个值格横向吃掉余下的列。照原样铺满格子的话，
|
// 右侧会秃出几个只有边框的空格（字段数不是「每行组数」整数倍时必然出现）。
|
const tailColspan = rowFields.length < perRow ? (perRow - rowFields.length) * 2 + 1 : 1;
|
const cells = rowFields
|
.map((field, position) => {
|
const span = position === rowFields.length - 1 && tailColspan > 1 ? ` colspan="${tailColspan}"` : '';
|
return (
|
`<td style="${cssStyle({
|
border,
|
padding: '5px 8px',
|
background: '#fafafa',
|
'font-weight': 600,
|
width: '90px',
|
})}">${escapeHtml(field.label)}</td>` +
|
`<td${span} style="${cssStyle({ border, padding: '5px 8px' })}">${escapeHtml(field.expr)}</td>`
|
);
|
})
|
.join('');
|
rows.push(`<tr>${cells}</tr>`);
|
}
|
return rows.join('');
|
}
|
|
export const sampleInfoDefinition: QualityComponentDefinition = {
|
type: 'SampleInfo',
|
name: 'sampleInfo',
|
label: '样品信息',
|
category: QUALITY_CATEGORY.HEADER,
|
icon: QUALITY_ICONS.sample,
|
aiHint: '样品与物料的基本信息块：产品名称、规格、批号、数量、生产日期、有效日期等键值对。',
|
defaults: { title: '样品信息', pairsPerRow: 2, showBorder: true },
|
propertySchema: [
|
{ key: 'title', label: '区块标题', type: 'string', defaultValue: '样品信息' },
|
{
|
key: 'pairsPerRow',
|
label: '每行字段数',
|
type: 'number',
|
defaultValue: 2,
|
tip: '一行放几组「字段名 + 值」',
|
},
|
{ key: 'showBorder', label: '显示边框', type: 'boolean', defaultValue: true },
|
{
|
key: 'fields',
|
label: '字段定义（覆盖默认字段）',
|
type: 'text',
|
tip:
|
'留空则用默认的六项。格式：字段名=绑定表达式，多项用 | 分隔，' +
|
'如 样品编号={{report.sampleNo}}|产品名称={{report.productName}}|生产日期={{report.produceDate}}。' +
|
'每行放几组仍由上面的「每行字段数」控制；这里不支持 # 合并标记',
|
},
|
],
|
dataSchema: SAMPLE_FIELDS.map((field) => ({
|
// 表达式形如 {{report.sampleNo}}，去掉两层花括号即绑定路径
|
key: field.expr.slice(2, -2),
|
label: field.label,
|
type: 'string' as const,
|
bindable: true,
|
})),
|
buildContent: (properties) => {
|
const rawTitle = String(properties.title ?? '').trim();
|
const heading = rawTitle
|
? `<div style="${cssStyle({
|
'font-size': '13px',
|
'font-weight': 600,
|
margin: '0 0 4px',
|
})}">${escapeHtml(rawTitle)}</div>`
|
: '';
|
const table = `<table style="${cssStyle({
|
width: '100%',
|
'border-collapse': 'collapse',
|
'font-size': '12px',
|
})}">${buildRows(
|
Number(properties.pairsPerRow ?? 2),
|
properties.showBorder !== false,
|
effectiveFields(properties),
|
)}</table>`;
|
return {
|
tagName: 'div',
|
components: heading + table,
|
style: { margin: '0 0 10px' },
|
};
|
},
|
validate: (properties) => {
|
const parsed = parseColumnSpec(textOf(properties.fields));
|
const errors = [...parsed.errors];
|
if (parsed.items.some((field) => field.merge)) {
|
errors.push(
|
'样品信息的「字段定义」不支持 # 合并标记（那是分组检验项表标组名用的），请去掉字段名前的 #',
|
);
|
}
|
return errors;
|
},
|
};
|
