Skip to content

Commit 6dd1317

Browse files
hLinxhLinx
committed
perf(frontend): 单据列表支持 ctrl 新开页面查看单据详情 #8852
# Reviewed, transaction id: 27927
1 parent b08d5b6 commit 6dd1317

File tree

6 files changed

+77
-126
lines changed

6 files changed

+77
-126
lines changed

‎dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
v-if="data"
3232
text
3333
theme="primary"
34-
@click="() => handleShowDetail(data)">
34+
@click="(event: MouseEvent) => handleGoDetail(data, event)">
3535
{{ data.id }}
3636
</BkButton>
3737
</template>
@@ -57,37 +57,37 @@
5757
</div>
5858
</template>
5959
<script setup lang="ts">
60-
import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
60+
import { onActivated } from 'vue';
6161
import { useI18n } from 'vue-i18n';
62-
import { useRoute, useRouter } from 'vue-router';
62+
import { useRoute } from 'vue-router';
6363
6464
import TicketModel from '@services/model/ticket/ticket';
6565
import { getTickets } from '@services/source/ticket';
6666
67-
import { useStretchLayout, useUrlSearch } from '@hooks';
67+
import { useUrlSearch } from '@hooks';
6868
6969
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
70+
import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
7071
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
7172
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
7273
import TicketClone from '@views/ticket-center/common/TicketClone.vue';
7374
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
7475
7576
type IRowData = TicketModel;
7677
77-
const router = useRouter();
7878
const route = useRoute();
7979
const { t } = useI18n();
80-
const currentInstance = getCurrentInstance();
8180
82-
const { getSearchParams, removeSearchParam } = useUrlSearch();
83-
const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
81+
const { removeSearchParam } = useUrlSearch();
8482
8583
const { value: datePickerValue, shortcutsRange } = useDatePicker();
8684
8785
const { value: searachSelectValue, searchSelectData } = useSearchSelect({
8886
exclude: ['bk_biz_id'],
8987
});
9088
89+
const handleGoDetail = useOpenDetail();
90+
9191
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
9292
getTickets({
9393
...params,
@@ -98,29 +98,10 @@
9898
9999
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
100100
101-
const handleShowDetail = (data: IRowData) => {
102-
stretchLayoutSplitScreen();
103-
selectTicketId.value = data.id;
104-
};
105-
106101
onActivated(() => {
107102
selectTicketId.value = Number(route.query.selectId);
108103
removeSearchParam('selectId');
109104
});
110-
111-
onDeactivated(() => {
112-
setTimeout(() => {
113-
if (currentInstance!.isUnmounted) {
114-
return;
115-
}
116-
router.replace({
117-
params: {
118-
ticketId: selectTicketId.value,
119-
},
120-
query: getSearchParams(),
121-
});
122-
});
123-
});
124105
</script>
125106
<style lang="less">
126107
.ticket-list-table-mode {

‎dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { getCurrentInstance } from 'vue';
2+
import { useRouter } from 'vue-router';
3+
4+
import TicketModel from '@services/model/ticket/ticket';
5+
6+
import { useStretchLayout, useUrlSearch } from '@hooks';
7+
8+
export default () => {
9+
const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
10+
11+
const currentInstance = getCurrentInstance();
12+
const router = useRouter();
13+
const { getSearchParams } = useUrlSearch();
14+
15+
return (ticketData: TicketModel, event: MouseEvent) => {
16+
if (event.ctrlKey || event.metaKey) {
17+
const { href } = router.resolve({
18+
name: 'ticketDetail',
19+
params: {
20+
ticketId: ticketData.id,
21+
},
22+
});
23+
return window.open(href);
24+
}
25+
26+
stretchLayoutSplitScreen();
27+
setTimeout(() => {
28+
if (currentInstance!.isUnmounted) {
29+
return;
30+
}
31+
router.replace({
32+
params: {
33+
ticketId: ticketData.id,
34+
},
35+
query: getSearchParams(),
36+
});
37+
});
38+
};
39+
};

‎dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
v-if="data"
3232
text
3333
theme="primary"
34-
@click="() => handleShowDetail(data)">
34+
@click="(event: MouseEvent) => handleGoDetail(data, event)">
3535
{{ data.id }}
3636
</BkButton>
3737
</template>
@@ -58,35 +58,35 @@
5858
</div>
5959
</template>
6060
<script setup lang="ts">
61-
import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
61+
import { onActivated } from 'vue';
6262
import { useI18n } from 'vue-i18n';
63-
import { useRoute, useRouter } from 'vue-router';
63+
import { useRoute } from 'vue-router';
6464
6565
import TicketModel from '@services/model/ticket/ticket';
6666
import { getTickets } from '@services/source/ticket';
6767
68-
import { useStretchLayout, useUrlSearch } from '@hooks';
68+
import { useUrlSearch } from '@hooks';
6969
7070
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
71+
import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
7172
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
7273
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
7374
import TicketClone from '@views/ticket-center/common/TicketClone.vue';
7475
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
7576
7677
type IRowData = TicketModel<unknown>;
7778
78-
const router = useRouter();
7979
const route = useRoute();
8080
const { t } = useI18n();
81-
const currentInstance = getCurrentInstance();
8281
83-
const { getSearchParams, removeSearchParam } = useUrlSearch();
84-
const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
82+
const { removeSearchParam } = useUrlSearch();
8583
8684
const { value: datePickerValue, shortcutsRange } = useDatePicker();
8785
8886
const { value: searachSelectValue, searchSelectData } = useSearchSelect();
8987
88+
const handleGoDetail = useOpenDetail();
89+
9090
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
9191
getTickets({
9292
...params,
@@ -97,29 +97,10 @@
9797
9898
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
9999
100-
const handleShowDetail = (data: IRowData) => {
101-
stretchLayoutSplitScreen();
102-
selectTicketId.value = data.id;
103-
};
104-
105100
onActivated(() => {
106101
selectTicketId.value = Number(route.query.selectId);
107102
removeSearchParam('selectId');
108103
});
109-
110-
onDeactivated(() => {
111-
setTimeout(() => {
112-
if (currentInstance!.isUnmounted) {
113-
return;
114-
}
115-
router.replace({
116-
params: {
117-
ticketId: selectTicketId.value,
118-
},
119-
query: getSearchParams(),
120-
});
121-
});
122-
});
123104
</script>
124105
<style lang="less">
125106
.ticket-list-table-mode {

‎dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
v-if="data"
3232
text
3333
theme="primary"
34-
@click="() => handleShowDetail(data)">
34+
@click="(event: MouseEvent) => handleGoDetail(data, event)">
3535
{{ data.id }}
3636
</BkButton>
3737
</template>
@@ -53,34 +53,34 @@
5353
</div>
5454
</template>
5555
<script setup lang="ts">
56-
import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
56+
import { onActivated } from 'vue';
5757
import { useI18n } from 'vue-i18n';
58-
import { useRoute, useRouter } from 'vue-router';
58+
import { useRoute } from 'vue-router';
5959
6060
import TicketModel from '@services/model/ticket/ticket';
6161
import { getTickets } from '@services/source/ticket';
6262
63-
import { useStretchLayout, useUrlSearch } from '@hooks';
63+
import { useUrlSearch } from '@hooks';
6464
6565
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
66+
import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
6667
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
6768
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
6869
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
6970
7071
type IRowData = TicketModel<unknown>;
7172
72-
const router = useRouter();
7373
const route = useRoute();
7474
const { t } = useI18n();
7575
76-
const currentInstance = getCurrentInstance();
77-
const { getSearchParams, removeSearchParam } = useUrlSearch();
78-
const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
76+
const { removeSearchParam } = useUrlSearch();
7977
8078
const { value: datePickerValue, shortcutsRange } = useDatePicker();
8179
8280
const { value: searachSelectValue, searchSelectData } = useSearchSelect();
8381
82+
const handleGoDetail = useOpenDetail();
83+
8484
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
8585
getTickets({
8686
...params,
@@ -91,29 +91,10 @@
9191
9292
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
9393
94-
const handleShowDetail = (data: IRowData) => {
95-
stretchLayoutSplitScreen();
96-
selectTicketId.value = data.id;
97-
};
98-
9994
onActivated(() => {
10095
selectTicketId.value = Number(route.query.selectId);
10196
removeSearchParam('selectId');
10297
});
103-
104-
onDeactivated(() => {
105-
setTimeout(() => {
106-
if (currentInstance!.isUnmounted) {
107-
return;
108-
}
109-
router.replace({
110-
params: {
111-
ticketId: selectTicketId.value,
112-
},
113-
query: getSearchParams(),
114-
});
115-
});
116-
});
11798
</script>
11899
<style lang="less">
119100
.ticket-self-done-list-table-mode {

‎dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue

Lines changed: 8 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
v-if="data"
3232
text
3333
theme="primary"
34-
@click="() => handleShowDetail(data)">
34+
@click="(event: MouseEvent) => handleGoDetail(data, event)">
3535
{{ data.id }}
3636
</BkButton>
3737
</template>
@@ -53,34 +53,34 @@
5353
</div>
5454
</template>
5555
<script setup lang="ts">
56-
import { getCurrentInstance, onActivated, onDeactivated } from 'vue';
56+
import { onActivated } from 'vue';
5757
import { useI18n } from 'vue-i18n';
58-
import { useRoute, useRouter } from 'vue-router';
58+
import { useRoute } from 'vue-router';
5959
6060
import TicketModel from '@services/model/ticket/ticket';
6161
import { getTickets } from '@services/source/ticket';
6262
63-
import { useStretchLayout, useUrlSearch } from '@hooks';
63+
import { useUrlSearch } from '@hooks';
6464
6565
import useDatePicker from '@views/ticket-center/common/hooks/use-date-picker';
66+
import useOpenDetail from '@views/ticket-center/common/hooks/use-open-detail';
6667
import useSearchSelect from '@views/ticket-center/common/hooks/use-search-select';
6768
import TableModeTable from '@views/ticket-center/common/TableModeTable.vue';
6869
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
6970
7071
type IRowData = TicketModel<unknown>;
7172
72-
const router = useRouter();
7373
const route = useRoute();
7474
const { t } = useI18n();
75-
const currentInstance = getCurrentInstance();
7675
77-
const { getSearchParams, removeSearchParam } = useUrlSearch();
78-
const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
76+
const { removeSearchParam } = useUrlSearch();
7977
8078
const { value: datePickerValue, shortcutsRange } = useDatePicker();
8179
8280
const { value: searachSelectValue, searchSelectData } = useSearchSelect();
8381
82+
const handleGoDetail = useOpenDetail();
83+
8484
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
8585
getTickets({
8686
...params,
@@ -91,29 +91,10 @@
9191
9292
const rowClass = (params: TicketModel) => (params.id === selectTicketId.value ? 'select-row' : '');
9393
94-
const handleShowDetail = (data: IRowData) => {
95-
stretchLayoutSplitScreen();
96-
selectTicketId.value = data.id;
97-
};
98-
9994
onActivated(() => {
10095
selectTicketId.value = Number(route.query.selectId);
10196
removeSearchParam('selectId');
10297
});
103-
104-
onDeactivated(() => {
105-
setTimeout(() => {
106-
if (currentInstance!.isUnmounted) {
107-
return;
108-
}
109-
router.replace({
110-
params: {
111-
ticketId: selectTicketId.value,
112-
},
113-
query: getSearchParams(),
114-
});
115-
});
116-
});
11798
</script>
11899
<style lang="less">
119100
.ticket-list-table-mode {

0 commit comments

Comments
 (0)