解决登录页面 所有ts爆红

This commit is contained in:
TimSpan 2024-08-13 09:48:45 +08:00
parent 1af684224c
commit 5e3fa3c327
2 changed files with 28 additions and 29 deletions

View File

@ -14,7 +14,7 @@
<a-form-item label="密码" name="passWord"> <a-form-item label="密码" name="passWord">
<a-input-password placeholder="请输入密码" v-model:value="loginParams.passWord" /> <a-input-password placeholder="请输入密码" v-model:value="loginParams.passWord" />
</a-form-item> </a-form-item>
<a-form-item :wrapper-col="{ span: 24 }"> <a-form-item :wrapper-col="{span: 24}">
<a-button type="primary" style="width: 100%" @click="login">登录</a-button> <a-button type="primary" style="width: 100%" @click="login">登录</a-button>
</a-form-item> </a-form-item>
</a-form> </a-form>
@ -24,17 +24,16 @@
</template> </template>
<!-- --> <!-- -->
<script setup lang="ts"> <script setup lang="ts">
import {JsonResult} from '@/axios'
import api from '@/axios' import api from '@/axios'
import { ElMessage } from 'element-plus' import {ElMessage} from 'element-plus'
import { ref, onMounted } from 'vue' import {ref, onMounted} from 'vue'
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
import { useUserStore } from '@/stores/modules/userStore' import {useUserStore} from '@/stores/modules/userStore'
import aesUtil from '@/utils/aesUtil' import {md5} from 'js-md5'
import md5 from 'js-md5' import {FormInstance} from 'ant-design-vue'
import { FormInstance } from 'ant-design-vue' import {notification} from 'ant-design-vue'
import { notification } from 'ant-design-vue' import {Rule} from 'ant-design-vue/es/form'
import { CLIENT_TYPE } from '@/configs'
import { Rule } from 'ant-design-vue/es/form'
const formRef = ref<FormInstance>(null) const formRef = ref<FormInstance>(null)
const router = useRouter() const router = useRouter()
const userStore = useUserStore() const userStore = useUserStore()
@ -42,17 +41,17 @@ const userStore = useUserStore()
const codeBase64Url = ref<string>('') const codeBase64Url = ref<string>('')
const loginParamsRule: Record<string, Rule[]> = { const loginParamsRule: Record<string, Rule[]> = {
userNameOrTelephone: [ userNameOrTelephone: [
{ required: true, message: '请输入账号/手机号', trigger: 'change' }, {required: true, message: '请输入账号/手机号', trigger: 'change'},
{ min: 3, max: 20, message: '账号长度最小为6最长为20', trigger: 'blur' }, {min: 3, max: 20, message: '账号长度最小为6最长为20', trigger: 'blur'}
], ],
passWord: [ passWord: [
{ required: true, message: '请输入密码', trigger: 'change' }, {required: true, message: '请输入密码', trigger: 'change'},
{ min: 3, max: 20, message: '密码长度最小为6最长为20', trigger: 'blur' }, {min: 3, max: 20, message: '密码长度最小为6最长为20', trigger: 'blur'}
], ],
code: [ code: [
{ required: true, message: '请输入验证码', trigger: 'change' }, {required: true, message: '请输入验证码', trigger: 'change'},
{ len: 4, message: '验证码长度为4', trigger: 'blur' }, {len: 4, message: '验证码长度为4', trigger: 'blur'}
], ]
} }
const loginParams = ref<{ const loginParams = ref<{
userNameOrTelephone: string userNameOrTelephone: string
@ -61,30 +60,30 @@ const loginParams = ref<{
}>({ }>({
userNameOrTelephone: import.meta.env.VITE_APP_ENV === 'development' ? 'test001' : '', userNameOrTelephone: import.meta.env.VITE_APP_ENV === 'development' ? 'test001' : '',
passWord: import.meta.env.VITE_APP_ENV === 'development' ? '123456' : '', passWord: import.meta.env.VITE_APP_ENV === 'development' ? '123456' : '',
code: import.meta.env.VITE_APP_ENV === 'development' ? '1234' : '', code: import.meta.env.VITE_APP_ENV === 'development' ? '1234' : ''
}) })
const login = async () => { const login = async () => {
// //
await formRef.value.validate() await formRef.value.validate()
// //
const resp = await api.post<string>( const resp: JsonResult<any> = await api.post<string>(
'/common/client/user/login', '/common/client/user/login',
{ {
// clientType: CLIENT_TYPE, // clientType: CLIENT_TYPE,
name: loginParams.value.userNameOrTelephone, name: loginParams.value.userNameOrTelephone,
password: md5(loginParams.value.passWord), password: md5(loginParams.value.passWord)
// code: loginParams.value.code // code: loginParams.value.code
}, },
{ {
loading: true, loading: true
} }
) )
// //
api api
.post('/common/client/user/org/tree4', { .post('/common/client/user/org/tree4', {
name: loginParams.value.userNameOrTelephone, name: loginParams.value.userNameOrTelephone
}) })
.then((res) => { .then((res) => {
if (res.code == 0) { if (res.code == 0) {
@ -99,7 +98,7 @@ const login = async () => {
api api
.post('multialarm/system/alarm/total', { .post('multialarm/system/alarm/total', {
name: loginParams.value.userNameOrTelephone, name: loginParams.value.userNameOrTelephone,
parent: resp.data.geoCode, parent: resp.data.geoCode
}) })
.then((res) => { .then((res) => {
if (res.code == 0) { if (res.code == 0) {
@ -111,7 +110,7 @@ const login = async () => {
fetch(url) fetch(url)
.then((response) => { .then((response) => {
var status = response['status'] var status = response['status']
if (status == '500') { if (status == 500) {
return new Promise((resovle) => { return new Promise((resovle) => {
resovle('无数据') resovle('无数据')
}) })
@ -120,13 +119,13 @@ const login = async () => {
return response.text() return response.text()
} }
}) })
.then((data) => { .then((data: any) => {
localStorage.setItem('mapdata', data) localStorage.setItem('mapdata', data)
router.push('/index/indexmin').then(() => { router.push('/index/indexmin').then(() => {
notification.success({ notification.success({
message: '登录成功', message: '登录成功',
duration: 2, duration: 2,
placement: 'topLeft', placement: 'topLeft'
}) })
}) })
}) })
@ -134,7 +133,7 @@ const login = async () => {
// //
const getCode = async () => { const getCode = async () => {
const data = await api.get<string>('/common/generate/verification/code', { const data = await api.get<string>('/common/generate/verification/code', {
type: 'LOGIN', type: 'LOGIN'
}) })
codeBase64Url.value = data.data codeBase64Url.value = data.data
} }