index.vue
2.83 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<script setup lang="ts">
import { Button } from 'ant-design-vue';
import { PermissionEnum, formSchemas } from './config';
import { TaskCard } from './components/TaskCard';
import { getTaskCenterList } from '/@/api/task';
import { DetailModal } from './components/DetailModal';
import { useModal } from '/@/components/Modal';
import { TaskRecordType } from '/@/api/task/model';
import { DataActionModeEnum } from '/@/enums/toolEnum';
import { Authority } from '/@/components/Authority';
import { RunTaskModal } from './components/RunTaskModal';
import { DetailDrawer } from './components/DetailDrawer';
import { useDrawer } from '/@/components/Drawer';
import { BasicCardList, useCardList } from '/@/components/CardList';
import { useI18n } from '/@/hooks/web/useI18n';
const [registerModal, { openModal }] = useModal();
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerRunTaskModal, { openModal: openRunTaskModal }] = useModal();
const { t } = useI18n();
const [registerCardList, { reload }] = useCardList({
title: t('taskCenter.task.centerListName'),
api: getTaskCenterList,
baseLayout: { col: 4, row: 4 },
useSearchForm: true,
formConfig: {
schemas: formSchemas,
labelWidth: 100,
baseColProps: { span: 8 },
},
beforeFetch: async (params: Recordable) => {
return { ...params };
},
});
const handleEdit = (record: TaskRecordType) => {
openModal(true, {
record,
mode: DataActionModeEnum.UPDATE,
} as ModalParamsType);
};
const handleRunTask = (record: TaskRecordType) => {
openRunTaskModal(true, record);
};
const handleDetail = (record: TaskRecordType) => {
openDrawer(true, { mode: DataActionModeEnum.READ, record } as ModalParamsType);
};
</script>
<template>
<section>
<BasicCardList class="flex-auto w-full" @register="registerCardList">
<template #toolbar>
<Authority :value="PermissionEnum.CREATE">
<Button
type="primary"
@click="openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType)"
>
{{ t('taskCenter.task.createTask') }}
</Button>
</Authority>
</template>
<template #renderItem="{ item }">
<TaskCard
:record="item"
:reload="reload"
@runTask="handleRunTask"
@detail="handleDetail"
@edit="handleEdit"
/>
</template>
</BasicCardList>
<DetailDrawer @register="registerDrawer" />
<DetailModal @register="registerModal" :reload="reload" />
<RunTaskModal :reload="reload" @register="registerRunTaskModal" />
</section>
</template>
<style lang="less" scoped>
.task-center-container {
:deep(.ant-list-header) {
border: none;
}
:deep(.ant-card-body) {
padding: 16px 24px;
}
}
</style>