feat(web): 运维管理-备车/型号参数与需求说明更新

- 备车管理、新增备车、查看备车、备车-编辑:布局与字段调整,新增取消按钮
- 基本数据维护:型号参数列表/新增/查看/编辑页
- 车辆业务:备车-编辑页,示例图片、提交/保存/取消按钮
- 需求说明目录与文档整理

Made-with: Cursor
This commit is contained in:
王冕
2026-03-13 00:23:02 +08:00
parent cef9c8e24a
commit fc86688beb
17 changed files with 2658 additions and 274 deletions

View File

@@ -3,7 +3,6 @@
const Component = function () {
var useState = React.useState;
var useMemo = React.useMemo;
var antd = window.antd;
var Breadcrumb = antd.Breadcrumb;
@@ -13,11 +12,9 @@ const Component = function () {
var Input = antd.Input;
var Space = antd.Space;
var Modal = antd.Modal;
var Cascader = antd.Cascader;
var message = antd.message;
var requirementModalVisible = useState(false);
var filterCascaderValue = useState(undefined); // [brand] 或 [brand, model]
var listDataState = useState([
{ id: 1, brand: '东风', model: '18吨双飞翼', rentalCostPerDay: 260.00, selfOperatedCostPerDay: 250.00 },
{ id: 2, brand: '福田', model: '18吨厢式', rentalCostPerDay: 255.00, selfOperatedCostPerDay: 245.00 },
@@ -42,28 +39,6 @@ const Component = function () {
var editSelfOperated = editSelfOperatedState[0];
var setEditSelfOperated = editSelfOperatedState[1];
var cascaderOptions = useMemo(function () {
var map = {};
listData.forEach(function (r) {
if (!r.brand) return;
if (!map[r.brand]) map[r.brand] = { value: r.brand, label: r.brand, children: [] };
var children = map[r.brand].children;
var model = r.model || '';
if (model && children.every(function (c) { return c.value !== model; })) {
children.push({ value: model, label: model });
}
});
return Object.keys(map).map(function (k) { return map[k]; });
}, [listData]);
var filteredList = useMemo(function () {
var val = filterCascaderValue[0];
if (!val || !Array.isArray(val) || val.length === 0) return listData;
var brand = val[0];
var model = val[1];
if (model) return listData.filter(function (r) { return r.brand === brand && r.model === model; });
return listData.filter(function (r) { return r.brand === brand; });
}, [listData, filterCascaderValue[0]]);
function fmtCost(v) {
var n = typeof v === 'number' ? v : parseFloat(v);
@@ -100,9 +75,6 @@ const Component = function () {
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var cardStyle = { marginBottom: 16 };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%', maxWidth: 320 };
var columns = [
{ title: '序号', key: 'idx', width: 72, align: 'center', render: function (_, __, index) { return index + 1; } },
@@ -179,7 +151,7 @@ const Component = function () {
}
];
var requirementContent = '车辆成本维护2026年3月12日版本\n一个「数字化资产ONEOS运管平台」中的「车辆成本维护」模块\n#面包屑:业务管理-车辆成本维护;\n\n页面分为2个卡片\n1.筛选:\n#支持车辆品牌、型号筛选;\n1.1.型号:级联选择器,支持品牌、型号级联;\n\n2.车辆成本列表列表默认显示当前系统中所有品牌和型号记录,如型号参数表有新增,则该处同步新增一条数据;\n2.1.品牌:显示车辆品牌;\n2.2.型号显示车辆型号如18吨双飞翼而不是公告型号\n2.3.租赁车辆日成本显示格式为xx.xx元支持两位小数\n2.4.自营车辆日成本显示格式为xx.xx元支持两位小数\n2.5.操作:编辑;';
var requirementContent = '车辆成本维护2026年3月12日版本\n一个「数字化资产ONEOS运管平台」中的「车辆成本维护」模块\n#面包屑:业务管理-车辆成本维护;\n\n页面为1个卡片车辆成本列表列表默认显示当前系统中所有品牌和型号记录,如型号参数表有新增,则该处同步新增一条数据;\n1.品牌:显示车辆品牌;\n2.型号显示车辆型号如18吨双飞翼而不是公告型号\n3.租赁车辆日成本显示格式为xx.xx元支持两位小数\n4.自营车辆日成本显示格式为xx.xx元支持两位小数\n5.操作:编辑;';
return React.createElement('div', { style: layoutStyle },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
@@ -191,31 +163,11 @@ const Component = function () {
}),
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
),
React.createElement(Card, { title: '筛选', style: cardStyle },
React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 16 } },
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '型号'),
React.createElement(Cascader, {
options: cascaderOptions,
value: filterCascaderValue[0],
onChange: function (v) { filterCascaderValue[1](v); },
placeholder: '请选择品牌 / 型号',
allowClear: true,
style: filterControlStyle,
changeOnSelect: true
})
),
React.createElement('div', { style: { display: 'flex', gap: 8 } },
React.createElement(Button, { onClick: function () { filterCascaderValue[1](undefined); } }, '重置'),
React.createElement(Button, { type: 'primary' }, '查询')
)
)
),
React.createElement(Card, { title: '车辆成本列表', style: cardStyle },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: filteredList,
dataSource: listData,
pagination: { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } },
size: 'middle',
bordered: true