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

🔨 排序字段.

Browse Source
This commit is contained in:
lijiahangmax
2025-03-20 00:08:23 +08:00
parent 2e8a7c40d9
commit a2acbc0c3a
37 changed files with 663 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
orion-visor-ui/src/api/asset/host-identity.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -26,7 +26,7 @@ export interface HostIdentityUpdateRequest extends HostIdentityCreateRequest {
/**
* 主机身份查询请求
*/
export interface HostIdentityQueryRequest extends Pagination {
export interface HostIdentityQueryRequest extends Pagination, OrderDirection {
searchValue?: string;
id?: number;
name?: string;

4
orion-visor-ui/src/api/asset/host-key.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -25,7 +25,7 @@ export interface HostKeyUpdateRequest extends HostKeyCreateRequest {
/**
* 主机密钥查询请求
*/
export interface HostKeyQueryRequest extends Pagination {
export interface HostKeyQueryRequest extends Pagination, OrderDirection {
searchValue?: string;
id?: number;
name?: string;

4
orion-visor-ui/src/api/asset/host.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -47,7 +47,7 @@ export interface HostUpdateConfigRequest {
/**
* 主机查询请求
*/
export interface HostQueryRequest extends Pagination {
export interface HostQueryRequest extends Pagination, OrderDirection {
searchValue?: string;
id?: number;
type?: string;

4
orion-visor-ui/src/api/asset/terminal-connect-log.ts
View File

@@ -1,4 +1,4 @@
import type { ClearRequest, DataGrid, Pagination } from '@/types/global';
import type { ClearRequest, DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -6,7 +6,7 @@ import qs from 'query-string';
/**
* 终端连接日志查询请求
*/
export interface TerminalConnectLogQueryRequest extends Pagination {
export interface TerminalConnectLogQueryRequest extends Pagination, OrderDirection {
id?: number;
userId?: number;
hostId?: number;

4
orion-visor-ui/src/api/asset/terminal-sftp.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import { httpBaseUrl } from '@/utils/env';
import axios from 'axios';
@@ -7,7 +7,7 @@ import qs from 'query-string';
/**
* SFTP 操作日志 查询请求
*/
export interface TerminalSftpLogQueryRequest extends Pagination {
export interface TerminalSftpLogQueryRequest extends Pagination, OrderDirection {
userId?: number;
hostId?: number;
type?: string;

4
orion-visor-ui/src/api/exec/exec-job.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import type { HostQueryResponse } from '@/api/asset/host';
import axios from 'axios';
@@ -43,7 +43,7 @@ export interface ExecJobUpdateExecUserRequest {
/**
* 计划任务查询请求
*/
export interface ExecJobQueryRequest extends Pagination {
export interface ExecJobQueryRequest extends Pagination, OrderDirection {
id?: number;
name?: string;
command?: string;

4
orion-visor-ui/src/api/exec/exec-log.ts
View File

@@ -1,11 +1,11 @@
import type { ClearRequest, Pagination } from '@/types/global';
import type { ClearRequest, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import { createAppWebSocket } from '@/utils/http';
/**
* 执行日志查询请求
*/
export interface ExecLogQueryRequest extends Pagination {
export interface ExecLogQueryRequest extends Pagination, OrderDirection {
id?: number;
userId?: number;
sourceId?: number;

4
orion-visor-ui/src/api/exec/exec-template.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -25,7 +25,7 @@ export interface ExecTemplateUpdateRequest extends ExecTemplateCreateRequest {
/**
* 执行模板查询请求
*/
export interface ExecTemplateQueryRequest extends Pagination {
export interface ExecTemplateQueryRequest extends Pagination, OrderDirection {
id?: number;
name?: string;
command?: string;

4
orion-visor-ui/src/api/exec/upload-task.ts
View File

@@ -1,4 +1,4 @@
import type { ClearRequest, DataGrid, Pagination } from '@/types/global';
import type { ClearRequest, DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -33,7 +33,7 @@ export interface UploadTaskCreateResponse {
/**
* 上传任务查询请求
*/
export interface UploadTaskQueryRequest extends Pagination {
export interface UploadTaskQueryRequest extends Pagination, OrderDirection {
id?: number;
userId?: number;
remotePath?: string;

4
orion-visor-ui/src/api/meta/history-value.ts
View File

@@ -1,11 +1,11 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
/**
* 历史归档查询请求
*/
export interface HistoryValueQueryRequest extends Pagination {
export interface HistoryValueQueryRequest extends Pagination, OrderDirection {
searchValue?: string;
relId?: number;
type?: string;

4
orion-visor-ui/src/api/system/dict-key.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -23,7 +23,7 @@ export interface DictKeyUpdateRequest extends DictKeyCreateRequest {
/**
* 字典配置项查询请求
*/
export interface DictKeyQueryRequest extends Pagination {
export interface DictKeyQueryRequest extends Pagination, OrderDirection {
searchValue?: string;
id?: number;
keyName?: string;

4
orion-visor-ui/src/api/system/dict-value.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Options, Pagination } from '@/types/global';
import type { DataGrid, Options, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
import qs from 'query-string';
@@ -33,7 +33,7 @@ export interface DictValueRollbackRequest {
/**
* 字典配置值查询请求
*/
export interface DictValueQueryRequest extends Pagination {
export interface DictValueQueryRequest extends Pagination, OrderDirection {
keyId?: number;
keyName?: string;
value?: string;

4
orion-visor-ui/src/api/system/message.ts
View File

@@ -1,10 +1,10 @@
import type { Pagination } from '@/types/global';
import type { OrderDirection, Pagination } from '@/types/global';
import axios from 'axios';
/**
* 系统消息查询请求
*/
export interface MessageQueryRequest extends Pagination {
export interface MessageQueryRequest extends Pagination, OrderDirection {
maxId?: number;
classify?: string;
queryUnread?: boolean;

4
orion-visor-ui/src/api/user/operator-log.ts
View File

@@ -1,11 +1,11 @@
import type { ClearRequest, DataGrid, Pagination } from '@/types/global';
import type { ClearRequest, DataGrid, OrderDirection, Pagination } from '@/types/global';
import axios from 'axios';
import qs from 'query-string';
/**
* 操作日志查询参数
*/
export interface OperatorLogQueryRequest extends Pagination {
export interface OperatorLogQueryRequest extends Pagination, OrderDirection {
userId?: number;
username?: string;
module?: string;

4
orion-visor-ui/src/api/user/role.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import axios from 'axios';
@@ -30,7 +30,7 @@ export interface RoleGrantMenuRequest extends RoleCreateRequest {
/**
* 角色查询请求
*/
export interface RoleQueryRequest extends Pagination {
export interface RoleQueryRequest extends Pagination, OrderDirection {
id?: number;
name?: string;
code?: string;

4
orion-visor-ui/src/api/user/user.ts
View File

@@ -1,4 +1,4 @@
import type { DataGrid, Pagination } from '@/types/global';
import type { DataGrid, OrderDirection, Pagination } from '@/types/global';
import type { TableData } from '@arco-design/web-vue';
import type { RoleQueryResponse } from '@/api/user/role';
import axios from 'axios';
@@ -29,7 +29,7 @@ export interface UserUpdateRequest extends UserCreateRequest {
/**
* 用户查询请求
*/
export interface UserQueryRequest extends Pagination {
export interface UserQueryRequest extends Pagination, OrderDirection {
id?: number;
username?: string;
password?: string;

39
orion-visor-ui/src/assets/style/layout.less
View File

@@ -66,6 +66,43 @@
}
}
.table-adjust-popover {
user-select: none;
&-header {
padding: 4px 4px 4px 6px;
display: flex;
align-items: center;
justify-content: space-between;
.table-adjust-title {
margin-left: 4px;
color: var(--color-text-1);
}
}
.arco-checkbox-group {
min-width: 168px;
}
.arco-radio-group {
min-width: 148px;
}
.arco-checkbox-group, .arco-radio-group {
padding: 0 4px 4px 4px;
.arco-checkbox, .radio-checkbox {
border-radius: 4px;
padding: 0 6px;
&:hover {
background: var(--color-fill-2);
}
}
}
}
// -- drawer
.drawer-form-small {
padding: 20px 20px 2px 20px;
@@ -196,7 +233,7 @@
.more-doption {
min-width: 42px;
padding: 0 4px;
font-size: 12px;
font-size: 13px;
display: inline-block;
svg {

142
orion-visor-ui/src/components/app/table-adjust/index.vue Normal file
View File

@@ -0,0 +1,142 @@
<template>
<a-button-group v-if="columnsHook || queryOrder">
<!-- 调整列 -->
<a-popover v-if="columnsHook && columns"
class="table-adjust-popover"
position="br"
trigger="click"
:content-style="{ padding: 0 }"
@popup-visible-change="columnsVisibleChanged">
<!-- 触发按钮 -->
<a-button title="调整列">
<template #icon>
<icon-list />
</template>
</a-button>
<!-- 调整内容 -->
<template #content>
<!-- 顶部按钮 -->
<div class="table-adjust-popover-header">
<span class="table-adjust-title">
表格展示列
</span>
<a-button type="text"
size="mini"
@click="resetColumns">
重置
</a-button>
</div>
<!-- 分隔符 -->
<a-divider :margin="4" />
<!-- 列信息 -->
<a-checkbox-group v-model="columnsValue"
direction="vertical"
@change="columnsChanged">
<a-checkbox v-for="column in columns"
:key="column.dataIndex || column.slotName"
:value="column.dataIndex || column.slotName">
{{ column.title }}
</a-checkbox>
</a-checkbox-group>
</template>
</a-popover>
<!-- 调整排序 -->
<a-popover v-if="queryOrder"
class="table-adjust-popover"
position="br"
trigger="click"
:content-style="{ padding: 0 }"
@popup-visible-change="sortVisibleChanged">
<!-- 触发按钮 -->
<a-button title="调整排序">
<template #icon>
<icon-sort-ascending />
</template>
</a-button>
<!-- 调整内容 -->
<template #content>
<!-- 顶部按钮 -->
<div class="table-adjust-popover-header">
<span class="table-adjust-title">
表格查询排序
</span>
</div>
<!-- 分隔符 -->
<a-divider :margin="4" />
<!-- 列信息 -->
<a-radio-group v-model="orderValue"
direction="vertical"
@change="sortChanged">
<a-radio :value="ASC">
升序排序
</a-radio>
<a-radio :value="DESC">
降序排序
</a-radio>
</a-radio-group>
</template>
</a-popover>
</a-button-group>
</template>
<script lang="ts">
export default {
name: 'tableAdjust'
};
</script>
<script lang="ts" setup>
import type { TableColumnData } from '@arco-design/web-vue';
import type { TableColumnsHook } from '@/hooks/table';
import type { QueryOrderData } from '@/hooks/query-order';
import { ref } from 'vue';
import { ASC, DESC } from '@/hooks/query-order';
const emits = defineEmits(['query']);
const props = defineProps<Partial<{
columns: Array<TableColumnData>;
columnsHook: TableColumnsHook;
queryOrder: QueryOrderData;
}>>();
const columnsValue = ref<Array<string>>([]);
const orderValue = ref<number>(ASC);
// 列显示切换
const columnsVisibleChanged = (show: boolean) => {
if (show && props.columnsHook) {
columnsValue.value = props.columnsHook.getConfig();
}
};
// 排序显示切换
const sortVisibleChanged = (show: boolean) => {
if (show && props.queryOrder) {
orderValue.value = props.queryOrder.order.value;
}
};
// 重置列
const resetColumns = () => {
if (props.columnsHook) {
props.columnsHook.saveConfig(undefined);
columnsValue.value = props.columnsHook.getConfig();
}
};
// 修改列
const columnsChanged = () => {
props.columnsHook?.saveConfig(columnsValue.value);
};
// 修改排序
const sortChanged = () => {
props.queryOrder?.saveConfig(orderValue.value);
emits('query');
};
</script>
<style lang="less" scoped>
</style>

78
orion-visor-ui/src/components/view/card-list/components/card-field-adjust.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<!-- 调整字段 -->
<a-popover class="table-adjust-popover"
position="br"
trigger="click"
:content-style="{ padding: 0 }"
@popup-visible-change="visibleChanged">
<!-- 触发按钮 -->
<a-button class="icon-button card-header-icon-button" title="调整字段">
<icon-list />
</a-button>
<!-- 调整内容 -->
<template #content>
<!-- 顶部按钮 -->
<div class="table-adjust-popover-header">
<span class="table-adjust-title">
表格展示字段
</span>
<a-button type="text"
size="mini"
@click="resetFields">
重置
</a-button>
</div>
<!-- 分隔符 -->
<a-divider :margin="4" />
<!-- 列信息 -->
<a-checkbox-group v-model="fieldsValue"
direction="vertical"
@change="fieldsChanged">
<a-checkbox v-for="field in fieldsHook.originFields"
:key="field.dataIndex || field.slotName"
:value="field.dataIndex || field.slotName">
{{ field.label }}
</a-checkbox>
</a-checkbox-group>
</template>
</a-popover>
</template>
<script lang="ts">
export default {
name: 'cardFieldAdjust'
};
</script>
<script lang="ts" setup>
import type { CardFieldsHook } from '@/hooks/card';
import { ref } from 'vue';
const props = defineProps<{
fieldsHook: CardFieldsHook;
}>();
const fieldsValue = ref<Array<string>>([]);
// 列显示切换
const visibleChanged = (show: boolean) => {
if (show) {
fieldsValue.value = props.fieldsHook.getConfig();
}
};
// 重置字段
const resetFields = () => {
props.fieldsHook.saveConfig(undefined);
fieldsValue.value = props.fieldsHook.getConfig();
};
// 修改字段
const fieldsChanged = () => {
props.fieldsHook.saveConfig(fieldsValue.value);
};
</script>
<style lang="less" scoped>
</style>

12
orion-visor-ui/src/components/view/card-list/components/card-header.vue
View File

@@ -90,6 +90,13 @@
@click="bubblesEmitter(HeaderEmitter.RESET)">
<icon-refresh />
</a-button>
<!-- 调整字段 -->
<card-field-adjust v-if="fieldsHook"
:fields-hook="fieldsHook" />
<!-- 调整排序 -->
<card-sort-adjust v-if="queryOrder"
:query-order="queryOrder"
@query="bubblesEmitter(HeaderEmitter.SEARCH)" />
</a-space>
</div>
</div>
@@ -110,13 +117,14 @@
import { triggerMouseEvent } from '@/utils/event';
import { HeaderEmitter } from '../types/emits';
import useEmitter from '@/hooks/emitter';
import CardFieldAdjust from './card-field-adjust.vue';
import CardSortAdjust from './card-sort-adjust.vue';
const props = defineProps<CardProps>();
const emits = defineEmits(['emitter']);
const { bubblesEmitter } = useEmitter(emits);
const appStore = useAppStore();
const { bubblesEmitter } = useEmitter(emits);
const filterRef = ref();

72
orion-visor-ui/src/components/view/card-list/components/card-sort-adjust.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<!-- 调整排序 -->
<a-popover class="table-adjust-popover"
position="br"
trigger="click"
:content-style="{ padding: 0 }"
@popup-visible-change="visibleChanged">
<!-- 触发按钮 -->
<a-button class="icon-button card-header-icon-button" title="调整排序">
<icon-sort-ascending />
</a-button>
<!-- 调整内容 -->
<template #content>
<!-- 顶部按钮 -->
<div class="table-adjust-popover-header">
<span class="table-adjust-title">
表格查询排序
</span>
</div>
<!-- 分隔符 -->
<a-divider :margin="4" />
<!-- 排序信息 -->
<a-radio-group v-model="orderValue"
direction="vertical"
@change="sortChanged">
<a-radio :value="ASC">
升序排序
</a-radio>
<a-radio :value="DESC">
降序排序
</a-radio>
</a-radio-group>
</template>
</a-popover>
</template>
<script lang="ts">
export default {
name: 'cardSortAdjust'
};
</script>
<script lang="ts" setup>
import type { QueryOrderData } from '@/hooks/query-order';
import { ref } from 'vue';
import { ASC, DESC } from '@/hooks/query-order';
const emits = defineEmits(['query']);
const props = defineProps<{
queryOrder: QueryOrderData;
}>();
const orderValue = ref<number>(ASC);
// 排序显示切换
const visibleChanged = (show: boolean) => {
if (show) {
orderValue.value = props.queryOrder.order.value;
}
};
// 修改排序
const sortChanged = () => {
props.queryOrder.saveConfig(orderValue.value);
emits('query');
};
</script>
<style lang="less" scoped>
</style>

6
orion-visor-ui/src/components/view/card-list/index.vue
View File

@@ -80,12 +80,12 @@
</script>
<script lang="ts" setup>
import type { CardProps } from './types/props';
import { Emitter } from './types/emits';
import useEmitter from '@/hooks/emitter';
import CreateCard from './components/create-card.vue';
import CardHeader from './components/card-header.vue';
import CardItem from './components/card-item.vue';
import { Emitter } from './types/emits';
import { CardProps } from './types/props';
import useEmitter from '@/hooks/emitter';
const props = withDefaults(defineProps<CardProps>(), {
rowKey: 'id',

6
orion-visor-ui/src/components/view/card-list/types/props.ts
View File

@@ -1,5 +1,7 @@
import type { CSSProperties } from 'vue';
import type { PaginationProps, ResponsiveValue } from '@arco-design/web-vue';
import type { CardFieldsHook } from '@/hooks/card';
import type { QueryOrderData } from '@/hooks/query-order';
import type { CardFieldConfig, CardPosition, CardRecord, ColResponsiveValue, HandleVisible } from '@/types/card';
// 卡片属性
@@ -19,7 +21,9 @@ export interface CardProps {
createCardDescription?: string;
createCardPosition?: CardPosition;
addPermission?: Array<string>;
cardLayoutGutter?: Number | ResponsiveValue | Array<Number> | Array<ResponsiveValue>;
fieldsHook?: CardFieldsHook;
queryOrder?: QueryOrderData;
cardLayoutGutter?: number | ResponsiveValue | Array<number> | Array<ResponsiveValue>;
cardLayoutCols?: ColResponsiveValue;
handleVisible?: HandleVisible;
list?: Array<CardRecord>;

93
orion-visor-ui/src/hooks/card.ts
View File

@@ -1,10 +1,31 @@
import type { Ref } from 'vue';
import { reactive, ref } from 'vue';
import type { PaginationProps } from '@arco-design/web-vue';
import type { ColResponsiveValue } from '@/types/card';
import { reactive } from 'vue';
import type { ColResponsiveValue, CardFieldConfig, CardField } from '@/types/card';
import { isNumber } from '@/utils/is';
import { useAppStore } from '@/store';
import { CardPageSizeOptions } from '@/types/const';
// 卡片显示字段 key
const CardFieldsKey = 'card-fields';
/**
* 卡片字段配置数据
*/
export interface CardFieldConfigData {
cardFieldConfig: Ref<CardFieldConfig>;
fieldsHook: CardFieldsHook;
}
/**
* 卡片字段配置操作
*/
export interface CardFieldsHook {
originFields: Array<CardField>;
getConfig: () => Array<string>;
saveConfig: (config: Array<string> | undefined) => void;
}
/**
* 创建卡片列表列布局
*/
@@ -33,3 +54,71 @@ export const useCardPagination = (): PaginationProps => {
pageSizeOptions: CardPageSizeOptions
});
};
/**
* 使用卡片字段配置
*/
export const useCardFieldConfig = (table: string, originFieldConfig: CardFieldConfig): CardFieldConfigData => {
const cardFieldConfig = ref(originFieldConfig);
// 获取配置
const getConfig = () => {
// 查询缓存
let preferConfig: Record<string, string[]> = {};
const localConfig = localStorage.getItem(CardFieldsKey);
if (localConfig) {
try {
preferConfig = JSON.parse(localConfig as string);
} catch (e) {
}
}
// 解析配置
const preferValue = preferConfig[table];
if (preferValue?.length) {
// 配置值
return preferValue;
} else {
// 默认值
return originFieldConfig.fields.filter(s => s.default).map(s => (s.dataIndex || s.slotName) as string);
}
};
// 保存配置
const saveConfig = (config: Array<string> | undefined) => {
// 查询缓存
let preferConfig: Record<string, string[] | undefined> = {};
const localConfig = localStorage.getItem(CardFieldsKey);
if (localConfig) {
try {
preferConfig = JSON.parse(localConfig as string);
} catch (e) {
}
}
// 设置缓存
preferConfig[table] = config;
localStorage.setItem(CardFieldsKey, JSON.stringify(preferConfig));
// 刷新
refresh();
};
// 刷新
const refresh = () => {
const preferConfig = getConfig();
cardFieldConfig.value = {
...originFieldConfig,
fields: originFieldConfig.fields.filter(s => preferConfig.includes((s.dataIndex || s.slotName) as string)),
};
};
// 初始化
refresh();
return {
cardFieldConfig,
fieldsHook: {
originFields: originFieldConfig.fields,
getConfig,
saveConfig,
}
};
};

75
orion-visor-ui/src/hooks/query-order.ts Normal file
View File

@@ -0,0 +1,75 @@
import type { Ref } from 'vue';
import { ref } from 'vue';
import type { OrderDirection } from '@/types/global';
// 查询排序 key
const QueryOrderKey = 'query-order';
// 排序
export const DESC = 0;
export const ASC = 1;
/**
* 查询排序数据
*/
export interface QueryOrderData {
order: Ref<number>;
markOrderly: <T extends OrderDirection>(request: T) => T;
saveConfig: (sort: number) => void;
}
/**
* 使用查询排序
*/
export const useQueryOrder = (table: string, defaultSort: number = ASC): QueryOrderData => {
const order = ref(defaultSort);
// 刷新配置
const refresh = () => {
// 查询缓存
let preferConfig: Record<string, string> = {};
const localConfig = localStorage.getItem(QueryOrderKey);
if (localConfig) {
try {
preferConfig = JSON.parse(localConfig as string);
} catch (e) {
}
}
// 解析配置
const preferValue = Number.parseInt(preferConfig[table]);
if (preferValue) {
order.value = preferValue;
}
};
const markOrderly = <T extends OrderDirection>(request: T) => {
request.order = order.value;
return request;
};
// 保存配置
const saveConfig = (s: number) => {
order.value = s;
// 查询缓存
let preferConfig: Record<string, any> = {};
const localConfig = localStorage.getItem(QueryOrderKey);
if (localConfig) {
try {
preferConfig = JSON.parse(localConfig as string);
} catch (e) {
}
}
// 设置缓存
preferConfig[table] = s;
localStorage.setItem(QueryOrderKey, JSON.stringify(preferConfig));
};
// 初始化
refresh();
return {
order,
markOrderly,
saveConfig,
};
};

88
orion-visor-ui/src/hooks/table.ts
View File

@@ -1,9 +1,29 @@
import type { PaginationProps, TableExpandable, TableRowSelection } from '@arco-design/web-vue';
import { reactive } from 'vue';
import type { PaginationProps, TableColumnData, TableExpandable, TableRowSelection } from '@arco-design/web-vue';
import type { Ref } from 'vue';
import { reactive, ref } from 'vue';
import { useAppStore } from '@/store';
import { isNumber } from '@/utils/is';
import { TablePageSizeOptions } from '@/types/const';
// 表格显示列 key
const TableColumnsKey = 'table-columns';
/**
* 表格列数据
*/
export interface TableColumnsData {
tableColumns: Ref<TableColumnData[]>;
columnsHook: TableColumnsHook;
}
/**
* 表格列操作
*/
export interface TableColumnsHook {
getConfig: () => Array<string>;
saveConfig: (config: Array<string> | undefined) => void;
}
/**
* 创建列表分页
*/
@@ -42,3 +62,67 @@ export const useExpandable = (ext?: TableExpandable): TableExpandable => {
...ext
});
};
/**
* 使用表格列
*/
export const useTableColumns = (table: string, originColumns: Array<TableColumnData>): TableColumnsData => {
const tableColumns = ref(originColumns);
// 获取配置
const getConfig = () => {
// 查询缓存
let preferConfig: Record<string, string[]> = {};
const localConfig = localStorage.getItem(TableColumnsKey);
if (localConfig) {
try {
preferConfig = JSON.parse(localConfig as string);
} catch (e) {
}
}
// 解析配置
const preferValue = preferConfig[table];
if (preferValue?.length) {
// 配置值
return preferValue;
} else {
// 默认值
return originColumns.filter(s => s.default).map(s => (s.dataIndex || s.slotName) as string);
}
};
// 保存配置
const saveConfig = (config: Array<string> | undefined) => {
// 查询缓存
let preferConfig: Record<string, string[] | undefined> = {};
const localConfig = localStorage.getItem(TableColumnsKey);
if (localConfig) {
try {
preferConfig = JSON.parse(localConfig as string);
} catch (e) {
}
}
// 设置缓存
preferConfig[table] = config;
localStorage.setItem(TableColumnsKey, JSON.stringify(preferConfig));
// 刷新
refresh();
};
// 刷新
const refresh = () => {
const preferConfig = getConfig();
tableColumns.value = originColumns.filter(s => preferConfig.includes((s.dataIndex || s.slotName) as string));
};
// 初始化
refresh();
return {
tableColumns,
columnsHook: {
getConfig,
saveConfig,
}
};
};

6
orion-visor-ui/src/types/arco.d.ts vendored
View File

@@ -1,7 +1,11 @@
import type { TreeNodeData } from '@arco-design/web-vue';
import type { TableColumnData, TreeNodeData } from '@arco-design/web-vue';
import type { NodeData } from './global';
declare module '@arco-design/web-vue' {
export interface TreeNodeData extends TreeNodeData, NodeData {
}
export interface TableColumnData extends TableColumnData {
default?: boolean;
}
}

1
orion-visor-ui/src/types/card.ts
View File

@@ -50,6 +50,7 @@ export interface CardField {
valueClass?: string;
ellipsis?: boolean;
tooltip?: boolean;
default: boolean;
render?: (data: {
record: CardRecord;
index: number;

4
orion-visor-ui/src/types/global.ts
View File

@@ -31,6 +31,10 @@ export interface PostData {
url: string;
}
export interface OrderDirection {
order?: number;
}
export interface Pagination {
page?: number;
limit?: number;

2
orion-visor-ui/src/views/user/info/components/user-operator-log.vue
View File

@@ -35,12 +35,12 @@
<script lang="ts" setup>
import type { UserQueryResponse } from '@/api/user/user';
import type { OperatorLogQueryRequest } from '@/api/user/operator-log';
import { ref, reactive, onBeforeMount } from 'vue';
import { useCacheStore, useDictStore } from '@/store';
import { dictKeys } from '@/views/user/operator-log/types/const';
import OperatorLogQueryHeader from '@/views/user/operator-log/components/operator-log-query-header.vue';
import OperatorLogSimpleTable from '@/views/user/operator-log/components/operator-log-simple-table.vue';
import { OperatorLogQueryRequest } from '@/api/user/operator-log';
const props = defineProps<{
user?: UserQueryResponse;