|
|
@@ -8,6 +8,7 @@
|
|
|
:bordered="false"
|
|
|
:style="{ 'width': '100%', 'height': '900px', 'overflow-y': 'auto' }"
|
|
|
>
|
|
|
+ <a-button @click="() => onIconClick(null)">新增父级菜单</a-button>
|
|
|
<a-tree
|
|
|
class="tree-demo"
|
|
|
draggable
|
|
|
@@ -138,178 +139,173 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref } from 'vue';
|
|
|
- import { IconPlus } from '@arco-design/web-vue/es/icon';
|
|
|
- import {
|
|
|
- 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 { ref } from "vue";
|
|
|
+import { IconPlus } from "@arco-design/web-vue/es/icon";
|
|
|
+import { Resource, ResourceAdd, ResourceById, ResourceDelete, ResourceList, ResourceUpdate } from "@/api/authority";
|
|
|
+import Authheader from "@/views/authority/components/authheader.vue";
|
|
|
+import { Modal } from "@arco-design/web-vue";
|
|
|
|
|
|
- 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: '',
|
|
|
- parentId: '',
|
|
|
- parentName: '',
|
|
|
- children: [],
|
|
|
- path: '',
|
|
|
- perms: '',
|
|
|
- status: '',
|
|
|
- syesourcetype: '',
|
|
|
- target: '',
|
|
|
- updateTime: '',
|
|
|
- });
|
|
|
+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: "",
|
|
|
+ parentId: "",
|
|
|
+ parentName: "",
|
|
|
+ children: [],
|
|
|
+ path: "",
|
|
|
+ perms: "",
|
|
|
+ status: "",
|
|
|
+ syesourcetype: "",
|
|
|
+ target: "",
|
|
|
+ updateTime: ""
|
|
|
+});
|
|
|
|
|
|
- const onIconClick = (nodeData) => {
|
|
|
+const onIconClick = (nodeData) => {
|
|
|
+ if (nodeData) {
|
|
|
resourceform.value.parentId = nodeData.menuId;
|
|
|
- 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.parentName = nodeData.menuName;
|
|
|
- resourceform.value.path = '';
|
|
|
- resourceform.value.perms = '';
|
|
|
- resourceform.value.status = '';
|
|
|
- resourceform.value.syesourcetype = '';
|
|
|
+ }
|
|
|
+ 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;
|
|
|
- };
|
|
|
+ visible.value = true;
|
|
|
+};
|
|
|
|
|
|
- const addresource = async () => {
|
|
|
- await ResourceAdd({
|
|
|
- ...resourceform.value,
|
|
|
- } as unknown as Resource).then((res) => {
|
|
|
- ResourceData('');
|
|
|
- });
|
|
|
- };
|
|
|
+const addresource = async () => {
|
|
|
+ await ResourceAdd({
|
|
|
+ ...resourceform.value
|
|
|
+ } as unknown as Resource).then((res) => {
|
|
|
+ ResourceData("");
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
- const onIconClickDelete = (nodeData) => {
|
|
|
- ResourceDelete(nodeData.menuId).then(() => {
|
|
|
- ResourceData('');
|
|
|
- });
|
|
|
- };
|
|
|
+const onIconClickDelete = (nodeData) => {
|
|
|
+ ResourceDelete(nodeData.menuId).then(() => {
|
|
|
+ ResourceData("");
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
- const showDetail = (id) => {
|
|
|
- ResourceById(id).then((res) => {
|
|
|
- resourceform.value = { ...res.data };
|
|
|
- });
|
|
|
- };
|
|
|
- const editresource = () => {
|
|
|
- ResourceUpdate({
|
|
|
- ...resourceform.value,
|
|
|
- } as unknown as Resource).then((res) => {
|
|
|
- ResourceData('');
|
|
|
- Modal.success({
|
|
|
- title: '保存成功',
|
|
|
- content: '保存成功',
|
|
|
- });
|
|
|
+const showDetail = (id) => {
|
|
|
+ ResourceById(id).then((res) => {
|
|
|
+ resourceform.value = { ...res.data };
|
|
|
+ });
|
|
|
+};
|
|
|
+const editresource = () => {
|
|
|
+ ResourceUpdate({
|
|
|
+ ...resourceform.value
|
|
|
+ } as unknown as Resource).then((res) => {
|
|
|
+ ResourceData("");
|
|
|
+ Modal.success({
|
|
|
+ title: "保存成功",
|
|
|
+ content: "保存成功"
|
|
|
});
|
|
|
- };
|
|
|
- const reset = (id) => {
|
|
|
- ResourceById(id).then((res) => {
|
|
|
- resourceform.value = { ...res.data };
|
|
|
+ });
|
|
|
+};
|
|
|
+const reset = (id) => {
|
|
|
+ ResourceById(id).then((res) => {
|
|
|
+ resourceform.value = { ...res.data };
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+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;
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- 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;
|
|
|
- });
|
|
|
- };
|
|
|
+ loop(data, dragNode.menuId, (_, index, arr) => {
|
|
|
+ arr.splice(index, 1);
|
|
|
+ });
|
|
|
|
|
|
- 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- 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 handleCancel = (type) => {
|
|
|
+ if (type == 1) {
|
|
|
+ visible.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- const ResourceData = async (key) => {
|
|
|
- await ResourceList(key).then((res) => {
|
|
|
- treeData.value = [...res.rows];
|
|
|
- });
|
|
|
- };
|
|
|
+const ResourceData = async (key) => {
|
|
|
+ await ResourceList(key).then((res) => {
|
|
|
+ treeData.value = [...res.rows];
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
- ResourceData('');
|
|
|
+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>
|
yinbangzhong