feat(web): 同步 web 端目录更新至 Gitea
包含加氢站站点信息、运维交车/故障、台账与数据分析等页面新增与改动。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
王冕
296
web端/车辆管理.jsx
296
web端/车辆管理.jsx
@@ -18,9 +18,16 @@ const Component = function () {
|
||||
var Upload = antd.Upload;
|
||||
var Card = antd.Card;
|
||||
var Tabs = antd.Tabs;
|
||||
var Form = antd.Form;
|
||||
var Row = antd.Row;
|
||||
var Col = antd.Col;
|
||||
var message = antd.message;
|
||||
var App = antd.App;
|
||||
|
||||
// 联调后对接权限中心；原型默认 admin 可编辑，改为 'staff' 可验证无权限隐藏
|
||||
var CURRENT_USER = { id: 'u_admin', name: '系统管理员', role: 'admin' };
|
||||
var isAdmin = CURRENT_USER.role === 'admin';
|
||||
|
||||
// 筛选项状态
|
||||
var _region = useState([]);
|
||||
var _vehicleType = useState(undefined);
|
||||
@@ -49,6 +56,9 @@ const Component = function () {
|
||||
var _requirementModalVisible = useState(false);
|
||||
var _inspectImportModalVisible = useState(false);
|
||||
var _inspectImportResult = useState(null);
|
||||
var _editModalVisible = useState(false);
|
||||
var _editRecord = useState(null);
|
||||
var _editForm = useState({});
|
||||
|
||||
// 省-市 地区数据（示例）
|
||||
var regionOptions = [
|
||||
@@ -81,6 +91,49 @@ const Component = function () {
|
||||
{ label: '第三方融资租赁有限公司', value: '第三方融资租赁有限公司' },
|
||||
{ label: '无', value: '-' }
|
||||
];
|
||||
var parkingOptions = [
|
||||
{ label: '天河停车场', value: '天河停车场' },
|
||||
{ label: '黄埔停车场', value: '黄埔停车场' },
|
||||
{ label: '朝阳停车场', value: '朝阳停车场' },
|
||||
{ label: '福田停车场', value: '福田停车场' },
|
||||
{ label: '浦东停车场', value: '浦东停车场' },
|
||||
{ label: '南山停车场', value: '南山停车场' },
|
||||
{ label: '番禺停车场', value: '番禺停车场' },
|
||||
{ label: '大兴停车场', value: '大兴停车场' },
|
||||
{ label: '龙岗停车场', value: '龙岗停车场' },
|
||||
{ label: '白云停车场', value: '白云停车场' },
|
||||
{ label: '西城停车场', value: '西城停车场' },
|
||||
{ label: '虹口停车场', value: '虹口停车场' },
|
||||
{ label: '昌平停车场', value: '昌平停车场' },
|
||||
{ label: '-', value: '-' }
|
||||
];
|
||||
var operateStatusOptions = [
|
||||
{ label: '租赁', value: '租赁' },
|
||||
{ label: '自营', value: '自营' },
|
||||
{ label: '可运营', value: '可运营' },
|
||||
{ label: '待运营', value: '待运营' },
|
||||
{ label: '退出运营', value: '退出运营' }
|
||||
];
|
||||
var vehicleStatusOptions = [
|
||||
{ label: '待验车', value: '待验车' },
|
||||
{ label: '未备车', value: '未备车' },
|
||||
{ label: '已备车', value: '已备车' },
|
||||
{ label: '待交车', value: '待交车' },
|
||||
{ label: '已交车', value: '已交车' },
|
||||
{ label: '待还车', value: '待还车' },
|
||||
{ label: '销售中', value: '销售中' },
|
||||
{ label: '替换中', value: '替换中' },
|
||||
{ label: '调拨中', value: '调拨中' },
|
||||
{ label: '异动中', value: '异动中' },
|
||||
{ label: '三方退租中', value: '三方退租中' },
|
||||
{ label: '无', value: '无' }
|
||||
];
|
||||
var yearOptions = (function () {
|
||||
var y = new Date().getFullYear();
|
||||
var opts = [];
|
||||
for (var i = y; i >= y - 12; i--) opts.push({ label: String(i), value: String(i) });
|
||||
return opts;
|
||||
})();
|
||||
|
||||
// 表格数据（模拟 20 条）— 状态字段按《车辆状态》脑图（2026-03）：
|
||||
// 运营状态：租赁、自营、可运营、待运营、退出运营（原「库存」并入「可运营」）
|
||||
@@ -111,13 +164,16 @@ const Component = function () {
|
||||
{ id: '20', region: '北京市/北京市', vin: 'LSJA24U70PS999000', plateNo: '京H88888', vehicleNo: '-', vehicleType: '小型轿车', brand: '蔚来', model: 'ET5', color: '白色', parking: '昌平停车场', customer: '客户D', department: '华北区', manager: '孙七', operateStatus: '退出运营', vehicleStatus: '无', outStatus: '报废出库', licenseStatus: '无', insuranceStatus: '正常', ownership: '某某科技有限公司', operateCompany: '羚牛运营（上海）', vehicleSource: '外租', leaseCompany: '-', onlineStatus: '离线', year: '2022', mileage: '15600.00', purchaseDate: '2022-06-20', regDate: '2022-07-10', inspectExpire: '2024-07', lastDeliveryTime: '2024-01-10', lastDeliveryMile: '15300.00', lastReturnTime: '2024-01-28', lastReturnMile: '15600.00', scrapDate: '2037-07-31', contractNo: '-', location: '北京市昌平区回龙观西大街100号', gpsTime: '2024-02-10 12:30' }
|
||||
];
|
||||
|
||||
var _tableData = useState(rawData);
|
||||
|
||||
var dataSource = useMemo(function () {
|
||||
var plate = _plateFilter[0];
|
||||
if (!plate || plate.trim() === '') return rawData;
|
||||
return rawData.filter(function (row) {
|
||||
var list = _tableData[0];
|
||||
if (!plate || plate.trim() === '') return list;
|
||||
return list.filter(function (row) {
|
||||
return row.plateNo && row.plateNo.indexOf(plate) !== -1;
|
||||
});
|
||||
}, [rawData, _plateFilter[0]]);
|
||||
}, [_tableData[0], _plateFilter[0]]);
|
||||
|
||||
var onPlateFilterChange = useCallback(function (e) {
|
||||
_plateFilter[1](e.target.value);
|
||||
@@ -268,6 +324,92 @@ const Component = function () {
|
||||
closeConfirmModal();
|
||||
}, []);
|
||||
|
||||
var openEditModal = useCallback(function (record) {
|
||||
if (!isAdmin) {
|
||||
message.warning('仅 Admin 可编辑车辆信息');
|
||||
return;
|
||||
}
|
||||
_editRecord[1](record);
|
||||
_editForm[1]({
|
||||
parking: record.parking === '-' ? '-' : (record.parking || undefined),
|
||||
operateStatus: record.operateStatus || undefined,
|
||||
vehicleStatus: record.vehicleStatus || undefined,
|
||||
ownership: record.ownership && record.ownership !== '-' ? record.ownership : '',
|
||||
operateCompany: record.operateCompany || undefined,
|
||||
vehicleSource: record.vehicleSource || undefined,
|
||||
leaseCompany: record.leaseCompany && record.leaseCompany !== '-' ? record.leaseCompany : '',
|
||||
year: record.year || undefined,
|
||||
purchaseDate: record.purchaseDate || ''
|
||||
});
|
||||
_editModalVisible[1](true);
|
||||
}, []);
|
||||
|
||||
var closeEditModal = useCallback(function () {
|
||||
_editModalVisible[1](false);
|
||||
_editRecord[1](null);
|
||||
_editForm[1]({});
|
||||
}, []);
|
||||
|
||||
var onEditFormChange = useCallback(function (field, value) {
|
||||
_editForm[1](function (prev) {
|
||||
var next = Object.assign({}, prev);
|
||||
next[field] = value;
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var saveEdit = useCallback(function () {
|
||||
if (!isAdmin) {
|
||||
message.warning('仅 Admin 可保存');
|
||||
return;
|
||||
}
|
||||
var record = _editRecord[0];
|
||||
var form = _editForm[0];
|
||||
if (!record) return;
|
||||
if (!form.operateStatus || !form.vehicleStatus) {
|
||||
message.warning('请选择运营状态与车辆状态');
|
||||
return;
|
||||
}
|
||||
_tableData[1](function (prev) {
|
||||
return prev.map(function (row) {
|
||||
if (row.id !== record.id) return row;
|
||||
var ownershipVal = (form.ownership || '').trim();
|
||||
var leaseVal = (form.leaseCompany || '').trim();
|
||||
return Object.assign({}, row, {
|
||||
parking: form.parking || '-',
|
||||
operateStatus: form.operateStatus,
|
||||
vehicleStatus: form.vehicleStatus,
|
||||
ownership: ownershipVal || '-',
|
||||
operateCompany: form.operateCompany || row.operateCompany,
|
||||
vehicleSource: form.vehicleSource || row.vehicleSource,
|
||||
leaseCompany: leaseVal || '-',
|
||||
year: form.year || row.year,
|
||||
purchaseDate: form.purchaseDate || row.purchaseDate
|
||||
});
|
||||
});
|
||||
});
|
||||
if (_detailRecord[0] && _detailRecord[0].id === record.id) {
|
||||
_detailRecord[1](function (prev) {
|
||||
if (!prev || prev.id !== record.id) return prev;
|
||||
var ownershipVal = (form.ownership || '').trim();
|
||||
var leaseVal = (form.leaseCompany || '').trim();
|
||||
return Object.assign({}, prev, {
|
||||
parking: form.parking || '-',
|
||||
operateStatus: form.operateStatus,
|
||||
vehicleStatus: form.vehicleStatus,
|
||||
ownership: ownershipVal || '-',
|
||||
operateCompany: form.operateCompany || prev.operateCompany,
|
||||
vehicleSource: form.vehicleSource || prev.vehicleSource,
|
||||
leaseCompany: leaseVal || '-',
|
||||
year: form.year || prev.year,
|
||||
purchaseDate: form.purchaseDate || prev.purchaseDate
|
||||
});
|
||||
});
|
||||
}
|
||||
message.success('车辆信息已保存（原型演示）');
|
||||
closeEditModal();
|
||||
}, []);
|
||||
|
||||
// 状态类字段：枚举为「无」时界面显示为「-」
|
||||
var formatStatusDisplay = function (val) {
|
||||
if (val === '无') return '-';
|
||||
@@ -326,15 +468,24 @@ const Component = function () {
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 140,
|
||||
width: isAdmin ? 180 : 140,
|
||||
fixed: 'right',
|
||||
render: function (_, record) {
|
||||
return React.createElement(Space, null,
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goDetail(record); } }, '查看'),
|
||||
React.createElement(Dropdown, { menu: { items: getMoreMenuItems(record) }, trigger: ['click'] },
|
||||
React.createElement(Button, { type: 'link', size: 'small' }, '更多')
|
||||
)
|
||||
);
|
||||
var actions = [
|
||||
React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { goDetail(record); } }, '查看')
|
||||
];
|
||||
if (isAdmin) {
|
||||
actions.push(React.createElement(Button, {
|
||||
key: 'edit',
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: function () { openEditModal(record); }
|
||||
}, '编辑'));
|
||||
}
|
||||
actions.push(React.createElement(Dropdown, { key: 'more', menu: { items: getMoreMenuItems(record) }, trigger: ['click'] },
|
||||
React.createElement(Button, { type: 'link', size: 'small' }, '更多')
|
||||
));
|
||||
return React.createElement(Space, { size: 0 }, actions);
|
||||
}
|
||||
}
|
||||
];
|
||||
@@ -680,6 +831,131 @@ const Component = function () {
|
||||
footer: React.createElement(Button, { onClick: function () { _requirementModalVisible[1](false); } }, '关闭')
|
||||
}, React.createElement('div', { style: { maxHeight: 560, overflow: 'auto', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementText)),
|
||||
|
||||
React.createElement(Modal, {
|
||||
title: '编辑车辆信息',
|
||||
open: _editModalVisible[0],
|
||||
onCancel: closeEditModal,
|
||||
width: 720,
|
||||
destroyOnClose: true,
|
||||
footer: [
|
||||
React.createElement(Button, { key: 'cancel', onClick: closeEditModal }, '取消'),
|
||||
React.createElement(Button, { key: 'save', type: 'primary', onClick: saveEdit }, '保存')
|
||||
]
|
||||
}, _editRecord[0] ? React.createElement('div', null,
|
||||
React.createElement('div', { style: { marginBottom: 16, padding: '8px 12px', background: '#f5f5f5', borderRadius: 4, fontSize: 13, color: 'rgba(0,0,0,0.65)' } },
|
||||
'车牌号：', React.createElement('span', { style: { fontWeight: 600, color: 'rgba(0,0,0,0.85)' } }, _editRecord[0].plateNo || '-'),
|
||||
' VIN：', React.createElement('span', { style: { color: 'rgba(0,0,0,0.85)' } }, _editRecord[0].vin || '-')
|
||||
),
|
||||
React.createElement(Form, { layout: 'vertical' },
|
||||
React.createElement(Row, { gutter: 16 },
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '车辆归属停车场', required: true },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择停车场',
|
||||
style: { width: '100%' },
|
||||
options: parkingOptions,
|
||||
value: _editForm[0].parking,
|
||||
onChange: function (v) { onEditFormChange('parking', v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '运营状态', required: true },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择运营状态',
|
||||
style: { width: '100%' },
|
||||
options: operateStatusOptions,
|
||||
value: _editForm[0].operateStatus,
|
||||
onChange: function (v) { onEditFormChange('operateStatus', v); }
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '车辆状态', required: true },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择车辆状态',
|
||||
style: { width: '100%' },
|
||||
options: vehicleStatusOptions,
|
||||
value: _editForm[0].vehicleStatus,
|
||||
onChange: function (v) { onEditFormChange('vehicleStatus', v); }
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '登记所有权' },
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入登记所有权',
|
||||
value: _editForm[0].ownership || '',
|
||||
onChange: function (e) { onEditFormChange('ownership', e.target.value); },
|
||||
allowClear: true
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '运营公司' },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择运营公司',
|
||||
style: { width: '100%' },
|
||||
options: operateCompanyOptions,
|
||||
value: _editForm[0].operateCompany,
|
||||
onChange: function (v) { onEditFormChange('operateCompany', v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '车辆来源' },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择车辆来源',
|
||||
style: { width: '100%' },
|
||||
options: vehicleSourceOptions,
|
||||
value: _editForm[0].vehicleSource,
|
||||
onChange: function (v) { onEditFormChange('vehicleSource', v); },
|
||||
allowClear: true
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '租赁公司' },
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入租赁公司，无则留空',
|
||||
value: _editForm[0].leaseCompany || '',
|
||||
onChange: function (e) { onEditFormChange('leaseCompany', e.target.value); },
|
||||
allowClear: true
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '出厂年份' },
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择出厂年份',
|
||||
style: { width: '100%' },
|
||||
options: yearOptions,
|
||||
value: _editForm[0].year,
|
||||
onChange: function (v) { onEditFormChange('year', v); },
|
||||
allowClear: true
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Col, { span: 12 },
|
||||
React.createElement(Form.Item, { label: '采购入库时间', extra: '格式：YYYY-MM-DD' },
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入采购入库时间',
|
||||
value: _editForm[0].purchaseDate || '',
|
||||
onChange: function (e) { onEditFormChange('purchaseDate', e.target.value); },
|
||||
allowClear: true
|
||||
})
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
) : null),
|
||||
|
||||
React.createElement(Modal, {
|
||||
title: '批量导入等评时间',
|
||||
open: _inspectImportModalVisible[0],
|
||||
|
||||
Reference in New Issue
Block a user