ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

菜单管理

Browse Source
This commit is contained in:
sjl
2024-10-17 15:09:27 +08:00
parent 7c8d5644f7
commit d032b79499
10 changed files with 618 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/settings.json vendored Normal file
View File

@@ -0,0 +1,8 @@
{
"cSpell.words": [
"daterange",
"resourcedata",
"resourcename",
"rmark"
]
}

24
frontend/src/api/resource/interface/index.ts Normal file
View File

@@ -0,0 +1,24 @@
import type { DefineComponent } from "vue";
import type { DatetimeFormatProps } from "vue-i18n";
// 菜单管理模块
export namespace Resource {
// 菜单列表
export interface ResResourceList {
id: string;//资源表Id
name: string;//名称
path:string;//路径
sort:number;//排序
type:string;//资源类型
remark:string;//资源描述
route_Name:string;//路由名称
create_Time:string;//创建时间
update_Time:string;//更新时间
children?: ResResourceList[];
}
export interface ResType {
userLabel: string;
userValue: number;
}
}

249
frontend/src/api/resource/resourceData.ts Normal file
View File

@@ -0,0 +1,249 @@
import { HomeFilled, Operation } from "@element-plus/icons-vue"
import type { Resource } from "./interface"
const resourcedata = ref<Resource.ResResourceList[]>([
{
'id': '1',
'name': '检测计划',
'path':'/plan/planList/index',
'sort':1,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '2',
'name': '台账管理',
'path':'/plan/planList/index',
'sort':2,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '21',
'name': '检测脚本',
'path':'/plan/planList/index',
'sort':21,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '22',
'name': '被检设备',
'path':'/plan/planList/index',
'sort':22,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '23',
'name': '误差体系',
'path':'/plan/planList/index',
'sort':23,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},{
'id': '24',
'name': '检测源',
'path':'/plan/planList/index',
'sort':24,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
{
'id': '3',
'name': '权限管理',
'path':'/plan/planList/index',
'sort':3,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '31',
'name': '用户管理',
'path':'/plan/planList/index',
'sort':31,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '32',
'name': '角色管理',
'path':'/plan/planList/index',
'sort':32,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '33',
'name': '菜单管理',
'path':'/plan/planList/index',
'sort':33,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
{
'id': '4',
'name': '系统配置',
'path':'/plan/planList/index',
'sort':4,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '41',
'name': '通用配置',
'path':'/plan/planList/index',
'sort':41,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '42',
'name': '数据字典',
'path':'/plan/planList/index',
'sort':42,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '43',
'name': '报告模版',
'path':'/plan/planList/index',
'sort':43,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},{
'id': '44',
'name': '版本注册',
'path':'/plan/planList/index',
'sort':44,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
{
'id': '5',
'name': '日志管理',
'path':'/plan/planList/index',
'sort':5,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '6',
'name': '统计分析',
'path':'/plan/planList/index',
'sort':6,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '7',
'name': '示例',
'path':'/plan/planList/index',
'sort':7,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
children:[{
'id': '71',
'name': '普通表格',
'path':'/plan/planList/index',
'sort':71,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
},
{
'id': '72',
'name': '表格树',
'path':'/plan/planList/index',
'sort':72,
'type':'菜单',
'remark':'检测计划描述',
'route_Name':'route',
'create_Time': '2024-10-16 12:13:14',
'update_Time':'2024-10-16 12:13:14',
}
]
},
])
export default resourcedata

22
frontend/src/api/system/dictData.ts
View File

@@ -43,6 +43,28 @@ const dictData: Dict[] = [
},
],
},
{
id: "3",
code: 'type',
label: '资源类型',
children: [
{
id: "1",
label: '菜单',
code: 1,
},
{
id: "2",
label: '按钮',
code: 2,
},
{
id: "3",
label: '公共资源',
code: 3,
},
],
},
]
export default dictData

1
frontend/src/api/user/interface/index.ts
View File

@@ -66,3 +66,4 @@ export namespace User {
children?: ResDepartment[];
}
}

6
frontend/src/api/user/user.ts
View File

