feat(web): 同步当前原型页与工具配置改动
统一提交当前工作区内的页面原型调整、新增运维相关页面以及本地工具配置目录变更,便于整体同步到远端环境继续联调与演示。 Made-with: Cursor
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
// 【重要】必须使用 const Component 作为组件变量名
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 新增
|
||||
// 运维管理 - 车辆业务 - 调拨管理 - 新增(数字化资产 ONEOS 运管平台)
|
||||
|
||||
const Component = function () {
|
||||
var useState = React.useState;
|
||||
@@ -9,14 +9,14 @@ const Component = function () {
|
||||
var antd = window.antd;
|
||||
var App = antd.App;
|
||||
var Breadcrumb = antd.Breadcrumb;
|
||||
var Card = antd.Card;
|
||||
var Button = antd.Button;
|
||||
var Input = antd.Input;
|
||||
var Select = antd.Select;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Card = antd.Card;
|
||||
var Cascader = antd.Cascader;
|
||||
var Table = antd.Table;
|
||||
var DatePicker = antd.DatePicker;
|
||||
var Input = antd.Input;
|
||||
var Modal = antd.Modal;
|
||||
var Select = antd.Select;
|
||||
var Table = antd.Table;
|
||||
var message = antd.message;
|
||||
|
||||
function filterOption(input, option) {
|
||||
@@ -24,13 +24,16 @@ const Component = function () {
|
||||
return String(label).toLowerCase().indexOf(String(input || '').toLowerCase()) >= 0;
|
||||
}
|
||||
|
||||
var layoutStyle = { padding: '16px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var layoutStyle = { padding: '16px 24px 88px 24px', background: '#f5f5f5', minHeight: '100vh' };
|
||||
var labelStyle = { marginBottom: 6, fontSize: 14, color: 'rgba(0,0,0,0.65)' };
|
||||
var formItemStyle = { marginBottom: 12 };
|
||||
var controlStyle = { width: '100%' };
|
||||
var reqStarStyle = { color: '#ff4d4f', marginRight: 4 };
|
||||
var reqStar = React.createElement('span', { style: reqStarStyle }, '*');
|
||||
|
||||
/** 车牌可选车辆运营状态(需求:仅「可运营」) */
|
||||
var PLATE_ELIGIBLE_STATUS = '可运营';
|
||||
|
||||
var regionOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: 'zhejiang', label: '浙江省', children: [{ value: 'hangzhou', label: '杭州市' }, { value: 'ningbo', label: '宁波市' }, { value: 'jiaxing', label: '嘉兴市' }] },
|
||||
@@ -39,48 +42,51 @@ const Component = function () {
|
||||
];
|
||||
}, []);
|
||||
|
||||
// 用户表(原型:全量用户)
|
||||
var userOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '张明', label: '张明' },
|
||||
{ value: '王芳', label: '王芳' },
|
||||
{ value: '李华', label: '李华' },
|
||||
{ value: '赵强', label: '赵强' },
|
||||
{ value: '陈静', label: '陈静' }
|
||||
];
|
||||
var brandOptions = useMemo(function () {
|
||||
return ['东风', '比亚迪', '小鹏', '蔚来', '福田', '飞驰', '宇通'].map(function (b) {
|
||||
return { value: b, label: b };
|
||||
});
|
||||
}, []);
|
||||
|
||||
var methodOptions = useMemo(function () {
|
||||
return [
|
||||
{ value: '第三方运输', label: '第三方运输' },
|
||||
{ value: '司机驾驶', label: '司机驾驶' }
|
||||
];
|
||||
var modelOptionsByBrand = useMemo(function () {
|
||||
return {
|
||||
东风: ['DFH1180', 'DFH5160'],
|
||||
比亚迪: ['汉', '唐'],
|
||||
小鹏: ['P7', 'G9'],
|
||||
蔚来: ['ET5', 'ES8'],
|
||||
福田: ['BJ1180'],
|
||||
飞驰: ['FSQ4250'],
|
||||
宇通: ['ZKH4250']
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 车辆表(用于车牌选择与反写)
|
||||
/** 车辆主数据(原型):仅运营状态为「可运营」的车牌出现在车牌下拉里 */
|
||||
var vehicleDb = useMemo(function () {
|
||||
return [
|
||||
{ plateNo: '粤A12345', vehicleType: '厢式货车', brand: '东风', model: 'DFH1180', departParking: '天河智慧停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '粤B11111', vehicleType: '轿车', brand: '比亚迪', model: '汉', departParking: '南山科技园停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙A11111', vehicleType: 'SUV', brand: '小鹏', model: 'P7', departParking: '西湖景区停车场', h2Unit: '%' },
|
||||
{ plateNo: '浙B22222', vehicleType: '轿车', brand: '蔚来', model: 'ET5', departParking: '宁波江北停车场', h2Unit: 'MPa' },
|
||||
{ plateNo: '沪A30003', vehicleType: '厢式货车', brand: '福田', model: 'BJ1180', departParking: '张江园区停车场', h2Unit: 'MPa' }
|
||||
{ plateNo: '粤A12345', status: '可运营', brand: '东风', model: 'DFH1180' },
|
||||
{ plateNo: '粤B11111', status: '可运营', brand: '比亚迪', model: '汉' },
|
||||
{ plateNo: '浙A11111', status: '可运营', brand: '小鹏', model: 'P7' },
|
||||
{ plateNo: '浙B22222', status: '可运营', brand: '蔚来', model: 'ET5' },
|
||||
{ plateNo: '沪A30003', status: '可运营', brand: '福田', model: 'BJ1180' },
|
||||
{ plateNo: '粤C99999', status: '维修中', brand: '东风', model: 'DFH1180' }
|
||||
];
|
||||
}, []);
|
||||
|
||||
var plateOptions = useMemo(function () {
|
||||
return vehicleDb.map(function (v) { return { value: v.plateNo, label: v.plateNo }; });
|
||||
var plateOptionsEligible = useMemo(function () {
|
||||
return vehicleDb
|
||||
.filter(function (v) {
|
||||
return v.status === PLATE_ELIGIBLE_STATUS;
|
||||
})
|
||||
.map(function (v) {
|
||||
return { value: v.plateNo, label: v.plateNo };
|
||||
});
|
||||
}, [vehicleDb]);
|
||||
|
||||
var formState = useState({
|
||||
transferDate: null,
|
||||
departRegion: undefined,
|
||||
receiveRegion: undefined,
|
||||
receivePerson: undefined,
|
||||
method: undefined,
|
||||
reason: '',
|
||||
carrierName: '',
|
||||
carrierPhone: ''
|
||||
reason: ''
|
||||
});
|
||||
var form = formState[0];
|
||||
var setForm = formState[1];
|
||||
@@ -95,70 +101,43 @@ const Component = function () {
|
||||
|
||||
var requirementDocContent = [
|
||||
'一个「数字化资产ONEOS运管平台」中的「调拨管理」「新增」模块',
|
||||
'#面包屑:运维管理-车辆业务-调拨管理-新增',
|
||||
'页面采用多个卡片的方式进行展示',
|
||||
'',
|
||||
'1.调拨情况:',
|
||||
'1.1.调拨日期:必填项,日期选择器,精确至天,格式为:YYYY-MM-DD;',
|
||||
'1.1.调拨日期:必填项,日期选择器,精确至分钟,格式为:YYYY-MM-DD HH:mm;',
|
||||
'1.2.出发区域:必填项,地区选择器,支持省-市2级;',
|
||||
'1.3.接收区域:必填项,地区选择器,支持省-市2级;',
|
||||
'1.4.接收人:必填项,选择器,支持输入框模糊搜索下拉匹配对应选项,接收人取自用户表所有用户;',
|
||||
'1.5.调拨方式:必填项,选择器,默认提示:请选择调拨方式,选项为:第三方运输、司机驾驶;',
|
||||
'1.6.调拨原因:必填项,文本域,支持用户自定义输入;',
|
||||
'1.7.运输方名称:必填项,输入框,默认提示:请输入运输方名称/司机姓名;',
|
||||
'1.8.运输方联系方式:必填项,输入框,默认提示:请输入运输方/司机联系方式;',
|
||||
'1.4.调拨原因:必填项,文本域,支持用户自定义输入;',
|
||||
'',
|
||||
'2.调拨车辆清单;',
|
||||
'#以列表方式展示:',
|
||||
'2.1.车牌号:必填项,选择器,支持输入框模糊搜索下拉匹配对应选项;',
|
||||
'2.2.车辆类型:根据所选车辆类型自动反写,默认提示为请先选择车辆;',
|
||||
'2.3.品牌:根据所选车辆品牌自动反写,默认提示为请先选择车辆;',
|
||||
'2.4.型号:根据所选车辆型号自动反写,默认提示为请先选择车辆;',
|
||||
'2.5.出发停车场:根据所选车辆出发时停车场自动反写,默认提示为请先选择车辆;',
|
||||
'2.6.出发里程:必填项,输入框,精确至2位小数,后缀为km;',
|
||||
'2.7.出发氢量:必填项,输入框,精确至2位小数,后缀为%或MPa,根据所选车辆型号中获取;',
|
||||
'2.8.出发电量:必填项,输入框,精确至2位小数,后缀为kWh;',
|
||||
'2.9.操作:删除',
|
||||
'2.10.底部为新增一行,铺满整行;',
|
||||
'需要至少提交一辆车才能完成调拨,否则提交审核时提示:请选择调拨车辆;'
|
||||
'#以表格方式展示:',
|
||||
'2.1.品牌:必填,选择器;',
|
||||
'2.2.型号:必填,选择器;',
|
||||
'2.3.车牌号:选择器,只能选择运营状态为:可运营的车辆;',
|
||||
'2.4.操作:删除;',
|
||||
'2.5.表格下方为新增一行,铺满整行;',
|
||||
'需要至少提交一辆车才能完成调拨,否则提交审核时提示:请选择调拨车辆;',
|
||||
'',
|
||||
'3.底部按钮为提交审核、保存、取消;',
|
||||
'3.1.提交审核:点击提交审核校验必填项',
|
||||
'3.2.保存:不校验必填项,只保存已填数据并保存在列表页;'
|
||||
].join('\n');
|
||||
|
||||
var rowIdRef = React.useRef(2);
|
||||
var vehiclesState = useState([
|
||||
{
|
||||
id: 1,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
brand: undefined,
|
||||
model: undefined,
|
||||
plateNo: undefined
|
||||
}
|
||||
]);
|
||||
var vehicles = vehiclesState[0];
|
||||
var setVehicles = vehiclesState[1];
|
||||
|
||||
function toFixed2Input(v) {
|
||||
var s = String(v === null || v === undefined ? '' : v);
|
||||
// 仅做简单清洗:保留数字与小数点
|
||||
s = s.replace(/[^\d.]/g, '');
|
||||
// 只保留第一个小数点
|
||||
var firstDot = s.indexOf('.');
|
||||
if (firstDot >= 0) {
|
||||
s = s.slice(0, firstDot + 1) + s.slice(firstDot + 1).replace(/\./g, '');
|
||||
}
|
||||
// 最多两位小数(输入态不强制补0)
|
||||
if (firstDot >= 0) {
|
||||
var a = s.split('.');
|
||||
s = a[0] + '.' + (a[1] || '').slice(0, 2);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
var updateForm = useCallback(function (patch) {
|
||||
setForm(function (p) { return Object.assign({}, p, patch); });
|
||||
setForm(function (p) {
|
||||
return Object.assign({}, p, patch);
|
||||
});
|
||||
}, []);
|
||||
|
||||
var updateRow = useCallback(function (index, patch) {
|
||||
@@ -170,32 +149,34 @@ const Component = function () {
|
||||
});
|
||||
}, []);
|
||||
|
||||
var handlePlateChange = useCallback(function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) { return x.plateNo === plateNo; });
|
||||
updateRow(index, {
|
||||
plateNo: plateNo,
|
||||
vehicleType: v ? v.vehicleType : '',
|
||||
brand: v ? v.brand : '',
|
||||
model: v ? v.model : '',
|
||||
departParking: v ? v.departParking : '',
|
||||
h2Unit: v ? v.h2Unit : ''
|
||||
});
|
||||
}, [vehicleDb, updateRow]);
|
||||
var handlePlateChange = useCallback(
|
||||
function (index, plateNo) {
|
||||
var v = vehicleDb.find(function (x) {
|
||||
return x.plateNo === plateNo;
|
||||
});
|
||||
if (v && v.status === PLATE_ELIGIBLE_STATUS) {
|
||||
updateRow(index, {
|
||||
plateNo: plateNo,
|
||||
brand: v.brand,
|
||||
model: v.model
|
||||
});
|
||||
} else {
|
||||
updateRow(index, { plateNo: plateNo });
|
||||
}
|
||||
},
|
||||
[vehicleDb, updateRow]
|
||||
);
|
||||
|
||||
var addRow = useCallback(function () {
|
||||
setVehicles(function (prev) {
|
||||
return prev.concat([{
|
||||
id: rowIdRef.current++,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
}]);
|
||||
return prev.concat([
|
||||
{
|
||||
id: rowIdRef.current++,
|
||||
brand: undefined,
|
||||
model: undefined,
|
||||
plateNo: undefined
|
||||
}
|
||||
]);
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -204,54 +185,48 @@ const Component = function () {
|
||||
var list = prev.slice();
|
||||
list.splice(index, 1);
|
||||
if (list.length === 0) {
|
||||
return [{
|
||||
id: rowIdRef.current++,
|
||||
plateNo: undefined,
|
||||
vehicleType: '',
|
||||
brand: '',
|
||||
model: '',
|
||||
departParking: '',
|
||||
departMileageKm: '',
|
||||
departHydrogen: '',
|
||||
h2Unit: '',
|
||||
departElectricKwh: ''
|
||||
}];
|
||||
return [
|
||||
{
|
||||
id: rowIdRef.current++,
|
||||
brand: undefined,
|
||||
model: undefined,
|
||||
plateNo: undefined
|
||||
}
|
||||
];
|
||||
}
|
||||
return list;
|
||||
});
|
||||
}, []);
|
||||
|
||||
function validate() {
|
||||
function hasValidVehicle() {
|
||||
return (vehicles || []).some(function (r) {
|
||||
return r && r.brand && r.model;
|
||||
});
|
||||
}
|
||||
|
||||
function runValidate() {
|
||||
var e = {};
|
||||
if (!form.transferDate) e.transferDate = '请选择调拨日期';
|
||||
if (!form.departRegion || form.departRegion.length < 2) e.departRegion = '请选择出发区域';
|
||||
if (!form.receiveRegion || form.receiveRegion.length < 2) e.receiveRegion = '请选择接收区域';
|
||||
if (!form.receivePerson) e.receivePerson = '请选择接收人';
|
||||
if (!form.method) e.method = '请选择调拨方式';
|
||||
if (!String(form.reason || '').trim()) e.reason = '请输入调拨原因';
|
||||
if (!String(form.carrierName || '').trim()) e.carrierName = '请输入运输方名称/司机姓名';
|
||||
if (!String(form.carrierPhone || '').trim()) e.carrierPhone = '请输入运输方/司机联系方式';
|
||||
|
||||
var effectiveRows = (vehicles || []).filter(function (r) { return r && String(r.plateNo || '').trim(); });
|
||||
if (effectiveRows.length === 0) e.vehicleList = '请选择调拨车辆';
|
||||
if (!hasValidVehicle()) e.vehicleList = '请选择调拨车辆';
|
||||
|
||||
for (var i = 0; i < (vehicles || []).length; i++) {
|
||||
var r = vehicles[i] || {};
|
||||
if (!String(r.plateNo || '').trim()) continue;
|
||||
if (!String(r.departMileageKm || '').trim()) e['row_' + i + '_departMileageKm'] = '请输入出发里程';
|
||||
if (!String(r.departHydrogen || '').trim()) e['row_' + i + '_departHydrogen'] = '请输入出发氢量';
|
||||
if (!String(r.departElectricKwh || '').trim()) e['row_' + i + '_departElectricKwh'] = '请输入出发电量';
|
||||
if (!r.brand && !r.model && !r.plateNo) continue;
|
||||
if (!r.brand) e['row_' + i + '_brand'] = '请选择品牌';
|
||||
if (!r.model) e['row_' + i + '_model'] = '请选择型号';
|
||||
}
|
||||
|
||||
setErrors(e);
|
||||
return Object.keys(e).length === 0;
|
||||
return { ok: Object.keys(e).length === 0, err: e };
|
||||
}
|
||||
|
||||
var handleSubmitAudit = useCallback(function () {
|
||||
if (!validate()) {
|
||||
if (errors && errors.vehicleList) message.error(errors.vehicleList);
|
||||
else if (!form.transferDate) message.error('请完善必填项后再提交');
|
||||
else message.error('请完善必填项后再提交');
|
||||
var result = runValidate();
|
||||
if (!result.ok) {
|
||||
if (result.err && result.err.vehicleList) message.error(result.err.vehicleList);
|
||||
else message.error('请完善必填项');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
@@ -263,10 +238,10 @@ const Component = function () {
|
||||
message.success('已提交审核(原型)');
|
||||
}
|
||||
});
|
||||
}, [form, errors]);
|
||||
}, [form, vehicles]);
|
||||
|
||||
var handleSave = useCallback(function () {
|
||||
message.info('已保存(原型,不做校验)');
|
||||
message.success('已保存至列表页(原型:不校验必填项,仅保存当前已填数据)');
|
||||
}, []);
|
||||
|
||||
var handleCancel = useCallback(function () {
|
||||
@@ -281,240 +256,202 @@ const Component = function () {
|
||||
});
|
||||
}, []);
|
||||
|
||||
var vehicleColumns = useMemo(function () {
|
||||
return [
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '车牌号'),
|
||||
key: 'plateNo',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请输入或选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) { handlePlateChange(index, v); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
var vehicleColumns = useMemo(
|
||||
function () {
|
||||
return [
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '品牌'),
|
||||
key: 'brand',
|
||||
width: 160,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: r.brand,
|
||||
onChange: function (v) {
|
||||
updateRow(index, { brand: v, model: undefined, plateNo: undefined });
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: brandOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_brand'] || errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '型号'),
|
||||
key: 'model',
|
||||
width: 180,
|
||||
render: function (_, r, index) {
|
||||
var ms = (r.brand && modelOptionsByBrand[r.brand]) || [];
|
||||
var opts = ms.map(function (m) {
|
||||
return { value: m, label: m };
|
||||
});
|
||||
return React.createElement(Select, {
|
||||
placeholder: r.brand ? '请选择型号' : '请先选择品牌',
|
||||
style: { width: '100%' },
|
||||
value: r.model,
|
||||
disabled: !r.brand,
|
||||
onChange: function (v) {
|
||||
updateRow(index, { model: v, plateNo: undefined });
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: opts,
|
||||
filterOption: filterOption,
|
||||
status: errors['row_' + index + '_model'] || errors.vehicleList ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车牌号',
|
||||
key: 'plateNo',
|
||||
width: 240,
|
||||
render: function (_, r, index) {
|
||||
return React.createElement(Select, {
|
||||
placeholder: '请选择车牌号',
|
||||
style: { width: '100%' },
|
||||
value: r.plateNo,
|
||||
onChange: function (v) {
|
||||
handlePlateChange(index, v);
|
||||
},
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: plateOptionsEligible,
|
||||
filterOption: filterOption
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
render: function (_, __, index) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '车辆类型',
|
||||
key: 'vehicleType',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.vehicleType ? r.vehicleType : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '品牌',
|
||||
key: 'brand',
|
||||
width: 100,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.brand ? r.brand : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '型号',
|
||||
key: 'model',
|
||||
width: 120,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.model ? r.model : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '出发停车场',
|
||||
key: 'departParking',
|
||||
width: 160,
|
||||
render: function (_, r) {
|
||||
return React.createElement(Input, { value: r.departParking ? r.departParking : '请先选择车辆', disabled: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发里程'),
|
||||
key: 'departMileageKm',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departMileageKm';
|
||||
return React.createElement(Input, {
|
||||
value: r.departMileageKm,
|
||||
onChange: function (e) { updateRow(index, { departMileageKm: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'km',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发氢量'),
|
||||
key: 'departHydrogen',
|
||||
width: 140,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departHydrogen';
|
||||
var unit = r.h2Unit || '%/MPa';
|
||||
return React.createElement(Input, {
|
||||
value: r.departHydrogen,
|
||||
onChange: function (e) { updateRow(index, { departHydrogen: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: unit,
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: React.createElement('span', null, reqStar, '出发电量'),
|
||||
key: 'departElectricKwh',
|
||||
width: 150,
|
||||
render: function (_, r, index) {
|
||||
var k = 'row_' + index + '_departElectricKwh';
|
||||
return React.createElement(Input, {
|
||||
value: r.departElectricKwh,
|
||||
onChange: function (e) { updateRow(index, { departElectricKwh: toFixed2Input(e.target.value) }); },
|
||||
placeholder: '0.00',
|
||||
addonAfter: 'kWh',
|
||||
status: errors[k] ? 'error' : undefined
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
fixed: 'right',
|
||||
render: function (_, __, index) {
|
||||
return React.createElement(Button, { type: 'link', danger: true, size: 'small', onClick: function () { removeRow(index); } }, '删除');
|
||||
}
|
||||
}
|
||||
];
|
||||
}, [plateOptions, errors, handlePlateChange, updateRow, removeRow]);
|
||||
];
|
||||
},
|
||||
[brandOptions, modelOptionsByBrand, plateOptionsEligible, errors, updateRow, handlePlateChange, removeRow]
|
||||
);
|
||||
|
||||
return React.createElement(App, null,
|
||||
React.createElement('div', { style: layoutStyle },
|
||||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 } },
|
||||
React.createElement(Breadcrumb, { items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '调拨管理' }, { title: '新增' }] }),
|
||||
return React.createElement(
|
||||
App,
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: layoutStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: 16,
|
||||
flexWrap: 'wrap',
|
||||
gap: 8
|
||||
}
|
||||
},
|
||||
React.createElement(Breadcrumb, {
|
||||
items: [{ title: '运维管理' }, { title: '车辆业务' }, { title: '调拨管理' }, { title: '新增' }]
|
||||
}),
|
||||
React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function () { setRequirementModalOpen(true); } }, '查看需求说明')
|
||||
),
|
||||
|
||||
React.createElement(Modal, {
|
||||
title: '需求说明',
|
||||
open: requirementModalOpen,
|
||||
onCancel: function () { setRequirementModalOpen(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
}, React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.6, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)),
|
||||
React.createElement(
|
||||
Modal,
|
||||
{
|
||||
title: '需求说明',
|
||||
open: requirementModalOpen,
|
||||
onCancel: function () { setRequirementModalOpen(false); },
|
||||
width: 720,
|
||||
footer: React.createElement(Button, { onClick: function () { setRequirementModalOpen(false); } }, '关闭'),
|
||||
bodyStyle: { maxHeight: '70vh', overflow: 'auto' }
|
||||
},
|
||||
React.createElement('div', { style: { whiteSpace: 'pre-wrap', fontSize: 13, lineHeight: 1.65, color: 'rgba(0,0,0,0.85)' } }, requirementDocContent)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '调拨情况', style: { marginBottom: 16 } },
|
||||
React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement(
|
||||
Card,
|
||||
{ title: '调拨情况', style: { marginBottom: 16 } },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px 24px', alignItems: 'start' } },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨日期'),
|
||||
React.createElement(DatePicker, {
|
||||
style: controlStyle,
|
||||
format: 'YYYY-MM-DD',
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
placeholder: '请选择调拨日期',
|
||||
value: form.transferDate,
|
||||
onChange: function (v) { updateForm({ transferDate: v }); },
|
||||
onChange: function (v) {
|
||||
updateForm({ transferDate: v });
|
||||
},
|
||||
status: errors.transferDate ? 'error' : undefined
|
||||
}),
|
||||
errors.transferDate ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.transferDate) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '出发区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择出发区域',
|
||||
placeholder: '请选择省 / 市',
|
||||
options: regionOptions,
|
||||
value: form.departRegion,
|
||||
onChange: function (v) { updateForm({ departRegion: v }); },
|
||||
onChange: function (v) {
|
||||
updateForm({ departRegion: v });
|
||||
},
|
||||
allowClear: true,
|
||||
status: errors.departRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.departRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.departRegion) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收区域'),
|
||||
React.createElement(Cascader, {
|
||||
style: controlStyle,
|
||||
placeholder: '请选择接收区域',
|
||||
placeholder: '请选择省 / 市',
|
||||
options: regionOptions,
|
||||
value: form.receiveRegion,
|
||||
onChange: function (v) { updateForm({ receiveRegion: v }); },
|
||||
onChange: function (v) {
|
||||
updateForm({ receiveRegion: v });
|
||||
},
|
||||
allowClear: true,
|
||||
status: errors.receiveRegion ? 'error' : undefined
|
||||
}),
|
||||
errors.receiveRegion ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receiveRegion) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '接收人'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请输入或选择接收人',
|
||||
style: controlStyle,
|
||||
value: form.receivePerson,
|
||||
onChange: function (v) { updateForm({ receivePerson: v }); },
|
||||
allowClear: true,
|
||||
showSearch: true,
|
||||
options: userOptions,
|
||||
filterOption: filterOption,
|
||||
status: errors.receivePerson ? 'error' : undefined
|
||||
}),
|
||||
errors.receivePerson ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.receivePerson) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨方式'),
|
||||
React.createElement(Select, {
|
||||
placeholder: '请选择调拨方式',
|
||||
style: controlStyle,
|
||||
value: form.method,
|
||||
onChange: function (v) { updateForm({ method: v }); },
|
||||
allowClear: true,
|
||||
options: methodOptions,
|
||||
status: errors.method ? 'error' : undefined
|
||||
}),
|
||||
errors.method ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.method) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle }),
|
||||
|
||||
React.createElement('div', { style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: Object.assign({}, formItemStyle, { gridColumn: 'span 3' }) },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '调拨原因'),
|
||||
React.createElement(Input.TextArea, {
|
||||
placeholder: '请输入调拨原因',
|
||||
value: form.reason,
|
||||
onChange: function (e) { updateForm({ reason: e.target.value }); },
|
||||
onChange: function (e) {
|
||||
updateForm({ reason: e.target.value });
|
||||
},
|
||||
autoSize: { minRows: 3, maxRows: 6 },
|
||||
status: errors.reason ? 'error' : undefined
|
||||
}),
|
||||
errors.reason ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.reason) : null
|
||||
),
|
||||
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方名称'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方名称/司机姓名',
|
||||
value: form.carrierName,
|
||||
onChange: function (e) { updateForm({ carrierName: e.target.value }); },
|
||||
status: errors.carrierName ? 'error' : undefined
|
||||
}),
|
||||
errors.carrierName ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierName) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle },
|
||||
React.createElement('div', { style: labelStyle }, reqStar, '运输方联系方式'),
|
||||
React.createElement(Input, {
|
||||
placeholder: '请输入运输方/司机联系方式',
|
||||
value: form.carrierPhone,
|
||||
onChange: function (e) { updateForm({ carrierPhone: e.target.value }); },
|
||||
status: errors.carrierPhone ? 'error' : undefined
|
||||
}),
|
||||
errors.carrierPhone ? React.createElement('div', { style: { marginTop: 4, color: '#ff4d4f', fontSize: 12 } }, errors.carrierPhone) : null
|
||||
),
|
||||
React.createElement('div', { style: formItemStyle })
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
React.createElement(Card, { title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
React.createElement(
|
||||
Card,
|
||||
{ title: '调拨车辆清单', style: { marginBottom: 16 } },
|
||||
errors.vehicleList ? React.createElement('div', { style: { marginBottom: 12, color: '#ff4d4f', fontSize: 12 } }, errors.vehicleList) : null,
|
||||
React.createElement(Table, {
|
||||
rowKey: 'id',
|
||||
@@ -522,26 +459,28 @@ const Component = function () {
|
||||
dataSource: vehicles,
|
||||
size: 'small',
|
||||
pagination: false,
|
||||
scroll: { x: 1100 }
|
||||
scroll: { x: 720 }
|
||||
}),
|
||||
React.createElement(Button, { type: 'dashed', style: { marginTop: 12, width: '100%' }, onClick: addRow }, '新增一行')
|
||||
),
|
||||
|
||||
React.createElement('div', { style: { height: 56 } }),
|
||||
React.createElement('div', {
|
||||
style: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
padding: '12px 24px',
|
||||
background: '#fff',
|
||||
borderTop: '1px solid #f0f0f0',
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
zIndex: 10
|
||||
}
|
||||
},
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
style: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
padding: '12px 24px',
|
||||
background: '#fff',
|
||||
borderTop: '1px solid #f0f0f0',
|
||||
display: 'flex',
|
||||
gap: 8,
|
||||
zIndex: 10
|
||||
}
|
||||
},
|
||||
React.createElement(Button, { type: 'primary', onClick: handleSubmitAudit }, '提交审核'),
|
||||
React.createElement(Button, { onClick: handleSave }, '保存'),
|
||||
React.createElement(Button, { onClick: handleCancel }, '取消')
|
||||
@@ -549,4 +488,3 @@ const Component = function () {
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user