为机构管理添加拖拽功能锁定按钮与权限限制

src/views/authority/organization/index.vue

@@ -7,11 +7,21 @@
         <a-card
           :title="$t('menu.organization.title')"
           :bordered="false"
+          :header-style="{ textAlign: 'left' }"
           style=" 'width': '100%';   height: calc(100vh - 250px); overflow-y:auto "
         >
+          <template #title>
+            <span>{{ $t('menu.organization.title') }}</span>
+            <a-tooltip content="点击后可通过拖拽更改机构结构,再次点击来关闭" background-color="#165DFF">
+              <a-button type="outline" style="float: right;" @click="toggleDraggable" :style="{color: buttonColor}"
+               v-has-permi="'/base/syorganization!update'">
+                <component :is="lockIcon" />
+              </a-button>
+            </a-tooltip>
+          </template>
           <a-tree
             class="tree-demo"
-            draggable
+            :draggable="draggable"
             blockNode
             :data="treeData"
             :show-line="showLine"
@@ -158,7 +168,9 @@
     address: '',
     deptId: '',
   });
-
+let draggable = ref(false);
+let buttonColor = ref("");
+let lockIcon = ref("IconLock");
   const onIconClick = (nodeData) => {
     deptform.value.deptName = "";
     deptform.value.email = "";
@@ -276,6 +288,11 @@
   };
 
   OrganizationData('');
+  const toggleDraggable = () =>{
+    draggable.value = !draggable.value;
+    buttonColor.value= draggable.value ? '#575757' : '';
+    lockIcon.value = draggable.value ? 'IconUnlock' : 'IconLock';
+  };
 </script>
 
 <style scoped>