129 lines
3.0 KiB
React
129 lines
3.0 KiB
React
|
import { NDataTable, NIcon, NButton } from 'naive-ui'
|
||
|
|
import { getTask } from '@/api/gantt'
|
||
|
|
import {
|
||
|
|
HelpCircleOutline,
|
||
|
|
CreateOutline,
|
||
|
|
TrashBinOutline,
|
||
|
|
AddCircleOutline,
|
||
|
|
EnterOutline,
|
||
|
|
} from '@vicons/ionicons5'
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
setup() {
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: '任务名称/事件名称',
|
||
|
|
key: 'name',
|
||
|
|
width: 220,
|
||
|
|
render: row => {
|
||
|
|
return (
|
||
|
|
<div class="inline-flex items-center gap-2">
|
||
|
|
<NIcon>
|
||
|
|
<HelpCircleOutline />
|
||
|
|
</NIcon>
|
||
|
|
{row.name}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '开始时间',
|
||
|
|
key: 'start',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '结束时间',
|
||
|
|
key: 'end',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '类型',
|
||
|
|
key: 'type',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '图片',
|
||
|
|
key: 'avatar',
|
||
|
|
render(row) {
|
||
|
|
if (row.avatar) {
|
||
|
|
return <img src={row.avatar} width="50" alt="" />
|
||
|
|
} else {
|
||
|
|
return <span>-</span>
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '操作',
|
||
|
|
key: 'action',
|
||
|
|
render(row) {
|
||
|
|
return (
|
||
|
|
<div class="flex justify-end">
|
||
|
|
{row.type === 'task' ? (
|
||
|
|
<>
|
||
|
|
<NButton
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
quaternary
|
||
|
|
onClick={() => handleEdit(row)}
|
||
|
|
>
|
||
|
|
<NIcon>
|
||
|
|
<EnterOutline />
|
||
|
|
</NIcon>
|
||
|
|
</NButton>
|
||
|
|
<NButton
|
||
|
|
type="primary"
|
||
|
|
size="small"
|
||
|
|
quaternary
|
||
|
|
onClick={() => handleEdit(row)}
|
||
|
|
>
|
||
|
|
<NIcon>
|
||
|
|
<CreateOutline />
|
||
|
|
</NIcon>
|
||
|
|
</NButton>
|
||
|
|
</>
|
||
|
|
) : null}
|
||
|
|
{/* {!row.avatar ? (
|
||
|
|
<NButton
|
||
|
|
type="success"
|
||
|
|
size="small"
|
||
|
|
quaternary
|
||
|
|
onClick={() => handleEdit(row)}
|
||
|
|
>
|
||
|
|
<NIcon>
|
||
|
|
<AddCircleOutline />
|
||
|
|
</NIcon>
|
||
|
|
</NButton>
|
||
|
|
) : (
|
||
|
|
<></>
|
||
|
|
)} */}
|
||
|
|
|
||
|
|
<NButton
|
||
|
|
type="error"
|
||
|
|
size="small"
|
||
|
|
quaternary
|
||
|
|
onClick={() => handleEdit(row)}
|
||
|
|
>
|
||
|
|
<NIcon>
|
||
|
|
<TrashBinOutline />
|
||
|
|
</NIcon>
|
||
|
|
</NButton>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
]
|
||
|
|
const tableData = ref([])
|
||
|
|
onMounted(async () => {
|
||
|
|
const res = await getTask()
|
||
|
|
tableData.value = res
|
||
|
|
})
|
||
|
|
|
||
|
|
return () => (
|
||
|
|
<NDataTable
|
||
|
|
class="h-full"
|
||
|
|
flex-height
|
||
|
|
columns={columns}
|
||
|
|
data={tableData.value}
|
||
|
|
row-key={row => row.name}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
})
|