From 42e3694b8c48ef8d7b9cec3a8e48da666bcfcbe3 Mon Sep 17 00:00:00 2001
From: zhangxiao <898441624@qq.com>
Date: 星期五, 13 九月 2024 14:49:17 +0800
Subject: [PATCH] 增加权限管理-资源的拖拽功能锁定按钮
---
src/views/authority/resource/index.vue | 423 +++++++++++++++++++++++++++-------------------------
1 files changed, 220 insertions(+), 203 deletions(-)
diff --git a/src/views/authority/resource/index.vue b/src/views/authority/resource/index.vue
index 7c94293..673324d 100644
--- a/src/views/authority/resource/index.vue
+++ b/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"
@@ -35,9 +44,9 @@
@click="() => onIconClick(nodeData)"
/>
<a-popconfirm v-if="nodeData.menuName!='root'"
- content="璇风‘璁ゆ槸鍚﹀垹闄わ紵"
- type="success"
- @ok="() => onIconClickDelete(nodeData)"
+ content="璇风‘璁ゆ槸鍚﹀垹闄わ紵"
+ type="success"
+ @ok="() => onIconClickDelete(nodeData)"
>
<IconDelete
style="
@@ -174,227 +183,235 @@
</template>
<script lang="ts" setup>
- import { ref } from 'vue';
- import { IconPlus } from '@arco-design/web-vue/es/icon';
- import {
- Organization,
- OrganizationAdd, OrganizationUpdate,
- Resource,
- ResourceAdd,
- ResourceById,
- ResourceDelete,
- ResourceList,
- ResourceUpdate
- } from "@/api/authority";
- import Authheader from '@/views/authority/components/authheader.vue';
- import { Modal } from '@arco-design/web-vue';
- import { userModelState } from '@/store';
+import { ref } from 'vue';
+import { IconPlus } from '@arco-design/web-vue/es/icon';
+import {
+ Organization,
+ OrganizationAdd, OrganizationUpdate,
+ Resource,
+ ResourceAdd,
+ ResourceById,
+ ResourceDelete,
+ ResourceList,
+ ResourceUpdate
+} from "@/api/authority";
+import Authheader from '@/views/authority/components/authheader.vue';
+import { Modal } from '@arco-design/web-vue';
+import { userModelState } from '@/store';
- const modelStore = userModelState();
- let formRef = ref();
- let addFormRef= ref();
- let visible = ref(false);
- let treeData = ref([]);
- let showLine = ref(true);
- let menuTips = ref(['鏉冮檺绠＄悊', '璧勬簮']);
- const fieldNames = { value: 'key', label: 'value' };
- // 0鐩綍 1鑿滃崟 2鎸夐挳
- let options = ref([
- {
- key: '3',
- value: '鐩綍',
- },
- {
- key: '0',
- value: '鑿滃崟',
- },
- {
- key: '1',
- value: '鎸夐挳',
- },
- ]);
- let resourceform = ref<Resource>({
- component: '',
- createTime: '',
- description: '',
- icon: '',
- menuId: '',
- menuName: '',
- menuType: '',
- orderNum: '0',
- parentId: '',
- parentName: '',
- children: [],
- path: '',
- perms: '',
- status: '',
- syesourcetype: '',
- target: '',
- updateTime: '',
- });
+const modelStore = userModelState();
+let formRef = ref();
+let addFormRef= ref();
+let visible = ref(false);
+let treeData = ref([]);
+let showLine = ref(true);
+let menuTips = ref(['鏉冮檺绠＄悊', '璧勬簮']);
+const fieldNames = { value: 'key', label: 'value' };
+// 0鐩綍 1鑿滃崟 2鎸夐挳
+let options = ref([
+ {
+ key: '3',
+ value: '鐩綍',
+ },
+ {
+ key: '0',
+ value: '鑿滃崟',
+ },
+ {
+ key: '1',
+ value: '鎸夐挳',
+ },
+]);
+let resourceform = ref<Resource>({
+ component: '',
+ createTime: '',
+ description: '',
+ icon: '',
+ menuId: '',
+ menuName: '',
+ menuType: '',
+ orderNum: '0',
+ parentId: '',
+ parentName: '',
+ children: [],
+ path: '',
+ perms: '',
+ status: '',
+ syesourcetype: '',
+ target: '',
+ updateTime: '',
+});
+let draggable = ref(false);
+let buttonColor = ref("");
+let lockIcon = ref("IconLock");
- const onIconClick = (nodeData) => {
- if (nodeData) {
- resourceform.value.parentId = nodeData.menuId;
- resourceform.value.parentName = nodeData.menuName;
- }
- resourceform.value.component = '';
- resourceform.value.createTime = '';
- resourceform.value.description = '';
- resourceform.value.icon = '';
- resourceform.value.menuId = '';
- resourceform.value.menuName = '';
- resourceform.value.menuType = '';
- resourceform.value.orderNum = '0';
- resourceform.value.path = '';
- resourceform.value.perms = '';
- resourceform.value.status = '';
- resourceform.value.syesourcetype = '';
-
- visible.value = true;
- };
-
- //鍥剧墖涓婁紶
- const uploadAction = '/api/v1/llm/upload'; // 鏇挎崲涓轰綘鐨勪笂浼燗PI
- const fileList = ref([]);
- const imageUrls = ref([]);
- const uploadUrl = ref([]);
- const httpUrl = modelStore.hrefUrl;
- const updateFileList = (newFileList) => {
- fileList.value = newFileList;
- };
-
- const handleSuccess = (urls) => {
- uploadUrl.value = urls;
-
- const urlsArr = urls.map((url) => {
- return httpUrl + url;
- });
- imageUrls.value = urlsArr; // 鎷垮埌涓婁紶鐨勫浘鐗囧湴鍧�
- };
-
- const addCb = async (err) => {
- if (err) {
- visible.value = true;
- } else {
- resourceform.value.icon = uploadUrl.value[0] || '';
- await ResourceAdd({
- ...resourceform.value,
- } as unknown as Resource).then((res) => {
- ResourceData('');
- });
- }
+const onIconClick = (nodeData) => {
+ if (nodeData) {
+ resourceform.value.parentId = nodeData.menuId;
+ resourceform.value.parentName = nodeData.menuName;
}
+ resourceform.value.component = '';
+ resourceform.value.createTime = '';
+ resourceform.value.description = '';
+ resourceform.value.icon = '';
+ resourceform.value.menuId = '';
+ resourceform.value.menuName = '';
+ resourceform.value.menuType = '';
+ resourceform.value.orderNum = '0';
+ resourceform.value.path = '';
+ resourceform.value.perms = '';
+ resourceform.value.status = '';
+ resourceform.value.syesourcetype = '';
- const addresource = async (done) => {
- addFormRef.value.validate(addCb);
- };
+ visible.value = true;
+};
- const onIconClickDelete = (nodeData) => {
- ResourceDelete(nodeData.menuId).then(() => {
+//鍥剧墖涓婁紶
+const uploadAction = '/api/v1/llm/upload'; // 鏇挎崲涓轰綘鐨勪笂浼燗PI
+const fileList = ref([]);
+const imageUrls = ref([]);
+const uploadUrl = ref([]);
+const httpUrl = modelStore.hrefUrl;
+const updateFileList = (newFileList) => {
+ fileList.value = newFileList;
+};
+
+const handleSuccess = (urls) => {
+ uploadUrl.value = urls;
+
+ const urlsArr = urls.map((url) => {
+ return httpUrl + url;
+ });
+ imageUrls.value = urlsArr; // 鎷垮埌涓婁紶鐨勫浘鐗囧湴鍧�
+};
+
+const addCb = async (err) => {
+ if (err) {
+ visible.value = true;
+ } else {
+ resourceform.value.icon = uploadUrl.value[0] || '';
+ await ResourceAdd({
+ ...resourceform.value,
+ } as unknown as Resource).then((res) => {
ResourceData('');
});
- };
-
- const showDetail = (id) => {
- ResourceById(id).then((res) => {
- resourceform.value = { ...res.data };
- resourceform.value.icon = res.data.icon;
-
- imageUrls.value.push(httpUrl + res.data.icon);
- });
- };
- const cb = async (err) => {
- if (err) {
-
- } else {
- resourceform.value.icon = uploadUrl.value[0] || '';
- ResourceUpdate({
- ...resourceform.value,
- } as unknown as Resource).then((res) => {
- ResourceData('');
- Modal.success({
- title: '淇濆瓨鎴愬姛',
- content: '淇濆瓨鎴愬姛',
- });
- });
- }
}
- const editresource = () => {
- formRef.value.validate(cb);
+}
- };
- const reset = (id) => {
- ResourceById(id).then((res) => {
- resourceform.value = { ...res.data };
- });
- };
+const addresource = async (done) => {
+ addFormRef.value.validate(addCb);
+};
- const onDrop = ({ dragNode, dropNode, dropPosition }) => {
- const data = treeData.value;
+const onIconClickDelete = (nodeData) => {
+ ResourceDelete(nodeData.menuId).then(() => {
+ ResourceData('');
+ });
+};
+
+const showDetail = (id) => {
+ ResourceById(id).then((res) => {
+ resourceform.value = { ...res.data };
+ resourceform.value.icon = res.data.icon;
+
+ imageUrls.value.push(httpUrl + res.data.icon);
+ });
+};
+const cb = async (err) => {
+ if (err) {
+
+ } else {
+ resourceform.value.icon = uploadUrl.value[0] || '';
ResourceUpdate({
- orderNum: '0',
- parentId: dropNode.menuId,
- menuId: dragNode.menuId,
+ ...resourceform.value,
+ } as unknown as Resource).then((res) => {
+ ResourceData('');
+ Modal.success({
+ title: '淇濆瓨鎴愬姛',
+ content: '淇濆瓨鎴愬姛',
+ });
});
- const loop = (data, key, callback) => {
- data.some((item, index, arr) => {
- if (item.menuId === key) {
- callback(item, index, arr);
- return true;
- }
- if (item.children) {
- return loop(item.children, key, callback);
- }
- return false;
- });
- };
+ }
+}
+const editresource = () => {
+ formRef.value.validate(cb);
- loop(data, dragNode.menuId, (_, index, arr) => {
- arr.splice(index, 1);
- });
+};
+const reset = (id) => {
+ ResourceById(id).then((res) => {
+ resourceform.value = { ...res.data };
+ });
+};
- if (dropPosition === 0) {
- loop(data, dropNode.menuId, (item) => {
- item.children = item.children || [];
- item.children.push(dragNode);
- });
- } else {
- loop(data, dropNode.menuId, (_, index, arr) => {
- arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
- });
- }
- };
-
- const handleCancel = (type) => {
- if (type == 1) {
- visible.value = false;
- }
- };
-
- const ResourceData = async (key) => {
- await ResourceList(key).then((res) => {
- treeData.value = [...res.rows];
+const onDrop = ({ dragNode, dropNode, dropPosition }) => {
+ const data = treeData.value;
+ ResourceUpdate({
+ orderNum: '0',
+ parentId: dropNode.menuId,
+ menuId: dragNode.menuId,
+ });
+ const loop = (data, key, callback) => {
+ data.some((item, index, arr) => {
+ if (item.menuId === key) {
+ callback(item, index, arr);
+ return true;
+ }
+ if (item.children) {
+ return loop(item.children, key, callback);
+ }
+ return false;
});
};
- ResourceData('');
+ loop(data, dragNode.menuId, (_, index, arr) => {
+ arr.splice(index, 1);
+ });
+
+ if (dropPosition === 0) {
+ loop(data, dropNode.menuId, (item) => {
+ item.children = item.children || [];
+ item.children.push(dragNode);
+ });
+ } else {
+ loop(data, dropNode.menuId, (_, index, arr) => {
+ arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
+ });
+ }
+};
+
+const handleCancel = (type) => {
+ if (type == 1) {
+ visible.value = false;
+ }
+};
+
+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];
+ });
+};
+
+ResourceData('');
</script>
<style scoped>
- .tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),
- .tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover {
- animation: blinkBg 0.4s 2;
+.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title),
+.tree-demo :deep(.tree-node-dropover) > :deep(.arco-tree-node-title):hover {
+ animation: blinkBg 0.4s 2;
+}
+
+@keyframes blinkBg {
+ 0% {
+ background-color: transparent;
}
- @keyframes blinkBg {
- 0% {
- background-color: transparent;
- }
-
- 100% {
- background-color: var(--color-primary-light-1);
- }
+ 100% {
+ background-color: var(--color-primary-light-1);
}
+}
</style>
--
Gitblit v1.8.0