root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2025-08-24 21:14:57 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

其他正则校验 

日志导出
This commit is contained in:
yy 2024-06-03 15:08:00 +08:00
parent 6a5cada416
commit 54054c4bcc
5 changed files with 653 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/user-info.vue
View File

@ -88,11 +88,11 @@ const validatePassword = (rule: any, value: any, callback: any) => {
//自定义校验规则函数 //自定义校验规则函数
const validatorPassword = (rule: any, value: any, callback: any) => { const validatorPassword = (rule: any, value: any, callback: any) => {
if (value.length >= 6) { if (!(new RegExp(REGEXP.PASSWORD).test(value))) {
callback(); callback("8~16位字母或数字（区分大小写）");
} else { } else {
callback(new Error('密码长度至少6位')); callback()
} }
} }
const validatorPhone = (rule: any, value: any, callback: any) => { const validatorPhone = (rule: any, value: any, callback: any) => {

880
src/views/login/login.vue
View File

@ -1,127 +1,133 @@
<template> <template>
<div class="login-page"> <div class="login-page">
<div class="left-content move_4"></div> <div class="left-content move_4"></div>
<div class="right-content"> <div class="right-content">
<!-- <div class="select-hospital-box"> <!-- <div class="select-hospital-box">
<el-select class="select-hospital" v-model="currentHospital" size="small" @change="selectHospital"> <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-option v-for="item in hospitals" :key="item.id" :label="item.name" :value="item.id"/>
</el-select> </el-select>
</div>--> </div>-->
<img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png"> <img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
<div v-if="!isShowRegister" class="login-block move_2"> <div v-if="!isShowRegister" class="login-block move_2">
<div class="login-way"> <div class="login-way">
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span> <span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
<span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span> <span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
</div> </div>
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small"> <el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
<div class="login-form password-login" v-if="passwordLogin"> <div class="login-form password-login" v-if="passwordLogin">
<el-form-item prop="account"> <el-form-item prop="account">
<el-input v-model="loginParams.account" placeholder="请输入用户名"> <el-input v-model="loginParams.account" placeholder="请输入用户名">
<template #prepend> <template #prepend>
<el-icon> <el-icon>
<User/> <User/>
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginParams.password" type="password" show-password placeholder="请输入密码"> <el-input v-model="loginParams.password" type="password" show-password
<template #prepend> placeholder="请输入密码">
<el-icon> <template #prepend>
<Lock/> <el-icon>
</el-icon> <Lock/>
</template> </el-icon>
</el-input> </template>
</el-form-item> </el-input>
<el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录</el-button> </el-form-item>
<span class="register-btn" @click="getCaptchaCode()">注册账号</span> <el-button :loading="loading" class="login-btn" type="primary" @click="login('password')">登录
</div> </el-button>
<div class="login-form code-login" v-else> <span class="register-btn" @click="getCaptchaCode()">注册账号</span>
<el-form-item prop="phone"> </div>
<el-input v-model="loginParams.phone" placeholder="请输入手机号"> <div class="login-form code-login" v-else>
<template #prepend> <el-form-item prop="phone">
<div @click.stop style="display: flex;align-items: center;"> <el-input v-model="loginParams.phone" placeholder="请输入手机号">
<el-dropdown @command="selectPhoneArea"> <template #prepend>
<div @click.stop style="display: flex;align-items: center;">
<el-dropdown @command="selectPhoneArea">
<span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon> <span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
<DCaret/> <DCaret/>
</el-icon></span> </el-icon></span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item v-for="item in phoneAreas" :command="item">{{ <el-dropdown-item v-for="item in phoneAreas" :command="item">{{
item item
}} }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code"> <el-form-item prop="code">
<el-input v-model="loginParams.code" placeholder="请输入6位短信验证码"> <el-input v-model="loginParams.code" placeholder="请输入6位短信验证码">
<template #append> <template #append>
<span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span> <span class="send-btn" @click="sendCode">{{ loginParams.sendText }}</span>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-button class="login-btn" type="primary" @click="login('code')">登录</el-button> <el-button class="login-btn" type="primary" @click="login('code')">登录</el-button>
</div> </div>
</el-form> </el-form>
</div> </div>
<div v-else class="register-block move_2"> <div v-else class="register-block move_2">
<div class="header-box"> <div class="header-box">
<span class="title">新用户申请</span> <span class="title">新用户申请</span>
<el-icon @click="isShowRegister = false"> <el-icon @click="isShowRegister = false">
<Close/> <Close/>
</el-icon> </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> </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>
</div> <SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl"
<SliderVerify v-model:isShowSelf="sliderVConf.isShowSelf" :width="sliderVConf.width" :imgUrl="sliderImgUrl" :height="sliderVConf.height" @success="sliderSuccess" @close="sliderClose"></SliderVerify>
:height="sliderVConf.height" @success="sliderSuccess" @close="sliderClose"></SliderVerify>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
@ -137,6 +143,7 @@ import SliderVerify from "@/components/SliderVerify/index.vue";
import * as loginApi from "@/api/login"; import * as loginApi from "@/api/login";
import {Session} from "@/utils/storage"; import {Session} from "@/utils/storage";
import * as hospitalApi from "@/api/hospital"; import * as hospitalApi from "@/api/hospital";
import {REGEXP} from "@/enum/global-enum";
//引入用户相关的小仓库 //引入用户相关的小仓库
@ -150,59 +157,56 @@ const phoneAreas: any = getPhoneAreasData()
let loading = ref(false); let loading = ref(false);
//自定义校验规则函数 //自定义校验规则函数
const validatorPhone = (rule: any, value: any, callback: any) => { const validatorPhone = (rule: any, value: any, callback: any) => {
var isPhone = /^1[34578]\d{9}$/; if (value.indexOf('****') >= 0) {
if (value.indexOf('****') >= 0) { return callback().trim();
return callback().trim(); }
} if (!new RegExp(REGEXP.MOBILE).test(value)) {
if (!isPhone.test(value)) { callback(new Error('请输入合法手机号'));
callback(new Error('请输入合法手机号')); } else {
} else { callback();
callback(); }
}
} }
const loginRules = reactive({ const loginRules = reactive({
account: [ account: [
{required: true, message: '请输入用户名', trigger: 'change'}, {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'}
password: [ ],
{required: true, message: '请输入密码', trigger: 'blur'}, phone: [
{min: 5, max: 25, message: '长度在 5 到 25个字符'}, {required: true, validator: validatorPhone, trigger: 'blur'},
{pattern: /^(\w){5,25}$/, message: '长度在5-25之间，以字母、数字、下划线'} ],
], code: [
phone: [ {required: true, message: '请输入验证码', trigger: 'blur'},
{required: true, validator: validatorPhone, trigger: 'blur'}, ]
],
code: [
{required: true, message: '请输入验证码', trigger: 'blur'},
]
}) })
const registerRules = reactive({ const registerRules = reactive({
username: [ username: [
{required: true, message: '请输入用户名', trigger: 'change'}, {required: true, message: '请输入用户名', trigger: 'change'},
{min: 2, max: 18, message: "长度在 6 到 18个字符"}, {validator: validateAccount, trigger: ['blur', 'change']}
//{pattern:/^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{4,15}$/, message: '长度在4-15位，数字、字母、下划线的组合，其中数字和字母必须同时存在'} ],
], password: [
password: [ {required: true, message: '请输入密码', trigger: 'blur'},
{required: true, message: '请输入密码', trigger: 'blur'}, {validator: validatePassword, trigger: ['blur', 'change']}
{min: 5, max: 25, message: '长度在 5 到 25个字符'}, ],
{pattern: /^(\w){5,25}$/, message: '长度在5-25之间，以字母、数字、下划线'} confirmPassword: [
], {required: true, message: '请输入密码', trigger: ['blur', 'change']},
name: [ {validator: validatePassword, trigger: ['blur', 'change']}
{required: true, message: '请输入真实姓名', trigger: 'blur'}, ],
{pattern: /^[\u4E00-\u9FA5]{2,6}$/, message: '请输入2-6个汉字'} name: [
], {required: true, message: '请输入真实姓名', trigger: 'blur'},
phone: [ {pattern: /^[\u4E00-\u9FA5]{2,6}$/, message: '请输入2-6个汉字'}
{required: true, validator: validatorPhone, trigger: 'change'}, ],
], phone: [
hospital: [ {required: true, validator: validatorPhone, trigger: 'change'},
{required: true, message: '请选择医院', trigger: 'blur'}, ],
], hospital: [
code: [ {required: true, message: '请选择医院', trigger: 'blur'},
{required: true, message: '请输入验证码', trigger: 'blur'}, ],
] code: [
{required: true, message: '请输入验证码', trigger: 'blur'},
]
}) })
const loginFormRef = ref() const loginFormRef = ref()
const registerFormRef = ref() const registerFormRef = ref()
@ -211,29 +215,30 @@ const currentHospital = ref("")
const isShowRegister = ref(false) const isShowRegister = ref(false)
const passwordLogin = ref(true) const passwordLogin = ref(true)
const loginParams = ref({ const loginParams = ref({
account: '', account: '',
name: '', name: '',
password: '', password: '',
phone: '', phone: '',
phoneArea: phoneAreas[0], phoneArea: phoneAreas[0],
code: '', code: '',
isSendCode: false, isSendCode: false,
sendTimer: 0, sendTimer: 0,
sendText: '获取短信验证码' sendText: '获取短信验证码'
}) })
const registerParams = ref({ const registerParams = ref({
username: '', username: '',
password: '', password: '',
name: '', confirmPassword: '',
phone: '', name: '',
hospital: '', phone: '',
sex: '', hospital: '',
code: '' sex: '',
code: ''
}) })
const sliderVConf = ref({ const sliderVConf = ref({
isShowSelf: false, isShowSelf: false,
width: 400, width: 400,
height: 200 height: 200
}) })
const captchaImgUrl = ref('') const captchaImgUrl = ref('')
@ -241,299 +246,314 @@ const sliderImgUrl = ref('')
let randomStr = "" let randomStr = ""
onMounted(() => { onMounted(() => {
hospitalApi.getHospitalList().then((res: any) => { hospitalApi.getHospitalList().then((res: any) => {
if (res.data) { if (res.data) {
hospitals.value = res.data hospitals.value = res.data
} else { } else {
hospitals.value.length = 0 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 () => { const register = async () => {
await registerFormRef.value.validate((valid: any, fields: any) => { await registerFormRef.value.validate((valid: any, fields: any) => {
if (valid) { if (valid) {
loginApi.register({...registerParams.value, randomStr}).then(data => { loginApi.register({...registerParams.value, randomStr}).then(data => {
ElMessageBox.confirm( ElMessageBox.confirm(
'注册成功，是否登录？', '注册成功，是否登录？',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'success', type: 'success',
draggable: true draggable: true
} }
).then(() => { ).then(() => {
loginParams.value.account = registerFormRef.value.account loginParams.value.account = registerFormRef.value.account
loginParams.value.name = registerFormRef.value.name loginParams.value.name = registerFormRef.value.name
currentHospital.value = registerFormRef.value.hospital currentHospital.value = registerFormRef.value.hospital
isShowRegister.value = false; isShowRegister.value = false;
}).catch(() => { }).catch(() => {
}) })
}) })
} else { } else {
// console.log('error submit!', fields) // console.log('error submit!', fields)
} }
}) })
} }
const selectPhoneArea = (e: string) => { const selectPhoneArea = (e: string) => {
loginParams.value.phoneArea = e loginParams.value.phoneArea = e
} }
const sendCode = () => { const sendCode = () => {
if (loginParams.value.isSendCode) return if (loginParams.value.isSendCode) return
let num = 60 let num = 60
ElMessage.success('发送成功！') ElMessage.success('发送成功！')
loginParams.value.isSendCode = true loginParams.value.isSendCode = true
loginParams.value.sendText = '请' + num + '秒后重新发送' loginParams.value.sendText = '请' + num + '秒后重新发送'
loginParams.value.sendTimer = setInterval(() => { loginParams.value.sendTimer = setInterval(() => {
num-- num--
if (num > 0) { if (num > 0) {
loginParams.value.sendText = '请' + num + '秒后重新发送' loginParams.value.sendText = '请' + num + '秒后重新发送'
} else { } else {
loginParams.value.isSendCode = false loginParams.value.isSendCode = false
loginParams.value.sendText = '重新获取短信验证码' loginParams.value.sendText = '重新获取短信验证码'
clearInterval(loginParams.value.sendTimer) clearInterval(loginParams.value.sendTimer)
} }
}, 1000); }, 1000);
} }
const login = async (type: string) => { const login = async (type: string) => {
//加载效果:开始加载 //加载效果:开始加载
/*if (!currentHospital.value) { /*if (!currentHospital.value) {
ElMessage.warning('请在右上角选择院区') ElMessage.warning('请在右上角选择院区')
return return
}*/ }*/
//加载效果:开始加载 //加载效果:开始加载
loading.value = true; loading.value = true;
//保证全部表单正常再发请求 //保证全部表单正常再发请求
await loginFormRef.value.validate((valid: any, fields: any) => { await loginFormRef.value.validate((valid: any, fields: any) => {
if (valid) { if (valid) {
sliderVConf.value.isShowSelf = true; sliderVConf.value.isShowSelf = true;
} }
}) })
} }
function getCaptchaCode() { function getCaptchaCode() {
isShowRegister.value = true isShowRegister.value = true
refreshImg() refreshImg()
} }
function refreshImg() { function refreshImg() {
randomStr = v4() randomStr = v4()
captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr captchaImgUrl.value = '/api/admin/code/textImage?randomStr=' + randomStr
} }
function sliderSuccess() { function sliderSuccess() {
loginApi.login({ loginApi.login({
username: loginParams.value.account, // 用户名 username: loginParams.value.account, // 用户名
password: loginParams.value.password, // 密码 password: loginParams.value.password, // 密码
randomStr: v4(), randomStr: v4(),
// hospitalId: currentHospital.value // hospitalId: currentHospital.value
}).then((data: any) => { }).then((data: any) => {
sliderVConf.value.isShowSelf = false sliderVConf.value.isShowSelf = false
if (data.code == 1 || data.error) { if (data.code == 1 || data.error) {
ElMessage.error(data.msg ? data.msg : data.error) ElMessage.error(data.msg ? data.msg : data.error)
loading.value = false loading.value = false
} else { } else {
// 存储token 信息 // 存储token 信息
ElNotification({ ElNotification({
type: 'success', type: 'success',
message: '欢迎回来', message: '欢迎回来',
title: `HI,${getTime()}好` title: `HI,${getTime()}好`
}); });
loginPost(data) loginPost(data)
router.removeRoute("root"); router.removeRoute("root");
router.addRoute({ router.addRoute({
name: "root", name: "root",
path: "/", path: "/",
redirect: "/home" redirect: "/home"
}) })
router.replace('/home') router.replace('/home')
} }
}) })
} }
function sliderClose() { function sliderClose() {
loading.value = false loading.value = false
} }
const loginPost = (data: any) => { const loginPost = (data: any) => {
Session.set('token', data.access_token); Session.set('token', data.access_token);
Session.set('refresh_token', data.refresh_token); Session.set('refresh_token', data.refresh_token);
useUserStore().setlogin('account', data.username) useUserStore().setlogin('account', data.username)
useUserStore().setlogin('name', data.user_info.chineseName || '暂未设置姓名') useUserStore().setlogin('name', data.user_info.chineseName || '暂未设置姓名')
useUserStore().setlogin("hospitalId", data.user_info.hospitalId) useUserStore().setlogin("hospitalId", data.user_info.hospitalId)
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.login-page { .login-page {
width: 100%; 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%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; background-color: #F8F8F8;
justify-content: center;
align-items: center;
.select-hospital-box { .left-content {
position: absolute; width: 50%;
top: 25px; height: 100%;
right: 25px; background: url(@/assets/imgs/login/login_bck.png) no-repeat;
background-size: cover;
.select-hospital {
width: 12rem;
margin-right: 20px;
}
} }
.logo { .right-content {
height: 70px; position: relative;
} width: 50%;
height: 100%;
.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; display: flex;
justify-content: space-between; flex-direction: column;
margin-bottom: 30px; justify-content: center;
.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; align-items: center;
.el-button { .select-hospital-box {
font-size: 16px; position: absolute;
padding: 5px 50px; top: 25px;
right: 25px;
.select-hospital {
width: 12rem;
margin-right: 20px;
}
} }
& > span { .logo {
cursor: pointer; height: 70px;
font-size: 18px; }
color: #909399;
.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> </style>

21
src/views/logs-manage/form/log-form.vue
View File

@ -6,25 +6,24 @@
<el-form-item label="标题" prop="title"> <el-form-item label="标题" prop="title">
<el-input :model-value="formData.title"></el-input> <el-input :model-value="formData.title"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="IP地址" prop="ip"> <el-form-item label="IP地址" prop="remoteAddr">
<el-input :model-value="formData.ip"></el-input> <el-input :model-value="formData.remoteAddr"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="请求方式" prop="requestMethod"> <el-form-item label="请求方式" prop="method">
<el-input :model-value="formData.requestMethod"></el-input> <el-input :model-value="formData.method"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="请求时间" prop="requestTime"> <el-form-item label="请求时间" prop="createTime">
<el-input :model-value="dateFormater('yyyy-MM-dd HH:mm:ss', formData.requestTime)"></el-input> <el-input :model-value="dateFormater('yyyy-MM-dd HH:mm:ss', formData.createTime)"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="操作人" prop="operator"> <el-form-item label="操作人" prop="createBy">
<el-input :model-value="formData.operator"></el-input> <el-input :model-value="formData.createBy"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {onMounted, reactive, ref} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus' import {dateFormater} from '@/utils/date-util'
import { dateFormater } from '@/utils/date-util'
const emit = defineEmits(['close']) const emit = defineEmits(['close'])

4
src/views/logs-manage/logs-manage.vue
View File

@ -22,7 +22,7 @@
<div class="button-part" style="justify-content: space-between;"> <div class="button-part" style="justify-content: space-between;">
<el-button icon="Delete" @click="removeData()">删除</el-button> <el-button icon="Delete" @click="removeData()">删除</el-button>
<TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="init" <TableAbility @searchBtn="isSearch = !isSearch" @refreshBtn="init"
@downloadBtn="exportData('日志数据', tableData)"></TableAbility> @downloadBtn="exportMultiData('日志数据', tableData)"></TableAbility>
</div> </div>
<div class="table-part"> <div class="table-part">
<el-table ref="tableRef" v-loading="loading" :data="tableData" height="100%" border show-overflow-tooltip <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 LoginChart from './chart/login-chart.vue'
import CommonPagination from '@/components/common-pagination.vue' import CommonPagination from '@/components/common-pagination.vue'
import LogForm from './form/log-form.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 {dateFormater} from '@/utils/date-util'
import * as logManageApi from '@/api/log-manage' import * as logManageApi from '@/api/log-manage'
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";

342
src/views/permissions-manage/form/doctor-form.vue
View File

@ -1,206 +1,236 @@
<template> <template>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80"> <el-form ref="formRef" :model="formData" :rules="rules" label-width="80">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="用户名" prop="username"> <el-form-item label="用户名" prop="username">
<el-input v-model="formData.username" placeholder="请输入用户名" <el-input v-model="formData.username" placeholder="请输入用户名2~16位字母或数字（区分大小写）"
:disabled="type === 'edit'"></el-input> :disabled="type === 'edit'"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入姓名"></el-input> <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="角色" prop="role"> <el-form-item label="角色" prop="role">
<el-select v-model="formData.role" placeholder="请选择角色" multiple> <el-select v-model="formData.role" placeholder="请选择角色" multiple>
<el-option v-for="item in roleOption" :key="item.roleId" :label="item.roleName" <el-option v-for="item in roleOption" :key="item.roleId" :label="item.roleName"
:value="item.roleId"/> :value="item.roleId"/>
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="邮箱" prop="email"> <el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" placeholder="请输入邮箱"></el-input> <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="电话" prop="phone"> <el-form-item label="电话" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入电话"></el-input> <el-input v-model="formData.phone" placeholder="请输入电话"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12" v-if="type != 'edit'"> <el-col :span="12" v-if="type != 'edit'">
<el-form-item label="锁定" prop="lockFlag"> <el-form-item label="锁定" prop="lockFlag">
<el-radio-group v-model="formData.lockFlag"> <el-radio-group v-model="formData.lockFlag">
<el-radio :label="'0'" border>解锁</el-radio> <el-radio :label="'0'" border>解锁</el-radio>
<el-radio :label="'1'" border>锁定</el-radio> <el-radio :label="'1'" border>锁定</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row v-if="type != 'edit'"> <el-row v-if="type != 'edit'">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
<el-input v-model="formData.password" placeholder="请输入密码" <el-input v-model="formData.password" placeholder="请输入密码8~16位字母或数字（区分大小写）"
:disabled="type === 'edit'"></el-input> :disabled="type === 'edit'" type="password" show-password></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> <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;"> <div style="text-align: right;padding-top: 80px;">
<el-button class="f18" @click="close">取消</el-button> <el-button class="f18" @click="close">取消</el-button>
<el-button class="f18" type="primary" @click="saveData">确认</el-button> <el-button class="f18" type="primary" @click="saveData">确认</el-button>
</div> </div>
</el-form> </el-form>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import {onMounted, reactive, ref, toRefs, watch} from 'vue' import {onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus' import {ElMessage} from 'element-plus'
import {getRoleList} from "@/api/role"; import {getRoleList} from "@/api/role";
import {addUser, updateUI} from "@/api/user"; import {addUser, updateUI} from "@/api/user";
import {REGEXP} from "@/enum/global-enum";
const emit = defineEmits(['close', 'save']) const emit = defineEmits(['close', 'save'])
const props = defineProps({ const props = defineProps({
type: String type: String
}) })
const roleOption = ref<any>([]) const roleOption = ref<any>([])
const validatorPhone = (rule: any, value: any, callback: 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 (value.indexOf('****') >= 0) { if (!new RegExp(REGEXP.MOBILE).test(value)) {
return callback().trim(); callback(new Error('请输入合法手机号'));
} } else {
if (!isPhone.test(value)) { callback();
callback(new Error('请输入合法手机号')); }
} else {
callback();
}
} }
const rules = reactive({ const rules = reactive({
username: [ username: [
{required: true, message: '请输入用户名', trigger: ['blur', 'change']}, {required: true, message: '请输入用户名', trigger: ['blur', 'change']},
], {validator: validateAccount, trigger: ['blur', 'change']}
name: [ ],
{required: true, message: '请输入姓名', trigger: ['blur', 'change']}, name: [
], {required: true, message: '请输入姓名', trigger: ['blur', 'change']},
role: [ ],
{required: true, message: '请选择角色', trigger: ['blur', 'change']}, role: [
], {required: true, message: '请选择角色', trigger: ['blur', 'change']},
phone: [ ],
{required: true, validator: validatorPhone, trigger: ['blur', 'change']}, phone: [
], {required: true, validator: validatorPhone, trigger: ['blur', 'change']},
password: [ ],
{required: true, message: '请输入密码', 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 formRef = ref()
const formData = ref({ const formData = ref({
id: '', id: '',
username: '', username: '',
name: '', name: '',
role: [], role: [],
email: '', email: '',
phone: '', phone: '',
password: '', password: '',
lockFlag: '0', confirmPassword: '',
lockFlag: '0',
} as any) } as any)
onMounted(() => { 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) => { getRoleList().then((res: any) => {
if (res && res.code == 0) { if (res && res.code == 0) {
roleOption.value = res.data roleOption.value = res.data
} else { } else {
ElMessage.error('角色列表获取失败') ElMessage.error('角色列表获取失败')
} }
}) })
defineExpose({ defineExpose({
formData, formData,
resetData, resetData,
}) })
function close() { function close() {
emit('close') emit('close')
} }
function resetData() { function resetData() {
getRoleList() getRoleList()
formRef.value.resetFields() formRef.value.resetFields()
formData.value = { formData.value = {
id: '', id: '',
username: '', username: '',
name: '', name: '',
role: [], role: [],
email: '', email: '',
phone: '', phone: '',
password: '', password: '',
lockFlag: '0', confirmPassword: '',
} lockFlag: '0',
}
} }
const saveData = async () => { const saveData = async () => {
await formRef.value.validate((valid: any, fields: any) => { await formRef.value.validate((valid: any, fields: any) => {
if (valid) { if (valid) {
if (props.type == "add") { if (props.type == "add") {
addUser(formData.value).then((data: any) => { addUser(formData.value).then((data: any) => {
if (data.code == 0) { if (data.code == 0) {
ElMessage.success('保存成功！') ElMessage.success('保存成功！')
emit('save', formData.value, props.type) emit('save', formData.value, props.type)
close() close()
} else { } else {
ElMessage.error("保存失败") ElMessage.error("保存失败")
} }
}) })
} else { } else {
updateUI({ updateUI({
userId: formData.value.userId, userId: formData.value.userId,
username: formData.value.username, username: formData.value.username,
name: formData.value.name, name: formData.value.name,
role: formData.value.role, role: formData.value.role,
email: formData.value.email, email: formData.value.email,
phone: formData.value.phone phone: formData.value.phone
}).then((data: any) => { }).then((data: any) => {
if (data.code == 0) { if (data.code == 0) {
ElMessage.success('修改成功！') ElMessage.success('修改成功！')
emit('save', formData.value, props.type) emit('save', formData.value, props.type)
close() close()
} else { } else {
ElMessage.error("修改失败") ElMessage.error("修改失败")
} }
}) })
} }
} }
}) })
} }
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
:deep(.el-form-item) { :deep(.el-form-item) {
.el-form-item__label { .el-form-item__label {
display: block; display: block;
text-align: justify; text-align: justify;
text-align-last: justify; text-align-last: justify;
padding: 0 10px 0 20px; padding: 0 10px 0 20px;
&:before { &:before {
display: none; display: none;
} }
} }
} }
</style> </style>