feat(web): 交车任务序号列、客户管理、车辆成本维护、筛选展开收起
- 新增/编辑/查看交车任务：品牌前增加序号列，与租赁合同车辆序号对应，需求说明同步更新 - 业务管理：新增客户管理.jsx（筛选+列表+查看/编辑/删除），筛选展开收起对齐租赁合同管理 - 业务管理：新增车辆成本维护.jsx（级联筛选、租赁/自营日成本、编辑） - 需求说明：提车应收款文档微调 Made-with: Cursor
This commit is contained in:
王冕
321
web端/业务管理/客户管理.jsx
Normal file
321
web端/业务管理/客户管理.jsx
Normal file
@@ -0,0 +1,321 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 客户管理（2026年3月12日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Table = antd.Table;
|
||||
var Button = antd.Button;
|
||||
var Select = antd.Select;
|
||||
var Input = antd.Input;
|
||||
var Space = antd.Space;
|
||||
var Modal = antd.Modal;
|
||||
var Cascader = antd.Cascader;
|
||||
var message = antd.message;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var filterExpanded = useState(false);
|
||||
var filterCustomerCode = useState(undefined);
|
||||
var filterCoopStatus = useState([]);
|
||||
var filterRegion = useState([]);
|
||||
var filterCity = useState(undefined);
|
||||
var filterBusinessManager = useState(undefined);
|
||||
var filterCreator = useState(undefined);
|
||||
var customerNameKeyword = useState('');
|
||||
var deleteModalOpen = useState(false);
|
||||
var deleteTargetRecord = useState(null);
|
||||
|
||||
var regionOptions = [
|
||||
{ value: '华北', label: '华北' },
|
||||
{ value: '华东', label: '华东' },
|
||||
{ value: '华南', label: '华南' },
|
||||
{ value: '华中', label: '华中' },
|
||||
{ value: '东北', label: '东北' },
|
||||
{ value: '西南', label: '西南' },
|
||||
{ value: '西北', label: '西北' }
|
||||
];
|
||||
var coopStatusOptions = [
|
||||
{ value: '已合作', label: '已合作' },
|
||||
{ value: '终止合作', label: '终止合作' },
|
||||
{ value: '洽谈中', label: '洽谈中' },
|
||||
{ value: '合约过期', label: '合约过期' }
|
||||
];
|
||||
var cityCascaderOptions = [
|
||||
{ value: '浙江省', label: '浙江省', children: [{ value: '杭州市', label: '杭州市' }, { value: '嘉兴市', label: '嘉兴市' }, { value: '宁波市', label: '宁波市' }] },
|
||||
{ value: '上海市', label: '上海市', children: [{ value: '上海市', label: '上海市' }] },
|
||||
{ value: '江苏省', label: '江苏省', children: [{ value: '南京市', label: '南京市' }, { value: '苏州市', label: '苏州市' }] },
|
||||
{ value: '广东省', label: '广东省', children: [{ value: '广州市', label: '广州市' }, { value: '深圳市', label: '深圳市' }] },
|
||||
{ value: '北京市', label: '北京市', children: [{ value: '北京市', label: '北京市' }] }
|
||||
];
|
||||
|
||||
var listDataState = useState([
|
||||
{ id: 1, customerCode: 'KH-2025-001', coopStatus: '已合作', customerName: '嘉兴某某物流有限公司', region: '华东', city: '浙江省-嘉兴市', creditCodeOrId: '91330400MA2XXXXX1', contact: '张三', contactMobile: '13800138001', contactPhone: '0571-88888888', businessManagers: '张经理', address: '浙江省嘉兴市南湖区科技大道1号', email: 'zhangsan@example.com', remark: '', creator: '李四', createTime: '2025-01-10 09:30' },
|
||||
{ id: 2, customerCode: 'KH-2025-002', coopStatus: '洽谈中', customerName: '上海某某运输公司', region: '华东', city: '上海市-上海市', creditCodeOrId: '91310000MA2YYYYY2', contact: '王五', contactMobile: '13900139002', contactPhone: '-', businessManagers: '李专员', address: '上海市浦东新区张江镇', email: 'wangwu@example.com', remark: '意向客户', creator: '李专员', createTime: '2025-02-15 14:20' },
|
||||
{ id: 3, customerCode: 'KH-2025-003', coopStatus: '已合作', customerName: '杭州某某租赁有限公司', region: '华东', city: '浙江省-杭州市', creditCodeOrId: '91330100MA2ZZZZZ3', contact: '赵六', contactMobile: '13700137003', contactPhone: '0571-99999999', businessManagers: '张经理、王专员', address: '浙江省杭州市余杭区未来科技城', email: 'zhaoliu@example.com', remark: '', creator: '张经理', createTime: '2025-01-20 11:00' },
|
||||
{ id: 4, customerCode: 'KH-2024-012', coopStatus: '终止合作', customerName: '某某旧客户公司', region: '华南', city: '广东省-广州市', creditCodeOrId: '91440100MA2AAAAA4', contact: '孙七', contactMobile: '13600136004', contactPhone: '-', businessManagers: '李专员', address: '广东省广州市天河区', email: 'sunqi@example.com', remark: '已终止', creator: '李四', createTime: '2024-06-01 10:00' },
|
||||
{ id: 5, customerCode: 'KH-2025-004', coopStatus: '合约过期', customerName: '南京某某供应链公司', region: '华东', city: '江苏省-南京市', creditCodeOrId: '91320100MA2BBBBB5', contact: '周八', contactMobile: '13500135005', contactPhone: '025-66666666', businessManagers: '王专员', address: '江苏省南京市江宁区', email: 'zhouba@example.com', remark: '待续约', creator: '王专员', createTime: '2025-03-01 08:45' }
|
||||
]);
|
||||
var listData = listDataState[0];
|
||||
var setListData = listDataState[1];
|
||||
|
||||
var customerCodeOptions = useMemo(function () {
|
||||
var arr = [];
|
||||
listData.forEach(function (r) {
|
||||
if (r.customerCode && arr.every(function (o) { return o.value !== r.customerCode; })) arr.push({ value: r.customerCode, label: r.customerCode });
|
||||
});
|
||||
return arr;
|
||||
}, [listData]);
|
||||
var businessManagerOptions = useMemo(function () {
|
||||
var set = new Set();
|
||||
listData.forEach(function (r) {
|
||||
var managers = (r.businessManagers || '').split(/[、,，]/).map(function (s) { return s.trim(); }).filter(Boolean);
|
||||
managers.forEach(function (m) { set.add(m); });
|
||||
});
|
||||
return Array.from(set).map(function (v) { return { value: v, label: v }; });
|
||||
}, [listData]);
|
||||
var creatorOptions = useMemo(function () {
|
||||
var arr = [];
|
||||
listData.forEach(function (r) {
|
||||
if (r.creator && arr.every(function (o) { return o.value !== r.creator; })) arr.push({ value: r.creator, label: r.creator });
|
||||
});
|
||||
return arr;
|
||||
}, [listData]);
|
||||
|
||||
var filteredList = useMemo(function () {
|
||||
var list = listData;
|
||||
var code = filterCustomerCode[0];
|
||||
var statuses = filterCoopStatus[0] || [];
|
||||
var regions = filterRegion[0] || [];
|
||||
var cityVal = filterCity[0];
|
||||
var manager = filterBusinessManager[0];
|
||||
var creator = filterCreator[0];
|
||||
var nameKw = (customerNameKeyword[0] || '').trim().toLowerCase();
|
||||
if (code) list = list.filter(function (r) { return r.customerCode === code; });
|
||||
if (statuses.length) list = list.filter(function (r) { return statuses.indexOf(r.coopStatus) !== -1; });
|
||||
if (regions.length) list = list.filter(function (r) { return regions.indexOf(r.region) !== -1; });
|
||||
if (cityVal && Array.isArray(cityVal) && cityVal.length >= 2) list = list.filter(function (r) { return r.city === cityVal[0] + '-' + cityVal[1]; });
|
||||
if (manager) list = list.filter(function (r) { return (r.businessManagers || '').indexOf(manager) !== -1; });
|
||||
if (creator) list = list.filter(function (r) { return r.creator === creator; });
|
||||
if (nameKw) list = list.filter(function (r) { return (r.customerName || '').toLowerCase().indexOf(nameKw) !== -1; });
|
||||
return list;
|
||||
}, [listData, filterCustomerCode[0], filterCoopStatus[0], filterRegion[0], filterCity[0], filterBusinessManager[0], filterCreator[0], customerNameKeyword[0]]);
|
||||
|
||||
function handleReset() {
|
||||
filterCustomerCode[1](undefined);
|
||||
filterCoopStatus[1]([]);
|
||||
filterRegion[1]([]);
|
||||
filterCity[1](undefined);
|
||||
filterBusinessManager[1](undefined);
|
||||
filterCreator[1](undefined);
|
||||
}
|
||||
|
||||
function goView(record) {
|
||||
if (window.__customerView) window.__customerView(record);
|
||||
else message.info('跳转客户管理-查看（原型）');
|
||||
}
|
||||
function goEdit(record) {
|
||||
if (window.__customerEdit) window.__customerEdit(record);
|
||||
else message.info('跳转客户管理-编辑（原型）');
|
||||
}
|
||||
function openDeleteConfirm(record) {
|
||||
deleteTargetRecord[1](record);
|
||||
deleteModalOpen[1](true);
|
||||
}
|
||||
function confirmDelete() {
|
||||
var record = deleteTargetRecord[0];
|
||||
if (record) {
|
||||
setListData(function (prev) { return prev.filter(function (r) { return r.id !== record.id; }); });
|
||||
message.success('已删除');
|
||||
}
|
||||
deleteModalOpen[1](false);
|
||||
deleteTargetRecord[1](null);
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%' };
|
||||
|
||||
var columns = [
|
||||
{ title: '客户编码', dataIndex: 'customerCode', key: 'customerCode', width: 120, ellipsis: true, fixed: 'left', render: function (v) { return v || '—'; } },
|
||||
{ title: '合作状态', dataIndex: 'coopStatus', key: 'coopStatus', width: 100, render: function (v) { return v || '—'; } },
|
||||
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 180, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '区域', dataIndex: 'region', key: 'region', width: 80, render: function (v) { return v || '—'; } },
|
||||
{ title: '城市', dataIndex: 'city', key: 'city', width: 140, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '信用代码/身份证', dataIndex: 'creditCodeOrId', key: 'creditCodeOrId', width: 180, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '联系人', dataIndex: 'contact', key: 'contact', width: 100, render: function (v) { return v || '—'; } },
|
||||
{ title: '联系人手机', dataIndex: 'contactMobile', key: 'contactMobile', width: 120, render: function (v) { return v || '—'; } },
|
||||
{ title: '联系人座机', dataIndex: 'contactPhone', key: 'contactPhone', width: 120, render: function (v) { return v === '-' || !v ? '—' : v; } },
|
||||
{ title: '业务经理', dataIndex: 'businessManagers', key: 'businessManagers', width: 140, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '客户地址', dataIndex: 'address', key: 'address', width: 200, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '电子邮箱', dataIndex: 'email', key: 'email', width: 180, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '备注', dataIndex: 'remark', key: 'remark', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 100, render: function (v) { return v || '—'; } },
|
||||
{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160, render: function (v) { return v || '—'; } },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 180,
|
||||
fixed: 'right',
|
||||
render: function (_, record) {
|
||||
return React.createElement(Space, { size: 'small' },
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goView(record); } }, '查看'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { goEdit(record); } }, '编辑'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', danger: true, onClick: function () { openDeleteConfirm(record); } }, '删除')
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var filterItems = [
|
||||
React.createElement('div', { key: 'code', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '客户编码'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择或输入客户编码',
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
style: filterControlStyle,
|
||||
value: filterCustomerCode[0],
|
||||
onChange: function (v) { filterCustomerCode[1](v); },
|
||||
options: customerCodeOptions,
|
||||
filterOption: function (input, opt) { return (opt.label || '').toString().toLowerCase().indexOf((input || '').toLowerCase()) !== -1; }
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'status', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '合作状态'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择合作状态',
|
||||
allowClear: true,
|
||||
mode: 'multiple',
|
||||
style: filterControlStyle,
|
||||
value: filterCoopStatus[0],
|
||||
onChange: function (v) { filterCoopStatus[1](v || []); },
|
||||
options: coopStatusOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'region', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '区域'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择区域',
|
||||
allowClear: true,
|
||||
mode: 'multiple',
|
||||
style: filterControlStyle,
|
||||
value: filterRegion[0],
|
||||
onChange: function (v) { filterRegion[1](v || []); },
|
||||
options: regionOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'city', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '城市'),
|
||||
React.createElement(Cascader, {
|
||||
options: cityCascaderOptions,
|
||||
value: filterCity[0],
|
||||
onChange: function (v) { filterCity[1](v); },
|
||||
placeholder: '请选择省-市',
|
||||
allowClear: true,
|
||||
style: filterControlStyle
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'manager', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '业务经理'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择业务经理',
|
||||
allowClear: true,
|
||||
style: filterControlStyle,
|
||||
value: filterBusinessManager[0],
|
||||
onChange: function (v) { filterBusinessManager[1](v); },
|
||||
options: businessManagerOptions
|
||||
})
|
||||
),
|
||||
React.createElement('div', { key: 'creator', style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '创建人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择创建人',
|
||||
allowClear: true,
|
||||
style: filterControlStyle,
|
||||
value: filterCreator[0],
|
||||
onChange: function (v) { filterCreator[1](v); },
|
||||
options: creatorOptions
|
||||
})
|
||||
)
|
||||
];
|
||||
var filterCount = filterExpanded[0] ? 6 : 3;
|
||||
var filterNodes = filterItems.slice(0, filterCount);
|
||||
|
||||
var requirementContent = '客户管理（2026年3月12日版本）\n一个「数字化资产ONEOS运管平台」中的「客户管理」模块\n#面包屑：业务管理-客户管理；\n\n页面分为2个卡片；\n1.筛选：默认显示首行，可通过展开、收起功能进行展开/收起的切换，右侧为重置、查询按钮；\n#支持客户编码、合作状态、区域、城市、业务经理、创建人等筛选方式；\n1.1.客户编码：选择器，支持输入框内输入内容模糊搜索，下拉显示对应选项；\n1.2.合作状态：选择器，支持多选，选项为已合作、终止合作、洽谈中、合约过期；\n1.3.区域：选择器，支持多选，选项为：华北、华东、华南、华中、东北、西南、西北；\n1.4.城市：地区级联选择器，支持2级选择，格式为省-市；\n1.5.业务经理：选择器，选项为客户表中所有业务经理；\n1.6.创建人：选择器，选项为所有创建用户姓名；\n\n2.客户列表：\n#左上方为客户名称输入框（输入客户名称直接联动），右上角为新增、导出、导入；\n2.1.客户编码：显示客户编码；\n2.2.合作状态：显示合作状态，选项为已合作、终止合作、洽谈中、合约过期；\n2.3.客户名称：显示客户名称；\n2.4.区域：显示客户区域，客户区域由选择城市后自动匹配；\n2.5.城市：显示客户城市，格式为：省-市；\n2.6.信用代码/身份证：显示客户信用代码或身份证，取决于新增时输入的是什么；\n2.7.联系人：显示客户联系人；\n2.8.联系人手机：显示客户联系人手机；\n2.9.联系人座机：显示客户联系人座机，无则显示为-；\n2.10.业务经理：显示客户对应业务经理姓名，可能会存在多个业务经理维护一个客户；\n2.11.客户地址：显示客户地址信息；\n2.12.电子邮箱：显示客户电子邮箱；\n2.13.备注：显示客户备注信息；\n2.14.创建人：显示客户创建人用户姓名；\n2.15.创建时间：显示客户创建时间；\n2.16.操作：查看、编辑、删除；\n 2.16.1.查看：跳转客户管理-查看页；\n 2.16.2.编辑：跳转客户管理-编辑页；\n 2.16.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: '客户管理' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '筛选', style: cardStyle },
|
||||
React.createElement('div', {
|
||||
style: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr 1fr',
|
||||
gap: '16px 24px',
|
||||
alignItems: 'start',
|
||||
flex: 1,
|
||||
minWidth: 0
|
||||
}
|
||||
}, filterNodes),
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 16 } },
|
||||
React.createElement(Button, { onClick: handleReset }, '重置'),
|
||||
React.createElement(Button, { type: 'primary' }, '查询'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { filterExpanded[1](!filterExpanded[0]); } }, filterExpanded[0] ? '收起' : '展开')
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '客户列表', style: cardStyle },
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||||
React.createElement(Input.Search, {
|
||||
placeholder: '请输入客户名称',
|
||||
allowClear: true,
|
||||
value: customerNameKeyword[0],
|
||||
onChange: function (e) { customerNameKeyword[1](e.target.value); }
|
||||
, style: { width: 280 }
|
||||
}),
|
||||
React.createElement(Space, null,
|
||||
React.createElement(Button, { type: 'primary' }, '新增'),
|
||||
React.createElement(Button, null, '导出'),
|
||||
React.createElement(Button, null, '导入')
|
||||
)
|
||||
),
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: columns,
|
||||
dataSource: filteredList,
|
||||
pagination: { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } },
|
||||
size: 'middle',
|
||||
bordered: true,
|
||||
scroll: { x: 2200 }
|
||||
})
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '确认删除',
|
||||
open: deleteModalOpen[0],
|
||||
onCancel: function () { deleteModalOpen[1](false); deleteTargetRecord[1](null); },
|
||||
onOk: confirmDelete,
|
||||
okText: '确认',
|
||||
cancelText: '取消'
|
||||
}, '确定要删除该客户吗？删除后该客户将无法在新合同中选择，历史数据中仍会保留该客户信息。'),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { requirementModalVisible[1](false); },
|
||||
width: 640,
|
||||
footer: React.createElement(Button, { onClick: function () { requirementModalVisible[1](false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
);
|
||||
};
|
||||
@@ -44,29 +44,29 @@ const Component = function() {
|
||||
// Mock：项目列表及车辆样例。deliveryStatus: 'none' 可选，'submitted' 已提交交车任务不可选，'completed' 已完成交车不显示
|
||||
var projectList = [
|
||||
{ id: 'p1', name: '嘉兴某某物流氢能运输项目', contractCode: 'JXZL20260216YW101235A', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省 / 嘉兴市', deliveryLocation: '浙江省嘉兴市南湖区科技大道1号', vehicles: [
|
||||
{ key: 'v1', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车', deliveryStatus: 'submitted' },
|
||||
{ key: 'v2', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10002', vin: 'LFV2BJCH8K3123457', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v3', brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌', deliveryStatus: 'none' },
|
||||
{ key: 'v4', brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '', deliveryStatus: 'none' },
|
||||
{ key: 'v5', brand: '陕汽', model: '德龙氢能自卸', plateNo: '浙F20002', vin: 'SX1313GR456123456', monthRent: '13200', serviceFee: '880', deposit: '32000', remark: '固定线路', deliveryStatus: 'none' }
|
||||
{ key: 'v1', seq: 1, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车', deliveryStatus: 'submitted' },
|
||||
{ key: 'v2', seq: 2, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10002', vin: 'LFV2BJCH8K3123457', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v3', seq: 3, brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌', deliveryStatus: 'none' },
|
||||
{ key: 'v4', seq: 4, brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '', deliveryStatus: 'none' },
|
||||
{ key: 'v5', seq: 5, brand: '陕汽', model: '德龙氢能自卸', plateNo: '浙F20002', vin: 'SX1313GR456123456', monthRent: '13200', serviceFee: '880', deposit: '32000', remark: '固定线路', deliveryStatus: 'none' }
|
||||
]},
|
||||
{ id: 'p1_r', name: '嘉兴某某物流氢能运输项目（续签合同）', isRenewal: true, contractCode: 'JXZL20270116YW101235B', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省 / 嘉兴市', deliveryLocation: '浙江省嘉兴市南湖区科技大道1号', vehicles: [
|
||||
{ key: 'v1r_1', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签合同车辆', deliveryStatus: 'none' },
|
||||
{ key: 'v1r_0', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A09999', vin: 'LFV2BJCH8K3000000', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0b', brand: '福田', model: '智蓝氢能轻卡', plateNo: '浙A08888', vin: 'LZYTBACR2M1000001', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0c', brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙A07777', vin: 'ZZ4257N386FZ00002', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_2', brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签待上牌', deliveryStatus: 'none' }
|
||||
{ key: 'v1r_1', seq: 1, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签合同车辆', deliveryStatus: 'none' },
|
||||
{ key: 'v1r_0', seq: 2, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A09999', vin: 'LFV2BJCH8K3000000', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0b', seq: 3, brand: '福田', model: '智蓝氢能轻卡', plateNo: '浙A08888', vin: 'LZYTBACR2M1000001', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0c', seq: 4, brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙A07777', vin: 'ZZ4257N386FZ00002', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_2', seq: 5, brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签待上牌', deliveryStatus: 'none' }
|
||||
]},
|
||||
{ id: 'p2', name: '上海某某运输氢能租赁项目', contractCode: 'SHZL20260201YW200123A', customerName: '上海某某运输公司', deliveryRegion: '上海市 / 上海市', deliveryLocation: '上海市浦东新区张江高科技园区', vehicles: [
|
||||
{ key: 'v6', brand: '上汽红岩', model: '杰狮氢能牵引', plateNo: '沪A30003', vin: 'SH1313HY789012345', monthRent: '14500', serviceFee: '950', deposit: '34000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v7', brand: '宇通', model: '氢能公交 ZK6126', plateNo: '沪B40001', vin: 'LZYTAGCF8K4567890', monthRent: '22000', serviceFee: '1200', deposit: '50000', remark: '示范线路', deliveryStatus: 'none' },
|
||||
{ key: 'v8', brand: '福田', model: '欧辉氢能大巴', plateNo: '', vin: 'LZYTBACR2M2345678', monthRent: '19800', serviceFee: '1100', deposit: '45000', remark: '', deliveryStatus: 'none' }
|
||||
{ key: 'v6', seq: 1, brand: '上汽红岩', model: '杰狮氢能牵引', plateNo: '沪A30003', vin: 'SH1313HY789012345', monthRent: '14500', serviceFee: '950', deposit: '34000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v7', seq: 2, brand: '宇通', model: '氢能公交 ZK6126', plateNo: '沪B40001', vin: 'LZYTAGCF8K4567890', monthRent: '22000', serviceFee: '1200', deposit: '50000', remark: '示范线路', deliveryStatus: 'none' },
|
||||
{ key: 'v8', seq: 3, brand: '福田', model: '欧辉氢能大巴', plateNo: '', vin: 'LZYTBACR2M2345678', monthRent: '19800', serviceFee: '1100', deposit: '45000', remark: '', deliveryStatus: 'none' }
|
||||
]},
|
||||
{ id: 'p3', name: '杭州某某租赁氢能项目', contractCode: 'HZZL20260115YW100089A', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省 / 杭州市', deliveryLocation: '浙江省杭州市余杭区未来科技城', vehicles: [
|
||||
{ key: 'v9', brand: '品牌C', model: '型号C1', plateNo: '浙A40004', vin: 'L4234567890ABCDEF', monthRent: '8200', serviceFee: '450', deposit: '20000', remark: '重点客户', deliveryStatus: 'completed' },
|
||||
{ key: 'v10', brand: '品牌C', model: '型号C2', plateNo: '', vin: 'L5234567890ABCDEF', monthRent: '7800', serviceFee: '420', deposit: '19000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v11', brand: '东风', model: '氢燃料电池厢货', plateNo: '浙A50001', vin: 'LFV2BJCH8K5678901', monthRent: '9200', serviceFee: '520', deposit: '22000', remark: '城配', deliveryStatus: 'none' },
|
||||
{ key: 'v12', brand: '开沃', model: '创源氢能轻卡', plateNo: '浙A50002', vin: 'LJXTBACR9N6789012', monthRent: '8800', serviceFee: '480', deposit: '21000', remark: '', deliveryStatus: 'none' }
|
||||
{ key: 'v9', seq: 1, brand: '品牌C', model: '型号C1', plateNo: '浙A40004', vin: 'L4234567890ABCDEF', monthRent: '8200', serviceFee: '450', deposit: '20000', remark: '重点客户', deliveryStatus: 'completed' },
|
||||
{ key: 'v10', seq: 2, brand: '品牌C', model: '型号C2', plateNo: '', vin: 'L5234567890ABCDEF', monthRent: '7800', serviceFee: '420', deposit: '19000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v11', seq: 3, brand: '东风', model: '氢燃料电池厢货', plateNo: '浙A50001', vin: 'LFV2BJCH8K5678901', monthRent: '9200', serviceFee: '520', deposit: '22000', remark: '城配', deliveryStatus: 'none' },
|
||||
{ key: 'v12', seq: 4, brand: '开沃', model: '创源氢能轻卡', plateNo: '浙A50002', vin: 'LJXTBACR9N6789012', monthRent: '8800', serviceFee: '480', deposit: '21000', remark: '', deliveryStatus: 'none' }
|
||||
]}
|
||||
];
|
||||
|
||||
@@ -249,6 +249,7 @@ const Component = function() {
|
||||
indeterminate: someSelectableChecked && !allSelectableChecked,
|
||||
onChange: function(e) { onSelectAll(e.target.checked); }
|
||||
})),
|
||||
React.createElement('th', { style: Object.assign({}, styles.th, { width: 56 }) }, '序号'),
|
||||
React.createElement('th', { style: styles.th }, '品牌'),
|
||||
React.createElement('th', { style: styles.th }, '型号'),
|
||||
React.createElement('th', { style: styles.th }, '车牌号'),
|
||||
@@ -262,7 +263,7 @@ const Component = function() {
|
||||
|
||||
var tableBody = React.createElement('tbody', null,
|
||||
vehicleList.length === 0
|
||||
? React.createElement('tr', null, React.createElement('td', { colSpan: 9, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '请先选择项目名称，将自动带出该合同下车辆信息'))
|
||||
? React.createElement('tr', null, React.createElement('td', { colSpan: 10, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '请先选择项目名称，将自动带出该合同下车辆信息'))
|
||||
: vehicleList.map(function(row) {
|
||||
var isSubmitted = row.deliveryStatus === 'submitted';
|
||||
var isCompleted = row.deliveryStatus === 'completed';
|
||||
@@ -284,6 +285,7 @@ const Component = function() {
|
||||
})
|
||||
))
|
||||
: React.createElement(Checkbox, { checked: checkedRowKeys.indexOf(row.key) !== -1, onChange: function(e) { onSelectRow(row, e.target.checked); } })),
|
||||
React.createElement('td', { style: styles.td }, row.seq != null ? row.seq : '—'),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.brand, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.model, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.plateNo || '-', disabled: true, style: styles.inputDisabled })),
|
||||
@@ -307,7 +309,7 @@ const Component = function() {
|
||||
);
|
||||
}
|
||||
|
||||
var reqSpecText = '新增交车任务\n一个「数字化资产ONEOS运管平台」中的「新增交车任务」模块\n1.面包屑：\n1.1.业务管理-交车任务-新增交车任务\n\n2.表单：\n2.1.选择项目名称：必选项，选择器，默认提示文本：请选择或输入项目名称，支持从输入框内输入内容进行模糊搜索，对应自营合同、租赁合同-「项目名称」字段；；\n2.2.合同编码：输入框（禁用状态），根据所选项目名称自动反写合同编码；\n2.3.客户名称：输入框（禁用状态），根据所选项目名称自动反写客户名称；\n2.4.交车区域：输入框（禁用状态），根据所选项目名称自动反写交车区域。提交时根据交车区域，为对应区域运维人员分配对应交车任务；\n2.5.交车地点：输入框（禁用状态），根据所选项目名称自动反写交车地点；\n2.6.预计交车日期：必填项，日期选择器，支持某天或某个时间段两种模式，格式为YYYY-MM-DD或YYYY-MM-DD至YYYY-MM-DD，结束日期不能早于开始日期，并且结束日期不能早于当前日期；\n 2.6.1.如勾选不需要还车，则预计交车日期隐藏，不需要设置；\n2.7.开始计费日期：必填项，日期选择器，支持单日选择，格式为YYYY-MM-DD；\n2.8.已交车辆是否需要还车：勾选框，内容为不需要还车，默认不勾选，不勾选时，无法在车辆列表勾选已交未还的车辆，勾选后，已交未还的车辆也可以勾选，但不会生成新交车任务，只是按照开始计费日期生成账单；\n 2.8.1.勾选时，车辆列表只显示已交未还的车辆清单，不能添加新车（避免已交未还部分车辆开始计费日期计算不精确）；\n 2.8.2.不勾选时，车辆列表显示已交未还的车辆清单及续签合同新增车辆，但是已交未还部分的车辆不可勾选；\n2.9.下方为列表，列表拉取该车辆租赁合同对应所有车辆信息（该合同下已提交过交车任务的车辆不可选，已完成交车的车辆不显示在列表中），列表字段为：全选/多选、品牌、型号、车牌号、车辆识别代码、车辆月租金、服务费、保证金、备注；\n 2.9.1.全选/多选：支持全选、多选模式，选择对应车辆后，点击提交自动生成被选中车辆交车任务，需要至少选择1辆，才能进行提交，该合同下已提交过交车任务和已交车的车辆不可选，多选框为禁用状态，悬浮时提示：该车辆已完成交车/该车辆已创建交车任务；\n 2.9.2.品牌：输入框（禁用状态），根据所选项目名称自动反写品牌；\n 2.9.3.型号：输入框（禁用状态），根据所选项目名称自动反写型号；\n 2.9.4.车牌号：输入框（禁用状态），根据所选项目名称自动反写车牌号，车牌号可能为空，为空时显示为-；\n 2.9.5.车辆识别代码：输入框（禁用状态），根据所选项目名称自动反写车辆识别代码；\n 2.9.6.车辆月租金：输入框（禁用状态），根据所选项目名称自动反写车辆月租金，后缀为元；\n 2.9.7.服务费：输入框（禁用状态），根据所选项目名称自动反写服务费，后缀为元；\n 2.9.8.保证金：输入框（禁用状态），根据所选项目名称自动反写保证金，后缀为元；\n 2.9.9.备注：输入框（禁用状态），根据所选项目名称自动反写备注信息，备注为空时显示为-；\n2.10.页面底部为提交、取消；';
|
||||
var reqSpecText = '新增交车任务\n一个「数字化资产ONEOS运管平台」中的「新增交车任务」模块\n1.面包屑：\n1.1.业务管理-交车任务-新增交车任务\n\n2.表单：\n2.1.选择项目名称：必选项，选择器，默认提示文本：请选择或输入项目名称，支持从输入框内输入内容进行模糊搜索，对应自营合同、租赁合同-「项目名称」字段；；\n2.2.合同编码：输入框（禁用状态），根据所选项目名称自动反写合同编码；\n2.3.客户名称：输入框（禁用状态），根据所选项目名称自动反写客户名称；\n2.4.交车区域：输入框（禁用状态），根据所选项目名称自动反写交车区域。提交时根据交车区域，为对应区域运维人员分配对应交车任务；\n2.5.交车地点：输入框（禁用状态），根据所选项目名称自动反写交车地点；\n2.6.预计交车日期：必填项，日期选择器，支持某天或某个时间段两种模式，格式为YYYY-MM-DD或YYYY-MM-DD至YYYY-MM-DD，结束日期不能早于开始日期，并且结束日期不能早于当前日期；\n 2.6.1.如勾选不需要还车，则预计交车日期隐藏，不需要设置；\n2.7.开始计费日期：必填项，日期选择器，支持单日选择，格式为YYYY-MM-DD；\n2.8.已交车辆是否需要还车：勾选框，内容为不需要还车，默认不勾选，不勾选时，无法在车辆列表勾选已交未还的车辆，勾选后，已交未还的车辆也可以勾选，但不会生成新交车任务，只是按照开始计费日期生成账单；\n 2.8.1.勾选时，车辆列表只显示已交未还的车辆清单，不能添加新车（避免已交未还部分车辆开始计费日期计算不精确）；\n 2.8.2.不勾选时，车辆列表显示已交未还的车辆清单及续签合同新增车辆，但是已交未还部分的车辆不可勾选；\n2.9.下方为列表，列表拉取该车辆租赁合同对应所有车辆信息（该合同下已提交过交车任务的车辆不可选，已完成交车的车辆不显示在列表中），列表字段为：全选/多选、序号、品牌、型号、车牌号、车辆识别代码、车辆月租金、服务费、保证金、备注；\n 2.9.1.序号：与租赁合同车辆序号对应；\n 2.9.2.全选/多选：支持全选、多选模式，选择对应车辆后，点击提交自动生成被选中车辆交车任务，需要至少选择1辆，才能进行提交，该合同下已提交过交车任务和已交车的车辆不可选，多选框为禁用状态，悬浮时提示：该车辆已完成交车/该车辆已创建交车任务；\n 2.9.3.品牌：输入框（禁用状态），根据所选项目名称自动反写品牌；\n 2.9.4.型号：输入框（禁用状态），根据所选项目名称自动反写型号；\n 2.9.5.车牌号：输入框（禁用状态），根据所选项目名称自动反写车牌号，车牌号可能为空，为空时显示为-；\n 2.9.6.车辆识别代码：输入框（禁用状态），根据所选项目名称自动反写车辆识别代码；\n 2.9.7.车辆月租金：输入框（禁用状态），根据所选项目名称自动反写车辆月租金，后缀为元；\n 2.9.8.服务费：输入框（禁用状态），根据所选项目名称自动反写服务费，后缀为元；\n 2.9.9.保证金：输入框（禁用状态），根据所选项目名称自动反写保证金，后缀为元；\n 2.9.10.备注：输入框（禁用状态），根据所选项目名称自动反写备注信息，备注为空时显示为-；\n2.10.页面底部为提交、取消；';
|
||||
|
||||
return React.createElement('div', { style: styles.page },
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||||
|
||||
@@ -5,6 +5,9 @@ const Component = function() {
|
||||
var antd = window.antd;
|
||||
var Input = antd.Input;
|
||||
var Button = antd.Button;
|
||||
var Modal = antd.Modal;
|
||||
|
||||
var reqModalOpen = React.useState(false);
|
||||
|
||||
// Mock：当前查看的交车任务详情（从列表跳转带入或根据 id 拉取）
|
||||
var task = {
|
||||
@@ -16,9 +19,9 @@ const Component = function() {
|
||||
planDeliveryDisplay: '2026-03-01至2026-03-05',
|
||||
billingStartDate: '2026-03-06',
|
||||
vehicles: [
|
||||
{ brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车' },
|
||||
{ brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌' },
|
||||
{ brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '' }
|
||||
{ seq: 1, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车' },
|
||||
{ seq: 2, brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌' },
|
||||
{ seq: 3, brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '' }
|
||||
]
|
||||
};
|
||||
|
||||
@@ -65,6 +68,7 @@ const Component = function() {
|
||||
|
||||
var tableHeader = React.createElement('thead', null,
|
||||
React.createElement('tr', null,
|
||||
React.createElement('th', { style: Object.assign({}, styles.th, { width: 56 }) }, '序号'),
|
||||
React.createElement('th', { style: styles.th }, '品牌'),
|
||||
React.createElement('th', { style: styles.th }, '型号'),
|
||||
React.createElement('th', { style: styles.th }, '车牌号'),
|
||||
@@ -78,9 +82,10 @@ const Component = function() {
|
||||
|
||||
var tableBody = React.createElement('tbody', null,
|
||||
vehicleList.length === 0
|
||||
? React.createElement('tr', null, React.createElement('td', { colSpan: 8, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '暂无车辆'))
|
||||
? React.createElement('tr', null, React.createElement('td', { colSpan: 9, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '暂无车辆'))
|
||||
: vehicleList.map(function(row, i) {
|
||||
return React.createElement('tr', { key: i },
|
||||
React.createElement('td', { style: styles.td }, row.seq != null ? row.seq : '—'),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.brand, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.model, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.plateNo || '-', disabled: true, style: styles.inputDisabled })),
|
||||
@@ -102,14 +107,17 @@ const Component = function() {
|
||||
else antd.message.info('返回');
|
||||
};
|
||||
|
||||
var reqSpecText = '查看交车任务\n一个「数字化资产ONEOS运管平台」中的「交车任务」「查看」模块。\n\n1.面包屑：业务管理-交车任务-查看交车任务\n\n2.表单（只读）：项目名称、合同编码、客户名称、交车区域、交车地点、预计交车日期、开始计费日期等，根据交车任务数据反显。\n\n3.车辆列表（只读）：\n3.1.序号：与租赁合同车辆序号对应；\n3.2.品牌、型号、车牌号、车辆识别代码、车辆月租金、服务费、保证金、备注。\n\n4.底部为返回按钮。';
|
||||
|
||||
return React.createElement('div', { style: styles.page },
|
||||
React.createElement('div', { style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
|
||||
React.createElement('div', { style: styles.breadcrumb },
|
||||
React.createElement('span', null, '业务管理'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', null, '交车任务'),
|
||||
React.createElement('span', { style: styles.breadcrumbSep }, ' / '),
|
||||
React.createElement('span', { style: { color: '#1890ff' } }, '查看交车任务'))),
|
||||
React.createElement('span', { style: { color: '#1890ff' } }, '查看交车任务')),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function() { reqModalOpen[1](true); } }, '查看需求说明')),
|
||||
React.createElement('div', { style: styles.card },
|
||||
React.createElement('div', { style: styles.cardHeader }, React.createElement('span', { style: styles.cardTitle }, '交车任务')),
|
||||
React.createElement('div', { style: styles.cardBody },
|
||||
@@ -118,6 +126,14 @@ const Component = function() {
|
||||
tableEl)),
|
||||
React.createElement('div', { style: { height: 60 } }),
|
||||
React.createElement('div', { style: styles.footer },
|
||||
React.createElement(Button, { onClick: handleBack }, '返回'))
|
||||
React.createElement(Button, { onClick: handleBack }, '返回')),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: reqModalOpen[0],
|
||||
onCancel: function() { reqModalOpen[1](false); },
|
||||
width: 560,
|
||||
footer: React.createElement(Button, { onClick: function() { reqModalOpen[1](false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, reqSpecText))
|
||||
);
|
||||
};
|
||||
|
||||
@@ -53,29 +53,29 @@ const Component = function() {
|
||||
// Mock：项目列表及车辆（与新增交车任务一致，含续签项目）
|
||||
var projectList = [
|
||||
{ id: 'p1', name: '嘉兴某某物流氢能运输项目', contractCode: 'JXZL20260216YW101235A', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省 / 嘉兴市', deliveryLocation: '浙江省嘉兴市南湖区科技大道1号', vehicles: [
|
||||
{ key: 'v1', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车', deliveryStatus: 'submitted' },
|
||||
{ key: 'v2', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10002', vin: 'LFV2BJCH8K3123457', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v3', brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌', deliveryStatus: 'none' },
|
||||
{ key: 'v4', brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '', deliveryStatus: 'none' },
|
||||
{ key: 'v5', brand: '陕汽', model: '德龙氢能自卸', plateNo: '浙F20002', vin: 'SX1313GR456123456', monthRent: '13200', serviceFee: '880', deposit: '32000', remark: '固定线路', deliveryStatus: 'none' }
|
||||
{ key: 'v1', seq: 1, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '首车', deliveryStatus: 'submitted' },
|
||||
{ key: 'v2', seq: 2, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10002', vin: 'LFV2BJCH8K3123457', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v3', seq: 3, brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '待上牌', deliveryStatus: 'none' },
|
||||
{ key: 'v4', seq: 4, brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙F20001', vin: 'ZZ4257N386FZ12345', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '', deliveryStatus: 'none' },
|
||||
{ key: 'v5', seq: 5, brand: '陕汽', model: '德龙氢能自卸', plateNo: '浙F20002', vin: 'SX1313GR456123456', monthRent: '13200', serviceFee: '880', deposit: '32000', remark: '固定线路', deliveryStatus: 'none' }
|
||||
]},
|
||||
{ id: 'p1_r', name: '嘉兴某某物流氢能运输项目（续签合同）', isRenewal: true, contractCode: 'JXZL20270116YW101235B', customerName: '嘉兴某某物流有限公司', deliveryRegion: '浙江省 / 嘉兴市', deliveryLocation: '浙江省嘉兴市南湖区科技大道1号', vehicles: [
|
||||
{ key: 'v1r_1', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签合同车辆', deliveryStatus: 'none' },
|
||||
{ key: 'v1r_0', brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A09999', vin: 'LFV2BJCH8K3000000', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0b', brand: '福田', model: '智蓝氢能轻卡', plateNo: '浙A08888', vin: 'LZYTBACR2M1000001', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0c', brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙A07777', vin: 'ZZ4257N386FZ00002', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_2', brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签待上牌', deliveryStatus: 'none' }
|
||||
{ key: 'v1r_1', seq: 1, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A10001', vin: 'LFV2BJCH8K3123456', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签合同车辆', deliveryStatus: 'none' },
|
||||
{ key: 'v1r_0', seq: 2, brand: '东风', model: '氢燃料电池重卡 H31', plateNo: '浙A09999', vin: 'LFV2BJCH8K3000000', monthRent: '12800', serviceFee: '800', deposit: '30000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0b', seq: 3, brand: '福田', model: '智蓝氢能轻卡', plateNo: '浙A08888', vin: 'LZYTBACR2M1000001', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_0c', seq: 4, brand: '重汽', model: '豪沃氢能牵引车', plateNo: '浙A07777', vin: 'ZZ4257N386FZ00002', monthRent: '15000', serviceFee: '1000', deposit: '35000', remark: '续签：已交车车辆样例', deliveryStatus: 'completed' },
|
||||
{ key: 'v1r_2', seq: 5, brand: '福田', model: '智蓝氢能轻卡', plateNo: '', vin: 'LZYTBACR2M1234567', monthRent: '8500', serviceFee: '500', deposit: '20000', remark: '续签待上牌', deliveryStatus: 'none' }
|
||||
]},
|
||||
{ id: 'p2', name: '上海某某运输氢能租赁项目', contractCode: 'SHZL20260201YW200123A', customerName: '上海某某运输公司', deliveryRegion: '上海市 / 上海市', deliveryLocation: '上海市浦东新区张江高科技园区', vehicles: [
|
||||
{ key: 'v6', brand: '上汽红岩', model: '杰狮氢能牵引', plateNo: '沪A30003', vin: 'SH1313HY789012345', monthRent: '14500', serviceFee: '950', deposit: '34000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v7', brand: '宇通', model: '氢能公交 ZK6126', plateNo: '沪B40001', vin: 'LZYTAGCF8K4567890', monthRent: '22000', serviceFee: '1200', deposit: '50000', remark: '示范线路', deliveryStatus: 'none' },
|
||||
{ key: 'v8', brand: '福田', model: '欧辉氢能大巴', plateNo: '', vin: 'LZYTBACR2M2345678', monthRent: '19800', serviceFee: '1100', deposit: '45000', remark: '', deliveryStatus: 'none' }
|
||||
{ key: 'v6', seq: 1, brand: '上汽红岩', model: '杰狮氢能牵引', plateNo: '沪A30003', vin: 'SH1313HY789012345', monthRent: '14500', serviceFee: '950', deposit: '34000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v7', seq: 2, brand: '宇通', model: '氢能公交 ZK6126', plateNo: '沪B40001', vin: 'LZYTAGCF8K4567890', monthRent: '22000', serviceFee: '1200', deposit: '50000', remark: '示范线路', deliveryStatus: 'none' },
|
||||
{ key: 'v8', seq: 3, brand: '福田', model: '欧辉氢能大巴', plateNo: '', vin: 'LZYTBACR2M2345678', monthRent: '19800', serviceFee: '1100', deposit: '45000', remark: '', deliveryStatus: 'none' }
|
||||
]},
|
||||
{ id: 'p3', name: '杭州某某租赁氢能项目', contractCode: 'HZZL20260115YW100089A', customerName: '杭州某某租赁有限公司', deliveryRegion: '浙江省 / 杭州市', deliveryLocation: '浙江省杭州市余杭区未来科技城', vehicles: [
|
||||
{ key: 'v9', brand: '品牌C', model: '型号C1', plateNo: '浙A40004', vin: 'L4234567890ABCDEF', monthRent: '8200', serviceFee: '450', deposit: '20000', remark: '重点客户', deliveryStatus: 'completed' },
|
||||
{ key: 'v10', brand: '品牌C', model: '型号C2', plateNo: '', vin: 'L5234567890ABCDEF', monthRent: '7800', serviceFee: '420', deposit: '19000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v11', brand: '东风', model: '氢燃料电池厢货', plateNo: '浙A50001', vin: 'LFV2BJCH8K5678901', monthRent: '9200', serviceFee: '520', deposit: '22000', remark: '城配', deliveryStatus: 'none' },
|
||||
{ key: 'v12', brand: '开沃', model: '创源氢能轻卡', plateNo: '浙A50002', vin: 'LJXTBACR9N6789012', monthRent: '8800', serviceFee: '480', deposit: '21000', remark: '', deliveryStatus: 'none' }
|
||||
{ key: 'v9', seq: 1, brand: '品牌C', model: '型号C1', plateNo: '浙A40004', vin: 'L4234567890ABCDEF', monthRent: '8200', serviceFee: '450', deposit: '20000', remark: '重点客户', deliveryStatus: 'completed' },
|
||||
{ key: 'v10', seq: 2, brand: '品牌C', model: '型号C2', plateNo: '', vin: 'L5234567890ABCDEF', monthRent: '7800', serviceFee: '420', deposit: '19000', remark: '', deliveryStatus: 'submitted' },
|
||||
{ key: 'v11', seq: 3, brand: '东风', model: '氢燃料电池厢货', plateNo: '浙A50001', vin: 'LFV2BJCH8K5678901', monthRent: '9200', serviceFee: '520', deposit: '22000', remark: '城配', deliveryStatus: 'none' },
|
||||
{ key: 'v12', seq: 4, brand: '开沃', model: '创源氢能轻卡', plateNo: '浙A50002', vin: 'LJXTBACR9N6789012', monthRent: '8800', serviceFee: '480', deposit: '21000', remark: '', deliveryStatus: 'none' }
|
||||
]}
|
||||
];
|
||||
|
||||
@@ -181,7 +181,7 @@ const Component = function() {
|
||||
modalBody: { padding: 20, overflow: 'auto', flex: 1 }
|
||||
};
|
||||
|
||||
var reqSpecText = '编辑交车任务\n一个「数字化资产ONEOS运管平台」中的「交车任务」「编辑」模块\n1.面包屑：\n1.1.业务管理-交车任务-编辑\n\n2.表单：\n2.1.选择项目名称：必选项，反写新增时写入的数据，选择器，默认提示文本：请选择或输入项目名称，支持从输入框内输入内容进行模糊搜索，对应自营合同、租赁合同-「项目名称」字段；；\n2.2.合同编码：输入框（禁用状态），根据所选项目名称自动反写合同编码；\n2.3.客户名称：输入框（禁用状态），根据所选项目名称自动反写客户名称；\n2.4.交车区域：输入框（禁用状态），根据所选项目名称自动反写交车区域。提交时根据交车区域，为对应区域运维人员分配对应交车任务；\n2.5.交车地点：输入框（禁用状态），根据所选项目名称自动反写交车地点；\n2.6.预计交车日期：必填项，反写新增时写入的数据，日期选择器，支持某天或某个时间段两种模式，格式为YYYY-MM-DD或YYYY-MM-DD至YYYY-MM-DD，结束日期不能早于开始日期，并且结束日期不能早于当前日期；\n 2.6.1.如勾选不需要还车，则预计交车日期隐藏，不需要设置；\n2.7.开始计费日期：必填项，反写新增时写入的数据，日期选择器，支持单日选择，格式为YYYY-MM-DD；\n2.8.已交车辆是否需要还车：勾选框，反写新增时写入的数据，内容为不需要还车，默认不勾选，不勾选时，无法在车辆列表勾选已交未还的车辆，勾选后，已交未还的车辆也可以勾选，但不会生成新交车任务，只是按照开始计费日期生成账单；\n 2.8.1.勾选时，车辆列表只显示已交未还的车辆清单，不能添加新车（避免已交未还部分车辆开始计费日期计算不精确）；\n 2.8.2.不勾选时，车辆列表显示已交未还的车辆清单及续签合同新增车辆，但是已交未还部分的车辆不可勾选；\n2.9.下方为列表，列表拉取该车辆租赁合同对应所有车辆信息（该合同下已提交过交车任务的车辆不可选，已完成交车的车辆不显示在列表中），列表字段为：全选/多选、品牌、型号、车牌号、车辆识别代码、车辆月租金、服务费、保证金、备注；\n 2.9.1.全选/多选：支持全选、多选模式，反写新增时写入的数据，选择对应车辆后，点击提交自动生成被选中车辆交车任务，需要至少选择1辆，才能进行提交，该合同下已提交过交车任务和已交车的车辆不可选，多选框为禁用状态，悬浮时提示：该车辆已完成交车/该车辆已创建交车任务；\n 2.9.2.品牌：输入框（禁用状态），根据所选项目名称自动反写品牌；\n 2.9.3.型号：输入框（禁用状态），根据所选项目名称自动反写型号；\n 2.9.4.车牌号：输入框（禁用状态），根据所选项目名称自动反写车牌号，车牌号可能为空，为空时显示为-；\n 2.9.5.车辆识别代码：输入框（禁用状态），根据所选项目名称自动反写车辆识别代码；\n 2.9.6.车辆月租金：输入框（禁用状态），根据所选项目名称自动反写车辆月租金，后缀为元；\n 2.9.7.服务费：输入框（禁用状态），根据所选项目名称自动反写服务费，后缀为元；\n 2.9.8.保证金：输入框（禁用状态），根据所选项目名称自动反写保证金，后缀为元；\n 2.9.9.备注：输入框（禁用状态），根据所选项目名称自动反写备注信息，备注为空时显示为-；\n2.10.页面底部为提交、取消；';
|
||||
var reqSpecText = '编辑交车任务\n一个「数字化资产ONEOS运管平台」中的「交车任务」「编辑」模块\n1.面包屑：\n1.1.业务管理-交车任务-编辑\n\n2.表单：\n2.1.选择项目名称：必选项，反写新增时写入的数据，选择器，默认提示文本：请选择或输入项目名称，支持从输入框内输入内容进行模糊搜索，对应自营合同、租赁合同-「项目名称」字段；；\n2.2.合同编码：输入框（禁用状态），根据所选项目名称自动反写合同编码；\n2.3.客户名称：输入框（禁用状态），根据所选项目名称自动反写客户名称；\n2.4.交车区域：输入框（禁用状态），根据所选项目名称自动反写交车区域。提交时根据交车区域，为对应区域运维人员分配对应交车任务；\n2.5.交车地点：输入框（禁用状态），根据所选项目名称自动反写交车地点；\n2.6.预计交车日期：必填项，反写新增时写入的数据，日期选择器，支持某天或某个时间段两种模式，格式为YYYY-MM-DD或YYYY-MM-DD至YYYY-MM-DD，结束日期不能早于开始日期，并且结束日期不能早于当前日期；\n 2.6.1.如勾选不需要还车，则预计交车日期隐藏，不需要设置；\n2.7.开始计费日期：必填项，反写新增时写入的数据，日期选择器，支持单日选择，格式为YYYY-MM-DD；\n2.8.已交车辆是否需要还车：勾选框，反写新增时写入的数据，内容为不需要还车，默认不勾选，不勾选时，无法在车辆列表勾选已交未还的车辆，勾选后，已交未还的车辆也可以勾选，但不会生成新交车任务，只是按照开始计费日期生成账单；\n 2.8.1.勾选时，车辆列表只显示已交未还的车辆清单，不能添加新车（避免已交未还部分车辆开始计费日期计算不精确）；\n 2.8.2.不勾选时，车辆列表显示已交未还的车辆清单及续签合同新增车辆，但是已交未还部分的车辆不可勾选；\n2.9.下方为列表，列表拉取该车辆租赁合同对应所有车辆信息（该合同下已提交过交车任务的车辆不可选，已完成交车的车辆不显示在列表中），列表字段为：全选/多选、序号、品牌、型号、车牌号、车辆识别代码、车辆月租金、服务费、保证金、备注；\n 2.9.1.序号：与租赁合同车辆序号对应；\n 2.9.2.全选/多选：支持全选、多选模式，反写新增时写入的数据，选择对应车辆后，点击提交自动生成被选中车辆交车任务，需要至少选择1辆，才能进行提交，该合同下已提交过交车任务和已交车的车辆不可选，多选框为禁用状态，悬浮时提示：该车辆已完成交车/该车辆已创建交车任务；\n 2.9.3.品牌：输入框（禁用状态），根据所选项目名称自动反写品牌；\n 2.9.4.型号：输入框（禁用状态），根据所选项目名称自动反写型号；\n 2.9.5.车牌号：输入框（禁用状态），根据所选项目名称自动反写车牌号，车牌号可能为空，为空时显示为-；\n 2.9.6.车辆识别代码：输入框（禁用状态），根据所选项目名称自动反写车辆识别代码；\n 2.9.7.车辆月租金：输入框（禁用状态），根据所选项目名称自动反写车辆月租金，后缀为元；\n 2.9.8.服务费：输入框（禁用状态），根据所选项目名称自动反写服务费，后缀为元；\n 2.9.9.保证金：输入框（禁用状态），根据所选项目名称自动反写保证金，后缀为元；\n 2.9.10.备注：输入框（禁用状态），根据所选项目名称自动反写备注信息，备注为空时显示为-；\n2.10.页面底部为提交、取消；';
|
||||
|
||||
var FormItem = function(props) {
|
||||
return React.createElement('div', { style: styles.formCol },
|
||||
@@ -251,6 +251,7 @@ const Component = function() {
|
||||
indeterminate: someSelectableChecked && !allSelectableChecked,
|
||||
onChange: function(e) { onSelectAll(e.target.checked); }
|
||||
})),
|
||||
React.createElement('th', { style: Object.assign({}, styles.th, { width: 56 }) }, '序号'),
|
||||
React.createElement('th', { style: styles.th }, '品牌'),
|
||||
React.createElement('th', { style: styles.th }, '型号'),
|
||||
React.createElement('th', { style: styles.th }, '车牌号'),
|
||||
@@ -264,7 +265,7 @@ const Component = function() {
|
||||
|
||||
var tableBody = React.createElement('tbody', null,
|
||||
vehicleList.length === 0
|
||||
? React.createElement('tr', null, React.createElement('td', { colSpan: 9, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '请先选择项目名称，将自动带出该合同下车辆信息'))
|
||||
? React.createElement('tr', null, React.createElement('td', { colSpan: 10, style: Object.assign({}, styles.td, { textAlign: 'center', color: '#999' }) }, '请先选择项目名称，将自动带出该合同下车辆信息'))
|
||||
: vehicleList.map(function(row) {
|
||||
var isSubmitted = row.deliveryStatus === 'submitted';
|
||||
var isCompleted = row.deliveryStatus === 'completed';
|
||||
@@ -285,6 +286,7 @@ const Component = function() {
|
||||
})
|
||||
))
|
||||
: React.createElement(Checkbox, { checked: checkedRowKeys.indexOf(row.key) !== -1, onChange: function(e) { onSelectRow(row, e.target.checked); } })),
|
||||
React.createElement('td', { style: styles.td }, row.seq != null ? row.seq : '—'),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.brand, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.model, disabled: true, style: styles.inputDisabled })),
|
||||
React.createElement('td', { style: styles.td }, React.createElement(Input, { value: row.plateNo || '-', disabled: true, style: styles.inputDisabled })),
|
||||
|
||||
15
web端/业务管理/车辆成本维护
Normal file
15
web端/业务管理/车辆成本维护
Normal file
@@ -0,0 +1,15 @@
|
||||
车辆成本维护（2026年3月12日版本）
|
||||
一个「数字化资产ONEOS运管平台」中的「车辆成本维护」模块
|
||||
#面包屑：业务管理-车辆成本维护；
|
||||
|
||||
页面分为2个卡片；
|
||||
1.筛选：
|
||||
#支持车辆品牌、型号筛选；
|
||||
1.1.型号：级联选择器，支持品牌、型号级联；
|
||||
|
||||
2.车辆成本列表：列表默认显示当前系统中所有品牌和型号记录，如型号参数表有新增，则该处同步新增一条数据；
|
||||
2.1.品牌：显示车辆品牌；
|
||||
2.2.型号：显示车辆型号（如18吨双飞翼，而不是公告型号）；
|
||||
2.3.租赁车辆日成本：显示格式为：xx.xx元，支持两位小数；
|
||||
2.4.自营车辆日成本：显示格式为：xx.xx元，支持两位小数；
|
||||
2.5.操作：编辑；
|
||||
233
web端/业务管理/车辆成本维护.jsx
Normal file
233
web端/业务管理/车辆成本维护.jsx
Normal file
@@ -0,0 +1,233 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 业务管理 - 车辆成本维护（2026年3月12日版本）
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
var useMemo = React.useMemo;
|
||||
|
||||
var antd = window.antd;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Table = antd.Table;
|
||||
var Button = antd.Button;
|
||||
var Input = antd.Input;
|
||||
var Space = antd.Space;
|
||||
var Modal = antd.Modal;
|
||||
var Cascader = antd.Cascader;
|
||||
var message = antd.message;
|
||||
|
||||
var requirementModalVisible = useState(false);
|
||||
var filterCascaderValue = useState(undefined); // [brand] 或 [brand, model]
|
||||
var listDataState = useState([
|
||||
{ id: 1, brand: '东风', model: '18吨双飞翼', rentalCostPerDay: 260.00, selfOperatedCostPerDay: 250.00 },
|
||||
{ id: 2, brand: '福田', model: '18吨厢式', rentalCostPerDay: 255.00, selfOperatedCostPerDay: 245.00 },
|
||||
{ id: 3, brand: '重汽', model: '18吨栏板', rentalCostPerDay: 270.00, selfOperatedCostPerDay: 260.00 },
|
||||
{ id: 4, brand: '陕汽', model: '25吨牵引', rentalCostPerDay: 268.00, selfOperatedCostPerDay: 258.00 },
|
||||
{ id: 5, brand: '解放', model: '18吨冷藏', rentalCostPerDay: 262.00, selfOperatedCostPerDay: 252.00 },
|
||||
{ id: 6, brand: '江淮', model: '9吨厢式', rentalCostPerDay: 248.00, selfOperatedCostPerDay: 238.00 },
|
||||
{ id: 7, brand: '东风', model: '25吨栏板', rentalCostPerDay: 275.00, selfOperatedCostPerDay: 265.00 },
|
||||
{ id: 8, brand: '福田', model: '25吨飞翼', rentalCostPerDay: 272.00, selfOperatedCostPerDay: 262.00 },
|
||||
{ id: 9, brand: '重汽', model: '25吨冷藏', rentalCostPerDay: 278.00, selfOperatedCostPerDay: 268.00 },
|
||||
{ id: 10, brand: '陕汽', model: '18吨自卸', rentalCostPerDay: 265.00, selfOperatedCostPerDay: 255.00 }
|
||||
]);
|
||||
var listData = listDataState[0];
|
||||
var setListData = listDataState[1];
|
||||
var editingKeyState = useState(null);
|
||||
var editingKey = editingKeyState[0];
|
||||
var setEditingKey = editingKeyState[1];
|
||||
var editRentalState = useState('');
|
||||
var editRental = editRentalState[0];
|
||||
var setEditRental = editRentalState[1];
|
||||
var editSelfOperatedState = useState('');
|
||||
var editSelfOperated = editSelfOperatedState[0];
|
||||
var setEditSelfOperated = editSelfOperatedState[1];
|
||||
|
||||
var cascaderOptions = useMemo(function () {
|
||||
var map = {};
|
||||
listData.forEach(function (r) {
|
||||
if (!r.brand) return;
|
||||
if (!map[r.brand]) map[r.brand] = { value: r.brand, label: r.brand, children: [] };
|
||||
var children = map[r.brand].children;
|
||||
var model = r.model || '';
|
||||
if (model && children.every(function (c) { return c.value !== model; })) {
|
||||
children.push({ value: model, label: model });
|
||||
}
|
||||
});
|
||||
return Object.keys(map).map(function (k) { return map[k]; });
|
||||
}, [listData]);
|
||||
|
||||
var filteredList = useMemo(function () {
|
||||
var val = filterCascaderValue[0];
|
||||
if (!val || !Array.isArray(val) || val.length === 0) return listData;
|
||||
var brand = val[0];
|
||||
var model = val[1];
|
||||
if (model) return listData.filter(function (r) { return r.brand === brand && r.model === model; });
|
||||
return listData.filter(function (r) { return r.brand === brand; });
|
||||
}, [listData, filterCascaderValue[0]]);
|
||||
|
||||
function fmtCost(v) {
|
||||
var n = typeof v === 'number' ? v : parseFloat(v);
|
||||
return (isNaN(n) ? '0.00' : n.toFixed(2)) + '元';
|
||||
}
|
||||
|
||||
function saveRow(id) {
|
||||
var r = parseFloat(editRental);
|
||||
var s = parseFloat(editSelfOperated);
|
||||
if (isNaN(r) || r < 0 || isNaN(s) || s < 0) {
|
||||
message.warning('请输入有效的日成本（元），支持两位小数');
|
||||
return;
|
||||
}
|
||||
setListData(function (prev) {
|
||||
return prev.map(function (row) {
|
||||
if (row.id !== id) return row;
|
||||
var o = {}; for (var k in row) o[k] = row[k];
|
||||
o.rentalCostPerDay = Math.round(r * 100) / 100;
|
||||
o.selfOperatedCostPerDay = Math.round(s * 100) / 100;
|
||||
return o;
|
||||
});
|
||||
});
|
||||
setEditingKey(null);
|
||||
setEditRental('');
|
||||
setEditSelfOperated('');
|
||||
message.success('保存成功');
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
setEditingKey(null);
|
||||
setEditRental('');
|
||||
setEditSelfOperated('');
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var cardStyle = { marginBottom: 16 };
|
||||
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var filterItemStyle = { marginBottom: 12 };
|
||||
var filterControlStyle = { width: '100%', maxWidth: 320 };
|
||||
|
||||
var columns = [
|
||||
{ title: '序号', key: 'idx', width: 72, align: 'center', render: function (_, __, index) { return index + 1; } },
|
||||
{ title: '品牌', dataIndex: 'brand', key: 'brand', width: 120, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{ title: '型号', dataIndex: 'model', key: 'model', width: 160, ellipsis: true, render: function (v) { return v || '—'; } },
|
||||
{
|
||||
title: '租赁车辆日成本',
|
||||
dataIndex: 'rentalCostPerDay',
|
||||
key: 'rentalCostPerDay',
|
||||
width: 160,
|
||||
align: 'right',
|
||||
render: function (v, record) {
|
||||
var id = record.id;
|
||||
var isEditing = editingKey === id;
|
||||
if (isEditing) {
|
||||
return React.createElement(Input, {
|
||||
type: 'number',
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
value: editRental,
|
||||
onChange: function (e) { setEditRental(e.target.value); },
|
||||
style: { width: 120, textAlign: 'right' },
|
||||
addonAfter: '元'
|
||||
});
|
||||
}
|
||||
return fmtCost(v);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '自营车辆日成本',
|
||||
dataIndex: 'selfOperatedCostPerDay',
|
||||
key: 'selfOperatedCostPerDay',
|
||||
width: 160,
|
||||
align: 'right',
|
||||
render: function (v, record) {
|
||||
var id = record.id;
|
||||
var isEditing = editingKey === id;
|
||||
if (isEditing) {
|
||||
return React.createElement(Input, {
|
||||
type: 'number',
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
value: editSelfOperated,
|
||||
onChange: function (e) { setEditSelfOperated(e.target.value); },
|
||||
style: { width: 120, textAlign: 'right' },
|
||||
addonAfter: '元'
|
||||
});
|
||||
}
|
||||
return fmtCost(v);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 140,
|
||||
render: function (_, record) {
|
||||
var isEditing = editingKey === record.id;
|
||||
if (isEditing) {
|
||||
return React.createElement(Space, { size: 'small' },
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: function () { saveRow(record.id); } }, '保存'),
|
||||
React.createElement(Button, { type: 'link', size: 'small', onClick: cancelEdit }, '取消')
|
||||
);
|
||||
}
|
||||
return React.createElement(Button, {
|
||||
type: 'link',
|
||||
size: 'small',
|
||||
onClick: function () {
|
||||
setEditingKey(record.id);
|
||||
setEditRental(record.rentalCostPerDay != null ? String(record.rentalCostPerDay) : '');
|
||||
setEditSelfOperated(record.selfOperatedCostPerDay != null ? String(record.selfOperatedCostPerDay) : '');
|
||||
}
|
||||
}, '编辑');
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var requirementContent = '车辆成本维护（2026年3月12日版本）\n一个「数字化资产ONEOS运管平台」中的「车辆成本维护」模块\n#面包屑：业务管理-车辆成本维护；\n\n页面分为2个卡片；\n1.筛选：\n#支持车辆品牌、型号筛选；\n1.1.型号：级联选择器，支持品牌、型号级联；\n\n2.车辆成本列表：列表默认显示当前系统中所有品牌和型号记录，如型号参数表有新增，则该处同步新增一条数据；\n2.1.品牌：显示车辆品牌；\n2.2.型号：显示车辆型号（如18吨双飞翼，而不是公告型号）；\n2.3.租赁车辆日成本：显示格式为：xx.xx元，支持两位小数；\n2.4.自营车辆日成本：显示格式为：xx.xx元，支持两位小数；\n2.5.操作：编辑；';
|
||||
|
||||
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: '车辆成本维护' }
|
||||
]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { requirementModalVisible[1](true); } }, '查看需求说明')
|
||||
),
|
||||
React.createElement(Card, { title: '筛选', style: cardStyle },
|
||||
React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'flex-end', gap: 16 } },
|
||||
React.createElement('div', { style: filterItemStyle },
|
||||
React.createElement('div', { style: filterLabelStyle }, '型号'),
|
||||
React.createElement(Cascader, {
|
||||
options: cascaderOptions,
|
||||
value: filterCascaderValue[0],
|
||||
onChange: function (v) { filterCascaderValue[1](v); },
|
||||
placeholder: '请选择品牌 / 型号',
|
||||
allowClear: true,
|
||||
style: filterControlStyle,
|
||||
changeOnSelect: true
|
||||
})
|
||||
),
|
||||
React.createElement('div', { style: { display: 'flex', gap: 8 } },
|
||||
React.createElement(Button, { onClick: function () { filterCascaderValue[1](undefined); } }, '重置'),
|
||||
React.createElement(Button, { type: 'primary' }, '查询')
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Card, { title: '车辆成本列表', style: cardStyle },
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
columns: columns,
|
||||
dataSource: filteredList,
|
||||
pagination: { pageSize: 10, showSizeChanger: true, showTotal: function (t) { return '共 ' + t + ' 条'; } },
|
||||
size: 'middle',
|
||||
bordered: true
|
||||
})
|
||||
),
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalVisible[0],
|
||||
onCancel: function () { requirementModalVisible[1](false); },
|
||||
width: 560,
|
||||
footer: React.createElement(Button, { onClick: function () { requirementModalVisible[1](false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { padding: '8px 0', whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6 } }, requirementContent))
|
||||
);
|
||||
};
|
||||
@@ -22,7 +22,7 @@
|
||||
2.1.6.业务部门：显示该租赁合同对应业务部门名称；
|
||||
2.1.7.业务负责人：显示该租赁合同对应业务负责人；
|
||||
2.1.8.操作：提车收款单；
|
||||
2.1.8.1.提车收款单：点击提车收款单，跳转提车收款单页进行子表创建；
|
||||
2.1.8.1.提车收款单：点击提车收款单，跳转提车收款单页进行子表创建，该合同所有车辆都已完成提车应收款后，该按钮不显示；
|
||||
主表右下角为分页符，支持选择单页显示多少条数据；
|
||||
|
||||
2.2.子表显示字段为：序号、审批状态、创建时间、提车数量、应收款总额、实收款总额、减免总金额、实际到账金额、是否已开票、已开票金额、操作；
|
||||
@@ -42,8 +42,8 @@
|
||||
2.2.10.是否已开票：显示财务是否完成开票，已开票显示为：已开票，未开票显示为：未开票，部分开票显示为：部分开票；
|
||||
2.2.11.已开票金额：显示财务已开票金额，格式为：xx.xx元；
|
||||
2.2.12.总计：显示应收款总额、实收款总额、减免总金额、实际到账金额、已开票金额等所有子表求和数据；
|
||||
2.2.13.操作：查看、编辑、删除、开票；
|
||||
2.2.13.操作：查看、编辑、删除；
|
||||
2.2.12.1.查看：点击查看后，跳转提车应收款-查看页面，审批通过、待审批、审批中、审批驳回均可点击查看来查看提车收款单详情；
|
||||
2.2.12.2.编辑：点击编辑后，跳转提车应收款-编辑页面，待审批、审批驳回均可进行编辑操作；
|
||||
2.2.12.2.删除：待审批、审批驳回状态子表支持删除功能，点击弹出二次确认，点击确认后删除该记录；
|
||||
2.2.12.3.开票：点击开票后，进入提车应收款-开票页面，审批通过状态子表才显示，开票由财务人员操作，需要做权限控制，其他用户没有开票入口；
|
||||
|
||||
Reference in New Issue
Block a user