| | |
| | | <template> |
| | | <LoginFormTitle v-show="getShow" class="enter-x" /> |
| | | <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef" v-show="getShow"> |
| | | <Form |
| | | class="p-4 enter-x" |
| | | :model="formData" |
| | | :rules="getFormRules" |
| | | ref="formRef" |
| | | v-show="getShow" |
| | | @keypress.enter="handleLogin" |
| | | > |
| | | <FormItem name="account" class="enter-x"> |
| | | <Input size="large" v-model:value="formData.account" :placeholder="t('sys.login.userName')" /> |
| | | <Input |
| | | size="large" |
| | | v-model:value="formData.account" |
| | | :placeholder="t('sys.login.userName')" |
| | | class="fix-auto-fill" |
| | | /> |
| | | </FormItem> |
| | | <FormItem name="password" class="enter-x"> |
| | | <InputPassword |
| | |
| | | {{ t('sys.login.registerButton') }} |
| | | </Button> --> |
| | | </FormItem> |
| | | <ARow class="enter-x"> |
| | | <ACol :xs="24" :md="8"> |
| | | <ARow class="enter-x" :gutter="[16, 16]"> |
| | | <ACol :md="8" :xs="24"> |
| | | <Button block @click="setLoginState(LoginStateEnum.MOBILE)"> |
| | | {{ t('sys.login.mobileSignInFormTitle') }} |
| | | </Button> |
| | | </ACol> |
| | | <ACol :md="8" :xs="24" class="xs:my-2 md:my-0 xs:mx-0 md:mx-2"> |
| | | <ACol :md="8" :xs="24"> |
| | | <Button block @click="setLoginState(LoginStateEnum.QR_CODE)"> |
| | | {{ t('sys.login.qrSignInFormTitle') }} |
| | | </Button> |
| | | </ACol> |
| | | <ACol :md="7" :xs="24"> |
| | | <ACol :md="8" :xs="24"> |
| | | <Button block @click="setLoginState(LoginStateEnum.REGISTER)"> |
| | | {{ t('sys.login.registerButton') }} |
| | | </Button> |
| | |
| | | </div> |
| | | </Form> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, reactive, ref, toRaw, unref, computed } from 'vue'; |
| | | <script lang="ts" setup> |
| | | import { reactive, ref, unref, computed } from 'vue'; |
| | | |
| | | import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue'; |
| | | import { |
| | |
| | | } from '@ant-design/icons-vue'; |
| | | import LoginFormTitle from './LoginFormTitle.vue'; |
| | | |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { useMessage } from '/@/hooks/web/useMessage'; |
| | | import { useI18n } from '@/hooks/web/useI18n'; |
| | | import { useMessage } from '@/hooks/web/useMessage'; |
| | | |
| | | import { userStore } from '/@/store/modules/user'; |
| | | import { useUserStore } from '@/store/modules/user'; |
| | | import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin'; |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | import { useKeyPress } from '/@/hooks/event/useKeyPress'; |
| | | import { KeyCodeEnum } from '/@/enums/keyCodeEnum'; |
| | | import { useDesign } from '@/hooks/web/useDesign'; |
| | | //import { onKeyStroke } from '@vueuse/core'; |
| | | import { loginDo } from '@/api/sys/onbusUser'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'LoginForm', |
| | | components: { |
| | | [Col.name]: Col, |
| | | [Row.name]: Row, |
| | | Checkbox, |
| | | Button, |
| | | Form, |
| | | FormItem: Form.Item, |
| | | Input, |
| | | Divider, |
| | | LoginFormTitle, |
| | | InputPassword: Input.Password, |
| | | GithubFilled, |
| | | WechatFilled, |
| | | AlipayCircleFilled, |
| | | GoogleCircleFilled, |
| | | TwitterCircleFilled, |
| | | }, |
| | | setup() { |
| | | const { t } = useI18n(); |
| | | const { notification } = useMessage(); |
| | | const { prefixCls } = useDesign('login'); |
| | | const ACol = Col; |
| | | const ARow = Row; |
| | | const FormItem = Form.Item; |
| | | const InputPassword = Input.Password; |
| | | const { t } = useI18n(); |
| | | const { notification, createErrorModal } = useMessage(); |
| | | const { prefixCls } = useDesign('login'); |
| | | const userStore = useUserStore(); |
| | | |
| | | const { setLoginState, getLoginState } = useLoginState(); |
| | | const { getFormRules } = useFormRules(); |
| | | const { setLoginState, getLoginState } = useLoginState(); |
| | | const { getFormRules } = useFormRules(); |
| | | |
| | | const formRef = ref<any>(null); |
| | | const loading = ref(false); |
| | | const rememberMe = ref(false); |
| | | const formRef = ref(); |
| | | const loading = ref(false); |
| | | const rememberMe = ref(false); |
| | | |
| | | const formData = reactive({ |
| | | account: 'vben', |
| | | password: '123456', |
| | | }); |
| | | const formData = reactive({ |
| | | account: 'z9000011', |
| | | password: '606063', |
| | | }); |
| | | |
| | | const { validForm } = useFormValid(formRef); |
| | | useKeyPress(['enter'], (events) => { |
| | | const keyCode = events.keyCode; |
| | | const { validForm } = useFormValid(formRef); |
| | | |
| | | if (keyCode === KeyCodeEnum.ENTER) { |
| | | handleLogin(); |
| | | } |
| | | }); |
| | | //onKeyStroke('Enter', handleLogin); |
| | | |
| | | const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN); |
| | | const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN); |
| | | |
| | | async function handleLogin() { |
| | | const data = await validForm(); |
| | | if (!data) return; |
| | | async function handleLogin() { |
| | | const data = await validForm(); |
| | | if (!data) return; |
| | | try { |
| | | loading.value = true; |
| | | if (data.account.startsWith('z9000')) { |
| | | try { |
| | | loading.value = true; |
| | | const userInfo = await userStore.login( |
| | | toRaw({ |
| | | password: data.password, |
| | | username: data.account, |
| | | }) |
| | | ); |
| | | if (userInfo) { |
| | | notification.success({ |
| | | message: t('sys.login.loginSuccessTitle'), |
| | | description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`, |
| | | duration: 3, |
| | | }); |
| | | let res = await loginDo({ |
| | | password: data.password, |
| | | account: data.account, |
| | | }); |
| | | Logger.log('登录的res为:', res); |
| | | if(res.msg == '登录成功'){ |
| | | data.password = '123456'; |
| | | data.account = 'vben'; |
| | | } |
| | | } finally { |
| | | loading.value = false; |
| | | } catch (error) { |
| | | Logger.error('登录的userInfo err为:', error); |
| | | } |
| | | } |
| | | |
| | | return { |
| | | t, |
| | | prefixCls, |
| | | formRef, |
| | | formData, |
| | | getFormRules, |
| | | rememberMe, |
| | | handleLogin, |
| | | loading, |
| | | setLoginState, |
| | | LoginStateEnum, |
| | | getShow, |
| | | }; |
| | | }, |
| | | }); |
| | | const userInfo = await userStore.login({ |
| | | password: data.password, |
| | | username: data.account, |
| | | mode: 'none', //不要默认的错误提示 |
| | | }); |
| | | if (userInfo) { |
| | | notification.success({ |
| | | message: t('sys.login.loginSuccessTitle'), |
| | | description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`, |
| | | duration: 3, |
| | | }); |
| | | } |
| | | } catch (error) { |
| | | createErrorModal({ |
| | | title: t('sys.api.errorTip'), |
| | | content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'), |
| | | getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body, |
| | | }); |
| | | } finally { |
| | | loading.value = false; |
| | | } |
| | | } |
| | | </script> |