From 92ccc3eb7db114c348600ef06008af4616930861 Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Thu, 26 Dec 2024 18:15:26 +0800
Subject: [PATCH] =?UTF-8?q?perf(frontend):=20=E5=8D=95=E6=8D=AE=E5=88=97?=
=?UTF-8?q?=E8=A1=A8=E6=94=AF=E6=8C=81=20ctrl=20=E6=96=B0=E5=BC=80?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9F=A5=E7=9C=8B=E5=8D=95=E6=8D=AE=E8=AF=A6?=
=?UTF-8?q?=E6=83=85=20#8852?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/list/components/TableMode.vue | 35 ++++-------------
.../common/hooks/use-open-detail.ts | 39 +++++++++++++++++++
.../components/list/components/TableMode.vue | 35 ++++-------------
.../components/list/components/TableMode.vue | 35 ++++-------------
.../components/list/components/TableMode.vue | 35 ++++-------------
.../components/list/components/TableMode.vue | 24 +++---------
6 files changed, 77 insertions(+), 126 deletions(-)
create mode 100644 dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts
diff --git a/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
index b581575930..7e8c678896 100644
--- a/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
- @click="() => handleShowDetail(data)">
+ @click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
@@ -57,16 +57,17 @@
</div>
</template>
<script setup lang="ts">
- import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+ import { onActivated } from 'vue';
import { useI18n } from 'vue-i18n';
- import { useRoute, useRouter } from 'vue-router';
+ import { useRoute } from 'vue-router';
import TicketModel from '@services/model/ticket/ticket';
import { getTickets } from '@services/source/ticket';
- import { useStretchLayout, useUrlSearch } from '@hooks';
+ import { useUrlSearch } from '@hooks';
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+ import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
import TicketClone from '@views/ticket-center/common/TicketClone.vue';
@@ -74,13 +75,10 @@
type IRowData = TicketModel;
- const router = useRouter();
const route = useRoute();
const { t } = useI18n();
- const currentInstance = getCurrentInstance();
- const { getSearchParams, removeSearchParam } = useUrlSearch();
- const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+ const { removeSearchParam } = useUrlSearch();
const { value: datePickerValue, shortcutsRange } = useDatePicker();
@@ -88,6 +86,8 @@
exclude: ['bk_biz_id'],
});
+ const handleGoDetail = useOpenDetail();
+
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
getTickets({
...params,
@@ -98,29 +98,10 @@
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
- const handleShowDetail = (data: IRowData) => {
- stretchLayoutSplitScreen();
- selectTicketId.value = data.id;
- };
-
onActivated(() => {
selectTicketId.value = Number(route.query.selectId);
removeSearchParam('selectId');
});
-
- onDeactivated(() => {
- setTimeout(() => {
- if (currentInstance!.isUnmounted) {
- return;
- }
- router.replace({
- params: {
- ticketId: selectTicketId.value,
- },
- query: getSearchParams(),
- });
- });
- });
</script>
<style lang="less">
.ticket-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts
new file mode 100644
index 0000000000..1538232653
--- /dev/null
+++ b/dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts
@@ -0,0 +1,39 @@
+import { getCurrentInstance } from 'vue';
+import { useRouter } from 'vue-router';
+
+import TicketModel from '@services/model/ticket/ticket';
+
+import { useStretchLayout, useUrlSearch } from '@hooks';
+
+export default () => {
+ const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+
+ const currentInstance = getCurrentInstance();
+ const router = useRouter();
+ const { getSearchParams } = useUrlSearch();
+
+ return (ticketData: TicketModel, event: MouseEvent) => {
+ if (event.ctrlKey || event.metaKey) {
+ const { href } = router.resolve({
+ name: 'ticketDetail',
+ params: {
+ ticketId: ticketData.id,
+ },
+ });
+ return window.open(href);
+ }
+
+ stretchLayoutSplitScreen();
+ setTimeout(() => {
+ if (currentInstance!.isUnmounted) {
+ return;
+ }
+ router.replace({
+ params: {
+ ticketId: ticketData.id,
+ },
+ query: getSearchParams(),
+ });
+ });
+ };
+};
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
index e86fa3dc6c..0fb09d7015 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
- @click="() => handleShowDetail(data)">
+ @click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
@@ -58,16 +58,17 @@
</div>
</template>
<script setup lang="ts">
- import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+ import { onActivated } from 'vue';
import { useI18n } from 'vue-i18n';
- import { useRoute, useRouter } from 'vue-router';
+ import { useRoute } from 'vue-router';
import TicketModel from '@services/model/ticket/ticket';
import { getTickets } from '@services/source/ticket';
- import { useStretchLayout, useUrlSearch } from '@hooks';
+ import { useUrlSearch } from '@hooks';
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+ import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
import TicketClone from '@views/ticket-center/common/TicketClone.vue';
@@ -75,18 +76,17 @@
type IRowData = TicketModel<unknown>;
- const router = useRouter();
const route = useRoute();
const { t } = useI18n();
- const currentInstance = getCurrentInstance();
- const { getSearchParams, removeSearchParam } = useUrlSearch();
- const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+ const { removeSearchParam } = useUrlSearch();
const { value: datePickerValue, shortcutsRange } = useDatePicker();
const { value: searachSelectValue, searchSelectData } = useSearchSelect();
+ const handleGoDetail = useOpenDetail();
+
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
getTickets({
...params,
@@ -97,29 +97,10 @@
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
- const handleShowDetail = (data: IRowData) => {
- stretchLayoutSplitScreen();
- selectTicketId.value = data.id;
- };
-
onActivated(() => {
selectTicketId.value = Number(route.query.selectId);
removeSearchParam('selectId');
});
-
- onDeactivated(() => {
- setTimeout(() => {
- if (currentInstance!.isUnmounted) {
- return;
- }
- router.replace({
- params: {
- ticketId: selectTicketId.value,
- },
- query: getSearchParams(),
- });
- });
- });
</script>
<style lang="less">
.ticket-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
index 6e230e9de7..601b6cf9f0 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
- @click="() => handleShowDetail(data)">
+ @click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
@@ -53,34 +53,34 @@
</div>
</template>
<script setup lang="ts">
- import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+ import { onActivated } from 'vue';
import { useI18n } from 'vue-i18n';
- import { useRoute, useRouter } from 'vue-router';
+ import { useRoute } from 'vue-router';
import TicketModel from '@services/model/ticket/ticket';
import { getTickets } from '@services/source/ticket';
- import { useStretchLayout, useUrlSearch } from '@hooks';
+ import { useUrlSearch } from '@hooks';
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+ import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
type IRowData = TicketModel<unknown>;
- const router = useRouter();
const route = useRoute();
const { t } = useI18n();
- const currentInstance = getCurrentInstance();
- const { getSearchParams, removeSearchParam } = useUrlSearch();
- const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+ const { removeSearchParam } = useUrlSearch();
const { value: datePickerValue, shortcutsRange } = useDatePicker();
const { value: searachSelectValue, searchSelectData } = useSearchSelect();
+ const handleGoDetail = useOpenDetail();
+
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
getTickets({
...params,
@@ -91,29 +91,10 @@
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
- const handleShowDetail = (data: IRowData) => {
- stretchLayoutSplitScreen();
- selectTicketId.value = data.id;
- };
-
onActivated(() => {
selectTicketId.value = Number(route.query.selectId);
removeSearchParam('selectId');
});
-
- onDeactivated(() => {
- setTimeout(() => {
- if (currentInstance!.isUnmounted) {
- return;
- }
- router.replace({
- params: {
- ticketId: selectTicketId.value,
- },
- query: getSearchParams(),
- });
- });
- });
</script>
<style lang="less">
.ticket-self-done-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
index 932428b003..48eea48f5a 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
@@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
- @click="() => handleShowDetail(data)">
+ @click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
@@ -53,34 +53,34 @@
</div>
</template>
<script setup lang="ts">
- import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
+ import { onActivated } from 'vue';
import { useI18n } from 'vue-i18n';
- import { useRoute, useRouter } from 'vue-router';
+ import { useRoute } from 'vue-router';
import TicketModel from '@services/model/ticket/ticket';
import { getTickets } from '@services/source/ticket';
- import { useStretchLayout, useUrlSearch } from '@hooks';
+ import { useUrlSearch } from '@hooks';
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+ import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
type IRowData = TicketModel<unknown>;
- const router = useRouter();
const route = useRoute();
const { t } = useI18n();
- const currentInstance = getCurrentInstance();
- const { getSearchParams, removeSearchParam } = useUrlSearch();
- const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
+ const { removeSearchParam } = useUrlSearch();
const { value: datePickerValue, shortcutsRange } = useDatePicker();
const { value: searachSelectValue, searchSelectData } = useSearchSelect();
+ const handleGoDetail = useOpenDetail();
+
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
getTickets({
...params,
@@ -91,29 +91,10 @@
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
- const handleShowDetail = (data: IRowData) => {
- stretchLayoutSplitScreen();
- selectTicketId.value = data.id;
- };
-
onActivated(() => {
selectTicketId.value = Number(route.query.selectId);
removeSearchParam('selectId');
});
-
- onDeactivated(() => {
- setTimeout(() => {
- if (currentInstance!.isUnmounted) {
- return;
- }
- router.replace({
- params: {
- ticketId: selectTicketId.value,
- },
- query: getSearchParams(),
- });
- });
- });
</script>
<style lang="less">
.ticket-list-table-mode {
diff --git a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
index b2ae0d5ea3..85e41d44ff 100644
--- a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
+++ b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
@@ -48,7 +48,7 @@
v-if="data"
text
theme="primary"
- @click="() => handleShowDetail(data)">
+ @click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
@@ -73,7 +73,7 @@
</div>
</template>
<script setup lang="ts">
- import { getCurrentInstance, onActivated, onDeactivated, ref, shallowRef, useTemplateRef } from 'vue';
+ import { onActivated, onDeactivated, ref, shallowRef, useTemplateRef } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
@@ -83,6 +83,7 @@
import { useStretchLayout, useUrlSearch } from '@hooks';
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
+ import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
@@ -94,11 +95,10 @@
const router = useRouter();
const { t } = useI18n();
- const currentInstance = getCurrentInstance();
const { list: statusList, defaultStatus: ticketStatus } = useStatusList();
- const { getSearchParams, removeSearchParam } = useUrlSearch();
+ const { removeSearchParam } = useUrlSearch();
const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
const { value: datePickerValue, shortcutsRange } = useDatePicker();
@@ -107,6 +107,8 @@
exclude: ['status'],
});
+ const handleGoDetail = useOpenDetail();
+
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
@@ -118,7 +120,6 @@
});
const dataTableRef = useTemplateRef('dataTable');
- // const ticketStatus = ref(defaultStatus.value);
const selectTicketIdList = shallowRef<TicketModel[]>([]);
const isShowBatchOperation = ref(false);
const selectTicketId = ref(0);
@@ -149,7 +150,6 @@
};
onActivated(() => {
- // ticketStatus.value = defaultStatus.value;
selectTicketId.value = Number(route.query.selectId);
removeSearchParam('selectId');
resumeTicketStatus();
@@ -157,18 +157,6 @@
onDeactivated(() => {
pauseTicketStatus();
- setTimeout(() => {
- if (currentInstance!.isUnmounted) {
- return;
- }
- router.replace({
- params: {
- status: ticketStatus.value,
- ticketId: selectTicketId.value,
- },
- query: getSearchParams(),
- });
- });
});
</script>
<style lang="less">