菜单管理
This commit is contained in:
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"cSpell.words": [
|
||||||
|
"daterange",
|
||||||
|
"resourcedata",
|
||||||
|
"resourcename",
|
||||||
|
"rmark"
|
||||||
|
]
|
||||||
|
}
|
||||||
24
frontend/src/api/resource/interface/index.ts
Normal file
24
frontend/src/api/resource/interface/index.ts
Normal 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
249
frontend/src/api/resource/resourceData.ts
Normal 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
|
||||||
@@ -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
|
export default dictData
|
||||||
@@ -65,4 +65,5 @@ export namespace User {
|
|||||||
name: string;
|
name: string;
|
||||||
children?: ResDepartment[];
|
children?: ResDepartment[];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { ResPage } from '@/api/interface'
|
|||||||
import { User } from './interface'
|
import { User } from './interface'
|
||||||
import { ADMIN as rePrefix } from '@/api/config/serviceName'
|
import { ADMIN as rePrefix } from '@/api/config/serviceName'
|
||||||
import http from '@/api'
|
import http from '@/api'
|
||||||
|
import type { Resource } from '../resource/interface'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @name 用户管理模块
|
* @name 用户管理模块
|
||||||
@@ -56,6 +57,11 @@ export const getUserStatus = () => {
|
|||||||
return http.get<User.ResStatus[]>(`${rePrefix}/user/status`)
|
return http.get<User.ResStatus[]>(`${rePrefix}/user/status`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 获取用户状态字典
|
||||||
|
export const getResourceType = () => {
|
||||||
|
return http.get<Resource.ResType[]>(`${rePrefix}/user/status`)
|
||||||
|
}
|
||||||
|
|
||||||
// 获取用户性别字典
|
// 获取用户性别字典
|
||||||
export const getUserGender = () => {
|
export const getUserGender = () => {
|
||||||
return http.get<User.ResGender[]>(`${rePrefix}/user/gender`)
|
return http.get<User.ResGender[]>(`${rePrefix}/user/gender`)
|
||||||
|
|||||||
82
frontend/src/components/ResourceDialog/index.vue
Normal file
82
frontend/src/components/ResourceDialog/index.vue
Normal 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>
|
||||||
|
|
||||||
@@ -15,3 +15,9 @@ export const userStatus = [
|
|||||||
{ label: "启用", value: 1, tagType: "success" },
|
{ label: "启用", value: 1, tagType: "success" },
|
||||||
{ label: "禁用", value: 0, tagType: "danger" }
|
{ 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
216
frontend/src/views/authority/resource/index.vue
Normal 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>
|
||||||
@@ -24,12 +24,11 @@
|
|||||||
<el-button type='primary' link :icon='Refresh' @click='resetPass(scope.row)'>重置密码</el-button>
|
<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>
|
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</ProTable>
|
</ProTable>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang='tsx' name='useProTable'>
|
<script setup lang='tsx' name='useProTable'>
|
||||||
|
import { ref ,reactive} from 'vue'
|
||||||
import { User } from '@/api/user/interface'
|
import { User } from '@/api/user/interface'
|
||||||
import { useHandleData } from '@/hooks/useHandleData'
|
import { useHandleData } from '@/hooks/useHandleData'
|
||||||
import { useDownload } from '@/hooks/useDownload'
|
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 { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
|
||||||
import userDataList from '@/api/user/userData'
|
import userDataList from '@/api/user/userData'
|
||||||
import { useDictStore } from '@/stores/modules/dict'
|
import { useDictStore } from '@/stores/modules/dict'
|
||||||
|
|
||||||
const dictStore = useDictStore()
|
const dictStore = useDictStore()
|
||||||
|
|
||||||
import {
|
import {
|
||||||
getUserList,
|
getUserList,
|
||||||
deleteUser,
|
deleteUser,
|
||||||
@@ -52,15 +49,12 @@ import {
|
|||||||
BatchAddUser,
|
BatchAddUser,
|
||||||
getUserStatus,
|
getUserStatus,
|
||||||
} from '@/api/user/user'
|
} from '@/api/user/user'
|
||||||
|
import { ElMessageBox } from 'element-plus'
|
||||||
const userData = userDataList
|
const userData = userDataList
|
||||||
|
|
||||||
// ProTable 实例
|
// ProTable 实例
|
||||||
const proTable = ref<ProTableInstance>()
|
const proTable = ref<ProTableInstance>()
|
||||||
|
|
||||||
// 如果表格需要初始化请求参数,直接定义传给 ProTable (之后每次请求都会自动带上该参数,此参数更改之后也会一直带上,改变此参数会自动刷新表格数据)
|
// 如果表格需要初始化请求参数,直接定义传给 ProTable (之后每次请求都会自动带上该参数,此参数更改之后也会一直带上,改变此参数会自动刷新表格数据)
|
||||||
const initParam = reactive({ type: 1 })
|
const initParam = reactive({ type: 1 })
|
||||||
|
|
||||||
// dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total 这些字段,可以在这里进行处理成这些字段
|
// dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total 这些字段,可以在这里进行处理成这些字段
|
||||||
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
|
||||||
const dataCallback = (data: any) => {
|
const dataCallback = (data: any) => {
|
||||||
@@ -69,7 +63,6 @@ const dataCallback = (data: any) => {
|
|||||||
total: data.total,
|
total: data.total,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
|
// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
|
||||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||||
const getTableList = (params: any) => {
|
const getTableList = (params: any) => {
|
||||||
@@ -79,10 +72,8 @@ const getTableList = (params: any) => {
|
|||||||
delete newParams.createTime
|
delete newParams.createTime
|
||||||
return getUserList(newParams)
|
return getUserList(newParams)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 页面按钮权限(按钮权限既可以使用 hooks,也可以直接使用 v-auth 指令,指令适合直接绑定在按钮上,hooks 适合根据按钮权限显示不同的内容)
|
// 页面按钮权限(按钮权限既可以使用 hooks,也可以直接使用 v-auth 指令,指令适合直接绑定在按钮上,hooks 适合根据按钮权限显示不同的内容)
|
||||||
const { BUTTONS } = useAuthButtons()
|
const { BUTTONS } = useAuthButtons()
|
||||||
|
|
||||||
// 表格配置项
|
// 表格配置项
|
||||||
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
||||||
{ type: 'selection', fixed: 'left', width: 70 },
|
{ type: 'selection', fixed: 'left', width: 70 },
|
||||||
@@ -156,26 +147,22 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
|
|||||||
},
|
},
|
||||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
|
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
|
||||||
])
|
])
|
||||||
|
|
||||||
// 删除用户信息
|
// 删除用户信息
|
||||||
const deleteAccount = async (params: User.ResUserList) => {
|
const deleteAccount = async (params: User.ResUserList) => {
|
||||||
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
|
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
|
||||||
proTable.value?.getTableList()
|
proTable.value?.getTableList()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 批量删除用户信息
|
// 批量删除用户信息
|
||||||
const batchDelete = async (id: string[]) => {
|
const batchDelete = async (id: string[]) => {
|
||||||
await useHandleData(deleteUser, { id }, '删除所选用户信息')
|
await useHandleData(deleteUser, { id }, '删除所选用户信息')
|
||||||
proTable.value?.clearSelection()
|
proTable.value?.clearSelection()
|
||||||
proTable.value?.getTableList()
|
proTable.value?.getTableList()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置用户密码
|
// 重置用户密码
|
||||||
const resetPass = async (params: User.ResUserList) => {
|
const resetPass = async (params: User.ResUserList) => {
|
||||||
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
|
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
|
||||||
proTable.value?.getTableList()
|
proTable.value?.getTableList()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换用户状态
|
// 切换用户状态
|
||||||
const changeStatus = async (row: User.ResUserList) => {
|
const changeStatus = async (row: User.ResUserList) => {
|
||||||
await useHandleData(changeUserStatus, {
|
await useHandleData(changeUserStatus, {
|
||||||
@@ -184,14 +171,12 @@ const changeStatus = async (row: User.ResUserList) => {
|
|||||||
}, `切换【${row.username}】用户状态`)
|
}, `切换【${row.username}】用户状态`)
|
||||||
proTable.value?.getTableList()
|
proTable.value?.getTableList()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 导出用户列表
|
// 导出用户列表
|
||||||
const downloadFile = async () => {
|
const downloadFile = async () => {
|
||||||
ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
|
ElMessageBox.confirm('确认导出用户数据?', '温馨提示', { type: 'warning' }).then(() =>
|
||||||
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
|
useDownload(exportUserInfo, '用户列表', proTable.value?.searchParam),
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 批量添加用户
|
// 批量添加用户
|
||||||
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
|
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
|
||||||
const batchAdd = () => {
|
const batchAdd = () => {
|
||||||
@@ -203,11 +188,7 @@ const batchAdd = () => {
|
|||||||
}
|
}
|
||||||
dialogRef.value?.acceptParams(params)
|
dialogRef.value?.acceptParams(params)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 打开 drawer(新增、查看、编辑)
|
// 打开 drawer(新增、查看、编辑)
|
||||||
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user