115 lines
5.1 KiB
Vue
115 lines
5.1 KiB
Vue
<template>
|
|
<div class="login-page">
|
|
<div class="login-header">
|
|
<div class="logo">🏥</div>
|
|
<h1>{{ currentTenantName || 'HealthLink 移动护理' }}</h1>
|
|
<p>护士工作站</p>
|
|
</div>
|
|
<div class="login-form">
|
|
<div class="form-item">
|
|
<label>用户名</label>
|
|
<input v-model="form.username" type="text" placeholder="请输入用户名" class="input" @blur="loadTenants" />
|
|
</div>
|
|
<div class="form-item">
|
|
<label>密码</label>
|
|
<input v-model="form.password" type="password" placeholder="请输入密码" class="input" @keyup.enter="handleLogin" />
|
|
</div>
|
|
<div class="form-item">
|
|
<label>医院/租户</label>
|
|
<select v-model="form.tenantId" class="input" @change="onTenantChange">
|
|
<option value="">请选择医院</option>
|
|
<option v-for="t in tenantOptions" :key="t.value" :value="t.value">{{ t.label }}</option>
|
|
</select>
|
|
<div v-if="tenantOptions.length === 0 && form.username" class="loading-text">加载医院列表中...</div>
|
|
</div>
|
|
<button class="login-btn" @click="handleLogin" :disabled="loading">{{ loading ? '登录中...' : '登 录' }}</button>
|
|
<div v-if="errorMsg" class="error-msg">{{ errorMsg }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { authApi } from '../api'
|
|
|
|
const router = useRouter()
|
|
const loading = ref(false)
|
|
const errorMsg = ref('')
|
|
const tenantOptions = ref([])
|
|
const currentTenantName = ref('')
|
|
const form = ref({ username: '', password: '', tenantId: '' })
|
|
|
|
const loadTenants = async () => {
|
|
if (!form.value.username) return
|
|
try {
|
|
const res = await authApi.getUserTenants(form.value.username)
|
|
if (res.code === 200 && res.data) {
|
|
tenantOptions.value = res.data.map(item => ({ label: item.tenantName, value: item.id }))
|
|
if (tenantOptions.value.length === 1) {
|
|
form.value.tenantId = tenantOptions.value[0].value
|
|
currentTenantName.value = tenantOptions.value[0].label
|
|
}
|
|
}
|
|
} catch (e) {
|
|
console.error('加载租户失败:', e)
|
|
errorMsg.value = '无法连接服务器，请检查网络'
|
|
}
|
|
}
|
|
|
|
const onTenantChange = () => {
|
|
const selected = tenantOptions.value.find(t => t.value === form.value.tenantId)
|
|
currentTenantName.value = selected ? selected.label : ''
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (form.value.username) loadTenants()
|
|
})
|
|
|
|
const handleLogin = async () => {
|
|
if (!form.value.username) { errorMsg.value = '请输入用户名'; return }
|
|
if (!form.value.password) { errorMsg.value = '请输入密码'; return }
|
|
loading.value = true; errorMsg.value = ''
|
|
try {
|
|
const loginRes = await authApi.login({ username: form.value.username, password: form.value.password, tenantId: form.value.tenantId, code: '', uuid: '' })
|
|
if (loginRes.code === 200 && loginRes.token) {
|
|
localStorage.setItem('Admin-Token', loginRes.token)
|
|
const infoRes = await authApi.getInfo()
|
|
if (infoRes.code === 200) {
|
|
const user = infoRes.user || {}
|
|
localStorage.setItem('userInfo', JSON.stringify({
|
|
userId: user.userId, userName: user.userName, nickName: user.nickName,
|
|
practitionerId: user.practitionerId, orgId: user.orgId, orgName: user.orgName,
|
|
roles: user.roles, permissions: user.permissions
|
|
}))
|
|
}
|
|
ElMessage.success('登录成功')
|
|
router.push('/mobile/home')
|
|
} else {
|
|
errorMsg.value = loginRes.msg || '登录失败'
|
|
}
|
|
} catch (e) {
|
|
errorMsg.value = e.response?.data?.msg || '登录失败，请检查网络'
|
|
} finally { loading.value = false }
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.login-page { min-height: 100vh; background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
|
|
.login-header { text-align: center; color: #fff; margin-bottom: 40px; }
|
|
.logo { font-size: 60px; margin-bottom: 12px; }
|
|
.login-header h1 { font-size: 22px; margin: 0; }
|
|
.login-header p { font-size: 14px; opacity: 0.8; margin-top: 8px; }
|
|
.login-form { background: #fff; border-radius: 12px; padding: 24px; width: 100%; max-width: 360px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
|
|
.form-item { margin-bottom: 16px; }
|
|
.form-item label { display: block; font-size: 14px; color: #333; margin-bottom: 6px; font-weight: 500; }
|
|
.input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; outline: none; }
|
|
.input:focus { border-color: #1890ff; }
|
|
select.input { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 12px center; }
|
|
.login-btn { width: 100%; padding: 14px; background: #1890ff; color: #fff; border: none; border-radius: 8px; font-size: 18px; font-weight: 600; cursor: pointer; }
|
|
.login-btn:disabled { background: #91d5ff; }
|
|
.error-msg { color: #f5222d; text-align: center; margin-top: 12px; font-size: 14px; }
|
|
.loading-text { color: #999; font-size: 12px; margin-top: 4px; }
|
|
</style>
|