226 lines
12 KiB
JavaScript
226 lines
12 KiB
JavaScript
// 【重要】必须使用 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 Input = antd.Input;
|
|
var Button = antd.Button;
|
|
var Select = antd.Select;
|
|
var Table = antd.Table;
|
|
var DatePicker = antd.DatePicker;
|
|
var message = antd.message;
|
|
|
|
// 项目详情（只读，来自交车任务/租赁合同）
|
|
var projectDetail = useMemo(function () {
|
|
return {
|
|
projectName: '嘉兴氢能示范项目',
|
|
contractCode: 'HT-ZL-2025-001',
|
|
customerName: '嘉兴某某物流有限公司',
|
|
expectedDate: '2025-02-28 至 2025-03-05',
|
|
deliveryRegion: '浙江省-嘉兴市',
|
|
deliveryAddress: '嘉兴市南湖区科技大道1号',
|
|
businessDept: '业务1部',
|
|
businessOwner: '张经理'
|
|
};
|
|
}, []);
|
|
|
|
// 备车库车辆选项（车牌号下拉仅能选备车库中车辆）
|
|
var reservePlateOptions = useMemo(function () {
|
|
return [
|
|
{ value: '京A12345', label: '京A12345' },
|
|
{ value: '京C11111', label: '京C11111' },
|
|
{ value: '京D22222', label: '京D22222' },
|
|
{ value: '浙A10001', label: '浙A10001' },
|
|
{ value: '浙F80088', label: '浙F80088' },
|
|
{ value: '沪A30003', label: '沪A30003' }
|
|
];
|
|
}, []);
|
|
|
|
// 交车明细列表（序号、品牌、型号、车牌号可编辑、实际交车日期、交车人、交车状态、操作）
|
|
var detailListState = useState([
|
|
{ key: 1, seq: 1, brand: '东风', model: 'DFH1180', plateNo: '京A12345', actualDate: '2025-02-28', deliveryPerson: '张三', status: '已签章' },
|
|
{ key: 2, seq: 2, brand: '东风', model: 'DFH1250', plateNo: '京C11111', actualDate: '2025-02-28', deliveryPerson: '张三', status: '已签章' },
|
|
{ key: 3, seq: 3, brand: '福田', model: 'BJ1180', plateNo: '浙A10001', actualDate: '2025-03-01', deliveryPerson: '李四', status: '已签章' },
|
|
{ key: 4, seq: 4, brand: '福田', model: 'BJ1250', plateNo: '浙F80088', actualDate: '2025-03-01', deliveryPerson: '李四', status: '已签章' },
|
|
{ key: 5, seq: 5, brand: '重汽', model: 'HOWO-T5G', plateNo: '沪A30003', actualDate: '2025-03-02', deliveryPerson: '王五', status: '已签章' },
|
|
{ key: 6, seq: 6, brand: '陕汽', model: '德龙X3000', plateNo: '京D22222', actualDate: '2025-03-02', deliveryPerson: '王五', status: '已完成' },
|
|
{ key: 7, seq: 7, brand: '解放', model: 'J6P', plateNo: '', actualDate: '', deliveryPerson: '', status: '待提交' },
|
|
{ key: 8, seq: 8, brand: '欧曼', model: 'EST-A', plateNo: '', actualDate: '', deliveryPerson: '', status: '待提交' },
|
|
{ key: 9, seq: 9, brand: '江淮', model: '格尔发K7', plateNo: '', actualDate: '', deliveryPerson: '', status: '待提交' },
|
|
{ key: 10, seq: 10, brand: '红岩', model: '杰狮C6', plateNo: '', actualDate: '', deliveryPerson: '', status: '待提交' }
|
|
]);
|
|
var detailList = detailListState[0];
|
|
var setDetailList = detailListState[1];
|
|
|
|
var allSigned = useMemo(function () {
|
|
return detailList.length > 0 && detailList.every(function (row) { return row.status === '已签章'; });
|
|
}, [detailList]);
|
|
|
|
var updateDetailRow = useCallback(function (index, field, value) {
|
|
setDetailList(function (prev) {
|
|
var next = prev.slice();
|
|
var row = next[index] || {};
|
|
next[index] = Object.assign({}, row, { [field]: value });
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
var handleSubmit = useCallback(function () {
|
|
if (!allSigned) return;
|
|
message.success('提交成功（原型）');
|
|
if (typeof window !== 'undefined' && window.history) window.history.back();
|
|
}, [allSigned]);
|
|
|
|
var handleCancel = useCallback(function () {
|
|
if (typeof window !== 'undefined' && window.history) window.history.back();
|
|
else message.info('返回交车管理列表页');
|
|
}, []);
|
|
|
|
var handleViewDetail = useCallback(function (record) {
|
|
message.info('跳转该车辆交车明细（原型）');
|
|
}, []);
|
|
|
|
var handleEditDetail = useCallback(function (record, index) {
|
|
message.info('弹出卡片至交车明细编辑页（原型）');
|
|
}, []);
|
|
|
|
var handleDownloadSign = useCallback(function (record) {
|
|
message.success('下载签章文件（原型）');
|
|
}, []);
|
|
|
|
var card1Collapsed = useState(false)[0];
|
|
var setCard1Collapsed = useState(false)[1];
|
|
var card2Collapsed = useState(false)[0];
|
|
var setCard2Collapsed = useState(false)[1];
|
|
|
|
var styles = {
|
|
page: { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '"PingFang SC", "苹方-简", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif', fontSize: 14 },
|
|
breadcrumb: { marginBottom: 16, color: '#666' },
|
|
breadcrumbSep: { margin: '0 8px', color: '#999' },
|
|
card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
|
|
cardHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid #f0f0f0', cursor: 'pointer' },
|
|
cardTitle: { fontSize: 16, fontWeight: 600, color: '#333' },
|
|
cardToggle: { color: '#999', fontSize: 14 },
|
|
cardBody: { padding: '20px 24px' },
|
|
formRow: { display: 'flex', flexWrap: 'wrap', marginBottom: 16 },
|
|
formCol: { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 },
|
|
formColFull: { flex: '0 0 100%', marginBottom: 8 },
|
|
label: { display: 'block', marginBottom: 6, color: '#333' },
|
|
inputDisabled: { width: '100%', backgroundColor: '#f5f5f5', color: 'rgba(0,0,0,0.65)', cursor: 'not-allowed', border: '1px solid #d9d9d9', borderRadius: 4, padding: '8px 12px', fontSize: 14 },
|
|
footer: { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, justifyContent: 'flex-start', zIndex: 99 }
|
|
};
|
|
|
|
var CardBlock = function (props) {
|
|
return React.createElement('div', { id: props.id, style: styles.card },
|
|
React.createElement('div', { style: styles.cardHeader, onClick: function () { props.setCollapsed(!props.collapsed); } },
|
|
React.createElement('span', { style: styles.cardTitle }, props.title),
|
|
React.createElement('span', { style: styles.cardToggle }, props.collapsed ? '展开' : '收起')
|
|
),
|
|
!props.collapsed ? React.createElement('div', { style: styles.cardBody }, props.children) : null
|
|
);
|
|
};
|
|
|
|
var FormItem = function (props) {
|
|
var colStyle = props.fullWidth ? styles.formColFull : styles.formCol;
|
|
return React.createElement('div', { style: colStyle },
|
|
React.createElement('label', { style: styles.label }, props.label),
|
|
props.children
|
|
);
|
|
};
|
|
|
|
var columns = [
|
|
{ title: '序号', dataIndex: 'seq', key: 'seq', width: 70, render: function (v) { return v; } },
|
|
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 100, render: function (v) { return React.createElement(Input, { value: v || '', disabled: true, style: { width: '100%', background: '#f5f5f5' } }); } },
|
|
{ title: '型号', dataIndex: 'model', key: 'model', width: 110, render: function (v) { return React.createElement(Input, { value: v || '', disabled: true, style: { width: '100%', background: '#f5f5f5' } }); } },
|
|
{
|
|
title: '车牌号',
|
|
dataIndex: 'plateNo',
|
|
key: 'plateNo',
|
|
width: 120,
|
|
render: function (v, record, index) {
|
|
return React.createElement(Select, {
|
|
placeholder: '请选择或搜索',
|
|
style: { width: '100%' },
|
|
value: v || undefined,
|
|
onChange: function (val) { updateDetailRow(index, 'plateNo', val || ''); },
|
|
showSearch: true,
|
|
allowClear: true,
|
|
options: reservePlateOptions,
|
|
filterOption: function (input, opt) { return (opt && opt.label && String(opt.label).toLowerCase().indexOf((input || '').toLowerCase()) >= 0); }
|
|
});
|
|
}
|
|
},
|
|
{
|
|
title: '实际交车日期',
|
|
dataIndex: 'actualDate',
|
|
key: 'actualDate',
|
|
width: 130,
|
|
render: function (v) { return React.createElement(Input, { value: v || '', disabled: true, style: { width: '100%', background: '#f5f5f5' } }); }
|
|
},
|
|
{
|
|
title: '交车人',
|
|
dataIndex: 'deliveryPerson',
|
|
key: 'deliveryPerson',
|
|
width: 90,
|
|
render: function (v) { return React.createElement(Input, { value: v || '', disabled: true, style: { width: '100%', background: '#f5f5f5' } }); }
|
|
},
|
|
{ title: '交车状态', dataIndex: 'status', key: 'status', width: 90, render: function (v) { return v || '-'; } },
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 200,
|
|
fixed: 'right',
|
|
render: function (_, record, index) {
|
|
return React.createElement(React.Fragment, null,
|
|
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { handleViewDetail(record); } }, '查看'),
|
|
record.status === '待提交' ? React.createElement(Button, { type: 'link', size: 'small', onClick: function () { handleEditDetail(record, index); } }, '编辑') : null,
|
|
record.status === '已签章' ? React.createElement(Button, { type: 'link', size: 'small', onClick: function () { handleDownloadSign(record); } }, '下载签章文件') : null
|
|
);
|
|
}
|
|
}
|
|
];
|
|
|
|
return React.createElement('div', { style: styles.page },
|
|
React.createElement('div', { style: styles.breadcrumb },
|
|
React.createElement('span', null, '运维管理'),
|
|
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
|
React.createElement('span', null, '车辆业务'),
|
|
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
|
React.createElement('span', null, '交车管理'),
|
|
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
|
React.createElement('span', { style: { color: '#1890ff' } }, '交车单')
|
|
),
|
|
|
|
React.createElement('div', { id: 'card-project' }, React.createElement(CardBlock, { id: 'card-project', title: '项目详情', collapsed: card1Collapsed, setCollapsed: setCard1Collapsed }, React.createElement('div', { style: styles.formRow },
|
|
React.createElement(FormItem, { label: '项目名称' }, React.createElement(Input, { value: projectDetail.projectName, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: projectDetail.contractCode, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: projectDetail.customerName, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '预计交车日期' }, React.createElement(Input, { value: projectDetail.expectedDate, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '交车区域' }, React.createElement(Input, { value: projectDetail.deliveryRegion, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '交车地点' }, React.createElement(Input, { value: projectDetail.deliveryAddress, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '业务部门' }, React.createElement(Input, { value: projectDetail.businessDept, disabled: true, style: styles.inputDisabled })),
|
|
React.createElement(FormItem, { label: '业务负责人' }, React.createElement(Input, { value: projectDetail.businessOwner, disabled: true, style: styles.inputDisabled }))
|
|
))),
|
|
|
|
React.createElement('div', { id: 'card-detail', style: { marginTop: 16 } }, React.createElement(CardBlock, { id: 'card-detail', title: '交车明细', collapsed: card2Collapsed, setCollapsed: setCard2Collapsed }, React.createElement(Table, {
|
|
columns: columns,
|
|
dataSource: detailList,
|
|
rowKey: 'key',
|
|
pagination: false,
|
|
size: 'small',
|
|
scroll: { x: 920 }
|
|
}))),
|
|
|
|
React.createElement('div', { style: { height: 60 } }),
|
|
React.createElement('div', { style: styles.footer },
|
|
React.createElement(Button, { type: 'primary', disabled: !allSigned, onClick: handleSubmit }, '提交'),
|
|
React.createElement(Button, { onClick: handleCancel }, '取消')
|
|
)
|
|
);
|
|
};
|