组织树优化

src/page/main/system/organization/index.vue

@@ -281,7 +281,7 @@ import { downloadFileFormatNew } from '@/services/helper'
     router.push({
         path: "/system/organization/org-detail",
         query: {
-          id: selectTreeData.value.organization_id
+          id: selectOrgNode.value.organization_id
         }
        
       })
@@ -389,7 +389,9 @@ import { downloadFileFormatNew } from '@/services/helper'
   const tableTotal = ref(0);
   const orgTree = ref(null);
   const selectTreeData = ref(null)
+  const actionTreeData = ref(null)
   const selectTreeDataType = ref(2);
+  const selectOrgNode = ref(null);
   const dialogDelNode = ref(false)
   const router = useRouter();
   const filter = reactive({
@@ -437,7 +439,7 @@ import { downloadFileFormatNew } from '@/services/helper'
       router.push({
         path: "/system/organization/org-user",
         query: {
-          orgId: selectTreeData.value.organization_id
+          orgId: selectOrgNode.value.organization_id
         }
       })
     }else {
@@ -448,11 +450,6 @@ import { downloadFileFormatNew } from '@/services/helper'
     }
     
   }
-  const treeSelected = ref(null);
-  const handleNodeClick = (data) => {
-    treeSelected.value = data.dept
-    console.log(treeSelected.value)
-  }
 
 
   const changeSize = (size) => {
@@ -507,7 +504,7 @@ import { downloadFileFormatNew } from '@/services/helper'
         .then((res) => {
           if (res.data.code == 200) {
             $message.success(res.data.msg)
-            orgTree.value.getOrgTree();
+            orgTree.value.getOrgTree(res.data.data.id);
           }else {
             $message.error(res.data.data)
           }
@@ -518,11 +515,11 @@ import { downloadFileFormatNew } from '@/services/helper'
         name: data.name,
         data_type: 0
       }
-      $axios.put(`/apaas/system/v5/org/${selectTreeData.value.id}`, params)
+      $axios.put(`/apaas/system/v5/org/${actionTreeData.value.id}`, params)
         .then((res) => {
           if (res.data.code == 200) {
             $message.success(res.data.msg)
-            orgTree.value.getOrgTree();
+            orgTree.value.getOrgTree(actionTreeData.value.id);
           }else {
             $message.error(res.data.data)
           }
@@ -557,7 +554,7 @@ import { downloadFileFormatNew } from '@/services/helper'
         .then((res) => {
           if (res.data.code == 200) {
             $message.success(res.data.msg)
-            orgTree.value.getOrgTree();
+            orgTree.value.getOrgTree(res.data.data.id);
           }else {
             $message.error(res.data.data)
           }
@@ -572,11 +569,11 @@ import { downloadFileFormatNew } from '@/services/helper'
         attachment:  data.attachment && data.attachment.length > 0 ? data.attachment.map(item => item.url).join(',') : '',
         data_type: 1
       }
-      $axios.put(`/apaas/system/v5/org/${selectTreeData.value.id}`, params)
+      $axios.put(`/apaas/system/v5/org/${actionTreeData.value.id}`, params)
         .then((res) => {
           if (res.data.code == 200) {
             $message.success(res.data.msg)
-            orgTree.value.getOrgTree();
+            orgTree.value.getOrgTree(actionTreeData.value.id);
           }else {
             $message.error(res.data.data)
           }
@@ -592,11 +589,11 @@ import { downloadFileFormatNew } from '@/services/helper'
 
   //删除目录/组织
   const confirmDelNode = () => {
-      $axios.delete(`/apaas/system/v5/org/${selectTreeData.value.id}`)
+      $axios.delete(`/apaas/system/v5/org/${actionTreeData.value.id}`)
         .then((res) => {
           if (res.data.code == 200) {
             $message.success(res.data.msg)
-            orgTree.value.getOrgTree();
+            orgTree.value.getOrgTree(actionTreeData.value.id === selectTreeData.value.id ? null : selectTreeData.value.id);
           }else {
             $message.error(res.data.data)
           }
@@ -609,7 +606,7 @@ import { downloadFileFormatNew } from '@/services/helper'
         .then((res) => {
           if (res.data.code == 200) {
             $message.success(res.data.msg)
-            orgTree.value.getOrgTree();
+            orgTree.value.getOrgTree(selectTreeData.value.id);
           }else {
             $message.error(res.data.data)
           }
@@ -662,10 +659,15 @@ import { downloadFileFormatNew } from '@/services/helper'
   }
 
   const treeSelect = (data) => {
-     selectTreeData.value = data.value;
-    if(data.value.data_type === 1 || data.value.data_type === 2) {
-      selectTreeDataType.value = data.value.data_type;
+    if(data.type === 'action') {
+      actionTreeData.value = data.data.value;
+    }else {
+      selectTreeData.value = data.data.value;
+    }
      
+    if(data.type === 'click' && (data.data.value.data_type === 1 || data.data.value.data_type === 2)) {
+      selectTreeDataType.value = data.data.value.data_type;
+      selectOrgNode.value = data.data.value;
       getTableRows();
     }
   }

src/page/main/system/organization/tree.vue

@@ -8,12 +8,13 @@
         node-key="id"
         :highlight-current="true"
         :filter-node-method="filterNode" 
+        :expand-on-click-node="false"
         :default-expand-all="true">
          <template #default="{ node, data }">
            <div class="custom_tree_node">
              <span
                class="label-text "
-               :class="{'is_active': selectData && selectData.id === data.id}"
+               
                :title="data.name"
                >{{ data.name }}
              </span>
@@ -48,14 +49,14 @@
          <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'org',action: 'create',target: 'child'})">新建下级组织</div>
          <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'edit',target: 'local'})">编辑目录</div>
          <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'delete',target: 'local'})">删除</div>
-         <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'mvup',target: 'local'})">上移</div>
-         <div v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'mvdown',target: 'local'})">下移</div>
+         <div :class="{'disable': mvDataParent.indexOf(selectData) === 0 }" v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'mvup',target: 'local'})">上移</div>
+         <div :class="{'disable': mvDataParent.indexOf(selectData) === (mvDataParent.length-1) }" v-if="selectData && selectData.data_type === 0" class="action" @click="treeAction({type: 'directory',action: 'mvdown',target: 'local'})">下移</div>
         <!-- 组织 -->
          <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
          <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'edit',target: 'local'})">编辑组织</div>
          <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'delete',target: 'local'})">删除</div>
