418 lines
20 KiB
JavaScript
418 lines
20 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
|
// ONEOS-web - 运维管理 - 车辆业务 - 新增故障
|
|
|
|
const Component = function () {
|
|
var useState = React.useState;
|
|
var useEffect = React.useEffect;
|
|
|
|
var antd = window.antd;
|
|
var Button = antd.Button;
|
|
var Input = antd.Input;
|
|
var Select = antd.Select;
|
|
var DatePicker = antd.DatePicker;
|
|
var Form = antd.Form;
|
|
var Row = antd.Row;
|
|
var Col = antd.Col;
|
|
var Breadcrumb = antd.Breadcrumb;
|
|
var Layout = antd.Layout;
|
|
var message = antd.message;
|
|
var Card = antd.Card;
|
|
var Upload = antd.Upload;
|
|
var Modal = antd.Modal;
|
|
|
|
var _form = Form.useForm();
|
|
var faultForm = _form[0];
|
|
|
|
var _specOpen = useState(false);
|
|
var specModalOpen = _specOpen[0];
|
|
var setSpecModalOpen = _specOpen[1];
|
|
|
|
var _formDirty = useState(false);
|
|
var formDirty = _formDirty[0];
|
|
var setFormDirty = _formDirty[1];
|
|
|
|
var faultLevelOptions = [
|
|
{ label: 'L1-特急', value: '特急' },
|
|
{ label: 'L2-紧急', value: '紧急' },
|
|
{ label: 'L3-一般', value: '一般' },
|
|
{ label: 'L4-提示', value: '提示' }
|
|
];
|
|
|
|
var faultTypeOptions = [
|
|
{ label: '底盘故障', value: '底盘故障' },
|
|
{ label: '三电故障', value: '三电故障' },
|
|
{ label: '整车系统', value: '整车系统' },
|
|
{ label: '燃料电池系统故障', value: '燃料电池系统故障' },
|
|
{ label: '供氢系统故障', value: '供氢系统故障' },
|
|
{ label: '空调系统故障', value: '空调系统故障' },
|
|
{ label: '冷机故障', value: '冷机故障' },
|
|
{ label: '其他故障', value: '其他故障' }
|
|
];
|
|
|
|
var faultSourceOptions = [
|
|
{ label: '客户报告', value: '客户报告' },
|
|
{ label: '定期保养', value: '定期保养' },
|
|
{ label: '周期性维护', value: '周期性维护' },
|
|
{ label: '预防性维护', value: '预防性维护' },
|
|
{ label: '整备', value: '整备' }
|
|
];
|
|
|
|
var resolveStatusOptions = [
|
|
{ label: '未解决', value: '未解决' },
|
|
{ label: '临时排故', value: '临时排故' },
|
|
{ label: '已解决', value: '已解决' }
|
|
];
|
|
|
|
/** 运营公司枚举：浙江羚牛、上海羚牛、广东羚牛 */
|
|
var plateOptions = [
|
|
{ label: '沪A12345', value: '沪A12345', brand: '一汽解放', model: 'J6P', company: '上海羚牛', vin: 'LNW1234567890ABCD' },
|
|
{ label: '浙B88888', value: '浙B88888', brand: '东风商用车', model: '天龙', company: '浙江羚牛', vin: 'LNW0987654321EFGH' },
|
|
{ label: '粤A00001', value: '粤A00001', brand: '福田欧曼', model: 'EST', company: '广东羚牛', vin: 'LNW1357924680IJKL' },
|
|
{ label: '沪D99999', value: '沪D99999', brand: '陕汽重卡', model: '德龙', company: '上海羚牛', vin: 'LNW2468013579MNOP' }
|
|
];
|
|
|
|
var PlusIcon = function() { return React.createElement('svg', { viewBox: '0 0 1024 1024', width: 14, height: 14, fill: 'currentColor' }, React.createElement('path', { d: 'M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z' }), React.createElement('path', { d: 'M192 474h672q8 0 8 8v60q0 8-8 8H192q-8 0-8-8v-60q0-8 8-8z' })); };
|
|
var FileTextIcon = function() { return React.createElement('svg', { viewBox: '0 0 1024 1024', width: 16, height: 16, fill: 'currentColor' }, React.createElement('path', { d: 'M854.6 288.7L639.4 73.4c-6-6-14.2-9.4-22.7-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216c0 22.1 17.9 40 40 40h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM702 458H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h382c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z' })); };
|
|
|
|
var DESC_PLACEHOLDER = '在何种状态下\n产生何种现象\n导致何种事故';
|
|
|
|
var goBackList = function () {
|
|
message.info('返回列表');
|
|
};
|
|
|
|
var requestExit = function () {
|
|
if (formDirty) {
|
|
Modal.confirm({
|
|
title: '确定要退出吗？',
|
|
content: '未保存的数据将丢失',
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
onOk: function () {
|
|
setFormDirty(false);
|
|
goBackList();
|
|
}
|
|
});
|
|
} else {
|
|
goBackList();
|
|
}
|
|
};
|
|
|
|
var openResultModal = function (title, okText, cancelText, onPrimary) {
|
|
Modal.success({
|
|
title: title,
|
|
content: title === '提交成功' ? '故障已提交并加入历史记录。' : '单据已保存在待处理，可继续编辑或稍后提交。',
|
|
okText: okText,
|
|
cancelText: cancelText,
|
|
okCancel: true,
|
|
centered: true,
|
|
onOk: function () {
|
|
if (onPrimary) onPrimary();
|
|
},
|
|
onCancel: function () {}
|
|
});
|
|
};
|
|
|
|
var handleSave = function () {
|
|
// 弱校验：不触发表单校验；落库时解决情况空值按「未解决」与列表一致
|
|
faultForm.getFieldsValue();
|
|
setFormDirty(false);
|
|
openResultModal('保存成功', '返回列表', '确定', goBackList);
|
|
};
|
|
|
|
var runSubmit = function () {
|
|
faultForm.validateFields(['plate', 'type', 'source', 'level', 'reportTime', 'desc']).then(function () {
|
|
var list = faultForm.getFieldValue('evidence') || [];
|
|
if (!list.length) {
|
|
message.error('请上传故障证据');
|
|
return;
|
|
}
|
|
setFormDirty(false);
|
|
openResultModal('提交成功', '返回列表', '确定', goBackList);
|
|
}).catch(function () {});
|
|
};
|
|
|
|
var handleSubmitClick = function () {
|
|
Modal.confirm({
|
|
title: '确认提交',
|
|
content: '故障提交后无法修改，如未完成所有步骤填写请先进行保存。点击确认加入历史记录',
|
|
okText: '确认',
|
|
cancelText: '取消',
|
|
centered: true,
|
|
onOk: function () {
|
|
runSubmit();
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(function () {
|
|
var fn = function (e) {
|
|
if (formDirty) {
|
|
e.preventDefault();
|
|
e.returnValue = '';
|
|
}
|
|
};
|
|
window.addEventListener('beforeunload', fn);
|
|
return function () { window.removeEventListener('beforeunload', fn); };
|
|
}, [formDirty]);
|
|
|
|
var specSection = function (title, lines) {
|
|
return React.createElement('div', { style: { marginBottom: 16 } },
|
|
React.createElement('div', { style: { fontWeight: 600, color: '#1d2129', marginBottom: 8, fontSize: 14 } }, title),
|
|
lines.map(function (text, i) {
|
|
return React.createElement('div', { key: i, style: { fontSize: 13, color: '#4e5969', lineHeight: 1.75 } }, text);
|
|
})
|
|
);
|
|
};
|
|
|
|
var renderSpecModal = function () {
|
|
return React.createElement(Modal, {
|
|
title: '故障信息表单页 — 需求说明',
|
|
open: specModalOpen,
|
|
onCancel: function () { setSpecModalOpen(false); },
|
|
footer: React.createElement(Button, { type: 'primary', onClick: function () { setSpecModalOpen(false); } }, '知道了'),
|
|
width: 720,
|
|
centered: true,
|
|
destroyOnClose: true
|
|
},
|
|
React.createElement('div', { style: { maxHeight: '70vh', overflowY: 'auto', paddingRight: 4 } },
|
|
specSection('3. 故障信息表单页', ['用于新增/编辑故障记录，保存到待处理或提交到历史记录。']),
|
|
specSection('3.1 车辆信息卡片（自动带出）', [
|
|
'3.1.1 车牌号：必填，下拉可搜索；',
|
|
'3.1.2 车辆品牌：禁用，随车牌自动反填；',
|
|
'3.1.3 车辆型号：禁用，随车牌自动反填；',
|
|
'3.1.4 车辆识别代码：禁用，随车牌自动反填；',
|
|
'3.1.5 运营公司：禁用，随车牌自动反填。',
|
|
'3.1.6 运营公司枚举统一为：浙江羚牛、上海羚牛、广东羚牛。'
|
|
]),
|
|
specSection('3.2 故障信息卡片', [
|
|
'3.2.1 故障类型：必填，下拉选择；',
|
|
'3.2.2 故障来源：必填，下拉选择，选项：客户报告、定期保养、周期性维护、预防性维护、整备；',
|
|
'3.2.3 故障等级：必填，下拉选择；',
|
|
'3.2.4 故障上报时间：必填，日期时间选择器；',
|
|
'3.2.5 解决情况：选填，下拉选择，选项：临时排故、已解决、未解决。'
|
|
]),
|
|
specSection('3.3 故障描述与证据卡片（顺序已调整）', [
|
|
'3.3.1 故障描述：必填，多行文本，默认引导语：在何种状态下 / 产生何种现象 / 导致何种事故；',
|
|
'3.3.2 故障证据：提交时必填，上传控件，支持照片/视频/录音；',
|
|
'提示文案：支持上传照片、视频、录音。'
|
|
]),
|
|
specSection('4. 底部操作按钮组', [
|
|
'控制保存与提交流程。',
|
|
'4.1 保存按钮：保存当前已填写内容，不做严格必填校验，单据留在待处理；',
|
|
'4.2 提交按钮：执行严格校验（含带*字段及故障证据）；',
|
|
'4.3 点击提交先弹确认提示：故障提交后无法修改… 按钮：取消 / 确认；',
|
|
'4.4 提交成功后提示提交成功，并提供确定/返回列表；',
|
|
'4.5 保存成功后提示保存成功，并提供确定/返回列表。'
|
|
]),
|
|
specSection('5. 联动与校验规则', [
|
|
'5.1 车牌联动：自动反填车辆品牌、车辆型号、车辆识别代码、运营公司；',
|
|
'5.2 保存校验：弱校验（允许未填必填项）；',
|
|
'5.3 提交校验：强校验（必填项+故障证据）；',
|
|
'5.4 解决情况默认值兜底：未填写时按未解决处理（列表展示与保存一致）。'
|
|
]),
|
|
specSection('6. 退出与返回拦截规则', [
|
|
'6.1 表单发生修改且未保存时，触发返回/关闭/刷新拦截；',
|
|
'6.2 弹窗文案：确定要退出吗？未保存的数据将丢失；',
|
|
'6.3 按钮：确定 / 取消；',
|
|
'6.4 已保存后再退出，不触发该拦截。'
|
|
])
|
|
)
|
|
);
|
|
};
|
|
|
|
return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#f2f3f5', fontFamily: 'Inter, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' } },
|
|
React.createElement('style', null, `
|
|
.arco-theme-overrides .ant-btn { border-radius: 4px; }
|
|
.arco-theme-overrides .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
|
|
.arco-theme-overrides .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
|
|
|
|
.arco-grouped-form-page { display: flex; flex-direction: column; min-height: 100vh; }
|
|
.arco-grouped-form-page-content { flex: 1; padding: 16px 20px 24px; }
|
|
.arco-grouped-form-page .ant-card { margin-bottom: 16px; border-radius: 4px; border: none; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
|
|
.arco-grouped-form-page .ant-card-head { border-bottom: none; padding: 20px 24px 0; min-height: auto; }
|
|
.arco-grouped-form-page .ant-card-head-title { font-size: 16px; font-weight: 500; color: #1d2129; padding: 0; }
|
|
.arco-grouped-form-page .ant-card-body { padding: 24px; }
|
|
.arco-grouped-form-page .ant-form-vertical .ant-form-item-label { padding-bottom: 8px; height: auto; line-height: 1.5715; }
|
|
.arco-grouped-form-page .ant-form-item { margin-bottom: 24px; }
|
|
|
|
.arco-grouped-form-page .ant-input,
|
|
.arco-grouped-form-page .ant-select-selector,
|
|
.arco-grouped-form-page .ant-picker,
|
|
.arco-grouped-form-page .ant-input-affix-wrapper { background-color: #f2f3f5; border: 1px solid #e5e6eb; border-radius: 2px; transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
|
|
.arco-grouped-form-page .ant-input:hover,
|
|
.arco-grouped-form-page .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
|
|
.arco-grouped-form-page .ant-picker:hover,
|
|
.arco-grouped-form-page .ant-input-affix-wrapper:hover { background-color: #f2f3f5; border-color: #165dff; }
|
|
.arco-grouped-form-page .ant-input:focus,
|
|
.arco-grouped-form-page .ant-input-focused,
|
|
.arco-grouped-form-page .ant-select-focused .ant-select-selector,
|
|
.arco-grouped-form-page .ant-picker-focused,
|
|
.arco-grouped-form-page .ant-input-affix-wrapper-focused { background-color: #fff; border: 1px solid #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; outline: 0; }
|
|
.arco-grouped-form-page .ant-input[disabled],
|
|
.arco-grouped-form-page .ant-select-disabled .ant-select-selector,
|
|
.arco-grouped-form-page .ant-picker-disabled { color: #86909c; background-color: #f2f3f5; border-color: #e5e6eb; cursor: not-allowed; }
|
|
.arco-grouped-form-page .ant-input-affix-wrapper[disabled] { background-color: #f2f3f5; border-color: #e5e6eb; cursor: not-allowed; }
|
|
.arco-grouped-form-page .ant-input-affix-wrapper > input.ant-input { background-color: transparent; }
|
|
.arco-grouped-form-page .ant-input-affix-wrapper > input.ant-input:focus { background-color: transparent; box-shadow: none !important; border: none !important; }
|
|
|
|
.arco-grouped-form-footer { background: #fff; padding: 16px 24px; border-top: 1px solid #e5e6eb; display: flex; justify-content: flex-end; align-items: center; gap: 12px; position: sticky; bottom: 0; z-index: 100; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
|
|
.arco-grouped-form-footer .ant-btn { border-radius: 5px; height: 32px; padding: 4px 16px; font-size: 14px; }
|
|
|
|
.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; white-space: nowrap; flex-shrink: 0; margin-bottom: 0; }
|
|
.arco-theme-overrides .ant-breadcrumb a { color: #4e5969; }
|
|
.arco-theme-overrides .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
|
|
.arco-theme-overrides .ant-form-item-label > label { color: #4e5969; white-space: nowrap; }
|
|
.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
|
|
`),
|
|
React.createElement('div', { className: 'arco-grouped-form-page' },
|
|
React.createElement('div', { className: 'arco-grouped-form-page-content' },
|
|
React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, flexWrap: 'nowrap', gap: 12 } },
|
|
React.createElement(Breadcrumb, {
|
|
separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
|
|
items: [
|
|
{ title: '首页' },
|
|
{ title: '运维管理' },
|
|
{ title: '车辆业务' },
|
|
{ title: React.createElement('a', { href: '#', onClick: function (e) { e.preventDefault(); requestExit(); } }, '故障管理') },
|
|
{ title: React.createElement('span', { style: { color: '#1d2129' } }, '新建故障单') }
|
|
]
|
|
}),
|
|
React.createElement(Button, {
|
|
type: 'link',
|
|
icon: React.createElement(FileTextIcon, null),
|
|
style: { display: 'flex', alignItems: 'center', gap: 4, padding: '0 4px', color: '#165dff', fontWeight: 500, flexShrink: 0 },
|
|
onClick: function () { setSpecModalOpen(true); }
|
|
}, '查看需求说明')
|
|
),
|
|
|
|
React.createElement(Form, {
|
|
form: faultForm,
|
|
layout: 'vertical',
|
|
onValuesChange: function () {
|
|
setFormDirty(true);
|
|
}
|
|
},
|
|
React.createElement(Card, { title: '车辆信息', bordered: false },
|
|
React.createElement(Row, { gutter: 24 },
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车牌号', name: 'plate', rules: [{ required: true, message: '请选择车牌号' }] },
|
|
React.createElement(Select, {
|
|
placeholder: '请选择车牌号（可搜索）',
|
|
options: plateOptions,
|
|
showSearch: true,
|
|
optionFilterProp: 'label',
|
|
onChange: function (val, option) {
|
|
if (option) {
|
|
faultForm.setFieldsValue({
|
|
brand: option.brand,
|
|
model: option.model,
|
|
company: option.company,
|
|
vin: option.vin
|
|
});
|
|
} else {
|
|
faultForm.setFieldsValue({ brand: undefined, model: undefined, company: undefined, vin: undefined });
|
|
}
|
|
}
|
|
})
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车辆品牌', name: 'brand' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车辆型号', name: 'model' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '车辆识别代码', name: 'vin' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '运营公司', name: 'company' },
|
|
React.createElement(Input, { placeholder: '自动带入', disabled: true, style: { backgroundColor: '#f2f3f5', color: '#86909c' } })
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Card, { title: '故障信息', bordered: false },
|
|
React.createElement(Row, { gutter: 24 },
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障类型', name: 'type', rules: [{ required: true, message: '请选择故障类型' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障类型', options: faultTypeOptions })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障来源', name: 'source', rules: [{ required: true, message: '请选择故障来源' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障来源', options: faultSourceOptions })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障等级', name: 'level', rules: [{ required: true, message: '请选择故障等级' }] },
|
|
React.createElement(Select, { placeholder: '请选择故障等级', options: faultLevelOptions })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '故障上报时间', name: 'reportTime', rules: [{ required: true, message: '请选择故障上报时间' }] },
|
|
React.createElement(DatePicker, { style: { width: '100%' }, placeholder: '请选择上报时间', showTime: true })
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 8 },
|
|
React.createElement(Form.Item, { label: '解决情况', name: 'status', extra: '选填；保存时未填按「未解决」处理' },
|
|
React.createElement(Select, { allowClear: true, placeholder: '请选择（可选）', options: resolveStatusOptions })
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Card, { title: '故障描述与证据', bordered: false },
|
|
React.createElement(Row, { gutter: 24 },
|
|
React.createElement(Col, { span: 24 },
|
|
React.createElement(Form.Item, { label: '故障描述', name: 'desc', rules: [{ required: true, message: '请填写故障描述' }] },
|
|
React.createElement(Input.TextArea, {
|
|
placeholder: DESC_PLACEHOLDER,
|
|
style: { minHeight: 104, height: 104, resize: 'none' }
|
|
})
|
|
)
|
|
),
|
|
React.createElement(Col, { span: 24 },
|
|
React.createElement(Form.Item, {
|
|
label: '故障证据',
|
|
name: 'evidence',
|
|
valuePropName: 'fileList',
|
|
getValueFromEvent: function (e) { return (e && e.fileList) ? e.fileList : []; }
|
|
},
|
|
React.createElement(Upload, {
|
|
listType: 'picture-card',
|
|
beforeUpload: function () { return false; },
|
|
multiple: true,
|
|
accept: 'image/*,video/*,audio/*'
|
|
},
|
|
React.createElement('div', null,
|
|
React.createElement(PlusIcon, null),
|
|
React.createElement('div', { style: { marginTop: 8 } }, '上传文件')
|
|
)
|
|
),
|
|
React.createElement('div', { style: { fontSize: 12, color: '#86909c', marginTop: 8 } }, '支持上传照片、视频、录音')
|
|
)
|
|
)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
React.createElement('div', { className: 'arco-grouped-form-footer' },
|
|
React.createElement(Button, { onClick: requestExit, style: { borderRadius: 5 } }, '取消'),
|
|
React.createElement(Button, { onClick: handleSave, style: { borderRadius: 5 } }, '保存'),
|
|
React.createElement(Button, { type: 'primary', onClick: handleSubmitClick, style: { borderRadius: 5 } }, '提交')
|
|
)
|
|
),
|
|
renderSpecModal()
|
|
);
|
|
};
|
|
|
|
if (typeof module !== 'undefined' && module.exports) module.exports = Component;
|