hotline-admin/src/views/system/organize/component/addOrg.vue

<template>
	<div class="system-add-menu-container">
		<el-dialog title="新增部门" v-model="state.isShowDialog" width="769px" draggable>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="部门名称" prop="orgName" :rules="[{ required: true, message: '请输入部门名称', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.orgName" placeholder="请输入部门名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="部门简称" prop="orgShortName" :rules="[{ required: true, message: '请输入部门简称', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.orgShortName" placeholder="请输入部门简称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="部门类别" prop="orgType" :rules="[{ required: true, message: '请选择部门类别', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.orgType" placeholder="请选择部门类别" class="w100">
								<el-option v-for="item in state.orgType" :key="item.key" :label="item.value" :value="item.key" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="是否启用" prop="isEnable">
							<el-switch v-model="state.ruleForm.isEnable" inline-prompt active-text="启" inactive-text="禁"></el-switch>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="上级部门" prop="parentId" :rules="[{ required: false, message: '请选择上级部门', trigger: 'change' }]">
							<el-cascader
								:options="state.orgData"
								filterable
								:props="{ checkStrictly: true, value: 'id', label: 'orgName', emitPath: false }"
								placeholder="请选择上级部门"
								clearable
								class="w100"
								v-model="state.ruleForm.parentId"
								ref="cascaderRef"
								@change="getselKnowledgeList"
								:disabled="state.disabled"
							>
								<template #default="{ node, data }">
									<span>{{ data.orgName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" v-waves="'light'" :loading="state.loading">确 定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemAddOrg">
import { reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { addOrg } from '/@/api/system/organize';
import mittBus from '/@/utils/mitt';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);

// 定义变量内容
const ruleFormRef = ref<FormInstance>();
const state = reactive<any>({
	isShowDialog: false,
	ruleForm: {
		orgName: '',
		orgCode: '',
		parentId: '',
		parentName: '',
		orgType: '',
		isEnable: true,
		children: [],
	},
	orgData: [], // 上级部门数据
	orgType: [], // 部门类型
	loading: false,
	disabled: false,
	telsList: [],
});
// 打开弹窗
const openDialog = (orgData: any, orgType: any, row?: any) => {
	state.orgData = orgData ?? [];
	state.orgType = orgType ?? [];
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	if (row.id) {
		state.ruleForm.parentId = row.id;
		state.ruleForm.parentName = row.orgName;
		state.disabled = true;
	} else {
		state.ruleForm.parentId = '';
		state.ruleForm.parentName = '';
		state.disabled = false;
	}
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
const cascaderRef = ref();
// 获取选择name值
const getselKnowledgeList = () => {
	let currentNode = cascaderRef.value.getCheckedNodes();
	state.ruleForm.parentName = currentNode[0]?.label ?? '';
};
// 新增
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid) => {
		if (valid) {
			state.loading = true;
			addOrg(state.ruleForm)
				.then(() => {
					emit('updateList');
					closeDialog(); // 关闭弹窗
					ElMessage.success('新增成功');
					mittBus.emit('clearCache','systemUser')
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		}
	});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>