web端：财务管理提车应收款-收款、车辆租赁合同与替换车管理改动同步
- 财务管理：新增提车应收款-收款.jsx，移除旧提车应收款/收费明细/首付款页面；项目信息与开票信息改为直接展示 - 车辆租赁合同：列表租赁车辆数/已交车辆数及气泡列调整；续签/转正式合同去除合同编码，交车区域·交车地点·合同原件布局调整 - 运维-车辆业务：新增替换车管理、替换车管理-新增/查看/编辑 Made-with: Cursor
This commit is contained in:
王冕
@@ -0,0 +1,599 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 财务管理 - 提车应收款 - 收款（2026年3月4日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useCallback = React.useCallback;
|
||||
var useMemo = React.useMemo;
|
||||
var useEffect = React.useEffect;
|
||||
var useRef = React.useRef;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Select = antd.Select;
|
||||
var Table = antd.Table;
|
||||
var Popover = antd.Popover;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
var Option = Select.Option;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var setRequirementModalVisible = requirementModalVisible[1];
|
||||
var edited = useState(false);
|
||||
var setEdited = edited[1];
|
||||
var submitConfirmVisible = useState(false);
|
||||
var setSubmitConfirmVisible = submitConfirmVisible[1];
|
||||
var cancelConfirmVisible = useState(false);
|
||||
var setCancelConfirmVisible = cancelConfirmVisible[1];
|
||||
var servicePopoverRowIndex = useState(null);
|
||||
var setServicePopoverRowIndex = servicePopoverRowIndex[1];
|
||||
|
||||
// 模拟：项目信息（实际由路由/接口拉取）
|
||||
var projectInfo = useMemo(function () {
|
||||
return {
|
||||
contractCode: 'HT-ZL-2025-001',
|
||||
contractType: '正式合同',
|
||||
projectName: '嘉兴氢能示范项目',
|
||||
customerName: '嘉兴某某物流有限公司',
|
||||
paymentMethod: '预付',
|
||||
paymentCycle: '6个月',
|
||||
contractStart: '2025-01-15',
|
||||
contractEnd: '2026-01-14',
|
||||
businessDept: '业务1部',
|
||||
businessPerson: '张经理'
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 模拟：车辆应收款明细（租赁合同中所有车辆），付款周期 6 个月 => 应收月租金 = 月租金*6
|
||||
var paymentCycleMonths = 6;
|
||||
var vehicleRows = useState([
|
||||
{
|
||||
key: 'v1',
|
||||
index: 1,
|
||||
brand: '东风',
|
||||
model: 'DFH1180',
|
||||
plateNo: '浙A12345',
|
||||
monthRent: 5000,
|
||||
receivableRent: 30000,
|
||||
actualRent: '30000.00',
|
||||
rentRemark: '',
|
||||
receivableDeposit: 10000,
|
||||
serviceItems: [
|
||||
{ name: '代处理费用', receivable: 200, actual: '200.00', discount: '0.00', remark: '' },
|
||||
{ name: '保险上浮', receivable: 500, actual: '500.00', discount: '0.00', remark: '' }
|
||||
],
|
||||
receivableService: 700,
|
||||
actualService: '700.00',
|
||||
discountAmount: '0.00',
|
||||
discountRemark: '',
|
||||
discountProof: [],
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
key: 'v2',
|
||||
index: 2,
|
||||
brand: '福田',
|
||||
model: 'BJ1180',
|
||||
plateNo: '',
|
||||
monthRent: 4500,
|
||||
receivableRent: 27000,
|
||||
actualRent: '27000.00',
|
||||
rentRemark: '',
|
||||
receivableDeposit: 8000,
|
||||
serviceItems: [{ name: '保养费用', receivable: 300, actual: '300.00', discount: '0.00', remark: '' }],
|
||||
receivableService: 300,
|
||||
actualService: '300.00',
|
||||
discountAmount: '0.00',
|
||||
discountRemark: '',
|
||||
discountProof: [],
|
||||
selected: true
|
||||
}
|
||||
]);
|
||||
var vehicles = vehicleRows[0];
|
||||
var setVehicles = vehicleRows[1];
|
||||
|
||||
// 氢费预付款（非预付款模式时不显示）
|
||||
var hasHydrogenPrepay = true;
|
||||
var hydrogenRow = useState({
|
||||
receivable: '3580.00',
|
||||
actual: '3580.00',
|
||||
discount: '0.00',
|
||||
discountRemark: ''
|
||||
});
|
||||
var hydrogen = hydrogenRow[0];
|
||||
var setHydrogen = hydrogenRow[1];
|
||||
|
||||
var invoiceMethod = useState('先开票后付款');
|
||||
var setInvoiceMethod = invoiceMethod[1];
|
||||
var invoiceRemark = useState('');
|
||||
var setInvoiceRemark = invoiceRemark[1];
|
||||
|
||||
// 开票信息（客户信息 + 开票时间/附件/开票人）
|
||||
var invoiceInfo = useMemo(function () {
|
||||
return {
|
||||
customerName: '嘉兴某某物流有限公司',
|
||||
taxId: '91330400MA2XXXXX1',
|
||||
address: '浙江省嘉兴市南湖区科技大道1号',
|
||||
phone: '0571-88888888',
|
||||
account: '6222021234567890123',
|
||||
bank: '中国工商银行嘉兴分行',
|
||||
mailingAddress: '浙江省嘉兴市南湖区科技大道1号',
|
||||
invoiceTime: '',
|
||||
invoiceFile: '',
|
||||
invoicePerson: '-'
|
||||
};
|
||||
}, []);
|
||||
|
||||
var toggleVehicleSelected = useCallback(function (key) {
|
||||
setEdited(true);
|
||||
setVehicles(function (prev) {
|
||||
return prev.map(function (r) {
|
||||
if (r.key === key) return Object.assign({}, r, { selected: !r.selected });
|
||||
return r;
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
var toggleAllSelected = useCallback(function (checked) {
|
||||
setEdited(true);
|
||||
setVehicles(function (prev) {
|
||||
return prev.map(function (r) { return Object.assign({}, r, { selected: !!checked }); });
|
||||
});
|
||||
}, []);
|
||||
|
||||
var updateVehicle = useCallback(function (key, field, value) {
|
||||
setEdited(true);
|
||||
setVehicles(function (prev) {
|
||||
return prev.map(function (r) {
|
||||
if (r.key !== key) return r;
|
||||
var next = Object.assign({}, r);
|
||||
next[field] = value;
|
||||
if (field === 'serviceItems') {
|
||||
var total = 0;
|
||||
(value || []).forEach(function (s) { total += parseFloat(s.actual) || 0; });
|
||||
next.actualService = total.toFixed(2);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
var updateServiceItem = useCallback(function (vehicleKey, itemIndex, field, value) {
|
||||
setEdited(true);
|
||||
setVehicles(function (prev) {
|
||||
return prev.map(function (r) {
|
||||
if (r.key !== vehicleKey) return r;
|
||||
var items = (r.serviceItems || []).slice();
|
||||
if (!items[itemIndex]) return r;
|
||||
items[itemIndex] = Object.assign({}, items[itemIndex], { [field]: value });
|
||||
var total = 0;
|
||||
items.forEach(function (s) { total += parseFloat(s.actual) || 0; });
|
||||
return Object.assign({}, r, { serviceItems: items, actualService: total.toFixed(2) });
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
var totals = useMemo(function () {
|
||||
var selected = vehicles.filter(function (v) { return v.selected; });
|
||||
var receivableRent = 0, actualRent = 0, receivableDeposit = 0, receivableService = 0, actualService = 0, discountTotal = 0;
|
||||
selected.forEach(function (v) {
|
||||
receivableRent += Number(v.receivableRent) || 0;
|
||||
actualRent += parseFloat(v.actualRent) || 0;
|
||||
receivableDeposit += Number(v.receivableDeposit) || 0;
|
||||
receivableService += Number(v.receivableService) || 0;
|
||||
actualService += parseFloat(v.actualService) || 0;
|
||||
discountTotal += parseFloat(v.discountAmount) || 0;
|
||||
});
|
||||
return {
|
||||
receivableRent: receivableRent.toFixed(2),
|
||||
actualRent: actualRent.toFixed(2),
|
||||
receivableDeposit: receivableDeposit.toFixed(2),
|
||||
receivableService: receivableService.toFixed(2),
|
||||
actualService: actualService.toFixed(2),
|
||||
discountTotal: discountTotal.toFixed(2)
|
||||
};
|
||||
}, [vehicles]);
|
||||
|
||||
var receivableTotal = useMemo(function () {
|
||||
return (parseFloat(totals.receivableRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.receivableService)).toFixed(2);
|
||||
}, [totals]);
|
||||
|
||||
var actualTotal = useMemo(function () {
|
||||
return (parseFloat(totals.actualRent) + parseFloat(totals.receivableDeposit) + parseFloat(totals.actualService) - parseFloat(totals.discountTotal)).toFixed(2);
|
||||
}, [totals]);
|
||||
|
||||
var receivablePopoverContent = useMemo(function () {
|
||||
return React.createElement('div', { style: { padding: 8, minWidth: 220 } },
|
||||
React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '项目'),
|
||||
React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '金额')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null,
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆月租金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableRent + ' 元')),
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆保证金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableDeposit + ' 元')),
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收服务费'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableService + ' 元'))
|
||||
)
|
||||
)
|
||||
);
|
||||
}, [totals]);
|
||||
|
||||
var actualPopoverContent = useMemo(function () {
|
||||
return React.createElement('div', { style: { padding: 8, minWidth: 220 } },
|
||||
React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 13 } },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '项目'),
|
||||
React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '金额')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null,
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计实收车辆月租金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.actualRent + ' 元')),
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计应收车辆保证金'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.receivableDeposit + ' 元')),
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计实收服务费'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.actualService + ' 元')),
|
||||
React.createElement('tr', null, React.createElement('td', { style: { padding: '6px 8px' } }, '总计减免金额'), React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, totals.discountTotal + ' 元'))
|
||||
)
|
||||
)
|
||||
);
|
||||
}, [totals]);
|
||||
|
||||
var handleSubmit = useCallback(function () {
|
||||
setSubmitConfirmVisible(true);
|
||||
}, []);
|
||||
|
||||
var handleSubmitConfirm = useCallback(function () {
|
||||
message.success('提车应收款已提交审核');
|
||||
setSubmitConfirmVisible(false);
|
||||
if (window.__receivableSubmit) window.__receivableSubmit();
|
||||
}, []);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
message.success('保存成功');
|
||||
if (window.__receivableBack) window.__receivableBack(); else message.info('跳转至提车应收款列表页（原型）');
|
||||
}, []);
|
||||
|
||||
var handleCancel = useCallback(function () {
|
||||
if (edited[0]) {
|
||||
setCancelConfirmVisible(true);
|
||||
} else {
|
||||
if (window.__receivableBack) window.__receivableBack(); else message.info('返回提车应收款列表（原型）');
|
||||
}
|
||||
}, [edited[0]]);
|
||||
|
||||
var handleCancelConfirm = useCallback(function () {
|
||||
setCancelConfirmVisible(false);
|
||||
if (window.__receivableBack) window.__receivableBack(); else message.info('返回提车应收款列表（原型）');
|
||||
}, []);
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
var highlightStyle = { color: '#1890ff', fontWeight: 600, cursor: 'pointer' };
|
||||
var valueStyle = { color: 'rgba(0,0,0,0.85)', fontSize: 14, lineHeight: '22px', minHeight: 22 };
|
||||
|
||||
var requirementContent = '提车应收款（2026年3月4日版本）\n一个「数字化资产ONEOS运管平台」中的「财务管理」「提车应收款」「收款」模块\n#面包屑：财务管理-提车应收款-收款；\n\n页面分为3个卡片。\n1.项目信息：合同编码、合同类型、项目名称、客户名称、付款方式、付款周期、合同生效时间、合同结束时间、业务部门、业务负责人。\n2.提车应收款信息：应收款总额/实收款总额（点击弹出气泡卡片）；车辆应收款明细表（全选/多选、序号、品牌、型号、车牌号、应收/实收车辆月租金、车辆租金备注、应收车辆保证金、服务费项目、应收/实收服务费、减免金额、减免金额备注、减免证明）；总计行；氢费预付款（可选）；开票方式、开票备注。\n3.开票信息：客户名称、纳税人识别号、地址、电话、账户、开户行、邮寄地址、开票时间、发票附件、开票人。\n4.底部：提交审核、保存、取消及二次确认。';
|
||||
|
||||
var allSelected = vehicles.length > 0 && vehicles.every(function (v) { return v.selected; });
|
||||
var indeterminate = vehicles.some(function (v) { return v.selected; }) && !allSelected;
|
||||
var headerCheckRef = useRef(null);
|
||||
useEffect(function () {
|
||||
if (headerCheckRef.current) headerCheckRef.current.indeterminate = indeterminate;
|
||||
}, [indeterminate]);
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '财务管理' },
|
||||
{ title: '提车应收款' },
|
||||
{ title: '收款' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '项目信息', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同编码'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.contractCode || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同类型'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.contractType || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.projectName || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.customerName || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '付款方式'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.paymentMethod || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '付款周期'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.paymentCycle || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同生效时间'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.contractStart || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同结束时间'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.contractEnd || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务部门'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.businessDept || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务负责人'),
|
||||
React.createElement('div', { style: valueStyle }, projectInfo.businessPerson || '-')
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '提车应收款信息', style: cardStyle },
|
||||
React.createElement('div', { style: { marginBottom: 16, display: 'flex', gap: 24, alignItems: 'center' } },
|
||||
React.createElement(Popover, { content: receivablePopoverContent, title: '应收款明细', trigger: 'click' },
|
||||
React.createElement('span', { style: highlightStyle }, '应收款总额：', receivableTotal, ' 元')
|
||||
),
|
||||
React.createElement(Popover, { content: actualPopoverContent, title: '实收款明细', trigger: 'click' },
|
||||
React.createElement('span', { style: highlightStyle }, '实收款总额：', actualTotal, ' 元')
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { overflowX: 'auto', marginBottom: 16 } },
|
||||
React.createElement('table', { style: { width: '100%', minWidth: 1400, borderCollapse: 'collapse', fontSize: 13 } },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', { style: { backgroundColor: '#fafafa' } },
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 48 } },
|
||||
React.createElement('input', { type: 'checkbox', checked: allSelected, ref: headerCheckRef, onChange: function (e) { toggleAllSelected(e.target.checked); } })
|
||||
),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 50 } }, '序号'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 80 } }, '品牌'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '型号'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 100 } }, '车牌号'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 120 } }, '应收车辆月租金'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 120 } }, '实收车辆月租金'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 100 } }, '车辆租金备注'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '减免金额'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '减免金额备注'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 110 } }, '应收车辆保证金'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 90 } }, '服务费项目'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 90 } }, '应收服务费'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'right', border: '1px solid #f0f0f0', width: 90 } }, '实收服务费'),
|
||||
React.createElement('th', { style: { padding: '10px 12px', textAlign: 'left', border: '1px solid #f0f0f0', width: 100 } }, '减免证明')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null,
|
||||
vehicles.map(function (row) {
|
||||
var disabled = !row.selected;
|
||||
var servicePopover = React.createElement('div', { style: { padding: 8, minWidth: 360 } },
|
||||
React.createElement('div', { style: { fontWeight: 600, marginBottom: 8 } }, '服务费项目'),
|
||||
React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 12 } },
|
||||
React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '服务项目'),
|
||||
React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '应收费用'),
|
||||
React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '实收费用'),
|
||||
React.createElement('th', { style: { textAlign: 'right', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '减免费用'),
|
||||
React.createElement('th', { style: { textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, '备注')
|
||||
)
|
||||
),
|
||||
React.createElement('tbody', null,
|
||||
(row.serviceItems || []).map(function (s, si) {
|
||||
return React.createElement('tr', { key: si },
|
||||
React.createElement('td', { style: { padding: '6px 8px' } }, s.name),
|
||||
React.createElement('td', { style: { textAlign: 'right', padding: '6px 8px' } }, (s.receivable != null ? s.receivable : '') + ' 元'),
|
||||
React.createElement('td', { style: { padding: '6px 8px' } },
|
||||
React.createElement(Input, { size: 'small', value: s.actual, disabled: disabled, suffix: '元', onChange: function (e) { updateServiceItem(row.key, si, 'actual', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '6px 8px' } },
|
||||
React.createElement(Input, { size: 'small', value: s.discount, disabled: disabled, suffix: '元', onChange: function (e) { updateServiceItem(row.key, si, 'discount', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '6px 8px' } },
|
||||
React.createElement(Input, { size: 'small', value: s.remark, disabled: disabled, placeholder: '备注', onChange: function (e) { updateServiceItem(row.key, si, 'remark', e.target.value); } })
|
||||
)
|
||||
);
|
||||
})
|
||||
)
|
||||
)
|
||||
);
|
||||
var proofList = row.discountProof || [];
|
||||
var onProofUpload = function (e) {
|
||||
var files = e.target.files;
|
||||
if (!files || !files.length) return;
|
||||
setEdited(true);
|
||||
var next = proofList.slice();
|
||||
for (var i = 0; i < files.length; i++) { next.push({ name: files[i].name }); }
|
||||
updateVehicle(row.key, 'discountProof', next);
|
||||
e.target.value = '';
|
||||
};
|
||||
var removeProof = function (idx) {
|
||||
setEdited(true);
|
||||
var next = (row.discountProof || []).slice();
|
||||
next.splice(idx, 1);
|
||||
updateVehicle(row.key, 'discountProof', next);
|
||||
};
|
||||
return React.createElement('tr', { key: row.key },
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement('input', { type: 'checkbox', checked: row.selected, onChange: function () { toggleVehicleSelected(row.key); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.index),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.brand),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.model),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } }, row.plateNo || '-'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableRent || 0) + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Input, { size: 'small', value: row.actualRent, disabled: disabled, suffix: '元', onChange: function (e) { updateVehicle(row.key, 'actualRent', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Input, { size: 'small', value: row.rentRemark, disabled: disabled, onChange: function (e) { updateVehicle(row.key, 'rentRemark', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Input, { size: 'small', value: row.discountAmount, disabled: disabled, suffix: '元', onChange: function (e) { updateVehicle(row.key, 'discountAmount', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Input, { size: 'small', value: row.discountRemark, disabled: disabled, onChange: function (e) { updateVehicle(row.key, 'discountRemark', e.target.value); } })
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableDeposit || 0) + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
React.createElement(Popover, { content: servicePopover, title: null, trigger: 'click' },
|
||||
React.createElement(Button, { type: 'link', size: 'small', disabled: disabled }, '管理')
|
||||
)
|
||||
),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.receivableService || 0) + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, (row.actualService || '0.00') + ' 元'),
|
||||
React.createElement('td', { style: { padding: '8px 12px', border: '1px solid #f0f0f0' } },
|
||||
disabled ? '-' : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 4 } },
|
||||
proofList.map(function (p, pidx) {
|
||||
return React.createElement('div', { key: pidx, style: { display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 } },
|
||||
React.createElement('span', { style: { flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' } }, p.name || '附件'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', danger: true, style: { padding: 0, minWidth: 'auto' }, onClick: function () { removeProof(pidx); } }, '删除')
|
||||
);
|
||||
}),
|
||||
React.createElement('span', null,
|
||||
React.createElement('input', { type: 'file', multiple: true, accept: '.jpg,.jpeg,.png,.pdf', style: { display: 'none' }, id: 'proof-' + row.key, onChange: onProofUpload }),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { var el = document.getElementById('proof-' + row.key); if (el) el.click(); } }, '上传')
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
})
|
||||
),
|
||||
React.createElement('tfoot', null,
|
||||
React.createElement('tr', { style: { backgroundColor: '#fafafa', fontWeight: 500 } },
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' }, colSpan: 5 }, '总计'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableRent + ' 元'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.actualRent + ' 元'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.discountTotal + ' 元'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableDeposit + ' 元'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } }),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.receivableService + ' 元'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0', textAlign: 'right' } }, totals.actualService + ' 元'),
|
||||
React.createElement('td', { style: { padding: '10px 12px', border: '1px solid #f0f0f0' } })
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
hasHydrogenPrepay ? React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { fontSize: 14, fontWeight: 500, marginBottom: 8 } }, '氢费预付款情况'),
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 16, maxWidth: 800 } },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '氢费预付款应收金额'),
|
||||
React.createElement(Input, { value: hydrogen.receivable + ' 元', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '氢费预付款实收金额'),
|
||||
React.createElement(Input, { value: hydrogen.actual, suffix: '元', onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { actual: e.target.value }); }); } })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '减免金额'),
|
||||
React.createElement(Input, { value: hydrogen.discount, suffix: '元', onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { discount: e.target.value }); }); } })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '减免金额备注'),
|
||||
React.createElement(Input, { value: hydrogen.discountRemark, onChange: function (e) { setHydrogen(function (p) { return Object.assign({}, p, { discountRemark: e.target.value }); }); } })
|
||||
)
|
||||
)
|
||||
) : null,
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 24px', marginTop: 16 } },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '开票方式'),
|
||||
React.createElement(Select, { style: { width: '100%' }, value: invoiceMethod[0], onChange: function (v) { setInvoiceMethod(v); }, placeholder: '请选择' },
|
||||
React.createElement(Option, { value: '先开票后付款' }, '先开票后付款'),
|
||||
React.createElement(Option, { value: '先付款后开票' }, '先付款后开票')
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||||
React.createElement('div', { style: labelStyle }, '开票备注'),
|
||||
React.createElement(Input.TextArea, { value: invoiceRemark[0], onChange: function (e) { setInvoiceRemark(e.target.value); setEdited(true); }, rows: 3, placeholder: '请输入开票项目、税率以及其他备注信息，财务将以此进行开票', style: { width: '100%' } })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '开票信息', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.customerName || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '纳税人识别号'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.taxId || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '地址'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.address || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '电话'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.phone || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '账户'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.account || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '开户行'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.bank || '-')
|
||||
),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||||
React.createElement('div', { style: labelStyle }, '邮寄地址'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.mailingAddress || '-')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '开票时间'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.invoiceTime || '未上传')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '发票附件'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.invoiceFile || '未上传')
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '开票人'),
|
||||
React.createElement('div', { style: valueStyle }, invoiceInfo.invoicePerson || '-')
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '确认',
|
||||
open: submitConfirmVisible[0],
|
||||
onCancel: function () { setSubmitConfirmVisible(false); },
|
||||
onOk: handleSubmitConfirm,
|
||||
okText: '确认',
|
||||
cancelText: '取消'
|
||||
}, React.createElement('div', null, '请仔细核对提车首付款实收金额，点击确认则进入工作流')),
|
||||
React.createElement(Modal, {
|
||||
title: '确认取消',
|
||||
open: cancelConfirmVisible[0],
|
||||
onCancel: function () { setCancelConfirmVisible(false); },
|
||||
onOk: handleCancelConfirm,
|
||||
okText: '确认',
|
||||
cancelText: '取消'
|
||||
}, React.createElement('div', null, '取消将会丢失所有已填写数据，是否确认？')),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { setRequirementModalVisible(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
@@ -1,278 +0,0 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 提车应收款 - 收费明细（租赁费用管理-提车应收款，第一步由业务填写，antd 规范）
|
||||
|
||||
const Component = function() {
|
||||
var useState = React.useState;
|
||||
var useCallback = React.useCallback;
|
||||
var useMemo = React.useMemo;
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Table = antd.Table;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
var App = antd.App;
|
||||
|
||||
var mockProject = useMemo(function() {
|
||||
return { contractCode: 'HT-ZL-2025-001', contractType: '正式合同', projectName: '北京朝阳区租赁项目', customerName: '某某科技有限公司', paymentMethod: '预付', paymentCycle: '1个月', department: '运营部', responsible: '张三' };
|
||||
}, []);
|
||||
var mockVehicleList = useMemo(function() {
|
||||
return [
|
||||
{ brand: '奔驰', model: 'E300L', plateNo: '京A12345', monthlyRent: '8000.00', deposit: '2000.00', serviceItems: [{ name: '保养服务', fee: '300.00', remark: '' }, { name: '保险', fee: '200.00', remark: '' }] },
|
||||
{ brand: '宝马', model: '530Li', plateNo: '京B67890', monthlyRent: '7000.00', deposit: '1500.00', serviceItems: [{ name: '保养服务', fee: '250.00', remark: '' }] }
|
||||
];
|
||||
}, []);
|
||||
var mockHydrogen = useMemo(function() {
|
||||
return { bearer: '客户', paymentMethod: '预付', prepaymentAmount: '3580.00' };
|
||||
}, []);
|
||||
var mockInvoice = useMemo(function() {
|
||||
return { customerName: '某某科技有限公司', taxId: '91330400MA2XXXXX1', address: '浙江省嘉兴市南湖区科技大道1号', phone: '0571-88888888', account: '6222021234567890123', bank: '中国工商银行嘉兴分行', mailingAddress: '浙江省嘉兴市南湖区科技大道1号' };
|
||||
}, []);
|
||||
|
||||
var vehicleRowsState = useState([]);
|
||||
var vehicleRows = vehicleRowsState[0];
|
||||
var setVehicleRows = vehicleRowsState[1];
|
||||
var serviceModalRowState = useState(null);
|
||||
var serviceModalRow = serviceModalRowState[0];
|
||||
var setServiceModalRow = serviceModalRowState[1];
|
||||
var requirementVisibleState = useState(false);
|
||||
var requirementVisible = requirementVisibleState[0];
|
||||
var setRequirementVisible = requirementVisibleState[1];
|
||||
var cancelConfirmVisibleState = useState(false);
|
||||
var cancelConfirmVisible = cancelConfirmVisibleState[0];
|
||||
var setCancelConfirmVisible = cancelConfirmVisibleState[1];
|
||||
|
||||
var requirementContent = '「车辆管理系统」中的「租赁费用管理」模块下「提车应收款」中「收费明细」模块，第一步由业务填写；\n\n#提车应收款-收款明细\n\n整个页面从上至下为项目信息、车辆首付款、氢费预付款、开票信息4个卡片模块组成；\n\n1.项目信息：\n1.1.上方为表单，显示合同编码、合同类型、项目名称、客户名称、付款方式、付款周期、业务部门、业务负责人；\n1.1.1.合同编码：显示租赁合同编号；\n1.1.2.合同类型：显示租赁合同类型，类型有正式合同/试用合同；\n1.1.3.项目名称：显示租赁合同项目名称；\n1.1.4.客户名称：显示租赁合同客户名称；\n1.1.5.付款方式：显示租赁合同付款方式，类型有预付/后付；\n1.1.6.付款周期：显示付款周期，类型有1个月-12个月；\n1.1.7.业务部门：显示租赁合同对应业务部门；\n1.1.8.业务负责人：显示租赁合同对应业务负责人；\n\n2.提车应收款：\n2.1.上方为提车应收款应收总额；\n2.1.1.提车应收款总额：显示总金额，格式为xx.xx元，计算方式为：所有应付车辆租金+所有应付保证金+所有应付服务费-所有减免金额；\n2.2.车辆账单：品牌/型号/车牌号/应收车辆租金/车辆租金备注/应收保证金/服务费项目/应收服务费/减免金额/减免金额备注\n2.2.1.-2.2.7. 品牌至服务费项目（点击管理弹出卡片）；\n2.1.8.应收服务费：根据服务费项目计算总和；\n2.1.9.减免金额：选填，默认为0；\n2.1.10.减免金额备注：选填；\n\n3.氢费预付款：\n3.1.氢费应收总额（=应收金额-减免金额）；氢费预付款应收金额、减免金额、减免金额备注；\n\n4.开票信息：\n4.1.开票金额（=提车应收款总额+氢费应收总额）；\n4.2.客户名称、纳税人识别号、地址、电话、账户、开户行、邮寄地址、开票时间(待开票)、发票附件(待上传)、备注(无)；\n\n5.页面底部：提交审核、取消；取消二次确认；\n\n6.审批流程：标准/非标情况说明。';
|
||||
|
||||
var hydrogenFormState = useState(function() {
|
||||
var isCustomerPrepay = (mockHydrogen.bearer === '客户' && mockHydrogen.paymentMethod === '预付');
|
||||
var paid = isCustomerPrepay ? (mockHydrogen.prepaymentAmount || '0.00') : '0.00';
|
||||
return { paidTotal: paid, discount: '0.00', discountRemark: '' };
|
||||
});
|
||||
var hydrogenForm = hydrogenFormState[0];
|
||||
var setHydrogenForm = hydrogenFormState[1];
|
||||
var hydrogenPayableTotal = useMemo(function() {
|
||||
var paid = parseFloat(hydrogenForm.paidTotal) || 0;
|
||||
var discount = parseFloat(hydrogenForm.discount) || 0;
|
||||
var v = paid - discount;
|
||||
return (v >= 0 ? v : 0).toFixed(2);
|
||||
}, [hydrogenForm.paidTotal, hydrogenForm.discount]);
|
||||
|
||||
function formatTwoDecimals(val) {
|
||||
var n = parseFloat(String(val).replace(/[^\d.-]/g, ''));
|
||||
if (isNaN(n)) return '0.00';
|
||||
return n.toFixed(2);
|
||||
}
|
||||
|
||||
React.useEffect(function() {
|
||||
var rows = mockVehicleList.map(function(v) {
|
||||
var serviceItems = (v.serviceItems || []).map(function(s) {
|
||||
return { name: s.name, fee: s.fee || '', remark: s.remark || '' };
|
||||
});
|
||||
return {
|
||||
brand: v.brand,
|
||||
model: v.model,
|
||||
plateNo: v.plateNo || '-',
|
||||
payableRent: v.monthlyRent || '',
|
||||
rentRemark: '',
|
||||
deposit: v.deposit || '',
|
||||
serviceItems: serviceItems,
|
||||
discount: '0',
|
||||
discountRemark: ''
|
||||
};
|
||||
});
|
||||
setVehicleRows(rows);
|
||||
}, [mockVehicleList]);
|
||||
|
||||
function getRowServiceTotal(row) {
|
||||
var total = 0;
|
||||
var list = row.serviceItems || [];
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var n = parseFloat(list[i].fee);
|
||||
if (!isNaN(n)) total += n;
|
||||
}
|
||||
return total.toFixed(2);
|
||||
}
|
||||
var totalPayable = useMemo(function() {
|
||||
var rentSum = 0, depositSum = 0, serviceSum = 0, discountSum = 0;
|
||||
for (var i = 0; i < vehicleRows.length; i++) {
|
||||
var r = vehicleRows[i];
|
||||
rentSum += parseFloat(r.payableRent) || 0;
|
||||
depositSum += parseFloat(r.deposit) || 0;
|
||||
serviceSum += parseFloat(getRowServiceTotal(r)) || 0;
|
||||
discountSum += parseFloat(r.discount) || 0;
|
||||
}
|
||||
return (rentSum + depositSum + serviceSum - discountSum).toFixed(2);
|
||||
}, [vehicleRows]);
|
||||
var invoiceAmount = useMemo(function() {
|
||||
return (parseFloat(totalPayable) + parseFloat(hydrogenPayableTotal)).toFixed(2);
|
||||
}, [totalPayable, hydrogenPayableTotal]);
|
||||
|
||||
var handleVehicleChange = useCallback(function(rowIndex, field, value) {
|
||||
setVehicleRows(function(prev) {
|
||||
var next = prev.slice();
|
||||
var row = next[rowIndex] ? Object.assign({}, next[rowIndex]) : next[rowIndex];
|
||||
row[field] = value;
|
||||
next[rowIndex] = row;
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
var handleServiceItemChange = useCallback(function(rowIndex, itemIndex, field, value) {
|
||||
setVehicleRows(function(prev) {
|
||||
var next = prev.slice();
|
||||
var row = next[rowIndex] ? Object.assign({}, next[rowIndex]) : next[rowIndex];
|
||||
var items = (row.serviceItems || []).slice();
|
||||
var item = items[itemIndex] ? Object.assign({}, items[itemIndex]) : items[itemIndex];
|
||||
item[field] = value;
|
||||
items[itemIndex] = item;
|
||||
row.serviceItems = items;
|
||||
next[rowIndex] = row;
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
var handleSubmit = useCallback(function() {
|
||||
var err = [];
|
||||
for (var i = 0; i < vehicleRows.length; i++) {
|
||||
var r = vehicleRows[i];
|
||||
if (!r.payableRent || String(r.payableRent).trim() === '') err.push('第' + (i + 1) + '行应收车辆租金');
|
||||
if (!r.deposit || String(r.deposit).trim() === '') err.push('第' + (i + 1) + '行应收保证金');
|
||||
var items = r.serviceItems || [];
|
||||
for (var j = 0; j < items.length; j++) {
|
||||
if (!items[j].fee || String(items[j].fee).trim() === '') err.push('第' + (i + 1) + '行服务费项「' + (items[j].name || '') + '」应收费用');
|
||||
}
|
||||
}
|
||||
if (!hydrogenForm.paidTotal || String(hydrogenForm.paidTotal).trim() === '') err.push('氢费预付款应收金额');
|
||||
if (!hydrogenForm.discount || String(hydrogenForm.discount).trim() === '') err.push('氢费减免金额');
|
||||
if (err.length > 0) {
|
||||
message.warning('请填写必填项：' + err.join('、'));
|
||||
return;
|
||||
}
|
||||
message.success('提交成功，该条记录已移至审核中心，审核状态为待审核');
|
||||
}, [vehicleRows, hydrogenForm]);
|
||||
var handleCancelClick = useCallback(function() { setCancelConfirmVisible(true); }, []);
|
||||
var handleCancelConfirm = useCallback(function(confirmed) {
|
||||
setCancelConfirmVisible(false);
|
||||
if (confirmed) message.info('已返回提车应收款列表');
|
||||
}, []);
|
||||
|
||||
var layoutStyle = { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSize: 14 };
|
||||
var formRowStyle = { display: 'flex', flexWrap: 'wrap', marginBottom: 16 };
|
||||
var formColStyle = { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 };
|
||||
var labelStyle = { display: 'block', marginBottom: 6, color: 'rgba(0,0,0,0.85)' };
|
||||
var labelRequiredStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var totalLineStyle = { marginBottom: 16, fontSize: 14 };
|
||||
var totalAmountStyle = { color: '#1890ff', fontWeight: 600, fontSize: 16 };
|
||||
var footerStyle = { position: 'fixed', bottom: 0, left: 0, right: 0, padding: '12px 24px', backgroundColor: '#fff', borderTop: '1px solid #e8e8e8', display: 'flex', gap: 12, zIndex: 99 };
|
||||
|
||||
var FormItem = function(props) {
|
||||
return React.createElement('div', { style: props.colStyle || formColStyle },
|
||||
React.createElement('label', { style: labelStyle }, props.required ? React.createElement('span', { style: labelRequiredStyle }, '*') : null, props.label),
|
||||
props.children
|
||||
);
|
||||
};
|
||||
|
||||
var projectFields = React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: mockProject.contractCode, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '合同类型' }, React.createElement(Input, { value: mockProject.contractType, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '项目名称' }, React.createElement(Input, { value: mockProject.projectName, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: mockProject.customerName, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '付款方式' }, React.createElement(Input, { value: mockProject.paymentMethod, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '付款周期' }, React.createElement(Input, { value: mockProject.paymentCycle, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '业务部门' }, React.createElement(Input, { value: mockProject.department, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '业务负责人' }, React.createElement(Input, { value: mockProject.responsible, disabled: true, style: { width: '100%' } }))
|
||||
);
|
||||
|
||||
var vehicleColumns = [
|
||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 90 },
|
||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 100 },
|
||||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 100 },
|
||||
{ title: '应收车辆租金', key: 'payableRent', width: 120, render: function(_, r, idx) { return React.createElement(Input, { value: r.payableRent, onChange: function(e) { handleVehicleChange(idx, 'payableRent', e.target.value); }, style: { width: '100%' }, addonAfter: '元' }); } },
|
||||
{ title: '车辆租金备注', key: 'rentRemark', width: 110, render: function(_, r, idx) { return React.createElement(Input, { value: r.rentRemark || '', onChange: function(e) { handleVehicleChange(idx, 'rentRemark', e.target.value); }, placeholder: '选填', style: { width: '100%' } }); } },
|
||||
{ title: '应收保证金', dataIndex: 'deposit', key: 'deposit', width: 100 },
|
||||
{ title: '服务费项目', key: 'service', width: 90, render: function(_, r, idx) { return React.createElement(Button, { type: 'link', size: 'small', onClick: function() { setServiceModalRow(idx); } }, '管理'); } },
|
||||
{ title: '应收服务费', key: 'serviceTotal', width: 100, render: function(_, r) { return getRowServiceTotal(r); } },
|
||||
{ title: '减免金额', key: 'discount', width: 100, render: function(_, r, idx) { return React.createElement(Input, { value: r.discount, onChange: function(e) { handleVehicleChange(idx, 'discount', e.target.value); }, placeholder: '0', style: { width: '100%' } }); } },
|
||||
{ title: '减免金额备注', key: 'discountRemark', width: 110, render: function(_, r, idx) { return React.createElement(Input, { value: r.discountRemark || '', onChange: function(e) { handleVehicleChange(idx, 'discountRemark', e.target.value); }, placeholder: '选填', style: { width: '100%' } }); } }
|
||||
];
|
||||
var vehicleTable = React.createElement(Table, {
|
||||
rowKey: function(_, i) { return String(i); },
|
||||
columns: vehicleColumns,
|
||||
dataSource: vehicleRows,
|
||||
pagination: false,
|
||||
size: 'small',
|
||||
scroll: { x: 1000 }
|
||||
});
|
||||
|
||||
var hydrogenFields = React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '氢费预付款应收金额', required: true }, React.createElement(Input, { value: hydrogenForm.paidTotal, onChange: function(e) { setHydrogenForm(function(prev) { return Object.assign({}, prev, { paidTotal: e.target.value }); }); }, onBlur: function() { setHydrogenForm(function(prev) { return Object.assign({}, prev, { paidTotal: formatTwoDecimals(prev.paidTotal) }); }); }, placeholder: '0.00', addonAfter: '元', style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '减免金额', required: true }, React.createElement(Input, { value: hydrogenForm.discount, onChange: function(e) { setHydrogenForm(function(prev) { return Object.assign({}, prev, { discount: e.target.value }); }); }, onBlur: function() { setHydrogenForm(function(prev) { return Object.assign({}, prev, { discount: formatTwoDecimals(prev.discount) }); }); }, placeholder: '0.00', addonAfter: '元', style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '减免金额备注' }, React.createElement(Input, { value: hydrogenForm.discountRemark || '', onChange: function(e) { setHydrogenForm(function(prev) { return Object.assign({}, prev, { discountRemark: e.target.value }); }); }, placeholder: '选填', style: { width: '100%' } }))
|
||||
);
|
||||
|
||||
var invoiceFields = React.createElement('div', { style: formRowStyle },
|
||||
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: mockInvoice.customerName, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '纳税人识别号' }, React.createElement(Input, { value: mockInvoice.taxId, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '地址' }, React.createElement(Input, { value: mockInvoice.address, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '电话' }, React.createElement(Input, { value: mockInvoice.phone, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '账户' }, React.createElement(Input, { value: mockInvoice.account, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '开户行' }, React.createElement(Input, { value: mockInvoice.bank, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '邮寄地址' }, React.createElement(Input, { value: mockInvoice.mailingAddress, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '开票时间' }, React.createElement(Input, { value: '待开票', disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '发票附件' }, React.createElement(Input, { value: '待上传', disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '备注' }, React.createElement(Input, { value: '无', disabled: true, style: { width: '100%' } }))
|
||||
);
|
||||
|
||||
var serviceModalDataSource = serviceModalRow !== null && vehicleRows[serviceModalRow] ? (vehicleRows[serviceModalRow].serviceItems || []) : [];
|
||||
var serviceModalColumns = [
|
||||
{ title: '服务项目', dataIndex: 'name', key: 'name', width: 140 },
|
||||
{ title: '应收费用', key: 'fee', width: 140, render: function(_, item, itemIndex) { return React.createElement(Input, { value: item.fee, onChange: function(e) { handleServiceItemChange(serviceModalRow, itemIndex, 'fee', e.target.value); }, style: { width: '100%' } }); } },
|
||||
{ title: '服务费用备注', key: 'remark', width: 180, render: function(_, item, itemIndex) { return React.createElement(Input, { value: item.remark || '', onChange: function(e) { handleServiceItemChange(serviceModalRow, itemIndex, 'remark', e.target.value); }, placeholder: '选填', style: { width: '100%' } }); } }
|
||||
];
|
||||
|
||||
var serviceModalOpen = serviceModalRow !== null;
|
||||
var serviceModalContent = serviceModalOpen ? React.createElement(Table, { rowKey: function(_, i) { return String(i); }, columns: serviceModalColumns, dataSource: serviceModalDataSource, pagination: false, size: 'small' }) : null;
|
||||
var serviceModalFooter = React.createElement(Button, { onClick: function() { setServiceModalRow(null); } }, '关闭');
|
||||
var requirementModalFooter = React.createElement(Button, { onClick: function() { setRequirementVisible(false); } }, '关闭');
|
||||
var cancelModalOk = function() { handleCancelConfirm(true); };
|
||||
var cancelModalCancel = function() { setCancelConfirmVisible(false); };
|
||||
|
||||
return React.createElement(App, null,
|
||||
React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, { items: [{ title: '租赁费用管理' }, { title: '提车应收款' }, { title: '收费明细' }] }),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function() { setRequirementVisible(true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '项目信息', style: { marginBottom: 16 } }, projectFields),
|
||||
React.createElement(Card, { title: '提车应收款', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: totalLineStyle },
|
||||
React.createElement('span', { style: { marginRight: 8 } }, '提车应收款总额：'),
|
||||
React.createElement('span', { style: totalAmountStyle }, totalPayable + ' 元')
|
||||
),
|
||||
vehicleTable
|
||||
),
|
||||
React.createElement(Card, { title: '氢费预付款', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: totalLineStyle },
|
||||
React.createElement('span', { style: { marginRight: 8 } }, '氢费应收总额：'),
|
||||
React.createElement('span', { style: totalAmountStyle }, hydrogenPayableTotal + ' 元')
|
||||
),
|
||||
hydrogenFields
|
||||
),
|
||||
React.createElement(Card, { title: '开票信息', style: { marginBottom: 80 } },
|
||||
React.createElement('div', { style: totalLineStyle },
|
||||
React.createElement('span', { style: { marginRight: 8 } }, '开票金额：'),
|
||||
React.createElement('span', { style: totalAmountStyle }, invoiceAmount + ' 元')
|
||||
),
|
||||
invoiceFields
|
||||
),
|
||||
React.createElement('div', { style: footerStyle },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleCancelClick }, '取消')
|
||||
),
|
||||
React.createElement(Modal, { title: '服务费项目', open: serviceModalOpen, onCancel: function() { setServiceModalRow(null); }, footer: serviceModalFooter, destroyOnClose: true }, serviceModalContent),
|
||||
React.createElement(Modal, { title: '需求说明', open: requirementVisible, onCancel: function() { setRequirementVisible(false); }, width: 720, footer: requirementModalFooter, bodyStyle: { maxHeight: '70vh', overflow: 'auto' } }, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 14, lineHeight: 1.6 } }, requirementContent)),
|
||||
React.createElement(Modal, { title: '提示', open: cancelConfirmVisible, onCancel: cancelModalCancel, onOk: cancelModalOk, okText: '是', cancelText: '否' }, React.createElement('div', { style: { fontSize: 14 } }, '取消将会丢失所有已添加数据，是否确认取消？'))
|
||||
)
|
||||
);
|
||||
};
|
||||
-1048
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
+82
-35
File diff suppressed because one or more lines are too long
+44
-31
@@ -394,6 +394,18 @@ const Component = function() {
|
||||
next.splice(index, 1);
|
||||
setRentalOrders(next.length ? next : [{ brand: '', model: '', plateNo: '', vin: '', monthRent: '', serviceItems: [{ project: '', fee: '', effectiveDate: '' }], deposit: '', remark: '' }]);
|
||||
};
|
||||
var copyRentalRow = function(index) {
|
||||
setEdited(true);
|
||||
var row = rentalOrders[index];
|
||||
if (!row) return;
|
||||
var serviceItemsCopy = (row.serviceItems || []).map(function(si) { return { project: si.project || '', fee: si.fee || '', effectiveDate: si.effectiveDate || '' }; });
|
||||
if (serviceItemsCopy.length === 0) serviceItemsCopy = [{ project: '', fee: '', effectiveDate: '' }];
|
||||
var newRow = { brand: row.brand || '', model: row.model || '', plateNo: '', vin: '', monthRent: row.monthRent || '', serviceItems: serviceItemsCopy, deposit: row.deposit || '', remark: row.remark || '' };
|
||||
var next = rentalOrders.slice(0);
|
||||
next.splice(index + 1, 0, newRow);
|
||||
setRentalOrders(next);
|
||||
if (typeof message !== 'undefined' && message.success) message.success('已复制该行（车牌号已清空）');
|
||||
};
|
||||
var updateRentalOrder = function(index, field, value) {
|
||||
setEdited(true);
|
||||
var next = rentalOrders.slice(0);
|
||||
@@ -578,7 +590,6 @@ const Component = function() {
|
||||
|
||||
var contractFormRow1 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '项目名称', required: true, error: formErrors.projectName }, React.createElement(Input, { placeholder: '请输入项目名称', value: projectName, onChange: function(e) { setEdited(true); setProjectName(e.target.value); }, status: formErrors.projectName ? 'error' : undefined, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: contractCodeDisplay, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '合同类型', required: true, error: formErrors.contractType }, React.createElement(Select, { placeholder: '请选择合同类型', style: { width: '100%' }, value: contractType || undefined, onChange: function(v) { setEdited(true); setContractType(v || ''); }, status: formErrors.contractType ? 'error' : undefined }, React.createElement(Option, { value: '正式合同' }, '正式合同'), React.createElement(Option, { value: '试用合同' }, '试用合同'))),
|
||||
React.createElement(FormItem, { label: '生效日期', required: true, error: formErrors.effectiveDate }, React.createElement(DatePicker, { style: { width: '100%' }, format: 'YYYY-MM-DD', placeholder: '请选择生效日期', value: effectiveDate && window.moment ? window.moment(effectiveDate, 'YYYY-MM-DD') : null, onChange: function(d, dateStr) { setEdited(true); setEffectiveDate(dateStr || ''); }, status: formErrors.effectiveDate ? 'error' : undefined })),
|
||||
React.createElement(FormItem, { label: '付款方式', required: true, error: formErrors.paymentMethod }, React.createElement(Select, { placeholder: '请选择付款方式', style: { width: '100%' }, value: paymentMethod || undefined, onChange: function(v) { setEdited(true); setPaymentMethod(v || ''); }, status: formErrors.paymentMethod ? 'error' : undefined }, React.createElement(Option, { value: '预付' }, '预付'), React.createElement(Option, { value: '后付' }, '后付'))),
|
||||
@@ -586,35 +597,37 @@ const Component = function() {
|
||||
React.createElement(FormItem, { label: '结束日期', required: true, error: formErrors.endDate }, React.createElement(DatePicker, { style: { width: '100%' }, format: 'YYYY-MM-DD', placeholder: '请选择结束日期', value: endDate && window.moment ? window.moment(endDate, 'YYYY-MM-DD') : null, onChange: function(d, dateStr) { setEdited(true); setEndDate(dateStr || ''); }, status: formErrors.endDate ? 'error' : undefined })),
|
||||
React.createElement(FormItem, { label: '付款周期', required: true, error: formErrors.paymentPeriod }, React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: paymentPeriod || undefined, onChange: function(v) { setEdited(true); setPaymentPeriod(v || ''); }, status: formErrors.paymentPeriod ? 'error' : undefined }, [1,2,3,4,5,6,7,8,9,10,11,12].map(function(n) { return React.createElement(Option, { key: n, value: String(n) }, n + '个月'); }))),
|
||||
React.createElement(FormItem, { label: '签约公司', required: true, error: formErrors.signingCompany }, React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: signingCompany || undefined, onChange: function(v) { setEdited(true); setSigningCompany(v || ''); }, status: formErrors.signingCompany ? 'error' : undefined }, orgList.map(function(o, i) { return React.createElement(Option, { key: i, value: o }, o); }))),
|
||||
React.createElement('div', { style: styles.formCol },
|
||||
React.createElement(FormItem, { label: '交车区域', required: true, error: formErrors.deliveryRegion }, React.createElement('div', { id: 'delivery-region-wrap', style: { position: 'relative' } }, React.createElement(Input, { style: Object.assign({}, formErrors.deliveryRegion ? { borderColor: '#ff4d4f' } : {}, { cursor: 'pointer', caretColor: 'transparent', width: '100%' }), placeholder: '请选择省-市', value: deliveryRegionDisplay, readOnly: true, onClick: function() { setDeliveryRegionOpen(!deliveryRegionOpen); } }), deliveryRegionOpen ? React.createElement('div', { style: styles.regionCascader, onMouseDown: function() { deliveryRegionClickInsideRef.current = true; } }, React.createElement('div', { style: styles.regionCascaderCol }, regionList.map(function(r, i) { var isActive = r.province === deliveryProvince; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); setEdited(true); setDeliveryProvince(r.province); setDeliveryCity(''); } }, r.province); })), React.createElement('div', { style: styles.regionCascaderColLast }, deliveryProvince ? (regionList.find(function(x) { return x.province === deliveryProvince; }) || { cities: [] }).cities.map(function(c, i) { var isActive = c === deliveryCity; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); selectDeliveryRegion(deliveryProvince, c); } }, c); }) : React.createElement('div', { style: { padding: 16, color: '#999', fontSize: 13 } }, '请先选择省'))) : null)),
|
||||
React.createElement(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal },
|
||||
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 : '-'))
|
||||
),
|
||||
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: '交车区域', required: true, error: formErrors.deliveryRegion }, React.createElement('div', { id: 'delivery-region-wrap', style: { position: 'relative' } }, React.createElement(Input, { style: Object.assign({}, formErrors.deliveryRegion ? { borderColor: '#ff4d4f' } : {}, { cursor: 'pointer', caretColor: 'transparent', width: '100%' }), placeholder: '请选择省-市', value: deliveryRegionDisplay, readOnly: true, onClick: function() { setDeliveryRegionOpen(!deliveryRegionOpen); } }), deliveryRegionOpen ? React.createElement('div', { style: styles.regionCascader, onMouseDown: function() { deliveryRegionClickInsideRef.current = true; } }, React.createElement('div', { style: styles.regionCascaderCol }, regionList.map(function(r, i) { var isActive = r.province === deliveryProvince; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); setEdited(true); setDeliveryProvince(r.province); setDeliveryCity(''); } }, r.province); })), React.createElement('div', { style: styles.regionCascaderColLast }, deliveryProvince ? (regionList.find(function(x) { return x.province === deliveryProvince; }) || { cities: [] }).cities.map(function(c, i) { var isActive = c === deliveryCity; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); selectDeliveryRegion(deliveryProvince, c); } }, c); }) : React.createElement('div', { style: { padding: 16, color: '#999', fontSize: 13 } }, '请先选择省'))) : null))
|
||||
);
|
||||
var contractFormRow4 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '交车地点', required: true, error: formErrors.deliveryLocation }, React.createElement(Input, { placeholder: '请输入交车地点', value: deliveryLocation, onChange: function(e) { setEdited(true); setDeliveryLocation(e.target.value); }, status: formErrors.deliveryLocation ? 'error' : undefined, style: { width: '100%' } }))
|
||||
);
|
||||
var contractFormRow5 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal },
|
||||
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 : '-'))
|
||||
),
|
||||
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(); } }, '上传附件')
|
||||
)
|
||||
)
|
||||
);
|
||||
var contractFormRow2 = React.createElement('div', { style: styles.formRow }, React.createElement(FormItem, { label: '备注', fullWidth: true }, React.createElement(Input.TextArea, { placeholder: '请输入备注信息', value: remarks, onChange: function(e) { setEdited(true); setRemarks(e.target.value); }, style: styles.textarea, rows: 4 })));
|
||||
|
||||
var authorizedContent = React.createElement('div', null,
|
||||
@@ -649,7 +662,7 @@ const Component = function() {
|
||||
React.createElement('td', { style: styles.rentalTdCenter }, calcRowServiceFee(row) + ' 元'),
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement('div', { style: { display: 'flex', alignItems: 'center' } }, React.createElement(Input, { placeholder: '0.00', value: row.deposit || '', onChange: function(e) { updateRentalOrder(idx, 'deposit', e.target.value); }, style: styles.rentalInput }), React.createElement('span', { style: { marginLeft: 4, whiteSpace: 'nowrap' } }, '元'))),
|
||||
React.createElement('td', { style: styles.rentalTd }, React.createElement(Input, { placeholder: '备注', value: row.remark || '', onChange: function(e) { updateRentalOrder(idx, 'remark', e.target.value); }, style: Object.assign({}, styles.rentalInput, { width: '100%' }) })),
|
||||
React.createElement('td', { style: styles.rentalTdCenter }, React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function() { removeRentalRow(idx); } }, '删除'))
|
||||
React.createElement('td', { style: styles.rentalTdCenter }, React.createElement('div', { style: { display: 'inline-flex', gap: 4, alignItems: 'center' } }, React.createElement(Button, { type: 'link', size: 'small', onClick: function() { copyRentalRow(idx); } }, '复制'), React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function() { removeRentalRow(idx); } }, '删除')))
|
||||
);
|
||||
});
|
||||
|
||||
@@ -671,7 +684,7 @@ const Component = function() {
|
||||
var rentalTh8 = React.createElement('th', { style: Object.assign({}, styles.rentalTh, { width: 90, verticalAlign: 'middle' }) }, '服务费');
|
||||
var rentalTh9 = React.createElement('th', { style: Object.assign({}, styles.rentalTh, { width: 100 }) }, reqStar, '保证金');
|
||||
var rentalTh10 = React.createElement('th', { style: Object.assign({}, styles.rentalTh, { width: 80 }) }, '备注');
|
||||
var rentalTh11 = React.createElement('th', { style: Object.assign({}, styles.rentalTh, { width: 60, verticalAlign: 'middle' }) }, '操作');
|
||||
var rentalTh11 = React.createElement('th', { style: Object.assign({}, styles.rentalTh, { width: 90, verticalAlign: 'middle' }) }, '操作');
|
||||
var rentalTableThead = React.createElement('thead', null, React.createElement('tr', null, rentalTh1, rentalTh2, rentalTh3, rentalTh4, rentalTh5, rentalTh6, rentalTh7, rentalTh8, rentalTh9, rentalTh10, rentalTh11));
|
||||
var rentalTableTbody = React.createElement('tbody', null, rentalTableBody);
|
||||
var rentalTableEl = React.createElement('table', { style: styles.rentalTable }, rentalTableThead, rentalTableTbody);
|
||||
@@ -758,7 +771,7 @@ const Component = function() {
|
||||
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-contract', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, React.createElement('div', null, contractFormRow1, contractFormRow2))),
|
||||
React.createElement('div', { id: 'card-contract', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, React.createElement('div', null, contractFormRow1, contractFormRow4, contractFormRow5, 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)),
|
||||
|
||||
@@ -569,7 +569,6 @@ const Component = function() {
|
||||
|
||||
var contractFormRow1 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '项目名称', required: true, error: formErrors.projectName }, React.createElement(Input, { placeholder: '请输入项目名称', value: projectName, onChange: function(e) { setEdited(true); setProjectName(e.target.value); }, status: formErrors.projectName ? 'error' : undefined, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: contractCodeDisplay, disabled: true, style: { width: '100%' } })),
|
||||
React.createElement(FormItem, { label: '合同类型', required: true }, React.createElement(Select, { placeholder: '请选择合同类型', style: { width: '100%' }, value: '正式合同', disabled: true }, React.createElement(Option, { value: '正式合同' }, '正式合同'))),
|
||||
React.createElement(FormItem, { label: '生效日期', required: true, error: formErrors.effectiveDate }, React.createElement(DatePicker, { style: { width: '100%' }, format: 'YYYY-MM-DD', placeholder: '请选择生效日期', value: effectiveDate && window.moment ? window.moment(effectiveDate, 'YYYY-MM-DD') : null, onChange: function(d, dateStr) { setEdited(true); setEffectiveDate(dateStr || ''); }, status: formErrors.effectiveDate ? 'error' : undefined })),
|
||||
React.createElement(FormItem, { label: '付款方式', required: true, error: formErrors.paymentMethod }, React.createElement(Select, { placeholder: '请选择付款方式', style: { width: '100%' }, value: paymentMethod || undefined, onChange: function(v) { setEdited(true); setPaymentMethod(v || ''); }, status: formErrors.paymentMethod ? 'error' : undefined }, React.createElement(Option, { value: '预付' }, '预付'), React.createElement(Option, { value: '后付' }, '后付'))),
|
||||
@@ -577,35 +576,37 @@ const Component = function() {
|
||||
React.createElement(FormItem, { label: '结束日期', required: true, error: formErrors.endDate }, React.createElement(DatePicker, { style: { width: '100%' }, format: 'YYYY-MM-DD', placeholder: '请选择结束日期', value: endDate && window.moment ? window.moment(endDate, 'YYYY-MM-DD') : null, onChange: function(d, dateStr) { setEdited(true); setEndDate(dateStr || ''); }, status: formErrors.endDate ? 'error' : undefined })),
|
||||
React.createElement(FormItem, { label: '付款周期', required: true, error: formErrors.paymentPeriod }, React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: paymentPeriod || undefined, onChange: function(v) { setEdited(true); setPaymentPeriod(v || ''); }, status: formErrors.paymentPeriod ? 'error' : undefined }, [1,2,3,4,5,6,7,8,9,10,11,12].map(function(n) { return React.createElement(Option, { key: n, value: String(n) }, n + '个月'); }))),
|
||||
React.createElement(FormItem, { label: '签约公司', required: true, error: formErrors.signingCompany }, React.createElement(Select, { placeholder: '请选择', style: { width: '100%' }, value: signingCompany || undefined, onChange: function(v) { setEdited(true); setSigningCompany(v || ''); }, status: formErrors.signingCompany ? 'error' : undefined }, orgList.map(function(o, i) { return React.createElement(Option, { key: i, value: o }, o); }))),
|
||||
React.createElement('div', { style: styles.formCol },
|
||||
React.createElement(FormItem, { label: '交车区域', required: true, error: formErrors.deliveryRegion }, React.createElement('div', { id: 'delivery-region-wrap', style: { position: 'relative' } }, React.createElement(Input, { style: Object.assign({}, formErrors.deliveryRegion ? { borderColor: '#ff4d4f' } : {}, { cursor: 'pointer', caretColor: 'transparent', width: '100%' }), placeholder: '请选择省-市', value: deliveryRegionDisplay, readOnly: true, onClick: function() { setDeliveryRegionOpen(!deliveryRegionOpen); } }), deliveryRegionOpen ? React.createElement('div', { style: styles.regionCascader, onMouseDown: function() { deliveryRegionClickInsideRef.current = true; } }, React.createElement('div', { style: styles.regionCascaderCol }, regionList.map(function(r, i) { var isActive = r.province === deliveryProvince; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); setEdited(true); setDeliveryProvince(r.province); setDeliveryCity(''); } }, r.province); })), React.createElement('div', { style: styles.regionCascaderColLast }, deliveryProvince ? (regionList.find(function(x) { return x.province === deliveryProvince; }) || { cities: [] }).cities.map(function(c, i) { var isActive = c === deliveryCity; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); selectDeliveryRegion(deliveryProvince, c); } }, c); }) : React.createElement('div', { style: { padding: 16, color: '#999', fontSize: 13 } }, '请先选择省'))) : null)),
|
||||
React.createElement(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal },
|
||||
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: '交车区域', required: true, error: formErrors.deliveryRegion }, React.createElement('div', { id: 'delivery-region-wrap', style: { position: 'relative' } }, React.createElement(Input, { style: Object.assign({}, formErrors.deliveryRegion ? { borderColor: '#ff4d4f' } : {}, { cursor: 'pointer', caretColor: 'transparent', width: '100%' }), placeholder: '请选择省-市', value: deliveryRegionDisplay, readOnly: true, onClick: function() { setDeliveryRegionOpen(!deliveryRegionOpen); } }), deliveryRegionOpen ? React.createElement('div', { style: styles.regionCascader, onMouseDown: function() { deliveryRegionClickInsideRef.current = true; } }, React.createElement('div', { style: styles.regionCascaderCol }, regionList.map(function(r, i) { var isActive = r.province === deliveryProvince; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); setEdited(true); setDeliveryProvince(r.province); setDeliveryCity(''); } }, r.province); })), React.createElement('div', { style: styles.regionCascaderColLast }, deliveryProvince ? (regionList.find(function(x) { return x.province === deliveryProvince; }) || { cities: [] }).cities.map(function(c, i) { var isActive = c === deliveryCity; return React.createElement('div', { key: i, style: Object.assign({}, styles.regionCascaderItem, isActive ? { backgroundColor: '#e6f7ff', color: '#1890ff' } : {}), onMouseEnter: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function(e) { if (!isActive) e.currentTarget.style.backgroundColor = 'transparent'; }, onMouseDown: function(e) { e.preventDefault(); selectDeliveryRegion(deliveryProvince, c); } }, c); }) : React.createElement('div', { style: { padding: 16, color: '#999', fontSize: 13 } }, '请先选择省'))) : null))
|
||||
);
|
||||
var contractFormRow4 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '交车地点', required: true, error: formErrors.deliveryLocation }, React.createElement(Input, { placeholder: '请输入交车地点', value: deliveryLocation, onChange: function(e) { setEdited(true); setDeliveryLocation(e.target.value); }, status: formErrors.deliveryLocation ? 'error' : undefined, style: { width: '100%' } }))
|
||||
);
|
||||
var contractFormRow5 = React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal },
|
||||
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(); } }, '上传附件')
|
||||
)
|
||||
)
|
||||
);
|
||||
var contractFormRow2 = React.createElement('div', { style: styles.formRow }, React.createElement(FormItem, { label: '备注', fullWidth: true }, React.createElement(Input.TextArea, { placeholder: '请输入备注信息', value: remarks, onChange: function(e) { setEdited(true); setRemarks(e.target.value); }, style: styles.textarea, rows: 4 })));
|
||||
|
||||
var authorizedContent = React.createElement('div', null,
|
||||
@@ -841,7 +842,7 @@ const Component = function() {
|
||||
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-contract', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, React.createElement('div', null, contractFormRow1, contractFormRow2))),
|
||||
React.createElement('div', { id: 'card-contract', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '合同基本信息', collapsed: cc2, setCollapsed: setCc2 }, React.createElement('div', null, contractFormRow1, contractFormRow4, contractFormRow5, 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)),
|
||||
|
||||
+71
-22
@@ -51,6 +51,7 @@ const Component = function() {
|
||||
});
|
||||
|
||||
var _vehiclePopoverRecord = useState(null);
|
||||
var _deliveredPopoverRecord = useState(null);
|
||||
var _authorizedModalVisible = useState(false);
|
||||
var _authorizedModalRecord = useState(null);
|
||||
var _authorizedList = useState([{ name: '', phone: '', idCard: '' }]);
|
||||
@@ -140,8 +141,8 @@ const Component = function() {
|
||||
projectName: '嘉兴氢能示范项目',
|
||||
vehicleCount: 2,
|
||||
vehicles: [
|
||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '浙A12345', actualDelivery: '2025-01-10 09:00' },
|
||||
{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '-', actualDelivery: '2025-01-12 14:30' }
|
||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '浙A12345', actualDelivery: '2025-01-10 09:00', deliveryPerson: '张运维' },
|
||||
{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '-', actualDelivery: '2025-01-12 14:30', deliveryPerson: '李运维' }
|
||||
],
|
||||
approvalStatus: '未提交',
|
||||
contractStatus: '草稿',
|
||||
@@ -166,7 +167,7 @@ const Component = function() {
|
||||
projectName: '上海物流租赁项目',
|
||||
vehicleCount: 1,
|
||||
vehicles: [
|
||||
{ vehicleType: '公务用车/小客车-小型普通客车', brand: '品牌C', model: '型号C1', plateNo: '沪D66666', actualDelivery: '2025-02-01 11:00' }
|
||||
{ vehicleType: '公务用车/小客车-小型普通客车', brand: '品牌C', model: '型号C1', plateNo: '沪D66666', actualDelivery: '2025-02-01 11:00', deliveryPerson: '王运维' }
|
||||
],
|
||||
approvalStatus: '未提交',
|
||||
contractStatus: '草稿',
|
||||
@@ -191,7 +192,7 @@ const Component = function() {
|
||||
projectName: '杭州城配租赁项目',
|
||||
vehicleCount: 1,
|
||||
vehicles: [
|
||||
{ vehicleType: '4.5吨货车-轻型厢式货车', brand: '品牌A', model: '型号A2', plateNo: '浙B20002', actualDelivery: '2025-02-15 08:30' }
|
||||
{ vehicleType: '4.5吨货车-轻型厢式货车', brand: '品牌A', model: '型号A2', plateNo: '浙B20002', actualDelivery: '2025-02-15 08:30', deliveryPerson: '赵运维' }
|
||||
],
|
||||
approvalStatus: '待审批',
|
||||
contractStatus: '已提交审批',
|
||||
@@ -216,8 +217,8 @@ const Component = function() {
|
||||
projectName: '宁波冷链运输项目',
|
||||
vehicleCount: 2,
|
||||
vehicles: [
|
||||
{ vehicleType: '18吨双飞翼货车-重型厢式货车', brand: '品牌B', model: '型号B2', plateNo: '-', actualDelivery: '2025-02-16 10:00' },
|
||||
{ vehicleType: '49吨牵引车头-重型半挂牵引车', brand: '品牌D', model: '型号D1', plateNo: '浙C30003', actualDelivery: '2025-02-18 14:00' }
|
||||
{ vehicleType: '18吨双飞翼货车-重型厢式货车', brand: '品牌B', model: '型号B2', plateNo: '-', actualDelivery: '2025-02-16 10:00', deliveryPerson: '钱运维' },
|
||||
{ vehicleType: '49吨牵引车头-重型半挂牵引车', brand: '品牌D', model: '型号D1', plateNo: '浙C30003', actualDelivery: '2025-02-18 14:00', deliveryPerson: '孙运维' }
|
||||
],
|
||||
approvalStatus: '审批中',
|
||||
contractStatus: '已提交审批',
|
||||
@@ -242,7 +243,7 @@ const Component = function() {
|
||||
projectName: '苏州城配试点项目',
|
||||
vehicleCount: 1,
|
||||
vehicles: [
|
||||
{ vehicleType: '重型平板半挂车-重型平板半挂车', brand: '品牌D', model: '型号D2', plateNo: '苏E50005', actualDelivery: '2025-02-20 09:00' }
|
||||
{ vehicleType: '重型平板半挂车-重型平板半挂车', brand: '品牌D', model: '型号D2', plateNo: '苏E50005', actualDelivery: '2025-02-20 09:00', deliveryPerson: '周运维' }
|
||||
],
|
||||
approvalStatus: '审批中',
|
||||
contractStatus: '变更',
|
||||
@@ -267,9 +268,9 @@ const Component = function() {
|
||||
projectName: '南京氢能示范项目',
|
||||
vehicleCount: 3,
|
||||
vehicles: [
|
||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '苏A60006', actualDelivery: '2025-01-20 08:00' },
|
||||
{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '苏A60007', actualDelivery: '2025-01-21 10:00' },
|
||||
{ vehicleType: '35吨牵引车头-重型半挂牵引车', brand: '品牌D', model: '型号D1', plateNo: '苏A60008', actualDelivery: '2025-01-22 14:00' }
|
||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '苏A60006', actualDelivery: '2025-01-20 08:00', deliveryPerson: '吴运维' },
|
||||
{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '苏A60007', actualDelivery: '2025-01-21 10:00', deliveryPerson: '郑运维' },
|
||||
{ vehicleType: '35吨牵引车头-重型半挂牵引车', brand: '品牌D', model: '型号D1', plateNo: '苏A60008', actualDelivery: '2025-01-22 14:00', deliveryPerson: '冯运维' }
|
||||
],
|
||||
approvalStatus: '审批通过',
|
||||
contractStatus: '合同进行中',
|
||||
@@ -294,7 +295,7 @@ const Component = function() {
|
||||
projectName: '无锡试用租赁项目',
|
||||
vehicleCount: 1,
|
||||
vehicles: [
|
||||
{ vehicleType: '公务用车/小客车-小型普通客车', brand: '品牌C', model: '型号C2', plateNo: '苏B70007', actualDelivery: '2025-02-01 09:30' }
|
||||
{ vehicleType: '公务用车/小客车-小型普通客车', brand: '品牌C', model: '型号C2', plateNo: '苏B70007', actualDelivery: '2025-02-01 09:30', deliveryPerson: '陈运维' }
|
||||
],
|
||||
approvalStatus: '审批通过',
|
||||
contractStatus: '合同进行中',
|
||||
@@ -345,8 +346,8 @@ const Component = function() {
|
||||
projectName: '南通去年到期项目',
|
||||
vehicleCount: 2,
|
||||
vehicles: [
|
||||
{ vehicleType: '18吨双飞翼货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '苏F90009', actualDelivery: '2024-03-01 09:00' },
|
||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '苏F90010', actualDelivery: '2024-03-02 10:00' }
|
||||
{ vehicleType: '18吨双飞翼货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '苏F90009', actualDelivery: '2024-03-01 09:00', deliveryPerson: '褚运维' },
|
||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '苏F90010', actualDelivery: '2024-03-02 10:00', deliveryPerson: '卫运维' }
|
||||
],
|
||||
approvalStatus: '审批通过',
|
||||
contractStatus: '到期合同',
|
||||
@@ -371,7 +372,7 @@ const Component = function() {
|
||||
projectName: '镇江到期合同项目',
|
||||
vehicleCount: 1,
|
||||
vehicles: [
|
||||
{ vehicleType: '公务用车/小客车-小型普通客车', brand: '品牌C', model: '型号C1', plateNo: '苏L00100', actualDelivery: '2024-06-01 11:00' }
|
||||
{ vehicleType: '公务用车/小客车-小型普通客车', brand: '品牌C', model: '型号C1', plateNo: '苏L00100', actualDelivery: '2024-06-01 11:00', deliveryPerson: '蒋运维' }
|
||||
],
|
||||
approvalStatus: '审批通过',
|
||||
contractStatus: '已结束',
|
||||
@@ -602,12 +603,21 @@ const Component = function() {
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var tableSingleLineStyle = '.contract-list-table .ant-table-thead th,.contract-list-table .ant-table-tbody td{white-space:nowrap;}';
|
||||
|
||||
var vehicleColumns = [
|
||||
// 租赁车辆数气泡：不含实际交车日期
|
||||
var vehicleColumnsRental = [
|
||||
{ title: '车辆类型', dataIndex: 'vehicleType', key: 'vehicleType', width: 180 },
|
||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 80 },
|
||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 100 },
|
||||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 100 }
|
||||
];
|
||||
// 已交车辆数气泡：含实际交车日期，后方增加交车人
|
||||
var vehicleColumnsDelivered = [
|
||||
{ title: '车辆类型', dataIndex: 'vehicleType', key: 'vehicleType', width: 180 },
|
||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 80 },
|
||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 100 },
|
||||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', width: 100 },
|
||||
{ title: '实际交车日期', dataIndex: 'actualDelivery', key: 'actualDelivery', width: 140 }
|
||||
{ title: '实际交车日期', dataIndex: 'actualDelivery', key: 'actualDelivery', width: 140 },
|
||||
{ title: '交车人', dataIndex: 'deliveryPerson', key: 'deliveryPerson', width: 100 }
|
||||
];
|
||||
|
||||
function getMoreMenuItems(record) {
|
||||
@@ -681,19 +691,19 @@ const Component = function() {
|
||||
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 140, fixed: 'left' },
|
||||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, fixed: 'left' },
|
||||
{
|
||||
title: '车辆数',
|
||||
title: '租赁车辆数',
|
||||
key: 'vehicleCount',
|
||||
width: 90,
|
||||
width: 100,
|
||||
render: function(_, record) {
|
||||
var open = _vehiclePopoverRecord[0] && _vehiclePopoverRecord[0].id === record.id;
|
||||
var content = React.createElement('div', { style: { padding: 8 } },
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: function(r, i) { return String(i); },
|
||||
columns: vehicleColumns,
|
||||
columns: vehicleColumnsRental,
|
||||
dataSource: record.vehicles || [],
|
||||
pagination: false,
|
||||
scroll: { x: 600 }
|
||||
scroll: { x: 460 }
|
||||
})
|
||||
);
|
||||
return React.createElement(
|
||||
@@ -712,6 +722,43 @@ const Component = function() {
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '已交车辆数',
|
||||
key: 'deliveredCount',
|
||||
width: 100,
|
||||
render: function(_, record) {
|
||||
var deliveredVehicles = (record.vehicles || []).filter(function(v) {
|
||||
var d = v.actualDelivery;
|
||||
return d && String(d).trim() && d !== '-';
|
||||
});
|
||||
var deliveredCount = deliveredVehicles.length;
|
||||
var open = _deliveredPopoverRecord[0] && _deliveredPopoverRecord[0].id === record.id;
|
||||
var content = React.createElement('div', { style: { padding: 8 } },
|
||||
React.createElement(Table, {
|
||||
size: 'small',
|
||||
rowKey: function(r, i) { return String(i); },
|
||||
columns: vehicleColumnsDelivered,
|
||||
dataSource: deliveredVehicles,
|
||||
pagination: false,
|
||||
scroll: { x: 700 }
|
||||
})
|
||||
);
|
||||
return React.createElement(
|
||||
Popover,
|
||||
{
|
||||
content: content,
|
||||
title: '已交车列表',
|
||||
open: open,
|
||||
onOpenChange: function(visible) {
|
||||
if (!visible) _deliveredPopoverRecord[1](null);
|
||||
else _deliveredPopoverRecord[1](record);
|
||||
},
|
||||
trigger: 'click'
|
||||
},
|
||||
React.createElement('a', { style: { cursor: 'pointer', color: '#1890ff', fontWeight: 500 } }, deliveredCount)
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
|
||||
{ title: '合同状态', dataIndex: 'contractStatus', key: 'contractStatus', width: 110 },
|
||||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 140 },
|
||||
@@ -1028,10 +1075,11 @@ const Component = function() {
|
||||
React.createElement('div', { style: reqItemStyle }, '2.1.10.创建人：选择器，支持全选或多选，拉取所有业务相关部门下所有用户姓名；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '2.1.11.合同结束日期：日期选择器，支持单输入框内双日历选择开始-结束时间；'),
|
||||
React.createElement('div', { style: reqSectionStyle }, '3.列表：'),
|
||||
React.createElement('div', { style: reqSubStyle }, '3.1.列表展示所有租赁合同信息，字段依次为：合同编码、项目名称、车辆数、审批状态、合同状态、客户名称、签约公司、业务部门、业务负责人、合同类型、合同结束日期、客户联系人、联系电话、创建人、创建时间、更新人、最后更新时间、备注、操作；列表右上角为新增、导出；'),
|
||||
React.createElement('div', { style: reqSubStyle }, '3.1.列表展示所有租赁合同信息，字段依次为：合同编码、项目名称、租赁车辆数、已交车辆数、审批状态、合同状态、客户名称、签约公司、业务部门、业务负责人、合同类型、合同结束日期、客户联系人、联系电话、创建人、创建时间、更新人、最后更新时间、备注、操作；列表右上角为新增、导出；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '3.1.1.合同编码：显示租赁合同对应合同编码；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '3.1.2.项目名称：显示租赁合同对应项目名称；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '3.1.3.车辆数：显示车辆数，点击车辆数，显示气泡卡片，卡片中列表显示：车辆类型、品牌、型号、车牌号、实际交车日期；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '3.1.3.租赁车辆数：显示租赁车辆数，点击显示气泡卡片，卡片中列表显示：车辆类型、品牌、型号、车牌号、实际交车日期；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '3.1.4.已交车辆数：显示已交车辆数，样式与交互同租赁车辆数，点击显示气泡卡片，卡片中显示已交车列表（同租赁车辆数列表结构）；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.3.1.车辆类型：4.5吨冷链车-轻型厢式货车、18吨双飞翼货车-重型厢式货车、49吨牵引车头-重型半挂牵引车、4.5吨货车-轻型厢式货车、18吨厢式货车-重型厢式货车、重型集装箱半挂车-重型集装箱半挂车、公务用车/小客车-小型普通客车、35吨牵引车头-重型半挂牵引车、重型平板半挂车-重型平板半挂车；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.3.2.品牌：显示租赁合同中对应车辆品牌；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.3.3.型号：显示租赁合同中对应车辆型号；'),
|
||||
@@ -1043,6 +1091,7 @@ const Component = function() {
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.4.3.审批通过：发起人已提交，最终节点完成审批；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.4.4.审批驳回：发起人已提交，任意流程节点驳回，该状态下操作列支持编辑和重新提交；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.4.5.未提交：发起人仅保存，但未提交审批；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.4.6.撤回：发起人主动撤回审批流程；'),
|
||||
React.createElement('div', { style: reqItemStyle }, '3.1.5.合同状态：显示租赁合同状态，状态分为：草稿、变更、合同进行中、到期合同、已提交审批、已结束；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.5.1.草稿：发起人仅保存，但未提交审批；'),
|
||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.5.2.变更：发起人提交后，合同已通过审批的基础上，进行了「变更内容」操作，且已提交审批，但未完成最终节点审批；'),
|
||||
|
||||
@@ -0,0 +1,344 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 替换车管理 - 新增（2026年3月3日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useCallback = React.useCallback;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Select = antd.Select;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
|
||||
// 模拟：进行中的车辆租赁合同列表（选项目后反写合同信息）
|
||||
var contractList = [
|
||||
{ projectId: 'p1', projectName: '嘉兴氢能示范项目', contractCode: 'HT-ZL-2025-001', customerName: '嘉兴某某物流有限公司', contactPerson: '张三', signDate: '2025-01-15', contactPhone: '13800138001', businessDept: '业务1部', businessPerson: '张经理' },
|
||||
{ projectId: 'p2', projectName: '上海物流租赁项目', contractCode: 'HT-ZL-2025-002', customerName: '上海某某运输公司', contactPerson: '李四', signDate: '2025-02-01', contactPhone: '13800138002', businessDept: '业务2部', businessPerson: '李专员' },
|
||||
{ projectId: 'p3', projectName: '杭州城配租赁项目', contractCode: 'HT-ZL-2025-003', customerName: '杭州某某租赁有限公司', contactPerson: '王五', signDate: '2025-02-10', contactPhone: '13800138003', businessDept: '业务3部', businessPerson: '王专员' }
|
||||
];
|
||||
|
||||
// 模拟：按合同对应的已交车未还车车辆（项目 p1 下）
|
||||
var originalPlateByProject = {
|
||||
p1: [
|
||||
{ plateNo: '浙A12345', vin: 'LGHXCAE28M1234567', brand: '东风', model: 'DFH1180' },
|
||||
{ plateNo: '浙A55555', vin: 'LGHXCAE28M5555555', brand: '重汽', model: 'ZZ1160' }
|
||||
],
|
||||
p2: [
|
||||
{ plateNo: '浙B11111', vin: 'LGHXCAE28M7654321', brand: '江淮', model: 'HFC1180' }
|
||||
],
|
||||
p3: [
|
||||
{ plateNo: '浙C33333', vin: 'LGHXCAE28M8888888', brand: '东风', model: 'DFH1190' }
|
||||
]
|
||||
};
|
||||
|
||||
// 模拟：当前人员权限下已备车车辆
|
||||
var replacePlateOptions = [
|
||||
{ plateNo: '浙A67890', vin: 'LGHXCAE28M6789012', brand: '福田', model: 'BJ1180' },
|
||||
{ plateNo: '浙B22222', vin: 'LGHXCAE28M2222222', brand: '重汽', model: 'ZZ1180' },
|
||||
{ plateNo: '浙C44444', vin: 'LGHXCAE28M4444444', brand: '福田', model: 'BJ1190' },
|
||||
{ plateNo: '浙A66666', vin: 'LGHXCAE28M6666666', brand: '江淮', model: 'HFC1190' },
|
||||
{ plateNo: '浙F88888', vin: 'LGHXCAE28M8888888', brand: '东风', model: 'DFH1180' }
|
||||
];
|
||||
|
||||
var projectOptions = contractList.map(function (c) {
|
||||
return { value: c.projectId, label: c.projectName };
|
||||
});
|
||||
|
||||
var formState = useState({
|
||||
projectId: undefined,
|
||||
contractCode: '',
|
||||
customerName: '',
|
||||
contactPerson: '',
|
||||
signDate: '',
|
||||
contactPhone: '',
|
||||
businessDept: '',
|
||||
businessPerson: '',
|
||||
replaceType: undefined,
|
||||
replaceReason: undefined,
|
||||
replaceReasonDesc: '',
|
||||
originalPlate: undefined,
|
||||
originalVin: '',
|
||||
originalBrand: '',
|
||||
originalModel: '',
|
||||
replacePlate: undefined,
|
||||
replaceVin: '',
|
||||
replaceBrand: '',
|
||||
replaceModel: ''
|
||||
});
|
||||
var form = formState[0];
|
||||
var setForm = formState[1];
|
||||
var editedState = useState(false);
|
||||
var setEdited = editedState[1];
|
||||
var cancelModalVisible = useState(false);
|
||||
var setCancelModalVisible = cancelModalVisible[1];
|
||||
var requirementModalVisible = useState(false);
|
||||
var setRequirementModalVisible = requirementModalVisible[1];
|
||||
|
||||
var selectedContract = useMemo(function () {
|
||||
if (!form.projectId) return null;
|
||||
return contractList.find(function (c) { return c.projectId === form.projectId; }) || null;
|
||||
}, [form.projectId]);
|
||||
|
||||
var originalPlateList = useMemo(function () {
|
||||
if (!form.projectId) return [];
|
||||
return (originalPlateByProject[form.projectId] || []).map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
}, [form.projectId]);
|
||||
|
||||
var replacePlateSelectOptions = useMemo(function () {
|
||||
return replacePlateOptions.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
}, []);
|
||||
|
||||
var onProjectChange = useCallback(function (projectId) {
|
||||
setEdited(true);
|
||||
var contract = contractList.find(function (c) { return c.projectId === projectId; });
|
||||
setForm(function (prev) {
|
||||
var next = {};
|
||||
for (var k in prev) next[k] = prev[k];
|
||||
next.projectId = projectId;
|
||||
next.contractCode = contract ? contract.contractCode : '';
|
||||
next.customerName = contract ? contract.customerName : '';
|
||||
next.contactPerson = contract ? contract.contactPerson : '';
|
||||
next.signDate = contract ? contract.signDate : '';
|
||||
next.contactPhone = contract ? contract.contactPhone : '';
|
||||
next.businessDept = contract ? contract.businessDept : '';
|
||||
next.businessPerson = contract ? contract.businessPerson : '';
|
||||
next.originalPlate = undefined;
|
||||
next.originalVin = '';
|
||||
next.originalBrand = '';
|
||||
next.originalModel = '';
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var onOriginalPlateChange = useCallback(function (plateNo) {
|
||||
setEdited(true);
|
||||
var list = form.projectId ? (originalPlateByProject[form.projectId] || []) : [];
|
||||
var vehicle = list.find(function (v) { return v.plateNo === plateNo; });
|
||||
setForm(function (prev) {
|
||||
var next = {};
|
||||
for (var k in prev) next[k] = prev[k];
|
||||
next.originalPlate = plateNo;
|
||||
next.originalVin = vehicle ? vehicle.vin : '';
|
||||
next.originalBrand = vehicle ? vehicle.brand : '';
|
||||
next.originalModel = vehicle ? vehicle.model : '';
|
||||
return next;
|
||||
});
|
||||
}, [form.projectId]);
|
||||
|
||||
var onReplacePlateChange = useCallback(function (plateNo) {
|
||||
setEdited(true);
|
||||
var vehicle = replacePlateOptions.find(function (v) { return v.plateNo === plateNo; });
|
||||
setForm(function (prev) {
|
||||
var next = {};
|
||||
for (var k in prev) next[k] = prev[k];
|
||||
next.replacePlate = plateNo;
|
||||
next.replaceVin = vehicle ? vehicle.vin : '';
|
||||
next.replaceBrand = vehicle ? vehicle.brand : '';
|
||||
next.replaceModel = vehicle ? vehicle.model : '';
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handleSubmit = useCallback(function () {
|
||||
message.success('替换车申请已提交审核');
|
||||
}, []);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
message.success('已保存，该条数据仅您可查看并编辑（原型）');
|
||||
}, []);
|
||||
|
||||
var handleCancel = useCallback(function () {
|
||||
if (editedState[0]) {
|
||||
setCancelModalVisible(true);
|
||||
} else {
|
||||
message.info('返回替换车管理列表（原型）');
|
||||
}
|
||||
}, [editedState[0]]);
|
||||
|
||||
var confirmCancel = useCallback(function () {
|
||||
setCancelModalVisible(false);
|
||||
message.info('已取消，返回替换车管理列表（原型）');
|
||||
}, []);
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
|
||||
var requirementContent = '替换车管理-新增（2026年3月3日版本）\n一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」「新增」模块\n\n1.面包屑：\n#运维管理-车辆业务-替换车管理-新增\n页面由选择项目、替换车详情、两个单独卡片组成；\n\n2.选择项目：\n#可通过选择进行中的车辆租赁合同，拉取租赁合同中对应车辆进行替换；\n2.1.项目名称：选择器，可选择所有进行中的合同，支持输入框中输入关键词进行模糊搜索，下拉显示对应项；\n2.2.合同编码：根据项目名称自动反查，不可编辑；\n2.3.客户名称：根据项目名称自动反查，不可编辑；\n2.4.对接人：根据项目名称自动反查，不可编辑；\n2.5.合同签订时间：根据项目名称自动反查，不可编辑；\n2.6.客户联系电话：根据项目名称自动反查，不可编辑；\n2.7.业务部门：根据项目名称自动反查，不可编辑；\n2.8.业务人员：根据项目名称自动反查，不可编辑；\n\n3.替换车详情：\n3.1.替换类型：选择器，分为「永久替换」「临时替换」两个选项；\n 3.1.1.类型为永久替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），由运维手动将被替换车进行还车；\n 3.1.2.类型为临时替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），被替换车不用还车，在被替换车重新交付客户时，由运维手动将替换车进行还车；\n 重新生成交车任务时，交车地点会自动继承自合同，由对应区域运维人员才能操作；\n 交车任务完成后，所有涉及到被替换车辆显示（例如车辆租赁合同、租赁账单、提车应收款等功能）会替换为新替换车的对应信息，如果是临时替换，在新替换车完成还车后，对应车辆记录会恢复为原有车辆数据。如果是永久替换，则由运维自主进行被替换车辆还车；\n3.2.替换原因：选择器，分为「客户原因」「车辆原因」；\n3.3.替换原因说明：文本域，默认提示信息为：请说明替换原因；\n3.4.被替换车牌号：选择器，只能选择该租赁合同当前对应的已交车但未还车车牌号；\n3.5.被替换车识别代码：输入框（禁用），选择被替换车车牌号后自动反写该车识别代码；\n3.6.被替换车品牌：输入框（禁用），选择被替换车车牌号后自动反写该车品牌；\n3.7.被替换车型号：输入框（禁用），选择被替换车车牌号后自动反写该车型号；\n3.8.替换车车牌号：选择器，只能选择该人员权限下所有已备车车辆，在选择项目名称前，不能选择替换车车牌号；\n3.9.替换车识别代码：输入框（禁用），选择替换车车牌号后自动反写该车识别代码；\n3.10.替换车品牌：输入框（禁用），选择替换车车牌号后自动反写该车品牌；\n3.11.替换车型号：输入框（禁用），选择替换车车牌号后自动反写该车型号；\n\n下方为提交审核、保存、取消按钮；\n4.1.点击提交并审核，toast提示：替换车申请已提交审核；\n4.2.点击保存，会存储租赁订单已填写内容，不做必填项校验，同时显示在租赁合同列表中（待审批），该条数据只能保存人自己查看并编辑，其他人无法操作；\n4.3.点击取消，如当前页面有已编辑内容时，点击取消会进行二次提示，内容为：取消将会丢失所有已填写内容，是否确认？点击确认返回替换车管理列表页；';
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '运维管理' },
|
||||
{ title: '车辆业务' },
|
||||
{ title: '替换车管理' },
|
||||
{ title: '新增' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '选择项目', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择或输入项目名称',
|
||||
style: { width: '100%' },
|
||||
value: form.projectId,
|
||||
onChange: onProjectChange,
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: projectOptions,
|
||||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同编码'),
|
||||
React.createElement(Input, { value: form.contractCode || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement(Input, { value: form.customerName || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '对接人'),
|
||||
React.createElement(Input, { value: form.contactPerson || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同签订时间'),
|
||||
React.createElement(Input, { value: form.signDate || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户联系电话'),
|
||||
React.createElement(Input, { value: form.contactPhone || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务部门'),
|
||||
React.createElement(Input, { value: form.businessDept || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务人员'),
|
||||
React.createElement(Input, { value: form.businessPerson || '', disabled: true, placeholder: '根据项目名称自动反查' })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '替换车详情', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换类型'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择',
|
||||
style: { width: '100%' },
|
||||
value: form.replaceType,
|
||||
onChange: function (v) { setEdited(true); setForm(function (p) { var n = {}; for (var k in p) n[k] = p[k]; n.replaceType = v; return n; }); },
|
||||
allowClear: true,
|
||||
options: [{ value: '永久替换', label: '永久替换' }, { value: '临时替换', label: '临时替换' }]
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择',
|
||||
style: { width: '100%' },
|
||||
value: form.replaceReason,
|
||||
onChange: function (v) { setEdited(true); setForm(function (p) { var n = {}; for (var k in p) n[k] = p[k]; n.replaceReason = v; return n; }); },
|
||||
allowClear: true,
|
||||
options: [{ value: '客户原因', label: '客户原因' }, { value: '车辆原因', label: '车辆原因' }]
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因说明'),
|
||||
React.createElement(Input.TextArea, {
|
||||
placeholder: '请说明替换原因',
|
||||
value: form.replaceReasonDesc || '',
|
||||
onChange: function (e) { setEdited(true); setForm(function (p) { var n = {}; for (var k in p) n[k] = p[k]; n.replaceReasonDesc = e.target.value; return n; }); },
|
||||
rows: 3,
|
||||
style: { width: '100%' }
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车牌号'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择该合同已交车未还车车牌号',
|
||||
style: { width: '100%' },
|
||||
value: form.originalPlate,
|
||||
onChange: onOriginalPlateChange,
|
||||
allowClear: true,
|
||||
options: originalPlateList,
|
||||
disabled: !form.projectId
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车识别代码'),
|
||||
React.createElement(Input, { value: form.originalVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车品牌'),
|
||||
React.createElement(Input, { value: form.originalBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车型号'),
|
||||
React.createElement(Input, { value: form.originalModel || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: { gridColumn: '1 / -1', width: '100%' } }),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车车牌号'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择已备车车辆',
|
||||
style: { width: '100%' },
|
||||
value: form.replacePlate,
|
||||
onChange: onReplacePlateChange,
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: replacePlateSelectOptions,
|
||||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; },
|
||||
disabled: !form.projectId
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车识别代码'),
|
||||
React.createElement(Input, { value: form.replaceVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车品牌'),
|
||||
React.createElement(Input, { value: form.replaceBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车型号'),
|
||||
React.createElement(Input, { value: form.replaceModel || '', disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { setRequirementModalVisible(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '取消将会丢失所有已填写内容，是否确认？',
|
||||
open: cancelModalVisible[0],
|
||||
onCancel: function () { setCancelModalVisible(false); },
|
||||
onOk: confirmCancel,
|
||||
okText: '确认',
|
||||
cancelText: '返回'
|
||||
})
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,203 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 替换车管理 - 查看（2026年3月3日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Modal = antd.Modal;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var setRequirementModalVisible = requirementModalVisible[1];
|
||||
|
||||
// 模拟：根据已填信息反查的一条替换车记录（实际由路由参数或接口拉取）
|
||||
var detail = useState({
|
||||
projectName: '嘉兴氢能示范项目',
|
||||
contractCode: 'HT-ZL-2025-001',
|
||||
customerName: '嘉兴某某物流有限公司',
|
||||
contactPerson: '张三',
|
||||
signDate: '2025-01-15',
|
||||
contactPhone: '13800138001',
|
||||
businessDept: '业务1部',
|
||||
businessPerson: '张经理',
|
||||
replaceType: '永久替换',
|
||||
replaceReason: '车辆原因',
|
||||
replaceReasonDesc: '原车故障需维修，临时用替换车保障客户用车。',
|
||||
originalPlate: '浙A12345',
|
||||
originalVin: 'LGHXCAE28M1234567',
|
||||
originalBrand: '东风',
|
||||
originalModel: 'DFH1180',
|
||||
replacePlate: '浙A67890',
|
||||
replaceVin: 'LGHXCAE28M6789012',
|
||||
replaceBrand: '福田',
|
||||
replaceModel: 'BJ1180'
|
||||
});
|
||||
var data = detail[0];
|
||||
|
||||
var handleBack = function () {
|
||||
// 返回替换车管理列表页（实际为路由或平台跳转）
|
||||
if (window.__replaceCarBack) {
|
||||
window.__replaceCarBack();
|
||||
} else {
|
||||
antd.message.info('返回替换车管理列表（原型）');
|
||||
}
|
||||
};
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
|
||||
// 审批情况（参照车辆租赁合同-查看顶部审批状态）
|
||||
var approvalSteps = [
|
||||
{ title: '业务部主管', person: '姚守涛', status: '已通过', approveTime: '2026-02-20 09:30' },
|
||||
{ title: '事业部主管', person: '尚建华', status: '已通过', approveTime: '2026-02-20 10:15' },
|
||||
{ title: '运维主管', person: '王运维', status: '已通过', approveTime: '2026-02-20 11:00' }
|
||||
];
|
||||
var approvalCardStyle = { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' };
|
||||
var approvalHeaderStyle = { padding: '16px 20px', borderBottom: '1px solid #f0f0f0', fontSize: 16, fontWeight: 600, color: '#333', textAlign: 'center' };
|
||||
var approvalBodyStyle = { padding: '24px 20px', display: 'flex', justifyContent: 'center' };
|
||||
var stepWrapStyle = { display: 'flex', alignItems: 'flex-start', flexWrap: 'wrap', justifyContent: 'center' };
|
||||
var stepItemStyle = { flex: '1 1 0', minWidth: 140, maxWidth: 220, textAlign: 'center', position: 'relative' };
|
||||
var stepIconStyle = { width: 32, height: 32, borderRadius: '50%', margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, fontWeight: 600, backgroundColor: '#52c41a', color: '#fff' };
|
||||
var stepLineStyle = { position: 'absolute', top: 16, left: '50%', right: '-50%', height: 2, backgroundColor: '#52c41a', zIndex: 0 };
|
||||
var stepTitleStyle = { fontSize: 13, color: '#333', fontWeight: 500, marginBottom: 4 };
|
||||
var stepDescStyle = { fontSize: 12, color: '#666' };
|
||||
var stepStatusStyle = { fontSize: 12, color: '#52c41a', marginTop: 4 };
|
||||
var stepTimeStyle = { fontSize: 12, color: '#999', marginTop: 2 };
|
||||
var requirementContent = '替换车管理-查看（2026年3月3日版本）\n一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」「查看」模块\n1.面包屑：\n#运维管理-车辆业务-替换车管理-查看\n页面由选择项目、替换车详情、两个单独卡片组成；\n\n2.选择项目：\n#可通过选择进行中的车辆租赁合同，拉取租赁合同中对应车辆进行替换；\n2.1.项目名称：根据已填信息反查，不可编辑；\n2.2.合同编码：根据项目名称自动反查，不可编辑；\n2.3.客户名称：根据项目名称自动反查，不可编辑；\n2.4.对接人：根据项目名称自动反查，不可编辑；\n2.5.合同签订时间：根据项目名称自动反查，不可编辑；\n2.6.客户联系电话：根据项目名称自动反查，不可编辑；\n2.7.业务部门：根据项目名称自动反查，不可编辑；\n2.8.业务人员：根据项目名称自动反查，不可编辑；\n\n3.替换车详情：\n3.1.替换类型：选择器，根据已填信息反查，不可编辑；\n 3.1.1.类型为永久替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），由运维手动将被替换车进行还车；\n 3.1.2.类型为临时替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），被替换车不用还车，在被替换车重新交付客户时，由运维手动将替换车进行还车；\n 重新生成交车任务时，交车地点会自动继承自合同，由对应区域运维人员才能操作；\n 交车任务完成后，所有涉及到被替换车辆显示（例如车辆租赁合同、租赁账单、提车应收款等功能）会替换为新替换车的对应信息，如果是临时替换，在新替换车完成还车后，对应车辆记录会恢复为原有车辆数据。如果是永久替换，则由运维自主进行被替换车辆还车；\n3.2.替换原因：选择器，根据已填信息反查，不可编辑；\n3.3.替换原因说明：文本域，根据已填信息反查，不可编辑；\n3.4.被替换车牌号：选择器，根据已填信息反查，不可编辑；\n3.5.被替换车识别代码：输入框（禁用），选择被替换车车牌号后自动反写该车识别代码；\n3.6.被替换车品牌：输入框（禁用），选择被替换车车牌号后自动反写该车品牌；\n3.7.被替换车型号：输入框（禁用），选择被替换车车牌号后自动反写该车型号；\n3.8.替换车车牌号：选择器，根据已填信息反查，不可编辑；\n3.9.替换车识别代码：输入框（禁用），选择替换车车牌号后自动反写该车识别代码；\n3.10.替换车品牌：输入框（禁用），选择替换车车牌号后自动反写该车品牌；\n3.11.替换车型号：输入框（禁用），选择替换车车牌号后自动反写该车型号；\n\n下方为返回按钮；\n4.1.点击返回，返回替换车管理列表页；';
|
||||
var approvalStepEls = approvalSteps.map(function (step, index) {
|
||||
var isLast = index === approvalSteps.length - 1;
|
||||
return React.createElement('div', { key: index, style: Object.assign({}, stepItemStyle, { zIndex: approvalSteps.length - index }) },
|
||||
!isLast ? React.createElement('div', { style: stepLineStyle }) : null,
|
||||
React.createElement('div', { style: stepIconStyle }, '✓'),
|
||||
React.createElement('div', { style: stepTitleStyle }, step.title),
|
||||
React.createElement('div', { style: stepDescStyle }, step.person),
|
||||
React.createElement('div', { style: stepStatusStyle }, step.status),
|
||||
step.approveTime ? React.createElement('div', { style: stepTimeStyle }, step.approveTime) : null
|
||||
);
|
||||
});
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '运维管理' },
|
||||
{ title: '车辆业务' },
|
||||
{ title: '替换车管理' },
|
||||
{ title: '查看' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement('div', { style: approvalCardStyle },
|
||||
React.createElement('div', { style: approvalHeaderStyle }, '审批情况'),
|
||||
React.createElement('div', { style: approvalBodyStyle },
|
||||
React.createElement('div', { style: stepWrapStyle }, approvalStepEls)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '选择项目', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||||
React.createElement(Input, { value: data.projectName || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同编码'),
|
||||
React.createElement(Input, { value: data.contractCode || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement(Input, { value: data.customerName || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '对接人'),
|
||||
React.createElement(Input, { value: data.contactPerson || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同签订时间'),
|
||||
React.createElement(Input, { value: data.signDate || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户联系电话'),
|
||||
React.createElement(Input, { value: data.contactPhone || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务部门'),
|
||||
React.createElement(Input, { value: data.businessDept || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务人员'),
|
||||
React.createElement(Input, { value: data.businessPerson || '', disabled: true })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '替换车详情', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换类型'),
|
||||
React.createElement(Input, { value: data.replaceType || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因'),
|
||||
React.createElement(Input, { value: data.replaceReason || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因说明'),
|
||||
React.createElement(Input.TextArea, { value: data.replaceReasonDesc || '', disabled: true, rows: 3, style: { width: '100%' } })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车牌号'),
|
||||
React.createElement(Input, { value: data.originalPlate || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车识别代码'),
|
||||
React.createElement(Input, { value: data.originalVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车品牌'),
|
||||
React.createElement(Input, { value: data.originalBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车型号'),
|
||||
React.createElement(Input, { value: data.originalModel || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: { gridColumn: '1 / -1', width: '100%' } }),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车车牌号'),
|
||||
React.createElement(Input, { value: data.replacePlate || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车识别代码'),
|
||||
React.createElement(Input, { value: data.replaceVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车品牌'),
|
||||
React.createElement(Input, { value: data.replaceBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车型号'),
|
||||
React.createElement(Input, { value: data.replaceModel || '', disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
|
||||
React.createElement(Button, { onClick: handleBack }, '返回')
|
||||
)
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { setRequirementModalVisible(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,322 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 替换车管理 - 编辑（2026年3月3日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Select = antd.Select;
|
||||
var Modal = antd.Modal;
|
||||
var Option = Select.Option;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var setRequirementModalVisible = requirementModalVisible[1];
|
||||
var edited = useState(false);
|
||||
var setEdited = edited[1];
|
||||
|
||||
// 模拟：进行中的车辆租赁合同列表（实际由接口拉取）
|
||||
var contractList = [
|
||||
{ projectName: '嘉兴氢能示范项目', contractCode: 'HT-ZL-2025-001', customerName: '嘉兴某某物流有限公司', contactPerson: '张三', signDate: '2025-01-15', contactPhone: '13800138001', businessDept: '业务1部', businessPerson: '张经理' },
|
||||
{ projectName: '上海氢能试点项目', contractCode: 'HT-ZL-2025-002', customerName: '上海某某运输公司', contactPerson: '李四', signDate: '2025-02-01', contactPhone: '13900139001', businessDept: '业务2部', businessPerson: '李经理' },
|
||||
{ projectName: '杭州示范运营项目', contractCode: 'HT-ZL-2025-003', customerName: '杭州某某物流', contactPerson: '王五', signDate: '2025-01-20', contactPhone: '13700137001', businessDept: '业务1部', businessPerson: '张经理' }
|
||||
];
|
||||
// 该合同下已交车未还车车辆（被替换车可选）
|
||||
var contractDeliveredVehicles = {
|
||||
'嘉兴氢能示范项目': [
|
||||
{ plateNo: '浙A12345', vin: 'LGHXCAE28M1234567', brand: '东风', model: 'DFH1180' },
|
||||
{ plateNo: '浙A11111', vin: 'LGHXCAE28M1111111', brand: '东风', model: 'DFH1180' }
|
||||
],
|
||||
'上海氢能试点项目': [
|
||||
{ plateNo: '沪B22222', vin: 'LGHXCAE28M2222222', brand: '福田', model: 'BJ1180' }
|
||||
],
|
||||
'杭州示范运营项目': []
|
||||
};
|
||||
// 人员权限下已备车车辆（替换车可选，需先选项目名称后才能选）
|
||||
var preparedVehicleList = [
|
||||
{ plateNo: '浙A67890', vin: 'LGHXCAE28M6789012', brand: '福田', model: 'BJ1180' },
|
||||
{ plateNo: '浙B33333', vin: 'LGHXCAE28M3333333', brand: '东风', model: 'DFH1180' }
|
||||
];
|
||||
|
||||
// 编辑表单状态（实际由路由参数或接口拉取初始值）
|
||||
var detail = useState({
|
||||
projectName: '嘉兴氢能示范项目',
|
||||
contractCode: 'HT-ZL-2025-001',
|
||||
customerName: '嘉兴某某物流有限公司',
|
||||
contactPerson: '张三',
|
||||
signDate: '2025-01-15',
|
||||
contactPhone: '13800138001',
|
||||
businessDept: '业务1部',
|
||||
businessPerson: '张经理',
|
||||
replaceType: '永久替换',
|
||||
replaceReason: '车辆原因',
|
||||
replaceReasonDesc: '原车故障需维修，临时用替换车保障客户用车。',
|
||||
originalPlate: '浙A12345',
|
||||
originalVin: 'LGHXCAE28M1234567',
|
||||
originalBrand: '东风',
|
||||
originalModel: 'DFH1180',
|
||||
replacePlate: '浙A67890',
|
||||
replaceVin: 'LGHXCAE28M6789012',
|
||||
replaceBrand: '福田',
|
||||
replaceModel: 'BJ1180'
|
||||
});
|
||||
var data = detail[0];
|
||||
var setData = detail[1];
|
||||
|
||||
var updateDetail = function (field, value) {
|
||||
setEdited(true);
|
||||
setData(function (prev) {
|
||||
var next = Object.assign({}, prev);
|
||||
next[field] = value;
|
||||
if (field === 'projectName') {
|
||||
var c = contractList.find(function (x) { return x.projectName === value; });
|
||||
if (c) {
|
||||
next.contractCode = c.contractCode;
|
||||
next.customerName = c.customerName;
|
||||
next.contactPerson = c.contactPerson;
|
||||
next.signDate = c.signDate;
|
||||
next.contactPhone = c.contactPhone;
|
||||
next.businessDept = c.businessDept;
|
||||
next.businessPerson = c.businessPerson;
|
||||
} else {
|
||||
next.contractCode = '';
|
||||
next.customerName = '';
|
||||
next.contactPerson = '';
|
||||
next.signDate = '';
|
||||
next.contactPhone = '';
|
||||
next.businessDept = '';
|
||||
next.businessPerson = '';
|
||||
}
|
||||
next.originalPlate = '';
|
||||
next.originalVin = '';
|
||||
next.originalBrand = '';
|
||||
next.originalModel = '';
|
||||
next.replacePlate = '';
|
||||
next.replaceVin = '';
|
||||
next.replaceBrand = '';
|
||||
next.replaceModel = '';
|
||||
}
|
||||
if (field === 'originalPlate') {
|
||||
var list = contractDeliveredVehicles[prev.projectName] || [];
|
||||
var v = list.find(function (x) { return x.plateNo === value; });
|
||||
next.originalVin = v ? v.vin : '';
|
||||
next.originalBrand = v ? v.brand : '';
|
||||
next.originalModel = v ? v.model : '';
|
||||
}
|
||||
if (field === 'replacePlate') {
|
||||
var v = preparedVehicleList.find(function (x) { return x.plateNo === value; });
|
||||
next.replaceVin = v ? v.vin : '';
|
||||
next.replaceBrand = v ? v.brand : '';
|
||||
next.replaceModel = v ? v.model : '';
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
var handleSubmit = function () {
|
||||
if (window.__replaceCarSubmit) {
|
||||
window.__replaceCarSubmit(data);
|
||||
} else {
|
||||
antd.message.success('替换车申请已提交审核');
|
||||
}
|
||||
};
|
||||
|
||||
var handleSave = function () {
|
||||
if (window.__replaceCarSave) {
|
||||
window.__replaceCarSave(data);
|
||||
} else {
|
||||
antd.message.success('保存成功（原型）');
|
||||
}
|
||||
};
|
||||
|
||||
var handleCancel = function () {
|
||||
if (edited[0]) {
|
||||
antd.Modal.confirm({
|
||||
title: '确认取消',
|
||||
content: '取消将会丢失所有已填写内容，是否确认？',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
onOk: function () {
|
||||
if (window.__replaceCarBack) {
|
||||
window.__replaceCarBack();
|
||||
} else {
|
||||
antd.message.info('返回替换车管理列表（原型）');
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (window.__replaceCarBack) {
|
||||
window.__replaceCarBack();
|
||||
} else {
|
||||
antd.message.info('返回替换车管理列表（原型）');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formRowStyle = { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', marginBottom: 16 };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
|
||||
var requirementContent = '替换车管理-编辑（2026年3月3日版本）\n一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」「编辑」模块\n1.面包屑：\n#运维管理-车辆业务-替换车管理-编辑\n页面由选择项目、替换车详情、两个单独卡片组成；\n\n2.选择项目：\n#可通过选择进行中的车辆租赁合同，拉取租赁合同中对应车辆进行替换；\n2.1.项目名称：选择器，反写已新增完成的内容，可编辑，可选择所有进行中的合同，支持输入框中输入关键词进行模糊搜索，下拉显示对应项；\n2.2.合同编码：根据项目名称自动反查，不可编辑；\n2.3.客户名称：根据项目名称自动反查，不可编辑；\n2.4.对接人：根据项目名称自动反查，不可编辑；\n2.5.合同签订时间：根据项目名称自动反查，不可编辑；\n2.6.客户联系电话：根据项目名称自动反查，不可编辑；\n2.7.业务部门：根据项目名称自动反查，不可编辑；\n2.8.业务人员：根据项目名称自动反查，不可编辑；\n\n3.替换车详情：\n3.1.替换类型：选择器，反写已新增完成的内容，可编辑，分为「永久替换」「临时替换」两个选项；\n 3.1.1.类型为永久替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），由运维手动将被替换车进行还车；\n 3.1.2.类型为临时替换时，该申请通过审核后替换车进行交车（交车时间为流程结束当天），被替换车不用还车，在被替换车重新交付客户时，由运维手动将替换车进行还车；\n 重新生成交车任务时，交车地点会自动继承自合同，由对应区域运维人员才能操作；\n 交车任务完成后，所有涉及到被替换车辆显示（例如车辆租赁合同、租赁账单、提车应收款等功能）会替换为新替换车的对应信息，如果是临时替换，在新替换车完成还车后，对应车辆记录会恢复为原有车辆数据。如果是永久替换，则由运维自主进行被替换车辆还车；\n3.2.替换原因：选择器，反写已新增完成的内容，可编辑，分为「客户原因」「车辆原因」；\n3.3.替换原因说明：文本域，反写已新增完成的内容，可编辑，默认提示信息为：请说明替换原因；\n3.4.被替换车牌号：选择器，反写已新增完成的内容，可编辑，只能选择该租赁合同当前对应的已交车但未还车车牌号；\n3.5.被替换车识别代码：输入框（禁用），选择被替换车车牌号后自动反写该车识别代码；\n3.6.被替换车品牌：输入框（禁用），选择被替换车车牌号后自动反写该车品牌；\n3.7.被替换车型号：输入框（禁用），选择被替换车车牌号后自动反写该车型号；\n3.8.替换车车牌号：选择器，反写已新增完成的内容，可编辑，只能选择该人员权限下所有已备车车辆，在选择项目名称前，不能选择替换车车牌号；\n3.9.替换车识别代码：输入框（禁用），选择替换车车牌号后自动反写该车识别代码；\n3.10.替换车品牌：输入框（禁用），选择替换车车牌号后自动反写该车品牌；\n3.11.替换车型号：输入框（禁用），选择替换车车牌号后自动反写该车型号；\n\n下方为提交审核、保存、取消按钮；\n4.1.点击提交并审核，toast提示：替换车申请已提交审核；\n4.2.点击保存，会存储租赁订单已填写内容，不做必填项校验，同时显示在租赁合同列表中（待审批），该条数据只能保存人自己查看并编辑，其他人无法操作；\n4.3.点击取消，如当前页面有已编辑内容时，点击取消会进行二次提示，内容为：取消将会丢失所有已填写内容，是否确认？点击确认返回替换车管理列表页；';
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '运维管理' },
|
||||
{ title: '车辆业务' },
|
||||
{ title: '替换车管理' },
|
||||
{ title: '编辑' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalVisible(true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '选择项目', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '项目名称'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
placeholder: '请选择或输入关键词搜索',
|
||||
value: data.projectName || undefined,
|
||||
onChange: function (v) { updateDetail('projectName', v || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
filterOption: function (input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }
|
||||
}, contractList.map(function (c) { return React.createElement(Option, { key: c.projectName, value: c.projectName }, c.projectName); }))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同编码'),
|
||||
React.createElement(Input, { value: data.contractCode || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户名称'),
|
||||
React.createElement(Input, { value: data.customerName || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '对接人'),
|
||||
React.createElement(Input, { value: data.contactPerson || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '合同签订时间'),
|
||||
React.createElement(Input, { value: data.signDate || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '客户联系电话'),
|
||||
React.createElement(Input, { value: data.contactPhone || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务部门'),
|
||||
React.createElement(Input, { value: data.businessDept || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '业务人员'),
|
||||
React.createElement(Input, { value: data.businessPerson || '', disabled: true })
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '替换车详情', style: cardStyle },
|
||||
React.createElement('div', { style: formRowStyle },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换类型'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
value: data.replaceType || undefined,
|
||||
onChange: function (v) { updateDetail('replaceType', v || ''); },
|
||||
placeholder: '请选择'
|
||||
}, React.createElement(Option, { value: '永久替换' }, '永久替换'), React.createElement(Option, { value: '临时替换' }, '临时替换'))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
value: data.replaceReason || undefined,
|
||||
onChange: function (v) { updateDetail('replaceReason', v || ''); },
|
||||
placeholder: '请选择'
|
||||
}, React.createElement(Option, { value: '客户原因' }, '客户原因'), React.createElement(Option, { value: '车辆原因' }, '车辆原因'))
|
||||
),
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: '1 / -1' }) },
|
||||
React.createElement('div', { style: labelStyle }, '替换原因说明'),
|
||||
React.createElement(Input.TextArea, {
|
||||
value: data.replaceReasonDesc || '',
|
||||
onChange: function (e) { updateDetail('replaceReasonDesc', e.target.value); },
|
||||
rows: 3,
|
||||
placeholder: '请说明替换原因',
|
||||
style: { width: '100%' }
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车牌号'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
placeholder: '请选择或搜索（仅显示该合同已交车未还车车辆）',
|
||||
value: data.originalPlate || undefined,
|
||||
onChange: function (v) { updateDetail('originalPlate', v || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
disabled: !data.projectName,
|
||||
filterOption: function (input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }
|
||||
}, (contractDeliveredVehicles[data.projectName] || []).map(function (v) { return React.createElement(Option, { key: v.plateNo, value: v.plateNo }, v.plateNo); }))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车识别代码'),
|
||||
React.createElement(Input, { value: data.originalVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车品牌'),
|
||||
React.createElement(Input, { value: data.originalBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '被替换车型号'),
|
||||
React.createElement(Input, { value: data.originalModel || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: { gridColumn: '1 / -1', width: '100%' } }),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车车牌号'),
|
||||
React.createElement(Select, {
|
||||
style: { width: '100%' },
|
||||
placeholder: data.projectName ? '请选择或搜索（仅显示已备车车辆）' : '请先选择项目名称',
|
||||
value: data.replacePlate || undefined,
|
||||
onChange: function (v) { updateDetail('replacePlate', v || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
disabled: !data.projectName,
|
||||
filterOption: function (input, opt) { return opt && opt.children && String(opt.children).toLowerCase().indexOf((input || '').toLowerCase()) >= 0; }
|
||||
}, preparedVehicleList.map(function (v) { return React.createElement(Option, { key: v.plateNo, value: v.plateNo }, v.plateNo); }))
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车识别代码'),
|
||||
React.createElement(Input, { value: data.replaceVin || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车品牌'),
|
||||
React.createElement(Input, { value: data.replaceBrand || '', disabled: true })
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, '替换车型号'),
|
||||
React.createElement(Input, { value: data.replaceModel || '', disabled: true })
|
||||
)
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8, marginTop: 24 } },
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { setRequirementModalVisible(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalVisible(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,493 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 替换车管理（2026年3月3日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useCallback = React.useCallback;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Select = antd.Select;
|
||||
var Button = antd.Button;
|
||||
var Table = antd.Table;
|
||||
var Tabs = antd.Tabs;
|
||||
var Modal = antd.Modal;
|
||||
var Input = antd.Input;
|
||||
var message = antd.message;
|
||||
|
||||
var RangePicker = DatePicker.RangePicker;
|
||||
|
||||
// 筛选展开（默认一行 3 列）
|
||||
var _filterExpanded = useState(false);
|
||||
var _replaceDateRange = useState(null);
|
||||
var _replaceType = useState(undefined);
|
||||
var _projectName = useState(undefined);
|
||||
var _approvalStatus = useState(['全部']);
|
||||
var _originalPlate = useState(undefined);
|
||||
var _replacePlate = useState(undefined);
|
||||
var _replaceReason = useState(undefined);
|
||||
var _creator = useState(undefined);
|
||||
var _createTimeRange = useState(null);
|
||||
|
||||
var _appliedFilter = useState({
|
||||
replaceDateRange: null,
|
||||
replaceType: undefined,
|
||||
projectName: undefined,
|
||||
approvalStatus: ['全部'],
|
||||
originalPlate: undefined,
|
||||
replacePlate: undefined,
|
||||
replaceReason: undefined,
|
||||
creator: undefined,
|
||||
createTimeRange: null
|
||||
});
|
||||
|
||||
var _activeTab = useState('ongoing');
|
||||
var _selectedRowKeys = useState([]);
|
||||
var _withdrawModalVisible = useState(false);
|
||||
var _withdrawModalRecord = useState(null);
|
||||
var _toPermanentModalVisible = useState(false);
|
||||
var _toPermanentModalRecord = useState(null);
|
||||
var _requirementModalVisible = useState(false);
|
||||
|
||||
var replaceTypeOptions = [
|
||||
{ value: '永久替换', label: '永久替换' },
|
||||
{ value: '临时替换', label: '临时替换' }
|
||||
];
|
||||
var projectNameOptions = [
|
||||
{ value: 'p1', label: '嘉兴氢能示范项目' },
|
||||
{ value: 'p2', label: '上海物流租赁项目' },
|
||||
{ value: 'p3', label: '杭州城配租赁项目' }
|
||||
];
|
||||
var approvalStatusOptions = [
|
||||
{ value: '全部', label: '全部' },
|
||||
{ value: '待审批', label: '待审批' },
|
||||
{ value: '审批中', label: '审批中' },
|
||||
{ value: '审批驳回', label: '审批驳回' },
|
||||
{ value: '未提交', label: '未提交' },
|
||||
{ value: '撤回', label: '撤回' }
|
||||
];
|
||||
var plateOptions = [
|
||||
{ value: '浙A12345', label: '浙A12345' },
|
||||
{ value: '浙A67890', label: '浙A67890' },
|
||||
{ value: '浙B11111', label: '浙B11111' },
|
||||
{ value: '浙B22222', label: '浙B22222' },
|
||||
{ value: '浙C33333', label: '浙C33333' }
|
||||
];
|
||||
var replaceReasonOptions = [
|
||||
{ value: '全部', label: '全部' },
|
||||
{ value: '客户原因', label: '客户原因' },
|
||||
{ value: '车辆原因', label: '车辆原因' }
|
||||
];
|
||||
var creatorOptions = [
|
||||
{ value: '张三', label: '张三' },
|
||||
{ value: '李四', label: '李四' },
|
||||
{ value: '王五', label: '王五' },
|
||||
{ value: '赵六', label: '赵六' }
|
||||
];
|
||||
|
||||
// 进行中：未结束、暂存，审批状态为 待审批、审批中、审批驳回、未提交、撤回
|
||||
var ongoingList = [
|
||||
{ id: 'o1', replaceDate: '2025-03-05', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '待审批', originalPlate: '浙A12345', originalBrand: '东风', originalModel: 'DFH1180', replacePlate: '浙A67890', replaceBrand: '福田', replaceModel: 'BJ1180', replaceReason: '车辆原因', replaceReasonDesc: '原车维修', creator: '张三', createTime: '2025-03-01 10:00' },
|
||||
{ id: 'o2', replaceDate: '2025-03-06', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '审批中', originalPlate: '浙B11111', originalBrand: '江淮', originalModel: 'HFC1180', replacePlate: '浙B22222', replaceBrand: '重汽', replaceModel: 'ZZ1180', replaceReason: '客户原因', replaceReasonDesc: '客户要求换型', creator: '李四', createTime: '2025-03-01 14:30' },
|
||||
{ id: 'o3', replaceDate: '2025-03-07', replaceType: '临时替换', projectName: '杭州城配租赁项目', approvalStatus: '审批驳回', originalPlate: '浙C33333', originalBrand: '东风', originalModel: 'DFH1190', replacePlate: '浙C44444', replaceBrand: '福田', replaceModel: 'BJ1190', replaceReason: '车辆原因', replaceReasonDesc: '事故替换', creator: '王五', createTime: '2025-03-02 09:15' },
|
||||
{ id: 'o4', replaceDate: '2025-03-08', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '未提交', originalPlate: '浙A55555', originalBrand: '重汽', originalModel: 'ZZ1160', replacePlate: '浙A66666', replaceBrand: '江淮', replaceModel: 'HFC1190', replaceReason: '车辆原因', replaceReasonDesc: '保养替换', creator: '赵六', createTime: '2025-03-02 16:00' },
|
||||
{ id: 'o5', replaceDate: '2025-03-09', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '撤回', originalPlate: '浙F77777', originalBrand: '福田', originalModel: 'BJ1180', replacePlate: '浙F88888', replaceBrand: '东风', replaceModel: 'DFH1180', replaceReason: '客户原因', replaceReasonDesc: '年检替换', creator: '张三', createTime: '2025-03-03 11:20' },
|
||||
{ id: 'o6', replaceDate: '2025-03-10', replaceType: '永久替换', projectName: '杭州城配租赁项目', approvalStatus: '待审批', originalPlate: '浙A11201', originalBrand: '江淮', originalModel: 'HFC1160', replacePlate: '浙A11202', replaceBrand: '东风', replaceModel: 'DFH1160', replaceReason: '车辆原因', replaceReasonDesc: '发动机故障', creator: '李四', createTime: '2025-03-04 08:45' },
|
||||
{ id: 'o7', replaceDate: '2025-03-11', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批中', originalPlate: '浙B22301', originalBrand: '重汽', originalModel: 'ZZ1160', replacePlate: '浙B22302', replaceBrand: '福田', replaceModel: 'BJ1160', replaceReason: '客户原因', replaceReasonDesc: '临时增运力', creator: '王五', createTime: '2025-03-04 13:00' },
|
||||
{ id: 'o8', replaceDate: '2025-03-12', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '审批驳回', originalPlate: '浙C33401', originalBrand: '东风', originalModel: 'DFH1190', replacePlate: '浙C33402', replaceBrand: '江淮', replaceModel: 'HFC1190', replaceReason: '车辆原因', replaceReasonDesc: '底盘大修', creator: '赵六', createTime: '2025-03-05 10:20' },
|
||||
{ id: 'o9', replaceDate: '2025-03-13', replaceType: '临时替换', projectName: '杭州城配租赁项目', approvalStatus: '未提交', originalPlate: '浙D44501', originalBrand: '福田', originalModel: 'BJ1180', replacePlate: '浙D44502', replaceBrand: '重汽', replaceModel: 'ZZ1180', replaceReason: '客户原因', replaceReasonDesc: '线路调整', creator: '张三', createTime: '2025-03-05 15:30' },
|
||||
{ id: 'o10', replaceDate: '2025-03-14', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '撤回', originalPlate: '浙E55601', originalBrand: '江淮', originalModel: 'HFC1180', replacePlate: '浙E55602', replaceBrand: '东风', replaceModel: 'DFH1180', replaceReason: '车辆原因', replaceReasonDesc: '轮胎更换', creator: '李四', createTime: '2025-03-06 09:00' },
|
||||
{ id: 'o11', replaceDate: '2025-03-15', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '待审批', originalPlate: '浙F66701', originalBrand: '重汽', originalModel: 'ZZ1190', replacePlate: '浙F66702', replaceBrand: '福田', replaceModel: 'BJ1190', replaceReason: '车辆原因', replaceReasonDesc: '电瓶更换', creator: '王五', createTime: '2025-03-06 14:15' },
|
||||
{ id: 'o12', replaceDate: '2025-03-16', replaceType: '永久替换', projectName: '杭州城配租赁项目', approvalStatus: '审批中', originalPlate: '浙A77801', originalBrand: '东风', originalModel: 'DFH1160', replacePlate: '浙A77802', replaceBrand: '江淮', replaceModel: 'HFC1160', replaceReason: '客户原因', replaceReasonDesc: '合同到期换车', creator: '赵六', createTime: '2025-03-07 11:00' },
|
||||
{ id: 'o13', replaceDate: '2025-03-17', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批驳回', originalPlate: '浙B88901', originalBrand: '福田', originalModel: 'BJ1160', replacePlate: '浙B88902', replaceBrand: '重汽', replaceModel: 'ZZ1160', replaceReason: '车辆原因', replaceReasonDesc: '制动系统检修', creator: '张三', createTime: '2025-03-07 16:45' },
|
||||
{ id: 'o14', replaceDate: '2025-03-18', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '未提交', originalPlate: '浙C99001', originalBrand: '江淮', originalModel: 'HFC1190', replacePlate: '浙C99002', replaceBrand: '东风', replaceModel: 'DFH1190', replaceReason: '客户原因', replaceReasonDesc: '运量增加', creator: '李四', createTime: '2025-03-08 08:30' },
|
||||
{ id: 'o15', replaceDate: '2025-03-19', replaceType: '临时替换', projectName: '杭州城配租赁项目', approvalStatus: '撤回', originalPlate: '浙D10101', originalBrand: '重汽', originalModel: 'ZZ1180', replacePlate: '浙D10102', replaceBrand: '福田', replaceModel: 'BJ1180', replaceReason: '车辆原因', replaceReasonDesc: '空调维修', creator: '王五', createTime: '2025-03-08 12:00' },
|
||||
{ id: 'o16', replaceDate: '2025-03-20', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '待审批', originalPlate: '浙E20201', originalBrand: '东风', originalModel: 'DFH1180', replacePlate: '浙E20202', replaceBrand: '江淮', replaceModel: 'HFC1180', replaceReason: '车辆原因', replaceReasonDesc: '变速箱故障', creator: '赵六', createTime: '2025-03-09 10:20' },
|
||||
{ id: 'o17', replaceDate: '2025-03-21', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '审批中', originalPlate: '浙F30301', originalBrand: '福田', originalModel: 'BJ1190', replacePlate: '浙F30302', replaceBrand: '重汽', replaceModel: 'ZZ1190', replaceReason: '客户原因', replaceReasonDesc: '区域调配', creator: '张三', createTime: '2025-03-09 15:00' },
|
||||
{ id: 'o18', replaceDate: '2025-03-22', replaceType: '永久替换', projectName: '杭州城配租赁项目', approvalStatus: '审批驳回', originalPlate: '浙A40401', originalBrand: '江淮', originalModel: 'HFC1160', replacePlate: '浙A40402', replaceBrand: '东风', replaceModel: 'DFH1160', replaceReason: '车辆原因', replaceReasonDesc: '车身锈蚀', creator: '李四', createTime: '2025-03-10 09:45' },
|
||||
{ id: 'o19', replaceDate: '2025-03-23', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '未提交', originalPlate: '浙B50501', originalBrand: '重汽', originalModel: 'ZZ1160', replacePlate: '浙B50502', replaceBrand: '福田', replaceModel: 'BJ1160', replaceReason: '客户原因', replaceReasonDesc: '试运行换车', creator: '王五', createTime: '2025-03-10 14:30' },
|
||||
{ id: 'o20', replaceDate: '2025-03-24', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '撤回', originalPlate: '浙C60601', originalBrand: '东风', originalModel: 'DFH1190', replacePlate: '浙C60602', replaceBrand: '江淮', replaceModel: 'HFC1190', replaceReason: '车辆原因', replaceReasonDesc: '排放升级', creator: '赵六', createTime: '2025-03-11 11:15' }
|
||||
];
|
||||
|
||||
// 历史记录：审批完成，审批状态均为审批完成
|
||||
var historyList = [
|
||||
{ id: 'h1', replaceDate: '2025-02-15', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A10001', originalBrand: '东风', originalModel: 'DFH1180', replacePlate: '浙A10002', replaceBrand: '福田', replaceModel: 'BJ1180', replaceReason: '车辆原因', replaceReasonDesc: '原车报废', creator: '张三', createTime: '2025-02-10 09:00' },
|
||||
{ id: 'h2', replaceDate: '2025-02-14', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B20001', originalBrand: '江淮', originalModel: 'HFC1180', replacePlate: '浙B20002', replaceBrand: '重汽', replaceModel: 'ZZ1180', replaceReason: '客户原因', replaceReasonDesc: '客户临时需求', creator: '李四', createTime: '2025-02-09 14:00' },
|
||||
{ id: 'h3', replaceDate: '2025-02-13', replaceType: '永久替换', projectName: '杭州城配租赁项目', approvalStatus: '审批完成', originalPlate: '浙C30001', originalBrand: '重汽', originalModel: 'ZZ1160', replacePlate: '浙C30002', replaceBrand: '东风', replaceModel: 'DFH1160', replaceReason: '车辆原因', replaceReasonDesc: '使用年限到期', creator: '王五', createTime: '2025-02-08 10:30' },
|
||||
{ id: 'h4', replaceDate: '2025-02-12', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A40001', originalBrand: '福田', originalModel: 'BJ1180', replacePlate: '浙A40002', replaceBrand: '江淮', replaceModel: 'HFC1180', replaceReason: '客户原因', replaceReasonDesc: '旺季加车', creator: '赵六', createTime: '2025-02-07 15:20' },
|
||||
{ id: 'h5', replaceDate: '2025-02-11', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B50001', originalBrand: '东风', originalModel: 'DFH1190', replacePlate: '浙B50002', replaceBrand: '重汽', replaceModel: 'ZZ1190', replaceReason: '车辆原因', replaceReasonDesc: '事故车置换', creator: '张三', createTime: '2025-02-06 08:45' },
|
||||
{ id: 'h6', replaceDate: '2025-02-10', replaceType: '临时替换', projectName: '杭州城配租赁项目', approvalStatus: '审批完成', originalPlate: '浙C60001', originalBrand: '江淮', originalModel: 'HFC1160', replacePlate: '浙C60002', replaceBrand: '福田', replaceModel: 'BJ1160', replaceReason: '客户原因', replaceReasonDesc: '临时项目', creator: '李四', createTime: '2025-02-05 11:00' },
|
||||
{ id: 'h7', replaceDate: '2025-02-09', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A70001', originalBrand: '重汽', originalModel: 'ZZ1180', replacePlate: '浙A70002', replaceBrand: '东风', replaceModel: 'DFH1180', replaceReason: '车辆原因', replaceReasonDesc: '维修成本过高', creator: '王五', createTime: '2025-02-04 14:15' },
|
||||
{ id: 'h8', replaceDate: '2025-02-08', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B80001', originalBrand: '福田', originalModel: 'BJ1190', replacePlate: '浙B80002', replaceBrand: '江淮', replaceModel: 'HFC1190', replaceReason: '客户原因', replaceReasonDesc: '车型升级', creator: '赵六', createTime: '2025-02-03 09:30' },
|
||||
{ id: 'h9', replaceDate: '2025-02-07', replaceType: '永久替换', projectName: '杭州城配租赁项目', approvalStatus: '审批完成', originalPlate: '浙C90001', originalBrand: '东风', originalModel: 'DFH1160', replacePlate: '浙C90002', replaceBrand: '重汽', replaceModel: 'ZZ1160', replaceReason: '车辆原因', replaceReasonDesc: '年检未过', creator: '张三', createTime: '2025-02-02 16:00' },
|
||||
{ id: 'h10', replaceDate: '2025-02-06', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A01001', originalBrand: '江淮', originalModel: 'HFC1180', replacePlate: '浙A01002', replaceBrand: '福田', replaceModel: 'BJ1180', replaceReason: '客户原因', replaceReasonDesc: '运力不足', creator: '李四', createTime: '2025-02-01 10:45' },
|
||||
{ id: 'h11', replaceDate: '2025-02-05', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B02001', originalBrand: '重汽', originalModel: 'ZZ1190', replacePlate: '浙B02002', replaceBrand: '东风', replaceModel: 'DFH1190', replaceReason: '车辆原因', replaceReasonDesc: '尾气不达标', creator: '王五', createTime: '2025-01-31 13:20' },
|
||||
{ id: 'h12', replaceDate: '2025-02-04', replaceType: '临时替换', projectName: '杭州城配租赁项目', approvalStatus: '审批完成', originalPlate: '浙C03001', originalBrand: '福田', originalModel: 'BJ1160', replacePlate: '浙C03002', replaceBrand: '江淮', replaceModel: 'HFC1160', replaceReason: '客户原因', replaceReasonDesc: '线路拓展', creator: '赵六', createTime: '2025-01-30 08:00' },
|
||||
{ id: 'h13', replaceDate: '2025-02-03', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A04001', originalBrand: '东风', originalModel: 'DFH1180', replacePlate: '浙A04002', replaceBrand: '重汽', replaceModel: 'ZZ1180', replaceReason: '车辆原因', replaceReasonDesc: '核心部件损坏', creator: '张三', createTime: '2025-01-29 11:30' },
|
||||
{ id: 'h14', replaceDate: '2025-02-02', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B05001', originalBrand: '江淮', originalModel: 'HFC1190', replacePlate: '浙B05002', replaceBrand: '福田', replaceModel: 'BJ1190', replaceReason: '客户原因', replaceReasonDesc: '季节性需求', creator: '李四', createTime: '2025-01-28 15:45' },
|
||||
{ id: 'h15', replaceDate: '2025-02-01', replaceType: '永久替换', projectName: '杭州城配租赁项目', approvalStatus: '审批完成', originalPlate: '浙C06001', originalBrand: '重汽', originalModel: 'ZZ1160', replacePlate: '浙C06002', replaceBrand: '东风', replaceModel: 'DFH1160', replaceReason: '车辆原因', replaceReasonDesc: '保险拒保', creator: '王五', createTime: '2025-01-27 09:15' },
|
||||
{ id: 'h16', replaceDate: '2025-01-31', replaceType: '临时替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A07001', originalBrand: '福田', originalModel: 'BJ1180', replacePlate: '浙A07002', replaceBrand: '江淮', replaceModel: 'HFC1180', replaceReason: '客户原因', replaceReasonDesc: '合作试运行', creator: '赵六', createTime: '2025-01-26 12:00' },
|
||||
{ id: 'h17', replaceDate: '2025-01-30', replaceType: '永久替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B08001', originalBrand: '东风', originalModel: 'DFH1190', replacePlate: '浙B08002', replaceBrand: '重汽', replaceModel: 'ZZ1190', replaceReason: '车辆原因', replaceReasonDesc: '油耗过高', creator: '张三', createTime: '2025-01-25 14:30' },
|
||||
{ id: 'h18', replaceDate: '2025-01-29', replaceType: '临时替换', projectName: '杭州城配租赁项目', approvalStatus: '审批完成', originalPlate: '浙C09001', originalBrand: '江淮', originalModel: 'HFC1160', replacePlate: '浙C09002', replaceBrand: '福田', replaceModel: 'BJ1160', replaceReason: '客户原因', replaceReasonDesc: '活动保障', creator: '李四', createTime: '2025-01-24 10:20' },
|
||||
{ id: 'h19', replaceDate: '2025-01-28', replaceType: '永久替换', projectName: '嘉兴氢能示范项目', approvalStatus: '审批完成', originalPlate: '浙A10003', originalBrand: '重汽', originalModel: 'ZZ1180', replacePlate: '浙A10004', replaceBrand: '东风', replaceModel: 'DFH1180', replaceReason: '车辆原因', replaceReasonDesc: '配件停产', creator: '王五', createTime: '2025-01-23 16:45' },
|
||||
{ id: 'h20', replaceDate: '2025-01-27', replaceType: '临时替换', projectName: '上海物流租赁项目', approvalStatus: '审批完成', originalPlate: '浙B11001', originalBrand: '福田', originalModel: 'BJ1190', replacePlate: '浙B11002', replaceBrand: '江淮', replaceModel: 'HFC1190', replaceReason: '客户原因', replaceReasonDesc: '新业务启动', creator: '赵六', createTime: '2025-01-22 08:30' }
|
||||
];
|
||||
|
||||
var appliedFilter = _appliedFilter[0];
|
||||
|
||||
var filteredOngoing = useMemo(function () {
|
||||
var list = ongoingList.filter(function (r) {
|
||||
if (appliedFilter.replaceDateRange && appliedFilter.replaceDateRange.length === 2) {
|
||||
var start = appliedFilter.replaceDateRange[0] && appliedFilter.replaceDateRange[0].format ? appliedFilter.replaceDateRange[0].format('YYYY-MM-DD') : '';
|
||||
var end = appliedFilter.replaceDateRange[1] && appliedFilter.replaceDateRange[1].format ? appliedFilter.replaceDateRange[1].format('YYYY-MM-DD') : '';
|
||||
if (start && (r.replaceDate || '') < start) return false;
|
||||
if (end && (r.replaceDate || '') > end) return false;
|
||||
}
|
||||
if (appliedFilter.replaceType && r.replaceType !== appliedFilter.replaceType) return false;
|
||||
if (appliedFilter.projectName && r.projectName !== appliedFilter.projectName) return false;
|
||||
var approval = appliedFilter.approvalStatus;
|
||||
if (approval && approval.length > 0 && approval.indexOf('全部') === -1 && approval.indexOf(r.approvalStatus) === -1) return false;
|
||||
if (appliedFilter.originalPlate && (r.originalPlate || '').indexOf(appliedFilter.originalPlate) === -1) return false;
|
||||
if (appliedFilter.replacePlate && (r.replacePlate || '').indexOf(appliedFilter.replacePlate) === -1) return false;
|
||||
if (appliedFilter.replaceReason && appliedFilter.replaceReason !== '全部' && r.replaceReason !== appliedFilter.replaceReason) return false;
|
||||
if (appliedFilter.creator && r.creator !== appliedFilter.creator) return false;
|
||||
if (appliedFilter.createTimeRange && appliedFilter.createTimeRange.length === 2) {
|
||||
var cs = appliedFilter.createTimeRange[0] && appliedFilter.createTimeRange[0].format ? appliedFilter.createTimeRange[0].format('YYYY-MM-DD') : '';
|
||||
var ce = appliedFilter.createTimeRange[1] && appliedFilter.createTimeRange[1].format ? appliedFilter.createTimeRange[1].format('YYYY-MM-DD') : '';
|
||||
var ct = (r.createTime || '').slice(0, 10);
|
||||
if (cs && ct < cs) return false;
|
||||
if (ce && ct > ce) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
return list;
|
||||
}, [appliedFilter]);
|
||||
|
||||
var filteredHistory = useMemo(function () {
|
||||
var list = historyList.filter(function (r) {
|
||||
if (appliedFilter.replaceDateRange && appliedFilter.replaceDateRange.length === 2) {
|
||||
var start = appliedFilter.replaceDateRange[0] && appliedFilter.replaceDateRange[0].format ? appliedFilter.replaceDateRange[0].format('YYYY-MM-DD') : '';
|
||||
var end = appliedFilter.replaceDateRange[1] && appliedFilter.replaceDateRange[1].format ? appliedFilter.replaceDateRange[1].format('YYYY-MM-DD') : '';
|
||||
if (start && (r.replaceDate || '') < start) return false;
|
||||
if (end && (r.replaceDate || '') > end) return false;
|
||||
}
|
||||
if (appliedFilter.replaceType && r.replaceType !== appliedFilter.replaceType) return false;
|
||||
if (appliedFilter.projectName && r.projectName !== appliedFilter.projectName) return false;
|
||||
if (appliedFilter.originalPlate && (r.originalPlate || '').indexOf(appliedFilter.originalPlate) === -1) return false;
|
||||
if (appliedFilter.replacePlate && (r.replacePlate || '').indexOf(appliedFilter.replacePlate) === -1) return false;
|
||||
if (appliedFilter.replaceReason && appliedFilter.replaceReason !== '全部' && r.replaceReason !== appliedFilter.replaceReason) return false;
|
||||
if (appliedFilter.creator && r.creator !== appliedFilter.creator) return false;
|
||||
if (appliedFilter.createTimeRange && appliedFilter.createTimeRange.length === 2) {
|
||||
var cs = appliedFilter.createTimeRange[0] && appliedFilter.createTimeRange[0].format ? appliedFilter.createTimeRange[0].format('YYYY-MM-DD') : '';
|
||||
var ce = appliedFilter.createTimeRange[1] && appliedFilter.createTimeRange[1].format ? appliedFilter.createTimeRange[1].format('YYYY-MM-DD') : '';
|
||||
var ct = (r.createTime || '').slice(0, 10);
|
||||
if (cs && ct < cs) return false;
|
||||
if (ce && ct > ce) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
return list;
|
||||
}, [appliedFilter]);
|
||||
|
||||
var handleQuery = useCallback(function () {
|
||||
_appliedFilter[1]({
|
||||
replaceDateRange: _replaceDateRange[0],
|
||||
replaceType: _replaceType[0],
|
||||
projectName: _projectName[0],
|
||||
approvalStatus: _approvalStatus[0] ? _approvalStatus[0].slice() : ['全部'],
|
||||
originalPlate: _originalPlate[0],
|
||||
replacePlate: _replacePlate[0],
|
||||
replaceReason: _replaceReason[0],
|
||||
creator: _creator[0],
|
||||
createTimeRange: _createTimeRange[0]
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handleReset = useCallback(function () {
|
||||
_replaceDateRange[1](null);
|
||||
_replaceType[1](undefined);
|
||||
_projectName[1](undefined);
|
||||
_approvalStatus[1](['全部']);
|
||||
_originalPlate[1](undefined);
|
||||
_replacePlate[1](undefined);
|
||||
_replaceReason[1](undefined);
|
||||
_creator[1](undefined);
|
||||
_createTimeRange[1](null);
|
||||
_appliedFilter[1]({
|
||||
replaceDateRange: null,
|
||||
replaceType: undefined,
|
||||
projectName: undefined,
|
||||
approvalStatus: ['全部'],
|
||||
originalPlate: undefined,
|
||||
replacePlate: undefined,
|
||||
replaceReason: undefined,
|
||||
creator: undefined,
|
||||
createTimeRange: null
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handleApprovalStatusChange = useCallback(function (v) {
|
||||
if (!v || v.length === 0) { _approvalStatus[1](['全部']); return; }
|
||||
if (v.indexOf('全部') !== -1 && v.length > 1) {
|
||||
var prev = _approvalStatus[0] || [];
|
||||
var hadAllOnly = prev.length === 1 && prev.indexOf('全部') !== -1;
|
||||
_approvalStatus[1](hadAllOnly ? v.filter(function (x) { return x !== '全部'; }) : ['全部']);
|
||||
return;
|
||||
}
|
||||
_approvalStatus[1](v);
|
||||
}, []);
|
||||
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%' };
|
||||
|
||||
function getOperationButtons(record, isHistory) {
|
||||
if (isHistory) {
|
||||
var viewBtn = React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { message.info('查看（跳转替换车管理-查看）'); } }, '查看');
|
||||
var toPermanentBtn = record.replaceType === '临时替换' ? React.createElement(Button, { key: 'toPermanent', type: 'link', size: 'small', onClick: function () { _toPermanentModalRecord[1](record); _toPermanentModalVisible[1](true); } }, '转永久替换') : null;
|
||||
return React.createElement('div', { style: { display: 'flex', gap: 4, flexWrap: 'wrap' } }, viewBtn, toPermanentBtn);
|
||||
}
|
||||
var status = record.approvalStatus;
|
||||
var items = [];
|
||||
if (['待审批', '审批中', '审批驳回', '未提交', '撤回'].indexOf(status) !== -1) {
|
||||
items.push(React.createElement(Button, { key: 'view', type: 'link', size: 'small', onClick: function () { message.info('查看（跳转替换车管理-查看）'); } }, '查看'));
|
||||
}
|
||||
if (['未提交', '审批驳回', '撤回'].indexOf(status) !== -1) {
|
||||
items.push(React.createElement(Button, { key: 'edit', type: 'link', size: 'small', onClick: function () { message.info('编辑（跳转替换车管理-编辑）'); } }, '编辑'));
|
||||
}
|
||||
if (status === '审批中') {
|
||||
items.push(React.createElement(Button, { key: 'withdraw', type: 'link', size: 'small', danger: true, onClick: function () { _withdrawModalRecord[1](record); _withdrawModalVisible[1](true); } }, '撤回'));
|
||||
}
|
||||
return React.createElement('div', { style: { display: 'flex', gap: 4, flexWrap: 'wrap' } }, items);
|
||||
}
|
||||
|
||||
var tableColumns = [
|
||||
{ title: '替换日期', dataIndex: 'replaceDate', key: 'replaceDate', width: 110, fixed: 'left' },
|
||||
{ title: '替换类型', dataIndex: 'replaceType', key: 'replaceType', width: 100, fixed: 'left' },
|
||||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, fixed: 'left' },
|
||||
{ title: '审批状态', dataIndex: 'approvalStatus', key: 'approvalStatus', width: 100 },
|
||||
{ title: '被替换车车牌号', dataIndex: 'originalPlate', key: 'originalPlate', width: 120 },
|
||||
{ title: '被替换车品牌', dataIndex: 'originalBrand', key: 'originalBrand', width: 100 },
|
||||
{ title: '被替换车型号', dataIndex: 'originalModel', key: 'originalModel', width: 110 },
|
||||
{ title: '替换车车牌号', dataIndex: 'replacePlate', key: 'replacePlate', width: 120 },
|
||||
{ title: '替换车品牌', dataIndex: 'replaceBrand', key: 'replaceBrand', width: 100 },
|
||||
{ title: '替换车型号', dataIndex: 'replaceModel', key: 'replaceModel', width: 110 },
|
||||
{ title: '替换原因', dataIndex: 'replaceReason', key: 'replaceReason', width: 100 },
|
||||
{ title: '替换原因说明', dataIndex: 'replaceReasonDesc', key: 'replaceReasonDesc', width: 120, ellipsis: true },
|
||||
{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 90 },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 150 },
|
||||
{ title: '操作', key: 'action', width: 160, fixed: 'right', render: function (_, record) { return getOperationButtons(record, _activeTab[0] === 'history'); } }
|
||||
];
|
||||
|
||||
var filterItems = [
|
||||
React.createElement('div', { key: 'replaceDate', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '替换日期'),
|
||||
React.createElement(RangePicker, { style: filterControlStyle, placeholder: ['请选择开始时间', '请选择结束时间'], value: _replaceDateRange[0], onChange: function (v) { _replaceDateRange[1](v); } })),
|
||||
React.createElement('div', { key: 'replaceType', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '替换类型'),
|
||||
React.createElement(Select, { placeholder: '请选择', style: filterControlStyle, value: _replaceType[0], onChange: function (v) { _replaceType[1](v); }, allowClear: true, options: replaceTypeOptions })),
|
||||
React.createElement('div', { key: 'projectName', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '项目名称'),
|
||||
React.createElement(Select, { placeholder: '请输入或选择项目名称', style: filterControlStyle, value: _projectName[0], onChange: function (v) { _projectName[1](v); }, allowClear: true, showSearch: true, options: projectNameOptions, filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; } })),
|
||||
React.createElement('div', { key: 'approvalStatus', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '审批状态'),
|
||||
React.createElement(Select, { mode: 'multiple', placeholder: '请选择', style: filterControlStyle, value: _approvalStatus[0], onChange: handleApprovalStatusChange, options: approvalStatusOptions })),
|
||||
React.createElement('div', { key: 'originalPlate', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '被替换车车牌号'),
|
||||
React.createElement(Select, { placeholder: '请输入或选择车牌号', style: filterControlStyle, value: _originalPlate[0], onChange: function (v) { _originalPlate[1](v); }, allowClear: true, showSearch: true, options: plateOptions, filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; } })),
|
||||
React.createElement('div', { key: 'replacePlate', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '替换车车牌号'),
|
||||
React.createElement(Select, { placeholder: '请输入或选择车牌号', style: filterControlStyle, value: _replacePlate[0], onChange: function (v) { _replacePlate[1](v); }, allowClear: true, showSearch: true, options: plateOptions, filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; } })),
|
||||
React.createElement('div', { key: 'replaceReason', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '替换原因'),
|
||||
React.createElement(Select, { placeholder: '请选择', style: filterControlStyle, value: _replaceReason[0], onChange: function (v) { _replaceReason[1](v); }, allowClear: true, options: replaceReasonOptions })),
|
||||
React.createElement('div', { key: 'creator', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '创建人'),
|
||||
React.createElement(Select, { placeholder: '请选择创建人', style: filterControlStyle, value: _creator[0], onChange: function (v) { _creator[1](v); }, allowClear: true, options: creatorOptions })),
|
||||
React.createElement('div', { key: 'createTime', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '创建时间'),
|
||||
React.createElement(RangePicker, { style: filterControlStyle, placeholder: ['请选择开始时间', '请选择结束时间'], value: _createTimeRange[0], onChange: function (v) { _createTimeRange[1](v); } }))
|
||||
];
|
||||
|
||||
var filterCount = _filterExpanded[0] ? 9 : 3;
|
||||
var filterNodes = [];
|
||||
for (var i = 0; i < filterCount && i < filterItems.length; i++) {
|
||||
filterNodes.push(filterItems[i]);
|
||||
}
|
||||
|
||||
var _page = useState(1);
|
||||
var _pageSize = useState(10);
|
||||
var page = _page[0];
|
||||
var setPage = _page[1];
|
||||
var pageSize = _pageSize[0];
|
||||
var setPageSize = _pageSize[1];
|
||||
var currentList = _activeTab[0] === 'ongoing' ? filteredOngoing : filteredHistory;
|
||||
var displayList = useMemo(function () {
|
||||
var start = (page - 1) * pageSize;
|
||||
return currentList.slice(start, start + pageSize);
|
||||
}, [currentList, page, pageSize]);
|
||||
|
||||
var rowSelection = {
|
||||
selectedRowKeys: _selectedRowKeys[0],
|
||||
onChange: function (keys) { _selectedRowKeys[1](keys); },
|
||||
fixed: true
|
||||
};
|
||||
|
||||
var requirementContent = `替换车管理（2026年3月3日版本）
|
||||
一个「数字化资产ONEOS运管平台」中的「运维管理」「车辆业务」「替换车管理」模块
|
||||
|
||||
1.面包屑：
|
||||
1.1.运维管理-车辆业务-替换车管理
|
||||
|
||||
筛选与列表分为2个卡片；
|
||||
|
||||
2.筛选：
|
||||
支持通过替换日期、替换类型、项目名称、审批状态、被替换车车牌号、替换车车牌号、替换原因、创建人、创建时间进行筛选，右侧为重置、查询、展开/收起（筛选条件以3列显示，默认显示一行，点击展开/收起对筛选栏卡片进行展开/收起所有筛选条件），点击查询后，筛选条件与列表内容联动。点击重置会回到默认筛选条件并在列表展示结果：
|
||||
|
||||
2.1.替换日期：日期选择器，支持单输入框内双日历选择开始-结束时间，默认提示文本为：请选择开始时间、请选择结束时间；
|
||||
2.2.替换类型：选择器，分为永久替换、临时替换两种方式；
|
||||
2.3.项目名称：选择器，支持输入框中输入关键内容进行搜索，下拉匹配相应项；
|
||||
2.4.审批状态：选择器，分为全部、待审批、审批中、审批驳回、未提交、撤回；
|
||||
2.5.被替换车车牌号：选择器，支持输入框中输入关键内容进行搜索，下拉匹配相应项；
|
||||
2.6.替换车车牌号：选择器，支持输入框中输入关键内容进行搜索，下拉匹配相应项；
|
||||
2.7.替换原因：选择器，分为全部、客户原因、车辆原因；
|
||||
2.8.创建人：选择器，下拉选择所有创建人；
|
||||
2.9.创建时间：日期选择器，支持单输入框内双日历选择开始-结束时间，默认提示文本为：请选择开始时间、请选择结束时间；
|
||||
|
||||
3.列表：列表右上角为新增、导出，首列为多选，支持多选后导出对应条目；
|
||||
列表展示所有替换车记录，分为进行中、历史记录两个tab，字段依次为：替换日期、替换类型、项目名称、审批状态、被替换车车牌号、被替换车品牌、被替换车型号、替换车车牌号、替换车品牌、替换车型号、替换原因、替换原因说明、创建人、创建时间、操作；
|
||||
|
||||
3.1.进行中：显示替换车申请流程未结束、暂存的记录；
|
||||
3.1.1.替换日期：显示格式为：YYYY-MM-DD，显示替换车申请表单中设置的替换日期；
|
||||
3.1.2.替换类型：分为：临时替换、永久替换两种，根据替换车申请表单中设置的替换类型显示；
|
||||
3.1.3.项目名称：显示替换车申请表单中设置的项目名称；
|
||||
3.1.4.审批状态：显示替换车申请当前审批状态，分为待审批、审批中、审批驳回、未提交、撤回；
|
||||
3.1.4.1.待审批：发起人已提交，但还没有任何流程节点完成审批；
|
||||
3.1.4.2.审批中：发起人已提交，已有1个以上节点完成审批，但未完成最终节点审批；
|
||||
3.1.4.3.审批驳回：发起人已提交，任意流程节点驳回，该状态下操作列支持编辑和重新提交；
|
||||
3.1.4.4.未提交：发起人仅保存，但未提交审批；
|
||||
3.1.4.5.撤回：发起人主动撤回审批流程；
|
||||
3.1.5.被替换车车牌号：显示替换车申请表单中被替换车车牌号；
|
||||
3.1.6.被替换车品牌：显示替换车申请表单中被替换车品牌；
|
||||
3.1.7.被替换车型号：显示替换车申请表单中被替换车型号；
|
||||
3.1.8.替换车车牌号：显示替换车申请表单中替换车车牌号；
|
||||
3.1.9.替换车品牌：显示替换车申请表单中替换车品牌；
|
||||
3.1.10.替换车型号：显示替换车申请表单中替换车型号；
|
||||
3.1.11.替换原因：显示替换车申请表单中替换原因；
|
||||
3.1.12.替换原因说明：显示替换车申请表单中替换原因说明；
|
||||
3.1.13.创建人：显示替换车申请表单中创建人；
|
||||
3.1.14.创建时间：显示替换车申请表单中创建时间，显示格式为：YYYY-MM-DD HH:MM；
|
||||
3.1.15.操作：查看、编辑、撤回；
|
||||
3.1.15.1.查看：当「审批状态」为「待审批」「审批中」「审批驳回」「未提交」「撤回」时显示，点击跳转替换车管理-查看页面；
|
||||
3.1.15.2.编辑：当「审批状态」为「未提交」「审批驳回」「撤回」时显示，点击跳转替换车管理-编辑页面；
|
||||
3.1.15.3.撤回：当「审批状态」为「审批中」时显示，点击撤回合同时进行二次确认，提示语：是否确认撤回该替换车申请；
|
||||
|
||||
3.2.历史记录：显示替换车申请流程已结束的记录；
|
||||
3.2.1.替换日期：显示格式为：YYYY-MM-DD，显示替换车申请表单中设置的替换日期；
|
||||
3.2.2.替换类型：分为：临时替换、永久替换两种，根据替换车申请表单中设置的替换类型显示；
|
||||
3.2.3.项目名称：显示替换车申请表单中设置的项目名称；
|
||||
3.2.4.审批状态：历史记录中所有审批状态为审批完成；
|
||||
3.2.5.被替换车车牌号：显示替换车申请表单中被替换车车牌号；
|
||||
3.2.6.被替换车品牌：显示替换车申请表单中被替换车品牌；
|
||||
3.2.7.被替换车型号：显示替换车申请表单中被替换车型号；
|
||||
3.2.8.替换车车牌号：显示替换车申请表单中替换车车牌号；
|
||||
3.2.9.替换车品牌：显示替换车申请表单中替换车品牌；
|
||||
3.2.10.替换车型号：显示替换车申请表单中替换车型号；
|
||||
3.2.11.替换原因：显示替换车申请表单中替换原因；
|
||||
3.2.12.替换原因说明：显示替换车申请表单中替换原因说明；
|
||||
3.2.13.创建人：显示替换车申请表单中创建人；
|
||||
3.2.14.创建时间：显示替换车申请表单中创建时间，显示格式为：YYYY-MM-DD HH:MM；
|
||||
3.2.15.操作：查看、转永久替换；
|
||||
3.2.15.1.查看：点击跳转替换车管理-查看页面；
|
||||
3.2.15.2.转永久替换：点击转永久替换，进行二次确认，提示语：是否确认转永久替换，点击提交直接转为永久替换；
|
||||
|
||||
列表右下方为分页符。`;
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var reqTitleStyle = { fontSize: 18, fontWeight: 600, marginBottom: 16, color: 'rgba(0,0,0,0.85)' };
|
||||
var reqSectionStyle = { fontSize: 15, fontWeight: 600, marginTop: 16, marginBottom: 8, color: 'rgba(0,0,0,0.85)' };
|
||||
var reqItemStyle = { fontSize: 13, marginLeft: 32, marginTop: 4, marginBottom: 2, lineHeight: 1.6, color: 'rgba(0,0,0,0.75)' };
|
||||
|
||||
return React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 } },
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [
|
||||
{ title: '运维管理' },
|
||||
{ title: '车辆业务' },
|
||||
{ title: '替换车管理' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { _requirementModalVisible[1](true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } }, filterNodes),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
|
||||
React.createElement(Button, { onClick: handleReset }, '重置'),
|
||||
React.createElement(Button, { type: 'primary', onClick: handleQuery }, '查询'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { _filterExpanded[1](!_filterExpanded[0]); } }, _filterExpanded[0] ? '收起' : '展开')
|
||||
)
|
||||
),
|
||||
React.createElement(Card, null,
|
||||
React.createElement('div', { style: { marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
|
||||
React.createElement(Tabs, {
|
||||
activeKey: _activeTab[0],
|
||||
onChange: function (k) { _activeTab[1](k); _selectedRowKeys[1]([]); setPage(1); },
|
||||
items: [
|
||||
{ key: 'ongoing', label: '进行中' },
|
||||
{ key: 'history', label: '历史记录' }
|
||||
]
|
||||
}),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8 } },
|
||||
React.createElement(Button, { type: 'primary', onClick: function () { message.info('新增替换车申请（原型）'); } }, '新增'),
|
||||
React.createElement(Button, { onClick: function () { message.info('导出选中记录（原型）'); } }, '导出')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
rowSelection: rowSelection,
|
||||
columns: tableColumns,
|
||||
dataSource: displayList,
|
||||
size: 'small',
|
||||
scroll: { x: 1600 },
|
||||
pagination: {
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
total: currentList.length,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: function (t) { return '共 ' + t + ' 条'; },
|
||||
onChange: function (p, ps) { setPage(p); if (ps) setPageSize(ps); }
|
||||
}
|
||||
})
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '是否确认撤回该替换车申请',
|
||||
open: _withdrawModalVisible[0],
|
||||
onCancel: function () { _withdrawModalVisible[1](false); _withdrawModalRecord[1](null); },
|
||||
onOk: function () { message.success('已撤回（原型）'); _withdrawModalVisible[1](false); _withdrawModalRecord[1](null); },
|
||||
okText: '确定',
|
||||
cancelText: '取消'
|
||||
}),
|
||||
React.createElement(Modal, {
|
||||
title: '是否确认转永久替换',
|
||||
open: _toPermanentModalVisible[0],
|
||||
onCancel: function () { _toPermanentModalVisible[1](false); _toPermanentModalRecord[1](null); },
|
||||
onOk: function () { message.success('已转为永久替换（原型）'); _toPermanentModalVisible[1](false); _toPermanentModalRecord[1](null); },
|
||||
okText: '提交',
|
||||
cancelText: '取消'
|
||||
}),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: _requirementModalVisible[0],
|
||||
onCancel: function () { _requirementModalVisible[1](false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { _requirementModalVisible[1](false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0' } },
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
)
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user