feat(web): 运维管理-备车/型号参数与需求说明更新
- 备车管理、新增备车、查看备车、备车-编辑：布局与字段调整，新增取消按钮 - 基本数据维护：型号参数列表/新增/查看/编辑页 - 车辆业务：备车-编辑页，示例图片、提交/保存/取消按钮 - 需求说明目录与文档整理 Made-with: Cursor
This commit is contained in:
王冕
309
web端/运维管理/基本数据维护/型号参数-新增.jsx
Normal file
309
web端/运维管理/基本数据维护/型号参数-新增.jsx
Normal file
@@ -0,0 +1,309 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 基本数据维护 - 型号参数-新增（按图片设计，保养项操作列仅保留删除，无上移下移）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useCallback = React.useCallback;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Radio = antd.Radio;
|
||||
var Table = antd.Table;
|
||||
var message = antd.message;
|
||||
|
||||
// 基本情况
|
||||
var brand = useState('');
|
||||
var model = useState('');
|
||||
var vehicleType = useState(undefined);
|
||||
var fuelType = useState(undefined);
|
||||
var plateColor = useState('绿牌');
|
||||
var sizeLength = useState('');
|
||||
var sizeWidth = useState('');
|
||||
var sizeHeight = useState('');
|
||||
// 轮胎情况
|
||||
var tireCount = useState('');
|
||||
var tireSpec = useState('');
|
||||
// 电气情况
|
||||
var batteryType = useState('磷酸铁锂');
|
||||
var batteryVendor = useState('');
|
||||
var capacityKwh = useState('');
|
||||
var electricRange = useState('');
|
||||
// 供氢系统情况
|
||||
var cylinderCapacity = useState('');
|
||||
var gaugeMode = useState(undefined);
|
||||
var hydrogenRange = useState('');
|
||||
var hydrogenVendor = useState('');
|
||||
// 其他系统情况
|
||||
var coldMachineVendor = useState('');
|
||||
var stackVendor = useState('');
|
||||
// 保养项列表（无上移下移，操作列仅删除）
|
||||
var maintenanceList = useState([{ key: '1', item: '', kmCycle: '', monthCycle: '', laborCost: '', materialCost: '', total: '' }]);
|
||||
var formErrors = useState({});
|
||||
|
||||
// 车辆类型选项与备车管理.jsx 保持一致
|
||||
var vehicleTypeOptions = [
|
||||
{ value: '轻型厢式货车', label: '轻型厢式货车' },
|
||||
{ value: '重型厢式货车', label: '重型厢式货车' },
|
||||
{ value: '重型半挂牵引车', label: '重型半挂牵引车' },
|
||||
{ value: '重型集装箱半挂车', label: '重型集装箱半挂车' },
|
||||
{ value: '小型普通客车', label: '小型普通客车' },
|
||||
{ value: '重型平板半挂车', label: '重型平板半挂车' },
|
||||
{ value: '叉车', label: '叉车' },
|
||||
{ value: '油车', label: '油车' },
|
||||
{ value: '观光车', label: '观光车' }
|
||||
];
|
||||
var fuelTypeOptions = [
|
||||
{ value: '氢', label: '氢' },
|
||||
{ value: '电', label: '电' },
|
||||
{ value: '油', label: '油' }
|
||||
];
|
||||
var gaugeModeOptions = [
|
||||
{ value: 'MPa', label: 'MPa' },
|
||||
{ value: 'bar', label: 'bar' }
|
||||
];
|
||||
|
||||
function calcTotal(labor, material) {
|
||||
var l = parseFloat(labor);
|
||||
var m = parseFloat(material);
|
||||
if (isNaN(l)) l = 0;
|
||||
if (isNaN(m)) m = 0;
|
||||
return (l + m).toFixed(2);
|
||||
}
|
||||
|
||||
function updateMaintenance(index, field, value) {
|
||||
maintenanceList[1](function (prev) {
|
||||
var list = prev.slice();
|
||||
var row = Object.assign({}, list[index] || {});
|
||||
row[field] = value;
|
||||
if (field === 'laborCost' || field === 'materialCost') {
|
||||
row.total = calcTotal(row.laborCost, row.materialCost);
|
||||
}
|
||||
list[index] = row;
|
||||
return list;
|
||||
});
|
||||
}
|
||||
|
||||
function addMaintenanceRow() {
|
||||
maintenanceList[1](function (prev) {
|
||||
var key = String((prev.length + 1) + Date.now());
|
||||
return prev.concat([{ key: key, item: '', kmCycle: '', monthCycle: '', laborCost: '', materialCost: '', total: '' }]);
|
||||
});
|
||||
}
|
||||
|
||||
function removeMaintenanceRow(index) {
|
||||
maintenanceList[1](function (prev) {
|
||||
var list = prev.slice();
|
||||
list.splice(index, 1);
|
||||
if (list.length === 0) list = [{ key: '1', item: '', kmCycle: '', monthCycle: '', laborCost: '', materialCost: '', total: '' }];
|
||||
return list;
|
||||
});
|
||||
}
|
||||
|
||||
function validate() {
|
||||
var err = {};
|
||||
if (!String(brand[0] || '').trim()) err.brand = '请输入品牌名称';
|
||||
if (!String(model[0] || '').trim()) err.model = '请输入型号名称';
|
||||
if (vehicleType[0] == null || vehicleType[0] === '') err.vehicleType = '请选择车辆类型';
|
||||
formErrors[1](err);
|
||||
return Object.keys(err).length === 0;
|
||||
}
|
||||
|
||||
function handleSubmit() {
|
||||
if (!validate()) {
|
||||
message.warning('请完善必填项');
|
||||
return;
|
||||
}
|
||||
message.success('提交成功（原型）');
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (window.history && window.history.back) window.history.back();
|
||||
else message.info('取消');
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px 80px', backgroundColor: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8, boxSizing: 'border-box' };
|
||||
var formColFullStyle = { flex: '0 0 100%', marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var errMsgStyle = { color: '#ff4d4f', fontSize: 12, marginTop: 4 };
|
||||
var inputStyle = { width: '100%' };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
var cardTitleBarStyle = { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%', fontSize: 15, fontWeight: 500, lineHeight: 1.5 };
|
||||
var cardTitleBarLineStyle = { width: 4, height: 16, backgroundColor: '#1890ff', borderRadius: 2, marginRight: 8, flexShrink: 0 };
|
||||
|
||||
function FormItem(props) {
|
||||
var colStyle = props.fullWidth ? formColFullStyle : formColStyle;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: labelStyle },
|
||||
props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null,
|
||||
props.label
|
||||
),
|
||||
props.children,
|
||||
props.error ? React.createElement('div', { style: errMsgStyle }, props.error) : null
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitleWithBar(title) {
|
||||
return React.createElement('div', { style: cardTitleBarStyle },
|
||||
React.createElement('span', { style: cardTitleBarLineStyle }),
|
||||
React.createElement('span', null, title)
|
||||
);
|
||||
}
|
||||
|
||||
var maintenanceColumns = [
|
||||
{ title: '养护项目', dataIndex: 'item', key: 'item', width: 160, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'item', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '保养公里周期(KM)', dataIndex: 'kmCycle', key: 'kmCycle', width: 140, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'kmCycle', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '保养时间周期(月)', dataIndex: 'monthCycle', key: 'monthCycle', width: 140, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'monthCycle', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '工时费(元)', dataIndex: 'laborCost', key: 'laborCost', width: 120, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'laborCost', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '材料费(元)', dataIndex: 'materialCost', key: 'materialCost', width: 120, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'materialCost', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '合计', dataIndex: 'total', key: 'total', width: 100, render: function (v) { return v || '—'; } },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: function (_, record, i) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeMaintenanceRow(i); } }, '删除');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '基本数据维护' },
|
||||
{ title: '型号参数' },
|
||||
{ title: '新增型号参数' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('型号参数'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '品牌', required: true, error: formErrors[0].brand },
|
||||
React.createElement(Input, { placeholder: '请输入品牌名称', value: brand[0], onChange: function (e) { brand[1](e.target.value); }, style: inputStyle, status: formErrors[0].brand ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '型号', required: true, error: formErrors[0].model },
|
||||
React.createElement(Input, { placeholder: '请输入型号名称', value: model[0], onChange: function (e) { model[1](e.target.value); }, style: inputStyle, status: formErrors[0].model ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '车辆类型', required: true, error: formErrors[0].vehicleType },
|
||||
React.createElement(Select, { placeholder: '请选择车辆类型', style: inputStyle, value: vehicleType[0], onChange: function (v) { vehicleType[1](v); }, allowClear: true, options: vehicleTypeOptions, status: formErrors[0].vehicleType ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '燃料种类' },
|
||||
React.createElement(Select, { placeholder: '请选择燃料种类', style: inputStyle, value: fuelType[0], onChange: function (v) { fuelType[1](v); }, allowClear: true, options: fuelTypeOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '车厢颜色' },
|
||||
React.createElement(Radio.Group, { value: plateColor[0], onChange: function (e) { plateColor[1](e.target.value); } },
|
||||
React.createElement(Radio, { value: '绿牌' }, '绿牌'),
|
||||
React.createElement(Radio, { value: '黄牌' }, '黄牌'),
|
||||
React.createElement(Radio, { value: '黄绿牌' }, '黄绿牌')
|
||||
)
|
||||
),
|
||||
React.createElement(FormItem, { label: '整车尺寸', fullWidth: true },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
|
||||
React.createElement(Input, { placeholder: '长', value: sizeLength[0], onChange: function (e) { sizeLength[1](e.target.value); }, style: { flex: 1, minWidth: 0 } }),
|
||||
React.createElement('span', { style: { flexShrink: 0 } }, '×'),
|
||||
React.createElement(Input, { placeholder: '宽', value: sizeWidth[0], onChange: function (e) { sizeWidth[1](e.target.value); }, style: { flex: 1, minWidth: 0 } }),
|
||||
React.createElement('span', { style: { flexShrink: 0 } }, '×'),
|
||||
React.createElement(Input, { placeholder: '高', value: sizeHeight[0], onChange: function (e) { sizeHeight[1](e.target.value); }, style: { flex: 1, minWidth: 0 } })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('轮胎情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '轮胎数量' },
|
||||
React.createElement(Input, { placeholder: '请输入轮胎数量', value: tireCount[0], onChange: function (e) { tireCount[1](e.target.value); }, style: inputStyle, addonAfter: '条' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '轮胎规格' },
|
||||
React.createElement(Input, { placeholder: '请输入轮胎规格', value: tireSpec[0], onChange: function (e) { tireSpec[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('电气情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '电池类型' },
|
||||
React.createElement(Radio.Group, { value: batteryType[0], onChange: function (e) { batteryType[1](e.target.value); } },
|
||||
React.createElement(Radio, { value: '磷酸铁锂' }, '磷酸铁锂'),
|
||||
React.createElement(Radio, { value: '三元锂' }, '三元锂')
|
||||
)
|
||||
),
|
||||
React.createElement(FormItem, { label: '电池厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入电池厂商名称', value: batteryVendor[0], onChange: function (e) { batteryVendor[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '储电量' },
|
||||
React.createElement(Input, { placeholder: '请输入储电量', value: capacityKwh[0], onChange: function (e) { capacityKwh[1](e.target.value); }, style: inputStyle, addonAfter: 'kWh' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电续航里程' },
|
||||
React.createElement(Input, { placeholder: '请输入电续航里程', value: electricRange[0], onChange: function (e) { electricRange[1](e.target.value); }, style: inputStyle, addonAfter: 'KM' })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供氢系统情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '氢瓶容量' },
|
||||
React.createElement(Input, { placeholder: '请输入氢瓶容量', value: cylinderCapacity[0], onChange: function (e) { cylinderCapacity[1](e.target.value); }, style: inputStyle, addonAfter: 'L' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '仪表盘显示模式' },
|
||||
React.createElement(Select, { placeholder: '请选择仪表盘显示模式', style: inputStyle, value: gaugeMode[0], onChange: function (v) { gaugeMode[1](v); }, allowClear: true, options: gaugeModeOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '氢续航里程' },
|
||||
React.createElement(Input, { placeholder: '请输入氢续航里程', value: hydrogenRange[0], onChange: function (e) { hydrogenRange[1](e.target.value); }, style: inputStyle, addonAfter: 'KM' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '供氢系统厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入供氢系统厂家', value: hydrogenVendor[0], onChange: function (e) { hydrogenVendor[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('其他系统情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '冷机厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入冷机厂家名称', value: coldMachineVendor[0], onChange: function (e) { coldMachineVendor[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电堆厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入电堆厂家名称', value: stackVendor[0], onChange: function (e) { stackVendor[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('保养项情况'), size: 'small', style: cardStyle },
|
||||
React.createElement(Table, {
|
||||
columns: maintenanceColumns,
|
||||
dataSource: maintenanceList[0],
|
||||
rowKey: 'key',
|
||||
pagination: false,
|
||||
size: 'small',
|
||||
bordered: true
|
||||
}),
|
||||
React.createElement(Button, { type: 'dashed', style: { width: '100%', marginTop: 8 }, onClick: addMaintenanceRow }, '+ 添加一项')
|
||||
),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Component = Component;
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
}
|
||||
}
|
||||
216
web端/运维管理/基本数据维护/型号参数-查看.jsx
Normal file
216
web端/运维管理/基本数据维护/型号参数-查看.jsx
Normal file
@@ -0,0 +1,216 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 基本数据维护 - 型号参数-查看（布局同型号参数-新增，全部只读）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Radio = antd.Radio;
|
||||
var Table = antd.Table;
|
||||
|
||||
// 只读数据（示例，与车辆管理-查看型号参数一致）
|
||||
var detail = useMemo(function () {
|
||||
return {
|
||||
brand: '苏龙',
|
||||
model: '海格牌KLQ5180XYKFCEV',
|
||||
vehicleType: '18吨双飞翼货车',
|
||||
fuelType: '氢',
|
||||
plateColor: '绿牌',
|
||||
sizeLength: '5995',
|
||||
sizeWidth: '2145',
|
||||
sizeHeight: '3130',
|
||||
tireCount: '8',
|
||||
tireSpec: '15/80R22.5',
|
||||
batteryType: '磷酸铁锂',
|
||||
batteryVendor: '某某电池企业',
|
||||
capacityKwh: '100000',
|
||||
electricRange: '200',
|
||||
cylinderCapacity: '140',
|
||||
gaugeMode: 'MPa',
|
||||
hydrogenRange: '1000',
|
||||
hydrogenVendor: '某某供氢系统科技有限公司',
|
||||
coldMachineVendor: '某某冷机企业',
|
||||
stackVendor: '某某电堆企业',
|
||||
maintenanceList: [
|
||||
{ key: '1', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571' },
|
||||
{ key: '2', item: '机油', kmCycle: '50000', monthCycle: '12', laborCost: '100', materialCost: '300', total: '400' }
|
||||
]
|
||||
};
|
||||
}, []);
|
||||
|
||||
var layoutStyle = { padding: '16px 24px 80px', backgroundColor: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8, boxSizing: 'border-box' };
|
||||
var formColFullStyle = { flex: '0 0 100%', marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var inputStyle = { width: '100%', backgroundColor: '#f5f5f5' };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
var cardTitleBarStyle = { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%', fontSize: 15, fontWeight: 500, lineHeight: 1.5 };
|
||||
var cardTitleBarLineStyle = { width: 4, height: 16, backgroundColor: '#1890ff', borderRadius: 2, marginRight: 8, flexShrink: 0 };
|
||||
|
||||
function FormItem(props) {
|
||||
var colStyle = props.fullWidth ? formColFullStyle : formColStyle;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: labelStyle }, props.label),
|
||||
props.children
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitleWithBar(title) {
|
||||
return React.createElement('div', { style: cardTitleBarStyle },
|
||||
React.createElement('span', { style: cardTitleBarLineStyle }),
|
||||
React.createElement('span', null, title)
|
||||
);
|
||||
}
|
||||
|
||||
var maintenanceColumns = [
|
||||
{ title: '养护项目', dataIndex: 'item', key: 'item', width: 160, render: function (v) { return v || '—'; } },
|
||||
{ title: '保养公里周期(KM)', dataIndex: 'kmCycle', key: 'kmCycle', width: 140, render: function (v) { return v || '—'; } },
|
||||
{ title: '保养时间周期(月)', dataIndex: 'monthCycle', key: 'monthCycle', width: 140, render: function (v) { return v || '—'; } },
|
||||
{ title: '工时费(元)', dataIndex: 'laborCost', key: 'laborCost', width: 120, render: function (v) { return v || '—'; } },
|
||||
{ title: '材料费(元)', dataIndex: 'materialCost', key: 'materialCost', width: 120, render: function (v) { return v || '—'; } },
|
||||
{ title: '合计', dataIndex: 'total', key: 'total', width: 100, render: function (v) { return v || '—'; } }
|
||||
];
|
||||
|
||||
function handleBack() {
|
||||
if (window.history && window.history.back) window.history.back();
|
||||
}
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '基本数据维护' },
|
||||
{ title: '型号参数' },
|
||||
{ title: '查看' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('型号参数'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '品牌' },
|
||||
React.createElement(Input, { value: detail.brand, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '型号' },
|
||||
React.createElement(Input, { value: detail.model, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '车辆类型' },
|
||||
React.createElement(Input, { value: detail.vehicleType, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '燃料种类' },
|
||||
React.createElement(Input, { value: detail.fuelType, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '车厢颜色' },
|
||||
React.createElement(Radio.Group, { value: detail.plateColor, disabled: true },
|
||||
React.createElement(Radio, { value: '绿牌' }, '绿牌'),
|
||||
React.createElement(Radio, { value: '黄牌' }, '黄牌'),
|
||||
React.createElement(Radio, { value: '黄绿牌' }, '黄绿牌')
|
||||
)
|
||||
),
|
||||
React.createElement(FormItem, { label: '整车尺寸', fullWidth: true },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
|
||||
React.createElement(Input, { value: detail.sizeLength, disabled: true, style: { flex: 1, minWidth: 0, backgroundColor: '#f5f5f5' } }),
|
||||
React.createElement('span', { style: { flexShrink: 0 } }, '×'),
|
||||
React.createElement(Input, { value: detail.sizeWidth, disabled: true, style: { flex: 1, minWidth: 0, backgroundColor: '#f5f5f5' } }),
|
||||
React.createElement('span', { style: { flexShrink: 0 } }, '×'),
|
||||
React.createElement(Input, { value: detail.sizeHeight, disabled: true, style: { flex: 1, minWidth: 0, backgroundColor: '#f5f5f5' } })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('轮胎情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '轮胎数量' },
|
||||
React.createElement(Input, { value: detail.tireCount, disabled: true, style: inputStyle, addonAfter: '条' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '轮胎规格' },
|
||||
React.createElement(Input, { value: detail.tireSpec, disabled: true, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('电气情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '电池类型' },
|
||||
React.createElement(Radio.Group, { value: detail.batteryType, disabled: true },
|
||||
React.createElement(Radio, { value: '磷酸铁锂' }, '磷酸铁锂'),
|
||||
React.createElement(Radio, { value: '三元锂' }, '三元锂')
|
||||
)
|
||||
),
|
||||
React.createElement(FormItem, { label: '电池厂家' },
|
||||
React.createElement(Input, { value: detail.batteryVendor, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '储电量' },
|
||||
React.createElement(Input, { value: detail.capacityKwh, disabled: true, style: inputStyle, addonAfter: 'kWh' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电续航里程' },
|
||||
React.createElement(Input, { value: detail.electricRange, disabled: true, style: inputStyle, addonAfter: 'KM' })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供氢系统情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '氢瓶容量' },
|
||||
React.createElement(Input, { value: detail.cylinderCapacity, disabled: true, style: inputStyle, addonAfter: 'L' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '仪表盘显示模式' },
|
||||
React.createElement(Input, { value: detail.gaugeMode, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '氢续航里程' },
|
||||
React.createElement(Input, { value: detail.hydrogenRange, disabled: true, style: inputStyle, addonAfter: 'KM' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '供氢系统厂家' },
|
||||
React.createElement(Input, { value: detail.hydrogenVendor, disabled: true, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('其他系统情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '冷机厂家' },
|
||||
React.createElement(Input, { value: detail.coldMachineVendor, disabled: true, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电堆厂家' },
|
||||
React.createElement(Input, { value: detail.stackVendor, disabled: true, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('保养项情况'), size: 'small', style: cardStyle },
|
||||
React.createElement(Table, {
|
||||
columns: maintenanceColumns,
|
||||
dataSource: detail.maintenanceList,
|
||||
rowKey: 'key',
|
||||
pagination: false,
|
||||
size: 'small',
|
||||
bordered: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { onClick: handleBack }, '返回')
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Component = Component;
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
}
|
||||
}
|
||||
337
web端/运维管理/基本数据维护/型号参数-编辑.jsx
Normal file
337
web端/运维管理/基本数据维护/型号参数-编辑.jsx
Normal file
@@ -0,0 +1,337 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 基本数据维护 - 型号参数-编辑（布局与型号参数-新增一致，全部可修改，预填当前记录）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Radio = antd.Radio;
|
||||
var Table = antd.Table;
|
||||
var message = antd.message;
|
||||
|
||||
// 初始数据（编辑时带入，与查看页一致；实际可从路由/接口获取）
|
||||
var initialData = {
|
||||
brand: '苏龙',
|
||||
model: '海格牌KLQ5180XYKFCEV',
|
||||
vehicleType: '18吨双飞翼货车',
|
||||
fuelType: '氢',
|
||||
plateColor: '绿牌',
|
||||
sizeLength: '5995',
|
||||
sizeWidth: '2145',
|
||||
sizeHeight: '3130',
|
||||
tireCount: '8',
|
||||
tireSpec: '15/80R22.5',
|
||||
batteryType: '磷酸铁锂',
|
||||
batteryVendor: '某某电池企业',
|
||||
capacityKwh: '100000',
|
||||
electricRange: '200',
|
||||
cylinderCapacity: '140',
|
||||
gaugeMode: 'MPa',
|
||||
hydrogenRange: '1000',
|
||||
hydrogenVendor: '某某供氢系统科技有限公司',
|
||||
coldMachineVendor: '某某冷机企业',
|
||||
stackVendor: '某某电堆企业',
|
||||
maintenanceList: [
|
||||
{ key: '1', item: '变速器油', kmCycle: '60000', monthCycle: '24', laborCost: '0', materialCost: '571', total: '571.00' },
|
||||
{ key: '2', item: '机油', kmCycle: '50000', monthCycle: '12', laborCost: '100', materialCost: '300', total: '400.00' }
|
||||
]
|
||||
};
|
||||
|
||||
// 车辆类型选项需包含初始值（18吨双飞翼货车）
|
||||
var vehicleTypeOptions = [
|
||||
{ value: '18吨双飞翼货车', label: '18吨双飞翼货车' },
|
||||
{ value: '轻型厢式货车', label: '轻型厢式货车' },
|
||||
{ value: '重型厢式货车', label: '重型厢式货车' },
|
||||
{ value: '重型半挂牵引车', label: '重型半挂牵引车' },
|
||||
{ value: '重型集装箱半挂车', label: '重型集装箱半挂车' },
|
||||
{ value: '小型普通客车', label: '小型普通客车' },
|
||||
{ value: '重型平板半挂车', label: '重型平板半挂车' },
|
||||
{ value: '叉车', label: '叉车' },
|
||||
{ value: '油车', label: '油车' },
|
||||
{ value: '观光车', label: '观光车' }
|
||||
];
|
||||
var fuelTypeOptions = [
|
||||
{ value: '氢', label: '氢' },
|
||||
{ value: '电', label: '电' },
|
||||
{ value: '油', label: '油' }
|
||||
];
|
||||
var gaugeModeOptions = [
|
||||
{ value: 'MPa', label: 'MPa' },
|
||||
{ value: 'bar', label: 'bar' }
|
||||
];
|
||||
|
||||
// 基本情况
|
||||
var brand = useState(initialData.brand);
|
||||
var model = useState(initialData.model);
|
||||
var vehicleType = useState(initialData.vehicleType);
|
||||
var fuelType = useState(initialData.fuelType);
|
||||
var plateColor = useState(initialData.plateColor);
|
||||
var sizeLength = useState(initialData.sizeLength);
|
||||
var sizeWidth = useState(initialData.sizeWidth);
|
||||
var sizeHeight = useState(initialData.sizeHeight);
|
||||
// 轮胎情况
|
||||
var tireCount = useState(initialData.tireCount);
|
||||
var tireSpec = useState(initialData.tireSpec);
|
||||
// 电气情况
|
||||
var batteryType = useState(initialData.batteryType);
|
||||
var batteryVendor = useState(initialData.batteryVendor);
|
||||
var capacityKwh = useState(initialData.capacityKwh);
|
||||
var electricRange = useState(initialData.electricRange);
|
||||
// 供氢系统情况
|
||||
var cylinderCapacity = useState(initialData.cylinderCapacity);
|
||||
var gaugeMode = useState(initialData.gaugeMode);
|
||||
var hydrogenRange = useState(initialData.hydrogenRange);
|
||||
var hydrogenVendor = useState(initialData.hydrogenVendor);
|
||||
// 其他系统情况
|
||||
var coldMachineVendor = useState(initialData.coldMachineVendor);
|
||||
var stackVendor = useState(initialData.stackVendor);
|
||||
// 保养项列表
|
||||
var maintenanceList = useState(initialData.maintenanceList.slice());
|
||||
var formErrors = useState({});
|
||||
|
||||
function calcTotal(labor, material) {
|
||||
var l = parseFloat(labor);
|
||||
var m = parseFloat(material);
|
||||
if (isNaN(l)) l = 0;
|
||||
if (isNaN(m)) m = 0;
|
||||
return (l + m).toFixed(2);
|
||||
}
|
||||
|
||||
function updateMaintenance(index, field, value) {
|
||||
maintenanceList[1](function (prev) {
|
||||
var list = prev.slice();
|
||||
var row = Object.assign({}, list[index] || {});
|
||||
row[field] = value;
|
||||
if (field === 'laborCost' || field === 'materialCost') {
|
||||
row.total = calcTotal(row.laborCost, row.materialCost);
|
||||
}
|
||||
list[index] = row;
|
||||
return list;
|
||||
});
|
||||
}
|
||||
|
||||
function addMaintenanceRow() {
|
||||
maintenanceList[1](function (prev) {
|
||||
var key = String((prev.length + 1) + Date.now());
|
||||
return prev.concat([{ key: key, item: '', kmCycle: '', monthCycle: '', laborCost: '', materialCost: '', total: '' }]);
|
||||
});
|
||||
}
|
||||
|
||||
function removeMaintenanceRow(index) {
|
||||
maintenanceList[1](function (prev) {
|
||||
var list = prev.slice();
|
||||
list.splice(index, 1);
|
||||
if (list.length === 0) list = [{ key: '1', item: '', kmCycle: '', monthCycle: '', laborCost: '', materialCost: '', total: '' }];
|
||||
return list;
|
||||
});
|
||||
}
|
||||
|
||||
function validate() {
|
||||
var err = {};
|
||||
if (!String(brand[0] || '').trim()) err.brand = '请输入品牌名称';
|
||||
if (!String(model[0] || '').trim()) err.model = '请输入型号名称';
|
||||
if (vehicleType[0] == null || vehicleType[0] === '') err.vehicleType = '请选择车辆类型';
|
||||
formErrors[1](err);
|
||||
return Object.keys(err).length === 0;
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
if (!validate()) {
|
||||
message.warning('请完善必填项');
|
||||
return;
|
||||
}
|
||||
message.success('保存成功（原型）');
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
if (window.history && window.history.back) window.history.back();
|
||||
else message.info('取消');
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px 80px', backgroundColor: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8, boxSizing: 'border-box' };
|
||||
var formColFullStyle = { flex: '0 0 100%', marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var errMsgStyle = { color: '#ff4d4f', fontSize: 12, marginTop: 4 };
|
||||
var inputStyle = { width: '100%' };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
var cardTitleBarStyle = { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: '100%', fontSize: 15, fontWeight: 500, lineHeight: 1.5 };
|
||||
var cardTitleBarLineStyle = { width: 4, height: 16, backgroundColor: '#1890ff', borderRadius: 2, marginRight: 8, flexShrink: 0 };
|
||||
|
||||
function FormItem(props) {
|
||||
var colStyle = props.fullWidth ? formColFullStyle : formColStyle;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: labelStyle },
|
||||
props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null,
|
||||
props.label
|
||||
),
|
||||
props.children,
|
||||
props.error ? React.createElement('div', { style: errMsgStyle }, props.error) : null
|
||||
);
|
||||
}
|
||||
|
||||
function CardTitleWithBar(title) {
|
||||
return React.createElement('div', { style: cardTitleBarStyle },
|
||||
React.createElement('span', { style: cardTitleBarLineStyle }),
|
||||
React.createElement('span', null, title)
|
||||
);
|
||||
}
|
||||
|
||||
var maintenanceColumns = [
|
||||
{ title: '养护项目', dataIndex: 'item', key: 'item', width: 160, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'item', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '保养公里周期(KM)', dataIndex: 'kmCycle', key: 'kmCycle', width: 140, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'kmCycle', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '保养时间周期(月)', dataIndex: 'monthCycle', key: 'monthCycle', width: 140, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'monthCycle', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '工时费(元)', dataIndex: 'laborCost', key: 'laborCost', width: 120, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'laborCost', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '材料费(元)', dataIndex: 'materialCost', key: 'materialCost', width: 120, render: function (v, record, i) { return React.createElement(Input, { placeholder: '请输入', value: v, onChange: function (e) { updateMaintenance(i, 'materialCost', e.target.value); }, size: 'small' }); } },
|
||||
{ title: '合计', dataIndex: 'total', key: 'total', width: 100, render: function (v) { return v || '—'; } },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: function (_, record, i) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeMaintenanceRow(i); } }, '删除');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '基本数据维护' },
|
||||
{ title: '型号参数' },
|
||||
{ title: '编辑' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('型号参数'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '品牌', required: true, error: formErrors[0].brand },
|
||||
React.createElement(Input, { placeholder: '请输入品牌名称', value: brand[0], onChange: function (e) { brand[1](e.target.value); }, style: inputStyle, status: formErrors[0].brand ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '型号', required: true, error: formErrors[0].model },
|
||||
React.createElement(Input, { placeholder: '请输入型号名称', value: model[0], onChange: function (e) { model[1](e.target.value); }, style: inputStyle, status: formErrors[0].model ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '车辆类型', required: true, error: formErrors[0].vehicleType },
|
||||
React.createElement(Select, { placeholder: '请选择车辆类型', style: inputStyle, value: vehicleType[0], onChange: function (v) { vehicleType[1](v); }, allowClear: true, options: vehicleTypeOptions, status: formErrors[0].vehicleType ? 'error' : undefined })
|
||||
),
|
||||
React.createElement(FormItem, { label: '燃料种类' },
|
||||
React.createElement(Select, { placeholder: '请选择燃料种类', style: inputStyle, value: fuelType[0], onChange: function (v) { fuelType[1](v); }, allowClear: true, options: fuelTypeOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '车厢颜色' },
|
||||
React.createElement(Radio.Group, { value: plateColor[0], onChange: function (e) { plateColor[1](e.target.value); } },
|
||||
React.createElement(Radio, { value: '绿牌' }, '绿牌'),
|
||||
React.createElement(Radio, { value: '黄牌' }, '黄牌'),
|
||||
React.createElement(Radio, { value: '黄绿牌' }, '黄绿牌')
|
||||
)
|
||||
),
|
||||
React.createElement(FormItem, { label: '整车尺寸', fullWidth: true },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
|
||||
React.createElement(Input, { placeholder: '长', value: sizeLength[0], onChange: function (e) { sizeLength[1](e.target.value); }, style: { flex: 1, minWidth: 0 } }),
|
||||
React.createElement('span', { style: { flexShrink: 0 } }, '×'),
|
||||
React.createElement(Input, { placeholder: '宽', value: sizeWidth[0], onChange: function (e) { sizeWidth[1](e.target.value); }, style: { flex: 1, minWidth: 0 } }),
|
||||
React.createElement('span', { style: { flexShrink: 0 } }, '×'),
|
||||
React.createElement(Input, { placeholder: '高', value: sizeHeight[0], onChange: function (e) { sizeHeight[1](e.target.value); }, style: { flex: 1, minWidth: 0 } })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('轮胎情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '轮胎数量' },
|
||||
React.createElement(Input, { placeholder: '请输入轮胎数量', value: tireCount[0], onChange: function (e) { tireCount[1](e.target.value); }, style: inputStyle, addonAfter: '条' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '轮胎规格' },
|
||||
React.createElement(Input, { placeholder: '请输入轮胎规格', value: tireSpec[0], onChange: function (e) { tireSpec[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('电气情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '电池类型' },
|
||||
React.createElement(Radio.Group, { value: batteryType[0], onChange: function (e) { batteryType[1](e.target.value); } },
|
||||
React.createElement(Radio, { value: '磷酸铁锂' }, '磷酸铁锂'),
|
||||
React.createElement(Radio, { value: '三元锂' }, '三元锂')
|
||||
)
|
||||
),
|
||||
React.createElement(FormItem, { label: '电池厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入电池厂商名称', value: batteryVendor[0], onChange: function (e) { batteryVendor[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '储电量' },
|
||||
React.createElement(Input, { placeholder: '请输入储电量', value: capacityKwh[0], onChange: function (e) { capacityKwh[1](e.target.value); }, style: inputStyle, addonAfter: 'kWh' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电续航里程' },
|
||||
React.createElement(Input, { placeholder: '请输入电续航里程', value: electricRange[0], onChange: function (e) { electricRange[1](e.target.value); }, style: inputStyle, addonAfter: 'KM' })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('供氢系统情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '氢瓶容量' },
|
||||
React.createElement(Input, { placeholder: '请输入氢瓶容量', value: cylinderCapacity[0], onChange: function (e) { cylinderCapacity[1](e.target.value); }, style: inputStyle, addonAfter: 'L' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '仪表盘显示模式' },
|
||||
React.createElement(Select, { placeholder: '请选择仪表盘显示模式', style: inputStyle, value: gaugeMode[0], onChange: function (v) { gaugeMode[1](v); }, allowClear: true, options: gaugeModeOptions })
|
||||
),
|
||||
React.createElement(FormItem, { label: '氢续航里程' },
|
||||
React.createElement(Input, { placeholder: '请输入氢续航里程', value: hydrogenRange[0], onChange: function (e) { hydrogenRange[1](e.target.value); }, style: inputStyle, addonAfter: 'KM' })
|
||||
),
|
||||
React.createElement(FormItem, { label: '供氢系统厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入供氢系统厂家', value: hydrogenVendor[0], onChange: function (e) { hydrogenVendor[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('其他系统情况'), size: 'small', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '冷机厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入冷机厂家名称', value: coldMachineVendor[0], onChange: function (e) { coldMachineVendor[1](e.target.value); }, style: inputStyle })
|
||||
),
|
||||
React.createElement(FormItem, { label: '电堆厂家' },
|
||||
React.createElement(Input, { placeholder: '请输入电堆厂家名称', value: stackVendor[0], onChange: function (e) { stackVendor[1](e.target.value); }, style: inputStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: CardTitleWithBar('保养项情况'), size: 'small', style: cardStyle },
|
||||
React.createElement(Table, {
|
||||
columns: maintenanceColumns,
|
||||
dataSource: maintenanceList[0],
|
||||
rowKey: 'key',
|
||||
pagination: false,
|
||||
size: 'small',
|
||||
bordered: true
|
||||
}),
|
||||
React.createElement(Button, { type: 'dashed', style: { width: '100%', marginTop: 8 }, onClick: addMaintenanceRow }, '+ 添加一项')
|
||||
),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Component = Component;
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
}
|
||||
}
|
||||
256
web端/运维管理/基本数据维护/型号参数.jsx
Normal file
256
web端/运维管理/基本数据维护/型号参数.jsx
Normal file
@@ -0,0 +1,256 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 基本数据维护 - 型号参数（布局参考车辆租赁合同）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
var useCallback = React.useCallback;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Table = antd.Table;
|
||||
var Space = antd.Space;
|
||||
var message = antd.message;
|
||||
var Modal = antd.Modal;
|
||||
|
||||
// 筛选
|
||||
var filterVehicleType = useState(undefined);
|
||||
var filterBrand = useState(undefined);
|
||||
var filterModel = useState(undefined);
|
||||
var appliedFilter = useState({ vehicleType: undefined, brand: undefined, model: undefined });
|
||||
|
||||
// 下拉选项：车辆类型、品牌
|
||||
var vehicleTypeOptions = [
|
||||
{ value: '18吨双飞翼货车', label: '18吨双飞翼货车' },
|
||||
{ value: '重型厢式货车', label: '重型厢式货车' },
|
||||
{ value: '轻型厢式货车', label: '轻型厢式货车' },
|
||||
{ value: '小型普通客车', label: '小型普通客车' },
|
||||
{ value: '重型栏板货车', label: '重型栏板货车' }
|
||||
];
|
||||
var brandOptions = [
|
||||
{ value: '苏龙', label: '苏龙' },
|
||||
{ value: '东风', label: '东风' },
|
||||
{ value: '福田', label: '福田' },
|
||||
{ value: '江淮', label: '江淮' },
|
||||
{ value: '重汽', label: '重汽' },
|
||||
{ value: '陕汽', label: '陕汽' }
|
||||
];
|
||||
// 品牌 -> 型号联动：先选品牌，型号下拉只展示该品牌下型号
|
||||
var brandModelMap = {
|
||||
'苏龙': [
|
||||
{ value: '海格牌KLQ5180XYKFCEV', label: '海格牌KLQ5180XYKFCEV' },
|
||||
{ value: 'KLQ6129', label: 'KLQ6129' },
|
||||
{ value: 'KLQ6106', label: 'KLQ6106' },
|
||||
{ value: '海格牌KLQ5090', label: '海格牌KLQ5090' }
|
||||
],
|
||||
'东风': [
|
||||
{ value: 'DFH1180', label: 'DFH1180' },
|
||||
{ value: 'DFH1250', label: 'DFH1250' },
|
||||
{ value: 'DFH5180', label: 'DFH5180' }
|
||||
],
|
||||
'福田': [
|
||||
{ value: 'BJ1180', label: 'BJ1180' },
|
||||
{ value: 'BJ5180', label: 'BJ5180' },
|
||||
{ value: '欧曼EST', label: '欧曼EST' }
|
||||
],
|
||||
'江淮': [
|
||||
{ value: 'HFC1180', label: 'HFC1180' },
|
||||
{ value: 'HFC5180', label: 'HFC5180' },
|
||||
{ value: '帅铃Q6', label: '帅铃Q6' }
|
||||
],
|
||||
'重汽': [
|
||||
{ value: 'ZZ5180', label: 'ZZ5180' },
|
||||
{ value: 'ZZ1250', label: 'ZZ1250' },
|
||||
{ value: '豪沃T7H', label: '豪沃T7H' }
|
||||
],
|
||||
'陕汽': [
|
||||
{ value: 'SX1180', label: 'SX1180' },
|
||||
{ value: 'SX5180', label: 'SX5180' },
|
||||
{ value: '德龙X3000', label: '德龙X3000' }
|
||||
]
|
||||
};
|
||||
var modelOptions = useMemo(function () {
|
||||
var brand = filterBrand[0];
|
||||
if (!brand || !brandModelMap[brand]) return [];
|
||||
return brandModelMap[brand];
|
||||
}, [filterBrand[0]]);
|
||||
|
||||
// 列表数据（样例与车辆管理-查看.jsx 型号参数一致，并扩展多品牌多型号）
|
||||
var rawList = [
|
||||
{ id: '1', vehicleType: '18吨双飞翼货车', brand: '苏龙', model: '海格牌KLQ5180XYKFCEV', fuelType: '氢', plateColor: '绿牌', wholeSize: '5995mm x 2145mm x 3130mm', tireCount: '8', tireSpec: '15/80R22.5', batteryType: '磷酸铁锂', capacityKwh: '100000', cylinderCapacity: 'xxx L' },
|
||||
{ id: '2', vehicleType: '重型厢式货车', brand: '东风', model: 'DFH1180', fuelType: '氢', plateColor: '绿牌', wholeSize: '5990mm x 2150mm x 3080mm', tireCount: '8', tireSpec: '295/80R22.5', batteryType: '磷酸铁锂', capacityKwh: '96000', cylinderCapacity: '140 L' },
|
||||
{ id: '3', vehicleType: '重型厢式货车', brand: '福田', model: 'BJ1180', fuelType: '氢', plateColor: '绿牌', wholeSize: '5985mm x 2140mm x 3120mm', tireCount: '8', tireSpec: '295/80R22.5', batteryType: '磷酸铁锂', capacityKwh: '98000', cylinderCapacity: '135 L' },
|
||||
{ id: '4', vehicleType: '轻型厢式货车', brand: '江淮', model: 'HFC1180', fuelType: '氢', plateColor: '绿牌', wholeSize: '5995mm x 2100mm x 2980mm', tireCount: '6', tireSpec: '225/70R19.5', batteryType: '磷酸铁锂', capacityKwh: '72000', cylinderCapacity: '80 L' },
|
||||
{ id: '5', vehicleType: '18吨双飞翼货车', brand: '重汽', model: 'ZZ5180', fuelType: '氢', plateColor: '绿牌', wholeSize: '5995mm x 2145mm x 3140mm', tireCount: '8', tireSpec: '15/80R22.5', batteryType: '磷酸铁锂', capacityKwh: '102000', cylinderCapacity: '150 L' },
|
||||
{ id: '6', vehicleType: '小型普通客车', brand: '苏龙', model: 'KLQ6129', fuelType: '氢', plateColor: '绿牌', wholeSize: '11980mm x 2550mm x 3580mm', tireCount: '6', tireSpec: '275/70R22.5', batteryType: '磷酸铁锂', capacityKwh: '85000', cylinderCapacity: '100 L' },
|
||||
{ id: '7', vehicleType: '重型栏板货车', brand: '陕汽', model: 'SX1180', fuelType: '氢', plateColor: '绿牌', wholeSize: '5995mm x 2150mm x 3100mm', tireCount: '8', tireSpec: '295/80R22.5', batteryType: '磷酸铁锂', capacityKwh: '95000', cylinderCapacity: '130 L' }
|
||||
];
|
||||
|
||||
var filteredList = useMemo(function () {
|
||||
var list = rawList.slice();
|
||||
var f = appliedFilter[0];
|
||||
if (f.vehicleType) list = list.filter(function (r) { return r.vehicleType === f.vehicleType; });
|
||||
if (f.brand) list = list.filter(function (r) { return r.brand === f.brand; });
|
||||
if (f.model) list = list.filter(function (r) { return r.model === f.model; });
|
||||
return list;
|
||||
}, [rawList, appliedFilter[0]]);
|
||||
|
||||
var handleQuery = useCallback(function () {
|
||||
appliedFilter[1]({
|
||||
vehicleType: filterVehicleType[0],
|
||||
brand: filterBrand[0],
|
||||
model: filterModel[0]
|
||||
});
|
||||
}, [filterVehicleType[0], filterBrand[0], filterModel[0]]);
|
||||
|
||||
var handleReset = useCallback(function () {
|
||||
filterVehicleType[1](undefined);
|
||||
filterBrand[1](undefined);
|
||||
filterModel[1](undefined);
|
||||
appliedFilter[1]({ vehicleType: undefined, brand: undefined, model: undefined });
|
||||
}, []);
|
||||
|
||||
var deleteModalState = useState({ open: false, record: null });
|
||||
var openDeleteConfirm = useCallback(function (record) {
|
||||
deleteModalState[1]({ open: true, record: record });
|
||||
}, []);
|
||||
var confirmDelete = useCallback(function () {
|
||||
message.success('删除成功（原型）');
|
||||
deleteModalState[1]({ open: false, record: null });
|
||||
}, []);
|
||||
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
|
||||
var columns = [
|
||||
{ title: '车辆类型', dataIndex: 'vehicleType', key: 'vehicleType', width: 120, ellipsis: true },
|
||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 100, ellipsis: true },
|
||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 180, ellipsis: true },
|
||||
{ title: '燃料种类', dataIndex: 'fuelType', key: 'fuelType', width: 100, ellipsis: true },
|
||||
{ title: '车牌颜色', dataIndex: 'plateColor', key: 'plateColor', width: 100, ellipsis: true },
|
||||
{ title: '整车尺寸', dataIndex: 'wholeSize', key: 'wholeSize', width: 140, ellipsis: true },
|
||||
{ title: '轮胎数量', dataIndex: 'tireCount', key: 'tireCount', width: 90, ellipsis: true },
|
||||
{ title: '轮胎规格', dataIndex: 'tireSpec', key: 'tireSpec', width: 120, ellipsis: true },
|
||||
{ title: '电池类型', dataIndex: 'batteryType', key: 'batteryType', width: 100, ellipsis: true },
|
||||
{ title: '储电量(kWh)', dataIndex: 'capacityKwh', key: 'capacityKwh', width: 120, ellipsis: true },
|
||||
{ title: '氢瓶容量', dataIndex: 'cylinderCapacity', key: 'cylinderCapacity', width: 100, ellipsis: true },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 160,
|
||||
fixed: 'right',
|
||||
render: function (_, record) {
|
||||
return React.createElement(Space, { size: 4 },
|
||||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0 }, onClick: function () { message.info('查看（原型）'); } }, '查看'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', style: { padding: 0 }, onClick: function () { message.info('编辑（原型）'); } }, '编辑'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', danger: true, style: { padding: 0 }, onClick: function () { openDeleteConfirm(record); } }, '删除')
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '基本数据维护' },
|
||||
{ title: '型号参数' }
|
||||
]
|
||||
})
|
||||
),
|
||||
React.createElement(Card, { style: { marginBottom: 16 } },
|
||||
React.createElement('div', {
|
||||
style: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr 1fr',
|
||||
gap: '16px 24px',
|
||||
alignItems: 'start',
|
||||
minWidth: 0
|
||||
}
|
||||
},
|
||||
React.createElement('div', null,
|
||||
React.createElement('div', { style: filterLabelStyle }, '车辆类型'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择车系类型',
|
||||
style: { width: '100%' },
|
||||
value: filterVehicleType[0],
|
||||
onChange: function (v) { filterVehicleType[1](v); },
|
||||
allowClear: true,
|
||||
options: vehicleTypeOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', null,
|
||||
React.createElement('div', { style: filterLabelStyle }, '品牌'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: filterBrand[0],
|
||||
onChange: function (v) { filterBrand[1](v); filterModel[1](undefined); },
|
||||
allowClear: true,
|
||||
options: brandOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', null,
|
||||
React.createElement('div', { style: filterLabelStyle }, '型号'),
|
||||
React.createElement(Select, {
|
||||
placeholder: filterBrand[0] ? '请选择型号' : '请先选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: filterModel[0],
|
||||
onChange: function (v) { filterModel[1](v); },
|
||||
allowClear: true,
|
||||
options: modelOptions,
|
||||
disabled: !filterBrand[0]
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
|
||||
React.createElement(Button, { onClick: handleReset }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询')
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { marginBottom: 16, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 8 } },
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { message.info('新建（原型）'); } }, '新建'),
|
||||
React.createElement(Button, { onClick: function () { message.info('导出（原型）'); } }, '导出')
|
||||
),
|
||||
React.createElement(Card, null,
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: columns,
|
||||
dataSource: filteredList,
|
||||
scroll: { x: 1400 },
|
||||
size: 'small',
|
||||
pagination: { showSizeChanger: true, showQuickJumper: true, showTotal: function (t) { return '共 ' + t + ' 条'; } }
|
||||
})
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '确认删除',
|
||||
open: deleteModalState[0].open,
|
||||
onCancel: function () { deleteModalState[1]({ open: false, record: null }); },
|
||||
onOk: confirmDelete,
|
||||
okText: '确定',
|
||||
cancelText: '取消'
|
||||
}, '确定要删除该型号参数吗？')
|
||||
);
|
||||
};
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.Component = Component;
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
var rootEl = document.getElementById('root');
|
||||
if (rootEl && window.ReactDOM && window.React) {
|
||||
var root = ReactDOM.createRoot(rootEl);
|
||||
root.render(React.createElement(Component));
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user