mirror of
https://gitee.com/xiongmao1988/rax-medical.git
synced 2025-08-24 04:54:58 +08:00
yy
parent
6a5cada416
commit
54054c4bcc
|
|
@ -88,11 +88,11 @@ const validatePassword = (rule: any, value: any, callback: any) => {
|
|||
|
||||
//自定义校验规则函数
|
||||
const validatorPassword = (rule: any, value: any, callback: any) => {
|
||||
if (value.length >= 6) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error('密码长度至少6位'));
|
||||
}
|
||||
if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
|
||||
callback("8~16位字母或数字（区分大小写）");
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const validatorPhone = (rule: any, value: any, callback: any) => {
|
||||
|
|
|
|||
|
|
@ -1,127 +1,133 @@
|
|||
<template>
|
||||
<div class="login-page">
|
||||
<div class="left-content move_4"></div>
|
||||
<div class="right-content">
|
||||
<!-- <div class="select-hospital-box">
|
||||
<el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital">
|
||||
<el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
</div>-->
|
||||
<div class="login-page">
|
||||
<div class="left-content move_4"></div>
|
||||
<div class="right-content">
|
||||
<!-- <div class="select-hospital-box">
|
||||
<el-select class="select-hospital" v-model="currentHospital" size="small">
|
||||
<el-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
|
||||
</el-select>
|
||||
</div>-->
|
||||
|
||||
<img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
|
||||
<div v-if="!isShowRegister" class="login-block move_2">
|
||||
<div class="login-way">
|
||||
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
|
||||
<span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
|
||||
</div>
|
||||
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
|
||||
<div class="login-form password-login" v-if="passwordLogin">
|
||||
<el-form-item prop="account">
|
||||
<el-input v-model="loginParams.account" placeholder="请输入用户名">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<User/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginParams.password" type="password" show-password placeholder="请输入密码">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录</el-button>
|
||||
<span class="register-btn" @click="getCaptchaCode()">注册账号</span>
|
||||
</div>
|
||||
<div class="login-form code-login" v-else>
|
||||
<el-form-item prop="phone">
|
||||
<el-input v-model="loginParams.phone" placeholder="请输入手机号">
|
||||
<template #prepend>
|
||||
<div @click.stop style="display: flex;align-items: center;">
|
||||
<el-dropdown @command="selectPhoneArea">
|
||||
<img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
|
||||
<div v-if="!isShowRegister" class="login-block move_2">
|
||||
<div class="login-way">
|
||||
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
|
||||
<span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
|
||||
</div>
|
||||
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
|
||||
<div class="login-form password-login" v-if="passwordLogin">
|
||||
<el-form-item prop="account">
|
||||
<el-input v-model="loginParams.account" placeholder="请输入用户名">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<User/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="loginParams.password" type="password" show-password
|
||||
placeholder="请输入密码">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock/>
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录
|
||||
</el-button>
|
||||
<span class="register-btn" @click="getCaptchaCode()">注册账号</span>
|
||||
</div>
|
||||
<div class="login-form code-login" v-else>
|
||||
<el-form-item prop="phone">
|
||||
<el-input v-model="loginParams.phone" placeholder="请输入手机号">
|
||||
<template #prepend>
|
||||
<div @click.stop style="display: flex;align-items: center;">
|
||||
<el-dropdown @command="selectPhoneArea">
|
||||
<span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
|
||||
<DCaret/>
|
||||
</el-icon></span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in phoneAreas" :command="item">{{
|
||||
item
|
||||
}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="loginParams.code" placeholder="请输入6位短信验证码">
|
||||
<template #append>
|
||||
<span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-btn" type="primary" @click="login('code')">登录</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else class="register-block move_2">
|
||||
<div class="header-box">
|
||||
<span class="title">新用户申请</span>
|
||||
<el-icon @click="isShowRegister = false">
|
||||
<Close/>
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in phoneAreas" :command="item">{{
|
||||
item
|
||||
}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input v-model="loginParams.code" placeholder="请输入6位短信验证码">
|
||||
<template #append>
|
||||
<span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-btn" type="primary" @click="login('code')">登录</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-else class="register-block move_2">
|
||||
<div class="header-box">
|
||||
<span class="title">新用户申请</span>
|
||||
<el-icon @click="isShowRegister = false">
|
||||
<Close/>
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="registerParams.username" placeholder="请输入用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="registerParams.password" type="password" show-password
|
||||
placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="registerParams.confirmPassword" type="password" show-password
|
||||
placeholder="请输入密码8~16位字母或数字（区分大小写）"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="registerParams.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="registerParams.phone" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="医院" prop="hospital">
|
||||
<el-select v-model="registerParams.hospital" style="width: 100%;">
|
||||
<el-option v-for="item in hospitals" :key="item.id" :label="item.name"
|
||||
:value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="registerParams.sex">
|
||||
<el-radio label="男"/>
|
||||
<el-radio label="女"/>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="registerParams.code" placeholder="请输入验证码"
|
||||
style="width: calc(100% - 110px);"></el-input>
|
||||
<img width="100" height="32" style="margin-left: 10px;" :src="captchaImgUrl"/>
|
||||
<a class="change_img" @click="refreshImg" href="#">看不清？</a>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div class="footer-box">
|
||||
<el-button type="primary" @click="register">注 册</el-button>
|
||||
<span @click="isShowRegister = false">已有账号?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<el-form ref="registerFormRef" :model="registerParams" :rules="registerRules" label-width="100">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="registerParams.username" placeholder="请输入用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="registerParams.password" type="password" show-password
|
||||
placeholder="请输入密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="registerParams.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="registerParams.phone" placeholder="请输入手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="医院" prop="hospital">
|
||||
<el-select v-model="registerParams.hospital" style="width: 100%;">
|
||||
<el-option v-for="item in hospitals" :key="item.id" :label="item.name"
|
||||
:value="item.id"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="registerParams.sex">
|
||||
<el-radio label="男"/>
|
||||
<el-radio label="女"/>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" prop="code">
|
||||
<el-input v-model="registerParams.code" placeholder="请输入验证码"
|
||||
style="width: calc(100% - 110px);"></el-input>
|
||||
<img width="100" height="32" style="margin-left: 10px;" :src="captchaImgUrl"/>
|
||||
<a class="change_img" @click="refreshImg" href="#">看不清？</a>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<div class="footer-box">
|
||||
<el-button type="primary" @click="register">注 册</el-button>
|
||||
<span @click="isShowRegister = false">已有账号?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl"
|
||||
:height="sliderVConf.height" @success="sliderSuccess" @close="sliderClose"></SliderVerify>
|
||||
<SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl"
|
||||
:height="sliderVConf.height" @success="sliderSuccess" @close="sliderClose"></SliderVerify>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
|
@ -137,6 +143,7 @@ import SliderVerify from "@/components/SliderVerify/index.vue";
|
|||
import * as loginApi from "@/api/login";
|
||||
import {Session} from "@/utils/storage";
|
||||
import * as hospitalApi from "@/api/hospital";
|
||||
import {REGEXP} from "@/enum/global-enum";
|
||||
|
||||
|
||||
//引入用户相关的小仓库
|
||||
|
|
@ -150,59 +157,56 @@ const phoneAreas: any = getPhoneAreasData()
|
|||
let loading = ref(false);
|
||||
//自定义校验规则函数
|
||||
const validatorPhone = (rule: any, value: any, callback: any) => {
|
||||
var isPhone = /^1[34578]\d{9}$/;
|
||||
if (value.indexOf('****') >= 0) {
|
||||
return callback().trim();
|
||||
}
|
||||
if (!isPhone.test(value)) {
|
||||
callback(new Error('请输入合法手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
if (value.indexOf('****') >= 0) {
|
||||
return callback().trim();
|
||||
}
|
||||
if (!new RegExp(REGEXP.MOBILE).test(value)) {
|
||||
callback(new Error('请输入合法手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
const loginRules = reactive({
|
||||
account: [
|
||||
{required: true, message: '请输入用户名', trigger: 'change'},
|
||||
{min: 2, max: 18, message: "长度在 6 到 18个字符"},
|
||||
//{pattern:/^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{4,15}$/, message: '长度在4-15位，数字、字母、下划线的组合，其中数字和字母必须同时存在'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
{min: 5, max: 25, message: '长度在 5 到 25个字符'},
|
||||
{pattern: /^(\w){5,25}$/, message: '长度在5-25之间，以字母、数字、下划线'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, validator: validatorPhone, trigger: 'blur'},
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', trigger: 'blur'},
|
||||
]
|
||||
account: [
|
||||
{required: true, message: '请输入用户名', trigger: 'change'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, validator: validatorPhone, trigger: 'blur'},
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
const registerRules = reactive({
|
||||
username: [
|
||||
{required: true, message: '请输入用户名', trigger: 'change'},
|
||||
{min: 2, max: 18, message: "长度在 6 到 18个字符"},
|
||||
//{pattern:/^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{4,15}$/, message: '长度在4-15位，数字、字母、下划线的组合，其中数字和字母必须同时存在'}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
{min: 5, max: 25, message: '长度在 5 到 25个字符'},
|
||||
{pattern: /^(\w){5,25}$/, message: '长度在5-25之间，以字母、数字、下划线'}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入真实姓名', trigger: 'blur'},
|
||||
{pattern: /^[\u4E00-\u9FA5]{2,6}$/, message: '请输入2-6个汉字'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, validator: validatorPhone, trigger: 'change'},
|
||||
],
|
||||
hospital: [
|
||||
{required: true, message: '请选择医院', trigger: 'blur'},
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', trigger: 'blur'},
|
||||
]
|
||||
username: [
|
||||
{required: true, message: '请输入用户名', trigger: 'change'},
|
||||
{validator: validateAccount, trigger: ['blur', 'change']}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: 'blur'},
|
||||
{validator: validatePassword, trigger: ['blur', 'change']}
|
||||
],
|
||||
confirmPassword: [
|
||||
{required: true, message: '请输入密码', trigger: ['blur', 'change']},
|
||||
{validator: validatePassword, trigger: ['blur', 'change']}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入真实姓名', trigger: 'blur'},
|
||||
{pattern: /^[\u4E00-\u9FA5]{2,6}$/, message: '请输入2-6个汉字'}
|
||||
],
|
||||
phone: [
|
||||
{required: true, validator: validatorPhone, trigger: 'change'},
|
||||
],
|
||||
hospital: [
|
||||
{required: true, message: '请选择医院', trigger: 'blur'},
|
||||
],
|
||||
code: [
|
||||
{required: true, message: '请输入验证码', trigger: 'blur'},
|
||||
]
|
||||
})
|
||||
const loginFormRef = ref()
|
||||
const registerFormRef = ref()
|
||||
|
|
@ -211,29 +215,30 @@ const currentHospital = ref("")
|
|||
const isShowRegister = ref(false)
|
||||
const passwordLogin = ref(true)
|
||||
const loginParams = ref({
|
||||
account: '',
|
||||
name: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
phoneArea: phoneAreas[0],
|
||||
code: '',
|
||||
isSendCode: false,
|
||||
sendTimer: 0,
|
||||
sendText: '获取短信验证码'
|
||||
account: '',
|
||||
name: '',
|
||||
password: '',
|
||||
phone: '',
|
||||
phoneArea: phoneAreas[0],
|
||||
code: '',
|
||||
isSendCode: false,
|
||||
sendTimer: 0,
|
||||
sendText: '获取短信验证码'
|
||||
})
|
||||
const registerParams = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
hospital: '',
|
||||
sex: '',
|
||||
code: ''
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
hospital: '',
|
||||
sex: '',
|
||||
code: ''
|
||||
})
|
||||
const sliderVConf = ref({
|
||||
isShowSelf: false,
|
||||
width: 400,
|
||||
height: 200
|
||||
isShowSelf: false,
|
||||
width: 400,
|
||||
height: 200
|
||||
})
|
||||
|
||||
const captchaImgUrl = ref('')
|
||||
|
|
@ -241,299 +246,314 @@ const sliderImgUrl = ref('')
|
|||
let randomStr = ""
|
||||
|
||||
onMounted(() => {
|
||||
hospitalApi.getHospitalList().then((res: any) => {
|
||||
if (res.data) {
|
||||
hospitals.value = res.data
|
||||
} else {
|
||||
hospitals.value.length = 0
|
||||
}
|
||||
})
|
||||
hospitalApi.getHospitalList().then((res: any) => {
|
||||
if (res.data) {
|
||||
hospitals.value = res.data
|
||||
} else {
|
||||
hospitals.value.length = 0
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
const selectHospital = (e: string) => {
|
||||
function validatePassword(rule: any, value: any, callback: any) {
|
||||
if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
|
||||
callback("8~16位字母或数字（区分大小写）");
|
||||
} else if (value != registerParams.value.password) {
|
||||
callback(new Error('两次密码不一致'));
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
function validateAccount(rule: any, value: any, callback: any) {
|
||||
if (!(new RegExp(REGEXP.ACCOUNT).test(value))) {
|
||||
callback("2~16位字母或数字（区分大小写）");
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const register = async () => {
|
||||
await registerFormRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
loginApi.register({...registerParams.value, randomStr}).then(data => {
|
||||
ElMessageBox.confirm(
|
||||
'注册成功，是否登录？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
loginParams.value.account = registerFormRef.value.account
|
||||
loginParams.value.name = registerFormRef.value.name
|
||||
currentHospital.value = registerFormRef.value.hospital
|
||||
isShowRegister.value = false;
|
||||
}).catch(() => {
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
await registerFormRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
loginApi.register({...registerParams.value, randomStr}).then(data => {
|
||||
ElMessageBox.confirm(
|
||||
'注册成功，是否登录？',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'success',
|
||||
draggable: true
|
||||
}
|
||||
).then(() => {
|
||||
loginParams.value.account = registerFormRef.value.account
|
||||
loginParams.value.name = registerFormRef.value.name
|
||||
currentHospital.value = registerFormRef.value.hospital
|
||||
isShowRegister.value = false;
|
||||
}).catch(() => {
|
||||
})
|
||||
})
|
||||
} else {
|
||||
// console.log('error submit!', fields)
|
||||
}
|
||||
})
|
||||
}
|
||||
const selectPhoneArea = (e: string) => {
|
||||
loginParams.value.phoneArea = e
|
||||
loginParams.value.phoneArea = e
|
||||
}
|
||||
const sendCode = () => {
|
||||
if (loginParams.value.isSendCode) return
|
||||
let num = 60
|
||||
ElMessage.success('发送成功！')
|
||||
loginParams.value.isSendCode = true
|
||||
loginParams.value.sendText = '请' + num + '秒后重新发送'
|
||||
loginParams.value.sendTimer = setInterval(() => {
|
||||
num--
|
||||
if (num > 0) {
|
||||
loginParams.value.sendText = '请' + num + '秒后重新发送'
|
||||
} else {
|
||||
loginParams.value.isSendCode = false
|
||||
loginParams.value.sendText = '重新获取短信验证码'
|
||||
clearInterval(loginParams.value.sendTimer)
|
||||
}
|
||||
if (loginParams.value.isSendCode) return
|
||||
let num = 60
|
||||
ElMessage.success('发送成功！')
|
||||
loginParams.value.isSendCode = true
|
||||
loginParams.value.sendText = '请' + num + '秒后重新发送'
|
||||
loginParams.value.sendTimer = setInterval(() => {
|
||||
num--
|
||||
if (num > 0) {
|
||||
loginParams.value.sendText = '请' + num + '秒后重新发送'
|
||||
} else {
|
||||
loginParams.value.isSendCode = false
|
||||
loginParams.value.sendText = '重新获取短信验证码'
|
||||
clearInterval(loginParams.value.sendTimer)
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}
|
||||
const login = async (type: string) => {
|
||||
//加载效果:开始加载
|
||||
/*if (!currentHospital.value) {
|
||||
ElMessage.warning('请在右上角选择院区')
|
||||
return
|
||||
}*/
|
||||
//加载效果:开始加载
|
||||
loading.value = true;
|
||||
//保证全部表单正常再发请求
|
||||
await loginFormRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
sliderVConf.value.isShowSelf = true;
|
||||
}
|
||||
})
|
||||
//加载效果:开始加载
|
||||
/*if (!currentHospital.value) {
|
||||
ElMessage.warning('请在右上角选择院区')
|
||||
return
|
||||
}*/
|
||||
//加载效果:开始加载
|
||||
loading.value = true;
|
||||
//保证全部表单正常再发请求
|
||||
await loginFormRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
sliderVConf.value.isShowSelf = true;
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function getCaptchaCode() {
|
||||
isShowRegister.value = true
|
||||
refreshImg()
|
||||
isShowRegister.value = true
|
||||
refreshImg()
|
||||
}
|
||||
|
||||
function refreshImg() {
|
||||
randomStr = v4()
|
||||
captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr
|
||||
randomStr = v4()
|
||||
captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr
|
||||
}
|
||||
|
||||
function sliderSuccess() {
|
||||
loginApi.login({
|
||||
username: loginParams.value.account, // 用户名
|
||||
password: loginParams.value.password, // 密码
|
||||
randomStr: v4(),
|
||||
// hospitalId: currentHospital.value
|
||||
}).then((data: any) => {
|
||||
sliderVConf.value.isShowSelf = false
|
||||
if (data.code == 1 || data.error) {
|
||||
ElMessage.error(data.msg ? data.msg : data.error)
|
||||
loading.value = false
|
||||
} else {
|
||||
loginApi.login({
|
||||
username: loginParams.value.account, // 用户名
|
||||
password: loginParams.value.password, // 密码
|
||||
randomStr: v4(),
|
||||
// hospitalId: currentHospital.value
|
||||
}).then((data: any) => {
|
||||
sliderVConf.value.isShowSelf = false
|
||||
if (data.code == 1 || data.error) {
|
||||
ElMessage.error(data.msg ? data.msg : data.error)
|
||||
loading.value = false
|
||||
} else {
|
||||
// 存储token 信息
|
||||
ElNotification({
|
||||
type: 'success',
|
||||
message: '欢迎回来',
|
||||
title: `HI,${getTime()}好`
|
||||
});
|
||||
loginPost(data)
|
||||
router.removeRoute("root");
|
||||
router.addRoute({
|
||||
name: "root",
|
||||
path: "/",
|
||||
redirect: "/home"
|
||||
})
|
||||
router.replace('/home')
|
||||
}
|
||||
})
|
||||
ElNotification({
|
||||
type: 'success',
|
||||
message: '欢迎回来',
|
||||
title: `HI,${getTime()}好`
|
||||
});
|
||||
loginPost(data)
|
||||
router.removeRoute("root");
|
||||
router.addRoute({
|
||||
name: "root",
|
||||
path: "/",
|
||||
redirect: "/home"
|
||||
})
|
||||
router.replace('/home')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function sliderClose() {
|
||||
loading.value = false
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const loginPost = (data: any) => {
|
||||
Session.set('token', data.access_token);
|
||||
Session.set('refresh_token', data.refresh_token);
|
||||
useUserStore().setlogin('account', data.username)
|
||||
useUserStore().setlogin('name', data.user_info.chineseName || '暂未设置姓名')
|
||||
useUserStore().setlogin("hospitalId", data.user_info.hospitalId)
|
||||
Session.set('token', data.access_token);
|
||||
Session.set('refresh_token', data.refresh_token);
|
||||
useUserStore().setlogin('account', data.username)
|
||||
useUserStore().setlogin('name', data.user_info.chineseName || '暂未设置姓名')
|
||||
useUserStore().setlogin("hospitalId", data.user_info.hospitalId)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.login-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.left-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: url(@/assets/imgs/login/login_bck.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
.select-hospital-box {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
|
||||
.select-hospital {
|
||||
width: 12rem;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.left-content {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: url(@/assets/imgs/login/login_bck.png) no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.login-block {
|
||||
width: 65%;
|
||||
height: 430px;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
|
||||
.login-way {
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.el-input) {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
|
||||
.el-input-group__prepend,
|
||||
.el-input__wrapper,
|
||||
.el-input-group__append {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background-color: transparent;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-input-group__prepend,
|
||||
.el-input-group__append {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
right: 0;
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append::after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
cursor: pointer;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
padding: 25px 0 25px 0.3em;
|
||||
border-radius: 0px;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
color: $main-color;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-block {
|
||||
width: 65%;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
background: white;
|
||||
|
||||
.header-box {
|
||||
.right-content {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
padding-left: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
padding: 5px 50px;
|
||||
.select-hospital-box {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 25px;
|
||||
|
||||
.select-hospital {
|
||||
width: 12rem;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
.logo {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.login-block {
|
||||
width: 65%;
|
||||
height: 430px;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
|
||||
.login-way {
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form {
|
||||
:deep(.el-input) {
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
|
||||
.el-input-group__prepend,
|
||||
.el-input__wrapper,
|
||||
.el-input-group__append {
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $border-color;
|
||||
background-color: transparent;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.el-input-group__prepend,
|
||||
.el-input-group__append {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 16px;
|
||||
top: calc(50% - 8px);
|
||||
right: 0;
|
||||
background-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append::after {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
cursor: pointer;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
padding: 25px 0 25px 0.3em;
|
||||
border-radius: 0px;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
.register-btn {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
color: $main-color;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.register-block {
|
||||
width: 65%;
|
||||
min-width: 500px;
|
||||
min-height: 300px;
|
||||
padding: 50px;
|
||||
background: white;
|
||||
|
||||
.header-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: $main-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-box {
|
||||
padding-left: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.el-button {
|
||||
font-size: 16px;
|
||||
padding: 5px 50px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,25 +6,24 @@
|
|||
<el-form-item label="标题" prop="title">
|
||||
<el-input :model-value="formData.title"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP地址" prop="ip">
|
||||
<el-input :model-value="formData.ip"></el-input>
|
||||
<el-form-item label="IP地址" prop="remoteAddr">
|
||||
<el-input :model-value="formData.remoteAddr"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求方式" prop="requestMethod">
|
||||
<el-input :model-value="formData.requestMethod"></el-input>
|
||||
<el-form-item label="请求方式" prop="method">
|
||||
<el-input :model-value="formData.method"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="请求时间" prop="requestTime">
|
||||
<el-input :model-value="dateFormater('yyyy-MM-dd HH:mm:ss', formData.requestTime)"></el-input>
|
||||
<el-form-item label="请求时间" prop="createTime">
|
||||
<el-input :model-value="dateFormater('yyyy-MM-dd HH:mm:ss', formData.createTime)"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作人" prop="operator">
|
||||
<el-input :model-value="formData.operator"></el-input>
|
||||
<el-form-item label="操作人" prop="createBy">
|
||||
<el-input :model-value="formData.createBy"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { dateFormater } from '@/utils/date-util'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {dateFormater} from '@/utils/date-util'
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="button-part" style="justify-content: space-between;">
|
||||
<el-button icon="Delete" @click="removeData()">删除</el-button>
|
||||
<TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="init"
|
||||
@downloadBtn="exportData('日志数据', tableData)"></TableAbility>
|
||||
@downloadBtn="exportMultiData('日志数据', tableData)"></TableAbility>
|
||||
</div>
|
||||
<div class="table-part">
|
||||
<el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip
|
||||
|
|
@ -63,7 +63,7 @@ import {onMounted, ref} from 'vue'
|
|||
import LoginChart from './chart/login-chart.vue'
|
||||
import CommonPagination from '@/components/common-pagination.vue'
|
||||
import LogForm from './form/log-form.vue'
|
||||
import {exportData, tableRemoveRow} from '@/utils/table-util'
|
||||
import {exportMultiData, tableRemoveRow} from '@/utils/table-util'
|
||||
import {dateFormater} from '@/utils/date-util'
|
||||
import * as logManageApi from '@/api/log-manage'
|
||||
import {ElMessage} from "element-plus";
|
||||
|
|
|
|||
|
|
@ -1,206 +1,236 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formData.username" placeholder="请输入用户名"
|
||||
:disabled="type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="formData.role" placeholder="请选择角色" multiple>
|
||||
<el-option v-for="item in roleOption" :key="item.roleId" :label="item.roleName"
|
||||
:value="item.roleId"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="type != 'edit'">
|
||||
<el-form-item label="锁定" prop="lockFlag">
|
||||
<el-radio-group v-model="formData.lockFlag">
|
||||
<el-radio :label="'0'" border>解锁</el-radio>
|
||||
<el-radio :label="'1'" border>锁定</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="type != 'edit'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="formData.password" placeholder="请输入密码"
|
||||
:disabled="type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input v-model="formData.username" placeholder="请输入用户名2~16位字母或数字（区分大小写）"
|
||||
:disabled="type === 'edit'"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="formData.role" placeholder="请选择角色" multiple>
|
||||
<el-option v-for="item in roleOption" :key="item.roleId" :label="item.roleName"
|
||||
:value="item.roleId"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="电话" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="type != 'edit'">
|
||||
<el-form-item label="锁定" prop="lockFlag">
|
||||
<el-radio-group v-model="formData.lockFlag">
|
||||
<el-radio :label="'0'" border>解锁</el-radio>
|
||||
<el-radio :label="'1'" border>锁定</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="type != 'edit'">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="formData.password" placeholder="请输入密码8~16位字母或数字（区分大小写）"
|
||||
:disabled="type === 'edit'" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input v-model="formData.confirmPassword" placeholder="请输入密码8~16位字母或数字（区分大小写）"
|
||||
:disabled="type === 'edit'" type="password" show-password></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="text-align: right;padding-top: 80px;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
<div style="text-align: right;padding-top: 80px;">
|
||||
<el-button class="f18" @click="close">取消</el-button>
|
||||
<el-button class="f18" type="primary" @click="saveData">确认</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import {onMounted, reactive, ref, toRefs, watch} from 'vue'
|
||||
import {ElMessage, ElMessageBox} from 'element-plus'
|
||||
import {onMounted, reactive, ref} from 'vue'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import {getRoleList} from "@/api/role";
|
||||
import {addUser, updateUI} from "@/api/user";
|
||||
import {REGEXP} from "@/enum/global-enum";
|
||||
|
||||
const emit = defineEmits(['close', 'save'])
|
||||
|
||||
const props = defineProps({
|
||||
type: String
|
||||
type: String
|
||||
})
|
||||
|
||||
const roleOption = ref<any>([])
|
||||
|
||||
const validatorPhone = (rule: any, value: any, callback: any) => {
|
||||
var isPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
||||
|
||||
|
||||
if (value.indexOf('****') >= 0) {
|
||||
return callback().trim();
|
||||
}
|
||||
if (!isPhone.test(value)) {
|
||||
callback(new Error('请输入合法手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
if (value.indexOf('****') >= 0) {
|
||||
return callback().trim();
|
||||
}
|
||||
if (!new RegExp(REGEXP.MOBILE).test(value)) {
|
||||
callback(new Error('请输入合法手机号'));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const rules = reactive({
|
||||
username: [
|
||||
{required: true, message: '请输入用户名', trigger: ['blur', 'change']},
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入姓名', trigger: ['blur', 'change']},
|
||||
],
|
||||
role: [
|
||||
{required: true, message: '请选择角色', trigger: ['blur', 'change']},
|
||||
],
|
||||
phone: [
|
||||
{required: true, validator: validatorPhone, trigger: ['blur', 'change']},
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: ['blur', 'change']},
|
||||
]
|
||||
username: [
|
||||
{required: true, message: '请输入用户名', trigger: ['blur', 'change']},
|
||||
{validator: validateAccount, trigger: ['blur', 'change']}
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '请输入姓名', trigger: ['blur', 'change']},
|
||||
],
|
||||
role: [
|
||||
{required: true, message: '请选择角色', trigger: ['blur', 'change']},
|
||||
],
|
||||
phone: [
|
||||
{required: true, validator: validatorPhone, trigger: ['blur', 'change']},
|
||||
],
|
||||
password: [
|
||||
{required: true, message: '请输入密码', trigger: ['blur', 'change']},
|
||||
{validator: validatePassword, trigger: ['blur', 'change']}
|
||||
],
|
||||
confirmPassword: [
|
||||
{required: true, message: '请输入密码', trigger: ['blur', 'change']},
|
||||
{validator: validatePassword, trigger: ['blur', 'change']}
|
||||
]
|
||||
})
|
||||
|
||||
const formRef = ref()
|
||||
const formData = ref({
|
||||
id: '',
|
||||
username: '',
|
||||
name: '',
|
||||
role: [],
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
lockFlag: '0',
|
||||
id: '',
|
||||
username: '',
|
||||
name: '',
|
||||
role: [],
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
lockFlag: '0',
|
||||
} as any)
|
||||
|
||||
onMounted(() => {
|
||||
resetData()
|
||||
resetData()
|
||||
})
|
||||
|
||||
function validatePassword(rule: any, value: any, callback: any) {
|
||||
if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
|
||||
callback("8~16位字母或数字（区分大小写）");
|
||||
} else if (value !== formData.value.password) {
|
||||
callback(new Error('两次密码不一致'));
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
function validateAccount(rule: any, value: any, callback: any) {
|
||||
if (!(new RegExp(REGEXP.ACCOUNT).test(value))) {
|
||||
callback("2~16位字母或数字（区分大小写）");
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
getRoleList().then((res: any) => {
|
||||
if (res && res.code == 0) {
|
||||
roleOption.value = res.data
|
||||
} else {
|
||||
ElMessage.error('角色列表获取失败')
|
||||
}
|
||||
if (res && res.code == 0) {
|
||||
roleOption.value = res.data
|
||||
} else {
|
||||
ElMessage.error('角色列表获取失败')
|
||||
}
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
formData,
|
||||
resetData,
|
||||
formData,
|
||||
resetData,
|
||||
})
|
||||
|
||||
function close() {
|
||||
emit('close')
|
||||
emit('close')
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
getRoleList()
|
||||
formRef.value.resetFields()
|
||||
formData.value = {
|
||||
id: '',
|
||||
username: '',
|
||||
name: '',
|
||||
role: [],
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
lockFlag: '0',
|
||||
}
|
||||
getRoleList()
|
||||
formRef.value.resetFields()
|
||||
formData.value = {
|
||||
id: '',
|
||||
username: '',
|
||||
name: '',
|
||||
role: [],
|
||||
email: '',
|
||||
phone: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
lockFlag: '0',
|
||||
}
|
||||
}
|
||||
|
||||
const saveData = async () => {
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
if (props.type == "add") {
|
||||
addUser(formData.value).then((data: any) => {
|
||||
if (data.code == 0) {
|
||||
ElMessage.success('保存成功！')
|
||||
emit('save', formData.value, props.type)
|
||||
close()
|
||||
} else {
|
||||
ElMessage.error("保存失败")
|
||||
}
|
||||
})
|
||||
} else {
|
||||
updateUI({
|
||||
userId: formData.value.userId,
|
||||
username: formData.value.username,
|
||||
name: formData.value.name,
|
||||
role: formData.value.role,
|
||||
email: formData.value.email,
|
||||
phone: formData.value.phone
|
||||
}).then((data: any) => {
|
||||
if (data.code == 0) {
|
||||
ElMessage.success('修改成功！')
|
||||
emit('save', formData.value, props.type)
|
||||
close()
|
||||
} else {
|
||||
ElMessage.error("修改失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
await formRef.value.validate((valid: any, fields: any) => {
|
||||
if (valid) {
|
||||
if (props.type == "add") {
|
||||
addUser(formData.value).then((data: any) => {
|
||||
if (data.code == 0) {
|
||||
ElMessage.success('保存成功！')
|
||||
emit('save', formData.value, props.type)
|
||||
close()
|
||||
} else {
|
||||
ElMessage.error("保存失败")
|
||||
}
|
||||
})
|
||||
} else {
|
||||
updateUI({
|
||||
userId: formData.value.userId,
|
||||
username: formData.value.username,
|
||||
name: formData.value.name,
|
||||
role: formData.value.role,
|
||||
email: formData.value.email,
|
||||
phone: formData.value.phone
|
||||
}).then((data: any) => {
|
||||
if (data.code == 0) {
|
||||
ElMessage.success('修改成功！')
|
||||
emit('save', formData.value, props.type)
|
||||
close()
|
||||
} else {
|
||||
ElMessage.error("修改失败")
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
:deep(.el-form-item) {
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
.el-form-item__label {
|
||||
display: block;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user