增加权限管理-资源的拖拽功能锁定按钮

zhangxiao

2024-09-13 42e3694b8c48ef8d7b9cec3a8e48da666bcfcbe3

增加权限管理-资源的拖拽功能锁定按钮

 src/views/authority/resource/index.vue

@@ -6,11 +6,20 @@
        <a-card
          :title="$t('menu.resource.title')"
          :bordered="false"
          :header-style="{ textAlign: 'left' }"
          style=" 'width': '100%';   height: calc(100vh - 250px); overflow-y:auto "
        >
          <template #title>
            <span>{{ $t('menu.resource.title') }}</span>
            <a-tooltip content="点击后可通过拖拽更改资源结构,再次点击来关闭" background-color="#165DFF">
              <a-button type="outline" style="float: right;" @click="toggleDraggable" :style="{color: buttonColor}">
                <component :is="lockIcon" />
              </a-button>
            </a-tooltip>
          </template>
          <a-tree
            class="tree-demo"
            draggable
            :draggable="draggable"
            blockNode
            :default-expand-all=true
            :data="treeData"
@@ -232,6 +241,9 @@
    target: '',
    updateTime: '',
  });
let draggable = ref(false);
let buttonColor = ref("");
let lockIcon = ref("IconLock");


  const onIconClick = (nodeData) => {
@@ -373,6 +385,11 @@
    }
  };

const toggleDraggable = () =>{
  draggable.value = !draggable.value;
  buttonColor.value= draggable.value ? '#575757' : '';
  lockIcon.value = draggable.value ? 'IconUnlock' : 'IconLock';
};
  const ResourceData = async (key) => {
    await ResourceList(key).then((res) => {
      treeData.value = [...res.rows];