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

zhangxiao

2024-09-18 660b451f0d8cfb5550a10f281984be402c81750d

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

 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>