运维/财务：完善交车单编辑/查看与还车应结款页面
- 交车单编辑页：布局对齐、检查单合并、照片必填与需求说明 - 新增交车单查看页：只读展示与样例数据 - 还车应结款相关页面与需求说明补齐 Made-with: Cursor
This commit is contained in:
王冕
@@ -13,8 +13,13 @@ const Component = function () {
|
||||
var Select = antd.Select;
|
||||
var Table = antd.Table;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Modal = antd.Modal;
|
||||
var message = antd.message;
|
||||
|
||||
var requirementModalOpen = useState(false);
|
||||
var setRequirementModalOpen = requirementModalOpen[1];
|
||||
var requirementDocContent = '交车管理-交车单\n一个「数字化资产ONEOS运管平台」中的「交车管理-交车单」模块\n\n1.面包屑：\n1.1.运维管理-车辆业务-交车管理-交车单\n\n每个模块为一个单独卡片：\n\n2.项目详情：表单结构：\n2.1.项目名称：输入框禁用，显示该交车单对应车辆租赁合同中项目名称；\n2.2.合同编码：输入框禁用，显示该交车单对应车辆租赁合同中项目合同编码；\n2.3.客户名称：输入框禁用，显示该交车单对应车辆租赁合同中客户名称；\n2.4.预计交车日期：日期选择器禁用，显示该交车单预计交车日期，分为单日和日期区间两种，格式为：YYYY-MM-DD、YYYY-MM-DD至YYYY-MM-DD；\n2.5.交车区域：输入框禁用，显示该交车单对应车辆租赁合同中交车区域；\n2.6.交车地点：输入框禁用，显示该交车单对应车辆租赁合同中交车地点；\n2.7.业务部门：输入框禁用，显示该交车单对应车辆租赁合同中业务部门；\n2.8.业务负责人：输入框禁用，显示该交车单对应车辆租赁合同中业务负责人；\n\n3.交车明细：列表结构；\n3.1.序号：与车辆租赁合同中序号对应，显示该交车任务所有车辆序号；\n3.2.品牌：选择器禁用，显示该交车单对应车辆租赁合同中品牌；\n3.3.型号：选择器禁用，显示该交车单对应车辆租赁合同中型号；\n3.4.车牌号：已交车车辆显示车牌号，未交车车辆显示-；\n3.5.实际交车日期：日期选择器禁用，显示该交车单实际交车日期，精确至日，格式为：YYYY-MM-DD；\n3.6.交车人：输入框禁用，显示该交车单中该车辆实际交车人员（注意这里是交车单中某辆车的交车人员，一个交车单可同时多个交车人员操作同时交多辆车，而不是最终提交整个交车单的人员）；\n3.7.交车状态：已完成、待提交、已签章；\n 3.7.1.已完成：已完成交车提交，但还未完成被授权人签章；\n 3.7.2.待提交：仅点击保存，未完成交车提交；\n 3.7.3.已签章：已完成交车提交并完成被授权人签章；\n3.8.操作：查看、编辑、下载签章文件；\n 3.8.1.查看：点击跳转该车辆交车明细；\n 3.8.2.编辑：交车状态为待提交时显示，点击弹出卡片至交车明细编辑页；\n 3.8.3.下载签章文件：交车完成并完成被授权人签章时显示，点击下载签章文件；\n\n4.底部为提交、取消按钮；\n 4.1.提交：提交按钮必须所有车辆交车状态为已签章时才可提交，否则为禁用状态；\n 4.2.取消：点击返回交车管理列表页；';
|
||||
|
||||
// 项目详情（只读，来自交车任务/租赁合同）
|
||||
var projectDetail = useMemo(function () {
|
||||
return {
|
||||
@@ -93,19 +98,13 @@ const Component = function () {
|
||||
message.success('下载签章文件（原型）');
|
||||
}, []);
|
||||
|
||||
var card1Collapsed = useState(false)[0];
|
||||
var setCard1Collapsed = useState(false)[1];
|
||||
var card2Collapsed = useState(false)[0];
|
||||
var setCard2Collapsed = useState(false)[1];
|
||||
|
||||
var styles = {
|
||||
page: { padding: '16px 24px 48px', backgroundColor: '#f5f5f5', minHeight: '100vh', fontFamily: '"PingFang SC", "苹方-简", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif', fontSize: 14 },
|
||||
breadcrumb: { marginBottom: 16, color: '#666' },
|
||||
breadcrumbSep: { margin: '0 8px', color: '#999' },
|
||||
card: { backgroundColor: '#fff', borderRadius: 8, marginBottom: 16, boxShadow: '0 1px 2px rgba(0,0,0,0.05)', overflow: 'hidden' },
|
||||
cardHeader: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid #f0f0f0', cursor: 'pointer' },
|
||||
cardHeader: { display: 'flex', alignItems: 'center', padding: '16px 20px', borderBottom: '1px solid #f0f0f0' },
|
||||
cardTitle: { fontSize: 16, fontWeight: 600, color: '#333' },
|
||||
cardToggle: { color: '#999', fontSize: 14 },
|
||||
cardBody: { padding: '20px 24px' },
|
||||
formRow: { display: 'flex', flexWrap: 'wrap', marginBottom: 16 },
|
||||
formCol: { flex: '0 0 33.33%', minWidth: 200, paddingRight: 16, marginBottom: 8 },
|
||||
@@ -117,11 +116,10 @@ const Component = function () {
|
||||
|
||||
var CardBlock = function (props) {
|
||||
return React.createElement('div', { id: props.id, style: styles.card },
|
||||
React.createElement('div', { style: styles.cardHeader, onClick: function () { props.setCollapsed(!props.collapsed); } },
|
||||
React.createElement('span', { style: styles.cardTitle }, props.title),
|
||||
React.createElement('span', { style: styles.cardToggle }, props.collapsed ? '展开' : '收起')
|
||||
React.createElement('div', { style: styles.cardHeader },
|
||||
React.createElement('span', { style: styles.cardTitle }, props.title)
|
||||
),
|
||||
!props.collapsed ? React.createElement('div', { style: styles.cardBody }, props.children) : null
|
||||
React.createElement('div', { style: styles.cardBody }, props.children)
|
||||
);
|
||||
};
|
||||
|
||||
@@ -143,16 +141,11 @@ const Component = function () {
|
||||
key: 'plateNo',
|
||||
width: 120,
|
||||
render: function (v, record, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择或搜索',
|
||||
style: { width: '100%' },
|
||||
value: v || undefined,
|
||||
onChange: function (val) { updateDetailRow(index, 'plateNo', val || ''); },
|
||||
showSearch: true,
|
||||
allowClear: true,
|
||||
options: reservePlateOptions,
|
||||
filterOption: function (input, opt) { return (opt && opt.label && String(opt.label).toLowerCase().indexOf((input || '').toLowerCase()) >= 0); }
|
||||
});
|
||||
var isDelivered = record.status === '已签章' || record.status === '已完成';
|
||||
if (isDelivered) {
|
||||
return React.createElement(Input, { value: v || '', disabled: true, style: { width: '100%', background: '#f5f5f5' } });
|
||||
}
|
||||
return React.createElement(Input, { value: '-', disabled: true, style: { width: '100%', background: '#f5f5f5' } });
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -186,17 +179,20 @@ const Component = function () {
|
||||
];
|
||||
|
||||
return React.createElement('div', { style: styles.page },
|
||||
React.createElement('div', { style: styles.breadcrumb },
|
||||
React.createElement('span', null, '运维管理'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', null, '车辆业务'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', null, '交车管理'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', { style: { color: '#1890ff' } }, '交车单')
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||||
React.createElement('div', { style: styles.breadcrumb },
|
||||
React.createElement('span', null, '运维管理'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', null, '车辆业务'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', null, '交车管理'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', { style: { color: '#1890ff' } }, '交车单')
|
||||
),
|
||||
React.createElement(Button, { type: 'link', onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
|
||||
),
|
||||
|
||||
React.createElement('div', { id: 'card-project' }, React.createElement(CardBlock, { id: 'card-project', title: '项目详情', collapsed: card1Collapsed, setCollapsed: setCard1Collapsed }, React.createElement('div', { style: styles.formRow },
|
||||
React.createElement('div', { id: 'card-project' }, React.createElement(CardBlock, { id: 'card-project', title: '项目详情' }, React.createElement('div', { style: styles.formRow },
|
||||
React.createElement(FormItem, { label: '项目名称' }, React.createElement(Input, { value: projectDetail.projectName, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement(FormItem, { label: '合同编码' }, React.createElement(Input, { value: projectDetail.contractCode, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement(FormItem, { label: '客户名称' }, React.createElement(Input, { value: projectDetail.customerName, disabled: true, style: styles.inputDisabled })),
|
||||
@@ -207,7 +203,7 @@ const Component = function () {
|
||||
React.createElement(FormItem, { label: '业务负责人' }, React.createElement(Input, { value: projectDetail.businessOwner, disabled: true, style: styles.inputDisabled }))
|
||||
))),
|
||||
|
||||
React.createElement('div', { id: 'card-detail', style: { marginTop: 16 } }, React.createElement(CardBlock, { id: 'card-detail', title: '交车明细', collapsed: card2Collapsed, setCollapsed: setCard2Collapsed }, React.createElement(Table, {
|
||||
React.createElement('div', { id: 'card-detail', style: { marginTop: 16 } }, React.createElement(CardBlock, { id: 'card-detail', title: '交车明细' }, React.createElement(Table, {
|
||||
columns: columns,
|
||||
dataSource: detailList,
|
||||
rowKey: 'key',
|
||||
@@ -220,6 +216,15 @@ const Component = function () {
|
||||
React.createElement('div', { style: styles.footer },
|
||||
React.createElement(Button, { type: 'primary', disabled: !allSigned, onClick: handleSubmit }, '提交'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalOpen[0],
|
||||
onCancel: function () { setRequirementModalOpen(false); },
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
|
||||
width: 640,
|
||||
destroyOnClose: true
|
||||
}, React.createElement('div', { style: { maxHeight: 560, overflowY: 'auto', whiteSpace: 'pre-wrap', lineHeight: 1.6, fontSize: 13 } }, requirementDocContent))
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user