@@ -2,6 +2,7 @@ import { ResPage } from '@/api/interface'
import { User } from './interface'
import { ADMIN as rePrefix } from '@/api/config/serviceName'
import http from '@/api'
import type { Resource } from '../resource/interface'
/**
* @name 用户管理模块
@@ -56,6 +57,11 @@ export const getUserStatus = () => {
return http.get<User.ResStatus[]>(`${rePrefix}/user/status`)
}
// 获取用户状态字典
export const getResourceType = () => {
return http.get<Resource.ResType[]>(`${rePrefix}/user/status`)
}
// 获取用户性别字典
export const getUserGender = () => {
return http.get<User.ResGender[]>(`${rePrefix}/user/gender`)

82
frontend/src/components/ResourceDialog/index.vue Normal file
View File

@@ -0,0 +1,82 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" width="500">
<el-form :model="formData" :rules="rules">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" />
</el-form-item>
<el-form-item label="菜单路径" prop="path">
<el-input v-model="formData.path" />
</el-form-item>
<el-form-item label="菜单排序" prop="sort">
<el-input-number v-model="formData.sort" />
</el-form-item>
<el-form-item label="菜单类型" prop="type">
<el-select v-model="formData.type" placeholder="请选择资源类型">
<el-option label="菜单" value="菜单" />
<el-option label="按钮" value="按钮" />
<el-option label="公共资源" value="公共资源" />
</el-select>
</el-form-item>
<el-form-item label="菜单描述" prop="remark">
<el-input v-model="formData.remark" :rows="2" type="textarea"/>
</el-form-item>
<el-form-item label="路由名称" prop="route_Name">
<el-input v-model="formData.route_Name" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, reactive,watch } from 'vue';
import { type Resource } from '@/api/resource/interface'
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id:string;
name: string;
path: string;
sort: number;
type: string;
remark: string;
route_Name: string;
};
}>();
const rules = {
name :[
{require:true,trigger:"blur",message:"请填写菜单名称"}
]
}
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
</script>

6
frontend/src/utils/dict.ts
View File

@@ -15,3 +15,9 @@ export const userStatus = [
{ label: "启用", value: 1, tagType: "success" },
{ label: "禁用", value: 0, tagType: "danger" }
];
export const resourceType = [
{ label: "菜单", value: 1 },
{ label: "按钮", value: 2 },
{ label: "公共资源", value: 3 }
];

216
frontend/src/views/authority/resource/index.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='resourceData'
@selection-change="handleSelectionChange"
type="selection"
>
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增菜单</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length' @click="handleDelList"
>
批量删除菜单
</el-button>
</template>
<template>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteResource(scope.row)">删除</el-button>
</template>
</ProTable>
<!-- 新增/编辑资源对话框 -->
<ResourceDialog
:visible="dialogFormVisible"
:dialogTitle="dialogTitle"
:formData="dialogForm"
@update:visible="dialogFormVisible = $event"
@submit="submitForm"
/>
</div>
</template>
<script setup lang='tsx' name='useProTable'>
import { defineComponent,ref ,reactive} from 'vue'
import { type Resource } from '@/api/resource/interface'
import ProTable from '@/components/ProTable/index.vue'
import ResourceDialog from '@/components/ResourceDialog/index.vue'; // 导入子组件
import {Operation, CirclePlus, Delete, EditPen, Download, Upload, View, Refresh} from '@element-plus/icons-vue'
import resourceDataList from '@/api/resource/resourceData'
import { useDictStore } from '@/stores/modules/dict'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
let multipleSelection = ref<string[]>([]);
const resourceData = resourceDataList
const dialogFormVisible = ref(false)
const isEditMode = ref(false);
const dialogTitle = ref('新增菜单')
const dialogForm = ref<Resource.ResResourceList>({
id: '',
name: '',
path: '',
sort: 0,
type: '',
remark: '',
route_Name: '',
create_Time: '' ,
update_Time: '' ,
children:[],
});
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 表格配置项
const columns = reactive<ColumnProps<Resource.ResResourceList>[]>([
{ type: 'selection', fixed: 'left', width: 50 },
{
prop: 'name',
label: '名称',
width: 120,
search: { el: 'input', tooltip: '我是搜索提示' },
},
{
prop: 'path',
label: '路径',
width: 180,
},
{
prop: 'sort',
label: '排序',
search: {
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-input vModel_trim={searchParam.minAge} placeholder='最小排序' />
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大排序' />
</div>
)
},
},
},
{
prop: 'type',
label: '资源类型',
// 字典数据（本地数据）
//enum: dictStore.getDictData('type'),
search: { el: 'select', props: { filterable: true } },
//fieldNames: { label: 'label', value: 'resourceType' },
},
{
prop: 'route_Name',
label: '路由名称',
search: { el: 'input' },
},
{
prop: 'create_Time',
label: '创建时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
defaultValue: ['2024-11-12', '2024-12-12'],}
},
{
prop: 'update_Time',
label: '更新时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
defaultValue: ['2024-11-12', '2024-12-12'],}
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])
// 打开 drawer(新增、查看、编辑)
// 打开新增对话框
const openAddDialog = () => {
dialogForm.value = {
id: '',
name: '',
path: '',
sort: 0,
type: '',
remark: '',
route_Name: '',
create_Time: '' ,
update_Time: '' ,
children: [],
};
isEditMode.value = true;
dialogTitle.value = '新增菜单';
dialogFormVisible.value = true; // 打开对话框
};
// 提交表单
const submitForm = () => {
if (isEditMode.value) {
const index = resourceData.value.findIndex((resource: { id: string }) => resource.id === dialogForm.value.id);
if (index !== -1) {
dialogForm.value.update_Time = formatDate(Date.now()); // 更新为当前时间
resourceData.value[index] = { ...dialogForm.value }; // 更新资源
}
} else {
resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
}
dialogFormVisible.value = false; // 关闭对话框
};
// 打开编辑对话框
const openEditDialog = (resource: Resource.ResResourceList) => {
dialogForm.value = { ...resource }; // 复制资源数据以便编辑
isEditMode.value = true; // 设置为编辑模式
dialogTitle.value = '编辑资源';
dialogFormVisible.value = true; // 显示对话框
};
//选中
// 处理选择变化
const handleSelectionChange = (selection:Resource.ResResourceList[]) => {
multipleSelection.value = selection.map(row => row.id); // 更新选中的行
};
//批量删除
const handleDelList =()=>{
resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
multipleSelection.value = []; // Clear selected rows
ElMessage.success("批量删除成功");
}
// 删除资源
const deleteResource = (params: Resource.ResResourceList) => {
ElMessageBox.confirm(
`是否删除【${params.name}】菜单？`, // 使用模板字符串来插值
'温馨提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
resourceData.value = resourceData.value.filter(item => item.id !== params.id); // 过滤掉被删除的资源
ElMessage({
type: 'success',
message: `删除${params.name}成功!`
})
})
};
const formatDate = (timestamp: string|number|Date) => {
const date = new Date(timestamp);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>

23
frontend/src/views/demo/proTable/index.vue
View File

@@ -24,12 +24,11 @@
<el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
</template>
<script setup lang='tsx' name='useProTable'>
import { ref ,reactive} from 'vue'
import { User } from '@/api/user/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
@@ -40,9 +39,7 @@ import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import userDataList from '@/api/user/userData'
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
import {
getUserList,
deleteUser,
@@ -52,15 +49,12 @@ import {
BatchAddUser,
getUserStatus,
} from '@/api/user/user'
import { ElMessageBox } from 'element-plus'
const userData = userDataList
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
@@ -69,7 +63,6 @@ const dataCallback = (data: any) => {
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
@@ -79,10 +72,8 @@ const getTableList = (params: any) => {
delete newParams.createTime
return getUserList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
@@ -156,26 +147,22 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
proTable.value?.getTableList()
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
proTable.value?.getTableList()
}
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
await useHandleData(changeUserStatus, {
@@ -184,14 +171,12 @@ const changeStatus = async (row: User.ResUserList) => {
}, `切换【${row.username}】用户状态`)
proTable.value?.getTableList()
}
// 导出用户列表
const downloadFile = async () => {
ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
)
}
// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
@@ -203,11 +188,7 @@ const batchAdd = () => {
}
dialogRef.value?.acceptParams(params)
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
}
</script>