hxgksystemapp/src/views/sysworkflow/lowcodepage/appPage/appMenus.vue

<!--
@ 作者: 秦东
@ 时间: 2024-04-22 08:56:40
@ 备注: 
-->
<script lang='ts' setup>
import type {
  AllowDropType,
  NodeDropType,
} from 'element-plus/es/components/tree/src/tree.type'
import SvgIcon from "@/components/SvgIcon/index.vue";
import { threeShiyanData } from "@/api/date/type"
import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue";

const props = defineProps({
	formKey:{
		type:String,
		default:""
	},
	menusTree:{
		type:Object,
		default(){
			return {}
		}
	}
});
const svgIsShow = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-04-22 10:06:20
@ 功能: 树移动完毕后执行的操作
*/
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
	console.log('draggingNode:', draggingNode)
  	console.log('dropNode:', dropNode)
  	console.log('dropType:', dropType)
	console.log('ev:', ev)
}

const treeList = ref<any[]>([])
/**
@ 作者: 秦东
@ 时间: 2024-04-22 15:53:35
@ 功能: 加载SVG图标
*/
const allIconNames:string[] = []; 
const loadIcons = () => {
  	const icons = import.meta.glob("../../../../assets/icons/*.svg");
	for (const icon in icons) {
		const iconName = icon.split("assets/icons/")[1].split(".svg")[0];
		allIconNames.push(iconName);
	}
	// console.log("icons",icons)
	// console.log("allIconNames",allIconNames)
}
onMounted(()=>{
	treeList.value = threeShiyanData
	loadIcons();
})
/**
@ 作者: 秦东
@ 时间: 2024-04-22 16:52:03
@ 功能: 设置表单图标
*/
const svgName = ref("")
const svgId= ref("")
const setAppMenusSvg = (val:any) =>{
	svgName.value = val.svg
	svgId.value = val.id
	svgIsShow.value = true;
}
watch(()=>svgName.value,(val:string)=>{
	console.log("监听----svgName--->",val)
	console.log("监听----threeShiyanData--->",threeShiyanData)
	diguiData(treeList.value)
})

/**
@ 作者: 秦东
@ 时间: 2024-04-23 09:44:14
@ 功能: 递归判断是哪个节点换了图标
*/
const diguiData = (val:any) =>{
	if(Array.isArray(val)){
		try {
			val.forEach((item:any) => {
				if(item.id == svgId.value){
					item.svg = svgName.value 
					throw item;
				}
				if(item.children&&Array.isArray(item.children)){
					diguiData(item.children)
				}
			});
		} catch (e) {
			console.log('跳出循环:', threeShiyanData);
		}
	}
}
</script>
<template>
	<el-tree
		:data="props.menusTree"
		draggable
		default-expand-all
		node-key="id"
		:expand-on-click-node="false"
		@node-drop="handleDrop"
	>
		<template #default="{ node, data }">
		<div class="appMenuTitle">
			<el-space wrap>
				<svg-icon  prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" />
				<el-text>{{node.label}}</el-text>
			</el-space>
			<el-dropdown>
				<svg-icon class="svgBox"  prefix="icon" icon-class="set" />
				<template #dropdown>
					<el-dropdown-item>修改名称</el-dropdown-item>
					<el-dropdown-item>复制</el-dropdown-item>
					<el-dropdown-item>移动到</el-dropdown-item>
					<el-dropdown-item divided>新建子分组</el-dropdown-item>
					<el-dropdown-item>新建普通表单</el-dropdown-item>
					<el-dropdown-item>新建流程表单</el-dropdown-item>
					<el-dropdown-item divided>隐藏PC端</el-dropdown-item>
					<el-dropdown-item>隐藏移动端</el-dropdown-item>
					<el-dropdown-item divided><el-text class="mx-1" type="danger">删除</el-text></el-dropdown-item>
				</template>
			</el-dropdown>
		</div>
			
		</template>
	</el-tree>
	<AppMenuSvgPage v-model:is-show="svgIsShow" v-model:svg-name="svgName" :icon-list="allIconNames" />
</template>
<style  lang='scss' scoped>
.appMenuTitle{
	width: 100%;
	padding-right: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.svgBox{
		display: none;
	}
}
.appMenuTitle:hover .svgBox{
	display: block;
}
</style>