0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: bug#18898

This commit is contained in:
leiqiaochu 2023-10-07 13:36:48 +08:00
parent 9d4177e1c9
commit 06f128bd0b
1 changed files with 93 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/views/system/Role/RoleLeft/index.vue
View File

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