267 lines
12 KiB
JavaScript
267 lines
12 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', tireWearFeePerMm: '2.50', 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', tireWearFeePerMm: '2.80', 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', tireWearFeePerMm: '2.70', 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', tireWearFeePerMm: '2.20', 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', tireWearFeePerMm: '2.95', 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', tireWearFeePerMm: '1.80', 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', tireWearFeePerMm: '2.60', 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: '轮胎磨损费用（元/mm）',
|
||
dataIndex: 'tireWearFeePerMm',
|
||
key: 'tireWearFeePerMm',
|
||
width: 160,
|
||
render: function (v) {
|
||
var n = v === null || v === undefined || v === '' ? NaN : parseFloat(v);
|
||
var txt = isNaN(n) ? '--' : n.toFixed(2);
|
||
return React.createElement('span', null, txt);
|
||
}
|
||
},
|
||
{ 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));
|
||
}
|
||
}
|
||
}
|