角色管理
This commit is contained in:
@@ -31,7 +31,7 @@ export namespace Device {
|
||||
protocol:string; //通讯协议
|
||||
ip: string; //IP地址
|
||||
port: number; //端口号
|
||||
encryption: number; //装置是否为加密版本
|
||||
encryptionFlag: number; //装置是否为加密版本
|
||||
series?: string| null; //装置识别码(3ds加密)
|
||||
devKey?: string| null; //装置秘钥(3ds加密)
|
||||
sampleID?: string| null; //样品编号
|
||||
|
||||
@@ -8,6 +8,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
'name': '检测计划',
|
||||
'code':'route',
|
||||
'path':'/plan/planList/index',
|
||||
'component':'planList',
|
||||
'icon':'',
|
||||
'sort':100,
|
||||
'type':0,
|
||||
@@ -21,6 +22,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '台账管理',
|
||||
code:'route',
|
||||
path:'/machine',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -33,6 +35,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '检测脚本',
|
||||
code:'route',
|
||||
path:'/machine/testScript/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:1,
|
||||
@@ -46,6 +49,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '被检设备',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:1,
|
||||
@@ -59,6 +63,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '误差体系',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:1,
|
||||
@@ -72,6 +77,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '检测源',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:1,
|
||||
@@ -86,6 +92,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '权限管理',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -98,6 +105,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '用户管理',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -111,6 +119,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '角色管理',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -124,6 +133,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '菜单管理',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -138,6 +148,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '系统配置',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -150,6 +161,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '通用配置',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -163,6 +175,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '数据字典',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -176,6 +189,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '报告模版',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -189,6 +203,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '版本注册',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -203,6 +218,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '日志管理',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -216,6 +232,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '统计分析',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -229,6 +246,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '示例',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -241,6 +259,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '普通表格',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
@@ -254,6 +273,7 @@ export const functionList : Function.ResFunction[] = [
|
||||
name: '表格树',
|
||||
code:'route',
|
||||
path:'/plan/planList/index',
|
||||
'component':'planList',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
|
||||
@@ -2,24 +2,25 @@ import http from "@/api";
|
||||
import { ADMIN as rePrefix } from "@/api/config/serviceName";
|
||||
import type { Function } from "@/api/function/interface";
|
||||
|
||||
|
||||
//获取菜单列表
|
||||
export const getFunctionList = (params: Function.ReqFunctionParams) => {
|
||||
return http.post(`${rePrefix}/function/list`, params);
|
||||
return http.post(`/function/list`, params);
|
||||
};
|
||||
|
||||
//添加菜单列表
|
||||
export const addFunction = (params: Function.ReqFunctionParams) => {
|
||||
return http.post(`${rePrefix}/function/add`,params);
|
||||
export const addFunction = (params: Function.ResFunction) => {
|
||||
return http.post(`/function/add`,params);
|
||||
};
|
||||
|
||||
//删除菜单列表
|
||||
export const deleteFunction = (params: { id: string[] }) => {
|
||||
return http.post(`${rePrefix}/function/delete`, { data: params });
|
||||
return http.post(`/function/delete`, { data: params });
|
||||
};
|
||||
|
||||
//编辑菜单列表
|
||||
export const updateFunction = (params: Function.ReqFunctionParams) => {
|
||||
return http.post(`${rePrefix}/function/update`, params);
|
||||
export const updateFunction = (params: Function.ResFunction) => {
|
||||
return http.put(`/function/update`, params);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -21,10 +21,11 @@ export namespace Function {
|
||||
pids?:string | null;//节点上层所有节点
|
||||
name: string;//名称
|
||||
code:string;//资源标识
|
||||
path:string;//路径
|
||||
icon?:string | null;//图标
|
||||
path:string;//路由路径
|
||||
component:string ;//组件地址
|
||||
icon?:string;//图标
|
||||
sort:number;//排序
|
||||
type:number | null;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
|
||||
type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
|
||||
remark?: string | null;//权限资源描述
|
||||
state:number;//权限资源状态
|
||||
create_By?:string | null;//创建人
|
||||
|
||||
@@ -21,6 +21,7 @@ const config = {
|
||||
withCredentials: true,
|
||||
// post请求指定数据类型以及编码
|
||||
headers: { 'Content-Type': 'application/json;charset=utf-8' }
|
||||
//headers : {'Content-Type': 'multipart/form-data'}
|
||||
};
|
||||
|
||||
class RequestHttp {
|
||||
@@ -107,6 +108,16 @@ class RequestHttp {
|
||||
download(url: string, params?: object, _object = {}): Promise<BlobPart> {
|
||||
return this.service.post(url, params, { ..._object, responseType: "blob" });
|
||||
}
|
||||
/**
|
||||
* @description 批量导入专用请求方法
|
||||
*/
|
||||
batchImport<T>(url: string, formData: FormData, _object = {}): Promise<ResultData<T>> {
|
||||
return this.service.post(url, formData, {
|
||||
..._object,
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default new RequestHttp(config);
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import type { ReqPage } from '@/api/interface'
|
||||
import type { ReqPage, ResPage } from '@/api/interface'
|
||||
|
||||
// 角色管理模块
|
||||
export namespace Role {
|
||||
|
||||
//资源接口
|
||||
export interface Permission{
|
||||
id: string; //资源ID
|
||||
name: string; //资源名称
|
||||
code: string; //资源代码
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户数据表格分页查询参数
|
||||
*/
|
||||
export interface ReqRoleParams extends ReqPage{
|
||||
id: string; // 装置序号用户ID 必填
|
||||
name?: string; //用户名(别名)
|
||||
code?: string; //角色代码
|
||||
}
|
||||
//角色接口
|
||||
export interface RoleBO {
|
||||
id: string; //角色类型ID
|
||||
@@ -24,18 +26,22 @@ export namespace Role {
|
||||
updateTime?: string; // 更新时间
|
||||
}
|
||||
|
||||
//角色+资源
|
||||
export interface ReqRoleAndPermission extends RoleBO{
|
||||
permissionList?:Permission[]; //角色权限列表
|
||||
//角色接口
|
||||
export interface RoleFunctionId {
|
||||
id: string[]; //菜单id
|
||||
}
|
||||
|
||||
// 角色+分页
|
||||
export interface ReqRoleParams extends ReqPage,RoleBO {
|
||||
/**
|
||||
* 用户表格查询分页返回的对象;
|
||||
*/
|
||||
export interface ResRolePage extends ResPage<RoleBO> {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// export interface Permission{
|
||||
// key: string; //权限名称
|
||||
// label: string; //权限ID
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { ResPage } from '@/api/interface'
|
||||
import type { Role } from './interface'
|
||||
import type { Function } from './../function/interface/index';
|
||||
import { ADMIN as rePrefix } from '@/api/config/serviceName'
|
||||
import http from '@/api'
|
||||
|
||||
@@ -8,7 +9,7 @@ import http from '@/api'
|
||||
*/
|
||||
// 获取角色列表
|
||||
export const getRoleList = (params: Role.ReqRoleParams) => {
|
||||
return http.get(`/sysRole/list`, params)
|
||||
return http.post(`/sysRole/list`, params)
|
||||
|
||||
// return http.post<ResPage<Role.ResRoleList>>(`/RoleList_Post`, params)
|
||||
// return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/role/list`, params)
|
||||
@@ -21,17 +22,27 @@ export const addRole = (params: Role.RoleBO) => {
|
||||
|
||||
// 编辑角色
|
||||
export const editRole = (params: Role.RoleBO) => {
|
||||
return http.put(`/sysRole/edit`, params)
|
||||
return http.put(`/sysRole/update`, params)
|
||||
}
|
||||
|
||||
// 删除角色
|
||||
export const deleteRole = (params: { id: string[] }) => {
|
||||
return http.post(`/sysRole/del`, params)
|
||||
return http.post(`/sysRole/delete`, params)
|
||||
}
|
||||
|
||||
|
||||
// 编辑角色资源
|
||||
export const editRoleAndPermission = (params: Role.ReqRoleAndPermission) => {
|
||||
return http.post(`/role/edit_RoleAndPermission`, params)
|
||||
// 获取资源
|
||||
export const getFunctionList = () => {
|
||||
return http.get<Function.ResFunction>(`/sysFunction/functionTree`)
|
||||
}
|
||||
|
||||
|
||||
//获取角色id绑定的菜单
|
||||
export const getRoleFunction = (params:Role.RoleBO) => {
|
||||
return http.post(`/sysRole/getFunctionsByRoleId?id=${params.id}`)
|
||||
}
|
||||
|
||||
//角色分配菜单
|
||||
export const assignFunction = (params:Role.RoleBO,param:Role.RoleFunctionId) => {
|
||||
return http.put(`/sysFunction/assignFunctionByRoleId`,{ roleId: params.id,functionIds:param.id })
|
||||
}
|
||||
@@ -30,9 +30,10 @@
|
||||
|
||||
<script lang='ts' setup name='SelectIcon'>
|
||||
import * as Icons from '@element-plus/icons-vue'
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
interface SelectIconProps {
|
||||
iconValue: string;
|
||||
iconValue: string| undefined;
|
||||
title?: string;
|
||||
clearable?: boolean;
|
||||
placeholder?: string;
|
||||
@@ -82,6 +83,7 @@ const iconsList = computed((): { [key: string]: any } => {
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
|
||||
311
frontend/src/styles/index.ts
Normal file
311
frontend/src/styles/index.ts
Normal file
@@ -0,0 +1,311 @@
|
||||
import { isArray } from "@/utils/is";
|
||||
import { FieldNamesProps } from "@/components/ProTable/interface";
|
||||
|
||||
const mode = import.meta.env.VITE_ROUTER_MODE;
|
||||
|
||||
/**
|
||||
* @description 获取localStorage
|
||||
* @param {String} key Storage名称
|
||||
* @returns {String}
|
||||
*/
|
||||
export function localGet(key: string) {
|
||||
const value = window.localStorage.getItem(key);
|
||||
try {
|
||||
return JSON.parse(window.localStorage.getItem(key) as string);
|
||||
} catch (error) {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 存储localStorage
|
||||
* @param {String} key Storage名称
|
||||
* @param {*} value Storage值
|
||||
* @returns {void}
|
||||
*/
|
||||
export function localSet(key: string, value: any) {
|
||||
window.localStorage.setItem(key, JSON.stringify(value));
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 清除localStorage
|
||||
* @param {String} key Storage名称
|
||||
* @returns {void}
|
||||
*/
|
||||
export function localRemove(key: string) {
|
||||
window.localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 清除所有localStorage
|
||||
* @returns {void}
|
||||
*/
|
||||
export function localClear() {
|
||||
window.localStorage.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 判断数据类型
|
||||
* @param {*} val 需要判断类型的数据
|
||||
* @returns {String}
|
||||
*/
|
||||
export function isType(val: any) {
|
||||
if (val === null) return "null";
|
||||
if (typeof val !== "object") return typeof val;
|
||||
else return Object.prototype.toString.call(val).slice(8, -1).toLocaleLowerCase();
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 生成唯一 uuid
|
||||
* @returns {String}
|
||||
*/
|
||||
export function generateUUID() {
|
||||
let uuid = "";
|
||||
for (let i = 0; i < 32; i++) {
|
||||
let random = (Math.random() * 16) | 0;
|
||||
if (i === 8 || i === 12 || i === 16 || i === 20) uuid += "-";
|
||||
uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
|
||||
}
|
||||
return uuid;
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断两个对象是否相同
|
||||
* @param {Object} a 要比较的对象一
|
||||
* @param {Object} b 要比较的对象二
|
||||
* @returns {Boolean} 相同返回 true,反之 false
|
||||
*/
|
||||
export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
|
||||
if (!a || !b) return false;
|
||||
let aProps = Object.getOwnPropertyNames(a);
|
||||
let bProps = Object.getOwnPropertyNames(b);
|
||||
if (aProps.length != bProps.length) return false;
|
||||
for (let i = 0; i < aProps.length; i++) {
|
||||
let propName = aProps[i];
|
||||
let propA = a[propName];
|
||||
let propB = b[propName];
|
||||
if (!b.hasOwnProperty(propName)) return false;
|
||||
if (propA instanceof Object) {
|
||||
if (!isObjectValueEqual(propA, propB)) return false;
|
||||
} else if (propA !== propB) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 生成随机数
|
||||
* @param {Number} min 最小值
|
||||
* @param {Number} max 最大值
|
||||
* @returns {Number}
|
||||
*/
|
||||
export function randomNum(min: number, max: number): number {
|
||||
let num = Math.floor(Math.random() * (min - max) + max);
|
||||
return num;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取当前时间对应的提示语
|
||||
* @returns {String}
|
||||
*/
|
||||
export function getTimeState() {
|
||||
let timeNow = new Date();
|
||||
let hours = timeNow.getHours();
|
||||
if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
|
||||
if (hours >= 10 && hours <= 14) return `中午好 🌞`;
|
||||
if (hours >= 14 && hours <= 18) return `下午好 🌞`;
|
||||
if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
|
||||
if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取浏览器默认语言
|
||||
* @returns {String}
|
||||
*/
|
||||
export function getBrowserLang() {
|
||||
let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
|
||||
let defaultBrowserLang = "";
|
||||
if (["cn", "zh", "zh-cn"].includes(browserLang.toLowerCase())) {
|
||||
defaultBrowserLang = "zh";
|
||||
} else {
|
||||
defaultBrowserLang = "en";
|
||||
}
|
||||
return defaultBrowserLang;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 获取不同路由模式所对应的 url + params
|
||||
* @returns {String}
|
||||
*/
|
||||
export function getUrlWithParams() {
|
||||
const url = {
|
||||
hash: location.hash.substring(1),
|
||||
history: location.pathname + location.search
|
||||
};
|
||||
return url[mode];
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归扁平化菜单,方便添加动态路由
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function getFlatMenuList(menuList: Menu.MenuOptions[]): Menu.MenuOptions[] {
|
||||
let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
|
||||
return newMenuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归过滤出需要渲染在左侧菜单的列表 (需剔除 isHide == true 的菜单)
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @returns {Array}
|
||||
* */
|
||||
export function getShowMenuList(menuList: Menu.MenuOptions[]) {
|
||||
let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
|
||||
return newMenuList.filter(item => {
|
||||
item.children?.length && (item.children = getShowMenuList(item.children));
|
||||
return !item.meta?.isHide;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归找出所有面包屑存储到 pinia/vuex 中
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @param {Array} parent 父级菜单
|
||||
* @param {Object} result 处理后的结果
|
||||
* @returns {Object}
|
||||
*/
|
||||
export const getAllBreadcrumbList = (menuList: Menu.MenuOptions[], parent = [], result: { [key: string]: any } = {}) => {
|
||||
for (const item of menuList) {
|
||||
result[item.path] = [...parent, item];
|
||||
if (item.children) getAllBreadcrumbList(item.children, result[item.path], result);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 使用递归处理路由菜单 path,生成一维数组 (第一版本地路由鉴权会用到,该函数暂未使用)
|
||||
* @param {Array} menuList 所有菜单列表
|
||||
* @param {Array} menuPathArr 菜单地址的一维数组 ['**','**']
|
||||
* @returns {Array}
|
||||
*/
|
||||
export function getMenuListPath(menuList: Menu.MenuOptions[], menuPathArr: string[] = []): string[] {
|
||||
for (const item of menuList) {
|
||||
if (typeof item === "object" && item.path) menuPathArr.push(item.path);
|
||||
if (item.children?.length) getMenuListPath(item.children, menuPathArr);
|
||||
}
|
||||
return menuPathArr;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 递归查询当前 path 所对应的菜单对象 (该函数暂未使用)
|
||||
* @param {Array} menuList 菜单列表
|
||||
* @param {String} path 当前访问地址
|
||||
* @returns {Object | null}
|
||||
*/
|
||||
export function findMenuByPath(menuList: Menu.MenuOptions[], path: string): Menu.MenuOptions | null {
|
||||
for (const item of menuList) {
|
||||
if (item.path === path) return item;
|
||||
if (item.children) {
|
||||
const res = findMenuByPath(item.children, path);
|
||||
if (res) return res;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 使用递归过滤需要缓存的菜单 name (该函数暂未使用)
|
||||
* @param {Array} menuList 所有菜单列表
|
||||
* @param {Array} keepAliveNameArr 缓存的菜单 name ['**','**']
|
||||
* @returns {Array}
|
||||
* */
|
||||
export function getKeepAliveRouterName(menuList: Menu.MenuOptions[], keepAliveNameArr: string[] = []) {
|
||||
menuList.forEach(item => {
|
||||
item.meta.isKeepAlive && item.name && keepAliveNameArr.push(item.name);
|
||||
item.children?.length && getKeepAliveRouterName(item.children, keepAliveNameArr);
|
||||
});
|
||||
return keepAliveNameArr;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 格式化表格单元格默认值 (el-table-column)
|
||||
* @param {Number} row 行
|
||||
* @param {Number} col 列
|
||||
* @param {*} callValue 当前单元格值
|
||||
* @returns {String}
|
||||
* */
|
||||
export function formatTableColumn(row: number, col: number, callValue: any) {
|
||||
// 如果当前值为数组,使用 / 拼接(根据需求自定义)
|
||||
if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
|
||||
return callValue ?? "--";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 处理 ProTable 值为数组 || 无数据
|
||||
* @param {*} callValue 需要处理的值
|
||||
* @returns {String}
|
||||
* */
|
||||
export function formatValue(callValue: any) {
|
||||
// 如果当前值为数组,使用 / 拼接(根据需求自定义)
|
||||
if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
|
||||
return callValue ?? "--";
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 处理 prop 为多级嵌套的情况,返回的数据 (列如: prop: user.name)
|
||||
* @param {Object} row 当前行数据
|
||||
* @param {String} prop 当前 prop
|
||||
* @returns {*}
|
||||
* */
|
||||
export function handleRowAccordingToProp(row: { [key: string]: any }, prop: string) {
|
||||
if (!prop.includes(".")) return row[prop] ?? "--";
|
||||
prop.split(".").forEach(item => (row = row[item] ?? "--"));
|
||||
return row;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 处理 prop,当 prop 为多级嵌套时 ==> 返回最后一级 prop
|
||||
* @param {String} prop 当前 prop
|
||||
* @returns {String}
|
||||
* */
|
||||
export function handleProp(prop: string) {
|
||||
const propArr = prop.split(".");
|
||||
if (propArr.length == 1) return prop;
|
||||
return propArr[propArr.length - 1];
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 根据枚举列表查询当需要的数据(如果指定了 label 和 value 的 key值,会自动识别格式化)
|
||||
* @param {String} callValue 当前单元格值
|
||||
* @param {Array} enumData 字典列表
|
||||
* @param {Array} fieldNames label && value && children 的 key 值
|
||||
* @param {String} type 过滤类型(目前只有 tag)
|
||||
* @returns {String}
|
||||
* */
|
||||
export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNamesProps, type?: "tag") {
|
||||
const value = fieldNames?.value ?? "value";
|
||||
const label = fieldNames?.label ?? "label";
|
||||
const children = fieldNames?.children ?? "children";
|
||||
let filterData: { [key: string]: any } = {};
|
||||
// 判断 enumData 是否为数组
|
||||
if (Array.isArray(enumData)) filterData = findItemNested(enumData, callValue, value, children);
|
||||
// 判断是否输出的结果为 tag 类型
|
||||
if (type == "tag") {
|
||||
return filterData?.tagType ? filterData.tagType : "";
|
||||
} else {
|
||||
return filterData ? filterData[label] : "--";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 递归查找 callValue 对应的 enum 值
|
||||
* */
|
||||
export function findItemNested(enumData: any, callValue: any, value: string, children: string) {
|
||||
return enumData.reduce((accumulator: any, current: any) => {
|
||||
if (accumulator) return accumulator;
|
||||
if (current[value] === callValue) return current;
|
||||
if (current[children]) return findItemNested(current[children], callValue, value, children);
|
||||
}, null);
|
||||
}
|
||||
@@ -1,66 +1,186 @@
|
||||
<template>
|
||||
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
|
||||
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="formData.name" />
|
||||
<el-dialog :title="dialogTitle" :model-value="dialogVisible" @close="close" v-bind="dialogMiddle">
|
||||
<el-form :model="formContent" ref='formRuleRef' :rules='rules' >
|
||||
<el-form-item label="上级菜单" prop="pid" :label-width="100">
|
||||
<el-tree-select
|
||||
v-model="value"
|
||||
:data="data"
|
||||
check-strictly
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
check-on-click-node
|
||||
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="路径" prop="path">
|
||||
<el-input v-model="formData.path" />
|
||||
<el-form-item label="名称" prop="name" :label-width="100">
|
||||
<el-input v-model="formContent.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort">
|
||||
<el-input-number v-model="formData.sort" />
|
||||
<el-form-item label="图标" prop="icon" :label-width="100">
|
||||
<IconSelect
|
||||
:iconValue="formContent.icon"
|
||||
@update:iconValue="(value) => formContent.icon = value"
|
||||
placeholder="选择一个图标"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select v-model="formData.type" placeholder="请选择资源类型">
|
||||
<el-form-item label="路由地址" prop="path" :label-width="100">
|
||||
<el-input v-model="formContent.path" />
|
||||
</el-form-item>
|
||||
<el-form-item label="组件地址" prop="component" :label-width="100">
|
||||
<el-input v-model="formContent.component" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="sort" :label-width="100">
|
||||
<el-input-number v-model="formContent.sort" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type" :label-width="100">
|
||||
<el-select v-model="formContent.type" placeholder="请选择资源类型">
|
||||
<el-option
|
||||
v-for="item in dictStore.getDictData('resourceType')"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="remark">
|
||||
<el-input v-model="formData.remark" :rows="2" type="textarea"/>
|
||||
<el-form-item label="描述" prop="remark" :label-width="100">
|
||||
<el-input v-model="formContent.remark" :rows="2" type="textarea"/>
|
||||
</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>
|
||||
<el-button @click="close()">取 消</el-button>
|
||||
<el-button type="primary" @click="save()">确 定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="ResourceDialog">
|
||||
import { defineProps, defineEmits,watch,ref, type Ref } from 'vue';
|
||||
import { dialogSmall } from '@/utils/elementBind'
|
||||
import { defineProps, defineEmits,watch,ref, type Ref, computed } from 'vue';
|
||||
import { dialogMiddle } from '@/utils/elementBind'
|
||||
import { ElMessage, FormInstance, FormItemRule } from 'element-plus'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
const dictStore = useDictStore()
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
dialogTitle: string;
|
||||
import { type Function } from '@/api/function/interface'
|
||||
import {addFunction,updateFunction,} from '@/api/function/index.ts'
|
||||
import IconSelect from '@/components/SelectIcon/index.vue'
|
||||
import { functionList } from '@/api/function/functionExample.ts'
|
||||
const value = ref()
|
||||
|
||||
const data = [
|
||||
{
|
||||
value: '1',
|
||||
label: 'Level one 1',
|
||||
children: [
|
||||
{
|
||||
value: '1-1',
|
||||
label: 'Level two 1-1',
|
||||
children: [
|
||||
{
|
||||
value: '1-1-1',
|
||||
label: 'Level three 1-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: 'Level one 2',
|
||||
children: [
|
||||
{
|
||||
value: '2-1',
|
||||
label: 'Level two 2-1',
|
||||
children: [
|
||||
{
|
||||
value: '2-1-1',
|
||||
label: 'Level three 2-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '2-2',
|
||||
label: 'Level two 2-2',
|
||||
children: [
|
||||
{
|
||||
value: '2-2-1',
|
||||
label: 'Level three 2-2-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: 'Level one 3',
|
||||
children: [
|
||||
{
|
||||
value: '3-1',
|
||||
label: 'Level two 3-1',
|
||||
children: [
|
||||
{
|
||||
value: '3-1-1',
|
||||
label: 'Level three 3-1-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '3-2',
|
||||
label: 'Level two 3-2',
|
||||
children: [
|
||||
{
|
||||
value: '3-2-1',
|
||||
label: 'Level three 3-2-1',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const dictStore = useDictStore()
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
const titleType = ref('add')
|
||||
const formContent = ref<Function.ResFunction>({
|
||||
id: '',//资源表Id
|
||||
pid:'',//节点(0为根节点)
|
||||
pids:'',//节点上层所有节点
|
||||
name: '',//名称
|
||||
code:'',//资源标识
|
||||
path:'',//路径
|
||||
component:'',
|
||||
icon:undefined as string | undefined, // 图标
|
||||
sort:100,//排序
|
||||
type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
|
||||
remark: '',//权限资源描述
|
||||
state:1,//权限资源状态
|
||||
})
|
||||
return { dialogVisible, titleType, formContent }
|
||||
}
|
||||
|
||||
const { dialogVisible, titleType, formContent } = useMetaInfo()
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '',//资源表Id
|
||||
pid:'',//节点(0为根节点)
|
||||
pids:'',//节点上层所有节点
|
||||
name: '',//名称
|
||||
code:'',//资源标识
|
||||
path:'',//路径
|
||||
component:'',
|
||||
icon:undefined,//图标
|
||||
sort:100,//排序
|
||||
type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
|
||||
remark:'',//权限资源描述
|
||||
state:1,//权限资源状态
|
||||
}
|
||||
}
|
||||
|
||||
let dialogTitle = computed(() => {
|
||||
return titleType.value === 'add' ? '新增菜单' : '编辑菜单'
|
||||
})
|
||||
|
||||
formData: {
|
||||
id: string;//资源表Id
|
||||
pid:string;//节点(0为根节点)
|
||||
pids?:string;//节点上层所有节点
|
||||
name: string;//名称
|
||||
code:string;//资源标识
|
||||
path:string;//路径
|
||||
icon?:string;//图标
|
||||
sort:number;//排序
|
||||
type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
|
||||
remark?: string;//权限资源描述
|
||||
state:number;//权限资源状态
|
||||
create_By?:string;//创建人
|
||||
create_Time?:string;//创建时间
|
||||
update_By?:string;//更新人
|
||||
update_Time?:string;//更新时间
|
||||
};
|
||||
}>();
|
||||
|
||||
|
||||
// 定义规则
|
||||
@@ -70,42 +190,61 @@
|
||||
path :[{required:true,trigger:'blur',message:'菜单路径必填!'}],
|
||||
type :[{required:true,trigger:'change',message:'菜单类型必选!'}]
|
||||
})
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
(e: 'submit', data: any): void;
|
||||
}>();
|
||||
|
||||
const handleCancel = () => {
|
||||
//重置表单内容
|
||||
//取消表单校验状态
|
||||
formRuleRef.value && formRuleRef.value.resetFields()
|
||||
emit('update:visible', false); // 关闭对话框
|
||||
};
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
formRuleRef.value?.validate((valid: boolean) => {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
// 将表单数据转为json,发送到后端
|
||||
let confirmFormData = JSON.parse(JSON.stringify(props.formData))
|
||||
emit('submit', props.formData); // 提交表单数据
|
||||
emit('update:visible', false); // 提交后关闭对话框
|
||||
if (formContent.value.id) {
|
||||
const result = await updateFunction(formContent.value);
|
||||
if(result.code != 'A0000'){
|
||||
ElMessage.error({ message: result.message})
|
||||
}else{
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功!` })
|
||||
}
|
||||
} else {
|
||||
ElMessage.error('表单验证失败!')
|
||||
const result = await addFunction(formContent.value);
|
||||
if(result.code != 'A0000'){
|
||||
ElMessage.error({ message: result.message})
|
||||
}else{
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功!` })
|
||||
}
|
||||
}
|
||||
close()
|
||||
// 刷新表格
|
||||
await props.refreshTable!()
|
||||
}
|
||||
})
|
||||
}catch (error) {
|
||||
console.error('验证过程中发生错误', error)
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
// 打开弹窗,可能是新增,也可能是编辑
|
||||
const open = async (sign: string, data: Function.ResFunction) => {
|
||||
titleType.value = sign
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
formContent.value = { ...data }
|
||||
} else {
|
||||
resetFormContent()
|
||||
}
|
||||
}
|
||||
|
||||
// 当 props.visible 改变时,更新 formData
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (!newVal) {
|
||||
// 这里可以重置表单数据,如果需要的话
|
||||
|
||||
}
|
||||
});
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -3,64 +3,41 @@
|
||||
<ProTable
|
||||
ref='proTable'
|
||||
:columns='columns'
|
||||
:data='resourceData'
|
||||
@selection-change="handleSelectionChange"
|
||||
type="selection"
|
||||
:pagination="false"
|
||||
:request-api='getFunctionList'
|
||||
>
|
||||
<!-- :data='userData' -->
|
||||
<!-- 表格 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"
|
||||
>
|
||||
<template #tableHeader='scope'>
|
||||
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
|
||||
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
|
||||
@click='batchDelete(scope.selectedListIds)'>
|
||||
批量删除
|
||||
</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>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
|
||||
</div>
|
||||
<ResourcePopup :refresh-table='proTable?.getTableList' ref='resourcePopup' />
|
||||
|
||||
</template>
|
||||
<script setup lang='tsx' name='useProTable'>
|
||||
import { defineComponent,ref ,reactive} from 'vue'
|
||||
import { ref ,reactive} from 'vue'
|
||||
import { useHandleData } from '@/hooks/useHandleData'
|
||||
import { type Function } from '@/api/function/interface'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
|
||||
import resourceDataList from '@/api/function/functionExample'
|
||||
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
|
||||
|
||||
import ResourcePopup from './components/resourcePopup.vue'
|
||||
import {deleteFunction,getFunctionList} from '@/api/function/index.ts'
|
||||
const dictStore = useDictStore()
|
||||
let multipleSelection = ref<string[]>([]);
|
||||
const resourceData = resourceDataList
|
||||
const dialogFormVisible = ref(false)
|
||||
const isEditMode = ref(false);
|
||||
const dialogTitle = ref('新增菜单')
|
||||
|
||||
const dialogForm = ref<Function.ResFunction>({
|
||||
id: '',
|
||||
pid:'',
|
||||
pids:'',
|
||||
name: '',
|
||||
code:'',
|
||||
path:'',
|
||||
icon:'',
|
||||
sort:100,
|
||||
type:0,
|
||||
remark: '',
|
||||
state:1,
|
||||
children:[],
|
||||
});
|
||||
const resourcePopup = ref()
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
|
||||
@@ -105,102 +82,26 @@
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right',minWidth: 200 },
|
||||
])
|
||||
// 打开 drawer(新增、查看、编辑)
|
||||
// 打开新增对话框
|
||||
const openAddDialog = () => {
|
||||
dialogForm.value = {
|
||||
id: '',
|
||||
pid:'',
|
||||
pids:'',
|
||||
name: '',
|
||||
code:'',
|
||||
path:'',
|
||||
icon:'',
|
||||
sort:100,
|
||||
remark: '',
|
||||
state:1,
|
||||
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 }; // 更新资源
|
||||
|
||||
|
||||
|
||||
// 打开 drawer(新增、编辑)
|
||||
const openDialog = (titleType: string, row: Partial<Function.ResFunction> = {}) => {
|
||||
resourcePopup.value?.open(titleType, row)
|
||||
}
|
||||
|
||||
// 删除用户信息
|
||||
const handleDelete = async (params: Function.ResFunction) => {
|
||||
await useHandleData(deleteFunction, [params.id] , `删除【${params.name}】用户`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
} else {
|
||||
|
||||
resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
|
||||
// 批量删除用户信息
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deleteFunction, { id }, '删除所选用户信息')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
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 =()=>{
|
||||
// ElMessageBox.confirm(
|
||||
// `是否删除所选菜单信息?`, // 使用模板字符串来插值
|
||||
// '温馨提示',
|
||||
// {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning',
|
||||
// }
|
||||
// )
|
||||
// .then(() => {
|
||||
// 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>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<!-- 权限信息弹出框 -->
|
||||
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
|
||||
<div>
|
||||
<el-transfer v-model="value" :data="data.permissionList" :titles="['未具备的权限', '已具备的权限']"/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleCancel">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {ref} from 'vue'
|
||||
import {dialogBig} from '@/utils/elementBind'
|
||||
import {Role} from '@/api/role/interface'
|
||||
|
||||
const {dialogVisible, data} = defineProps<{
|
||||
dialogVisible: boolean;
|
||||
title: string;
|
||||
<<<<<<< HEAD
|
||||
data: Role.Permission;
|
||||
}>()
|
||||
=======
|
||||
data: Role.ResRoleList;
|
||||
}>
|
||||
()
|
||||
>>>>>>> bf8c6a1d00bd2c22d1a10896c5e8fc94ab9ed017
|
||||
|
||||
// const leftvalue = ref<Role.Permission[]>([])
|
||||
// const rightvalue = ref<Role.Permission[]>([])
|
||||
|
||||
// const rightvalue = computed<Role.Permission[]>({
|
||||
// get(){
|
||||
// return data.permissionList?.filter(item => item.disabled) || []
|
||||
// },
|
||||
// set: (value: Role.Permission[]) => {
|
||||
// if (data.permissionList) {
|
||||
// for(let i = 0;i<value.length;i++){
|
||||
// for(let j = 0;j<(data.permissionList?.length);j++){
|
||||
// if(value[i].key === data.permissionList[j].key)
|
||||
// {
|
||||
// data.permissionList[j].disabled = value[i].disabled
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
// const leftvalue = computed<Role.Permission[]>({
|
||||
// get(){
|
||||
// return data.permissionList?.filter(item => item.disabled === false) || []
|
||||
// },
|
||||
// set: (value: Role.Permission[]) => {
|
||||
// if (data.permissionList) {
|
||||
// for(let i = 0;i<value.length;i++){
|
||||
// for(let j = 0;j<(data.permissionList?.length);j++){
|
||||
// if(value[i].key === data.permissionList[j].key)
|
||||
// {
|
||||
// data.permissionList[j].disabled = value[i].disabled
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
|
||||
const value = ref()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:visible', value: boolean): void;
|
||||
}>();
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
</script>
|
||||
@@ -4,7 +4,7 @@
|
||||
<div>
|
||||
|
||||
<el-form :model="formContent"
|
||||
ref='formRuleRef'
|
||||
ref='dialogFormRef'
|
||||
:rules='rules'
|
||||
>
|
||||
<el-form-item label="名称" prop='name' :label-width="100">
|
||||
@@ -84,7 +84,8 @@ const resetFormContent = () => {
|
||||
const formRuleRef = ref<FormInstance>()
|
||||
//定义校验规则
|
||||
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
|
||||
name: [{ required: true, message: '名称必填!', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '名称必填!', trigger: 'blur' },
|
||||
{ pattern: /^[\u4e00-\u9fa5]{1,20}$/, message: '名称为长度1-20的中文', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '编码必填!', trigger: 'blur' }],
|
||||
})
|
||||
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<!-- 基础信息弹出框 -->
|
||||
<el-dialog :model-value="dialogVisible" :title="dialogTitle" v-bind="dialogMiddle" @close="close" >
|
||||
<div>
|
||||
<el-form :model="formContent" ref='dialogFormRef'>
|
||||
<el-tree
|
||||
:data="functionList"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
show-checkbox
|
||||
:default-checked-keys="checkedKeysRef"
|
||||
ref="treeRef"
|
||||
>
|
||||
</el-tree>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="close()">取消</el-button>
|
||||
<el-button type="primary" @click="save()">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import{ ElMessage, ElTree, type FormInstance,type FormItemRule } from 'element-plus'
|
||||
import type { ProTableInstance } from '@/components/ProTable/interface'
|
||||
import { ref,computed, type Ref, nextTick } from 'vue'
|
||||
import { Role } from '@/api/role/interface'
|
||||
import {dialogMiddle,dialogSmall} from '@/utils/elementBind'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import { type Function } from '@/api/function/interface'
|
||||
import {getRoleFunction,assignFunction} from '@/api/role/role'
|
||||
|
||||
// 保存数据
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
const functionList = ref<Function.ResFunction[]>([])
|
||||
// 定义一个 ref 来存储已选中的 keys
|
||||
const checkedKeysRef = ref<string[]>([]);
|
||||
// 树形节点配置
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
};
|
||||
|
||||
// 定义弹出组件元信息
|
||||
const dialogFormRef = ref()
|
||||
const dialogTitle = ref('授权资源')
|
||||
const { dialogVisible, formContent } = useMetaInfo()
|
||||
|
||||
function useMetaInfo() {
|
||||
const dialogVisible = ref(false)
|
||||
|
||||
const formContent = ref<Role.RoleBO>({
|
||||
id: '', //角色类型ID
|
||||
name: '', //角色类型名称
|
||||
code: '', //角色代码
|
||||
type: 2, //角色类型
|
||||
remark:'', //角色描述
|
||||
state:1,
|
||||
})
|
||||
return { dialogVisible, formContent }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 清空formContent
|
||||
const resetFormContent = () => {
|
||||
formContent.value = {
|
||||
id: '', //角色类型ID
|
||||
name: '', //角色类型名称
|
||||
code: '', //角色代码
|
||||
type: 2, //角色类型
|
||||
remark:'', //角色描述
|
||||
state:1,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 关闭弹窗
|
||||
const close = () => {
|
||||
dialogVisible.value = false
|
||||
// 清空dialogForm中的值
|
||||
resetFormContent()
|
||||
// 重置表单
|
||||
dialogFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 保存数据
|
||||
const save = () => {
|
||||
try {
|
||||
dialogFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (formContent.value.id) {
|
||||
// 获取勾选的节点 ID
|
||||
const checkedKeys = treeRef.value?.getCheckedKeys() || [];
|
||||
console.log('获取勾选的节点 ID',checkedKeys);
|
||||
// 将 checkedKeys 转换为字符串数组
|
||||
const checkedKeysAsString: string[] = checkedKeys.map(key => String(key));
|
||||
// 假设 RoleFunctionId 是一个对象,且需要 id 属性
|
||||
const roleFunctionIdObject: Role.RoleFunctionId = {
|
||||
id: checkedKeysAsString
|
||||
};
|
||||
console.log('roleFunctionIdObject',roleFunctionIdObject);
|
||||
const result = await assignFunction(formContent.value,roleFunctionIdObject);
|
||||
if(result.code != 'A0000'){
|
||||
ElMessage.error({ message: result.message})
|
||||
}else{
|
||||
ElMessage.success({ message: `${dialogTitle.value}成功!` })
|
||||
}
|
||||
}
|
||||
close()
|
||||
// 刷新表格
|
||||
await props.refreshTable!()
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.error('验证过程中出现错误', err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 打开弹窗,可能是新增,也可能是编辑
|
||||
const open = async (sign: string, data: Role.RoleBO, AllFunction: Function.ResFunction[]) => {
|
||||
// 重置树状结构
|
||||
functionList.value = []
|
||||
checkedKeysRef.value = []
|
||||
const result = await getRoleFunction(data);
|
||||
if (result.code === 'A0000') {
|
||||
// 将 result.data 转换为 Function.ResFunction[] 类型
|
||||
const roleFunctions = result.data as Function.ResFunction[];
|
||||
console.log('roleFunctions',roleFunctions)
|
||||
// 获取 AllFunction 中所有层级的 id
|
||||
const allIds = getAllIds(AllFunction);
|
||||
// 匹配 roleFunctions 中的 id 并设置 checkedKeys
|
||||
const checkedKeys = allIds.filter(id => roleFunctions.some(roleFunc => roleFunc.id === id));
|
||||
console.log('checkedKeys',checkedKeys)
|
||||
// 设置 functionList 和 checkedKeys
|
||||
functionList.value = AllFunction;
|
||||
checkedKeysRef.value = checkedKeys;
|
||||
|
||||
// nextTick(() => {
|
||||
// // 触发一次更新,确保表单中的数据被更新
|
||||
// dialogFormRef.value?.validate();
|
||||
// });
|
||||
} else {
|
||||
ElMessage.error({ message: result.message });
|
||||
}
|
||||
|
||||
dialogVisible.value = true;
|
||||
if (data.id) {
|
||||
formContent.value = { ...data };
|
||||
} else {
|
||||
resetFormContent();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const getAllIds = (functions: Function.ResFunction[]): string[] => {
|
||||
const ids: string[] = [];
|
||||
|
||||
const traverse = (func: Function.ResFunction) => {
|
||||
ids.push(func.id);
|
||||
if (func.children && func.children.length > 0) {
|
||||
func.children.forEach(child => traverse(child));
|
||||
}
|
||||
};
|
||||
|
||||
functions.forEach(func => traverse(func));
|
||||
|
||||
return ids;
|
||||
};
|
||||
|
||||
// 对外映射
|
||||
defineExpose({ open })
|
||||
const props = defineProps<{
|
||||
refreshTable: (() => Promise<void>) | undefined;
|
||||
}>()
|
||||
|
||||
</script>
|
||||
@@ -24,41 +24,27 @@
|
||||
</ProTable>
|
||||
</div>
|
||||
<RolePopup :refresh-table='proTable?.getTableList' ref='rolePopup' />
|
||||
|
||||
<RoleResourcePopup :refresh-table='proTable?.getTableList' ref='roleResourcePopup' />
|
||||
</template>
|
||||
|
||||
<script setup lang='tsx' name='useRole'>
|
||||
import { type Role } from '@/api/role/interface'
|
||||
import { type Function } from '@/api/function/interface'
|
||||
import { useHandleData } from '@/hooks/useHandleData'
|
||||
import ProTable from '@/components/ProTable/index.vue'
|
||||
import type{ ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
|
||||
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import {getRoleList,deleteRole} from '@/api/role/role'
|
||||
import {getRoleList,deleteRole,getFunctionList} from '@/api/role/role'
|
||||
import RolePopup from './components/rolePopup.vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
|
||||
const { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData } = useCount()
|
||||
|
||||
function useCount() {
|
||||
const rolePopupVisible = ref(false)
|
||||
const permissionUnitVisible = ref(false)
|
||||
const rolePopupTitle = ref()
|
||||
const permissionUnitTitle = ref()
|
||||
const rolePopupData = ref<Role.RoleBO>({} as Role.RoleBO)
|
||||
const permissionUnitData = ref<Role.RoleBO>({} as Role.RoleBO)
|
||||
// const permissionUnitData = ref<Role.Permission[]>([])
|
||||
return { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData }
|
||||
}
|
||||
|
||||
const dictStore = useDictStore()
|
||||
let openType = ''
|
||||
import RoleResourcePopup from './components/roleResourcePopup.vue'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import {useDictStore} from '@/stores/modules/dict'
|
||||
const rolePopup = ref()
|
||||
|
||||
const roleResourcePopup = ref()
|
||||
const dictStore = useDictStore()
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
|
||||
const functionList = ref<Function.ResFunction[]>([])
|
||||
// 如果你想在请求之前对当前请求参数做一些操作,可以自定义如下函数:params 为当前所有的请求参数(包括分页),最后返回请求列表接口
|
||||
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
|
||||
const getTableList = (params: any) => {
|
||||
@@ -69,6 +55,14 @@ const getTableList = (params: any) => {
|
||||
return getRoleList(newParams)
|
||||
}
|
||||
|
||||
|
||||
// 初始化时获取角色列表
|
||||
onMounted(async () => {
|
||||
const response = await getFunctionList()
|
||||
functionList.value = response.data as unknown as Function.ResFunction[]
|
||||
//console.log(functionList.value)
|
||||
})
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<Role.RoleBO>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
@@ -94,14 +88,21 @@ const columns = reactive<ColumnProps<Role.RoleBO>[]>([
|
||||
prop: 'state',
|
||||
label: '状态',
|
||||
minWidth: 100,
|
||||
enum: dictStore.getDictData('state'),
|
||||
fieldNames: { label: 'label', value: 'code' },
|
||||
render: scope => {
|
||||
return (
|
||||
<el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '删除'} </el-tag>
|
||||
)
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 },
|
||||
])
|
||||
|
||||
// 删除角色信息
|
||||
const deleteAccount = async (params: Role.RoleBO) => {
|
||||
if (params.id) {
|
||||
await useHandleData(deleteRole, { id:[params.id] }, '删除所选角色信息')
|
||||
await useHandleData(deleteRole, [params.id], '删除所选角色信息')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
@@ -109,7 +110,7 @@ const deleteAccount = async (params: Role.RoleBO) => {
|
||||
|
||||
// 批量删除角色信息
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deleteRole, { id }, '删除所选角色信息')
|
||||
await useHandleData(deleteRole, id , '删除所选角色信息')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
@@ -117,7 +118,11 @@ const batchDelete = async (id: string[]) => {
|
||||
|
||||
// 打开 drawer(新增、查看、编辑)
|
||||
const openDrawer = (titleType: string, row: Partial<Role.RoleBO> = {}) => {
|
||||
if(titleType==='设置权限'){
|
||||
roleResourcePopup.value?.open(titleType, row,functionList.value)
|
||||
}else{
|
||||
rolePopup.value?.open(titleType, row)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -133,7 +133,7 @@
|
||||
return (<el-tag type={tagType}>{tagText}</el-tag>);
|
||||
}
|
||||
},
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
|
||||
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 },
|
||||
])
|
||||
|
||||
|
||||
@@ -195,7 +195,7 @@ const openDialog = (titleType: string, row: Partial<User.ResUser> = {}) => {
|
||||
|
||||
// 批量删除用户信息
|
||||
const batchDelete = async (id: string[]) => {
|
||||
await useHandleData(deleteUser, { id }, '删除所选用户信息')
|
||||
await useHandleData(deleteUser, id , '删除所选用户信息')
|
||||
proTable.value?.clearSelection()
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
@@ -136,8 +136,8 @@
|
||||
|
||||
<el-row :gutter="24" >
|
||||
<el-col :span="8">
|
||||
<el-form-item label='是否加密' prop='encryption'>
|
||||
<el-select v-model="formContent.encryption" clearable placeholder="请选择是否加密" @change="handleEncryptionChange">
|
||||
<el-form-item label='是否加密' prop='encryptionFlag'>
|
||||
<el-select v-model="formContent.encryptionFlag" clearable placeholder="请选择是否加密" @change="handleEncryptionChange">
|
||||
<el-option label="是" :value="1"></el-option>
|
||||
<el-option label="否" :value="0"></el-option>
|
||||
</el-select>
|
||||
@@ -267,7 +267,7 @@ import { el } from 'element-plus/es/locale'
|
||||
protocol: '',
|
||||
ip: '',
|
||||
port: 0,
|
||||
encryption: 1,
|
||||
encryptionFlag: 1,
|
||||
reCheckNum:0,
|
||||
state: 1,
|
||||
})
|
||||
@@ -293,7 +293,7 @@ import { el } from 'element-plus/es/locale'
|
||||
protocol: '',
|
||||
ip: '',
|
||||
port: 0,
|
||||
encryption: 1,
|
||||
encryptionFlag: 1,
|
||||
reCheckNum:0,
|
||||
state: 1,
|
||||
}
|
||||
@@ -326,7 +326,7 @@ import { el } from 'element-plus/es/locale'
|
||||
port:[{ required: true, message: '端口号必填!', trigger: 'blur' },
|
||||
{ pattern: /^\d+$/, message: '端口号格式错误', trigger: 'blur' }],
|
||||
manufacturer: [{ required: true, message: '生产厂家必选!', trigger: 'change' }],
|
||||
encryption: [{ required: true, message: '是否加密必选!', trigger: 'change' }],
|
||||
encryptionFlag: [{ required: true, message: '是否加密必选!', trigger: 'change' }],
|
||||
protocol: [{ required: true, message: '通讯协议必选!', trigger: 'change' }],
|
||||
})
|
||||
|
||||
@@ -381,7 +381,7 @@ import { el } from 'element-plus/es/locale'
|
||||
dialogVisible.value = true
|
||||
|
||||
|
||||
if(data.encryption === 1){
|
||||
if(data.encryptionFlag === 1){
|
||||
handleEncryptionChange(1)
|
||||
}else{
|
||||
handleEncryptionChange(0)
|
||||
|
||||
@@ -169,5 +169,7 @@ const importFile=async ()=>{
|
||||
}
|
||||
deviceImportExcel.value?.acceptParams(params)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
// 删除字典类型
|
||||
const handleDelete = async (params: Dict.ResDictTree) => {
|
||||
console.log(params)
|
||||
//console.log(params)
|
||||
await useHandleData(deleteDictTree, params, `删除【${params.name}】树形字典类型`)
|
||||
proTable.value?.getTableList()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user