From 43fca2cb16964496caafdbc34e969d2a7cde7cc0 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期四, 30 三月 2023 15:32:56 +0800 Subject: [PATCH] 用户接口 --- src/views/system/user/component/userDialog.vue | 168 +++++++++++++++++++++++++++----------------------------- 1 files changed, 81 insertions(+), 87 deletions(-) diff --git a/src/views/system/user/component/userDialog.vue b/src/views/system/user/component/userDialog.vue index 0eb4dd7..f3a0d93 100644 --- a/src/views/system/user/component/userDialog.vue +++ b/src/views/system/user/component/userDialog.vue @@ -3,67 +3,51 @@ <el-dialog :title="title" v-model="isShowUserDialog" width="769px"> <el-form :model="userForm" size="default" ref="userRef" :rules="userFormRules" label-width="90px"> <el-row :gutter="35"> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="disabled"> - <el-form-item label="用户名"> - <el-input v-model.trim="userForm.username" :disabled="disabled" placeholder="" clearable></el-input> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> + <el-form-item label="用户名" prop="name"> + <el-input v-model.trim="userForm.name" placeholder="用户名" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="真实姓名" prop="realName"> - <el-input v-model.trim="userForm.realName" placeholder="请输入真实姓名" clearable></el-input> + <el-input v-model.trim="userForm.realName" placeholder="真实姓名" clearable></el-input> </el-form-item> </el-col> + <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="isAdd"> + <el-form-item label="账户密码" prop="pwd"> + <el-input v-model.trim="userForm.pwd" placeholder="账户密码" type="password" show-password> + </el-input> + </el-form-item> + </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="关联角色" prop="roleId"> - <el-select v-model="userForm.roleId" placeholder="请选择" clearable class="w100"> - <el-option v-for="item in roleData" :key="item.roleId" :label="item.roleName" :value="item.roleId"> </el-option> + <el-form-item label="关联角色" prop="roleIds"> + <el-select v-model="userForm.roleIds" placeholder="关联角色" clearable class="w100" multiple> + <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id"> </el-option> </el-select> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="部门" prop="depId"> - <el-cascader :options="departmentData" :props="{ emitPath: false, checkStrictly: true, value: 'depId', label: 'depName' }" placeholder="请选择部门" clearable class="w100" v-model="userForm.depId"> </el-cascader> + <el-cascader :options="departmentData" :props="{ emitPath: false, checkStrictly: true, value: 'id', label: 'depName' }" placeholder="部门" clearable class="w100" v-model="userForm.depId"> </el-cascader> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-form-item label="手机号" prop="phone"> - <el-input v-model.trim="userForm.phone" placeholder="请输入手机号" clearable></el-input> + <el-input v-model.trim="userForm.phone" placeholder="手机号" clearable></el-input> </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="身份证" prop="identify"> - <el-input v-model.trim="userForm.identify" placeholder="请输入身份证" clearable></el-input> - </el-form-item> + <el-form-item label="证件类型" prop="idType"> + <el-select v-model="userForm.idType" placeholder="证件类型" clearable class="w100"> + <el-option :key="1" label="身份证" :value="1"> </el-option> + </el-select> + </el-form-item> </el-col> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="邮箱" prop="email"> - <el-input v-model.trim="userForm.email" placeholder="请输入" clearable></el-input> + <el-form-item label="证件号码" prop="idSerial"> + <el-input v-model.trim="userForm.idSerial" placeholder="证件号码" clearable></el-input> </el-form-item> </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="性别" prop="gender"> - <el-select v-model="userForm.gender" placeholder="请选择" clearable class="w100"> - <el-option v-for="item in sexList" :key="item.id" :value="item.id" :label="item.name"> </el-option> - </el-select> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> - <el-form-item label="账户过期" prop="expireTime"> - <el-date-picker v-model="userForm.expireTime" type="date" placeholder="请选择" class="w100"> </el-date-picker> - </el-form-item> - </el-col> - <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="!disabled"> - <el-form-item label="账户密码" prop="password"> - <el-input v-model.trim="userForm.password" placeholder="请输入" type="password" show-password> - </el-input> - </el-form-item> - </el-col> - - <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">--> - <!-- <el-form-item label="用户状态">--> - <!-- <el-switch v-model="userForm.status" inline-prompt active-value = 1 inactive-value= 0 active-text="启" inactive-text="禁"></el-switch>--> - <!-- </el-form-item>--> - <!-- </el-col>--> </el-row> </el-form> <template #footer> @@ -80,77 +64,62 @@ import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue'; import { ElMessageBox, ElMessage } from 'element-plus'; import { userApi } from '/@/api/systemManage/user'; +import {checkChineseName, verifyFullName, verifyIdCard, verifyPhone} from "/@/utils/toolsValidate"; // 定义接口来定义对象的类型 interface DeptData {} interface roleData {} -interface sexData {} interface UserState { title: string; - disabled: boolean; isShowUserDialog: boolean; userForm: { - username: string; + name: string; realName: string; - roleId: number | null; + roleIds: Array<any> depId: number | null; phone: string; - email: string; - gender: number | null; - positionId: number | null; - password: string; - expireTime: string; - status: number; - identify: string; + pwd: string; + idType: number | null; + idSerial: string; }; userFormRules:{ }, departmentData: Array<DeptData>; roleData: Array<roleData>; - sexList: Array<sexData>; + isAdd:boolean } export default defineComponent({ - name: 'user', + name: 'userDialog', setup(props, context) { const userRef = ref() const state = reactive<UserState>({ title: '', - disabled: false, isShowUserDialog: false, userForm: { - username: '', // 账户名称 + name: '', // 账户名称 realName: '', // 用户昵称 - roleId: null, // 关联角色 + pwd: '', // 账户密码 + roleIds: [], // 关联角色 depId: null, // 部门 phone: '', // 手机号 - email: '', // 邮箱 - identify: '', - gender: null, // 性别 - password: '', // 账户密码 - positionId: 1, // 岗位 - expireTime: '', // 账户过期 - status: 1 // 用户状态 + idType: 1, + idSerial: '', }, userFormRules:{ - username: [{ required: true, message: '请填写用户名', trigger: 'blur' }], + name: [{ required: true, message: '请填写用户名', trigger: 'blur' }], realName: [{ required: true, message: '请填写真实姓名', trigger: 'blur' }], - roleId: [{ required: true, message: '请选择用户角色', trigger: 'change' }], + roleIds: [{ required: true, message: '请选择用户角色', trigger: 'change' }], depId: [{ required: true, message: '请选择部门', trigger: 'change' }], phone: [{ required: true, message: '请填写手机号', trigger: 'blur' }], - email: [{ required: true, message: '请填写邮箱地址', trigger: 'blur' }], - identify: [{ required: true, message: '请填写身份证号', trigger: 'blur' }], - gender: [{ required: true, message: '请选择性别', trigger: 'change' }], - expireTime: [{ required: true, message: '请输入账户过期时间', trigger: 'blur' }], - password: [{ required: true, message: '请输入账户密码', trigger: 'blur' }], + idType: [{ required: true, message: '请选择证件类型', trigger: 'blur' }], + idSerial: [{ required: true, message: '请填写证件号码', trigger: 'blur' }], + pwd: [{ required: true, message: '请输入账户密码', trigger: 'blur' }], }, departmentData: [], // 部门数据 roleData: [], //角色数据 - sexList: [ - { id: 1, name: '男' }, - { id: 0, name: '女' } - ] + isAdd: true }); // 打开弹窗 const openDialog = (type: string, value: any, departmentList: [], roleList: []) => { @@ -158,26 +127,23 @@ state.departmentData = departmentList; state.roleData = roleList; if (type === '新增') { - state.disabled = false state.title = '新增用户'; + state.isAdd = true state.userForm = { - username: '', + name: '', realName: '', - roleId: null, + roleIds: [], depId: null, phone: '', - email: '', - identify: '', - positionId: 1, - gender: null, - password: '', - expireTime: '', - status: 1 + idType: 1, + idSerial: '', + pwd: '' }; } else { - state.disabled = true state.title = '修改用户'; + state.isAdd = false state.userForm = JSON.parse(JSON.stringify(value)); + state.userForm.roleIds = JSON.parse(JSON.stringify(value)).roles.map(i=>i.roleId) } }; @@ -185,9 +151,33 @@ const onSubmit = async () => { userRef.value.validate(async (valid:Boolean) => { if(valid){ + if(checkChineseName(state.userForm.realName) == false){ + ElMessage({ + type: 'warning', + message: '真实姓名格式有误', + duration: 2000 + }); + return + } + if(verifyPhone(state.userForm.phone) == false){ + ElMessage({ + type: 'warning', + message: '请输入正确的手机号', + duration: 2000 + }); + return + } + if(verifyIdCard(state.userForm.idSerial) == false){ + ElMessage({ + type: 'warning', + message: '请输入正确的证件号码', + duration: 2000 + }); + return + } if (state.title === '新增用户') { let res = await userApi().addUser(state.userForm); - if (res.data.code === '200') { + if (res.data.code === 100) { ElMessage({ type: 'success', message: '用户新增成功', @@ -202,8 +192,10 @@ }); } } else { - let res = await userApi().modUser(state.userForm); - if (res.data.code === '200') { + const {name, realName, roleIds, depId, phone, idType, idSerial,id } = state.userForm + const data = {name, realName, roleIds, depId, phone, idType, idSerial,id} + let res = await userApi().modUser(data); + if (res.data.code === 100) { ElMessage({ type: 'success', message: '用户修改成功', @@ -229,7 +221,9 @@ }; // 页面加载时 - onMounted(() => {}); + onMounted(() => { + + }); return { userRef, openDialog, -- Gitblit v1.9.2