200 lines
11 KiB
JavaScript
200 lines
11 KiB
JavaScript
function DataEditor({ item, items, setItems }) {
|
|
|
|
if (!item) {
|
|
return React.createElement('div', { className: 'workspace-panel flex items-center justify-center h-full' },
|
|
React.createElement('p', { className: 'text-gray-500' }, '未选择任何件号')
|
|
);
|
|
}
|
|
|
|
const handleInputChange = (e) => {
|
|
const { name, value } = e.target;
|
|
const isNumber = ['quantity', 'weight'].includes(name);
|
|
|
|
// 添加输入验证
|
|
if (isNumber && value !== '' && (isNaN(value) || Number(value) < 0)) {
|
|
console.warn('请输入有效的正数');
|
|
return;
|
|
}
|
|
|
|
setItems(prevItems => ({
|
|
...prevItems,
|
|
[item.id]: {
|
|
...prevItems[item.id],
|
|
[name]: isNumber ? (value === '' ? 0 : Number(value)) : value
|
|
}
|
|
}));
|
|
};
|
|
|
|
const isRoot = item.id === '__ROOT__';
|
|
|
|
if (isRoot) {
|
|
return React.createElement('div', { className: 'workspace-panel p-4 h-full' },
|
|
React.createElement('h2', { className: 'text-lg font-semibold mb-1' }, '编辑总装图'),
|
|
React.createElement('div', { className: 'space-y-4' },
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '总装图名称'),
|
|
React.createElement('input', {
|
|
type: 'text', name: 'name', value: item.name || '', onChange: handleInputChange, className: 'form-input'
|
|
})
|
|
),
|
|
React.createElement('div', { className: 'grid grid-cols-2 gap-3' },
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '中文名称'),
|
|
React.createElement('input', {
|
|
type: 'text', name: 'chinese_name', value: item.chinese_name || '', onChange: handleInputChange, className: 'form-input', placeholder: '中文名称'
|
|
})
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '英文名称'),
|
|
React.createElement('input', {
|
|
type: 'text', name: 'english_name', value: item.english_name || '', onChange: handleInputChange, className: 'form-input', placeholder: 'English Name'
|
|
})
|
|
)
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '规格描述'),
|
|
React.createElement('input', {
|
|
type: 'text', name: 'specification', value: item.specification || '', onChange: handleInputChange, className: 'form-input', placeholder: '规格与技术要求'
|
|
})
|
|
),
|
|
React.createElement('div', { className: 'grid grid-cols-2 gap-3' },
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '材料'),
|
|
React.createElement('input', {
|
|
type: 'text', name: 'material', value: item.material || '', onChange: handleInputChange, className: 'form-input', placeholder: '如: Q235'
|
|
})
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '比例'),
|
|
React.createElement('input', {
|
|
type: 'text', name: 'scale', value: item.scale || '1:1', onChange: handleInputChange, className: 'form-input'
|
|
})
|
|
)
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '质量 (kg)'),
|
|
React.createElement('input', {
|
|
type: 'number', name: 'weight', value: item.weight || 0, onChange: handleInputChange, className: 'form-input bg-gray-100', readOnly: true, title: '由子项自动汇总'
|
|
})
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '备注'),
|
|
React.createElement('textarea', {
|
|
name: 'remark', value: item.remark || '', onChange: handleInputChange, className: 'form-input resize-none', rows: 2, placeholder: '其他说明信息'
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|
|
|
|
const hasChildren = Array.isArray(item.children) && item.children.length > 0;
|
|
const isLeafPart = !isRoot && !hasChildren;
|
|
const isAssemblyPart = !isRoot && hasChildren;
|
|
|
|
return React.createElement('div', { className: 'workspace-panel p-4 h-full' },
|
|
React.createElement('h2', { className: 'text-lg font-semibold mb-1' }, `编辑: ${item.id}`),
|
|
React.createElement('p', { className: 'text-xs text-gray-500 mb-3' }, isLeafPart ? '类型：零件' : (isAssemblyPart ? '类型：装配件（含子件号）' : '')),
|
|
React.createElement('div', { className: 'space-y-4' },
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '件号 (不可修改)'),
|
|
React.createElement('input', { type: 'text', readOnly: true, value: item.id, className: 'form-input bg-gray-100' })
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '名称'),
|
|
React.createElement('input', { type: 'text', name: 'name', value: item.name, onChange: handleInputChange, className: 'form-input' })
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '数量'),
|
|
React.createElement('input', { type: 'number', name: 'quantity', value: item.quantity, onChange: handleInputChange, className: 'form-input' })
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '重量 (kg)'),
|
|
React.createElement('input', {
|
|
type: 'number',
|
|
name: 'weight',
|
|
value: item.weight,
|
|
onChange: handleInputChange,
|
|
className: 'form-input',
|
|
readOnly: hasChildren, // 装配件重量由子项计算
|
|
title: hasChildren ? '装配件重量由子项自动汇总' : ''
|
|
}),
|
|
hasChildren && React.createElement('p', { className: 'text-xs text-gray-500 mt-1' }, '装配件重量由子项自动汇总，此处不可编辑。')
|
|
),
|
|
|
|
// 添加表格需要的额外字段
|
|
React.createElement('div', { className: 'grid grid-cols-2 gap-3' },
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '中文名称'),
|
|
React.createElement('input', {
|
|
type: 'text',
|
|
name: 'chinese_name',
|
|
value: item.chinese_name || '',
|
|
onChange: handleInputChange,
|
|
className: 'form-input',
|
|
placeholder: '零件中文名称'
|
|
})
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '英文名称'),
|
|
React.createElement('input', {
|
|
type: 'text',
|
|
name: 'english_name',
|
|
value: item.english_name || '',
|
|
onChange: handleInputChange,
|
|
className: 'form-input',
|
|
placeholder: 'English Name'
|
|
})
|
|
)
|
|
),
|
|
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '规格描述'),
|
|
React.createElement('input', {
|
|
type: 'text',
|
|
name: 'specification',
|
|
value: item.specification || '',
|
|
onChange: handleInputChange,
|
|
className: 'form-input',
|
|
placeholder: '零件规格和技术要求'
|
|
})
|
|
),
|
|
|
|
React.createElement('div', { className: 'grid grid-cols-2 gap-3' },
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '材料'),
|
|
React.createElement('input', {
|
|
type: 'text',
|
|
name: 'material',
|
|
value: item.material || '',
|
|
onChange: handleInputChange,
|
|
className: 'form-input',
|
|
placeholder: '如: Q235'
|
|
})
|
|
),
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '比例'),
|
|
React.createElement('input', {
|
|
type: 'text',
|
|
name: 'scale',
|
|
value: item.scale || '1:1',
|
|
onChange: handleInputChange,
|
|
className: 'form-input'
|
|
})
|
|
)
|
|
),
|
|
|
|
React.createElement('div', {},
|
|
React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, '备注'),
|
|
React.createElement('textarea', {
|
|
name: 'remark',
|
|
value: item.remark || '',
|
|
onChange: handleInputChange,
|
|
className: 'form-input resize-none',
|
|
rows: 2,
|
|
placeholder: '其他说明信息'
|
|
})
|
|
)
|
|
)
|
|
);
|
|
}
|