140 lines
5.3 KiB
TypeScript
140 lines
5.3 KiB
TypeScript
import { h } from 'vue'
|
|
import { Tag, Button, Dropdown, Message } from '@arco-design/web-vue'
|
|
import { IconEdit, IconDelete, IconMore, IconCheckCircle } from '@arco-design/web-vue/es/icon'
|
|
|
|
// 工单状态映射
|
|
const statusMap = {
|
|
pending: { text: '待接单', color: 'blue' },
|
|
accepted: { text: '已接单', color: 'cyan' },
|
|
processing: { text: '处理中', color: 'orange' },
|
|
suspended: { text: '已挂起', color: 'gray' },
|
|
resolved: { text: '已解决', color: 'green' },
|
|
closed: { text: '已关闭', color: 'red' },
|
|
cancelled: { text: '已撤回', color: 'red' },
|
|
}
|
|
|
|
// 工单类型映射
|
|
const typeMap = {
|
|
incident: { text: '故障', color: 'red' },
|
|
request: { text: '请求', color: 'blue' },
|
|
question: { text: '问题', color: 'orange' },
|
|
other: { text: '其他', color: 'gray' },
|
|
}
|
|
|
|
// 优先级映射
|
|
const priorityMap = {
|
|
low: { text: '低', color: 'gray' },
|
|
medium: { text: '中', color: 'blue' },
|
|
high: { text: '高', color: 'orange' },
|
|
urgent: { text: '紧急', color: 'red' },
|
|
}
|
|
|
|
// 生成表格列配置
|
|
export const generateColumns = (
|
|
tabType: 'my-created' | 'pending',
|
|
handlers: {
|
|
onDetail: (record: any) => void
|
|
onEdit?: (record: any) => void
|
|
onTransfer?: (record: any) => void
|
|
onSuspend?: (record: any) => void
|
|
onResume?: (record: any) => void
|
|
onResolve?: (record: any) => void
|
|
onCancel?: (record: any) => void
|
|
onComment?: (record: any) => void
|
|
onDelete?: (record: any) => void
|
|
onClose?: (record: any) => void
|
|
}
|
|
) => {
|
|
const baseColumns = [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
width: 80,
|
|
render: ({ rowIndex }: { rowIndex: number }) => rowIndex + 1,
|
|
},
|
|
{
|
|
title: '工单编号',
|
|
dataIndex: 'ticket_no',
|
|
width: 160,
|
|
},
|
|
{
|
|
title: '工单标题',
|
|
dataIndex: 'title',
|
|
width: 200,
|
|
ellipsis: true,
|
|
tooltip: true,
|
|
},
|
|
{
|
|
title: '工单类型',
|
|
dataIndex: 'type',
|
|
width: 100,
|
|
render: ({ record }: { record: any }) => {
|
|
const type = typeMap[record.type as keyof typeof typeMap] || typeMap.other
|
|
return h(Tag, { color: type.color }, { default: () => type.text })
|
|
},
|
|
},
|
|
{
|
|
title: '工单状态',
|
|
dataIndex: 'status',
|
|
width: 100,
|
|
render: ({ record }: { record: any }) => {
|
|
const status = statusMap[record.status as keyof typeof statusMap] || { text: record.status, color: 'gray' }
|
|
return h(Tag, { color: status.color }, { default: () => status.text })
|
|
},
|
|
},
|
|
{
|
|
title: '优先级',
|
|
dataIndex: 'priority',
|
|
width: 100,
|
|
render: ({ record }: { record: any }) => {
|
|
const priority = priorityMap[record.priority as keyof typeof priorityMap] || { text: record.priority, color: 'gray' }
|
|
return h(Tag, { color: priority.color }, { default: () => priority.text })
|
|
},
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
width: tabType === 'pending' ? 280 : 300,
|
|
fixed: 'right' as const,
|
|
render: ({ record }: { record: any }) => {
|
|
if (tabType === 'pending') {
|
|
// 待处理选项卡的操作按钮
|
|
return h(
|
|
'div',
|
|
{ style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
|
|
[
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onDetail(record) }, { default: () => '详情' }),
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onTransfer?.(record) }, { default: () => '转交' }),
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onSuspend?.(record) }, { default: () => '挂起' }),
|
|
record.status === 'suspended' &&
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onResume?.(record) }, { default: () => '重启' }),
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onResolve?.(record) }, { default: () => '解决' }),
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onClose?.(record) }, { default: () => '关闭' }),
|
|
]
|
|
)
|
|
} else {
|
|
// 我创建的选项卡的操作按钮
|
|
const isCompleted = ['resolved', 'closed'].includes(record.status)
|
|
const isResolved = record.status === 'resolved'
|
|
|
|
return h(
|
|
'div',
|
|
{ style: { display: 'flex', gap: '8px', flexWrap: 'wrap' } },
|
|
[
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onDetail(record) }, { default: () => '详情' }),
|
|
!isCompleted &&
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onEdit?.(record) }, { default: () => '编辑' }),
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onCancel?.(record) }, { default: () => '撤回' }),
|
|
isResolved && h(Button, { size: 'small', type: 'text', onClick: () => handlers.onComment?.(record) }, { default: () => '评论' }),
|
|
h(Button, { size: 'small', type: 'text', status: 'danger', onClick: () => handlers.onDelete?.(record) }, { default: () => '删除' }),
|
|
h(Button, { size: 'small', type: 'text', onClick: () => handlers.onClose?.(record) }, { default: () => '关闭' }),
|
|
]
|
|
)
|
|
}
|
|
},
|
|
},
|
|
]
|
|
|
|
return baseColumns
|
|
}
|