458 lines
59 KiB
JavaScript
458 lines
59 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名 - Axhub 产品原型
|
||
// 车辆租赁合同 - 变更为三方合同模块（从原合同反写，增加丙方客户选择，IE11+ 兼容，采用 antd）
|
||
|
||
const Component = function() {
|
||
var antd = window.antd;
|
||
var Input = antd.Input;
|
||
var Select = antd.Select;
|
||
var Button = antd.Button;
|
||
var message = antd.message;
|
||
var Option = Select.Option;
|
||
var FormItem = (function() {
|
||
return function FormItemComp(props) {
|
||
var colStyle = props.fullWidth ? { flex: '0 0 100%', marginBottom: 8 } : { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 };
|
||
return React.createElement('div', { style: colStyle },
|
||
React.createElement('label', { style: { display: 'block', marginBottom: 6, color: '#333' } }, props.required ? React.createElement('span', { style: { color: '#ff4d4f', marginRight: 4 } }, '*') : null, props.label),
|
||
props.children,
|
||
props.error ? React.createElement('div', { style: { color: '#ff4d4f', fontSize: 12, marginTop: 4 } }, props.error) : null
|
||
);
|
||
};
|
||
})();
|
||
|
||
var customerList = [
|
||
{ id: '1', name: '嘉兴某某物流有限公司', creditCode: '91330400MA2XXXXX1', address: '浙江省嘉兴市南湖区科技大道1号', contact: '张三', phone: '13800138001', email: 'zhangsan@example.com', companyName: '嘉兴某某物流有限公司', companyPhone: '0571-88888888', mailingAddress: '浙江省嘉兴市南湖区科技大道1号', bank: '中国工商银行嘉兴分行', bankAccount: '6222021234567890123', taxId: '91330400MA2XXXXX1' },
|
||
{ id: '2', name: '上海某某运输公司', creditCode: '91310000MA2XXXXX2', address: '上海市浦东新区张江高科技园区', contact: '李四', phone: '13800138002', email: 'lisi@example.com', companyName: '上海某某运输公司', companyPhone: '021-66666666', mailingAddress: '上海市浦东新区张江高科技园区', bank: '中国建设银行上海分行', bankAccount: '6217001234567890123', taxId: '91310000MA2XXXXX2' },
|
||
{ id: '3', name: '杭州某某供应链有限公司', creditCode: '91330100MA2YYYYY2', address: '浙江省杭州市余杭区未来科技城', contact: '李四', phone: '13800138002', email: 'lisi@example.com', companyName: '杭州某某供应链有限公司', companyPhone: '0571-99999999', mailingAddress: '浙江省杭州市余杭区未来科技城', bank: '中国农业银行杭州分行', bankAccount: '6228481234567890123', taxId: '91330100MA2YYYYY2' }
|
||
];
|
||
var deptList = [{ id: 'YW1', name: '业务1部', owners: ['张经理', '李专员', '王专员'] }, { id: 'YW2', name: '业务2部', owners: ['赵经理', '钱专员'] }, { id: 'YW3', name: '业务3部', owners: ['孙经理', '周专员'] }];
|
||
var orgList = ['嘉兴羚牛', '上海羚牛', '广东羚牛'];
|
||
var regionList = [
|
||
{ province: '浙江省', cities: ['杭州市', '宁波市', '嘉兴市', '湖州市'] },
|
||
{ province: '上海市', cities: ['上海市'] },
|
||
{ province: '广东省', cities: ['广州市', '深圳市', '东莞市'] }
|
||
];
|
||
var feeTemplates = ['标准费用模板A', '标准费用模板B', '定制费用模板C'];
|
||
var feeTemplateCertFees = [{ project: '补办行驶证', standard: '50元/次', serviceFee: '20' }, { project: '补办驾驶证', standard: '30元/次', serviceFee: '10' }, { project: '补办牌照', standard: '100元/次', serviceFee: '50' }];
|
||
var feeTemplatePenaltyFees = [{ project: '提前退车违约金', standard: '月租金×1', serviceFee: '0' }, { project: '违章处理违约金', standard: '按实际发生', serviceFee: '50' }];
|
||
var feeTemplateConsumables = [{ category: '轮胎', part: '前轮', partName: '轮胎A型', qty: 1, feeDetail: '500.00' }, { category: '易损件', part: '雨刮', partName: '雨刮片', qty: 2, feeDetail: '80.00' }];
|
||
var feeTemplateOtherFees = [{ project: '上门送车费', standard: '100元/次', serviceFee: '50' }, { project: '上门收车费', standard: '100元/次', serviceFee: '50' }, { project: '清洗费', standard: '80元/次', serviceFee: '30' }];
|
||
|
||
var originalContractCode = 'JXZL20260216YW101235A';
|
||
var prevContractSample = {
|
||
customerId: '1',
|
||
businessDept: 'YW1',
|
||
businessOwner: '张经理',
|
||
projectName: '嘉兴氢能运输项目',
|
||
contractType: '正式合同',
|
||
effectiveDate: '2026-02-16',
|
||
paymentMethod: '预付',
|
||
endDate: '2027-02-16',
|
||
paymentPeriod: '1',
|
||
signingCompany: '嘉兴羚牛',
|
||
deliveryProvince: '浙江省',
|
||
deliveryCity: '嘉兴市',
|
||
deliveryLocation: '嘉兴市南湖区科技大道1号',
|
||
remarks: '',
|
||
authorizedList: [{ name: '张三', phone: '13800138001', idCard: '330102199001011234' }],
|
||
rentalOrders: [
|
||
{ brand: '品牌A', model: '型号A1', plateNo: '浙A10001', vin: 'L1234567890ABCDEF', monthRent: '8000', serviceFee: '500', deposit: '10000', remark: '' },
|
||
{ brand: '品牌A', model: '型号A2', plateNo: '浙B20002', vin: 'L2234567890ABCDEF', monthRent: '8000', serviceFee: '500', deposit: '10000', remark: '' }
|
||
],
|
||
hydrogenBearer: '客户',
|
||
hydrogenPaymentMethod: '预付',
|
||
hydrogenPrepay: '5000',
|
||
returnHydrogenPrice: '80',
|
||
feeTemplate: '标准费用模板A',
|
||
billingMethod: '按自然月结算'
|
||
};
|
||
var prevCustomer = customerList.find(function(c) { return c.id === prevContractSample.customerId; }) || null;
|
||
|
||
var selectedCustomer = React.useState(prevCustomer)[0];
|
||
var setSelectedCustomer = React.useState(prevCustomer)[1];
|
||
var cs4 = React.useState(prevContractSample.businessDept);
|
||
var businessDept = cs4[0];
|
||
var setBusinessDept = cs4[1];
|
||
var cs5 = React.useState(prevContractSample.businessOwner);
|
||
var businessOwner = cs5[0];
|
||
|
||
var thirdPartyCustomer = React.useState(null)[0];
|
||
var setThirdPartyCustomer = React.useState(null)[1];
|
||
var tpDeptState = React.useState(prevContractSample.businessDept);
|
||
var thirdPartyDept = tpDeptState[0];
|
||
var setThirdPartyDept = tpDeptState[1];
|
||
var tpOwnerState = React.useState(prevContractSample.businessOwner);
|
||
var thirdPartyOwner = tpOwnerState[0];
|
||
var setThirdPartyOwner = tpOwnerState[1];
|
||
var thirdPartyOwnerFocusError = React.useState('')[0];
|
||
var setThirdPartyOwnerFocusError = React.useState('')[1];
|
||
|
||
var bs1 = React.useState(prevContractSample.projectName);
|
||
var projectName = bs1[0];
|
||
var setProjectName = bs1[1];
|
||
var bs6 = React.useState(prevContractSample.endDate);
|
||
var endDate = bs6[0];
|
||
var setEndDate = bs6[1];
|
||
var contractOriginalRef = React.useRef(null);
|
||
var csContractOriginal = React.useState([
|
||
{ name: '租赁合同-原件.pdf', size: '1.2 MB', uploadTime: '2026-02-16 14:30', isOriginal: true },
|
||
{ name: '租赁合同-补充协议.pdf', size: '0.6 MB', uploadTime: '2026-02-16 14:35', isOriginal: true }
|
||
]);
|
||
var contractOriginalFiles = csContractOriginal[0];
|
||
var setContractOriginalFiles = csContractOriginal[1];
|
||
|
||
var cc1State = React.useState(false);
|
||
var cc1 = cc1State[0];
|
||
var setCc1 = cc1State[1];
|
||
var cc1bState = React.useState(false);
|
||
var cc1b = cc1bState[0];
|
||
var setCc1b = cc1bState[1];
|
||
var cc2State = React.useState(false);
|
||
var cc2 = cc2State[0];
|
||
var setCc2 = cc2State[1];
|
||
var cc3State = React.useState(false);
|
||
var cc3 = cc3State[0];
|
||
var setCc3 = cc3State[1];
|
||
var cc4State = React.useState(false);
|
||
var cc4 = cc4State[0];
|
||
var setCc4 = cc4State[1];
|
||
var cc5State = React.useState(false);
|
||
var cc5 = cc5State[0];
|
||
var setCc5 = cc5State[1];
|
||
var cc6State = React.useState(false);
|
||
var cc6 = cc6State[0];
|
||
var setCc6 = cc6State[1];
|
||
var reqSpecState = React.useState(false);
|
||
var reqSpecOpen = reqSpecState[0];
|
||
var setReqSpecOpen = reqSpecState[1];
|
||
var cancelConfirmState = React.useState(false);
|
||
var cancelConfirmOpen = cancelConfirmState[0];
|
||
var setCancelConfirmOpen = cancelConfirmState[1];
|
||
var editedState = React.useState(false);
|
||
var edited = editedState[0];
|
||
var setEdited = editedState[1];
|
||
var formErrorsState = React.useState({});
|
||
var formErrors = formErrorsState[0];
|
||
var setFormErrors = formErrorsState[1];
|
||
|
||
var currentDept = deptList.find(function(d) { return d.id === businessDept; });
|
||
var thirdPartyDeptObj = deptList.find(function(d) { return d.id === thirdPartyDept; });
|
||
var thirdPartyOwnerOptions = thirdPartyDeptObj ? thirdPartyDeptObj.owners : [];
|
||
|
||
var contractCodeDisplay = originalContractCode + '（变更为三方合同）';
|
||
var mainVehicleModelsDisplay = '型号A1、型号A2';
|
||
var deliveryRegionDisplay = prevContractSample.deliveryProvince + ' / ' + prevContractSample.deliveryCity;
|
||
var rentalTotalVehicles = prevContractSample.rentalOrders.length;
|
||
var rentalTotalRentService = prevContractSample.rentalOrders.reduce(function(s, r) { return s + (parseFloat(r.monthRent) || 0) + (parseFloat(r.serviceFee) || 0); }, 0);
|
||
var rentalTotalDeposit = prevContractSample.rentalOrders.reduce(function(s, r) { return s + (parseFloat(r.deposit) || 0); }, 0);
|
||
var rentalTotalHydrogen = prevContractSample.hydrogenPaymentMethod === '预付' && prevContractSample.hydrogenBearer === '客户' ? (parseFloat(prevContractSample.hydrogenPrepay) || 0) : 0;
|
||
|
||
var selectThirdPartyCustomer = function(c) {
|
||
setEdited(true);
|
||
setThirdPartyCustomer(c);
|
||
};
|
||
var handleThirdPartyOwnerFocus = function() {
|
||
if (!thirdPartyDept) setThirdPartyOwnerFocusError('请先选择业务部门');
|
||
else setThirdPartyOwnerFocusError('');
|
||
};
|
||
var scrollToCard = function(id) {
|
||
var el = document.getElementById(id);
|
||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
};
|
||
var pad2 = function(n) {
|
||
var s = String(n);
|
||
return s.length === 1 ? ('0' + s) : s;
|
||
};
|
||
var addContractOriginalFiles = function(fileList) {
|
||
if (!fileList || !fileList.length) return;
|
||
setEdited(true);
|
||
setContractOriginalFiles(function(prev) {
|
||
var next = (prev || []).slice();
|
||
for (var i = 0; i < fileList.length; i++) {
|
||
var f = fileList[i];
|
||
if (!f) continue;
|
||
var sizeDisplay = f.size >= 1024 * 1024 ? (f.size / 1024 / 1024).toFixed(1) + ' MB' : (f.size / 1024).toFixed(1) + ' KB';
|
||
var now = window.moment ? window.moment() : new Date();
|
||
var uploadTimeStr = window.moment ? now.format('YYYY-MM-DD HH:mm') : (now.getFullYear() + '-' + pad2(now.getMonth() + 1) + '-' + pad2(now.getDate()) + ' ' + pad2(now.getHours()) + ':' + pad2(now.getMinutes()));
|
||
next.push({ name: f.name, file: f, size: sizeDisplay, uploadTime: uploadTimeStr, isOriginal: false });
|
||
}
|
||
return next;
|
||
});
|
||
};
|
||
var removeContractOriginalFile = function(index) {
|
||
var f = contractOriginalFiles && contractOriginalFiles[index];
|
||
if (f && f.isOriginal) return;
|
||
setEdited(true);
|
||
setContractOriginalFiles(function(prev) {
|
||
var next = (prev || []).slice();
|
||
next.splice(index, 1);
|
||
return next;
|
||
});
|
||
};
|
||
var openContractOriginalFile = function(index) {
|
||
var f = contractOriginalFiles && contractOriginalFiles[index];
|
||
if (!f) return;
|
||
if (f.file) {
|
||
var url = URL.createObjectURL(f.file);
|
||
window.open(url);
|
||
return;
|
||
}
|
||
message.info('原合同反写附件（原型），暂无可预览源文件');
|
||
};
|
||
|
||
var validateSubmitAndReview = function() {
|
||
var errs = {};
|
||
if (!thirdPartyCustomer) errs.thirdPartyCustomer = '请选择丙方客户';
|
||
if (!thirdPartyDept) errs.thirdPartyDept = '请选择丙方业务部门';
|
||
if (!thirdPartyOwner) errs.thirdPartyOwner = '请选择丙方业务负责人';
|
||
if (!contractOriginalFiles || contractOriginalFiles.length === 0) errs.contractOriginal = '请上传合同原件';
|
||
setFormErrors(errs);
|
||
if (Object.keys(errs).length > 0) {
|
||
setCc1(false); setCc1b(false); setCc2(false); setCc3(false); setCc4(false); setCc5(false); setCc6(false);
|
||
var firstId = errs.contractOriginal ? 'card-contract' : 'card-third-party';
|
||
setTimeout(function() { var el = document.getElementById(firstId); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100);
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
var styles = {
|
||
page: { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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 },
|
||
cardBody: { padding: '20px 24px' },
|
||
formRow: { display: 'flex', flexWrap: 'wrap', marginBottom: 16 },
|
||
formCol: { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 },
|
||
formColFull: { flex: '0 0 100%', marginBottom: 8 },
|
||
label: { display: 'block', marginBottom: 6, color: '#333' },
|
||
inputDisabled: { backgroundColor: '#f5f5f5', color: '#666', cursor: 'default', border: '1px solid #d9d9d9', borderRadius: 4, padding: '8px 12px', width: '100%', fontSize: 14 },
|
||
summaryList: { marginBottom: 16, display: 'flex', flexWrap: 'wrap', gap: 16 },
|
||
summaryListItem: { flex: '0 0 calc(50% - 8px)', display: 'flex', alignItems: 'center', padding: '12px 16px', border: '1px solid #e8e8e8', borderRadius: 4, backgroundColor: '#fafafa', fontSize: 14, boxSizing: 'border-box' },
|
||
summaryListLabel: { flex: '0 0 140px', color: '#666' },
|
||
summaryListValue: { flex: 1, fontWeight: 600, color: '#333' },
|
||
rentalTable: { width: '100%', borderCollapse: 'collapse', fontSize: 13 },
|
||
rentalTh: { padding: '10px 8px', textAlign: 'left', borderBottom: '1px solid #e8e8e8', backgroundColor: '#fafafa', fontWeight: 600 },
|
||
rentalTd: { padding: '8px', borderBottom: '1px solid #f0f0f0', verticalAlign: 'middle' },
|
||
rentalInputDisabled: { backgroundColor: '#f5f5f5', color: '#666', border: '1px solid #e8e8e8', padding: '6px 10px', borderRadius: 4, width: '100%', fontSize: 13 },
|
||
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 },
|
||
modalMask: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.45)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center' },
|
||
modalBox: { backgroundColor: '#fff', borderRadius: 8, width: '90%', maxWidth: 720, maxHeight: '85vh', overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 4px 20px rgba(0,0,0,0.15)' },
|
||
modalHeader: { padding: '16px 20px', borderBottom: '1px solid #f0f0f0', fontSize: 16, fontWeight: 600 },
|
||
modalBody: { padding: 20, overflow: 'auto', flex: 1 },
|
||
feeSectionTitle: { fontSize: 15, fontWeight: 600, color: '#333', marginTop: 20, marginBottom: 10 },
|
||
feeSectionTitleFirst: { marginTop: 0 }
|
||
};
|
||
|
||
var CardBlock = function(props) {
|
||
return React.createElement('div', { id: props.id, style: styles.card },
|
||
React.createElement('div', { style: styles.cardHeader, onClick: function() { props.setCollapsed(!props.collapsed); } },
|
||
React.createElement('span', { style: styles.cardTitle }, props.title),
|
||
React.createElement('span', { style: styles.cardToggle }, props.collapsed ? '展开' : '收起')
|
||
),
|
||
!props.collapsed ? React.createElement('div', { style: styles.cardBody }, props.children) : null
|
||
);
|
||
};
|
||
|
||
var customerFields = React.createElement('div', { style: styles.formRow },
|
||
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.name : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户统一信用代码' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.creditCode : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户地址' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.address : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户联系人' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.contact : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户电话' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.phone : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户电子邮箱' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.email : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '企业名称' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.companyName : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '企业电话' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.companyPhone : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '邮寄地址' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.mailingAddress : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '开户银行' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.bank : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '银行账号' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.bankAccount : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '纳税人识别号' }, React.createElement(Input, { value: selectedCustomer ? selectedCustomer.taxId : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '业务部门' }, React.createElement(Input, { value: currentDept ? currentDept.name : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '业务负责人' }, React.createElement(Input, { value: businessOwner || '', disabled: true, style: { width: '100%' } }))
|
||
);
|
||
|
||
var thirdPartyOptions = customerList.filter(function(c) { return !selectedCustomer || c.id !== selectedCustomer.id; }).map(function(c) { return React.createElement(Option, { key: c.id, value: c.id }, c.name); });
|
||
var thirdPartyCustomerFields = React.createElement('div', { style: styles.formRow },
|
||
React.createElement(FormItem, { label: '客户名称', required: true, error: formErrors.thirdPartyCustomer }, React.createElement(Select, { placeholder: '请选择或输入搜索丙方客户（只显示已审核客户）', style: { width: '100%' }, value: thirdPartyCustomer ? thirdPartyCustomer.id : undefined, onChange: function(id) { var c = customerList.find(function(x) { return x.id === id; }); selectThirdPartyCustomer(c || null); }, showSearch: true, allowClear: true, filterOption: function(input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }, status: formErrors.thirdPartyCustomer ? 'error' : undefined }, thirdPartyOptions)),
|
||
React.createElement(FormItem, { label: '客户统一信用代码' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.creditCode : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户地址' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.address : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户联系人' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.contact : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户电话' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.phone : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '客户电子邮箱' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.email : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '企业名称' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.companyName : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '企业电话' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.companyPhone : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '邮寄地址' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.mailingAddress : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '开户银行' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.bank : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '银行账号' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.bankAccount : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '纳税人识别号' }, React.createElement(Input, { value: thirdPartyCustomer ? thirdPartyCustomer.taxId : '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '业务部门', required: true, error: formErrors.thirdPartyDept }, React.createElement(Select, { placeholder: '请选择业务部门', style: { width: '100%' }, value: thirdPartyDept || undefined, onChange: function(v) { setEdited(true); setThirdPartyDept(v || ''); setThirdPartyOwner(''); }, status: formErrors.thirdPartyDept ? 'error' : undefined }, deptList.map(function(d, i) { return React.createElement(Option, { key: i, value: d.id }, d.name); }))),
|
||
React.createElement(FormItem, { label: '业务负责人', required: true, error: formErrors.thirdPartyOwner || thirdPartyOwnerFocusError }, React.createElement(Select, { placeholder: thirdPartyDept ? '请选择' : '请先选择业务部门', style: { width: '100%' }, value: thirdPartyOwner || undefined, onChange: function(v) { setEdited(true); setThirdPartyOwner(v || ''); setThirdPartyOwnerFocusError(''); }, onFocus: handleThirdPartyOwnerFocus, onBlur: function() { setThirdPartyOwnerFocusError(''); }, disabled: !thirdPartyDept, status: (formErrors.thirdPartyOwner || thirdPartyOwnerFocusError) ? 'error' : undefined }, thirdPartyOwnerOptions.map(function(o, i) { return React.createElement(Option, { key: i, value: o }, o); })))
|
||
);
|
||
|
||
var contractFormRow1 = React.createElement('div', { style: styles.formRow },
|
||
React.createElement(FormItem, { label: '项目名称' }, React.createElement(Input, { value: projectName, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: contractCodeDisplay, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '合同类型' }, React.createElement(Input, { value: prevContractSample.contractType, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '生效日期' }, React.createElement(Input, { value: prevContractSample.effectiveDate, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '付款方式' }, React.createElement(Input, { value: prevContractSample.paymentMethod, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '主要车型' }, React.createElement('div', { style: { padding: '8px 12px', minHeight: 36, border: '1px solid #d9d9d9', borderRadius: 4, backgroundColor: '#f5f5f5', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' } }, mainVehicleModelsDisplay ? mainVehicleModelsDisplay.split('、').map(function(m, i) { return React.createElement('span', { key: i, style: styles.tag }, m); }) : '—')),
|
||
React.createElement(FormItem, { label: '结束日期' }, React.createElement(Input, { value: endDate || '', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '付款周期' }, React.createElement(Input, { value: prevContractSample.paymentPeriod + '个月', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '签约公司' }, React.createElement(Input, { value: prevContractSample.signingCompany, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '交车区域' }, React.createElement(Input, { value: deliveryRegionDisplay, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '交车地点' }, React.createElement(Input, { value: prevContractSample.deliveryLocation, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal, fullWidth: true },
|
||
React.createElement('div', null,
|
||
React.createElement('div', { style: { color: '#999', fontSize: 12, marginBottom: 8 } }, '显示原合同附件，支持多个附件上传（doc/docx/pdf）'),
|
||
contractOriginalFiles && contractOriginalFiles.length
|
||
? React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 12 } },
|
||
contractOriginalFiles.map(function(f, fi) {
|
||
return React.createElement('div', { key: fi, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', padding: '8px 12px', border: '1px solid #f0f0f0', borderRadius: 6, backgroundColor: '#fafafa' } },
|
||
React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
|
||
React.createElement('a', { href: '#', style: { color: '#1890ff' }, onClick: function(e) { e.preventDefault(); openContractOriginalFile(fi); } }, f.name),
|
||
React.createElement('span', { style: { color: '#999', fontSize: 12 } }, (f.size ? f.size : '—') + ' · ' + (f.uploadTime ? f.uploadTime : '—'))
|
||
),
|
||
f.isOriginal ? null : React.createElement(Button, { type: 'link', danger: true, onClick: function() { removeContractOriginalFile(fi); } }, '删除')
|
||
);
|
||
})
|
||
)
|
||
: null,
|
||
React.createElement('input', { ref: contractOriginalRef, type: 'file', multiple: true, accept: '.doc,.docx,.pdf', style: { display: 'none' }, onChange: function(e) {
|
||
var files = e.target.files ? Array.prototype.slice.call(e.target.files) : [];
|
||
addContractOriginalFiles(files);
|
||
e.target.value = '';
|
||
} }),
|
||
React.createElement(Button, { type: 'default', style: { padding: '8px 16px', border: '1px solid #d9d9d9', borderRadius: 4, backgroundColor: '#fff', color: '#333', cursor: 'pointer', fontSize: 14 }, onClick: function() { if (contractOriginalRef.current) contractOriginalRef.current.click(); } }, '上传附件')
|
||
)
|
||
),
|
||
React.createElement(FormItem, { label: '备注', fullWidth: true }, React.createElement(Input.TextArea, { placeholder: '请输入备注信息', value: prevContractSample.remarks, disabled: true, style: { width: '100%', minHeight: 80, resize: 'vertical', backgroundColor: '#f5f5f5' }, rows: 4 }))
|
||
);
|
||
|
||
var authorizedContent = React.createElement('div', null,
|
||
prevContractSample.authorizedList.map(function(item, index) {
|
||
return React.createElement('div', { key: index, style: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 } },
|
||
React.createElement('div', { style: Object.assign({}, styles.inputDisabled, { flex: 1 }) }, item.name),
|
||
React.createElement('div', { style: Object.assign({}, styles.inputDisabled, { flex: 1 }) }, item.phone),
|
||
React.createElement('div', { style: Object.assign({}, styles.inputDisabled, { flex: 1 }) }, item.idCard)
|
||
);
|
||
})
|
||
);
|
||
|
||
var rentalSummaryEl = React.createElement('div', { style: styles.summaryList },
|
||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '租赁车辆数'), React.createElement('span', { style: styles.summaryListValue }, rentalTotalVehicles + ' 辆')),
|
||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '租金及服务费合计'), React.createElement('span', { style: styles.summaryListValue }, rentalTotalRentService.toFixed(2) + ' 元')),
|
||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '保证金总额'), React.createElement('span', { style: styles.summaryListValue }, rentalTotalDeposit.toFixed(2) + ' 元')),
|
||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '氢气预付款金额'), React.createElement('span', { style: styles.summaryListValue }, rentalTotalHydrogen.toFixed(2) + ' 元'))
|
||
);
|
||
var rentalTableBody = prevContractSample.rentalOrders.map(function(row, idx) {
|
||
return React.createElement('tr', { key: idx },
|
||
React.createElement('td', { style: styles.rentalTd }, idx + 1),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.brand)),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.model)),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.plateNo)),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.vin)),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.monthRent + ' 元')),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.serviceFee + ' 元')),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.deposit + ' 元')),
|
||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: styles.rentalInputDisabled }, row.remark || '—'))
|
||
);
|
||
});
|
||
var rentalTableEl = React.createElement('table', { style: styles.rentalTable },
|
||
React.createElement('thead', null,
|
||
React.createElement('tr', null,
|
||
React.createElement('th', { style: styles.rentalTh, width: 50 }, '序号'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 100 }, '品牌'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 100 }, '型号'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 120 }, '车牌号'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 160 }, '车辆识别代码'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 120 }, '车辆月租金'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 90 }, '服务费'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 100 }, '保证金'),
|
||
React.createElement('th', { style: styles.rentalTh, width: 80 }, '备注')
|
||
)
|
||
),
|
||
React.createElement('tbody', null, rentalTableBody)
|
||
);
|
||
var hydrogenReadOnly = React.createElement('div', { style: styles.formRow },
|
||
React.createElement(FormItem, { label: '氢费承担方' }, React.createElement(Input, { value: prevContractSample.hydrogenBearer, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '付款方式' }, React.createElement(Input, { value: prevContractSample.hydrogenPaymentMethod, disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '氢气预付款' }, React.createElement(Input, { value: prevContractSample.hydrogenPrepay + ' 元', disabled: true, style: { width: '100%' } })),
|
||
React.createElement(FormItem, { label: '退还车氢气单价' }, React.createElement(Input, { value: prevContractSample.returnHydrogenPrice + ' 元', disabled: true, style: { width: '100%' } }))
|
||
);
|
||
var rentalContent = React.createElement('div', null, rentalSummaryEl, React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } }, rentalTableEl), hydrogenReadOnly);
|
||
|
||
var feeTableHeader3 = React.createElement('tr', null, React.createElement('th', { style: styles.rentalTh }, '项目'), React.createElement('th', { style: styles.rentalTh }, '收费标准'), React.createElement('th', { style: styles.rentalTh }, '服务费'));
|
||
var feeTableHeader5 = React.createElement('tr', null, React.createElement('th', { style: styles.rentalTh }, '类别'), React.createElement('th', { style: styles.rentalTh }, '损坏部位'), React.createElement('th', { style: styles.rentalTh }, '配件'), React.createElement('th', { style: styles.rentalTh }, '数量'), React.createElement('th', { style: styles.rentalTh }, '费用明细'));
|
||
var makeFeeRow3 = function(r, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: styles.rentalTd }, r.project), React.createElement('td', { style: styles.rentalTd }, r.standard), React.createElement('td', { style: styles.rentalTd }, r.serviceFee)); };
|
||
var makeFeeRow5 = function(r, i) { return React.createElement('tr', { key: i }, React.createElement('td', { style: styles.rentalTd }, r.category), React.createElement('td', { style: styles.rentalTd }, r.part), React.createElement('td', { style: styles.rentalTd }, r.partName), React.createElement('td', { style: styles.rentalTd }, r.qty), React.createElement('td', { style: styles.rentalTd }, r.feeDetail)); };
|
||
var feeCertTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader3), React.createElement('tbody', null, feeTemplateCertFees.map(makeFeeRow3)));
|
||
var feePenaltyTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader3), React.createElement('tbody', null, feeTemplatePenaltyFees.map(makeFeeRow3)));
|
||
var feeConsumablesTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader5), React.createElement('tbody', null, feeTemplateConsumables.map(makeFeeRow5)));
|
||
var feeOtherTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader3), React.createElement('tbody', null, feeTemplateOtherFees.map(makeFeeRow3)));
|
||
var feeContent = React.createElement('div', null,
|
||
React.createElement('div', { style: styles.formRow }, React.createElement(FormItem, { label: '选择费用模板' }, React.createElement(Input, { value: prevContractSample.feeTemplate, disabled: true, style: { width: '100%' } }))),
|
||
React.createElement('div', { style: Object.assign({}, styles.feeSectionTitle, styles.feeSectionTitleFirst) }, '证照补办费用'), feeCertTable,
|
||
React.createElement('div', { style: styles.feeSectionTitle }, '违约金费用'), feePenaltyTable,
|
||
React.createElement('div', { style: styles.feeSectionTitle }, '易损件信息'), feeConsumablesTable,
|
||
React.createElement('div', { style: styles.feeSectionTitle }, '其他费用信息'), feeOtherTable
|
||
);
|
||
|
||
var billingContent = React.createElement('div', null, React.createElement('div', { style: { padding: '12px 16px', border: '1px solid #e8e8e8', borderRadius: 4, backgroundColor: '#fafafa', fontSize: 14, color: '#333' } }, prevContractSample.billingMethod));
|
||
|
||
var requirementContent = '车辆租赁合同-变更为三方合同（2026年3月3日版本）\n「数字化资产ONE-OS运管平台」中的「车辆租赁合同」-「变更为三方合同」模块，在车辆租赁合同操作列点击「变更为三方合同」进行操作；\n\n1.面包屑：\n#业务管理-车辆租赁合同-变更为三方合同\n\n2.客户基本信息卡片：\n#用于从客户列表中选择客户，并将该合同绑定到业务部门及业务负责人（绑定业务部门/业务负责人主要为了后期从部门/业务负责人维度进行数据统计）；\n2.1.客户名称：从原合同自动反写，如原客户信息发生改变则按照新信息进行反写；必选项，选择器，支持从输入框内输入内容进行模糊搜索，从客户信息列表中选择对应客户（只显示已通过审核的客户）；\n2.2.客户统一信用代码：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「信用代码」字段；\n2.3.客户地址：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「客户地址」字段；\n2.4.客户联系人：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「客户联系人」字段；\n2.5.客户电话：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「客户电话」字段；\n2.6.客户电子邮箱：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「客户电子邮箱」字段；\n2.7.企业名称：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「企业名称」字段；\n2.8.企业电话：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「企业电话」字段；\n2.9.邮寄地址：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「邮寄地址」字段；\n2.10.开户银行：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「开户银行」字段；\n2.11.银行账号：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「银行账号」字段；\n2.12.纳税人识别号：输入框（禁用状态），根据所选客户自动从客户信息列表中拉取对应客户-「纳税人识别号」字段；\n2.13.业务部门：从该条合同自动反写，必选项，选择器，从部门表中选择该租赁合同对应部门；\n2.14.业务负责人：从该条合同自动反写，必选项，选择器，从已选业务部门下拉取对应业务负责人，未选择业务部门时，业务负责人字段不可选；\n\n3.丙方客户基本信息卡片：\n#通过选择丙方，将客户交车应收款、租赁账单、还车应结算合并至丙方下；\n3.1.客户名称：从该条合同自动反查；\n3.2.客户统一信用代码：从该条合同自动反查；\n3.3.客户地址：从该条合同自动反查；\n3.4.客户联系人：从该条合同自动反查；\n3.5.客户电话：从该条合同自动反查；\n3.6.客户电子邮箱：从该条合同自动反查；\n3.7.企业名称：从该条合同自动反查；\n3.8.企业电话：从该条合同自动反查；\n3.9.邮寄地址：从该条合同自动反查；\n3.10.开户银行：从该条合同自动反查；\n3.11.银行账号：从该条合同自动反查；\n3.12.纳税人识别号：从该条合同自动反查；\n3.13.业务部门：从客户基本信息卡片中反写，支持修改；\n3.14.业务负责人：从客户基本信息卡片中反写，支持修改；\n\n4.合同基本信息卡片：\n#用于定义租赁合同基本情况和付款方式；\n4.1.项目名称：从原合同自动反写，必填项，输入框，用于定义该合同项目名称，默认提示信息"请输入项目名称"；\n4.2.合同类型：从原合同自动反写，必选项，选择器，合同类型分为「正式合同」「试用合同」；\n4.3.生效日期：从原合同自动反写，必选项，日期选择器，格式为YYYY-MM-DD，精确至天，默认为点击新增日期；\n4.4.付款方式：从原合同自动反写，必选项，付款方式分为「预付」「后付」两种；\n 4.4.1.如果选择预付，以对应「付款方式」和「付款周期」规则，在每一期新账单生成就列入业务待办（工作台功能），同时以消息通知对应用户；\n 4.4.2.如果选择后付，以对应「付款方式」和「付款周期」规则，在每一期新账单生成时，将前一期账单列入业务待办（工作台功能），同时以消息通知对应用户；\n4.5.主要车型：输入框（禁用状态），根据租赁订单信息中所有所选车型，自动反写入输入框并以标签形式显示，支持多车型显示，标签显示：型号名称；\n4.6.结束日期：需要重新填写，必选项，日期选择器，格式为YYYY-MM-DD，精确至天；\n 4.6.1.合同结束日期前30天将以消息提醒方式提醒（消息中心、工作台）；\n 4.6.2.到达合同结束日期时，租赁账单将会立刻停止计算，作为最后一期账单；\n 4.6.3.续签合同/转正式合同将重新生成账单，不会对旧合同账单做任何继承处理；\n4.7.付款周期：从原合同自动反写，必选项，选择器，支持1个月-12个月 12种付款周期，账单将以此周期和账单计算方式规则，从交车任务形成的交车单进行完整交车后，定时自动生成账单；\n4.8.签约公司：从原合同自动反写，必选项，选择器，从组织机构表中获取所有根组织机构（如嘉兴羚牛、上海羚牛、广东羚牛等），默认显示新增用户当前机构，可手动修改，后期需要考虑从签约公司维度统计合同相关数据；\n4.9.交车区域：从原合同自动反写，必选项，地区选择器，支持省-市2级，选择区域后，该任务生成交车任务时会自动推送至该区域负责运维人员；\n4.10.交车地点：从原合同自动反写，必填项，输入框，支持自定义输入交车地点；\n4.11.合同原件：显示原合同附件，同时支持上传新附件，必填项，按钮，按钮文字为：上传附件，支持多个附件上传（doc/docx/pdf格式）；\n4.12.备注：从原合同自动反写，如果该合同为续签合同，则自动在已填备注信息上方额外添加：续签自：旧合同合同编码xxx，文本域，支持自定义输入备注信息；\n\n5.被授权人信息卡片：\n#用于定义租赁合同相关被授权人相关信息，被授权人在交车单完成时，需要选择被授权人，并通过被授权人手机短信，在E签宝进行签字确认；\n5.1.被授权人：从原合同自动反写，必填项，输入框，用于输入被授权人信息；\n5.2.被授权人联系电话：从原合同自动反写，必填项，输入框，用于输入被授权人联系电话，该电话后续需要接收E签宝签字链接；\n5.3.被授权人身份证：从原合同自动反写，必填项，输入框，用于输入被授权人身份证信息；\n5.4.支持通过新增/删除一行的方式，创建或管理多个授权人，后续交车单完成时可从多个授权人中选择接收授权人；\n\n6.租赁订单信息卡片：\n#用于定义租赁合同对应车辆明细费用、氢费明细费用等相关信息；\n6.1.上方为租赁车辆总计数据，包括租赁车辆数、租金及服务费合计、保证金总额、氢气预付款金额等相关信息；\n 6.1.1.租赁车辆数：显示下方租赁订单信息包含多少辆车；\n 6.1.2.租金及服务费合计：显示下方租赁订单信息中车辆租金总额及服务费总额；\n 6.1.3.保证金总额：显示下方租赁订单信息中车辆保证金总额；\n 6.1.4.氢气预付款金额：显示氢气预付款金额，如客户选择自行承担氢费或羚牛承担氢费，则该处为0不计入氢气预付款金额；\n6.2.下方为列表，显示序号、品牌、型号、车牌号、车辆识别代码、车辆月租金（元）、服务费项目、服务费、保证金、备注，续签合同时，根据续签时的车辆信息填写（包括车牌号）；\n 6.2.1.序号：从原合同自动反写，自动按照条数生成，规则为1、2、3....以此类推；\n 6.2.2.品牌：从原合同自动反写，必选项，选择器，从型号参数库中「品牌」字段拉取所有品牌；\n 6.2.3.型号：从原合同自动反写，必选项，选择器，与品牌存在级联关系，未选择品牌则无法选择型号；\n 6.2.4.车牌号：从原合同自动反写，选填项，选择器（支持从输入框输入车牌号关键字下拉匹配），可通过选择车牌号对品牌、型号进行反写；\n 6.2.5.车辆识别代码：从原合同自动反写，输入框（禁用），显示该车辆对应车辆识别代码，根据所选车牌号从车辆表直接拉取进行反写；\n 6.2.6.车辆月租金：从原合同自动反写，输入框，支持两位小数，用于输入该车辆月租金金额，输入框后缀为元，如还车时账单周期不满1个月，则按照：（车辆月租金/30）* 实际天数进行计算；\n 6.2.7.服务费项目：从原合同自动反写，点击管理按钮弹出卡片，卡片标题为：服务项目，下方列表显示服务项目、费用、生效时间、操作；\n 6.2.7.1.服务项目：从原合同自动反写，必选项，选择器（支持输入框输入服务项目关键字进行下拉匹配），选项包含：代处理费用、罚款、违章处理违约金、未参加安全培训、车辆出险、年检年审违约、停车费、设备损坏金（包含易损件）、清洗费、上门收车人工费、上门收车送车行驶费、上门收车基础服务费、保险上浮、保养费用、补办驾驶证、补办牌照、补办营运证、补办加氢证、借用备用钥匙、补配钥匙、租金、氢气费-客、退还车氢量差、能源费补缴、能源费退款、送车上门人工费、送车上门送车行驶费、送车上门基础服务费、保证金、氢气预付费、维修费用、ETC-客、ETC卡缺损费、ETC设备缺损费、电费-客、未结算保养费、未结算维修费、车损费、工具损坏或丢失费、证件费、广告损坏费、送车服务费、接车服务费、补办行驶证、超赔险、轮胎磨损费、无忧包、轮胎保、养护保、尾板；\n 6.2.7.2.费用：从原合同自动反写，必填项，输入框，支持2位小数，输入框后缀为元；\n 6.2.7.3.生效时间：从原合同自动反写，必选项，日期选择器，格式为YYYY-MM-DD；\n 6.2.7.4.操作：删除，点击删除直接删除该行数据；\n 6.2.7.5.新增一行数据：点击添加一行服务项目；\n #在提车应收款中，车辆的交车日期和服务费生效日期可能会存在不同的情况，所以服务费需要单独以生效时间进行计算，例如：\n 交车后车辆从1月1日开始计费，付款周期为2个月，则提车应收款租金会计算到3月1日，但是服务费生效时间为1月30日，此情况下需要以3月1日-1月30日，计算出服务费具体收费天数为30天，然后根据：（服务费费用/30）* 服务费收费天数30）进行计算；\n 6.2.8.服务费：从原合同自动反写，自动根据添加的所有服务费项目计算总额，支持2位小数，格式为：xx.xx元；\n 6.2.9.保证金：从原合同自动反写，必填项，输入框，支持2位小数，后缀为元，用于填写车辆需要支付的保证金金额，保证金为提车应收款一次性支付，还车时需要计入退还费用中；\n 6.2.10.备注：选填项，输入框，用于备注车辆复杂情况；\n 6.2.11.操作：删除，点击删除删除该行数据；\n 6.2.12.添加一行：点击后列表新增一行，用于填写一条新的车辆租金费用信息；\n6.3.氢费承担方：从原合同自动反写，必选项，选择器，选项为：「我方」、「客户」；\n 6.3.1.选择「我方」：不显示付款方式、氢气预付款；\n 6.3.2.选择「客户」：付款方式字段默认为预付，可手动修改；\n6.4.付款方式：从原合同自动反写，必选项，选择器，选项为：「预付」、「月付款」、「自行结算」；\n 6.4.1.预付：选择「预付」，需要填写：「氢气预付款」，氢气预付款指合同签署时客户就需预先付出的氢费款项，该部分款项会自动计入提车应收款中氢气预付款金额；\n 6.4.2.月付款：选择「月付款」，提车应收款中不进行收费，而是由业务人员按照实际情况，通过氢费账单功能生成对应氢费账单，单独与客户进行结算；\n 6.4.3.自行结算：选择「自行结算」，指合同签署后，所有氢气费用由客户自行承担；\n6.5.氢气预付款：从原合同自动反写，选择「客户」「预付」时显示，必填项，输入框，支持2位小数，氢气预付款金额会计算入该合同交车应收款中，并计入5.1.4.氢气预付款金额中；\n6.6.退还车氢气单价：从原合同自动反写，必填项，输入框，支持2位小数，后缀为元，不管氢费承担方和付款方式选择任何选项都需要进行维护，该金额主要用于与客户约定还车时，与交车时氢气差值以此费用进行自动计算和结算；\n\n7.其他费用信息卡片：\n#用于选择对应租赁费用模板，选择后展示证照补办费用、违约金费用、易损件费用、其他费用等信息，租赁费用模板管理功能位于「车辆租赁合同」列表左上角；\n7.1.选择费用模板：从原合同自动反写，如果费用模板有更新，则按照更新后内容显示，必选项，从「租赁费用模板」中拉取，选择后自动将该费用模板所有环节费用显示在合同中；\n 7.1.1.证照补办费用：单独标题显示，内容为列表，列表中包括项目、收费标准、服务费，选择费用模板后自动反显；\n 7.1.2.违约金费用：单独标题显示，内容为列表，列表中包含项目、收费标准、服务费，选择费用模板后自动反显；\n 7.1.3.易损件信息：单独标题显示，内容为列表，列表中包含类别、损坏部位、配件、数量、费用明细，选择费用模板后自动反显；\n 7.1.4.其他费用信息：单独标题显示，内容为列表，列表中包含项目、收费标准、服务费，选择费用模板后自动反显；\n\n8.账单计算方式卡片：\n#必选项，从原合同自动反写，填充按钮组，可手动修改，用于定义租赁合同的账单计算方式，分为「按自然月结算」、「按付款周期天数结算」两种方式；\n8.1.按付款周期天数结算：账单按照合同基本信息卡片中每隔付款周期*30天形成一期账单；\n 例如付款周期为2个月，则交车任务交车成功时，提车应收款从交车任务配置的开始计费时间开始，根据60天收取车辆租金，此后每隔60天生成一期租赁账单；\n8.2.按自然月结算：账单按照第一个月计费开始日期到当月最后一天为第一期，之后按照付款周期所选月份间隔，从开始月份第一天到间隔月份最后一天的自然月方式形成一期账单；\n 例如付款周期为2个月，则交车任务交车成功时，提车应收款车辆租金需要收取≥2个月租金作为标准流程，＜2个月租金作为非标流程；\n 租赁账单首期从交车任务配置的开始计费时间开始，如付款周期为2个月，则首期账单结束时间为第二个月最后一天，付款周期为3个月，则首期账单结束时间为第三个月最后一天，此后每一期按照实际自然月开始-结束形成账单，例如付款周期为2个月，则第二期账单从2月1日-3月31日，以此类推；\n\n9.最下方为提交并审核、保存、取消三个按钮；\n9.1.点击提交并审核，toast提示：租赁合同已提交审核。同时该租赁合同重新进入租赁合同审核列表中；\n9.2.点击保存，会存储租赁订单已填写内容，不做必填项校验，同时显示在租赁合同列表中，该条数据只能保存人自己查看并编辑，其他人无法操作；\n9.3.点击取消，如当前页面有已编辑内容时，点击取消会进行二次提示，内容为：取消将会丢失所有已填写内容，是否确认？点击确认返回车辆租赁合同列表页；\n\n所有卡片支持收起/展开功能，通过点击卡片右侧收起/展开实现；并增加锚点功能，锚点固定于页面右上角，点击锚点对应卡片名称，页面自动跳转至该卡片所在区域；';
|
||
|
||
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' }) }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, 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: { 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-third-party'); } }, '丙方客户基本信息'),
|
||
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('div', { id: 'card-customer' }, React.createElement(CardBlock, { id: 'card-customer', title: '客户基本信息', collapsed: cc1, setCollapsed: setCc1 }, customerFields)),
|
||
React.createElement('div', { id: 'card-third-party', style: { marginTop: 16 } }, React.createElement(CardBlock, { id: 'card-third-party', title: '丙方客户基本信息', collapsed: cc1b, setCollapsed: setCc1b }, thirdPartyCustomerFields)),
|
||
React.createElement('div', { id: 'card-contract', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, contractFormRow1)),
|
||
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('div', { style: { height: 60 } }),
|
||
reqSpecModalContent,
|
||
cancelConfirmOpen ? React.createElement('div', { style: styles.modalMask, onClick: function(e) { if (e.target === e.currentTarget) setCancelConfirmOpen(false); } },
|
||
React.createElement('div', { style: Object.assign({}, styles.modalBox, { maxWidth: 520 }), onClick: function(e) { e.stopPropagation(); } },
|
||
React.createElement('div', { style: styles.modalHeader }, '提示'),
|
||
React.createElement('div', { style: Object.assign({}, styles.modalBody, { padding: '20px 24px' }) }, '取消将会丢失所有已填写内容，是否确认？'),
|
||
React.createElement('div', { style: { padding: '12px 20px', borderTop: '1px solid #f0f0f0', textAlign: 'right', display: 'flex', gap: 12, justifyContent: 'flex-end' } },
|
||
React.createElement(Button, { onClick: function() { setCancelConfirmOpen(false); } }, '否'),
|
||
React.createElement(Button, { type: 'primary', onClick: function() { setCancelConfirmOpen(false); setEdited(false); message.info('已返回车辆租赁合同列表（原型）'); } }, '是')
|
||
)
|
||
)
|
||
) : null,
|
||
React.createElement('div', { style: styles.footer },
|
||
React.createElement(Button, { type: 'primary', onClick: function() { if (validateSubmitAndReview()) { setEdited(false); message.success('租赁合同已提交审核。同时该租赁合同重新进入租赁合同审核列表中。'); } } }, '提交并审核'),
|
||
React.createElement(Button, { onClick: function() { setEdited(false); message.success('已保存（不校验必填项），该条数据只能保存人自己查看并编辑，其他人无法操作。'); } }, '保存'),
|
||
React.createElement(Button, { onClick: function() { if (edited) setCancelConfirmOpen(true); else message.info('已返回车辆租赁合同列表（原型）'); } }, '取消')
|
||
)
|
||
);
|
||
};
|