From fa482274a588e97784c10099e45d030664aa4ceb Mon Sep 17 00:00:00 2001 From: zhangxiao <898441624@qq.com> Date: 星期四, 26 九月 2024 10:42:02 +0800 Subject: [PATCH] 登录界面添加新用户注册功能 --- src/views/login/components/login-form.vue | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 115 insertions(+), 0 deletions(-) diff --git a/src/views/login/components/login-form.vue b/src/views/login/components/login-form.vue index 8656e4a..b5b224b 100644 --- a/src/views/login/components/login-form.vue +++ b/src/views/login/components/login-form.vue @@ -52,12 +52,66 @@ <a-button type="primary" html-type="submit" long :loading="loading"> {{ $t('login.form.login') }} </a-button> + <div class="container"> + 娌℃湁璐︽埛锛� + <button class="register-button" @click="showRegisterModal = true"> + <span> + 娉ㄥ唽 + </span> + </button> + </div> <!-- <a-button type="text" long class="login-form-register-btn"> {{ $t('login.form.register') }} </a-button> --> </a-space> </a-form> </div> + <a-modal + v-model:visible="showRegisterModal" + title="娉ㄥ唽璐︽埛" + @ok="handleRegister()" + @cancel="showRegisterModal = false" + > + <a-form + ref="registerForm" + :model="registerInfo" + class="register-form" + layout="vertical" + > + <a-form-item field="loginName" :rules="[{ required: true, message: '璇疯緭鍏ョ敤鎴峰悕!' }]" hide-label> + <a-input v-model="registerInfo.loginName" placeholder="璇疯緭鍏ョ敤鎴峰悕"> + </a-input> + </a-form-item> + + <a-form-item field="email" :rules="[{ required: true, message: '璇疯緭鍏ラ偖绠�!' }]" hide-label> + <a-input v-model="registerInfo.email" placeholder="璇疯緭鍏ラ偖绠�"> + </a-input> + </a-form-item> + + <a-form-item field="userName" :rules="[{ required: true, message: '璇疯緭鍏ュ鍚�!' }]" hide-label> + <a-input v-model="registerInfo.userName" placeholder="璇疯緭鍏ュ鍚�"> + </a-input> + </a-form-item> + + <a-form-item field="phoneNumber" :rules="[{ required: true, message: '璇疯緭鍏ョ數璇濆彿鐮�!' }]" hide-label> + <a-input v-model="registerInfo.phoneNumber" placeholder="璇疯緭鍏ョ數璇濆彿鐮�"> + </a-input> + </a-form-item> + + <a-form-item field="psw" :rules="[{ required: true, message: '璇疯緭鍏ュ瘑鐮�!' }]" hide-label> + <a-input-password v-model="registerInfo.psw" placeholder="璇疯緭鍏ュ瘑鐮�"> + </a-input-password> + </a-form-item> + + <a-space direction="vertical" size="large"> + <a-select :style="{width:'320px'}" placeholder="閫夋嫨Tenant" v-model="registerInfo.selectedTenant" allow-create> + <a-option :value="registerInfo.loginName">{{ registerInfo.loginName }}</a-option> + <a-option>1</a-option> + <a-option>2</a-option> + </a-select> + </a-space> + </a-form> + </a-modal> </template> <script lang="ts" setup> @@ -71,6 +125,7 @@ import useLoading from '@/hooks/loading'; import type { LoginData } from '@/api/user'; import { rsaPsw } from '@/utils/ras'; + import axios from 'axios'; const router = useRouter(); const { t } = useI18n(); @@ -134,6 +189,45 @@ const setRememberPassword = (value: boolean) => { loginConfig.value.rememberPassword = value; }; + + const showRegisterModal = ref(false); + const registerInfo = reactive({ + createTime: '', + deptName: '', + email: '', + loginName: '', + nickName: '', + phoneNumber: '', + psw: '', + role: '', + status: '', + userId: '', + userName: '', + }); + + const handleRegister = async () => { + const user = { + createTime: registerInfo.createTime, + deptName: registerInfo.deptName, + email: registerInfo.email, + loginName: registerInfo.loginName, + nickName: registerInfo.nickName, + phoneNumber: registerInfo.phoneNumber, + psw: registerInfo.psw, + role: registerInfo.role, + status: registerInfo.status, + userId: registerInfo.userId, + userName: registerInfo.userName, + }; + try { + const response = await axios.post('/system/sign_in', { user }); + console.log('娉ㄥ唽鎴愬姛锛�', response.data); + showRegisterModal.value = false; + } catch (error) { + console.error('娉ㄥ唽澶辫触锛�', error); + } + }; + </script> <style lang="less" scoped> @@ -170,4 +264,25 @@ color: var(--color-text-3) !important; } } + .container { + text-align: right; + padding: 1px; + } + .register-button { + display: inline-block; + padding: 5px 10px; + font-size: 13px; + color: #ffffff; + background-color: #3573f8; + border: none; + border-radius: 3px; + cursor: pointer; + transition: background-color 0.3s; + } + .register-button:hover { + background-color: #63a1ef; + } + .register-form { + width: 100%; + } </style> -- Gitblit v1.8.0