web端：财务管理提车应收款-收款、车辆租赁合同与替换车管理改动同步
- 财务管理：新增提车应收款-收款.jsx，移除旧提车应收款/收费明细/首付款页面；项目信息与开票信息改为直接展示 - 车辆租赁合同：列表租赁车辆数/已交车辆数及气泡列调整；续签/转正式合同去除合同编码，交车区域·交车地点·合同原件布局调整 - 运维-车辆业务：新增替换车管理、替换车管理-新增/查看/编辑 Made-with: Cursor
This commit is contained in:
王冕
599
web端/财务管理/提车应收款-收款.jsx
Normal file
599
web端/财务管理/提车应收款-收款.jsx
Normal file
@@ -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
web端/财务管理/提车首付款.jsx
1048
web端/财务管理/提车首付款.jsx
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -394,6 +394,18 @@ const Component = function() {
|
|||||||
next.splice(index, 1);
|
next.splice(index, 1);
|
||||||
setRentalOrders(next.length ? next : [{ brand: '', model: '', plateNo: '', vin: '', monthRent: '', serviceItems: [{ project: '', fee: '', effectiveDate: '' }], deposit: '', remark: '' }]);
|
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) {
|
var updateRentalOrder = function(index, field, value) {
|
||||||
setEdited(true);
|
setEdited(true);
|
||||||
var next = rentalOrders.slice(0);
|
var next = rentalOrders.slice(0);
|
||||||
@@ -578,7 +590,6 @@ const Component = function() {
|
|||||||
|
|
||||||
var contractFormRow1 = React.createElement('div', { style: styles.formRow },
|
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: '项目名称', 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.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.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: '后付' }, '后付'))),
|
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,8 +597,12 @@ 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.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.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(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.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(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal },
|
||||||
React.createElement('div', null,
|
React.createElement('div', null,
|
||||||
React.createElement('div', { style: { color: '#999', fontSize: 12, marginBottom: 8 } }, '支持多个附件上传（doc/docx/pdf）'),
|
React.createElement('div', { style: { color: '#999', fontSize: 12, marginBottom: 8 } }, '支持多个附件上传（doc/docx/pdf）'),
|
||||||
@@ -612,8 +627,6 @@ const Component = function() {
|
|||||||
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(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.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 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 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 })));
|
||||||
|
|
||||||
@@ -649,7 +662,7 @@ const Component = function() {
|
|||||||
React.createElement('td', { style: styles.rentalTdCenter }, calcRowServiceFee(row) + ' 元'),
|
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('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.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 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 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 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 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 rentalTableTbody = React.createElement('tbody', null, rentalTableBody);
|
||||||
var rentalTableEl = React.createElement('table', { style: styles.rentalTable }, rentalTableThead, rentalTableTbody);
|
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('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-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-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-rental', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '租赁订单信息', collapsed: cc4, setCollapsed: setCc4 }, rentalContent)),
|
||||||
React.createElement('div', { id: 'card-fee', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '其他费用信息', collapsed: cc5, setCollapsed: setCc5 }, feeContent)),
|
React.createElement('div', { id: 'card-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 },
|
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: '项目名称', 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 }, 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.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: '后付' }, '后付'))),
|
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,8 +576,12 @@ 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.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.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(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.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(FormItem, { label: '合同原件', required: true, error: formErrors.contractOriginal },
|
||||||
React.createElement('div', null,
|
React.createElement('div', null,
|
||||||
React.createElement('div', { style: { color: '#999', fontSize: 12, marginBottom: 8 } }, '从原合同自动反写，支持多个附件上传（doc/docx/pdf）'),
|
React.createElement('div', { style: { color: '#999', fontSize: 12, marginBottom: 8 } }, '从原合同自动反写，支持多个附件上传（doc/docx/pdf）'),
|
||||||
@@ -603,8 +606,6 @@ const Component = function() {
|
|||||||
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(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.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 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 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 })));
|
||||||
|
|
||||||
@@ -841,7 +842,7 @@ const Component = function() {
|
|||||||
React.createElement('button', { style: styles.anchorItem, onClick: function() { scrollToCard('card-billing'); } }, '账单计算方式')
|
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-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-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-rental', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '租赁订单信息', collapsed: cc4, setCollapsed: setCc4 }, rentalContent)),
|
||||||
React.createElement('div', { id: 'card-fee', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '其他费用信息', collapsed: cc5, setCollapsed: setCc5 }, feeContent)),
|
React.createElement('div', { id: 'card-fee', style: { marginTop: 16 } }, React.createElement(CardBlock, { title: '其他费用信息', collapsed: cc5, setCollapsed: setCc5 }, feeContent)),
|
||||||
|
|||||||
@@ -51,6 +51,7 @@ const Component = function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
var _vehiclePopoverRecord = useState(null);
|
var _vehiclePopoverRecord = useState(null);
|
||||||
|
var _deliveredPopoverRecord = useState(null);
|
||||||
var _authorizedModalVisible = useState(false);
|
var _authorizedModalVisible = useState(false);
|
||||||
var _authorizedModalRecord = useState(null);
|
var _authorizedModalRecord = useState(null);
|
||||||
var _authorizedList = useState([{ name: '', phone: '', idCard: '' }]);
|
var _authorizedList = useState([{ name: '', phone: '', idCard: '' }]);
|
||||||
@@ -140,8 +141,8 @@ const Component = function() {
|
|||||||
projectName: '嘉兴氢能示范项目',
|
projectName: '嘉兴氢能示范项目',
|
||||||
vehicleCount: 2,
|
vehicleCount: 2,
|
||||||
vehicles: [
|
vehicles: [
|
||||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '浙A12345', actualDelivery: '2025-01-10 09:00' },
|
{ 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' }
|
{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '-', actualDelivery: '2025-01-12 14:30', deliveryPerson: '李运维' }
|
||||||
],
|
],
|
||||||
approvalStatus: '未提交',
|
approvalStatus: '未提交',
|
||||||
contractStatus: '草稿',
|
contractStatus: '草稿',
|
||||||
@@ -166,7 +167,7 @@ const Component = function() {
|
|||||||
projectName: '上海物流租赁项目',
|
projectName: '上海物流租赁项目',
|
||||||
vehicleCount: 1,
|
vehicleCount: 1,
|
||||||
vehicles: [
|
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: '未提交',
|
approvalStatus: '未提交',
|
||||||
contractStatus: '草稿',
|
contractStatus: '草稿',
|
||||||
@@ -191,7 +192,7 @@ const Component = function() {
|
|||||||
projectName: '杭州城配租赁项目',
|
projectName: '杭州城配租赁项目',
|
||||||
vehicleCount: 1,
|
vehicleCount: 1,
|
||||||
vehicles: [
|
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: '待审批',
|
approvalStatus: '待审批',
|
||||||
contractStatus: '已提交审批',
|
contractStatus: '已提交审批',
|
||||||
@@ -216,8 +217,8 @@ const Component = function() {
|
|||||||
projectName: '宁波冷链运输项目',
|
projectName: '宁波冷链运输项目',
|
||||||
vehicleCount: 2,
|
vehicleCount: 2,
|
||||||
vehicles: [
|
vehicles: [
|
||||||
{ vehicleType: '18吨双飞翼货车-重型厢式货车', brand: '品牌B', model: '型号B2', plateNo: '-', actualDelivery: '2025-02-16 10: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' }
|
{ vehicleType: '49吨牵引车头-重型半挂牵引车', brand: '品牌D', model: '型号D1', plateNo: '浙C30003', actualDelivery: '2025-02-18 14:00', deliveryPerson: '孙运维' }
|
||||||
],
|
],
|
||||||
approvalStatus: '审批中',
|
approvalStatus: '审批中',
|
||||||
contractStatus: '已提交审批',
|
contractStatus: '已提交审批',
|
||||||
@@ -242,7 +243,7 @@ const Component = function() {
|
|||||||
projectName: '苏州城配试点项目',
|
projectName: '苏州城配试点项目',
|
||||||
vehicleCount: 1,
|
vehicleCount: 1,
|
||||||
vehicles: [
|
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: '审批中',
|
approvalStatus: '审批中',
|
||||||
contractStatus: '变更',
|
contractStatus: '变更',
|
||||||
@@ -267,9 +268,9 @@ const Component = function() {
|
|||||||
projectName: '南京氢能示范项目',
|
projectName: '南京氢能示范项目',
|
||||||
vehicleCount: 3,
|
vehicleCount: 3,
|
||||||
vehicles: [
|
vehicles: [
|
||||||
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '苏A60006', actualDelivery: '2025-01-20 08: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' },
|
{ 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' }
|
{ vehicleType: '35吨牵引车头-重型半挂牵引车', brand: '品牌D', model: '型号D1', plateNo: '苏A60008', actualDelivery: '2025-01-22 14:00', deliveryPerson: '冯运维' }
|
||||||
],
|
],
|
||||||
approvalStatus: '审批通过',
|
approvalStatus: '审批通过',
|
||||||
contractStatus: '合同进行中',
|
contractStatus: '合同进行中',
|
||||||
@@ -294,7 +295,7 @@ const Component = function() {
|
|||||||
projectName: '无锡试用租赁项目',
|
projectName: '无锡试用租赁项目',
|
||||||
vehicleCount: 1,
|
vehicleCount: 1,
|
||||||
vehicles: [
|
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: '审批通过',
|
approvalStatus: '审批通过',
|
||||||
contractStatus: '合同进行中',
|
contractStatus: '合同进行中',
|
||||||
@@ -345,8 +346,8 @@ const Component = function() {
|
|||||||
projectName: '南通去年到期项目',
|
projectName: '南通去年到期项目',
|
||||||
vehicleCount: 2,
|
vehicleCount: 2,
|
||||||
vehicles: [
|
vehicles: [
|
||||||
{ vehicleType: '18吨双飞翼货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '苏F90009', actualDelivery: '2024-03-01 09: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' }
|
{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '苏F90010', actualDelivery: '2024-03-02 10:00', deliveryPerson: '卫运维' }
|
||||||
],
|
],
|
||||||
approvalStatus: '审批通过',
|
approvalStatus: '审批通过',
|
||||||
contractStatus: '到期合同',
|
contractStatus: '到期合同',
|
||||||
@@ -371,7 +372,7 @@ const Component = function() {
|
|||||||
projectName: '镇江到期合同项目',
|
projectName: '镇江到期合同项目',
|
||||||
vehicleCount: 1,
|
vehicleCount: 1,
|
||||||
vehicles: [
|
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: '审批通过',
|
approvalStatus: '审批通过',
|
||||||
contractStatus: '已结束',
|
contractStatus: '已结束',
|
||||||
@@ -602,12 +603,21 @@ const Component = function() {
|
|||||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
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 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: 'vehicleType', key: 'vehicleType', width: 180 },
|
||||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 80 },
|
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 80 },
|
||||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 100 },
|
{ title: '型号', dataIndex: 'model', key: 'model', width: 100 },
|
||||||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', 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) {
|
function getMoreMenuItems(record) {
|
||||||
@@ -681,19 +691,19 @@ const Component = function() {
|
|||||||
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 140, fixed: 'left' },
|
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 140, fixed: 'left' },
|
||||||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, fixed: 'left' },
|
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, fixed: 'left' },
|
||||||
{
|
{
|
||||||
title: '车辆数',
|
title: '租赁车辆数',
|
||||||
key: 'vehicleCount',
|
key: 'vehicleCount',
|
||||||
width: 90,
|
width: 100,
|
||||||
render: function(_, record) {
|
render: function(_, record) {
|
||||||
var open = _vehiclePopoverRecord[0] && _vehiclePopoverRecord[0].id === record.id;
|
var open = _vehiclePopoverRecord[0] && _vehiclePopoverRecord[0].id === record.id;
|
||||||
var content = React.createElement('div', { style: { padding: 8 } },
|
var content = React.createElement('div', { style: { padding: 8 } },
|
||||||
React.createElement(Table, {
|
React.createElement(Table, {
|
||||||
size: 'small',
|
size: 'small',
|
||||||
rowKey: function(r, i) { return String(i); },
|
rowKey: function(r, i) { return String(i); },
|
||||||
columns: vehicleColumns,
|
columns: vehicleColumnsRental,
|
||||||
dataSource: record.vehicles || [],
|
dataSource: record.vehicles || [],
|
||||||
pagination: false,
|
pagination: false,
|
||||||
scroll: { x: 600 }
|
scroll: { x: 460 }
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
return React.createElement(
|
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: 'approvalStatus', key: 'approvalStatus', width: 100 },
|
||||||
{ title: '合同状态', dataIndex: 'contractStatus', key: 'contractStatus', width: 110 },
|
{ title: '合同状态', dataIndex: 'contractStatus', key: 'contractStatus', width: 110 },
|
||||||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 140 },
|
{ 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.10.创建人：选择器，支持全选或多选，拉取所有业务相关部门下所有用户姓名；'),
|
||||||
React.createElement('div', { style: reqItemStyle }, '2.1.11.合同结束日期：日期选择器，支持单输入框内双日历选择开始-结束时间；'),
|
React.createElement('div', { style: reqItemStyle }, '2.1.11.合同结束日期：日期选择器，支持单输入框内双日历选择开始-结束时间；'),
|
||||||
React.createElement('div', { style: reqSectionStyle }, '3.列表：'),
|
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.1.合同编码：显示租赁合同对应合同编码；'),
|
||||||
React.createElement('div', { style: reqItemStyle }, '3.1.2.项目名称：显示租赁合同对应项目名称；'),
|
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.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.2.品牌：显示租赁合同中对应车辆品牌；'),
|
||||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.3.3.型号：显示租赁合同中对应车辆型号；'),
|
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.3.审批通过：发起人已提交，最终节点完成审批；'),
|
||||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.4.4.审批驳回：发起人已提交，任意流程节点驳回，该状态下操作列支持编辑和重新提交；'),
|
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.5.未提交：发起人仅保存，但未提交审批；'),
|
||||||
|
React.createElement('div', { style: reqSubItemStyle }, '3.1.4.6.撤回：发起人主动撤回审批流程；'),
|
||||||
React.createElement('div', { style: reqItemStyle }, '3.1.5.合同状态：显示租赁合同状态，状态分为：草稿、变更、合同进行中、到期合同、已提交审批、已结束；'),
|
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.1.草稿：发起人仅保存，但未提交审批；'),
|
||||||
React.createElement('div', { style: reqSubItemStyle }, '3.1.5.2.变更：发起人提交后，合同已通过审批的基础上，进行了「变更内容」操作，且已提交审批，但未完成最终节点审批；'),
|
React.createElement('div', { style: reqSubItemStyle }, '3.1.5.2.变更：发起人提交后，合同已通过审批的基础上，进行了「变更内容」操作，且已提交审批，但未完成最终节点审批；'),
|
||||||
|
|||||||
344
web端/运维管理/车辆业务/替换车管理-新增.jsx
Normal file
344
web端/运维管理/车辆业务/替换车管理-新增.jsx
Normal file
@@ -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: '返回'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
203
web端/运维管理/车辆业务/替换车管理-查看.jsx
Normal file
203
web端/运维管理/车辆业务/替换车管理-查看.jsx
Normal file
@@ -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))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
322
web端/运维管理/车辆业务/替换车管理-编辑.jsx
Normal file
322
web端/运维管理/车辆业务/替换车管理-编辑.jsx
Normal file
@@ -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))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
493
web端/运维管理/车辆业务/替换车管理.jsx
Normal file
493
web端/运维管理/车辆业务/替换车管理.jsx
Normal file
@@ -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