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 { gainAllAppMenu,editAppMenuCont } from '@/api/DesignForm/requestapi'

import SvgIcon from "@/components/SvgIcon/index.vue";
import { threeShiyanData } from "@/api/date/type"
import AppMenuSvgPage from "@/components/IconSelect/appMenuSvgPage.vue";
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue"

const props = defineProps({
	appCont:{
		type:Object,
		default(){
			return {}
		}
	},
	formKey:{
		type:String,
		default:""
	},
	menusTree:{
		type:Object,
		default(){
			return {}
		}
	}
});
const svgIsShow = ref(false)
const emits = defineEmits(["update:menusTree"]);
/**
@ 作者: 秦东
@ 时间: 2024-04-24 13:17:30
@ 功能: 菜单列表
*/
const appMenuTree =  computed({
	get() {
		return props.menusTree
	},
	set(val: any) {
		emits('update:menusTree', val)
	}
});


/**
@ 作者: 秦东
@ 时间: 2024-04-22 10:06:20
@ 功能: 树移动完毕后执行的操作
*/
const handleDrop = (
	draggingNode: Node,
	dropNode: Node,
	dropType: NodeDropType,
	ev: DragEvents
) => {
	
	let sendCont = {
		id:props.appCont.uuid,
		menuTree:appMenuTree.value
	}
	editAppMenuCont(sendCont)
		.then((data)=>{
			console.log('树移动完毕后执行的操作============>',data)
		})
	
}

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);
		}
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-04-24 13:12:18
@ 功能: 新建子分组
*/
const menuGroupShow = ref(false)
const menuParentKey = ref("")
const addNewSunMenuGroup = (val:any) =>{
	console.log('新建子分组:', val);
	menuParentKey.value = val.id
	menuGroupShow.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-04-24 13:22:47
@ 功能: 更新
*/
const gainSunAppContent = () =>{
	console.log('更新:');
	gainAllAppMenu({id:props.appCont.uuid})
		.then((data) =>{
			console.log('更新:',data);
			appMenuTree.value = data.data
		})
}
</script>
<template>
	<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" />
	<el-tree
		:data="appMenuTree"
		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 @click="addNewSunMenuGroup(data)">新建子分组</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>