wangmian/ONE-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(运维-车辆): 异动管理查看/结束异动/编辑、备件与需求说明更新

Browse Source 
Made-with: Cursor
This commit is contained in:
王冕
2026-03-21 13:19:27 +08:00
parent c75d1656e3
commit 49d9e3675d
9 changed files with 2812 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

498
web端/运维管理/备件管理/仓库管理.jsx Normal file
View File

@@ -0,0 +1,498 @@
// 【重要】必须使用 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 Button = antd.Button;
var Drawer = antd.Drawer;
var Input = antd.Input;
var Table = antd.Table;
var Select = antd.Select;
var DatePicker = antd.DatePicker;
var Modal = antd.Modal;
var message = antd.message;
var RangePicker = DatePicker.RangePicker;
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
function pad2(n) {
return n < 10 ? '0' + n : '' + n;
}
// 格式化：YYYY-MM-DD HH:MM（尽量保持输入原样）
function fmtYMDHM(v) {
if (v === null || v === undefined) return '-';
var s = String(v).trim();
if (!s) return '-';
if (/^\d{4}-\d{2}-\d{2}\s+\d{2}:\d{2}/.test(s)) return s.slice(0, 16);
if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s + ' 00:00';
try {
var d = new Date(s.replace(/-/g, '/'));
if (isNaN(d.getTime())) return s;
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
} catch (e) {
return s;
}
}
function matchRange(valStr, range) {
if (!range || !range[0] || !range[1]) return true;
var s = '';
var e = '';
if (range[0] && range[0].format) s = range[0].format('YYYY-MM-DD');
if (range[1] && range[1].format) e = range[1].format('YYYY-MM-DD');
if (!s && !e) return true;
var v = String(valStr || '').slice(0, 10);
if (s && v < s) return false;
if (e && v > e) return false;
return true;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var tableSingleLineStyle = '.warehouse-list-table .ant-table-thead th,.warehouse-list-table .ant-table-tbody td{white-space:nowrap;}';
// mock 列表数据（仓库是否为空用 itemCount 表示）
var warehousesState = useState(function () {
return [
{ id: 'wh1', warehouseCode: 'WH-001', warehouseName: '天河备件库', warehouseAddress: '广州市天河区xx路1号', warehouseManager: '张明', creatorName: '张明', createTime: '2026-02-20 09:30', itemCount: 12 },
{ id: 'wh2', warehouseCode: 'WH-002', warehouseName: '西湖服务备件库', warehouseAddress: '杭州市西湖区xx街88号', warehouseManager: '王芳', creatorName: '王芳', createTime: '2026-02-21 14:10', itemCount: 0 },
{ id: 'wh3', warehouseCode: 'WH-003', warehouseName: '上海浦东备件仓', warehouseAddress: '上海市浦东新区xx大道55号', warehouseManager: '李华', creatorName: '李华', createTime: '2026-02-22 08:45', itemCount: 5 },
{ id: 'wh4', warehouseCode: 'WH-004', warehouseName: '深圳南山备件仓', warehouseAddress: '深圳市南山区xx科技园3栋', warehouseManager: '赵强', creatorName: '赵强', createTime: '2026-02-23 10:20', itemCount: 0 },
{ id: 'wh5', warehouseCode: 'WH-005', warehouseName: '成都高新备件库', warehouseAddress: '成都市高新区xx路12号', warehouseManager: '陈静', creatorName: '陈静', createTime: '2026-02-24 11:05', itemCount: 9 },
{ id: 'wh6', warehouseCode: 'WH-006', warehouseName: '宁波江北备件库', warehouseAddress: '宁波市江北区xx街道6号', warehouseManager: '张明', creatorName: '张明', createTime: '2026-02-25 16:40', itemCount: 0 },
{ id: 'wh7', warehouseCode: 'WH-007', warehouseName: '北京朝阳备件仓', warehouseAddress: '北京市朝阳区xx路77号', warehouseManager: '王芳', creatorName: '王芳', createTime: '2026-02-26 09:15', itemCount: 21 },
{ id: 'wh8', warehouseCode: 'WH-008', warehouseName: '重庆两江备件库', warehouseAddress: '重庆市两江新区xx大道18号', warehouseManager: '李华', creatorName: '李华', createTime: '2026-02-27 07:45', itemCount: 2 }
];
});
var warehouses = warehousesState[0];
var setWarehouses = warehousesState[1];
var defaultDraftState = { warehouseName: undefined, creatorName: undefined, createTimeRange: null };
var draftState = useState(Object.assign({}, defaultDraftState));
var draft = draftState[0];
var setDraft = draftState[1];
var appliedState = useState(Object.assign({}, defaultDraftState));
var applied = appliedState[0];
var setApplied = appliedState[1];
var pageState = useState(1);
var page = pageState[0];
var setPage = pageState[1];
var pageSizeState = useState(10);
var pageSize = pageSizeState[0];
var setPageSize = pageSizeState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
// 新增抽屉
var addDrawerOpenState = useState(false);
var addDrawerOpen = addDrawerOpenState[0];
var setAddDrawerOpen = addDrawerOpenState[1];
var addDrawerModeState = useState('add'); // 'add' | 'edit'
var addDrawerMode = addDrawerModeState[0];
var setAddDrawerMode = addDrawerModeState[1];
var editingWarehouseIdState = useState(null);
var editingWarehouseId = editingWarehouseIdState[0];
var setEditingWarehouseId = editingWarehouseIdState[1];
var addFormState = useState({
warehouseCode: '',
warehouseName: '',
warehouseAddress: '',
warehouseManager: undefined
});
var addForm = addFormState[0];
var setAddForm = addFormState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「仓库管理」模块',
'#面包屑：运维管理-备件库-仓库管理',
'',
'1.筛选：',
'1.1.仓库名称：选择器，支持输入框内输入内容模糊搜索下拉匹配结果；',
'1.2.创建人：选择器，下拉显示创建人；',
'1.3.创建时间：日期选择器，支持单输入框双日历通过开始-结束时间筛选；',
'',
'2.列表；右侧为新增；',
'2.1.序号：1.2.3.以此类推；',
'2.2.仓库编码：显示仓库编码；',
'2.3.仓库名称：显示仓库名称；',
'2.4.仓库地址：显示仓库地址；',
'2.5.仓库管理人：显示仓库管理人；',
'2.6.创建人：显示创建人；',
'2.7.创建时间：显示创建时间，格式为：YYYY-MM-DD HH:MM；',
'2.8.操作：编辑、删除；',
' 2.8.1.编辑：跳转仓库设置-编辑页；',
' 2.8.2.删除：点击进行二次确认，确认后判断仓库是否为空，如果仓库非空则提示：清空仓库后才可删除该仓库，仓库为空则提示：删除成功；'
].join('\n');
var creatorOptions = useMemo(function () {
// 创建人下拉来源：固定示例 + 兼容 mock 数据变更
var set = new Set();
setWarehouses; // keep linter friendly for unused setters in some generators
(warehouses || []).forEach(function (r) { if (r && r.creatorName) set.add(r.creatorName); });
if (set.size === 0) {
['张明', '王芳', '李华', '赵强', '陈静'].forEach(function (v) { set.add(v); });
}
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [warehouses]);
var warehouseManagerOptions = useMemo(function () {
var set = new Set();
(warehouses || []).forEach(function (r) { if (r && r.warehouseManager) set.add(r.warehouseManager); });
if (set.size === 0) {
['张明', '王芳', '李华', '赵强', '陈静'].forEach(function (v) { set.add(v); });
}
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [warehouses]);
var warehouseNameOptions = useMemo(function () {
var set = new Set();
(warehouses || []).forEach(function (r) { if (r && r.warehouseName) set.add(r.warehouseName); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [warehouses]);
var filtered = useMemo(function () {
return (warehouses || []).filter(function (r) {
if (applied.warehouseName && r.warehouseName !== applied.warehouseName) return false;
if (applied.creatorName && r.creatorName !== applied.creatorName) return false;
if (!matchRange(r.createTime, applied.createTimeRange)) return false;
return true;
});
}, [warehouses, applied]);
var paged = useMemo(function () {
var start = (page - 1) * pageSize;
return filtered.slice(start, start + pageSize);
}, [filtered, page, pageSize]);
var serialStart = (page - 1) * pageSize;
var handleQuery = useCallback(function () {
setApplied({
warehouseName: draft.warehouseName,
creatorName: draft.creatorName,
createTimeRange: draft.createTimeRange
});
setPage(1);
}, [draft]);
var handleReset = useCallback(function () {
setDraft(Object.assign({}, defaultDraftState));
setApplied(Object.assign({}, defaultDraftState));
setPage(1);
}, []);
var handleAdd = useCallback(function () {
setAddDrawerMode('add');
setEditingWarehouseId(null);
setAddForm({ warehouseCode: '', warehouseName: '', warehouseAddress: '', warehouseManager: undefined });
setAddDrawerOpen(true);
}, []);
var handleEdit = useCallback(function (row) {
if (!row) return;
setAddDrawerMode('edit');
setEditingWarehouseId(row.id);
setAddForm({
warehouseCode: row.warehouseCode || '',
warehouseName: row.warehouseName || '',
warehouseAddress: row.warehouseAddress || '',
warehouseManager: row.warehouseManager
});
setAddDrawerOpen(true);
}, []);
var handleAddCancel = useCallback(function () {
setAddDrawerOpen(false);
setAddDrawerMode('add');
setEditingWarehouseId(null);
setAddForm({ warehouseCode: '', warehouseName: '', warehouseAddress: '', warehouseManager: undefined });
}, []);
function nowYMDHM() {
var d = new Date();
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
}
var handleAddSubmit = useCallback(function () {
var code = String(addForm.warehouseCode || '').trim();
var name = String(addForm.warehouseName || '').trim();
var address = String(addForm.warehouseAddress || '').trim();
var manager = addForm.warehouseManager ? addForm.warehouseManager : undefined;
// 仅仓库编码、仓库名称必填；地址/管理人选填
if (!code) {
message.warning('请填写仓库编码');
return;
}
if (!name) {
message.warning('请填写仓库名称');
return;
}
if (addDrawerMode === 'edit') {
if (!editingWarehouseId) {
message.error('无法定位要编辑的仓库记录');
return;
}
setWarehouses(function (prev) {
return (prev || []).map(function (r) {
if (!r || r.id !== editingWarehouseId) return r;
return Object.assign({}, r, {
warehouseCode: code,
warehouseName: name,
warehouseAddress: address,
warehouseManager: manager
});
});
});
setAddDrawerOpen(false);
setAddDrawerMode('add');
setEditingWarehouseId(null);
message.success('编辑成功');
return;
}
var item = {
id: 'wh' + Date.now(),
warehouseCode: code,
warehouseName: name,
warehouseAddress: address,
warehouseManager: manager,
creatorName: '当前用户',
createTime: nowYMDHM(),
itemCount: 0
};
setWarehouses(function (prev) {
return [item].concat(prev || []);
});
setAddDrawerOpen(false);
setAddDrawerMode('add');
setEditingWarehouseId(null);
message.success('新增成功');
}, [addForm, addDrawerMode, editingWarehouseId, setWarehouses, setAddDrawerMode, setEditingWarehouseId]);
var handleDelete = useCallback(function (row) {
if (!row) return;
Modal.confirm({
title: '确认删除',
content: '请确认是否删除该仓库',
okText: '确认',
cancelText: '取消',
onOk: function () {
if (row.itemCount > 0) {
message.warning('清空仓库后才可删除该仓库');
return;
}
setWarehouses(function (prev) {
return (prev || []).filter(function (r) { return r.id !== row.id; });
});
message.success('删除成功');
}
});
}, [setWarehouses]);
var columns = useMemo(function () {
return [
{
title: '序号',
key: 'serial',
width: 70,
fixed: 'left',
render: function (_, r, idx) {
return serialStart + idx + 1;
}
},
{ title: '仓库编码', dataIndex: 'warehouseCode', key: 'warehouseCode', width: 160, fixed: 'left' },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 180, ellipsis: true },
{ title: '仓库地址', dataIndex: 'warehouseAddress', key: 'warehouseAddress', width: 240, ellipsis: true },
{ title: '仓库管理人', dataIndex: 'warehouseManager', key: 'warehouseManager', width: 140 },
{ title: '创建人', dataIndex: 'creatorName', key: 'creatorName', width: 120 },
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
width: 200,
render: function (v) { return fmtYMDHM(v); }
},
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
render: function (_, r) {
return React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { handleEdit(r); } }, '编辑'),
React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { handleDelete(r); } }, '删除')
);
}
}
];
}, [serialStart, handleDelete]);
return React.createElement('div', { style: layoutStyle },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '备件库' }, { title: '仓库管理' }] }),
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
),
React.createElement(Modal, {
title: '需求说明',
open: requirementModalOpen,
onCancel: function () { setRequirementModalOpen(false); },
width: 720,
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
React.createElement(Card, { style: { marginBottom: 16 } },
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '仓库名称'),
React.createElement(Select, {
placeholder: '请输入或选择仓库名称',
style: filterControlStyle,
value: draft.warehouseName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { warehouseName: v }); }); },
allowClear: true,
showSearch: true,
options: warehouseNameOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '创建人'),
React.createElement(Select, {
placeholder: '请选择创建人',
style: filterControlStyle,
value: draft.creatorName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { creatorName: v }); }); },
allowClear: true,
showSearch: true,
options: creatorOptions
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '创建时间'),
React.createElement(RangePicker, {
style: filterControlStyle,
value: draft.createTimeRange,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { createTimeRange: v }); }); },
placeholder: ['开始时间', '结束时间'],
showTime: false
})
)
),
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(Card, null,
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', marginBottom: 12 } },
React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增')
),
React.createElement('style', null, tableSingleLineStyle),
React.createElement('div', { className: 'warehouse-list-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 1200 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
)
),
React.createElement(Drawer, {
title: addDrawerMode === 'edit' ? '编辑仓库' : '新增仓库',
placement: 'right',
width: 460,
open: addDrawerOpen,
onClose: handleAddCancel,
styles: { body: { padding: 24 } },
footer: React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8 } },
React.createElement(Button, { type: 'primary', onClick: handleAddSubmit }, '提交'),
React.createElement(Button, { onClick: handleAddCancel }, '取消')
)
},
React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库编码'),
React.createElement(Input, {
value: addForm.warehouseCode,
disabled: addDrawerMode === 'edit',
onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseCode: e && e.target ? e.target.value : '' }); }); },
placeholder: '请输入仓库编码'
})
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库名称'),
React.createElement(Input, {
value: addForm.warehouseName,
onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseName: e && e.target ? e.target.value : '' }); }); },
placeholder: '请输入仓库名称'
})
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库地址'),
React.createElement(Input, {
value: addForm.warehouseAddress,
onChange: function (e) { setAddForm(function (p) { return Object.assign({}, p, { warehouseAddress: e && e.target ? e.target.value : '' }); }); },
placeholder: '请输入仓库地址'
})
),
React.createElement('div', null,
React.createElement('div', { style: { marginBottom: 6, color: '#666', fontSize: 14 } }, '仓库管理人'),
React.createElement(Select, {
placeholder: '请选择人员',
value: addForm.warehouseManager,
onChange: function (v) { setAddForm(function (p) { return Object.assign({}, p, { warehouseManager: v }); }); },
style: { width: '100%' },
allowClear: true,
showSearch: true,
filterOption: filterOption,
options: warehouseManagerOptions
})
)
)
)
);
};

