~xuyonghao/flow_web.git

			@@ -3,8 +3,11 @@
			<authheader :items="menuTips"></authheader>
			<a-row :gutter="20">
			<a-col :span="8">
			<a-card :title="$t('menu.resource.title')" :bordered="false"
			:style="{ width: '100%',height: '900px', 'overflow-y': 'auto' }">
			<a-card
			:title="$t('menu.resource.title')"
			:bordered="false"
			:style="{ 'width': '100%', 'height': '900px', 'overflow-y': 'auto' }"
			>
			<a-tree
			class="tree-demo"
			draggable
			@@ -12,47 +15,75 @@
			:data="treeData"
			:show-line="showLine"
			:fieldNames="{
			key:'menuId',
			title:'menuName',
			children:'children',
			key: 'menuId',
			title: 'menuName',
			children: 'children',
			}"
			@drop="onDrop"
			@select="showDetail"
			>
			<template #extra="nodeData">
			<IconPlus
			style="position: absolute; right: 60px; font-size: 12px; top: 10px; color: #3370ff;"
			style="
			position: absolute;
			right: 60px;
			font-size: 12px;
			top: 10px;
			color: #3370ff;
			"
			@click="() => onIconClick(nodeData)"
			/>
			<IconDelete style="position: absolute; right: 40px; font-size: 12px; top: 10px; color: #3370ff;"
			@click="() => onIconClickDelete(nodeData)" />
			<IconDelete
			style="
			position: absolute;
			right: 40px;
			font-size: 12px;
			top: 10px;
			color: #3370ff;
			"
			@click="() => onIconClickDelete(nodeData)"
			/>
			</template>
			</a-tree>

			</a-card>
			</a-col>
			<a-col :span="16">
			<a-card :title="$t('menu.resource.detail')" :bordered="false" :style="{ width: '100%' }">
			<a-card
			:title="$t('menu.resource.detail')"
			:bordered="false"
			:style="{ width: '100%' }"
			>
			<a-form :model="resourceform" layout="horizontal">
			<a-form-item field="parentName" label="上级资源" disabled>
			<a-input v-model="resourceform.parentName" />
			</a-form-item>
			<a-form-item field="status" label="资源状态">
			<a-switch checked-value="0" unchecked-value="1" v-model="resourceform.status"></a-switch>
			<a-switch
			checked-value="0"
			unchecked-value="1"
			v-model="resourceform.status"
			></a-switch>
			</a-form-item>
			<a-form-item field="menuName" label="资源名称">
			<a-input v-model="resourceform.menuName" />
			</a-form-item>
			<a-form-item field="menuType" label="资源类型">
			<a-select v-model="resourceform.menuType" :options="options" :field-names="fieldNames"
			:style="{width:'320px'}"
			placeholder="请选择" />

			<a-select
			v-model="resourceform.menuType"
			:options="options"
			:field-names="fieldNames"
			:style="{ width: '320px' }"
			placeholder="请选择"
			/>
			</a-form-item>
			<a-form-item field="perms" label="资源控制权限字符">
			<a-input v-model="resourceform.perms" />
			</a-form-item>
			<a-form-item field="component" label="资源地址" style="align: start">
			<a-form-item
			field="component"
			label="资源地址"
			style="align: start"
			>
			<a-input v-model="resourceform.component" />
			</a-form-item>
			<a-form-item>
			@@ -65,21 +96,35 @@
			</a-card>
			</a-col>
			</a-row>
			<a-modal width="50%" v-model:visible="visible" title="新增" @cancel="handleCancel" @ok="addresource">
			<a-modal
			width="50%"
			v-model:visible="visible"
			title="新增"
			@cancel="handleCancel"
			@ok="addresource"
			>
			<a-form :model="resourceform" layout="horizontal">
			<a-form-item field="parentName" label="上级资源" disabled>
			<a-input v-model="resourceform.parentName" />
			</a-form-item>
			<a-form-item field="status" label="资源状态">
			<a-switch checked-value="0" unchecked-value="1" v-model="resourceform.status"></a-switch>
			<a-switch
			checked-value="0"
			unchecked-value="1"
			v-model="resourceform.status"
			></a-switch>
			</a-form-item>
			<a-form-item field="menuName" label="资源名称">
			<a-input v-model="resourceform.menuName" />
			</a-form-item>
			<a-form-item field="menuType" label="资源类型">
			<a-select v-model="resourceform.menuType" :options="options" :field-names="fieldNames"
			:style="{width:'320px'}"
			placeholder="请选择" />
			<a-select
			v-model="resourceform.menuType"
			:options="options"
			:field-names="fieldNames"
			:style="{ width: '320px' }"
			placeholder="请选择"
			/>
			</a-form-item>
			<a-form-item field="perms" label="资源控制权限字符">
			<a-input v-model="resourceform.perms" />
			@@ -93,156 +138,178 @@
			</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) => {
			resourceform.value.parentId = nodeData.menuId;
			visible.value = true;
			};
			const onIconClick = (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 = '';

			const addresource = async () => {
			await ResourceAdd({
			...resourceform.value
			} as unknown as Resource).then((res) => {
			ResourceData("");
			});
			};
			visible.value = true;
			};

			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 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 addresource = async () => {
			await ResourceAdd({
			...resourceform.value,
			} as unknown as Resource).then((res) => {
			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);
			const onIconClickDelete = (nodeData) => {
			ResourceDelete(nodeData.menuId).then(() => {
			ResourceData('');
			});
			} else {
			loop(data, dropNode.menuId, (_, index, arr) => {
			arr.splice(dropPosition < 0 ? index : index + 1, 0, dragNode);
			};

			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 handleCancel = (type) => {
			if (type == 1) {
			visible.value = 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;
			});
			};

			const ResourceData = async (key) => {
			await ResourceList(key).then((res) => {
			treeData.value = [...res.rows];
			});
			};
			loop(data, dragNode.menuId, (_, index, arr) => {
			arr.splice(index, 1);
			});

			ResourceData("");
			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];
			});
			};

			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;
			}

			@keyframes blinkBg {
			0% {
			background-color: transparent;
			.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;
			}

			100% {
			background-color: var(--color-primary-light-1);
			@keyframes blinkBg {
			0% {
			background-color: transparent;
			}

			100% {
			background-color: var(--color-primary-light-1);
			}
			}
			}
			</style>