hotline-admin/src/views/system/institutionalUsers/user/component/addUser.vue

<template>
	<div class="system-add-user-container">
		<el-dialog v-model="isShowDialog" width="769px" draggable title="新增用户">
			<el-form :model="ruleForm" label-width="90px"  ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="账号" prop="name" :rules="[{required: true,message: '请输入账号',trigger: 'blur'}]">
							<el-input v-model="ruleForm.name" 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="userName" :rules="[{required: false,message: '请输入用户昵称',trigger: 'blur'}]">
							<el-input v-model="ruleForm.userName" 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="phoneNo" :rules="[{ required: false, message: '请输入手机号', trigger: 'blur' }]">
							<el-input v-model="ruleForm.phoneNo" 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="parentId" :rules="[{ required: false, message: '请选择上级组织', trigger: 'change' }]">
                            <el-cascader
                                :options="OrgData"
                                :props="{ checkStrictly: true, value: 'id', label: 'orgName',emitPath:false }"
                                placeholder="请选择上级组织"
                                clearable
                                class="w100"
                                v-model="ruleForm.orgId"
								ref="cascaderRef" @change="getselKnowledgeList"
                            >
                                <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-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="默认分机" prop="defaultTelNo" :rules="[{required: false,message: '请选择默认分机',trigger: 'change'}]">
                            <el-select v-model="ruleForm.defaultTelNo"  placeholder="请选择默认分机" class="w100">
                                <el-option
                                v-for="item in telsList"
                                :key="item.no"
                                :label="item.no"
                                :value="item.no"
                                />
                            </el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit()" :loading="loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent,getCurrentInstance,ref } from 'vue';
import { ElMessage } from 'element-plus';
import { throttle } from '/@/utils/tools';
import { addUser,getcanuseorg } from '/@/api/system/user';
import { getTelsList } from '/@/api/deviceManagement/tels';
// 定义接口来定义对象的类型
interface UserState {
	isShowDialog: boolean;
	ruleForm: {
		phoneNo: '', // 手机号
		name: '', // 姓名
		userName: '', // 用户昵称
		orgId:'', // 组织id
		orgCode:'', //组织code
		staffNo:'', //工号
		defaultTelNo:'' ,//默认分机
	};
	OrgData:Array<any>;
	telsList:Array<any>;
}

export default defineComponent({
	name: 'systemAddUser',
	setup(props:any, {emit}:any) {
		const state = reactive<UserState>({
			isShowDialog: false,
			ruleForm: {
				phoneNo: '', // 手机号
				name: '', // 姓名
				userName: '', // 用户昵称
				orgId:'', // 组织id
				orgCode:'', //组织code
				staffNo:'', //工号
				defaultTelNo:'' ,//默认分机
			},
			OrgData:[], //可用组织
			telsList:[] // 所有分机
		});
		const { proxy } = <any>getCurrentInstance()
		let loading = ref<boolean>(false);
		// 打开弹窗
		const openDialog = ()=> {
			if(proxy.$refs.ruleFormRef){
				proxy.$refs.ruleFormRef.resetFields();
			}
			getOrgListFn();
			getTelsListFn();
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 获取可用组织
        const getOrgListFn = ()=>{
            getcanuseorg().then((res:any)=>{
                state.OrgData = res?.result ?? [];
            })
        }
		// 获取选择组织name值
		const getselKnowledgeList = ()=>{
			let currentNode = proxy.$refs.cascaderRef.getCheckedNodes();
			state.ruleForm.orgCode = currentNode[0].data.orgCode;
		}
		// 获取分机列表
		const getTelsListFn = ()=>{
			getTelsList().then((res:any)=>{
                state.telsList = res?.result ?? [];
            })
		}
		// 新增
		const onSubmit = throttle(() => {
			proxy.$refs.ruleFormRef.validate((valid: boolean) => {
				if (valid) {
						loading.value = true;
						addUser(state.ruleForm).then(()=>{
							ElMessage({
								message: '新增成功',
								type: 'success',
							})
							loading.value = false;
							closeDialog();
							emit("updateList")
						}).catch(()=>{ // 新增失败
							loading.value = false;
							closeDialog();
						})
				} else {
					return false;
				}
			});
		},1000);
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			loading,
			getselKnowledgeList,
			...toRefs(state),
		};
	},
});
</script>