fix: bug#18898

src/views/system/Role/RoleLeft/index.vue

@@ -6,64 +6,51 @@
             </template>
         </j-input>
         <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>
         </div>
         <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'}" 
-            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">
+                    <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 @click="(e) => e.stopPropagation()" v-if="item.id !== 'default_group'">
-                                <PermissionButton
+                                <PermissionButton type="text" hasPermission="system/Role:groupDelete" :popConfirm="{
-                                        type="text"
-                                        hasPermission="system/Role:groupDelete"
-                                        :popConfirm="{
                                     title: `确定要删除？`,
                                     onConfirm: () => deleteGroup(item.id),
-                                        }"
+                                }" :disabled="item.id === 'default_group'">
-                                        :disabled="item.id === 'default_group'"
-                                    >
                                     删除
                                 </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>
                             </div>
                         </template>
-                        <template v-else><Ellipsis style="width: calc(100%-100px)">{{ item.name }}</Ellipsis></template>
+                        <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;"/>
+            <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';
@@ -73,102 +60,105 @@ const { userInfos } = storeToRefs(userInfoStore)
 const admin = computed(() => {
     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 searchValue = ref()
 const inputRef = ref()
 const addName = ref()
 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
         // if(req.result.length && select){
         //     selectGroup(req.result[0].id)
         // }
     }
 }
-const addGroup = () =>{
+const addGroup = () => {
     addName.value = ''
-    listData.value.unshift({
+    listData.value[0].children.unshift({
-        name:'',
+        name: '',
-        edit:true,
+        edit: true,
         id: randomString()
     })
-    nextTick(()=>{
+    nextTick(() => {
         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 = {
-            name:addName.value,
+            name: addName.value,
-            id:data.id
+            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 = () =>{
+const search = () => {
-    queryGroup(true,searchValue.value)
+    queryGroup(true, searchValue.value)
 }
-const searchChange = () =>{
+const searchChange = () => {
-    if(searchValue.value === '' ){
+    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 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('操作成功!')
         queryGroup(true)
-    }else{
+    } else {
         onlyMessage('操作失败!')
     }
 }
-const editGroup = (data:any) => {
+const editGroup = (data: any) => {
     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
         }
     })
 }
-onMounted(()=>{
+onMounted(() => {
     queryGroup(true)
 })
 </script>
 <style lang="less" scoped>
-  .controls{
+.controls {
     margin: 10px 0;
-  }
+}
-  .treeItem{
+
+.treeItem {
     display: flex;
     justify-content: space-between;
-      .itemText{
+
+    .itemText {
         line-height: 32px;
-          max-width:40%
+        max-width: 40%
     }
-  }
+}
-  .listBox{
+
+.listBox {
     margin: 10px 0;
-  }
+}
-  </style>
+</style>