ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-09-25 16:57:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 优化表格页面样式及表格纵向滚动条

Browse Source
This commit is contained in:
Charles7c
2024-05-12 19:27:27 +08:00
parent c1c5f7f632
commit 861f6203cc
14 changed files with 614 additions and 551 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/GiTable/index.vue
View File

@@ -1,5 +1,12 @@
<template> <template>
<div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }"> <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-row justify="space-between" align="center" class="gi-table__toolbar">
<a-space wrap class="gi-table__toolbar-left" :size="[8, 8]"> <a-space wrap class="gi-table__toolbar-left" :size="[8, 8]">
<slot name="custom-left"></slot> <slot name="custom-left"></slot>
@@ -84,6 +91,7 @@ import { VueDraggable } from 'vue-draggable-plus'
defineOptions({ name: 'GiTable', inheritAttrs: false }) defineOptions({ name: 'GiTable', inheritAttrs: false })
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
title: '',
disabledTools: () => [], // 禁止显示的工具 disabledTools: () => [], // 禁止显示的工具
disabledColumnKeys: () => [] // 禁止控制显示隐藏的列 disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
}) })
@@ -96,6 +104,7 @@ const attrs = useAttrs()
const slots = useSlots() const slots = useSlots()
interface Props { interface Props {
title?: string
disabledTools?: string[] disabledTools?: string[]
disabledColumnKeys?: string[] disabledColumnKeys?: string[]
} }
@@ -201,6 +210,15 @@ defineExpose({ tableRef })
max-height: 100%; max-height: 100%;
overflow: hidden; overflow: hidden;
} }
&__header {
padding: 0 0 10px;
&-title {
color: var(--color-text-1);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
}
&__toolbar { &__toolbar {
:deep(.arco-form-item-layout-inline) { :deep(.arco-form-item-layout-inline) {
margin-right: 8px; margin-right: 8px;

55
src/styles/global.scss
View File

@@ -181,12 +181,7 @@
} }
} }
.gi_table_box { // 普通页面（使用场景，页面内容超出高度会自动滚动）
max-height: 100%;
overflow: hidden;
}
// 使用场景，页面内容超出高度会自动滚动
.gi_page { .gi_page {
flex: 1; flex: 1;
padding: $margin; padding: $margin;
@@ -194,6 +189,44 @@
overflow-y: auto; 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 { .gi_card_title {
.arco-card-header-title::before { .arco-card-header-title::before {
content: ''; content: '';
@@ -263,11 +296,17 @@
overflow-y: auto; overflow-y: auto;
& > .arco-card-header { & > .arco-card-header {
height: auto; height: auto;
padding: 20px; padding: $padding;
border: none; border: none;
.arco-card-header-title {
color: var(--color-text-1);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
} }
& > .arco-card-body { & > .arco-card-body {
padding: 0 20px 20px 20px; padding: 0 $padding $padding $padding;
} }
} }

25
src/views/monitor/log/index.vue
View File

@@ -1,14 +1,19 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="系统日志" class="general-card"> <a-row justify="space-between" align="center" class="header">
<a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change"> <a-space wrap>
<a-tab-pane key="1" title="登录日志" /> <slot name="custom-title">
<a-tab-pane key="2" title="操作日志" /> <div class="title">系统日志</div>
</a-tabs> </slot>
<keep-alive> </a-space>
<component :is="PaneMap[activeKey]" /> </a-row>
</keep-alive> <a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
</a-card> <a-tab-pane key="1" title="登录日志" />
<a-tab-pane key="2" title="操作日志" />
</a-tabs>
<keep-alive>
<component :is="PaneMap[activeKey]" />
</keep-alive>
</div> </div>
</template> </template>

79
src/views/monitor/online/index.vue
View File

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

2
src/views/system/config/index.vue
View File

@@ -6,7 +6,7 @@
<BasicSetting /> <BasicSetting />
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="2" title="邮件配置(暂未开放)" disabled></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 /> <SecuritySetting />
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>

135
src/views/system/dept/index.vue
View File

@@ -1,73 +1,72 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="部门管理" class="general-card"> <GiTable
<GiTable ref="tableRef"
ref="tableRef" row-key="id"
row-key="id" title="部门管理"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="false" :pagination="false"
:disabled-tools="['size']" :disabled-tools="['size']"
:disabled-column-keys="['name']" :disabled-column-keys="['name']"
@refresh="search" @refresh="search"
> >
<template #expand-icon="{ expanded }"> <template #expand-icon="{ expanded }">
<IconDown v-if="expanded" /> <IconDown v-if="expanded" />
<IconRight v-else /> <IconRight v-else />
</template> </template>
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search"> <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
<template #prefix><icon-search /></template> <template #prefix><icon-search /></template>
</a-input> </a-input>
<a-select <a-select
v-model="queryForm.status" v-model="queryForm.status"
:options="DisEnableStatusList" :options="DisEnableStatusList"
placeholder="请选择状态" placeholder="请选择状态"
allow-clear allow-clear
style="width: 150px" style="width: 150px"
@change="search" @change="search"
/> />
<a-button @click="reset">重置</a-button> <a-button @click="reset">重置</a-button>
</template> </template>
<template #custom-right> <template #custom-right>
<a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()"> <a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()">
<template #icon><icon-plus /></template> <template #icon><icon-plus /></template>
<span>新增</span> <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-button>
<a-tooltip content="导出"> </a-tooltip>
<a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport"> </template>
<template #icon> <template #status="{ record }">
<icon-download /> <GiCellStatus :status="record.status" />
</template> </template>
</a-button> <template #isSystem="{ record }">
</a-tooltip> <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
</template> <a-tag v-else color="arcoblue" size="small">否</a-tag>
<template #status="{ record }"> </template>
<GiCellStatus :status="record.status" /> <template #action="{ record }">
</template> <a-space>
<template #isSystem="{ record }"> <a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
<a-tag v-if="record.isSystem" color="red" size="small">是</a-tag> <a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
<a-tag v-else color="arcoblue" size="small">否</a-tag> <a-link
</template> v-permission="['system:dept:delete']"
<template #action="{ record }"> status="danger"
<a-space> :title="record.isSystem ? '系统内置数据不能删除' : undefined"
<a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link> :disabled="record.disabled"
<a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link> @click="onDelete(record)"
<a-link >
v-permission="['system:dept:delete']" 删除
status="danger" </a-link>
:title="record.isSystem ? '系统内置数据不能删除' : undefined" </a-space>
:disabled="record.disabled" </template>
@click="onDelete(record)" </GiTable>
>
删除
</a-link>
</a-space>
</template>
</GiTable>
</a-card>
<DeptAddModal ref="DeptAddModalRef" @save-success="search" /> <DeptAddModal ref="DeptAddModalRef" @save-success="search" />
</div> </div>

91
src/views/system/dict/index.vue
View File

@@ -1,50 +1,49 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="字典管理" class="general-card"> <GiTable
<GiTable row-key="id"
row-key="id" title="字典管理"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination" :pagination="pagination"
:disabled-tools="['size']" :disabled-tools="['size']"
:disabled-column-keys="['name']" :disabled-column-keys="['name']"
@refresh="search" @refresh="search"
> >
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search"> <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
<template #prefix><icon-search /></template> <template #prefix><icon-search /></template>
</a-input> </a-input>
<a-button @click="reset">重置</a-button> <a-button @click="reset">重置</a-button>
</template> </template>
<template #custom-right> <template #custom-right>
<a-button v-permission="['system:dict:add']" type="primary" @click="onAdd"> <a-button v-permission="['system:dict:add']" type="primary" @click="onAdd">
<template #icon><icon-plus /></template> <template #icon><icon-plus /></template>
<span>新增</span> <span>新增</span>
</a-button> </a-button>
</template> </template>
<template #isSystem="{ record }"> <template #isSystem="{ record }">
<a-tag v-if="record.isSystem" color="red">是</a-tag> <a-tag v-if="record.isSystem" color="red">是</a-tag>
<a-tag v-else color="arcoblue">否</a-tag> <a-tag v-else color="arcoblue">否</a-tag>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-link @click="onViewDictItem(record)">管理</a-link> <a-link @click="onViewDictItem(record)">管理</a-link>
<a-link v-permission="['system:dict:update']" @click="onUpdate(record)">修改</a-link> <a-link v-permission="['system:dict:update']" @click="onUpdate(record)">修改</a-link>
<a-link <a-link
v-permission="['system:dict:delete']" v-permission="['system:dict:delete']"
status="danger" status="danger"
:title="record.isSystem ? '系统内置数据不能删除' : '删除'" :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
:disabled="record.disabled" :disabled="record.disabled"
@click="onDelete(record)" @click="onDelete(record)"
> >
删除 删除
</a-link> </a-link>
</a-space> </a-space>
</template> </template>
</GiTable> </GiTable>
</a-card>
<DictAddModal ref="DictAddModalRef" @save-success="search" /> <DictAddModal ref="DictAddModalRef" @save-success="search" />
<DictItemModal ref="DictItemModalRef" /> <DictItemModal ref="DictItemModalRef" />

6
src/views/system/file/main/FileAside.vue
View File

@@ -55,6 +55,12 @@ const onClickItem = (item: FileTypeListItem) => {
margin: 0 16px; margin: 0 16px;
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
.arco-card-header-title {
color: var(--color-text-1);
font-size: 18px;
font-weight: 500;
line-height: 1.5;
}
} }
} }
</style> </style>

157
src/views/system/menu/index.vue
View File

@@ -1,84 +1,83 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="菜单管理" class="general-card"> <GiTable
<GiTable ref="tableRef"
ref="tableRef" title="菜单管理"
row-key="id" row-key="id"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1700, maxHeight: '81vh' }" :scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
:pagination="false" :pagination="false"
:disabled-column-keys="['title']" :disabled-column-keys="['title']"
@refresh="search" @refresh="search"
> >
<template #expand-icon="{ expanded }"> <template #expand-icon="{ expanded }">
<IconDown v-if="expanded" /> <IconDown v-if="expanded" />
<IconRight v-else /> <IconRight v-else />
</template> </template>
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search"> <a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
<template #prefix><icon-search /></template> <template #prefix><icon-search /></template>
</a-input> </a-input>
<a-select <a-select
v-model="queryForm.status" v-model="queryForm.status"
:options="DisEnableStatusList" :options="DisEnableStatusList"
placeholder="请选择状态" placeholder="请选择状态"
allow-clear allow-clear
style="width: 150px" style="width: 150px"
@change="search" @change="search"
/> />
<a-button @click="reset">重置</a-button> <a-button @click="reset">重置</a-button>
</template> </template>
<template #custom-right> <template #custom-right>
<a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()"> <a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()">
<template #icon><icon-plus /></template> <template #icon><icon-plus /></template>
<span>新增</span> <span>新增</span>
</a-button>
<a-tooltip content="展开/折叠">
<a-button class="gi_hover_btn-border" @click="onExpanded">
<template #icon>
<icon-list v-if="!isExpanded" />
<icon-mind-mapping v-else />
</template>
</a-button> </a-button>
<a-tooltip content="展开/折叠"> </a-tooltip>
<a-button class="gi_hover_btn-border" @click="onExpanded"> </template>
<template #icon> <template #title="{ record }">
<icon-list v-if="!isExpanded" /> <GiSvgIcon :name="record.icon" :size="15" />
<icon-mind-mapping v-else /> <span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span>
</template> </template>
</a-button> <template #type="{ record }">
</a-tooltip> <a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag>
</template> <a-tag v-if="record.type === 2" color="green">菜单</a-tag>
<template #title="{ record }"> <a-tag v-if="record.type === 3">按钮</a-tag>
<GiSvgIcon :name="record.icon" :size="15" /> </template>
<span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span> <template #status="{ record }">
</template> <GiCellStatus :status="record.status" />
<template #type="{ record }"> </template>
<a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag> <template #isExternal="{ record }">
<a-tag v-if="record.type === 2" color="green">菜单</a-tag> <a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag>
<a-tag v-if="record.type === 3">按钮</a-tag> <a-tag v-else color="red" size="small">否</a-tag>
</template> </template>
<template #status="{ record }"> <template #isHidden="{ record }">
<GiCellStatus :status="record.status" /> <a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag>
</template> <a-tag v-else color="red" size="small">否</a-tag>
<template #isExternal="{ record }"> </template>
<a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag> <template #isCache="{ record }">
<a-tag v-else color="red" size="small">否</a-tag> <a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag>
</template> <a-tag v-else color="red" size="small">否</a-tag>
<template #isHidden="{ record }"> </template>
<a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag> <template #action="{ record }">
<a-tag v-else color="red" size="small">否</a-tag> <a-space>
</template> <a-link v-permission="['system:menu:update']" @click="onUpdate(record)">修改</a-link>
<template #isCache="{ record }"> <a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
<a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag> 新增
<a-tag v-else color="red" size="small">否</a-tag> </a-link>
</template> <a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
<template #action="{ record }"> </a-space>
<a-space> </template>
<a-link v-permission="['system:menu:update']" @click="onUpdate(record)">修改</a-link> </GiTable>
<a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
新增
</a-link>
<a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
</a-space>
</template>
</GiTable>
</a-card>
<MenuAddModal ref="MenuAddModalRef" :menus="dataList" @save-success="search" /> <MenuAddModal ref="MenuAddModalRef" :menus="dataList" @save-success="search" />
</div> </div>

101
src/views/system/notice/index.vue
View File

@@ -1,56 +1,53 @@
<template> <template>
<div> <div class="table-page">
<div class="gi_page"> <GiTable
<a-card title="通知公告" class="general-card"> row-key="id"
<GiTable title="通知公告"
row-key="id" :data="dataList"
:data="dataList" :columns="columns"
:columns="columns" :loading="loading"
:loading="loading" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :pagination="pagination"
:pagination="pagination" :disabled-tools="['size']"
:disabled-tools="['size']" :disabled-column-keys="['title']"
:disabled-column-keys="['title']" @refresh="search"
@refresh="search" >
> <template #custom-left>
<template #custom-left> <a-input v-model="queryForm.title" placeholder="请输入公告标题" allow-clear @change="search">
<a-input v-model="queryForm.title" placeholder="请输入公告标题" allow-clear @change="search"> <template #prefix><icon-search /></template>
<template #prefix><icon-search /></template> </a-input>
</a-input> <a-select
<a-select v-model="queryForm.type"
v-model="queryForm.type" :options="notice_type"
:options="notice_type" placeholder="请选择类型"
placeholder="请选择类型" allow-clear
allow-clear style="width: 150px"
style="width: 150px" @change="search"
@change="search" />
/> <a-button @click="reset">重置</a-button>
<a-button @click="reset">重置</a-button> </template>
</template> <template #custom-right>
<template #custom-right> <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd">
<a-button v-permission="['system:notice:add']" type="primary" @click="onAdd"> <template #icon><icon-plus /></template>
<template #icon><icon-plus /></template> <span>新增</span>
<span>新增</span> </a-button>
</a-button> </template>
</template> <template #title="{ record }">
<template #title="{ record }"> <a-link @click="onDetail(record)">{{ record.title }}</a-link>
<a-link @click="onDetail(record)">{{ record.title }}</a-link> </template>
</template> <template #type="{ record }">
<template #type="{ record }"> <GiCellTag :value="record.type" :dict="notice_type" />
<GiCellTag :value="record.type" :dict="notice_type" /> </template>
</template> <template #status="{ record }">
<template #status="{ record }"> <GiCellTag :value="record.status" :dict="notice_status_enum" />
<GiCellTag :value="record.status" :dict="notice_status_enum" /> </template>
</template> <template #action="{ record }">
<template #action="{ record }"> <a-space>
<a-space> <a-link v-permission="['system:notice:update']" @click="onUpdate(record)">修改</a-link>
<a-link v-permission="['system:notice:update']" @click="onUpdate(record)">修改</a-link> <a-link v-permission="['system:notice:delete']" status="danger" @click="onDelete(record)"> 删除 </a-link>
<a-link v-permission="['system:notice:delete']" status="danger" @click="onDelete(record)"> 删除 </a-link> </a-space>
</a-space> </template>
</template> </GiTable>
</GiTable>
</a-card>
</div>
<NoticeAddModal ref="NoticeAddModalRef" @save-success="search" /> <NoticeAddModal ref="NoticeAddModalRef" @save-success="search" />
<NoticeDetailModal ref="NoticeDetailModalRef" /> <NoticeDetailModal ref="NoticeDetailModalRef" />

105
src/views/system/role/index.vue
View File

@@ -1,58 +1,57 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="角色管理" class="general-card"> <GiTable
<GiTable row-key="id"
row-key="id" title="角色管理"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination" :pagination="pagination"
:disabled-tools="['size']" :disabled-tools="['size']"
:disabled-column-keys="['name']" :disabled-column-keys="['name']"
@refresh="search" @refresh="search"
> >
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search"> <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
<template #prefix><icon-search /></template> <template #prefix><icon-search /></template>
</a-input> </a-input>
<a-button @click="reset">重置</a-button> <a-button @click="reset">重置</a-button>
</template> </template>
<template #custom-right> <template #custom-right>
<a-button v-permission="['system:role:add']" type="primary" @click="onAdd"> <a-button v-permission="['system:role:add']" type="primary" @click="onAdd">
<template #icon><icon-plus /></template> <template #icon><icon-plus /></template>
<span>新增</span> <span>新增</span>
</a-button> </a-button>
</template> </template>
<template #name="{ record }"> <template #name="{ record }">
<a-link @click="onDetail(record)">{{ record.name }}</a-link> <a-link @click="onDetail(record)">{{ record.name }}</a-link>
</template> </template>
<template #dataScope="{ record }"> <template #dataScope="{ record }">
<GiCellTag :value="record.dataScope" :dict="data_scope_enum" /> <GiCellTag :value="record.dataScope" :dict="data_scope_enum" />
</template> </template>
<template #isSystem="{ record }"> <template #isSystem="{ record }">
<a-tag v-if="record.isSystem" color="red" size="small">是</a-tag> <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
<a-tag v-else color="arcoblue" size="small">否</a-tag> <a-tag v-else color="arcoblue" size="small">否</a-tag>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-link v-permission="['system:role:update']" @click="onUpdate(record)">修改</a-link> <a-link v-permission="['system:role:update']" @click="onUpdate(record)">修改</a-link>
<a-link <a-link
v-permission="['system:role:delete']" v-permission="['system:role:delete']"
status="danger" status="danger"
:title="record.isSystem ? '系统内置数据不能删除' : undefined" :title="record.isSystem ? '系统内置数据不能删除' : undefined"
:disabled="record.disabled" :disabled="record.disabled"
@click="onDelete(record)" @click="onDelete(record)"
> >
删除 删除
</a-link> </a-link>
</a-space> </a-space>
</template> </template>
</GiTable> </GiTable>
<RoleAddModal ref="RoleAddModalRef" @save-success="search" /> <RoleAddModal ref="RoleAddModalRef" @save-success="search" />
<RoleDetailDrawer ref="RoleDetailDrawerRef" /> <RoleDetailDrawer ref="RoleDetailDrawerRef" />
</a-card>
</div> </div>
</template> </template>

125
src/views/system/storage/index.vue
View File

@@ -1,67 +1,66 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="存储管理" class="general-card"> <GiTable
<GiTable row-key="id"
row-key="id" title="存储管理"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1300 }" :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
:pagination="pagination" :pagination="pagination"
:disabled-tools="['size']" :disabled-tools="['size']"
:disabled-column-keys="['name']" :disabled-column-keys="['name']"
@refresh="search" @refresh="search"
> >
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search"> <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
<template #prefix><icon-search /></template> <template #prefix><icon-search /></template>
</a-input> </a-input>
<a-select <a-select
v-model="queryForm.status" v-model="queryForm.status"
:options="DisEnableStatusList" :options="DisEnableStatusList"
placeholder="请选择状态" placeholder="请选择状态"
allow-clear allow-clear
style="width: 150px" style="width: 150px"
@change="search" @change="search"
/> />
<a-button @click="reset">重置</a-button> <a-button @click="reset">重置</a-button>
</template> </template>
<template #custom-right> <template #custom-right>
<a-button v-permission="['system:storage:add']" type="primary" @click="onAdd"> <a-button v-permission="['system:storage:add']" type="primary" @click="onAdd">
<template #icon><icon-plus /></template> <template #icon><icon-plus /></template>
<span>新增</span> <span>新增</span>
</a-button> </a-button>
</template> </template>
<template #name="{ record }"> <template #name="{ record }">
<a-space fill> <a-space fill>
<span>{{ record.name }}</span> <span>{{ record.name }}</span>
<a-tag v-if="record.isDefault" color="arcoblue" size="small" class="gi_round"> <a-tag v-if="record.isDefault" color="arcoblue" size="small" class="gi_round">
<template #default>默认</template> <template #default>默认</template>
</a-tag> </a-tag>
</a-space> </a-space>
</template> </template>
<template #type="{ record }"> <template #type="{ record }">
<GiCellTag :value="record.type" :dict="storage_type_enum" /> <GiCellTag :value="record.type" :dict="storage_type_enum" />
</template> </template>
<template #status="{ record }"> <template #status="{ record }">
<GiCellStatus :status="record.status" /> <GiCellStatus :status="record.status" />
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-link v-permission="['system:storage:update']" @click="onUpdate(record)">修改</a-link> <a-link v-permission="['system:storage:update']" @click="onUpdate(record)">修改</a-link>
<a-link <a-link
v-permission="['system:storage:delete']" v-permission="['system:storage:delete']"
status="danger" status="danger"
:title="record.isDefault ? '默认存储不能删除' : undefined" :title="record.isDefault ? '默认存储不能删除' : undefined"
:disabled="record.disabled" :disabled="record.disabled"
@click="onDelete(record)" @click="onDelete(record)"
> >
删除 删除
</a-link> </a-link>
</a-space> </a-space>
</template> </template>
</GiTable> </GiTable>
</a-card>
<StorageAddModal ref="StorageAddModalRef" @save-success="search" /> <StorageAddModal ref="StorageAddModalRef" @save-success="search" />
</div> </div>

201
src/views/system/user/index.vue
View File

@@ -1,103 +1,108 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="用户管理" class="general-card"> <a-row justify="space-between" align="center" class="header">
<a-row :gutter="16"> <a-space wrap>
<a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4"> <slot name="custom-title">
<a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px"> <div class="title">用户管理</div>
<template #prefix><icon-search /></template> </slot>
</a-input> </a-space>
<a-tree </a-row>
ref="treeRef" <a-row :gutter="16">
:data="deptList" <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
:selected-keys="selectedKeys" <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
default-expand-all <template #prefix><icon-search /></template>
show-line </a-input>
block-node <a-tree
@select="handleSelectDept" ref="treeRef"
> :data="deptList"
</a-tree> :selected-keys="selectedKeys"
</a-col> default-expand-all
<a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20"> show-line
<GiTable block-node
row-key="id" @select="handleSelectDept"
:data="dataList" >
:columns="columns" </a-tree>
:loading="loading" </a-col>
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }" <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20">
:pagination="pagination" <GiTable
:disabled-tools="['size']" row-key="id"
:disabled-column-keys="['username']" :data="dataList"
@refresh="search" :columns="columns"
> :loading="loading"
<template #custom-left> :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
<a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search"> :pagination="pagination"
<template #prefix><icon-search /></template> :disabled-tools="['size']"
</a-input> :disabled-column-keys="['username']"
<a-select @refresh="search"
v-model="queryForm.status" >
:options="DisEnableStatusList" <template #custom-left>
placeholder="请选择状态" <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
allow-clear <template #prefix><icon-search /></template>
style="width: 150px" </a-input>
@change="search" <a-select
/> v-model="queryForm.status"
<a-button @click="reset">重置</a-button> :options="DisEnableStatusList"
</template> placeholder="请选择状态"
<template #custom-right> allow-clear
<a-button v-permission="['system:user:add']" type="primary" @click="onAdd"> style="width: 150px"
<template #icon><icon-plus /></template> @change="search"
<span>新增</span> />
<a-button @click="reset">重置</a-button>
</template>
<template #custom-right>
<a-button v-permission="['system:user:add']" type="primary" @click="onAdd">
<template #icon><icon-plus /></template>
<span>新增</span>
</a-button>
<a-tooltip content="导出">
<a-button v-permission="['system:user:export']" class="gi_hover_btn-border" @click="onExport">
<template #icon>
<icon-download />
</template>
</a-button> </a-button>
<a-tooltip content="导出"> </a-tooltip>
<a-button v-permission="['system:user:export']" class="gi_hover_btn-border" @click="onExport"> </template>
<template #icon> <template #username="{ record }">
<icon-download /> <GiCellAvatar
</template> :avatar="getAvatar(record.avatar, record.gender)"
</a-button> :name="record.username"
</a-tooltip> is-link
</template> @click="onDetail(record)"
<template #username="{ record }"> />
<GiCellAvatar </template>
:avatar="getAvatar(record.avatar, record.gender)" <template #gender="{ record }">
:name="record.username" <GiCellGender :gender="record.gender" />
is-link </template>
@click="onDetail(record)" <template #status="{ record }">
/> <GiCellStatus :status="record.status" />
</template> </template>
<template #gender="{ record }"> <template #isSystem="{ record }">
<GiCellGender :gender="record.gender" /> <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
</template> <a-tag v-else color="arcoblue" size="small">否</a-tag>
<template #status="{ record }"> </template>
<GiCellStatus :status="record.status" /> <template #action="{ record }">
</template> <a-space>
<template #isSystem="{ record }"> <a-link v-permission="['system:user:update']" @click="onUpdate(record)">修改</a-link>
<a-tag v-if="record.isSystem" color="red" size="small">是</a-tag> <a-link
<a-tag v-else color="arcoblue" size="small">否</a-tag> v-permission="['system:user:delete']"
</template> status="danger"
<template #action="{ record }"> :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
<a-space> :disabled="record.disabled"
<a-link v-permission="['system:user:update']" @click="onUpdate(record)">修改</a-link> @click="onDelete(record)"
<a-link >
v-permission="['system:user:delete']" 删除
status="danger" </a-link>
:title="record.isSystem ? '系统内置数据不能删除' : '删除'" <a-dropdown>
:disabled="record.disabled" <a-link v-if="has.hasPermOr(['system:user:resetPwd'])" type="text">更多</a-link>
@click="onDelete(record)" <template #content>
> <a-doption v-permission="['system:user:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption>
删除 </template>
</a-link> </a-dropdown>
<a-dropdown> </a-space>
<a-link v-if="has.hasPermOr(['system:user:resetPwd'])" type="text">更多</a-link> </template>
<template #content> </GiTable>
<a-doption v-permission="['system:user:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption> </a-col>
</template> </a-row>
</a-dropdown>
</a-space>
</template>
</GiTable>
</a-col>
</a-row>
</a-card>
<UserAddModal ref="UserAddModalRef" @save-success="search" /> <UserAddModal ref="UserAddModalRef" @save-success="search" />
<UserDetailDrawer ref="UserDetailDrawerRef" /> <UserDetailDrawer ref="UserDetailDrawerRef" />

