Skip to content

Commit

Permalink
style: 优化表格页面样式及表格纵向滚动条
Browse files Browse the repository at this point in the history
  • Loading branch information
@Charles7c
Charles7c committed May 12, 2024
1 parent c1c5f7f commit 861f620
Show file tree
Hide file tree
Showing 14 changed files with 614 additions and 551 deletions.
18 changes: 18 additions & 0 deletions src/components/GiTable/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<template>
<div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }">
<a-row v-if="props.title" justify="space-between" align="center" class="gi-table__header">
<a-space wrap>
<slot name="custom-title">
<div class="gi-table__header-title">{{ props.title }}</div>
</slot>
</a-space>
</a-row>
<a-row justify="space-between" align="center" class="gi-table__toolbar">
<a-space wrap class="gi-table__toolbar-left" :size="[8, 8]">
<slot name="custom-left"></slot>
Expand Down Expand Up @@ -84,6 +91,7 @@ import { VueDraggable } from 'vue-draggable-plus'
defineOptions({ name: 'GiTable', inheritAttrs: false })
const props = withDefaults(defineProps<Props>(), {
title: '',
disabledTools: () => [], // 禁止显示的工具
disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
})
Expand All @@ -96,6 +104,7 @@ const attrs = useAttrs()
const slots = useSlots()
interface Props {
title?: string
disabledTools?: string[]
disabledColumnKeys?: string[]
}
Expand Down Expand Up @@ -201,6 +210,15 @@ defineExpose({ tableRef })
max-height: 100%;
overflow: hidden;
}
&__header {
padding: 0 0 10px;
&-title {
color: var(--color-text-1);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
}
&__toolbar {
:deep(.arco-form-item-layout-inline) {
margin-right: 8px;
Expand Down
55 changes: 47 additions & 8 deletions src/styles/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,19 +181,52 @@
}
}

.gi_table_box {
max-height: 100%;
overflow: hidden;
}

// 使用场景，页面内容超出高度会自动滚动
// 普通页面（使用场景，页面内容超出高度会自动滚动）
.gi_page {
flex: 1;
padding: $margin;
box-sizing: border-box;
overflow-y: auto;
}

// 表格页面
.table-page {
height: 100%;
overflow: hidden;
margin: $margin;
background: var(--color-bg-1);
padding: $padding;
padding-bottom: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
.header {
padding: 0 0 10px;
.title {
color: var(--color-text-1);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
}
&:after {
content: '';
height: 20px;
font-size: 12px;
color: var(--color-text-3);
margin-top: 12px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
}

.gi_table_box {
max-height: 100%;
overflow: hidden;
}

.gi_card_title {
.arco-card-header-title::before {
content: '';
Expand Down Expand Up @@ -263,11 +296,17 @@
overflow-y: auto;
& > .arco-card-header {
height: auto;
padding: 20px;
padding: $padding;
border: none;
.arco-card-header-title {
color: var(--color-text-1);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
}
& > .arco-card-body {
padding: 0 20px 20px 20px;
padding: 0 $padding $padding $padding;
}
}

Expand Down
25 changes: 15 additions & 10 deletions src/views/monitor/log/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<template>
<div class="gi_page">
<a-card title="系统日志" class="general-card">
<a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
<a-tab-pane key="1" title="登录日志" />
<a-tab-pane key="2" title="操作日志" />
</a-tabs>
<keep-alive>
<component :is="PaneMap[activeKey]" />
</keep-alive>
</a-card>
<div class="table-page">
<a-row justify="space-between" align="center" class="header">
<a-space wrap>
<slot name="custom-title">
<div class="title">系统日志</div>
</slot>
</a-space>
</a-row>
<a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
<a-tab-pane key="1" title="登录日志" />
<a-tab-pane key="2" title="操作日志" />
</a-tabs>
<keep-alive>
<component :is="PaneMap[activeKey]" />
</keep-alive>
</div>
</template>

Expand Down
79 changes: 39 additions & 40 deletions src/views/monitor/online/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,44 @@
<template>
<div class="gi_page">
<a-card title="在线用户" class="general-card">
<GiTable
row-key="id"
:data="dataList"
:columns="columns"
:loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination"
:disabled-tools="['size', 'setting']"
@refresh="search"
>
<template #custom-left>
<a-input v-model="queryForm.nickname" placeholder="请输入用户名或昵称" allow-clear @change="search">
<template #prefix><icon-search /></template>
</a-input>
<DateRangePicker v-model="queryForm.loginTime" @change="search" />
<a-button @click="reset">重置</a-button>
</template>
<template #nickname="{ record }">{{ record.nickname }}（{{ record.username }}）</template>
<template #action="{ record }">
<a-space>
<a-popconfirm
type="warning"
content="是否确定强退该用户？"
:ok-button-props="{ status: 'danger' }"
@ok="handleKickout(record.token)"
<div class="table-page">
<GiTable
row-key="id"
title="在线用户"
:data="dataList"
:columns="columns"
:loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination"
:disabled-tools="['size', 'setting']"
@refresh="search"
>
<template #custom-left>
<a-input v-model="queryForm.nickname" placeholder="请输入用户名或昵称" allow-clear @change="search">
<template #prefix><icon-search /></template>
</a-input>
<DateRangePicker v-model="queryForm.loginTime" @change="search" />
<a-button @click="reset">重置</a-button>
</template>
<template #nickname="{ record }">{{ record.nickname }}（{{ record.username }}）</template>
<template #action="{ record }">
<a-space>
<a-popconfirm
type="warning"
content="是否确定强退该用户？"
:ok-button-props="{ status: 'danger' }"
@ok="handleKickout(record.token)"
>
<a-link
v-permission="['monitor:online:kickout']"
status="danger"
:title="currentToken === record.token ? '不能强退自己' : '强退'"
:disabled="currentToken === record.token"
>
<a-link
v-permission="['monitor:online:kickout']"
status="danger"
:title="currentToken === record.token ? '不能强退自己' : '强退'"
:disabled="currentToken === record.token"
>
强退
</a-link>
</a-popconfirm>
</a-space>
</template>
</GiTable>
</a-card>
强退
</a-link>
</a-popconfirm>
</a-space>
</template>
</GiTable>
</div>
</template>

Expand Down
2 changes: 1 addition & 1 deletion src/views/system/config/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<BasicSetting />
</a-tab-pane>
<a-tab-pane key="2" title="邮件配置(暂未开放)" disabled></a-tab-pane>
<a-tab-pane key="3" title="安全设置">
<a-tab-pane key="3" title="安全配置">
<SecuritySetting />
</a-tab-pane>
</a-tabs>
Expand Down
135 changes: 67 additions & 68 deletions src/views/system/dept/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,72 @@
<template>
<div class="gi_page">
<a-card title="部门管理" class="general-card">
<GiTable
ref="tableRef"
row-key="id"
:data="dataList"
:columns="columns"
:loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="false"
:disabled-tools="['size']"
:disabled-column-keys="['name']"
@refresh="search"
>
<template #expand-icon="{ expanded }">
<IconDown v-if="expanded" />
<IconRight v-else />
</template>
<template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
<template #prefix><icon-search /></template>
</a-input>
<a-select
v-model="queryForm.status"
:options="DisEnableStatusList"
placeholder="请选择状态"
allow-clear
style="width: 150px"
@change="search"
/>
<a-button @click="reset">重置</a-button>
</template>
<template #custom-right>
<a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()">
<template #icon><icon-plus /></template>
<span>新增</span>
<div class="table-page">
<GiTable
ref="tableRef"
row-key="id"
title="部门管理"
:data="dataList"
:columns="columns"
:loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="false"
:disabled-tools="['size']"
:disabled-column-keys="['name']"
@refresh="search"
>
<template #expand-icon="{ expanded }">
<IconDown v-if="expanded" />
<IconRight v-else />
</template>
<template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
<template #prefix><icon-search /></template>
</a-input>
<a-select
v-model="queryForm.status"
:options="DisEnableStatusList"
placeholder="请选择状态"
allow-clear
style="width: 150px"
@change="search"
/>
<a-button @click="reset">重置</a-button>
</template>
<template #custom-right>
<a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()">
<template #icon><icon-plus /></template>
<span>新增</span>
</a-button>
<a-tooltip content="导出">
<a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
<template #icon>
<icon-download />
</template>
</a-button>
<a-tooltip content="导出">
<a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
<template #icon>
<icon-download />
</template>
</a-button>
</a-tooltip>
</template>
<template #status="{ record }">
<GiCellStatus :status="record.status" />
</template>
<template #isSystem="{ record }">
<a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
<a-tag v-else color="arcoblue" size="small">否</a-tag>
</template>
<template #action="{ record }">
<a-space>
<a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
<a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
<a-link
v-permission="['system:dept:delete']"
status="danger"
:title="record.isSystem ? '系统内置数据不能删除' : undefined"
:disabled="record.disabled"
@click="onDelete(record)"
>
删除
</a-link>
</a-space>
</template>
</GiTable>
</a-card>
</a-tooltip>
</template>
<template #status="{ record }">
<GiCellStatus :status="record.status" />
</template>
<template #isSystem="{ record }">
<a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
<a-tag v-else color="arcoblue" size="small">否</a-tag>
</template>
<template #action="{ record }">
<a-space>
<a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
<a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
<a-link
v-permission="['system:dept:delete']"
status="danger"
:title="record.isSystem ? '系统内置数据不能删除' : undefined"
:disabled="record.disabled"
@click="onDelete(record)"
>
删除
</a-link>
</a-space>
</template>
</GiTable>

<DeptAddModal ref="DeptAddModalRef" @save-success="search" />
</div>
Expand Down
Loading

1 comment on commit 861f620

@Charles7c
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Closes continew-org/continew-admin#62

Please sign in to comment.