-         <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'mvup',target: 'local'})">上移</div>
-         <div v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'mvdown',target: 'local'})">下移</div>
+         <div :class="{'disable': mvDataParent.indexOf(selectData) === 0 }" v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'mvup',target: 'local'})">上移</div>
+         <div :class="{'disable': mvDataParent.indexOf(selectData) === (mvDataParent.length-1) }" v-if="selectData && selectData.data_type === 1" class="action" @click="treeAction({type: 'org',action: 'mvdown',target: 'local'})">下移</div>
        </div>
     </Teleport>
 </template>
@@ -83,15 +84,21 @@ import { useRouter } from 'vue-router';
     value: 'organization_id'
   }
 
-  const  getOrgTree = () => {
+  const  getOrgTree = (data) => {
     $axios.get(`/apaas/system/v5/org/tree`)
       .then((res) => {
       if (res.data.code == 200) {
           orgData.value = res.data.data || [];
+          if(data) {
             nextTick(() =>{
-            treeRef.value.setCurrentNode(orgData.value[0],true)
-            emit('select',ref(orgData.value[0]));
+            setCurrentNode(data)
           })
+          }else {
+            nextTick(() =>{
+            setCurrentNode(orgData.value[0].id)
+          })
+          }
+          
           
       }else {
           $message.error(res.data.data)
@@ -104,6 +111,19 @@ import { useRouter } from 'vue-router';
     treeRef.value.filter(val)
   }
 
+  const setCurrentNode = (data) => {
+    if(data) {
+      treeRef.value.setCurrentKey(data,true);
+     const curNode = treeRef.value.getCurrentNode();
+     emit('select',{data:ref(curNode),type: 'click'});
+    }else {
+      treeRef.value.setCurrentKey(orgData.value[0].id,true);
+     const curNode = treeRef.value.getCurrentNode();
+     emit('select',{data:ref(curNode),type: 'click'});
+    }
+    
+  }
+
   const filterNode = (value, data) => {
     if (!value) return true
     return data.name.includes(value)
@@ -136,13 +156,13 @@ import { useRouter } from 'vue-router';
   const emit = defineEmits(['action','select'])
   const handleNodeClick = (node,nodeAttr,treeNode,event) => {
     selectData.value = node;
-    emit('select',selectData);
+    emit('select',{data: selectData,type: 'click'});
     //只读则无操作事件
       closeAction();
   }
 
   const treeAction = (params) => {
-    emit('select',selectData);
+    emit('select',{data:selectData,type: 'action'});
     let data = null;
     if(params.action === 'create') {
       if(params.target === 'local') {
@@ -154,7 +174,7 @@ import { useRouter } from 'vue-router';
       }
     }else if(params.action === 'mvup') {
       if(mvDataParent.value.indexOf(selectData.value) === 0) {
-        $message.error('已经是第一个元素，不可上移')
+        // $message.error('已经是第一个元素，不可上移')
         return 0;
       }else {
         let brother = mvDataParent.value[mvDataParent.value.indexOf(selectData.value) - 1];
@@ -163,7 +183,7 @@ import { useRouter } from 'vue-router';
       
     }else if(params.action === 'mvdown') {
       if(mvDataParent.value.indexOf(selectData.value) === (mvDataParent.value.length-1)) {
-        $message.error('已经是最后一个元素，不可下移')
+        // $message.error('已经是最后一个元素，不可下移')
         return 0;
       }else {
         let brother = mvDataParent.value[mvDataParent.value.indexOf(selectData.value) + 1];
@@ -190,7 +210,7 @@ import { useRouter } from 'vue-router';
       
   })
 
-  defineExpose({getOrgTree, filterTree })
+  defineExpose({getOrgTree, filterTree, setCurrentNode })
 
 </script>
 
@@ -302,4 +322,13 @@ import { useRouter } from 'vue-router';
   height: 36px!important;
 }
 
+.tree-action .disable{
+  cursor: not-allowed;
+  color: #616f94;
+}
+.tree-action .disable:hover{
+  background-color: #fff;
+  color: #616f94;
+}
+
 </style>
\ No newline at end of file