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 169 <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
170 170 <Tooltip title="刷新">
171 171 <Button type="primary" @click="getListData">
172   - <ReloadOutlined @click="getListData" />
  172 + <ReloadOutlined />
173 173 </Button>
174 174 </Tooltip>
175 175 </div>
... ...