You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
8.8 KiB
339 lines
8.8 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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:""
|
|
},
|
|
appPageKey:{
|
|
type:String,
|
|
default:""
|
|
}
|
|
});
|
|
const svgIsShow = ref(false)
|
|
const emits = defineEmits(["update:menusTree","update:appPageKey","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)
|
|
}
|
|
});
|
|
|
|
const appPageKey = computed({
|
|
get() {
|
|
return props.appPageKey
|
|
},
|
|
set(val: any) {
|
|
emits('update:appPageKey', 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" v-model:app-page-key="appPageKey" :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>
|
|
|