auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page: 📄 权限页面生成完成,修改部分缺陷

This commit is contained in:
Bunny 2024-10-03 18:41:26 +08:00
parent 7871ff9dbe
commit 5a72e805de
21 changed files with 569 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/api/v1/power.ts Normal file
View File

@ -0,0 +1,30 @@
import { http } from '@/api/service/request';
import type { BaseResult, ResultTable } from '@/api/service/types';
/**
* 权限---获取权限列表
*/
export const fetchGetPowerList = (data: any) => {
return http.request<BaseResult<ResultTable>>('get', `power/getPowerList/${data.currentPage}/${data.pageSize}`, { params: data });
};
/**
* 权限---添加权限
*/
export const fetchAddPower = (data: any) => {
return http.request<BaseResult<object>>('post', 'power/addPower', { data });
};
/**
* 权限---更新权限
*/
export const fetchUpdatePower = (data: any) => {
return http.request<BaseResult<object>>('put', 'power/updatePower', { data });
};
/**
* 权限---删除权限
*/
export const fetchDeletePower = (data: any) => {
return http.request<BaseResult<object>>('delete', 'power/deletePower', { data });
};

32
src/layout/components/lay-footer/index.vue
View File

@ -1,31 +1,23 @@
<script lang="ts" setup>
import { getConfig } from "@/config";
import { getConfig } from '@/config';
const TITLE = getConfig("Title");
const TITLE = getConfig('Title');
</script>
<template>
<footer
class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
>
Copyright © 2020-present
<a
class="hover:text-primary"
href="https://github.com/pure-admin"
target="_blank"
>
&nbsp;{{ TITLE }}
</a>
</footer>
<footer class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]">
Copyright © 2020-present
<a class="hover:text-primary" href="https://github.com/pure-admin" target="_blank"> &nbsp;{{ TITLE }} </a>
</footer>
</template>
<style lang="scss" scoped>
.layout-footer {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 0 8px;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0 0 8px;
font-size: 14px;
}
</style>

277
src/layout/components/lay-navbar/index.vue
View File

