Initial commit: ONE-OS project
Made-with: Cursor
This commit is contained in:
王冕
BIN
web端/车辆租赁合同/.DS_Store
vendored
Normal file
BIN
web端/车辆租赁合同/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
web端/车辆租赁合同/2026-02-27租赁合同修改点.zip
Normal file
BIN
web端/车辆租赁合同/2026-02-27租赁合同修改点.zip
Normal file
Binary file not shown.
690
web端/车辆租赁合同/合同续签.jsx
Normal file
690
web端/车辆租赁合同/合同续签.jsx
Normal file
File diff suppressed because one or more lines are too long
655
web端/车辆租赁合同/新增租赁合同.jsx
Normal file
655
web端/车辆租赁合同/新增租赁合同.jsx
Normal file
File diff suppressed because one or more lines are too long
448
web端/车辆租赁合同/新增车辆.jsx
Normal file
448
web端/车辆租赁合同/新增车辆.jsx
Normal file
@@ -0,0 +1,448 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 车辆租赁合同 - 新增车辆（与查看合同页布局一致，仅新增车辆信息卡片可编辑）
|
||||
|
||||
const Component = function() {
|
||||
var useState = React.useState;
|
||||
var useCallback = React.useCallback;
|
||||
var antd = window.antd;
|
||||
var Select = antd.Select;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Table = antd.Table;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var message = antd.message;
|
||||
var Option = Select.Option;
|
||||
|
||||
var cc1State = React.useState(false);
|
||||
var cc1 = cc1State[0];
|
||||
var setCc1 = cc1State[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 cc7State = React.useState(false);
|
||||
var cc7 = cc7State[0];
|
||||
var setCc7 = cc7State[1];
|
||||
|
||||
var emptyNewRow = { brand: '', model: '', plateNo: '', vin: '', monthRent: '', serviceItems: [{ project: '', fee: '', effectiveDate: '' }], deposit: '', remark: '' };
|
||||
var _newVehicleRows = useState([Object.assign({}, emptyNewRow)]);
|
||||
var newVehicleRows = _newVehicleRows[0];
|
||||
var setNewVehicleRows = _newVehicleRows[1];
|
||||
var _serviceModalRowIndex = useState(null);
|
||||
var serviceModalRowIndex = _serviceModalRowIndex[0];
|
||||
var setServiceModalRowIndex = _serviceModalRowIndex[1];
|
||||
|
||||
var brandList = ['品牌A', '品牌B', '品牌C', '品牌D'];
|
||||
var serviceItemOptions = ['代处理费用', '罚款', '违章处理违约金', '未参加安全培训', '车辆出险', '年检年审违约', '停车费', '设备损坏金（包含易损件）', '清洗费', '上门收车人工费', '上门收车送车行驶费', '上门收车基础服务费', '保险上浮', '保养费用', '补办驾驶证', '补办牌照', '补办营运证', '补办加氢证', '借用备用钥匙', '补配钥匙', '租金', '氢气费-客', '退还车氢量差', '能源费补缴', '能源费退款', '送车上门人工费', '送车上门送车行驶费', '送车上门基础服务费', '保证金', '氢气预付费', '维修费用', 'ETC-客', 'ETC卡缺损费', 'ETC设备缺损费', '电费-客', '未结算保养费', '未结算维修费', '车损费', '工具损坏或丢失费', '证件费', '广告损坏费', '送车服务费', '接车服务费', '补办行驶证', '超赔险', '轮胎磨损费', '无忧包', '轮胎保', '养护保', '尾板'];
|
||||
var modelByBrand = { '品牌A': ['型号A1', '型号A2', '型号A3'], '品牌B': ['型号B1', '型号B2'], '品牌C': ['型号C1', '型号C2'], '品牌D': ['型号D1'] };
|
||||
var plateNoOptions = ['浙A10001', '浙A10002', '浙B20001', '浙B20002', '浙C30001', '浙C30002', '沪D40001', '沪D40002', '苏E50001', '苏E50002', '京F60001', '京F60002'].map(function(p) { return { value: p, label: p }; });
|
||||
|
||||
var addNewVehicleRow = useCallback(function() {
|
||||
setNewVehicleRows(function(prev) { return prev.concat([{ brand: '', model: '', plateNo: '', vin: '', monthRent: '', serviceItems: [{ project: '', fee: '', effectiveDate: '' }], deposit: '', remark: '' }]); });
|
||||
}, []);
|
||||
var removeNewVehicleRow = useCallback(function(index) {
|
||||
setNewVehicleRows(function(prev) {
|
||||
var next = prev.slice();
|
||||
next.splice(index, 1);
|
||||
if (next.length === 0) next = [{ brand: '', model: '', plateNo: '', vin: '', monthRent: '', serviceItems: [{ project: '', fee: '', effectiveDate: '' }], deposit: '', remark: '' }];
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
var updateNewVehicleRow = useCallback(function(index, field, value) {
|
||||
setNewVehicleRows(function(prev) {
|
||||
var next = prev.slice();
|
||||
var row = next[index] || emptyNewRow;
|
||||
var o = {};
|
||||
o[field] = value;
|
||||
if (field === 'brand') o.model = '';
|
||||
if (field === 'plateNo') o.vin = value;
|
||||
next[index] = Object.assign({}, row, o);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var calcRowServiceFee = function(row) {
|
||||
var sum = 0;
|
||||
for (var i = 0; i < (row.serviceItems || []).length; i++) {
|
||||
var fee = parseFloat(row.serviceItems[i].fee);
|
||||
if (!isNaN(fee)) sum += fee;
|
||||
}
|
||||
return sum.toFixed(2);
|
||||
};
|
||||
var openServiceModal = function(index) { setServiceModalRowIndex(index); };
|
||||
var closeServiceModal = function() { setServiceModalRowIndex(null); };
|
||||
var addServiceItem = function() {
|
||||
if (serviceModalRowIndex === null) return;
|
||||
var next = newVehicleRows.slice();
|
||||
var row = next[serviceModalRowIndex];
|
||||
var items = (row.serviceItems || []).concat([{ project: '', fee: '', effectiveDate: '' }]);
|
||||
var newRow = {};
|
||||
for (var k in row) { if (row.hasOwnProperty(k) && k !== 'serviceItems') newRow[k] = row[k]; }
|
||||
newRow.serviceItems = items;
|
||||
next[serviceModalRowIndex] = newRow;
|
||||
setNewVehicleRows(next);
|
||||
};
|
||||
var removeServiceItem = function(siIndex) {
|
||||
if (serviceModalRowIndex === null) return;
|
||||
var next = newVehicleRows.slice();
|
||||
var row = next[serviceModalRowIndex];
|
||||
var items = (row.serviceItems || []).slice();
|
||||
items.splice(siIndex, 1);
|
||||
if (items.length === 0) items = [{ project: '', fee: '', effectiveDate: '' }];
|
||||
var newRow = {};
|
||||
for (var k in row) { if (row.hasOwnProperty(k) && k !== 'serviceItems') newRow[k] = row[k]; }
|
||||
newRow.serviceItems = items;
|
||||
next[serviceModalRowIndex] = newRow;
|
||||
setNewVehicleRows(next);
|
||||
};
|
||||
var updateServiceItem = function(siIndex, field, value) {
|
||||
if (serviceModalRowIndex === null) return;
|
||||
var next = newVehicleRows.slice();
|
||||
var row = next[serviceModalRowIndex];
|
||||
var items = (row.serviceItems || []).slice();
|
||||
var item = items[siIndex] || {};
|
||||
var newItem = {};
|
||||
for (var k in item) { if (item.hasOwnProperty(k)) newItem[k] = item[k]; }
|
||||
newItem[field] = value;
|
||||
items[siIndex] = newItem;
|
||||
var newRow = {};
|
||||
for (var rk in row) { if (row.hasOwnProperty(rk) && rk !== 'serviceItems') newRow[rk] = row[rk]; }
|
||||
newRow.serviceItems = items;
|
||||
next[serviceModalRowIndex] = newRow;
|
||||
setNewVehicleRows(next);
|
||||
};
|
||||
var newOrderSummary = (function() {
|
||||
var count = newVehicleRows.length;
|
||||
var rentService = 0;
|
||||
var depositTotal = 0;
|
||||
for (var i = 0; i < newVehicleRows.length; i++) {
|
||||
rentService += parseFloat(newVehicleRows[i].monthRent) || 0;
|
||||
rentService += parseFloat(calcRowServiceFee(newVehicleRows[i])) || 0;
|
||||
depositTotal += parseFloat(newVehicleRows[i].deposit) || 0;
|
||||
}
|
||||
return { vehicleCount: count, totalRentService: rentService.toFixed(2), totalDeposit: depositTotal.toFixed(2) };
|
||||
})();
|
||||
|
||||
var scrollToCard = function(id) {
|
||||
var el = document.getElementById(id);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
};
|
||||
|
||||
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' },
|
||||
input: { width: '100%', padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4, fontSize: 14 },
|
||||
inputDisabled: { backgroundColor: '#f5f5f5', color: '#666', cursor: 'default', borderColor: '#e8e8e8' },
|
||||
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 },
|
||||
btnDefault: { backgroundColor: '#fff', color: '#333' },
|
||||
btnPrimary: { backgroundColor: '#1890ff', color: '#fff', borderColor: '#1890ff' },
|
||||
feeSectionTitle: { fontSize: 15, fontWeight: 600, color: '#333', marginTop: 20, marginBottom: 10 },
|
||||
feeSectionTitleFirst: { marginTop: 0 },
|
||||
sectionTitle: { fontSize: 15, fontWeight: 600, color: '#333', marginBottom: 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 },
|
||||
rentalTdCenter: { padding: '8px', borderBottom: '1px solid #f0f0f0', verticalAlign: 'middle' }
|
||||
};
|
||||
|
||||
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 FormItemReadOnly = function(props) {
|
||||
var colStyle = props.fullWidth ? styles.formColFull : styles.formCol;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: styles.label }, props.label),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, styles.inputDisabled) }, props.value || '—')
|
||||
);
|
||||
};
|
||||
|
||||
var mockCustomer = { name: '嘉兴某某物流有限公司', creditCode: '91330400MA2XXXXX1', address: '浙江省嘉兴市南湖区科技大道1号', contact: '张三', phone: '13800138001', email: 'zhangsan@example.com', companyName: '嘉兴某某物流有限公司', companyPhone: '0571-88888888', mailingAddress: '浙江省嘉兴市南湖区科技大道1号', bank: '中国工商银行嘉兴分行', bankAccount: '6222021234567890123', taxId: '91330400MA2XXXXX1' };
|
||||
var contractOriginal = { name: '租赁合同-原件.pdf', size: '1.2 MB', uploadTime: '2026-02-16 14:30' };
|
||||
var mockContract = { projectName: '嘉兴氢能运输项目', contractCode: 'JXZL20260216YW101235A', contractType: '正式合同', effectiveDate: '2026-02-16', paymentMethod: '预付', mainVehicleModels: '型号A1、型号A2', endDate: '2027-02-16', paymentPeriod: '1个月', signingCompany: '嘉兴羚牛', deliveryRegion: '浙江省 / 嘉兴市', deliveryLocation: '嘉兴市南湖区科技大道1号', remarks: '' };
|
||||
var mockAuthorized = [{ name: '张三', phone: '13800138001', idCard: '330102199001011234' }];
|
||||
var mockRentalOrders = [{ 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: '' }];
|
||||
var mockRentalSummary = { vehicleCount: 2, totalRentService: '17000.00', totalDeposit: '20000.00', hydrogenPrepay: '5000.00' };
|
||||
var mockHydrogen = { bearer: '客户', paymentMethod: '预付', hydrogenPrepay: '5000', returnPrice: '80' };
|
||||
var mockFeeTemplate = '标准费用模板A';
|
||||
var mockBillingMethod = '按自然月结算';
|
||||
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 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 feeTemplateBody = React.createElement('div', null,
|
||||
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 customerFields = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItemReadOnly, { label: '客户名称', value: mockCustomer.name }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户统一信用代码', value: mockCustomer.creditCode }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户地址', value: mockCustomer.address }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户联系人', value: mockCustomer.contact }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户电话', value: mockCustomer.phone }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户电子邮箱', value: mockCustomer.email }),
|
||||
React.createElement(FormItemReadOnly, { label: '企业名称', value: mockCustomer.companyName }),
|
||||
React.createElement(FormItemReadOnly, { label: '企业电话', value: mockCustomer.companyPhone }),
|
||||
React.createElement(FormItemReadOnly, { label: '邮寄地址', value: mockCustomer.mailingAddress }),
|
||||
React.createElement(FormItemReadOnly, { label: '开户银行', value: mockCustomer.bank }),
|
||||
React.createElement(FormItemReadOnly, { label: '银行账号', value: mockCustomer.bankAccount }),
|
||||
React.createElement(FormItemReadOnly, { label: '纳税人识别号', value: mockCustomer.taxId }),
|
||||
React.createElement(FormItemReadOnly, { label: '业务部门', value: '业务1部' }),
|
||||
React.createElement(FormItemReadOnly, { label: '业务负责人', value: '张经理' })
|
||||
);
|
||||
|
||||
var contractFormRow1 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItemReadOnly, { label: '项目名称', value: mockContract.projectName }),
|
||||
React.createElement(FormItemReadOnly, { label: '合同编码', value: mockContract.contractCode }),
|
||||
React.createElement(FormItemReadOnly, { label: '合同类型', value: mockContract.contractType }),
|
||||
React.createElement(FormItemReadOnly, { label: '生效日期', value: mockContract.effectiveDate }),
|
||||
React.createElement(FormItemReadOnly, { label: '付款方式', value: mockContract.paymentMethod }),
|
||||
React.createElement(FormItemReadOnly, { label: '主要车型', value: mockContract.mainVehicleModels }),
|
||||
React.createElement(FormItemReadOnly, { label: '结束日期', value: mockContract.endDate }),
|
||||
React.createElement(FormItemReadOnly, { label: '付款周期', value: mockContract.paymentPeriod }),
|
||||
React.createElement(FormItemReadOnly, { label: '签约公司', value: mockContract.signingCompany }),
|
||||
React.createElement('div', { style: styles.formCol },
|
||||
React.createElement(FormItemReadOnly, { label: '交车区域', value: mockContract.deliveryRegion }),
|
||||
React.createElement('div', null,
|
||||
React.createElement('label', { style: styles.label }, '合同原件'),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, styles.inputDisabled, { padding: '8px 12px' }) },
|
||||
contractOriginal
|
||||
? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
|
||||
React.createElement('a', { href: '#', style: { color: '#1890ff', cursor: 'pointer', textDecoration: 'none' }, onClick: function(e) { e.preventDefault(); window.open('#', '_blank'); } }, contractOriginal.name),
|
||||
(contractOriginal.size || contractOriginal.uploadTime) ? React.createElement('span', { style: { color: '#999', fontSize: 12 } }, (contractOriginal.size || '') + (contractOriginal.size && contractOriginal.uploadTime ? ' · ' : '') + (contractOriginal.uploadTime || '')) : null
|
||||
)
|
||||
: '—'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(FormItemReadOnly, { label: '交车地点', value: mockContract.deliveryLocation })
|
||||
);
|
||||
var contractFormRow2 = React.createElement('div', { style: styles.formRow }, React.createElement(FormItemReadOnly, { label: '备注', fullWidth: true, value: mockContract.remarks || '—' }));
|
||||
|
||||
var authorizedContent = React.createElement('div', null,
|
||||
React.createElement('div', { style: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 } },
|
||||
React.createElement('span', { style: { flex: 1, fontWeight: 600, fontSize: 13 } }, '被授权人姓名'),
|
||||
React.createElement('span', { style: { flex: 1, fontWeight: 600, fontSize: 13 } }, '被授权人联系电话'),
|
||||
React.createElement('span', { style: { flex: 1, fontWeight: 600, fontSize: 13 } }, '被授权人身份证')
|
||||
),
|
||||
mockAuthorized.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.input, styles.inputDisabled, { flex: 1 }) }, item.name),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, styles.inputDisabled, { flex: 1 }) }, item.phone),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, 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 }, mockRentalSummary.vehicleCount + ' 辆')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '租金及服务费合计'), React.createElement('span', { style: styles.summaryListValue }, mockRentalSummary.totalRentService + ' 元')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '保证金总额'), React.createElement('span', { style: styles.summaryListValue }, mockRentalSummary.totalDeposit + ' 元')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '氢气预付款金额'), React.createElement('span', { style: styles.summaryListValue }, mockRentalSummary.hydrogenPrepay + ' 元'))
|
||||
);
|
||||
var rentalTableBody = mockRentalOrders.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(FormItemReadOnly, { label: '氢费承担方', value: mockHydrogen.bearer }),
|
||||
React.createElement(FormItemReadOnly, { label: '付款方式', value: mockHydrogen.paymentMethod }),
|
||||
React.createElement(FormItemReadOnly, { label: '氢气预付款', value: mockHydrogen.hydrogenPrepay + ' 元' }),
|
||||
React.createElement(FormItemReadOnly, { label: '退还车氢气单价', value: mockHydrogen.returnPrice + ' 元' })
|
||||
);
|
||||
var rentalContent = React.createElement('div', null, rentalSummaryEl, React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } }, rentalTableEl), hydrogenReadOnly);
|
||||
|
||||
var newVehicleColumns = [
|
||||
{ title: '序号', key: 'no', width: 60, render: function(_, __, i) { return i + 1; } },
|
||||
{ title: '品牌', key: 'brand', width: 90, render: function(_, row, i) { return React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: row.brand || undefined, onChange: function(v) { updateNewVehicleRow(i, 'brand', v || ''); }, options: brandList.map(function(b) { return { value: b, label: b }; }), allowClear: true }); } },
|
||||
{ title: '型号', key: 'model', width: 100, render: function(_, row, i) { var opts = (row.brand && modelByBrand[row.brand]) ? modelByBrand[row.brand].map(function(m) { return { value: m, label: m }; }) : []; return React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: row.model || undefined, onChange: function(v) { updateNewVehicleRow(i, 'model', v || ''); }, options: opts, allowClear: true, disabled: !row.brand }); } },
|
||||
{ title: '车牌号', key: 'plateNo', width: 120, render: function(_, row, i) { return React.createElement(Select, { placeholder: '请选择或输入搜索', style: { width: '100%' }, value: row.plateNo || undefined, onChange: function(v) { updateNewVehicleRow(i, 'plateNo', v || ''); }, options: plateNoOptions, allowClear: true, showSearch: true, filterOption: function(input, option) { var label = (option && option.label) ? option.label : ''; return label.toLowerCase().indexOf((input || '').toLowerCase()) >= 0; } }); } },
|
||||
{ title: '车辆识别代码', key: 'vin', width: 160, render: function(_, row, i) { return React.createElement(Input, { placeholder: '由车牌号反写', value: row.plateNo || row.vin || '', disabled: true }); } },
|
||||
{ title: '车辆月租金', key: 'monthRent', width: 120, render: function(_, row, i) { return React.createElement(Input, { placeholder: '0.00', value: row.monthRent || '', onChange: function(e) { updateNewVehicleRow(i, 'monthRent', e.target.value); }, addonAfter: '元' }); } },
|
||||
{ title: '服务费项目', key: 'serviceItems', width: 80, render: function(_, row, i) { return React.createElement(Button, { type: 'link', size: 'small', onClick: function() { openServiceModal(i); } }, '管理'); } },
|
||||
{ title: '服务费', key: 'serviceFee', width: 90, render: function(_, row, i) { return calcRowServiceFee(row) + ' 元'; } },
|
||||
{ title: '保证金', key: 'deposit', width: 100, render: function(_, row, i) { return React.createElement(Input, { placeholder: '0.00', value: row.deposit || '', onChange: function(e) { updateNewVehicleRow(i, 'deposit', e.target.value); }, addonAfter: '元' }); } },
|
||||
{ title: '备注', key: 'remark', width: 80, render: function(_, row, i) { return React.createElement(Input, { placeholder: '请输入', value: row.remark || '', onChange: function(e) { updateNewVehicleRow(i, 'remark', e.target.value); } }); } },
|
||||
{ title: '操作', key: 'action', width: 80, render: function(_, row, i) { return React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function() { removeNewVehicleRow(i); } }, '删除'); } }
|
||||
];
|
||||
|
||||
var newOrderSummaryEl = React.createElement('div', { style: styles.summaryList },
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '租赁车辆数'), React.createElement('span', { style: styles.summaryListValue }, newOrderSummary.vehicleCount + ' 辆')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '租金及服务费合计'), React.createElement('span', { style: styles.summaryListValue }, newOrderSummary.totalRentService + ' 元')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '保证金总额'), React.createElement('span', { style: styles.summaryListValue }, newOrderSummary.totalDeposit + ' 元'))
|
||||
);
|
||||
|
||||
var serviceModalRows = serviceModalRowIndex !== null && newVehicleRows[serviceModalRowIndex] ? newVehicleRows[serviceModalRowIndex].serviceItems : [];
|
||||
var serviceModalContent = serviceModalRowIndex !== null ? React.createElement('div', { style: styles.modalMask, onClick: function(e) { if (e.target === e.currentTarget) closeServiceModal(); } },
|
||||
React.createElement('div', { style: styles.modalBox, onClick: function(e) { e.stopPropagation(); } },
|
||||
React.createElement('div', { style: styles.modalHeader }, '服务项目'),
|
||||
React.createElement('div', { style: styles.modalBody },
|
||||
React.createElement('table', { style: styles.rentalTable },
|
||||
React.createElement('thead', null, 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: Object.assign({}, styles.rentalTh, { width: 80 }) }, '操作'))),
|
||||
React.createElement('tbody', null, serviceModalRows.map(function(si, siIdx) {
|
||||
return React.createElement('tr', { key: siIdx },
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement(Select, { style: { width: '100%' }, placeholder: '请选择服务项目', value: si.project || undefined, onChange: function(v) { updateServiceItem(siIdx, 'project', v || ''); }, showSearch: true, filterOption: function(input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }, allowClear: true }, serviceItemOptions.map(function(opt, oi) { return React.createElement(Option, { key: oi, value: opt }, opt); }))),
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement(Input, { placeholder: '0.00', value: si.fee || '', onChange: function(e) { updateServiceItem(siIdx, 'fee', e.target.value); }, addonAfter: '元', style: { width: '100%' } })),
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement(DatePicker, { style: { width: '100%' }, format: 'YYYY-MM-DD', placeholder: '请选择生效时间', value: si.effectiveDate && window.moment ? window.moment(si.effectiveDate, 'YYYY-MM-DD') : null, onChange: function(d, dateStr) { updateServiceItem(siIdx, 'effectiveDate', dateStr || ''); } })),
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function() { removeServiceItem(siIdx); } }, '删除'))
|
||||
);
|
||||
}))
|
||||
),
|
||||
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addServiceItem }, '添加一行')
|
||||
),
|
||||
React.createElement('div', { style: { padding: '12px 20px', borderTop: '1px solid #f0f0f0', textAlign: 'right', display: 'flex', gap: 12, justifyContent: 'flex-end' } },
|
||||
React.createElement(Button, { type: 'primary', onClick: function() { closeServiceModal(); } }, '保存'),
|
||||
React.createElement(Button, { onClick: closeServiceModal }, '关闭')
|
||||
)
|
||||
)
|
||||
) : null;
|
||||
|
||||
var newVehicleCardContent = React.createElement('div', null,
|
||||
React.createElement('div', { style: styles.sectionTitle }, '新增订单'),
|
||||
newOrderSummaryEl,
|
||||
React.createElement(Table, { rowKey: function(_, i) { return String(i); }, size: 'small', columns: newVehicleColumns, dataSource: newVehicleRows, pagination: false, scroll: { x: 1100 } }),
|
||||
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addNewVehicleRow }, '添加一行')
|
||||
);
|
||||
|
||||
var feeContent = React.createElement('div', null, React.createElement('div', { style: styles.formRow }, React.createElement(FormItemReadOnly, { label: '选择费用模板', value: mockFeeTemplate })), feeTemplateBody);
|
||||
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' } }, mockBillingMethod));
|
||||
var attachmentContent = React.createElement('div', { style: styles.card },
|
||||
React.createElement('div', { style: styles.cardHeader }, React.createElement('span', { style: styles.cardTitle }, '盖章合同附件')),
|
||||
React.createElement('div', { style: styles.cardBody }, React.createElement('div', { style: { color: '#666', fontSize: 14 } }, '租赁合同-盖章版.pdf · 1.2 MB · 2026-02-16 14:30'))
|
||||
);
|
||||
|
||||
var changeHistorySorted = [{ changeTime: '2026-02-16 14:00', opType: '变更内容', operator: '张三', remark: '"结束日期"由"2027-01-16"修改为"2027-02-16"' }];
|
||||
var historyTableRows = changeHistorySorted.map(function(row, index) {
|
||||
return React.createElement('tr', { key: index },
|
||||
React.createElement('td', { style: styles.rentalTd }, index + 1),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.changeTime),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.opType),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.operator),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.remark)
|
||||
);
|
||||
});
|
||||
var historyTable = React.createElement('table', { style: styles.rentalTable },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: styles.rentalTh, width: 60 }, '序号'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 140 }, '变更时间'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 100 }, '操作类型'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 90 }, '操作人'),
|
||||
React.createElement('th', { style: styles.rentalTh }, '备注')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null, historyTableRows)
|
||||
);
|
||||
var changeHistoryContent = React.createElement('div', { style: styles.card },
|
||||
React.createElement('div', { style: styles.cardHeader }, React.createElement('span', { style: styles.cardTitle }, '合同变更历史记录')),
|
||||
React.createElement('div', { style: styles.cardBody }, React.createElement('div', { style: { overflowX: 'auto' } }, historyTable))
|
||||
);
|
||||
|
||||
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('div', { style: styles.anchorWrap },
|
||||
React.createElement('div', { style: { marginBottom: 8, fontWeight: 600, fontSize: 14 } }, '锚点导航'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-customer'); } }, '客户基本信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-contract'); } }, '合同基本信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-authorized'); } }, '被授权人信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-rental'); } }, '租赁订单信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-new-vehicle'); } }, '新增车辆信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-fee'); } }, '其他费用信息'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-billing'); } }, '账单计算方式'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-attachment'); } }, '盖章合同附件'),
|
||||
React.createElement('button', { type: 'button', style: styles.anchorItem, onClick: function() { scrollToCard('card-history'); } }, '合同变更历史记录')
|
||||
),
|
||||
React.createElement('div', { id: 'card-customer' }, React.createElement(CardBlock, { 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, 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-new-vehicle', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '新增车辆信息', collapsed: cc7, setCollapsed: setCc7 }, newVehicleCardContent)),
|
||||
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', { id: 'card-attachment', style: { marginTop: 16 } }, attachmentContent),
|
||||
React.createElement('div', { id: 'card-history', style: { marginTop: 16 } }, changeHistoryContent),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
serviceModalContent,
|
||||
React.createElement('div', { style: styles.footer },
|
||||
React.createElement('button', { type: 'button', style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function() { message.info('取消（原型）'); } }, '取消'),
|
||||
React.createElement('button', { type: 'button', style: Object.assign({}, styles.btn, styles.btnPrimary), onClick: function() { message.success('已提交审核，审核通过后生效（原型）'); } }, '提交审核')
|
||||
)
|
||||
);
|
||||
};
|
||||
448
web端/车辆租赁合同/查看租赁合同.jsx
Normal file
448
web端/车辆租赁合同/查看租赁合同.jsx
Normal file
@@ -0,0 +1,448 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名 - Axhub 产品原型
|
||||
// 车辆资产管理系统 - 查看租赁合同模块（只读 + 审批状态 + 盖章附件，IE11+ 兼容）
|
||||
|
||||
const Component = function() {
|
||||
var cc1State = React.useState(false);
|
||||
var cc1 = cc1State[0];
|
||||
var setCc1 = cc1State[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 attachmentHoverState = React.useState(false);
|
||||
var attachmentHover = attachmentHoverState[0];
|
||||
var setAttachmentHover = attachmentHoverState[1];
|
||||
var reqSpecState = React.useState(false);
|
||||
var reqSpecOpen = reqSpecState[0];
|
||||
var setReqSpecOpen = reqSpecState[1];
|
||||
var servicePopoverRowState = React.useState(null);
|
||||
var servicePopoverRow = servicePopoverRowState[0];
|
||||
var setServicePopoverRow = servicePopoverRowState[1];
|
||||
|
||||
// 模拟已上传的盖章合同附件
|
||||
var uploadedFile = { name: '租赁合同-盖章版.pdf', size: '1.2 MB', uploadTime: '2026-02-16 14:30' };
|
||||
|
||||
// 合同变更历史记录（变更时间倒序，序号 1.2.3...）
|
||||
var changeHistoryRaw = [
|
||||
{ changeTime: '2026-02-16 14:00', opType: '变更内容', operator: '张三', remark: '"结束日期"由"2027-01-16"修改为"2027-02-16"' },
|
||||
{ changeTime: '2026-02-16 10:30', opType: '附加费用', operator: '李四', remark: '添加服务项目"保养费用"，费用为"200"，生效时间为"2026-03-01"\n添加服务项目"清洗费"，费用为"80"，生效时间为"2026-03-01"' },
|
||||
{ changeTime: '2026-02-15 16:20', opType: '添加授权人', operator: '王五', remark: '添加授权人"李四"' },
|
||||
{ changeTime: '2026-02-14 09:15', opType: '合同续签', operator: '赵六', remark: '原合同编码"JXZL20250210YW101100A"' },
|
||||
{ changeTime: '2026-02-13 10:00', opType: '终止合同', operator: '周九', remark: '终止原因"客户提前解约"' },
|
||||
{ changeTime: '2026-02-12 11:00', opType: '撤回合同', operator: '钱七', remark: '-' },
|
||||
{ changeTime: '2026-02-10 14:30', opType: '转正式合同', operator: '孙八', remark: '原合同编码"JXZL20260210YW101230B"' }
|
||||
];
|
||||
var changeHistorySorted = changeHistoryRaw.slice().sort(function(a, b) { return b.changeTime.localeCompare(a.changeTime); });
|
||||
|
||||
var scrollToCard = function(id) {
|
||||
var el = document.getElementById(id);
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
};
|
||||
|
||||
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' },
|
||||
input: { width: '100%', padding: '8px 12px', border: '1px solid #d9d9d9', borderRadius: 4, fontSize: 14 },
|
||||
inputDisabled: { backgroundColor: '#f5f5f5', color: '#666', cursor: 'default', borderColor: '#e8e8e8' },
|
||||
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 },
|
||||
tag: { display: 'inline-block', padding: '2px 8px', marginRight: 8, marginBottom: 4, backgroundColor: '#e6f7ff', color: '#1890ff', borderRadius: 4, fontSize: 12 },
|
||||
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 },
|
||||
btnDefault: { backgroundColor: '#fff', color: '#333' },
|
||||
approvalCard: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
|
||||
approvalCardHeader: { padding: '16px 20px', borderBottom: '1px solid #f0f0f0', fontSize: 16, fontWeight: 600, color: '#333', textAlign: 'center' },
|
||||
approvalCardBody: { padding: '24px 20px', display: 'flex', justifyContent: 'center' },
|
||||
stepWrap: { display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap', justifyContent: 'center' },
|
||||
stepItem: { flex: '1 1 0', minWidth: 140, maxWidth: 220, textAlign: 'center', position: 'relative' },
|
||||
stepIcon: { width: 32, height: 32, borderRadius: '50%', margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 600 },
|
||||
stepIconDone: { backgroundColor: '#52c41a', color: '#fff' },
|
||||
stepLine: { position: 'absolute', top: 16, left: '50%', right: '-50%', height: 2, backgroundColor: '#e8e8e8', zIndex: 0 },
|
||||
stepLineDone: { backgroundColor: '#52c41a' },
|
||||
stepTitle: { fontSize: 13, color: '#333', fontWeight: 500, marginBottom: 4 },
|
||||
stepDesc: { fontSize: 12, color: '#666' },
|
||||
stepStatus: { fontSize: 12, color: '#52c41a', marginTop: 4 },
|
||||
stepTime: { fontSize: 12, color: '#999', marginTop: 2 },
|
||||
attachmentRow: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 12 },
|
||||
attachmentFile: { display: 'inline-flex', alignItems: 'center', padding: '8px 12px', backgroundColor: '#f5f5f5', borderRadius: 4, border: '1px solid #d9d9d9', fontSize: 14, color: '#1890ff', cursor: 'pointer', textDecoration: 'none', fontFamily: 'inherit', margin: 0, outline: 'none' },
|
||||
attachmentFileHover: { color: '#40a9ff', borderColor: '#1890ff', backgroundColor: '#e6f7ff' },
|
||||
attachmentMeta: { fontSize: 12, color: '#999', marginLeft: 8 },
|
||||
feeSectionTitle: { fontSize: 15, fontWeight: 600, color: '#333', marginTop: 20, marginBottom: 10 },
|
||||
feeSectionTitleFirst: { marginTop: 0 },
|
||||
historyLink: { color: '#1890ff', cursor: 'pointer', background: 'none', border: 'none', padding: 0, fontSize: 14 },
|
||||
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: 640, 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 }
|
||||
};
|
||||
|
||||
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 FormItemReadOnly = function(props) {
|
||||
var colStyle = props.fullWidth ? styles.formColFull : styles.formCol;
|
||||
return React.createElement('div', { style: colStyle },
|
||||
React.createElement('label', { style: styles.label }, props.label),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, styles.inputDisabled) }, props.value || '—')
|
||||
);
|
||||
};
|
||||
|
||||
// 审批流程步骤数据（全部已通过，含审核时间 YYYY-MM-DD HH:MM）
|
||||
var approvalSteps = [
|
||||
{ title: '业务部主管', person: '姚守涛', status: '已通过', approveTime: '2026-02-16 09:30' },
|
||||
{ title: '事业部主管', person: '尚建华', status: '已通过', approveTime: '2026-02-16 10:15' },
|
||||
{ title: '财务部', person: '宋欣怡 / 吕红', status: '已通过', approveTime: '2026-02-16 11:20' },
|
||||
{ title: '法务部', person: '高洁 / 彭青松', status: '已通过', approveTime: '2026-02-16 14:00' }
|
||||
];
|
||||
|
||||
var approvalStepEls = approvalSteps.map(function(step, index) {
|
||||
var isLast = index === approvalSteps.length - 1;
|
||||
var lineStyle = Object.assign({}, styles.stepLine, step.status === '已通过' ? styles.stepLineDone : {});
|
||||
if (isLast) lineStyle.display = 'none';
|
||||
return React.createElement('div', { key: index, style: Object.assign({}, styles.stepItem, { zIndex: approvalSteps.length - index }) },
|
||||
!isLast ? React.createElement('div', { style: lineStyle }) : null,
|
||||
React.createElement('div', { style: Object.assign({}, styles.stepIcon, styles.stepIconDone) }, '✓'),
|
||||
React.createElement('div', { style: styles.stepTitle }, step.title),
|
||||
React.createElement('div', { style: styles.stepDesc }, step.person),
|
||||
React.createElement('div', { style: styles.stepStatus }, step.status),
|
||||
step.approveTime ? React.createElement('div', { style: styles.stepTime }, step.approveTime) : null
|
||||
);
|
||||
});
|
||||
|
||||
var approvalCardEl = React.createElement('div', { style: styles.approvalCard },
|
||||
React.createElement('div', { style: styles.approvalCardHeader }, '审批状态'),
|
||||
React.createElement('div', { style: styles.approvalCardBody },
|
||||
React.createElement('div', { style: styles.stepWrap }, approvalStepEls)
|
||||
)
|
||||
);
|
||||
|
||||
// 模拟只读数据（与新增合同同结构）
|
||||
var mockCustomer = { name: '嘉兴某某物流有限公司', creditCode: '91330400MA2XXXXX1', address: '浙江省嘉兴市南湖区科技大道1号', contact: '张三', phone: '13800138001', email: 'zhangsan@example.com', companyName: '嘉兴某某物流有限公司', companyPhone: '0571-88888888', mailingAddress: '浙江省嘉兴市南湖区科技大道1号', bank: '中国工商银行嘉兴分行', bankAccount: '6222021234567890123', taxId: '91330400MA2XXXXX1' };
|
||||
var contractOriginal = { name: '租赁合同-原件.pdf', size: '1.2 MB', uploadTime: '2026-02-16 14:30' };
|
||||
var mockContract = { projectName: '嘉兴氢能运输项目', contractCode: 'JXZL20260216YW101235A', contractType: '正式合同', effectiveDate: '2026-02-16', paymentMethod: '预付', mainVehicleModels: '型号A1、型号A2', endDate: '2027-02-16', paymentPeriod: '1个月', signingCompany: '嘉兴羚牛', deliveryRegion: '浙江省 / 嘉兴市', deliveryLocation: '嘉兴市南湖区科技大道1号', remarks: '' };
|
||||
var mockAuthorized = [{ name: '张三', phone: '13800138001', idCard: '330102199001011234' }];
|
||||
var mockRentalOrders = [
|
||||
{ brand: '品牌A', model: '型号A1', plateNo: '浙A10001', vin: 'L1234567890ABCDEF', monthRent: '8000', serviceFee: '500', deposit: '10000', remark: '', serviceItems: [{ project: '保养费用', fee: '200', effectiveDate: '2026-03-01' }, { project: '清洗费', fee: '80', effectiveDate: '2026-03-01' }] },
|
||||
{ brand: '品牌A', model: '型号A2', plateNo: '浙B20002', vin: 'L2234567890ABCDEF', monthRent: '8000', serviceFee: '500', deposit: '10000', remark: '', serviceItems: [{ project: '清洗费', fee: '80', effectiveDate: '2026-03-01' }] }
|
||||
];
|
||||
var mockRentalSummary = { vehicleCount: 2, totalRentService: '17000.00', totalDeposit: '20000.00', hydrogenPrepay: '5000.00' };
|
||||
var mockHydrogen = { bearer: '客户', paymentMethod: '预付', hydrogenPrepay: '5000', returnPrice: '80' };
|
||||
var mockFeeTemplate = '标准费用模板A';
|
||||
var mockBillingMethod = '按自然月结算';
|
||||
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 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) {
|
||||
var td1 = React.createElement('td', { style: styles.rentalTd }, r.project);
|
||||
var td2 = React.createElement('td', { style: styles.rentalTd }, r.standard);
|
||||
var td3 = React.createElement('td', { style: styles.rentalTd }, r.serviceFee);
|
||||
return React.createElement('tr', { key: i }, td1, td2, td3);
|
||||
};
|
||||
var makeFeeRow5 = function(r, i) {
|
||||
var td1 = React.createElement('td', { style: styles.rentalTd }, r.category);
|
||||
var td2 = React.createElement('td', { style: styles.rentalTd }, r.part);
|
||||
var td3 = React.createElement('td', { style: styles.rentalTd }, r.partName);
|
||||
var td4 = React.createElement('td', { style: styles.rentalTd }, r.qty);
|
||||
var td5 = React.createElement('td', { style: styles.rentalTd }, r.feeDetail);
|
||||
return React.createElement('tr', { key: i }, td1, td2, td3, td4, td5);
|
||||
};
|
||||
var feeCertRows = feeTemplateCertFees.map(makeFeeRow3);
|
||||
var feePenaltyRows = feeTemplatePenaltyFees.map(makeFeeRow3);
|
||||
var feeConsumablesRows = feeTemplateConsumables.map(makeFeeRow5);
|
||||
var feeOtherRows = feeTemplateOtherFees.map(makeFeeRow3);
|
||||
var feeCertTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader3), React.createElement('tbody', null, feeCertRows));
|
||||
var feePenaltyTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader3), React.createElement('tbody', null, feePenaltyRows));
|
||||
var feeConsumablesTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader5), React.createElement('tbody', null, feeConsumablesRows));
|
||||
var feeOtherTable = React.createElement('table', { style: styles.rentalTable }, React.createElement('thead', null, feeTableHeader3), React.createElement('tbody', null, feeOtherRows));
|
||||
var feeTemplateBody = React.createElement('div', null,
|
||||
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 customerFields = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItemReadOnly, { label: '客户名称', value: mockCustomer.name }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户统一信用代码', value: mockCustomer.creditCode }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户地址', value: mockCustomer.address }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户联系人', value: mockCustomer.contact }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户电话', value: mockCustomer.phone }),
|
||||
React.createElement(FormItemReadOnly, { label: '客户电子邮箱', value: mockCustomer.email }),
|
||||
React.createElement(FormItemReadOnly, { label: '企业名称', value: mockCustomer.companyName }),
|
||||
React.createElement(FormItemReadOnly, { label: '企业电话', value: mockCustomer.companyPhone }),
|
||||
React.createElement(FormItemReadOnly, { label: '邮寄地址', value: mockCustomer.mailingAddress }),
|
||||
React.createElement(FormItemReadOnly, { label: '开户银行', value: mockCustomer.bank }),
|
||||
React.createElement(FormItemReadOnly, { label: '银行账号', value: mockCustomer.bankAccount }),
|
||||
React.createElement(FormItemReadOnly, { label: '纳税人识别号', value: mockCustomer.taxId }),
|
||||
React.createElement(FormItemReadOnly, { label: '业务部门', value: '业务1部' }),
|
||||
React.createElement(FormItemReadOnly, { label: '业务负责人', value: '张经理' })
|
||||
);
|
||||
|
||||
var contractFormRow1 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItemReadOnly, { label: '项目名称', value: mockContract.projectName }),
|
||||
React.createElement(FormItemReadOnly, { label: '合同编码', value: mockContract.contractCode }),
|
||||
React.createElement(FormItemReadOnly, { label: '合同类型', value: mockContract.contractType }),
|
||||
React.createElement(FormItemReadOnly, { label: '生效日期', value: mockContract.effectiveDate }),
|
||||
React.createElement(FormItemReadOnly, { label: '付款方式', value: mockContract.paymentMethod }),
|
||||
React.createElement(FormItemReadOnly, { label: '主要车型', value: mockContract.mainVehicleModels }),
|
||||
React.createElement(FormItemReadOnly, { label: '结束日期', value: mockContract.endDate }),
|
||||
React.createElement(FormItemReadOnly, { label: '付款周期', value: mockContract.paymentPeriod }),
|
||||
React.createElement(FormItemReadOnly, { label: '签约公司', value: mockContract.signingCompany }),
|
||||
React.createElement('div', { style: styles.formCol },
|
||||
React.createElement(FormItemReadOnly, { label: '交车区域', value: mockContract.deliveryRegion }),
|
||||
React.createElement('div', null,
|
||||
React.createElement('label', { style: styles.label }, '合同原件'),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, styles.inputDisabled, { padding: '8px 12px' }) },
|
||||
contractOriginal
|
||||
? React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' } },
|
||||
React.createElement('a', { href: '#', style: { color: '#1890ff', cursor: 'pointer', textDecoration: 'none' }, onClick: function(e) { e.preventDefault(); window.open('#', '_blank'); } }, contractOriginal.name),
|
||||
(contractOriginal.size || contractOriginal.uploadTime) ? React.createElement('span', { style: { color: '#999', fontSize: 12 } }, (contractOriginal.size || '') + (contractOriginal.size && contractOriginal.uploadTime ? ' · ' : '') + (contractOriginal.uploadTime || '')) : null
|
||||
)
|
||||
: '—'
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(FormItemReadOnly, { label: '交车地点', value: mockContract.deliveryLocation })
|
||||
);
|
||||
var contractFormRow2 = React.createElement('div', { style: styles.formRow }, React.createElement(FormItemReadOnly, { label: '备注', fullWidth: true, value: mockContract.remarks || '—' }));
|
||||
|
||||
var authorizedContent = React.createElement('div', null,
|
||||
React.createElement('div', { style: { display: 'flex', gap: 12, alignItems: 'center', marginBottom: 8 } },
|
||||
React.createElement('span', { style: { flex: 1, fontWeight: 600, fontSize: 13 } }, '被授权人姓名'),
|
||||
React.createElement('span', { style: { flex: 1, fontWeight: 600, fontSize: 13 } }, '被授权人联系电话'),
|
||||
React.createElement('span', { style: { flex: 1, fontWeight: 600, fontSize: 13 } }, '被授权人身份证')
|
||||
),
|
||||
mockAuthorized.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.input, styles.inputDisabled, { flex: 1 }) }, item.name),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, styles.inputDisabled, { flex: 1 }) }, item.phone),
|
||||
React.createElement('div', { style: Object.assign({}, styles.input, 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 }, mockRentalSummary.vehicleCount + ' 辆')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '租金及服务费合计'), React.createElement('span', { style: styles.summaryListValue }, mockRentalSummary.totalRentService + ' 元')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '保证金总额'), React.createElement('span', { style: styles.summaryListValue }, mockRentalSummary.totalDeposit + ' 元')),
|
||||
React.createElement('div', { style: styles.summaryListItem }, React.createElement('span', { style: styles.summaryListLabel }, '氢气预付款金额'), React.createElement('span', { style: styles.summaryListValue }, mockRentalSummary.hydrogenPrepay + ' 元'))
|
||||
);
|
||||
var Popover = window.antd && window.antd.Popover;
|
||||
var renderServiceItemsPopover = function(row) {
|
||||
var items = row.serviceItems || [];
|
||||
if (items.length === 0) {
|
||||
return React.createElement('div', { style: { padding: 12, minWidth: 320, fontSize: 13 } }, '暂无服务项明细');
|
||||
}
|
||||
var thead = React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: styles.rentalTh }, '服务项目'),
|
||||
React.createElement('th', { style: styles.rentalTh }, '费用'),
|
||||
React.createElement('th', { style: styles.rentalTh }, '生效时间')
|
||||
)
|
||||
);
|
||||
var tbody = React.createElement('tbody', null,
|
||||
items.map(function(si, i) {
|
||||
return React.createElement('tr', { key: i },
|
||||
React.createElement('td', { style: styles.rentalTd }, si.project || '—'),
|
||||
React.createElement('td', { style: styles.rentalTd }, si.fee != null && si.fee !== '' ? si.fee + ' 元' : '—'),
|
||||
React.createElement('td', { style: styles.rentalTd }, si.effectiveDate || '—')
|
||||
);
|
||||
})
|
||||
);
|
||||
return React.createElement('div', { style: { padding: 8 } },
|
||||
React.createElement('table', { style: styles.rentalTable }, thead, tbody)
|
||||
);
|
||||
};
|
||||
var rentalTableBody = mockRentalOrders.map(function(row, idx) {
|
||||
var servicePopoverContent = renderServiceItemsPopover(row);
|
||||
var serviceCell = Popover
|
||||
? React.createElement(Popover, { content: servicePopoverContent, title: '服务项明细', trigger: 'click' },
|
||||
React.createElement('span', { style: { color: '#1890ff', cursor: 'pointer', fontSize: 13 } }, '查看'))
|
||||
: React.createElement('span', {
|
||||
style: { color: '#1890ff', cursor: 'pointer', fontSize: 13 },
|
||||
onClick: function() { setServicePopoverRow(servicePopoverRow === idx ? null : 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 }, serviceCell),
|
||||
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: 80 }, '服务费项目'),
|
||||
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(FormItemReadOnly, { label: '氢费承担方', value: mockHydrogen.bearer }),
|
||||
React.createElement(FormItemReadOnly, { label: '付款方式', value: mockHydrogen.paymentMethod }),
|
||||
React.createElement(FormItemReadOnly, { label: '氢气预付款', value: mockHydrogen.hydrogenPrepay + ' 元' }),
|
||||
React.createElement(FormItemReadOnly, { label: '退还车氢气单价', value: mockHydrogen.returnPrice + ' 元' })
|
||||
);
|
||||
var rentalContent = React.createElement('div', null, rentalSummaryEl, React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } }, rentalTableEl), hydrogenReadOnly);
|
||||
|
||||
var feeContent = React.createElement('div', null, React.createElement('div', { style: styles.formRow }, React.createElement(FormItemReadOnly, { label: '选择费用模板', value: mockFeeTemplate })), feeTemplateBody);
|
||||
|
||||
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' } }, mockBillingMethod));
|
||||
|
||||
var attachmentContent = React.createElement('div', { style: styles.card },
|
||||
React.createElement('div', { style: styles.cardHeader },
|
||||
React.createElement('span', { style: styles.cardTitle }, '盖章合同附件')
|
||||
),
|
||||
React.createElement('div', { style: styles.cardBody },
|
||||
React.createElement('div', { style: styles.attachmentRow },
|
||||
React.createElement('button', {
|
||||
type: 'button',
|
||||
style: Object.assign({}, styles.attachmentFile, attachmentHover ? styles.attachmentFileHover : {}),
|
||||
onMouseEnter: function() { setAttachmentHover(true); },
|
||||
onMouseLeave: function() { setAttachmentHover(false); },
|
||||
onClick: function() { window.open('#', '_blank'); }
|
||||
}, '📄 ' + uploadedFile.name, React.createElement('span', { style: styles.attachmentMeta }, uploadedFile.size + ' · ' + uploadedFile.uploadTime))
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
var historyTableRows = changeHistorySorted.map(function(row, index) {
|
||||
return React.createElement('tr', { key: index },
|
||||
React.createElement('td', { style: styles.rentalTd }, index + 1),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.changeTime),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.opType),
|
||||
React.createElement('td', { style: styles.rentalTd }, row.operator),
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement('button', { type: 'button', style: styles.historyLink, onClick: function() { window.open('#', '_blank'); } }, '查看变更前记录')),
|
||||
React.createElement('td', { style: Object.assign({}, styles.rentalTd, { verticalAlign: 'top', whiteSpace: 'pre-line' }) }, row.remark)
|
||||
);
|
||||
});
|
||||
var historyTable = React.createElement('table', { style: styles.rentalTable },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: styles.rentalTh, width: 60 }, '序号'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 140 }, '变更时间'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 100 }, '操作类型'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 90 }, '操作人'),
|
||||
React.createElement('th', { style: styles.rentalTh, width: 120 }, '原始记录'),
|
||||
React.createElement('th', { style: styles.rentalTh }, '备注')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null, historyTableRows)
|
||||
);
|
||||
var changeHistoryContent = React.createElement('div', { style: styles.card },
|
||||
React.createElement('div', { style: styles.cardHeader },
|
||||
React.createElement('span', { style: styles.cardTitle }, '合同变更历史记录')
|
||||
),
|
||||
React.createElement('div', { style: styles.cardBody },
|
||||
React.createElement('div', { style: { overflowX: 'auto' } }, historyTable)
|
||||
)
|
||||
);
|
||||
|
||||
var reqSpecBlock = { marginBottom: 8 };
|
||||
var reqSpecH2 = { fontSize: 14, fontWeight: 600, marginTop: 16, marginBottom: 8, color: '#333' };
|
||||
var reqSpecH2First = { marginTop: 0 };
|
||||
var reqSpecP = { fontSize: 13, lineHeight: 1.6, marginBottom: 6, color: '#555' };
|
||||
var reqSpecLi = { fontSize: 13, lineHeight: 1.6, marginBottom: 4, marginLeft: 20, color: '#555' };
|
||||
var reqSpecDoc = React.createElement('div', { style: { padding: '0 4px' } },
|
||||
React.createElement('div', { style: reqSpecBlock }, React.createElement('div', { style: Object.assign({}, reqSpecH2, reqSpecH2First) }, '1.其他部分与新增租赁合同相同，只是不可编辑，新增以下几块内容：')),
|
||||
React.createElement('div', { style: reqSpecBlock }, React.createElement('div', { style: reqSpecH2 }, '2.审批状态卡片：'), React.createElement('div', { style: reqSpecP }, '显示所有审批步骤及当前节点、审批人姓名、已通过/待审批/驳回三种状态；最下方为对应审批节点审批操作时间，格式为 YYYY-MM-DD HH:MM。')),
|
||||
React.createElement('div', { style: reqSpecBlock }, React.createElement('div', { style: reqSpecH2 }, '3.盖章合同附件：'), React.createElement('div', { style: reqSpecP }, '当法务未完成审核并上传盖章合同时，盖章合同附件显示为暂无附件；已上传盖章合同时，显示合同文件名称、文件大小、上传时间（YYYY-MM-DD HH:MM）。')),
|
||||
React.createElement('div', { style: reqSpecBlock }, React.createElement('div', { style: reqSpecH2 }, '4.合同变更历史记录：'), React.createElement('div', { style: reqSpecP }, '列表字段为序号、变更时间、操作类型、操作人、原始记录、备注。'), React.createElement('div', { style: reqSpecLi }, '4.1.序号：1.2.3...以此类推；'), React.createElement('div', { style: reqSpecLi }, '4.2.变更时间：YYYY-MM-DD HH:MM 格式，倒序展示数据；'), React.createElement('div', { style: reqSpecLi }, '4.3.操作类型：包括变更内容、合同续签、撤回合同、添加授权人、附加费用、转正式合同、终止合同；'), React.createElement('div', { style: reqSpecLi }, '4.4.操作人：记录对应操作用户名称；'), React.createElement('div', { style: reqSpecLi }, '4.5.原始记录：显示查看变更前记录，点击会新开页查看未修改前合同原始记录；'), React.createElement('div', { style: reqSpecLi }, '4.6.备注：'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.1.操作类型为变更内容时，显示："字段名"由"xx"修改为"xxx"；'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.2.操作类型为合同续签时，显示：原合同编码"xxxxxxxxx"；'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.3.操作类型为撤回合同时，显示：-；'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.4.操作类型为添加授权人时，显示：添加授权人"xxx"；'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.5.操作类型为附加费用时，显示：添加服务项目"xxxxxx"，费用为"xxxxxxx"，生效时间为"YYYY-MM-DD"，如果有多条附加费用，支持多行显示；'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.6.操作类型为转正式合同时，显示：原合同编码"xxxxxxxx"；'), React.createElement('div', { style: Object.assign({}, reqSpecLi, { marginLeft: 36 }) }, '4.6.7.操作类型为终止合同时，显示：终止原因"xxxxxx"。'))
|
||||
);
|
||||
var reqSpecModalContent = reqSpecOpen ? React.createElement('div', { style: styles.modalMask, onClick: function(e) { if (e.target === e.currentTarget) setReqSpecOpen(false); } }, React.createElement('div', { style: styles.modalBox, onClick: function(e) { e.stopPropagation(); } }, React.createElement('div', { style: styles.modalHeader }, '需求说明'), React.createElement('div', { style: Object.assign({}, styles.modalBody, { maxHeight: '70vh', padding: '20px 24px' }) }, reqSpecDoc), React.createElement('div', { style: { padding: '12px 20px', borderTop: '1px solid #f0f0f0', textAlign: 'right' } }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function() { setReqSpecOpen(false); } }, '关闭')))) : null;
|
||||
|
||||
var servicePopoverContentCustom = !Popover && servicePopoverRow !== null && mockRentalOrders[servicePopoverRow]
|
||||
? React.createElement('div', { style: styles.modalMask, onClick: function(e) { if (e.target === e.currentTarget) setServicePopoverRow(null); } },
|
||||
React.createElement('div', { style: Object.assign({}, styles.modalBox, { maxWidth: 480 }), onClick: function(e) { e.stopPropagation(); } },
|
||||
React.createElement('div', { style: styles.modalHeader }, '服务项明细'),
|
||||
React.createElement('div', { style: Object.assign({}, styles.modalBody, { padding: '16px 20px' }) }, renderServiceItemsPopover(mockRentalOrders[servicePopoverRow])),
|
||||
React.createElement('div', { style: { padding: '12px 20px', borderTop: '1px solid #f0f0f0', textAlign: 'right' } }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault), onClick: function() { setServicePopoverRow(null); } }, '关闭'))
|
||||
))
|
||||
: null;
|
||||
|
||||
return React.createElement('div', { style: styles.page },
|
||||
servicePopoverContentCustom,
|
||||
React.createElement('div', { style: { 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' } }, '查看租赁合同'))),
|
||||
approvalCardEl,
|
||||
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-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', { style: styles.anchorItem, onClick: function() { scrollToCard('card-attachment'); } }, '盖章合同附件'),
|
||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-history'); } }, '合同变更历史记录')
|
||||
),
|
||||
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, 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('div', { id: 'card-attachment', style: { marginTop: 16 } }, attachmentContent),
|
||||
React.createElement('div', { id: 'card-history', style: { marginTop: 16 } }, changeHistoryContent),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
reqSpecModalContent,
|
||||
React.createElement('div', { style: styles.footer }, React.createElement('button', { style: Object.assign({}, styles.btn, styles.btnDefault) }, '返回'))
|
||||
);
|
||||
};
|
||||
1064
web端/车辆租赁合同/车辆租赁合同.jsx
Normal file
1064
web端/车辆租赁合同/车辆租赁合同.jsx
Normal file
File diff suppressed because it is too large
Load Diff
690
web端/车辆租赁合同/转正式合同.jsx
Normal file
690
web端/车辆租赁合同/转正式合同.jsx
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user