10 changed files with 453 additions and 35 deletions
|
After Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,165 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-23 16:56:36 |
||||
|
@ 备注: 菜单分组 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { appMenuTreeInfo } from "@/api/date/type" |
||||
|
import { ginOthenMenuTree,saveAppMenu } from '@/api/DesignForm/requestapi' |
||||
|
const props = defineProps({ |
||||
|
appCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
menuParentKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
isShow:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
menuType:{ |
||||
|
type:Number, |
||||
|
default:1 |
||||
|
} |
||||
|
}); |
||||
|
const emits = defineEmits(["update:isShow","updateMenu"]); |
||||
|
watch(()=>props.isShow,(val:boolean)=>{ |
||||
|
if(val){ |
||||
|
console.log("props.appCont",props.appCont) |
||||
|
console.log("props.menuParentKey",props.menuParentKey) |
||||
|
getOldMenuTree() |
||||
|
} |
||||
|
}) |
||||
|
const loading = ref(false) |
||||
|
const saveMenuGroup = ref(ElForm); |
||||
|
const menuOldTree = ref<appMenuTreeInfo[]>([]) |
||||
|
const menuGroupInfo = reactive({ |
||||
|
name:"", |
||||
|
group:"" |
||||
|
}) |
||||
|
const ssd = ref() |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 08:50:40 |
||||
|
@ 功能: 关闭 |
||||
|
*/ |
||||
|
const handleClose = () => { |
||||
|
loading.value = false; |
||||
|
emits("updateMenu") |
||||
|
emits("update:isShow",false) |
||||
|
resetForm() |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 09:09:24 |
||||
|
@ 功能: 获取已有菜单树 |
||||
|
*/ |
||||
|
const getOldMenuTree = () => { |
||||
|
ginOthenMenuTree({id:props.appCont.uuid}) |
||||
|
.then((data) =>{ |
||||
|
console.log("获取已有菜单树",data) |
||||
|
if(data.code == 0){ |
||||
|
menuOldTree.value = data.data |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 09:29:59 |
||||
|
@ 功能: 表单验证规则 |
||||
|
*/ |
||||
|
const rules = reactive({ |
||||
|
name: [{ required: true, message: "请输入分组名称", trigger: "blur" }], |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 09:33:56 |
||||
|
@ 功能: 重置表单 |
||||
|
*/ |
||||
|
const resetForm = () => { |
||||
|
saveMenuGroup.value.resetFields(); |
||||
|
saveMenuGroup.value.clearValidate(); |
||||
|
|
||||
|
menuGroupInfo.name = undefined; |
||||
|
menuGroupInfo.group = ""; |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-24 09:35:12 |
||||
|
@ 功能: 写入菜单分组 |
||||
|
*/ |
||||
|
const saveMenuData = () => { |
||||
|
console.log("写入菜单分组",menuGroupInfo) |
||||
|
loading.value = true; |
||||
|
saveMenuGroup.value.validate((valid: any) => { |
||||
|
if (valid) { |
||||
|
let groupId = menuGroupInfo.group |
||||
|
if(menuGroupInfo.group == "") { |
||||
|
groupId = props.appCont.uuid |
||||
|
} |
||||
|
let sendCont = { |
||||
|
name:menuGroupInfo.name, |
||||
|
appkey:props.appCont.uuid, |
||||
|
type:props.menuType, |
||||
|
group:groupId |
||||
|
} |
||||
|
console.log("写入菜单分组",sendCont) |
||||
|
saveAppMenu(sendCont) |
||||
|
.then((data) =>{ |
||||
|
handleClose() |
||||
|
}) |
||||
|
.finally(() =>{ |
||||
|
loading.value = false; |
||||
|
}) |
||||
|
}else{ |
||||
|
loading.value = false; |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="props.isShow" |
||||
|
title="新建分组" |
||||
|
width="500" |
||||
|
:before-close="handleClose" |
||||
|
|
||||
|
> |
||||
|
<el-form |
||||
|
ref="saveMenuGroup" |
||||
|
:model="menuGroupInfo" |
||||
|
:rules="rules" |
||||
|
label-width="120px" |
||||
|
> |
||||
|
<el-form-item label="分组名称" prop="name"> |
||||
|
<el-input v-model="menuGroupInfo.name" clearable placeholder="请输入分组名称" /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="选择上级分组"> |
||||
|
<el-tree-select |
||||
|
v-model="menuGroupInfo.group" |
||||
|
:data="menuOldTree" |
||||
|
check-strictly |
||||
|
:render-after-expand="false" |
||||
|
show-checkbox |
||||
|
node-key="id" |
||||
|
value-key="id" |
||||
|
check-on-click-node |
||||
|
clearable |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" v-loading="loading" :disabled="loading" @click="saveMenuData">确定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue