feat(web): 同步当前原型页与工具配置改动
统一提交当前工作区内的页面原型调整、新增运维相关页面以及本地工具配置目录变更，便于整体同步到远端环境继续联调与演示。 Made-with: Cursor
This commit is contained in:
王冕
@@ -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('取消'); } }, '取消'))
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user