feat(web): 调拨管理补充运维编辑页并调整操作逻辑

补充调拨管理的运维调拨方/接收方编辑原型,并同步列表操作按钮与需求说明,便于按审批状态演示不同操作入口。

Made-with: Cursor
This commit is contained in:
王冕
2026-04-01 13:27:47 +08:00
parent 623fb62fde
commit 2a903b2cb4
3 changed files with 1583 additions and 425 deletions

View File

@@ -0,0 +1,534 @@
// 【重要】必须使用 const Component 作为组件变量名
// 运维管理 - 车辆业务 - 调拨管理 - 运维(接收)-编辑
// 参照“调拨管理-接收信息-第三方运输”生成,默认反写已保存数据
const Component = function () {
var useState = React.useState;
var useMemo = React.useMemo;
var useCallback = React.useCallback;
var antd = window.antd;
var App = antd.App;
var Breadcrumb = antd.Breadcrumb;
var Button = antd.Button;
var Card = antd.Card;
var DatePicker = antd.DatePicker;
var Input = antd.Input;
var Modal = antd.Modal;
var Select = antd.Select;
var Table = antd.Table;
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 METHOD_THIRD = '第三方运输';
function parseDateValue(s) {
var str = String(s || '').trim();
if (!str) return null;
try {
if (window.dayjs) return window.dayjs(str);
} catch (e1) {}
try {
if (window.moment) return window.moment(str, ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm'], true);
} catch (e2) {}
return null;
}
function getMockSnapshot() {
return {
transferId: 'TP202603310008',
savedAt: '2026-04-01 15:20',
transferDateStr: '2026-03-31',
departRegionText: '广东省-广州市',
receiveRegionText: '浙江省-嘉兴市',
reason: '华南业务增量,需将车辆调至华东仓储节点保障运力。',
method: METHOD_THIRD,
transportLeader: '刘振华',
transportPhone: '13901234567',
transportCost: '8650.50',
transportContractFileLabel: '顺达物流有限公司运输合同.pdf',
receivePersonName: '王芳',
receiveInfo: {
receiveTime: '2026-04-02',
receiveAreaType: '停车场',
receiveParking: 'p3',
receiveAddress: ''
},
transferVehicles: [
{ id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111', departParking: '西湖景区停车场' },
{ id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222', departParking: '宁波江北停车场' }
]
};
}
var layoutStyle = { padding: '16px 24px 88px 24px', background: '#f5f5f5', minHeight: '100vh' };
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var formItemStyle = { marginBottom: 12 };
var controlStyle = { width: '100%' };
var readOnlyStyle = { background: 'rgba(0,0,0,0.02)' };
var reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
var snapshot = useMemo(function () {
return getMockSnapshot();
}, []);
function buildVehicleRows(snap) {
return (snap.transferVehicles || []).map(function (r) {
return {
id: r.id,
brand: r.brand,
model: r.model,
plateNo: r.plateNo,
departParking: r.departParking || ''
};
});
}
var receiveTimeState = useState(parseDateValue(snapshot.receiveInfo && snapshot.receiveInfo.receiveTime));
var receiveTime = receiveTimeState[0];
var setReceiveTime = receiveTimeState[1];
var receiveAreaTypeState = useState(snapshot.receiveInfo && snapshot.receiveInfo.receiveAreaType ? snapshot.receiveInfo.receiveAreaType : undefined);
var receiveAreaType = receiveAreaTypeState[0];
var setReceiveAreaType = receiveAreaTypeState[1];
var receiveParkingState = useState(snapshot.receiveInfo && snapshot.receiveInfo.receiveParking ? snapshot.receiveInfo.receiveParking : undefined);
var receiveParking = receiveParkingState[0];
var setReceiveParking = receiveParkingState[1];
var receiveAddressState = useState(snapshot.receiveInfo && snapshot.receiveInfo.receiveAddress ? snapshot.receiveInfo.receiveAddress : '');
var receiveAddress = receiveAddressState[0];
var setReceiveAddress = receiveAddressState[1];
var vehiclesState = useState(function () {
return buildVehicleRows(snapshot);
});
var vehicles = vehiclesState[0];
var savedAtState = useState(snapshot.savedAt);
var savedAt = savedAtState[0];
var setSavedAt = savedAtState[1];
var parkingOptions = useMemo(function () {
return [
{ value: 'p1', label: '西湖景区停车场' },
{ value: 'p2', label: '宁波江北停车场' },
{ value: 'p3', label: '张江园区停车场' },
{ value: 'p4', label: '天河智慧停车场' }
];
}, []);
var errorsState = useState({});
var errors = errorsState[0];
var setErrors = errorsState[1];
var requirementModalState = useState(false);
var requirementModalOpen = requirementModalState[0];
var setRequirementModalOpen = requirementModalState[1];
var attachmentPreviewState = useState(false);
var attachmentPreviewOpen = attachmentPreviewState[0];
var setAttachmentPreviewOpen = attachmentPreviewState[1];
var requirementDocContent = [
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「运维接收-编辑」模块',
'',
'页面参照「调拨管理-接收信息-第三方运输」生成,进入页面时反写已保存的接收信息,并支持继续编辑。',
'',
'1.调拨情况:调拨日期、出发区域、接收区域、调拨原因为只读反写;',
'2.调拨信息:调拨方式、运输负责人、运输方联系方式、运输费用、运输合同附件、接收人员为只读反写;',
'3.接收信息:接收时间、接收区域、停车场/停车地址可编辑;',
'4.底部按钮:提交、保存、取消。保存不校验必填项,提交校验必填项。'
].join('\n');
function formatCostYuan(costStr) {
var s = String(costStr == null ? '' : costStr).trim();
if (!s) return '—';
return s + '元';
}
function contractDisplay(label) {
var s = String(label == null ? '' : label).trim();
return s ? s : '无';
}
function canPreviewAttachment(label) {
var s = String(label == null ? '' : label).trim();
if (!s) return false;
var lower = s.toLowerCase();
return lower.endsWith('.pdf') || lower.endsWith('.doc') || lower.endsWith('.docx');
}
function runValidate() {
var e = {};
if (!receiveTime) e.receiveTime = '请选择接收时间';
if (!receiveAreaType) e.receiveAreaType = '请选择接收区域';
if (receiveAreaType === '停车场') {
if (!receiveParking) e.receiveParking = '请选择停车场';
}
if (receiveAreaType === '其他') {
if (!String(receiveAddress || '').trim()) e.receiveAddress = '请输入停车地址';
}
setErrors(e);
return { ok: Object.keys(e).length === 0, err: e };
}
var handleSubmit = useCallback(function () {
var result = runValidate();
if (!result.ok) {
message.error('请完善必填项');
return;
}
Modal.confirm({
title: '确认提交?',
content: '提交后将进入后续流程(原型)。',
okText: '提交',
cancelText: '取消',
onOk: function () {
message.success('已提交(原型)');
}
});
}, [receiveTime, receiveAreaType, receiveParking, receiveAddress]);
var handleSave = useCallback(function () {
var nowStr = '';
try {
if (window.dayjs) nowStr = window.dayjs().format('YYYY-MM-DD HH:mm');
} catch (e1) {}
try {
if (!nowStr && window.moment) nowStr = window.moment().format('YYYY-MM-DD HH:mm');
} catch (e2) {}
if (!nowStr) nowStr = '刚刚';
setSavedAt(nowStr);
message.success('已保存(原型:不校验必填项)');
}, []);
var handleCancel = useCallback(function () {
Modal.confirm({
title: '是否确认取消',
content: '未保存的修改将丢失,是否确认?',
okText: '确认',
cancelText: '取消',
onOk: function () {
message.info('返回上一页(原型)');
}
});
}, []);
var vehicleColumns = useMemo(function () {
return [
{
title: '品牌',
key: 'brand',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.brand || '', readOnly: true, style: readOnlyStyle });
}
},
{
title: '型号',
key: 'model',
width: 120,
render: function (_, r) {
return React.createElement(Input, { value: r.model || '', readOnly: true, style: readOnlyStyle });
}
},
{
title: '车牌号',
key: 'plateNo',
width: 140,
render: function (_, r) {
return React.createElement(Input, { value: r.plateNo || '', readOnly: true, style: readOnlyStyle });
}
},
{
title: '出发停车场',
key: 'departParking',
width: 180,
render: function (_, r) {
return React.createElement(Input, { value: r.departParking || '', readOnly: true, style: readOnlyStyle });
}
}
];
}, []);
var costText = formatCostYuan(snapshot.transportCost);
var contractText = contractDisplay(snapshot.transportContractFileLabel);
var canPreview = canPreviewAttachment(snapshot.transportContractFileLabel);
return React.createElement(
App,
null,
React.createElement(
'div',
{ style: layoutStyle },
React.createElement(
'div',
{
style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 8,
flexWrap: 'wrap',
gap: 8
}
},
React.createElement(Breadcrumb, {
items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '调拨管理' }, { title: '运维(接收)-编辑' }]
}),
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
),
React.createElement(
'div',
{ style: { marginBottom: 16, color: 'rgba(0,0,0,0.65)', fontSize: 12 } },
'调拨单号:',
snapshot.transferId,
' ',
'保存状态:',
savedAt ? ('已保存(' + savedAt + '') : '未保存'
),
React.createElement(
Modal,
{
title: '需求说明',
open: requirementModalOpen,
onCancel: function () { setRequirementModalOpen(false); },
width: 760,
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
},
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.65, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)
),
React.createElement(
Modal,
{
title: '附件预览',
open: attachmentPreviewOpen,
onCancel: function () { setAttachmentPreviewOpen(false); },
width: 820,
footer: React.createElement(Button, { onClick: function () { setAttachmentPreviewOpen(false); } }, '关闭'),
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
},
React.createElement(
'div',
{ style: { fontSize: 13, lineHeight: 1.65, color: 'rgba(0,0,0,0.85)' } },
React.createElement('div', { style: { marginBottom: 8 } }, '文件:', snapshot.transportContractFileLabel || '无'),
React.createElement(
'div',
{ style: { padding: 12, background: 'rgba(0,0,0,0.02)', border: '1px solid #f0f0f0', borderRadius: 8 } },
'原型预览:此处展示附件内容预览区域。对接后可通过文件 URL 进行在线预览或下载。'
)
)
),
React.createElement(
Card,
{ title: '调拨情况', style: { marginBottom: 16 } },
React.createElement(
'div',
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '调拨日期'),
React.createElement(Input, { value: snapshot.transferDateStr, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '出发区域'),
React.createElement(Input, { value: snapshot.departRegionText, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收区域'),
React.createElement(Input, { value: snapshot.receiveRegionText, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
React.createElement('div', { style: labelStyle }, '调拨原因'),
React.createElement(Input.TextArea, { value: snapshot.reason, readOnly: true, style: readOnlyStyle, autoSize: { minRows: 3, maxRows: 6 } })
)
)
),
React.createElement(
Card,
{ title: '调拨信息', style: { marginBottom: 16 } },
React.createElement(
'div',
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '调拨方式'),
React.createElement(Input, { value: snapshot.method, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输负责人'),
React.createElement(Input, { value: snapshot.transportLeader, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
React.createElement(Input, { value: snapshot.transportPhone, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '运输费用'),
React.createElement(Input, { value: costText, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 2' }) },
React.createElement('div', { style: labelStyle }, '运输合同附件'),
canPreview
? React.createElement(
'div',
{ style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setAttachmentPreviewOpen(true); } }, contractText)
)
: React.createElement(Input, { value: contractText, readOnly: true, style: readOnlyStyle })
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '接收人员'),
React.createElement(Input, { value: snapshot.receivePersonName, readOnly: true, style: readOnlyStyle })
)
)
),
React.createElement(
Card,
{ title: '接收信息', style: { marginBottom: 16 } },
React.createElement(
'div',
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收时间'),
React.createElement(DatePicker, {
style: controlStyle,
format: 'YYYY-MM-DD',
placeholder: '请选择接收时间',
value: receiveTime,
onChange: function (v) {
setReceiveTime(v);
},
status: errors.receiveTime ? 'error' : undefined
}),
errors.receiveTime ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveTime) : null
),
React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
React.createElement(Select, {
placeholder: '请选择接收区域',
style: controlStyle,
value: receiveAreaType,
onChange: function (v) {
setReceiveAreaType(v);
setReceiveParking(undefined);
setReceiveAddress('');
},
allowClear: true,
options: [{ value: '停车场', label: '停车场' }, { value: '其他', label: '其他' }],
status: errors.receiveAreaType ? 'error' : undefined
}),
errors.receiveAreaType ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveAreaType) : null
),
receiveAreaType === '停车场'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '停车场'),
React.createElement(Select, {
placeholder: '请选择停车场',
style: controlStyle,
value: receiveParking,
onChange: function (v) { setReceiveParking(v); },
allowClear: true,
showSearch: true,
options: parkingOptions,
filterOption: filterOption,
status: errors.receiveParking ? 'error' : undefined
}),
errors.receiveParking ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveParking) : null
)
: receiveAreaType === '其他'
? React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, reqStar, '停车地址'),
React.createElement(Input, {
placeholder: '请输入停车地址',
style: controlStyle,
value: receiveAddress,
onChange: function (e) { setReceiveAddress(e.target.value); },
status: errors.receiveAddress ? 'error' : undefined
}),
errors.receiveAddress ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveAddress) : null
)
: React.createElement(
'div',
{ style: formItemStyle },
React.createElement('div', { style: labelStyle }, '停车场/停车地址'),
React.createElement(Input, { placeholder: '请先选择接收区域', style: controlStyle, disabled: true })
)
)
),
React.createElement(
Card,
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
React.createElement(Table, {
rowKey: 'id',
columns: vehicleColumns,
dataSource: vehicles,
size: 'small',
pagination: false
})
),
React.createElement('div', { style: { height: 56 } }),
React.createElement(
'div',
{
style: {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
padding: '12px 24px',
background: '#fff',
borderTop: '1px solid #f0f0f0',
display: 'flex',
gap: 8,
zIndex: 10
}
},
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交'),
React.createElement(Button, { onClick: handleSave }, '保存'),
React.createElement(Button, { onClick: handleCancel }, '取消')
)
)
);
};