Initial commit: ONE-OS project

Made-with: Cursor
This commit is contained in:
王冕
2026-02-27 18:11:40 +08:00
commit 09cc45db36
47 changed files with 17589 additions and 0 deletions

View File

@@ -0,0 +1,577 @@
// 【重要】必须使用 const Component 作为组件变量名
// 数字化资产ONEOS运管平台 - 业务管理 - 交车任务
const Component = function() {
var useState = React.useState;
var useMemo = React.useMemo;
var antd = window.antd;
var Breadcrumb = antd.Breadcrumb;
var Select = antd.Select;
var Button = antd.Button;
var Table = antd.Table;
var Card = antd.Card;
var Tabs = antd.Tabs;
var DatePicker = antd.DatePicker;
var Popover = antd.Popover;
var Modal = antd.Modal;
var message = antd.message;
var App = antd.App;
var RangePicker = DatePicker.RangePicker;
// 筛选条件(表单输入)
var _contractCode = useState(undefined);
var _projectName = useState(undefined);
var _customerName = useState(undefined);
var _planDateRange = useState(null);
var _creator = useState(undefined);
// 已应用的筛选条件(点击查询后生效)
var _applied = useState({
contractCode: undefined,
projectName: undefined,
customerName: undefined,
planDateRange: null,
creator: undefined
});
// Tab进行中 / 已完成
var _activeTab = useState('ongoing');
// 筛选展开(默认显示前 3 项,与车辆租赁合同一致)
var _filterExpanded = useState(false);
// 需求说明弹窗
var _reqSpecOpen = useState(false);
// 停用/启用:重新选择预计交车日期弹窗
var _rescheduleModalVisible = useState(false);
var _rescheduleTask = useState(null);
var _rescheduleDateRange = useState(null);
// 模拟选项(可模糊搜索)
var contractOptions = [
{ value: 'JXZL20260216YW101235A', label: 'JXZL20260216YW101235A' },
{ value: 'JXZL20260216YW101236A', label: 'JXZL20260216YW101236A' },
{ value: 'JXZL20260215YW101234A', label: 'JXZL20260215YW101234A' },
{ value: 'SHZL20260210YW101200A', label: 'SHZL20260210YW101200A' }
];
var projectOptions = [
{ value: 'p1', label: '嘉兴氢能运输项目' },
{ value: 'p2', label: '上海物流租赁项目' },
{ value: 'p3', label: '杭州城配租赁项目' }
];
var customerOptions = [
{ value: 'c1', label: '嘉兴某某物流有限公司' },
{ value: 'c2', label: '上海某某运输公司' },
{ value: 'c3', label: '杭州某某租赁有限公司' }
];
var creatorOptions = [
{ value: 'u1', label: '张经理' },
{ value: 'u2', label: '李专员' },
{ value: 'u3', label: '王专员' }
];
// 进行中列表数据(未完成交车单提交),用 state 以便停用/启用后刷新
var _ongoingList = useState([
{ id: 'o1', contractCode: 'JXZL20260216YW101235A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 2, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市南湖区科技大道1号', planDeliveryDisplay: '2026-03-01至2026-03-05', planDeliveryEnd: '2026-03-05', billingStartDate: '2026-03-01', creator: '张经理', createdAt: '2026-02-20', lastUpdater: '张经理', lastUpdatedAt: '2026-02-24', enabled: true },
{ id: 'o2', contractCode: 'JXZL20260216YW101236A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市浦东新区张江高科技园区', planDeliveryDisplay: '2026-03-10', planDeliveryEnd: '2026-03-10', billingStartDate: '-', creator: '李专员', createdAt: '2026-02-21', lastUpdater: '李专员', lastUpdatedAt: '2026-02-22', enabled: false },
{ id: 'o3', contractCode: 'JXZL20260215YW101234A', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 3, deliveryRegion: '浙江省-杭州市', deliveryLocation: '杭州市余杭区未来科技城', planDeliveryDisplay: '2026-02-28至2026-03-02', planDeliveryEnd: '2026-03-02', billingStartDate: '2026-02-28', creator: '王专员', createdAt: '2026-02-18', lastUpdater: '王专员', lastUpdatedAt: '2026-02-25', enabled: true },
{ id: 'o4', contractCode: 'JXZL20260101YW101200A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市秀洲区洪兴西路288号', planDeliveryDisplay: '2026-01-05至2026-01-10', planDeliveryEnd: '2026-01-10', billingStartDate: '-', creator: '张经理', createdAt: '2026-01-02', lastUpdater: '张经理', lastUpdatedAt: '2026-01-15', enabled: false },
{ id: 'o5', contractCode: 'JXZL20260218YW101237A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 2, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市南湖区广益路与亚中路交叉口', planDeliveryDisplay: '2026-03-08至2026-03-12', planDeliveryEnd: '2026-03-12', billingStartDate: '-', creator: '张经理', createdAt: '2026-02-22', lastUpdater: '张经理', lastUpdatedAt: '2026-02-26', enabled: true },
{ id: 'o6', contractCode: 'SHZL20260210YW101201A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市闵行区申滨路1051号', planDeliveryDisplay: '2026-03-15', planDeliveryEnd: '2026-03-15', billingStartDate: '-', creator: '李专员', createdAt: '2026-02-19', lastUpdater: '李专员', lastUpdatedAt: '2026-02-23', enabled: true },
{ id: 'o7', contractCode: 'JXZL20260220YW101238A', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 4, deliveryRegion: '浙江省-杭州市', deliveryLocation: '杭州市萧山区市心北路与建设一路交叉口', planDeliveryDisplay: '2026-03-20至2026-03-25', planDeliveryEnd: '2026-03-25', billingStartDate: '-', creator: '王专员', createdAt: '2026-02-23', lastUpdater: '王专员', lastUpdatedAt: '2026-02-27', enabled: true },
{ id: 'o8', contractCode: 'JXZL20260214YW101233A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市经开区昌盛路与文昌路交叉口', planDeliveryDisplay: '2026-03-05', planDeliveryEnd: '2026-03-05', billingStartDate: '-', creator: '张经理', createdAt: '2026-02-17', lastUpdater: '李专员', lastUpdatedAt: '2026-02-24', enabled: true },
{ id: 'o9', contractCode: 'SHZL20260212YW101202A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 2, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市嘉定区安亭镇墨玉南路与博园路交叉口', planDeliveryDisplay: '2026-03-18至2026-03-22', planDeliveryEnd: '2026-03-22', billingStartDate: '-', creator: '李专员', createdAt: '2026-02-24', lastUpdater: '李专员', lastUpdatedAt: '2026-02-28', enabled: true },
{ id: 'o10', contractCode: 'JXZL20260222YW101239A', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 3, deliveryRegion: '浙江省-杭州市', deliveryLocation: '杭州市西湖区文三路与古翠路交叉口', planDeliveryDisplay: '2026-03-25至2026-03-30', planDeliveryEnd: '2026-03-30', billingStartDate: '-', creator: '王专员', createdAt: '2026-02-25', lastUpdater: '王专员', lastUpdatedAt: '2026-02-28', enabled: true }
]);
var ongoingList = _ongoingList[0];
var setOngoingList = _ongoingList[1];
// 已完成列表数据(已提交交车单),交车数量可点开气泡
var completedList = [
{ id: 'c1', contractCode: 'JXZL20260215YW101234A', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 2, deliveryRegion: '浙江省-杭州市', deliveryLocation: '杭州市余杭区未来科技城', vehicles: [{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '浙A10001', actualDeliveryDate: '2026-02-28', deliverer: '运维李' }, { vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '浙B20002', actualDeliveryDate: '2026-03-01', deliverer: '运维王' }], planDeliveryDisplay: '2026-02-28至2026-03-01', billingStartDate: '2026-02-28', creator: '王专员', createdAt: '2026-02-18', lastUpdater: '王专员', lastUpdatedAt: '2026-03-01' },
{ id: 'c2', contractCode: 'SHZL20260210YW101200A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市浦东新区张江高科技园区', vehicles: [{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '沪A30003', actualDeliveryDate: '2026-02-25', deliverer: '运维赵' }], planDeliveryDisplay: '2026-02-25', billingStartDate: '2026-02-25', creator: '李专员', createdAt: '2026-02-15', lastUpdater: '李专员', lastUpdatedAt: '2026-02-25' },
{ id: 'c3', contractCode: 'JXZL20260208YW101231A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 2, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市南湖区科技大道1号', vehicles: [{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '浙A10002', actualDeliveryDate: '2026-02-20', deliverer: '运维李' }, { vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '浙A10003', actualDeliveryDate: '2026-02-21', deliverer: '运维王' }], planDeliveryDisplay: '2026-02-20至2026-02-21', billingStartDate: '2026-02-20', creator: '张经理', createdAt: '2026-02-10', lastUpdater: '张经理', lastUpdatedAt: '2026-02-21' },
{ id: 'c4', contractCode: 'SHZL20260205YW101198A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 1, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市闵行区申滨路1051号', vehicles: [{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B2', plateNo: '沪B40004', actualDeliveryDate: '2026-02-18', deliverer: '运维赵' }], planDeliveryDisplay: '2026-02-18', billingStartDate: '2026-02-18', creator: '李专员', createdAt: '2026-02-08', lastUpdater: '李专员', lastUpdatedAt: '2026-02-18' },
{ id: 'c5', contractCode: 'JXZL20260212YW101232A', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 3, deliveryRegion: '浙江省-杭州市', deliveryLocation: '杭州市萧山区市心北路与建设一路交叉口', vehicles: [{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A2', plateNo: '浙C50001', actualDeliveryDate: '2026-02-22', deliverer: '运维李' }, { vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '浙C50002', actualDeliveryDate: '2026-02-23', deliverer: '运维王' }, { vehicleType: '4.5吨货车-轻型厢式货车', brand: '品牌C', model: '型号C1', plateNo: '浙C50003', actualDeliveryDate: '2026-02-24', deliverer: '运维赵' }], planDeliveryDisplay: '2026-02-22至2026-02-24', billingStartDate: '2026-02-22', creator: '王专员', createdAt: '2026-02-14', lastUpdater: '王专员', lastUpdatedAt: '2026-02-24' },
{ id: 'c6', contractCode: 'JXZL20260201YW101228A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市秀洲区洪兴西路288号', vehicles: [{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '浙A10004', actualDeliveryDate: '2026-02-15', deliverer: '运维李' }], planDeliveryDisplay: '2026-02-15', billingStartDate: '2026-02-15', creator: '张经理', createdAt: '2026-02-05', lastUpdater: '张经理', lastUpdatedAt: '2026-02-15' },
{ id: 'c7', contractCode: 'SHZL20260203YW101199A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 2, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市嘉定区安亭镇墨玉南路与博园路交叉口', vehicles: [{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '沪A30005', actualDeliveryDate: '2026-02-16', deliverer: '运维赵' }, { vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '沪A30006', actualDeliveryDate: '2026-02-17', deliverer: '运维李' }], planDeliveryDisplay: '2026-02-16至2026-02-17', billingStartDate: '2026-02-16', creator: '李专员', createdAt: '2026-02-06', lastUpdater: '李专员', lastUpdatedAt: '2026-02-17' },
{ id: 'c8', contractCode: 'JXZL20260128YW101227A', projectName: '杭州城配租赁项目', customerName: '杭州某某租赁有限公司', deliveryCount: 2, deliveryRegion: '浙江省-杭州市', deliveryLocation: '杭州市西湖区文三路与古翠路交叉口', vehicles: [{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B2', plateNo: '浙B20004', actualDeliveryDate: '2026-02-10', deliverer: '运维王' }, { vehicleType: '4.5吨货车-轻型厢式货车', brand: '品牌C', model: '型号C1', plateNo: '浙B20005', actualDeliveryDate: '2026-02-11', deliverer: '运维赵' }], planDeliveryDisplay: '2026-02-10至2026-02-11', billingStartDate: '2026-02-10', creator: '王专员', createdAt: '2026-01-30', lastUpdater: '王专员', lastUpdatedAt: '2026-02-11' },
{ id: 'c9', contractCode: 'JXZL20260206YW101230A', projectName: '嘉兴氢能运输项目', customerName: '嘉兴某某物流有限公司', deliveryCount: 1, deliveryRegion: '浙江省-嘉兴市', deliveryLocation: '嘉兴市经开区昌盛路与文昌路交叉口', vehicles: [{ vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A2', plateNo: '浙A10005', actualDeliveryDate: '2026-02-19', deliverer: '运维李' }], planDeliveryDisplay: '2026-02-19', billingStartDate: '2026-02-19', creator: '张经理', createdAt: '2026-02-09', lastUpdater: '张经理', lastUpdatedAt: '2026-02-19' },
{ id: 'c10', contractCode: 'SHZL20260215YW101203A', projectName: '上海物流租赁项目', customerName: '上海某某运输公司', deliveryCount: 2, deliveryRegion: '上海市-上海市', deliveryLocation: '上海市浦东新区金桥镇金海路1000号', vehicles: [{ vehicleType: '18吨厢式货车-重型厢式货车', brand: '品牌B', model: '型号B1', plateNo: '沪C60001', actualDeliveryDate: '2026-02-26', deliverer: '运维赵' }, { vehicleType: '4.5吨冷链车-轻型厢式货车', brand: '品牌A', model: '型号A1', plateNo: '沪C60002', actualDeliveryDate: '2026-02-27', deliverer: '运维李' }], planDeliveryDisplay: '2026-02-26至2026-02-27', billingStartDate: '2026-02-26', creator: '李专员', createdAt: '2026-02-18', lastUpdater: '李专员', lastUpdatedAt: '2026-02-27' }
];
var applied = _applied[0];
var setApplied = _applied[1];
var getProjectLabel = function(v) { var o = projectOptions.find(function(x) { return x.value === v; }); return o ? o.label : v; };
var getCustomerLabel = function(v) { var o = customerOptions.find(function(x) { return x.value === v; }); return o ? o.label : v; };
var getCreatorLabel = function(v) { var o = creatorOptions.find(function(x) { return x.value === v; }); return o ? o.label : v; };
var filterOngoing = function(list) {
var a = applied;
if (a.contractCode) list = list.filter(function(r) { return r.contractCode === a.contractCode; });
if (a.projectName) { var pl = getProjectLabel(a.projectName); if (pl) list = list.filter(function(r) { return r.projectName === pl; }); }
if (a.customerName) { var cl = getCustomerLabel(a.customerName); if (cl) list = list.filter(function(r) { return r.customerName === cl; }); }
if (a.creator) { var ul = getCreatorLabel(a.creator); if (ul) list = list.filter(function(r) { return r.creator === ul; }); }
if (a.planDateRange && a.planDateRange.length === 2 && window.dayjs) {
var start = window.dayjs(a.planDateRange[0]).startOf('day');
var end = window.dayjs(a.planDateRange[1]).endOf('day');
list = list.filter(function(r) {
var d = r.planDeliveryEnd ? window.dayjs(r.planDeliveryEnd) : null;
return d && !d.isBefore(start) && !d.isAfter(end);
});
}
return list;
};
var filteredOngoing = useMemo(function() {
return filterOngoing(ongoingList.slice());
}, [ongoingList, applied.contractCode, applied.projectName, applied.customerName, applied.creator, applied.planDateRange]);
var filteredCompleted = useMemo(function() {
var list = completedList.slice();
if (applied.contractCode) list = list.filter(function(r) { return r.contractCode === applied.contractCode; });
if (applied.projectName) { var pl = getProjectLabel(applied.projectName); if (pl) list = list.filter(function(r) { return r.projectName === pl; }); }
if (applied.customerName) { var cl = getCustomerLabel(applied.customerName); if (cl) list = list.filter(function(r) { return r.customerName === cl; }); }
if (applied.creator) { var ul = getCreatorLabel(applied.creator); if (ul) list = list.filter(function(r) { return r.creator === ul; }); }
if (applied.planDateRange && applied.planDateRange.length === 2 && window.dayjs) {
var start = window.dayjs(applied.planDateRange[0]).startOf('day');
var end = window.dayjs(applied.planDateRange[1]).endOf('day');
list = list.filter(function(r) {
var planEnd = r.planDeliveryDisplay && r.planDeliveryDisplay.indexOf('至') >= 0
? r.planDeliveryDisplay.split('至')[1]
: r.planDeliveryDisplay;
var d = planEnd ? window.dayjs(planEnd) : null;
return d && !d.isBefore(start) && !d.isAfter(end);
});
}
return list;
}, [applied.contractCode, applied.projectName, applied.customerName, applied.creator, applied.planDateRange]);
var handleQuery = function() {
setApplied({
contractCode: _contractCode[0],
projectName: _projectName[0],
customerName: _customerName[0],
planDateRange: _planDateRange[0] && _planDateRange[0].length === 2 ? _planDateRange[0] : null,
creator: _creator[0]
});
message.info('已按筛选条件查询');
};
var handleReset = function() {
_contractCode[1](undefined);
_projectName[1](undefined);
_customerName[1](undefined);
_planDateRange[1](null);
_creator[1](undefined);
setApplied({
contractCode: undefined,
projectName: undefined,
customerName: undefined,
planDateRange: null,
creator: undefined
});
};
var handleDisableEnable = function(record) {
if (record.enabled) {
Modal.confirm({
title: '是否确认停用该交车任务?',
okText: '确定',
cancelText: '取消',
onOk: function() {
setOngoingList(function(prev) {
return prev.map(function(r) { return r.id === record.id ? Object.assign({}, r, { enabled: false }) : r; });
});
message.success('已停用');
}
});
return;
}
// 启用:判断预计交车结束日期是否已过期
var dayjs = window.dayjs;
var endDate = record.planDeliveryEnd ? (dayjs ? dayjs(record.planDeliveryEnd) : null) : null;
var now = dayjs ? dayjs() : null;
if (endDate && now && endDate.isBefore(now, 'day')) {
_rescheduleTask[1](record);
_rescheduleDateRange[1](null);
_rescheduleModalVisible[1](true);
return;
}
Modal.confirm({
title: '是否确认启用该交车任务?',
okText: '确定',
cancelText: '取消',
onOk: function() {
setOngoingList(function(prev) {
return prev.map(function(r) { return r.id === record.id ? Object.assign({}, r, { enabled: true }) : r; });
});
message.success('已启用');
}
});
};
var handleRescheduleConfirm = function() {
var task = _rescheduleTask[0];
var range = _rescheduleDateRange[0];
if (!task || !range || range.length !== 2) {
message.warning('请选择预计交车日期(单日请选择同一天为开始和结束)');
return;
}
var dayjs = window.dayjs;
var startStr = dayjs ? dayjs(range[0]).format('YYYY-MM-DD') : String(range[0]);
var endStr = dayjs ? dayjs(range[1]).format('YYYY-MM-DD') : String(range[1]);
var planDisplay = startStr === endStr ? startStr : startStr + '至' + endStr;
setOngoingList(function(prev) {
return prev.map(function(r) {
if (r.id !== task.id) return r;
return Object.assign({}, r, { planDeliveryDisplay: planDisplay, planDeliveryEnd: endStr, enabled: true });
});
});
message.success('已重新选择预计交车日期并启用');
_rescheduleModalVisible[1](false);
_rescheduleTask[1](null);
_rescheduleDateRange[1](null);
};
// 进行中表格列
var ongoingColumns = [
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 180, ellipsis: true, fixed: 'left' },
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, ellipsis: true, fixed: 'left' },
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 160, ellipsis: true, fixed: 'left' },
{ title: '交车数量', dataIndex: 'deliveryCount', key: 'deliveryCount', width: 100 },
{ title: '交车区域', dataIndex: 'deliveryRegion', key: 'deliveryRegion', width: 140 },
{ title: '交车地点', dataIndex: 'deliveryLocation', key: 'deliveryLocation', width: 200, ellipsis: true },
{ title: '预计交车日期', dataIndex: 'planDeliveryDisplay', key: 'planDeliveryDisplay', width: 180 },
{ title: '开始计费日期', dataIndex: 'billingStartDate', key: 'billingStartDate', width: 120 },
{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 100 },
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', width: 120 },
{ title: '最后更新人', dataIndex: 'lastUpdater', key: 'lastUpdater', width: 100 },
{ title: '最后更新时间', dataIndex: 'lastUpdatedAt', key: 'lastUpdatedAt', width: 120 },
{
title: '操作',
key: 'action',
width: 180,
fixed: 'right',
render: function(_, record) {
return React.createElement('span', null,
React.createElement(Button, { type: 'link', size: 'small', onClick: function() { message.info('请参照原型业务管理-交车任务页面'); } }, '查看'),
React.createElement(Button, { type: 'link', size: 'small', onClick: function() { message.info('请参照原型业务管理-交车任务-编辑交车任务页面'); } }, '编辑'),
React.createElement(Button, {
type: 'link',
size: 'small',
onClick: function() { handleDisableEnable(record); }
}, record.enabled ? '停用' : '启用')
);
}
}
];
// 已完成表格列(交车数量重点色+气泡)
var vehiclePopoverContent = function(vehicles) {
if (!vehicles || !vehicles.length) return React.createElement('span', null, '-');
var headers = ['车辆类型', '品牌', '型号', '车牌号', '实际交车日期', '交车人'];
return React.createElement('div', { style: { padding: 4, minWidth: 420 } },
React.createElement('table', { style: { width: '100%', borderCollapse: 'collapse', fontSize: 12 } },
React.createElement('thead', null,
React.createElement('tr', null,
headers.map(function(h) { return React.createElement('th', { key: h, style: { padding: '6px 8px', textAlign: 'left', borderBottom: '1px solid #eee', fontWeight: 600 } }, h); })
)
),
React.createElement('tbody', null,
vehicles.map(function(v, i) {
return React.createElement('tr', { key: i },
React.createElement('td', { style: { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, v.vehicleType || '-'),
React.createElement('td', { style: { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, v.brand || '-'),
React.createElement('td', { style: { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, v.model || '-'),
React.createElement('td', { style: { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, v.plateNo || '-'),
React.createElement('td', { style: { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, v.actualDeliveryDate || '-'),
React.createElement('td', { style: { padding: '6px 8px', borderBottom: '1px solid #f0f0f0' } }, v.deliverer || '-')
);
})
)
)
);
};
var completedColumns = [
{ title: '合同编码', dataIndex: 'contractCode', key: 'contractCode', width: 180, ellipsis: true, fixed: 'left' },
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName', width: 140, ellipsis: true, fixed: 'left' },
{ title: '客户名称', dataIndex: 'customerName', key: 'customerName', width: 160, ellipsis: true, fixed: 'left' },
{
title: '交车数量',
dataIndex: 'deliveryCount',
key: 'deliveryCount',
width: 100,
render: function(count, record) {
var content = vehiclePopoverContent(record.vehicles);
return React.createElement(Popover, { content: content, title: '交车车辆明细', trigger: 'click' },
React.createElement('span', { style: { color: '#1890ff', cursor: 'pointer', fontWeight: 500 } }, count)
);
}
},
{ title: '交车区域', dataIndex: 'deliveryRegion', key: 'deliveryRegion', width: 140 },
{ title: '交车地点', dataIndex: 'deliveryLocation', key: 'deliveryLocation', width: 200, ellipsis: true },
{ title: '预计交车日期', dataIndex: 'planDeliveryDisplay', key: 'planDeliveryDisplay', width: 180 },
{ title: '开始计费日期', dataIndex: 'billingStartDate', key: 'billingStartDate', width: 120 },
{ title: '创建人', dataIndex: 'creator', key: 'creator', width: 100 },
{ title: '创建时间', dataIndex: 'createdAt', key: 'createdAt', width: 120 },
{ title: '最后更新人', dataIndex: 'lastUpdater', key: 'lastUpdater', width: 100 },
{ title: '最后更新时间', dataIndex: 'lastUpdatedAt', key: 'lastUpdatedAt', width: 120 },
{
title: '操作',
key: 'action',
width: 80,
fixed: 'right',
render: function(_, record) {
return React.createElement(Button, { type: 'link', size: 'small', onClick: function() { message.info('请参照原型业务管理-交车任务页面'); } }, '查看');
}
}
];
var filterOption = function(input, option) {
var label = (option && option.label) ? String(option.label) : '';
return label.toLowerCase().indexOf((input || '').toLowerCase()) >= 0;
};
var filterLabelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
var filterItemStyle = { marginBottom: 12 };
var filterControlStyle = { width: '100%' };
var filterItems = [
React.createElement('div', { key: 'contractCode', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '合同编码'),
React.createElement(Select, {
placeholder: '请输入或选择合同编码',
style: filterControlStyle,
value: _contractCode[0],
onChange: function(v) { _contractCode[1](v); },
options: contractOptions,
showSearch: true,
allowClear: true,
filterOption: filterOption
})),
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); },
options: projectOptions,
showSearch: true,
allowClear: true,
filterOption: filterOption
})),
React.createElement('div', { key: 'customerName', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '客户名称'),
React.createElement(Select, {
placeholder: '请输入或选择客户名称',
style: filterControlStyle,
value: _customerName[0],
onChange: function(v) { _customerName[1](v); },
options: customerOptions,
showSearch: true,
allowClear: true,
filterOption: filterOption
})),
React.createElement('div', { key: 'planDate', style: filterItemStyle },
React.createElement('div', { style: filterLabelStyle }, '预计交车日期'),
React.createElement(RangePicker, {
style: filterControlStyle,
placeholder: ['请选择预计交车开始时间', '请选择预计交车结束时间'],
value: _planDateRange[0] && _planDateRange[0].length === 2 && window.dayjs ? [_planDateRange[0][0], _planDateRange[0][1]] : null,
onChange: function(dates) { _planDateRange[1](dates && dates.length === 2 ? dates : null); }
})),
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); },
options: creatorOptions,
showSearch: true,
allowClear: true,
filterOption: filterOption
}))
];
var filterCount = _filterExpanded[0] ? 5 : 3;
var filterNodes = [];
for (var i = 0; i < filterCount && i < filterItems.length; i++) {
filterNodes.push(filterItems[i]);
}
// 表格单元格一行显示、根据内容适应宽度
var cellNoWrap = function() { return { style: { whiteSpace: 'nowrap' } }; };
var ongoingColumnsWithNowrap = ongoingColumns.map(function(col) { return Object.assign({}, col, { onCell: cellNoWrap }); });
var completedColumnsWithNowrap = completedColumns.map(function(col) { return Object.assign({}, col, { onCell: cellNoWrap }); });
var layoutStyle = { padding: '16px 24px 48px', backgroundColor: '#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 reqSubStyle = { fontSize: 14, fontWeight: 500, marginLeft: 16, marginTop: 8, marginBottom: 4, 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)' };
var reqSubItemStyle = { fontSize: 13, marginLeft: 48, marginTop: 2, marginBottom: 2, lineHeight: 1.6, color: 'rgba(0,0,0,0.7)' };
var reqBlockStyle = { marginBottom: 8 };
var reqSpecContent = React.createElement('div', { style: { padding: '0 4px' } },
React.createElement('div', { style: reqTitleStyle }, '交车任务'),
React.createElement('div', { style: reqBlockStyle },
React.createElement('div', { style: reqSectionStyle }, '1.面包屑:'),
React.createElement('div', { style: reqSubStyle }, '1.1.业务管理-交车任务')
),
React.createElement('div', { style: reqBlockStyle },
React.createElement('div', { style: reqSectionStyle }, '2.筛选:'),
React.createElement('div', { style: reqItemStyle }, '支持通过合同编码、项目名称、客户名称、预计交车日期、创建人进行筛选,右侧为查询、重置按钮;'),
React.createElement('div', { style: reqItemStyle }, '2.1.合同编码:选择器,默认为所有合同;提示信息为:请输入或选择合同编码,支持从输入框输入内容进行模糊搜索,下拉显示结果;'),
React.createElement('div', { style: reqItemStyle }, '2.2.项目名称:选择器,默认为所有项目;提示信息为:请输入或选择项目名称,支持从输入框输入内容进行模糊搜索,下拉显示结果;'),
React.createElement('div', { style: reqItemStyle }, '2.3.客户名称:选择器,默认为所有客户;提示信息为:请输入或选择客户名称,支持从输入框输入内容进行模糊搜索,下拉显示结果;'),
React.createElement('div', { style: reqItemStyle }, '2.4.预计交车日期:日期选择器,默认提示信息为:请选择预计交车开始时间 请选择预计交车结束时间单输入框双日历支持时间段选择精确至天格式为YYYY-MM-DD - YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '2.5.创建人:选择器,默认为所有创建人;提示信息为:请输入或选择创建人,支持从输入框输入内容进行模糊搜索,下拉显示结果;'),
React.createElement('div', { style: reqItemStyle }, '2.6.查询:点击查询,根据单个或多个筛选条件(且)联动表格进行查询;'),
React.createElement('div', { style: reqItemStyle }, '2.7.重置:点击清空查询条件至默认')
),
React.createElement('div', { style: reqBlockStyle },
React.createElement('div', { style: reqSectionStyle }, '3.列表分为2个tab进行中、已完成右侧为新增'),
React.createElement('div', { style: reqSubStyle }, '3.1进行中:显示所有已新增成功,但未完成交车单提交的任务;列表展示以下内容:合同编码、项目名称、客户名称、交车数量、预计交车日期、开始计费日期、创建人、创建时间、最后更新人、最后更新时间、操作;'),
React.createElement('div', { style: reqItemStyle }, '3.1.1合同编码:显示对应合同编码;'),
React.createElement('div', { style: reqItemStyle }, '3.1.2.项目名称:显示对应项目名称;'),
React.createElement('div', { style: reqItemStyle }, '3.1.3.客户名称:显示对应客户名称;'),
React.createElement('div', { style: reqItemStyle }, '3.1.4.交车数量:显示交车数;'),
React.createElement('div', { style: reqItemStyle }, '3.1.5.交车区域:显示交车省-市;'),
React.createElement('div', { style: reqItemStyle }, '3.1.6.交车地点:显示交车详细地址;'),
React.createElement('div', { style: reqItemStyle }, '3.1.7.预计交车日期显示预计交车日期支持某天或某个时间段格式为YYYY-MM-DD或YYYY-MM-DD至YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '3.1.8.开始计费日期显示开始计费日期格式为YYYY-MM-DD在交车单完成电子签章后开始生效'),
React.createElement('div', { style: reqItemStyle }, '3.1.9.创建人:显示交车任务的创建人用户姓名;'),
React.createElement('div', { style: reqItemStyle }, '3.1.10.创建时间显示交车任务的创建时间格式为YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '3.1.11.最后更新人:显示交车任务的最后一次更新人用户姓名;'),
React.createElement('div', { style: reqItemStyle }, '3.1.12.最后更新时间显示交车任务的最后一次更新时间格式为YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '3.1.13.操作:支持查看、编辑、停用/启用;'),
React.createElement('div', { style: reqSubItemStyle }, '3.1.13.1.查看:跳转查看交车任务;'),
React.createElement('div', { style: reqSubItemStyle }, '3.1.13.2.编辑:跳转编辑交车任务;'),
React.createElement('div', { style: reqSubItemStyle }, '3.1.13.3.停用/启用:任务创建后为启用状态,此处为停用,点击停用后,变为启用。停用状态的交车任务不会推送给对应区域运维人员,重新启用时判断预计交车结束日期是否已经过期,如已过期则启用时需要在弹出卡片中重新选择预计交车日期;'),
React.createElement('div', { style: reqSubStyle }, '3.2.已完成:显示所有已新增成功并完成交车单提交的任务,列表展示以下内容:合同编码、项目名称、客户名称、交车数量、预计交车日期、开始计费日期、创建人、创建时间、最后更新人、最后更新时间、操作;'),
React.createElement('div', { style: reqItemStyle }, '3.2.1.合同编码:显示对应合同编码;'),
React.createElement('div', { style: reqItemStyle }, '3.2.2.项目名称:显示对应项目名称;'),
React.createElement('div', { style: reqItemStyle }, '3.2.3.客户名称:显示对应客户名称;'),
React.createElement('div', { style: reqItemStyle }, '3.2.4.交车数量:显示交车数,重点色显示,点击弹出气泡卡片,列表显示:车辆类型、品牌、型号、车牌号、实际交车日期、交车人;'),
React.createElement('div', { style: reqSubItemStyle }, '3.2.4.1.车辆类型:显示车辆类型;'),
React.createElement('div', { style: reqSubItemStyle }, '3.2.4.2.品牌:显示车辆品牌;'),
React.createElement('div', { style: reqSubItemStyle }, '3.2.4.3.型号:显示车辆型号;'),
React.createElement('div', { style: reqSubItemStyle }, '3.2.4.4.车牌号:显示交车车辆车牌号,如果该车还未交车则显示为-'),
React.createElement('div', { style: reqSubItemStyle }, '3.2.4.5.实际交车日期显示实际交车日期与列表中显示相同格式为YYYY-MM-DD如该车还未交车则显示为-'),
React.createElement('div', { style: reqSubItemStyle }, '3.2.4.6.交车人:显示实际交车人用户姓名,如该车还未还车则显示为-'),
React.createElement('div', { style: reqItemStyle }, '3.2.5.预计交车日期显示预计交车日期支持某天或某个时间段格式为YYYY-MM-DD或YYYY-MM-DD至YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '3.2.6.开始计费日期显示开始计费日期格式为YYYY-MM-DD在交车单完成电子签章后开始生效'),
React.createElement('div', { style: reqItemStyle }, '3.2.7.创建人:显示交车任务的创建人用户姓名;'),
React.createElement('div', { style: reqItemStyle }, '3.2.8.创建时间显示交车任务的创建时间格式为YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '3.2.9.最后更新人:显示交车任务的最后一次更新人用户姓名;'),
React.createElement('div', { style: reqItemStyle }, '3.2.10.最后更新时间显示交车任务的最后一次更新时间格式为YYYY-MM-DD'),
React.createElement('div', { style: reqItemStyle }, '3.2.11.操作:支持查看;')
),
React.createElement('div', { style: reqBlockStyle },
React.createElement('div', { style: reqSectionStyle }, '4.列表右下方为分页功能,支持单页显示条目选择;')
)
);
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: '交车任务' }
]
}),
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function() { _reqSpecOpen[1](true); } }, '查看需求说明')
),
React.createElement(Card, { style: { marginBottom: 16 } },
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', 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: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 } },
React.createElement(Tabs, {
activeKey: _activeTab[0],
onChange: function(k) { _activeTab[1](k); },
items: [
{ key: 'ongoing', label: '进行中' },
{ key: 'completed', label: '已完成' }
]
}),
React.createElement(Button, { type: 'primary', onClick: function() { message.info('请参照原型业务管理-交车任务-新增交车任务页面'); } }, '新增')
),
_activeTab[0] === 'ongoing'
? React.createElement(Table, {
rowKey: 'id',
columns: ongoingColumnsWithNowrap,
dataSource: filteredOngoing,
scroll: { x: 1860 },
size: 'small',
pagination: {
showSizeChanger: true,
showTotal: function(t) { return '共 ' + t + ' 条'; },
pageSizeOptions: ['10', '20', '50', '100']
}
})
: React.createElement(Table, {
rowKey: 'id',
columns: completedColumnsWithNowrap,
dataSource: filteredCompleted,
scroll: { x: 1860 },
size: 'small',
pagination: {
showSizeChanger: true,
showTotal: function(t) { return '共 ' + t + ' 条'; },
pageSizeOptions: ['10', '20', '50', '100']
}
})
),
React.createElement(Modal, {
title: '需求说明',
open: _reqSpecOpen[0],
onCancel: function() { _reqSpecOpen[1](false); },
width: 720,
footer: React.createElement(Button, { onClick: function() { _reqSpecOpen[1](false); } }, '关闭'),
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
}, reqSpecContent),
React.createElement(Modal, {
title: '预计交车日期已过期,请重新选择预计交车日期',
open: _rescheduleModalVisible[0],
onCancel: function() {
_rescheduleModalVisible[1](false);
_rescheduleTask[1](null);
_rescheduleDateRange[1](null);
},
onOk: handleRescheduleConfirm,
okText: '确定',
cancelText: '取消'
}, React.createElement('div', { style: { padding: '8px 0' } },
React.createElement('div', { style: { marginBottom: 8, color: '#666', fontSize: 13 } }, '支持选择单日或开始-结束时间段,单日时开始与结束选同一天即可。'),
React.createElement('span', { style: { marginRight: 8 } }, '预计交车日期:'),
React.createElement(RangePicker, {
placeholder: ['请选择开始日期', '请选择结束日期(单日请选同一天)'],
value: _rescheduleDateRange[0] && _rescheduleDateRange[0].length === 2 && window.dayjs ? [_rescheduleDateRange[0][0], _rescheduleDateRange[0][1]] : null,
onChange: function(dates) { _rescheduleDateRange[1](dates && dates.length === 2 ? dates : null); }
})
))
)
);
};