fc86688beb
- 备车管理、新增备车、查看备车、备车-编辑：布局与字段调整，新增取消按钮 - 基本数据维护：型号参数列表/新增/查看/编辑页 - 车辆业务：备车-编辑页，示例图片、提交/保存/取消按钮 - 需求说明目录与文档整理 Made-with: Cursor
257 lines
11 KiB
JavaScript
257 lines
11 KiB
JavaScript
// 【重要】必须使用 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));
|
|
}
|
|
}
|
|
}
|