From 87b07b26f33b361880bdf4505b107e83d64d8368 Mon Sep 17 00:00:00 2001
From: suixy <2277317060@qq.com>
Date: Tue, 19 May 2026 17:05:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login1.vue | 342 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 342 insertions(+)
 create mode 100644 src/views/login1.vue

diff --git a/src/views/login1.vue b/src/views/login1.vue
new file mode 100644
index 0000000..23965f8
--- /dev/null
+++ b/src/views/login1.vue
@@ -0,0 +1,342 @@
+<template>
+  <div class="login">
+    <div class="logo"></div>
+    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+      <div class="title-box">
+        <!--        <h3 class="title">{{ title }}</h3>-->
+        <!--        <lang-select />-->
+      </div>
+      <el-form-item v-if="tenantEnabled" prop="tenantId">
+        <el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" style="width: 100%">
+          <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="loginForm.username" type="text" size="large" auto-complete="off" :placeholder="proxy.$t('login.username')">
+          <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="loginForm.password"
+          type="password"
+          size="large"
+          auto-complete="off"
+          :placeholder="proxy.$t('login.password')"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="captchaEnabled" prop="code">
+        <el-input
+          v-model="loginForm.code"
+          size="large"
+          auto-complete="off"
+          :placeholder="proxy.$t('login.code')"
+          style="width: 63%"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" class="login-code-img" @click="getCode" />
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>
+      <!--      <el-form-item style="float: right">-->
+      <!--        <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">-->
+      <!--          <svg-icon icon-class="wechat" />-->
+      <!--        </el-button>-->
+      <!--        <el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">-->
+      <!--          <svg-icon icon-class="maxkey" />-->
+      <!--        </el-button>-->
+      <!--        <el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">-->
+      <!--          <svg-icon icon-class="topiam" />-->
+      <!--        </el-button>-->
+      <!--        <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">-->
+      <!--          <svg-icon icon-class="gitee" />-->
+      <!--        </el-button>-->
+      <!--        <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">-->
+      <!--          <svg-icon icon-class="github" />-->
+      <!--        </el-button>-->
+      <!--      </el-form-item>-->
+      <el-form-item style="width: 100%">
+        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
+          <span v-if="!loading">{{ proxy.$t('login.login') }}</span>
+          <span v-else>{{ proxy.$t('login.logging') }}</span>
+        </el-button>
+        <div v-if="register" style="float: right">
+          <router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright ©2025 海威物联 All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getCodeImg, getTenantList } from '@/api/login';
+import { authBinding } from '@/api/system/social/auth';
+import { useUserStore } from '@/store/modules/user';
+import { LoginData, TenantVO } from '@/api/types';
+import { to } from 'await-to-js';
+import { HttpStatus } from '@/enums/RespEnum';
+import { useI18n } from 'vue-i18n';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const title = import.meta.env.VITE_APP_TITLE;
+const userStore = useUserStore();
+const router = useRouter();
+const { t } = useI18n();
+
+const loginForm = ref<LoginData>({
+  tenantId: '000000',
+  username: '',
+  password: '',
+  rememberMe: false,
+  code: '',
+  uuid: ''
+} as LoginData);
+
+const loginRules: ElFormRules = {
+  tenantId: [{ required: true, trigger: 'blur', message: t('login.rule.tenantId.required') }],
+  username: [{ required: true, trigger: 'blur', message: t('login.rule.username.required') }],
+  password: [{ required: true, trigger: 'blur', message: t('login.rule.password.required') }],
+  code: [{ required: true, trigger: 'change', message: t('login.rule.code.required') }]
+};
+
+const codeUrl = ref('');
+const loading = ref(false);
+// 验证码开关
+const captchaEnabled = ref(true);
+// 租户开关
+const tenantEnabled = ref(true);
+
+// 注册开关
+const register = ref(false);
+const redirect = ref('/');
+const loginRef = ref<ElFormInstance>();
+// 租户列表
+const tenantList = ref<TenantVO[]>([]);
+
+watch(
+  () => router.currentRoute.value,
+  (newRoute: any) => {
+    redirect.value = newRoute.query && newRoute.query.redirect && decodeURIComponent(newRoute.query.redirect);
+  },
+  { immediate: true }
+);
+
+const handleLogin = () => {
+  loginRef.value?.validate(async (valid: boolean, fields: any) => {
+    if (valid) {
+      loading.value = true;
+      // 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码
+      if (loginForm.value.rememberMe) {
+        localStorage.setItem('tenantId', String(loginForm.value.tenantId));
+        localStorage.setItem('username', String(loginForm.value.username));
+        localStorage.setItem('password', String(loginForm.value.password));
+        localStorage.setItem('rememberMe', String(loginForm.value.rememberMe));
+      } else {
+        // 否则移除
+        localStorage.removeItem('tenantId');
+        localStorage.removeItem('username');
+        localStorage.removeItem('password');
+        localStorage.removeItem('rememberMe');
+      }
+      // 调用action的登录方法
+      const [err] = await to(userStore.login(loginForm.value));
+      if (!err) {
+        const redirectUrl = redirect.value || '/';
+        await router.push(redirectUrl);
+        loading.value = false;
+      } else {
+        loading.value = false;
+        // 重新获取验证码
+        if (captchaEnabled.value) {
+          await getCode();
+        }
+      }
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+
+/**
+ * 获取验证码
+ */
+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;
+    loginForm.value.uuid = data.uuid;
+  }
+};
+
+const getLoginData = () => {
+  const tenantId = localStorage.getItem('tenantId');
+  const username = localStorage.getItem('username');
+  const password = localStorage.getItem('password');
+  const rememberMe = localStorage.getItem('rememberMe');
+  loginForm.value = {
+    tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId,
+    username: username === null ? String(loginForm.value.username) : username,
+    password: password === null ? String(loginForm.value.password) : String(password),
+    rememberMe: rememberMe === null ? false : Boolean(rememberMe)
+  } as LoginData;
+};
+
+/**
+ * 获取租户列表
+ */
+const initTenantList = async () => {
+  const { data } = await getTenantList(false);
+  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;
+    }
+  }
+};
+
+/**
+ * 第三方登录
+ * @param type
+ */
+const doSocialLogin = (type: string) => {
+  authBinding(type, loginForm.value.tenantId).then((res: any) => {
+    if (res.code === HttpStatus.SUCCESS) {
+      // 获取授权地址跳转
+      window.location.href = res.data;
+    } else {
+      ElMessage.error(res.msg);
+    }
+  });
+};
+
+onMounted(() => {
+  getCode();
+  initTenantList();
+  getLoginData();
+});
+</script>
+
+<style lang="scss" scoped>
+.logo {
+  position: absolute;
+  top: 1vw;
+  left: 1vw;
+  width: 100px;
+  height: 76px;
+  //background-image: url('../assets/images/profile.jpg');
+  background-image: url('../assets/images/logo.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.login {
+  //display: flex;
+  //justify-content: center;
+  //align-items: center;
+  height: 100%;
+  background-image: url('../assets/images/login-background.jpg');
+  //background-size: cover;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+
+.title-box {
+  display: flex;
+
+  .title {
+    margin: 0px auto 30px auto;
+    text-align: center;
+    color: #707070;
+  }
+
+  :deep(.lang-select--style) {
+    line-height: 0;
+    color: #7483a3;
+  }
+}
+
+:deep(.el-select__wrapper) {
+  background: #0000;
+}
+
+:deep(.el-input__wrapper) {
+  background: #0000;
+}
+
+.login-form {
+  border-radius: 6px;
+  //background-color: rgba(255, 255, 255, 0.24);
+  //backdrop-filter: blur(10px);
+  //-webkit-backdrop-filter: blur(10px);
+  background: #fff;
+  width: 400px;
+  padding: 50px 50px 25px 50px;
+  border: 1px solid #fff;
+  position: absolute;
+  top: 50%;
+  right: 10%;
+  transform: translateY(-50%);
+  z-index: 1;
+  .el-input {
+    height: 40px;
+    input {
+      height: 40px;
+    }
+  }
+
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.login-code {
+  width: 33%;
+  height: 40px;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial, serif;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.login-code-img {
+  height: 40px;
+  padding-left: 12px;
+}
+</style>