mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-11-11 12:57:10 +08:00
feat(GiPageLayout): 新增折叠侧边栏功能，并使用 GiPageLayout 优化用户、角色、字典管理
This commit is contained in:
@@ -1,31 +1,22 @@
|
||||
<template>
|
||||
<div class="gi_table_page">
|
||||
<a-tabs v-model:active-key="activeKey" size="large" position="left" @change="change">
|
||||
<a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
|
||||
<a-tab-pane key="site">
|
||||
<template #title><icon-apps /> 网站配置</template>
|
||||
<keep-alive>
|
||||
<component :is="PanMap[activeKey]" />
|
||||
</keep-alive>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="security">
|
||||
<template #title><icon-safe /> 安全配置</template>
|
||||
<keep-alive>
|
||||
<component :is="PanMap[activeKey]" />
|
||||
</keep-alive>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="mail">
|
||||
<template #title><icon-email /> 邮件配置</template>
|
||||
<keep-alive>
|
||||
<component :is="PanMap[activeKey]" />
|
||||
</keep-alive>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="login">
|
||||
<template #title><icon-lock /> 登录配置</template>
|
||||
<keep-alive>
|
||||
<component :is="PanMap[activeKey]" />
|
||||
</keep-alive>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<keep-alive>
|
||||
<component :is="PanMap[activeKey]" />
|
||||
</keep-alive>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -91,6 +82,10 @@ const change = (key: string | number) => {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:deep(.arco-tabs-nav) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
@@ -1,71 +1,67 @@
|
||||
<template>
|
||||
<div class="gi_page">
|
||||
<SplitPanel>
|
||||
<template #left>
|
||||
<DictTree @node-click="handleSelectDict" />
|
||||
</template>
|
||||
<template #main>
|
||||
<a-row align="stretch" :gutter="14" class="h-full page_content">
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full overflow-hidden">
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 600 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['label']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input-search v-model="queryForm.description" placeholder="搜索标签/描述" allow-clear @search="search" />
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['system:dict:item:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
<a-button v-permission="['system:dict:item:clearCache']" type="outline" status="warning" @click="onClearCache">
|
||||
<template #icon><icon-delete /></template>
|
||||
<template #default>清除缓存</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #label="{ record }">
|
||||
<a-tag v-if="record.color === 'primary'" color="arcoblue">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'success'" color="green">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'warning'" color="orangered">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'error'" color="red">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'default'" color="gray">{{ record.label }}</a-tag>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['system:dict:item:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['system:dict:item:delete']"
|
||||
status="danger"
|
||||
title="删除"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</SplitPanel>
|
||||
<GiPageLayout>
|
||||
<template #left>
|
||||
<DictTree @node-click="handleSelectDict" />
|
||||
</template>
|
||||
<a-row align="stretch" :gutter="14" class="h-full page_content">
|
||||
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full overflow-hidden">
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 600 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['label']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #toolbar-left>
|
||||
<a-input-search v-model="queryForm.description" placeholder="搜索标签/描述" allow-clear @search="search" />
|
||||
<a-button @click="reset">
|
||||
<template #icon><icon-refresh /></template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['system:dict:item:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
<a-button v-permission="['system:dict:item:clearCache']" type="outline" status="warning" @click="onClearCache">
|
||||
<template #icon><icon-delete /></template>
|
||||
<template #default>清除缓存</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #label="{ record }">
|
||||
<a-tag v-if="record.color === 'primary'" color="arcoblue">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'success'" color="green">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'warning'" color="orangered">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'error'" color="red">{{ record.label }}</a-tag>
|
||||
<a-tag v-else-if="record.color === 'default'" color="gray">{{ record.label }}</a-tag>
|
||||
</template>
|
||||
<template #status="{ record }">
|
||||
<GiCellStatus :status="record.status" />
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<a-space>
|
||||
<a-link v-permission="['system:dict:item:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['system:dict:item:delete']"
|
||||
status="danger"
|
||||
title="删除"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<DictItemAddModal ref="DictItemAddModalRef" @save-success="search" />
|
||||
</div>
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,21 +1,17 @@
|
||||
<template>
|
||||
<div class="gi_page">
|
||||
<SplitPanel>
|
||||
<template #left>
|
||||
<RoleTree @node-click="handleSelectRole" />
|
||||
</template>
|
||||
<template #main>
|
||||
<a-tabs v-model:activeKey="activeTab" class="gi_tabs" size="large">
|
||||
<a-tab-pane key="1" title="功能权限">
|
||||
<component :is="Permission" v-if="activeTab === '1'" :role-id="roleId" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" title="角色用户">
|
||||
<component :is="RoleUser" v-if="activeTab === '2'" :role-id="roleId" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
</SplitPanel>
|
||||
</div>
|
||||
<GiPageLayout :header-style="{ padding: 0, borderBottom: 'none' }">
|
||||
<template #left>
|
||||
<RoleTree @node-click="handleSelectRole" />
|
||||
</template>
|
||||
<template #header>
|
||||
<a-tabs v-model:activeKey="activeTab" class="gi_tabs" hide-content size="large">
|
||||
<a-tab-pane key="1" title="功能权限"></a-tab-pane>
|
||||
<a-tab-pane key="2" title="角色用户"></a-tab-pane>
|
||||
</a-tabs>
|
||||
</template>
|
||||
<component :is="Permission" v-if="activeTab === '1'" :role-id="roleId" />
|
||||
<component :is="RoleUser" v-if="activeTab === '2'" :role-id="roleId" />
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,92 +1,88 @@
|
||||
<template>
|
||||
<div class="gi_page">
|
||||
<SplitPanel size="20%">
|
||||
<template #left>
|
||||
<DeptTree @node-click="handleSelectDept" />
|
||||
<GiPageLayout>
|
||||
<template #left>
|
||||
<DeptTree @node-click="handleSelectDept" />
|
||||
</template>
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['nickname']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #top>
|
||||
<GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
|
||||
</template>
|
||||
<template #main>
|
||||
<GiTable
|
||||
row-key="id"
|
||||
:data="dataList"
|
||||
:columns="columns"
|
||||
:loading="loading"
|
||||
:scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
|
||||
:pagination="pagination"
|
||||
:disabled-tools="['size']"
|
||||
:disabled-column-keys="['nickname']"
|
||||
@refresh="search"
|
||||
>
|
||||
<template #top>
|
||||
<GiForm v-model="queryForm" search :columns="queryFormColumns" size="medium" @search="search" @reset="reset"></GiForm>
|
||||
</template>
|
||||
<template #toolbar-left>
|
||||
<a-button v-permission="['system:user:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
<a-button v-permission="['system:user:import']" @click="onImport">
|
||||
<template #icon><icon-upload /></template>
|
||||
<template #default>导入</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['system:user:export']" @click="onExport">
|
||||
<template #icon><icon-download /></template>
|
||||
<template #default>导出</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #nickname="{ record }">
|
||||
<GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
|
||||
</template>
|
||||
<template #gender="{ record }">
|
||||
<GiCellGender :gender="record.gender" />
|
||||
</template>
|
||||
<template #roleNames="{ record }">
|
||||
<GiCellTags :data="record.roleNames" />
|
||||
</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:user:get']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['system:user:delete']"
|
||||
status="danger"
|
||||
:disabled="record.isSystem"
|
||||
:title="record.isSystem ? '系统内置数据不能删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
<a-dropdown>
|
||||
<a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
|
||||
<template #icon>
|
||||
<icon-more :size="16" />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
|
||||
<a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
<template #toolbar-left>
|
||||
<a-button v-permission="['system:user:create']" type="primary" @click="onAdd">
|
||||
<template #icon><icon-plus /></template>
|
||||
<template #default>新增</template>
|
||||
</a-button>
|
||||
<a-button v-permission="['system:user:import']" @click="onImport">
|
||||
<template #icon><icon-upload /></template>
|
||||
<template #default>导入</template>
|
||||
</a-button>
|
||||
</template>
|
||||
</SplitPanel>
|
||||
<template #toolbar-right>
|
||||
<a-button v-permission="['system:user:export']" @click="onExport">
|
||||
<template #icon><icon-download /></template>
|
||||
<template #default>导出</template>
|
||||
</a-button>
|
||||
</template>
|
||||
<template #nickname="{ record }">
|
||||
<GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
|
||||
</template>
|
||||
<template #gender="{ record }">
|
||||
<GiCellGender :gender="record.gender" />
|
||||
</template>
|
||||
<template #roleNames="{ record }">
|
||||
<GiCellTags :data="record.roleNames" />
|
||||
</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:user:get']" title="详情" @click="onDetail(record)">详情</a-link>
|
||||
<a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
|
||||
<a-link
|
||||
v-permission="['system:user:delete']"
|
||||
status="danger"
|
||||
:disabled="record.isSystem"
|
||||
:title="record.isSystem ? '系统内置数据不能删除' : '删除'"
|
||||
@click="onDelete(record)"
|
||||
>
|
||||
删除
|
||||
</a-link>
|
||||
<a-dropdown>
|
||||
<a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
|
||||
<template #icon>
|
||||
<icon-more :size="16" />
|
||||
</template>
|
||||
</a-button>
|
||||
<template #content>
|
||||
<a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
|
||||
<a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-space>
|
||||
</template>
|
||||
</GiTable>
|
||||
|
||||
<UserAddDrawer ref="UserAddDrawerRef" @save-success="search" />
|
||||
<UserImportDrawer ref="UserImportDrawerRef" @save-success="search" />
|
||||
<UserDetailDrawer ref="UserDetailDrawerRef" />
|
||||
<UserResetPwdModal ref="UserResetPwdModalRef" />
|
||||
<UserUpdateRoleModal ref="UserUpdateRoleModalRef" @save-success="search" />
|
||||
</div>
|
||||
</GiPageLayout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
Reference in New Issue
Block a user