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

<template>
	<div class="system-edit-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="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-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="手机号" prop="phoneNo" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' },{pattern: /^((12\d)|(13\d)|(14[5|7])|(15([0-3]|[5-9]))|(18[0|1,5-9]))\d{8}$/, message: '手机号格式错误'}]">
							<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="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-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent,ref,getCurrentInstance } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { throttle } from '/@/utils/tools';
import { updateUser,getcanuseorg } from '/@/api/system/user';
import { getTelsList } from '/@/api/deviceManagement/tels';
// 定义接口来定义对象的类型
interface UserState {
	isShowDialog: boolean;
	ruleForm: {
		phoneNo: string;
		name: string;
		userName: string;
		orgId:string;
		orgCode:string;
		staffNo:string;
		defaultTelNo:string
	};
	OrgData:Array<any>;
	telsList:Array<any>;
}
export default defineComponent({
	name: 'systemEditUser',
	setup(props:any, {emit}:any) {
		const state = reactive<UserState>({
			isShowDialog: false,
			ruleForm: {
				phoneNo: '', // 手机号
				name: '', // 姓名
				userName: '', // 用户昵称
				orgId:'', // 组织id
				orgCode:'', //组织code
				staffNo:'', //工号
				defaultTelNo:'' ,//默认分机
			},
			OrgData:[], //可用组织
			telsList:[] // 所有分机
		});
		const ruleFormRef = ref<FormInstance>()
		const { proxy } = <any>getCurrentInstance()
		let loading = ref<boolean>(false);
		// 打开弹窗
		const openDialog = (row: any) => {
			state.ruleForm = JSON.parse(JSON.stringify(row));
			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( async(formEl: FormInstance | undefined) => {
			if (!formEl) return
			await formEl.validate((valid) => {
				if (valid) {
					loading.value = true;
					updateUser(state.ruleForm).then(()=>{
						ElMessage({
							message: '修改成功',
							type: 'success',
						})
						loading.value = false;
						closeDialog();
						emit("updateList")
					}).catch(()=>{ // 新增失败
						loading.value = false;
						closeDialog();
					})
				} else {
					// console.log('error submit!', fields)
				}
			})
		},1000);
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			ruleFormRef,
			loading,
			getselKnowledgeList,
			...toRefs(state),
		};
	},
});
</script>