|
|
|
@ -3,75 +3,81 @@ |
|
|
|
@ 时间: 2024-04-22 08:56:40 |
|
|
|
@ 备注: |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
<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,editAppMenusIcon } from '@/api/DesignForm/requestapi' |
|
|
|
} from "element-plus/es/components/tree/src/tree.type"; |
|
|
|
import { appMenuTreeInfo, appSetInfo } from "@/api/date/type"; |
|
|
|
import { |
|
|
|
gainAllAppMenu, |
|
|
|
editAppMenuCont, |
|
|
|
appMenuShowOrHide, |
|
|
|
delAppMenu, |
|
|
|
editAppMenusIcon, |
|
|
|
} from "@/api/DesignForm/requestapi"; |
|
|
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|
|
|
import { threeShiyanData } from "@/api/date/type" |
|
|
|
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" |
|
|
|
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:"" |
|
|
|
} |
|
|
|
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>({}) |
|
|
|
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 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) |
|
|
|
} |
|
|
|
const appPageKey = computed({ |
|
|
|
get() { |
|
|
|
return props.appPageKey; |
|
|
|
}, |
|
|
|
set(val: any) { |
|
|
|
emits("update:appPageKey", val); |
|
|
|
}, |
|
|
|
}); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ -79,307 +85,330 @@ const appPageKey = computed({ |
|
|
|
@ 功能: 树移动完毕后执行的操作 |
|
|
|
*/ |
|
|
|
const handleDrop = ( |
|
|
|
draggingNode: Node, |
|
|
|
dropNode: Node, |
|
|
|
dropType: NodeDropType, |
|
|
|
ev: DragEvents |
|
|
|
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) |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
// 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[]>([]) |
|
|
|
const treeList = ref<any[]>([]); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-22 15:53:35 |
|
|
|
@ 功能: 加载SVG图标 |
|
|
|
*/ |
|
|
|
const allIconNames:string[] = []; |
|
|
|
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(); |
|
|
|
}) |
|
|
|
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) =>{ |
|
|
|
// console.log("选择----setAppMenusSvg--->",val) |
|
|
|
svgName.value = val.svg |
|
|
|
svgId.value = val.id |
|
|
|
treeList.value = val |
|
|
|
svgIsShow.value = true; |
|
|
|
} |
|
|
|
watch(()=>svgName.value,(val:string)=>{ |
|
|
|
// console.log("监听----svgName--->",val) |
|
|
|
// console.log("监听----threeShiyanData--->",threeShiyanData) |
|
|
|
diguiData(appMenuTree.value) |
|
|
|
}) |
|
|
|
const svgName = ref(""); |
|
|
|
const svgId = ref(""); |
|
|
|
const setAppMenusSvg = (val: any) => { |
|
|
|
// console.log("选择----setAppMenusSvg--->",val) |
|
|
|
svgName.value = val.svg; |
|
|
|
svgId.value = val.id; |
|
|
|
treeList.value = val; |
|
|
|
svgIsShow.value = true; |
|
|
|
}; |
|
|
|
watch( |
|
|
|
() => svgName.value, |
|
|
|
(val: string) => { |
|
|
|
// console.log("监听----svgName--->",val) |
|
|
|
// console.log("监听----threeShiyanData--->",threeShiyanData) |
|
|
|
diguiData(appMenuTree.value); |
|
|
|
} |
|
|
|
); |
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-23 09:44:14 |
|
|
|
@ 功能: 递归判断是哪个节点换了图标 |
|
|
|
*/ |
|
|
|
const diguiData = (val:any) =>{ |
|
|
|
// console.log('跳出循环:', val); |
|
|
|
if(Array.isArray(val)){ |
|
|
|
try { |
|
|
|
val.forEach((item:any) => { |
|
|
|
// console.log('跳出循环--1-->:',item.id); |
|
|
|
// console.log('跳出循环---->:',svgId.value); |
|
|
|
if(item.id == svgId.value){ |
|
|
|
item.svg = svgName.value |
|
|
|
let sendInfo = { |
|
|
|
id:item.id.toString(), |
|
|
|
label:svgName.value |
|
|
|
} |
|
|
|
editAppMenusIcon(sendInfo) |
|
|
|
.then(({data}) => { |
|
|
|
|
|
|
|
}) |
|
|
|
throw item; |
|
|
|
} |
|
|
|
if(item.children&&Array.isArray(item.children)){ |
|
|
|
diguiData(item.children) |
|
|
|
} |
|
|
|
}); |
|
|
|
} catch (e) { |
|
|
|
// console.log('跳出循环:', threeShiyanData); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
const diguiData = (val: any) => { |
|
|
|
// console.log('跳出循环:', val); |
|
|
|
if (Array.isArray(val)) { |
|
|
|
try { |
|
|
|
val.forEach((item: any) => { |
|
|
|
// console.log('跳出循环--1-->:',item.id); |
|
|
|
// console.log('跳出循环---->:',svgId.value); |
|
|
|
if (item.id == svgId.value) { |
|
|
|
item.svg = svgName.value; |
|
|
|
let sendInfo = { |
|
|
|
id: item.id.toString(), |
|
|
|
label: svgName.value, |
|
|
|
}; |
|
|
|
editAppMenusIcon(sendInfo).then(({ data }) => {}); |
|
|
|
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.toString() |
|
|
|
console.log('新建子分组-->:', menuParentKey.value); |
|
|
|
menuGroupShow.value = true |
|
|
|
} |
|
|
|
const menuGroupShow = ref(false); |
|
|
|
const menuParentKey = ref(""); |
|
|
|
const addNewSunMenuGroup = (val: any) => { |
|
|
|
console.log("新建子分组:", val); |
|
|
|
menuParentKey.value = val.id.toString(); |
|
|
|
console.log("新建子分组-->:", menuParentKey.value); |
|
|
|
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) |
|
|
|
}) |
|
|
|
} |
|
|
|
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 |
|
|
|
} |
|
|
|
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 |
|
|
|
} |
|
|
|
const showOrHide = (val: appMenuTreeInfo, types: number) => { |
|
|
|
// console.log('显示和隐藏菜单:',val,types); |
|
|
|
let sendInfo = { |
|
|
|
types: types, |
|
|
|
menuInfo: val, |
|
|
|
}; |
|
|
|
|
|
|
|
appMenuShowOrHide(sendInfo) |
|
|
|
.then((data) =>{ |
|
|
|
// console.log('显示和隐藏菜单:',data); |
|
|
|
gainSunAppContent() |
|
|
|
}); |
|
|
|
} |
|
|
|
appMenuShowOrHide(sendInfo).then((data) => { |
|
|
|
// console.log('显示和隐藏菜单:',data); |
|
|
|
gainSunAppContent(); |
|
|
|
}); |
|
|
|
}; |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-07 10:03:30 |
|
|
|
@ 功能: 删除app自定义菜单 |
|
|
|
*/ |
|
|
|
const editAppMenu = (val:appMenuTreeInfo) =>{ |
|
|
|
// console.log('editAppMenu:',val); |
|
|
|
ElMessageBox.confirm( |
|
|
|
"您确定要删除此项？一经删除！将不可恢复！请慎重操作", |
|
|
|
"删除提示", |
|
|
|
{ |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning', |
|
|
|
} |
|
|
|
) |
|
|
|
.then(() => { |
|
|
|
let sendInfo = { |
|
|
|
id:val.id.toString(), |
|
|
|
status:3 |
|
|
|
} |
|
|
|
delAppMenu(sendInfo) |
|
|
|
.then((data) =>{ |
|
|
|
// console.log('删除app自定义菜单:',data); |
|
|
|
gainSunAppContent() |
|
|
|
ElMessage({ |
|
|
|
type: 'success', |
|
|
|
message: data.msg, |
|
|
|
}) |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
const saveAppFormIsShow = ref(false) |
|
|
|
const editAppMenu = (val: appMenuTreeInfo) => { |
|
|
|
// console.log('editAppMenu:',val); |
|
|
|
ElMessageBox.confirm("您确定要删除此项？一经删除！将不可恢复！请慎重操作", "删除提示", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
}).then(() => { |
|
|
|
let sendInfo = { |
|
|
|
id: val.id.toString(), |
|
|
|
status: 3, |
|
|
|
}; |
|
|
|
delAppMenu(sendInfo).then((data) => { |
|
|
|
// console.log('删除app自定义菜单:',data); |
|
|
|
gainSunAppContent(); |
|
|
|
ElMessage({ |
|
|
|
type: "success", |
|
|
|
message: data.msg, |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}; |
|
|
|
const saveAppFormIsShow = ref(false); |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-07 11:21:39 |
|
|
|
@ 功能: 新增表单页面 |
|
|
|
*/ |
|
|
|
const creetMenuId = ref("") |
|
|
|
const isNew = ref(false) |
|
|
|
const createNewPage = (val?:string) => { |
|
|
|
creetMenuId.value = val.toString(); |
|
|
|
saveAppFormIsShow.value = true; |
|
|
|
isNew.value = true |
|
|
|
} |
|
|
|
const creetMenuId = ref(""); |
|
|
|
const isNew = ref(false); |
|
|
|
const createNewPage = (val?: string) => { |
|
|
|
creetMenuId.value = val.toString(); |
|
|
|
saveAppFormIsShow.value = true; |
|
|
|
isNew.value = true; |
|
|
|
}; |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-17 14:22:12 |
|
|
|
@ 功能: 判断能否拖入此节点 |
|
|
|
*/ |
|
|
|
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => { |
|
|
|
// console.log("draggingNode--->",draggingNode) |
|
|
|
// console.log("dropNode--->",dropNode) |
|
|
|
// console.log("type--->",type) |
|
|
|
// if (dropNode.data.type === 2) { |
|
|
|
// return false |
|
|
|
// } else { |
|
|
|
// return true |
|
|
|
// } |
|
|
|
if(draggingNode.data.type === 2 && dropNode.data.type === 2 && type == "inner"){ |
|
|
|
return false |
|
|
|
}else{ |
|
|
|
return true |
|
|
|
} |
|
|
|
// return true |
|
|
|
} |
|
|
|
// console.log("draggingNode--->",draggingNode) |
|
|
|
// console.log("dropNode--->",dropNode) |
|
|
|
// console.log("type--->",type) |
|
|
|
// if (dropNode.data.type === 2) { |
|
|
|
// return false |
|
|
|
// } else { |
|
|
|
// return true |
|
|
|
// } |
|
|
|
if (draggingNode.data.type === 2 && dropNode.data.type === 2 && type == "inner") { |
|
|
|
return false; |
|
|
|
} else { |
|
|
|
return true; |
|
|
|
} |
|
|
|
// 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) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
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" |
|
|
|
@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-tooltip :content="node.label" placement="top" effect="dark"> |
|
|
|
<el-tree |
|
|
|
:data="appMenuTree" |
|
|
|
draggable |
|
|
|
default-expand-all |
|
|
|
node-key="id" |
|
|
|
:allow-drop="allowDrop" |
|
|
|
:expand-on-click-node="true" |
|
|
|
@node-drag-start="startDrop" |
|
|
|
@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-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-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{node.label}}</el-text> |
|
|
|
</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 v-if="data.type==1" divided @click="addNewSunMenuGroup(data)">新建子分组</el-dropdown-item> |
|
|
|
<!-- <el-dropdown-item @click="">新建普通表单</el-dropdown-item> |
|
|
|
<el-text class="w-120px mb-2" truncated @click="openAppPage(data)">{{ |
|
|
|
node.label |
|
|
|
}}</el-text> |
|
|
|
</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 |
|
|
|
v-if="data.type == 1" |
|
|
|
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" :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" :is-new="isNew" 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" /> |
|
|
|
<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" |
|
|
|
: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" |
|
|
|
:is-new="isNew" |
|
|
|
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; |
|
|
|
} |
|
|
|
<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; |
|
|
|
.appMenuTitle:hover .svgBox { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
hreenshan112
9 months ago