@ -1,191 +1,150 @@
<script lang="ts" setup>
import { useNav } from "@/layout/hooks/useNav";
import LaySearch from "../lay-search/index.vue";
import LayNotice from "../lay-notice/index.vue";
import LayNavMix from "../lay-sidebar/NavMix.vue";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
import { useNav } from '@/layout/hooks/useNav';
import LaySearch from '../lay-search/index.vue';
import LayNotice from '../lay-notice/index.vue';
import LayNavMix from '../lay-sidebar/NavMix.vue';
import { useTranslationLang } from '@/layout/hooks/useTranslationLang';
import LaySidebarFullScreen from '../lay-sidebar/components/SidebarFullScreen.vue';
import LaySidebarBreadCrumb from '../lay-sidebar/components/SidebarBreadCrumb.vue';
import LaySidebarTopCollapse from '../lay-sidebar/components/SidebarTopCollapse.vue';
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
import { $t } from "@/plugins/i18n";
import GlobalizationIcon from '@/assets/svg/globalization.svg?component';
import LogoutCircleRLine from '@iconify-icons/ri/logout-circle-r-line';
import Setting from '@iconify-icons/ri/settings-3-line';
import Check from '@iconify-icons/ep/check';
import { $t } from '@/plugins/i18n';
const {
layout,
device,
logout,
onPanel,
pureApp,
username,
userAvatar,
avatarsStyle,
toggleSideBar,
getDropdownItemStyle,
getDropdownItemClass
} = useNav();
const { layout, device, logout, onPanel, pureApp, username, userAvatar, avatarsStyle, toggleSideBar, getDropdownItemStyle, getDropdownItemClass } = useNav();
const { t, locale, translationCh, translationEn } = useTranslationLang();
</script>
<template>
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
<LaySidebarTopCollapse
v-if="device === 'mobile'"
:is-active="pureApp.sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
<LaySidebarTopCollapse v-if="device === 'mobile'" :is-active="pureApp.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<LaySidebarBreadCrumb
v-if="layout !== 'mix' && device !== 'mobile'"
class="breadcrumb-container"
/>
<LaySidebarBreadCrumb v-if="layout !== 'mix' && device !== 'mobile'" class="breadcrumb-container" />
<LayNavMix v-if="layout === 'mix'" />
<LayNavMix v-if="layout === 'mix'" />
<div v-if="layout === 'vertical'" class="vertical-header-right">
<!-- 菜单搜索 -->
<LaySearch id="header-search" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:style="getDropdownItemStyle(locale, 'zh')"
@click="translationCh"
>
<IconifyIconOffline
v-show="locale === 'zh'"
:icon="Check"
class="check-zh"
/>
简体中文
</el-dropdown-item>
<el-dropdown-item
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:style="getDropdownItemStyle(locale, 'en')"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 全屏 -->
<LaySidebarFullScreen id="full-screen" />
<!-- 消息通知 -->
<LayNotice id="header-notice" />
<!-- 退出登录 -->
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover select-none">
<img :src="userAvatar" :style="avatarsStyle" alt="" />
<p v-if="username" class="dark:text-white">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<IconifyIconOffline
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
{{ $t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
:title="$t('buttons.pureOpenSystemSet')"
class="set-icon navbar-bg-hover"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>
<div v-if="layout === 'vertical'" class="vertical-header-right">
<!-- 菜单搜索 -->
<LaySearch id="header-search" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none" />
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item :class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]" :style="getDropdownItemStyle(locale, 'zh')" @click="translationCh">
<IconifyIconOffline v-show="locale === 'zh'" :icon="Check" class="check-zh" />
简体中文
</el-dropdown-item>
<el-dropdown-item :class="['dark:!text-white', getDropdownItemClass(locale, 'en')]" :style="getDropdownItemStyle(locale, 'en')" @click="translationEn">
<span v-show="locale === 'en'" class="check-en">
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 全屏 -->
<LaySidebarFullScreen id="full-screen" />
<!-- 消息通知 -->
<LayNotice id="header-notice" />
<!-- 退出登录 -->
<el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover select-none">
<img :src="userAvatar" :style="avatarsStyle" alt="" />
<p v-if="username" class="dark:text-white">{{ username }}</p>
</span>
<template #dropdown>
<el-dropdown-menu class="logout">
<el-dropdown-item @click="logout">
<IconifyIconOffline :icon="LogoutCircleRLine" style="margin: 5px" />
{{ $t('buttons.pureLoginOut') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span :title="$t('buttons.pureOpenSystemSet')" class="set-icon navbar-bg-hover" @click="onPanel">
<IconifyIconOffline :icon="Setting" />
</span>
</div>
</div>
</template>
<style lang="scss" scoped>
.navbar {
width: 100%;
height: 48px;
overflow: hidden;
width: 100%;
height: 48px;
overflow: hidden;
.hamburger-container {
float: left;
height: 100%;
line-height: 48px;
cursor: pointer;
}
.hamburger-container {
float: left;
height: 100%;
line-height: 48px;
cursor: pointer;
}
.vertical-header-right {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 280px;
height: 48px;
color: #000000d9;
.vertical-header-right {
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 280px;
height: 48px;
color: #000000d9;
.el-dropdown-link {
display: flex;
align-items: center;
justify-content: space-around;
height: 48px;
padding: 10px;
color: #000000d9;
cursor: pointer;
.el-dropdown-link {
display: flex;
align-items: center;
justify-content: space-around;
height: 48px;
padding: 10px;
color: #000000d9;
cursor: pointer;
p {
font-size: 14px;
}
p {
font-size: 14px;
}
img {
width: 22px;
height: 22px;
border-radius: 50%;
}
}
}
img {
width: 22px;
height: 22px;
border-radius: 50%;
}
}
}
.breadcrumb-container {
float: left;
margin-left: 16px;
}
.breadcrumb-container {
float: left;
margin-left: 16px;
}
}
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout {
width: 120px;
width: 120px;
::v-deep(.el-dropdown-menu__item) {
display: inline-flex;
flex-wrap: wrap;
min-width: 100%;
}
::v-deep(.el-dropdown-menu__item) {
display: inline-flex;
flex-wrap: wrap;
min-width: 100%;
}
}
</style>

33
src/layout/components/lay-sidebar/components/SidebarFullScreen.vue
View File

@ -1,30 +1,25 @@
<script setup lang="ts">
import { ref, watch } from "vue";
import { useNav } from "@/layout/hooks/useNav";
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useNav } from '@/layout/hooks/useNav';
const screenIcon = ref();
const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
isFullscreen.value = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
isFullscreen.value = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
watch(
isFullscreen,
full => {
screenIcon.value = full ? ExitFullscreen : Fullscreen;
},
{
immediate: true
}
isFullscreen,
full => {
screenIcon.value = full ? ExitFullscreen : Fullscreen;
},
{
immediate: true,
},
);
</script>
<template>
<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
<IconifyIconOffline :icon="screenIcon" />
</span>
<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
<IconifyIconOffline :icon="screenIcon" />
</span>
</template>

81
src/store/system/power.ts Normal file
View File

@ -0,0 +1,81 @@
import { defineStore } from 'pinia';
import { fetchAddPower, fetchDeletePower, fetchGetPowerList, fetchUpdatePower } from '@/api/v1/power';
import { pageSizes } from '@/enums/baseConstant';
import { storeMessage } from '@/utils/message';
import { storePagination } from '@/store/useStorePagination';
/**
* 权限 Store
*/
export const usePowerStore = defineStore('powerStore', {
state() {
return {
// 权限列表
datalist: [],
// 查询表单
form: {
// 父级id
parentId: undefined,
// 权限编码
powerCode: undefined,
// 权限名称
powerName: undefined,
// 请求路径
requestUrl: undefined,
},
// 分页查询结果
pagination: {
currentPage: 1,
pageSize: 150,
total: 100,
pageSizes,
},
// 加载
loading: false,
};
},
getters: {},
actions: {
/**
* * 获取权限
*/
async getPowerList() {
// 整理请求参数
const data = { ...this.pagination, ...this.form };
delete data.pageSizes;
delete data.total;
delete data.background;
// 获取权限列表
const result = await fetchGetPowerList(data);
// 公共页面函数hook
const pagination = storePagination.bind(this);
return pagination(result);
},
/**
* * 添加权限
*/
async addPower(data: any) {
const result = await fetchAddPower(data);
return storeMessage(result);
},
/**
* * 修改权限
*/
async updatePower(data: any) {
const result = await fetchUpdatePower(data);
return storeMessage(result);
},
/**
* * 删除权限
*/
async deletePower(data: any) {
const result = await fetchDeletePower(data);
return storeMessage(result);
},
},
});

4
src/views/i18n/i18n-setting/utils/columns.tsx
View File

@ -12,8 +12,8 @@ export const columns: TableColumnList = [
{ label: $t('i18n.typeName'), prop: 'typeName' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];

3
src/views/i18n/i18n-setting/utils/hooks.tsx
View File

@ -1,7 +1,6 @@
import { h, ref } from 'vue';
import { userI18nStore } from '@/store/i18n/i18n';
import { addDialog, closeDialog } from '@/components/BaseDialog/index';
import { deviceDetection } from '@pureadmin/utils';
import I18nDialog from '@/views/i18n/i18n-setting/i18n-dialog.vue';
import type { FormProps } from '@/views/i18n/i18n-setting/utils/types';
import { $t } from '@/plugins/i18n';
@ -30,7 +29,6 @@ export const onAdd = () => {
width: '30%',
props: { formInline: { keyName: '', translation: '', typeName: '' } },
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(I18nDialog, { ref: formRef }),
@ -90,7 +88,6 @@ export const onUpdate = (row: any) => {
width: '30%',
props: { formInline: { keyName: row.keyName, translation: row.translation, typeName: row.typeName } },
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(I18nDialog, { ref: formRef }),

4
src/views/i18n/i18n-type-setting/utils/columns.tsx
View File

@ -10,8 +10,8 @@ export const columns: TableColumnList = [
{ label: $t('isDefault'), prop: 'isDefault', slot: 'isDefault' },
{ label: $t('table.updateTime'), prop: 'updateTime' },
{ label: $t('table.createTime'), prop: 'createTime' },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];

3
src/views/i18n/i18n-type-setting/utils/hooks.tsx
View File

@ -1,4 +1,3 @@
import { deviceDetection } from '@pureadmin/utils';
import { addDialog } from '@/components/BaseDialog/index';
import AddI18nType from '@/views/i18n/i18n-type-setting/i18n-type-dialog.vue';
import { userI18nTypeStore } from '@/store/i18n/i18nType';
@ -29,7 +28,6 @@ export function onAdd() {
formInline: { typeName: '', summary: '', isDefault: false },
},
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(AddI18nType, { ref: formRef }),
@ -57,7 +55,6 @@ export function onUpdate(row: any) {
width: '30%',
props: { formInline: { typeName: row.typeName, summary: row.summary, isDefault: row.isDefault } },
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(AddI18nType, { ref: formRef }),

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

@ -12,6 +12,7 @@ import PureTable from '@pureadmin/table';
import { columns } from '@/views/system/menu/utils/columns';
import { userRouterStore } from '@/store/system/router';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
const formRef = ref();
const tableRef = ref();
@ -97,6 +98,14 @@ onMounted(() => {
/>
</template>
<template #createUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
</template>
<template #updateUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
</template>
<template #operation="{ row }">
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> 修改 </el-button>
<el-button v-show="row.menuType !== 3" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd(row.id)"> 新增 </el-button>

4
src/views/system/menu/utils/columns.tsx
View File

@ -39,6 +39,10 @@ export const columns: TableColumnList = [
},
{ label: '排序', prop: 'rank', width: 100 },
{ label: '隐藏', prop: 'visible', slot: 'visible', width: 100 },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: '操作', fixed: 'right', width: 210, slot: 'operation' },
];

1
src/views/system/menu/utils/hooks.tsx
View File

@ -73,7 +73,6 @@ export function onAdd(parentId: any = 0) {
width: '45%',
draggable: true,
closeOnClickModal: false,
fullscreen: deviceDetection(),
fullscreenIcon: true,
contentRenderer: () => h(editForm, { ref: formRef }),
beforeSure: (done, { options }) => {

4
src/views/system/menuIcon/utils/columns.ts
View File

@ -10,8 +10,8 @@ export const columns: TableColumnList = [
{ label: $t('menuIcon_iconName'), prop: 'iconName', slot: 'iconName' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];

3
src/views/system/menuIcon/utils/hooks.ts
View File

@ -1,4 +1,3 @@
import { deviceDetection } from '@pureadmin/utils';
import { addDialog } from '@/components/BaseDialog/index';
import MenuIconDialog from '@/views/system/menuIcon/menu-icon-dialog.vue';
import { useMenuIconStore } from '@/store/system/menuIcon';
@ -32,7 +31,6 @@ export function onAdd() {
},
},
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(MenuIconDialog, { ref: formRef }),
@ -64,7 +62,6 @@ export function onUpdate(row: any) {
},
},
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(MenuIconDialog, { ref: formRef }),

97
src/views/system/power/index.vue Normal file
View File

@ -0,0 +1,97 @@
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { columns } from '@/views/system/power/utils/columns';
import PureTableBar from '@/components/TableBar/src/bar';
import AddFill from '@iconify-icons/ri/add-circle-line';
import PureTable from '@pureadmin/table';
import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/power/utils/hooks';
import Delete from '@iconify-icons/ep/delete';
import EditPen from '@iconify-icons/ep/edit-pen';
import Refresh from '@iconify-icons/ep/refresh';
import { selectUserinfo } from '@/components/Table/Userinfo/columns';
import { $t } from '@/plugins/i18n';
import { usePowerStore } from '@/store/system/power.ts';
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
const tableRef = ref();
const formRef = ref();
const powerStore = usePowerStore();
const resetForm = async formEl => {
if (!formEl) return;
formEl.resetFields();
await onSearch();
};
onMounted(() => {
onSearch();
});
</script>
<template>
<div class="main">
<el-form ref="formRef" :inline="true" :model="powerStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<el-form-item :label="$t('power_parentId')" prop="parentId">
<el-input v-model="powerStore.form.parentId" :placeholder="`${$t('input')}${$t('power_parentId')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item :label="$t('power_powerCode')" prop="powerCode">
<el-input v-model="powerStore.form.powerCode" :placeholder="`${$t('input')}${$t('power_powerCode')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item :label="$t('power_powerName')" prop="powerName">
<el-input v-model="powerStore.form.powerName" :placeholder="`${$t('input')}${$t('power_powerName')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item :label="$t('power_requestUrl')" prop="requestUrl">
<el-input v-model="powerStore.form.requestUrl" :placeholder="`${$t('input')}${$t('power_requestUrl')}`" class="!w-[180px]" clearable />
</el-form-item>
<el-form-item>
<el-button :icon="useRenderIcon('ri:search-line')" :loading="powerStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
</el-form-item>
</el-form>
<PureTableBar :columns="columns" title="权限" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
<template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加权限</el-button>
</template>
<template v-slot="{ size, dynamicColumns }">
<pure-table
ref="tableRef"
:adaptiveConfig="{ offsetBottom: 45 }"
:columns="dynamicColumns"
:data="powerStore.datalist"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
:loading="powerStore.loading"
:size="size"
adaptive
align-whole="center"
border
highlight-current-row
row-key="id"
showOverflowTooltip
table-layout="auto"
>
<template #createUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
</template>
<template #updateUser="{ row }">
<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
</template>
<template #operation="{ row }">
<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </el-button>
<el-popconfirm :title="`是否确认删除 ${row.powerName}数据`" @confirm="onDelete(row)">
<template #reference>
<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
{{ $t('delete') }}
</el-button>
</template>
</el-popconfirm>
</template>
</pure-table>
</template>
</PureTableBar>
</div>
</template>

42
src/views/system/power/power-dialog.vue Normal file
View File

@ -0,0 +1,42 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/system/power/utils/columns';
import { FormProps } from '@/views/system/power/utils/types';
import { $t } from '@/plugins/i18n';
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({
// 父级id
parentId: undefined,
// 权限编码
powerCode: undefined,
// 权限名称
powerName: undefined,
// 请求路径
requestUrl: undefined,
}),
});
const formRef = ref<FormInstance>();
const form = ref(props.formInline);
defineExpose({ formRef });
</script>
<template>
<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
<el-form-item :label="$t('power_parentId')" prop="parentId">
<el-input v-model="form.parentId" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('power_powerCode')" prop="powerCode">
<el-input v-model="form.powerCode" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('power_powerName')" prop="powerName">
<el-input v-model="form.powerName" autocomplete="off" type="text" />
</el-form-item>
<el-form-item :label="$t('power_requestUrl')" prop="requestUrl">
<el-input v-model="form.requestUrl" autocomplete="off" type="text" />
</el-form-item>
</el-form>
</template>

32
src/views/system/power/utils/columns.ts Normal file
View File

@ -0,0 +1,32 @@
import { reactive } from 'vue';
import { $t } from '@/plugins/i18n';
// 表格列
export const columns: TableColumnList = [
{ type: 'index', index: (index: number) => index + 1 },
// { type: 'selection', align: 'left' },
{ label: $t('id'), prop: 'id' },
// 父级id
{ label: $t('power_parentId'), prop: 'parentId' },
// 权限编码
{ label: $t('power_powerCode'), prop: 'powerCode' },
// 权限名称
{ label: $t('power_powerName'), prop: 'powerName' },
// 请求路径
{ label: $t('power_requestUrl'), prop: 'requestUrl' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];
// 添加规则
export const rules = reactive({
// 权限编码
powerCode: [{ required: true, message: `${$t('input')}${$t('power_powerCode')}`, trigger: 'blur' }],
// 权限名称
powerName: [{ required: true, message: `${$t('input')}${$t('power_powerName')}`, trigger: 'blur' }],
// 请求路径
requestUrl: [{ required: true, message: `${$t('input')}${$t('power_requestUrl')}`, trigger: 'blur' }],
});

106
src/views/system/power/utils/hooks.ts Normal file
View File

@ -0,0 +1,106 @@
import { addDialog } from '@/components/BaseDialog/index';
import PowerDialog from '@/views/system/power/power-dialog.vue';
import { usePowerStore } from '@/store/system/power.ts';
import { h, ref } from 'vue';
import { messageBox } from '@/utils/message';
import type { FormItemProps } from '@/views/system/power/utils/types';
import { $t } from '@/plugins/i18n';
export const formRef = ref();
const powerStore = usePowerStore();
/**
* * 搜索初始化权限
*/
export async function onSearch() {
powerStore.loading = true;
await powerStore.getPowerList();
powerStore.loading = false;
}
/**
* * 添加权限
*/
export function onAdd() {
addDialog({
title: `${$t('add_new')}${$t('power')}`,
width: '30%',
props: {
formInline: {
parentId: undefined,
powerCode: undefined,
powerName: undefined,
requestUrl: undefined,
},
},
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(PowerDialog, { ref: formRef }),
beforeSure: (done, { options }) => {
const form = options.props.formInline as FormItemProps;
formRef.value.formRef.validate(async (valid: any) => {
if (!valid) return;
const result = await powerStore.addPower(form);
if (!result) return;
done();
await onSearch();
});
},
});
}
/**
* * 更新权限
* @param row
*/
export function onUpdate(row: any) {
addDialog({
title: `${$t('modify')}${$t('power')}`,
width: '30%',
props: {
formInline: {
parentId: row.parentId,
powerCode: row.powerCode,
powerName: row.powerName,
requestUrl: row.requestUrl,
},
},
draggable: true,
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(PowerDialog, { ref: formRef }),
beforeSure: (done, { options }) => {
const form = options.props.formInline as FormItemProps;
formRef.value.formRef.validate(async (valid: any) => {
if (!valid) return;
const result = await powerStore.updatePower({ ...form, id: row.id });
if (!result) return;
done();
await onSearch();
});
},
});
}
/**
* * 删除权限
*/
export const onDelete = async (row: any) => {
const id = row.id;
// 是否确认删除
const result = await messageBox({
title: $t('confirm_delete'),
showMessage: false,
confirmMessage: undefined,
cancelMessage: $t('cancel_delete'),
});
if (!result) return;
// 删除数据
await powerStore.deletePower([id]);
await onSearch();
};

16
src/views/system/power/utils/types.ts Normal file
View File

@ -0,0 +1,16 @@
// 添加或者修改表单元素
export interface FormItemProps {
// 父级id
parentId: number;
// 权限编码
powerCode: string;
// 权限名称
powerName: string;
// 请求路径
requestUrl: string;
}
// 添加或修改表单Props
export interface FormProps {
formInline: FormItemProps;
}

4
src/views/system/role/utils/columns.ts
View File

@ -12,8 +12,8 @@ export const columns: TableColumnList = [
{ label: $t('role_description'), prop: 'description' },
{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },
];

3
src/views/system/role/utils/hooks.ts
View File

@ -1,4 +1,3 @@
import { deviceDetection } from '@pureadmin/utils';
import { addDialog } from '@/components/BaseDialog/index';
import RoleDialog from '@/views/system/role/role-dialog.vue';
import { useRoleStore } from '@/store/system/role';
@ -33,7 +32,6 @@ export function onAdd() {
},
},
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(RoleDialog, { ref: formRef }),
@ -66,7 +64,6 @@ export function onUpdate(row: any) {
},
},
draggable: true,
fullscreen: deviceDetection(),
fullscreenIcon: true,
closeOnClickModal: false,
contentRenderer: () => h(RoleDialog, { ref: formRef }),