ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue

<!--
@ 作者: 秦东
@ 时间: 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 isNotEdit = ref(false)
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.value)
		if(props.menuParentKey.value !="" && props.menuParentKey.value != undefined && props.menuParentKey.value != "undefined"){
			menuGroupInfo.group = props.menuParentKey.value
			isNotEdit.value = true
		}else{
			isNotEdit.value = false
		}
		getOldMenuTree()
		// console.log("menuGroupInfo.group",menuGroupInfo.group)
	}
})
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)
	isNotEdit.value = 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
					:disabled="isNotEdit"
				/>
			</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>