|
1
|
1
|
<script lang="ts" setup>
|
|
2
|
|
- import { ReloadOutlined } from '@ant-design/icons-vue';
|
|
3
|
|
- import { Button, List, Tooltip } from 'ant-design-vue';
|
|
4
|
2
|
import { TaskCard } from '/@/views/task/center/components/TaskCard';
|
|
5
|
|
- import { reactive, ref, unref } from 'vue';
|
|
6
|
|
- import { PageWrapper } from '/@/components/Page';
|
|
7
|
|
- import { BasicForm, useForm } from '/@/components/Form';
|
|
8
|
3
|
import { formSchemas } from '/@/views/task/center/config';
|
|
9
|
4
|
import { getTaskCenterList } from '/@/api/task';
|
|
10
|
|
- import { onMounted } from 'vue';
|
|
11
|
|
- import { getBoundingClientRect } from '/@/utils/domUtils';
|
|
12
|
5
|
import { TaskRecordType } from '/@/api/task/model';
|
|
13
|
6
|
import { RunTaskModal } from '/@/views/task/center/components/RunTaskModal';
|
|
14
|
7
|
import { useModal } from '/@/components/Modal';
|
|
|
8
|
+ import { useCardList, BasicCardList } from '/@/components/CardList';
|
|
15
|
9
|
|
|
16
|
10
|
const props = defineProps<{
|
|
17
|
11
|
tbDeviceId: string;
|
|
18
|
12
|
}>();
|
|
19
|
13
|
|
|
20
|
|
- const listElRef = ref<Nullable<ComponentElRef>>(null);
|
|
21
|
|
-
|
|
22
|
14
|
const [registerRunTaskModal, { openModal }] = useModal();
|
|
23
|
15
|
|
|
24
|
|
- const [registerForm, { getFieldsValue }] = useForm({
|
|
25
|
|
- schemas: formSchemas,
|
|
26
|
|
- baseColProps: { span: 8 },
|
|
27
|
|
- compact: true,
|
|
28
|
|
- showAdvancedButton: true,
|
|
29
|
|
- labelWidth: 100,
|
|
30
|
|
- submitFunc: async () => {
|
|
31
|
|
- getDataSource();
|
|
|
16
|
+ const [registerCardList, { reload }] = useCardList({
|
|
|
17
|
+ title: '任务列表',
|
|
|
18
|
+ api: getTaskCenterList,
|
|
|
19
|
+ baseLayout: { col: 2, row: 2 },
|
|
|
20
|
+ useSearchForm: true,
|
|
|
21
|
+ formConfig: {
|
|
|
22
|
+ schemas: formSchemas,
|
|
|
23
|
+ labelWidth: 100,
|
|
|
24
|
+ baseColProps: { span: 8 },
|
|
32
|
25
|
},
|
|
33
|
|
- resetFunc: async () => {
|
|
34
|
|
- getDataSource(true);
|
|
|
26
|
+ offsetHeight: 16,
|
|
|
27
|
+ beforeFetch: async (params: Recordable) => {
|
|
|
28
|
+ return { ...params, tbDeviceId: props.tbDeviceId };
|
|
35
|
29
|
},
|
|
36
|
30
|
});
|
|
37
|
31
|
|
|
38
|
|
- const paginationChange = (page: number, pageSize: number) => {
|
|
39
|
|
- pagination.current = page - 1 * pageSize > pagination.total ? 1 : page;
|
|
40
|
|
- pagination.pageSize = pageSize;
|
|
41
|
|
- getDataSource();
|
|
42
|
|
- };
|
|
43
|
|
-
|
|
44
|
|
- const pagination = reactive({
|
|
45
|
|
- current: 1,
|
|
46
|
|
- pageSize: 10,
|
|
47
|
|
- total: 0,
|
|
48
|
|
- showQuickJumper: true,
|
|
49
|
|
- size: 'small',
|
|
50
|
|
- showTotal: (total: number) => `共 ${total} 条数据`,
|
|
51
|
|
- onChange: paginationChange,
|
|
52
|
|
- onShowSizeChange: paginationChange,
|
|
53
|
|
- });
|
|
54
|
|
-
|
|
55
|
|
- const dataSource = ref<TaskRecordType[]>([]);
|
|
56
|
|
- const loading = ref(false);
|
|
57
|
|
-
|
|
58
|
|
- const getDataSource = async (reset = false) => {
|
|
59
|
|
- try {
|
|
60
|
|
- loading.value = true;
|
|
61
|
|
- const params = getFieldsValue() || {};
|
|
62
|
|
- const { items, total } = await getTaskCenterList({
|
|
63
|
|
- page: pagination.current,
|
|
64
|
|
- pageSize: pagination.pageSize,
|
|
65
|
|
- tbDeviceId: props.tbDeviceId,
|
|
66
|
|
- ...(reset ? {} : params),
|
|
67
|
|
- });
|
|
68
|
|
- pagination.total = total;
|
|
69
|
|
- dataSource.value = items;
|
|
70
|
|
- } catch (error) {
|
|
71
|
|
- throw error;
|
|
72
|
|
- } finally {
|
|
73
|
|
- loading.value = false;
|
|
74
|
|
- }
|
|
75
|
|
- };
|
|
76
|
|
-
|
|
77
|
|
- const reload = () => getDataSource();
|
|
78
|
|
-
|
|
79
|
|
- const setListHeight = () => {
|
|
80
|
|
- const clientHeight = document.documentElement.clientHeight;
|
|
81
|
|
- const rect = getBoundingClientRect(unref(listElRef)!.$el!) as DOMRect;
|
|
82
|
|
- // margin-top 24 height 24
|
|
83
|
|
- const paginationHeight = 24 + 24 + 8;
|
|
84
|
|
- // list pading top 8 maring-top 8 extra slot 56
|
|
85
|
|
- const listContainerMarginBottom = 8 + 8 + 72;
|
|
86
|
|
- const listContainerHeight =
|
|
87
|
|
- clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
|
|
88
|
|
- const listContainerEl = (unref(listElRef)!.$el as HTMLElement).querySelector(
|
|
89
|
|
- '.ant-spin-container'
|
|
90
|
|
- ) as HTMLElement;
|
|
91
|
|
- listContainerEl &&
|
|
92
|
|
- (listContainerEl.style.height = listContainerHeight + 'px') &&
|
|
93
|
|
- (listContainerEl.style.overflowY = 'auto') &&
|
|
94
|
|
- (listContainerEl.style.overflowX = 'hidden');
|
|
95
|
|
- };
|
|
96
|
|
-
|
|
97
|
32
|
const handleRunTask = (record: TaskRecordType) => {
|
|
98
|
33
|
openModal(true, record);
|
|
99
|
34
|
};
|
|
100
|
|
-
|
|
101
|
|
- onMounted(() => {
|
|
102
|
|
- setListHeight();
|
|
103
|
|
- getDataSource();
|
|
104
|
|
- });
|
|
105
|
35
|
</script>
|
|
106
|
36
|
|
|
107
|
37
|
<template>
|
|
108
|
|
- <PageWrapper
|
|
|
38
|
+ <!-- <PageWrapper
|
|
109
|
39
|
class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 device-task-list-container"
|
|
110
|
|
- >
|
|
111
|
|
- <section
|
|
112
|
|
- class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
|
|
113
|
|
- >
|
|
114
|
|
- <BasicForm @register="registerForm" />
|
|
115
|
|
- </section>
|
|
116
|
|
- <section class="bg-light-50 my-4 p-4 x dark:text-gray-300 dark:bg-dark-900">
|
|
117
|
|
- <List
|
|
118
|
|
- ref="listElRef"
|
|
119
|
|
- :dataSource="dataSource"
|
|
120
|
|
- :pagination="pagination"
|
|
121
|
|
- :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3, column: 3 }"
|
|
122
|
|
- :loading="loading"
|
|
123
|
|
- >
|
|
124
|
|
- <template #header>
|
|
125
|
|
- <section class="flex justify-between gap-4 min-h-12 items-center">
|
|
126
|
|
- <div class="text-lg font-semibold">
|
|
127
|
|
- <span>任务列表</span>
|
|
128
|
|
- </div>
|
|
129
|
|
- <Tooltip title="刷新">
|
|
130
|
|
- <Button type="primary" @click="getDataSource">
|
|
131
|
|
- <ReloadOutlined :spin="loading" />
|
|
132
|
|
- </Button>
|
|
133
|
|
- </Tooltip>
|
|
134
|
|
- </section>
|
|
135
|
|
- </template>
|
|
136
|
|
- <template #renderItem="{ item }">
|
|
137
|
|
- <List.Item :key="item.id">
|
|
138
|
|
- <TaskCard
|
|
139
|
|
- :record="item"
|
|
140
|
|
- :reload="reload"
|
|
141
|
|
- :tbDeviceId="tbDeviceId"
|
|
142
|
|
- :deviceTaskCardMode="true"
|
|
143
|
|
- @runTask="handleRunTask"
|
|
144
|
|
- />
|
|
145
|
|
- </List.Item>
|
|
146
|
|
- </template>
|
|
147
|
|
- </List>
|
|
148
|
|
- <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
|
|
149
|
|
- </section>
|
|
150
|
|
- </PageWrapper>
|
|
|
40
|
+ > -->
|
|
|
41
|
+ <section class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 device-task-list-container">
|
|
|
42
|
+ <BasicCardList class="flex-auto w-full" @register="registerCardList">
|
|
|
43
|
+ <template #renderItem="{ item }">
|
|
|
44
|
+ <TaskCard
|
|
|
45
|
+ :record="item"
|
|
|
46
|
+ :reload="reload"
|
|
|
47
|
+ :tbDeviceId="tbDeviceId"
|
|
|
48
|
+ :deviceTaskCardMode="true"
|
|
|
49
|
+ @runTask="handleRunTask"
|
|
|
50
|
+ />
|
|
|
51
|
+ </template>
|
|
|
52
|
+ </BasicCardList>
|
|
|
53
|
+ <RunTaskModal :reload="reload" @register="registerRunTaskModal" />
|
|
|
54
|
+ </section>
|
|
|
55
|
+ <!-- </PageWrapper> -->
|
|
151
|
56
|
</template>
|
|
152
|
57
|
|
|
153
|
58
|
<style lang="less" scoped>
|
|
...
|
...
|
@@ -156,8 +61,8 @@ |
|
156
|
61
|
border: none;
|
|
157
|
62
|
}
|
|
158
|
63
|
|
|
159
|
|
- :deep(.ant-card-body) {
|
|
160
|
|
- padding: 16px 24px;
|
|
161
|
|
- }
|
|
|
64
|
+ // :deep(.ant-card-body) {
|
|
|
65
|
+ // padding: 16px 24px;
|
|
|
66
|
+ // }
|
|
162
|
67
|
}
|
|
163
|
68
|
</style> |
...
|
...
|
|