584
web端/运维管理/备件管理/备件库存.jsx Normal file
View File

@@ -0,0 +1,584 @@
// 【重要】必须使用 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 Button = antd.Button;
var Table = antd.Table;
var Select = antd.Select;
var Modal = antd.Modal;
var Drawer = antd.Drawer;
var Form = antd.Form;
var Input = antd.Input;
var Tabs = antd.Tabs;
var message = antd.message;
function filterOption(input, option) {
var label = (option && (option.label || option.children)) || '';
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
}
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var tableStyle = '.spare-stock-table .ant-table-thead th,.spare-stock-table .ant-table-tbody td{white-space:nowrap;}' +
'.spare-stock-table .col-stock-qty{text-align:left !important;}' +
'.spare-stock-table th.col-stock-qty{text-align:left !important;}';
var tabsAlignStyle = '.spare-stock-main-tabs .ant-tabs-nav{align-items:center;margin-bottom:0;}';
// 适配车型：选项 value 与列表一致；label 附带关联型号（与基本数据-型号参数对应）
var vehicleModelSpecMap = {
'飞驰49t': '海格牌KLQ5180XYKFCEV',
'宇通49t': 'KLQ6129',
'现代4.5t': 'BJ5180',
'跃进4.5t': '帅铃Q6',
'苏龙18t': '海格牌KLQ5180XYKFCEV'
};
var allVehicleModelOptions = useMemo(function () {
return [
{ value: '飞驰49t', label: '飞驰49t' },
{ value: '宇通49t', label: '宇通49t' },
{ value: '现代4.5t', label: '现代4.5t' },
{ value: '跃进4.5t', label: '跃进4.5t' },
{ value: '苏龙18t', label: '苏龙18t' }
];
}, []);
var addDrawerVehicleOptions = useMemo(function () {
return allVehicleModelOptions.map(function (opt) {
var spec = vehicleModelSpecMap[opt.value];
return {
value: opt.value,
label: spec ? opt.value + '（型号：' + spec + '）' : opt.label
};
});
}, [allVehicleModelOptions]);
// 样例数据：新件库 11 条 + 易损件库 5 条（入库/出库与业务截图一致）
var listState = useState(function () {
var XJ = '新件库';
var XJCode = 'WH-XJK';
var YS = '易损件库';
var YSCode = 'WH-YSK';
return [
{ id: 'ss-xj-01', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'FC49t-XJ-0001', spareName: '去离子柱(飞驰49t-新件)', vehicleModels: ['飞驰49t'], stockQty: 34, totalInbound: 42, totalOutbound: 8 },
{ id: 'ss-xj-02', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'FC49t-XJ-0002', spareName: '燃料电池空气滤芯(飞驰49t-新件)', vehicleModels: ['飞驰49t'], stockQty: 28, totalInbound: 55, totalOutbound: 27 },
{ id: 'ss-xj-03', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0001', spareName: '去离子柱(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 20, totalInbound: 28, totalOutbound: 8 },
{ id: 'ss-xj-04', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0002', spareName: '燃料电池空气滤芯(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 12, totalInbound: 18, totalOutbound: 6 },
{ id: 'ss-xj-05', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0005', spareName: '燃料电池去离子水(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 5, totalInbound: 5, totalOutbound: 0 },
{ id: 'ss-xj-06', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0029', spareName: '小循环滤网(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 11, totalInbound: 13, totalOutbound: 2 },
{ id: 'ss-xj-07', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YT49t-XJ-0030', spareName: '大循环滤网(宇通49t-新件)', vehicleModels: ['宇通49t'], stockQty: 10, totalInbound: 10, totalOutbound: 0 },
{ id: 'ss-xj-08', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'XD4.5t-XJ-0008', spareName: '后尾灯(现代4.5t-新件)', vehicleModels: ['现代4.5t'], stockQty: 18, totalInbound: 40, totalOutbound: 22 },
{ id: 'ss-xj-09', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'YJ4.5t-XJ-0035', spareName: '12V蓄电池(跃进4.5t-新件)', vehicleModels: ['跃进4.5t'], stockQty: 23, totalInbound: 26, totalOutbound: 3 },
{ id: 'ss-xj-10', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'SL18t-XJ-0001', spareName: '去离子柱(苏龙18t-新件)', vehicleModels: ['苏龙18t'], stockQty: 11, totalInbound: 12, totalOutbound: 1 },
{ id: 'ss-xj-11', warehouseCode: XJCode, warehouseName: XJ, spareCode: 'SL18t-XJ-0002', spareName: '燃料电池空气滤芯(苏龙18t-新件)', vehicleModels: ['苏龙18t'], stockQty: 16, totalInbound: 16, totalOutbound: 0 },
{ id: 'ss-ys-01', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0001', spareName: 'H1灯泡-易损件', vehicleModels: [], stockQty: 55, totalInbound: 55, totalOutbound: 0 },
{ id: 'ss-ys-02', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0002', spareName: 'H3灯泡-易损件', vehicleModels: [], stockQty: 50, totalInbound: 50, totalOutbound: 0 },
{ id: 'ss-ys-03', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0003', spareName: 'H7灯泡-易损件', vehicleModels: [], stockQty: 53, totalInbound: 53, totalOutbound: 0 },
{ id: 'ss-ys-04', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0004', spareName: '小灯泡-易损件', vehicleModels: [], stockQty: 52, totalInbound: 52, totalOutbound: 0 },
{ id: 'ss-ys-05', warehouseCode: YSCode, warehouseName: YS, spareCode: 'TY-YS-0005', spareName: '2405灯泡-易损件', vehicleModels: [], stockQty: 110, totalInbound: 110, totalOutbound: 0 }
];
});
var list = listState[0];
// 入库 / 出库记录样例（原型）
var inboundListState = useState(function () {
return [
{ id: 'in-001', billNo: 'RK20250227001', inboundTime: '2025-02-27 09:12', warehouseName: '新件库', spareCode: 'FC49t-XJ-0001', spareName: '去离子柱(飞驰49t-新件)', qty: 4, operator: '张三' },
{ id: 'in-002', billNo: 'RK20250226088', inboundTime: '2025-02-26 14:30', warehouseName: '新件库', spareCode: 'YT49t-XJ-0002', spareName: '燃料电池空气滤芯(宇通49t-新件)', qty: 6, operator: '李四' },
{ id: 'in-003', billNo: 'RK20250225102', inboundTime: '2025-02-25 11:05', warehouseName: '易损件库', spareCode: 'TY-YS-0001', spareName: 'H1灯泡-易损件', qty: 20, operator: '王五' },
{ id: 'in-004', billNo: 'RK20250224056', inboundTime: '2025-02-24 16:20', warehouseName: '新件库', spareCode: 'SL18t-XJ-0002', spareName: '燃料电池空气滤芯(苏龙18t-新件)', qty: 8, operator: '张三' }
];
});
var inboundList = inboundListState[0];
var outboundListState = useState(function () {
return [
{ id: 'out-001', billNo: 'CK20250227012', outboundTime: '2025-02-27 10:08', warehouseName: '新件库', spareCode: 'FC49t-XJ-0002', spareName: '燃料电池空气滤芯(飞驰49t-新件)', qty: 2, recipient: '维修一组' },
{ id: 'out-002', billNo: 'CK20250226995', outboundTime: '2025-02-26 09:45', warehouseName: '新件库', spareCode: 'XD4.5t-XJ-0008', spareName: '后尾灯(现代4.5t-新件)', qty: 1, recipient: '维修二组' },
{ id: 'out-003', billNo: 'CK20250225880', outboundTime: '2025-02-25 13:22', warehouseName: '易损件库', spareCode: 'TY-YS-0003', spareName: 'H7灯泡-易损件', qty: 5, recipient: '场站 A' },
{ id: 'out-004', billNo: 'CK20250224771', outboundTime: '2025-02-24 08:50', warehouseName: '新件库', spareCode: 'YJ4.5t-XJ-0035', spareName: '12V蓄电池(跃进4.5t-新件)', qty: 1, recipient: '维修一组' }
];
});
var outboundList = outboundListState[0];
var inboundPageState = useState(1);
var inboundPage = inboundPageState[0];
var setInboundPage = inboundPageState[1];
var inboundPageSizeState = useState(10);
var inboundPageSize = inboundPageSizeState[0];
var setInboundPageSize = inboundPageSizeState[1];
var outboundPageState = useState(1);
var outboundPage = outboundPageState[0];
var setOutboundPage = outboundPageState[1];
var outboundPageSizeState = useState(10);
var outboundPageSize = outboundPageSizeState[0];
var setOutboundPageSize = outboundPageSizeState[1];
var mainTabState = useState('stock');
var mainTab = mainTabState[0];
var setMainTab = mainTabState[1];
var defaultDraft = {
warehouseName: undefined,
spareCode: undefined,
spareName: undefined,
vehicleModels: []
};
var draftState = useState(Object.assign({}, defaultDraft));
var draft = draftState[0];
var setDraft = draftState[1];
var appliedState = useState(Object.assign({}, defaultDraft));
var applied = appliedState[0];
var setApplied = appliedState[1];
var pageState = useState(1);
var page = pageState[0];
var setPage = pageState[1];
var pageSizeState = useState(10);
var pageSize = pageSizeState[0];
var setPageSize = pageSizeState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var addDrawerState = useState(false);
var addDrawerOpen = addDrawerState[0];
var setAddDrawerOpen = addDrawerState[1];
var addForm = Form.useForm()[0];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「备件库存」模块',
'#面包屑：运维管理-备件库-备件库存',
'',
'1.筛选：',
'1.1.仓库名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
'1.2.备件编码：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
'1.3.备件名称：选择器，支持输入框内输入模糊搜索，下拉匹配正确项；',
'1.4.适配车型：选择器，支持多选，显示所有型号；',
'',
'2.列表；右侧为新增物料信息、导出按钮',
'2.1.序号：1.2.3.以此类推；',
'2.2.仓库编码：显示仓库编码；',
'2.3.仓库名称：显示仓库名称；',
'2.4.备件编码：显示备件编码；',
'2.5.备件名称：显示备件名称；',
'2.6.适配车型：显示适配车型，一个备件可能有多个车型；',
'2.7.库存数量：显示库存数量；',
'2.8.累积入库数量：显示该备件入库数量总和；',
'2.9.累积出库数量：显示该备件出库数量总和；',
'2.10.右下角为分页功能，支持选择单页显示数据条数；'
].join('\n');
var warehouseNameOptions = useMemo(function () {
var set = new Set();
(list || []).forEach(function (r) { if (r && r.warehouseName) set.add(r.warehouseName); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [list]);
var spareCodeOptions = useMemo(function () {
var set = new Set();
(list || []).forEach(function (r) { if (r && r.spareCode) set.add(r.spareCode); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [list]);
var spareNameOptions = useMemo(function () {
var set = new Set();
(list || []).forEach(function (r) { if (r && r.spareName) set.add(r.spareName); });
return Array.from(set).map(function (v) { return { value: v, label: v }; });
}, [list]);
function rowMatchesVehicleModels(row, selected) {
if (!selected || selected.length === 0) return true;
var models = row.vehicleModels || [];
for (var i = 0; i < selected.length; i++) {
if (models.indexOf(selected[i]) >= 0) return true;
}
return false;
}
var filtered = useMemo(function () {
return (list || []).filter(function (r) {
if (applied.warehouseName && r.warehouseName !== applied.warehouseName) return false;
if (applied.spareCode && r.spareCode !== applied.spareCode) return false;
if (applied.spareName && r.spareName !== applied.spareName) return false;
if (!rowMatchesVehicleModels(r, applied.vehicleModels)) return false;
return true;
});
}, [list, applied]);
var paged = useMemo(function () {
var start = (page - 1) * pageSize;
return filtered.slice(start, start + pageSize);
}, [filtered, page, pageSize]);
var serialStart = (page - 1) * pageSize;
var handleQuery = useCallback(function () {
setApplied({
warehouseName: draft.warehouseName,
spareCode: draft.spareCode,
spareName: draft.spareName,
vehicleModels: draft.vehicleModels ? draft.vehicleModels.slice() : []
});
setPage(1);
}, [draft]);
var handleReset = useCallback(function () {
setDraft(Object.assign({}, defaultDraft));
setApplied(Object.assign({}, defaultDraft));
setPage(1);
}, []);
var handleAdd = useCallback(function () {
addForm.resetFields();
setAddDrawerOpen(true);
}, [addForm]);
var handleAddDrawerClose = useCallback(function () {
setAddDrawerOpen(false);
addForm.resetFields();
}, [addForm]);
var handleAddDrawerSubmit = useCallback(function () {
addForm.validateFields().then(function () {
message.success('已保存（原型，联调时对接建档接口）');
setAddDrawerOpen(false);
addForm.resetFields();
}).catch(function () {});
}, [addForm]);
var handleExport = useCallback(function () {
message.success('导出当前筛选结果（原型，联调时对接导出接口）');
}, []);
var columns = useMemo(function () {
return [
{
title: '序号',
key: 'serial',
width: 70,
fixed: 'left',
render: function (_, r, idx) {
return serialStart + idx + 1;
}
},
{ title: '仓库编码', dataIndex: 'warehouseCode', key: 'warehouseCode', width: 120, fixed: 'left' },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 160, ellipsis: true },
{ title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 120 },
{ title: '备件名称', dataIndex: 'spareName', key: 'spareName', width: 260, ellipsis: true },
{
title: '适配车型',
key: 'vehicleModels',
width: 220,
ellipsis: true,
render: function (_, r) {
var arr = r.vehicleModels || [];
return arr.length ? arr.join('、') : '-';
}
},
{
title: '库存数量',
dataIndex: 'stockQty',
key: 'stockQty',
width: 100,
align: 'left',
className: 'col-stock-qty',
onHeaderCell: function () { return { className: 'col-stock-qty' }; },
render: function (v) {
if (v == null) return '-';
return React.createElement('span', {
style: {
color: 'var(--ant-color-primary, #1677ff)',
fontWeight: 600,
fontSize: 15
}
}, v);
}
},
{
title: '累积入库数量',
dataIndex: 'totalInbound',
key: 'totalInbound',
width: 130,
render: function (v) { return v != null ? Number(v).toFixed(1) : '-'; }
},
{
title: '累积出库数量',
dataIndex: 'totalOutbound',
key: 'totalOutbound',
width: 130,
render: function (v) { return v != null ? Number(v).toFixed(1) : '-'; }
}
];
}, [serialStart]);
var inboundSerialStart = (inboundPage - 1) * inboundPageSize;
var inboundPaged = useMemo(function () {
var start = (inboundPage - 1) * inboundPageSize;
return (inboundList || []).slice(start, start + inboundPageSize);
}, [inboundList, inboundPage, inboundPageSize]);
var outboundSerialStart = (outboundPage - 1) * outboundPageSize;
var outboundPaged = useMemo(function () {
var start = (outboundPage - 1) * outboundPageSize;
return (outboundList || []).slice(start, start + outboundPageSize);
}, [outboundList, outboundPage, outboundPageSize]);
var inboundColumns = useMemo(function () {
return [
{ title: '序号', key: 'serial', width: 70, render: function (_, r, idx) { return inboundSerialStart + idx + 1; } },
{ title: '入库单号', dataIndex: 'billNo', key: 'billNo', width: 150 },
{ title: '入库时间', dataIndex: 'inboundTime', key: 'inboundTime', width: 160 },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 120 },
{ title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 130 },
{ title: '备件名称', dataIndex: 'spareName', key: 'spareName', ellipsis: true },
{ title: '入库数量', dataIndex: 'qty', key: 'qty', width: 100 },
{ title: '经办人', dataIndex: 'operator', key: 'operator', width: 100 }
];
}, [inboundSerialStart]);
var outboundColumns = useMemo(function () {
return [
{ title: '序号', key: 'serial', width: 70, render: function (_, r, idx) { return outboundSerialStart + idx + 1; } },
{ title: '出库单号', dataIndex: 'billNo', key: 'billNo', width: 150 },
{ title: '出库时间', dataIndex: 'outboundTime', key: 'outboundTime', width: 160 },
{ title: '仓库名称', dataIndex: 'warehouseName', key: 'warehouseName', width: 120 },
{ title: '备件编码', dataIndex: 'spareCode', key: 'spareCode', width: 130 },
{ title: '备件名称', dataIndex: 'spareName', key: 'spareName', ellipsis: true },
{ title: '出库数量', dataIndex: 'qty', key: 'qty', width: 100 },
{ title: '领用方', dataIndex: 'recipient', key: 'recipient', width: 120 }
];
}, [outboundSerialStart]);
var tabItems = useMemo(function () {
var stockTab = React.createElement(Card, { style: { marginTop: 0 } },
React.createElement('style', null, tableStyle),
React.createElement('div', { className: 'spare-stock-table' },
React.createElement(Table, {
rowKey: 'id',
columns: columns,
dataSource: paged,
scroll: { x: 1460 },
size: 'small',
pagination: {
current: page,
pageSize: pageSize,
total: filtered.length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setPage(pg); if (ps) setPageSize(ps); }
}
})
)
);
var inboundTab = React.createElement(Card, null,
React.createElement(Table, {
rowKey: 'id',
columns: inboundColumns,
dataSource: inboundPaged,
size: 'small',
scroll: { x: 1200 },
pagination: {
current: inboundPage,
pageSize: inboundPageSize,
total: (inboundList || []).length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setInboundPage(pg); if (ps) setInboundPageSize(ps); }
}
})
);
var outboundTab = React.createElement(Card, null,
React.createElement(Table, {
rowKey: 'id',
columns: outboundColumns,
dataSource: outboundPaged,
size: 'small',
scroll: { x: 1200 },
pagination: {
current: outboundPage,
pageSize: outboundPageSize,
total: (outboundList || []).length,
showSizeChanger: true,
showQuickJumper: true,
showTotal: function (t) { return '共 ' + t + ' 条'; },
onChange: function (pg, ps) { setOutboundPage(pg); if (ps) setOutboundPageSize(ps); }
}
})
);
return [
{ key: 'stock', label: '备件库存', children: stockTab },
{ key: 'inbound', label: '入库记录', children: inboundTab },
{ key: 'outbound', label: '出库记录', children: outboundTab }
];
}, [
columns, paged, page, pageSize, filtered.length,
inboundColumns, inboundPaged, inboundPage, inboundPageSize, inboundList,
outboundColumns, outboundPaged, outboundPage, outboundPageSize, outboundList,
tableStyle
]);
return React.createElement('div', { style: layoutStyle },
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '备件库' }, { title: '备件库存' }] }),
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
),
React.createElement(Modal, {
title: '需求说明',
open: requirementModalOpen,
onCancel: function () { setRequirementModalOpen(false); },
width: 720,
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
React.createElement(Drawer, {
title: '新增物料信息',
placement: 'right',
width: 440,
open: addDrawerOpen,
onClose: handleAddDrawerClose,
destroyOnClose: true,
footer: React.createElement('div', { style: { textAlign: 'right' } },
React.createElement(Button, { onClick: handleAddDrawerClose, style: { marginRight: 8 } }, '取消'),
React.createElement(Button, { type: 'primary', onClick: handleAddDrawerSubmit }, '确定')
)
},
React.createElement(Form, {
form: addForm,
layout: 'vertical',
preserve: false
},
React.createElement(Form.Item, {
name: 'spareCode',
label: '备件编码',
rules: [{ required: true, message: '请输入备件编码' }]
}, React.createElement(Input, { placeholder: '请输入备件编码', allowClear: true })),
React.createElement(Form.Item, {
name: 'spareName',
label: '备件名称',
rules: [{ required: true, message: '请输入备件名称' }]
}, React.createElement(Input, { placeholder: '请输入备件名称', allowClear: true })),
React.createElement(Form.Item, {
name: 'unit',
label: '计算单位',
rules: [{ required: true, message: '请输入计算单位' }]
}, React.createElement(Input, { placeholder: '请输入计算单位', allowClear: true })),
React.createElement(Form.Item, {
name: 'vehicleModels',
label: '适配车型',
rules: [{ required: true, message: '请选择适配车型', type: 'array', min: 1 }]
}, React.createElement(Select, {
mode: 'multiple',
placeholder: '请选择车型（可多选，选项含关联型号）',
allowClear: true,
options: addDrawerVehicleOptions,
showSearch: true,
filterOption: filterOption,
maxTagCount: 'responsive'
})),
React.createElement(Form.Item, {
name: 'alertThreshold',
label: '告警阈值',
extra: React.createElement('span', { style: { color: 'rgba(0,0,0,0.45)', fontSize: 12 } }, '备件库存低于阈值会推送提示用户')
}, React.createElement(Input, { placeholder: '请设置备件告警阈值', allowClear: true }))
)
),
mainTab === 'stock' ? React.createElement(Card, { style: { marginBottom: 16 } },
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '仓库名称'),
React.createElement(Select, {
placeholder: '请输入或选择仓库名称',
style: filterControlStyle,
value: draft.warehouseName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { warehouseName: v }); }); },
allowClear: true,
showSearch: true,
options: warehouseNameOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '备件编码'),
React.createElement(Select, {
placeholder: '请输入或选择备件编码',
style: filterControlStyle,
value: draft.spareCode,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { spareCode: v }); }); },
allowClear: true,
showSearch: true,
options: spareCodeOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '备件名称'),
React.createElement(Select, {
placeholder: '请输入或选择备件名称',
style: filterControlStyle,
value: draft.spareName,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { spareName: v }); }); },
allowClear: true,
showSearch: true,
options: spareNameOptions,
filterOption: filterOption
})
),
React.createElement('div', { style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '适配车型'),
React.createElement(Select, {
mode: 'multiple',
placeholder: '请选择型号（可多选）',
style: filterControlStyle,
value: draft.vehicleModels,
onChange: function (v) { setDraft(function (p) { return Object.assign({}, p, { vehicleModels: v || [] }); }); },
allowClear: true,
options: allVehicleModelOptions,
maxTagCount: 'responsive'
})
)
),
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 }, '查询')
)
) : null,
React.createElement('style', null, tabsAlignStyle),
React.createElement(Tabs, {
className: 'spare-stock-main-tabs',
activeKey: mainTab,
onChange: setMainTab,
items: tabItems,
destroyInactiveTabPane: false,
tabBarExtraContent: mainTab === 'stock'
? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8 } },
React.createElement(Button, { type: 'primary', onClick: handleAdd }, '新增物料信息'),
React.createElement(Button, { onClick: handleExport }, '导出')
)
: null,
tabBarStyle: { marginBottom: 0 }
})
);
};