feat: 第三方登录认证功能和管理页
This commit is contained in:
TsMask
@@ -6,8 +6,10 @@ import ResetPasswd from './components/reset-passwd.vue';
|
||||
import StyleLayout from './components/style-layout.vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
const appStore = useAppStore();
|
||||
const userStore = useUserStore();
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -43,6 +45,7 @@ onActivated(() => {
|
||||
<a-tab-pane
|
||||
key="reset-passwd"
|
||||
:tab="t('views.account.settings.resetPasswd')"
|
||||
v-if="userStore.userType === 'System'"
|
||||
>
|
||||
<ResetPasswd></ResetPasswd>
|
||||
</a-tab-pane>
|
||||
|
||||
@@ -1,398 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import svgLight from '@/assets/svg/light.svg';
|
||||
import svgDark from '@/assets/svg/dark.svg';
|
||||
import { message } from 'ant-design-vue/es';
|
||||
import { reactive, onMounted, computed, toRaw } from 'vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import { getCaptchaImage } from '@/api/auth';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import useLayoutStore from '@/store/modules/layout';
|
||||
import { viewTransitionTheme } from 'antdv-pro-layout';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { parseUrlPath } from '@/plugins/file-static-url';
|
||||
const { t, changeLocale, optionsLocale } = useI18n();
|
||||
const layoutStore = useLayoutStore();
|
||||
const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**验证码 */
|
||||
code: '',
|
||||
/**验证码uuid */
|
||||
uuid: '',
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
/**验证码状态 */
|
||||
captcha: {
|
||||
/**验证码开关 */
|
||||
enabled: false,
|
||||
/**验证码图片地址 */
|
||||
codeImg: '',
|
||||
},
|
||||
/**验证码点击状态 */
|
||||
captchaClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
useUserStore()
|
||||
.fnLogin(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
// 刷新验证码
|
||||
if (state.captcha.enabled) {
|
||||
state.from.code = '';
|
||||
fnGetCaptcha();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
function fnGetCaptcha() {
|
||||
if (state.captchaClick) return;
|
||||
state.captchaClick = true;
|
||||
getCaptchaImage()
|
||||
.then(res => {
|
||||
if (res.code !== RESULT_CODE_SUCCESS) {
|
||||
message.warning({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const { enabled, img, uuid } = res.data;
|
||||
state.captcha.enabled = Boolean(enabled);
|
||||
if (state.captcha.enabled) {
|
||||
state.captcha.codeImg = img;
|
||||
state.from.uuid = uuid;
|
||||
}
|
||||
if (res.data?.text) {
|
||||
state.from.code = res.data.text;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.captchaClick = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 判断是否有背景地址
|
||||
const calcBG = computed(() => {
|
||||
const bgURL = parseUrlPath(appStore.loginBackground);
|
||||
if (bgURL && bgURL !== '#') {
|
||||
return {
|
||||
backgroundImage: `url('${bgURL}')`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
|
||||
/**
|
||||
* 国际化翻译转换
|
||||
*/
|
||||
function fnLocale() {
|
||||
let title = route.meta.title as string;
|
||||
if (title.indexOf('router.') !== -1) {
|
||||
title = t(title);
|
||||
}
|
||||
appStore.setTitle(title);
|
||||
}
|
||||
|
||||
/**改变主题色 */
|
||||
function fnClickTheme(e: any) {
|
||||
viewTransitionTheme(isDarkMode => {
|
||||
layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
|
||||
}, e);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnLocale();
|
||||
fnGetCaptcha();
|
||||
});
|
||||
|
||||
/**改变多语言 */
|
||||
function fnChangeLocale(e: any) {
|
||||
changeLocale(e.key);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container" :style="calcBG">
|
||||
<section v-show="!calcBG">
|
||||
<div class="animation animation1"></div>
|
||||
<div class="animation animation2"></div>
|
||||
<div class="animation animation3"></div>
|
||||
<div class="animation animation4"></div>
|
||||
<div class="animation animation5"></div>
|
||||
</section>
|
||||
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ t('common.title') }}
|
||||
</div>
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-row v-if="state.captcha.enabled">
|
||||
<a-col :span="16">
|
||||
<a-form-item
|
||||
name="code"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
message: t('valid.codePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.code"
|
||||
size="large"
|
||||
:placeholder="t('valid.codeHit')"
|
||||
:maxlength="6"
|
||||
>
|
||||
<template #prefix>
|
||||
<RobotOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-image
|
||||
:alt="t('valid.codeHit')"
|
||||
style="cursor: pointer; border-radius: 2px"
|
||||
width="100px"
|
||||
height="40px"
|
||||
:preview="false"
|
||||
:src="state.captcha.codeImg"
|
||||
@click="fnGetCaptcha"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row
|
||||
justify="space-between"
|
||||
align="middle"
|
||||
style="margin-bottom: 16px"
|
||||
>
|
||||
<a-col :span="12" v-if="appStore.registerUser">
|
||||
<a-button
|
||||
type="link"
|
||||
target="_self"
|
||||
:title="t('views.login.registerBtn')"
|
||||
@click="() => router.push({ name: 'Register' })"
|
||||
>
|
||||
{{ t('views.login.registerBtn') }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-row justify="end" align="middle" style="margin-top: 18px">
|
||||
<a-col :span="3">
|
||||
<a-tooltip placement="bottomRight">
|
||||
<template #title>{{ t('loayouts.rightContent.theme') }}</template>
|
||||
<a-button type="text" @click="fnClickTheme">
|
||||
<template #icon>
|
||||
<img
|
||||
v-if="layoutStore.proConfig.theme === 'dark'"
|
||||
:src="svgDark"
|
||||
class="theme-icon"
|
||||
/>
|
||||
<img v-else :src="svgLight" class="theme-icon" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
<a-col :span="3" v-if="appStore.i18nOpen">
|
||||
<a-dropdown trigger="click" placement="bottomRight">
|
||||
<a-button type="text">
|
||||
<template #icon> <TranslationOutlined /> </template>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="fnChangeLocale">
|
||||
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding-top: 164px;
|
||||
|
||||
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
||||
|
||||
background-image: url(/background/light.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
.animation {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #1be1f6;
|
||||
|
||||
&.animation1 {
|
||||
left: 15%;
|
||||
top: 70%;
|
||||
animation: slashStar 2s ease-in-out 0.3s infinite;
|
||||
}
|
||||
&.animation2 {
|
||||
left: 34%;
|
||||
top: 35%;
|
||||
animation: slashStar 2s ease-in-out 1.2s infinite;
|
||||
}
|
||||
&.animation3 {
|
||||
left: 10%;
|
||||
top: 8%;
|
||||
animation: slashStar 2s ease-in-out 0.5s infinite;
|
||||
}
|
||||
&.animation4 {
|
||||
left: 68%;
|
||||
top: 68%;
|
||||
animation: slashStar 2s ease-in-out 0.8s infinite;
|
||||
}
|
||||
&.animation5 {
|
||||
left: 87%;
|
||||
top: 30%;
|
||||
animation: slashStar 2s ease-in-out 1.5s infinite;
|
||||
}
|
||||
}
|
||||
@keyframes slashStar {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .container {
|
||||
background-image: url(/background/dark.jpg);
|
||||
background-color: #141414;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
339
src/views/login/components/CardLogin.vue
Normal file
339
src/views/login/components/CardLogin.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<script setup lang="ts">
|
||||
import svgLight from '@/assets/svg/light.svg';
|
||||
import svgDark from '@/assets/svg/dark.svg';
|
||||
import { reactive, toRaw, onMounted } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { viewTransitionTheme } from 'antdv-pro-layout';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import useLayoutStore from '@/store/modules/layout';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { getCaptchaImage } from '@/api/auth';
|
||||
import {
|
||||
loginSourceState,
|
||||
fnClickLoginSource,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
const { t, changeLocale, optionsLocale } = useI18n();
|
||||
const layoutStore = useLayoutStore();
|
||||
const appStore = useAppStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**验证码 */
|
||||
code: '',
|
||||
/**验证码uuid */
|
||||
uuid: '',
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
/**验证码状态 */
|
||||
captcha: {
|
||||
/**验证码开关 */
|
||||
enabled: false,
|
||||
/**验证码图片地址 */
|
||||
codeImg: '',
|
||||
},
|
||||
/**验证码点击状态 */
|
||||
captchaClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
useUserStore()
|
||||
.fnLogin(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
// 刷新验证码
|
||||
if (state.captcha.enabled) {
|
||||
state.from.code = '';
|
||||
fnGetCaptcha();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取验证码
|
||||
*/
|
||||
function fnGetCaptcha() {
|
||||
if (state.captchaClick) return;
|
||||
state.captchaClick = true;
|
||||
getCaptchaImage()
|
||||
.then(res => {
|
||||
if (res.code !== RESULT_CODE_SUCCESS) {
|
||||
message.warning({
|
||||
content: `${res.msg}`,
|
||||
duration: 3,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const { enabled, img, uuid } = res.data;
|
||||
state.captcha.enabled = Boolean(enabled);
|
||||
if (state.captcha.enabled) {
|
||||
state.captcha.codeImg = img;
|
||||
state.from.uuid = uuid;
|
||||
}
|
||||
if (res.data?.text) {
|
||||
state.from.code = res.data.text;
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.captchaClick = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 国际化翻译转换
|
||||
*/
|
||||
function fnLocale() {
|
||||
let title = route.meta.title as string;
|
||||
if (title.indexOf('router.') !== -1) {
|
||||
title = t(title);
|
||||
}
|
||||
appStore.setTitle(title);
|
||||
}
|
||||
|
||||
/**改变主题色 */
|
||||
function fnClickTheme(e: any) {
|
||||
viewTransitionTheme(isDarkMode => {
|
||||
layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
|
||||
}, e);
|
||||
}
|
||||
|
||||
/**改变多语言 */
|
||||
function fnChangeLocale(e: any) {
|
||||
changeLocale(e.key);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fnLocale();
|
||||
fnGetCaptcha();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ t('common.title') }}
|
||||
</div>
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-row v-if="state.captcha.enabled">
|
||||
<a-col :span="16">
|
||||
<a-form-item
|
||||
name="code"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 1,
|
||||
message: t('valid.codePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.code"
|
||||
size="large"
|
||||
:placeholder="t('valid.codeHit')"
|
||||
:maxlength="6"
|
||||
>
|
||||
<template #prefix>
|
||||
<RobotOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<a-image
|
||||
:alt="t('valid.codeHit')"
|
||||
style="cursor: pointer; border-radius: 2px"
|
||||
width="100px"
|
||||
height="40px"
|
||||
:preview="false"
|
||||
:src="state.captcha.codeImg"
|
||||
@click="fnGetCaptcha"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<template v-if="loginSourceState.list.length > 0">
|
||||
<a-divider :plain="true">
|
||||
{{ t('views.login.otherMethod') }}
|
||||
</a-divider>
|
||||
<a-row
|
||||
justify="center"
|
||||
align="middle"
|
||||
:wrap="false"
|
||||
:gutter="16"
|
||||
style="margin-top: 18px"
|
||||
>
|
||||
<a-col v-for="s in loginSourceState.list" :key="s.uid">
|
||||
<a-tooltip placement="top">
|
||||
<template #title>{{ s.name }}</template>
|
||||
<a-button
|
||||
type="text"
|
||||
shape="circle"
|
||||
@click="fnClickLoginSource(s)"
|
||||
>
|
||||
<template #icon>
|
||||
<a-avatar v-if="s.icon" :src="s.icon" :alt="s.name" />
|
||||
<a-avatar v-else :alt="s.name">{{ s.name }}</a-avatar>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
|
||||
<a-row justify="end" align="middle" style="margin-top: 18px">
|
||||
<a-col :span="12" v-if="appStore.registerUser">
|
||||
<a-button
|
||||
type="link"
|
||||
target="_self"
|
||||
:title="t('views.login.registerBtn')"
|
||||
@click="() => router.push({ name: 'Register' })"
|
||||
>
|
||||
{{ t('views.login.registerBtn') }}
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="3" v-if="appStore.i18nOpen">
|
||||
<a-dropdown trigger="click" placement="bottomRight">
|
||||
<a-button type="text">
|
||||
<template #icon> <TranslationOutlined /> </template>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu @click="fnChangeLocale">
|
||||
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
||||
{{ opt.label }}
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</a-col>
|
||||
<a-col :span="3">
|
||||
<a-tooltip placement="bottomRight">
|
||||
<template #title>{{ t('loayouts.rightContent.theme') }}</template>
|
||||
<a-button type="text" @click="fnClickTheme">
|
||||
<template #icon>
|
||||
<img
|
||||
v-if="layoutStore.proConfig.theme === 'dark'"
|
||||
:src="svgDark"
|
||||
class="theme-icon"
|
||||
/>
|
||||
<img v-else :src="svgLight" class="theme-icon" />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/login/components/CardLoginForLDAP.vue
Normal file
163
src/views/login/components/CardLoginForLDAP.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRaw } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { loginLDAP } from '@/api/auth';
|
||||
import {
|
||||
loginSourceState,
|
||||
fnClickLoginBack,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**认证uid */
|
||||
uid: loginSourceState.selct.uid,
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
loginLDAP(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
|
||||
setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ loginSourceState.selct.name }}
|
||||
</div>
|
||||
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
:disabled="state.fromClick"
|
||||
style="margin-top: 24px"
|
||||
@click="fnClickLoginBack"
|
||||
>
|
||||
{{ t('views.login.backBtn') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/login/components/CardLoginForSMTP.vue
Normal file
163
src/views/login/components/CardLoginForSMTP.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive, toRaw } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { loginSMTP } from '@/api/auth';
|
||||
import {
|
||||
loginSourceState,
|
||||
fnClickLoginBack,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
import { setAccessToken, setRefreshToken } from '@/plugins/auth-token';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
let state = reactive({
|
||||
/**表单属性 */
|
||||
from: {
|
||||
/**账号 */
|
||||
username: '',
|
||||
/**密码 */
|
||||
password: '',
|
||||
/**认证uid */
|
||||
uid: loginSourceState.selct.uid,
|
||||
},
|
||||
/**表单提交点击状态 */
|
||||
fromClick: false,
|
||||
});
|
||||
|
||||
/**表单验证通过 */
|
||||
function fnFinish() {
|
||||
state.fromClick = true;
|
||||
// 发送请求
|
||||
loginSMTP(toRaw(state.from))
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('views.login.loginSuccess'), 1);
|
||||
setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
|
||||
setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
|
||||
/**登录后重定向页面 */
|
||||
const redirectPath = route.query?.redirect || '/index';
|
||||
router.push({ path: redirectPath as string });
|
||||
} else {
|
||||
message.error(`${res.msg}`, 3);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
state.fromClick = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :bordered="false" class="login-card">
|
||||
<div class="title">
|
||||
{{ loginSourceState.selct.name }}
|
||||
</div>
|
||||
|
||||
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
||||
<a-form-item
|
||||
name="username"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 2,
|
||||
max: 30,
|
||||
message: t('valid.userNamePlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="state.from.username"
|
||||
size="large"
|
||||
:placeholder="t('valid.userNameHit')"
|
||||
:maxlength="30"
|
||||
>
|
||||
<template #prefix>
|
||||
<UserOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="password"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
min: 6,
|
||||
max: 26,
|
||||
message: t('valid.passwordPlease'),
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input-password
|
||||
v-model:value="state.from.password"
|
||||
size="large"
|
||||
:placeholder="t('valid.passwordHit')"
|
||||
:maxlength="26"
|
||||
>
|
||||
<template #prefix>
|
||||
<LockOutlined class="prefix-icon" />
|
||||
</template>
|
||||
</a-input-password>
|
||||
</a-form-item>
|
||||
|
||||
<a-button
|
||||
block
|
||||
type="primary"
|
||||
size="large"
|
||||
html-type="submit"
|
||||
:loading="state.fromClick"
|
||||
>
|
||||
{{ t('views.login.loginBtn') }}
|
||||
</a-button>
|
||||
|
||||
<a-button
|
||||
block
|
||||
size="large"
|
||||
:disabled="state.fromClick"
|
||||
style="margin-top: 24px"
|
||||
@click="fnClickLoginBack"
|
||||
>
|
||||
{{ t('views.login.backBtn') }}
|
||||
</a-button>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.login-card {
|
||||
width: 368px;
|
||||
min-width: 260px;
|
||||
margin: 0 auto;
|
||||
margin-left: 60%;
|
||||
border-radius: 6px;
|
||||
|
||||
& .title {
|
||||
text-align: left;
|
||||
margin-bottom: 18px;
|
||||
color: #141414;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
& .prefix-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .login-card {
|
||||
& .title {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.login-card {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
82
src/views/login/hooks/useLoginSource.ts
Normal file
82
src/views/login/hooks/useLoginSource.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
import { getLoginSource, loginOAuth2URL } from '@/api/auth';
|
||||
import { parseUrlPath } from '@/plugins/file-static-url';
|
||||
import { defineAsyncComponent, nextTick, reactive, shallowRef } from 'vue';
|
||||
|
||||
// 异步加载组件
|
||||
const cardLogin = defineAsyncComponent(
|
||||
() => import('../components/CardLogin.vue')
|
||||
);
|
||||
|
||||
// 当前组件
|
||||
export const currentComponent = shallowRef(cardLogin);
|
||||
|
||||
/**登录认证源类型 */
|
||||
type LoginSourceType = {
|
||||
/**认证标识 */
|
||||
uid: string;
|
||||
/**名称 */
|
||||
name: string;
|
||||
/**类型 */
|
||||
type: string;
|
||||
/**图标 */
|
||||
icon: string;
|
||||
};
|
||||
|
||||
/**登录认证源 */
|
||||
export const loginSourceState = reactive({
|
||||
list: [] as LoginSourceType[],
|
||||
selct: {
|
||||
uid: '',
|
||||
name: '',
|
||||
type: '',
|
||||
icon: '',
|
||||
},
|
||||
});
|
||||
|
||||
/**获取登录认证源 */
|
||||
export function fnGetLoginSource() {
|
||||
getLoginSource().then(res => {
|
||||
loginSourceState.list = res.data.map((item: Record<string, string>) => ({
|
||||
...item,
|
||||
icon: parseUrlPath(item.icon),
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
/**点击登录认证源 */
|
||||
export function fnClickLoginSource(item: LoginSourceType) {
|
||||
loginSourceState.selct = { ...item };
|
||||
|
||||
let loadComponent: any = undefined;
|
||||
switch (item.type) {
|
||||
case 'LDAP':
|
||||
loadComponent = defineAsyncComponent(
|
||||
() => import('../components/CardLoginForLDAP.vue')
|
||||
);
|
||||
break;
|
||||
case 'SMTP':
|
||||
loadComponent = defineAsyncComponent(
|
||||
() => import('../components/CardLoginForSMTP.vue')
|
||||
);
|
||||
break;
|
||||
case 'OAuth2':
|
||||
const redirectUri = loginOAuth2URL(item.uid);
|
||||
window.location.href = redirectUri;
|
||||
// window.open(redirectUri, '_blank');
|
||||
break;
|
||||
default:
|
||||
fnClickLoginBack();
|
||||
}
|
||||
if (loadComponent) {
|
||||
nextTick(() => {
|
||||
currentComponent.value = loadComponent;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**点击登录返回 */
|
||||
export function fnClickLoginBack() {
|
||||
nextTick(() => {
|
||||
currentComponent.value = cardLogin;
|
||||
});
|
||||
}
|
||||
105
src/views/login/index.vue
Normal file
105
src/views/login/index.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted } from 'vue';
|
||||
import useAppStore from '@/store/modules/app';
|
||||
import { parseUrlPath } from '@/plugins/file-static-url';
|
||||
import {
|
||||
currentComponent,
|
||||
fnGetLoginSource,
|
||||
} from '@/views/login/hooks/useLoginSource';
|
||||
const appStore = useAppStore();
|
||||
|
||||
// 判断是否有背景地址
|
||||
const calcBG = computed(() => {
|
||||
const bgURL = parseUrlPath(appStore.loginBackground);
|
||||
if (bgURL && bgURL !== '#') {
|
||||
return {
|
||||
backgroundImage: `url('${bgURL}')`,
|
||||
backgroundPosition: 'center',
|
||||
backgroundSize: 'cover',
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 获取登录认证源
|
||||
fnGetLoginSource();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container" :style="calcBG">
|
||||
<section v-show="!calcBG">
|
||||
<div class="animation animation1"></div>
|
||||
<div class="animation animation2"></div>
|
||||
<div class="animation animation3"></div>
|
||||
<div class="animation animation4"></div>
|
||||
<div class="animation animation5"></div>
|
||||
</section>
|
||||
|
||||
<component :is="currentComponent" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding-top: 164px;
|
||||
|
||||
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
||||
|
||||
background-image: url(/background/light.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
.animation {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #1be1f6;
|
||||
|
||||
&.animation1 {
|
||||
left: 15%;
|
||||
top: 70%;
|
||||
animation: slashStar 2s ease-in-out 0.3s infinite;
|
||||
}
|
||||
&.animation2 {
|
||||
left: 34%;
|
||||
top: 35%;
|
||||
animation: slashStar 2s ease-in-out 1.2s infinite;
|
||||
}
|
||||
&.animation3 {
|
||||
left: 10%;
|
||||
top: 8%;
|
||||
animation: slashStar 2s ease-in-out 0.5s infinite;
|
||||
}
|
||||
&.animation4 {
|
||||
left: 68%;
|
||||
top: 68%;
|
||||
animation: slashStar 2s ease-in-out 0.8s infinite;
|
||||
}
|
||||
&.animation5 {
|
||||
left: 87%;
|
||||
top: 30%;
|
||||
animation: slashStar 2s ease-in-out 1.5s infinite;
|
||||
}
|
||||
}
|
||||
@keyframes slashStar {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='dark'] .container {
|
||||
background-image: url(/background/dark.jpg);
|
||||
background-color: #141414;
|
||||
}
|
||||
</style>
|
||||
85
src/views/login/oauth2.vue
Normal file
85
src/views/login/oauth2.vue
Normal file
@@ -0,0 +1,85 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import {
|
||||
delAccessToken,
|
||||
delRefreshToken,
|
||||
setAccessToken,
|
||||
setRefreshToken,
|
||||
} from '@/plugins/auth-token';
|
||||
import { loginOAuth2Token } from '@/api/auth';
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const info = reactive({
|
||||
status: 'warning' as 'error' | 'warning' | 'success',
|
||||
title: t('views.login.authorizedNotfound'),
|
||||
subTitle: '',
|
||||
});
|
||||
|
||||
function fnToLogin() {
|
||||
router.replace({ name: 'Login' }).finally(() => {
|
||||
delAccessToken();
|
||||
delRefreshToken();
|
||||
location.replace(location.origin);
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 从URL参数中获取code和state
|
||||
const params = new URLSearchParams(location.search);
|
||||
const code = params.get('code');
|
||||
const state = params.get('state');
|
||||
if (code && state) {
|
||||
loginOAuth2Token(code, state).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
info.status = 'success';
|
||||
info.title = t('views.login.authorizedSuccess');
|
||||
info.subTitle = t('views.login.redirectHome', { i: 3 });
|
||||
setAccessToken(res.data.accessToken, res.data.refreshExpiresIn);
|
||||
setRefreshToken(res.data.refreshToken, res.data.refreshExpiresIn);
|
||||
// 3秒后跳转主页
|
||||
let i = 2;
|
||||
const timer = setInterval(() => {
|
||||
info.subTitle = t('views.login.redirectHome', { i });
|
||||
i--;
|
||||
if (i <= -1) {
|
||||
clearInterval(timer);
|
||||
/**登录后跳转主页 */
|
||||
router.replace({ name: 'Index' }).finally(() => {
|
||||
location.replace(location.origin);
|
||||
});
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
info.status = 'error';
|
||||
info.title = t('views.login.authorizedFailed');
|
||||
info.subTitle = res.msg;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// info.subTitle = "未获取到code和state参数";
|
||||
info.subTitle = "code and state parameters not obtained";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-result
|
||||
:status="info.status"
|
||||
:title="info.title"
|
||||
v-model:subTitle="info.subTitle"
|
||||
>
|
||||
<template #extra>
|
||||
<a-button
|
||||
type="default"
|
||||
v-if="info.status !== 'success'"
|
||||
@click="fnToLogin"
|
||||
>
|
||||
{{ t('views.login.backBtnLogin') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</template>
|
||||
1122
src/views/system/login-source/index.vue
Normal file
1122
src/views/system/login-source/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -44,10 +44,13 @@ const { t } = useI18n();
|
||||
let dict: {
|
||||
/**状态 */
|
||||
sysNormalDisable: DictType[];
|
||||
/**用户类型 */
|
||||
sysUserType: DictType[];
|
||||
/**性别 */
|
||||
sysUserSex: DictType[];
|
||||
} = reactive({
|
||||
sysNormalDisable: [],
|
||||
sysUserType: [],
|
||||
sysUserSex: [],
|
||||
});
|
||||
|
||||
@@ -64,6 +67,8 @@ let queryParams = reactive({
|
||||
deptId: undefined,
|
||||
/**用户状态 */
|
||||
statusFlag: undefined,
|
||||
/**用户类型 */
|
||||
userType: undefined,
|
||||
/**记录开始时间 */
|
||||
beginTime: undefined as number | undefined,
|
||||
/**记录结束时间 */
|
||||
@@ -81,6 +86,7 @@ function fnQueryReset() {
|
||||
phone: '',
|
||||
deptId: undefined,
|
||||
statusFlag: undefined,
|
||||
userType: undefined,
|
||||
beginTime: undefined,
|
||||
endTime: undefined,
|
||||
pageNum: 1,
|
||||
@@ -148,6 +154,13 @@ let tableColumns: ColumnsType = [
|
||||
align: 'left',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: t('views.system.user.userType'),
|
||||
dataIndex: 'userType',
|
||||
key: 'userType',
|
||||
align: 'left',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: t('views.system.user.loginIp'),
|
||||
dataIndex: 'loginIp',
|
||||
@@ -792,13 +805,17 @@ onMounted(() => {
|
||||
// 初始字典数据
|
||||
Promise.allSettled([
|
||||
getDict('sys_normal_disable'),
|
||||
getDict('sys_user_type'),
|
||||
getDict('sys_user_sex'),
|
||||
]).then(resArr => {
|
||||
if (resArr[0].status === 'fulfilled') {
|
||||
dict.sysNormalDisable = resArr[0].value;
|
||||
}
|
||||
if (resArr[1].status === 'fulfilled') {
|
||||
dict.sysUserSex = resArr[1].value;
|
||||
dict.sysUserType = resArr[1].value;
|
||||
}
|
||||
if (resArr[2].status === 'fulfilled') {
|
||||
dict.sysUserSex = resArr[2].value;
|
||||
}
|
||||
});
|
||||
// 获取列表数据
|
||||
@@ -881,7 +898,7 @@ onMounted(() => {
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="4" :md="12" :xs="24">
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.status')"
|
||||
name="statusFlag"
|
||||
@@ -895,6 +912,20 @@ onMounted(() => {
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="6" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.userType')"
|
||||
name="userType"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="queryParams.userType"
|
||||
allow-clear
|
||||
:options="dict.sysUserType"
|
||||
:placeholder="t('common.selectPlease')"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="8" :md="12" :xs="24">
|
||||
<a-form-item
|
||||
:label="t('views.system.user.loginTime')"
|
||||
@@ -1022,6 +1053,15 @@ onMounted(() => {
|
||||
{{ r.roleName }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'userType'">
|
||||
<DictTag :options="dict.sysUserType" :value="record.userType" />
|
||||
<a-tag
|
||||
:bordered="false"
|
||||
v-if="record.userSource != '#'"
|
||||
>
|
||||
{{ record.userSource }}
|
||||
</a-tag>
|
||||
</template>
|
||||
<template v-if="column.key === 'deptId'">
|
||||
{{ record.dept?.deptName }}
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user