Yajentine/his
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

系统登入界面的设计

Browse Source
This commit is contained in:
叶锦涛
2025-10-28 16:27:42 +08:00
parent ddc7ce2fe7
commit f99f8eb560
4 changed files with 182 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
openhis-ui-vue3/package.json
View File

@@ -10,7 +10,7 @@
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview",
"build:spug": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode spug",
"build:spug": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build --mode spug"
},
"repository": {
"type": "git",

BIN
openhis-ui-vue3/src/assets/logo/LOGO.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

4
openhis-ui-vue3/src/settings.js
View File

@@ -3,6 +3,10 @@ export default {
* 网页标题
*/
title: import.meta.env.VITE_APP_TITLE,
/**
* 系统名称
*/
systemName: import.meta.env.VITE_APP_SYSTEM_NAME || 'XXX医院信息管理系统',
/**
* 侧边栏主题 深色主题theme-dark，浅色主题theme-light
*/

208
openhis-ui-vue3/src/views/login.vue
View File

@@ -1,12 +1,14 @@
<template>
<div class="login">
<!-- 顶部 -->
<!-- <div class="el-login-top">
<el-image :src="logoNew"></el-image>
</div> -->
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<h1 class="title">医院信息管理系统</h1>
<div class="el-login-top">
<el-image :src="logoNew"></el-image>
</div>
<h1 class="title">{{ currentTenantName || settings.systemName }}</h1>
<p class="login-subtitle">请使用您的账号密码安全登录系统</p>
<el-form-item prop="username">
<p class="label">用户名</p>
<el-input
v-model="loginForm.username"
type="text"
@@ -21,25 +23,35 @@
</el-input>
</el-form-item>
<el-form-item prop="password">
<p class="label">密码</p>
<el-input
v-model="loginForm.password"
type="password"
:type="passwordVisible ? 'text' : 'password'"
size="large"
auto-complete="off"
placeholder="密码"
@keyup.enter="handleLogin"
show-password
>
<template #prefix
><svg-icon icon-class="password" class="el-input__icon input-icon"
/></template>
<template #suffix>
<span
class="password-toggle"
@click="togglePasswordVisibility"
style="cursor: pointer; color: #606266; font-size: 14px; padding: 0 10px;"
>
{{ passwordVisible ? '隐藏' : '显示' }}
</span>
</template>
</el-input>
</el-form-item>
<el-form-item prop="tenantId">
<p class="label">医疗机构</p>
<el-select
v-model="loginForm.tenantId"
size="large"
placeholder="所属医院"
placeholder="请选择医疗机构"
clearable
filterable
>
@@ -51,6 +63,11 @@
/>
</el-select>
</el-form-item>
<el-form-item class="login-options">
<el-checkbox v-model="loginForm.rememberMe" class="remember-me">记住我</el-checkbox>
<el-link type="primary" class="forgot-password" @click="handleForgotPassword">忘记密码？</el-link>
</el-form-item>
<!-- <el-form-item prop="tenantId"> -->
<!-- <span class="descriptions-item-label" style="margin: 0 10px 0 0">连接医保</span> -->
<!-- <el-switch v-model="loginForm.invokeYb" @change="topNavChange" size="large"/> -->
@@ -87,8 +104,17 @@
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
<div class="footer">
© 2025 XXX医院信息系统 | 版本 v2.5.1
<!-- 公司版权信息（新增） -->
<div class="company-copyright">
技术支持：上海经创贺联信息技术有限公司
</div>
</div>
</el-form>
<!-- 底部 -->
<div class="el-login-footer">
<div class="el-login-footer-link">
<span><el-link :underline="false">his账号用户协议</el-link></span>
@@ -109,12 +135,15 @@
</template>
<script setup>
import { getCurrentInstance, ref, reactive, computed, onMounted, watch } from 'vue';
import settings from '@/settings';
import { getCodeImg, sign, getUserBindTenantList } from '@/api/login';
import { invokeYbPlugin } from '@/api/public';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import useUserStore from '@/store/modules/user';
import logoNew from '@/assets/logo/logoBlack.png';
import { ElMessage } from 'element-plus';
import logoNew from '@/assets/logo/LOGO.jpg';
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
@@ -131,6 +160,7 @@ const loginForm = ref({
});
const tenantOptions = ref([]);
const currentTenantName = ref('');
const loginRules = {
username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
@@ -146,6 +176,21 @@ const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);
const passwordVisible = ref(false);
function togglePasswordVisibility() {
passwordVisible.value = !passwordVisible.value;
}
// 处理忘记密码功能
function handleForgotPassword() {
// 这里可以添加忘记密码的逻辑，例如跳转到忘记密码页面或显示忘记密码弹窗
// 目前先显示一个提示
ElMessage({
message: '忘记密码功能正在开发中',
type: 'info'
});
}
watch(
route,
@@ -155,7 +200,7 @@ watch(
{ immediate: true }
);
// 页面加载时从 localStorage 获取 invokeYb 的值
// 页面加载时从 localStorage 获取 invokeYb 的值和从 Cookies 获取记住的登录信息
onMounted(() => {
const storedInvokeYb = localStorage.getItem('invokeYb');
if (storedInvokeYb !== null) {
@@ -164,6 +209,38 @@ onMounted(() => {
// 如果 localStorage 中没有值，则设置默认值并保存
localStorage.setItem('invokeYb', 'true');
}
// 从 Cookies 中恢复记住的登录信息
const rememberMe = Cookies.get('rememberMe');
if (rememberMe && rememberMe === 'true') {
const username = Cookies.get('username');
const password = Cookies.get('password');
if (username) {
loginForm.value.username = username;
loginForm.value.rememberMe = true;
// 解密密码
if (password) {
try {
loginForm.value.password = decrypt(password);
} catch (e) {
console.error('密码解密失败:', e);
}
}
}
}
// 获取医疗机构列表
getUserBindTenantList().then((res) => {
tenantOptions.value = res.data.map(item => ({
label: item.tenantName,
value: item.id
}));
// 如果只有一个医疗机构，自动选中
if (tenantOptions.value.length === 1) {
loginForm.value.tenantId = tenantOptions.value[0].value;
currentTenantName.value = tenantOptions.value[0].label;
}
});
});
function handleLogin() {
@@ -279,6 +356,14 @@ function getCode() {
});
}
// 监听租户选择变化
watch(() => loginForm.value.tenantId, (newTenantId) => {
const selectedTenant = tenantOptions.value.find(item => item.value === newTenantId);
if (selectedTenant) {
currentTenantName.value = selectedTenant.label;
}
});
// 切换医保连接开关时更新 localStorage
function topNavChange(value) {
localStorage.setItem('invokeYb', value.toString());
@@ -303,6 +388,7 @@ function getTenantList(username) {
label: item.tenantName,
}));
loginForm.value.tenantId = tenantOptions.value[0].value; //默认选中第一个
currentTenantName.value = tenantOptions.value[0].label;
}
}
});
@@ -389,31 +475,85 @@ getCookie();
getTenantList(loginForm.value.username);
</script>
<style>
html, body {
height: auto;
min-height: 100vh;
overflow-y: auto;
margin: 0;
padding: 0;
}
</style>
<style lang="scss" scoped>
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: #f8f9fa;
min-height: 100vh;
padding-bottom: 100px; /* 为底部固定footer留出空间 */
//background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.title {
margin: 0px auto 30px auto;
margin: 10px auto 15px auto;
text-align: center;
color: #000;
font-family: 'Microsoft Yahei,STHeiti,Simsun,STSong,Helvetica Neue,Helvetica,Arial,sans-serif';
}
.label{
display: block;
margin-bottom: 6px;
font-size: 14px;
font-weight: 500;
color: var(--text);
}
.login-options {
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0 10px 0;
width: 100%; /* 确保容器占满宽度 */
}
.remember-me {
margin: 0;
color: var(--text);
}
.forgot-password {
font-size: 14px;
color: var(--primary);
cursor: pointer;
text-align: right; /* 确保文本右对齐 */
margin-left: auto; /* 确保元素右对齐 */
}
.footer {
margin-top: 32px;
font-size: 12px;
color: var(--text-secondary);
}
.login-subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 20px;
}
.login-form {
border-radius: 6px;
border-radius: 16px;
box-shadow: 0 4px 12px var(--shadow);
border: 1px solid var(--border);
background: #ffffff;
width: 400px;
width: 100%;
max-width: 400px;
padding: 40px;
padding: 25px 25px 5px 25px;
text-align: center;
.el-input {
height: 50px; // 修改输入框高度
input {
height: 50px; // 修改输入框高度
height: 50px; // 修改输入框高度
font-size: 18px; // 修改输入框内文字大小
}
}
@@ -438,24 +578,20 @@ getTenantList(loginForm.value.username);
}
}
.el-login-top {
height: 80px;
line-height: 40px;
position: fixed;
top: 0;
width: 100%;
text-align: left;
color: #000;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
background-color: #f1f1f1;
padding: 20px;
text-align: center;
margin: 0 auto 10px;
.el-image {
max-width: 120px;
max-height: 120px;
}
}
.el-login-footer {
height: 100px;
line-height: 40px;
height: 80px;
line-height: 30px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
color: #000;
@@ -463,8 +599,7 @@ getTenantList(loginForm.value.username);
font-size: 12px;
letter-spacing: 1px;
background-color: #f1f1f1;
color: #000;
z-index: 100; /* 确保footer在最上层 */
span {
margin: 0 10px;
}
@@ -490,6 +625,13 @@ getTenantList(loginForm.value.username);
width: 24px !important; // 调整图标的宽度
height: 24px !important; // 调整图标的高度
font-size: 24px !important; // 调整图标的字体大小
color: #606266 !important; // 确保图标颜色可见
cursor: pointer !important; // 确保鼠标悬停时显示指针
}
:deep(.password-toggle) {
line-height: 50px !important; // 确保文字垂直居中
user-select: none; // 禁止选中文字
}
:deep(.el-select__wrapper) {
background-color: #f5f7fa !important;
@@ -498,4 +640,8 @@ getTenantList(loginForm.value.username);
font-size: 18px !important;
height: 50px !important; // 修改输入框高度
}
:deep(.el-form-item) {
margin-bottom: 15px !important; // 减小输入框之间的距离
}
</style>