797 lines
30 KiB
React
797 lines
30 KiB
React
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
import { Table, Button, Modal, Form, Input, Select, DatePicker, message, Card, Space, Tag, Dropdown, Menu, Tabs, Timeline, Descriptions, Checkbox, Popover, InputNumber, Switch } from 'antd';
|
|
import { PlusOutlined, EditOutlined, DeleteOutlined, SearchOutlined, EyeOutlined, MoreOutlined, UserOutlined, ToolOutlined, CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined, SettingOutlined } from '@ant-design/icons';
|
|
import axios from 'axios';
|
|
import dayjs from 'dayjs';
|
|
|
|
const { Option } = Select;
|
|
const { RangePicker } = DatePicker;
|
|
const { TextArea } = Input;
|
|
const { TabPane } = Tabs;
|
|
|
|
const BUILTIN_TICKET_FIELDS = [
|
|
'ticketId', 'title', 'deviceId', 'deviceName', 'deviceModel', 'serialNumber',
|
|
'faultCategory', 'faultSubCategory', 'priority', 'status', 'description',
|
|
'expectedCompletionDate', 'reporterId', 'reporterName', 'assigneeId', 'assigneeName',
|
|
'location', 'resolution', 'completionDate', 'evaluation', 'evaluationRating',
|
|
'attachments', 'tags', 'notes', 'result', 'solution', 'usedParts'
|
|
];
|
|
|
|
const DEFAULT_TICKET_FIELDS = [
|
|
{ fieldName: 'title', displayName: '标题', fieldType: 'string', required: true, order: 1, visible: true },
|
|
{ fieldName: 'deviceId', displayName: '关联设备', fieldType: 'device', required: false, order: 2, visible: true },
|
|
{ fieldName: 'deviceName', displayName: '设备名称', fieldType: 'string', required: false, order: 3, visible: true },
|
|
{ fieldName: 'serialNumber', displayName: '设备序列号', fieldType: 'string', required: false, order: 4, visible: true },
|
|
{ fieldName: 'faultCategory', displayName: '故障分类', fieldType: 'select', required: true, order: 5, visible: true, options: [] },
|
|
{ fieldName: 'priority', displayName: '优先级', fieldType: 'select', required: true, order: 6, visible: true, options: [
|
|
{ value: 'low', label: '低' }, { value: 'medium', label: '中' }, { value: 'high', label: '高' }, { value: 'urgent', label: '紧急' }
|
|
]},
|
|
{ fieldName: 'description', displayName: '故障描述', fieldType: 'textarea', required: true, order: 7, visible: true },
|
|
{ fieldName: 'expectedCompletionDate', displayName: '期望完成时间', fieldType: 'datetime', required: false, order: 8, visible: true },
|
|
{ fieldName: 'resolution', displayName: '解决方案', fieldType: 'textarea', required: false, order: 9, visible: true },
|
|
{ fieldName: 'notes', displayName: '备注', fieldType: 'textarea', required: false, order: 10, visible: true }
|
|
];
|
|
|
|
const getStatusColor = (status) => {
|
|
const colors = {
|
|
pending: 'orange',
|
|
in_progress: 'processing',
|
|
completed: 'green',
|
|
closed: 'default'
|
|
};
|
|
return colors[status] || 'default';
|
|
};
|
|
|
|
const getStatusText = (status) => {
|
|
const texts = {
|
|
pending: '待处理',
|
|
in_progress: '处理中',
|
|
completed: '已完成',
|
|
closed: '已关闭'
|
|
};
|
|
return texts[status] || status;
|
|
};
|
|
|
|
const getPriorityColor = (priority) => {
|
|
const colors = {
|
|
low: 'green',
|
|
medium: 'orange',
|
|
high: 'red',
|
|
urgent: 'magenta'
|
|
};
|
|
return colors[priority] || 'default';
|
|
};
|
|
|
|
const getPriorityText = (priority) => {
|
|
const texts = {
|
|
low: '低',
|
|
medium: '中',
|
|
high: '高',
|
|
urgent: '紧急'
|
|
};
|
|
return texts[priority] || priority;
|
|
};
|
|
|
|
const generateTicketId = () => {
|
|
const prefix = 'TKT';
|
|
const timestamp = dayjs().format('YYYYMMDDHHmmss');
|
|
const random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
|
|
return `${prefix}${timestamp}${random}`;
|
|
};
|
|
|
|
function TicketManagement() {
|
|
const [tickets, setTickets] = useState([]);
|
|
const [devices, setDevices] = useState([]);
|
|
const [categories, setCategories] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [detailModalVisible, setDetailModalVisible] = useState(false);
|
|
const [processingModalVisible, setProcessingModalVisible] = useState(false);
|
|
const [editingTicket, setEditingTicket] = useState(null);
|
|
const [selectedTicket, setSelectedTicket] = useState(null);
|
|
const [operationRecords, setOperationRecords] = useState([]);
|
|
const [form] = Form.useForm();
|
|
const [processForm] = Form.useForm();
|
|
const [searchForm] = Form.useForm();
|
|
|
|
const [pagination, setPagination] = useState({
|
|
current: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
pageSizeOptions: ['10', '20', '30', '50'],
|
|
showSizeChanger: true,
|
|
showTotal: (total) => `共 ${total} 条记录`
|
|
});
|
|
|
|
const [searchFilters, setSearchFilters] = useState({});
|
|
const [deviceSource, setDeviceSource] = useState('select');
|
|
const [ticketFields, setTicketFields] = useState(DEFAULT_TICKET_FIELDS);
|
|
const [loadingFields, setLoadingFields] = useState(true);
|
|
|
|
const fetchTickets = useCallback(async (page = 1, pageSize = 10, filters = {}) => {
|
|
try {
|
|
setLoading(true);
|
|
const params = {
|
|
page,
|
|
pageSize,
|
|
...searchFilters,
|
|
...filters
|
|
};
|
|
|
|
const response = await axios.get('/api/tickets', { params });
|
|
const { tickets: ticketList, total } = response.data;
|
|
|
|
const processedTickets = ticketList.map(ticket => {
|
|
const processed = { ...ticket };
|
|
if (ticket.metadata && typeof ticket.metadata === 'object') {
|
|
Object.entries(ticket.metadata).forEach(([key, value]) => {
|
|
processed[key] = value;
|
|
});
|
|
}
|
|
return processed;
|
|
});
|
|
|
|
setTickets(processedTickets);
|
|
setPagination(prev => ({ ...prev, current: page, pageSize, total }));
|
|
} catch (error) {
|
|
message.error('获取工单列表失败');
|
|
console.error('获取工单列表失败:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [searchFilters]);
|
|
|
|
const fetchDevices = useCallback(async () => {
|
|
try {
|
|
const response = await axios.get('/api/devices', { params: { pageSize: 1000 } });
|
|
setDevices(response.data.devices || []);
|
|
} catch (error) {
|
|
console.error('获取设备列表失败:', error);
|
|
}
|
|
}, []);
|
|
|
|
const fetchCategories = useCallback(async () => {
|
|
try {
|
|
const response = await axios.get('/api/ticket-categories');
|
|
const categoryOptions = (response.data || []).map(cat => ({ value: cat.name, label: cat.name }));
|
|
setCategories(response.data || []);
|
|
setTicketFields(prev => prev.map(field =>
|
|
field.fieldName === 'faultCategory' ? { ...field, options: categoryOptions } : field
|
|
));
|
|
} catch (error) {
|
|
console.error('获取分类列表失败:', error);
|
|
}
|
|
}, []);
|
|
|
|
const fetchTicketFields = useCallback(async () => {
|
|
try {
|
|
setLoadingFields(true);
|
|
const response = await axios.get('/api/ticket-fields');
|
|
const sortedFields = response.data.sort((a, b) => a.order - b.order);
|
|
setTicketFields(sortedFields);
|
|
} catch (error) {
|
|
console.error('获取工单字段配置失败:', error);
|
|
setTicketFields(DEFAULT_TICKET_FIELDS);
|
|
} finally {
|
|
setLoadingFields(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchTickets();
|
|
fetchDevices();
|
|
fetchCategories();
|
|
fetchTicketFields();
|
|
}, [fetchTickets, fetchDevices, fetchCategories, fetchTicketFields]);
|
|
|
|
const renderFormItem = useCallback((field) => {
|
|
const { fieldName, displayName, fieldType, required, options, placeholder } = field;
|
|
const rules = required ? [{ required: true, message: `请选择或输入${displayName}` }] : [];
|
|
|
|
let formItem;
|
|
switch (fieldType) {
|
|
case 'string':
|
|
formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
|
|
break;
|
|
case 'number':
|
|
formItem = <InputNumber placeholder={placeholder || `请输入${displayName}`} style={{ width: '100%' }} />;
|
|
break;
|
|
case 'textarea':
|
|
formItem = <Input.TextArea rows={3} placeholder={placeholder || `请输入${displayName}`} />;
|
|
break;
|
|
case 'boolean':
|
|
formItem = <Switch />;
|
|
break;
|
|
case 'date':
|
|
formItem = <DatePicker style={{ width: '100%' }} />;
|
|
break;
|
|
case 'datetime':
|
|
formItem = <DatePicker showTime style={{ width: '100%' }} />;
|
|
break;
|
|
case 'select':
|
|
const selectOptions = options && Array.isArray(options) ? options : [];
|
|
formItem = (
|
|
<Select placeholder={placeholder || `请选择${displayName}`}>
|
|
{selectOptions.map((opt, idx) => (
|
|
<Option key={idx} value={opt.value}>{opt.label}</Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
break;
|
|
case 'device':
|
|
formItem = (
|
|
<Select placeholder="选择设备" showSearch optionFilterProp="children">
|
|
{devices.map(device => (
|
|
<Option key={device.deviceId} value={device.deviceId}>
|
|
{device.name} - {device.serialNumber}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
);
|
|
break;
|
|
default:
|
|
formItem = <Input placeholder={placeholder || `请输入${displayName}`} />;
|
|
}
|
|
|
|
return (
|
|
<Form.Item key={fieldName} name={fieldName} label={displayName} rules={rules}>
|
|
{formItem}
|
|
</Form.Item>
|
|
);
|
|
}, [devices]);
|
|
|
|
const tableColumns = useMemo(() => {
|
|
const baseColumns = [
|
|
{ title: '工单编号', dataIndex: 'ticketId', key: 'ticketId', width: 150, fixed: 'left' },
|
|
{ title: '标题', dataIndex: 'title', key: 'title', width: 200, ellipsis: true },
|
|
{
|
|
title: '设备信息',
|
|
key: 'deviceInfo',
|
|
width: 180,
|
|
render: (_, record) => (
|
|
<div>
|
|
<div>{record.deviceName || '-'}</div>
|
|
<div style={{ fontSize: 12, color: '#888' }}>{record.serialNumber || '-'}</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
title: '故障分类',
|
|
dataIndex: 'faultCategory',
|
|
key: 'faultCategory',
|
|
width: 120,
|
|
render: (value) => value ? <Tag>{value}</Tag> : '-'
|
|
},
|
|
{
|
|
title: '优先级',
|
|
dataIndex: 'priority',
|
|
key: 'priority',
|
|
width: 80,
|
|
render: (value) => <Tag color={getPriorityColor(value)}>{getPriorityText(value)}</Tag>
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: 100,
|
|
render: (value) => <Tag color={getStatusColor(value)}>{getStatusText(value)}</Tag>
|
|
},
|
|
{ title: '报告人', dataIndex: 'reporterName', key: 'reporterName', width: 100 },
|
|
{
|
|
title: '创建时间',
|
|
dataIndex: 'createdAt',
|
|
key: 'createdAt',
|
|
width: 160,
|
|
render: (value) => value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'
|
|
}
|
|
];
|
|
|
|
const customFieldColumns = ticketFields
|
|
.filter(field => !BUILTIN_TICKET_FIELDS.includes(field.fieldName) && field.visible)
|
|
.map(field => ({
|
|
title: field.displayName,
|
|
dataIndex: field.fieldName,
|
|
key: field.fieldName,
|
|
width: 120,
|
|
render: (value) => {
|
|
if (value === null || value === undefined) return '-';
|
|
if (field.fieldType === 'boolean') {
|
|
return <Switch checked={value} disabled />;
|
|
}
|
|
if (field.fieldType === 'date' || field.fieldType === 'datetime') {
|
|
return value ? dayjs(value).format(field.fieldType === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm') : '-';
|
|
}
|
|
if (field.fieldType === 'select' && Array.isArray(field.options)) {
|
|
const option = field.options.find(opt => opt.value === value);
|
|
return option ? option.label : value;
|
|
}
|
|
return String(value);
|
|
}
|
|
}));
|
|
|
|
const actionColumn = {
|
|
title: '操作',
|
|
key: 'action',
|
|
width: 100,
|
|
fixed: 'right',
|
|
render: (_, record) => (
|
|
<Dropdown trigger={['click']} overlay={getActionItems(record)}>
|
|
<Button type="text" icon={<MoreOutlined />} />
|
|
</Dropdown>
|
|
)
|
|
};
|
|
|
|
return [...baseColumns, ...customFieldColumns, actionColumn];
|
|
}, [ticketFields]);
|
|
|
|
const fetchTicketDetail = useCallback(async (ticketId) => {
|
|
try {
|
|
const [ticketRes, operationsRes] = await Promise.all([
|
|
axios.get(`/api/tickets/${ticketId}`),
|
|
axios.get(`/api/tickets/${ticketId}/operations`)
|
|
]);
|
|
|
|
setSelectedTicket(ticketRes.data);
|
|
setOperationRecords(operationsRes.data || []);
|
|
setDetailModalVisible(true);
|
|
} catch (error) {
|
|
message.error('获取工单详情失败');
|
|
console.error('获取工单详情失败:', error);
|
|
}
|
|
}, []);
|
|
|
|
const showModal = useCallback((ticket = null) => {
|
|
setEditingTicket(ticket);
|
|
if (ticket) {
|
|
const ticketData = { ...ticket };
|
|
if (ticketData.expectedCompletionDate) {
|
|
ticketData.expectedCompletionDate = dayjs(ticketData.expectedCompletionDate);
|
|
}
|
|
if (ticketData.completionDate) {
|
|
ticketData.completionDate = dayjs(ticketData.completionDate);
|
|
}
|
|
if (ticket.deviceId) {
|
|
setDeviceSource('select');
|
|
ticketData.deviceId = ticket.deviceId;
|
|
} else {
|
|
setDeviceSource('manual');
|
|
ticketData.deviceName = ticket.deviceName;
|
|
ticketData.serialNumber = ticket.serialNumber;
|
|
}
|
|
if (ticket.metadata && typeof ticket.metadata === 'object') {
|
|
Object.entries(ticket.metadata).forEach(([key, value]) => {
|
|
ticketData[key] = value;
|
|
});
|
|
}
|
|
form.setFieldsValue(ticketData);
|
|
} else {
|
|
form.resetFields();
|
|
setDeviceSource('select');
|
|
const newTicketId = generateTicketId();
|
|
form.setFieldsValue({ ticketId: newTicketId });
|
|
}
|
|
setModalVisible(true);
|
|
}, []);
|
|
|
|
const handleCancel = useCallback(() => {
|
|
setModalVisible(false);
|
|
setEditingTicket(null);
|
|
}, []);
|
|
|
|
const handleSubmit = useCallback(async (values) => {
|
|
try {
|
|
const ticketData = {
|
|
...values,
|
|
expectedCompletionDate: values.expectedCompletionDate ? values.expectedCompletionDate.format('YYYY-MM-DD HH:mm:ss') : null,
|
|
completionDate: values.completionDate ? values.completionDate.format('YYYY-MM-DD HH:mm:ss') : null,
|
|
metadata: {}
|
|
};
|
|
|
|
ticketFields.forEach(field => {
|
|
if (!BUILTIN_TICKET_FIELDS.includes(field.fieldName)) {
|
|
if (values[field.fieldName] !== undefined) {
|
|
ticketData.metadata[field.fieldName] = values[field.fieldName];
|
|
}
|
|
delete ticketData[field.fieldName];
|
|
}
|
|
});
|
|
|
|
if (deviceSource === 'manual') {
|
|
ticketData.deviceId = null;
|
|
ticketData.deviceName = values.deviceName;
|
|
ticketData.serialNumber = values.serialNumber;
|
|
} else {
|
|
const selectedDevice = devices.find(d => d.deviceId === values.deviceId);
|
|
if (selectedDevice) {
|
|
ticketData.deviceName = selectedDevice.name;
|
|
ticketData.serialNumber = selectedDevice.serialNumber;
|
|
}
|
|
}
|
|
|
|
if (editingTicket) {
|
|
await axios.put(`/api/tickets/${editingTicket.ticketId}`, ticketData);
|
|
message.success('工单更新成功');
|
|
} else {
|
|
const user = JSON.parse(localStorage.getItem('user') || '{}');
|
|
ticketData.reporterId = user.userId || localStorage.getItem('userId') || 'USER001';
|
|
ticketData.reporterName = user.username || '系统用户';
|
|
await axios.post('/api/tickets', ticketData);
|
|
message.success('工单创建成功');
|
|
}
|
|
|
|
setModalVisible(false);
|
|
fetchTickets();
|
|
setEditingTicket(null);
|
|
setDeviceSource('select');
|
|
} catch (error) {
|
|
message.error(editingTicket ? '工单更新失败' : '工单创建失败');
|
|
console.error(error);
|
|
}
|
|
}, [editingTicket, fetchTickets, deviceSource, ticketFields, devices]);
|
|
|
|
const handleDelete = useCallback(async (ticketId) => {
|
|
Modal.confirm({
|
|
title: '确认删除',
|
|
content: '确定要删除这个工单吗？',
|
|
okText: '删除',
|
|
okType: 'danger',
|
|
cancelText: '取消',
|
|
onOk: async () => {
|
|
try {
|
|
await axios.delete(`/api/tickets/${ticketId}`);
|
|
message.success('工单删除成功');
|
|
fetchTickets();
|
|
} catch (error) {
|
|
message.error('工单删除失败');
|
|
console.error(error);
|
|
}
|
|
}
|
|
});
|
|
}, [fetchTickets]);
|
|
|
|
const handleProcess = useCallback((ticket) => {
|
|
setSelectedTicket(ticket);
|
|
processForm.resetFields();
|
|
setProcessingModalVisible(true);
|
|
}, []);
|
|
|
|
const handleProcessSubmit = useCallback(async (values) => {
|
|
try {
|
|
await axios.put(`/api/tickets/${selectedTicket.ticketId}/process`, {
|
|
...values,
|
|
operatorId: localStorage.getItem('userId'),
|
|
operatorName: JSON.parse(localStorage.getItem('user') || '{}').username
|
|
});
|
|
message.success('工单处理完成');
|
|
setProcessingModalVisible(false);
|
|
fetchTickets();
|
|
} catch (error) {
|
|
message.error('处理失败');
|
|
console.error(error);
|
|
}
|
|
}, [selectedTicket, fetchTickets]);
|
|
|
|
const handleStatusChange = useCallback(async (ticketId, newStatus) => {
|
|
try {
|
|
await axios.put(`/api/tickets/${ticketId}/status`, {
|
|
status: newStatus,
|
|
operatorId: localStorage.getItem('userId'),
|
|
operatorName: JSON.parse(localStorage.getItem('user') || '{}').username
|
|
});
|
|
message.success('状态更新成功');
|
|
fetchTickets();
|
|
} catch (error) {
|
|
message.error('状态更新失败');
|
|
console.error(error);
|
|
}
|
|
}, [fetchTickets]);
|
|
|
|
const handleSearch = useCallback((values) => {
|
|
setSearchFilters(values);
|
|
fetchTickets(1, pagination.pageSize, values);
|
|
}, [fetchTickets, pagination.pageSize]);
|
|
|
|
const handleReset = useCallback(() => {
|
|
searchForm.resetFields();
|
|
setSearchFilters({});
|
|
fetchTickets(1, pagination.pageSize, {});
|
|
}, [fetchTickets, pagination.pageSize]);
|
|
|
|
const handleTableChange = useCallback((paginationInfo) => {
|
|
setPagination(paginationInfo);
|
|
fetchTickets(paginationInfo.current, paginationInfo.pageSize, searchFilters);
|
|
}, [fetchTickets, searchFilters]);
|
|
|
|
const handleDeviceSourceChange = useCallback((value) => {
|
|
setDeviceSource(value);
|
|
}, []);
|
|
|
|
const renderDeviceFormItems = useCallback(() => {
|
|
if (deviceSource === 'select') {
|
|
return (
|
|
<Form.Item name="deviceId" label="关联设备" rules={[{ required: false }]}>
|
|
<Select placeholder="选择设备" showSearch optionFilterProp="children" allowClear>
|
|
{devices.map(device => (
|
|
<Option key={device.deviceId} value={device.deviceId}>
|
|
{device.name} - {device.serialNumber}
|
|
</Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
);
|
|
}
|
|
return (
|
|
<>
|
|
<Form.Item name="deviceName" label="设备名称" rules={[{ required: true, message: '请输入设备名称' }]}>
|
|
<Input placeholder="请输入设备名称" />
|
|
</Form.Item>
|
|
<Form.Item name="serialNumber" label="设备序列号" rules={[{ required: true, message: '请输入设备序列号' }]}>
|
|
<Input placeholder="请输入设备序列号" />
|
|
</Form.Item>
|
|
</>
|
|
);
|
|
}, [deviceSource, devices]);
|
|
|
|
const renderFormItems = useCallback(() => {
|
|
const items = [];
|
|
if (!editingTicket) {
|
|
items.push(
|
|
<Form.Item key="ticketId" name="ticketId" label="工单编号">
|
|
<Input placeholder="自动生成" disabled style={{ background: '#f5f5f5' }} />
|
|
</Form.Item>
|
|
);
|
|
}
|
|
ticketFields.forEach(field => {
|
|
if (field.fieldName === 'ticketId' || field.fieldName === 'deviceId') {
|
|
if (field.fieldName === 'deviceId') {
|
|
items.push(
|
|
<React.Fragment key="deviceSource">
|
|
<Form.Item label="设备来源" required>
|
|
<Select value={deviceSource} onChange={handleDeviceSourceChange} style={{ width: 200 }}>
|
|
<Option value="select">从设备管理选择</Option>
|
|
<Option value="manual">手动输入</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
{renderDeviceFormItems()}
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
} else {
|
|
items.push(renderFormItem(field));
|
|
}
|
|
});
|
|
return items;
|
|
}, [ticketFields, deviceSource, devices, handleDeviceSourceChange, renderDeviceFormItems, renderFormItem, editingTicket]);
|
|
|
|
const getActionItems = useCallback((record) => (
|
|
<Menu
|
|
items={[
|
|
{ key: 'view', icon: <EyeOutlined />, label: '查看详情', onClick: () => fetchTicketDetail(record.ticketId) },
|
|
{ key: 'process', icon: <ToolOutlined />, label: '处理工单', disabled: record.status === 'closed' || record.status === 'completed',
|
|
onClick: () => handleProcess(record) },
|
|
{ type: 'divider' },
|
|
{ key: 'pending', label: '标记为待处理', disabled: record.status !== 'pending',
|
|
onClick: () => handleStatusChange(record.ticketId, 'pending') },
|
|
{ key: 'in_progress', label: '标记为处理中', disabled: record.status !== 'pending',
|
|
onClick: () => handleStatusChange(record.ticketId, 'in_progress') },
|
|
{ key: 'completed', label: '标记为已完成', disabled: record.status === 'completed' || record.status === 'closed',
|
|
onClick: () => handleStatusChange(record.ticketId, 'completed') },
|
|
{ key: 'closed', label: '标记为已关闭', disabled: record.status === 'closed',
|
|
onClick: () => handleStatusChange(record.ticketId, 'closed') },
|
|
{ type: 'divider' },
|
|
{ key: 'delete', icon: <DeleteOutlined />, label: '删除工单', danger: true,
|
|
onClick: () => handleDelete(record.ticketId) }
|
|
]}
|
|
/>
|
|
), [fetchTicketDetail, handleProcess, handleStatusChange, handleDelete]);
|
|
|
|
return (
|
|
<div style={{ padding: 24 }}>
|
|
<Card title="工单管理" extra={
|
|
<Button type="primary" icon={<PlusOutlined />} onClick={() => showModal()}>
|
|
创建工单
|
|
</Button>
|
|
}>
|
|
<Form form={searchForm} layout="inline" onFinish={handleSearch} style={{ marginBottom: 16 }}>
|
|
<Form.Item name="keyword" label="关键词">
|
|
<Input placeholder="标题/设备/描述" allowClear style={{ width: 200 }} />
|
|
</Form.Item>
|
|
<Form.Item name="status" label="状态">
|
|
<Select placeholder="选择状态" allowClear style={{ width: 120 }}>
|
|
<Option value="pending">待处理</Option>
|
|
<Option value="in_progress">处理中</Option>
|
|
<Option value="completed">已完成</Option>
|
|
<Option value="closed">已关闭</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="priority" label="优先级">
|
|
<Select placeholder="选择优先级" allowClear style={{ width: 100 }}>
|
|
<Option value="low">低</Option>
|
|
<Option value="medium">中</Option>
|
|
<Option value="high">高</Option>
|
|
<Option value="urgent">紧急</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item name="faultCategory" label="故障分类">
|
|
<Select placeholder="选择分类" allowClear style={{ width: 150 }}>
|
|
{categories.map(cat => (
|
|
<Option key={cat.categoryId} value={cat.name}>{cat.name}</Option>
|
|
))}
|
|
</Select>
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button type="primary" icon={<SearchOutlined />} htmlType="submit">
|
|
搜索
|
|
</Button>
|
|
<Button style={{ marginLeft: 8 }} onClick={handleReset}>
|
|
重置
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
|
|
<Table
|
|
columns={tableColumns}
|
|
dataSource={tickets}
|
|
rowKey="ticketId"
|
|
pagination={pagination}
|
|
loading={loading}
|
|
onChange={handleTableChange}
|
|
scroll={{ x: 1200 }}
|
|
columnsState={{
|
|
onChange: ({ visibleColumns }) => {
|
|
localStorage.setItem('ticketVisibleColumns', JSON.stringify(visibleColumns));
|
|
}
|
|
}}
|
|
/>
|
|
</Card>
|
|
|
|
<Modal
|
|
title={editingTicket ? '编辑工单' : '创建工单'}
|
|
open={modalVisible}
|
|
onCancel={handleCancel}
|
|
footer={null}
|
|
width={700}
|
|
>
|
|
<Form form={form} layout="vertical" onFinish={handleSubmit}>
|
|
{renderFormItems()}
|
|
<Form.Item>
|
|
<Space>
|
|
<Button type="primary" htmlType="submit">
|
|
{editingTicket ? '更新' : '创建'}
|
|
</Button>
|
|
<Button onClick={handleCancel}>取消</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title="处理工单"
|
|
open={processingModalVisible}
|
|
onCancel={() => setProcessingModalVisible(false)}
|
|
footer={null}
|
|
width={600}
|
|
>
|
|
<Form form={processForm} layout="vertical" onFinish={handleProcessSubmit}>
|
|
<Descriptions bordered column={1} style={{ marginBottom: 16 }}>
|
|
<Descriptions.Item label="工单编号">{selectedTicket?.ticketId}</Descriptions.Item>
|
|
<Descriptions.Item label="标题">{selectedTicket?.title}</Descriptions.Item>
|
|
<Descriptions.Item label="设备">{selectedTicket?.deviceName}</Descriptions.Item>
|
|
<Descriptions.Item label="故障描述">{selectedTicket?.description}</Descriptions.Item>
|
|
</Descriptions>
|
|
|
|
<Form.Item name="solution" label="处理方案" rules={[{ required: true }]}>
|
|
<TextArea rows={4} placeholder="请详细描述处理方案和步骤" />
|
|
</Form.Item>
|
|
|
|
<Form.Item name="result" label="处理结果" rules={[{ required: true }]}>
|
|
<Select placeholder="选择处理结果">
|
|
<Option value="resolved">问题已解决</Option>
|
|
<Option value="partially_resolved">部分解决</Option>
|
|
<Option value="unresolved">未解决</Option>
|
|
<Option value="escalated">需升级处理</Option>
|
|
</Select>
|
|
</Form.Item>
|
|
|
|
<Form.Item name="notes" label="备注">
|
|
<TextArea rows={2} placeholder="其他补充说明" />
|
|
</Form.Item>
|
|
|
|
<Form.Item name="usedParts" label="使用备件">
|
|
<Input placeholder="使用的备件信息（名称、数量）" />
|
|
</Form.Item>
|
|
|
|
<Form.Item>
|
|
<Space>
|
|
<Button type="primary" htmlType="submit" icon={<CheckCircleOutlined />}>
|
|
提交处理结果
|
|
</Button>
|
|
<Button onClick={() => setProcessingModalVisible(false)}>取消</Button>
|
|
</Space>
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
|
|
<Modal
|
|
title={`工单详情 - ${selectedTicket?.ticketId}`}
|
|
open={detailModalVisible}
|
|
onCancel={() => setDetailModalVisible(false)}
|
|
footer={[
|
|
<Button key="close" onClick={() => setDetailModalVisible(false)}>
|
|
关闭
|
|
</Button>,
|
|
selectedTicket?.status !== 'closed' && selectedTicket?.status !== 'completed' && (
|
|
<Button key="process" type="primary" icon={<ToolOutlined />} onClick={() => {
|
|
setDetailModalVisible(false);
|
|
handleProcess(selectedTicket);
|
|
}}>
|
|
处理工单
|
|
</Button>
|
|
)
|
|
]}
|
|
width={900}
|
|
>
|
|
{selectedTicket && (
|
|
<Tabs defaultActiveKey="info">
|
|
<TabPane tab="基本信息" key="info">
|
|
<Descriptions bordered column={2}>
|
|
<Descriptions.Item label="工单编号">{selectedTicket.ticketId}</Descriptions.Item>
|
|
<Descriptions.Item label="标题">{selectedTicket.title}</Descriptions.Item>
|
|
<Descriptions.Item label="设备名称">{selectedTicket.deviceName}</Descriptions.Item>
|
|
<Descriptions.Item label="设备序列号">{selectedTicket.serialNumber}</Descriptions.Item>
|
|
<Descriptions.Item label="故障分类">{selectedTicket.faultCategory}</Descriptions.Item>
|
|
<Descriptions.Item label="优先级">
|
|
<Tag color={getPriorityColor(selectedTicket.priority)}>
|
|
{getPriorityText(selectedTicket.priority)}
|
|
</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="状态">
|
|
<Tag color={getStatusColor(selectedTicket.status)}>
|
|
{getStatusText(selectedTicket.status)}
|
|
</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="报告人">{selectedTicket.reporterName}</Descriptions.Item>
|
|
<Descriptions.Item label="创建时间">
|
|
{selectedTicket.createdAt ? dayjs(selectedTicket.createdAt).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="期望完成时间">
|
|
{selectedTicket.expectedCompletionDate ? dayjs(selectedTicket.expectedCompletionDate).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="完成时间" span={2}>
|
|
{selectedTicket.completionDate ? dayjs(selectedTicket.completionDate).format('YYYY-MM-DD HH:mm:ss') : '-'}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="故障描述" span={2}>{selectedTicket.description || '-'}</Descriptions.Item>
|
|
<Descriptions.Item label="解决方案" span={2}>{selectedTicket.resolution || '-'}</Descriptions.Item>
|
|
<Descriptions.Item label="备注" span={2}>{selectedTicket.notes || '-'}</Descriptions.Item>
|
|
</Descriptions>
|
|
</TabPane>
|
|
|
|
<TabPane tab={`操作记录 (${operationRecords.length})`} key="operations">
|
|
<Timeline mode="left">
|
|
{operationRecords.map((record, index) => (
|
|
<Timeline.Item
|
|
key={index}
|
|
label={dayjs(record.createdAt).format('YYYY-MM-DD HH:mm:ss')}
|
|
color={record.operationType === 'create' ? 'green' :
|
|
record.operationType === 'complete' ? 'blue' :
|
|
record.operationType === 'close' ? 'gray' : 'orange'}
|
|
>
|
|
<div><strong>{record.operationType}</strong></div>
|
|
<div>操作人: {record.operatorName || '-'}</div>
|
|
<div>内容: {record.operationDescription || '-'}</div>
|
|
</Timeline.Item>
|
|
))}
|
|
{operationRecords.length === 0 && (
|
|
<p style={{ color: '#888' }}>暂无操作记录</p>
|
|
)}
|
|
</Timeline>
|
|
</TabPane>
|
|
</Tabs>
|
|
)}
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default React.memo(TicketManagement);
|