fix: bug#18898
This commit is contained in:
leiqiaochu
parent
9d4177e1c9
commit
06f128bd0b
|
|
@ -1,69 +1,56 @@
|
|||
<template>
|
||||
<div class="left-contain">
|
||||
<j-input placeholder="分组名称" v-model:value="searchValue" @pressEnter="search" @change="searchChange">
|
||||
<template #suffix>
|
||||
<AIcon type="SearchOutlined" @click="search" />
|
||||
</template>
|
||||
</j-input>
|
||||
<div class="controls" v-if="admin">
|
||||
<j-button
|
||||
type="primary"
|
||||
@click="addGroup"
|
||||
style="width: 100%"
|
||||
>
|
||||
新增分组
|
||||
<j-input placeholder="分组名称" v-model:value="searchValue" @pressEnter="search" @change="searchChange">
|
||||
<template #suffix>
|
||||
<AIcon type="SearchOutlined" @click="search" />
|
||||
</template>
|
||||
</j-input>
|
||||
<div class="controls" v-if="admin">
|
||||
<j-button type="primary" @click="addGroup" style="width: 100%">
|
||||
新增分组
|
||||
</j-button>
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<j-tree
|
||||
:tree-data="listData"
|
||||
v-if="listData.length"
|
||||
:fieldNames="{title:'name',key:'id',children:'children'}"
|
||||
blockNode
|
||||
:selectedKeys="selectedKeys"
|
||||
:default-expanded-keys="['global_role']"
|
||||
:showLine="{ showLeafIcon: false }"
|
||||
>
|
||||
<template #title="item">
|
||||
<div class="treeItem" @click="()=>selectGroup(item.data.id)" v-if="!item.data?.edit">
|
||||
<template v-if="!item?.children">
|
||||
</div>
|
||||
<div class="listBox">
|
||||
<j-tree :tree-data="listData" v-if="listData.length" :fieldNames="{ title: 'name', key: 'id', children: 'children' }"
|
||||
blockNode :selectedKeys="selectedKeys" :default-expanded-keys="['global_role']"
|
||||
:showLine="{ showLeafIcon: false }">
|
||||
<template #title="item">
|
||||
<div class="treeItem" @click="() => selectGroup(item.data.id)" v-if="!item.data?.edit">
|
||||
<template v-if="!item?.children">
|
||||
<div class="itemText">
|
||||
<Ellipsis style="width: calc(100%-100px)">{{ item.name }}</Ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="(e) => e.stopPropagation()" v-if="item.id !== 'default_group'">
|
||||
<PermissionButton
|
||||
type="text"
|
||||
hasPermission="system/Role:groupDelete"
|
||||
:popConfirm="{
|
||||
title: `确定要删除？`,
|
||||
onConfirm: () => deleteGroup(item.id),
|
||||
}"
|
||||
:disabled="item.id === 'default_group'"
|
||||
>
|
||||
<PermissionButton type="text" hasPermission="system/Role:groupDelete" :popConfirm="{
|
||||
title: `确定要删除？`,
|
||||
onConfirm: () => deleteGroup(item.id),
|
||||
}" :disabled="item.id === 'default_group'">
|
||||
删除
|
||||
</PermissionButton>
|
||||
<PermissionButton
|
||||
type="text"
|
||||
hasPermission="system/Role:groupUpdate"
|
||||
@click="editGroup(item.data)"
|
||||
:disabled="item.id === 'default_group'"
|
||||
>
|
||||
</PermissionButton>
|
||||
<PermissionButton type="text" hasPermission="system/Role:groupUpdate"
|
||||
@click="editGroup(item.data)" :disabled="item.id === 'default_group'">
|
||||
编辑
|
||||
</PermissionButton>
|
||||
</PermissionButton>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else><Ellipsis style="width: calc(100%-100px)">{{ item.name }}</Ellipsis></template>
|
||||
</div>
|
||||
</template>
|
||||
</j-tree>
|
||||
<j-empty v-else style="margin-top: 100px;"/>
|
||||
</div>
|
||||
<template v-else>
|
||||
<Ellipsis style="width: calc(100%-100px)">{{ item.name }}</Ellipsis>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<j-input v-model:value="addName" @blur="() => saveGroup(item.data)" ref="inputRef"
|
||||
:maxlength="64"></j-input>
|
||||
</div>
|
||||
</template>
|
||||
</j-tree>
|
||||
<j-empty v-else style="margin-top: 100px;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onlyMessage } from '@/utils/comm';
|
||||
import { queryRoleGroup , saveRoleGroup , deleteRoleGroup } from '@/api/system/role';
|
||||
import { queryRoleGroup, saveRoleGroup, deleteRoleGroup } from '@/api/system/role';
|
||||
import { randomString } from '@/utils/utils';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
|
@ -71,104 +58,107 @@ const emit = defineEmits(['selectData'])
|
|||
const userInfoStore = useUserInfo()
|
||||
const { userInfos } = storeToRefs(userInfoStore)
|
||||
const admin = computed(() => {
|
||||
return userInfos.value?.username === 'admin';
|
||||
return userInfos.value?.username === 'admin';
|
||||
})
|
||||
const listData:any = ref([{
|
||||
name:'全局角色',
|
||||
id:'global_role',
|
||||
children:[]
|
||||
const listData: any = ref([{
|
||||
name: '全局角色',
|
||||
id: 'global_role',
|
||||
children: []
|
||||
}])
|
||||
const selectedKeys = ref<string[]>(['global_role'])
|
||||
const searchValue = ref()
|
||||
const inputRef = ref()
|
||||
const addName = ref()
|
||||
const addStatus = ref(false) // 新增分组状态
|
||||
const queryGroup = async(select?:Boolean,searchName?:string) =>{
|
||||
const params = searchName ? {sorts: [{ name: 'createTime', order: 'desc' }],terms:[{terms:[{value:'%'+ searchName +'%',termType:'like',column:'name'}]}]} : {sorts: [{ name: 'createTime', order: 'desc' }]}
|
||||
const req:any = await queryRoleGroup(params)
|
||||
if(req.status === 200){
|
||||
const queryGroup = async (select?: Boolean, searchName?: string) => {
|
||||
const params = searchName ? { sorts: [{ name: 'createTime', order: 'desc' }], terms: [{ terms: [{ value: '%' + searchName + '%', termType: 'like', column: 'name' }] }] } : { sorts: [{ name: 'createTime', order: 'desc' }] }
|
||||
const req: any = await queryRoleGroup(params)
|
||||
if (req.status === 200) {
|
||||
listData.value[0].children = req.result
|
||||
// if(req.result.length && select){
|
||||
// selectGroup(req.result[0].id)
|
||||
// }
|
||||
}
|
||||
}
|
||||
const addGroup = () =>{
|
||||
const addGroup = () => {
|
||||
addName.value = ''
|
||||
listData.value.unshift({
|
||||
name:'',
|
||||
edit:true,
|
||||
listData.value[0].children.unshift({
|
||||
name: '',
|
||||
edit: true,
|
||||
id: randomString()
|
||||
})
|
||||
nextTick(()=>{
|
||||
nextTick(() => {
|
||||
inputRef.value.focus()
|
||||
})
|
||||
}
|
||||
const saveGroup = async(data:any) =>{
|
||||
if(addName.value === ''){
|
||||
listData.value.shift()
|
||||
}else{
|
||||
const saveGroup = async (data: any) => {
|
||||
if (addName.value === '') {
|
||||
listData.value[0].children.shift()
|
||||
} else {
|
||||
const saveData = {
|
||||
name:addName.value,
|
||||
id:data.id
|
||||
name: addName.value,
|
||||
id: data.id
|
||||
}
|
||||
const res = await saveRoleGroup(saveData)
|
||||
if(res.status === 200){
|
||||
if (res.status === 200) {
|
||||
onlyMessage('操作成功!')
|
||||
queryGroup()
|
||||
}else{
|
||||
} else {
|
||||
onlyMessage('操作失败!')
|
||||
}
|
||||
}
|
||||
addStatus.value = false
|
||||
}
|
||||
const search = () =>{
|
||||
queryGroup(true,searchValue.value)
|
||||
const search = () => {
|
||||
queryGroup(true, searchValue.value)
|
||||
}
|
||||
const searchChange = () =>{
|
||||
if(searchValue.value === '' ){
|
||||
const searchChange = () => {
|
||||
if (searchValue.value === '') {
|
||||
queryGroup()
|
||||
}
|
||||
}
|
||||
const selectGroup = (id:string) =>{
|
||||
const selectGroup = (id: string) => {
|
||||
selectedKeys.value = [id]
|
||||
id === 'global_role' ? emit('selectData','') : emit('selectData',selectedKeys.value)
|
||||
|
||||
id === 'global_role' ? emit('selectData', '') : emit('selectData', selectedKeys.value)
|
||||
|
||||
}
|
||||
const deleteGroup = async(id:string)=>{
|
||||
const res:any = await deleteRoleGroup(id)
|
||||
if(res.status === 200){
|
||||
const deleteGroup = async (id: string) => {
|
||||
const res: any = await deleteRoleGroup(id)
|
||||
if (res.status === 200) {
|
||||
onlyMessage('操作成功!')
|
||||
queryGroup(true)
|
||||
}else{
|
||||
} else {
|
||||
onlyMessage('操作失败!')
|
||||
}
|
||||
}
|
||||
const editGroup = (data:any) => {
|
||||
const editGroup = (data: any) => {
|
||||
addName.value = data.name
|
||||
listData.value.forEach((item:any)=>{
|
||||
if(item.id === data.id){
|
||||
listData.value[0].children.forEach((item: any) => {
|
||||
if (item.id === data.id) {
|
||||
item.edit = true
|
||||
}
|
||||
})
|
||||
}
|
||||
onMounted(()=>{
|
||||
onMounted(() => {
|
||||
queryGroup(true)
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.controls{
|
||||
margin: 10px 0;
|
||||
}
|
||||
.treeItem{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.itemText{
|
||||
line-height: 32px;
|
||||
max-width:40%
|
||||
}
|
||||
}
|
||||
.listBox{
|
||||
.controls {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
.treeItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.itemText {
|
||||
line-height: 32px;
|
||||
max-width: 40%
|
||||
}
|
||||
}
|
||||
|
||||
.listBox {
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue