Dragon
1 year ago
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 579 KiB |
|
After Width: | Height: | Size: 184 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 997 B |
|
After Width: | Height: | Size: 977 B |
|
After Width: | Height: | Size: 692 B |
|
After Width: | Height: | Size: 902 B |
|
After Width: | Height: | Size: 904 B |
|
After Width: | Height: | Size: 661 B |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,251 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { reactive, ref } from 'vue'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { useMessage } from 'naive-ui'
|
||||||
|
import captcha from './captcha.vue'
|
||||||
|
import { PageEnum } from '@/enums/pageEnum'
|
||||||
|
import { useUserStore } from '@/store/modules/user'
|
||||||
|
import { ResultEnum } from '@/enums/httpEnum'
|
||||||
|
import { getFilter, setFilter } from '@/api/home/filter'
|
||||||
|
import { getConfig } from '@/api/system/user'
|
||||||
|
import { asideMap } from '@/config/aside'
|
||||||
|
|
||||||
|
interface FormState {
|
||||||
|
enterprisecode?: string
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
captcha: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const formRef = ref()
|
||||||
|
const message = useMessage()
|
||||||
|
const loading = ref(false)
|
||||||
|
const autoLogin = ref(true)
|
||||||
|
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const formInline: FormState = reactive({
|
||||||
|
enterprisecode: '三方系统标识8',
|
||||||
|
username: '13311111111',
|
||||||
|
password: '123456',
|
||||||
|
captcha: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
enterprisecode: { required: true, message: '请输入企业编码', trigger: 'blur' },
|
||||||
|
username: { required: true, message: '请输入用户名', trigger: 'blur' },
|
||||||
|
password: { required: true, message: '请输入密码', trigger: 'blur' },
|
||||||
|
captcha: { required: true, message: '请输入验证码', trigger: 'blur' },
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSubmit(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
formRef.value.validate(async (errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
const { username, password, enterprisecode, captcha } = formInline
|
||||||
|
message.loading('登录中...')
|
||||||
|
loading.value = true
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
logincode: captcha,
|
||||||
|
username,
|
||||||
|
password,
|
||||||
|
codetoken: userStore.getCapToken,
|
||||||
|
agentcode: enterprisecode,
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { code, message: msg } = await userStore.login(params)
|
||||||
|
await userStore.getInformation()
|
||||||
|
const response = await getFilter()
|
||||||
|
|
||||||
|
// 添加个默认显示配置
|
||||||
|
if (response.data === null) {
|
||||||
|
const systemConfig = await getConfig()
|
||||||
|
const onList: string[] = []
|
||||||
|
Object.keys(systemConfig.data).forEach((key) => {
|
||||||
|
// 系统配置开启且个人配置开启
|
||||||
|
if (key.startsWith('iz') && systemConfig.data[key] === 'Y' && asideMap[key]?.isDefaultFilter)
|
||||||
|
onList.push(key)
|
||||||
|
})
|
||||||
|
await setFilter({ searchcount: onList.join(',') })
|
||||||
|
}
|
||||||
|
|
||||||
|
message.destroyAll()
|
||||||
|
if (code === ResultEnum.SUCCESS) {
|
||||||
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string)
|
||||||
|
message.success('登录成功，即将进入系统')
|
||||||
|
if (route.name === LOGIN_NAME)
|
||||||
|
router.replace('/')
|
||||||
|
else router.replace(toPath)
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
message.info(msg || '登录失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
message.error('请填写完整信息，并且进行验证码校验')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="view-account">
|
||||||
|
<div class="view-account-container">
|
||||||
|
<div class="view-account-form">
|
||||||
|
<n-tabs>
|
||||||
|
<n-tab-pane name="pwdsignin" tab="密码登录">
|
||||||
|
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
|
||||||
|
<n-form-item path="enterprisecode">
|
||||||
|
<n-input v-model:value="formInline.enterprisecode" placeholder="请输入企业编码">
|
||||||
|
<template #prefix>
|
||||||
|
<svg-icon size="20" name="enterprise" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="username">
|
||||||
|
<n-input v-model:value="formInline.username" placeholder="请输入用户名">
|
||||||
|
<template #prefix>
|
||||||
|
<svg-icon size="20" name="account" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="password">
|
||||||
|
<n-input v-model:value="formInline.password" type="password" show-password-on="click" placeholder="请输入密码">
|
||||||
|
<template #prefix>
|
||||||
|
<svg-icon size="20" name="password" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="captcha">
|
||||||
|
<n-grid x-gap="12" :cols="4">
|
||||||
|
<n-gi span="3">
|
||||||
|
<n-input v-model:value="formInline.captcha" placeholder="请输入验证码">
|
||||||
|
<template #prefix>
|
||||||
|
<svg-icon size="20" name="captcha" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-gi>
|
||||||
|
<n-gi>
|
||||||
|
<captcha />
|
||||||
|
</n-gi>
|
||||||
|
</n-grid>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item>
|
||||||
|
<n-button type="primary" size="large" :loading="loading" block @click="handleSubmit">
|
||||||
|
登录
|
||||||
|
</n-button>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item class="default-color">
|
||||||
|
<div class="w-full flex justify-between">
|
||||||
|
<div class="flex-initial">
|
||||||
|
<n-checkbox v-model:checked="autoLogin">
|
||||||
|
记住账号
|
||||||
|
</n-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial order-last">
|
||||||
|
<a href="javascript:">忘记密码</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</n-tab-pane>
|
||||||
|
<n-tab-pane name="msgsignin" tab="短信登陆">
|
||||||
|
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
|
||||||
|
<n-form-item path="username">
|
||||||
|
<n-input v-model:value="formInline.username" placeholder="请输入用户名">
|
||||||
|
<template #prefix>
|
||||||
|
<svg-icon size="20" name="account" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item path="password">
|
||||||
|
<n-input v-model:value="formInline.password" type="password" placeholder="请输入密码">
|
||||||
|
<template #prefix>
|
||||||
|
<svg-icon size="20" name="password" />
|
||||||
|
</template>
|
||||||
|
</n-input>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item>
|
||||||
|
<n-button type="primary" size="large" :loading="loading" block @click="handleSubmit">
|
||||||
|
登录
|
||||||
|
</n-button>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item class="default-color">
|
||||||
|
<div class="w-full flex justify-between">
|
||||||
|
<div class="flex-initial">
|
||||||
|
<n-checkbox v-model:checked="autoLogin">
|
||||||
|
记住账号
|
||||||
|
</n-checkbox>
|
||||||
|
</div>
|
||||||
|
<div class="flex-initial order-last">
|
||||||
|
<a href="javascript:">忘记密码</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
</n-tab-pane>
|
||||||
|
</n-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.view-account {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
&-container {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 384px;
|
||||||
|
min-width: 420px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-form {
|
||||||
|
background: rgba(255, 255, 255, 0.20);
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
|
||||||
|
backdrop-filter: blur(9px);
|
||||||
|
padding: 50px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-other {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-color {
|
||||||
|
color: #515a6e;
|
||||||
|
|
||||||
|
.ant-checkbox-wrapper {
|
||||||
|
color: #515a6e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-account {
|
||||||
|
background-image: url('../../assets/images/login.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-account-container {
|
||||||
|
padding: 32px 0 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep(.n-input .n-input__suffix) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||