Compare commits
18 Commits
master
...
power_mast
| Author | SHA1 | Date |
|---|---|---|
herenshan112
|
15c7fd2421 | 2 days ago |
|
herenshan112
|
019fe5b30d | 2 days ago |
|
herenshan112
|
c9f5619730 | 4 days ago |
|
herenshan112
|
78064dca8e | 4 days ago |
|
herenshan112
|
c7c0489187 | 5 days ago |
|
herenshan112
|
b83b554e7e | 5 days ago |
|
herenshan112
|
07d089ec25 | 1 week ago |
|
herenshan112
|
b7e53ff199 | 1 week ago |
|
herenshan112
|
ba70244b96 | 2 weeks ago |
|
herenshan112
|
170b9d6692 | 2 weeks ago |
|
herenshan112
|
57d391670e | 3 weeks ago |
|
herenshan112
|
7a2b48374b | 3 weeks ago |
|
herenshan112
|
f347cda044 | 3 weeks ago |
|
herenshan112
|
7ec5ad5e2d | 3 weeks ago |
|
herenshan112
|
401762d554 | 3 weeks ago |
|
herenshan112
|
ef4f7e263b | 3 weeks ago |
|
herenshan112
|
e565863d14 | 3 weeks ago |
|
herenshan112
|
a9e4d032eb | 1 month ago |
60 changed files with 10302 additions and 1313 deletions
@ -0,0 +1,61 @@ |
|||
import request from "@/utils/request"; |
|||
import { getSystemPower } from "./types"; |
|||
|
|||
/** |
|||
* 获取平台授权项目 |
|||
*/ |
|||
export function appPowerUnit(data: getSystemPower){ |
|||
return request({ |
|||
url: '/systemapi/authorize/appPowerUnit', |
|||
method: 'post', |
|||
data:data |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-28 10:24:09 |
|||
@ 功能: 授权行政组织书 |
|||
*/ |
|||
export function authorizeOrgTree(data?: getSystemPower){ |
|||
return request({ |
|||
url: '/systemapi/hr/authorizeOrgTree', |
|||
method: 'post', |
|||
data:data |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-28 10:24:09 |
|||
@ 功能: 根据权限获取数据 |
|||
*/ |
|||
export function authorizePeopleList(data?: getSystemPower){ |
|||
return request({ |
|||
url: '/systemapi/hr/authorizePeopleList', |
|||
method: 'post', |
|||
data:data |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-28 10:24:09 |
|||
@ 功能: 新增人员 |
|||
*/ |
|||
export function addNewPeople(data?: getSystemPower){ |
|||
return request({ |
|||
url: '/systemapi/hr/addNewPeople', |
|||
method: 'post', |
|||
data:data |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-28 10:24:09 |
|||
@ 功能: 编辑自己登陆密码 |
|||
*/ |
|||
export function editMyPwd(data?: getSystemPower){ |
|||
return request({ |
|||
url: '/systemapi/hr/editMyPwd', |
|||
method: 'post', |
|||
data:data |
|||
}); |
|||
} |
|||
|
After Width: | Height: | Size: 873 B |
|
After Width: | Height: | Size: 670 B |
@ -1,9 +1,14 @@ |
|||
import type { App } from 'vue'; |
|||
|
|||
import { hasPerm } from './permission'; |
|||
import { hasButton,hasApp,hasAppGroup,hasGroupApp,hasCustomAppGroup } from './permission/button'; |
|||
|
|||
// 全局注册 directive
|
|||
export function setupDirective(app: App<Element>) { |
|||
// 使 v-hasPerm 在所有组件中都可用
|
|||
app.directive('hasPerm', hasPerm); |
|||
app.directive('hasButton', hasButton); |
|||
app.directive('hasApp', hasApp); |
|||
app.directive('hasAppGroup', hasAppGroup); |
|||
app.directive('hasGroupApp', hasGroupApp); |
|||
} |
|||
|
|||
@ -0,0 +1,186 @@ |
|||
import { Directive, DirectiveBinding } from 'vue'; |
|||
import { useUserStore } from "@/store/modules/user"; |
|||
|
|||
/** |
|||
* 按钮权限 |
|||
*/ |
|||
export const hasButton: Directive = { |
|||
mounted(el: HTMLElement, binding: DirectiveBinding) { |
|||
const userStore = useUserStore(); |
|||
const { value } = binding; |
|||
// console.log("按钮权限",el,"-->",binding,"-->",value,"-->",userStore.myPower.menuButIdAry,"-->",userStore.myPower);
|
|||
|
|||
if (value) { |
|||
const requiredPerms = value; // DOM绑定需要的按钮权限标识
|
|||
const hasPerm = userStore.myPower.menuButIdAry.some((perm: any) => { |
|||
return requiredPerms.includes(perm); |
|||
}); |
|||
if (!hasPerm) { |
|||
el.parentNode?.removeChild(el); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* app权限 |
|||
*/ |
|||
export const hasApp: Directive = { |
|||
mounted(el: HTMLElement, binding: DirectiveBinding) { |
|||
const userStore = useUserStore(); |
|||
const { value } = binding; |
|||
// console.log("app权限",el,"-->",binding,"-->",value,"-->",userStore.myPower.appKeyAry,"-->",userStore.myPower);
|
|||
// console.log("我的App--->",userStore.myPower)
|
|||
if (value) { |
|||
const requiredPerms = value; // DOM绑定需要的app权限标识
|
|||
const hasPerm = userStore.myPower.appKeyAry.some((perm: any) => { |
|||
return requiredPerms.includes(perm); |
|||
}); |
|||
if (!hasPerm) { |
|||
el.parentNode?.removeChild(el); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
export const hasAppList = (signCode:string) => { |
|||
const userStore = useUserStore(); |
|||
return userStore.myPower.appKeyAry.some((perm: any) => { |
|||
return perm.includes(signCode); |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-11 16:30:08 |
|||
@ 功能: 自定义App分组指令授权 |
|||
*/ |
|||
export const hasAppGroup: Directive = { |
|||
mounted(el: HTMLElement, binding: DirectiveBinding) { |
|||
const userStore = useUserStore(); |
|||
const { value } = binding; |
|||
// console.log("app权限",el,"-->",binding,"-->",value,"-->",userStore.myPower.appGroupPower,"-->",userStore.myPower);
|
|||
// console.log("我的App--->",userStore.myPower)
|
|||
if (value) { |
|||
const requiredPerms = value; // DOM绑定需要的app权限标识
|
|||
const hasPerm = userStore.myPower.appGroupPower.some((perm: any) => { |
|||
return requiredPerms.includes(perm); |
|||
}); |
|||
if (!hasPerm) { |
|||
el.parentNode?.removeChild(el); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-11 16:39:01 |
|||
@ 功能: 判断应用级权限 |
|||
*/ |
|||
export const appHasPower = (signCode:string,buttonKey:string) => { |
|||
const userStore = useUserStore(); |
|||
return userStore.myPower.appSystemPower.some((perm: any) => { |
|||
|
|||
// console.log("判断应用级权限--->",buttonKey)
|
|||
if(perm.AppId == signCode){ |
|||
// console.log("判断应用级权限-1111-->",perm.AppId,buttonKey)
|
|||
// console.log("判断应用级权限-222-->",perm.butPower && Array.isArray(perm.butPower))
|
|||
if(perm.butPower && Array.isArray(perm.butPower)){ |
|||
// console.log("判断应用级权限--->",perm.AppId,buttonKey)
|
|||
return perm.butPower.includes(buttonKey) |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-12 09:33:21 |
|||
@ 功能: 判断表单级权限 |
|||
*/ |
|||
export const formHasPower = (signCode:string,tormCode:string,buttonKey:string,classType:number) => { |
|||
const userStore = useUserStore(); |
|||
// console.log("判断表单级权限-1111-->",signCode,userStore.myPower.appSystemPower)
|
|||
if(userStore.myPower.appSystemPower && Array.isArray(userStore.myPower.appSystemPower)){ |
|||
|
|||
return userStore.myPower.appSystemPower.some((perm: any) => { |
|||
if(perm.AppId == signCode){ |
|||
// console.log("判断表单级权限-1112-->",signCode)
|
|||
// console.log("判断表单级权限-1113-->",tormCode)
|
|||
// console.log("判断表单级权限-1114-->",perm.formPower)
|
|||
// console.log("判断表单级权限-1115-->",buttonKey)
|
|||
if(perm.formPower && Array.isArray(perm.formPower)){ |
|||
return perm.formPower.some((formPerm: any) => { |
|||
switch(classType){ |
|||
case 1: |
|||
return formPerm.AppId == tormCode && formPerm.tablePower.includes(buttonKey); |
|||
break; |
|||
case 2: |
|||
return formPerm.AppId == tormCode && formPerm.PagePower.includes(buttonKey); |
|||
break; |
|||
default: |
|||
return formPerm.AppId == tormCode && formPerm.listPower.includes(buttonKey); |
|||
break; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
}); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-12 13:42:40 |
|||
@ 功能: 判断自定义App菜单 |
|||
*/ |
|||
export const hasCustomAppMenu = (appKey:string,menuKey:string) => { |
|||
// console.log("判断自定义App菜单--->",appKey,menuKey)
|
|||
const userStore = useUserStore(); |
|||
if(userStore.myPower.appSystemPower && Array.isArray(userStore.myPower.appSystemPower)){ |
|||
return userStore.myPower.appSystemPower.some((perm: any) => { |
|||
if(perm.AppId == appKey){ |
|||
if(perm.formTrue && Array.isArray(perm.formTrue)){ |
|||
return perm.formTrue.includes(menuKey); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
//自定义App分组
|
|||
export const hasGroupApp: Directive = { |
|||
mounted(el: HTMLElement, binding: DirectiveBinding) { |
|||
const userStore = useUserStore(); |
|||
const { value } = binding; |
|||
// console.log("app权限appGroupMenu",el,"-->",binding,"-->",value,"-->",userStore.myPower.appGroupMenu,"-->",userStore.myPower);
|
|||
// console.log("我的App--->",userStore.myPower)
|
|||
if (value) { |
|||
const requiredPerms = value; // DOM绑定需要的app权限标识
|
|||
const hasPerm = userStore.myPower.appGroupMenu.some((perm: any) => { |
|||
// console.log("我的App-判断值-->",requiredPerms.includes(perm))
|
|||
return requiredPerms.includes(perm); |
|||
}); |
|||
if (!hasPerm) { |
|||
el.parentNode?.removeChild(el); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
export const hasCustomAppGroup = (appKey:string) => { |
|||
|
|||
const userStore = useUserStore(); |
|||
if(userStore.myPower.appGroupMenu && Array.isArray(userStore.myPower.appGroupMenu)){ |
|||
return userStore.myPower.appGroupMenu.some((perm: any) => { |
|||
// console.log("--->",perm,appKey)
|
|||
if (perm == appKey){ |
|||
return true |
|||
} |
|||
}); |
|||
} |
|||
return false; |
|||
} |
|||
@ -0,0 +1,307 @@ |
|||
/** |
|||
* 数字 |
|||
*/ |
|||
const REG_NUMBER:string = ".*\\d+.*"; |
|||
/** |
|||
* 小写字母 |
|||
*/ |
|||
const REG_UPPERCASE:string = ".*[A-Z]+.*"; |
|||
/** |
|||
* 大写字母 |
|||
*/ |
|||
const REG_LOWERCASE:string = ".*[a-z]+.*"; |
|||
/** |
|||
* 特殊符号(~!@#$%^&*()_+|<>,.?/:;'[]{}\) |
|||
*/ |
|||
const REG_SYMBOL:string = ".*[~!@#$%^&*()_+|<>,.?/:;'\\[\\]{}\"]+.*"; |
|||
/** |
|||
* 键盘字符表(小写) |
|||
* 非shift键盘字符表 |
|||
*/ |
|||
const CHAR_TABLE1:string[][] = [ |
|||
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '\0'], |
|||
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'], |
|||
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', '\0', '\0'], |
|||
['z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', '\0', '\0', '\0']]; |
|||
/** |
|||
* shift键盘的字符表 |
|||
*/ |
|||
const CHAR_TABLE2:string[][] = [ |
|||
['!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '\0'], |
|||
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '{', '}', '|'], |
|||
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ':', '"', '\0', '\0'], |
|||
['z', 'x', 'c', 'v', 'b', 'n', 'm', '<', '>', '?', '\0', '\0', '\0']]; |
|||
|
|||
/** |
|||
* 校验密码是否符合条件 |
|||
* @param password 密码 |
|||
* @param username 用户名 |
|||
*/ |
|||
export const checkPasswordRule = (password:string,username:string) => { |
|||
if (password === '' || password.length < 8 || password.length > 32) { |
|||
// console.log("长度小于8，或大于32");
|
|||
return "密码长度应大于8小于32"; |
|||
} if (password.indexOf(username) !== -1) { |
|||
// console.log("包含用户名");
|
|||
return "请勿包含用户名"; |
|||
} |
|||
if (isContinuousChar(password)) { |
|||
// console.log("包含3个及以上相同或字典连续字符");
|
|||
return "请勿包含3个及以上相同或连续的字符"; |
|||
} |
|||
if (isKeyBoardContinuousChar(password)) { |
|||
// console.log("包含3个及以上键盘连续字符");
|
|||
return "请勿包含3个及以上键盘连续字符"; |
|||
} |
|||
let i:number = 0; |
|||
if (password.match(REG_NUMBER)) i++; |
|||
if (password.match(REG_LOWERCASE)) i++; |
|||
if (password.match(REG_UPPERCASE)) i++; |
|||
if (password.match(REG_SYMBOL)) i++; |
|||
if (i < 2) { |
|||
// console.log(("数字、小写字母、大写字母、特殊字符，至少包含两种"));
|
|||
return "数字、小写字母、大写字母、特殊字符，至少包含两种"; |
|||
} |
|||
// console.log(i);
|
|||
return "校验通过"; |
|||
} |
|||
|
|||
|
|||
|
|||
/** |
|||
* 是否包含3个及以上相同或字典连续字符 |
|||
*/ |
|||
const isContinuousChar = (password:string) => { |
|||
let chars: string[] = password.split('') |
|||
let charCode: number[] = []; |
|||
for (let i = 0; i < chars.length - 2; i++) { |
|||
charCode[i] = chars[i].charCodeAt(0) |
|||
} |
|||
for (let i = 0; i < charCode.length - 2; i++) { |
|||
let n1 = charCode[i]; |
|||
let n2 = charCode[i + 1]; |
|||
let n3 = charCode[i + 2]; |
|||
// 判断重复字符
|
|||
if (n1 == n2 && n1 == n3) { |
|||
return true; |
|||
} |
|||
// 判断连续字符： 正序 + 倒序
|
|||
if ((n1 + 1 == n2 && n1 + 2 == n3) || (n1 - 1 == n2 && n1 - 2 == n3)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
/** |
|||
* 是否包含3个及以上键盘连续字符 |
|||
* @param password 待匹配的字符串 |
|||
*/ |
|||
const isKeyBoardContinuousChar = (password:string) => { |
|||
if (password === '') { |
|||
return false; |
|||
} |
|||
//考虑大小写，都转换成小写字母
|
|||
let lpStrChars: string[] = password.toLowerCase().split('') |
|||
// 获取字符串长度
|
|||
let nStrLen: number = lpStrChars.length; |
|||
// 定义位置数组：row - 行，col - column 列
|
|||
const pRowCharPos:number[] = new Array(nStrLen).fill('') |
|||
const pColCharPos: number[] = new Array(nStrLen).fill('') |
|||
for (let i = 0; i < nStrLen; i++) { |
|||
let chLower: string = lpStrChars[i]; |
|||
pColCharPos[i] = -1; |
|||
// 检索在表1中的位置，构建位置数组
|
|||
for (let nRowTable1Idx = 0; nRowTable1Idx < 4; nRowTable1Idx++) { |
|||
for (let nColTable1Idx = 0; nColTable1Idx < 13; nColTable1Idx++) { |
|||
if (chLower == CHAR_TABLE1[nRowTable1Idx][nColTable1Idx]) { |
|||
pRowCharPos[i] = nRowTable1Idx; |
|||
pColCharPos[i] = nColTable1Idx; |
|||
} |
|||
} |
|||
} |
|||
// 在表1中没找到，到表二中去找，找到则continue
|
|||
if (pColCharPos[i] >= 0) { |
|||
continue; |
|||
} |
|||
// 检索在表2中的位置，构建位置数组
|
|||
for (let nRowTable2Idx = 0; nRowTable2Idx < 4; nRowTable2Idx++) { |
|||
for (let nColTable2Idx = 0; nColTable2Idx < 13; nColTable2Idx++) { |
|||
if (chLower == CHAR_TABLE2[nRowTable2Idx][nColTable2Idx]) { |
|||
pRowCharPos[i] = nRowTable2Idx; |
|||
pColCharPos[i] = nColTable2Idx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
// 匹配坐标连线
|
|||
for (let j = 1; j <= nStrLen - 2; j++) { |
|||
//同一行
|
|||
if (pRowCharPos[j - 1] == pRowCharPos[j] && pRowCharPos[j] == pRowCharPos[j + 1]) { |
|||
// 键盘行正向连续（asd）或者键盘行反向连续（dsa）
|
|||
if ((pColCharPos[j - 1] + 1 == pColCharPos[j] && pColCharPos[j] + 1 == pColCharPos[j + 1]) || |
|||
(pColCharPos[j + 1] + 1 == pColCharPos[j] && pColCharPos[j] + 1 == pColCharPos[j - 1])) { |
|||
return true; |
|||
} |
|||
} |
|||
//同一列
|
|||
if (pColCharPos[j - 1] == pColCharPos[j] && pColCharPos[j] == pColCharPos[j + 1]) { |
|||
//键盘列连续（qaz）或者键盘列反向连续（zaq）
|
|||
if ((pRowCharPos[j - 1] + 1 == pRowCharPos[j] && pRowCharPos[j] + 1 == pRowCharPos[j + 1]) || |
|||
(pRowCharPos[j - 1] - 1 == pRowCharPos[j] && pRowCharPos[j] - 1 == pRowCharPos[j + 1])) { |
|||
return true; |
|||
} |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 密码强度校验 |
|||
*/ |
|||
/** |
|||
* 长度 |
|||
* @param str |
|||
*/ |
|||
const length = (str:string) => { |
|||
if(str.length<5){ |
|||
return 5; |
|||
}else if(str.length<8){ |
|||
return 10; |
|||
}else{ |
|||
return 25; |
|||
} |
|||
} |
|||
/** |
|||
* 字母 |
|||
* @param str |
|||
*/ |
|||
const letters = (str: string) => { |
|||
let count1=0,count2=0; |
|||
for(let i=0;i<str.length;i++){ |
|||
if(str.charAt(i)>='a'&&str.charAt(i)<='z'){ |
|||
count1++; |
|||
} |
|||
if(str.charAt(i)>='A'&&str.charAt(i)<='Z'){ |
|||
count2++; |
|||
} |
|||
} |
|||
if(count1==0 && count2==0){ |
|||
return 0; |
|||
} |
|||
if(count1!=0 && count2!=0){ |
|||
return 20; |
|||
} |
|||
return 10; |
|||
} |
|||
|
|||
/** |
|||
* 数字 |
|||
* @param str |
|||
*/ |
|||
const numbers = (str: string) => { |
|||
let count=0; |
|||
for(let i=0;i<str.length;i++){ |
|||
if(str.charAt(i)>='0'&&str.charAt(i)<='9'){ |
|||
count++; |
|||
} |
|||
} |
|||
if(count==0){ |
|||
return 0; |
|||
} |
|||
if(count==1){ |
|||
return 10; |
|||
} |
|||
return 20; |
|||
} |
|||
/** |
|||
* 符号 |
|||
* @param str |
|||
*/ |
|||
const symbols = (str: string) => { |
|||
let count=0; |
|||
for(let i=0;i<str.length;i++){ |
|||
if(str.charCodeAt(i)>=0x21 && str.charCodeAt(i)<=0x2F || |
|||
str.charCodeAt(i)>=0x3A && str.charCodeAt(i)<=0x40 || |
|||
str.charCodeAt(i)>=0x5B && str.charCodeAt(i)<=0x60 || |
|||
str.charCodeAt(i)>=0x7B && str.charCodeAt(i)<=0x7E ){ |
|||
count++; |
|||
} |
|||
} |
|||
if(count==0){ |
|||
return 0; |
|||
} |
|||
if(count==1){ |
|||
return 10; |
|||
} |
|||
return 25; |
|||
} |
|||
/** |
|||
* 得分机制 |
|||
* @param str |
|||
*/ |
|||
const rewards = (str: string) => { |
|||
let letter=letters(str);//字母
|
|||
let number=numbers(str);//数字
|
|||
let symbol=symbols(str);//符号
|
|||
if(letter>0 && number>0 && symbol==0){//字母和数字
|
|||
return 2; |
|||
} |
|||
if(letter==10 && number>0 && symbol>0){//字母、数字和符号
|
|||
return 3; |
|||
} |
|||
if(letter==20 && number>0 && symbol>0){//大小写字母、数字和符号
|
|||
return 5; |
|||
} |
|||
return 0; |
|||
} |
|||
/** |
|||
* 最终评分 |
|||
* @param str |
|||
*/ |
|||
export const level = (str: string) => { |
|||
let lengths=length(str);//长度
|
|||
let letter=letters(str);//字母
|
|||
let number=numbers(str);//数字
|
|||
let symbol=symbols(str);//符号
|
|||
let reward=rewards(str);//奖励
|
|||
let sum=lengths+letter+number+symbol+reward; |
|||
console.log(sum); |
|||
if(sum>=80){ |
|||
return "非常强";//非常安全
|
|||
}else if(sum>=60){ |
|||
return "强";//非常强
|
|||
}else if(sum>=40){ |
|||
return "一般";//一般
|
|||
}else if(sum>=25){ |
|||
return "弱";//弱
|
|||
}else{ |
|||
return "非常弱";//非常弱
|
|||
} |
|||
} |
|||
|
|||
export const checkPwdRule = (password:string) => { |
|||
if (password === '' || password.length < 8 || password.length > 32) { |
|||
// console.log("长度小于8，或大于32");
|
|||
return "密码长度应大于8小于32"; |
|||
} |
|||
if (isContinuousChar(password)) { |
|||
// console.log("包含3个及以上相同或字典连续字符");
|
|||
return "请勿包含3个及以上相同或连续的字符"; |
|||
} |
|||
if (isKeyBoardContinuousChar(password)) { |
|||
// console.log("包含3个及以上键盘连续字符");
|
|||
return "请勿包含3个及以上键盘连续字符"; |
|||
} |
|||
let i:number = 0; |
|||
if (password.match(REG_NUMBER)) i++; |
|||
if (password.match(REG_LOWERCASE)) i++; |
|||
if (password.match(REG_UPPERCASE)) i++; |
|||
if (password.match(REG_SYMBOL)) i++; |
|||
if (i < 2) { |
|||
// console.log(("数字、小写字母、大写字母、特殊字符，至少包含两种"));
|
|||
return "数字、小写字母、大写字母、特殊字符，至少包含两种"; |
|||
} |
|||
// console.log(i);
|
|||
return "校验通过"; |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,200 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-28 10:11:16 |
|||
@ 备注: 人员列表 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { emptypeOptions } from "@/api/hr/people/datacont"; |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { authorizeOrgTree } from '@/api/system/roleapi/power' |
|||
import { |
|||
teamcontlist |
|||
} from "@/api/hr/org/index"; |
|||
|
|||
const orgTreeRef = ref(ElTree); //行政组织树 |
|||
const orgTreeLoading = ref(false); //加载行政组织树 |
|||
const orgTreeList = ref<orgInfo[]>(); //行政组织树数据 |
|||
const tiemList = ref([]); //班组列表 |
|||
const orgTreeProps = { |
|||
children: "child", |
|||
label: "name", |
|||
}; //行政组织树对照值 |
|||
|
|||
const searchInfo = reactive({ |
|||
orgId:"", |
|||
name:"", |
|||
employ:"", |
|||
team:"", |
|||
joinTime:"" |
|||
}) |
|||
|
|||
const getOrgPowerTrue = () => { |
|||
orgTreeLoading.value = true |
|||
let sendInfo = { |
|||
menuId:"50" |
|||
} |
|||
authorizeOrgTree(sendInfo).then((res) => { |
|||
console.log(res) |
|||
orgTreeList.value = res.data |
|||
orgTreeLoading.value = false |
|||
}).finally(() => { |
|||
orgTreeLoading.value = false |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-01-14 10:27:12 |
|||
@ 功能: 获取班组列表 |
|||
*/ |
|||
const gainTimeList = () => { |
|||
let searchMap = { |
|||
page: 1, |
|||
pagesize: 2000, |
|||
name: "", |
|||
}; |
|||
teamcontlist(searchMap).then((data) => { |
|||
tiemList.value = data.data.list; |
|||
}); |
|||
}; |
|||
const resetChecked = () => { |
|||
orgTreeRef.value.setCheckedKeys([]) |
|||
} |
|||
/** |
|||
* 选中行政组织树节点 |
|||
*/ |
|||
const handleOrgTreeNodeClick = (data: orgInfo) => { |
|||
// console.log(data) |
|||
searchInfo.orgId = data.id; |
|||
// getArchivesPage(); |
|||
}; |
|||
onMounted(() => { |
|||
getOrgPowerTrue(); |
|||
gainTimeList(); |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div class="app-content"> |
|||
<el-container> |
|||
<el-aside width="300px" style="padding: 10px 10px"> |
|||
<el-card :body-style="{ height: 'calc(100vh - 190px)', padding: '0px 5px' }"> |
|||
<el-button |
|||
type="primary" |
|||
style="width: 100%; margin: 10px 0" |
|||
@click="resetChecked" |
|||
> |
|||
查看全部 |
|||
</el-button> |
|||
<el-tree-v2 |
|||
style="max-width: 100%" |
|||
:data="orgTreeList" |
|||
:props="orgTreeProps" |
|||
v-loading="orgTreeLoading" |
|||
node-key="id" |
|||
:expand-on-click-node="false" |
|||
:check-on-click-node="true" |
|||
:check-strictly="true" |
|||
:default-expand-all="false" |
|||
:height="1200" |
|||
@node-click="handleOrgTreeNodeClick" |
|||
/> |
|||
</el-card> |
|||
</el-aside> |
|||
|
|||
|
|||
|
|||
<el-main style="padding: 10px 10px 0 0"> |
|||
<el-card :body-style="{ height: 'calc(100vh - 190px)', padding: '0px 15px' }"> |
|||
<el-form ref="searchForm" :model="searchInfo" :inline="true" style="width: 100%; margin-top: 10px;"> |
|||
<el-form-item label="工号 / 姓名 / 手机号" prop="keywords"> |
|||
<el-input |
|||
v-model="searchInfo.name" |
|||
placeholder="请输入工号/姓名/手机号" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="用工关系" prop="number"> |
|||
<el-select |
|||
v-model="searchInfo.employ" |
|||
multiple |
|||
clearable |
|||
collapse-tags |
|||
placeholder="用工关系" |
|||
style="width: 200px" |
|||
> |
|||
<el-option |
|||
v-for="item in emptypeOptions" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="班组" prop="number"> |
|||
<el-select |
|||
v-model="searchInfo.team" |
|||
clearable |
|||
collapse-tags |
|||
placeholder="员工班组" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in tiemList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="入职日期" prop="number"> |
|||
<el-date-picker |
|||
v-model="searchInfo.joinTime" |
|||
type="date" |
|||
placeholder="入职日期" |
|||
format="YYYY-MM-DD" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="" prop="number"> |
|||
<el-button type="primary" @click="getArchivesPage"> |
|||
<template #icon><i-ep-search /></template> |
|||
搜索 |
|||
</el-button> |
|||
<el-button @click="resetArcFormQuery"> |
|||
<template #icon><i-ep-refresh /></template> |
|||
重置 |
|||
</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="func-but"> |
|||
<el-button v-hasButton="[215437071358111744]" type="primary" @click="handleAddArchives"> |
|||
<template #icon><i-ep-plus /></template> |
|||
新增 |
|||
</el-button> |
|||
<el-button |
|||
v-hasPerm="['215437153071542272']" |
|||
plain |
|||
type="primary" |
|||
@click="openPiliangBox" |
|||
> |
|||
<el-icon><MessageBox /></el-icon> |
|||
批量导入数据 |
|||
</el-button> |
|||
</div> |
|||
</el-card> |
|||
</el-main> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app-content { |
|||
height: calc(100vh - 170px); |
|||
background-color: aqua; |
|||
|
|||
:deep .el-drawer__body { |
|||
padding: 0 10px; |
|||
} |
|||
} |
|||
.common-layout { |
|||
|
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,274 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-03 14:22:19 |
|||
@ 备注: 添加人员 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { addNewPeople } from "@/api/system/roleapi/power"; |
|||
import defaultImg from "@/assets/images/1.png"; |
|||
const props = defineProps({ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
orgTree: { |
|||
type: Array as PropType<orgInfo[]>, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/setupFile/uploads/oneFileUpload";//图片上传地址 |
|||
const emit = defineEmits(['update:show','updateInfo']) |
|||
const ubLockPage = computed(() => props.show) |
|||
const orgTreeList = computed(() => props.orgTree) //行政组织树数据 |
|||
const butLoading = ref(false) |
|||
const fileUploadIng = ref(false); |
|||
const systemMenuTreeProps = { |
|||
children: "child", |
|||
label: "name", |
|||
value:"id" |
|||
} //行政组织树对照值 |
|||
const formRef = ref<any>(); |
|||
const rules = ref<any>({ |
|||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], |
|||
code: [{ required: true, message: '请输入工号', trigger: 'blur' }], |
|||
orgId: [{ required: true, message: '请选择行政组织', trigger: 'change' }], |
|||
employment: [{ required: true, message: '请输入用工关系', trigger: 'blur' }], |
|||
mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }], |
|||
}); |
|||
const userInfo = ref({ |
|||
name: "", |
|||
code: "", |
|||
mobile: "", |
|||
nation: "", |
|||
sex: "1", |
|||
age: "", |
|||
oldName: "", |
|||
icon: defaultImg, |
|||
orgId:"", |
|||
employment:"", |
|||
address:"" |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-03 14:26:25 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const closeLock = () => { |
|||
emit('update:show', false) |
|||
emit('updateInfo') |
|||
userInfo.value.icon = defaultImg |
|||
butLoading.value = false |
|||
formRef.value.resetFields(); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-03 15:40:14 |
|||
@ 功能: 提交数据 |
|||
*/ |
|||
const onSubmit = () => { |
|||
butLoading.value = true |
|||
formRef.value.validate((valid) => { |
|||
if (valid) { |
|||
// 提交表单数据 |
|||
addNewPeople(userInfo.value).then((res) => { |
|||
if (res.code == 0) { |
|||
ElMessage.success("新增成功"); |
|||
closeLock(); |
|||
} else { |
|||
ElMessage.error(res.msg); |
|||
} |
|||
butLoading.value = false |
|||
}) |
|||
} else { |
|||
butLoading.value = false |
|||
} |
|||
}); |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-08-31 14:35:18 |
|||
@ 功能: 上传前判断类型 |
|||
*/ |
|||
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => { |
|||
fileUploadIng.value = true; |
|||
if (!/\.(png|jpg|gif|jpeg|svg|bmp)$/.test(rawFile.name)) { |
|||
ElMessage.warning("您上传的图片不符合要求！"); |
|||
fileUploadIng.value = false; |
|||
return false; |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-08-31 14:40:31 |
|||
@ 功能: 上传成功 |
|||
*/ |
|||
const handleAvatarSuccess: UploadProps["onSuccess"] = ( |
|||
response, |
|||
uploadFile, |
|||
uploadFiles |
|||
) => { |
|||
userInfo.value.icon = URL.createObjectURL(uploadFile.raw!); |
|||
// console.log("上传成功-------------------->", uploadFile); |
|||
// console.log("上传成功-------------------->", props.archivesdata.id); |
|||
fileUploadIng.value = false; |
|||
ElMessage.success("上传成功"); |
|||
|
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="ubLockPage" |
|||
title="新增人员信息" |
|||
width="650" |
|||
draggable |
|||
:destroy-on-close="true" |
|||
:before-close="closeLock" |
|||
> |
|||
<el-form :model="userInfo" :rules="rules" ref="formRef" label-width="80px"> |
|||
<table> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="姓名" prop="name"> |
|||
<el-input v-model="userInfo.name" placeholder="请输入姓名" /> |
|||
</el-form-item> |
|||
</td> |
|||
<td> |
|||
<el-form-item label="曾用名" prop="oldName"> |
|||
<el-input v-model="userInfo.oldName" placeholder="请输入曾用名" /> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="工号" prop="code"> |
|||
<el-input v-model="userInfo.code" placeholder="请输入工号" /> |
|||
</el-form-item> |
|||
</td> |
|||
<td rowspan="3" align="center"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
:action="imgUploadApiUrl" |
|||
:show-file-list="false" |
|||
:on-success="handleAvatarSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
v-loading="fileUploadIng" |
|||
> |
|||
<el-avatar shape="square" :size="180" :src="userInfo.icon" class="bianKuang" /> |
|||
</el-upload> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="民族" prop="nation"> |
|||
<el-input v-model="userInfo.nation" placeholder="请输入民族" /> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="性别" prop="sex"> |
|||
<el-radio-group v-model="userInfo.sex"> |
|||
<el-radio label="1">男</el-radio> |
|||
<el-radio label="2">女</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="2"> |
|||
<el-form-item label="归属部门" prop="orgId"> |
|||
<el-tree-select |
|||
v-model="userInfo.orgId" |
|||
:data="orgTreeList" |
|||
check-strictly |
|||
:render-after-expand="false" |
|||
:props="systemMenuTreeProps" |
|||
style="width: 100%" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="联系电话" prop="mobile"> |
|||
<el-input v-model="userInfo.mobile" placeholder="请输入联系电话" /> |
|||
</el-form-item> |
|||
</td> |
|||
<td> |
|||
<el-form-item label="用工关系" prop="employment"> |
|||
<el-select v-model="userInfo.employment" placeholder="请选择用工关系" style="width: 100%"> |
|||
<el-option label="临时工" value="1" /> |
|||
<el-option label="编外人员" value="2" /> |
|||
<el-option label="实习&实习生" value="3" /> |
|||
<el-option label="试用员工" value="4" /> |
|||
<el-option label="待分配" value="5" /> |
|||
<el-option label="待岗" value="6" /> |
|||
<el-option label="临时调入" value="7" /> |
|||
<el-option label="正式员工" value="8" /> |
|||
<el-option label="长期病假" value="9" /> |
|||
<el-option label="停薪留职" value="10" /> |
|||
<el-option label="退休" value="11" /> |
|||
<el-option label="辞职" value="12" /> |
|||
<el-option label="辞退" value="13" /> |
|||
<el-option label="离职" value="14" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="出生日期" prop="age"> |
|||
<el-date-picker |
|||
v-model="userInfo.age" |
|||
type="date" |
|||
placeholder="请选择出生日期" |
|||
format="YYYY/MM/DD" |
|||
value-format="YYYY-MM-DD" |
|||
/> |
|||
</el-form-item> |
|||
</td> |
|||
<td> |
|||
<el-form-item label="联系地址" prop="address"> |
|||
<el-input v-model="userInfo.address" placeholder="请输入联系地址" /> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td> |
|||
<el-form-item label="身体状况" prop="bodyStatus"> |
|||
<el-select v-model="userInfo.bodyStatus" placeholder="请选择身体状况" style="width: 100%"> |
|||
<el-option label="良好" value="1" /> |
|||
<el-option label="一般" value="2" /> |
|||
<el-option label="较弱" value="3" /> |
|||
<el-option label="有生理缺陷" value="4" /> |
|||
<el-option label="有生理缺陷" value="4" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</td> |
|||
<td> |
|||
<el-form-item label="婚姻状况" prop="marriageStatus"> |
|||
<el-select v-model="userInfo.marriageStatus" placeholder="请选择婚姻状况" style="width: 100%"> |
|||
<el-option label="未婚" value="1" /> |
|||
<el-option label="已婚" value="2" /> |
|||
<el-option label="离异" value="4" /> |
|||
<el-option label="丧偶" value="3" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
<div class="flex justify-center"> |
|||
<el-button type="primary" :loading="butLoading" @click="onSubmit">提交</el-button> |
|||
<el-button @click="closeLock">取消</el-button> |
|||
</div> |
|||
</el-form> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.bianKuang { |
|||
border: 1px solid #ccc; |
|||
} |
|||
|
|||
|
|||
</style> |
|||
@ -0,0 +1,235 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 16:17:37 |
|||
@ 备注: 批量导入 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { |
|||
analysisRedisOrgExelect, |
|||
} from "@/api/hr/people/index"; |
|||
import { ElScrollbar as ElScrollbarType } from "element-plus"; |
|||
const uploadFFurl = import.meta.env.VITE_APP_BASE_API + "/hrapi/staff/uploadUserFilesRedis"; |
|||
const props = defineProps({ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
orgTree: { |
|||
type: Array as PropType<orgInfo[]>, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
const ubLockPage = computed(() => props.show) |
|||
const emit = defineEmits(['update:show','updateInfo']) |
|||
const closeUploadTemp = () => { |
|||
emit('update:show', false) |
|||
emit('updateInfo') |
|||
tempForm.orgId = "" |
|||
excelLoading.value = false; |
|||
excelJiexi.value = false; |
|||
} |
|||
const orgTreeList = computed(() => props.orgTree) //行政组织树数据 |
|||
const excelLoading = ref(false); |
|||
const excelJiexi = ref(false); |
|||
const tempForm = reactive({ |
|||
orgId: "", |
|||
}); |
|||
const systemMenuTreeProps = { |
|||
children: "child", |
|||
label: "name", |
|||
value:"id" |
|||
} |
|||
const excelUpload = ref<any>(); |
|||
let peopleListAry = new Array(); //输出信息 |
|||
const peopleMsg = ref<string[]>([]); |
|||
let jiBuQiVal = 0; |
|||
const progressSize = ref(0); |
|||
const meritsYearIng = ref<any>(); |
|||
const rewPunYearsIng = ref<any>(); |
|||
const redisListKey = ref<string>(); |
|||
const totalNum = ref<number>(); |
|||
const innerRef = ref<HTMLDivElement>(); |
|||
const scrollbarRef = ref<InstanceType<typeof ElScrollbarType>>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 16:53:45 |
|||
@ 功能: 上传前检查 |
|||
*/ |
|||
function handleExcelChangeTemp(file: UploadFile) { |
|||
excelLoading.value = true; |
|||
if (tempForm.orgId == 0 || tempForm.orgId == "") { |
|||
ElMessage.warning("对不起！你没有选定上传的是哪个行政组织得人员信息！"); |
|||
excelLoading.value = false; |
|||
return false; |
|||
} |
|||
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) { |
|||
ElMessage.warning("上传Excel只能为xlsx、xls格式"); |
|||
excelLoading.value = false; |
|||
return false; |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 16:55:17 |
|||
@ 功能: 上传失败 |
|||
*/ |
|||
const uploadError = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => { |
|||
excelLoading.value = true; |
|||
// console.log("1response",response); |
|||
// console.log("1uploadFile",uploadFile); |
|||
// console.log("1uploadFiles",uploadFiles); |
|||
let msgAry = new Array(); |
|||
msgAry.push( |
|||
"响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息" |
|||
); |
|||
// errorMsg = ["响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息"] |
|||
peopleListAry.value = msgAry; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 16:56:39 |
|||
@ 功能: 上传成功 |
|||
*/ |
|||
const uploadTrue = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => { |
|||
excelLoading.value = false; |
|||
// console.log("response", response); |
|||
// console.log("uploadFile",uploadFile); |
|||
// console.log("uploadFiles",uploadFiles); |
|||
peopleListAry.push("文件上传成功！开始解析数据并写入数据库！"); |
|||
peopleMsg.value.push("文件上传成功！开始解析数据并写入数据库！"); |
|||
// peopleListAry.value.push("文件上传成功！开始解析数据并写入数据库！") |
|||
// console.log("上传成功",response.code) |
|||
if (response.code == 0) { |
|||
jiBuQiVal = 0; |
|||
progressSize.value = 0; |
|||
excelJiexi.value = true; |
|||
meritsYearIng.value = response.data.meritsYearIng; |
|||
rewPunYearsIng.value = response.data.rewPunYearsIng; |
|||
redisListKey.value = response.data.redisListKey; |
|||
totalNum.value = response.data.totalNum; |
|||
// console.log("上传成功===>", staffChengji); |
|||
insetPeopleCont(); |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 17:01:05 |
|||
@ 功能: 写入数据库 |
|||
*/ |
|||
const insetPeopleCont = () => { |
|||
console.log("启动数据写入数据库===============》", jiBuQiVal, totalNum.value,jiBuQiVal < totalNum.value); |
|||
if (jiBuQiVal < totalNum.value) { |
|||
let sendData = { |
|||
meritsYearIng: meritsYearIng.value, |
|||
rewPunYearsIng: rewPunYearsIng.value, |
|||
redisListKey: redisListKey.value, |
|||
number: jiBuQiVal, |
|||
orgId: tempForm.orgId.toString(), |
|||
}; |
|||
console.log("启动数据写入数据库", sendData); |
|||
analysisRedisOrgExelect(sendData).then((data: any) => { |
|||
console.log("启动数据写入11111数据库",data,data.data.msgStr) |
|||
peopleMsg.value.push(data.data.msgStr); |
|||
jiBuQiVal++; |
|||
// if (jibuq+ 1 >= totalNum.value){ |
|||
|
|||
// } |
|||
progressSize.value = Math.round((jiBuQiVal / totalNum.value) * 10000) / 100; |
|||
insetPeopleCont(); |
|||
nextTick(() => { |
|||
handleClick(); |
|||
}); |
|||
}); |
|||
} else { |
|||
excelJiexi.value = false; |
|||
progressSize.value = 100; |
|||
excelUpload.value.clearFiles(); |
|||
} |
|||
}; |
|||
|
|||
const handleClick = () => { |
|||
nextTick(() => { |
|||
// console.log("滚动条长度",innerRef.value!.clientHeight) |
|||
if (innerRef.value!.clientHeight > 300) { |
|||
scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight); |
|||
} |
|||
}); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="ubLockPage" |
|||
title="批量导入人员信息" |
|||
width="800" |
|||
draggable |
|||
:destroy-on-close="true" |
|||
:before-close="closeUploadTemp" |
|||
> |
|||
<el-row v-loading="excelLoading" element-loading-text="文档上传中，请稍候..." style="width: 100%"> |
|||
<el-col :span="24"> |
|||
<el-form :model="tempForm" label-width="auto" style="width: 100%"> |
|||
<el-form-item label="请选择上传那个公司的人员信息"> |
|||
<el-tree-select |
|||
v-model="tempForm.orgId" |
|||
:data="orgTreeList" |
|||
check-strictly |
|||
:render-after-expand="false" |
|||
:props="systemMenuTreeProps" |
|||
style="width: 100%" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-col> |
|||
<el-col |
|||
:span="24" |
|||
v-loading="excelJiexi" |
|||
element-loading-text="文档解析中，请稍候..." |
|||
> |
|||
<el-upload |
|||
ref="excelUpload" |
|||
class="upload-demo" |
|||
drag |
|||
:action="uploadFFurl" |
|||
:data="{ orgId: tempForm.orgId.toString() }" |
|||
:before-upload="handleExcelChangeTemp" |
|||
:on-success="uploadTrue" |
|||
:on-error="uploadError" |
|||
:show-file-list="false" |
|||
multiple |
|||
> |
|||
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|||
<div class="el-upload__text">将电子表格拖到此处或 <em>单击上载</em></div> |
|||
</el-upload> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row style="width: 100%;"> |
|||
<el-col :span="24"> |
|||
<el-progress |
|||
:text-inside="true" |
|||
:stroke-width="20" |
|||
:percentage="progressSize" |
|||
> |
|||
<span>已完成：{{ progressSize }}%</span> |
|||
</el-progress> |
|||
</el-col> |
|||
</el-row> |
|||
<el-scrollbar height="300px" ref="scrollbarRef" always style="padding:10px 20px;"> |
|||
<div ref="innerRef"> |
|||
<p |
|||
v-for="(item, index) in peopleMsg" |
|||
:key="index" |
|||
class="scrollbar-demo-item" |
|||
> |
|||
{{ item }} |
|||
</p> |
|||
</div> |
|||
</el-scrollbar> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app-content { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,96 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 15:50:46 |
|||
@ 备注: 解除人员信息锁 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { |
|||
jiechuUserLock, |
|||
} from "@/api/hr/org/index"; |
|||
|
|||
|
|||
const props = defineProps({ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
const ubLockPage = computed(() => props.show) |
|||
const emit = defineEmits(['update:show','updateInfo']) |
|||
const unLockForm = reactive({ |
|||
numText: "", |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-02 15:53:20 |
|||
@ 功能: 关闭解锁弹窗 |
|||
*/ |
|||
const closeLock = () => { |
|||
emit('update:show', false) |
|||
emit('updateInfo') |
|||
} |
|||
const ruleFormRefLock = ref(null); |
|||
var butLoad = ref(false); |
|||
//提交数据 |
|||
const picksubus = () => { |
|||
butLoad.value = true; |
|||
ruleFormRefLock.value.validate((isValid: boolean) => { |
|||
if (isValid) { |
|||
jiechuUserLock({ userId: unLockForm.numText }) |
|||
.then((res: any) => { |
|||
butLoad.value = false; |
|||
closeLock() |
|||
}) |
|||
.finally(() => { |
|||
butLoad.value = false; |
|||
}); |
|||
} else { |
|||
butLoad.value = false; |
|||
} |
|||
}); |
|||
}; |
|||
const resetForm = () => { |
|||
closeLock(); |
|||
ruleFormRefLock.value.resetFields(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="ubLockPage" |
|||
title="清除锁定人员信息锁" |
|||
width="500" |
|||
draggable |
|||
:destroy-on-close="true" |
|||
:before-close="closeLock" |
|||
> |
|||
<el-form |
|||
ref="ruleFormRefLock" |
|||
:model="unLockForm" |
|||
:rules="editTitleRules" |
|||
label-width="80" |
|||
style="width: 100%" |
|||
> |
|||
<el-form-item label="工号" prop="numText"> |
|||
<el-text>请输入工号；以英文逗号隔开(,)</el-text> |
|||
<el-input |
|||
v-model="unLockForm.numText" |
|||
type="textarea" |
|||
placeholder="请输入工号；以英文逗号隔开(,)" |
|||
clearable |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" v-loading="butLoad" @click="picksubus"> |
|||
确定 |
|||
</el-button> |
|||
<el-button @click="resetForm(ruleFormRef)">取消</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app-content { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,222 @@ |
|||
<!-- eslint-disable vue/no-side-effects-in-computed-properties --> |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-03 10:44:56 |
|||
@ 备注: 上传模版 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { |
|||
uploadUserTemplate |
|||
|
|||
} from "@/api/hr/org/index"; |
|||
import { uploadUrl } from "@/api/DesignForm"; |
|||
const props = defineProps({ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
orgTree: { |
|||
type: Array as PropType<orgInfo[]>, |
|||
default: () => [] |
|||
}, |
|||
ruleForm: { |
|||
type: Object as PropType<typeof ruleForm>, |
|||
default: () => ({}) |
|||
} |
|||
}) |
|||
const addTemLoading = ref(false); |
|||
let peopleListAry = new Array(); |
|||
const excelLoading = ref(false); |
|||
const excelUploadUs = ref(); |
|||
|
|||
const emits = defineEmits(['update:show']) |
|||
const ruleFormRef = ref<any>(); |
|||
const ruleFormIng = ref({ |
|||
id: "", |
|||
orgId: "", |
|||
fileName: "", |
|||
filePath: "", |
|||
fileUrl: "", |
|||
}); |
|||
const orgTreePropsBut = { |
|||
children: "child", |
|||
value: "id", |
|||
label: "name", |
|||
}; //行政组织树对照值 |
|||
const orgTreeList = computed(() => props.orgTree) //行政组织树数据 |
|||
const ubLockPage = computed({ |
|||
get: () =>{ |
|||
if(props.show){ |
|||
ruleFormIng.value.id = props.ruleForm.id |
|||
ruleFormIng.value.orgId = props.ruleForm.orgId |
|||
ruleFormIng.value.fileName = props.ruleForm.fileName |
|||
ruleFormIng.value.filePath = props.ruleForm.filePath |
|||
ruleFormIng.value.fileUrl = props.ruleForm.fileUrl |
|||
} |
|||
return props.show |
|||
}, |
|||
set: (val) => { |
|||
emits("update:show", val); |
|||
}, |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-04-19 13:13:18 |
|||
@ 功能: 表单验证规则 |
|||
*/ |
|||
const dataFormRules = reactive({ |
|||
orgId: [{ required: true, message: "请选择行政组织", trigger: "blur" }], |
|||
fileName: [{ required: true, message: "请上传模版文件", trigger: "blur" }], |
|||
}); |
|||
//关闭 |
|||
const tempOpenClose = () => { |
|||
emits('update:show', false) |
|||
ruleFormIng.value.id = "" |
|||
ruleFormIng.value.orgId = 0 |
|||
ruleFormIng.value.fileName = "" |
|||
ruleFormIng.value.filePath = "" |
|||
ruleFormIng.value.fileUrl = "" |
|||
} |
|||
//文件前缀检查 |
|||
const handleExcelChange = (file: UploadFile) => { |
|||
excelLoading.value = true; |
|||
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) { |
|||
ElMessage.warning("上传Excel只能为xlsx、xls格式"); |
|||
excelLoading.value = false; |
|||
return false; |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-08-24 14:46:32 |
|||
@ 功能: 文件上传成功 |
|||
*/ |
|||
const uploadTrueUs = ( |
|||
response: any, |
|||
uploadFile: UploadFile, |
|||
uploadFiles: UploadFiles |
|||
) => { |
|||
// console.log("response",response); |
|||
// console.log("uploadFile",uploadFile); |
|||
// console.log("uploadFiles",uploadFiles); |
|||
excelLoading.value = false; |
|||
ruleFormIng.value.fileName = uploadFile.name; |
|||
ruleFormIng.value.filePath = response.data.physicspath; |
|||
ruleFormIng.value.fileUrl = response.data.url; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-03 11:02:30 |
|||
@ 功能: 文件上传失败 |
|||
*/ |
|||
const uploadError = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => { |
|||
excelLoading.value = true; |
|||
// console.log("1response",response); |
|||
// console.log("1uploadFile",uploadFile); |
|||
// console.log("1uploadFiles",uploadFiles); |
|||
let msgAry = new Array(); |
|||
msgAry.push( |
|||
"响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息" |
|||
); |
|||
// errorMsg = ["响应时间过长，系统自动转为后台静默处理，可先关闭窗口！完成时间大约90分钟。请于90分钟后刷新信息"] |
|||
peopleListAry.value = msgAry; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-03 11:05:57 |
|||
@ 功能: 提交上传数据 |
|||
*/ |
|||
const saveTemp = () => { |
|||
addTemLoading.value = true; |
|||
ruleFormRef.value.validate((valid: any) => { |
|||
if (valid) { |
|||
ruleFormIng.value.orgId = ruleFormIng.value.orgId.toString(); |
|||
// console.log("上传传输信息--->", ruleForm); |
|||
if (ruleFormIng.value.id == 0 || ruleFormIng.value.id == "") { |
|||
uploadUserTemplate(ruleForm) |
|||
.then((data: any) => { |
|||
console.log("上传传输信息-1-->", data); |
|||
tempOpenClose(); |
|||
}) |
|||
.finally(() => { |
|||
addTemLoading.value = false; |
|||
}); |
|||
} else { |
|||
editUserTemplateInfo(ruleForm) |
|||
.then((data: any) => { |
|||
console.log("上传传输信息-2-->", data); |
|||
tempOpenClose(); |
|||
}) |
|||
.finally(() => { |
|||
addTemLoading.value = false; |
|||
}); |
|||
} |
|||
} else { |
|||
addTemLoading.value = false; |
|||
} |
|||
}); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="ubLockPage" |
|||
title="上传导入模版" |
|||
width="400" |
|||
:before-close="tempOpenClose" |
|||
> |
|||
<el-form |
|||
ref="ruleFormRef" |
|||
style="max-width: 600px" |
|||
:model="ruleForm" |
|||
:rules="dataFormRules" |
|||
label-width="auto" |
|||
class="demo-ruleForm" |
|||
:size="formSize" |
|||
status-icon |
|||
> |
|||
<el-form-item label="归属行政组织" prop="orgId"> |
|||
<el-tree-select |
|||
v-model="ruleFormIng.orgId" |
|||
:data="orgTreeList" |
|||
:props="orgTreePropsBut" |
|||
:render-after-expand="false" |
|||
:expand-on-click-node="false" |
|||
:check-on-click-node="true" |
|||
:check-strictly="true" |
|||
:default-expand-all="false" |
|||
style="width: 240px" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="信息模版" prop="fileName"> |
|||
<el-input v-model="ruleFormIng.fileName" /> |
|||
<el-upload |
|||
ref="excelUploadUs" |
|||
class="upload-demo" |
|||
drag |
|||
v-loading="excelLoading" |
|||
:action="uploadUrl" |
|||
:limit="1" |
|||
:before-upload="handleExcelChange" |
|||
:on-success="uploadTrueUs" |
|||
:on-error="uploadError" |
|||
:show-file-list="false" |
|||
> |
|||
<el-icon class="el-icon--upload"><upload-filled /></el-icon> |
|||
<div class="el-upload__text">将电子表格拖到此处或 <em>单击上载</em></div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" v-loading="addTemLoading" @click="saveTemp()"> |
|||
确定上传 |
|||
</el-button> |
|||
<el-button @click="tempOpenClose()">取消</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app-content { |
|||
|
|||
} |
|||
</style> |
|||
@ -0,0 +1,12 @@ |
|||
# EditorConfig is awesome: https://EditorConfig.org |
|||
|
|||
# top-most EditorConfig file |
|||
root = true |
|||
|
|||
[*] |
|||
indent_style = space |
|||
indent_size = 4 |
|||
end_of_line = crlf |
|||
charset = utf-8 |
|||
trim_trailing_whitespace = false |
|||
insert_final_newline = false |
|||
@ -0,0 +1,865 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-10-21 10:06:51 |
|||
@ 备注: 在线人数 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index' |
|||
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types' |
|||
import type { TreeNode,TreeInstance } from 'element-plus' |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { getOrgTreeList } from "@/api/hr/org/index"; |
|||
import { appPowerUnit } from "@/api/system/roleapi/power"; |
|||
import type { getSystemPower,AppPowerTree } from "@/api/system/roleapi/types"; |
|||
import { appTableBut, appListBut } from "@/utils/workflow/const"; |
|||
import { |
|||
gainAppList, |
|||
gainAppTableListNew |
|||
} from "@/api/system/roleapi/postrole"; |
|||
import { |
|||
custerAppInfo |
|||
} from "@/api/system/roleapi/types"; |
|||
|
|||
|
|||
|
|||
import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue' |
|||
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue' |
|||
|
|||
const squareUrl = ref<string>( |
|||
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" |
|||
); |
|||
const orgTree = ref<orgInfo[]>([]) |
|||
const roleGroupOrInfo = ref(1) |
|||
const searchQuery = ref('') |
|||
const orgWorkRole = ref("org") |
|||
const appSysPick = ref("system") |
|||
const treeRef = ref<TreeInstance>() |
|||
const treeRefOrg = ref<TreeInstance>() |
|||
const roleListdata = ref<RoleListTree[]>([]) |
|||
const orgPostisListdata = ref<orgAndPostisListTree[]>([]) |
|||
const treeBoxHeight = ref(300) |
|||
const treeBoxHeightOrg = ref(300) |
|||
const roleLeft = ref() |
|||
const systemPowerTree = ref<AppPowerTree[]>([]) |
|||
const ownerPeople = ref<any>([]) |
|||
|
|||
const props = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const propsOrg = { |
|||
value: 'id', |
|||
label: 'name', |
|||
disabled:'status', |
|||
children: 'child', |
|||
} |
|||
const propsOrgPost = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const systemPower = ref<getSystemPower>({ |
|||
powerType:"org", |
|||
appType:"appsystem", |
|||
appSystem:"system", |
|||
roleId:"", |
|||
}) |
|||
const roleLoading = ref(false) |
|||
const openRoleGroup = ref(false) |
|||
const orgLoading = ref(false) |
|||
const orgPostLoading = ref(false) |
|||
|
|||
const appList = ref<custerAppInfo[]>([]); |
|||
//搜索角色 |
|||
const onQueryChanged = (query: string) => { |
|||
treeRef.value!.filter(query) |
|||
} |
|||
//搜索行政组织 |
|||
const onQueryChangedOrg = (query: string) => { |
|||
treeRefOrg.value!.filter(query) |
|||
} |
|||
const filterMethod = (query: string, node: any) => node.label!.includes(query) |
|||
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query) |
|||
|
|||
//监测赋权组 |
|||
watch(()=>systemPower.value.powerType,(val:string)=>{ |
|||
console.log("监测赋权组",val) |
|||
getSystemPowerSub(); |
|||
switch(val){ |
|||
case "org": |
|||
getOrgTreeAry(); |
|||
break; |
|||
case "job": |
|||
getOrgPostisTree() |
|||
break; |
|||
case "role": |
|||
getRoleTree(); |
|||
break; |
|||
default: |
|||
} |
|||
|
|||
if(systemPower.value.appSystem=="app"){ |
|||
getAppList(); |
|||
}else{ |
|||
getSystemPowerSub(); |
|||
} |
|||
|
|||
},{ |
|||
deep:true |
|||
}) |
|||
//选中角色节点 |
|||
const pickRoleTree = (data:any) => { |
|||
if(data.status && data.types==1){ |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
} |
|||
//选择行政组织 |
|||
const pickOrgTree = (data:any) => { |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
//获取角色树 |
|||
const getRoleTree = () => { |
|||
roleLoading.value = true |
|||
giveRoleTree().then(({data})=>{ |
|||
console.log("监测赋权组------->",data) |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id |
|||
} |
|||
roleListdata.value=data; |
|||
roleLoading.value = false; |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
} |
|||
const editRoleCont = ref<RoleFormInfo>() |
|||
const openEditRoleGroup = ref(false) |
|||
//编辑角色信息 |
|||
const editMyInfoIcon = (data:RoleListTree,types:number) => { |
|||
console.log("编辑角色信息------->",data) |
|||
console.log("编辑角色信息---types---->",types) |
|||
switch(types){ |
|||
case 1: |
|||
editRoleStatusBut(data.id,2) |
|||
break; |
|||
case 2: |
|||
editRoleStatusBut(data.id,1) |
|||
break; |
|||
case 3: |
|||
editRoleCont.value = { |
|||
id:data.id, |
|||
name:data.label, |
|||
type:data.types, |
|||
superior:data.superior, |
|||
sort:data.sort |
|||
} |
|||
openEditRoleGroup.value = true |
|||
break; |
|||
case 4: |
|||
ElMessageBox.confirm( |
|||
"您确定要删除此信息吗？一经删除！数据将不可恢复！请慎重操作！", |
|||
"警告", |
|||
{ |
|||
confirmButtonText: '确定删除', |
|||
cancelButtonText: '取消删除', |
|||
type: 'warning', |
|||
} |
|||
).then(()=>{ |
|||
editRoleStatusBut(data.id,3) |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
//编辑角色状态 |
|||
const editRoleStatusBut = (id:string|number,types:number) => { |
|||
// console.log("编辑角色状态--->",id) |
|||
editRoleStatus({id:id.toString(),status:types}).then((data:any)=>{ |
|||
if(data.code==0){ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
getRoleTree() |
|||
}else{ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
//添加角色组 |
|||
const addRoleGroup = (types:number) => { |
|||
|
|||
roleGroupOrInfo.value = types |
|||
openRoleGroup.value = true |
|||
} |
|||
//获取行政组织树 |
|||
const getOrgTreeAry = () => { |
|||
roleLoading.value = true |
|||
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){ |
|||
|
|||
getOrgTreeList({ orgid: 0 }) |
|||
.then(({ data }) => { |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id |
|||
} |
|||
orgTree.value = data |
|||
roleLoading.value = false |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
}else{ |
|||
roleLoading.value = false |
|||
} |
|||
|
|||
} |
|||
//获取行政组织及岗位 |
|||
const getOrgPostisTree = () => { |
|||
orgPostLoading.value=true |
|||
if(!Array.isArray(orgPostisListdata.value) || orgPostisListdata.value.length<=0){ |
|||
|
|||
getOrgPostTree({id:"313"}).then(({data})=>{ |
|||
console.log("获取行政组织及岗位--------->",data) |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id |
|||
} |
|||
orgPostisListdata.value = data |
|||
orgPostLoading.value=false |
|||
}).finally(()=>{orgPostLoading.value=false}) |
|||
}else{ |
|||
orgPostLoading.value=true |
|||
} |
|||
} |
|||
|
|||
//获取平台授权项目 |
|||
const getSystemPowerSub = () => { |
|||
appPowerUnit(systemPower.value).then(({data})=>{ |
|||
console.log("获取平台授权项目------->",data) |
|||
systemPowerTree.value = data |
|||
}) |
|||
} |
|||
|
|||
const activeAppId = ref<string>(""); |
|||
const appTableList = ref<custerAppTablePower[]>([]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 14:20:47 |
|||
@ 功能: 获取自定义App |
|||
*/ |
|||
const getAppList = () => { |
|||
gainAppList().then((data: any) => { |
|||
console.log("获取自定义App", data); |
|||
appList.value = data.data; |
|||
if (data.data && data.data.length > 0) { |
|||
if (data.data[0] && data.data[0].signCode) { |
|||
activeAppId.value = data.data[0].signCode; |
|||
getAppTableList(); |
|||
} |
|||
} |
|||
console.log("获取自定义App", activeAppId.value); |
|||
}); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 16:00:19 |
|||
@ 功能: 获取对应App下边的表单 |
|||
*/ |
|||
const getAppTableList = () => { |
|||
systemPower.value.roleId = activeAppId.value |
|||
gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appType,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then( |
|||
(data: any) => { |
|||
console.log("获取对应App下边的表单", data); |
|||
if (Array.isArray(data.data)) { |
|||
appTableList.value = data.data; |
|||
} else { |
|||
appTableList.value = []; |
|||
} |
|||
} |
|||
); |
|||
}; |
|||
watch(()=>systemPower.value.appSystem,(val:string)=>{ |
|||
if(val=="app"){ |
|||
getAppList(); |
|||
} |
|||
},{ |
|||
immediate:true |
|||
}) |
|||
onMounted(()=>{ |
|||
getOrgTreeAry(); |
|||
getSystemPowerSub(); |
|||
console.log("高度-----1---->",roleLeft.value?.offsetHeight) |
|||
nextTick(()=>{ |
|||
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140 |
|||
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100 |
|||
}) |
|||
|
|||
}) |
|||
watch( |
|||
() => activeAppId.value, |
|||
(val) => { |
|||
getAppTableList(); |
|||
}, |
|||
{ |
|||
immediate:true |
|||
} |
|||
); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-14 15:01:26 |
|||
@ 功能: 选择App数据 |
|||
*/ |
|||
const pickAppList = (val: custerAppInfo) => { |
|||
activeAppId.value = val.signCode; |
|||
}; |
|||
const systemMenuTreePropsing = { |
|||
children: "child", |
|||
label: "name", |
|||
value: "id", |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="roleBox"> |
|||
<div ref="roleLeft" class="roleLeft"> |
|||
<el-tabs v-model="systemPower.powerType" class="demo-tabs"> |
|||
<el-tab-pane label="组织" name="org"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">组织</el-text> |
|||
</template> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:data="orgTree" |
|||
:props="propsOrg" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="岗位" name="job"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">岗位</el-text> |
|||
</template> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:data="orgPostisListdata" |
|||
:props="propsOrgPost" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
v-loading="orgPostLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="角色" name="role"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">角色</el-text> |
|||
</template> |
|||
<div class="butBox"> |
|||
<el-button type="primary" @click="addRoleGroup(1)">新建角色组</el-button> |
|||
<el-button type="primary" @click="addRoleGroup(2)">新建角色</el-button> |
|||
</div> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRef" |
|||
style="max-width: 350px;" |
|||
:data="roleListdata" |
|||
:props="props" |
|||
:filter-method="filterMethod" |
|||
:height="treeBoxHeight" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickRoleTree" |
|||
> |
|||
<template #default="{ node }" > |
|||
<div class="treeRoleBox"> |
|||
<span>{{ node.label }}</span> |
|||
<div class="spanButBox"> |
|||
<el-text v-if="node.disabled" type="warning" size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text> |
|||
<el-text v-else type="success" size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text> |
|||
<el-text type="primary" size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text> |
|||
<el-text type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="个人" name="person"> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="roleright"> |
|||
<el-tabs v-model="systemPower.appSystem" class="demo-tabs"> |
|||
<el-tab-pane label="平台" name="system"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">平台</el-text> |
|||
</template> |
|||
|
|||
|
|||
<el-container v-if="systemPower.powerType == 'role'"> |
|||
<el-main> |
|||
|
|||
<el-table |
|||
:data="systemPowerTree" |
|||
style="width: 100%; height: calc(100vh - 277px)" |
|||
:cell-style="{ padding: '10px 0' }" |
|||
:header-cell-style="{ background: '#F5F7FA', color: '#909399' }" |
|||
border |
|||
|
|||
row-key="id" |
|||
|
|||
> |
|||
<el-table-column fixed prop="name" label="目录/菜单" width="380"> |
|||
<template #default="scope"> |
|||
<span class="tree_sapn">{{ scope.row.name }}</span> |
|||
<el-tag v-if="scope.row.types === 2" type="warning" size="small">目录</el-tag> |
|||
<el-tag v-if="scope.row.types === 1" type="success" size="small">菜单</el-tag> |
|||
<el-tag v-if="scope.row.types === 4" type="danger" size="small">按钮</el-tag> |
|||
<el-tag v-if="scope.row.types === 3" type="info" size="small">外链</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="isTrue" label="授权" width="80" align="center" > |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.isTrue" label="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="buttenPower" label="操作按钮" > |
|||
<template #header> |
|||
<div class="pickButBox"> |
|||
<el-text >操作按钮</el-text> |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox v-for="item in scope.row.buttenPower" :key="item" v-model="scope.row.isTrue" :label="item.name" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
|
|||
</el-main> |
|||
<el-aside width="200px"> |
|||
<div class="userTitleBox"> |
|||
<el-text type="info" >使用人员</el-text> |
|||
<el-button type="primary" size="small">添加使用人</el-button> |
|||
</div> |
|||
<el-scrollbar class="scrollBox"> |
|||
<div class="userBox" v-for="item in ownerPeople" :key="item.id"> |
|||
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" /> |
|||
<div> |
|||
<el-text type="primary" >{{item.name}}{{ '('+item.code+')' }}</el-text> |
|||
<el-text type="primary" >{{item.orgName}}</el-text> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-scrollbar> |
|||
</el-aside> |
|||
</el-container> |
|||
|
|||
<el-table |
|||
v-else |
|||
:data="systemPowerTree" |
|||
style="width: 100%; height: calc(100vh - 277px)" |
|||
:cell-style="{ padding: '10px 0' }" |
|||
:header-cell-style="{ background: '#F5F7FA', color: '#909399' }" |
|||
border |
|||
|
|||
row-key="id" |
|||
|
|||
> |
|||
<el-table-column fixed prop="name" label="目录/菜单" width="380" > |
|||
<template #default="scope"> |
|||
<span class="tree_sapn">{{ scope.row.name }}</span> |
|||
<el-tag v-if="scope.row.types === 2" type="warning" size="small">目录</el-tag> |
|||
<el-tag v-if="scope.row.types === 1" type="success" size="small">菜单</el-tag> |
|||
<el-tag v-if="scope.row.types === 4" type="danger" size="small">按钮</el-tag> |
|||
<el-tag v-if="scope.row.types === 3" type="info" size="small">外链</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="isTrue" label="授权" width="80" align="center" > |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.isTrue" label="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="buttenPower" label="操作按钮" > |
|||
<template #header> |
|||
<div class="pickButBox"> |
|||
<el-text >操作按钮</el-text> |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox v-for="item in scope.row.buttenPower" :key="item" v-model="scope.row.isTrue" :label="item.name" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
|
|||
|
|||
</el-tab-pane> |
|||
<el-tab-pane label="应用" name="app"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">应用</el-text> |
|||
</template> |
|||
|
|||
|
|||
|
|||
<table class="table_body"> |
|||
<thead> |
|||
<tr v-if="systemPower.powerType == 'role'"> |
|||
<td align="center" width="20%">应用</td> |
|||
<td align="center" width="50%">应用详情</td> |
|||
<td align="center" width="30%"> |
|||
<div class="userTitleBoxes"> |
|||
<el-text type="info" >使用人员</el-text> |
|||
<el-button type="primary" size="small">添加使用人</el-button> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
<tr v-else> |
|||
<td align="center" width="20%">应用</td> |
|||
<td width="80%"> |
|||
<div class="appPickPower"> |
|||
应用详情 |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr > |
|||
<td valign="top"> |
|||
<el-scrollbar class="tab_pane_box"> |
|||
<ul class="appListBox"> |
|||
<li v-for="item in appList" :key="item" @click="pickAppList(item)">{{ item.name }}</li> |
|||
</ul> |
|||
</el-scrollbar> |
|||
</td> |
|||
<td valign="top"> |
|||
<el-row class="row_head"> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
页面 |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
表单权力 |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
列表权限 |
|||
</el-col> |
|||
<el-col class="roe_col_head" :span="6"> |
|||
数据权限 |
|||
</el-col> |
|||
</el-row> |
|||
<el-scrollbar class="tab_pane_body"> |
|||
<el-row class="left_right" v-for="item in appTableList" :key="item.id"> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
{{ item.name }} |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
|
|||
<el-checkbox-group v-model="item.tablePower"> |
|||
<el-checkbox |
|||
v-for="city in appTableBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
|
|||
<el-checkbox-group v-if="item.istIsTrue" v-model="item.listPower"> |
|||
<el-checkbox |
|||
v-for="city in appListBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col class="roe_col_head" :span="6"> |
|||
|
|||
<el-radio-group |
|||
v-model="item.datePower.types" |
|||
@change="pickAppDataPower(item.datePower)" |
|||
> |
|||
<el-row> |
|||
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col> |
|||
<el-col :span="24"> |
|||
<el-radio :value="5">指定行政组织</el-radio> |
|||
<el-tree-select |
|||
v-if="item.datePower.types == 5" |
|||
v-model="item.datePower.attribute" |
|||
:data="orgTree" |
|||
style="width: 100%" |
|||
node-key="id" |
|||
:props="systemMenuTreePropsing" |
|||
clearable |
|||
multiple |
|||
:render-after-expand="false" |
|||
show-checkbox |
|||
collapse-tags |
|||
collapse-tags-tooltip |
|||
/> |
|||
</el-col> |
|||
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col> |
|||
</el-row> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</td> |
|||
<td v-if="systemPower.powerType == 'role'" valign="top"> |
|||
<el-scrollbar class="tab_pane_bodyes"> |
|||
<div class="userBox" v-for="item in 30" :key="item.id"> |
|||
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" /> |
|||
<div> |
|||
<el-text type="primary" >{{item.name}}{{ '('+item.code+')' }}</el-text> |
|||
<el-text type="primary" >{{item.orgName}}</el-text> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-scrollbar> |
|||
|
|||
</td> |
|||
</tr> |
|||
|
|||
</tbody> |
|||
</table> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" /> |
|||
<EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" /> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.roleBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100vh - 170px); |
|||
padding: 15px 20px 0 20px; |
|||
justify-content: space-between; |
|||
.roleLeft{ |
|||
width: 350px; |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
.butBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.searchBox{ |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.treeBox{ |
|||
height: calc(100vh - 330px); |
|||
|
|||
} |
|||
} |
|||
.roleright{ |
|||
width: calc(100% - 370px); |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
:deep .el-tabs__content{ |
|||
padding: 15px 15px 15px 0px; |
|||
} |
|||
:deep .el-main{ |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.userTitleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 0px 15px 0px; |
|||
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2); |
|||
} |
|||
.userTitleBoxes{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.pickButBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.scrollBox{ |
|||
margin-top: 5px; |
|||
height: calc(100vh - 320px); |
|||
} |
|||
.userBox{ |
|||
width: 100%; |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-items: space-between; |
|||
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2); |
|||
div{ |
|||
span{ |
|||
display: flex; |
|||
width: 100%; |
|||
padding: 0 5px; |
|||
color:rgba($color: #000000, $alpha: 0.6); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.tabsTitle{ |
|||
padding: 0 15px; |
|||
} |
|||
.tabsTitleCont{ |
|||
padding: 0 35px; |
|||
} |
|||
.treeRoleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
.spanButBox{ |
|||
span{ |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
.tree_sapn { |
|||
padding: 0 10px 0 0; |
|||
} |
|||
|
|||
|
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.appListBox { |
|||
width: 100%; |
|||
li { |
|||
padding: 10px 2px; |
|||
border-bottom: 1px solid #ececec; |
|||
cursor: pointer; |
|||
} |
|||
li.active { |
|||
background-color: #a0cfff; |
|||
} |
|||
} |
|||
.tab_pane_box { |
|||
height: calc(100vh - 310px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.row_head{ |
|||
background-color: #f5f7fa; |
|||
color: #000000; |
|||
text-align: center; |
|||
border: 1px solid #E4E7ED; |
|||
} |
|||
.roe_col_head{ |
|||
padding: 5px 5px; |
|||
} |
|||
.left_right{ |
|||
border-left: 1px solid #E4E7ED; |
|||
border-right: 1px solid #E4E7ED; |
|||
border-bottom: 1px solid #E4E7ED; |
|||
} |
|||
.left_line{ |
|||
border-right: 1px solid #E4E7ED; |
|||
} |
|||
.tab_pane_body { |
|||
height: calc(100vh - 340px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.tab_pane_bodyes { |
|||
height: calc(100vh - 320px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.appPickPower{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,903 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-10-21 10:06:51 |
|||
@ 备注: 在线人数 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index' |
|||
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types' |
|||
import type { TreeNode,TreeInstance } from 'element-plus' |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { getOrgTreeList } from "@/api/hr/org/index"; |
|||
import { appPowerUnit } from "@/api/system/roleapi/power"; |
|||
import type { getSystemPower,AppPowerTree } from "@/api/system/roleapi/types"; |
|||
import { appTableBut, appListBut } from "@/utils/workflow/const"; |
|||
import { |
|||
gainAppList, |
|||
gainAppTableListNew, |
|||
getMyPeoplceAndSunOrg, |
|||
getMyPeopleAndSunOrgPost, |
|||
getPowerPageUser |
|||
} from "@/api/system/roleapi/postrole"; |
|||
import { |
|||
custerAppInfo |
|||
} from "@/api/system/roleapi/types"; |
|||
import type { LoadFunction } from 'element-plus' |
|||
|
|||
|
|||
|
|||
import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue' |
|||
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue' |
|||
|
|||
const squareUrl = ref<string>( |
|||
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" |
|||
); |
|||
const orgTree = ref<orgInfo[]>([]) |
|||
const roleGroupOrInfo = ref(1) |
|||
const searchQuery = ref('') |
|||
const orgWorkRole = ref("org") |
|||
const appSysPick = ref("system") |
|||
const treeRef = ref<TreeInstance>() |
|||
const treeRefOrg = ref<TreeInstance>() |
|||
const roleListdata = ref<RoleListTree[]>([]) |
|||
const orgPostisListdata = ref<orgAndPostisListTree[]>([]) |
|||
const treeBoxHeight = ref(300) |
|||
const treeBoxHeightOrg = ref(300) |
|||
const roleLeft = ref() |
|||
const systemPowerTree = ref<AppPowerTree[]>([]) |
|||
const ownerPeople = ref<any>([]) |
|||
|
|||
const props = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const propsOrg = { |
|||
value: 'id', |
|||
label: 'name', |
|||
disabled:'status', |
|||
children: 'child', |
|||
} |
|||
const propsOrgPost = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const searchUser = reactive({ |
|||
page:1, |
|||
pageSize:19, |
|||
name:"", |
|||
total:0, |
|||
}); |
|||
const systemPower = ref<getSystemPower>({ |
|||
powerType:"org", |
|||
appType:"appsystem", |
|||
appSystem:"system", |
|||
roleId:"", |
|||
}) |
|||
const roleLoading = ref(false) |
|||
const openRoleGroup = ref(false) |
|||
const orgLoading = ref(false) |
|||
const orgPostLoading = ref(false) |
|||
|
|||
const appList = ref<custerAppInfo[]>([]); |
|||
//搜索角色 |
|||
const onQueryChanged = (query: string) => { |
|||
treeRef.value!.filter(query) |
|||
} |
|||
//搜索行政组织 |
|||
const onQueryChangedOrg = (query: string) => { |
|||
// treeRefOrg.value!.filter(query) |
|||
searchUser.page = 1 |
|||
searchUser.total = 0 |
|||
fpickUserTabs() |
|||
} |
|||
const filterMethod = (query: string, node: any) => node.label!.includes(query) |
|||
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query) |
|||
|
|||
//监测赋权组 |
|||
watch(()=>systemPower.value.powerType,(val:string)=>{ |
|||
console.log("监测赋权组",val) |
|||
getSystemPowerSub(); |
|||
switch(val){ |
|||
case "org": |
|||
getOrgTreeAry(); |
|||
break; |
|||
case "job": |
|||
getOrgPostisTree() |
|||
break; |
|||
case "role": |
|||
getRoleTree(); |
|||
break; |
|||
case "person": |
|||
fpickUserTabs(); |
|||
break; |
|||
default: |
|||
} |
|||
|
|||
if(systemPower.value.appSystem=="app"){ |
|||
getAppList(); |
|||
}else{ |
|||
getSystemPowerSub(); |
|||
} |
|||
|
|||
},{ |
|||
deep:true |
|||
}) |
|||
//选中角色节点 |
|||
const pickRoleTree = (data:any) => { |
|||
if(data.status && data.types==1){ |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
} |
|||
//选择行政组织 |
|||
const pickOrgTree = (data:any) => { |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
//获取角色树 |
|||
const getRoleTree = () => { |
|||
roleLoading.value = true |
|||
giveRoleTree().then(({data})=>{ |
|||
console.log("监测赋权组------->",data) |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id |
|||
} |
|||
roleListdata.value=data; |
|||
roleLoading.value = false; |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
} |
|||
const editRoleCont = ref<RoleFormInfo>() |
|||
const openEditRoleGroup = ref(false) |
|||
//编辑角色信息 |
|||
const editMyInfoIcon = (data:RoleListTree,types:number) => { |
|||
console.log("编辑角色信息------->",data) |
|||
console.log("编辑角色信息---types---->",types) |
|||
switch(types){ |
|||
case 1: |
|||
editRoleStatusBut(data.id,2) |
|||
break; |
|||
case 2: |
|||
editRoleStatusBut(data.id,1) |
|||
break; |
|||
case 3: |
|||
editRoleCont.value = { |
|||
id:data.id, |
|||
name:data.label, |
|||
type:data.types, |
|||
superior:data.superior, |
|||
sort:data.sort |
|||
} |
|||
openEditRoleGroup.value = true |
|||
break; |
|||
case 4: |
|||
ElMessageBox.confirm( |
|||
"您确定要删除此信息吗？一经删除！数据将不可恢复！请慎重操作！", |
|||
"警告", |
|||
{ |
|||
confirmButtonText: '确定删除', |
|||
cancelButtonText: '取消删除', |
|||
type: 'warning', |
|||
} |
|||
).then(()=>{ |
|||
editRoleStatusBut(data.id,3) |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
//编辑角色状态 |
|||
const editRoleStatusBut = (id:string|number,types:number) => { |
|||
// console.log("编辑角色状态--->",id) |
|||
editRoleStatus({id:id.toString(),status:types}).then((data:any)=>{ |
|||
if(data.code==0){ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
getRoleTree() |
|||
}else{ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
//添加角色组 |
|||
const addRoleGroup = (types:number) => { |
|||
|
|||
roleGroupOrInfo.value = types |
|||
openRoleGroup.value = true |
|||
} |
|||
//获取行政组织树 |
|||
const getOrgTreeAry = () => { |
|||
roleLoading.value = true |
|||
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){ |
|||
|
|||
getOrgTreeList({ orgid: 0 }) |
|||
.then(({ data }) => { |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id |
|||
} |
|||
orgTree.value = data |
|||
roleLoading.value = false |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
}else{ |
|||
roleLoading.value = false |
|||
} |
|||
|
|||
} |
|||
//获取行政组织及岗位 |
|||
const getOrgPostisTree = () => { |
|||
orgPostLoading.value=true |
|||
if(!Array.isArray(orgPostisListdata.value) || orgPostisListdata.value.length<=0){ |
|||
|
|||
getOrgPostTree({id:"313"}).then(({data})=>{ |
|||
console.log("获取行政组织及岗位--------->",data) |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id |
|||
} |
|||
orgPostisListdata.value = data |
|||
orgPostLoading.value=false |
|||
}).finally(()=>{orgPostLoading.value=false}) |
|||
}else{ |
|||
orgPostLoading.value=true |
|||
} |
|||
} |
|||
|
|||
//获取平台授权项目 |
|||
const getSystemPowerSub = () => { |
|||
appPowerUnit(systemPower.value).then(({data})=>{ |
|||
console.log("获取平台授权项目------->",data) |
|||
systemPowerTree.value = data |
|||
}) |
|||
} |
|||
|
|||
const activeAppId = ref<string>(""); |
|||
const appTableList = ref<custerAppTablePower[]>([]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 14:20:47 |
|||
@ 功能: 获取自定义App |
|||
*/ |
|||
const getAppList = () => { |
|||
gainAppList().then((data: any) => { |
|||
console.log("获取自定义App", data); |
|||
appList.value = data.data; |
|||
if (data.data && data.data.length > 0) { |
|||
if (data.data[0] && data.data[0].signCode) { |
|||
activeAppId.value = data.data[0].signCode; |
|||
getAppTableList(); |
|||
} |
|||
} |
|||
console.log("获取自定义App", activeAppId.value); |
|||
}); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 16:00:19 |
|||
@ 功能: 获取对应App下边的表单 |
|||
*/ |
|||
const getAppTableList = () => { |
|||
systemPower.value.roleId = activeAppId.value |
|||
gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appType,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then( |
|||
(data: any) => { |
|||
console.log("获取对应App下边的表单", data); |
|||
if (Array.isArray(data.data)) { |
|||
appTableList.value = data.data; |
|||
} else { |
|||
appTableList.value = []; |
|||
} |
|||
} |
|||
); |
|||
}; |
|||
watch(()=>systemPower.value.appSystem,(val:string)=>{ |
|||
if(val=="app"){ |
|||
getAppList(); |
|||
} |
|||
},{ |
|||
immediate:true |
|||
}) |
|||
onMounted(()=>{ |
|||
// getOrgTreeAry(); |
|||
getSystemPowerSub(); |
|||
console.log("高度-----1---->",roleLeft.value?.offsetHeight) |
|||
nextTick(()=>{ |
|||
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140 |
|||
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100 |
|||
}) |
|||
|
|||
}) |
|||
watch( |
|||
() => activeAppId.value, |
|||
(val) => { |
|||
getAppTableList(); |
|||
}, |
|||
{ |
|||
immediate:true |
|||
} |
|||
); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-14 15:01:26 |
|||
@ 功能: 选择App数据 |
|||
*/ |
|||
const pickAppList = (val: custerAppInfo) => { |
|||
activeAppId.value = val.signCode; |
|||
}; |
|||
const systemMenuTreePropsing = { |
|||
children: "child", |
|||
label: "name", |
|||
value: "id", |
|||
}; |
|||
interface Tree { |
|||
name: string |
|||
leaf?: boolean |
|||
} |
|||
|
|||
const propsLoading = { |
|||
label: 'name', |
|||
children: 'zones', |
|||
isLeaf: 'isLeaf', |
|||
} |
|||
const loadNode: LoadFunction<Tree> = (node, resolve, reject) => { |
|||
console.log("node============>",node) |
|||
console.log("resolve===>",resolve) |
|||
if (node.level === 0) { |
|||
getMyPeoplceAndSunOrg({id:"313",level:node.level}).then((res) => { |
|||
console.log("res================>",res) |
|||
resolve(res.data) |
|||
}) |
|||
} |
|||
|
|||
if (node.level > 0){ |
|||
getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => { |
|||
console.log("res=========1=======>",res.data) |
|||
if(res.data && Array.isArray(res.data) && res.data.length > 0){ |
|||
resolve(res.data) |
|||
}else{ |
|||
resolve([]) |
|||
} |
|||
}).catch(() => { |
|||
return reject() |
|||
}) |
|||
} |
|||
} |
|||
|
|||
const loadNodePost: LoadFunction<Tree> = (node, resolve, reject) => { |
|||
console.log("node============>",node) |
|||
console.log("resolve===>",resolve) |
|||
if (node.level === 0) { |
|||
getMyPeopleAndSunOrgPost({id:"313",level:node.level,types:node.data.types}).then((res) => { |
|||
console.log("res================>",res) |
|||
resolve(res.data) |
|||
}) |
|||
} |
|||
|
|||
if (node.level > 0){ |
|||
getMyPeopleAndSunOrgPost({id:node.data.id.toString(),level:1,types:node.data.types}).then((res) => { |
|||
console.log("res=========1=======>",res.data) |
|||
if(res.data && Array.isArray(res.data) && res.data.length > 0){ |
|||
resolve(res.data) |
|||
}else{ |
|||
resolve([]) |
|||
} |
|||
}).catch(() => { |
|||
return reject() |
|||
}) |
|||
} |
|||
} |
|||
//获取人员信息 |
|||
const fpickUserTabs = () => { |
|||
getPowerPageUser(searchUser).then((res) => { |
|||
console.log("res================>",res) |
|||
ownerPeople.value = res.data.list |
|||
searchUser.total = res.data.total |
|||
}) |
|||
} |
|||
//分页 |
|||
const pageCurrentChange = (val:number) => { |
|||
searchUser.page = val |
|||
fpickUserTabs() |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="roleBox"> |
|||
<div ref="roleLeft" class="roleLeft"> |
|||
<el-tabs v-model="systemPower.powerType" class="demo-tabs"> |
|||
<el-tab-pane label="组织" name="org"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">组织</el-text> |
|||
</template> |
|||
<el-scrollbar class="tab_pane_bodyLoading"> |
|||
<el-tree |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:props="propsLoading" |
|||
:load="loadNode" |
|||
:highlight-current="true" |
|||
:expand-on-click-node="false" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
node-key="id" |
|||
lazy |
|||
show-checkbox |
|||
@node-click="pickOrgTree" |
|||
/> |
|||
</el-scrollbar> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="岗位" name="job"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">岗位</el-text> |
|||
</template> |
|||
<el-scrollbar class="tab_pane_bodyLoading"> |
|||
<el-tree |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:props="propsLoading" |
|||
:load="loadNodePost" |
|||
:highlight-current="true" |
|||
:expand-on-click-node="false" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
node-key="id" |
|||
lazy |
|||
show-checkbox |
|||
@node-click="pickOrgTree" |
|||
/> |
|||
</el-scrollbar> |
|||
|
|||
</el-tab-pane> |
|||
<el-tab-pane label="角色" name="role"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">角色</el-text> |
|||
</template> |
|||
<div class="butBox"> |
|||
<el-button type="primary" @click="addRoleGroup(1)">新建角色组</el-button> |
|||
<el-button type="primary" @click="addRoleGroup(2)">新建角色</el-button> |
|||
</div> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRef" |
|||
style="max-width: 350px;" |
|||
:data="roleListdata" |
|||
:props="props" |
|||
:filter-method="filterMethod" |
|||
:height="treeBoxHeight" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickRoleTree" |
|||
> |
|||
<template #default="{ node }" > |
|||
<div class="treeRoleBox"> |
|||
<span>{{ node.label }}</span> |
|||
<div class="spanButBox"> |
|||
<el-text v-if="node.disabled" type="warning" size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text> |
|||
<el-text v-else type="success" size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text> |
|||
<el-text type="primary" size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text> |
|||
<el-text type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="个人" name="person"> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchUser.name" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-scrollbar class="tab_pane_bodyes"> |
|||
<div class="userBox" v-for="item in ownerPeople" :key="item.id"> |
|||
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" /> |
|||
<div> |
|||
<el-text type="primary" >{{item.name}}{{ '('+item.code+')' }}</el-text> |
|||
<el-text type="primary" >{{item.org}}</el-text> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-scrollbar> |
|||
<div style="width: 100%; display: flex; justify-content: center; margin-top: 5px;"> |
|||
<el-pagination |
|||
:page-size="searchUser.pageSize" |
|||
|
|||
:pager-count="7" |
|||
layout="prev, pager, next" |
|||
:total="searchUser.total" |
|||
@current-change="pageCurrentChange" |
|||
/> |
|||
</div> |
|||
|
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="roleright"> |
|||
<el-tabs v-model="systemPower.appSystem" class="demo-tabs"> |
|||
<el-tab-pane label="平台" name="system"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">平台</el-text> |
|||
</template> |
|||
|
|||
|
|||
|
|||
|
|||
<el-table |
|||
|
|||
:data="systemPowerTree" |
|||
style="width: 100%; height: calc(100vh - 277px)" |
|||
:cell-style="{ padding: '10px 0' }" |
|||
:header-cell-style="{ background: '#F5F7FA', color: '#909399' }" |
|||
border |
|||
|
|||
row-key="id" |
|||
|
|||
> |
|||
<el-table-column fixed prop="name" label="目录/菜单" width="380" > |
|||
<template #default="scope"> |
|||
<span class="tree_sapn">{{ scope.row.name }}</span> |
|||
<el-tag v-if="scope.row.types === 2" type="warning" size="small">目录</el-tag> |
|||
<el-tag v-if="scope.row.types === 1" type="success" size="small">菜单</el-tag> |
|||
<el-tag v-if="scope.row.types === 4" type="danger" size="small">按钮</el-tag> |
|||
<el-tag v-if="scope.row.types === 3" type="info" size="small">外链</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="isTrue" label="授权" width="80" align="center" > |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.isTrue" label="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="buttenPower" label="操作按钮" min-width="380" > |
|||
<template #header> |
|||
<div class="pickButBox"> |
|||
<el-text >操作按钮</el-text> |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox v-for="item in scope.row.buttenPower" :key="item" v-model="scope.row.isTrue" :label="item.name" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
|
|||
|
|||
</el-tab-pane> |
|||
<el-tab-pane label="应用" name="app"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">应用</el-text> |
|||
</template> |
|||
|
|||
|
|||
|
|||
<table class="table_body"> |
|||
<thead> |
|||
<tr v-if="systemPower.powerType == 'role'"> |
|||
<td align="center" width="20%">应用</td> |
|||
<td align="center" width="50%">应用详情</td> |
|||
</tr> |
|||
<tr v-else> |
|||
<td align="center" width="20%">应用</td> |
|||
<td width="80%"> |
|||
<div class="appPickPower"> |
|||
应用详情 |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr > |
|||
<td valign="top"> |
|||
<el-scrollbar class="tab_pane_box"> |
|||
<ul class="appListBox"> |
|||
<li v-for="item in appList" :key="item" @click="pickAppList(item)">{{ item.name }}</li> |
|||
</ul> |
|||
</el-scrollbar> |
|||
</td> |
|||
<td valign="top"> |
|||
<el-row class="row_head"> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
页面 |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
表单权力 |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
列表权限 |
|||
</el-col> |
|||
<el-col class="roe_col_head" :span="6"> |
|||
数据权限 |
|||
</el-col> |
|||
</el-row> |
|||
<el-scrollbar class="tab_pane_body"> |
|||
<el-row class="left_right" v-for="item in appTableList" :key="item.id"> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
{{ item.name }} |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
|
|||
<el-checkbox-group v-model="item.tablePower"> |
|||
<el-checkbox |
|||
v-for="city in appTableBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
|
|||
<el-checkbox-group v-if="item.istIsTrue" v-model="item.listPower"> |
|||
<el-checkbox |
|||
v-for="city in appListBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col class="roe_col_head" :span="6"> |
|||
|
|||
<el-radio-group |
|||
v-model="item.datePower.types" |
|||
@change="pickAppDataPower(item.datePower)" |
|||
> |
|||
<el-row> |
|||
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col> |
|||
<el-col :span="24"> |
|||
<el-radio :value="5">指定行政组织</el-radio> |
|||
<el-tree-select |
|||
v-if="item.datePower.types == 5" |
|||
v-model="item.datePower.attribute" |
|||
:data="orgTree" |
|||
style="width: 100%" |
|||
node-key="id" |
|||
:props="systemMenuTreePropsing" |
|||
clearable |
|||
multiple |
|||
:render-after-expand="false" |
|||
show-checkbox |
|||
collapse-tags |
|||
collapse-tags-tooltip |
|||
/> |
|||
</el-col> |
|||
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col> |
|||
</el-row> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</td> |
|||
|
|||
</tr> |
|||
|
|||
</tbody> |
|||
</table> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" /> |
|||
<EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" /> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.roleBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100vh - 170px); |
|||
padding: 15px 20px 0 20px; |
|||
justify-content: space-between; |
|||
.roleLeft{ |
|||
width: 350px; |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
.butBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.searchBox{ |
|||
padding: 0 10px 5px 10px; |
|||
} |
|||
.treeBox{ |
|||
height: calc(100vh - 330px); |
|||
|
|||
} |
|||
} |
|||
.roleright{ |
|||
width: calc(100% - 370px); |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
:deep .el-tabs__content{ |
|||
padding: 15px 15px 15px 0px; |
|||
} |
|||
:deep .el-main{ |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.userTitleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 0px 15px 0px; |
|||
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2); |
|||
} |
|||
.userTitleBoxes{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.pickButBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.scrollBox{ |
|||
margin-top: 5px; |
|||
height: calc(100vh - 320px); |
|||
} |
|||
|
|||
} |
|||
.tabsTitle{ |
|||
padding: 0 15px; |
|||
} |
|||
.tabsTitleCont{ |
|||
padding: 0 35px; |
|||
} |
|||
.treeRoleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
.spanButBox{ |
|||
span{ |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
.tree_sapn { |
|||
padding: 0 10px 0 0; |
|||
} |
|||
|
|||
|
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.appListBox { |
|||
width: 100%; |
|||
li { |
|||
padding: 10px 2px; |
|||
border-bottom: 1px solid #ececec; |
|||
cursor: pointer; |
|||
} |
|||
li.active { |
|||
background-color: #a0cfff; |
|||
} |
|||
} |
|||
.tab_pane_box { |
|||
height: calc(100vh - 310px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.row_head{ |
|||
background-color: #f5f7fa; |
|||
color: #000000; |
|||
text-align: center; |
|||
border: 1px solid #E4E7ED; |
|||
} |
|||
.roe_col_head{ |
|||
padding: 5px 5px; |
|||
} |
|||
.left_right{ |
|||
border-left: 1px solid #E4E7ED; |
|||
border-right: 1px solid #E4E7ED; |
|||
border-bottom: 1px solid #E4E7ED; |
|||
} |
|||
.left_line{ |
|||
border-right: 1px solid #E4E7ED; |
|||
} |
|||
.tab_pane_body { |
|||
height: calc(100vh - 340px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.tab_pane_bodyes { |
|||
height: calc(100vh - 320px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.tab_pane_bodyLoading { |
|||
height: calc(100vh - 250px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.appPickPower{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.userBox{ |
|||
width: 100%; |
|||
min-height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-items: space-between; |
|||
padding: 0 10px; |
|||
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2); |
|||
div{ |
|||
span{ |
|||
display: flex; |
|||
width: 100%; |
|||
padding: 0 5px; |
|||
color:rgba($color: #000000, $alpha: 0.6); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,819 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-10-21 10:06:51 |
|||
@ 备注: 在线人数 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index' |
|||
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types' |
|||
import type { TreeNode,TreeInstance } from 'element-plus' |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import { orgInfo } from "@/api/hr/org/type"; |
|||
import { getOrgTreeList } from "@/api/hr/org/index"; |
|||
import { appPowerUnit } from "@/api/system/roleapi/power"; |
|||
import type { getSystemPower,AppPowerTree } from "@/api/system/roleapi/types"; |
|||
import { appTableBut, appListBut } from "@/utils/workflow/const"; |
|||
import { |
|||
gainAppList, |
|||
gainAppTableListNew, |
|||
getMyPeoplceAndSunOrg, |
|||
getMyPeopleAndSunOrgPost, |
|||
getPowerPageUser |
|||
} from "@/api/system/roleapi/postrole"; |
|||
import { |
|||
custerAppInfo |
|||
} from "@/api/system/roleapi/types"; |
|||
|
|||
|
|||
|
|||
import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue' |
|||
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue' |
|||
|
|||
const squareUrl = ref<string>( |
|||
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" |
|||
); |
|||
const orgTree = ref<orgInfo[]>([]) |
|||
const roleGroupOrInfo = ref(1) |
|||
const searchQuery = ref('') |
|||
const orgWorkRole = ref("org") |
|||
const appSysPick = ref("system") |
|||
const treeRef = ref<TreeInstance>() |
|||
const treeRefOrg = ref<TreeInstance>() |
|||
const treeRefOrgPost = ref<TreeInstance>() |
|||
const roleListdata = ref<RoleListTree[]>([]) |
|||
const orgPostisListdata = ref<orgAndPostisListTree[]>([]) |
|||
const treeBoxHeight = ref(300) |
|||
const treeBoxHeightOrg = ref(300) |
|||
const roleLeft = ref() |
|||
const systemPowerTree = ref<AppPowerTree[]>([]) |
|||
const ownerPeople = ref<any>([]) |
|||
|
|||
const props = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const propsOrg = { |
|||
value: 'id', |
|||
label: 'name', |
|||
// disabled:'status', |
|||
children: 'child', |
|||
} |
|||
const propsOrgPost = { |
|||
value: 'id', |
|||
label: 'label', |
|||
disabled:'status', |
|||
children: 'children', |
|||
} |
|||
const systemPower = ref<getSystemPower>({ |
|||
powerType:"org", |
|||
appType:"appsystem", |
|||
appSystem:"system", |
|||
roleId:"", |
|||
}) |
|||
const roleLoading = ref(false) |
|||
const openRoleGroup = ref(false) |
|||
const orgLoading = ref(false) |
|||
const orgPostLoading = ref(false) |
|||
|
|||
const appList = ref<custerAppInfo[]>([]); |
|||
//搜索角色 |
|||
const onQueryChanged = (query: string) => { |
|||
treeRef.value!.filter(query) |
|||
} |
|||
//搜索行政组织 |
|||
const onQueryChangedOrg = (query: string) => { |
|||
treeRefOrg.value!.filter(query) |
|||
} |
|||
const filterMethod = (query: string, node: any) => node.label!.includes(query) |
|||
const filterMethodOrg = (query: string, node: any) => node.label!.includes(query) |
|||
|
|||
//监测赋权组 |
|||
watch(()=>systemPower.value.powerType,(val:string)=>{ |
|||
console.log("监测赋权组",val) |
|||
getSystemPowerSub(); |
|||
switch(val){ |
|||
case "org": |
|||
getOrgTreeAry(); |
|||
break; |
|||
case "job": |
|||
getOrgPostisTree() |
|||
break; |
|||
case "role": |
|||
getRoleTree(); |
|||
break; |
|||
default: |
|||
} |
|||
|
|||
if(systemPower.value.appSystem=="app"){ |
|||
getAppList(); |
|||
}else{ |
|||
getSystemPowerSub(); |
|||
} |
|||
|
|||
},{ |
|||
deep:true |
|||
}) |
|||
//选中角色节点 |
|||
const pickRoleTree = (data:any) => { |
|||
if(data.status && data.types==1){ |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
} |
|||
//选择行政组织 |
|||
const pickOrgTree = (data:any) => { |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
//获取角色树 |
|||
const getRoleTree = () => { |
|||
roleLoading.value = true |
|||
giveRoleTree().then(({data})=>{ |
|||
console.log("监测赋权组------->",data) |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id.toString() |
|||
} |
|||
roleListdata.value=data; |
|||
roleLoading.value = false; |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
} |
|||
const editRoleCont = ref<RoleFormInfo>() |
|||
const openEditRoleGroup = ref(false) |
|||
//编辑角色信息 |
|||
const editMyInfoIcon = (data:RoleListTree,types:number) => { |
|||
console.log("编辑角色信息------->",data) |
|||
console.log("编辑角色信息---types---->",types) |
|||
switch(types){ |
|||
case 1: |
|||
editRoleStatusBut(data.id,2) |
|||
break; |
|||
case 2: |
|||
editRoleStatusBut(data.id,1) |
|||
break; |
|||
case 3: |
|||
editRoleCont.value = { |
|||
id:data.id, |
|||
name:data.label, |
|||
type:data.types, |
|||
superior:data.superior, |
|||
sort:data.sort |
|||
} |
|||
openEditRoleGroup.value = true |
|||
break; |
|||
case 4: |
|||
ElMessageBox.confirm( |
|||
"您确定要删除此信息吗？一经删除！数据将不可恢复！请慎重操作！", |
|||
"警告", |
|||
{ |
|||
confirmButtonText: '确定删除', |
|||
cancelButtonText: '取消删除', |
|||
type: 'warning', |
|||
} |
|||
).then(()=>{ |
|||
editRoleStatusBut(data.id,3) |
|||
}) |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
} |
|||
//编辑角色状态 |
|||
const editRoleStatusBut = (id:string|number,types:number) => { |
|||
// console.log("编辑角色状态--->",id) |
|||
editRoleStatus({id:id.toString(),status:types}).then((data:any)=>{ |
|||
if(data.code==0){ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
getRoleTree() |
|||
}else{ |
|||
ElMessage({ |
|||
message: data.msg, |
|||
type: 'success', |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
//添加角色组 |
|||
const addRoleGroup = (types:number) => { |
|||
|
|||
roleGroupOrInfo.value = types |
|||
openRoleGroup.value = true |
|||
} |
|||
//获取行政组织树 |
|||
const getOrgTreeAry = () => { |
|||
roleLoading.value = true |
|||
if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){ |
|||
|
|||
getOrgTreeList({ orgid: 0 }) |
|||
.then(({ data }) => { |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id.toString() |
|||
} |
|||
orgTree.value = data |
|||
roleLoading.value = false |
|||
}).finally(()=>{roleLoading.value = false}) |
|||
}else{ |
|||
roleLoading.value = false |
|||
} |
|||
|
|||
} |
|||
//获取行政组织及岗位 |
|||
const getOrgPostisTree = () => { |
|||
orgPostLoading.value=true |
|||
if(!Array.isArray(orgPostisListdata.value) || orgPostisListdata.value.length<=0){ |
|||
|
|||
getOrgPostTree({id:"313"}).then(({data})=>{ |
|||
console.log("获取行政组织及岗位--------->",data) |
|||
if(Array.isArray(data) && data.length>0){ |
|||
systemPower.value.roleId=data[0].id.toString() |
|||
} |
|||
orgPostisListdata.value = data |
|||
orgPostLoading.value=false |
|||
}).finally(()=>{orgPostLoading.value=false}) |
|||
}else{ |
|||
orgPostLoading.value=true |
|||
} |
|||
} |
|||
|
|||
//获取平台授权项目 |
|||
const getSystemPowerSub = () => { |
|||
appPowerUnit(systemPower.value).then(({data})=>{ |
|||
console.log("获取平台授权项目------->",data) |
|||
systemPowerTree.value = data |
|||
}) |
|||
} |
|||
|
|||
const activeAppId = ref<string>(""); |
|||
const appTableList = ref<custerAppTablePower[]>([]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 14:20:47 |
|||
@ 功能: 获取自定义App |
|||
*/ |
|||
const getAppList = () => { |
|||
gainAppList().then((datassssssssssssssssssssssssssssssssssssssssssssssssssssss: any) => { |
|||
console.log("获取自定义App", data); |
|||
appList.value = data.data; |
|||
if (data.data && data.data.length > 0) { |
|||
if (data.data[0] && data.data[0].signCode) { |
|||
activeAppId.value = data.data[0].signCode; |
|||
getAppTableList(); |
|||
} |
|||
} |
|||
console.log("获取自定义App", activeAppId.value); |
|||
}); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 16:00:19 |
|||
@ 功能: 获取对应App下边的表单 |
|||
*/ |
|||
const getAppTableList = () => { |
|||
systemPower.value.roleId = activeAppId.value.toString() |
|||
gainAppTableListNew({id:activeAppId.value,appType:systemPower.value.appType,powerType:systemPower.value.powerType,roleId:systemPower.value.roleId}).then( |
|||
(data: any) => { |
|||
console.log("获取对应App下边的表单", data); |
|||
if (Array.isArray(data.data)) { |
|||
appTableList.value = data.data; |
|||
} else { |
|||
appTableList.value = []; |
|||
} |
|||
} |
|||
); |
|||
}; |
|||
watch(()=>systemPower.value.appSystem,(val:string)=>{ |
|||
if(val=="app"){ |
|||
getAppList(); |
|||
} |
|||
},{ |
|||
immediate:true |
|||
}) |
|||
onMounted(()=>{ |
|||
getOrgTreeAry(); |
|||
getSystemPowerSub(); |
|||
console.log("高度-----1---->",roleLeft.value?.offsetHeight) |
|||
nextTick(()=>{ |
|||
treeBoxHeight.value = roleLeft.value?.offsetHeight - 140 |
|||
treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100 |
|||
}) |
|||
|
|||
}) |
|||
watch( |
|||
() => activeAppId.value, |
|||
(val) => { |
|||
getAppTableList(); |
|||
}, |
|||
{ |
|||
immediate:true |
|||
} |
|||
); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-14 15:01:26 |
|||
@ 功能: 选择App数据 |
|||
*/ |
|||
const pickAppList = (val: custerAppInfo) => { |
|||
activeAppId.value = val.signCode; |
|||
}; |
|||
const systemMenuTreePropsing = { |
|||
children: "child", |
|||
label: "name", |
|||
value: "id", |
|||
}; |
|||
|
|||
|
|||
//搜索行政组织岗位 |
|||
const onQuedOrg = (query: string) => { |
|||
treeRefOrgPost.value!.filter(query) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="roleBox"> |
|||
<div ref="roleLeft" class="roleLeft"> |
|||
<el-tabs v-model="systemPower.powerType" class="demo-tabs"> |
|||
<el-tab-pane label="组织" name="org"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">组织</el-text> |
|||
</template> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrg" |
|||
style="max-width: 350px;" |
|||
:data="orgTree" |
|||
:props="propsOrg" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
show-checkbox |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="岗位" name="job"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">岗位</el-text> |
|||
</template> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQuedOrg"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrgPost" |
|||
style="max-width: 350px;" |
|||
:data="orgPostisListdata" |
|||
:props="propsOrgPost" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
show-checkbox |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="角色" name="role"> |
|||
<template #label> |
|||
<el-text class="tabsTitle">角色</el-text> |
|||
</template> |
|||
<div class="butBox"> |
|||
<el-button type="primary" @click="addRoleGroup(1)">新建角色组</el-button> |
|||
<el-button type="primary" @click="addRoleGroup(2)">新建角色</el-button> |
|||
</div> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRef" |
|||
style="max-width: 350px;" |
|||
:data="roleListdata" |
|||
:props="props" |
|||
:filter-method="filterMethod" |
|||
:height="treeBoxHeight" |
|||
v-loading="roleLoading" |
|||
|
|||
show-checkbox |
|||
@node-click="pickRoleTree" |
|||
> |
|||
<template #default="{ node }" > |
|||
<div class="treeRoleBox"> |
|||
<span>{{ node.label }}</span> |
|||
<div class="spanButBox"> |
|||
<el-text v-if="node.disabled" type="warning" size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text> |
|||
<el-text v-else type="success" size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text> |
|||
<el-text type="primary" size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text> |
|||
<el-text type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-tree-v2> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="个人" name="person"> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的人" :suffix-icon="Search" @input="onQueryChangedOrg"/> |
|||
</div> |
|||
<el-scrollbar class="tab_pane_bodyes"> |
|||
<div class="userBox" v-for="item in 30" :key="item.id"> |
|||
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" /> |
|||
<div> |
|||
<el-text type="primary" >{{item.name}}{{ '('+item.code+')' }}</el-text> |
|||
<el-text type="primary" >{{item.orgName}}</el-text> |
|||
</div> |
|||
</div> |
|||
|
|||
</el-scrollbar> |
|||
<div style="width: 100%; display: flex; justify-content: center; margin-top: 5px;"> |
|||
<el-pagination |
|||
:page-size="19" |
|||
:pager-count="7" |
|||
layout="prev, pager, next" |
|||
:total="2" |
|||
|
|||
/> |
|||
</div> |
|||
|
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<div class="roleright"> |
|||
<el-tabs v-model="systemPower.appSystem" class="demo-tabs"> |
|||
<el-tab-pane label="平台" name="system"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">平台</el-text> |
|||
</template> |
|||
|
|||
|
|||
|
|||
|
|||
<el-table |
|||
|
|||
:data="systemPowerTree" |
|||
style="width: 100%; height: calc(100vh - 277px)" |
|||
:cell-style="{ padding: '10px 0' }" |
|||
:header-cell-style="{ background: '#F5F7FA', color: '#909399' }" |
|||
border |
|||
|
|||
row-key="id" |
|||
|
|||
> |
|||
<el-table-column fixed prop="name" label="目录/菜单" width="380" > |
|||
<template #default="scope"> |
|||
<span class="tree_sapn">{{ scope.row.name }}</span> |
|||
<el-tag v-if="scope.row.types === 2" type="warning" size="small">目录</el-tag> |
|||
<el-tag v-if="scope.row.types === 1" type="success" size="small">菜单</el-tag> |
|||
<el-tag v-if="scope.row.types === 4" type="danger" size="small">按钮</el-tag> |
|||
<el-tag v-if="scope.row.types === 3" type="info" size="small">外链</el-tag> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="isTrue" label="授权" width="80" align="center" > |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.isTrue" label="" /> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="buttenPower" label="操作按钮" min-width="380" > |
|||
<template #header> |
|||
<div class="pickButBox"> |
|||
<el-text >操作按钮</el-text> |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox v-for="item in scope.row.buttenPower" :key="item" v-model="scope.row.isTrue" :label="item.name" /> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
|
|||
|
|||
</el-tab-pane> |
|||
<el-tab-pane label="应用" name="app"> |
|||
<template #label> |
|||
<el-text class="tabsTitleCont">应用</el-text> |
|||
</template> |
|||
|
|||
|
|||
|
|||
<table class="table_body"> |
|||
<thead> |
|||
<tr> |
|||
<td align="center" width="20%">应用</td> |
|||
<td width="80%"> |
|||
<div class="appPickPower"> |
|||
应用详情 |
|||
<el-button type="primary" size="small">确定授权</el-button> |
|||
</div> |
|||
</td> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr > |
|||
<td valign="top"> |
|||
<el-scrollbar class="tab_pane_box"> |
|||
<ul class="appListBox"> |
|||
<li v-for="item in appList" :key="item" @click="pickAppList(item)">{{ item.name }}</li> |
|||
</ul> |
|||
</el-scrollbar> |
|||
</td> |
|||
<td valign="top"> |
|||
<el-row class="row_head"> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
页面 |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
表单权力 |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
列表权限 |
|||
</el-col> |
|||
<el-col class="roe_col_head" :span="6"> |
|||
数据权限 |
|||
</el-col> |
|||
</el-row> |
|||
<el-scrollbar class="tab_pane_body"> |
|||
<el-row class="left_right" v-for="item in appTableList" :key="item.id"> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
{{ item.name }} |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
|
|||
<el-checkbox-group v-model="item.tablePower"> |
|||
<el-checkbox |
|||
v-for="city in appTableBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col class="roe_col_head left_line" :span="6"> |
|||
|
|||
<el-checkbox-group v-if="item.istIsTrue" v-model="item.listPower"> |
|||
<el-checkbox |
|||
v-for="city in appListBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</el-col> |
|||
<el-col class="roe_col_head" :span="6"> |
|||
|
|||
<el-radio-group |
|||
v-model="item.datePower.types" |
|||
@change="pickAppDataPower(item.datePower)" |
|||
> |
|||
<el-row> |
|||
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col> |
|||
<el-col :span="24"> |
|||
<el-radio :value="5">指定行政组织</el-radio> |
|||
<el-tree-select |
|||
v-if="item.datePower.types == 5" |
|||
v-model="item.datePower.attribute" |
|||
:data="orgTree" |
|||
style="width: 100%" |
|||
node-key="id" |
|||
:props="systemMenuTreePropsing" |
|||
clearable |
|||
multiple |
|||
:render-after-expand="false" |
|||
show-checkbox |
|||
collapse-tags |
|||
collapse-tags-tooltip |
|||
/> |
|||
</el-col> |
|||
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col> |
|||
</el-row> |
|||
</el-radio-group> |
|||
</el-col> |
|||
</el-row> |
|||
</el-scrollbar> |
|||
</td> |
|||
|
|||
</tr> |
|||
|
|||
</tbody> |
|||
</table> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
<AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" /> |
|||
<EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" /> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.roleBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100vh - 170px); |
|||
padding: 15px 20px 0 20px; |
|||
justify-content: space-between; |
|||
.roleLeft{ |
|||
width: 350px; |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
.butBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.searchBox{ |
|||
padding: 0 10px 5px 10px; |
|||
} |
|||
.treeBox{ |
|||
height: calc(100vh - 330px); |
|||
|
|||
} |
|||
} |
|||
.roleright{ |
|||
width: calc(100% - 370px); |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
:deep .el-tabs__content{ |
|||
padding: 15px 15px 15px 0px; |
|||
} |
|||
:deep .el-main{ |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.userTitleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 0px 15px 0px; |
|||
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2); |
|||
} |
|||
.userTitleBoxes{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.pickButBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.scrollBox{ |
|||
margin-top: 5px; |
|||
height: calc(100vh - 320px); |
|||
} |
|||
|
|||
} |
|||
.tabsTitle{ |
|||
padding: 0 15px; |
|||
} |
|||
.tabsTitleCont{ |
|||
padding: 0 35px; |
|||
} |
|||
.treeRoleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
.spanButBox{ |
|||
span{ |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
.tree_sapn { |
|||
padding: 0 10px 0 0; |
|||
} |
|||
|
|||
|
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.appListBox { |
|||
width: 100%; |
|||
li { |
|||
padding: 10px 2px; |
|||
border-bottom: 1px solid #ececec; |
|||
cursor: pointer; |
|||
} |
|||
li.active { |
|||
background-color: #a0cfff; |
|||
} |
|||
} |
|||
.tab_pane_box { |
|||
height: calc(100vh - 310px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.row_head{ |
|||
background-color: #f5f7fa; |
|||
color: #000000; |
|||
text-align: center; |
|||
border: 1px solid #E4E7ED; |
|||
} |
|||
.roe_col_head{ |
|||
padding: 5px 5px; |
|||
} |
|||
.left_right{ |
|||
border-left: 1px solid #E4E7ED; |
|||
border-right: 1px solid #E4E7ED; |
|||
border-bottom: 1px solid #E4E7ED; |
|||
} |
|||
.left_line{ |
|||
border-right: 1px solid #E4E7ED; |
|||
} |
|||
.tab_pane_body { |
|||
height: calc(100vh - 340px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.tab_pane_bodyes { |
|||
height: calc(100vh - 320px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.appPickPower{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.userBox{ |
|||
width: 100%; |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-items: space-between; |
|||
padding: 0 10px; |
|||
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2); |
|||
div{ |
|||
span{ |
|||
display: flex; |
|||
width: 100%; |
|||
padding: 0 5px; |
|||
color:rgba($color: #000000, $alpha: 0.6); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,283 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-10-21 10:06:51 |
|||
@ 备注: 在线人数 |
|||
--> |
|||
<script lang='ts' setup> |
|||
|
|||
import { |
|||
getMyPeoplceAndSunOrg |
|||
} from "@/api/system/roleapi/postrole"; |
|||
import type { LoadFunction } from 'element-plus' |
|||
|
|||
interface Tree { |
|||
name: string |
|||
leaf?: boolean |
|||
} |
|||
|
|||
const props = { |
|||
label: 'name', |
|||
children: 'zones', |
|||
isLeaf: 'isLeaf', |
|||
} |
|||
let time = 0 |
|||
const loadNode: LoadFunction<Tree> = (node, resolve, reject) => { |
|||
console.log("node============>",node) |
|||
console.log("resolve===>",resolve) |
|||
if (node.level === 0) { |
|||
getMyPeoplceAndSunOrg({id:"313",level:node.level}).then((res) => { |
|||
console.log("res================>",res) |
|||
resolve(res.data) |
|||
}) |
|||
} |
|||
|
|||
if (node.level > 0){ |
|||
getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => { |
|||
console.log("res=========1=======>",res.data) |
|||
if(res.data && Array.isArray(res.data) && res.data.length > 0){ |
|||
resolve(res.data) |
|||
}else{ |
|||
resolve([]) |
|||
} |
|||
}).catch(() => { |
|||
return reject() |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
// time++ |
|||
// if (node.level > 0){ |
|||
// setTimeout(() => { |
|||
|
|||
// if (time > 3) { |
|||
// console.log("node.id============>",node.id) |
|||
// console.log("node.level============>",node.level) |
|||
// getMyPeoplceAndSunOrg({id:node.data.id.toString(),level:1}).then((res) => { |
|||
// console.log("res=========1=======>",res.data) |
|||
// // resolve(res.data.data?.map((item: any) => ({ |
|||
// // name: item.orgName, |
|||
// // id: item.orgId, |
|||
// // isLeaf: item.isLeaf, |
|||
// // zones: [] |
|||
// // })) || []) |
|||
// if(res.data && Array.isArray(res.data) && res.data.length > 0){ |
|||
// resolve(res.data) |
|||
// }else{ |
|||
// resolve([]) |
|||
// } |
|||
// }) |
|||
// }else{ |
|||
// return reject() |
|||
// } |
|||
// }, 3000) |
|||
// } |
|||
} |
|||
//选择行政组织 |
|||
const pickOrgTree = (data:any) => { |
|||
console.log("监测赋权组------->",data) |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="roleBox"> |
|||
<el-tree |
|||
style="max-width: 100%" |
|||
:props="props" |
|||
:load="loadNode" |
|||
:highlight-current="true" |
|||
:expand-on-click-node="false" |
|||
node-key="id" |
|||
lazy |
|||
@node-click="pickOrgTree" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.roleBox{ |
|||
display: flex; |
|||
width: 100%; |
|||
height: calc(100vh - 170px); |
|||
padding: 15px 20px 0 20px; |
|||
justify-content: space-between; |
|||
.roleLeft{ |
|||
width: 350px; |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
.butBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0 10px 10px 10px; |
|||
} |
|||
.searchBox{ |
|||
padding: 0 10px 5px 10px; |
|||
} |
|||
.treeBox{ |
|||
height: calc(100vh - 330px); |
|||
|
|||
} |
|||
} |
|||
.roleright{ |
|||
width: calc(100% - 370px); |
|||
height: calc(100vh - 185px); |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
:deep .el-tabs__content{ |
|||
padding: 15px 15px 15px 0px; |
|||
} |
|||
:deep .el-main{ |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.userTitleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
padding: 0px 0px 15px 0px; |
|||
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2); |
|||
} |
|||
.userTitleBoxes{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.pickButBox{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.scrollBox{ |
|||
margin-top: 5px; |
|||
height: calc(100vh - 320px); |
|||
} |
|||
|
|||
} |
|||
.tabsTitle{ |
|||
padding: 0 15px; |
|||
} |
|||
.tabsTitleCont{ |
|||
padding: 0 35px; |
|||
} |
|||
.treeRoleBox{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
.spanButBox{ |
|||
span{ |
|||
padding: 0 5px; |
|||
} |
|||
} |
|||
} |
|||
.tree_sapn { |
|||
padding: 0 10px 0 0; |
|||
} |
|||
|
|||
|
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.appListBox { |
|||
width: 100%; |
|||
li { |
|||
padding: 10px 2px; |
|||
border-bottom: 1px solid #ececec; |
|||
cursor: pointer; |
|||
} |
|||
li.active { |
|||
background-color: #a0cfff; |
|||
} |
|||
} |
|||
.tab_pane_box { |
|||
height: calc(100vh - 310px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
.table_body { |
|||
background-color: #ffffff; |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid #cccccc; |
|||
padding: 5px; |
|||
table { |
|||
width: 100%; |
|||
td, |
|||
th { |
|||
border: 0px solid #cccccc; |
|||
padding: 0px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.row_head{ |
|||
background-color: #f5f7fa; |
|||
color: #000000; |
|||
text-align: center; |
|||
border: 1px solid #E4E7ED; |
|||
} |
|||
.roe_col_head{ |
|||
padding: 5px 5px; |
|||
} |
|||
.left_right{ |
|||
border-left: 1px solid #E4E7ED; |
|||
border-right: 1px solid #E4E7ED; |
|||
border-bottom: 1px solid #E4E7ED; |
|||
} |
|||
.left_line{ |
|||
border-right: 1px solid #E4E7ED; |
|||
} |
|||
.tab_pane_body { |
|||
height: calc(100vh - 340px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.tab_pane_bodyes { |
|||
height: calc(100vh - 320px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.appPickPower{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.userBox{ |
|||
width: 100%; |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-items: space-between; |
|||
padding: 0 10px; |
|||
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2); |
|||
div{ |
|||
span{ |
|||
display: flex; |
|||
width: 100%; |
|||
padding: 0 5px; |
|||
color:rgba($color: #000000, $alpha: 0.6); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,444 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-17 16:53:07 |
|||
@ 备注: |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const"; |
|||
import { orgInfo } from '@/api/displayboardapi/types'; |
|||
import { appInitAuthorization,tabsAuthorizationMode } from "@/api/system/roleapi/postrole"; |
|||
import type { TabsPaneContext } from 'element-plus' |
|||
|
|||
const props = defineProps({ |
|||
appType: { |
|||
type: String, |
|||
default: "app" |
|||
}, |
|||
powerType: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
roleId: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
orgTree: { |
|||
type: Array as PropType<orgInfo[]>, |
|||
default: () => [] |
|||
} |
|||
}) |
|||
const appLoading = ref(false) |
|||
const submitLoading = ref(false) |
|||
const appPowerArt = ref<any>([]) |
|||
const appGroupButAry = ref<string[]>([]) |
|||
const powerActiveName = reactive({ |
|||
group:"", |
|||
app:"" |
|||
}) |
|||
const systemMenuTreePropsing = { |
|||
children: "child", |
|||
label: "name", |
|||
value: "id", |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 14:20:47 |
|||
@ 功能: 获取自定义App |
|||
*/ |
|||
|
|||
const getAppList = () => { |
|||
appLoading.value=true |
|||
appPowerArt.value = [] |
|||
appGroupButAry.value = [] |
|||
appInitAuthorization({appType:"app",powerType:props.powerType,roleId:props.roleId}).then((data: any) => { |
|||
console.log("获取自定义App", data); |
|||
// appList.value = data.data; |
|||
appPowerArt.value = data.data.appList |
|||
appGroupButAry.value = data.data.groupButPower |
|||
appLoading.value=false |
|||
if(data.data.appList && Array.isArray(data.data.appList)){ |
|||
powerActiveName.group = data.data.appList[0].id |
|||
if(data.data.appList[0].appList && Array.isArray(data.data.appList[0].appList)){ |
|||
powerActiveName.app = data.data.appList[0].appList[0].id |
|||
} |
|||
} |
|||
}).finally(()=>{ |
|||
appLoading.value=false |
|||
submitLoading.value = false |
|||
}) |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 10:17:07 |
|||
@ 功能: 标签被选择 |
|||
*/ |
|||
const handleTabClick = (val:any) => { |
|||
|
|||
if(appPowerArt.value && Array.isArray(appPowerArt.value)){ |
|||
appPowerArt.value.find((item:any) => { |
|||
if(item.id === powerActiveName.group){ |
|||
powerActiveName.app = item.appList[0].id |
|||
} |
|||
}) |
|||
|
|||
// powerActiveName.app = appPowerArt.value.find((item:any) => item.id === powerActiveName.group)?.appList[0].id |
|||
} |
|||
|
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 11:14:56 |
|||
@ 功能: 选择分组 |
|||
*/ |
|||
const handleGroupChange = (item:any) => { |
|||
console.log("-------------------------->",item) |
|||
// if(item.isTrue){ |
|||
if(item.appList && Array.isArray(item.appList)){ |
|||
item.appList.find((app:any) => { |
|||
app.isTrue = item.isTrue |
|||
if(item.isTrue){ |
|||
app.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"] |
|||
}else{ |
|||
app.operationButton = [] |
|||
} |
|||
if(app.appMenuTree && Array.isArray(app.appMenuTree)){ |
|||
app.appMenuTree = handleAppChange(app.appMenuTree,item.isTrue) |
|||
} |
|||
}) |
|||
} |
|||
// } |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 11:23:40 |
|||
@ 功能: 循环递归联动赋值 |
|||
*/ |
|||
const handleAppChange = (item:any,isTrue:boolean) => { |
|||
// console.log("--------循环递归联动赋值------------------>",item) |
|||
if(item && Array.isArray(item)){ |
|||
item.forEach((menu:any) => { |
|||
menu.isTrue = isTrue |
|||
if(isTrue){ |
|||
menu.formPower = [ "zc", "tj", "dy", "sc", "fz"] |
|||
menu.listPower = [ "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] |
|||
}else{ |
|||
menu.formPower = [] |
|||
menu.listPower = [] |
|||
} |
|||
if(menu.children && Array.isArray(menu.children)){ |
|||
menu.children = handleAppChange(menu.children,isTrue) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return item |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 13:48:26 |
|||
@ 功能: 选择App |
|||
*/ |
|||
const handleAppPowerChange = (item:any) => { |
|||
console.log("----------------选择App---------->",item) |
|||
if(item.isTrue){ |
|||
item.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"] |
|||
}else{ |
|||
item.operationButton = [] |
|||
} |
|||
if(item.appMenuTree && Array.isArray(item.appMenuTree)){ |
|||
item.appMenuTree = handleAppChange(item.appMenuTree,item.isTrue) |
|||
} |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 13:58:21 |
|||
@ 功能: 选择App菜单是选中状态下，关联操作按钮 |
|||
*/ |
|||
const handleAppMenuChange = (item:any) => { |
|||
// console.log("----------------选择App菜单---------->",item) |
|||
if(item.isTrue){ |
|||
item.formPower = [ "zc", "tj", "dy", "sc", "fz"] |
|||
item.listPower = [ "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] |
|||
}else{ |
|||
item.formPower = [] |
|||
item.listPower = [] |
|||
} |
|||
if(item.children && Array.isArray(item.children)){ |
|||
item.children = handleAppChange(item.children,item.isTrue) |
|||
} |
|||
} |
|||
onMounted(()=>{ |
|||
// getAppList() |
|||
}) |
|||
defineExpose({ |
|||
getAppList |
|||
}) |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-18 14:16:49 |
|||
@ 功能: 提交授权 |
|||
*/ |
|||
const submitPower = () => { |
|||
submitLoading.value = true |
|||
let sendData:any = { |
|||
appType:"app", |
|||
powerType:props.powerType, |
|||
roleId:props.roleId, |
|||
listPower:appPowerArt.value, |
|||
groupPower:appGroupButAry.value |
|||
} |
|||
if(!props.roleId || props.roleId === ""){ |
|||
ElMessage.error("具体授权属性！") |
|||
submitLoading.value = false |
|||
return |
|||
} |
|||
console.log("----------------提交授权---------->",sendData) |
|||
// submitLoading.value = true |
|||
tabsAuthorizationMode(sendData).then((data: any) => { |
|||
if(data.code === 0){ |
|||
ElMessage.success("授权成功！") |
|||
submitLoading.value = false |
|||
}else{ |
|||
ElMessage.error(data.msg) |
|||
} |
|||
}).catch((err: any) => { |
|||
ElMessage.error(err.message) |
|||
submitLoading.value = false |
|||
}) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-20 15:33:37 |
|||
@ 功能: 全选 |
|||
*/ |
|||
const pickAllBut = (item:any,types:number) => { |
|||
console.log("--全选------------------------>",item,types) |
|||
// item.isTrue = !item.isTrue |
|||
switch(types){ |
|||
case 1: |
|||
// item.pagePowerIsAll = item.isTrue |
|||
item.pagePower = item.pagePowerIsAll ? ["lc","lb","sj","dy","nc"] : [] |
|||
|
|||
break |
|||
case 2: |
|||
// item.formPowerIsAll = item.isTrue |
|||
item.formPower = item.formPowerIsAll ? ["zc", "tj", "dy", "sc", "fz"] : [] |
|||
break |
|||
case 3: |
|||
// item.listPowerIsAll = item.isTrue |
|||
item.listPower = item.listPowerIsAll ? ["newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] : [] |
|||
break |
|||
case 4: |
|||
// item.isTrue = item.isTrue |
|||
item.operationButton = item.isPick ? ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"] : [] |
|||
break |
|||
} |
|||
} |
|||
</script> |
|||
<template> |
|||
<div class="app-tabs-content" v-loading="appLoading"> |
|||
<el-checkbox-group v-model="appGroupButAry"> |
|||
<el-checkbox |
|||
v-for="city in appGroupBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
|
|||
<el-tabs v-model="powerActiveName.group" @tab-change="handleTabClick" class="demo-tabs " > |
|||
<el-tab-pane v-for="item in appPowerArt" :label="item.name" :key="item.id" :name="item.id" class="center-content"> |
|||
<template #label> |
|||
<div class="app-tabs-checkbox"> |
|||
<el-checkbox v-model="item.isTrue" @change="handleGroupChange(item)" /><span>{{item.name}}</span> |
|||
</div> |
|||
|
|||
</template> |
|||
<!--应用--> |
|||
|
|||
|
|||
|
|||
<el-tabs v-model="powerActiveName.app" class="demo-tabs left_hight" tab-position="left"> |
|||
<el-tab-pane v-for="app in item.appList" :label="app.name" :key="app.id" :name="app.id" class="center-content"> |
|||
<template #label> |
|||
<div class="app-tabs-checkbox"> |
|||
<el-checkbox v-model="app.isTrue" @change="handleAppPowerChange(app)" /><span>{{app.name}}</span> |
|||
</div> |
|||
</template> |
|||
|
|||
<div > |
|||
<div style="width:100%"> |
|||
<el-checkbox label="全选" v-model="app.isPick" @change="pickAllBut(app,4)" /> |
|||
</div> |
|||
<div class="app-form-checkbox"> |
|||
<el-checkbox-group v-model="app.operationButton"> |
|||
<el-checkbox |
|||
v-for="city in appDetailBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</div> |
|||
</div> |
|||
<el-table |
|||
:data="app.appMenuTree" |
|||
style="width: 100%;" |
|||
class="tableScrollbar" |
|||
row-key="id" |
|||
border |
|||
default-expand-all |
|||
> |
|||
<el-table-column prop="name" label="栏目名称" > |
|||
<template #default="scope"> |
|||
<el-checkbox v-model="scope.row.isTrue" :value="scope.row.isTrue" @change="handleAppMenuChange(scope.row)" ></el-checkbox> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="pagePower" label="页面权力" > |
|||
<template #header> |
|||
<el-text>页面权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox label="全选" v-model="scope.row.pagePowerIsAll" @change="pickAllBut(scope.row,1)" /> |
|||
<el-checkbox-group v-model="scope.row.pagePower"> |
|||
<el-checkbox |
|||
v-for="city in formBaseBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.value }} {{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="formPower" label="表单权限" > |
|||
<template #header> |
|||
<el-text>表单权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox label="全选" v-model="scope.row.formPowerIsAll" @change="pickAllBut(scope.row,2)" /> |
|||
<el-checkbox-group v-model="scope.row.formPower"> |
|||
<el-checkbox |
|||
v-for="city in appTableBut" |
|||
:key="city.value" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="listPower" label="listPower" > |
|||
<template #header> |
|||
<el-text>列表权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox label="全选" v-model="scope.row.listPowerIsAll" @change="pickAllBut(scope.row,3)" /> |
|||
<el-checkbox-group v-model="scope.row.listPower"> |
|||
<el-checkbox |
|||
v-for="city in appListBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="visibleRange" label="数据权限" > |
|||
<template #header> |
|||
<el-text>数据权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-radio-group |
|||
v-model="scope.row.visibleRange.types" |
|||
> |
|||
<el-row> |
|||
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col> |
|||
<el-col :span="24"> |
|||
<el-radio :value="5">指定行政组织</el-radio> |
|||
<el-tree-select |
|||
v-if="scope.row.visibleRange.types == 5" |
|||
v-model="scope.row.visibleRange.attribute" |
|||
:data="orgTree" |
|||
style="width: 100%" |
|||
node-key="id" |
|||
:props="systemMenuTreePropsing" |
|||
clearable |
|||
multiple |
|||
:render-after-expand="false" |
|||
show-checkbox |
|||
collapse-tags |
|||
collapse-tags-tooltip |
|||
/> |
|||
</el-col> |
|||
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col> |
|||
</el-row> |
|||
</el-radio-group> |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
|
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</el-tab-pane> |
|||
<el-affix position="bottom" :offset="100" style="margin-left: 250px;"> |
|||
<el-button v-loading="submitLoading" type="primary" @click="submitPower">确定授权</el-button> |
|||
</el-affix> |
|||
</el-tabs> |
|||
|
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.app-tabs-content { |
|||
|
|||
width: 100%; |
|||
:deep .el-tabs__content{ |
|||
padding: 0; |
|||
} |
|||
.app-form-checkbox{ |
|||
width: 200px; |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
grid-gap: 10px; |
|||
} |
|||
} |
|||
|
|||
.app-tabs-checkbox{ |
|||
width: 100%; |
|||
text-align: left; |
|||
padding: 0 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
span{ |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
.center-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 100%; /* 根据需要设置高度 */ |
|||
padding: 0px; |
|||
} |
|||
.tableScrollbar{ |
|||
width: 100%; |
|||
height: calc(100vh - 365px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.left_hight{ |
|||
height: calc(100vh - 350px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,249 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-12-17 16:40:42 |
|||
@ 备注: app授权布局 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const"; |
|||
import { appInitAuthorization,gainAppTableListNew,getPowerPageUser,systemAppAuthorization,gainAppEmpowerPower } from "@/api/system/roleapi/postrole"; |
|||
import { orgInfo } from "@/api/displayboardapi/types"; |
|||
|
|||
const props = defineProps({ |
|||
appType: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
powerType: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
roleId: { |
|||
type: String, |
|||
default: "" |
|||
} |
|||
}) |
|||
const orgTree = ref<orgInfo[]>([]) //行政组织树 |
|||
const appLoading = ref(false) |
|||
const grouTabsLoading = ref(false) |
|||
const appSystemConfig = ref<any[]>([]) |
|||
const appGroupButAry = ref<string[]>([]) |
|||
const appPowerArt = ref<any>([]) |
|||
const appFormButConfig = ref<any[]>([]) |
|||
|
|||
const systemMenuTreePropsing = { |
|||
children: "child", |
|||
label: "name", |
|||
value: "id", |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-05-13 14:20:47 |
|||
@ 功能: 获取自定义App |
|||
*/ |
|||
|
|||
const getAppList = () => { |
|||
grouTabsLoading.value=true |
|||
appInitAuthorization({appType:props.appType,powerType:props.powerType,roleId:props.roleId}).then((data: any) => { |
|||
console.log("获取自定义App", data); |
|||
// appList.value = data.data; |
|||
appPowerArt.value = data.data.appList |
|||
appGroupButAry.value = data.data.groupButton |
|||
// if (data.data && data.data.length > 0) { |
|||
// if (data.data[0] && data.data[0].signCode) { |
|||
// activeAppId.value = data.data[0].signCode; |
|||
|
|||
// } |
|||
// } |
|||
// console.log("获取自定义App", activeAppId.value); |
|||
grouTabsLoading.value=false |
|||
}).finally(()=>{ |
|||
appLoading.value=false |
|||
}) |
|||
}; |
|||
const pickAppTableList = (val: any) =>{ |
|||
|
|||
} |
|||
</script> |
|||
<template> |
|||
<el-scrollbar class="tableScrollbar" v-loading="appLoading"> |
|||
<table class="table_body"> |
|||
<thead> |
|||
<tr> |
|||
<th align="center" width="10%">分组权限</th> |
|||
<th align="center" width="10%">应用分组</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr > |
|||
<td width="10%" valign="top"> |
|||
<el-checkbox-group v-model="appSystemConfig"> |
|||
<el-checkbox |
|||
v-for="city in appGroupBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</td> |
|||
<td align="center" width="90%" valign="top"> |
|||
<table class="table_body"> |
|||
|
|||
<tbody> |
|||
<tr v-for="item in appPowerArt" :key="item.id"> |
|||
<td align="center" width="10%" valign="top"> |
|||
<el-checkbox @click.stop="pickAppTableList(item)" v-model="item.isTrue" :value="item.isTrue" ></el-checkbox> |
|||
{{ item.name }} |
|||
</td> |
|||
<td align="center" width="90%" valign="top"> |
|||
<table class="table_body"> |
|||
<thead> |
|||
<tr> |
|||
<th align="center" width="10%">应用</th> |
|||
<th align="center" width="10%">应用操作按钮</th> |
|||
<th align="center" width="80%">应用栏目</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="itemApp in item.appList" :key="itemApp.id"> |
|||
<td align="center" width="10%" valign="top"> |
|||
<el-checkbox @click.stop="pickAppTableList(itemApp)" v-model="itemApp.isTrue" :value="itemApp.isTrue" ></el-checkbox> |
|||
{{ itemApp.name }} |
|||
</td> |
|||
<td align="left" width="10%" valign="top"> |
|||
<el-checkbox-group v-model="appFormButConfig"> |
|||
<el-checkbox |
|||
v-for="city in appDetailBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</td> |
|||
<td align="center" width="80%" valign="top"> |
|||
<el-table |
|||
:data="itemApp.appMenuTree" |
|||
style="width: 100%; margin-bottom: 20px" |
|||
row-key="id" |
|||
border |
|||
default-expand-all |
|||
> |
|||
<el-table-column prop="name" label="栏目名称" > |
|||
<template #default="scope"> |
|||
<el-checkbox @click.stop="pickAppTableList(scope.row)" v-model="scope.row.isTrue" :value="scope.row.isTrue" ></el-checkbox> |
|||
{{ scope.row.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="pagePower" label="页面权力" > |
|||
<template #header> |
|||
<el-text>页面权力</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox-group v-model="scope.pagePower"> |
|||
<el-checkbox |
|||
v-for="city in formBaseBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="formPower" label="表单权限" > |
|||
<template #header> |
|||
<el-text>表单权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox-group v-model="scope.formPower"> |
|||
<el-checkbox |
|||
v-for="city in formBaseBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="listPower" label="listPower" > |
|||
<template #header> |
|||
<el-text>列表权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-checkbox-group v-model="scope.listPower"> |
|||
<el-checkbox |
|||
v-for="city in formBaseBut" |
|||
:key="city.key" |
|||
:label="city.label" |
|||
:value="city.value" |
|||
> |
|||
{{ city.label }} |
|||
</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="visibleRange" label="数据权限" > |
|||
<template #header> |
|||
<el-text>数据权限</el-text> |
|||
</template> |
|||
<template #default="scope"> |
|||
<el-radio-group |
|||
v-model="scope.row.visibleRange.types" |
|||
> |
|||
<el-row> |
|||
<el-col :span="24"><el-radio :value="1">本人</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col> |
|||
<el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col> |
|||
<el-col :span="24"> |
|||
<el-radio :value="5">指定行政组织</el-radio> |
|||
<el-tree-select |
|||
v-if="scope.row.visibleRange.types == 5" |
|||
v-model="scope.row.visibleRange.attribute" |
|||
:data="orgTree" |
|||
style="width: 100%" |
|||
node-key="id" |
|||
:props="systemMenuTreePropsing" |
|||
clearable |
|||
multiple |
|||
:render-after-expand="false" |
|||
show-checkbox |
|||
collapse-tags |
|||
collapse-tags-tooltip |
|||
/> |
|||
</el-col> |
|||
<el-col :span="24"><el-radio :value="6">所有</el-radio></el-col> |
|||
</el-row> |
|||
</el-radio-group> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</el-scrollbar> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.tableScrollbar{ |
|||
width: 100%; |
|||
height: calc(100vh - 260px); |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,338 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-26 10:13:15 |
|||
@ 备注: 编辑角色使用人 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import type { getSystemPower,AppPowerTree,systemList } from "@/api/system/roleapi/types"; |
|||
import { savePickRoleMan,getPowerPageUser,getRolePeople } from "@/api/system/roleapi/postrole"; |
|||
import type { TreeInstance } from 'element-plus' |
|||
import type {RoleListTree} from '@/api/role/types' |
|||
import { Search } from '@element-plus/icons-vue' |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
|
|||
const squareUrl = ref<string>( |
|||
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" |
|||
); |
|||
|
|||
const props = defineProps({ |
|||
show: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
org: { |
|||
type: Array as () => orgInfo[], |
|||
default: () => [] |
|||
}, |
|||
roleInfo: { |
|||
type: Object as () => RoleListTree, |
|||
default: () => ({}) |
|||
} |
|||
}) |
|||
const userLoading = ref(false) |
|||
const emit = defineEmits(['update:show']) |
|||
// const isShowsdf = computed(() => { |
|||
// if(props.show){ |
|||
// getPowerPageUserSub() |
|||
// // getPickUser() |
|||
// } |
|||
// return props.show |
|||
// }) |
|||
|
|||
const isShowsdf = computed({ |
|||
get(){ |
|||
console.log("------------------->",props.show) |
|||
|
|||
return props.show |
|||
}, |
|||
set(val){ |
|||
emit('update:show', val) |
|||
} |
|||
}) |
|||
|
|||
|
|||
const roleInfo = computed(() => { |
|||
return props.roleInfo |
|||
}) |
|||
const orgTree = computed(() => { |
|||
return props.org |
|||
}) |
|||
const treeBoxHeightOrg = ref(400) |
|||
const treeRefOrgUser = ref<TreeInstance>() |
|||
const propsOrg = { |
|||
value: 'id', |
|||
label: 'name', |
|||
// disabled:'status', |
|||
children: 'child', |
|||
} |
|||
const userPage = reactive({ |
|||
page: 1, |
|||
pageSize: 20, |
|||
orgId: '', |
|||
name: '', |
|||
total: 0 |
|||
}) |
|||
const userPowerList = ref<systemList>({}) //人员树 |
|||
const userPowerListPick = ref<systemList[]>([]) //人员树 |
|||
const pickUserKey = ref<string[]>([]) //选择的使用人key |
|||
const searchQuery = ref('') //行政组织搜索 |
|||
//搜索行政组织 |
|||
const onQuePeople = (query: string) => { |
|||
console.log(query) |
|||
treeRefOrgUser.value!.filter(query) |
|||
} |
|||
const filterMethodOrg = (query: string, node: any) => { |
|||
return node.name!.includes(query) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-26 10:19:05 |
|||
@ 功能: 关闭弹窗 |
|||
*/ |
|||
const closeDialog = () => { |
|||
emit('update:show', false) |
|||
userPowerList.value = |
|||
pickUserKey.value=[] |
|||
userPowerListPick.value=[] |
|||
userPage.page = 1 |
|||
userPage.name = '' |
|||
userPage.orgId = '' |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-26 16:32:58 |
|||
@ 功能: 选择行政组织 |
|||
*/ |
|||
const pickOrgTree = (node: any) => { |
|||
userPage.page = 1 |
|||
userPage.name = '' |
|||
userPage.orgId = node.id |
|||
console.log(userPage) |
|||
getPowerPageUserSub() |
|||
} |
|||
|
|||
const getPowerPageUserSub = () => { |
|||
userLoading.value = true |
|||
getPowerPageUser(userPage).then(({data})=>{ |
|||
console.log("获取平台授权项目用户------->",data) |
|||
userPowerList.value = data.list |
|||
userPage.total = data.total |
|||
userLoading.value = false |
|||
}) |
|||
} |
|||
const pickName = ref("") |
|||
const getPickUser = () => { |
|||
getRolePeople({ |
|||
roleId: roleInfo.value.id*1, |
|||
name: pickName.value |
|||
}).then(({data})=>{ |
|||
console.log("获取角色使用人------->",data) |
|||
if(data.list && Array.isArray(data.list)){ |
|||
userPowerListPick.value = data.list |
|||
}else{ |
|||
userPowerListPick.value = [] |
|||
} |
|||
|
|||
pickUserKey.value = data.userKey |
|||
}) |
|||
} |
|||
const pickUserInfo = (item: any) => { |
|||
let isPick = true |
|||
if(pickUserKey.value.includes(item.id)){ |
|||
pickUserKey.value = pickUserKey.value.filter((i) => i !== item.id) |
|||
isPick = false |
|||
}else{ |
|||
pickUserKey.value.push(item.id) |
|||
isPick = true |
|||
} |
|||
if(isPick){ |
|||
userPowerListPick.value.push(item) |
|||
}else{ |
|||
userPowerListPick.value = userPowerListPick.value.filter((i) => i.id !== item.id) |
|||
} |
|||
} |
|||
//判断是否已经选中 |
|||
const isPick = (item: any) => { |
|||
return pickUserKey.value.includes(item.id) |
|||
} |
|||
//删除选中的使用人 |
|||
const delUserPick = (item: any) => { |
|||
pickUserKey.value = pickUserKey.value.filter((i) => i !== item.id) |
|||
userPowerListPick.value = userPowerListPick.value.filter((i) => i.id !== item.id) |
|||
} |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-11-27 10:18:29 |
|||
@ 功能: 保存人员 |
|||
*/ |
|||
const saveRolePeople = () => { |
|||
console.log("保存角色使用人------->",roleInfo.value.id*1,pickUserKey.value) |
|||
savePickRoleMan({ |
|||
roleId: roleInfo.value.id*1, |
|||
userKey: pickUserKey.value |
|||
}).then((data)=>{ |
|||
console.log("保存角色使用人------->",data) |
|||
if(data.code === 0){ |
|||
ElMessage.success("保存成功") |
|||
closeDialog() |
|||
}else{ |
|||
ElMessage.error(data.msg || "保存失败") |
|||
} |
|||
}) |
|||
} |
|||
watch(() => props.show, (newVal) => { |
|||
if(newVal){ |
|||
getPowerPageUserSub() |
|||
getPickUser() |
|||
} |
|||
},{ |
|||
immediate: true |
|||
}) |
|||
watch(() => userPage.name, (newVal) => { |
|||
getPowerPageUserSub() |
|||
},{ |
|||
immediate: true |
|||
}) |
|||
onMounted(() => { |
|||
// getPowerPageUserSub() |
|||
// getPickUser() |
|||
}) |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="isShowsdf" |
|||
:title="`编辑<<${roleInfo.label}>>角色使用人`" |
|||
width="800" |
|||
destroy-on-close |
|||
:before-close="closeDialog" |
|||
> |
|||
<el-row class="dialog-row" :gutter="10"> |
|||
<el-col :span="8"> |
|||
<div class="quan"> |
|||
<div class="searchBox"> |
|||
<el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :prefix-icon="Search" @input="onQuePeople" clearable /> |
|||
</div> |
|||
<el-tree-v2 |
|||
ref="treeRefOrgUser" |
|||
style="max-width: 100%;" |
|||
:data="orgTree" |
|||
:props="propsOrg" |
|||
:filter-method="filterMethodOrg" |
|||
:height="treeBoxHeightOrg" |
|||
:v-loading="roleLoading" |
|||
:highlight-current="true" |
|||
:check-on-click-node="true" |
|||
:expand-on-click-node="false" |
|||
@node-click="pickOrgTree" |
|||
> |
|||
</el-tree-v2> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="9"> |
|||
<div class="quan"> |
|||
<div class="searchBox"> |
|||
<el-input v-model="userPage.name" placeholder="请输入姓名、工号" :prefix-icon="Search" clearable /> |
|||
</div> |
|||
<el-scrollbar v-loading="userLoading" height="370px"> |
|||
<div v-for="item in userPowerList" :key="item.id" :class="isPick(item)?'userBox active':'userBox'" @click="pickUserInfo(item)"> |
|||
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" /> |
|||
<div class="userInfo"> |
|||
<el-text type="primary" >{{ item.name }}({{ item.code }})</el-text> |
|||
<el-text type="primary" >{{ item.org }}</el-text> |
|||
</div> |
|||
<div style="width: 40px;"> |
|||
|
|||
</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
<div class="paginationBox"> |
|||
|
|||
<el-pagination |
|||
v-model:current-page="userPage.page" |
|||
:page-size="userPage.pageSize" |
|||
:pager-count="7" |
|||
layout="prev, pager, next" |
|||
:total="userPage.total" |
|||
@change="getPowerPageUserSub" |
|||
/> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="7"> |
|||
<div class="quan"> |
|||
<div class="searchBox"> |
|||
<!-- <el-input v-model="pickName" placeholder="请输入姓名、工号" :prefix-icon="Search" clearable /> --> |
|||
已经选择的使用人 |
|||
</div> |
|||
<el-scrollbar height="415px"> |
|||
<div v-for="item in userPowerListPick" :key="item.id" class="userBox" > |
|||
<el-avatar shape="square" :size="size" :src="item.icon?item.icon:squareUrl" /> |
|||
<div class="userInfo"> |
|||
<el-text type="primary" >{{ item.name }}({{ item.code }})</el-text> |
|||
<el-text type="primary" >{{ item.org }}</el-text> |
|||
</div> |
|||
<div> |
|||
<svg-icon icon-class="dels" @click="delUserPick(item)" /> |
|||
</div> |
|||
</div> |
|||
</el-scrollbar> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeDialog">取消</el-button> |
|||
<el-button type="primary" @click="saveRolePeople"> |
|||
确认 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.dialog-row{ |
|||
width: 100%; |
|||
.quan{ |
|||
width: 100%; |
|||
border: 1px solid #ccc; |
|||
overflow: hidden; |
|||
} |
|||
.searchBox{ |
|||
padding: 5px 10px 5px 10px; |
|||
} |
|||
|
|||
} |
|||
.userBox{ |
|||
width: 100%; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 5px 10px; |
|||
border-bottom: 1px dashed rgba($color: #000000, $alpha: 0.2); |
|||
|
|||
.userInfo{ |
|||
width: 60%; |
|||
} |
|||
div{ |
|||
span{ |
|||
display: flex; |
|||
width: 100%; |
|||
padding: 0 5px; |
|||
color:rgba($color: #000000, $alpha: 0.6); |
|||
} |
|||
} |
|||
svg{ |
|||
cursor: pointer; |
|||
color: #FF0000; |
|||
} |
|||
} |
|||
.userBox.active { |
|||
background-color: #a0cfff; |
|||
} |
|||
.paginationBox{ |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue