vertoryao/iot-gateway_fontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(权限模块): 给所有模块和路由添加权限校验

Browse Source
This commit is contained in:
Kven 2025-01-10 10:40:37 +08:00
parent 803ce3dfa6
commit 882ba89113
28 changed files with 106 additions and 1286 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/bulletin-mgmt.ts
View File

@ -24,7 +24,7 @@ export interface BulletinsRecord {
publishTimeEnd?: string[];
total?: number;
current: number;
pages: number;
size: number;
}
export interface AttachmentRecord {

2
src/api/dept.ts
View File

@ -12,7 +12,7 @@ export interface DeptRecord extends DeptCreateRecord {
}
// 获取部门树
export function getAllDeptTree(id: number | string) {
export function getAllDeptTree(id?: number | string) {
return axios({
method: 'get',
url: '/api/rest/dept/tree',

2
src/hooks/permission.ts
View File

@ -17,7 +17,7 @@ export default function usePermission() {
)
);
},
findFirstPermissionRoute(_routers: any, permissions: string[]) {
findFirstPermissionRoute(_routers: any, permissions: string[] | undefined) {
const cloneRouters = [..._routers];
while (cloneRouters.length) {
const firstElement = cloneRouters.shift();

3
src/router/routes/modules/dashboard.ts
View File

@ -11,6 +11,7 @@ const DASHBOARD: AppRouteRecordRaw = {
requiresAuth: true,
icon: 'icon-dashboard', // 设置图标
order: 0, // 排序路由菜单项。如果设置该值，值越高，越靠前
permissions: ['dashboard'],
},
children: [
{
@ -21,7 +22,7 @@ const DASHBOARD: AppRouteRecordRaw = {
locale:'menu.dashboard.workplace',
title: '工作台',
requiresAuth: true,
permissions: ['*'],
permissions: ['dashboard:workplace'],
},
},
],

11
src/router/routes/modules/iot.ts
View File

@ -11,6 +11,7 @@ const IOT: AppRouteRecordRaw = {
icon: 'icon-empty',
requiresAuth: true,
order: 1,
permissions: ['iot'],
},
children: [
{
@ -21,7 +22,7 @@ const IOT: AppRouteRecordRaw = {
locale: 'menu.system.product',
title: '产品管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['iot:product'],
},
},
{
@ -32,7 +33,7 @@ const IOT: AppRouteRecordRaw = {
locale: 'menu.system.device',
title: '设备管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['iot:device'],
},
},
{
@ -44,7 +45,7 @@ const IOT: AppRouteRecordRaw = {
title: '产品详情',
requiresAuth: true,
showInMenu: false,
permissions: ['*'],
permissions: ['iot:product:query'],
},
},
{
@ -56,7 +57,7 @@ const IOT: AppRouteRecordRaw = {
title: '设备详情',
requiresAuth: true,
showInMenu: false,
permissions: ['*'],
permissions: ['iot:device:query'],
},
},
{
@ -68,7 +69,7 @@ const IOT: AppRouteRecordRaw = {
title: '物模型',
requiresAuth: true,
showInMenu: false,
permissions: ['*'],
permissions: ['iot:tsl'],
},
}

31
src/router/routes/modules/notification.ts
View File

@ -11,28 +11,39 @@ const NOTIFICATION: AppRouteRecordRaw = {
requiresAuth: true,
icon: 'icon-message', // 设置图标
order: 0, // 排序路由菜单项。如果设置该值，值越高，越靠前
permissions: ['message'],
},
children: [
{
path: 'notice',
name: 'notice',
name: 'Notice',
component: () => import('@/views/notification/notice/index.vue'),
meta: {
locale: '公告通知',
title: '公告通知',
locale: '消息管理',
title: '消息管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['message:notice'],
},
},
{
path: 'noticeSet',
name: 'noticeSet',
component: () => import('@/views/notification/noticeSet/index.vue'),
meta: {
locale: '公告管理',
path:'bulletin',
name:'Bulletin',
component: () => import('@/views/notification/bulletin/index.vue'),
meta:{
title: '公告管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['message:bulletin'],
},
},
{
path: 'bulletinDetail/:id',
name: 'BulletinDetail',
component: () => import('@/views/notification/bulletin/components/detail.vue'),
meta: {
title: '公告详情',
requiresAuth: true,
showInMenu: false,
permissions: ['message:bulletin:query'],
},
},
],

50
src/router/routes/modules/system.ts
View File

@ -10,6 +10,7 @@ const SYSTEM: AppRouteRecordRaw = {
icon: 'icon-computer',
requiresAuth: true,
order: 2,
permissions: ['system'],
},
children: [
// {
@ -29,7 +30,7 @@ const SYSTEM: AppRouteRecordRaw = {
meta: {
title: '角色管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['system:role'],
},
},
{
@ -39,7 +40,7 @@ const SYSTEM: AppRouteRecordRaw = {
meta: {
title: '部门管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['system:dept'],
},
},
{
@ -49,7 +50,7 @@ const SYSTEM: AppRouteRecordRaw = {
meta: {
title: '用户管理',
requiresAuth: true,
permissions: ['*'],
permissions: ['system:user'],
},
},
{
@ -59,40 +60,19 @@ const SYSTEM: AppRouteRecordRaw = {
meta: {
title: '权限管理',
requiresAuth: true,
permissions: ['*'],
},
},
{
path:'bulletin',
name:'Bulletin',
component: () => import('@/views/system/bulletin/index.vue'),
meta:{
title: '公告管理',
requiresAuth: true,
permissions: ['*'],
},
},
{
path:'message',
name:'Message',
component: () => import('@/views/system/message/index.vue'),
meta:{
title: '消息管理',
requiresAuth: true,
permissions: ['*'],
},
},
{
path: 'detail/:id',
name: 'Detail',
component: () => import('@/views/system/bulletin/components/detail.vue'),
meta: {
title: '公告详情',
requiresAuth: true,
showInMenu: false,
permissions: ['*'],
permissions: ['system:authority'],
},
},
// {
// path:'message',
// name:'Message',
// component: () => import('@/views/system/message/index.vue'),
// meta:{
// title: '消息管理',
// requiresAuth: true,
// permissions: ['*'],
// },
// },
],
};

2
src/store/modules/dept/index.ts
View File

@ -26,7 +26,7 @@ const useDeptStore = defineStore('dept', {
},
actions: {
// 获取所有部门树
async getAllDeptTree(id: number | string) {
async getAllDeptTree(id?: number | string) {
return getAllDeptTree(id);
},

2
src/store/modules/user/types.ts
View File

@ -14,6 +14,6 @@ export interface UserState {
role?: RoleRecord;
roles?: RoleRecord[];
// permissions?: string[] | '' | '*' | 'admin' | 'user' | 'auditor';
permissions?: string[];
permissions?: string[] | undefined;
authorities?: string[];
}

4
src/views/dashboard/workplace/components/data-panel.vue
View File

@ -13,7 +13,7 @@
/>
</a-avatar>
<a-statistic
:title="$t('workplace.pass')"
title="通过"
:value="formData.pass || 0"
:value-from="0"
show-group-separator
@ -36,7 +36,7 @@
/>
</a-avatar>
<a-statistic
:title="$t('workplace.notPass')"
title="未通过"
:value="formData.notPass || 0"
:value-from="0"
show-group-separator

3
src/views/iot/device/components/device-edit.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<a-button v-permission="['iot:device:create']" v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-permission="['iot:device:update']"
v-if="!props.isCreate"
type="outline"
size="small"

3
src/views/iot/device/index.vue
View File

@ -184,6 +184,7 @@
@ok="handleDelete(record.id)"
>
<a-button
v-permission="['iot:device:delete']"
type="outline"
size="small"
status="danger"
@ -220,8 +221,6 @@
import { useRouter } from 'vue-router';
import { deleteDevice, DeviceRecord, queryDeviceList } from '@/api/device';
import DeviceEdit from '@/views/iot/device/components/device-edit.vue';
import BulletinEdit from '@/views/system/bulletin/components/bulletin-edit.vue';
import DeviceDetail from '@/views/iot/device/components/device-detail.vue';
const generateFormModel = () => {
return {

3
src/views/iot/product/components/product-edit.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<a-button v-permission="['iot:product:create']" v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-permission="['iot:product:update']"
v-if="!props.isCreate"
type="outline"
size="small"

9
src/views/iot/product/components/product-tsl.vue
View File

@ -7,13 +7,14 @@
<a-card class="general-card" style="margin-top: 10px;padding-top: 20px">
<a-tabs type="rounded" position="left" size="large" @change="changeKey" animation style="">
<a-tab-pane key="1" title="属性">
<a-button type="primary" style="margin-bottom: 10px" @click="handleClick">
<a-button v-permission="['iot:property:create']" type="primary" style="margin-bottom: 10px" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-table :columns="columns" :data="propertyData" >
<template #operation="{ record }">
<a-button
v-permission="['iot:property:delete']"
type="outline"
status="danger"
size="small"
@ -27,13 +28,14 @@
</a-table>
</a-tab-pane>
<a-tab-pane key="2" title="服务">
<a-button type="primary" style="margin-bottom: 10px" @click="handleClick">
<a-button v-permission="['iot:serve:create']" type="primary" style="margin-bottom: 10px" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-table :columns="columns" :data="serveData" >
<template #operation="{ record }">
<a-button
v-permission="['iot:serve:delete']"
type="outline"
status="danger"
size="small"
@ -47,13 +49,14 @@
</a-table>
</a-tab-pane>
<a-tab-pane key="3" title="事件">
<a-button type="primary" style="margin-bottom: 10px" @click="handleClick">
<a-button v-permission="['iot:event:create']" type="primary" style="margin-bottom: 10px" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-table :columns="columns" :data="eventData" >
<template #operation="{ record }">
<a-button
v-permission="['iot:event:delete']"
type="outline"
status="danger"
size="small"

1
src/views/iot/product/index.vue
View File

@ -195,6 +195,7 @@
@ok="handleDelete(record.id)"
>
<a-button
v-permission="['iot:product:delete']"
type="outline"
size="small"
status="danger"

3
src/views/system/bulletin/components/bulletin-edit.vue → src/views/notification/bulletin/components/bulletin-edit.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<a-button v-permission="['message:bulletin:create']" v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-permission="['message:bulletin:update']"
v-if="!props.isCreate"
type="outline"
size="small"

0
src/views/system/bulletin/components/detail.vue → src/views/notification/bulletin/components/detail.vue
View File

35
src/views/system/bulletin/index.vue → src/views/notification/bulletin/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="container">
<Breadcrumb :items="['系统管理', '公告设置']" />
<Breadcrumb :items="['消息管理', '公告设置']" />
<a-card class="general-card" title=" ">
<a-row>
<a-col :flex="1">
@ -208,10 +208,11 @@
@ok="handleDelete(record.id)"
>
<a-button
type="outline"
size="small"
status="danger"
style="padding: 7px;margin-right: 10px"
v-permission="['message:bulletin:delete']"
type="outline"
size="small"
status="danger"
style="padding: 7px;margin-right: 10px"
>
<template #icon><icon-delete /></template>
删除
@ -251,11 +252,11 @@
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { useBulletinStore } from '@/store';
import useTableOption from '@/hooks/table-option';
import usePagination from '@/hooks/pagination';
import dayjs from 'dayjs';
import { BulletinRecord, BulletinsRecord } from '@/api/bulletin-mgmt';
import { Message } from '@arco-design/web-vue';
@ -271,6 +272,7 @@
};
};
const { pagination,setPagination } = usePagination();
const { loading, setLoading } = useLoading(true);
const renderData = ref<BulletinRecord[]>([]);
const formModel = ref(generateFormModel());
@ -289,13 +291,6 @@
const bulletinStore = useBulletinStore();
const pagination: Pagination = {
page: 1,
size: 10,
current: 1,
total: 0,
};
const columns = computed<TableColumnData[]>(() => [
{
title: '#',
@ -360,10 +355,7 @@
try {
const res: any = await bulletinStore.queryBulletinList(params);
renderData.value = res.data.records;
pagination.page = res.data.page;
pagination.current = res.data.current;
pagination.total = res.data.total;
pagination.size = res.data.size;
setPagination(res.data);
} catch (err) {
// you can report use errorHandler or other
} finally {
@ -426,7 +418,7 @@
// 打开详情
function openDetail(id:number): void{
const url = router.resolve({
name: 'Detail',
name: 'BulletinDetail',
params: {id}
}).href;
router.push(url);
@ -473,6 +465,13 @@
watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script>
<script lang="ts" >
export default {
name: 'Bulletin',
};
</script>
<style scoped lang="less">
.container {

355
src/views/notification/notice/index.vue
View File

@ -1,355 +0,0 @@
<template>
<div class="container">
<Breadcrumb :items="['通知管理', '公告通知']" />
<a-card class="general-card" title=" ">
<a-row>
<a-col :flex="1">
<a-form
:model="formModel"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
label-align="right"
>
<a-row :gutter="18">
<a-col :span="9">
<a-form-item field="title" :label="$t('标题')">
<a-input
v-model="formModel.title"
style="width: 360px"
:placeholder="$t('请输入标题')"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item field="enable" :label="$t('状态')">
<a-select
v-model="formModel.states"
style="width: 360px"
:placeholder="$t('请选择状态')"
:options="statusOptions"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item field="publishTimeBegin" :label="$t('开始时间')">
<a-date-picker
v-model="formModel.publishTimeBegin"
style="width: 360px"
show-time
:time-picker-props="{ defaultValue: '09:09:06' }"
format="YYYY-MM-DD HH:mm"
:allow-clear="false"
@select="onSelect"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item field="publishTimeEnd" :label="$t('结束时间')">
<a-date-picker
v-model="formModel.publishTimeEnd"
style="width: 360px"
show-time
:time-picker-props="{ defaultValue: '09:09:06' }"
format="YYYY-MM-DD HH:mm"
:allow-clear="false"
@select="onSelect"
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-col>
<a-divider style="height: 84px" direction="vertical" />
<a-col :flex="'46px'" style="text-align: right">
<a-space direction="vertical" :size="18">
<a-button type="primary" @click="search">
<template #icon>
<icon-search />
</template>
{{ $t('searchTable.form.search') }}
</a-button>
<a-button @click="reset">
<template #icon>
<icon-refresh />
</template>
{{ $t('searchTable.form.reset') }}
</a-button>
</a-space>
</a-col>
</a-row>
<a-divider style="margin-top: 0" />
<a-table
row-key="id"
:loading="loading"
:pagination="false"
:columns="(cloneColumns as TableColumnData[])"
:data="renderData"
:bordered="false"
:size="size"
style="margin-bottom: 40px"
:filter-icon-align-left="alignLeft"
@change="handleSortChange"
@page-change="onPageChange"
>
<template #index="{ rowIndex }">
{{ rowIndex + 1 + (pagination.current - 1) * pagination.size }}
</template>
<template #enabled="{ record }">
<a-switch
:model-value="record.enabled"
:checked-value="true"
:unchecked-value="false"
@change="enabledStatus(record)"
/>
</template>
<template #operations="{ record }">
<a-button
type="outline"
size="small"
status="success"
:prem="record"
style="padding: 7px; margin-right: 10px"
>
<template #icon><icon-list /></template>
详情
</a-button>
</template>
</a-table>
<a-pagination
style="float: right; position: relative; right: 1px; bottom: 25px"
:total="pagination.total"
:size="size"
show-total
show-jumper
show-page-size
@page-size-change="onSizeChange"
@change="onPageChange"
/>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import useLoading from '@/hooks/loading';
import { UserRecord, UserParams } from '@/api/user';
import { Pagination } from '@/types/global';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { useUserStore } from '@/store';
import { Message } from '@arco-design/web-vue';
import useTableOption from '@/hooks/table-option';
import NoticeEdit from '@/views/notification/noticeSet/components/notice-edit.vue';
const generateFormModel = () => {
return {
title: '',
states: '',
publishTimeBegin: '',
publishTimeEnd: '',
};
};
const { loading, setLoading } = useLoading(true);
const { t } = useI18n();
const renderData = ref<UserRecord[]>([]);
const formModel = ref(generateFormModel());
const {
cloneColumns,
showColumns,
densityList,
handleSelectDensity,
handleChange,
popupVisibleChange,
deepClone,
} = useTableOption();
const sizeof = useTableOption().size;
const userStore = useUserStore();
const pagination: Pagination = {
page: 1,
size: 10,
current: 1,
total: null,
};
const columns = computed<TableColumnData[]>(() => [
{
title: '序号',
dataIndex: 'index',
slotName: 'index',
width: 60,
},
{
title: '标题',
dataIndex: 'title',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: t('时间'),
dataIndex: 'publishTimeBegin',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: t('状态'),
dataIndex: 'states',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{
title: '操作',
dataIndex: 'operations',
slotName: 'operations',
},
]);
const statusOptions = computed<SelectOptionData[]>(() => [
{
label: t('已发布'),
value: 'true',
},
{
label: t('未发布'),
value: 'false',
},
]);
// 获取公告列表
const fetchData = async (
params: UserParams = { page: 1, size: 10, current: 1 }
) => {
setLoading(true);
try {
const res = await userStore.getUserList(params);
renderData.value = res.data.records;
pagination.page = res.data.page;
pagination.current = res.data.current;
pagination.total = res.data.total;
pagination.size = res.data.size;
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}
};
// 查询
const search = () => {
fetchData({
...pagination,
...formModel.value,
} as unknown as UserParams);
};
// 分页发生改变
const onPageChange = (current: number) => {
pagination.page = current;
pagination.current = current;
search();
};
// 数据条数改变
const onSizeChange = (size: number) => {
pagination.size = size;
search();
};
search();
// 重置
const reset = () => {
formModel.value = generateFormModel();
};
// 表格内部排序
const alignLeft = ref(false);
const handleSortChange = (
data: any,
extra: any,
currentDataSource: any
) => {};
// 是否启用
const enabledStatus = async (record: string) => {
record.enabled = !record.enabled;
const res = await userStore.enabledUser(record.id);
if (res.status === 200) {
Message.success({
content: t('modify.status.sucess'),
duration: 3 * 1000,
});
} else {
Message.error({
content: t('modify.status.fail'),
duration: 3 * 1000,
});
}
};
// 删除
// const handleDelete = async (record: UserRecord) => {
// const res = await userStore.removeUser(record.id);
// if (res.status === 200) {
// Message.success({
// content: '删除成功',
// duration: 5 * 1000,
// });
// search();
// }
// };
watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script>
<style scoped>
.container {
padding: 0 20px 20px 20px;
}
.content-col {
flex: 1;
padding-left: 24px; /* 左侧内边距 */
}
.message-item {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
margin-bottom: 16px; /* 卡片之间的间距 */
display: flex;
align-items: center;
}
.message-content {
flex: 1;
padding: 16px;
}
.scroll-wrapper {
height: calc(62vh); /* 调整高度以适应页面布局 */
overflow-y: auto; /* 当内容超出时显示滚动条 */
border: 1px solid #d9d9d9; /* 边框颜色调淡 */
border-radius: 8px;
padding: 16px;
}
.load-trigger {
height: 1px; /* 设置高度为1px，使其不占据太多空间 */
opacity: 0; /* 使其不可见 */
}
.loading,
.no-more {
text-align: center;
padding: 10px;
color: #999;
}
</style>

6
src/views/system/authority/index.vue
View File

@ -256,6 +256,12 @@ const handleDelete = async (record: AuthRecord) => {
watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script>
<script lang="ts">
export default {
name: 'Authority',
};
</script>
<style scoped lang="less">
.container {
padding: 0 20px 20px 20px;

3
src/views/system/dept/components/dept-edit.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<a-button v-permission="['system:dept:create']" v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-permission="['system:dept:update']"
v-if="!props.isCreate"
type="outline"
size="small"

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

@ -150,6 +150,7 @@
@ok="handleDelete(record)"
>
<a-button
v-permission="['system:dept:delete']"
type="outline"
size="small"
status="danger"
@ -239,10 +240,10 @@ const columns = computed<TableColumnData[]>(() => [
sortDirections: ['ascend', 'descend'],
},
},
{
title: t('deptTable.columns.remark'),
dataIndex: 'remark',
},
// {
// title: t('deptTable.columns.remark'),
// dataIndex: 'remark',
// },
{
title: t('deptTable.columns.createTime'),
dataIndex: 'createTime',
@ -267,7 +268,8 @@ const columns = computed<TableColumnData[]>(() => [
const fetchData = async (params?: Partial<DeptRecord>) => {
setLoading(true);
try {
const res = await deptStore.getAllDeptTree(1);
// ID为0返回全部树
const res = await deptStore.getAllDeptTree(0);
renderData.value = res.data;
// pagination.page = res.data.page;
@ -311,7 +313,7 @@ const reset = () => {
};
// 是否启用
const enabledStatus = async (record: string) => {
const enabledStatus = async (record: any) => {
record.enabled = !record.enabled;
const res = await deptStore.enabledDept(record.id);
if (res.status === 200) {
@ -328,7 +330,7 @@ const enabledStatus = async (record: string) => {
};
// 删除
const handleDelete = async (record) => {
const handleDelete = async (record:any) => {
const res = await deptStore.removeDept(record.id);
if (res.status === 200) {
Message.success({

474
src/views/system/message/components/message-edit.vue
View File

@ -1,474 +0,0 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-if="!props.isCreate"
type="outline"
size="small"
:style="{ marginRight: '10px', padding: '7px' }"
@click="handleClick"
>
<template #icon><icon-edit /></template>
修改
</a-button>
<a-modal
width="900px"
:visible="visible"
@cancel="handleCancel"
>
<template #title>{{ modalTitle }}</template>
<!-- <DynamicForm :prem="fieIds" />-->
<a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
<a-form-item
field="userId"
label="用户"
:validate-trigger="['change', 'input']"
:rules="[
{ message: '请输入用戶' },
]"
>
<a-input-tag
v-model="formData.userIds"
placeholder='请选择用戶'
:value=formData.userIds
@click="queryDeptTree"
/>
</a-form-item>
<a-form-item
field="title"
label="标题"
:validate-trigger="['change', 'input']"
:rules="[
{ required: true, message: '请输入标题' },
]"
>
<a-input
v-model="formData.title"
placeholder='请输入消息标题'
/>
</a-form-item>
<a-form-item
field="remark"
label="备注"
:validate-trigger="['change', 'input']"
>
<!-- v-if="isCreate"-->
<a-input
v-model="formData.attachment"
placeholder='请输入备注'
/>
</a-form-item>
<div style="display: flex;margin-left: 75px">
<a-form-item
field="sms"
label="短信"
:validate-trigger="['change', 'input']"
>
<a-switch
v-model="formData.sms"
:checked-value="true"
:unchecked-value="false"
/>
</a-form-item>
<a-form-item
field="email"
label="邮件"
:validate-trigger="['change', 'input']"
>
<a-switch
v-model="formData.email"
:checked-value="true"
:unchecked-value="false"
/>
</a-form-item>
</div>
<!-- <a-form-item-->
<!-- field="attachmentIds"-->
<!-- label='附件'-->
<!-- >-->
<!-- &lt;!&ndash; v-if="isCreate"&ndash;&gt;-->
<!-- <a-input-->
<!-- type="file"-->
<!-- v-model="formData.attachmentIds"-->
<!-- />-->
<!-- </a-form-item>-->
<a-form-item field="content" label='内容' :rules="[{ required: true}]">
<div style="border: 1px solid #ccc;min-width: 700px">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:default-config="toolbarConfig"
:mode="mode"
:class="{'fullscreen-toolbar': isFullScreen}"
/>
<Editor
v-model="formData.content"
style="overflow-y: hidden;height: 200px;"
:default-config="editorConfig"
:mode="mode"
:class="{'fullscreen-editor': isFullScreen}"
@on-created="handleCreated"
/>
</div>
<!-- <a-textarea v-model="formData.content" placeholder="请输入公告内容" style="height: 100px" />-->
</a-form-item>
</a-form>
<template #footer>
<a-button class="editor-button" @click="handleCancel">取消</a-button>
<a-button class="editor-button" type="primary" @click="handleSubmit">确定</a-button>
</template>
</a-modal>
<!-- 部门树模态框-->
<a-modal
width="900px"
:visible="deptVisible"
@cancel="deptTreeCancel"
>
<template #title>发送用户</template>
<div style="display: flex;height: 520px">
<a-card style="margin-right: 10px;width: 30%">
<a-tree
:data="deptTreeData"
:field-names="{ title: 'name', key: 'id', children: 'children' }"
style="margin-bottom: 8px; max-width: 240px"
@select="handleClickTree"
@check="handleCheckTree"
>
</a-tree>
</a-card>
<a-card style="flex: 1">
<a-button type="primary" style="margin-bottom: 10px" @click="handleCheckAllUsers">全选</a-button>
<a-table
:data="selectedDepartmentMembers"
:columns="columns"
style="height: 520px">
<template #id="{ record }">
<a-checkbox v-model="selectedIds" :value="record.userId"> </a-checkbox>
</template>
<template #username="{ record }">
{{ record.username }}
</template>
</a-table>
</a-card>
</div>
<template #footer>
<a-button class="editor-button" @click="deptTreeCancel" >取消</a-button>
<a-button class="editor-button" type="primary" @click="deptTreeSubmit" >确定</a-button>
</template>
</a-modal>
</template>
<script lang="ts" setup>
import useVisible from '@/hooks/visible';
import { computed, defineEmits, PropType, ref, shallowRef, onBeforeUnmount, reactive, onMounted } from 'vue';
import { CreateRecord } from '@/api/user';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { Message } from '@arco-design/web-vue';
import { useMessageStore } from '@/store';
import DynamicForm from '@/components/dynamic-form/index.vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { IEditorConfig } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
import { getAllDeptTree } from '@/api/dept';
import configArcoStyleImportPlugin from '../../../../../config/plugin/arcoStyleImport';
const props = defineProps({
prem: {
type: Object as PropType<CreateRecord>,
},
isCreate: Boolean,
});
// 部门树模态框状态
const deptVisible=ref(false);
const emit = defineEmits(['refresh']);
const modalTitle = computed(() => {
return props.isCreate ? '创建消息' : '编辑消息';
});
const { visible, setVisible } = useVisible(false);
const checkKeys = ref<number[]>([]);
const editorRef = shallowRef()
const handleCreated = (editor: any) => {
editorRef.value = editor; // 记录 editor 实例，重要！
}
const CreateRef = ref<FormInstance>();
const formData = ref<any>({
...props.prem,
});
const messageStore = useMessageStore();
const isFullScreen = ref(false);
const mode = 'default';
const selectedIds= ref<number[]>([]);
const toolbarConfig = { excludeKeys: ['uploadVideo', 'insertImage','insertVideo']}
const columns = computed<any[]>(()=>[
{
title: '操作',
dataIndex: 'id',
slotName: 'id',
},
{
title: '用户',
dataIndex: 'username',
},
])
// const fieIds = ref(
// {
// userId:{
// label: '用戶',
// component: 'input',
// type:'text'
// },
// title:{
// label: '标题',
// component: 'input',
// type:'text'
// },
// remark:{
// label: '备注',
// component: 'input',
// type:'text'
// },
// sms:{
// label: '短信',
// component: 'switch',
// type:'switch'
// },
// email:{
// label: '邮件',
// component:'switch',
// type:'switch'
// },
// attachmentIds:{
// label: '附件',
// component: 'input',
// type:'text'
// },
// richEditor:{
// label: '内容',
// component: 'input',
// type:'text'
// },
// },
// );
const deptTreeData = ref([
{
id: '1',
name: '总部门',
children: [
{
id: '2',
name: '部门1',
members: [
{ id: '101', username: '成员1' },
{ id: '102', username: '成员2' }
]
},
{
id: '3',
name: '部门2',
members: [
{ id: '201', username: '成员3' },
{ id: '202', username: '成员4' }
]
},
{
id: '4',
name: '部门3',
members: [
{ id: '203', username: '成员5' },
{ id: '204', username: '成员6' }
]
}
]
}
]);
const selectedDepartmentMembers: any = ref([]);
const renderData = ref<any[]>([]);
// 获取部门树
const getDeptTree = async () => {
const res = await getAllDeptTree(1);
if (res.status === 200) {
deptTreeData.value = res.data;
}
}
// 部门树查询
const queryDeptTree= async ()=>{
deptVisible.value = true;
}
// 广度优先遍历树，获取选中的成员
const getSelectedMembers = (treeData: any[], selectedKeys: number[]) => {
const queue:any = [...treeData];
const selectedMembers: any[] = [];
while (queue.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const node = queue.shift()!;
if (selectedKeys.includes(node.id)) {
if (node.members) {
selectedMembers.push(...node.members);
}
}
if (node.children) {
queue.push(...node.children);
}
}
return selectedMembers;
}
// 部门树被点击
const handleClickTree = (id: number[]) => {
// 假设 '1' 是总部门的键
if (id[0] === 1 && id.length === 1) {
// 广度优先遍历树，获取所有成员
const allMembers: any[] = [];
const queue:any = [...deptTreeData.value];
while (queue.length > 0) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const node = queue.shift()!;
if (node.members) {
allMembers.push(...node.members);
}
if (node.children) {
queue.push(...node.children);
}
}
selectedDepartmentMembers.value = allMembers;
renderData.value = selectedDepartmentMembers.value;
return;
}
const Members = getSelectedMembers(deptTreeData.value, id);
selectedDepartmentMembers.value = Members;
}
// 部门树被选中
const handleCheckTree = (id: number[]) => {
if (id[0] === 1 ) { // 假设 '1' 是总部门的键
const allKeys: number[] = [];
const traverseTree = (node: any) => {
if (node.members) {
node.members.forEach((member: any) => {
allKeys.push(member.userId);
});
}
if (node.children) {
node.children.forEach((child: any) => {
traverseTree(child);
});
}
};
deptTreeData.value.forEach((node: any) => {
traverseTree(node);
});
selectedIds.value = allKeys;
} else {
const selectedKeys = getSelectedMembers(deptTreeData.value, id);
selectedIds.value = selectedKeys.map(item => item.userId);
}
};
// 组件被点击
const handleClick = () => {
setVisible(true);
};
const editorConfig: Partial<IEditorConfig> = { placeholder: '请输入内容...',MENU_CONF:{
// 隐藏菜单
hide: ['code', 'table', 'emoticon', 'uploadImage', 'video', 'todo', 'specialChar'],
// 配置上传图片
uploadImage: {
base64LimitSize: 1024 * 1024,
// server: '/api/rest/bulletin/1/add',
}
}
}
// 提交
const handleSubmit = async () => {
const valid = await CreateRef.value?.validate();
if (!valid) {
formData.value.permissionIds = checkKeys.value;
// 新增
if (props.isCreate) {
// formData.value.username = formData.value.email;
const res = await messageStore.createMessage(formData.value);
if (res.status === 200) {
Message.success({
content: '新建成功',
duration: 5 * 1000,
});
emit('refresh');
setVisible(false);
}
CreateRef.value?.resetFields();
}
}
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
// 关闭
const handleCancel = async () => {
checkKeys.value = [];
setVisible(false);
};
// 部门树模态框提交
const deptTreeSubmit = () => {
deptVisible.value = false;
formData.value.userIds = selectedIds.value;
};
// 选择所有用户
const handleCheckAllUsers = () => {
if(selectedIds.value.length ===0 ) {
handleCheckTree([1]);
} else {
selectedIds.value = [];
}
};
// 部门树模态框
const deptTreeCancel = () => {
deptVisible.value = false;
};
onMounted(async () => {
await getDeptTree();
});
</script>
<style scoped>
.fullscreen-toolbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px; /* 根据需要调整高度 */
z-index: 999;
background-color: white;
}
.fullscreen-editor {
position: fixed;
top: 50px; /* 根据 toolbar 的高度调整 */
left: 0;
width: 100%;
height: calc(100% - 50px); /* 减去 toolbar 的高度 */
z-index: 999;
background-color: white;
}
.editor-button{
position: static
}
</style>

360
src/views/system/message/index.vue
View File

@ -1,360 +0,0 @@
<template>
<div class="container">
<Breadcrumb :items="['系统管理', '消息设置']" />
<a-card class="general-card" title=" ">
<a-row>
<a-col :flex="1">
<a-form
:model="formModel"
:label-col-props="{ span: 6 }"
:wrapper-col-props="{ span: 18 }"
label-align="right"
>
<a-row :gutter="18">
<a-col :span="9">
<a-form-item
field="title"
label='标题'
>
<a-input
v-model="formModel.title"
style="width: 360px"
placeholder='请输入标题'
/>
</a-form-item>
</a-col>
<a-col :span="10">
<a-form-item field="Time" label='时间'>
<a-range-picker
show-time
format="YYYY-MM-DD HH:mm"
@ok="timeRangs"
/>
</a-form-item>
</a-col>
<a-col :span="9">
<a-form-item
field="name"
label='名称'
>
<a-input
v-model="formModel.name"
style="width: 360px"
placeholder='请输入名称'
/>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-col>
<a-divider style="height: 84px" direction="vertical" />
<a-col :flex="'86px'" style="text-align: right">
<a-space direction="vertical" :size="18">
<a-button type="primary" @click="search">
<template #icon>
<icon-search />
</template>
查询
</a-button>
<a-button @click="reset">
<template #icon>
<icon-refresh />
</template>
重置
</a-button>
</a-space>
</a-col>
</a-row>
<a-divider style="margin-top: 0" />
<a-row>
<a-col :span="12">
<a-space>
<MessageEdit ref="createUserRef" :is-create="true" @refresh="search" />
</a-space>
</a-col>
<a-col
:span="12"
style="
display: flex;
align-items: center;
justify-content: end;
padding-bottom: 20px;
"
>
<a-tooltip content='刷新'>
<div class="action-icon" @click="search">
<icon-refresh size="18" />
</div>
</a-tooltip>
<a-dropdown @select="handleSelectDensity">
<a-tooltip content='密度'>
<div class="action-icon"><icon-line-height size="18" /></div>
</a-tooltip>
<template #content>
<a-doption
v-for="item in densityList"
:key="item.value"
:value="item.value"
:class="{ active: item.value === size }"
>
<span>{{ item.name }}</span>
</a-doption>
</template>
</a-dropdown>
<a-tooltip content='列设置'>
<a-popover
trigger="click"
position="bl"
@popup-visible-change="popupVisibleChange"
>
<div class="action-icon"><icon-settings size="18" /></div>
<template #content>
<div id="tableSetting">
<div
v-for="(item, index) in showColumns"
:key="item.dataIndex"
class="setting"
>
<div style="margin-right: 4px; cursor: move">
<icon-drag-arrow />
</div>
<div>
<a-checkbox
v-model="item.checked"
@change="
handleChange($event, item as TableColumnData, index)
"
>
</a-checkbox>
</div>
<div class="title">
{{ item.title === '#' ? '序列号' : item.title }}
</div>
</div>
</div>
</template>
</a-popover>
</a-tooltip>
</a-col>
</a-row>
<a-table
row-key="id"
:loading="loading"
:pagination="false"
:columns="(cloneColumns as TableColumnData[])"
:data="renderData"
:bordered="false"
:size="size"
style="margin-bottom: 40px"
@page-change="onPageChange"
>
<template #id="{ record }">
<a-checkbox v-model="selectedIds" :value="record.id" style="margin-left: -5px"> </a-checkbox>
</template>
<template #createTime="{ record }">
{{ dayjs(record.createTime).format('YYYY-MM-DD HH:mm') }}
</template>
<template #isRead="{ record }">
{{ record.isRead == true? '已读' : '未读' }}
</template>
</a-table>
<a-pagination
style="float: right; position: relative; right: 1px; bottom: 25px"
:total="pagination.total"
:size="size"
show-total
show-jumper
show-page-size
@page-size-change="onSizeChange"
@change="onPageChange"
/>
</a-card>
</div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import { useMessageStore } from '@/store';
import useTableOption from '@/hooks/table-option';
import usePagination from '@/hooks/pagination';
import dayjs from 'dayjs';
import { MessageRecord, MessageCreateRecord } from '@/api/message-mgmt';
import { useRouter } from 'vue-router';
import MessageEdit from './components/message-edit.vue';
const generateFormModel = () => {
return {
userId: '',
title: '',
type: '',
name: '',
system: '',
isRead: '',
createAtBegin: '',
createAtEnd: '',
};
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<MessageRecord[]>([]);
const formModel = ref(generateFormModel());
const router = useRouter();
const selectedIds= ref<number[]>([]);
const {
cloneColumns,
showColumns,
densityList,
size,
handleSelectDensity,
handleChange,
popupVisibleChange,
deepClone,
} = useTableOption();
const messageStore = useMessageStore();
const { pagination,setPagination } = usePagination();
const columns = computed<TableColumnData[]>(() => [
// {
// title: '用户编号',
// dataIndex: 'userId',
// },
{
title: '标题',
dataIndex: 'title',
},
{
title:'时间',
dataIndex: 'createTime',
slotName: 'createTime',
},
// {
// title: '用户名称',
// dataIndex: 'username',
// },
{
title: '状态',
dataIndex: 'isRead',
slotName: 'isRead',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
]);
// 获取消息列表
const fetchData = async (
params = { size: 10, current: 1 }
) => {
setLoading(true);
try {
const res: any = await messageStore.queryMessageList(params);
renderData.value = res.data.records;
setPagination(res.data);
} catch (err) {
// you can report use errorHandler or other
} finally {
setLoading(false);
}
};
// 查询
const search = () => {
fetchData({
...pagination,
...formModel.value,
} as unknown as MessageRecord);
selectedIds.value = [];
};
// 分页发生改变
const onPageChange = (current: number) => {
pagination.pages = current;
pagination.current = current;
search();
};
// 时间范围
const timeRangs = (dateString: string[]) => {
// eslint-disable-next-line prefer-destructuring
formModel.value.createAtBegin = dateString[0];
// eslint-disable-next-line prefer-destructuring
formModel.value.createAtEnd = dateString[1];
};
// 数据条数改变
const onSizeChange = (Size: number) => {
pagination.size = Size;
search();
};
// 重置
const reset = () => {
formModel.value = generateFormModel();
};
// 打开详情
function openDetail(id:number): void{
const url = router.resolve({
name: 'Detail',
params: {id}
}).href;
router.push(url);
};
onMounted(() => {
search();
});
watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script>
<style scoped lang="less">
.container {
padding: 0 20px 20px 20px;
}
:deep(.arco-table-th) {
&:last-child {
.arco-table-th-item-title {
margin-left: 16px;
}
}
}
.action-icon {
margin-left: 12px;
cursor: pointer;
}
.active {
color: #0960bd;
background-color: #e3f4fc;
}
.setting {
display: flex;
align-items: center;
width: 200px;
.title {
margin-left: 12px;
cursor: pointer;
}
}
</style>

3
src/views/system/role/components/role-edit.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<a-button v-permission="['system:role:create']" v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-permission="['system:role:update']"
v-if="!props.isCreate"
type="outline"
size="small"

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

@ -98,7 +98,7 @@
<template #operations="{ record }">
<RoleEdit ref="editRef" :prem="record" :is-create="false" @refresh="fetchData" />
<a-popconfirm content='确认删除此角色?' type="error" @ok="handleDelete(record)">
<a-button type="outline" size="small" status="danger" style="padding: 7px">
<a-button v-permission="['system:role:delete']" type="outline" size="small" status="danger" style="padding: 7px">
<template #icon><icon-delete /></template>
删除
</a-button>
@ -235,7 +235,7 @@ const reset = () => {
};
// 是否启用
const enabledStatus = async (record: string) => {
const enabledStatus = async (record: any) => {
record.enabled = !record.enabled;
const res = await roleStore.enabledRole(record.id);
if (res.status === 200) {

3
src/views/system/user/components/user-edit.vue
View File

@ -1,9 +1,10 @@
<template>
<a-button v-if="props.isCreate" type="primary" @click="handleClick">
<a-button v-permission="['system:user:create']" v-if="props.isCreate" type="primary" @click="handleClick">
<template #icon><icon-plus /></template>
新建
</a-button>
<a-button
v-permission="['system:user:update']"
v-if="!props.isCreate"
type="outline"
size="small"

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

@ -406,7 +406,7 @@ const alignLeft = ref(false);
const handleSortChange = (data: any, extra: any, currentDataSource: any) => {};
// 是否启用
const enabledStatus = async (record: string) => {
const enabledStatus = async (record: any) => {
record.enabled = !record.enabled;
const res = await userStore.enabledUser(record.id);
if (res.status === 200) {