web端：财务管理提车应收款-收款、车辆租赁合同与替换车管理改动同步
- 财务管理：新增提车应收款-收款.jsx，移除旧提车应收款/收费明细/首付款页面；项目信息与开票信息改为直接展示 - 车辆租赁合同：列表租赁车辆数/已交车辆数及气泡列调整；续签/转正式合同去除合同编码，交车区域·交车地点·合同原件布局调整 - 运维-车辆业务：新增替换车管理、替换车管理-新增/查看/编辑 Made-with: Cursor
This commit is contained in:
王冕
322
web端/运维管理/车辆业务/替换车管理-编辑.jsx
Normal file
322
web端/运维管理/车辆业务/替换车管理-编辑.jsx
Normal file
@@ -0,0 +1,322 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 替换车管理 - 编辑（2026年3月3日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Select = antd.Select;
|
||||
var Modal = antd.Modal;
|
||||
var Option = Select.Option;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var setRequirementModalVisible = requirementModalVisible[1];
|
||||
var edited = useState(false);
|
||||
var setEdited = edited[1];
|
||||
|
||||
// 模拟：进行中的车辆租赁合同列表（实际由接口拉取）
|
||||
var contractList = [
|
||||
{ projectName: '嘉兴氢能示范项目', contractCode: 'HT-ZL-2025-001', customerName: '嘉兴某某物流有限公司', contactPerson: '张三', signDate: '2025-01-15', contactPhone: '13800138001', businessDept: '业务1部', businessPerson: '张经理' },
|
||||
{ projectName: '上海氢能试点项目', contractCode: 'HT-ZL-2025-002', customerName: '上海某某运输公司', contactPerson: '李四', signDate: '2025-02-01', contactPhone: '13900139001', businessDept: '业务2部', businessPerson: '李经理' },
|
||||
{ projectName: '杭州示范运营项目', contractCode: 'HT-ZL-2025-003', customerName: '杭州某某物流', contactPerson: '王五', signDate: '2025-01-20', contactPhone: '13700137001', businessDept: '业务1部', businessPerson: '张经理' }
|
||||
];
|
||||
// 该合同下已交车未还车车辆（被替换车可选）
|
||||
var contractDeliveredVehicles = {
|
||||
'嘉兴氢能示范项目': [
|
||||
{ plateNo: '浙A12345', vin: 'LGHXCAE28M1234567', brand: '东风', model: 'DFH1180' },
|
||||
{ plateNo: '浙A11111', vin: 'LGHXCAE28M1111111', brand: '东风', model: 'DFH1180' }
|
||||
],
|
||||
'上海氢能试点项目': [
|
||||
{ plateNo: '沪B22222', vin: 'LGHXCAE28M2222222', brand: '福田', model: 'BJ1180' }
|
||||
],
|
||||
'杭州示范运营项目': []
|
||||
};
|
||||
// 人员权限下已备车车辆（替换车可选，需先选项目名称后才能选）
|
||||
var preparedVehicleList = [
|
||||
{ plateNo: '浙A67890', vin: 'LGHXCAE28M6789012', brand: '福田', model: 'BJ1180' },
|
||||
{ plateNo: '浙B33333', vin: 'LGHXCAE28M3333333', brand: '东风', model: 'DFH1180' }
|
||||
];
|
||||
|
||||
// 编辑表单状态（实际由路由参数或接口拉取初始值）
|
||||
var detail = useState({
|
||||
projectName: '嘉兴氢能示范项目',
|
||||
contractCode: 'HT-ZL-2025-001',
|
||||
customerName: '嘉兴某某物流有限公司',
|
||||
contactPerson: '张三',
|
||||
signDate: '2025-01-15',
|
||||
contactPhone: '13800138001',
|
||||
businessDept: '业务1部',
|
||||
businessPerson: '张经理',
|
||||
replaceType: '永久替换',
|
||||
replaceReason: '车辆原因',
|
||||
replaceReasonDesc: '原车故障需维修，临时用替换车保障客户用车。',
|
||||
originalPlate: '浙A12345',
|
||||
originalVin: 'LGHXCAE28M1234567',
|
||||
originalBrand: '东风',
|
||||
originalModel: 'DFH1180',
|
||||
replacePlate: '浙A67890',
|
||||
replaceVin: 'LGHXCAE28M6789012',
|
||||
replaceBrand: '福田',
|
||||
replaceModel: 'BJ1180'
|
||||
});
|
||||
var data = detail[0];
|
||||
var setData = detail[1];
|
||||
|
||||
var updateDetail = function (field, value) {
|
||||
setEdited(true);
|
||||
setData(function (prev) {
|
||||
var next = Object.assign({}, prev);
|
||||
next[field] = value;
|
||||
if (field === 'projectName') {
|
||||
var c = contractList.find(function (x) { return x.projectName === value; });
|
||||
if (c) {
|
||||
next.contractCode = c.contractCode;
|
||||
next.customerName = c.customerName;
|
||||
next.contactPerson = c.contactPerson;
|
||||
next.signDate = c.signDate;
|
||||
next.contactPhone = c.contactPhone;
|
||||
next.businessDept = c.businessDept;
|
||||
next.businessPerson = c.businessPerson;
|
||||
} else {
|
||||
next.contractCode = '';
|
||||
next.customerName = '';
|
||||
next.contactPerson = '';
|
||||
next.signDate = '';
|
||||
next.contactPhone = '';
|
||||
next.businessDept = '';
|
||||
next.businessPerson = '';
|
||||
}
|
||||
next.originalPlate = '';
|
||||
next.originalVin = '';
|
||||
next.originalBrand = '';
|
||||
next.originalModel = '';
|
||||
next.replacePlate = '';
|
||||
next.replaceVin = '';
|
||||
next.replaceBrand = '';
|
||||
next.replaceModel = '';
|
||||
}
|
||||
if (field === 'originalPlate') {
|
||||
var list = contractDeliveredVehicles[prev.projectName] || [];
|
||||
var v = list.find(function (x) { return x.plateNo === value; });
|
||||
next.originalVin = v ? v.vin : '';
|
||||
next.originalBrand = v ? v.brand : '';
|
||||
next.originalModel = v ? v.model : '';
|
||||
}
|
||||
if (field === 'replacePlate') {
|
||||
var v = preparedVehicleList.find(function (x) { return x.plateNo === value; });
|
||||
next.replaceVin = v ? v.vin : '';
|
||||
next.replaceBrand = v ? v.brand : '';
|
||||
next.replaceModel = v ? v.model : '';
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
var handleSubmit = function () {
|
||||
if (window.__replaceCarSubmit) {
|
||||
window.__replaceCarSubmit(data);
|
||||
} else {
|
||||
antd.message.success('替换车申请已提交审核');
|
||||
}
|
||||
};
|
||||
|
||||
var handleSave = function () {
|
||||
if (window.__replaceCarSave) {
|
||||
window.__replaceCarSave(data);
|
||||
} else {
|
||||
antd.message.success('保存成功（原型）');
|
||||
}
|
||||
};
|
||||
|
||||
var handleCancel = function () {
|
||||
if (edited[0]) {
|
||||
antd.Modal.confirm({
|
||||
title: '确认取消',
|
||||
content: '取消将会丢失所有已填写内容，是否确认？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
if (window.__replaceCarBack) {
|
||||
window.__replaceCarBack();
|
||||
} else {
|
||||
antd.message.info('返回替换车管理列表（原型）');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (window.__replaceCarBack) {
|
||||
window.__replaceCarBack();
|
||||
} else {
|
||||
antd.message.info('返回替换车管理列表（原型）');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
|
||||
var requirementContent = '替换车管理-编辑（2026年3月3日版本）\n一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」「编辑」模块\n1.面包屑：\n#运维管理-车辆业务-替换车管理-编辑\n页面由选择项目、替换车详情、两个单独卡片组成；\n\n2.选择项目：\n#可通过选择进行中的车辆租赁合同，拉取租赁合同中对应车辆进行替换；\n2.1.项目名称：选择器，反写已新增完成的内容，可编辑，可选择所有进行中的合同，支持输入框中输入关键词进行模糊搜索，下拉显示对应项；\n2.2.合同编码：根据项目名称自动反查，不可编辑；\n2.3.客户名称：根据项目名称自动反查，不可编辑；\n2.4.对接人：根据项目名称自动反查，不可编辑；\n2.5.合同签订时间：根据项目名称自动反查，不可编辑；\n2.6.客户联系电话：根据项目名称自动反查，不可编辑；\n2.7.业务部门：根据项目名称自动反查，不可编辑；\n2.8.业务人员：根据项目名称自动反查，不可编辑；\n\n3.替换车详情：\n3.1.替换类型：选择器，反写已新增完成的内容，可编辑，分为「永久替换」「临时替换」两个选项；\n 3.1.1.类型为永久替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），由运维手动将被替换车进行还车；\n 3.1.2.类型为临时替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），被替换车不用还车，在被替换车重新交付客户时，由运维手动将替换车进行还车；\n 重新生成交车任务时，交车地点会自动继承自合同，由对应区域运维人员才能操作；\n 交车任务完成后，所有涉及到被替换车辆显示（例如车辆租赁合同、租赁账单、提车应收款等功能）会替换为新替换车的对应信息，如果是临时替换，在新替换车完成还车后，对应车辆记录会恢复为原有车辆数据。如果是永久替换，则由运维自主进行被替换车辆还车；\n3.2.替换原因：选择器，反写已新增完成的内容，可编辑，分为「客户原因」「车辆原因」；\n3.3.替换原因说明：文本域，反写已新增完成的内容，可编辑，默认提示信息为：请说明替换原因；\n3.4.被替换车牌号：选择器，反写已新增完成的内容，可编辑，只能选择该租赁合同当前对应的已交车但未还车车牌号；\n3.5.被替换车识别代码：输入框（禁用），选择被替换车车牌号后自动反写该车识别代码；\n3.6.被替换车品牌：输入框（禁用），选择被替换车车牌号后自动反写该车品牌；\n3.7.被替换车型号：输入框（禁用），选择被替换车车牌号后自动反写该车型号；\n3.8.替换车车牌号：选择器，反写已新增完成的内容，可编辑，只能选择该人员权限下所有已备车车辆，在选择项目名称前，不能选择替换车车牌号；\n3.9.替换车识别代码：输入框（禁用），选择替换车车牌号后自动反写该车识别代码；\n3.10.替换车品牌：输入框（禁用），选择替换车车牌号后自动反写该车品牌；\n3.11.替换车型号：输入框（禁用），选择替换车车牌号后自动反写该车型号；\n\n下方为提交审核、保存、取消按钮；\n4.1.点击提交并审核，toast提示：替换车申请已提交审核；\n4.2.点击保存，会存储租赁订单已填写内容，不做必填项校验，同时显示在租赁合同列表中（待审批），该条数据只能保存人自己查看并编辑，其他人无法操作；\n4.3.点击取消，如当前页面有已编辑内容时，点击取消会进行二次提示，内容为：取消将会丢失所有已填写内容，是否确认？点击确认返回替换车管理列表页；';
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '运维管理' },
|
||||
{ title: '车辆业务' },
|
||||
{ title: '替换车管理' },
|
||||
{ title: '编辑' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '选择项目', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
placeholder: '请选择或输入关键词搜索',
|
||||
value: data.projectName || undefined,
|
||||
onChange: function (v) { updateDetail('projectName', v || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
filterOption: function (input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }
|
||||
}, contractList.map(function (c) { return React.createElement(Option, { key: c.projectName, value: c.projectName }, c.projectName); }))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同编码'),
|
||||
React.createElement(Input, { value: data.contractCode || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement(Input, { value: data.customerName || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '对接人'),
|
||||
React.createElement(Input, { value: data.contactPerson || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同签订时间'),
|
||||
React.createElement(Input, { value: data.signDate || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户联系电话'),
|
||||
React.createElement(Input, { value: data.contactPhone || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务部门'),
|
||||
React.createElement(Input, { value: data.businessDept || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务人员'),
|
||||
React.createElement(Input, { value: data.businessPerson || '', disabled: true })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '替换车详情', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换类型'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
value: data.replaceType || undefined,
|
||||
onChange: function (v) { updateDetail('replaceType', v || ''); },
|
||||
placeholder: '请选择'
|
||||
}, React.createElement(Option, { value: '永久替换' }, '永久替换'), React.createElement(Option, { value: '临时替换' }, '临时替换'))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
value: data.replaceReason || undefined,
|
||||
onChange: function (v) { updateDetail('replaceReason', v || ''); },
|
||||
placeholder: '请选择'
|
||||
}, React.createElement(Option, { value: '客户原因' }, '客户原因'), React.createElement(Option, { value: '车辆原因' }, '车辆原因'))
|
||||
),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因说明'),
|
||||
React.createElement(Input.TextArea, {
|
||||
value: data.replaceReasonDesc || '',
|
||||
onChange: function (e) { updateDetail('replaceReasonDesc', e.target.value); },
|
||||
rows: 3,
|
||||
placeholder: '请说明替换原因',
|
||||
style: { width: '100%' }
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车牌号'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
placeholder: '请选择或搜索（仅显示该合同已交车未还车车辆）',
|
||||
value: data.originalPlate || undefined,
|
||||
onChange: function (v) { updateDetail('originalPlate', v || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
disabled: !data.projectName,
|
||||
filterOption: function (input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }
|
||||
}, (contractDeliveredVehicles[data.projectName] || []).map(function (v) { return React.createElement(Option, { key: v.plateNo, value: v.plateNo }, v.plateNo); }))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车识别代码'),
|
||||
React.createElement(Input, { value: data.originalVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车品牌'),
|
||||
React.createElement(Input, { value: data.originalBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车型号'),
|
||||
React.createElement(Input, { value: data.originalModel || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: { gridColumn: '1 / -1', width: '100%' } }),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车车牌号'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
placeholder: data.projectName ? '请选择或搜索（仅显示已备车车辆）' : '请先选择项目名称',
|
||||
value: data.replacePlate || undefined,
|
||||
onChange: function (v) { updateDetail('replacePlate', v || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
disabled: !data.projectName,
|
||||
filterOption: function (input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }
|
||||
}, preparedVehicleList.map(function (v) { return React.createElement(Option, { key: v.plateNo, value: v.plateNo }, v.plateNo); }))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车识别代码'),
|
||||
React.createElement(Input, { value: data.replaceVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车品牌'),
|
||||
React.createElement(Input, { value: data.replaceBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车型号'),
|
||||
React.createElement(Input, { value: data.replaceModel || '', disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { setRequirementModalVisible(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
)
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user