manager/orion-visor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化数据加载逻辑.

Browse Source
This commit is contained in:
lijiahangmax
2023-12-02 23:36:02 +08:00
parent 9f35fb855d
commit a22f30a8b4
19 changed files with 155 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
orion-ops-ui/src/components/view/card-list/components/card-header.vue
View File

@@ -14,8 +14,8 @@
v-model:page-size="(pagination as PaginationProps).pageSize"
v-bind="pagination"
:auto-adjust="false"
@change="page => emits('emitter', HeaderEmitter.PAGE_CHANGE, page, (pagination as PaginationProps).pageSize)"
@page-size-change="limit => emits('emitter', HeaderEmitter.PAGE_CHANGE, 1, limit)" />
@change="page => bubblesEmitter(HeaderEmitter.PAGE_CHANGE, page, (pagination as PaginationProps).pageSize)"
@page-size-change="limit => bubblesEmitter(HeaderEmitter.PAGE_CHANGE, 1, limit)" />
</div>
</div>
<!-- 操作部分 -->
@@ -28,7 +28,7 @@
v-if="!handleVisible?.disableAdd"
class="click-icon-wrapper card-header-icon-wrapper"
title="创建"
@click="emits('emitter', HeaderEmitter.ADD)">
@click="bubblesEmitter(HeaderEmitter.ADD)">
<icon-plus />
</div>
<!-- 左侧侧操作槽位 -->
@@ -48,9 +48,9 @@
:placeholder="searchInputPlaceholder as string"
size="small"
allow-clear
@input="e => emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, e)"
@change="e => emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, e)"
@keyup.enter="emits('emitter', HeaderEmitter.SEARCH)" />
@input="e => bubblesEmitter(HeaderEmitter.UPDATE_SEARCH_VALUE, e)"
@change="e => bubblesEmitter(HeaderEmitter.UPDATE_SEARCH_VALUE, e)"
@keyup.enter="bubblesEmitter(HeaderEmitter.SEARCH)" />
</div>
<!-- 过滤条件 -->
<a-popover position="br" trigger="click" content-class="card-filter-wrapper">
@@ -78,14 +78,14 @@
<div v-if="!handleVisible?.disableSearch"
class="click-icon-wrapper card-header-icon-wrapper"
title="搜索"
@click="emits('emitter', HeaderEmitter.SEARCH)">
@click="bubblesEmitter(HeaderEmitter.SEARCH)">
<icon-search />
</div>
<!-- 重置 -->
<div v-if="!handleVisible?.disableReset"
class="click-icon-wrapper card-header-icon-wrapper"
title="重置"
@click="emits('emitter', HeaderEmitter.RESET)">
@click="bubblesEmitter(HeaderEmitter.RESET)">
<icon-refresh />
</div>
</a-space>
@@ -106,12 +106,15 @@
import type { CardProps } from '../types/props';
import { ref, computed } from 'vue';
import { useAppStore } from '@/store';
import { triggerMouseEvent } from '@/utils';
import { triggerMouseEvent } from '@/utils/event';
import { HeaderEmitter } from '../types/emits';
import useEmitter from '@/hooks/emitter';
const props = defineProps<CardProps>();
const emits = defineEmits(['emitter']);
const { bubblesEmitter } = useEmitter(emits);
const appStore = useAppStore();
const filterRef = ref();
@@ -130,21 +133,21 @@
},
set(e) {
if (e) {
emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, e);
bubblesEmitter(HeaderEmitter.UPDATE_SEARCH_VALUE, e);
} else {
emits('emitter', HeaderEmitter.UPDATE_SEARCH_VALUE, null);
bubblesEmitter(HeaderEmitter.UPDATE_SEARCH_VALUE, null);
}
}
});
// 重置过滤
const filterReset = () => {
emits('emitter', HeaderEmitter.RESET);
bubblesEmitter(HeaderEmitter.RESET);
};
// 搜索
const filterSearch = () => {
emits('emitter', HeaderEmitter.SEARCH);
bubblesEmitter(HeaderEmitter.SEARCH);
triggerMouseEvent(filterRef);
};
@@ -156,7 +159,7 @@
}
.card-list-header {
margin: -17px -16px 0 -16px;
margin: -17px -16px 0 -15px;
padding: 16px 16px 12px 16px;
position: fixed;
background: var(--color-fill-2);
@@ -165,7 +168,7 @@
transition: none;
&-wrapper {
background: var(--color-bg-4);
background: var(--color-bg-2);
padding: 0 12px;
border-radius: 4px;

8
orion-ops-ui/src/components/view/card-list/components/card-item.vue
View File

@@ -10,8 +10,8 @@
:hoverable="true"
:body-style="cardBodyStyle as Record<string, any>"
@contextmenu.prevent="() => false"
@click="emits('emitter', CardEmitter.CLICK, item, index)"
@dblclick="emits('emitter', CardEmitter.DBL_CLICK, item, index)">
@click="bubblesEmitter(CardEmitter.CLICK, item, index)"
@dblclick="bubblesEmitter(CardEmitter.DBL_CLICK, item, index)">
<!-- 标题 -->
<template #title>
<slot name="title" />
@@ -83,14 +83,16 @@
import type { CardRecord } from '@/types/card';
import type { CardProps } from '../types/props';
import { CardEmitter } from '../types/emits';
import useEmitter from '@/hooks/emitter';
const props = defineProps<CardProps & {
index: number,
item: CardRecord
}>();
const emits = defineEmits(['emitter']);
const { bubblesEmitter } = useEmitter(emits);
</script>
<style lang="less" scoped>

12
orion-ops-ui/src/components/view/card-list/index.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="card-list-layout">
<!-- 头部部分-固定 -->
<card-header v-bind="props"
@emitter="dispatchEmitter">
<card-header v-bind="props" @emitter="dispatchEmitter">
<!-- 左侧侧操作槽位 -->
<template #leftHandle>
<slot name="leftHandle" />
@@ -80,8 +79,7 @@
import CardItem from './components/card-item.vue';
import { Emitter } from './types/emits';
import { CardProps } from './types/props';
const emits = defineEmits(Emitter);
import useEmitter from '@/hooks/emitter';
const props = withDefaults(defineProps<CardProps>(), {
key: 'id',
@@ -107,10 +105,8 @@
list: () => []
});
// 调度事件
const dispatchEmitter = (event: string, ...args: any) => {
emits(event, ...args);
};
const emits = defineEmits(Emitter);
const { dispatchEmitter } = useEmitter(emits);
</script>