From e1023bb3313282b00d6dcdefd5d7e30d7aaa1bfc Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期四, 30 十一月 2023 11:13:29 +0800 Subject: [PATCH] update 优化 代码中存在的警告 --- src/views/register.vue | 144 +++++++++++++++++++++-------------------------- 1 files changed, 65 insertions(+), 79 deletions(-) diff --git a/src/views/register.vue b/src/views/register.vue index 8be8327..ad78cf1 100644 --- a/src/views/register.vue +++ b/src/views/register.vue @@ -1,38 +1,20 @@ <template> <div class="register"> <el-form ref="registerRef" :model="registerForm" :rules="registerRules" class="register-form"> - <h3 class="title">RuoYi-Vue-Plus鍚庡彴绠$悊绯荤粺</h3> - <el-form-item prop="tenantId"> + <h3 class="title">RuoYi-Vue-Plus澶氱鎴风鐞嗙郴缁�</h3> + <el-form-item prop="tenantId" v-if="tenantEnabled"> <el-select v-model="registerForm.tenantId" filterable placeholder="璇烽�夋嫨/杈撳叆鍏徃鍚嶇О" style="width: 100%"> - <el-option - v-for="item in tenantList" - :key="item.tenantId" - :label="item.companyName" - :value="item.tenantId"> - </el-option> + <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option> <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template> </el-select> </el-form-item> <el-form-item prop="username"> - <el-input - v-model="registerForm.username" - type="text" - size="large" - auto-complete="off" - placeholder="璐﹀彿" - > + <el-input v-model="registerForm.username" type="text" size="large" auto-complete="off" placeholder="璐﹀彿"> <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> </el-input> </el-form-item> <el-form-item prop="password"> - <el-input - v-model="registerForm.password" - type="password" - size="large" - auto-complete="off" - placeholder="瀵嗙爜" - @keyup.enter="handleRegister" - > + <el-input v-model="registerForm.password" type="password" size="large" auto-complete="off" placeholder="瀵嗙爜" @keyup.enter="handleRegister"> <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> </el-input> </el-form-item> @@ -40,7 +22,7 @@ <el-input v-model="registerForm.confirmPassword" type="password" - size="large" + size="large" auto-complete="off" placeholder="纭瀵嗙爜" @keyup.enter="handleRegister" @@ -49,28 +31,15 @@ </el-input> </el-form-item> <el-form-item prop="code" v-if="captchaEnabled"> - <el-input - size="large" - v-model="registerForm.code" - auto-complete="off" - placeholder="楠岃瘉鐮�" - style="width: 63%" - @keyup.enter="handleRegister" - > + <el-input size="large" v-model="registerForm.code" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%" @keyup.enter="handleRegister"> <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> </el-input> <div class="register-code"> - <img :src="codeUrl" @click="getCode" class="register-code-img"/> + <img :src="codeUrl" @click="getCode" class="register-code-img" /> </div> </el-form-item> <el-form-item style="width:100%;"> - <el-button - :loading="loading" - size="large" - type="primary" - style="width:100%;" - @click.prevent="handleRegister" - > + <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleRegister"> <span v-if="!loading">娉� 鍐�</span> <span v-else>娉� 鍐� 涓�...</span> </el-button> @@ -81,19 +50,19 @@ </el-form> <!-- 搴曢儴 --> <div class="el-register-footer"> - <span>Copyright 漏 2018-2023 ruoyi.vip All Rights Reserved.</span> + <span>Copyright 漏 2018-2023 鐤媯鐨勭嫯瀛怢i All Rights Reserved.</span> </div> </div> </template> -<script setup> -import { ElMessageBox } from "element-plus"; -import { getCodeImg, register, getTenantList } from "@/api/login"; +<script setup lang="ts"> +import { getCodeImg, register, getTenantList } from '@/api/login'; +import { RegisterForm, TenantVO } from '@/api/types'; +import { to } from 'await-to-js'; const router = useRouter(); -const { proxy } = getCurrentInstance(); -const registerForm = ref({ +const registerForm = ref<RegisterForm>({ tenantId: "", username: "", password: "", @@ -103,7 +72,11 @@ userType: "sys_user" }); -const equalToPassword = (rule, value, callback) => { +// 绉熸埛寮�鍏� +const tenantEnabled = ref(true); + + +const equalToPassword = (rule: any, value: string, callback: any) => { if (registerForm.value.password !== value) { callback(new Error("涓ゆ杈撳叆鐨勫瘑鐮佷笉涓�鑷�")); } else { @@ -111,7 +84,7 @@ } }; -const registerRules = { +const registerRules: ElFormRules = { tenantId: [ { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勭鎴风紪鍙�" } ], @@ -129,59 +102,63 @@ ], code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }] }; - const codeUrl = ref(""); const loading = ref(false); const captchaEnabled = ref(true); +const registerRef = ref<ElFormInstance>(); // 绉熸埛鍒楄〃 -const tenantList = ref([]); +const tenantList = ref<TenantVO[]>([]); -function handleRegister() { - proxy.$refs.registerRef.validate(valid => { +const handleRegister = () => { + registerRef.value?.validate(async (valid: boolean) => { if (valid) { loading.value = true; - register(registerForm.value).then(res => { + const [err] = await to(register(registerForm.value)); + if (!err) { const username = registerForm.value.username; - ElMessageBox.alert("<font color='red'>鎭枩浣狅紝鎮ㄧ殑璐﹀彿 " + username + " 娉ㄥ唽鎴愬姛锛�</font>", "绯荤粺鎻愮ず", { + await ElMessageBox.alert("<font color='red'>鎭枩浣狅紝鎮ㄧ殑璐﹀彿 " + username + " 娉ㄥ唽鎴愬姛锛�</font>", "绯荤粺鎻愮ず", { dangerouslyUseHTMLString: true, type: "success", - }).then(() => { - router.push("/login"); - }).catch(() => {}); - }).catch(() => { + }); + await router.push("/login"); + } else { loading.value = false; if (captchaEnabled) { getCode(); } - }); + } } }); } -function getCode() { - getCodeImg().then(res => { - captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; - if (captchaEnabled.value) { - codeUrl.value = "data:image/gif;base64," + res.img; - registerForm.value.uuid = res.uuid; - } - }); -} +const getCode = async () => { + const res = await getCodeImg(); + const { data } = res; + captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; + if (captchaEnabled.value) { + codeUrl.value = 'data:image/gif;base64,' + data.img; + registerForm.value.uuid = data.uuid; + } +}; -function initTenantList() { - getTenantList().then(res => { - tenantList.value = res.data; +const initTenantList = async () => { + const { data } = await getTenantList(); + tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; + if (tenantEnabled.value) { + tenantList.value = data.voList; if (tenantList.value != null && tenantList.value.length !== 0) { - loginForm.value.tenantId = tenantList.value[0].tenantId; + registerForm.value.tenantId = tenantList.value[0].tenantId; } - }); + } } -getCode(); -initTenantList(); +onMounted(() => { + getCode(); + initTenantList(); +}) </script> -<style lang='scss' scoped> +<style lang="scss" scoped> .register { display: flex; justify-content: center; @@ -190,8 +167,9 @@ background-image: url("../assets/images/login-background.jpg"); background-size: cover; } + .title { - margin: 0px auto 30px auto; + margin: 0 auto 30px auto; text-align: center; color: #707070; } @@ -201,32 +179,39 @@ background: #ffffff; width: 400px; padding: 25px 25px 5px 25px; + .el-input { height: 40px; + input { height: 40px; } } + .input-icon { height: 39px; width: 14px; - margin-left: 0px; + margin-left: 0; } } + .register-tip { font-size: 13px; text-align: center; color: #bfbfbf; } + .register-code { width: 33%; height: 40px; float: right; + img { cursor: pointer; vertical-align: middle; } } + .el-register-footer { height: 40px; line-height: 40px; @@ -235,10 +220,11 @@ width: 100%; text-align: center; color: #fff; - font-family: Arial; + font-family: Arial, serif; font-size: 12px; letter-spacing: 1px; } + .register-code-img { height: 40px; padding-left: 12px; -- Gitblit v1.9.3