a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
1034 lines
42 KiB
JavaScript
1034 lines
42 KiB
JavaScript
// 【重要】必须使用 const Component 作为组件变量名
|
||
// ONEOS-web - CRM 维修单管理（列表 / 新增 / 条件操作，对齐需求脑图）
|
||
|
||
function buildSampleMaintenanceRows() {
|
||
var plates = [
|
||
'沪A·D12345',
|
||
'苏E·F99887',
|
||
'浙A·H55660',
|
||
'粤B·K33210',
|
||
'京C·N88771',
|
||
'川A·L55602',
|
||
'渝D·P90123',
|
||
'津A·Q77889',
|
||
'鲁B·R33445',
|
||
'豫A·S66778',
|
||
'鄂A·T11223',
|
||
'湘A·U44556',
|
||
'闽D·V88990',
|
||
'陕A·W22334',
|
||
'辽A·X55667',
|
||
'吉A·Y88901',
|
||
'黑A·Z11234',
|
||
'云A·A99887',
|
||
'贵A·B44556',
|
||
'桂A·C77889'
|
||
];
|
||
var stations = [
|
||
'羚牛浦东维修中心',
|
||
'苏州园区快修站',
|
||
'杭州滨江服务站',
|
||
'深圳南山维修站',
|
||
'北京市朝阳区羚牛氢能示范维修中心（亦庄仓配一体化超长名称用于省略号展示）',
|
||
'成都高新南区快修点',
|
||
'重庆两江新区服务站',
|
||
'天津港保税区维修站',
|
||
'青岛胶州湾北岸羚牛合作维修站（冷链车队定点维保单位）',
|
||
'郑州航空港区服务中心',
|
||
'武汉东湖新技术开发区羚牛授权服务站',
|
||
'长沙岳麓山大学城轻型维保点',
|
||
'厦门湖里区港口大道综合维修中心',
|
||
'西安高新区丈八四路羚牛旗舰店',
|
||
'沈阳铁西区装备制造产业带维修站',
|
||
'长春汽车经济技术开发区羚牛服务站',
|
||
'哈尔滨松北区智慧园区快修站',
|
||
'昆明官渡区物流园维修中心',
|
||
'贵阳观山湖区羚牛城市服务站',
|
||
'南宁青秀区东盟商务区综合维修中心（超长名称测试省略）'
|
||
];
|
||
var stationAddresses = [
|
||
'上海市浦东新区科苑路',
|
||
'江苏省苏州市工业园区星海街',
|
||
'浙江省杭州市滨江区网商路',
|
||
'广东省深圳市南山区科技南十二路',
|
||
'北京市朝阳区亦庄经济技术开发区荣华南路',
|
||
'四川省成都市高新区天府大道',
|
||
'重庆市两江新区金渝大道',
|
||
'天津市滨海新区保税区海滨九路',
|
||
'山东省青岛市胶州市湾北路',
|
||
'河南省郑州市航空港区迎宾大道',
|
||
'湖北省武汉市东湖高新区光谷大道',
|
||
'湖南省长沙市岳麓区麓山南路',
|
||
'福建省厦门市湖里区港中路',
|
||
'陕西省西安市高新区丈八四路',
|
||
'辽宁省沈阳市铁西区建设大路',
|
||
'吉林省长春市汽开区东风大街',
|
||
'黑龙江省哈尔滨市松北区世茂大道',
|
||
'云南省昆明市官渡区彩云北路',
|
||
'贵州省贵阳市观山湖区林城东路',
|
||
'广西壮族自治区南宁市青秀区民族大道'
|
||
];
|
||
var dispatchers = [
|
||
'运维-周敏',
|
||
'运维-李航',
|
||
'运维-王磊',
|
||
'运维-赵静',
|
||
'运维-陈凯（华东夜班值班组长，负责跨省调度与异常升级）',
|
||
'运维-刘洋',
|
||
'运维-孙婷',
|
||
'运维-马超',
|
||
'运维-黄欣',
|
||
'运维-林峰',
|
||
'运维-何倩',
|
||
'运维-邓波',
|
||
'运维-罗兵',
|
||
'运维-梁雪',
|
||
'运维-谢军',
|
||
'运维-韩梅',
|
||
'运维-冯涛',
|
||
'运维-曾丽',
|
||
'运维-彭飞',
|
||
'运维-丁悦'
|
||
];
|
||
var rows = [];
|
||
var month = [4, 4, 4, 4, 3, 3, 3, 2, 2, 2, 1, 1, 1, 5, 5, 5, 6, 6, 6, 6];
|
||
var day = [18, 10, 20, 19, 28, 15, 8, 22, 5, 12, 30, 7, 25, 3, 16, 9, 11, 2, 21, 14];
|
||
var hour = [9, 11, 8, 17, 14, 10, 16, 9, 13, 15, 8, 18, 12, 10, 11, 9, 14, 16, 8, 13];
|
||
var min = [20, 5, 0, 22, 45, 30, 12, 15, 40, 5, 0, 20, 50, 25, 8, 45, 33, 10, 15, 28];
|
||
var statusCycle = ['dispatched', 'in_progress', 'draft', 'draft', 'completed', 'accepted', 'dispatched', 'in_progress', 'draft', 'dispatched', 'in_progress', 'draft', 'completed', 'dispatched', 'in_progress', 'draft', 'dispatched', 'in_progress', 'draft', 'completed'];
|
||
var omCycle = ['已通过', '已通过', '待审批', '已驳回', '已通过', '待审批', '已通过', '已通过', '待审批', '已通过', '已通过', '已驳回', '已通过', '待审批', '已通过', '待审批', '已通过', '已通过', '待审批', '已通过'];
|
||
for (var i = 0; i < 20; i++) {
|
||
var key = String(i + 1);
|
||
var st = statusCycle[i];
|
||
var om = omCycle[i];
|
||
var cost = st === 'draft' ? 0 : 1200 + i * 437 + (i % 3) * 890;
|
||
var faultCount = i % 4;
|
||
var accCount = i % 5 === 0 ? 1 : i % 7 === 2 ? 2 : 0;
|
||
var faultTickets = [];
|
||
var k;
|
||
for (k = 0; k < faultCount; k++) {
|
||
var fd = Math.max(1, day[i] - k);
|
||
faultTickets.push({
|
||
no: 'GZ-2026' + String(month[i]).padStart(2, '0') + String(fd).padStart(2, '0') + '-' + String(100 + i * 3 + k).padStart(3, '0'),
|
||
time: '2026-' + String(month[i]).padStart(2, '0') + '-' + String(fd).padStart(2, '0') + ' ' + String(hour[i]).padStart(2, '0') + ':' + String(min[i]).padStart(2, '0') + ':00',
|
||
desc: ['冷却液渗漏', '空压机异响', '制动踏板行程偏长', '仪表报高压互锁', '动力电池温差偏大', '转向助力偶发失效'][k % 6]
|
||
});
|
||
}
|
||
var accidentTickets = [];
|
||
for (k = 0; k < accCount; k++) {
|
||
var ad = Math.max(1, day[i] - k - 1);
|
||
accidentTickets.push({
|
||
no: 'SG-2026' + String(month[i]).padStart(2, '0') + String(ad).padStart(2, '0') + '-00' + String(k + 1),
|
||
time: '2026-' + String(month[i]).padStart(2, '0') + '-' + String(ad).padStart(2, '0') + ' 19:05:00',
|
||
desc: ['侧碰右翼子板凹陷', '追尾后保险杠更换', '停车场剐蹭'][k % 3]
|
||
});
|
||
}
|
||
var lineItems =
|
||
cost > 0
|
||
? [
|
||
{
|
||
item: '例行检修项目-' + (i + 1),
|
||
partName: ['滤芯', '密封圈', '冷却软管', '传感器'][i % 4],
|
||
qty: 1 + (i % 3),
|
||
partSource: i % 2 === 0 ? '羚牛' : '维修站',
|
||
partCost: 200 + i * 50,
|
||
laborCost: 400 + i * 80
|
||
}
|
||
]
|
||
: [];
|
||
rows.push({
|
||
key: key,
|
||
omApprovalStatus: om,
|
||
orderStatus: st,
|
||
orderTime: '2026-' + String(month[i]).padStart(2, '0') + '-' + String(day[i]).padStart(2, '0') + ' ' + String(hour[i]).padStart(2, '0') + ':' + String(min[i]).padStart(2, '0') + ':00',
|
||
plateNo: plates[i],
|
||
totalCost: cost,
|
||
dispatcher: st === 'draft' ? '—' : dispatchers[i],
|
||
stationName: stations[i],
|
||
stationAddress: stationAddresses[i],
|
||
faultTickets: faultTickets,
|
||
accidentTickets: accidentTickets,
|
||
lineItems: lineItems
|
||
});
|
||
}
|
||
return rows;
|
||
}
|
||
|
||
const Component = function () {
|
||
var useState = React.useState;
|
||
|
||
var antd = window.antd;
|
||
var Table = antd.Table;
|
||
var Button = antd.Button;
|
||
var Space = antd.Space;
|
||
var Input = antd.Input;
|
||
var Select = antd.Select;
|
||
var DatePicker = antd.DatePicker;
|
||
var RangePicker = DatePicker.RangePicker;
|
||
var Form = antd.Form;
|
||
var Row = antd.Row;
|
||
var Col = antd.Col;
|
||
var Divider = antd.Divider;
|
||
var Breadcrumb = antd.Breadcrumb;
|
||
var Menu = antd.Menu;
|
||
var Layout = antd.Layout;
|
||
var message = antd.message;
|
||
var Typography = antd.Typography;
|
||
var Avatar = antd.Avatar;
|
||
var Badge = antd.Badge;
|
||
var Tag = antd.Tag;
|
||
var Tooltip = antd.Tooltip;
|
||
var Modal = antd.Modal;
|
||
var Popconfirm = antd.Popconfirm;
|
||
var Checkbox = antd.Checkbox;
|
||
|
||
var Header = Layout.Header;
|
||
var Content = Layout.Content;
|
||
var Sider = Layout.Sider;
|
||
var Title = Typography.Title;
|
||
var Text = Typography.Text;
|
||
|
||
var _currentMenu = useState('crm-maintenance');
|
||
var currentMenu = _currentMenu[0];
|
||
var setCurrentMenu = _currentMenu[1];
|
||
|
||
var _listData = useState(buildSampleMaintenanceRows());
|
||
var listData = _listData[0];
|
||
var setListData = _listData[1];
|
||
|
||
var _viewOpen = useState(false);
|
||
var viewOpen = _viewOpen[0];
|
||
var setViewOpen = _viewOpen[1];
|
||
var _viewRecord = useState(null);
|
||
var viewRecord = _viewRecord[0];
|
||
var setViewRecord = _viewRecord[1];
|
||
|
||
var _createOpen = useState(false);
|
||
var createOpen = _createOpen[0];
|
||
var setCreateOpen = _createOpen[1];
|
||
var _assocFault = useState(false);
|
||
var assocFault = _assocFault[0];
|
||
var setAssocFault = _assocFault[1];
|
||
var _assocAccident = useState(false);
|
||
var assocAccident = _assocAccident[0];
|
||
var setAssocAccident = _assocAccident[1];
|
||
var _otherItems = useState('');
|
||
var otherItems = _otherItems[0];
|
||
var setOtherItems = _otherItems[1];
|
||
|
||
var _partsLinkOpen = useState(false);
|
||
var partsLinkOpen = _partsLinkOpen[0];
|
||
var setPartsLinkOpen = _partsLinkOpen[1];
|
||
var _partsLinkRecord = useState(null);
|
||
var partsLinkRecord = _partsLinkRecord[0];
|
||
var setPartsLinkRecord = _partsLinkRecord[1];
|
||
|
||
var orderStatusLabel = function (s) {
|
||
var map = { draft: '草稿', dispatched: '已派单', accepted: '已接单', in_progress: '维修中', completed: '已完成' };
|
||
return map[s] || s;
|
||
};
|
||
|
||
var orderStatusColor = function (s) {
|
||
if (s === 'draft') return 'default';
|
||
if (s === 'dispatched') return 'processing';
|
||
if (s === 'accepted') return 'blue';
|
||
if (s === 'in_progress') return 'warning';
|
||
if (s === 'completed') return 'success';
|
||
return 'default';
|
||
};
|
||
|
||
var omApprovalColor = function (t) {
|
||
if (t === '待审批') return 'warning';
|
||
if (t === '已通过') return 'success';
|
||
if (t === '已驳回') return 'error';
|
||
return 'default';
|
||
};
|
||
|
||
var renderTicketTooltip = function (tickets, descLabel) {
|
||
if (!tickets || tickets.length === 0) {
|
||
return React.createElement('span', { style: { color: '#c9cdd4' } }, '—');
|
||
}
|
||
var label = descLabel || '说明';
|
||
var title = React.createElement(
|
||
'div',
|
||
{ style: { maxWidth: 320, padding: 4 } },
|
||
tickets.map(function (t, i) {
|
||
return React.createElement(
|
||
'div',
|
||
{
|
||
key: i,
|
||
style: {
|
||
marginBottom: i < tickets.length - 1 ? 10 : 0,
|
||
paddingBottom: i < tickets.length - 1 ? 10 : 0,
|
||
borderBottom: i < tickets.length - 1 ? '1px solid rgba(255,255,255,0.12)' : 'none'
|
||
}
|
||
},
|
||
React.createElement('div', { style: { fontWeight: 600, color: '#fff' } }, t.no),
|
||
React.createElement('div', { style: { fontSize: 12, opacity: 0.85, marginTop: 4 } }, t.time),
|
||
React.createElement('div', { style: { fontSize: 12, marginTop: 4, lineHeight: 1.5 } }, label + '：' + t.desc)
|
||
);
|
||
})
|
||
);
|
||
return React.createElement(
|
||
Tooltip,
|
||
{ title: title, placement: 'topLeft', overlayStyle: { maxWidth: 360 } },
|
||
React.createElement(
|
||
'span',
|
||
{
|
||
className: 'mt-ticket-link',
|
||
style: {
|
||
color: '#165dff',
|
||
cursor: 'pointer',
|
||
borderBottom: '1px dashed rgba(22,93,255,0.45)',
|
||
display: 'inline-block',
|
||
maxWidth: '100%',
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
verticalAlign: 'bottom'
|
||
}
|
||
},
|
||
tickets.length + ' 条'
|
||
)
|
||
);
|
||
};
|
||
|
||
var handleMenuClick = function (e) {
|
||
setCurrentMenu(e.key);
|
||
if (e.key === 'contract-list') {
|
||
message.info('跳转至 合同列表');
|
||
window.location.hash = '合同列表';
|
||
} else if (e.key === 'erp-order') {
|
||
message.info('跳转至 ERP 订单管理');
|
||
window.location.hash = '订单管理';
|
||
} else if (e.key === 'asset-overview') {
|
||
message.info('跳转至 资产概览');
|
||
window.location.hash = '资产概览';
|
||
} else if (e.key === 'crm-list') {
|
||
message.info('跳转至 客户列表');
|
||
window.location.hash = '客户列表';
|
||
} else if (e.key === 'crm-supplier') {
|
||
message.info('跳转至 供应商管理');
|
||
window.location.hash = '供应商管理';
|
||
} else if (e.key === 'crm-maintenance') {
|
||
window.location.hash = '维修管理';
|
||
}
|
||
};
|
||
|
||
var openView = function (record) {
|
||
setViewRecord(record);
|
||
setViewOpen(true);
|
||
};
|
||
|
||
var handleAccept = function (key) {
|
||
setListData(function (prev) {
|
||
return prev.map(function (r) {
|
||
if (r.key !== key) return r;
|
||
return Object.assign({}, r, { orderStatus: 'accepted' });
|
||
});
|
||
});
|
||
message.success('已接单');
|
||
};
|
||
|
||
var handleDelete = function (key) {
|
||
setListData(function (prev) {
|
||
return prev.filter(function (r) {
|
||
return r.key !== key;
|
||
});
|
||
});
|
||
message.success('已删除草稿');
|
||
};
|
||
|
||
var openPartsLink = function (record) {
|
||
setPartsLinkRecord(record);
|
||
setPartsLinkOpen(true);
|
||
};
|
||
|
||
var submitPartsLink = function () {
|
||
message.success('备件关联已提交（运维审核流占位）');
|
||
setPartsLinkOpen(false);
|
||
setPartsLinkRecord(null);
|
||
};
|
||
|
||
var openCreate = function () {
|
||
setAssocFault(false);
|
||
setAssocAccident(false);
|
||
setOtherItems('');
|
||
setCreateOpen(true);
|
||
};
|
||
|
||
var submitCreate = function () {
|
||
var newKey = String(Date.now());
|
||
setListData(function (prev) {
|
||
return [
|
||
{
|
||
key: newKey,
|
||
omApprovalStatus: '待审批',
|
||
orderStatus: 'draft',
|
||
orderTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
|
||
plateNo: '（待完善）',
|
||
totalCost: 0,
|
||
dispatcher: '—',
|
||
stationName: '（待指派）',
|
||
stationAddress: '（待填写）',
|
||
faultTickets: assocFault
|
||
? [{ no: '（关联故障单占位）', time: '-', desc: '请在详情中补充' }]
|
||
: [],
|
||
accidentTickets: assocAccident
|
||
? [{ no: '（关联事故单占位）', time: '-', desc: '请在详情中补充' }]
|
||
: [],
|
||
lineItems: otherItems
|
||
? [{ item: '其他维修项', partName: '-', qty: 0, partSource: '维修站', partCost: 0, laborCost: 0, remark: otherItems }]
|
||
: []
|
||
}
|
||
].concat(prev);
|
||
});
|
||
message.success('已创建草稿维修单');
|
||
setCreateOpen(false);
|
||
};
|
||
|
||
var SearchIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 },
|
||
React.createElement('path', {
|
||
d: 'M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485'
|
||
})
|
||
);
|
||
};
|
||
var ResetIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 },
|
||
React.createElement('path', { d: 'M38.837 18C36.463 12.136 30.715 8 24 8 15.163 8 8 15.163 8 24s7.163 16 16 16c7.455 0 13.72-5.1 15.496-12M40 8v10H30' })
|
||
);
|
||
};
|
||
var PlusIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 },
|
||
React.createElement('path', { d: 'M5 24h38M24 5v38' })
|
||
);
|
||
};
|
||
var DownloadIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 },
|
||
React.createElement('path', { d: 'm33.072 22.071-9.07 9.071-9.072-9.07M24 5v26m16 4v6H8v-6' })
|
||
);
|
||
};
|
||
var SettingIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 4 },
|
||
React.createElement('path', {
|
||
d: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z'
|
||
}),
|
||
React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })
|
||
);
|
||
};
|
||
var NoticeIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 18, height: 18, fill: 'none', stroke: 'currentColor', strokeWidth: 4 },
|
||
React.createElement('path', { d: 'M39 34h3v4H6v-4h3V20.218a15 15 0 0 1 30 0V34ZM24 44a6 6 0 0 1-6-6h12a6 6 0 0 1-6 6Z' })
|
||
);
|
||
};
|
||
var ListIcon = function () {
|
||
return React.createElement(
|
||
'svg',
|
||
{ viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4, strokeLinecap: 'butt', strokeLinejoin: 'miter' },
|
||
React.createElement('path', { d: 'M17 12H42' }),
|
||
React.createElement('path', { d: 'M17 24H42' }),
|
||
React.createElement('path', { d: 'M17 36H42' }),
|
||
React.createElement('path', { d: 'M8 12H9' }),
|
||
React.createElement('path', { d: 'M8 24H9' }),
|
||
React.createElement('path', { d: 'M8 36H9' })
|
||
);
|
||
};
|
||
|
||
var columns = [
|
||
{
|
||
title: '运维审批状态',
|
||
dataIndex: 'omApprovalStatus',
|
||
key: 'omApprovalStatus',
|
||
className: 'mt-col-om',
|
||
render: function (t) {
|
||
return React.createElement('span', { className: 'mt-cell-inner' }, React.createElement(Tag, { color: omApprovalColor(t) }, t));
|
||
}
|
||
},
|
||
{
|
||
title: '维修单状态',
|
||
dataIndex: 'orderStatus',
|
||
key: 'orderStatus',
|
||
className: 'mt-col-order',
|
||
render: function (s) {
|
||
return React.createElement(
|
||
'span',
|
||
{ className: 'mt-cell-inner' },
|
||
React.createElement(Tag, { color: orderStatusColor(s) }, orderStatusLabel(s))
|
||
);
|
||
}
|
||
},
|
||
{ title: '时间', dataIndex: 'orderTime', key: 'orderTime', className: 'mt-col-time', ellipsis: true },
|
||
{ title: '车牌号', dataIndex: 'plateNo', key: 'plateNo', className: 'mt-col-plate', ellipsis: true },
|
||
{
|
||
title: '费用（总计维修费用）',
|
||
dataIndex: 'totalCost',
|
||
key: 'totalCost',
|
||
className: 'mt-col-cost',
|
||
ellipsis: true,
|
||
render: function (v) {
|
||
return v ? '¥ ' + Number(v).toLocaleString() : '—';
|
||
}
|
||
},
|
||
{ title: '派单发起人', dataIndex: 'dispatcher', key: 'dispatcher', className: 'mt-col-dispatch', ellipsis: true },
|
||
{ title: '维修站名称', dataIndex: 'stationName', key: 'stationName', className: 'mt-col-station', ellipsis: true },
|
||
{ title: '维修站地址', dataIndex: 'stationAddress', key: 'stationAddress', className: 'mt-col-address', ellipsis: true },
|
||
{
|
||
title: '关联故障单号',
|
||
key: 'faultTickets',
|
||
className: 'mt-col-fault',
|
||
render: function (_, record) {
|
||
return renderTicketTooltip(record.faultTickets, '故障说明');
|
||
}
|
||
},
|
||
{
|
||
title: '关联事故单号',
|
||
key: 'accidentTickets',
|
||
className: 'mt-col-accident',
|
||
render: function (_, record) {
|
||
return renderTicketTooltip(record.accidentTickets, '事故说明');
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
className: 'mt-col-action',
|
||
fixed: 'right',
|
||
width: 200,
|
||
render: function (_, record) {
|
||
var nodes = [];
|
||
if (record.orderStatus === 'dispatched') {
|
||
nodes.push(
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
key: 'accept',
|
||
type: 'link',
|
||
style: { padding: '0 4px' },
|
||
onClick: function () {
|
||
handleAccept(record.key);
|
||
}
|
||
},
|
||
'接单'
|
||
)
|
||
);
|
||
}
|
||
nodes.push(
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
key: 'view',
|
||
type: 'link',
|
||
style: { padding: '0 4px' },
|
||
onClick: function () {
|
||
openView(record);
|
||
}
|
||
},
|
||
'查看'
|
||
)
|
||
);
|
||
if (record.orderStatus === 'in_progress') {
|
||
nodes.push(
|
||
React.createElement(
|
||
Button,
|
||
{
|
||
key: 'parts',
|
||
type: 'link',
|
||
style: { padding: '0 4px' },
|
||
onClick: function () {
|
||
openPartsLink(record);
|
||
}
|
||
},
|
||
'备件关联'
|
||
)
|
||
);
|
||
}
|
||
if (record.orderStatus === 'draft') {
|
||
nodes.push(
|
||
React.createElement(
|
||
Popconfirm,
|
||
{
|
||
key: 'del',
|
||
title: '确认删除该草稿？',
|
||
okText: '删除',
|
||
cancelText: '取消',
|
||
onConfirm: function () {
|
||
handleDelete(record.key);
|
||
}
|
||
},
|
||
React.createElement(Button, { type: 'link', danger: true, style: { padding: '0 4px' } }, '删除')
|
||
)
|
||
);
|
||
}
|
||
return React.createElement(Space, { size: 0, wrap: false, split: React.createElement('span', { style: { color: '#e5e6eb' } }, '|') }, nodes);
|
||
}
|
||
}
|
||
];
|
||
|
||
var menuItems = [
|
||
{
|
||
key: 'contract',
|
||
label: '合同管理',
|
||
icon: React.createElement('span', { className: 'anticon' }, '📄'),
|
||
children: [{ key: 'contract-list', label: '合同列表' }]
|
||
},
|
||
{
|
||
key: 'crm',
|
||
label: 'CRM 管理',
|
||
icon: React.createElement('span', { className: 'anticon' }, '👥'),
|
||
children: [
|
||
{ key: 'crm-list', label: '客户列表' },
|
||
{ key: 'crm-supplier', label: '供应商管理' },
|
||
{ key: 'crm-maintenance', label: '维修管理' },
|
||
{ key: 'crm-analysis', label: 'CRM 分析' }
|
||
]
|
||
},
|
||
{
|
||
key: 'erp',
|
||
label: 'ERP 订单管理',
|
||
icon: React.createElement('span', { className: 'anticon' }, '📦'),
|
||
children: [{ key: 'erp-order', label: '订单管理' }]
|
||
},
|
||
{
|
||
key: 'asset',
|
||
label: '资产管理',
|
||
icon: React.createElement('span', { className: 'anticon' }, '🚗'),
|
||
children: [{ key: 'asset-overview', label: '资产概览' }]
|
||
}
|
||
];
|
||
|
||
var formItemLayout = {
|
||
labelAlign: 'left',
|
||
colon: false,
|
||
labelCol: { flex: '0 0 86px' },
|
||
wrapperCol: { flex: '1 1 0' }
|
||
};
|
||
|
||
var viewDetailColumns = [
|
||
{ title: '维修项', dataIndex: 'item', key: 'item', width: 160 },
|
||
{ title: '备件', dataIndex: 'partName', key: 'partName', width: 140 },
|
||
{ title: '数量', dataIndex: 'qty', key: 'qty', width: 72 },
|
||
{
|
||
title: '备件来源',
|
||
dataIndex: 'partSource',
|
||
key: 'partSource',
|
||
width: 100,
|
||
render: function (t) {
|
||
return t === '羚牛' ? React.createElement(Tag, { color: 'blue' }, '羚牛') : React.createElement(Tag, null, '维修站');
|
||
}
|
||
},
|
||
{
|
||
title: '备件费用',
|
||
dataIndex: 'partCost',
|
||
key: 'partCost',
|
||
width: 100,
|
||
render: function (v) {
|
||
return '¥ ' + Number(v || 0).toLocaleString();
|
||
}
|
||
},
|
||
{
|
||
title: '人工费用',
|
||
dataIndex: 'laborCost',
|
||
key: 'laborCost',
|
||
width: 100,
|
||
render: function (v) {
|
||
return '¥ ' + Number(v || 0).toLocaleString();
|
||
}
|
||
}
|
||
];
|
||
|
||
var viewModal = React.createElement(
|
||
Modal,
|
||
{
|
||
title: '维修单明细',
|
||
open: viewOpen,
|
||
width: 920,
|
||
onCancel: function () {
|
||
setViewOpen(false);
|
||
setViewRecord(null);
|
||
},
|
||
footer: React.createElement(Button, { onClick: function () { setViewOpen(false); setViewRecord(null); } }, '关闭'),
|
||
destroyOnClose: true
|
||
},
|
||
viewRecord
|
||
? React.createElement(
|
||
Space,
|
||
{ direction: 'vertical', size: 16, style: { width: '100%' } },
|
||
React.createElement(
|
||
Row,
|
||
{ gutter: 16 },
|
||
React.createElement(Col, { span: 8 }, React.createElement(Text, { type: 'secondary' }, '车牌号')),
|
||
React.createElement(Col, { span: 8 }, React.createElement(Text, { type: 'secondary' }, '维修站')),
|
||
React.createElement(Col, { span: 8 }, React.createElement(Text, { type: 'secondary' }, '总计费用'))
|
||
),
|
||
React.createElement(
|
||
Row,
|
||
{ gutter: 16, style: { marginTop: -8 } },
|
||
React.createElement(Col, { span: 8 }, React.createElement('strong', null, viewRecord.plateNo)),
|
||
React.createElement(Col, { span: 8 }, React.createElement('strong', null, viewRecord.stationName)),
|
||
React.createElement(
|
||
Col,
|
||
{ span: 8 },
|
||
React.createElement('strong', null, viewRecord.totalCost ? '¥ ' + Number(viewRecord.totalCost).toLocaleString() : '—')
|
||
)
|
||
),
|
||
React.createElement(Row, { gutter: 16, style: { marginTop: 8 } },
|
||
React.createElement(Col, { span: 24 },
|
||
React.createElement(Text, { type: 'secondary', style: { display: 'block', marginBottom: 4 } }, '维修站地址'),
|
||
React.createElement('strong', null, viewRecord.stationAddress || '—')
|
||
)
|
||
),
|
||
React.createElement(Divider, { style: { margin: '8px 0' } }, '维修项 / 备件'),
|
||
React.createElement(Table, {
|
||
size: 'small',
|
||
pagination: false,
|
||
columns: viewDetailColumns,
|
||
dataSource: (viewRecord.lineItems || []).map(function (r, i) {
|
||
return Object.assign({ key: String(i) }, r);
|
||
}),
|
||
locale: { emptyText: '暂无明细，可在工单推进后补充' }
|
||
})
|
||
)
|
||
: null
|
||
);
|
||
|
||
var partsLinkModal = React.createElement(
|
||
Modal,
|
||
{
|
||
title: '备件关联（运维提交）',
|
||
open: partsLinkOpen,
|
||
width: 560,
|
||
onCancel: function () {
|
||
setPartsLinkOpen(false);
|
||
setPartsLinkRecord(null);
|
||
},
|
||
onOk: submitPartsLink,
|
||
okText: '提交',
|
||
cancelText: '取消',
|
||
destroyOnClose: true
|
||
},
|
||
partsLinkRecord
|
||
? React.createElement(
|
||
Space,
|
||
{ direction: 'vertical', size: 12, style: { width: '100%' } },
|
||
React.createElement(Text, { type: 'secondary' },
|
||
'当前单：' + partsLinkRecord.plateNo + ' · ' + partsLinkRecord.stationName + (partsLinkRecord.stationAddress ? ' · ' + partsLinkRecord.stationAddress : '')
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
{ style: { color: '#4e5969', fontSize: 14, lineHeight: 1.6 } },
|
||
'接入运维提交的备件关联（批次、数量、来源等）。此处为交互占位，提交后走运维审核。'
|
||
)
|
||
)
|
||
: null
|
||
);
|
||
|
||
var createModal = React.createElement(
|
||
Modal,
|
||
{
|
||
title: '新增维修单',
|
||
open: createOpen,
|
||
width: 520,
|
||
onCancel: function () {
|
||
setCreateOpen(false);
|
||
},
|
||
onOk: submitCreate,
|
||
okText: '创建草稿',
|
||
cancelText: '取消',
|
||
destroyOnClose: true
|
||
},
|
||
React.createElement(
|
||
Space,
|
||
{ direction: 'vertical', size: 20, style: { width: '100%' } },
|
||
React.createElement(
|
||
'div',
|
||
null,
|
||
React.createElement('div', { style: { marginBottom: 8, color: '#4e5969', fontWeight: 500 } }, '是否关联故障/事故'),
|
||
React.createElement(
|
||
Space,
|
||
{ size: 24 },
|
||
React.createElement(Checkbox, { checked: assocFault, onChange: function (e) { setAssocFault(e.target.checked); } }, '关联故障'),
|
||
React.createElement(Checkbox, { checked: assocAccident, onChange: function (e) { setAssocAccident(e.target.checked); } }, '关联事故')
|
||
)
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
null,
|
||
React.createElement('div', { style: { marginBottom: 8, color: '#4e5969', fontWeight: 500 } }, '其他维修项'),
|
||
React.createElement(Input.TextArea, {
|
||
rows: 4,
|
||
placeholder: '填写未由故障/事故单覆盖的维修说明',
|
||
value: otherItems,
|
||
onChange: function (e) {
|
||
setOtherItems(e.target.value);
|
||
}
|
||
})
|
||
)
|
||
)
|
||
);
|
||
|
||
return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#fff', fontFamily: 'Inter, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' } },
|
||
React.createElement('style', null, `
|
||
.arco-theme-overrides .ant-btn { border-radius: 4px; box-shadow: none; font-size: 14px; }
|
||
.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-theme-overrides .ant-btn-default { background-color: #f2f3f5; border-color: transparent; color: #4e5969; }
|
||
.arco-theme-overrides .ant-btn-default:hover { background-color: #e5e6eb; border-color: transparent; color: #4e5969; }
|
||
.arco-theme-overrides .ant-btn-link { color: #165dff; }
|
||
.arco-theme-overrides .ant-btn-link:hover { background-color: transparent; color: #4080ff; }
|
||
.arco-theme-overrides .ant-menu-light .ant-menu-item-selected { background-color: #f2f9fe; color: #165dff; }
|
||
.arco-theme-overrides .ant-menu-light .ant-menu-item-selected::after { border-right-color: #165dff; }
|
||
.arco-theme-overrides .ant-table-thead > tr > th { background-color: #f2f3f5; color: #1d2129; font-weight: 500; padding: 13px 16px; border-bottom: 1px solid #e5e6eb; border-top: none; }
|
||
.arco-theme-overrides .ant-table-thead > tr > th::before { display: none !important; }
|
||
.arco-theme-overrides .ant-table-tbody > tr > td { border-bottom: 1px solid #e5e6eb; padding: 13px 16px; color: #4e5969; }
|
||
.arco-theme-overrides .ant-table-wrapper { border: none; }
|
||
.arco-theme-overrides .ant-table { border: none; }
|
||
.arco-theme-overrides .ant-table-container { border: none; }
|
||
.arco-theme-overrides .ant-table-pagination.ant-pagination { margin: 16px 0 0 0; }
|
||
.arco-theme-overrides .ant-card { border: none; border-radius: 4px; }
|
||
.arco-theme-overrides .maintenance-table-wrap { width: 100%; overflow-x: auto; }
|
||
.arco-theme-overrides .maintenance-table { width: 100%; }
|
||
.arco-theme-overrides .maintenance-table .ant-table { table-layout: auto; width: 100% !important; }
|
||
.arco-theme-overrides .maintenance-table .ant-table-thead > tr > th:not(.ant-table-selection-column):not(.mt-col-action),
|
||
.arco-theme-overrides .maintenance-table .ant-table-tbody > tr > td:not(.ant-table-selection-column):not(.mt-col-action) {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
vertical-align: middle;
|
||
}
|
||
.arco-theme-overrides .maintenance-table .mt-col-om,
|
||
.arco-theme-overrides .maintenance-table .mt-col-order { max-width: 7.5rem; }
|
||
.arco-theme-overrides .maintenance-table .mt-col-time { max-width: 11rem; }
|
||
.arco-theme-overrides .maintenance-table .mt-col-plate { max-width: 8rem; }
|
||
.arco-theme-overrides .maintenance-table .mt-col-cost { max-width: 9.5rem; }
|
||
.arco-theme-overrides .maintenance-table .mt-col-dispatch { max-width: min(14rem, 24vw); }
|
||
.arco-theme-overrides .maintenance-table .mt-col-station { max-width: min(18rem, 32vw); }
|
||
.arco-theme-overrides .maintenance-table .mt-col-address { max-width: min(22rem, 38vw); }
|
||
.arco-theme-overrides .maintenance-table .mt-col-fault,
|
||
.arco-theme-overrides .maintenance-table .mt-col-accident { max-width: 5.5rem; }
|
||
.arco-theme-overrides .maintenance-table .mt-col-action {
|
||
min-width: 200px;
|
||
width: 200px;
|
||
max-width: none !important;
|
||
white-space: nowrap !important;
|
||
overflow: visible !important;
|
||
text-overflow: clip !important;
|
||
}
|
||
.arco-theme-overrides .maintenance-table .mt-cell-inner {
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
max-width: 100%;
|
||
}
|
||
.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-picker { border-radius: 2px; border: 1px solid #e5e6eb; background-color: #fff; transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
|
||
.arco-theme-overrides .ant-input:hover, .arco-theme-overrides .ant-select:not(.ant-select-disabled):hover .ant-select-selector, .arco-theme-overrides .ant-picker:hover { background-color: #fff; border-color: #165dff; }
|
||
.arco-theme-overrides .ant-input:focus, .arco-theme-overrides .ant-input-focused, .arco-theme-overrides .ant-select-focused .ant-select-selector, .arco-theme-overrides .ant-picker-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-theme-overrides .ant-input-affix-wrapper:focus, .arco-theme-overrides .ant-input-affix-wrapper-focused { background-color: #fff; border-color: #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-panel-container { border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid #e5e6eb; background: #fff; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-header { border-bottom: 1px solid #e5e6eb; color: #1d2129; padding: 0 8px; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-content th { color: #86909c; font-weight: 400; font-size: 14px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: #e8f3ff; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before { border: 1px solid transparent; border-radius: 2px; position: relative; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: #165dff; }
|
||
.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner::after { background-color: #fff; }
|
||
.arco-theme-overrides .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #f2f3f5; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-picker-cell-inner { border-radius: 2px; font-size: 14px; color: #4e5969; width: 24px; height: 24px; line-height: 24px; }
|
||
.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; }
|
||
.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 { padding: 0 16px 0 0 !important; line-height: 32px; height: 32px; display: flex; align-items: center; }
|
||
.arco-theme-overrides .ant-form-item-control { display: flex; align-items: center; line-height: 32px; min-height: 32px; }
|
||
.arco-theme-overrides .ant-form-item-control-input { min-height: 32px; width: 100%; display: flex; align-items: center; }
|
||
.arco-theme-overrides .ant-form-item-control-input-content { display: flex; align-items: center; width: 100%; height: 100%; }
|
||
.arco-theme-overrides .ant-select { width: 100%; height: 32px; }
|
||
.arco-theme-overrides .ant-select-selector { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; width: 100%; padding: 0 12px; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-selector { padding: 0 4px; align-items: center; }
|
||
.arco-theme-overrides .ant-select-selection-item { line-height: 30px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
|
||
.arco-theme-overrides .ant-select-selection-overflow { align-items: center; }
|
||
.arco-theme-overrides .ant-input { height: 32px; padding: 4px 12px; }
|
||
.arco-theme-overrides .ant-picker { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; padding: 4px 12px; width: 100%; }
|
||
.arco-theme-overrides .ant-form-item-label > label { color: #4e5969; }
|
||
.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-selection-item { background: #f2f3f5; border: none; border-radius: 2px; }
|
||
.arco-theme-overrides .ant-select-multiple.ant-select-show-arrow .ant-select-selection-item { padding-inline-end: 24px; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option { padding-left: 36px; position: relative; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 1px solid #e5e6eb; border-radius: 2px; transition: all 0.1s; background: #fff; box-sizing: border-box; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option-selected::before { background-color: #165dff; border-color: #165dff; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option-selected::after { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-70%) rotate(45deg); width: 4px; height: 8px; border: 2px solid #fff; border-top: 0; border-left: 0; box-sizing: content-box; z-index: 1; }
|
||
.arco-theme-overrides .ant-select-multiple .ant-select-item-option-state { display: none; }
|
||
`),
|
||
React.createElement(Header, {
|
||
style: {
|
||
background: '#fff',
|
||
padding: '0 20px',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
borderBottom: '1px solid #e5e6eb',
|
||
height: 60,
|
||
position: 'fixed',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
zIndex: 100
|
||
}
|
||
},
|
||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
|
||
React.createElement('div', { style: { width: 32, height: 32, background: '#165dff', borderRadius: 4, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontWeight: 'bold' } }, 'A'),
|
||
React.createElement('div', { style: { fontSize: '20px', fontWeight: '600', color: '#1d2129', letterSpacing: '0.5px' } }, 'Arco Pro')
|
||
),
|
||
React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 20 } },
|
||
React.createElement(Input.Search, { placeholder: '搜索功能', style: { width: 220, borderRadius: 16 } }),
|
||
React.createElement(Badge, { dot: true, offset: [-2, 4] },
|
||
React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '消息通知' }, React.createElement(NoticeIcon, null))
|
||
),
|
||
React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '设置' }, React.createElement(SettingIcon, null)),
|
||
React.createElement(Avatar, { size: 32, src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', style: { cursor: 'pointer' } })
|
||
)
|
||
),
|
||
React.createElement(Layout, { style: { paddingTop: 60, background: '#fff' } },
|
||
React.createElement(Sider, {
|
||
width: 220,
|
||
style: {
|
||
background: '#fff',
|
||
borderRight: '1px solid #e5e6eb',
|
||
position: 'fixed',
|
||
top: 60,
|
||
left: 0,
|
||
height: 'calc(100vh - 60px)',
|
||
overflowY: 'auto',
|
||
zIndex: 99
|
||
}
|
||
},
|
||
React.createElement(Menu, {
|
||
mode: 'inline',
|
||
selectedKeys: [currentMenu],
|
||
defaultOpenKeys: ['crm'],
|
||
items: menuItems,
|
||
onClick: handleMenuClick,
|
||
style: { borderRight: 'none', padding: '8px', background: '#fff' }
|
||
})
|
||
),
|
||
React.createElement(Content, { style: { marginLeft: 220, padding: '16px 20px 0 20px', minHeight: 'calc(100vh - 60px)', display: 'flex', flexDirection: 'column', background: '#fff' } },
|
||
React.createElement('div', { style: { padding: '16px 20px 0 20px', marginBottom: 0 } },
|
||
React.createElement(Breadcrumb, {
|
||
separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
|
||
items: [
|
||
{ title: React.createElement(ListIcon, { style: { display: 'inline-flex', alignItems: 'center', fontSize: 14, transform: 'translate(-2px, 1px)' } }) },
|
||
{ title: '列表页' },
|
||
{ title: React.createElement('span', { style: { color: '#1d2129' } }, '维修单管理') }
|
||
]
|
||
}),
|
||
React.createElement(Title, { level: 4, style: { marginTop: 16, marginBottom: 20, fontWeight: 700, color: '#1d2129', fontSize: 16 } }, '维修单管理')
|
||
),
|
||
React.createElement('div', { style: { padding: '0', display: 'flex', flexDirection: 'column', flex: 1, background: 'transparent' } },
|
||
React.createElement('div', { style: { padding: '0 20px 0 20px', marginBottom: 0, background: '#fff' } },
|
||
React.createElement(Row, { style: { flexWrap: 'nowrap' } },
|
||
React.createElement(Col, { flex: 1, style: { minWidth: 0, paddingRight: 40 } },
|
||
React.createElement(Form, Object.assign({ layout: 'horizontal' }, formItemLayout),
|
||
React.createElement(Row, { gutter: 24, style: { rowGap: 0 } },
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '车牌号', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Input, { placeholder: '请输入车牌号' })
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '维修单状态', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
placeholder: '全部',
|
||
options: [
|
||
{ label: '全部', value: '' },
|
||
{ label: '草稿', value: 'draft' },
|
||
{ label: '已派单', value: 'dispatched' },
|
||
{ label: '已接单', value: 'accepted' },
|
||
{ label: '维修中', value: 'in_progress' },
|
||
{ label: '已完成', value: 'completed' }
|
||
]
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '运维审批', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(Select, {
|
||
allowClear: true,
|
||
placeholder: '全部',
|
||
options: [
|
||
{ label: '全部', value: '' },
|
||
{ label: '待审批', value: '待审批' },
|
||
{ label: '已通过', value: '已通过' },
|
||
{ label: '已驳回', value: '已驳回' }
|
||
]
|
||
})
|
||
)
|
||
),
|
||
React.createElement(Col, { span: 8 },
|
||
React.createElement(Form.Item, { label: '时间', style: { marginBottom: 16, height: 32 } },
|
||
React.createElement(RangePicker, { style: { width: '100%' }, placeholder: ['开始', '结束'] })
|
||
)
|
||
)
|
||
)
|
||
)
|
||
),
|
||
React.createElement(Divider, { style: { height: 72, borderLeftColor: 'rgb(229, 230, 235)', borderLeftStyle: 'dashed', marginLeft: 20, marginRight: 20 }, type: 'vertical' }),
|
||
React.createElement(Col, { flex: '86px', style: { textAlign: 'right' } },
|
||
React.createElement(Space, { direction: 'vertical', size: 12 },
|
||
React.createElement(Button, { type: 'primary', icon: React.createElement(SearchIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' } }, '查询'),
|
||
React.createElement(Button, { icon: React.createElement(ResetIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' } }, '重置')
|
||
)
|
||
)
|
||
)
|
||
),
|
||
React.createElement('div', { style: { padding: '20px 20px 0 20px', display: 'flex', flexDirection: 'column', flex: 1, background: '#fff' } },
|
||
React.createElement(Row, { justify: 'space-between', align: 'middle', style: { marginBottom: 16 } },
|
||
React.createElement(Col, null,
|
||
React.createElement(Space, { size: 12 },
|
||
React.createElement(Button, { type: 'primary', icon: React.createElement(PlusIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6 }, onClick: openCreate }, '新建'),
|
||
React.createElement(Button, null, '导出')
|
||
)
|
||
),
|
||
React.createElement(Col, null,
|
||
React.createElement(Button, { style: { padding: '4px 10px', height: 32, display: 'flex', alignItems: 'center', gap: 6, color: '#4e5969' }, title: '下载' }, React.createElement(DownloadIcon, null), React.createElement('span', null, '下载'))
|
||
)
|
||
),
|
||
React.createElement(
|
||
'div',
|
||
{ className: 'maintenance-table-wrap', style: { flex: 1, minHeight: 0 } },
|
||
React.createElement(Table, {
|
||
className: 'maintenance-table',
|
||
rowSelection: { type: 'checkbox', columnWidth: 48 },
|
||
columns: columns,
|
||
dataSource: listData,
|
||
pagination: { pageSize: 10, showTotal: function (total) { return '共 ' + total + ' 条'; } },
|
||
tableLayout: 'auto',
|
||
style: { width: '100%' },
|
||
scroll: { x: 'max-content' }
|
||
})
|
||
)
|
||
)
|
||
)
|
||
)
|
||
),
|
||
viewModal,
|
||
partsLinkModal,
|
||
createModal
|
||
);
|
||
};
|
||
|
||
if (typeof module !== 'undefined' && module.exports) module.exports = Component; |