feat(web): 同步当前原型页与工具配置改动
统一提交当前工作区内的页面原型调整、新增运维相关页面以及本地工具配置目录变更，便于整体同步到远端环境继续联调与演示。 Made-with: Cursor
This commit is contained in:
王冕
BIN
web端/.DS_Store
vendored
BIN
web端/.DS_Store
vendored
Binary file not shown.
56
web端/工作台.jsx
56
web端/工作台.jsx
@@ -33,8 +33,11 @@ const Component = function () {
|
||||
|
||||
var pageBg = '#f5f7fa';
|
||||
var cardRadius = 12;
|
||||
var cardShadow = '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)';
|
||||
var cardStyle = { borderRadius: cardRadius, boxShadow: cardShadow, border: '1px solid rgba(0,0,0,0.04)' };
|
||||
var cardShadow = '0 1px 2px rgba(0,0,0,0.04), 0 6px 16px rgba(15,23,42,0.06)';
|
||||
var cardStyle = { borderRadius: cardRadius, boxShadow: cardShadow, border: '1px solid rgba(0,0,0,0.05)' };
|
||||
var pagePadY = 16;
|
||||
var pagePadX = 20;
|
||||
var layoutGutter = 16;
|
||||
var accentBlue = '#1677ff';
|
||||
var accentPurple = '#722ed1';
|
||||
var accentCyan = '#13c2c2';
|
||||
@@ -145,7 +148,7 @@ const Component = function () {
|
||||
var g1 = 'linear-gradient(135deg,#fff1f0,#ffccc7)';
|
||||
var g2 = 'linear-gradient(135deg,#fff7e6,#ffd591)';
|
||||
var g3 = 'linear-gradient(135deg,#f9f0ff,#efdbff)';
|
||||
var g4 = 'linear-gradient(135deg,#e6f4ff,#bae0ff)';
|
||||
var g4 = 'linear-gradient(135deg,#f0f5ff,#d6e4ff)';
|
||||
var g5 = 'linear-gradient(135deg,#e6fffb,#b5f5ec)';
|
||||
return {
|
||||
ops: [
|
||||
@@ -1232,7 +1235,7 @@ const Component = function () {
|
||||
bordered: false,
|
||||
style: cardStyleMerged,
|
||||
bodyStyle: {
|
||||
padding: '12px 12px',
|
||||
padding: '14px 16px',
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@@ -1251,13 +1254,13 @@ const Component = function () {
|
||||
tabIndex: onClick ? 0 : undefined,
|
||||
role: onClick ? 'button' : undefined
|
||||
},
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, width: '100%', boxSizing: 'border-box' } },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 } },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, width: '100%', boxSizing: 'border-box' } },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 } },
|
||||
React.createElement('div', {
|
||||
style: {
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 8,
|
||||
borderRadius: 10,
|
||||
background: s.iconBg,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -1458,11 +1461,11 @@ const Component = function () {
|
||||
'.workbench-task-bar-chart{flex:1;min-height:80px;width:100%;display:flex;align-items:stretch;gap:6px;overflow-x:auto;overflow-y:hidden;box-sizing:border-box}' +
|
||||
'.workbench-payment-report-pane{flex:1;min-height:0;display:flex;flex-direction:column;height:100%;padding:8px 0 0;box-sizing:border-box;overflow:hidden}' +
|
||||
'.workbench-payment-donut-hold{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;box-sizing:border-box}' +
|
||||
'.workbench-main-split{display:flex!important;flex-direction:column!important;gap:12px;flex:1;min-height:0;width:100%;overflow:hidden}' +
|
||||
'.workbench-main-split{display:flex!important;flex-direction:column!important;gap:' + layoutGutter + 'px;flex:1;min-height:0;width:100%;overflow:hidden}' +
|
||||
'.workbench-main-split>.ant-row.workbench-todo-notice-row,.workbench-main-split>.ant-row.workbench-report-quick-row{flex:1 1 0!important;min-height:0!important;height:auto!important;max-height:none!important;margin:0!important;overflow:hidden}' +
|
||||
'.workbench-todo-notice-row>.ant-col,.workbench-report-quick-row>.ant-col{display:flex!important;flex-direction:column;min-height:0}' +
|
||||
'.workbench-notice-slot,.workbench-todo-slot,.workbench-report-slot{min-height:0}' +
|
||||
'.workbench-dash-pair-head.ant-card .ant-card-head{min-height:56px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,0.06)}' +
|
||||
'.workbench-dash-pair-head.ant-card .ant-card-head{min-height:56px;padding:0 18px;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,0.06)}' +
|
||||
'.workbench-dash-pair-head.ant-card .ant-card-head-title,.workbench-dash-pair-head-title{font-size:16px;font-weight:600;line-height:24px;color:rgba(0,0,0,0.88)}' +
|
||||
'.workbench-dash-pair-head.ant-card .ant-card-extra{padding:0}' +
|
||||
'.workbench-dash-pair-head.ant-card .ant-card-body{padding-top:10px!important}' +
|
||||
@@ -1512,7 +1515,14 @@ const Component = function () {
|
||||
'.workbench-warning-metric-card.ant-card{display:flex!important;flex-direction:column!important;height:100%!important;min-height:inherit}' +
|
||||
'.workbench-warning-metric-card.ant-card .ant-card-body{flex:1!important;display:flex!important;flex-direction:column!important;justify-content:center!important;min-height:0!important}' +
|
||||
'.workbench-metric-hint-icon:hover{color:rgba(22,119,255,0.9)!important}' +
|
||||
'.workbench-metric-hint-icon:focus-visible{outline:2px solid rgba(22,119,255,0.35);outline-offset:2px;border-radius:4px}';
|
||||
'.workbench-metric-hint-icon:focus-visible{outline:2px solid rgba(22,119,255,0.35);outline-offset:2px;border-radius:4px}' +
|
||||
'.workbench-one-screen .ant-breadcrumb{font-size:13px;line-height:1.5}' +
|
||||
'.workbench-one-screen .ant-breadcrumb a,.workbench-one-screen .ant-breadcrumb .ant-breadcrumb-link{color:rgba(0,0,0,0.65)}' +
|
||||
'.workbench-one-screen .ant-breadcrumb li:last-child .ant-breadcrumb-link{color:rgba(0,0,0,0.88);font-weight:500}' +
|
||||
'.workbench-report-tabs .ant-tabs-ink-bar{background:#1677ff;height:2px;border-radius:1px}' +
|
||||
'.workbench-report-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn{color:rgba(0,0,0,0.88);font-weight:600}' +
|
||||
'.workbench-report-slot .ant-card .ant-card-head{min-height:52px;padding:0 18px;border-bottom:1px solid rgba(0,0,0,0.06)}' +
|
||||
'.workbench-report-slot .ant-card .ant-card-head-title{font-size:16px;font-weight:600;color:rgba(0,0,0,0.88)}';
|
||||
|
||||
return React.createElement(App, null,
|
||||
React.createElement('div', {
|
||||
@@ -1520,7 +1530,7 @@ const Component = function () {
|
||||
style: {
|
||||
boxSizing: 'border-box',
|
||||
height: '100vh',
|
||||
padding: '12px 16px 12px',
|
||||
padding: pagePadY + 'px ' + pagePadX + 'px ' + pagePadY + 'px',
|
||||
background: pageBg,
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
@@ -1529,8 +1539,8 @@ const Component = function () {
|
||||
},
|
||||
React.createElement('style', null, oneScreenCss),
|
||||
|
||||
React.createElement('div', { style: { flexShrink: 0, marginBottom: 10 } },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8, flexWrap: 'wrap', gap: 8 } },
|
||||
React.createElement('div', { style: { flexShrink: 0, marginBottom: 12, paddingBottom: 12, borderBottom: '1px solid rgba(0,0,0,0.06)' } },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, flexWrap: 'wrap', gap: 10 } },
|
||||
React.createElement(Breadcrumb, { items: [{ title: '运管平台' }, { title: '工作台' }] }),
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end', minWidth: 0 } },
|
||||
React.createElement(Tabs, {
|
||||
@@ -1543,32 +1553,32 @@ const Component = function () {
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(Title, { level: 5, style: { margin: 0, fontWeight: 600 } }, '欢迎回来，' + mockOperatorDisplayName)
|
||||
React.createElement(Title, { level: 5, style: { margin: 0, fontWeight: 600, fontSize: 18, color: 'rgba(0,0,0,0.88)', letterSpacing: '-0.01em' } }, '欢迎回来，' + mockOperatorDisplayName)
|
||||
),
|
||||
React.createElement('div', { style: { flexShrink: 0, marginBottom: 10, boxSizing: 'border-box' } },
|
||||
React.createElement('div', { className: 'workbench-top-metrics', style: { display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'stretch' } },
|
||||
React.createElement('div', { style: { flexShrink: 0, marginBottom: 12, boxSizing: 'border-box' } },
|
||||
React.createElement('div', { className: 'workbench-top-metrics', style: { display: 'flex', flexWrap: 'wrap', gap: layoutGutter, alignItems: 'stretch' } },
|
||||
React.createElement('div', {
|
||||
className: 'workbench-warning-cards' + (warningDeptKey === 'finance' ? ' workbench-warning-cards--finance' : ''),
|
||||
style: warningDeptKey === 'finance'
|
||||
? { flex: '1 1 100%', display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'stretch', minWidth: 0, width: '100%' }
|
||||
: { flex: '1 1 280px', display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'stretch', minWidth: 0 }
|
||||
? { flex: '1 1 100%', display: 'flex', flexDirection: 'column', gap: layoutGutter, alignItems: 'stretch', minWidth: 0, width: '100%' }
|
||||
: { flex: '1 1 280px', display: 'flex', flexWrap: 'wrap', gap: layoutGutter, alignItems: 'stretch', minWidth: 0 }
|
||||
},
|
||||
warningDeptKey === 'finance'
|
||||
? [
|
||||
React.createElement('div', {
|
||||
key: 'wb-fin-row1',
|
||||
style: { display: 'flex', flexWrap: 'wrap', gap: 10, width: '100%', alignItems: 'stretch' }
|
||||
style: { display: 'flex', flexWrap: 'wrap', gap: layoutGutter, width: '100%', alignItems: 'stretch' }
|
||||
}, warningCardsVisible.slice(0, 5).map(function (s) { return renderWarningMetricCardItem(s); })),
|
||||
React.createElement('div', {
|
||||
key: 'wb-fin-row2',
|
||||
style: { display: 'flex', flexWrap: 'wrap', gap: 10, width: '100%', alignItems: 'stretch' }
|
||||
style: { display: 'flex', flexWrap: 'wrap', gap: layoutGutter, width: '100%', alignItems: 'stretch' }
|
||||
}, warningCardsVisible.slice(5).map(function (s) { return renderWarningMetricCardItem(s); }))
|
||||
]
|
||||
: warningCardsVisible.map(function (s) { return renderWarningMetricCardItem(s); })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Row, { gutter: [12, 12], align: 'stretch', style: { flex: 1, minHeight: 0, overflow: 'hidden' } },
|
||||
React.createElement(Row, { gutter: [layoutGutter, layoutGutter], align: 'stretch', style: { flex: 1, minHeight: 0, overflow: 'hidden' } },
|
||||
React.createElement(Col, {
|
||||
xs: 24,
|
||||
lg: 24,
|
||||
@@ -1578,7 +1588,7 @@ const Component = function () {
|
||||
},
|
||||
React.createElement(Row, {
|
||||
className: 'workbench-todo-notice-row',
|
||||
gutter: [12, 12],
|
||||
gutter: [layoutGutter, layoutGutter],
|
||||
align: 'stretch',
|
||||
wrap: true,
|
||||
style: { minHeight: 0, flex: '1 1 0', margin: 0 }
|
||||
@@ -1633,7 +1643,7 @@ const Component = function () {
|
||||
),
|
||||
React.createElement(Row, {
|
||||
className: 'workbench-report-quick-row',
|
||||
gutter: [12, 12],
|
||||
gutter: [layoutGutter, layoutGutter],
|
||||
align: 'stretch',
|
||||
wrap: true,
|
||||
style: { minHeight: 0, flex: '1 1 0', margin: 0 }
|
||||
|
||||
901
web端/登录.jsx
901
web端/登录.jsx
@@ -1,446 +1,455 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 参考 Arco Design Pro 登录页布局：左侧品牌区 + 右侧登录表单
|
||||
const Component = function () {
|
||||
var antd = window.antd;
|
||||
var useState = React.useState;
|
||||
var useRef = React.useRef;
|
||||
var useEffect = React.useEffect;
|
||||
|
||||
var _state = useState({ username: '', password: '', remember: true, agreeTerms: false, phone: '', smsCode: '' });
|
||||
var formData = _state[0];
|
||||
var setFormData = _state[1];
|
||||
|
||||
var _mode = useState('account');
|
||||
var loginMode = _mode[0];
|
||||
var setLoginMode = _mode[1];
|
||||
|
||||
var _countdown = useState(0);
|
||||
var countdown = _countdown[0];
|
||||
var setCountdown = _countdown[1];
|
||||
|
||||
var _hasRequestedCode = useState(false);
|
||||
var hasRequestedCode = _hasRequestedCode[0];
|
||||
var setHasRequestedCode = _hasRequestedCode[1];
|
||||
|
||||
var timerRef = useRef(null);
|
||||
|
||||
useEffect(function () {
|
||||
return function () {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
var handleChange = function (field, value) {
|
||||
var next = {};
|
||||
next[field] = value;
|
||||
setFormData(function (prev) {
|
||||
return Object.assign({}, prev, next);
|
||||
});
|
||||
};
|
||||
|
||||
var handleGetCode = function () {
|
||||
if (countdown > 0) return;
|
||||
setHasRequestedCode(true);
|
||||
setCountdown(60);
|
||||
timerRef.current = setInterval(function () {
|
||||
setCountdown(function (prev) {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var handleSubmit = function () {
|
||||
if (!formData.agreeTerms) {
|
||||
antd.message.warning('请阅读并同意《用户服务协议》和《隐私政策》');
|
||||
return;
|
||||
}
|
||||
if (loginMode === 'phone') {
|
||||
if (!formData.phone) {
|
||||
antd.message.warning('请输入手机号');
|
||||
return;
|
||||
}
|
||||
if (!formData.smsCode) {
|
||||
antd.message.warning('请输入验证码');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!formData.username) {
|
||||
antd.message.warning('请输入用户名');
|
||||
return;
|
||||
}
|
||||
if (!formData.password) {
|
||||
antd.message.warning('请输入密码');
|
||||
return;
|
||||
}
|
||||
}
|
||||
antd.message.success('登录成功（原型演示）');
|
||||
if (window.$axure && typeof window.$axure.navigateToUrl === 'function') {
|
||||
window.$axure.navigateToUrl('工作台');
|
||||
} else {
|
||||
window.location.hash = '工作台';
|
||||
}
|
||||
};
|
||||
|
||||
var switchToPhone = function (e) {
|
||||
if (e && e.preventDefault) e.preventDefault();
|
||||
setLoginMode('phone');
|
||||
};
|
||||
var switchToAccount = function (e) {
|
||||
if (e && e.preventDefault) e.preventDefault();
|
||||
setLoginMode('account');
|
||||
};
|
||||
|
||||
var styles = {
|
||||
wrap: {
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
width: '100%',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
backgroundColor: '#f5f5f5'
|
||||
},
|
||||
left: {
|
||||
flex: '1',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '48px',
|
||||
background: 'linear-gradient(135deg, #1d2129 0%, #2d3748 50%, #1d2129 100%)',
|
||||
color: '#fff'
|
||||
},
|
||||
leftContent: {
|
||||
maxWidth: '400px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
title: {
|
||||
fontSize: '28px',
|
||||
fontWeight: '600',
|
||||
marginBottom: '16px',
|
||||
letterSpacing: '0.5px'
|
||||
},
|
||||
desc: {
|
||||
fontSize: '14px',
|
||||
opacity: 0.85,
|
||||
lineHeight: 1.6
|
||||
},
|
||||
right: {
|
||||
width: '480px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '48px',
|
||||
backgroundColor: '#fff',
|
||||
boxShadow: '-4px 0 24px rgba(0,0,0,0.06)'
|
||||
},
|
||||
formCard: {
|
||||
width: '100%',
|
||||
maxWidth: '360px'
|
||||
},
|
||||
formTitle: {
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
color: '#1d2129',
|
||||
marginBottom: '8px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
formSub: {
|
||||
fontSize: '14px',
|
||||
color: '#86909c',
|
||||
marginBottom: '32px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
formItem: {
|
||||
marginBottom: '20px'
|
||||
},
|
||||
label: {
|
||||
display: 'block',
|
||||
fontSize: '14px',
|
||||
color: '#4e5969',
|
||||
marginBottom: '8px'
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
height: '40px',
|
||||
padding: '8px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #e5e6eb',
|
||||
borderRadius: '6px',
|
||||
boxSizing: 'border-box',
|
||||
outline: 'none'
|
||||
},
|
||||
codeRow: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
alignItems: 'center'
|
||||
},
|
||||
codeInput: {
|
||||
flex: '1',
|
||||
height: '40px',
|
||||
padding: '8px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #e5e6eb',
|
||||
borderRadius: '6px',
|
||||
boxSizing: 'border-box',
|
||||
outline: 'none'
|
||||
},
|
||||
getCodeBtn: {
|
||||
flexShrink: 0,
|
||||
height: '40px',
|
||||
padding: '0 16px',
|
||||
fontSize: '14px',
|
||||
color: '#165dff',
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #165dff',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
getCodeBtnDisabled: {
|
||||
color: '#86909c',
|
||||
borderColor: '#e5e6eb',
|
||||
cursor: 'not-allowed'
|
||||
},
|
||||
row: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '24px'
|
||||
},
|
||||
submitBtn: {
|
||||
width: '100%',
|
||||
height: '44px',
|
||||
fontSize: '16px',
|
||||
fontWeight: '500',
|
||||
borderRadius: '6px'
|
||||
},
|
||||
tabBar: {
|
||||
display: 'flex',
|
||||
marginBottom: '24px',
|
||||
borderBottom: '1px solid #e5e6eb'
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
padding: '12px 0',
|
||||
fontSize: '15px',
|
||||
color: '#86909c',
|
||||
cursor: 'pointer',
|
||||
borderBottom: '2px solid transparent',
|
||||
marginBottom: '-1px'
|
||||
},
|
||||
tabActive: {
|
||||
color: '#165dff',
|
||||
fontWeight: '500',
|
||||
borderBottomColor: '#165dff'
|
||||
}
|
||||
};
|
||||
|
||||
return React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
React.createElement('style', {
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: '@media (max-width: 768px) { .login-right { width: 100% !important; min-width: 100% !important; } .login-left { min-height: 200px !important; } .login-wrap { flex-direction: column !important; } }'
|
||||
}
|
||||
}),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.wrap, className: 'login-wrap' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.left, className: 'login-left' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.leftContent },
|
||||
React.createElement('h1', { style: styles.title }, '羚牛氢能'),
|
||||
React.createElement('p', { style: styles.desc }, '数字化资产ONE-OS运管平台')
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.right, className: 'login-right' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formCard },
|
||||
React.createElement('h2', { style: styles.formTitle }, '欢迎登录'),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.tabBar },
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: loginMode === 'account' ? Object.assign({}, styles.tab, styles.tabActive) : styles.tab,
|
||||
onClick: switchToAccount,
|
||||
role: 'button',
|
||||
tabIndex: 0
|
||||
},
|
||||
'账号密码登录'
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: loginMode === 'phone' ? Object.assign({}, styles.tab, styles.tabActive) : styles.tab,
|
||||
onClick: switchToPhone,
|
||||
role: 'button',
|
||||
tabIndex: 0
|
||||
},
|
||||
'手机号登录'
|
||||
)
|
||||
),
|
||||
React.createElement('p', { style: styles.formSub }, loginMode === 'phone' ? '请输入手机号与验证码' : '请输入您的账号与密码'),
|
||||
loginMode === 'phone'
|
||||
? React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '手机号'),
|
||||
React.createElement('input', {
|
||||
style: styles.input,
|
||||
placeholder: '请输入手机号',
|
||||
value: formData.phone,
|
||||
onChange: function (e) {
|
||||
handleChange('phone', e.target.value);
|
||||
}
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '验证码'),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.codeRow },
|
||||
React.createElement('input', {
|
||||
style: styles.codeInput,
|
||||
placeholder: '请输入验证码',
|
||||
value: formData.smsCode,
|
||||
onChange: function (e) {
|
||||
handleChange('smsCode', e.target.value);
|
||||
}
|
||||
}),
|
||||
React.createElement(
|
||||
'button',
|
||||
{
|
||||
type: 'button',
|
||||
style: countdown > 0 ? Object.assign({}, styles.getCodeBtn, styles.getCodeBtnDisabled) : styles.getCodeBtn,
|
||||
disabled: countdown > 0,
|
||||
onClick: handleGetCode
|
||||
},
|
||||
countdown > 0 ? countdown + '秒后重新获取' : (hasRequestedCode ? '再次获取' : '获取验证码')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
: React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '用户名'),
|
||||
React.createElement('input', {
|
||||
style: styles.input,
|
||||
placeholder: '请输入用户名',
|
||||
value: formData.username,
|
||||
onChange: function (e) {
|
||||
handleChange('username', e.target.value);
|
||||
}
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '密码'),
|
||||
React.createElement('input', {
|
||||
style: styles.input,
|
||||
type: 'password',
|
||||
placeholder: '请输入密码',
|
||||
value: formData.password,
|
||||
onChange: function (e) {
|
||||
handleChange('password', e.target.value);
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.row },
|
||||
React.createElement(
|
||||
'label',
|
||||
{ style: { display: 'flex', alignItems: 'center', cursor: 'pointer', fontSize: '14px', color: '#4e5969' } },
|
||||
React.createElement('input', {
|
||||
type: 'checkbox',
|
||||
checked: formData.remember,
|
||||
onChange: function (e) {
|
||||
handleChange('remember', e.target.checked);
|
||||
},
|
||||
style: { marginRight: '8px' }
|
||||
}),
|
||||
'记住我'
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
'label',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
color: '#4e5969',
|
||||
marginBottom: '20px',
|
||||
lineHeight: 1.5
|
||||
}
|
||||
},
|
||||
React.createElement('input', {
|
||||
type: 'checkbox',
|
||||
checked: formData.agreeTerms,
|
||||
onChange: function (e) {
|
||||
handleChange('agreeTerms', e.target.checked);
|
||||
},
|
||||
style: { marginRight: '8px', marginTop: '3px', flexShrink: 0 }
|
||||
}),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'阅读并同意',
|
||||
React.createElement('a', { href: '#', style: { color: '#165dff', marginLeft: '2px' }, onClick: function (e) { e.preventDefault(); } }, '《用户服务协议》'),
|
||||
'和',
|
||||
React.createElement('a', { href: '#', style: { color: '#165dff' }, onClick: function (e) { e.preventDefault(); } }, '《隐私政策》')
|
||||
)
|
||||
),
|
||||
antd && antd.Button
|
||||
? React.createElement(antd.Button, {
|
||||
type: 'primary',
|
||||
block: true,
|
||||
size: 'large',
|
||||
style: styles.submitBtn,
|
||||
onClick: handleSubmit
|
||||
}, '登 录')
|
||||
: React.createElement(
|
||||
'button',
|
||||
{
|
||||
style: Object.assign({}, styles.submitBtn, {
|
||||
backgroundColor: '#165dff',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
cursor: 'pointer'
|
||||
}),
|
||||
onClick: handleSubmit
|
||||
},
|
||||
'登 录'
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 参考 Arco Design Pro 登录页布局：左侧品牌区 + 右侧登录表单
|
||||
const Component = function () {
|
||||
var antd = window.antd;
|
||||
var useState = React.useState;
|
||||
var useRef = React.useRef;
|
||||
var useEffect = React.useEffect;
|
||||
|
||||
var _state = useState({ username: '', password: '', remember: true, agreeTerms: false, phone: '', smsCode: '' });
|
||||
var formData = _state[0];
|
||||
var setFormData = _state[1];
|
||||
|
||||
var _mode = useState('account');
|
||||
var loginMode = _mode[0];
|
||||
var setLoginMode = _mode[1];
|
||||
|
||||
var _countdown = useState(0);
|
||||
var countdown = _countdown[0];
|
||||
var setCountdown = _countdown[1];
|
||||
|
||||
var _hasRequestedCode = useState(false);
|
||||
var hasRequestedCode = _hasRequestedCode[0];
|
||||
var setHasRequestedCode = _hasRequestedCode[1];
|
||||
|
||||
var timerRef = useRef(null);
|
||||
|
||||
useEffect(function () {
|
||||
return function () {
|
||||
if (timerRef.current) {
|
||||
clearInterval(timerRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
var handleChange = function (field, value) {
|
||||
var next = {};
|
||||
next[field] = value;
|
||||
setFormData(function (prev) {
|
||||
return Object.assign({}, prev, next);
|
||||
});
|
||||
};
|
||||
|
||||
var handleGetCode = function () {
|
||||
if (countdown > 0) return;
|
||||
setHasRequestedCode(true);
|
||||
setCountdown(60);
|
||||
timerRef.current = setInterval(function () {
|
||||
setCountdown(function (prev) {
|
||||
if (prev <= 1) {
|
||||
clearInterval(timerRef.current);
|
||||
timerRef.current = null;
|
||||
return 0;
|
||||
}
|
||||
return prev - 1;
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var handleSubmit = function () {
|
||||
if (!formData.agreeTerms) {
|
||||
antd.message.warning('请阅读并同意《用户服务协议》和《隐私政策》');
|
||||
return;
|
||||
}
|
||||
if (loginMode === 'phone') {
|
||||
if (!formData.phone) {
|
||||
antd.message.warning('请输入手机号');
|
||||
return;
|
||||
}
|
||||
if (!formData.smsCode) {
|
||||
antd.message.warning('请输入验证码');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
if (!formData.username) {
|
||||
antd.message.warning('请输入用户名');
|
||||
return;
|
||||
}
|
||||
if (!formData.password) {
|
||||
antd.message.warning('请输入密码');
|
||||
return;
|
||||
}
|
||||
}
|
||||
antd.message.success('登录成功（原型演示）');
|
||||
if (window.$axure && typeof window.$axure.navigateToUrl === 'function') {
|
||||
window.$axure.navigateToUrl('工作台');
|
||||
} else {
|
||||
window.location.hash = '工作台';
|
||||
}
|
||||
};
|
||||
|
||||
var switchToPhone = function (e) {
|
||||
if (e && e.preventDefault) e.preventDefault();
|
||||
setLoginMode('phone');
|
||||
};
|
||||
var switchToAccount = function (e) {
|
||||
if (e && e.preventDefault) e.preventDefault();
|
||||
setLoginMode('account');
|
||||
};
|
||||
|
||||
var styles = {
|
||||
wrap: {
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
width: '100%',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
||||
backgroundColor: '#f5f5f5'
|
||||
},
|
||||
left: {
|
||||
flex: '1',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '48px',
|
||||
background: 'linear-gradient(135deg, #1d2129 0%, #2d3748 50%, #1d2129 100%)',
|
||||
color: '#fff'
|
||||
},
|
||||
leftContent: {
|
||||
maxWidth: '400px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
title: {
|
||||
fontSize: '28px',
|
||||
fontWeight: '600',
|
||||
marginBottom: '16px',
|
||||
letterSpacing: '0.5px'
|
||||
},
|
||||
slogan: {
|
||||
fontSize: '17px',
|
||||
fontWeight: '500',
|
||||
opacity: 0.92,
|
||||
lineHeight: 1.65,
|
||||
marginBottom: '20px',
|
||||
letterSpacing: '0.02em'
|
||||
},
|
||||
desc: {
|
||||
fontSize: '14px',
|
||||
opacity: 0.72,
|
||||
lineHeight: 1.6
|
||||
},
|
||||
right: {
|
||||
width: '480px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '48px',
|
||||
backgroundColor: '#fff',
|
||||
boxShadow: '-4px 0 24px rgba(0,0,0,0.06)'
|
||||
},
|
||||
formCard: {
|
||||
width: '100%',
|
||||
maxWidth: '360px'
|
||||
},
|
||||
formTitle: {
|
||||
fontSize: '24px',
|
||||
fontWeight: '600',
|
||||
color: '#1d2129',
|
||||
marginBottom: '8px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
formSub: {
|
||||
fontSize: '14px',
|
||||
color: '#86909c',
|
||||
marginBottom: '32px',
|
||||
textAlign: 'center'
|
||||
},
|
||||
formItem: {
|
||||
marginBottom: '20px'
|
||||
},
|
||||
label: {
|
||||
display: 'block',
|
||||
fontSize: '14px',
|
||||
color: '#4e5969',
|
||||
marginBottom: '8px'
|
||||
},
|
||||
input: {
|
||||
width: '100%',
|
||||
height: '40px',
|
||||
padding: '8px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #e5e6eb',
|
||||
borderRadius: '6px',
|
||||
boxSizing: 'border-box',
|
||||
outline: 'none'
|
||||
},
|
||||
codeRow: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
alignItems: 'center'
|
||||
},
|
||||
codeInput: {
|
||||
flex: '1',
|
||||
height: '40px',
|
||||
padding: '8px 12px',
|
||||
fontSize: '14px',
|
||||
border: '1px solid #e5e6eb',
|
||||
borderRadius: '6px',
|
||||
boxSizing: 'border-box',
|
||||
outline: 'none'
|
||||
},
|
||||
getCodeBtn: {
|
||||
flexShrink: 0,
|
||||
height: '40px',
|
||||
padding: '0 16px',
|
||||
fontSize: '14px',
|
||||
color: '#165dff',
|
||||
backgroundColor: '#fff',
|
||||
border: '1px solid #165dff',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer'
|
||||
},
|
||||
getCodeBtnDisabled: {
|
||||
color: '#86909c',
|
||||
borderColor: '#e5e6eb',
|
||||
cursor: 'not-allowed'
|
||||
},
|
||||
row: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '24px'
|
||||
},
|
||||
submitBtn: {
|
||||
width: '100%',
|
||||
height: '44px',
|
||||
fontSize: '16px',
|
||||
fontWeight: '500',
|
||||
borderRadius: '6px'
|
||||
},
|
||||
tabBar: {
|
||||
display: 'flex',
|
||||
marginBottom: '24px',
|
||||
borderBottom: '1px solid #e5e6eb'
|
||||
},
|
||||
tab: {
|
||||
flex: 1,
|
||||
textAlign: 'center',
|
||||
padding: '12px 0',
|
||||
fontSize: '15px',
|
||||
color: '#86909c',
|
||||
cursor: 'pointer',
|
||||
borderBottom: '2px solid transparent',
|
||||
marginBottom: '-1px'
|
||||
},
|
||||
tabActive: {
|
||||
color: '#165dff',
|
||||
fontWeight: '500',
|
||||
borderBottomColor: '#165dff'
|
||||
}
|
||||
};
|
||||
|
||||
return React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
React.createElement('style', {
|
||||
dangerouslySetInnerHTML: {
|
||||
__html: '@media (max-width: 768px) { .login-right { width: 100% !important; min-width: 100% !important; } .login-left { min-height: 200px !important; } .login-wrap { flex-direction: column !important; } }'
|
||||
}
|
||||
}),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.wrap, className: 'login-wrap' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.left, className: 'login-left' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.leftContent },
|
||||
React.createElement('h1', { style: styles.title }, '羚牛氢能'),
|
||||
React.createElement('p', { style: styles.slogan }, '氢能资产数字化，业务运营一体化。'),
|
||||
React.createElement('p', { style: styles.desc }, '数字化资产 · ONE-OS 运管平台')
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.right, className: 'login-right' },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formCard },
|
||||
React.createElement('h2', { style: styles.formTitle }, '欢迎登录'),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.tabBar },
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: loginMode === 'account' ? Object.assign({}, styles.tab, styles.tabActive) : styles.tab,
|
||||
onClick: switchToAccount,
|
||||
role: 'button',
|
||||
tabIndex: 0
|
||||
},
|
||||
'账号密码登录'
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: loginMode === 'phone' ? Object.assign({}, styles.tab, styles.tabActive) : styles.tab,
|
||||
onClick: switchToPhone,
|
||||
role: 'button',
|
||||
tabIndex: 0
|
||||
},
|
||||
'手机号登录'
|
||||
)
|
||||
),
|
||||
React.createElement('p', { style: styles.formSub }, loginMode === 'phone' ? '请输入手机号与验证码' : '请输入您的账号与密码'),
|
||||
loginMode === 'phone'
|
||||
? React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '手机号'),
|
||||
React.createElement('input', {
|
||||
style: styles.input,
|
||||
placeholder: '请输入手机号',
|
||||
value: formData.phone,
|
||||
onChange: function (e) {
|
||||
handleChange('phone', e.target.value);
|
||||
}
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '验证码'),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.codeRow },
|
||||
React.createElement('input', {
|
||||
style: styles.codeInput,
|
||||
placeholder: '请输入验证码',
|
||||
value: formData.smsCode,
|
||||
onChange: function (e) {
|
||||
handleChange('smsCode', e.target.value);
|
||||
}
|
||||
}),
|
||||
React.createElement(
|
||||
'button',
|
||||
{
|
||||
type: 'button',
|
||||
style: countdown > 0 ? Object.assign({}, styles.getCodeBtn, styles.getCodeBtnDisabled) : styles.getCodeBtn,
|
||||
disabled: countdown > 0,
|
||||
onClick: handleGetCode
|
||||
},
|
||||
countdown > 0 ? countdown + '秒后重新获取' : (hasRequestedCode ? '再次获取' : '获取验证码')
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
: React.createElement(
|
||||
React.Fragment,
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '用户名'),
|
||||
React.createElement('input', {
|
||||
style: styles.input,
|
||||
placeholder: '请输入用户名',
|
||||
value: formData.username,
|
||||
onChange: function (e) {
|
||||
handleChange('username', e.target.value);
|
||||
}
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.formItem },
|
||||
React.createElement('label', { style: styles.label }, '密码'),
|
||||
React.createElement('input', {
|
||||
style: styles.input,
|
||||
type: 'password',
|
||||
placeholder: '请输入密码',
|
||||
value: formData.password,
|
||||
onChange: function (e) {
|
||||
handleChange('password', e.target.value);
|
||||
}
|
||||
})
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: styles.row },
|
||||
React.createElement(
|
||||
'label',
|
||||
{ style: { display: 'flex', alignItems: 'center', cursor: 'pointer', fontSize: '14px', color: '#4e5969' } },
|
||||
React.createElement('input', {
|
||||
type: 'checkbox',
|
||||
checked: formData.remember,
|
||||
onChange: function (e) {
|
||||
handleChange('remember', e.target.checked);
|
||||
},
|
||||
style: { marginRight: '8px' }
|
||||
}),
|
||||
'记住我'
|
||||
)
|
||||
),
|
||||
React.createElement(
|
||||
'label',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
color: '#4e5969',
|
||||
marginBottom: '20px',
|
||||
lineHeight: 1.5
|
||||
}
|
||||
},
|
||||
React.createElement('input', {
|
||||
type: 'checkbox',
|
||||
checked: formData.agreeTerms,
|
||||
onChange: function (e) {
|
||||
handleChange('agreeTerms', e.target.checked);
|
||||
},
|
||||
style: { marginRight: '8px', marginTop: '3px', flexShrink: 0 }
|
||||
}),
|
||||
React.createElement(
|
||||
'span',
|
||||
null,
|
||||
'阅读并同意',
|
||||
React.createElement('a', { href: '#', style: { color: '#165dff', marginLeft: '2px' }, onClick: function (e) { e.preventDefault(); } }, '《用户服务协议》'),
|
||||
'和',
|
||||
React.createElement('a', { href: '#', style: { color: '#165dff' }, onClick: function (e) { e.preventDefault(); } }, '《隐私政策》')
|
||||
)
|
||||
),
|
||||
antd && antd.Button
|
||||
? React.createElement(antd.Button, {
|
||||
type: 'primary',
|
||||
block: true,
|
||||
size: 'large',
|
||||
style: styles.submitBtn,
|
||||
onClick: handleSubmit
|
||||
}, '登 录')
|
||||
: React.createElement(
|
||||
'button',
|
||||
{
|
||||
style: Object.assign({}, styles.submitBtn, {
|
||||
backgroundColor: '#165dff',
|
||||
color: '#fff',
|
||||
border: 'none',
|
||||
cursor: 'pointer'
|
||||
}),
|
||||
onClick: handleSubmit
|
||||
},
|
||||
'登 录'
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -395,20 +395,20 @@ const Component = function() {
|
||||
}, [plateNoFocusRow]);
|
||||
|
||||
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' },
|
||||
anchorWrap: { position: 'fixed', top: 80, right: 24, zIndex: 100, backgroundColor: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.12)', padding: '12px 16px', minWidth: 160 },
|
||||
anchorItem: { display: 'block', padding: '6px 0', color: '#1890ff', cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left', fontSize: 13 },
|
||||
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 },
|
||||
page: { padding: '16px 24px 88px', backgroundColor: '#f5f7fa', minHeight: '100vh', fontFamily: '"PingFang SC", "苹方-简", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif', fontSize: 14, color: 'rgba(0,0,0,0.88)' },
|
||||
breadcrumb: { marginBottom: 16, color: 'rgba(0,0,0,0.65)' },
|
||||
breadcrumbSep: { margin: '0 8px', color: 'rgba(0,0,0,0.35)' },
|
||||
anchorWrap: { position: 'fixed', top: 80, right: 24, zIndex: 100, backgroundColor: '#fff', borderRadius: 12, border: '1px solid rgba(0,0,0,0.06)', boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)', padding: '12px 16px', minWidth: 168 },
|
||||
anchorItem: { display: 'block', padding: '8px 4px', minHeight: 36, color: '#1677ff', cursor: 'pointer', border: 'none', background: 'none', width: '100%', textAlign: 'left', fontSize: 13, borderRadius: 6, outline: 'none' },
|
||||
card: { backgroundColor: '#fff', borderRadius: 12, marginBottom: 16, border: '1px solid rgba(0,0,0,0.04)', boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06)', overflow: 'hidden' },
|
||||
cardHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid rgba(0,0,0,0.06)', cursor: 'pointer' },
|
||||
cardTitle: { fontSize: 16, fontWeight: 600, color: 'rgba(0,0,0,0.88)' },
|
||||
cardToggle: { color: 'rgba(0,0,0,0.45)', 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' },
|
||||
label: { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.88)', fontWeight: 500 },
|
||||
labelRequired: { color: '#ff4d4f', marginRight: 4 },
|
||||
input: { width: '100%', padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4, fontSize: 14 },
|
||||
inputDisabled: { backgroundColor: '#f5f5f5', color: '#999', cursor: 'not-allowed' },
|
||||
@@ -423,12 +423,12 @@ const Component = function() {
|
||||
authRow: { display: 'flex', gap: 12, alignItems: 'flex-start', marginBottom: 12 },
|
||||
authInput: { flex: 1, padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4 },
|
||||
btnDel: { padding: '8px 16px', color: '#ff4d4f', border: '1px solid #ff4d4f', borderRadius: 4, backgroundColor: '#fff', cursor: 'pointer' },
|
||||
btnAdd: { padding: '8px 16px', color: '#1890ff', border: '1px dashed #1890ff', borderRadius: 4, backgroundColor: '#fff', cursor: 'pointer', marginBottom: 16 },
|
||||
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 },
|
||||
btn: { padding: '8px 24px', borderRadius: 4, border: '1px solid #d9d9d9', cursor: 'pointer', fontSize: 14 },
|
||||
btnPrimary: { backgroundColor: '#1890ff', color: '#fff', borderColor: '#1890ff' },
|
||||
btnDefault: { backgroundColor: '#fff', color: '#333' },
|
||||
tag: { display: 'inline-block', padding: '2px 8px', marginRight: 8, marginBottom: 4, backgroundColor: '#e6f7ff', color: '#1890ff', borderRadius: 4, fontSize: 12 },
|
||||
btnAdd: { padding: '8px 16px', color: '#1677ff', border: '1px dashed #1677ff', borderRadius: 8, backgroundColor: '#fff', cursor: 'pointer', marginBottom: 16 },
|
||||
footer: { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid rgba(0,0,0,0.06)', display: 'flex', gap: 12, justifyContent: 'flex-start', alignItems: 'center', zIndex: 99, boxShadow: '0 -2px 8px rgba(0,0,0,0.04)' },
|
||||
btn: { padding: '8px 24px', borderRadius: 8, border: '1px solid #d9d9d9', cursor: 'pointer', fontSize: 14, minHeight: 40 },
|
||||
btnPrimary: { backgroundColor: '#1677ff', color: '#fff', borderColor: '#1677ff' },
|
||||
btnDefault: { backgroundColor: '#fff', color: 'rgba(0,0,0,0.88)' },
|
||||
tag: { display: 'inline-block', padding: '2px 8px', marginRight: 8, marginBottom: 4, backgroundColor: '#e6f4ff', color: '#1677ff', borderRadius: 6, fontSize: 12 },
|
||||
regionCascader: { position: 'absolute', top: '100%', left: 0, right: 0, marginTop: 4, backgroundColor: '#fff', border: '1px solid #d9d9d9', borderRadius: 4, boxShadow: '0 2px 8px rgba(0,0,0,0.12)', zIndex: 10, display: 'flex', minHeight: 200 },
|
||||
regionCascaderCol: { flex: 1, borderRight: '1px solid #f0f0f0', overflowY: 'auto' },
|
||||
regionCascaderColLast: { flex: 1 },
|
||||
@@ -446,19 +446,34 @@ const Component = function() {
|
||||
btnGroup: { display: 'inline-flex', border: '1px solid #d9d9d9', borderRadius: 4, overflow: 'hidden' },
|
||||
btnGroupItem: { padding: '8px 16px', border: 'none', borderRight: '1px solid #d9d9d9', backgroundColor: '#fff', color: '#333', cursor: 'pointer', fontSize: 14 },
|
||||
btnGroupItemLast: { borderRight: 'none' },
|
||||
btnGroupItemActive: { backgroundColor: '#1890ff', color: '#fff', borderColor: '#1890ff', borderRightColor: '#1890ff' },
|
||||
btnGroupItemActive: { backgroundColor: '#1677ff', color: '#fff', borderColor: '#1677ff', borderRightColor: '#1677ff' },
|
||||
feeSectionTitle: { fontSize: 15, fontWeight: 600, color: '#333', marginTop: 20, marginBottom: 10 },
|
||||
feeSectionTitleFirst: { marginTop: 0 },
|
||||
modalFormInput: { width: '100%', padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4, fontSize: 14, height: 36, boxSizing: 'border-box' }
|
||||
};
|
||||
|
||||
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),
|
||||
var panelId = 'card-panel-' + (props.id || String(props.title || '').replace(/\s/g, '-'));
|
||||
var titleId = 'card-title-' + panelId;
|
||||
return React.createElement('div', { id: props.id, style: Object.assign({}, styles.card, props.cardStyle || {}) },
|
||||
React.createElement('div', {
|
||||
style: styles.cardHeader,
|
||||
onClick: function() { props.setCollapsed(!props.collapsed); },
|
||||
role: 'button',
|
||||
tabIndex: 0,
|
||||
'aria-expanded': !props.collapsed,
|
||||
'aria-controls': panelId,
|
||||
onKeyDown: function(e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
props.setCollapsed(!props.collapsed);
|
||||
}
|
||||
}
|
||||
},
|
||||
React.createElement('span', { style: styles.cardTitle, id: titleId }, props.title),
|
||||
React.createElement('span', { style: styles.cardToggle }, props.collapsed ? '展开' : '收起')
|
||||
),
|
||||
!props.collapsed ? React.createElement('div', { style: styles.cardBody }, props.children) : null
|
||||
!props.collapsed ? React.createElement('div', { id: panelId, style: styles.cardBody, role: 'region', 'aria-labelledby': titleId }, props.children) : null
|
||||
);
|
||||
};
|
||||
|
||||
@@ -467,7 +482,7 @@ const Component = function() {
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: styles.label }, props.required ? React.createElement('span', { style: styles.labelRequired }, '*') : null, props.label),
|
||||
props.children,
|
||||
props.error ? React.createElement('div', { style: styles.errMsg }, props.error) : null
|
||||
props.error ? React.createElement('div', { style: styles.errMsg, role: 'alert' }, props.error) : null
|
||||
);
|
||||
};
|
||||
|
||||
@@ -499,7 +514,7 @@ const Component = function() {
|
||||
React.createElement(FormItem, { label: '付款周期', required: true, error: formErrors.paymentPeriod }, React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: paymentPeriod || undefined, onChange: function(v) { setPaymentPeriod(v || ''); }, status: formErrors.paymentPeriod ? 'error' : undefined }, [1,2,3,4,5,6,7,8,9,10,11,12].map(function(n) { return React.createElement(Option, { key: n, value: String(n) }, n + '个月'); }))),
|
||||
React.createElement(FormItem, { label: '签约公司', required: true, error: formErrors.signingCompany }, React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: signingCompany || undefined, onChange: function(v) { setSigningCompany(v || ''); }, status: formErrors.signingCompany ? 'error' : undefined }, orgList.map(function(o, i) { return React.createElement(Option, { key: i, value: o }, o); }))),
|
||||
React.createElement('div', { style: styles.formCol },
|
||||
React.createElement(FormItem, { label: '交车区域', required: true, error: formErrors.deliveryRegion }, React.createElement('div', { id: 'delivery-region-wrap', style: { position: 'relative' } }, React.createElement(Input, { style: Object.assign({}, formErrors.deliveryRegion ? { borderColor: '#ff4d4f' } : {}, { cursor: 'pointer', caretColor: 'transparent', width: '100%' }), placeholder: '请选择省-市', value: deliveryRegionDisplay, readOnly: true, onClick: function() { setDeliveryRegionOpen(!deliveryRegionOpen); } }), deliveryRegionOpen ? React.createElement('div', { style: styles.regionCascader, onMouseDown: function() { deliveryRegionClickInsideRef.current = true; } }, React.createElement('div', { style: styles.regionCascaderCol }, regionList.map(function(r, i) { var isActive = r.province === deliveryProvince; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); setDeliveryProvince(r.province); setDeliveryCity(''); } }, r.province); })), React.createElement('div', { style: styles.regionCascaderColLast }, deliveryProvince ? (regionList.find(function(x) { return x.province === deliveryProvince; }) || { cities: [] }).cities.map(function(c, i) { var isActive = c === deliveryCity; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); selectDeliveryRegion(deliveryProvince, c); } }, c); }) : React.createElement('div', { style: { padding: 16, color: '#999', fontSize: 13 } }, '请先选择省'))) : null))
|
||||
React.createElement(FormItem, { label: '交车区域', required: true, error: formErrors.deliveryRegion }, React.createElement('div', { id: 'delivery-region-wrap', style: { position: 'relative' } }, React.createElement(Input, { style: Object.assign({}, formErrors.deliveryRegion ? { borderColor: '#ff4d4f' } : {}, { cursor: 'pointer', caretColor: 'transparent', width: '100%' }), placeholder: '请选择省-市', value: deliveryRegionDisplay, readOnly: true, role: 'combobox', 'aria-expanded': deliveryRegionOpen, 'aria-haspopup': 'listbox', 'aria-controls': 'delivery-region-cascader', 'aria-invalid': !!formErrors.deliveryRegion, 'aria-label': '交车区域，省-市', onClick: function() { setDeliveryRegionOpen(!deliveryRegionOpen); }, onKeyDown: function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setDeliveryRegionOpen(!deliveryRegionOpen); } } }), deliveryRegionOpen ? React.createElement('div', { id: 'delivery-region-cascader', style: styles.regionCascader, onMouseDown: function() { deliveryRegionClickInsideRef.current = true; } }, React.createElement('div', { style: styles.regionCascaderCol }, regionList.map(function(r, i) { var isActive = r.province === deliveryProvince; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f4ff', color: '#1677ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); setDeliveryProvince(r.province); setDeliveryCity(''); } }, r.province); })), React.createElement('div', { style: styles.regionCascaderColLast }, deliveryProvince ? (regionList.find(function(x) { return x.province === deliveryProvince; }) || { cities: [] }).cities.map(function(c, i) { var isActive = c === deliveryCity; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f4ff', color: '#1677ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); selectDeliveryRegion(deliveryProvince, c); } }, c); }) : React.createElement('div', { style: { padding: 16, color: '#999', fontSize: 13 } }, '请先选择省'))) : null))
|
||||
),
|
||||
React.createElement(FormItem, { label: '交车地点', required: true, error: formErrors.deliveryLocation }, React.createElement(Input, { placeholder: '请输入交车地点', value: deliveryLocation, onChange: function(e) { setDeliveryLocation(e.target.value); }, status: formErrors.deliveryLocation ? 'error' : undefined, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '合同审批类型', required: true, error: formErrors.contractApprovalType }, React.createElement(Select, { placeholder: '请选择合同审批类型', style: { width: '100%' }, value: contractApprovalType || undefined, onChange: function(v) { setContractApprovalType(v || ''); }, status: formErrors.contractApprovalType ? 'error' : undefined }, React.createElement(Option, { value: '标准合同审批' }, '标准合同审批'), React.createElement(Option, { value: '非标准合同审批' }, '非标准合同审批')))
|
||||
@@ -509,7 +524,7 @@ const Component = function() {
|
||||
contractOriginal
|
||||
? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' } },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
|
||||
React.createElement('a', { href: '#', style: { color: '#1890ff' }, onClick: function(e) { e.preventDefault(); openContractOriginal(); } }, contractOriginal.name),
|
||||
React.createElement(Button, { type: 'link', size: 'small', 'aria-label': '打开或预览合同原件：' + (contractOriginal.name || ''), onClick: function(e) { e.preventDefault(); openContractOriginal(); } }, contractOriginal.name),
|
||||
contractOriginal.size || contractOriginal.uploadTime ? React.createElement('span', { style: { color: '#999', fontSize: 12 } }, (contractOriginal.size ? contractOriginal.size : '') + (contractOriginal.size && contractOriginal.uploadTime ? ' · ' : '') + (contractOriginal.uploadTime || '')) : null
|
||||
),
|
||||
React.createElement(Button, { type: 'button', size: 'small', danger: true, onClick: function() { setContractOriginal(null); } }, '删除')
|
||||
@@ -630,11 +645,11 @@ const Component = function() {
|
||||
) : null;
|
||||
var feeContent = React.createElement('div', null, feeTemplateSelect, feeTemplateBody);
|
||||
|
||||
var billingBtnBase = { padding: '12px 16px', border: '1px solid #d9d9d9', borderRadius: 0, backgroundColor: '#fff', color: '#333', cursor: 'pointer', fontSize: 14, textAlign: 'left', flex: 1, minWidth: 0, width: 0, height: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', overflow: 'visible' };
|
||||
var billingBtnBase = { padding: '12px 16px', border: '1px solid #d9d9d9', borderRadius: 0, backgroundColor: '#fff', color: '#333', cursor: 'pointer', fontSize: 14, textAlign: 'left', flex: 1, minWidth: 0, width: 0, minHeight: 88, height: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', overflow: 'visible' };
|
||||
var billingContent = React.createElement('div', null,
|
||||
React.createElement('div', { style: { display: 'flex', border: formErrors.billingMethod ? '1px solid #ff4d4f' : '1px solid #d9d9d9', borderRadius: 4, overflow: 'hidden', alignItems: 'stretch' } },
|
||||
React.createElement(Button, { type: 'button', style: Object.assign({}, billingBtnBase, { borderRight: '1px solid #d9d9d9' }, billingMethod === 'month' ? { backgroundColor: '#1890ff', color: '#fff', borderColor: '#1890ff' } : {}), onClick: function() { setBillingMethod('month'); } }, React.createElement('div', { style: { width: '100%' } }, React.createElement('div', { style: { fontWeight: 600, marginBottom: 6 } }, '按自然月结算'), React.createElement('div', { style: { fontSize: 12, opacity: 0.9, whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.5 } }, '账单按照第一个月计费日期开始-当月最后一天为第一期，之后按自然月方式形成每一期账单，例如付款周期为2个月，则第二期账单从2月1日-3月31日。'))),
|
||||
React.createElement(Button, { type: 'button', style: Object.assign({}, billingBtnBase, billingMethod === 'period' ? { backgroundColor: '#1890ff', color: '#fff', borderColor: '#1890ff' } : {}), onClick: function() { setBillingMethod('period'); } }, React.createElement('div', { style: { width: '100%' } }, React.createElement('div', { style: { fontWeight: 600, marginBottom: 6 } }, '按付款周期天数结算'), React.createElement('div', { style: { fontSize: 12, opacity: 0.9, whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.5 } }, '账单按照合同基本信息中付款周期实际天数形成一期账单，例如付款周期为60天，则该账单账期为60天，每60天会自动生成新一期账单。')))
|
||||
React.createElement(Button, { type: 'button', 'aria-pressed': billingMethod === 'month', 'aria-label': '账单按自然月结算', style: Object.assign({}, billingBtnBase, { borderRight: '1px solid #d9d9d9' }, billingMethod === 'month' ? { backgroundColor: '#1677ff', color: '#fff', borderColor: '#1677ff' } : {}), onClick: function() { setBillingMethod('month'); } }, React.createElement('div', { style: { width: '100%' } }, React.createElement('div', { style: { fontWeight: 600, marginBottom: 6 } }, '按自然月结算'), React.createElement('div', { style: { fontSize: 12, opacity: 0.9, whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.5 } }, '账单按照第一个月计费日期开始-当月最后一天为第一期，之后按自然月方式形成每一期账单，例如付款周期为2个月，则第二期账单从2月1日-3月31日。'))),
|
||||
React.createElement(Button, { type: 'button', 'aria-pressed': billingMethod === 'period', 'aria-label': '账单按付款周期天数结算', style: Object.assign({}, billingBtnBase, billingMethod === 'period' ? { backgroundColor: '#1677ff', color: '#fff', borderColor: '#1677ff' } : {}), onClick: function() { setBillingMethod('period'); } }, React.createElement('div', { style: { width: '100%' } }, React.createElement('div', { style: { fontWeight: 600, marginBottom: 6 } }, '按付款周期天数结算'), React.createElement('div', { style: { fontSize: 12, opacity: 0.9, whiteSpace: 'normal', wordBreak: 'break-word', lineHeight: 1.5 } }, '账单按照合同基本信息中付款周期实际天数形成一期账单，例如付款周期为60天，则该账单账期为60天，每60天会自动生成新一期账单。')))
|
||||
),
|
||||
formErrors.billingMethod ? React.createElement('div', { style: styles.errMsg }, formErrors.billingMethod) : null
|
||||
);
|
||||
@@ -646,25 +661,25 @@ const Component = function() {
|
||||
var reqSpecModalContent = reqSpecOpen ? React.createElement('div', { style: styles.modalMask, onClick: function(e) { if (e.target === e.currentTarget) setReqSpecOpen(false); } }, React.createElement('div', { style: Object.assign({}, styles.modalBox, { maxWidth: 720 }), onClick: function(e) { e.stopPropagation(); } }, React.createElement('div', { style: styles.modalHeader }, '需求说明'), React.createElement('div', { style: Object.assign({}, styles.modalBody, { maxHeight: '70vh', padding: '20px 24px', overflow: 'auto' }) }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementContent)), React.createElement('div', { style: { padding: '12px 20px', borderTop: '1px solid #f0f0f0', textAlign: 'right' } }, React.createElement(Button, { onClick: function() { setReqSpecOpen(false); } }, '关闭')))) : null;
|
||||
|
||||
return React.createElement('div', { style: styles.page },
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } }, 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', { style: { color: '#1890ff' } }, '新增租赁合同')), React.createElement('span', { style: { color: '#1890ff', cursor: 'pointer', fontSize: 14 }, onClick: function() { setReqSpecOpen(true); } }, '查看需求说明')),
|
||||
React.createElement('div', { style: styles.anchorWrap },
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } }, 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', { style: { color: '#1677ff' } }, '新增租赁合同')), React.createElement('button', { type: 'button', 'aria-label': '打开需求说明', style: { color: '#1677ff', cursor: 'pointer', fontSize: 14, border: 'none', background: 'none', padding: '8px 4px', minHeight: 40, borderRadius: 6 }, onClick: function() { setReqSpecOpen(true); } }, '查看需求说明')),
|
||||
React.createElement('div', { style: styles.anchorWrap, role: 'navigation', 'aria-label': '页面区块锚点导航' },
|
||||
React.createElement('div', { style: { marginBottom: 8, fontWeight: 600, fontSize: 14 } }, '锚点导航'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-customer'); } }, '客户基本信息'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-contract'); } }, '合同基本信息'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-authorized'); } }, '被授权人信息'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-rental'); } }, '租赁订单信息'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-fee'); } }, '其他费用信息'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-billing'); } }, '账单计算方式')
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, 'aria-label': '跳转到客户基本信息', onClick: function() { scrollToCard('card-customer'); } }, '客户基本信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, 'aria-label': '跳转到合同基本信息', onClick: function() { scrollToCard('card-contract'); } }, '合同基本信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, 'aria-label': '跳转到被授权人信息', onClick: function() { scrollToCard('card-authorized'); } }, '被授权人信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, 'aria-label': '跳转到租赁订单信息', onClick: function() { scrollToCard('card-rental'); } }, '租赁订单信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, 'aria-label': '跳转到其他费用信息', onClick: function() { scrollToCard('card-fee'); } }, '其他费用信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, 'aria-label': '跳转到账单计算方式', onClick: function() { scrollToCard('card-billing'); } }, '账单计算方式')
|
||||
),
|
||||
React.createElement('div', { id: 'card-customer' }, React.createElement(CardBlock, { id: 'card-customer', title: '客户基本信息', collapsed: cc1, setCollapsed: setCc1 }, customerFields)),
|
||||
React.createElement('div', { id: 'card-contract', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, React.createElement('div', null, contractFormRow1, contractFormRow1Part2, contractFormRow2))),
|
||||
React.createElement('div', { id: 'card-authorized', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '被授权人信息', collapsed: cc3, setCollapsed: setCc3 }, authorizedContent)),
|
||||
React.createElement('div', { id: 'card-rental', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '租赁订单信息', collapsed: cc4, setCollapsed: setCc4 }, rentalContent)),
|
||||
React.createElement('div', { id: 'card-fee', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '其他费用信息', collapsed: cc5, setCollapsed: setCc5 }, feeContent)),
|
||||
React.createElement('div', { id: 'card-billing', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '账单计算方式', collapsed: cc6, setCollapsed: setCc6 }, billingContent)),
|
||||
React.createElement(CardBlock, { id: 'card-customer', title: '客户基本信息', collapsed: cc1, setCollapsed: setCc1 }, customerFields),
|
||||
React.createElement(CardBlock, { id: 'card-contract', cardStyle: { marginTop: 16 }, title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, React.createElement('div', null, contractFormRow1, contractFormRow1Part2, contractFormRow2)),
|
||||
React.createElement(CardBlock, { id: 'card-authorized', cardStyle: { marginTop: 16 }, title: '被授权人信息', collapsed: cc3, setCollapsed: setCc3 }, authorizedContent),
|
||||
React.createElement(CardBlock, { id: 'card-rental', cardStyle: { marginTop: 16 }, title: '租赁订单信息', collapsed: cc4, setCollapsed: setCc4 }, rentalContent),
|
||||
React.createElement(CardBlock, { id: 'card-fee', cardStyle: { marginTop: 16 }, title: '其他费用信息', collapsed: cc5, setCollapsed: setCc5 }, feeContent),
|
||||
React.createElement(CardBlock, { id: 'card-billing', cardStyle: { marginTop: 16 }, title: '账单计算方式', collapsed: cc6, setCollapsed: setCc6 }, billingContent),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
serviceModalContent,
|
||||
reqSpecModalContent,
|
||||
React.createElement('div', { style: styles.footer }, React.createElement(Button, { type: 'primary', onClick: function() { if (validateSubmitAndReview()) { message.success('租赁合同已提交审核。'); } } }, '提交并审核'), React.createElement(Button, { onClick: function() { message.info('保存，加入租赁合同列表（仅操作人可查看编辑）'); } }, '保存'), React.createElement(Button, { onClick: function() { message.info('取消'); } }, '取消'))
|
||||
React.createElement('div', { style: styles.footer }, React.createElement(Button, { type: 'primary', size: 'large', onClick: function() { if (validateSubmitAndReview()) { message.success('租赁合同已提交审核。'); } } }, '提交并审核'), React.createElement(Button, { size: 'large', onClick: function() { message.info('保存，加入租赁合同列表（仅操作人可查看编辑）'); } }, '保存'), React.createElement(Button, { size: 'large', onClick: function() { message.info('取消'); } }, '取消'))
|
||||
);
|
||||
};
|
||||
|
||||
464
web端/运维管理/车辆业务/调拨管理-业务提交-编辑.jsx
Normal file
464
web端/运维管理/车辆业务/调拨管理-业务提交-编辑.jsx
Normal file
@@ -0,0 +1,464 @@
|
||||
// 【重要】必须使用 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 Cascader = antd.Cascader;
|
||||
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;
|
||||
}
|
||||
|
||||
function parseDateTime(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 HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD'], true);
|
||||
} catch (e2) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
|
||||
|
||||
/** 车牌可选车辆运营状态（需求：仅「可运营」） */
|
||||
var PLATE_ELIGIBLE_STATUS = '可运营';
|
||||
|
||||
var regionOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
||||
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
|
||||
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var brandOptions = useMemo(function () {
|
||||
return ['东风', '比亚迪', '小鹏', '蔚来', '福田', '飞驰', '宇通'].map(function (b) {
|
||||
return { value: b, label: b };
|
||||
});
|
||||
}, []);
|
||||
|
||||
var modelOptionsByBrand = useMemo(function () {
|
||||
return {
|
||||
东风: ['DFH1180', 'DFH5160'],
|
||||
比亚迪: ['汉', '唐'],
|
||||
小鹏: ['P7', 'G9'],
|
||||
蔚来: ['ET5', 'ES8'],
|
||||
福田: ['BJ1180'],
|
||||
飞驰: ['FSQ4250'],
|
||||
宇通: ['ZKH4250']
|
||||
};
|
||||
}, []);
|
||||
|
||||
/** 车辆主数据（原型）：仅运营状态为「可运营」的车牌出现在车牌下拉里 */
|
||||
var vehicleDb = useMemo(function () {
|
||||
return [
|
||||
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180' },
|
||||
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉' },
|
||||
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7' },
|
||||
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5' },
|
||||
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180' },
|
||||
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var plateOptionsEligible = useMemo(function () {
|
||||
return vehicleDb
|
||||
.filter(function (v) { return v.status === PLATE_ELIGIBLE_STATUS; })
|
||||
.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
}, [vehicleDb]);
|
||||
|
||||
// 编辑页：从服务端加载已保存数据（原型反写）
|
||||
var initialSnapshot = useMemo(function () {
|
||||
return {
|
||||
transferId: 'TP202604010001',
|
||||
savedAt: '2026-04-01 11:20',
|
||||
form: {
|
||||
transferDate: parseDateTime('2026-04-01 10:30'),
|
||||
departRegion: ['guangdong', 'guangzhou'],
|
||||
receiveRegion: ['zhejiang', 'jiaxing'],
|
||||
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。'
|
||||
},
|
||||
vehicles: [
|
||||
{ id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111' },
|
||||
{ id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222' }
|
||||
]
|
||||
};
|
||||
}, []);
|
||||
|
||||
var formState = useState(initialSnapshot.form);
|
||||
var form = formState[0];
|
||||
var setForm = formState[1];
|
||||
|
||||
var rowIdRef = React.useRef(3);
|
||||
var vehiclesState = useState(initialSnapshot.vehicles);
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
var savedAtState = useState(initialSnapshot.savedAt);
|
||||
var savedAt = savedAtState[0];
|
||||
var setSavedAt = savedAtState[1];
|
||||
|
||||
var errorsState = useState({});
|
||||
var errors = errorsState[0];
|
||||
var setErrors = errorsState[1];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「编辑」模块',
|
||||
'#面包屑：运维管理-车辆业务-调拨管理-编辑',
|
||||
'页面基于「调拨管理-新增」生成：字段/校验/车辆清单一致。',
|
||||
'进入页面时反写已保存数据；点击保存后更新“已保存（模拟）”状态。'
|
||||
].join('\n');
|
||||
|
||||
var updateForm = useCallback(function (patch) {
|
||||
setForm(function (p) { return Object.assign({}, p, patch); });
|
||||
}, []);
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
var cur = list[index] || {};
|
||||
list[index] = Object.assign({}, cur, patch);
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handlePlateChange = useCallback(function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
|
||||
if (v && v.status === PLATE_ELIGIBLE_STATUS) {
|
||||
updateRow(index, { plateNo: plateNo, brand: v.brand, model: v.model });
|
||||
} else {
|
||||
updateRow(index, { plateNo: plateNo });
|
||||
}
|
||||
}, [vehicleDb, updateRow]);
|
||||
|
||||
var addRow = useCallback(function () {
|
||||
setVehicles(function (prev) {
|
||||
return prev.concat([{ id: rowIdRef.current++, brand: undefined, model: undefined, plateNo: undefined }]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
var removeRow = useCallback(function (index) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
list.splice(index, 1);
|
||||
if (list.length === 0) {
|
||||
return [{ id: rowIdRef.current++, brand: undefined, model: undefined, plateNo: undefined }];
|
||||
}
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
function hasValidVehicle() {
|
||||
return (vehicles || []).some(function (r) { return r && r.brand && r.model; });
|
||||
}
|
||||
|
||||
function runValidate() {
|
||||
var e = {};
|
||||
if (!form.transferDate) e.transferDate = '请选择调拨日期';
|
||||
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
|
||||
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
|
||||
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
|
||||
if (!hasValidVehicle()) e.vehicleList = '请选择调拨车辆';
|
||||
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!r.brand && !r.model && !r.plateNo) continue;
|
||||
if (!r.brand) e['row_' + i + '_brand'] = '请选择品牌';
|
||||
if (!r.model) e['row_' + i + '_model'] = '请选择型号';
|
||||
}
|
||||
setErrors(e);
|
||||
return { ok: Object.keys(e).length === 0, err: e };
|
||||
}
|
||||
|
||||
var handleSubmitAudit = useCallback(function () {
|
||||
var result = runValidate();
|
||||
if (!result.ok) {
|
||||
if (result.err && result.err.vehicleList) message.error(result.err.vehicleList);
|
||||
else message.error('请完善必填项');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认提交审核？',
|
||||
content: '提交后将进入审批流程（原型）。',
|
||||
okText: '提交审核',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
message.success('已提交审核（原型）');
|
||||
}
|
||||
});
|
||||
}, [form, vehicles]);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
var nowStr = '';
|
||||
try {
|
||||
if (window.dayjs) nowStr = window.dayjs().format('YYYY-MM-DD HH:mm');
|
||||
} catch (e1) {}
|
||||
if (!nowStr) {
|
||||
try {
|
||||
if (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: React.createElement('span', null, reqStar, '品牌'),
|
||||
key: 'brand',
|
||||
width: 160,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: r.brand,
|
||||
onChange: function (v) { updateRow(index, { brand: v, model: undefined, plateNo: undefined }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: brandOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_brand'] || errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '型号'),
|
||||
key: 'model',
|
||||
width: 180,
|
||||
render: function (_, r, index) {
|
||||
var ms = (r.brand && modelOptionsByBrand[r.brand]) || [];
|
||||
var opts = ms.map(function (m) { return { value: m, label: m }; });
|
||||
return React.createElement(Select, {
|
||||
placeholder: r.brand ? '请选择型号' : '请先选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: r.model,
|
||||
disabled: !r.brand,
|
||||
onChange: function (v) { updateRow(index, { model: v, plateNo: undefined }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: opts,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_model'] || errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车牌号',
|
||||
key: 'plateNo',
|
||||
width: 240,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) { handlePlateChange(index, v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptionsEligible,
|
||||
filterOption: filterOption
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
render: function (_, __, index) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [brandOptions, modelOptionsByBrand, plateOptionsEligible, errors, updateRow, handlePlateChange, removeRow]);
|
||||
|
||||
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 } },
|
||||
'调拨单号：',
|
||||
initialSnapshot.transferId,
|
||||
' ｜ ',
|
||||
'保存状态：',
|
||||
savedAt ? ('已保存（' + savedAt + '）') : '未保存'
|
||||
),
|
||||
|
||||
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.65, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)
|
||||
),
|
||||
|
||||
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 HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
placeholder: '请选择调拨日期',
|
||||
value: form.transferDate,
|
||||
onChange: function (v) { updateForm({ transferDate: v }); },
|
||||
status: errors.transferDate ? 'error' : undefined
|
||||
}),
|
||||
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择省 / 市',
|
||||
options: regionOptions,
|
||||
value: form.departRegion,
|
||||
onChange: function (v) { updateForm({ departRegion: v }); },
|
||||
allowClear: true,
|
||||
status: errors.departRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择省 / 市',
|
||||
options: regionOptions,
|
||||
value: form.receiveRegion,
|
||||
onChange: function (v) { updateForm({ receiveRegion: v }); },
|
||||
allowClear: true,
|
||||
status: errors.receiveRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
|
||||
React.createElement(Input.TextArea, {
|
||||
placeholder: '请输入调拨原因',
|
||||
value: form.reason,
|
||||
onChange: function (e) { updateForm({ reason: e.target.value }); },
|
||||
autoSize: { minRows: 3, maxRows: 6 },
|
||||
status: errors.reason ? 'error' : undefined
|
||||
}),
|
||||
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(
|
||||
Card,
|
||||
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 720 }
|
||||
}),
|
||||
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
|
||||
),
|
||||
|
||||
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: handleSubmitAudit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
576
web端/运维管理/车辆业务/调拨管理-接收信息-司机运输.jsx
Normal file
576
web端/运维管理/车辆业务/调拨管理-接收信息-司机运输.jsx
Normal file
@@ -0,0 +1,576 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 接收信息（数字化资产 ONEOS 运管平台）
|
||||
// 本页用例：调拨方式为「司机运输」
|
||||
|
||||
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;
|
||||
|
||||
var METHOD_DRIVER = '司机运输';
|
||||
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function getMockSnapshot() {
|
||||
return {
|
||||
transferDateStr: '2026-03-31 10:30',
|
||||
departRegionText: '广东省-广州市',
|
||||
receiveRegionText: '浙江省-嘉兴市',
|
||||
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
|
||||
method: METHOD_DRIVER,
|
||||
transportLeader: '李建国',
|
||||
transportPhone: '13800138000',
|
||||
receivePersonName: '王芳',
|
||||
transferVehicles: [
|
||||
{
|
||||
id: 1,
|
||||
brand: '小鹏',
|
||||
model: 'P7',
|
||||
plateNo: '浙A11111',
|
||||
departMileageKm: '12010.00',
|
||||
departHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
departElectricKwh: '55.20',
|
||||
departParking: '西湖景区停车场'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
brand: '蔚来',
|
||||
model: 'ET5',
|
||||
plateNo: '浙B22222',
|
||||
departMileageKm: '15010.00',
|
||||
departHydrogen: '22.10',
|
||||
h2Unit: 'MPa',
|
||||
departElectricKwh: '58.00',
|
||||
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 || '',
|
||||
departMileageKm: r.departMileageKm != null ? String(r.departMileageKm) : '',
|
||||
departHydrogen: r.departHydrogen != null ? String(r.departHydrogen) : '',
|
||||
h2Unit: r.h2Unit || '%',
|
||||
departElectricKwh: r.departElectricKwh != null ? String(r.departElectricKwh) : '',
|
||||
arriveMileageKm: '',
|
||||
arriveHydrogen: '',
|
||||
arriveElectricKwh: ''
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
var receiveTimeState = useState(null);
|
||||
var receiveTime = receiveTimeState[0];
|
||||
var setReceiveTime = receiveTimeState[1];
|
||||
|
||||
var receiveAreaTypeState = useState(undefined);
|
||||
var receiveAreaType = receiveAreaTypeState[0];
|
||||
var setReceiveAreaType = receiveAreaTypeState[1];
|
||||
|
||||
var receiveParkingState = useState(undefined);
|
||||
var receiveParking = receiveParkingState[0];
|
||||
var setReceiveParking = receiveParkingState[1];
|
||||
|
||||
var receiveAddressState = useState('');
|
||||
var receiveAddress = receiveAddressState[0];
|
||||
var setReceiveAddress = receiveAddressState[1];
|
||||
|
||||
var parkingOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'p1', label: '西湖景区停车场' },
|
||||
{ value: 'p2', label: '宁波江北停车场' },
|
||||
{ value: 'p3', label: '张江园区停车场' },
|
||||
{ value: 'p4', label: '天河智慧停车场' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var vehiclesState = useState(function () {
|
||||
return buildVehicleRows(getMockSnapshot());
|
||||
});
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
var errorsState = useState({});
|
||||
var errors = errorsState[0];
|
||||
var setErrors = errorsState[1];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「接收信息」模块',
|
||||
'',
|
||||
'1.调拨情况：',
|
||||
'1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD HH:mm；',
|
||||
'1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；',
|
||||
'1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；',
|
||||
'1.4.调拨原因：反写新增调拨时的调拨原因；',
|
||||
'',
|
||||
'2.调拨信息：',
|
||||
'2.1.调拨方式：反写调拨信息提交时的调拨方式，该用例请列举调拨方式为：司机运输；',
|
||||
'2.2.运输负责人：反写调拨信息提交时的运输负责人；',
|
||||
'2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；',
|
||||
'2.6.接收人员：反写调拨信息提交时的接收人员姓名；',
|
||||
'',
|
||||
'3.接收信息：',
|
||||
'3.1.接收时间：日期选择器，精确至分钟，格式：YYYY-MM-DD HH:mm；',
|
||||
'3.2.接收区域：选择器，选项为：停车场、其他；',
|
||||
'3.3.停车场：必填项，选择器，选择已有停车场，接收区域为停车场时显示；',
|
||||
'3.4.停车地址：必填项，输入框，支持自定义输入，接收区域为其他时显示；',
|
||||
'',
|
||||
'4.调拨车辆清单；',
|
||||
'#以表格方式展示，反写新增调拨时的整个清单：',
|
||||
'4.1.品牌：反写新增调拨时的品牌；',
|
||||
'4.2.型号：反写新增调拨时的型号；',
|
||||
'4.3.车牌号：反写调拨信息提交时的车牌号；',
|
||||
'4.4.出发时里程：反写调拨信息提交时的里程数，只有调拨方式为司机运输时显示；',
|
||||
'4.5.到达时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；',
|
||||
'4.6.出发时氢量：反写调拨信息提交时的氢量，只有调拨方式为司机运输时显示；',
|
||||
'4.7.到达时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；',
|
||||
'4.8.出发时电量：反写调拨信息提交时的电量，只有调拨方式为司机运输时显示；',
|
||||
'4.9.到达时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；',
|
||||
'',
|
||||
'5.底部按钮为提交、保存、取消；',
|
||||
'5.1.提交：点击提交审核校验必填项，提交成功后将调拨车辆最终停车区域同步到车辆列表停车场中；',
|
||||
'5.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
|
||||
].join('\n');
|
||||
|
||||
function toFixed2Input(v) {
|
||||
var s = String(v === null || v === undefined ? '' : v);
|
||||
s = s.replace(/[^\d.]/g, '');
|
||||
var firstDot = s.indexOf('.');
|
||||
if (firstDot >= 0) {
|
||||
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
|
||||
}
|
||||
if (firstDot >= 0) {
|
||||
var a = s.split('.');
|
||||
s = a[0] + '.' + (a[1] || '').slice(0, 2);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
var cur = list[index] || {};
|
||||
list[index] = Object.assign({}, cur, patch);
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
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 = '请输入停车地址';
|
||||
}
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!String(r.arriveMileageKm || '').trim()) e['row_' + i + '_arrMile'] = '请输入到达时里程';
|
||||
if (!String(r.arriveHydrogen || '').trim()) e['row_' + i + '_arrH2'] = '请输入到达时氢量';
|
||||
if (!String(r.arriveElectricKwh || '').trim()) e['row_' + i + '_arrKwh'] = '请输入到达时电量';
|
||||
}
|
||||
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, vehicles]);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
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 });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发时里程',
|
||||
key: 'departMileageKm',
|
||||
width: 130,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '到达时里程'),
|
||||
key: 'arriveMileageKm',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_arrMile';
|
||||
return React.createElement(Input, {
|
||||
value: r.arriveMileageKm,
|
||||
onChange: function (e) { updateRow(index, { arriveMileageKm: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发时氢量',
|
||||
key: 'departHydrogen',
|
||||
width: 130,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: r.h2Unit || '-' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '到达时氢量'),
|
||||
key: 'arriveHydrogen',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_arrH2';
|
||||
return React.createElement(Input, {
|
||||
value: r.arriveHydrogen,
|
||||
onChange: function (e) { updateRow(index, { arriveHydrogen: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: r.h2Unit || '%',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发时电量',
|
||||
key: 'departElectricKwh',
|
||||
width: 130,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '到达时电量'),
|
||||
key: 'arriveElectricKwh',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_arrKwh';
|
||||
return React.createElement(Input, {
|
||||
value: r.arriveElectricKwh,
|
||||
onChange: function (e) { updateRow(index, { arriveElectricKwh: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'kWh',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [errors, updateRow]);
|
||||
|
||||
return React.createElement(
|
||||
App,
|
||||
null,
|
||||
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: '调拨管理' }, { title: '接收信息' }] }),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
|
||||
),
|
||||
|
||||
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(
|
||||
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: 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 HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
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,
|
||||
scroll: { x: 'max-content' }
|
||||
})
|
||||
),
|
||||
|
||||
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 }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
515
web端/运维管理/车辆业务/调拨管理-接收信息-第三方运输.jsx
Normal file
515
web端/运维管理/车辆业务/调拨管理-接收信息-第三方运输.jsx
Normal file
@@ -0,0 +1,515 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 接收信息（数字化资产 ONEOS 运管平台）
|
||||
// 本页用例：调拨方式为「第三方运输」
|
||||
|
||||
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 getMockSnapshot() {
|
||||
return {
|
||||
transferDateStr: '2026-03-31',
|
||||
departRegionText: '广东省-广州市',
|
||||
receiveRegionText: '浙江省-嘉兴市',
|
||||
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
|
||||
method: METHOD_THIRD,
|
||||
transportLeader: '刘振华',
|
||||
transportPhone: '13901234567',
|
||||
transportCost: '8650.50',
|
||||
transportContractFileLabel: '顺达物流有限公司运输合同.pdf',
|
||||
receivePersonName: '王芳',
|
||||
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(null);
|
||||
var receiveTime = receiveTimeState[0];
|
||||
var setReceiveTime = receiveTimeState[1];
|
||||
|
||||
var receiveAreaTypeState = useState(undefined);
|
||||
var receiveAreaType = receiveAreaTypeState[0];
|
||||
var setReceiveAreaType = receiveAreaTypeState[1];
|
||||
|
||||
var receiveParkingState = useState(undefined);
|
||||
var receiveParking = receiveParkingState[0];
|
||||
var setReceiveParking = receiveParkingState[1];
|
||||
|
||||
var receiveAddressState = useState('');
|
||||
var receiveAddress = receiveAddressState[0];
|
||||
var setReceiveAddress = receiveAddressState[1];
|
||||
|
||||
var vehiclesState = useState(function () {
|
||||
return buildVehicleRows(getMockSnapshot());
|
||||
});
|
||||
var vehicles = vehiclesState[0];
|
||||
|
||||
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.调拨情况：',
|
||||
'1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD HH:mm；',
|
||||
'1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；',
|
||||
'1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；',
|
||||
'1.4.调拨原因：反写新增调拨时的调拨原因；',
|
||||
'',
|
||||
'2.调拨信息：',
|
||||
'2.1.调拨方式：反写，本用例为第三方运输；',
|
||||
'2.2.运输负责人：反写调拨信息提交时的运输负责人；',
|
||||
'2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；',
|
||||
'2.4.运输费用：反写，格式为：xx.xx元；',
|
||||
'2.5.运输合同附件：反写（样例：xxxxx公司运输合同.pdf），未上传显示为无；',
|
||||
'2.6.接收人员：反写调拨信息提交时的接收人员姓名；',
|
||||
'',
|
||||
'3.接收信息：',
|
||||
'3.1.接收时间：日期选择器，精确至天，格式：YYYY-MM-DD；',
|
||||
'3.2.接收区域：选择器，选项为：停车场、其他；',
|
||||
'3.3.停车场：必填项，选择器，选择已有停车场，接收区域为停车场时显示；',
|
||||
'3.4.停车地址：必填项，输入框，支持自定义输入，接收区域为其他时显示；',
|
||||
'',
|
||||
'4.调拨车辆清单；',
|
||||
'#以表格方式展示，反写新增调拨时的整个清单：',
|
||||
'4.1.品牌：反写新增调拨时的品牌；',
|
||||
'4.2.型号：反写新增调拨时的型号；',
|
||||
'4.3.车牌号：反写调拨信息提交时的车牌号；显示该车辆对应停车场；',
|
||||
'',
|
||||
'5.底部按钮为提交、保存、取消；',
|
||||
'5.1.提交：点击提交校验必填项；提交后，调拨车辆清单中车辆停车区域会更新至接收区域对应停车场/停车地址；',
|
||||
'5.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
|
||||
].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 () {
|
||||
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: 16,
|
||||
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(
|
||||
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 }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -1,447 +0,0 @@
|
||||
// 【重要】必须使用 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 Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Table = antd.Table;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function getInitialReceiveDate() {
|
||||
return null;
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
|
||||
|
||||
var vehicleDb = useMemo(function () {
|
||||
return [
|
||||
{ plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
// 调拨单带出：按车牌匹配的出发读数（切换车牌时同步）
|
||||
var departSnapshotByPlate = useMemo(function () {
|
||||
return {
|
||||
'粤A12345': { departMileageKm: '15230.12', departHydrogen: '28.30', h2Unit: 'MPa', departElectricKwh: '68.40' },
|
||||
'粤B11111': { departMileageKm: '8020.50', departHydrogen: '55.00', h2Unit: '%', departElectricKwh: '62.10' },
|
||||
'浙A11111': { departMileageKm: '12010.00', departHydrogen: '60.00', h2Unit: '%', departElectricKwh: '55.20' },
|
||||
'浙B22222': { departMileageKm: '15010.00', departHydrogen: '22.10', h2Unit: 'MPa', departElectricKwh: '58.00' },
|
||||
'沪A30003': { departMileageKm: '9800.00', departHydrogen: '26.00', h2Unit: 'MPa', departElectricKwh: '69.00' }
|
||||
};
|
||||
}, []);
|
||||
|
||||
var plateOptions = useMemo(function () {
|
||||
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
}, [vehicleDb]);
|
||||
|
||||
var situationState = useState({
|
||||
transferDateStr: '2026-02-20',
|
||||
departRegionText: '广东省-广州市',
|
||||
receiveRegionText: '浙江省-杭州市',
|
||||
receivePerson: '王芳',
|
||||
method: '第三方运输',
|
||||
reason: '场站资源调整，车辆调度至杭州项目点。',
|
||||
carrierName: '顺丰同城运输',
|
||||
carrierPhone: '400-123-4567',
|
||||
receiveDate: getInitialReceiveDate()
|
||||
});
|
||||
var situation = situationState[0];
|
||||
var setSituation = situationState[1];
|
||||
|
||||
var errorsState = useState({});
|
||||
var errors = errorsState[0];
|
||||
var setErrors = errorsState[1];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「接收记录」模块',
|
||||
'#面包屑：运维管理-车辆业务-调拨管理-接收记录',
|
||||
'页面采用多个卡片的方式进行展示',
|
||||
'1.调拨情况：',
|
||||
'1.1.调拨日期：显示调拨日期，格式为：YYYY-MM-DD；',
|
||||
'1.2.出发区域：显示出发区域，格式为省-市2级；',
|
||||
'1.3.接收区域：显示接收区域，格式为省-市2级；',
|
||||
'1.4.接收人：显示接收人姓名；',
|
||||
'1.5.调拨方式：显示调拨方式，选项为：第三方运输、司机驾驶；',
|
||||
'1.6.调拨原因：显示调拨原因；',
|
||||
'1.7.运输方名称：显示运输方名称；',
|
||||
'1.8.运输方联系方式：显示运输方联系方式；',
|
||||
'1.9.接收日期：日期选择器，精确至天；',
|
||||
'',
|
||||
'2.调拨车辆清单；',
|
||||
'#以列表方式展示：',
|
||||
'2.1.车牌号：显示车牌号，支持输入框模糊搜索下拉匹配对应选项；',
|
||||
'2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
|
||||
'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
|
||||
'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
|
||||
'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
|
||||
'2.6.出发里程：显示出发里程，输入框，精确至2位小数，后缀为km；',
|
||||
'2.7.接收里程：必填项，输入框，精确至2位小数，后缀为km；',
|
||||
'2.8.出发氢量：显示出发氢量，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
|
||||
'2.9.接收氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
|
||||
'2.10.出发电量：显示出发电量，输入框，精确至2位小数，后缀为kWh；',
|
||||
'2.11.接收电量：必填项，输入框，精确至2位小数，后缀为kWh；',
|
||||
'2.12.操作：无；'
|
||||
].join('\n');
|
||||
|
||||
var vehiclesState = useState([
|
||||
{
|
||||
id: 1,
|
||||
plateNo: '粤A12345',
|
||||
vehicleType: '厢式货车',
|
||||
brand: '东风',
|
||||
model: 'DFH1180',
|
||||
departParking: '天河智慧停车场',
|
||||
departMileageKm: '15230.12',
|
||||
departHydrogen: '28.30',
|
||||
h2Unit: 'MPa',
|
||||
departElectricKwh: '68.40',
|
||||
receiveMileageKm: '',
|
||||
receiveHydrogen: '',
|
||||
receiveElectricKwh: ''
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
plateNo: '浙A11111',
|
||||
vehicleType: 'SUV',
|
||||
brand: '小鹏',
|
||||
model: 'P7',
|
||||
departParking: '西湖景区停车场',
|
||||
departMileageKm: '12010.00',
|
||||
departHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
departElectricKwh: '55.20',
|
||||
receiveMileageKm: '',
|
||||
receiveHydrogen: '',
|
||||
receiveElectricKwh: ''
|
||||
}
|
||||
]);
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
function toFixed2Input(v) {
|
||||
var s = String(v === null || v === undefined ? '' : v);
|
||||
s = s.replace(/[^\d.]/g, '');
|
||||
var firstDot = s.indexOf('.');
|
||||
if (firstDot >= 0) {
|
||||
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
|
||||
}
|
||||
if (firstDot >= 0) {
|
||||
var a = s.split('.');
|
||||
s = a[0] + '.' + (a[1] || '').slice(0, 2);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
var cur = list[index] || {};
|
||||
list[index] = Object.assign({}, cur, patch);
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handlePlateChange = useCallback(function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
|
||||
var snap = departSnapshotByPlate[plateNo] || {};
|
||||
updateRow(index, {
|
||||
plateNo: plateNo,
|
||||
vehicleType: v ? v.vehicleType : '',
|
||||
brand: v ? v.brand : '',
|
||||
model: v ? v.model : '',
|
||||
departParking: v ? v.departParking : '',
|
||||
h2Unit: v ? v.h2Unit : (snap.h2Unit || ''),
|
||||
departMileageKm: snap.departMileageKm != null ? String(snap.departMileageKm) : '',
|
||||
departHydrogen: snap.departHydrogen != null ? String(snap.departHydrogen) : '',
|
||||
departElectricKwh: snap.departElectricKwh != null ? String(snap.departElectricKwh) : ''
|
||||
});
|
||||
}, [vehicleDb, departSnapshotByPlate, updateRow]);
|
||||
|
||||
function validate() {
|
||||
var e = {};
|
||||
if (!situation.receiveDate) e.receiveDate = '请选择接收日期';
|
||||
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!String(r.plateNo || '').trim()) continue;
|
||||
if (!String(r.receiveMileageKm || '').trim()) e['row_' + i + '_receiveMileageKm'] = '请输入接收里程';
|
||||
if (!String(r.receiveHydrogen || '').trim()) e['row_' + i + '_receiveHydrogen'] = '请输入接收氢量';
|
||||
if (!String(r.receiveElectricKwh || '').trim()) e['row_' + i + '_receiveElectricKwh'] = '请输入接收电量';
|
||||
}
|
||||
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}
|
||||
|
||||
var handleSubmit = useCallback(function () {
|
||||
if (!validate()) {
|
||||
message.error('请完善接收日期及车辆接收信息');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认提交接收记录？',
|
||||
content: '提交后接收数据将归档（原型）。',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
message.success('接收记录已提交（原型）');
|
||||
}
|
||||
});
|
||||
}, [situation, vehicles]);
|
||||
|
||||
var handleBack = useCallback(function () {
|
||||
message.info('返回调拨管理页（原型）');
|
||||
}, []);
|
||||
|
||||
var vehicleColumns = useMemo(function () {
|
||||
return [
|
||||
{
|
||||
title: '车牌号',
|
||||
key: 'plateNo',
|
||||
width: 130,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请输入或选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) { handlePlateChange(index, v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptions,
|
||||
filterOption: filterOption
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车辆类型',
|
||||
key: 'vehicleType',
|
||||
width: 110,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 90,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 110,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 140,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发里程',
|
||||
key: 'departMileageKm',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '接收里程'),
|
||||
key: 'receiveMileageKm',
|
||||
width: 120,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_receiveMileageKm';
|
||||
return React.createElement(Input, {
|
||||
value: r.receiveMileageKm,
|
||||
onChange: function (e) { updateRow(index, { receiveMileageKm: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发氢量',
|
||||
key: 'departHydrogen',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
var unit = r.h2Unit || '';
|
||||
return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: unit || '-' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '接收氢量'),
|
||||
key: 'receiveHydrogen',
|
||||
width: 120,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_receiveHydrogen';
|
||||
var unit = r.h2Unit || '%/MPa';
|
||||
return React.createElement(Input, {
|
||||
value: r.receiveHydrogen,
|
||||
onChange: function (e) { updateRow(index, { receiveHydrogen: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: unit,
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发电量',
|
||||
key: 'departElectricKwh',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '接收电量'),
|
||||
key: 'receiveElectricKwh',
|
||||
width: 120,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_receiveElectricKwh';
|
||||
return React.createElement(Input, {
|
||||
value: r.receiveElectricKwh,
|
||||
onChange: function (e) { updateRow(index, { receiveElectricKwh: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'kWh',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [plateOptions, errors, handlePlateChange, updateRow]);
|
||||
|
||||
return React.createElement(App, null,
|
||||
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: '调拨管理' }, { 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, { 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: situation.transferDateStr, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '出发区域'),
|
||||
React.createElement(Input, { value: situation.departRegionText, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '接收区域'),
|
||||
React.createElement(Input, { value: situation.receiveRegionText, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '接收人'),
|
||||
React.createElement(Input, { value: situation.receivePerson, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '调拨方式'),
|
||||
React.createElement(Input, { value: situation.method, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle }),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, '调拨原因'),
|
||||
React.createElement(Input.TextArea, { value: situation.reason, disabled: true, autoSize: { minRows: 2, maxRows: 4 } })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '运输方名称'),
|
||||
React.createElement(Input, { value: situation.carrierName, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
|
||||
React.createElement(Input, { value: situation.carrierPhone, disabled: true, style: controlStyle })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收日期'),
|
||||
React.createElement(DatePicker, {
|
||||
style: controlStyle,
|
||||
format: 'YYYY-MM-DD',
|
||||
placeholder: '请选择接收日期',
|
||||
value: situation.receiveDate,
|
||||
onChange: function (v) { setSituation(function (p) { return Object.assign({}, p, { receiveDate: v }); }); },
|
||||
status: errors.receiveDate ? 'error' : undefined
|
||||
}),
|
||||
errors.receiveDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveDate) : null
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1400 }
|
||||
})
|
||||
),
|
||||
|
||||
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: handleBack }, '返回')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -1,5 +1,5 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 新增
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 新增（数字化资产 ONEOS 运管平台）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
@@ -9,14 +9,14 @@ const Component = function () {
|
||||
var antd = window.antd;
|
||||
var App = antd.App;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Card = antd.Card;
|
||||
var Cascader = antd.Cascader;
|
||||
var Table = antd.Table;
|
||||
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) {
|
||||
@@ -24,13 +24,16 @@ const Component = function () {
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
|
||||
|
||||
/** 车牌可选车辆运营状态（需求：仅「可运营」） */
|
||||
var PLATE_ELIGIBLE_STATUS = '可运营';
|
||||
|
||||
var regionOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
||||
@@ -39,48 +42,51 @@ const Component = function () {
|
||||
];
|
||||
}, []);
|
||||
|
||||
// 用户表（原型：全量用户）
|
||||
var userOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '张明', label: '张明' },
|
||||
{ value: '王芳', label: '王芳' },
|
||||
{ value: '李华', label: '李华' },
|
||||
{ value: '赵强', label: '赵强' },
|
||||
{ value: '陈静', label: '陈静' }
|
||||
];
|
||||
var brandOptions = useMemo(function () {
|
||||
return ['东风', '比亚迪', '小鹏', '蔚来', '福田', '飞驰', '宇通'].map(function (b) {
|
||||
return { value: b, label: b };
|
||||
});
|
||||
}, []);
|
||||
|
||||
var methodOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '第三方运输', label: '第三方运输' },
|
||||
{ value: '司机驾驶', label: '司机驾驶' }
|
||||
];
|
||||
var modelOptionsByBrand = useMemo(function () {
|
||||
return {
|
||||
东风: ['DFH1180', 'DFH5160'],
|
||||
比亚迪: ['汉', '唐'],
|
||||
小鹏: ['P7', 'G9'],
|
||||
蔚来: ['ET5', 'ES8'],
|
||||
福田: ['BJ1180'],
|
||||
飞驰: ['FSQ4250'],
|
||||
宇通: ['ZKH4250']
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 车辆表（用于车牌选择与反写）
|
||||
/** 车辆主数据（原型）：仅运营状态为「可运营」的车牌出现在车牌下拉里 */
|
||||
var vehicleDb = useMemo(function () {
|
||||
return [
|
||||
{ plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
|
||||
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180' },
|
||||
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉' },
|
||||
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7' },
|
||||
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5' },
|
||||
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180' },
|
||||
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var plateOptions = useMemo(function () {
|
||||
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
var plateOptionsEligible = useMemo(function () {
|
||||
return vehicleDb
|
||||
.filter(function (v) {
|
||||
return v.status === PLATE_ELIGIBLE_STATUS;
|
||||
})
|
||||
.map(function (v) {
|
||||
return { value: v.plateNo, label: v.plateNo };
|
||||
});
|
||||
}, [vehicleDb]);
|
||||
|
||||
var formState = useState({
|
||||
transferDate: null,
|
||||
departRegion: undefined,
|
||||
receiveRegion: undefined,
|
||||
receivePerson: undefined,
|
||||
method: undefined,
|
||||
reason: '',
|
||||
carrierName: '',
|
||||
carrierPhone: ''
|
||||
reason: ''
|
||||
});
|
||||
var form = formState[0];
|
||||
var setForm = formState[1];
|
||||
@@ -95,70 +101,43 @@ const Component = function () {
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「新增」模块',
|
||||
'#面包屑：运维管理-车辆业务-调拨管理-新增',
|
||||
'页面采用多个卡片的方式进行展示',
|
||||
'',
|
||||
'1.调拨情况：',
|
||||
'1.1.调拨日期：必填项，日期选择器，精确至天，格式为：YYYY-MM-DD；',
|
||||
'1.1.调拨日期：必填项，日期选择器，精确至分钟，格式为：YYYY-MM-DD HH:mm；',
|
||||
'1.2.出发区域：必填项，地区选择器，支持省-市2级；',
|
||||
'1.3.接收区域：必填项，地区选择器，支持省-市2级；',
|
||||
'1.4.接收人：必填项，选择器，支持输入框模糊搜索下拉匹配对应选项，接收人取自用户表所有用户；',
|
||||
'1.5.调拨方式：必填项，选择器，默认提示：请选择调拨方式，选项为：第三方运输、司机驾驶；',
|
||||
'1.6.调拨原因：必填项，文本域，支持用户自定义输入；',
|
||||
'1.7.运输方名称：必填项，输入框，默认提示：请输入运输方名称/司机姓名；',
|
||||
'1.8.运输方联系方式：必填项，输入框，默认提示：请输入运输方/司机联系方式；',
|
||||
'1.4.调拨原因：必填项，文本域，支持用户自定义输入；',
|
||||
'',
|
||||
'2.调拨车辆清单；',
|
||||
'#以列表方式展示：',
|
||||
'2.1.车牌号：必填项，选择器，支持输入框模糊搜索下拉匹配对应选项；',
|
||||
'2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；',
|
||||
'2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；',
|
||||
'2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；',
|
||||
'2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；',
|
||||
'2.6.出发里程：必填项，输入框，精确至2位小数，后缀为km；',
|
||||
'2.7.出发氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；',
|
||||
'2.8.出发电量：必填项，输入框，精确至2位小数，后缀为kWh；',
|
||||
'2.9.操作：删除',
|
||||
'2.10.底部为新增一行，铺满整行；',
|
||||
'需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；'
|
||||
'#以表格方式展示：',
|
||||
'2.1.品牌：必填，选择器；',
|
||||
'2.2.型号：必填，选择器；',
|
||||
'2.3.车牌号：选择器，只能选择运营状态为：可运营的车辆；',
|
||||
'2.4.操作：删除；',
|
||||
'2.5.表格下方为新增一行，铺满整行；',
|
||||
'需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；',
|
||||
'',
|
||||
'3.底部按钮为提交审核、保存、取消；',
|
||||
'3.1.提交审核：点击提交审核校验必填项',
|
||||
'3.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
|
||||
].join('\n');
|
||||
|
||||
var rowIdRef = React.useRef(2);
|
||||
var vehiclesState = useState([
|
||||
{
|
||||
id: 1,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
brand: undefined,
|
||||
model: undefined,
|
||||
plateNo: undefined
|
||||
}
|
||||
]);
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
function toFixed2Input(v) {
|
||||
var s = String(v === null || v === undefined ? '' : v);
|
||||
// 仅做简单清洗：保留数字与小数点
|
||||
s = s.replace(/[^\d.]/g, '');
|
||||
// 只保留第一个小数点
|
||||
var firstDot = s.indexOf('.');
|
||||
if (firstDot >= 0) {
|
||||
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
|
||||
}
|
||||
// 最多两位小数（输入态不强制补0）
|
||||
if (firstDot >= 0) {
|
||||
var a = s.split('.');
|
||||
s = a[0] + '.' + (a[1] || '').slice(0, 2);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
var updateForm = useCallback(function (patch) {
|
||||
setForm(function (p) { return Object.assign({}, p, patch); });
|
||||
setForm(function (p) {
|
||||
return Object.assign({}, p, patch);
|
||||
});
|
||||
}, []);
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
@@ -170,32 +149,34 @@ const Component = function () {
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handlePlateChange = useCallback(function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
|
||||
updateRow(index, {
|
||||
plateNo: plateNo,
|
||||
vehicleType: v ? v.vehicleType : '',
|
||||
brand: v ? v.brand : '',
|
||||
model: v ? v.model : '',
|
||||
departParking: v ? v.departParking : '',
|
||||
h2Unit: v ? v.h2Unit : ''
|
||||
});
|
||||
}, [vehicleDb, updateRow]);
|
||||
var handlePlateChange = useCallback(
|
||||
function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) {
|
||||
return x.plateNo === plateNo;
|
||||
});
|
||||
if (v && v.status === PLATE_ELIGIBLE_STATUS) {
|
||||
updateRow(index, {
|
||||
plateNo: plateNo,
|
||||
brand: v.brand,
|
||||
model: v.model
|
||||
});
|
||||
} else {
|
||||
updateRow(index, { plateNo: plateNo });
|
||||
}
|
||||
},
|
||||
[vehicleDb, updateRow]
|
||||
);
|
||||
|
||||
var addRow = useCallback(function () {
|
||||
setVehicles(function (prev) {
|
||||
return prev.concat([{
|
||||
id: rowIdRef.current++,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
}]);
|
||||
return prev.concat([
|
||||
{
|
||||
id: rowIdRef.current++,
|
||||
brand: undefined,
|
||||
model: undefined,
|
||||
plateNo: undefined
|
||||
}
|
||||
]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -204,54 +185,48 @@ const Component = function () {
|
||||
var list = prev.slice();
|
||||
list.splice(index, 1);
|
||||
if (list.length === 0) {
|
||||
return [{
|
||||
id: rowIdRef.current++,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
}];
|
||||
return [
|
||||
{
|
||||
id: rowIdRef.current++,
|
||||
brand: undefined,
|
||||
model: undefined,
|
||||
plateNo: undefined
|
||||
}
|
||||
];
|
||||
}
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
function validate() {
|
||||
function hasValidVehicle() {
|
||||
return (vehicles || []).some(function (r) {
|
||||
return r && r.brand && r.model;
|
||||
});
|
||||
}
|
||||
|
||||
function runValidate() {
|
||||
var e = {};
|
||||
if (!form.transferDate) e.transferDate = '请选择调拨日期';
|
||||
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
|
||||
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
|
||||
if (!form.receivePerson) e.receivePerson = '请选择接收人';
|
||||
if (!form.method) e.method = '请选择调拨方式';
|
||||
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
|
||||
if (!String(form.carrierName || '').trim()) e.carrierName = '请输入运输方名称/司机姓名';
|
||||
if (!String(form.carrierPhone || '').trim()) e.carrierPhone = '请输入运输方/司机联系方式';
|
||||
|
||||
var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
|
||||
if (effectiveRows.length === 0) e.vehicleList = '请选择调拨车辆';
|
||||
if (!hasValidVehicle()) e.vehicleList = '请选择调拨车辆';
|
||||
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!String(r.plateNo || '').trim()) continue;
|
||||
if (!String(r.departMileageKm || '').trim()) e['row_' + i + '_departMileageKm'] = '请输入出发里程';
|
||||
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_departHydrogen'] = '请输入出发氢量';
|
||||
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_departElectricKwh'] = '请输入出发电量';
|
||||
if (!r.brand && !r.model && !r.plateNo) continue;
|
||||
if (!r.brand) e['row_' + i + '_brand'] = '请选择品牌';
|
||||
if (!r.model) e['row_' + i + '_model'] = '请选择型号';
|
||||
}
|
||||
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
return { ok: Object.keys(e).length === 0, err: e };
|
||||
}
|
||||
|
||||
var handleSubmitAudit = useCallback(function () {
|
||||
if (!validate()) {
|
||||
if (errors && errors.vehicleList) message.error(errors.vehicleList);
|
||||
else if (!form.transferDate) message.error('请完善必填项后再提交');
|
||||
else message.error('请完善必填项后再提交');
|
||||
var result = runValidate();
|
||||
if (!result.ok) {
|
||||
if (result.err && result.err.vehicleList) message.error(result.err.vehicleList);
|
||||
else message.error('请完善必填项');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
@@ -263,10 +238,10 @@ const Component = function () {
|
||||
message.success('已提交审核（原型）');
|
||||
}
|
||||
});
|
||||
}, [form, errors]);
|
||||
}, [form, vehicles]);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
message.info('已保存（原型，不做校验）');
|
||||
message.success('已保存至列表页（原型：不校验必填项，仅保存当前已填数据）');
|
||||
}, []);
|
||||
|
||||
var handleCancel = useCallback(function () {
|
||||
@@ -281,240 +256,202 @@ const Component = function () {
|
||||
});
|
||||
}, []);
|
||||
|
||||
var vehicleColumns = useMemo(function () {
|
||||
return [
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '车牌号'),
|
||||
key: 'plateNo',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请输入或选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) { handlePlateChange(index, v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
var vehicleColumns = useMemo(
|
||||
function () {
|
||||
return [
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '品牌'),
|
||||
key: 'brand',
|
||||
width: 160,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: r.brand,
|
||||
onChange: function (v) {
|
||||
updateRow(index, { brand: v, model: undefined, plateNo: undefined });
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: brandOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_brand'] || errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '型号'),
|
||||
key: 'model',
|
||||
width: 180,
|
||||
render: function (_, r, index) {
|
||||
var ms = (r.brand && modelOptionsByBrand[r.brand]) || [];
|
||||
var opts = ms.map(function (m) {
|
||||
return { value: m, label: m };
|
||||
});
|
||||
return React.createElement(Select, {
|
||||
placeholder: r.brand ? '请选择型号' : '请先选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: r.model,
|
||||
disabled: !r.brand,
|
||||
onChange: function (v) {
|
||||
updateRow(index, { model: v, plateNo: undefined });
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: opts,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_model'] || errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车牌号',
|
||||
key: 'plateNo',
|
||||
width: 240,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) {
|
||||
handlePlateChange(index, v);
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptionsEligible,
|
||||
filterOption: filterOption
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
render: function (_, __, index) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车辆类型',
|
||||
key: 'vehicleType',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发里程'),
|
||||
key: 'departMileageKm',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departMileageKm';
|
||||
return React.createElement(Input, {
|
||||
value: r.departMileageKm,
|
||||
onChange: function (e) { updateRow(index, { departMileageKm: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发氢量'),
|
||||
key: 'departHydrogen',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departHydrogen';
|
||||
var unit = r.h2Unit || '%/MPa';
|
||||
return React.createElement(Input, {
|
||||
value: r.departHydrogen,
|
||||
onChange: function (e) { updateRow(index, { departHydrogen: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: unit,
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发电量'),
|
||||
key: 'departElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departElectricKwh';
|
||||
return React.createElement(Input, {
|
||||
value: r.departElectricKwh,
|
||||
onChange: function (e) { updateRow(index, { departElectricKwh: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'kWh',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
render: function (_, __, index) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [plateOptions, errors, handlePlateChange, updateRow, removeRow]);
|
||||
];
|
||||
},
|
||||
[brandOptions, modelOptionsByBrand, plateOptionsEligible, errors, updateRow, handlePlateChange, removeRow]
|
||||
);
|
||||
|
||||
return React.createElement(App, null,
|
||||
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: '调拨管理' }, { title: '新增' }] }),
|
||||
return React.createElement(
|
||||
App,
|
||||
null,
|
||||
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: '调拨管理' }, { 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(
|
||||
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.65, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)
|
||||
),
|
||||
|
||||
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(
|
||||
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',
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
placeholder: '请选择调拨日期',
|
||||
value: form.transferDate,
|
||||
onChange: function (v) { updateForm({ transferDate: v }); },
|
||||
onChange: function (v) {
|
||||
updateForm({ transferDate: v });
|
||||
},
|
||||
status: errors.transferDate ? 'error' : undefined
|
||||
}),
|
||||
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择出发区域',
|
||||
placeholder: '请选择省 / 市',
|
||||
options: regionOptions,
|
||||
value: form.departRegion,
|
||||
onChange: function (v) { updateForm({ departRegion: v }); },
|
||||
onChange: function (v) {
|
||||
updateForm({ departRegion: v });
|
||||
},
|
||||
allowClear: true,
|
||||
status: errors.departRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择接收区域',
|
||||
placeholder: '请选择省 / 市',
|
||||
options: regionOptions,
|
||||
value: form.receiveRegion,
|
||||
onChange: function (v) { updateForm({ receiveRegion: v }); },
|
||||
onChange: function (v) {
|
||||
updateForm({ receiveRegion: v });
|
||||
},
|
||||
allowClear: true,
|
||||
status: errors.receiveRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择接收人',
|
||||
style: controlStyle,
|
||||
value: form.receivePerson,
|
||||
onChange: function (v) { updateForm({ receivePerson: v }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: userOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.receivePerson ? 'error' : undefined
|
||||
}),
|
||||
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨方式'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择调拨方式',
|
||||
style: controlStyle,
|
||||
value: form.method,
|
||||
onChange: function (v) { updateForm({ method: v }); },
|
||||
allowClear: true,
|
||||
options: methodOptions,
|
||||
status: errors.method ? 'error' : undefined
|
||||
}),
|
||||
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle }),
|
||||
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
|
||||
React.createElement(Input.TextArea, {
|
||||
placeholder: '请输入调拨原因',
|
||||
value: form.reason,
|
||||
onChange: function (e) { updateForm({ reason: e.target.value }); },
|
||||
onChange: function (e) {
|
||||
updateForm({ reason: e.target.value });
|
||||
},
|
||||
autoSize: { minRows: 3, maxRows: 6 },
|
||||
status: errors.reason ? 'error' : undefined
|
||||
}),
|
||||
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方名称'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方名称/司机姓名',
|
||||
value: form.carrierName,
|
||||
onChange: function (e) { updateForm({ carrierName: e.target.value }); },
|
||||
status: errors.carrierName ? 'error' : undefined
|
||||
}),
|
||||
errors.carrierName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierName) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方/司机联系方式',
|
||||
value: form.carrierPhone,
|
||||
onChange: function (e) { updateForm({ carrierPhone: e.target.value }); },
|
||||
status: errors.carrierPhone ? 'error' : undefined
|
||||
}),
|
||||
errors.carrierPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierPhone) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
React.createElement(
|
||||
Card,
|
||||
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
@@ -522,26 +459,28 @@ const Component = function () {
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1100 }
|
||||
scroll: { x: 720 }
|
||||
}),
|
||||
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
|
||||
),
|
||||
|
||||
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(
|
||||
'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: handleSubmitAudit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
@@ -549,4 +488,3 @@ const Component = function () {
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -4,298 +4,338 @@
|
||||
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 Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var Card = antd.Card;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Cascader = antd.Cascader;
|
||||
var Table = antd.Table;
|
||||
var Input = antd.Input;
|
||||
var Modal = antd.Modal;
|
||||
var Select = antd.Select;
|
||||
var Table = antd.Table;
|
||||
var message = antd.message;
|
||||
|
||||
function getInitialTransferDate() {
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function parseDateTime(s) {
|
||||
var str = String(s || '').trim();
|
||||
if (!str) return null;
|
||||
try {
|
||||
if (window.dayjs) return window.dayjs('2026-02-20');
|
||||
if (window.dayjs) return window.dayjs(str);
|
||||
} catch (e1) {}
|
||||
try {
|
||||
if (window.moment) return window.moment('2026-02-20', 'YYYY-MM-DD');
|
||||
if (window.moment) return window.moment(str, ['YYYY-MM-DD HH:mm', 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD'], true);
|
||||
} catch (e2) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
function getMockSnapshot() {
|
||||
return {
|
||||
transferDateStr: '2026-03-31 10:30',
|
||||
departRegionText: '广东省-广州市',
|
||||
receiveRegionText: '浙江省-嘉兴市',
|
||||
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
|
||||
method: '司机运输',
|
||||
transportLeader: '李建国',
|
||||
transportPhone: '13800138000',
|
||||
receivePersonName: '王芳',
|
||||
receiveTimeStr: '2026-04-01 15:20',
|
||||
receiveAreaType: '停车场',
|
||||
receiveParkingName: '西湖景区停车场',
|
||||
receiveAddress: '',
|
||||
transferVehicles: [
|
||||
{
|
||||
id: 1,
|
||||
brand: '小鹏',
|
||||
model: 'P7',
|
||||
plateNo: '浙A11111',
|
||||
departMileageKm: '12010.00',
|
||||
departHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
departElectricKwh: '55.20',
|
||||
departParking: '西湖景区停车场',
|
||||
arriveMileageKm: '12110.20',
|
||||
arriveHydrogen: '58.00',
|
||||
arriveElectricKwh: '52.30'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
brand: '蔚来',
|
||||
model: 'ET5',
|
||||
plateNo: '浙B22222',
|
||||
departMileageKm: '15010.00',
|
||||
departHydrogen: '22.10',
|
||||
h2Unit: 'MPa',
|
||||
departElectricKwh: '58.00',
|
||||
departParking: '宁波江北停车场',
|
||||
arriveMileageKm: '15120.00',
|
||||
arriveHydrogen: '21.80',
|
||||
arriveElectricKwh: '57.50'
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
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 regionOptions = useMemo(function () {
|
||||
var snapshot = useMemo(function () { return getMockSnapshot(); }, []);
|
||||
|
||||
var parkingOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
||||
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
|
||||
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
|
||||
{ value: '西湖景区停车场', label: '西湖景区停车场' },
|
||||
{ value: '宁波江北停车场', label: '宁波江北停车场' },
|
||||
{ value: '张江园区停车场', label: '张江园区停车场' },
|
||||
{ value: '天河智慧停车场', label: '天河智慧停车场' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var userOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '张明', label: '张明' },
|
||||
{ value: '王芳', label: '王芳' },
|
||||
{ value: '李华', label: '李华' },
|
||||
{ value: '赵强', label: '赵强' },
|
||||
{ value: '陈静', label: '陈静' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var methodOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '第三方运输', label: '第三方运输' },
|
||||
{ value: '司机驾驶', label: '司机驾驶' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
// 原型：从详情接口拉取的只读数据（与新增/编辑字段一致）
|
||||
var form = {
|
||||
transferDate: getInitialTransferDate(),
|
||||
departRegion: ['guangdong', 'guangzhou'],
|
||||
receiveRegion: ['zhejiang', 'hangzhou'],
|
||||
receivePerson: '王芳',
|
||||
method: '第三方运输',
|
||||
reason: '场站资源调整，车辆需从广州仓库调度至杭州项目点，保障项目运力。',
|
||||
carrierName: '顺丰同城运输',
|
||||
carrierPhone: '400-123-4567'
|
||||
};
|
||||
|
||||
var vehicles = [
|
||||
{
|
||||
id: 1,
|
||||
plateNo: '粤A12345',
|
||||
vehicleType: '厢式货车',
|
||||
brand: '东风',
|
||||
model: 'DFH1180',
|
||||
departParking: '天河智慧停车场',
|
||||
departMileageKm: '15230.12',
|
||||
departHydrogen: '28.30',
|
||||
h2Unit: 'MPa',
|
||||
departElectricKwh: '68.40'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
plateNo: '浙A11111',
|
||||
vehicleType: 'SUV',
|
||||
brand: '小鹏',
|
||||
model: 'P7',
|
||||
departParking: '西湖景区停车场',
|
||||
departMileageKm: '12010.00',
|
||||
departHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
departElectricKwh: '55.20'
|
||||
}
|
||||
];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「查看」模块',
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「查看」模块（只读）',
|
||||
'#面包屑：运维管理-车辆业务-调拨管理-查看',
|
||||
'页面布局与字段与「调拨管理-新增」一致，所有表单项均为只读，仅供查询展示。',
|
||||
'',
|
||||
'1.调拨情况：调拨日期、出发/接收区域、接收人、调拨方式、调拨原因、运输方名称、运输方联系方式 — 全部禁用不可编辑。',
|
||||
'2.调拨车辆清单：车牌号、车辆类型、品牌、型号、出发停车场、出发里程、出发氢量、出发电量 — 全部禁用；不提供新增行与删除操作。',
|
||||
'3.底部仅提供「返回」按钮，返回调拨管理列表（原型）。'
|
||||
'参照「调拨管理-接收信息-司机运输」页面结构生成查看页：',
|
||||
'1.调拨情况（只读）',
|
||||
'2.调拨信息（只读）',
|
||||
'3.接收信息（只读）',
|
||||
'4.调拨车辆清单（只读，包含到达时里程/氢量/电量）',
|
||||
'5.底部按钮仅保留「返回」。'
|
||||
].join('\n');
|
||||
|
||||
var vehicleColumns = useMemo(function () {
|
||||
return [
|
||||
{
|
||||
title: '车牌号',
|
||||
key: 'plateNo',
|
||||
width: 140,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.plateNo || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车辆类型',
|
||||
key: 'vehicleType',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.vehicleType || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking || '-', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发里程',
|
||||
key: 'departMileageKm',
|
||||
width: 140,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departMileageKm || '-', disabled: true, addonAfter: 'km' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发氢量',
|
||||
key: 'departHydrogen',
|
||||
width: 140,
|
||||
render: function (_, r) {
|
||||
var unit = r.h2Unit || '';
|
||||
return React.createElement(Input, { value: r.departHydrogen || '-', disabled: true, addonAfter: unit || '-' });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发电量',
|
||||
key: 'departElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departElectricKwh || '-', disabled: true, addonAfter: 'kWh' });
|
||||
}
|
||||
}
|
||||
{ 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 }); } },
|
||||
{ title: '出发时里程', key: 'departMileageKm', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departMileageKm || '', disabled: true, addonAfter: 'km' }); } },
|
||||
{ title: '到达时里程', key: 'arriveMileageKm', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveMileageKm || '', disabled: true, addonAfter: 'km' }); } },
|
||||
{ title: '出发时氢量', key: 'departHydrogen', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departHydrogen || '', disabled: true, addonAfter: r.h2Unit || '-' }); } },
|
||||
{ title: '到达时氢量', key: 'arriveHydrogen', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveHydrogen || '', disabled: true, addonAfter: r.h2Unit || '%' }); } },
|
||||
{ title: '出发时电量', key: 'departElectricKwh', width: 130, render: function (_, r) { return React.createElement(Input, { value: r.departElectricKwh || '', disabled: true, addonAfter: 'kWh' }); } },
|
||||
{ title: '到达时电量', key: 'arriveElectricKwh', width: 140, render: function (_, r) { return React.createElement(Input, { value: r.arriveElectricKwh || '', disabled: true, addonAfter: 'kWh' }); } }
|
||||
];
|
||||
}, []);
|
||||
|
||||
return React.createElement(App, null,
|
||||
React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
|
||||
var handleBack = useCallback(function () {
|
||||
try {
|
||||
if (window.history && window.history.length > 1) {
|
||||
window.history.back();
|
||||
return;
|
||||
}
|
||||
} catch (e) {}
|
||||
message.info('返回调拨管理列表页（原型）');
|
||||
}, []);
|
||||
|
||||
var receiveTimeVal = useMemo(function () { return parseDateTime(snapshot.receiveTimeStr); }, [snapshot.receiveTimeStr]);
|
||||
|
||||
return React.createElement(
|
||||
App,
|
||||
null,
|
||||
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: '调拨管理' }, { 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(
|
||||
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(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(
|
||||
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: 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 }, '接收时间'),
|
||||
React.createElement(DatePicker, {
|
||||
style: controlStyle,
|
||||
format: 'YYYY-MM-DD',
|
||||
value: form.transferDate,
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
placeholder: '-',
|
||||
value: receiveTimeVal,
|
||||
disabled: true,
|
||||
inputReadOnly: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '出发区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
options: regionOptions,
|
||||
value: form.departRegion,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '接收区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
options: regionOptions,
|
||||
value: form.receiveRegion,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '接收人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '-',
|
||||
style: controlStyle,
|
||||
value: form.receivePerson,
|
||||
options: userOptions,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '调拨方式'),
|
||||
React.createElement(Select, {
|
||||
style: controlStyle,
|
||||
value: form.method,
|
||||
options: methodOptions,
|
||||
disabled: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle }),
|
||||
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, '调拨原因'),
|
||||
React.createElement(Input.TextArea, {
|
||||
value: form.reason,
|
||||
value: snapshot.receiveAreaType,
|
||||
disabled: true,
|
||||
autoSize: { minRows: 3, maxRows: 6 }
|
||||
options: [{ value: '停车场', label: '停车场' }, { value: '其他', label: '其他' }]
|
||||
})
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '运输方名称'),
|
||||
React.createElement(Input, { value: form.carrierName, disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '运输方联系方式'),
|
||||
React.createElement(Input, { value: form.carrierPhone, disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle })
|
||||
snapshot.receiveAreaType === '停车场'
|
||||
? React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '停车场'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '-',
|
||||
style: controlStyle,
|
||||
value: snapshot.receiveParkingName,
|
||||
disabled: true,
|
||||
showSearch: true,
|
||||
options: parkingOptions,
|
||||
filterOption: filterOption
|
||||
})
|
||||
)
|
||||
: snapshot.receiveAreaType === '其他'
|
||||
? React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '停车地址'),
|
||||
React.createElement(Input, { style: controlStyle, value: snapshot.receiveAddress || '-', readOnly: true, style: readOnlyStyle })
|
||||
)
|
||||
: 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(
|
||||
Card,
|
||||
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
dataSource: snapshot.transferVehicles || [],
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1020 }
|
||||
scroll: { x: 'max-content' }
|
||||
})
|
||||
),
|
||||
|
||||
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, { onClick: function () { message.info('返回调拨管理页（原型）'); } }, '返回')
|
||||
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, { onClick: handleBack }, '返回')
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
@@ -1,547 +0,0 @@
|
||||
// 【重要】必须使用 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 Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Cascader = antd.Cascader;
|
||||
var Table = antd.Table;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
|
||||
function filterOption(input, option) {
|
||||
var label = (option && (option.label || option.children)) || '';
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
function getInitialTransferDate() {
|
||||
try {
|
||||
if (window.dayjs) return window.dayjs('2026-02-20');
|
||||
} catch (e1) {}
|
||||
try {
|
||||
if (window.moment) return window.moment('2026-02-20', 'YYYY-MM-DD');
|
||||
} catch (e2) {}
|
||||
return null;
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 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 reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
|
||||
|
||||
var regionOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
||||
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
|
||||
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var userOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '张明', label: '张明' },
|
||||
{ value: '王芳', label: '王芳' },
|
||||
{ value: '李华', label: '李华' },
|
||||
{ value: '赵强', label: '赵强' },
|
||||
{ value: '陈静', label: '陈静' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var methodOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '第三方运输', label: '第三方运输' },
|
||||
{ value: '司机驾驶', label: '司机驾驶' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var vehicleDb = useMemo(function () {
|
||||
return [
|
||||
{ plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var plateOptions = useMemo(function () {
|
||||
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
}, [vehicleDb]);
|
||||
|
||||
// 编辑页：从服务端拉取的已填写数据（原型用例）
|
||||
var formState = useState({
|
||||
transferDate: getInitialTransferDate(),
|
||||
departRegion: ['guangdong', 'guangzhou'],
|
||||
receiveRegion: ['zhejiang', 'hangzhou'],
|
||||
receivePerson: '王芳',
|
||||
method: '第三方运输',
|
||||
reason: '场站资源调整，车辆需从广州仓库调度至杭州项目点，保障项目运力。',
|
||||
carrierName: '顺丰同城运输',
|
||||
carrierPhone: '400-123-4567'
|
||||
});
|
||||
var form = formState[0];
|
||||
var setForm = formState[1];
|
||||
|
||||
var errorsState = useState({});
|
||||
var errors = errorsState[0];
|
||||
var setErrors = errorsState[1];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「编辑」模块',
|
||||
'#面包屑：运维管理-车辆业务-调拨管理-编辑',
|
||||
'页面布局、字段与「调拨管理-新增」一致；进入页面时从调拨单加载已保存数据，支持修改后提交审核或保存。',
|
||||
'',
|
||||
'1.调拨情况：同新增页（调拨日期、出发/接收区域、接收人、调拨方式、调拨原因、运输方名称、运输方联系方式）。',
|
||||
'2.调拨车辆清单：同新增页；至少保留一辆有效车辆方可提交审核。'
|
||||
].join('\n');
|
||||
|
||||
var rowIdRef = React.useRef(3);
|
||||
var vehiclesState = useState([
|
||||
{
|
||||
id: 1,
|
||||
plateNo: '粤A12345',
|
||||
vehicleType: '厢式货车',
|
||||
brand: '东风',
|
||||
model: 'DFH1180',
|
||||
departParking: '天河智慧停车场',
|
||||
departMileageKm: '15230.12',
|
||||
departHydrogen: '28.30',
|
||||
h2Unit: 'MPa',
|
||||
departElectricKwh: '68.40'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
plateNo: '浙A11111',
|
||||
vehicleType: 'SUV',
|
||||
brand: '小鹏',
|
||||
model: 'P7',
|
||||
departParking: '西湖景区停车场',
|
||||
departMileageKm: '12010.00',
|
||||
departHydrogen: '60.00',
|
||||
h2Unit: '%',
|
||||
departElectricKwh: '55.20'
|
||||
}
|
||||
]);
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
function toFixed2Input(v) {
|
||||
var s = String(v === null || v === undefined ? '' : v);
|
||||
s = s.replace(/[^\d.]/g, '');
|
||||
var firstDot = s.indexOf('.');
|
||||
if (firstDot >= 0) {
|
||||
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
|
||||
}
|
||||
if (firstDot >= 0) {
|
||||
var a = s.split('.');
|
||||
s = a[0] + '.' + (a[1] || '').slice(0, 2);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
var updateForm = useCallback(function (patch) {
|
||||
setForm(function (p) { return Object.assign({}, p, patch); });
|
||||
}, []);
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
var cur = list[index] || {};
|
||||
list[index] = Object.assign({}, cur, patch);
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handlePlateChange = useCallback(function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
|
||||
updateRow(index, {
|
||||
plateNo: plateNo,
|
||||
vehicleType: v ? v.vehicleType : '',
|
||||
brand: v ? v.brand : '',
|
||||
model: v ? v.model : '',
|
||||
departParking: v ? v.departParking : '',
|
||||
h2Unit: v ? v.h2Unit : ''
|
||||
});
|
||||
}, [vehicleDb, updateRow]);
|
||||
|
||||
var addRow = useCallback(function () {
|
||||
setVehicles(function (prev) {
|
||||
return prev.concat([{
|
||||
id: rowIdRef.current++,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
}]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
var removeRow = useCallback(function (index) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
list.splice(index, 1);
|
||||
if (list.length === 0) {
|
||||
return [{
|
||||
id: rowIdRef.current++,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
}];
|
||||
}
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
function validate() {
|
||||
var e = {};
|
||||
if (!form.transferDate) e.transferDate = '请选择调拨日期';
|
||||
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
|
||||
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
|
||||
if (!form.receivePerson) e.receivePerson = '请选择接收人';
|
||||
if (!form.method) e.method = '请选择调拨方式';
|
||||
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
|
||||
if (!String(form.carrierName || '').trim()) e.carrierName = '请输入运输方名称/司机姓名';
|
||||
if (!String(form.carrierPhone || '').trim()) e.carrierPhone = '请输入运输方/司机联系方式';
|
||||
|
||||
var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
|
||||
if (effectiveRows.length === 0) e.vehicleList = '请选择调拨车辆';
|
||||
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!String(r.plateNo || '').trim()) continue;
|
||||
if (!String(r.departMileageKm || '').trim()) e['row_' + i + '_departMileageKm'] = '请输入出发里程';
|
||||
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_departHydrogen'] = '请输入出发氢量';
|
||||
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_departElectricKwh'] = '请输入出发电量';
|
||||
}
|
||||
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
}
|
||||
|
||||
var handleSubmitAudit = useCallback(function () {
|
||||
if (!validate()) {
|
||||
message.error('请完善必填项后再提交');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认提交审核？',
|
||||
content: '提交后将进入审批流程（原型）。',
|
||||
okText: '提交审核',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
message.success('已提交审核（原型）');
|
||||
}
|
||||
});
|
||||
}, [form, vehicles]);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
message.info('已保存（原型，不做校验）');
|
||||
}, []);
|
||||
|
||||
var handleCancel = useCallback(function () {
|
||||
Modal.confirm({
|
||||
title: '是否确认取消',
|
||||
content: '取消将返回列表，未保存的修改将丢失（原型）。是否确认？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
message.info('返回调拨管理页（原型）');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
var vehicleColumns = useMemo(function () {
|
||||
return [
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '车牌号'),
|
||||
key: 'plateNo',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请输入或选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) { handlePlateChange(index, v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车辆类型',
|
||||
key: 'vehicleType',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发里程'),
|
||||
key: 'departMileageKm',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departMileageKm';
|
||||
return React.createElement(Input, {
|
||||
value: r.departMileageKm,
|
||||
onChange: function (e) { updateRow(index, { departMileageKm: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发氢量'),
|
||||
key: 'departHydrogen',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departHydrogen';
|
||||
var unit = r.h2Unit || '%/MPa';
|
||||
return React.createElement(Input, {
|
||||
value: r.departHydrogen,
|
||||
onChange: function (e) { updateRow(index, { departHydrogen: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: unit,
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发电量'),
|
||||
key: 'departElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departElectricKwh';
|
||||
return React.createElement(Input, {
|
||||
value: r.departElectricKwh,
|
||||
onChange: function (e) { updateRow(index, { departElectricKwh: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'kWh',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
render: function (_, __, index) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [plateOptions, errors, handlePlateChange, updateRow, removeRow]);
|
||||
|
||||
return React.createElement(App, null,
|
||||
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: '调拨管理' }, { 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, { 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: form.transferDate,
|
||||
onChange: function (v) { updateForm({ transferDate: v }); },
|
||||
status: errors.transferDate ? 'error' : undefined
|
||||
}),
|
||||
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择出发区域',
|
||||
options: regionOptions,
|
||||
value: form.departRegion,
|
||||
onChange: function (v) { updateForm({ departRegion: v }); },
|
||||
allowClear: true,
|
||||
status: errors.departRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择接收区域',
|
||||
options: regionOptions,
|
||||
value: form.receiveRegion,
|
||||
onChange: function (v) { updateForm({ receiveRegion: v }); },
|
||||
allowClear: true,
|
||||
status: errors.receiveRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择接收人',
|
||||
style: controlStyle,
|
||||
value: form.receivePerson,
|
||||
onChange: function (v) { updateForm({ receivePerson: v }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: userOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.receivePerson ? 'error' : undefined
|
||||
}),
|
||||
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨方式'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择调拨方式',
|
||||
style: controlStyle,
|
||||
value: form.method,
|
||||
onChange: function (v) { updateForm({ method: v }); },
|
||||
allowClear: true,
|
||||
options: methodOptions,
|
||||
status: errors.method ? 'error' : undefined
|
||||
}),
|
||||
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle }),
|
||||
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
|
||||
React.createElement(Input.TextArea, {
|
||||
placeholder: '请输入调拨原因',
|
||||
value: form.reason,
|
||||
onChange: function (e) { updateForm({ reason: e.target.value }); },
|
||||
autoSize: { minRows: 3, maxRows: 6 },
|
||||
status: errors.reason ? 'error' : undefined
|
||||
}),
|
||||
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方名称'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方名称/司机姓名',
|
||||
value: form.carrierName,
|
||||
onChange: function (e) { updateForm({ carrierName: e.target.value }); },
|
||||
status: errors.carrierName ? 'error' : undefined
|
||||
}),
|
||||
errors.carrierName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierName) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方/司机联系方式',
|
||||
value: form.carrierPhone,
|
||||
onChange: function (e) { updateForm({ carrierPhone: e.target.value }); },
|
||||
status: errors.carrierPhone ? 'error' : undefined
|
||||
}),
|
||||
errors.carrierPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierPhone) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle })
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1100 }
|
||||
}),
|
||||
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
|
||||
),
|
||||
|
||||
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: handleSubmitAudit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
646
web端/运维管理/车辆业务/调拨管理-调拨信息.jsx
Normal file
646
web端/运维管理/车辆业务/调拨管理-调拨信息.jsx
Normal file
@@ -0,0 +1,646 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 调拨信息（数字化资产 ONEOS 运管平台）
|
||||
|
||||
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 Input = antd.Input;
|
||||
var Modal = antd.Modal;
|
||||
var Select = antd.Select;
|
||||
var Table = antd.Table;
|
||||
var Upload = antd.Upload;
|
||||
var message = antd.message;
|
||||
|
||||
var METHOD_DRIVER = '司机运输';
|
||||
var METHOD_THIRD = '第三方运输';
|
||||
var PLATE_ELIGIBLE_STATUS = '可运营';
|
||||
|
||||
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 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 regionOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
||||
{ value: 'shanghai', label: '上海市', children: [{ value: 'shanghai', label: '上海市' }] },
|
||||
{ value: 'guangdong', label: '广东省', children: [{ value: 'guangzhou', label: '广州市' }, { value: 'shenzhen', label: '深圳市' }, { value: 'dongguan', label: '东莞市' }] }
|
||||
];
|
||||
}, []);
|
||||
|
||||
function regionValueToProvinceCityLabel(values) {
|
||||
if (!values || values.length < 2) return '';
|
||||
var i;
|
||||
var p = null;
|
||||
for (i = 0; i < regionOptions.length; i++) {
|
||||
if (regionOptions[i].value === values[0]) {
|
||||
p = regionOptions[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!p || !p.children) return '';
|
||||
var c = null;
|
||||
for (i = 0; i < p.children.length; i++) {
|
||||
if (p.children[i].value === values[1]) {
|
||||
c = p.children[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!c) return p.label;
|
||||
return p.label + '-' + c.label;
|
||||
}
|
||||
|
||||
var vehicleDb = useMemo(function () {
|
||||
return [
|
||||
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180', dashboardH2Unit: 'MPa', currentParking: '天河智慧停车场' },
|
||||
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉', dashboardH2Unit: '%', currentParking: '南山科技园停车场' },
|
||||
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7', dashboardH2Unit: '%', currentParking: '西湖景区停车场' },
|
||||
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5', dashboardH2Unit: 'MPa', currentParking: '宁波江北停车场' },
|
||||
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180', dashboardH2Unit: 'MPa', currentParking: '张江园区停车场' },
|
||||
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180', dashboardH2Unit: 'MPa', currentParking: '白云维修基地停车场' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var plateOptionsEligible = useMemo(function () {
|
||||
return vehicleDb
|
||||
.filter(function (v) {
|
||||
return v.status === PLATE_ELIGIBLE_STATUS;
|
||||
})
|
||||
.map(function (v) {
|
||||
return { value: v.plateNo, label: v.plateNo };
|
||||
});
|
||||
}, [vehicleDb]);
|
||||
|
||||
function lookupVehicle(plateNo) {
|
||||
return vehicleDb.find(function (x) {
|
||||
return x.plateNo === plateNo;
|
||||
});
|
||||
}
|
||||
|
||||
function buildVehicleRowsFromSnapshot(snap) {
|
||||
return snap.vehicles.map(function (r) {
|
||||
var v = r.plateNo ? lookupVehicle(r.plateNo) : null;
|
||||
return {
|
||||
id: r.id,
|
||||
brand: r.brand,
|
||||
model: r.model,
|
||||
plateNo: undefined,
|
||||
h2Unit: v && v.dashboardH2Unit ? v.dashboardH2Unit : '%',
|
||||
departParking: v && v.currentParking ? v.currentParking : '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
departElectricKwh: ''
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** 原型：模拟「新增调拨」提交后带入本页的快照（对接接口后由详情接口渲染） */
|
||||
var mockFromCreate = useMemo(function () {
|
||||
return {
|
||||
transferDateStr: '2026-03-31',
|
||||
departRegionValues: ['guangdong', 'guangzhou'],
|
||||
receiveRegionValues: ['zhejiang', 'jiaxing'],
|
||||
reason: '华南业务增量，需将车辆调至华东仓储节点保障运力。',
|
||||
vehicles: [
|
||||
{ id: 1, brand: '小鹏', model: 'P7', plateNo: '浙A11111' },
|
||||
{ id: 2, brand: '蔚来', model: 'ET5', plateNo: '浙B22222' }
|
||||
]
|
||||
};
|
||||
}, []);
|
||||
|
||||
var snapshotState = useState(mockFromCreate);
|
||||
var snapshot = snapshotState[0];
|
||||
|
||||
var vehiclesState = useState(function () {
|
||||
return buildVehicleRowsFromSnapshot(mockFromCreate);
|
||||
});
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
var infoState = useState({
|
||||
method: undefined,
|
||||
transportLeader: '',
|
||||
transportPhone: '',
|
||||
transportCost: '',
|
||||
receivePerson: undefined
|
||||
});
|
||||
var info = infoState[0];
|
||||
var setInfo = infoState[1];
|
||||
|
||||
var fileListState = useState([]);
|
||||
var fileList = fileListState[0];
|
||||
var setFileList = fileListState[1];
|
||||
|
||||
var errorsState = useState({});
|
||||
var errors = errorsState[0];
|
||||
var setErrors = errorsState[1];
|
||||
|
||||
var requirementModalState = useState(false);
|
||||
var requirementModalOpen = requirementModalState[0];
|
||||
var setRequirementModalOpen = requirementModalState[1];
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「调拨信息」模块',
|
||||
'',
|
||||
'1.调拨情况：',
|
||||
'1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD；',
|
||||
'1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；',
|
||||
'1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；',
|
||||
'1.4.调拨原因：反写新增调拨时的调拨原因；',
|
||||
'',
|
||||
'2.调拨信息：',
|
||||
'2.1.调拨方式：必填项，选择器，枚举值为：司机运输、第三方运输；',
|
||||
'2.2.运输负责人：必填项，输入框，支持用户自定义输入；',
|
||||
'2.3.运输方联系方式：必填项，输入框，限制为11位数字手机号格式；',
|
||||
'2.4.运输费用：必填项，输入框，支持2位小数，后缀为元，只有运输方式为第三方运输时显示；',
|
||||
'2.5.运输合同附件：选填项，按钮，文案为附件上传，点击支持本地文件上传（doc、docx、pdf格式），只有运输方式为第三方运输时显示；',
|
||||
'2.6.接收人员：必填项，选择器，选择用户表所有运维部门人员，支持输入框输入内容搜索下拉对应项；',
|
||||
'',
|
||||
'3.调拨车辆清单；',
|
||||
'#以表格方式展示，反写新增调拨时的整个清单：',
|
||||
'3.1.品牌：反写新增调拨时的品牌；',
|
||||
'3.2.型号：反写新增调拨时的型号；',
|
||||
'3.3.车牌号：必填项，选择器，只能选择该型号、同时运营状态为：可运营的车辆；如业务在新增时已填写车牌号信息，此处反写，但支持修改；',
|
||||
'3.4.出发停车场：根据车牌号，自动反写该车辆当前停车场；',
|
||||
'3.5.出发时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；',
|
||||
'3.6.出发时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；',
|
||||
'3.7.出发时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；',
|
||||
'',
|
||||
'4.底部按钮为提交审核、保存、取消；',
|
||||
'4.1.提交审核：点击提交审核校验必填项；',
|
||||
'4.2.保存：不校验必填项，只保存已填数据并保存在列表页；'
|
||||
].join('\n');
|
||||
|
||||
var methodOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: METHOD_DRIVER, label: METHOD_DRIVER },
|
||||
{ value: METHOD_THIRD, label: METHOD_THIRD }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var opsStaffOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zm', label: '张明（运维一部-现场工程师）' },
|
||||
{ value: 'wf', label: '王芳（运维二部-调度）' },
|
||||
{ value: 'lh', label: '李华（运维中心-班长）' },
|
||||
{ value: 'zq', label: '赵强（运维一部-驻场）' },
|
||||
{ value: 'cj', label: '陈静（运维三部-客服协同）' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
function toFixed2Input(v) {
|
||||
var s = String(v === null || v === undefined ? '' : v);
|
||||
s = s.replace(/[^\d.]/g, '');
|
||||
var firstDot = s.indexOf('.');
|
||||
if (firstDot >= 0) {
|
||||
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
|
||||
}
|
||||
if (firstDot >= 0) {
|
||||
var a = s.split('.');
|
||||
s = a[0] + '.' + (a[1] || '').slice(0, 2);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
function phoneDigitsOnly(v) {
|
||||
return String(v || '')
|
||||
.replace(/\D/g, '')
|
||||
.slice(0, 11);
|
||||
}
|
||||
|
||||
var updateInfo = useCallback(function (patch) {
|
||||
setInfo(function (p) {
|
||||
return Object.assign({}, p, patch);
|
||||
});
|
||||
}, []);
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
setVehicles(function (prev) {
|
||||
var list = prev.slice();
|
||||
var cur = list[index] || {};
|
||||
list[index] = Object.assign({}, cur, patch);
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handlePlateChange = useCallback(
|
||||
function (index, plateNo) {
|
||||
var v = plateNo ? lookupVehicle(plateNo) : null;
|
||||
var unit = v && v.dashboardH2Unit ? v.dashboardH2Unit : '%';
|
||||
updateRow(index, { plateNo: plateNo, h2Unit: unit, departParking: v && v.currentParking ? v.currentParking : '' });
|
||||
},
|
||||
[updateRow, vehicleDb]
|
||||
);
|
||||
|
||||
function runValidate() {
|
||||
var e = {};
|
||||
if (!info.method) e.method = '请选择调拨方式';
|
||||
if (!String(info.transportLeader || '').trim()) e.transportLeader = '请输入运输负责人姓名';
|
||||
if (!info.receivePerson) e.receivePerson = '请选择接收人员';
|
||||
|
||||
var phone = String(info.transportPhone || '').trim();
|
||||
if (!phone) e.transportPhone = '请输入运输方联系方式';
|
||||
else if (!/^\d{11}$/.test(phone)) e.transportPhone = '请输入11位数字手机号';
|
||||
|
||||
if (info.method === METHOD_THIRD) {
|
||||
if (!String(info.transportCost || '').trim()) e.transportCost = '请输入运输费用';
|
||||
}
|
||||
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!String(r.plateNo || '').trim()) e['row_' + i + '_plate'] = '请选择车牌号';
|
||||
if (info.method === METHOD_DRIVER) {
|
||||
if (!String(r.departMileageKm || '').trim()) e['row_' + i + '_mile'] = '请输入出发时里程';
|
||||
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_h2'] = '请输入出发时氢量';
|
||||
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_kwh'] = '请输入出发时电量';
|
||||
}
|
||||
}
|
||||
setErrors(e);
|
||||
return { ok: Object.keys(e).length === 0, err: e };
|
||||
}
|
||||
|
||||
var handleSubmitAudit = useCallback(function () {
|
||||
var result = runValidate();
|
||||
if (!result.ok) {
|
||||
message.error('请完善必填项');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: '确认提交审核？',
|
||||
content: '提交后将进入审批流程（原型）。',
|
||||
okText: '提交审核',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
message.success('已提交审核（原型）');
|
||||
}
|
||||
});
|
||||
}, [info, vehicles]);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
message.success('已保存至列表页（原型：不校验必填项，仅保存当前已填数据）');
|
||||
}, []);
|
||||
|
||||
var handleCancel = useCallback(function () {
|
||||
Modal.confirm({
|
||||
title: '是否确认取消',
|
||||
content: '未保存的修改将丢失，是否确认？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
message.info('返回上一页（原型）');
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
var vehicleColumns = useMemo(
|
||||
function () {
|
||||
var cols = [
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand || '', readOnly: true, style: readOnlyStyle });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 110,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model || '', readOnly: true, style: readOnlyStyle });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '车牌号'),
|
||||
key: 'plateNo',
|
||||
width: 220,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择或输入车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) {
|
||||
handlePlateChange(index, v);
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptionsEligible,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_plate'] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
cols.push({
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking || '', readOnly: true, style: readOnlyStyle, placeholder: '—' });
|
||||
}
|
||||
});
|
||||
|
||||
if (info.method === METHOD_DRIVER) {
|
||||
cols.push({
|
||||
title: React.createElement('span', null, reqStar, '出发时里程'),
|
||||
key: 'departMileageKm',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Input, {
|
||||
value: r.departMileageKm,
|
||||
onChange: function (e) {
|
||||
updateRow(index, { departMileageKm: toFixed2Input(e.target.value) });
|
||||
},
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors['row_' + index + '_mile'] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
});
|
||||
cols.push({
|
||||
title: React.createElement('span', null, reqStar, '出发时氢量'),
|
||||
key: 'departHydrogen',
|
||||
width: 130,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Input, {
|
||||
value: r.departHydrogen,
|
||||
onChange: function (e) {
|
||||
updateRow(index, { departHydrogen: toFixed2Input(e.target.value) });
|
||||
},
|
||||
placeholder: '0.00',
|
||||
addonAfter: r.h2Unit || '%',
|
||||
status: errors['row_' + index + '_h2'] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
});
|
||||
cols.push({
|
||||
title: React.createElement('span', null, reqStar, '出发时电量'),
|
||||
key: 'departElectricKwh',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Input, {
|
||||
value: r.departElectricKwh,
|
||||
onChange: function (e) {
|
||||
updateRow(index, { departElectricKwh: toFixed2Input(e.target.value) });
|
||||
},
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'kWh',
|
||||
status: errors['row_' + index + '_kwh'] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return cols;
|
||||
},
|
||||
[info.method, plateOptionsEligible, errors, handlePlateChange, updateRow]
|
||||
);
|
||||
|
||||
var departRegionText = regionValueToProvinceCityLabel(snapshot.departRegionValues);
|
||||
var receiveRegionText = regionValueToProvinceCityLabel(snapshot.receiveRegionValues);
|
||||
|
||||
return React.createElement(
|
||||
App,
|
||||
null,
|
||||
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: '调拨管理' }, { title: '调拨信息' }]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
|
||||
),
|
||||
|
||||
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(
|
||||
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, placeholder: 'YYYY-MM-DD' })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '出发区域'),
|
||||
React.createElement(Input, { value: departRegionText, readOnly: true, style: readOnlyStyle, placeholder: '省-市' })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '接收区域'),
|
||||
React.createElement(Input, { value: receiveRegionText, readOnly: true, style: readOnlyStyle, placeholder: '省-市' })
|
||||
),
|
||||
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 }, reqStar, '调拨方式'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择调拨方式',
|
||||
style: controlStyle,
|
||||
value: info.method,
|
||||
onChange: function (v) {
|
||||
updateInfo({ method: v });
|
||||
},
|
||||
allowClear: true,
|
||||
options: methodOptions,
|
||||
status: errors.method ? 'error' : undefined
|
||||
}),
|
||||
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输负责人'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输负责人姓名',
|
||||
value: info.transportLeader,
|
||||
onChange: function (e) {
|
||||
updateInfo({ transportLeader: e.target.value });
|
||||
},
|
||||
status: errors.transportLeader ? 'error' : undefined
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方联系方式',
|
||||
value: info.transportPhone,
|
||||
maxLength: 11,
|
||||
onChange: function (e) {
|
||||
updateInfo({ transportPhone: phoneDigitsOnly(e.target.value) });
|
||||
},
|
||||
status: errors.transportPhone ? 'error' : undefined
|
||||
}),
|
||||
errors.transportPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transportPhone) : null
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收人员'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择运维部门人员',
|
||||
style: controlStyle,
|
||||
value: info.receivePerson,
|
||||
onChange: function (v) {
|
||||
updateInfo({ receivePerson: v });
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: opsStaffOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.receivePerson ? 'error' : undefined
|
||||
}),
|
||||
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
|
||||
)
|
||||
),
|
||||
|
||||
info.method === METHOD_THIRD
|
||||
? React.createElement(
|
||||
'div',
|
||||
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', marginTop: 8 } },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输费用'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '0.00',
|
||||
value: info.transportCost,
|
||||
onChange: function (e) {
|
||||
updateInfo({ transportCost: toFixed2Input(e.target.value) });
|
||||
},
|
||||
addonAfter: '元',
|
||||
status: errors.transportCost ? 'error' : undefined
|
||||
}),
|
||||
errors.transportCost ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transportCost) : null
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 2' }) },
|
||||
React.createElement('div', { style: labelStyle }, '运输合同附件（选填）'),
|
||||
React.createElement(
|
||||
Upload,
|
||||
{
|
||||
accept: '.doc,.docx,.pdf',
|
||||
multiple: true,
|
||||
fileList: fileList,
|
||||
beforeUpload: function () {
|
||||
return false;
|
||||
},
|
||||
onChange: function (i) {
|
||||
setFileList(i.fileList || []);
|
||||
}
|
||||
},
|
||||
React.createElement(Button, null, '附件上传')
|
||||
),
|
||||
React.createElement('div', { style: { marginTop: 6, fontSize: 12, color: 'rgba(0,0,0,0.45)' } }, '支持 doc、docx、pdf；原型不实际上传服务器')
|
||||
)
|
||||
)
|
||||
: null
|
||||
),
|
||||
|
||||
React.createElement(
|
||||
Card,
|
||||
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 'max-content' }
|
||||
})
|
||||
),
|
||||
|
||||
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: handleSubmitAudit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -5,60 +5,50 @@
|
||||
1.2.调拨人：选择器，支持输入框输入内容模糊搜索下拉选择对应调拨人，调拨人来自用户表；
|
||||
1.3.接收日期：日期选择器，支持单输入框双日历进行开始-结束时间搜索；
|
||||
1.4.接收人：选择器，支持输入框输入内容模糊搜索下拉选择对应接收人，接收人来自用户表；
|
||||
1.5.车牌号：选择器，支持输入框输入内容模糊搜索下拉选择车牌号；
|
||||
1.6.出发区域：级联地区选择器，省-市2级；
|
||||
1.7.调拨区域：级联地区选择器，省-市2级；
|
||||
1.8.调拨方式：选择器，选项为：第三方运输、司机驾驶；
|
||||
1.9.审批状态：选择器，选项为：待提交、审批中、审批完成、审批驳回、撤回；
|
||||
1.5.出发区域：级联地区选择器，省-市2级；
|
||||
1.6.调拨区域：级联地区选择器，省-市2级；
|
||||
1.7.调拨方式：选择器，选项为：第三方运输、司机驾驶；
|
||||
1.8.审批状态：选择器，选项为：待提交、审批中、审批完成、审批驳回、撤回；
|
||||
|
||||
2.列表：分为进行中、历史记录2个tab；tab最右侧为新增、导出；
|
||||
2.1.进行中：
|
||||
2.1.1.调拨日期：显示调拨日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.1.2.出发区域：显示出发省-市，根据车辆出发时停车场区域获取；
|
||||
2.1.3.调拨人：显示调拨人姓名；
|
||||
2.1.2.业务审批状态：待提交、审批中、审批完成、驳回、撤回；
|
||||
2.1.3.运维审批状态：待提交、审批中、审批完成、驳回、撤回；
|
||||
2.1.3.出发区域：显示出发省-市，根据车辆出发时停车场区域获取；
|
||||
2.1.4.接收区域：显示接受省-市；
|
||||
2.1.5.接收人：显示接收人姓名；
|
||||
2.1.6.审批状态：待提交、审批中、审批完成、驳回、撤回；
|
||||
2.1.7.调拨方式：显示调拨方式，分为第三方运输、司机驾驶；
|
||||
2.1.8.调拨原因：显示调拨原因；
|
||||
2.1.9.车牌号：显示调拨车牌号；
|
||||
2.1.10.车辆类型：显示调拨车辆对应类型；
|
||||
2.1.11.品牌：显示调拨车辆对应品牌；
|
||||
2.1.12.型号：显示调拨车辆对应型号；
|
||||
2.1.13.运输方名称：显示调拨车辆对应运输方信息；
|
||||
2.1.14.出发里程（km）：显示调拨车辆对应出发里程；
|
||||
2.1.15.出发氢量：显示调拨车辆对应出发氢量，带单位（单位根据该型号型号参数下仪表盘单位）
|
||||
2.1.16.出发电量（kWh）：显示调拨车辆对应出发电量；
|
||||
2.1.17.出发停车场：显示调拨车辆出发停车场名称；
|
||||
2.1.18.创建日期：显示调拨申请创建日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.1.19.操作：查看、编辑、接收记录、撤回；
|
||||
2.1.19.1.查看：点击跳转调拨管理-查看页；
|
||||
2.1.19.2.编辑：点击跳转调拨管理-编辑页，只有待提交、审批驳回、撤回状态才显示编辑；
|
||||
2.1.19.3.接收记录：点击跳转调拨管理-接收记录页，只有审批状态为审批完成时才显示接收记录；
|
||||
2.1.19.4.撤回：点击进行二次确认，确认后审批状态修改为撤回，只有审批状态为审批中时才显示撤回；
|
||||
2.1.5.调拨原因：显示调拨原因；
|
||||
2.1.6.车辆数：显示调拨车辆数，点击车辆数显示气泡卡片，卡片中显示列表，列表字段为：品牌、型号、车牌号；
|
||||
2.1.7.调拨人：显示表单创建人姓名；
|
||||
2.1.8.调拨方式：显示调拨方式，分为第三方运输、司机运输；
|
||||
2.1.9.运输负责人：显示调拨车辆对应运输负责人；
|
||||
2.1.10.运输方联系方式：显示调拨车辆对应运输方联系方式；
|
||||
2.1.11.接收人员：显示接收人姓名；
|
||||
2.1.12.创建日期：显示调拨申请创建日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.1.13.操作：查看、编辑、撤回、调拨信息、接收信息；
|
||||
2.1.13.1.查看：点击跳转调拨管理-查看页；
|
||||
2.1.13.2.编辑：点击跳转调拨管理-编辑页，只有待提交、审批驳回、撤回状态才显示编辑；
|
||||
2.1.13.3.撤回：点击进行二次确认，确认后审批状态修改为撤回，只有审批状态为审批中时才显示撤回，由于该流程有两个分支工作流，在哪个流程撤回，则撤回到对应工作流前的操作状态，例如：新建并提交审核时撤回，则回退到新建，填写调拨信息并提交审核时撤回，则回退到调拨信息；
|
||||
2.1.13.4.调拨信息：新增调拨并通过审批后，显示调拨信息，由运维人员（调拨方）填写；
|
||||
2.1.13.5.接收信息：调拨信息提交并通过审批后，显示接收信息，由运维人员（接收人员）填写；
|
||||
|
||||
2.2.历史记录：
|
||||
2.2.1.调拨日期：显示调拨日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.2.出发区域：显示出发省-市，根据车辆出发时停车场区域获取；
|
||||
2.2.3.调拨人：显示调拨人姓名；
|
||||
2.2.4.接收日期：显示接收日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.2.业务审批状态：审批完成；
|
||||
2.2.3.运维审批状态：审批完成；
|
||||
2.2.4.出发区域：显示出发省-市，根据车辆出发时停车场区域获取；
|
||||
2.2.5.接收区域：显示接受省-市；
|
||||
2.2.6.接收人：显示接收人姓名；
|
||||
2.2.7.审批状态：审核完成；
|
||||
2.2.8.调拨方式：显示调拨方式，分为第三方运输、司机驾驶；
|
||||
2.2.9.调拨原因：显示调拨原因；
|
||||
2.2.10.车牌号：显示调拨车牌号；
|
||||
2.2.11.车辆类型：显示调拨车辆对应类型；
|
||||
2.2.12.品牌：显示调拨车辆对应品牌；
|
||||
2.2.13.型号：显示调拨车辆对应型号；
|
||||
2.2.14.运输方名称：显示调拨车辆对应运输方信息；
|
||||
2.2.15.出发里程（km）：显示调拨车辆对应出发里程；
|
||||
2.2.16.接收里程（km）：显示调拨车辆对应接收里程；
|
||||
2.2.17.出发氢量：显示调拨车辆对应出发氢量，带单位（单位根据该型号型号参数下仪表盘单位）；
|
||||
2.2.18.接收氢量：显示调拨车辆对应接收氢量，带单位（单位根据该型号型号参数下仪表盘单位）；
|
||||
2.2.19.出发电量（kWh）：显示调拨车辆对应出发电量；
|
||||
2.2.20.接收电量（kWh）：显示调拨车辆对应接收电量；
|
||||
2.2.21.出发停车场：显示调拨车辆出发停车场名称；
|
||||
2.2.22.创建日期：显示调拨申请创建日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.23.操作：查看；
|
||||
2.1.17.1.查看：点击跳转调拨管理-查看页；
|
||||
2.2.6.调拨原因：显示调拨原因；
|
||||
2.2.7.车辆数：显示调拨车辆数，点击车辆数显示气泡卡片，卡片中显示列表，列表字段为：品牌、型号、车牌号；
|
||||
2.2.8.调拨人：显示表单创建人姓名；
|
||||
2.2.9.调拨方式：显示调拨方式，分为第三方运输、司机运输；
|
||||
2.2.10.运输负责人：显示调拨车辆对应运输负责人；
|
||||
2.2.11.运输方联系方式：显示调拨车辆对应运输方联系方式；
|
||||
2.2.12.接收人员：显示接收人姓名；
|
||||
2.2.13.接收时间：显示接收时间，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.14.接收区域：显示接受区域，停车场或其他；
|
||||
2.2.15.停车场/停车地址：显示停车场名称或停车地址；
|
||||
2.2.16.创建日期：显示调拨申请创建日期，格式为：YYYY-MM-DD HH:MM；
|
||||
2.2.17.操作：查看；
|
||||
2.1.19.1.查看：点击跳转调拨管理-查看页，可查看直到接收信息步骤的完整页面；
|
||||
右下方为分页符，支持单页显示多少条数据；
|
||||
35
web端/需求说明/运维管理-车务管理/调拨管理-接收信息
Normal file
35
web端/需求说明/运维管理-车务管理/调拨管理-接收信息
Normal file
@@ -0,0 +1,35 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「调拨管理」「接收信息」模块
|
||||
|
||||
1.调拨情况：
|
||||
1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD；
|
||||
1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；
|
||||
1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；
|
||||
1.4.调拨原因：反写新增调拨时的调拨原因；
|
||||
|
||||
2.调拨信息：
|
||||
2.1.调拨方式：反写调拨信息提交时的调拨方式，该用例请列举调拨方式为：第三方运输；
|
||||
2.2.运输负责人：反写调拨信息提交时的运输负责人；
|
||||
2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；
|
||||
2.4.运输费用：反写调拨信息提交时的运输费用，格式为：xx.xx元；
|
||||
2.5.运输合同附件：反写调拨信息提交时的运输合同附件（例如：xxxxx公司运输合同.pdf），如未上传显示为无，此处生成一个样例数据；
|
||||
2.6.接收人员：反写调拨信息提交时的接收人员姓名；
|
||||
|
||||
|
||||
3.接收信息：
|
||||
3.1.接收时间：日期选择器，精确至天，格式：YYYY-MM-DD；
|
||||
|
||||
4.调拨车辆清单；
|
||||
#以表格方式展示，反写新增调拨时的整个清单：
|
||||
4.1.品牌：反写新增调拨时的品牌；
|
||||
4.2.型号：反写新增调拨时的型号；
|
||||
4.3.车牌号：反写调拨信息提交时的车牌号；
|
||||
4.4.出发时里程：反写调拨信息提交时的里程数，只有调拨方式为司机运输时显示；
|
||||
4.5.到达时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；
|
||||
4.6.出发时氢量：反写调拨信息提交时的氢量，只有调拨方式为司机运输时显示；
|
||||
4.7.到达时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；
|
||||
4.8.出发时电量：反写调拨信息提交时的电量，只有调拨方式为司机运输时显示；
|
||||
4.9.到达时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；
|
||||
|
||||
5.底部按钮为提交、保存、取消；
|
||||
5.1.提交：点击提交审核校验必填项；
|
||||
5.2.保存：不校验必填项，只保存已填数据并保存在列表页；
|
||||
35
web端/需求说明/运维管理-车务管理/调拨管理-接收信息-司机运输
Normal file
35
web端/需求说明/运维管理-车务管理/调拨管理-接收信息-司机运输
Normal file
@@ -0,0 +1,35 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「调拨管理」「接收信息」模块
|
||||
|
||||
1.调拨情况：
|
||||
1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD HH:MM；
|
||||
1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；
|
||||
1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；
|
||||
1.4.调拨原因：反写新增调拨时的调拨原因；
|
||||
|
||||
2.调拨信息：
|
||||
2.1.调拨方式：反写调拨信息提交时的调拨方式，该用例请列举调拨方式为：司机运输；
|
||||
2.2.运输负责人：反写调拨信息提交时的运输负责人；
|
||||
2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；
|
||||
2.6.接收人员：反写调拨信息提交时的接收人员姓名；
|
||||
|
||||
3.接收信息：
|
||||
3.1.接收时间：日期选择器，精确至天，格式：YYYY-MM-DD HH:MM；
|
||||
3.2.接收区域：选择器，选项为：停车场、其他；
|
||||
3.3.停车场：必填项，选择器，选择已有停车场，接收区域为停车场时显示；
|
||||
3.4.停车地址：必填项，输入框，支持自定义输入，接收区域为其他时显示；
|
||||
|
||||
4.调拨车辆清单；
|
||||
#以表格方式展示，反写新增调拨时的整个清单：
|
||||
4.1.品牌：反写新增调拨时的品牌；
|
||||
4.2.型号：反写新增调拨时的型号；
|
||||
4.3.车牌号：反写调拨信息提交时的车牌号；
|
||||
4.4.出发时里程：反写调拨信息提交时的里程数，只有调拨方式为司机运输时显示；
|
||||
4.5.到达时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；
|
||||
4.6.出发时氢量：反写调拨信息提交时的氢量，只有调拨方式为司机运输时显示；
|
||||
4.7.到达时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；
|
||||
4.8.出发时电量：反写调拨信息提交时的电量，只有调拨方式为司机运输时显示；
|
||||
4.9.到达时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；
|
||||
|
||||
5.底部按钮为提交、保存、取消；
|
||||
5.1.提交：点击提交审核校验必填项，提交成功后将调拨车辆最终停车区域同步到车辆列表停车场中；
|
||||
5.2.保存：不校验必填项，只保存已填数据并保存在列表页；
|
||||
28
web端/需求说明/运维管理-车务管理/调拨管理-接收信息-第三方运输
Normal file
28
web端/需求说明/运维管理-车务管理/调拨管理-接收信息-第三方运输
Normal file
@@ -0,0 +1,28 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「调拨管理」「接收信息」模块
|
||||
|
||||
1.调拨情况：
|
||||
1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD；
|
||||
1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；
|
||||
1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；
|
||||
1.4.调拨原因：反写新增调拨时的调拨原因；
|
||||
|
||||
2.调拨信息：
|
||||
2.1.调拨方式：反写调拨信息提交时的调拨方式，该用例请列举调拨方式为：第三方运输；
|
||||
2.2.运输负责人：反写调拨信息提交时的运输负责人；
|
||||
2.3.运输方联系方式：反写调拨信息提交时的运输方联系方式；
|
||||
2.4.运输费用：反写调拨信息提交时的运输费用，格式为：xx.xx元；
|
||||
2.5.运输合同附件：反写调拨信息提交时的运输合同附件（例如：xxxxx公司运输合同.pdf），如未上传显示为无，此处生成一个样例数据；
|
||||
2.6.接收人员：反写调拨信息提交时的接收人员姓名；
|
||||
|
||||
3.接收信息：
|
||||
3.1.接收时间：日期选择器，精确至天，格式：YYYY-MM-DD；
|
||||
|
||||
4.调拨车辆清单；
|
||||
#以表格方式展示，反写新增调拨时的整个清单：
|
||||
4.1.品牌：反写新增调拨时的品牌；
|
||||
4.2.型号：反写新增调拨时的型号；
|
||||
4.3.车牌号：反写调拨信息提交时的车牌号；
|
||||
|
||||
5.底部按钮为提交、保存、取消；
|
||||
5.1.提交：点击提交审核校验必填项；
|
||||
5.2.保存：不校验必填项，只保存已填数据并保存在列表页；
|
||||
@@ -1,26 +1,20 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「调拨管理」「新增」模块
|
||||
#面包屑：运维管理-车辆业务-调拨管理-新增
|
||||
页面采用多个卡片的方式进行展示
|
||||
|
||||
1.调拨情况：
|
||||
1.1.调拨日期：必填项，日期选择器，精确至天，格式为：YYYY-MM-DD；
|
||||
1.2.出发区域：必填项，地区选择器，支持省-市2级；
|
||||
1.3.接收区域：必填项，地区选择器，支持省-市2级；
|
||||
1.4.接收人：必填项，选择器，支持输入框模糊搜索下拉匹配对应选项，接收人取自用户表所有用户；
|
||||
1.5.调拨方式：必填项，选择器，默认提示：请选择调拨方式，选项为：第三方运输、司机驾驶；
|
||||
1.6.调拨原因：必填项，文本域，支持用户自定义输入；
|
||||
1.7.运输方名称：必填项，输入框，默认提示：请输入运输方名称/司机姓名；
|
||||
1.8.运输方联系方式：必填项，输入框，默认提示：请输入运输方/司机联系方式；
|
||||
1.4.调拨原因：必填项，文本域，支持用户自定义输入；
|
||||
|
||||
2.调拨车辆清单；
|
||||
#以列表方式展示：
|
||||
2.1.车牌号：必填项，选择器，支持输入框模糊搜索下拉匹配对应选项；
|
||||
2.2.车辆类型：根据所选车辆类型自动反写，默认提示为请先选择车辆；
|
||||
2.3.品牌：根据所选车辆品牌自动反写，默认提示为请先选择车辆；
|
||||
2.4.型号：根据所选车辆型号自动反写，默认提示为请先选择车辆；
|
||||
2.5.出发停车场：根据所选车辆出发时停车场自动反写，默认提示为请先选择车辆；
|
||||
2.6.出发里程：必填项，输入框，精确至2位小数，后缀为km；
|
||||
2.7.出发氢量：必填项，输入框，精确至2位小数，后缀为%或MPa，根据所选车辆型号中获取；
|
||||
2.8.出发电量：必填项，输入框，精确至2位小数，后缀为kWh；
|
||||
2.9.操作：删除
|
||||
2.10.底部为新增一行，铺满整行；
|
||||
需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；
|
||||
#以表格方式展示：
|
||||
2.1.品牌：必填，选择器；
|
||||
2.2.型号：必填，选择器；
|
||||
2.3.车牌号：选择器，只能选择运营状态为：可运营的车辆；
|
||||
2.4.操作：删除；
|
||||
2.5.表格下方为新增一行，铺满整行；
|
||||
需要至少提交一辆车才能完成调拨，否则提交审核时提示：请选择调拨车辆；
|
||||
|
||||
3.底部按钮为提交审核、保存、取消；
|
||||
3.1.提交审核：点击提交审核校验必填项
|
||||
3.2.保存：不校验必填项，只保存已填数据并保存在列表页；
|
||||
|
||||
29
web端/需求说明/运维管理-车务管理/调拨管理-调拨信息
Normal file
29
web端/需求说明/运维管理-车务管理/调拨管理-调拨信息
Normal file
@@ -0,0 +1,29 @@
|
||||
一个「数字化资产ONEOS运管平台」中的「调拨管理」「调拨信息」模块
|
||||
|
||||
1.调拨情况：
|
||||
1.1.调拨日期：反写新增调拨时的调拨日期，格式为：YYYY-MM-DD；
|
||||
1.2.出发区域：反写新增调拨时的出发区域，格式为：省-市；
|
||||
1.3.接收区域：反写新增调拨时的接收区域，格式为：省-市；
|
||||
1.4.调拨原因：反写新增调拨时的调拨原因；
|
||||
|
||||
2.调拨信息：
|
||||
2.1.调拨方式：必填项，选择器，枚举值为：司机运输、第三方运输；
|
||||
2.2.运输负责人：必填项，输入框，支持用户自定义输入；
|
||||
2.3.运输方联系方式：必填项，输入框，限制为11位数字手机号格式；
|
||||
2.4.运输费用：必填项，输入框，支持2位小数，后缀为元，只有运输方式为第三方运输时显示；
|
||||
2.5.运输合同附件：选填项，按钮，文案为附件上传，点击支持本地文件上传（doc、docx、pdf格式），只有运输方式为第三方运输时显示；
|
||||
2.6.接收人员：必填项，选择器，选择用户表所有运维部门人员，支持输入框输入内容搜索下拉对应项；
|
||||
|
||||
3.调拨车辆清单；
|
||||
#以表格方式展示，反写新增调拨时的整个清单：
|
||||
3.1.品牌：反写新增调拨时的品牌；
|
||||
3.2.型号：反写新增调拨时的型号；
|
||||
3.3.车牌号：必填项，选择器，只能选择运营状态为：可运营的车辆，如业务在新增时已填写车牌号信息，此处反写，但支持修改；
|
||||
3.4.出发停车场：根据车牌号，自动反写该车辆当前停车场；
|
||||
3.5.出发时里程：必填项，输入框，支持2位小数，后缀为km，只有调拨方式为司机运输时显示；
|
||||
3.6.出发时氢量：必填项，输入框，支持2位小数，后缀为%或MPa（取自对应车辆该型号对应型号参数下仪表盘单位），只有调拨方式为司机运输时显示；
|
||||
3.7.出发时电量：必填项，输入框，支持2位小数，后缀为kWh，只有调拨方式为司机运输时显示；
|
||||
|
||||
4.底部按钮为提交审核、保存、取消；
|
||||
4.1.提交审核：点击提交审核校验必填项；
|
||||
4.2.保存：不校验必填项，只保存已填数据并保存在列表页；
|
||||
Reference in New Issue
Block a user