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

feat: 添加默认分页数量偏好设置.

Browse Source
This commit is contained in:
lijiahang
2023-11-24 16:48:47 +08:00
parent 51f0e83b3a
commit a9658b57dd
19 changed files with 242 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
orion-ops-ui/src/assets/style/layout.less
View File

@@ -110,6 +110,10 @@
padding: 18px 24px 14px 24px;
}
.card-filter-form {
padding: 0 4px;
}
// -- card
.simple-card {
background: var(--color-bg-2);

8
orion-ops-ui/src/components/app/setting/block.vue
View File

@@ -2,7 +2,9 @@
<div class="block">
<h5 class="title">{{ title }}</h5>
<template v-for="option in options" :key="option.name">
<div class="option-wrapper" v-permission="option.permission || []">
<div class="option-wrapper"
v-permission="option.permission || []"
:style="{ 'margin': option.margin || '' }">
<!-- 偏好项 -->
<span>{{ option.name }}</span>
<!-- 偏好值 -->
@@ -19,6 +21,7 @@
<script lang="ts" setup>
import type { PropType } from 'vue';
import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
import type { SelectOption } from '@arco-design/web-vue/es/select/interface';
import { useAppStore } from '@/store';
import FormWrapper from './form-wrapper.vue';
import { updatePreferencePartial } from '@/api/user/preference';
@@ -30,7 +33,8 @@
type?: string;
permission?: string[];
defaultVal?: boolean | string | number;
options?: Array<RadioOption>;
options?: Array<RadioOption | SelectOption>;
margin?: string;
}
defineProps({

15
orion-ops-ui/src/components/app/setting/form-wrapper.vue
View File

@@ -3,6 +3,7 @@
<a-input-number v-if="type === 'number'"
:style="{ width: '80px' }"
size="small"
:precision="0"
:default-value="defaultValue as number"
@change="handleChange"
hide-button />
@@ -15,15 +16,23 @@
<!-- 单选按钮 -->
<a-radio-group v-else-if="type === 'radio-group'"
type="button"
size="mini"
size="small"
:default-value="defaultValue"
:options="options"
:options="options as Array<RadioOption>"
@change="handleChange" />
<!-- 选择框 -->
<a-select v-else-if="type === 'select'"
size="small"
style="width: 128px;"
:default-value="defaultValue"
:options="options as Array<SelectOption>"
@change="handleChange" />
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import type { RadioOption } from '@arco-design/web-vue/es/radio/interface';
import type { SelectOption } from '@arco-design/web-vue/es/select/interface';
const props = defineProps({
type: {
@@ -39,7 +48,7 @@
default: '',
},
options: {
type: Array as PropType<Array<RadioOption>>,
type: Array as PropType<Array<RadioOption | SelectOption>>,
default: []
}
});

39
orion-ops-ui/src/components/app/setting/index.vue
View File

@@ -12,7 +12,11 @@
:footer="false"
:unmount-on-close="true"
@cancel="() => setVisible(false)">
<!-- 布局设置 -->
<Block :options="layoutOpts" title="布局设置" />
<!-- 数据设置 -->
<Block :options="dataOpts" title="数据设置" />
<!-- 页面视图 -->
<Block :options="viewsOpts" title="页面视图" />
</a-drawer>
</template>
@@ -22,6 +26,8 @@
import { useAppStore } from '@/store';
import Block from './block.vue';
import useVisible from '@/hooks/visible';
import { usePagination as useTablePagination } from '@/types/table';
import { usePagination as useCardPagination } from '@/types/card';
const appStore = useAppStore();
const { visible, setVisible } = useVisible();
@@ -72,12 +78,43 @@
},
]);
// 布局设置
const dataOpts = computed(() => [
{
name: '表格默认页数',
key: 'defaultPageSize',
type: 'select',
margin: '0 0 4px 0',
defaultVal: appStore.defaultPageSize,
options: (useTablePagination().pageSizeOptions || []).map(s => {
return {
value: s,
label: `${s} 条/页`
};
})
},
{
name: '卡片默认页数',
key: 'defaultCardSize',
type: 'select',
defaultVal: appStore.defaultCardSize,
options: (useCardPagination().pageSizeOptions || []).map(s => {
return {
value: s,
label: `${s} 条/页`
};
})
},
]);
// 页面视图配置
const viewsOpts = computed(() => [
{
name: '主机列表',
key: 'hostView',
type: 'radio-group',
margin: '0 0 4px 0',
permission: ['asset:host:query'],
defaultVal: appStore.hostView,
options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
@@ -86,6 +123,7 @@
name: '主机秘钥',
key: 'hostKeyView',
type: 'radio-group',
margin: '0 0 4px 0',
permission: ['asset:host-key:query'],
defaultVal: appStore.hostKeyView,
options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
@@ -94,6 +132,7 @@
name: '主机身份',
key: 'hostIdentityView',
type: 'radio-group',
margin: '0 0 4px 0',
permission: ['asset:host-identity:query'],
defaultVal: appStore.hostIdentityView,
options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]

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

@@ -437,7 +437,6 @@
}
.filter-bottom-container {
padding-top: 14px;
display: flex;
justify-content: flex-end;
}

3
orion-ops-ui/src/store/modules/app/index.ts
View File

@@ -15,6 +15,9 @@ const defaultConfig: AppState = {
tabBar: true,
menuWidth: 220,
colorWeak: false,
// 用户偏好-数据设置
defaultPageSize: 10,
defaultCardSize: 12,
// 用户偏好-页面视图
hostView: 'table',
hostKeyView: 'table',

10
orion-ops-ui/src/store/modules/app/types.ts
View File

@@ -5,7 +5,7 @@ type ViewType = 'table' | 'card' | undefined;
/**
* 应用状态
*/
export interface AppState extends AppSetting, UserPreferenceLayout, UserPreferenceViews {
export interface AppState extends AppSetting, UserPreferenceLayout, UserPreferenceData, UserPreferenceViews {
[key: string]: unknown;
}
@@ -32,6 +32,14 @@ export interface UserPreferenceLayout {
colorWeak: boolean;
}
/**
* 用户偏好 - 数据设置
*/
export interface UserPreferenceData {
defaultPageSize: number;
defaultCardSize: number;
}
/**
* 用户偏好 - 页面视图
*/

5
orion-ops-ui/src/types/card.ts
View File

@@ -1,6 +1,8 @@
import type { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
import type { VNodeChild } from 'vue';
import { reactive } from 'vue';
import { useAppStore } from '@/store';
import { isNumber } from '@/utils/is';
/**
* 字段对齐方式
@@ -104,10 +106,11 @@ export const useColLayout = (): ColResponsiveValue => {
* 创建创建卡片列表分页
*/
export const usePagination = (): PaginationProps => {
const appStore = useAppStore();
return reactive({
total: 0,
current: 1,
pageSize: 18,
pageSize: isNumber(appStore.defaultCardSize) ? appStore.defaultCardSize : 12,
showTotal: true,
showPageSize: true,
pageSizeOptions: [12, 18, 36, 48, 96]

5
orion-ops-ui/src/types/table.ts
View File

@@ -1,14 +1,17 @@
import type { PaginationProps, TableRowSelection } from '@arco-design/web-vue';
import { reactive } from 'vue';
import { useAppStore } from '@/store';
import { isNumber } from '@/utils/is';
/**
* 创建列表分页
*/
export const usePagination = (): PaginationProps => {
const appStore = useAppStore();
return reactive({
total: 0,
current: 1,
pageSize: 10,
pageSize: isNumber(appStore.defaultPageSize) ? appStore.defaultPageSize : 12,
showTotal: true,
showPageSize: true,
pageSizeOptions: [10, 20, 30, 50, 100]

3
orion-ops-ui/src/views/asset/host-group/components/host-group-view-role-grant.vue
View File

@@ -30,6 +30,9 @@
type="primary"
@click="save">
保存
<template #icon>
<icon-check />
</template>
</a-button>
</div>
<!-- 主题部分 -->

4
orion-ops-ui/src/views/asset/host-group/components/host-group-view-user-grant.vue
View File

@@ -30,6 +30,9 @@
type="primary"
@click="save">
保存
<template #icon>
<icon-check />
</template>
</a-button>
</div>
<!-- 主题部分 -->
@@ -164,7 +167,6 @@
}
.save-button {
width: 60px;
margin-left: 16px;
}
}

2
orion-ops-ui/src/views/asset/host-identity/components/host-identity-card-list.vue
View File

@@ -16,7 +16,7 @@
<!-- 过滤条件 -->
<template #filterContent>
<a-form :model="formModel"
class="modal-form"
class="card-filter-form"
size="small"
ref="formRef"
label-align="right"

4
orion-ops-ui/src/views/asset/host/components/host-card-list.vue
View File

@@ -16,7 +16,7 @@
<!-- 过滤条件 -->
<template #filterContent>
<a-form :model="formModel"
class="modal-form"
class="card-filter-form"
size="small"
ref="formRef"
label-align="right"
@@ -177,7 +177,7 @@
// 条件数量
const filterCount = computed(() => {
return objectTruthKeyCount(formModel, ['searchValue', 'extra']);
return objectTruthKeyCount(formModel, ['searchValue', 'queryTag']);
});
// 删除当前行