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 { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
import { gainAllAppMenu,editAppMenuCont,appMenuShowOrHide,delAppMenu } 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"
import EditAppMenuNamePage from "@/views/sysworkflow/lowcodepage/appPage/editAppMenuNamePage.vue"
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue"

const props = defineProps({
	appCont:{
		type:Object,
		default(){
			return {}
		}
	},
	formKey:{
		type:String,
		default:""
	},
	menusTree:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	},
	groupKey:{
		type:String,
		default:""
	}
});
const svgIsShow = ref(false)
const emits = defineEmits(["update:menusTree","openAppPageForm"]);
const appOenMenu = ref<appMenuTreeInfo>({})
/**
@ 作者: 秦东
@ 时间: 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
) => {
	// console.log('树移动完毕后执行的操作====1========>',draggingNode)
	// console.log('树移动完毕后执行的操作=====2=======>',dropNode)
	// console.log('树移动完毕后执行的操作=====3=======>',dropType)
	// console.log('树移动完毕后执行的操作=====4=======>',ev)
	return false;
	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
			// openAppPage(appOenMenu)
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-04-25 13:23:46
@ 功能: 修改名称
*/
const editAppMenuNameShow = ref(false)
const editMenuName = (val:appMenuTreeInfo) =>{
	console.log('修改名称:',val);
	appOenMenu.value = val
	editAppMenuNameShow.value = true
}
/**
@ 作者: 秦东
@ 时间: 2024-05-07 09:00:47
@ 功能: 显示和隐藏菜单
*/
const showOrHide = (val:appMenuTreeInfo,types:number) =>{
	console.log('显示和隐藏菜单:',val,types);
	let sendInfo = {
		types:types,
		menuInfo:val
	}

	appMenuShowOrHide(sendInfo)
		.then((data) =>{
			console.log('显示和隐藏菜单:',data);
			gainSunAppContent()
		});
}
/**
@ 作者: 秦东
@ 时间: 2024-05-07 10:03:30
@ 功能: 删除app自定义菜单
*/
const editAppMenu = (val:appMenuTreeInfo) =>{
	console.log('editAppMenu:',val);
	let sendInfo = {
		id:val.id.toString(),
		status:3
	}
	delAppMenu(sendInfo)
		.then((data) =>{
			console.log('删除app自定义菜单:',data);
			gainSunAppContent()
		});
}
const saveAppFormIsShow = ref(false)
/**
@ 作者: 秦东
@ 时间: 2024-05-07 11:21:39
@ 功能: 新增表单页面
*/
const creetMenuId = ref("")
const createNewPage = (val?:string) => {
	creetMenuId.value = val.toString();
	saveAppFormIsShow.value = true;
}
/**
@ 作者: 秦东
@ 时间: 2024-05-17 14:22:12
@ 功能: 判断能否拖入此节点
*/
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
	if (dropNode.data.type === 2) {
		return false
	} else {
		return true
	}
}
/**
@ 作者: 秦东
@ 时间: 2024-05-17 16:45:40
@ 功能: 打开app表单
*/
const openAppPage = (val:any) =>{
	// console.log("打开app表单------>",val)
	if(val.isLock == 1){
		ElMessage({
			showClose: true,
			message: '该页面为系统内置页面！请到应用层面访问查看!',
			type: 'warning',
		})
	}else{
		if(val.type !== 1){
			console.log("打开app表单--1---->",val)
			emits('openAppPageForm', val)
		}
	}
	
}
</script>
<template>
	
	
	<el-tree
		:data="appMenuTree"
		draggable
		default-expand-all
		node-key="id"
		:allow-drop="allowDrop"
		:expand-on-click-node="true"
		@node-drag-start="startDrop"
	>
		<template #default="{ node, data }">
		
		<div class="appMenuTitle">
			<el-space wrap>
				<svg-icon  prefix="icon" :icon-class="data.svg" @click="setAppMenusSvg(data)" />
				<el-tooltip :content="node.label" placement="top" effect="dark">
					<el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{node.label}}</el-text>
				</el-tooltip>
			</el-space>
			<el-dropdown>
				<svg-icon class="svgBox"  prefix="icon" icon-class="set" />
				<template #dropdown>
					<el-dropdown-item @click="editMenuName(data)">修改名称</el-dropdown-item>
					<!-- <el-dropdown-item @click="">复制</el-dropdown-item> -->
					<!-- <el-dropdown-item @click="moveMenus(data)">移动到</el-dropdown-item> -->
					<el-dropdown-item divided @click="addNewSunMenuGroup(data)">新建子分组</el-dropdown-item>
					<!-- <el-dropdown-item @click="">新建普通表单</el-dropdown-item>
					<el-dropdown-item @click="">新建流程表单</el-dropdown-item> -->
					<el-dropdown-item v-if="data.type==1" @click="createNewPage(data.id)">新建页面</el-dropdown-item>
					<el-dropdown-item @click="showOrHide(data,1)" divided><el-text v-if="data.pcIsShow==1">隐藏PC端</el-text><el-text v-else>取消-隐藏PC端</el-text></el-dropdown-item>
					<el-dropdown-item @click="showOrHide(data,2)"><el-text v-if="data.wapIsShow==1">隐藏移动端</el-text><el-text v-else>取消-隐藏移动端</el-text></el-dropdown-item>
					<el-dropdown-item @click="editAppMenu(data)" 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" :svg-id="svgId" :icon-list="allIconNames" />
	<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="props.appCont" @updateMenu="gainSunAppContent" />
	<EditAppMenuNamePage v-model:is-show="editAppMenuNameShow" :menu-cont="appOenMenu" @updateMenu="gainSunAppContent" />
	<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :drawer-with="props.drawerWith"  :form-Key="props.formKey" :app-cont="props.appCont"  :group-key="props.groupKey" :menu-id="creetMenuId" @gainSunAppContent="gainSunAppContent"   />
</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>