// 【重要】必须使用 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 } }) ); };