job-master/src/views/permission/list/add/add.vue

<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" :label-col="{span: 4}" labelAlign="right" style="margin-top: 20px;">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="权限名称" name="name">
						<a-input v-model:value="createForm.name" placeholder="请输入权限名称" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="路径" name="path">
						<a-input v-model:value="createForm.path" placeholder="请输入路径" />
					</a-form-item>
			
				</a-col>
				<a-col span="24">
					<a-form-item label="动作" name="action">
						<a-input v-model:value="createForm.action" placeholder="请输入动作" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="模型" name="module">
						<a-input v-model:value="createForm.module" placeholder="请输入模型" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="权限类型" name="p_type">
						<a-radio-group v-model:value="createForm.p_type" @change="pTypeChange">
							<a-radio :value="1">权限</a-radio>
							<a-radio :value="2">菜单</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24" v-if="addOtherForm.isAddLevel">
					<a-form-item label="是否是顶级菜单" name="parent_id" >
						<a-radio-group v-model:value="addOtherForm.parent_id"  @change="parentIdChange">
							<a-radio :value="-1">是</a-radio>
							<a-radio :value="0">否</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-col>
				<a-col span="24" v-if="!addOtherForm.isTopLevel">
					<a-form-item label="上级菜单id" name="parent_id" >
						<a-cascader v-model:value="cascaderParentId" @change="parentChange"
							:options="listOptions" :fieldNames="listFieldNames" :changeOnSelect="true"
							placeholder="请选择所属的上级菜单" style="width: 100%" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="描述" name="description">
						<a-input v-model:value="createForm.description" placeholder="请输入描述" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { addPermission, updatePermission, getPermissionListWithchilds } from '@/apis/models';
	import { dataForm, otherDataForm, reset } from '@/views/permission/list/add/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	import { filterChildPermissionsByType } from '@/utils/dataHelper.ts';
	let { store, openAddModel, hideModal, message, } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record','level_record']);
	let title = ref<String>('新增权限/菜单');
	let listOptions = ref([]);
	let cascaderParentId = ref([]);
	const listFieldNames = ref({ label: 'name', value: 'id', children: 'childs' });

	let createForm = ref<companyDepartmentType.addFormType>(dataForm)
	let addOtherForm = ref<companyDepartmentType.addOtherFormType>(otherDataForm)

	onMounted(() => {
		getPermissionListWithchilds({page:1, pagesize: 999}).then(res => {
			listOptions.value = filterChildPermissionsByType(res.data.permissions)
		})
	})
	
	const pTypeChange = (val) => {
		if(val.target.value == 1) {
			addOtherForm.value.isAddLevel = false;
		} else {
			addOtherForm.value.isAddLevel = true;
		}
		addOtherForm.value.isAddLevel == false
		addOtherForm.value.parent_id = addOtherForm.value.parent_id != 0 ? addOtherForm.value.parent_id : 0;
		createForm.value.parent_id = createForm.value.parent_id != 0 ? createForm.value.parent_id : 0;
		cascaderParentId.value = []
	}
	
	const parentIdChange = (val) => {
		cascaderParentId.value = []
		createForm.value.parent_id = val.target.value;
		val.target.value == 0 ? addOtherForm.value.isTopLevel = false : addOtherForm.value.isTopLevel = true
	}
	
	const parentChange = (val) => {
		createForm.value.parent_id = val.length > 0 ? val[val.length - 1] : 0;
	}
	
	
	

	const sumbitForm = () => {
		if (createForm.value.name && createForm.value.p_type) {
			if (!createForm.value.id) {
				addPermission(createForm.value).then(res => {
					getPermissionListWithchilds({page:1, pagesize: 999}).then(res => {
						listOptions.value = filterChildPermissionsByType(res.data.permissions)
					})
					message.success('新增菜单/权限成功');
					hideModal();
					resetForm();
					emit('successAdd');
					
				}).catch(err => {
				})
			} else {
				updatePermission(createForm.value).then(res => {
					getPermissionListWithchilds({page:1, pagesize: 999}).then(res => {
						listOptions.value = filterChildPermissionsByType(res.data.permissions)
					})
					message.success('修改菜单/权限成功');
					hideModal();
					resetForm();
					emit('successAdd');
					
				}).catch(err => {
				})
			}
		} else {
			message.warning('请补充完整信息');
		}

	}

	const resetForm = () => {
		createForm.value = reset().dataForm;
		addOtherForm.value = reset().otherDataForm;
		cascaderParentId.value = []
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => [props.edit_record, props.level_record], (newVal) => {
		console.log(newVal)
		if (newVal[0]) {
			title.value = "编辑权限/菜单";
			console.log(newVal)
			createForm.value = {
				id: newVal[0].id,
				name: newVal[0].name,
				path: newVal[0].path,
				action: newVal[0].action,
				module: newVal[0].module,
				p_type: newVal[0].p_type,
				parent_id: newVal[0].parent_id,
				description: newVal[0].description,
			}
			
			if(newVal[0].parent_id == -1) {
					cascaderParentId.value.push(newVal[0].id);
				addOtherForm.value.isAddLevel = true;
				addOtherForm.value.isTopLevel = true;
				addOtherForm.value.parent_id = -1;
			} else  {
				cascaderParentId.value.push(newVal[0].parent_id);
				cascaderParentId.value.push(newVal[0].id);
				addOtherForm.value.isAddLevel = true
				addOtherForm.value.isTopLevel = false
				addOtherForm.value.parent_id = 0;
			} 
		} else if(newVal[1]){
			title.value = "添加下级权限/菜单";
			createForm.value.p_type = newVal[1].p_type
			cascaderParentId.value = [];
			if(newVal[1].parent_id == -1) {
				cascaderParentId.value.push(newVal[1].id);
				addOtherForm.value.isAddLevel = true;
				addOtherForm.value.isTopLevel = true;
				addOtherForm.value.parent_id = -1;
			} else {
				cascaderParentId.value.push(newVal[1].parent_id);
				cascaderParentId.value.push(newVal[1].id);
				addOtherForm.value.isAddLevel = true
				addOtherForm.value.isTopLevel = false
				addOtherForm.value.parent_id = 0;
			}
			createForm.value.parent_id = newVal[1].id
		} else {
			title.value = "编辑权限/菜单";
		}
	})
</script>

<style>

</style>