You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
338 lines
10 KiB
338 lines
10 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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>
|
|
|