|
@@ -2,6 +2,10 @@
|
|
|
<div class="login-container">
|
|
<div class="login-container">
|
|
|
<el-card class="login-box">
|
|
<el-card class="login-box">
|
|
|
<h2 class="login-title">通用型流程审批系统</h2>
|
|
<h2 class="login-title">通用型流程审批系统</h2>
|
|
|
|
|
+ <el-radio-group v-model="loginType" class="login-type-switch">
|
|
|
|
|
+ <el-radio-button label="SYSTEM">系统用户登录</el-radio-button>
|
|
|
|
|
+ <el-radio-button label="ROLE">角色用户登录</el-radio-button>
|
|
|
|
|
+ </el-radio-group>
|
|
|
<el-form
|
|
<el-form
|
|
|
ref="loginFormRef"
|
|
ref="loginFormRef"
|
|
|
:model="loginForm"
|
|
:model="loginForm"
|
|
@@ -11,7 +15,7 @@
|
|
|
<el-form-item prop="username">
|
|
<el-form-item prop="username">
|
|
|
<el-input
|
|
<el-input
|
|
|
v-model="loginForm.username"
|
|
v-model="loginForm.username"
|
|
|
- placeholder="用户名"
|
|
|
|
|
|
|
+ :placeholder="loginType === 'ROLE' ? '角色账号' : '用户名'"
|
|
|
:prefix-icon="User"
|
|
:prefix-icon="User"
|
|
|
size="large"
|
|
size="large"
|
|
|
/>
|
|
/>
|
|
@@ -46,7 +50,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted } from 'vue'
|
|
|
|
|
|
|
+import { ref, reactive, onMounted, watch } from 'vue'
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
import { User, Lock } from '@element-plus/icons-vue'
|
|
import { User, Lock } from '@element-plus/icons-vue'
|
|
|
import { ElMessage } from 'element-plus'
|
|
import { ElMessage } from 'element-plus'
|
|
@@ -59,6 +63,7 @@ const userStore = useUserStore()
|
|
|
|
|
|
|
|
const loginFormRef = ref<FormInstance>()
|
|
const loginFormRef = ref<FormInstance>()
|
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
|
|
|
+const loginType = ref<'SYSTEM' | 'ROLE'>('SYSTEM')
|
|
|
|
|
|
|
|
const loginForm = reactive({
|
|
const loginForm = reactive({
|
|
|
username: '',
|
|
username: '',
|
|
@@ -72,22 +77,29 @@ const loginRules: FormRules = {
|
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+watch(loginType, (newType) => {
|
|
|
|
|
+ loginForm.username = ''
|
|
|
|
|
+ loginForm.password = ''
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
async function handleLogin() {
|
|
async function handleLogin() {
|
|
|
const valid = await loginFormRef.value?.validate().catch(() => false)
|
|
const valid = await loginFormRef.value?.validate().catch(() => false)
|
|
|
if (!valid) return
|
|
if (!valid) return
|
|
|
|
|
|
|
|
loading.value = true
|
|
loading.value = true
|
|
|
try {
|
|
try {
|
|
|
- await userStore.loginAction({ ...loginForm })
|
|
|
|
|
|
|
+ await userStore.loginAction({ ...loginForm, loginType: loginType.value })
|
|
|
await userStore.fetchUserInfo()
|
|
await userStore.fetchUserInfo()
|
|
|
if (remember.value) {
|
|
if (remember.value) {
|
|
|
localStorage.setItem('login_username', loginForm.username)
|
|
localStorage.setItem('login_username', loginForm.username)
|
|
|
localStorage.setItem('login_password', loginForm.password)
|
|
localStorage.setItem('login_password', loginForm.password)
|
|
|
localStorage.setItem('login_remember', 'true')
|
|
localStorage.setItem('login_remember', 'true')
|
|
|
|
|
+ localStorage.setItem('login_type', loginType.value)
|
|
|
} else {
|
|
} else {
|
|
|
localStorage.removeItem('login_username')
|
|
localStorage.removeItem('login_username')
|
|
|
localStorage.removeItem('login_password')
|
|
localStorage.removeItem('login_password')
|
|
|
localStorage.removeItem('login_remember')
|
|
localStorage.removeItem('login_remember')
|
|
|
|
|
+ localStorage.removeItem('login_type')
|
|
|
}
|
|
}
|
|
|
ElMessage.success('登录成功')
|
|
ElMessage.success('登录成功')
|
|
|
const redirect = route.query.redirect as string
|
|
const redirect = route.query.redirect as string
|
|
@@ -103,10 +115,14 @@ onMounted(() => {
|
|
|
const savedUsername = localStorage.getItem('login_username')
|
|
const savedUsername = localStorage.getItem('login_username')
|
|
|
const savedPassword = localStorage.getItem('login_password')
|
|
const savedPassword = localStorage.getItem('login_password')
|
|
|
const savedRemember = localStorage.getItem('login_remember')
|
|
const savedRemember = localStorage.getItem('login_remember')
|
|
|
|
|
+ const savedType = localStorage.getItem('login_type')
|
|
|
if (savedRemember === 'true' && savedUsername) {
|
|
if (savedRemember === 'true' && savedUsername) {
|
|
|
loginForm.username = savedUsername
|
|
loginForm.username = savedUsername
|
|
|
loginForm.password = savedPassword || ''
|
|
loginForm.password = savedPassword || ''
|
|
|
remember.value = true
|
|
remember.value = true
|
|
|
|
|
+ if (savedType === 'ROLE' || savedType === 'SYSTEM') {
|
|
|
|
|
+ loginType.value = savedType as 'SYSTEM' | 'ROLE'
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
</script>
|
|
</script>
|
|
@@ -125,7 +141,12 @@ onMounted(() => {
|
|
|
}
|
|
}
|
|
|
.login-title {
|
|
.login-title {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- margin-bottom: 30px;
|
|
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
color: #303133;
|
|
color: #303133;
|
|
|
}
|
|
}
|
|
|
|
|
+.login-type-switch {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|