Merge branch 'dev-lhf' into 'dev'

导航头央视修改、切换账号和登录代码分开

See merge request product-group-fe/sfy-safety-group/sfy-safety!84

src/components/Login/Login.vue

@@ -0,0 +1,12 @@
+<template>
+  <BaseLogin @success="handleSuccess" title="登录" @close="emits('close')" />
+</template>
+<script lang="ts" setup>
+  import BaseLogin from './components/BaseLogin.vue';
+
+  const emits = defineEmits(['close']);
+
+  const handleSuccess = () => {
+    window.location.reload();
+  };
+</script>

src/components/Login/SwitchAccount.vue

@@ -0,0 +1,16 @@
+<template>
+  <BaseLogin @success="handleSuccess" title="切换账号" @close="emits('close')" />
+</template>
+<script lang="ts" setup>
+  import BaseLogin from './components/BaseLogin.vue';
+  import { useRouter } from 'vue-router';
+
+  const emits = defineEmits(['close']);
+
+  const router = useRouter();
+  const handleSuccess = async () => {
+    emits('close');
+    await router.push('/');
+    window.location.reload();
+  };
+</script>

src/components/Login/components/BaseLogin.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="login-container">
+    <div class="login-form">
+      <img :src="exitIcon" alt="关闭" class="exit-icon" @click="emit('close')" />
+      <header class="login-form__header">
+        <span>{{ props.title }}</span>
+      </header>
+      <main class="login-form__main">
+        <el-form
+          ref="formRef"
+          :model="formValue"
+          label-width="auto"
+          class="login-form__form"
+          @keydown.enter="handleLogin"
+        >
+          <el-form-item prop="username" :rules="[{ required: true, message: '账号不能为空' }]">
+            <el-input
+              placeholder="请输入您的账号"
+              v-model="formValue.username"
+              type="text"
+              autocomplete="off"
+              clearable
+              class="el-input--default"
+            />
+          </el-form-item>
+          <el-form-item prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
+            <el-input
+              :placeholder="'请输入您的密码'"
+              v-model="formValue.password"
+              type="password"
+              autocomplete="off"
+              show-password
+              clearable
+              class="el-input--default"
+            />
+          </el-form-item>
+
+          <!-- <el-form-item
+            prop="code"
+            :rules="[{ required: true, message: '验证码不能为空' }]"
+            v-if="type !== 'modifyPassword'"
+          >
+            <el-input placeholder="验证码" v-model="formValue.code" clearable class="el-input--default" />
+          </el-form-item> -->
+        </el-form>
+      </main>
+      <footer class="login-form__footer">
+        <el-button class="login-form__button" @click="handleLogin">登录</el-button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import type { FormInstance } from 'element-plus';
+  import exitIcon from 'assets/svg/exit.svg';
+  import { useUserStore } from '@/store/modules/user';
+  const props = defineProps<{ title: string }>();
+
+  const userStore = useUserStore();
+
+  const formValue = reactive({
+    username: userStore.info.username,
+    password: '',
+  });
+  const emit = defineEmits<{ (e: 'close'): unknown; (e: 'success'): unknown }>();
+  const formRef = ref<FormInstance>();
+
+  const handleLogin = () => {
+    if (!formRef.value) return;
+    formRef.value.validate((valid: boolean) => {
+      if (valid) {
+        console.log('valid', formValue);
+        userStore
+          .login(formValue)
+          .then(() => {
+            emit('success');
+            // window.location.reload();
+          })
+          .catch((err) => {
+            ElMessage.error(err.message || '登录失败');
+          });
+      }
+    });
+  };
+</script>
+
+<style lang="scss" scoped>
+  .login-container {
+    @include flex-center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.42);
+    z-index: 1000;
+  }
+  .login-form {
+    position: relative;
+    width: 420px;
+    padding: 0 20px;
+    background: $white-color;
+    border-radius: 14px;
+    &__header {
+      width: 100%;
+      height: 80px;
+      font-size: 16px;
+      font-weight: 550;
+      color: #333;
+      text-align: center;
+      line-height: 80px;
+      letter-spacing: 5px;
+    }
+    &__main {
+      @include flex-center;
+      flex-direction: column;
+      gap: 20px;
+    }
+    &__code {
+      @include flex-center;
+      justify-content: space-between;
+      width: 100%;
+      height: 44px;
+      .el-input--default {
+        width: 50%;
+      }
+    }
+    &__footer {
+      width: 100%;
+      height: 66px;
+      margin-top: 18px;
+      .login-form__button {
+        width: 100%;
+        height: 44px;
+        font-size: 16px;
+        color: $white-color;
+        background-color: $primary-color;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+    }
+    .exit-icon {
+      position: absolute;
+      top: 15px;
+      right: 16px;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
+  .login-form__form {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 100%;
+  }
+  .el-input--default {
+    width: 100%;
+    height: 44px;
+    :deep(.el-input__inner) {
+      font-size: 14px;
+      color: #999;
+    }
+  }
+</style>

src/components/Nav.vue

@@ -23,22 +23,23 @@
         </el-input>
       </div>
       <div class="platform__right__login">
-        <span @click="handleLogin('login')" v-if="!userStore.info?.id">登录</span>
-        <UserInfo v-else @switchAccount="handleLogin('switchAccount')" @modifyPassword="handleUpdatePwd" />
+        <span @click="userStore.showLogin = true" v-if="!userStore.info?.id">登录</span>
+        <UserInfo v-else />
       </div>
     </div>
   </header>
   <Login v-if="userStore.showLogin" @close="userStore.showLogin = false" class="fadeIn" />
+  <SwitchAccount v-if="userStore.showSwitchAccount" @close="userStore.showSwitchAccount = false" class="fadeIn" />
   <UpdatePwd v-if="userStore.showUpdatePwd" @close="userStore.showUpdatePwd = false" class="fadeIn" />
 </template>
 
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
   import { useRouter, useRoute } from 'vue-router';
-  import { ElMessage } from 'element-plus';
   import UpdatePwd from '@/components/UpdatePwd.vue';
   import UserInfo from '@/components/UserInfo.vue';
-  import Login from '@/components/Login.vue';
+  import Login from '@/components/Login/Login.vue';
+  import SwitchAccount from '@/components/Login/SwitchAccount.vue';
   import SwitchTenant from '@/layout/components/SwitchTenant.vue';
   import { useUserStore } from '@/store/modules/user';
   import { useGlobSetting } from '@/hooks/setting';
@@ -51,21 +52,11 @@
   const activeNav = ref(NAV_LIST[0].name);
   const router = useRouter();
   const searchValue = ref('');
-  const loginType = ref<'login' | 'switchAccount'>('login');
 
   const handleSearch = () => {
     console.log('searchValue', searchValue.value);
   };
 
-  const handleLogin = (type: 'login' | 'switchAccount') => {
-    loginType.value = type;
-    userStore.showLogin = true;
-  };
-
-  const handleUpdatePwd = () => {
-    userStore.showUpdatePwd = true;
-  };
-
   const currentRoute = useRoute();
   const { title } = useGlobSetting();
 
@@ -110,13 +101,11 @@
         border: 1px solid transparent;
         border-radius: 4px;
         // transition: all 0.3s ease-in-out;
-        &.active {
+        &.active,
+        &:hover {
           background: linear-gradient(180deg, #33afff, $primary-color);
           color: $white-color;
         }
-        &:hover {
-          border-color: $primary-color;
-        }
       }
     }
   }

src/components/UserInfo.vue

@@ -7,8 +7,8 @@
     </div>
     <template #dropdown>
       <el-dropdown-menu>
-        <el-dropdown-item @click="emit('switchAccount')">切换账号</el-dropdown-item>
-        <el-dropdown-item @click="emit('modifyPassword')">修改密码</el-dropdown-item>
+        <el-dropdown-item @click="switchAccount">切换账号</el-dropdown-item>
+        <el-dropdown-item @click="showUpdatePwd">修改密码</el-dropdown-item>
         <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -21,13 +21,20 @@
   import { useUserStore } from '@/store/modules/user';
   import router from '@/router';
   const userStore = useUserStore();
-  const emit = defineEmits(['switchAccount', 'modifyPassword']);
 
   const handleLogout = async () => {
     userStore.logout();
     await router.push({ path: '/home' });
     window.location.reload();
   };
+
+  const switchAccount = () => {
+    userStore.showSwitchAccount = true;
+  };
+
+  const showUpdatePwd = () => {
+    userStore.showUpdatePwd = true;
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -45,18 +52,18 @@
     color: $text-color;
   }
   .dropdown-icon {
-    width: 25cpx;
-    height: 25cpx;
+    width: 25px;
+    height: 25px;
   }
   :deep(.el-dropdown-menu__item) {
-    padding: 4cpx 37cpx;
+    padding: 4px 37px;
     font-weight: 400;
-    font-size: 14cpx;
+    font-size: 14px;
     color: #606266;
     &:hover {
       background-color: $primary-color;
       color: $white-color;
-      border-radius: 4cpx;
+      border-radius: 4px;
     }
   }
 </style>

src/store/modules/user.ts

@@ -36,6 +36,7 @@ export interface IUserState {
   };
   showLogin: boolean;
   showUpdatePwd: boolean;
+  showSwitchAccount: boolean;
 }
 
 export const useUserStore = defineStore({
@@ -48,6 +49,7 @@ export const useUserStore = defineStore({
     info: {} as IUserState['info'],
     showLogin: false,
     showUpdatePwd: false,
+    showSwitchAccount: false,
   }),
   getters: {
     getToken(): string {

src/views/system/user/user.vue

@@ -37,7 +37,7 @@
           <el-table-column label="工号" prop="staffNo">
             <template #default="scope">
               <div>
-                <span style="margin-left: 10px">{{ scope.row.staffNo }}</span>
+                <span>{{ scope.row.staffNo }}</span>
               </div>
             </template>
           </el-table-column>