65
src/views/tool/generator/index.vue
View File

@@ -1,37 +1,36 @@
<template> <template>
<div class="gi_page"> <div class="table-page">
<a-card title="代码生成" class="general-card"> <GiTable
<GiTable row-key="tableName"
row-key="tableName" title="代码生成"
:data="dataList" :data="dataList"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }" :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
:pagination="pagination" :pagination="pagination"
:disabled-tools="['size', 'setting']" :disabled-tools="['size', 'setting']"
:disabled-column-keys="['tableName']" :disabled-column-keys="['tableName']"
@refresh="search" @refresh="search"
> >
<template #custom-left> <template #custom-left>
<a-input v-model="queryForm.tableName" placeholder="请输入表名称" allow-clear @change="search"> <a-input v-model="queryForm.tableName" placeholder="请输入表名称" allow-clear @change="search">
<template #prefix><icon-search /></template> <template #prefix><icon-search /></template>
</a-input> </a-input>
<a-button @click="reset">重置</a-button> <a-button @click="reset">重置</a-button>
</template> </template>
<template #action="{ record }"> <template #action="{ record }">
<a-space> <a-space>
<a-link @click="onConfig(record.tableName, record.comment)">配置</a-link> <a-link @click="onConfig(record.tableName, record.comment)">配置</a-link>
<a-link <a-link
:title="record.isConfiged ? '生成' : '请先进行生成配置'" :title="record.isConfiged ? '生成' : '请先进行生成配置'"
:disabled="!record.isConfiged" :disabled="!record.isConfiged"
@click="onPreview(record.tableName)" @click="onPreview(record.tableName)"
> >
生成 生成
</a-link> </a-link>
</a-space> </a-space>
</template> </template>
</GiTable> </GiTable>
</a-card>
<GenConfigDrawer ref="GenConfigDrawerRef" @save-success="search" /> <GenConfigDrawer ref="GenConfigDrawerRef" @save-success="search" />
<GenPreviewModal ref="GenPreviewModalRef" @generate="onGenerate" /> <GenPreviewModal ref="GenPreviewModalRef" @generate="onGenerate" />