Commit 7f47e52238dbf02736a6b1baba0da21b074b5836

Authored by fengwotao
1 parent ffcca869

fix:修复组态中心和大屏设计器列表右上角点击刷新按钮请求两次问题

1 -<script setup lang="ts">  
2 - import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';  
3 - import { ReloadOutlined } from '@ant-design/icons-vue';  
4 - import { computed, onMounted, reactive, ref, unref } from 'vue';  
5 - import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';  
6 - import {  
7 - deleteConfigurationCenter,  
8 - getPage,  
9 - } from '/@/api/configuration/center/configurationCenter';  
10 - import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';  
11 - import { PageWrapper } from '/@/components/Page';  
12 - import { BasicForm, useForm } from '/@/components/Form';  
13 - import { ConfigurationPermission, searchFormSchema } from './center.data';  
14 - import { useMessage } from '/@/hooks/web/useMessage';  
15 - import { Authority } from '/@/components/Authority';  
16 - import { isDevMode } from '/@/utils/env';  
17 - import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';  
18 - import { useDrawer } from '/@/components/Drawer';  
19 - import { getBoundingClientRect } from '/@/utils/domUtils';  
20 - import configurationSrc from '/@/assets/icons/configuration.svg';  
21 - import { cloneDeep } from 'lodash';  
22 - import { usePermission } from '/@/hooks/web/usePermission';  
23 - import { useGlobSetting } from '/@/hooks/setting';  
24 - import { AuthIcon, CardLayoutButton } from '/@/components/Widget';  
25 - import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';  
26 -  
27 - const listColumn = ref(5);  
28 -  
29 - const { createMessage } = useMessage();  
30 -  
31 - const organizationId = ref<Nullable<number>>(null);  
32 -  
33 - const pagination = reactive<PaginationProps>({  
34 - size: 'small',  
35 - showTotal: (total: number) => `共 ${total} 条数据`,  
36 - current: 1,  
37 - pageSize: unref(listColumn) * 2,  
38 - onChange: (page: number) => {  
39 - pagination.current = page;  
40 - getListData();  
41 - },  
42 - });  
43 -  
44 - const loading = ref(false);  
45 -  
46 - const dataSource = ref<ConfigurationCenterItemsModal[]>([]);  
47 -  
48 - const [registerForm, { getFieldsValue }] = useForm({  
49 - schemas: searchFormSchema,  
50 - showAdvancedButton: true,  
51 - labelWidth: 100,  
52 - compact: true,  
53 - resetFunc: () => {  
54 - resetFn();  
55 - organizationId.value = null;  
56 - return getListData();  
57 - },  
58 - submitFunc: async () => {  
59 - const value = getFieldsValue();  
60 - getListData(value);  
61 - },  
62 - });  
63 -  
64 - async function getListData(value: Recordable = {}) {  
65 - try {  
66 - loading.value = true;  
67 - const pageSize = unref(listColumn) * 2;  
68 - const { items, total } = await getPage({  
69 - organizationId: unref(organizationId),  
70 - ...value,  
71 - page: pagination.current!,  
72 - pageSize,  
73 - });  
74 -  
75 - dataSource.value = items;  
76 - Object.assign(pagination, { total, pageSize });  
77 - } catch (error) {  
78 - } finally {  
79 - loading.value = false;  
80 - }  
81 - }  
82 -  
83 - onMounted(() => {  
84 - getListData();  
85 - });  
86 -  
87 - const searchInfo = reactive<Recordable>({});  
88 - const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);  
89 - const handleSelect = (orgId: number) => {  
90 - organizationId.value = orgId;  
91 - getListData();  
92 - };  
93 -  
94 - const [registerDrawer, { openDrawer }] = useDrawer();  
95 -  
96 - const { hasPermission } = usePermission();  
97 -  
98 - const getPreviewFlag = computed(() => {  
99 - return hasPermission(ConfigurationPermission.PREVIEW);  
100 - });  
101 -  
102 - const getDesignFlag = computed(() => {  
103 - return hasPermission(ConfigurationPermission.DESIGN);  
104 - });  
105 -  
106 - const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {  
107 - if (record) {  
108 - openDrawer(true, {  
109 - isUpdate: true,  
110 - record: cloneDeep(record),  
111 - });  
112 - } else {  
113 - openDrawer(true, {  
114 - isUpdate: false,  
115 - });  
116 - }  
117 - };  
118 -  
119 - const { configurationPrefix } = useGlobSetting();  
120 - const isDev = isDevMode();  
121 -  
122 - const handlePreview = (record: ConfigurationCenterItemsModal) => {  
123 - if (!unref(getPreviewFlag)) return;  
124 - window.open(  
125 - `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`  
126 - );  
127 - };  
128 -  
129 - const handleDesign = (record: ConfigurationCenterItemsModal) => {  
130 - if (!unref(getDesignFlag)) return;  
131 - window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);  
132 - };  
133 -  
134 - const handleDelete = async (record: ConfigurationCenterItemsModal) => {  
135 - try {  
136 - await deleteConfigurationCenter([record.id]);  
137 - createMessage.success('删除成功');  
138 - await getListData();  
139 - } catch (error) {}  
140 - };  
141 -  
142 - const handleCardLayoutChange = () => {  
143 - pagination.current = 1;  
144 - getListData();  
145 - };  
146 -  
147 - const listEl = ref<Nullable<ComponentElRef>>(null);  
148 -  
149 - onMounted(() => {  
150 - const clientHeight = document.documentElement.clientHeight;  
151 - const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;  
152 - // margin-top 24 height 24  
153 - const paginationHeight = 24 + 24 + 8;  
154 - // list pading top 8 maring-top 8 extra slot 56  
155 - const listContainerMarginBottom = 8 + 8 + 56;  
156 - const listContainerHeight =  
157 - clientHeight - rect.top - paginationHeight - listContainerMarginBottom;  
158 - const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(  
159 - '.ant-spin-container'  
160 - ) as HTMLElement;  
161 - listContainerEl &&  
162 - (listContainerEl.style.height = listContainerHeight + 'px') &&  
163 - (listContainerEl.style.overflowY = 'auto') &&  
164 - (listContainerEl.style.overflowX = 'hidden');  
165 - });  
166 -</script>  
167 -  
168 -<template>  
169 - <PageWrapper dense contentFullHeight contentClass="flex">  
170 - <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />  
171 - <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">  
172 - <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">  
173 - <BasicForm @register="registerForm" />  
174 - </div>  
175 - <List  
176 - ref="listEl"  
177 - :loading="loading"  
178 - class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"  
179 - position="bottom"  
180 - :pagination="pagination"  
181 - :data-source="dataSource"  
182 - :grid="{ gutter: 4, column: listColumn }"  
183 - >  
184 - <template #header>  
185 - <div class="flex gap-3 justify-end">  
186 - <Authority :value="ConfigurationPermission.CREATE">  
187 - <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>  
188 - </Authority>  
189 - <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />  
190 - <Tooltip title="刷新">  
191 - <Button type="primary" @click="getListData">  
192 - <ReloadOutlined @click="getListData" />  
193 - </Button>  
194 - </Tooltip>  
195 - </div>  
196 - </template>  
197 - <template #renderItem="{ item }">  
198 - <List.Item>  
199 - <Card hoverable>  
200 - <template #cover>  
201 - <div class="h-full w-full !flex justify-center items-center text-center p-1">  
202 - <img  
203 - class="w-full h-36"  
204 - alt="example"  
205 - :src="item.thumbnail || configurationSrc"  
206 - @click="handlePreview(item)"  
207 - />  
208 - </div>  
209 - </template>  
210 - <template class="ant-card-actions" #actions>  
211 - <Tooltip title="预览">  
212 - <AuthIcon  
213 - :auth="ConfigurationPermission.PREVIEW"  
214 - class="!text-lg"  
215 - icon="ant-design:eye-outlined"  
216 - @click="handlePreview(item)"  
217 - />  
218 - </Tooltip>  
219 - <Tooltip title="设计">  
220 - <AuthIcon  
221 - :auth="ConfigurationPermission.DESIGN"  
222 - class="!text-lg"  
223 - icon="ant-design:edit-outlined"  
224 - @click="handleDesign(item)"  
225 - />  
226 - </Tooltip>  
227 - <AuthDropDown  
228 - :dropMenuList="[  
229 - {  
230 - text: '编辑',  
231 - auth: ConfigurationPermission.UPDATE,  
232 - icon: 'clarity:note-edit-line',  
233 - event: '',  
234 - onClick: handleCreateOrUpdate.bind(null, item),  
235 - },  
236 - {  
237 - text: '删除',  
238 - auth: ConfigurationPermission.DELETE,  
239 - icon: 'ant-design:delete-outlined',  
240 - event: '',  
241 - popconfirm: {  
242 - title: '是否确认删除操作?',  
243 - onConfirm: handleDelete.bind(null, item),  
244 - },  
245 - },  
246 - ]"  
247 - :trigger="['hover']"  
248 - />  
249 - </template>  
250 - <Card.Meta>  
251 - <template #title>  
252 - <span class="truncate">{{ item.name }}</span>  
253 - </template>  
254 - <template #description>  
255 - <div class="truncate h-11">  
256 - <div class="truncate">{{ item.organizationDTO.name }}</div>  
257 - <div class="truncate">{{ item.remark || '' }} </div>  
258 - </div>  
259 - </template>  
260 - </Card.Meta>  
261 - </Card>  
262 - </List.Item>  
263 - </template>  
264 - </List>  
265 - </section>  
266 - <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />  
267 - </PageWrapper>  
268 -</template>  
269 -  
270 -<style lang="less" scoped>  
271 - .configuration-list:deep(.ant-list-header) {  
272 - border-bottom: none !important;  
273 - }  
274 -  
275 - .configuration-list:deep(.ant-list-pagination) {  
276 - height: 24px;  
277 - }  
278 -  
279 - .configuration-list:deep(.ant-card-body) {  
280 - padding: 16px !important;  
281 - }  
282 -  
283 - .configuration-list:deep(.ant-list-empty-text) {  
284 - @apply w-full h-full flex justify-center items-center;  
285 - }  
286 -</style> 1 +<script setup lang="ts">
  2 + import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
  3 + import { ReloadOutlined } from '@ant-design/icons-vue';
  4 + import { computed, onMounted, reactive, ref, unref } from 'vue';
  5 + import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
  6 + import {
  7 + deleteConfigurationCenter,
  8 + getPage,
  9 + } from '/@/api/configuration/center/configurationCenter';
  10 + import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
  11 + import { PageWrapper } from '/@/components/Page';
  12 + import { BasicForm, useForm } from '/@/components/Form';
  13 + import { ConfigurationPermission, searchFormSchema } from './center.data';
  14 + import { useMessage } from '/@/hooks/web/useMessage';
  15 + import { Authority } from '/@/components/Authority';
  16 + import { isDevMode } from '/@/utils/env';
  17 + import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
  18 + import { useDrawer } from '/@/components/Drawer';
  19 + import { getBoundingClientRect } from '/@/utils/domUtils';
  20 + import configurationSrc from '/@/assets/icons/configuration.svg';
  21 + import { cloneDeep } from 'lodash';
  22 + import { usePermission } from '/@/hooks/web/usePermission';
  23 + import { useGlobSetting } from '/@/hooks/setting';
  24 + import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
  25 + import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
  26 +
  27 + const listColumn = ref(5);
  28 +
  29 + const { createMessage } = useMessage();
  30 +
  31 + const organizationId = ref<Nullable<number>>(null);
  32 +
  33 + const pagination = reactive<PaginationProps>({
  34 + size: 'small',
  35 + showTotal: (total: number) => `共 ${total} 条数据`,
  36 + current: 1,
  37 + pageSize: unref(listColumn) * 2,
  38 + onChange: (page: number) => {
  39 + pagination.current = page;
  40 + getListData();
  41 + },
  42 + });
  43 +
  44 + const loading = ref(false);
  45 +
  46 + const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
  47 +
  48 + const [registerForm, { getFieldsValue }] = useForm({
  49 + schemas: searchFormSchema,
  50 + showAdvancedButton: true,
  51 + labelWidth: 100,
  52 + compact: true,
  53 + resetFunc: () => {
  54 + resetFn();
  55 + organizationId.value = null;
  56 + return getListData();
  57 + },
  58 + submitFunc: async () => {
  59 + const value = getFieldsValue();
  60 + getListData(value);
  61 + },
  62 + });
  63 +
  64 + async function getListData(value: Recordable = {}) {
  65 + try {
  66 + loading.value = true;
  67 + const pageSize = unref(listColumn) * 2;
  68 + const { items, total } = await getPage({
  69 + organizationId: unref(organizationId),
  70 + ...value,
  71 + page: pagination.current!,
  72 + pageSize,
  73 + });
  74 +
  75 + dataSource.value = items;
  76 + Object.assign(pagination, { total, pageSize });
  77 + } catch (error) {
  78 + } finally {
  79 + loading.value = false;
  80 + }
  81 + }
  82 +
  83 + onMounted(() => {
  84 + getListData();
  85 + });
  86 +
  87 + const searchInfo = reactive<Recordable>({});
  88 + const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
  89 + const handleSelect = (orgId: number) => {
  90 + organizationId.value = orgId;
  91 + getListData();
  92 + };
  93 +
  94 + const [registerDrawer, { openDrawer }] = useDrawer();
  95 +
  96 + const { hasPermission } = usePermission();
  97 +
  98 + const getPreviewFlag = computed(() => {
  99 + return hasPermission(ConfigurationPermission.PREVIEW);
  100 + });
  101 +
  102 + const getDesignFlag = computed(() => {
  103 + return hasPermission(ConfigurationPermission.DESIGN);
  104 + });
  105 +
  106 + const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
  107 + if (record) {
  108 + openDrawer(true, {
  109 + isUpdate: true,
  110 + record: cloneDeep(record),
  111 + });
  112 + } else {
  113 + openDrawer(true, {
  114 + isUpdate: false,
  115 + });
  116 + }
  117 + };
  118 +
  119 + const { configurationPrefix } = useGlobSetting();
  120 + const isDev = isDevMode();
  121 +
  122 + const handlePreview = (record: ConfigurationCenterItemsModal) => {
  123 + if (!unref(getPreviewFlag)) return;
  124 + window.open(
  125 + `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}&lightbox=1`
  126 + );
  127 + };
  128 +
  129 + const handleDesign = (record: ConfigurationCenterItemsModal) => {
  130 + if (!unref(getDesignFlag)) return;
  131 + window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
  132 + };
  133 +
  134 + const handleDelete = async (record: ConfigurationCenterItemsModal) => {
  135 + try {
  136 + await deleteConfigurationCenter([record.id]);
  137 + createMessage.success('删除成功');
  138 + await getListData();
  139 + } catch (error) {}
  140 + };
  141 +
  142 + const handleCardLayoutChange = () => {
  143 + pagination.current = 1;
  144 + getListData();
  145 + };
  146 +
  147 + const listEl = ref<Nullable<ComponentElRef>>(null);
  148 +
  149 + onMounted(() => {
  150 + const clientHeight = document.documentElement.clientHeight;
  151 + const rect = getBoundingClientRect(unref(listEl)!.$el!) as DOMRect;
  152 + // margin-top 24 height 24
  153 + const paginationHeight = 24 + 24 + 8;
  154 + // list pading top 8 maring-top 8 extra slot 56
  155 + const listContainerMarginBottom = 8 + 8 + 56;
  156 + const listContainerHeight =
  157 + clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
  158 + const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
  159 + '.ant-spin-container'
  160 + ) as HTMLElement;
  161 + listContainerEl &&
  162 + (listContainerEl.style.height = listContainerHeight + 'px') &&
  163 + (listContainerEl.style.overflowY = 'auto') &&
  164 + (listContainerEl.style.overflowX = 'hidden');
  165 + });
  166 +</script>
  167 +
  168 +<template>
  169 + <PageWrapper dense contentFullHeight contentClass="flex">
  170 + <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
  171 + <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
  172 + <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
  173 + <BasicForm @register="registerForm" />
  174 + </div>
  175 + <List
  176 + ref="listEl"
  177 + :loading="loading"
  178 + class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
  179 + position="bottom"
  180 + :pagination="pagination"
  181 + :data-source="dataSource"
  182 + :grid="{ gutter: 4, column: listColumn }"
  183 + >
  184 + <template #header>
  185 + <div class="flex gap-3 justify-end">
  186 + <Authority :value="ConfigurationPermission.CREATE">
  187 + <Button type="primary" @click="handleCreateOrUpdate()">新增组态</Button>
  188 + </Authority>
  189 + <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
  190 + <Tooltip title="刷新">
  191 + <Button type="primary" @click="getListData">
  192 + <ReloadOutlined />
  193 + </Button>
  194 + </Tooltip>
  195 + </div>
  196 + </template>
  197 + <template #renderItem="{ item }">
  198 + <List.Item>
  199 + <Card hoverable>
  200 + <template #cover>
  201 + <div class="h-full w-full !flex justify-center items-center text-center p-1">
  202 + <img
  203 + class="w-full h-36"
  204 + alt="example"
  205 + :src="item.thumbnail || configurationSrc"
  206 + @click="handlePreview(item)"
  207 + />
  208 + </div>
  209 + </template>
  210 + <template class="ant-card-actions" #actions>
  211 + <Tooltip title="预览">
  212 + <AuthIcon
  213 + :auth="ConfigurationPermission.PREVIEW"
  214 + class="!text-lg"
  215 + icon="ant-design:eye-outlined"
  216 + @click="handlePreview(item)"
  217 + />
  218 + </Tooltip>
  219 + <Tooltip title="设计">
  220 + <AuthIcon
  221 + :auth="ConfigurationPermission.DESIGN"
  222 + class="!text-lg"
  223 + icon="ant-design:edit-outlined"
  224 + @click="handleDesign(item)"
  225 + />
  226 + </Tooltip>
  227 + <AuthDropDown
  228 + :dropMenuList="[
  229 + {
  230 + text: '编辑',
  231 + auth: ConfigurationPermission.UPDATE,
  232 + icon: 'clarity:note-edit-line',
  233 + event: '',
  234 + onClick: handleCreateOrUpdate.bind(null, item),
  235 + },
  236 + {
  237 + text: '删除',
  238 + auth: ConfigurationPermission.DELETE,
  239 + icon: 'ant-design:delete-outlined',
  240 + event: '',
  241 + popconfirm: {
  242 + title: '是否确认删除操作?',
  243 + onConfirm: handleDelete.bind(null, item),
  244 + },
  245 + },
  246 + ]"
  247 + :trigger="['hover']"
  248 + />
  249 + </template>
  250 + <Card.Meta>
  251 + <template #title>
  252 + <span class="truncate">{{ item.name }}</span>
  253 + </template>
  254 + <template #description>
  255 + <div class="truncate h-11">
  256 + <div class="truncate">{{ item.organizationDTO.name }}</div>
  257 + <div class="truncate">{{ item.remark || '' }} </div>
  258 + </div>
  259 + </template>
  260 + </Card.Meta>
  261 + </Card>
  262 + </List.Item>
  263 + </template>
  264 + </List>
  265 + </section>
  266 + <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
  267 + </PageWrapper>
  268 +</template>
  269 +
  270 +<style lang="less" scoped>
  271 + .configuration-list:deep(.ant-list-header) {
  272 + border-bottom: none !important;
  273 + }
  274 +
  275 + .configuration-list:deep(.ant-list-pagination) {
  276 + height: 24px;
  277 + }
  278 +
  279 + .configuration-list:deep(.ant-card-body) {
  280 + padding: 16px !important;
  281 + }
  282 +
  283 + .configuration-list:deep(.ant-list-empty-text) {
  284 + @apply w-full h-full flex justify-center items-center;
  285 + }
  286 +</style>
@@ -169,7 +169,7 @@ @@ -169,7 +169,7 @@
169 <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" /> 169 <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
170 <Tooltip title="刷新"> 170 <Tooltip title="刷新">
171 <Button type="primary" @click="getListData"> 171 <Button type="primary" @click="getListData">
172 - <ReloadOutlined @click="getListData" /> 172 + <ReloadOutlined />
173 </Button> 173 </Button>
174 </Tooltip> 174 </Tooltip>
175 </div> 175 </div>