feat(web): 运维管理-备车/型号参数与需求说明更新
- 备车管理、新增备车、查看备车、备车-编辑:布局与字段调整,新增取消按钮 - 基本数据维护:型号参数列表/新增/查看/编辑页 - 车辆业务:备车-编辑页,示例图片、提交/保存/取消按钮 - 需求说明目录与文档整理 Made-with: Cursor
This commit is contained in:
@@ -1,15 +0,0 @@
|
||||
车辆成本维护(2026年3月12日版本)
|
||||
一个「数字化资产ONEOS运管平台」中的「车辆成本维护」模块
|
||||
#面包屑:业务管理-车辆成本维护;
|
||||
|
||||
页面分为2个卡片;
|
||||
1.筛选:
|
||||
#支持车辆品牌、型号筛选;
|
||||
1.1.型号:级联选择器,支持品牌、型号级联;
|
||||
|
||||
2.车辆成本列表:列表默认显示当前系统中所有品牌和型号记录,如型号参数表有新增,则该处同步新增一条数据;
|
||||
2.1.品牌:显示车辆品牌;
|
||||
2.2.型号:显示车辆型号(如18吨双飞翼,而不是公告型号);
|
||||
2.3.租赁车辆日成本:显示格式为:xx.xx元,支持两位小数;
|
||||
2.4.自营车辆日成本:显示格式为:xx.xx元,支持两位小数;
|
||||
2.5.操作:编辑;
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user