Skip to content

Commit

Permalink
perf(frontend): 单据列表支持 ctrl 新开页面查看单据详情 #8852
Browse files Browse the repository at this point in the history 
# Reviewed, transaction id: 27927
  • Loading branch information
@hLinx
hLinx committed Dec 26, 2024
1 parent b08d5b6 commit 6dd1317
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 126 deletions.
35 changes: 8 additions & 27 deletions dbm-ui/frontend/src/views/ticket-center/business/components/list/components/TableMode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
@click="() => handleShowDetail(data)">
@click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
Expand All @@ -57,37 +57,37 @@
</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';
import TicketDetailLink from '@views/ticket-center/common/TicketDetailLink.vue';
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();
const { value: searachSelectValue, searchSelectData } = useSearchSelect({
exclude: ['bk_biz_id'],
});
const handleGoDetail = useOpenDetail();
const dataSource = (params: ServiceParameters<typeof getTickets>) =>
getTickets({
...params,
Expand All @@ -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 {
Expand Down
39 changes: 39 additions & 0 deletions dbm-ui/frontend/src/views/ticket-center/common/hooks/use-open-detail.ts
View file
Original file line number Diff line number Diff line change
@@ -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(),
});
});
};
};
35 changes: 8 additions & 27 deletions dbm-ui/frontend/src/views/ticket-center/self-apply/components/list/components/TableMode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
@click="() => handleShowDetail(data)">
@click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
Expand All @@ -58,35 +58,35 @@
</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';
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,
Expand All @@ -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 {
Expand Down
35 changes: 8 additions & 27 deletions dbm-ui/frontend/src/views/ticket-center/self-done/components/list/components/TableMode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
@click="() => handleShowDetail(data)">
@click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
Expand All @@ -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,
Expand All @@ -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 {
Expand Down
35 changes: 8 additions & 27 deletions dbm-ui/frontend/src/views/ticket-center/self-manage/components/list/components/TableMode.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
v-if="data"
text
theme="primary"
@click="() => handleShowDetail(data)">
@click="(event: MouseEvent) => handleGoDetail(data, event)">
{{ data.id }}
</BkButton>
</template>
Expand All @@ -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,
Expand All @@ -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 {
Expand Down
Loading

0 comments on commit 6dd1317

Please sign in to comment.