From 06f128bd0b272bf59e69126a22c656ba504a33a4 Mon Sep 17 00:00:00 2001
From: leiqiaochu <leiqiaochu@aossci.com>
Date: Sat, 7 Oct 2023 13:36:48 +0800
Subject: [PATCH] fix: bug#18898

---
 src/views/system/Role/RoleLeft/index.vue | 196 +++++++++++------------
 1 file changed, 93 insertions(+), 103 deletions(-)

diff --git a/src/views/system/Role/RoleLeft/index.vue b/src/views/system/Role/RoleLeft/index.vue
index 2063e5ba..c29ea0cb 100644
--- a/src/views/system/Role/RoleLeft/index.vue
+++ b/src/views/system/Role/RoleLeft/index.vue
@@ -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>
\ No newline at end of file
+}
+
+.treeItem {
+    display: flex;
+    justify-content: space-between;
+
+    .itemText {
+        line-height: 32px;
+        max-width: 40%
+    }
+}
+
+.listBox {
+    margin: 10px 0;
+}
+</style>
\ No newline at end of file