1.登录2.退出登录

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "晶格智汇",
+  "name": "晶格智汇 | 鸿蒙工业系统",
   "version": "1.0.0",
   "private": true,
   "type": "module",

src/api/auth/index.ts

@@ -51,6 +51,23 @@ export function getOrgListApi(): AxiosPromise<any[]> {
   });
 }
 
+//产线管理列表查询
+export function getProductionList(): AxiosPromise<any[]> {
+  return request({
+    url: "/api/v1/base/productionLine/list",
+    method: "post",
+    data: {},
+  });
+}
+
+// 一体机登录通过产线code获取工位信息
+export function stationListByCode(code: string): AxiosPromise<any[]> {
+  return request({
+    url: `/api/v1/base/station/getStationList/${code}`,
+    method: "get",
+  });
+}
+
 /**
  * 登录成功后获取用户字典
  */

src/api/auth/types.ts

@@ -5,11 +5,13 @@ export interface LoginData {
   /**
    * 用户名
    */
-  userName: string;
+  userName?: string;
   /**
    * 密码
    */
-  password: string;
+  password?: string;
+
+  jobNumber?: string; //工号
 
   /**
    * 验证码缓存key
@@ -21,7 +23,11 @@ export interface LoginData {
    */
   captchaCode?: string;
 
-  orgId: number;
+  orgId?: number;
+
+  proCode?: string; //产线
+
+  stationId?: string; //工位
 }
 
 /**

src/layout/components/header.vue

@@ -41,7 +41,7 @@
           <template #dropdown>
             <el-dropdown-menu>
               <el-dropdown-item command="a">Action 1</el-dropdown-item>
-              <el-dropdown-item command="b" divided>Action 2</el-dropdown-item>
+              <el-dropdown-item command="b" divided>退出登录</el-dropdown-item>
               <el-dropdown-item command="c" divided>Action 3</el-dropdown-item>
             </el-dropdown-menu>
           </template>
@@ -54,6 +54,7 @@
 <script lang="ts" setup>
 import dayjs from "dayjs";
 import type { DropdownInstance } from "element-plus";
+import { logoutApi } from "@/api/auth";
 
 const router = useRouter();
 const route = useRoute();
@@ -94,7 +95,12 @@ const commonBack = (itemValue) => {
 };
 
 const handleCommand = (command: string | number | object) => {
-  ElMessage(`click on item ${command}`);
+  if (command === "b") {
+    logoutApi().then(() => {
+      localStorage.setItem("token", "");
+      location.reload();
+    });
+  }
 };
 </script>
 
@@ -169,4 +175,21 @@ const handleCommand = (command: string | number | object) => {
     margin-top: 8px;
   }
 }
+
+:deep(.el-dropdown__popper .el-dropdown__list) {
+  width: 292px !important;
+  background: #f1f3f5;
+  box-shadow: 0px 0px 29px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 30px;
+  overflow: hidden;
+}
+
+//:deep(.el-dropdown-menu__item) {
+//  width: 200px;
+//  height: 80px;
+//  font-weight: 500;
+//  font-size: 24px;
+//  color: rgba(0, 0, 0, 0.9);
+//  text-align: center;
+//}
 </style>

src/views/login/index.vue

@@ -1,24 +1,11 @@
 <template>
   <div class="login-container">
-    <!-- 顶部 -->
-    <!-- <div class="absolute-lt flex-x-end p-3 w-full">
-      <el-switch
-        v-model="isDark"
-        inline-prompt
-        :active-icon="Moon"
-        :inactive-icon="Sunny"
-        @change="toggleTheme"
-      />
-      <lang-select class="ml-2 cursor-pointer" />
-    </div> -->
-    <!-- 登录表单 -->
-    <el-card
-      class="!border-none !rounded-4% w-100 <sm:w-85"
-      style="background-color: #a0a8b2"
-    >
-      <div class="text-center relative">
+    <el-card class="form-container">
+      <div class="login-title">
         <h2>{{ defaultSettings.title }}</h2>
-        <el-tag class="ml-2 absolute-rt">{{ defaultSettings.version }}</el-tag>
+        <div @click="showJobNumber = !showJobNumber">
+          {{ showJobNumber ? "账号密码登录" : "扫码登录" }}
+        </div>
       </div>
 
       <el-form
@@ -26,44 +13,60 @@
         :model="loginData"
         :rules="loginRules"
         class="login-form"
+        size="large"
       >
-        <!-- 用户名 -->
-        <el-form-item prop="userName">
+        <el-form-item v-if="showJobNumber" prop="jobNumber">
           <div class="flex-y-center w-full">
-            <svg-icon class="mx-2" icon-class="user" />
+            <svg-icon class="mx-2" icon-class="document" />
             <el-input
               ref="username"
-              v-model="loginData.userName"
-              :placeholder="$t('login.username')"
+              v-model="loginData.jobNumber"
               class="h-[48px]"
-              name="userName"
+              name="jobNumber"
+              placeholder="请扫码或输入工号"
               size="large"
             />
           </div>
         </el-form-item>
-
-        <!-- 密码 -->
-        <el-tooltip
-          :content="$t('login.capsLock')"
-          :visible="isCapslock"
-          placement="right"
-        >
-          <el-form-item prop="password">
+        <div v-else>
+          <!-- 用户名 -->
+          <el-form-item prop="userName">
             <div class="flex-y-center w-full">
-              <svg-icon class="mx-2" icon-class="lock" />
+              <svg-icon class="mx-2" icon-class="user" />
               <el-input
-                v-model="loginData.password"
-                :placeholder="$t('login.password')"
-                class="h-[48px] pr-2"
-                name="password"
-                show-password
+                ref="username"
+                v-model="loginData.userName"
+                class="h-[48px]"
+                name="userName"
+                placeholder="请输入用户名"
                 size="large"
-                type="password"
-                @keyup="checkCapslock"
               />
             </div>
           </el-form-item>
-        </el-tooltip>
+
+          <!-- 密码 -->
+          <el-tooltip
+            :content="$t('login.capsLock')"
+            :visible="isCapslock"
+            placement="right"
+          >
+            <el-form-item prop="password">
+              <div class="flex-y-center w-full">
+                <svg-icon class="mx-2" icon-class="lock" />
+                <el-input
+                  v-model="loginData.password"
+                  :placeholder="$t('login.password')"
+                  class="h-[48px] pr-2"
+                  name="password"
+                  show-password
+                  size="large"
+                  type="password"
+                  @keyup="checkCapslock"
+                />
+              </div>
+            </el-form-item>
+          </el-tooltip>
+        </div>
 
         <!-- 组织 -->
         <el-form-item prop="orgId">
@@ -74,7 +77,6 @@
               class="no-border"
               placeholder="请选择组织"
               size="large"
-              @keyup.enter="handleLogin"
             >
               <el-option
                 v-for="item in orgList"
@@ -86,21 +88,53 @@
           </div>
         </el-form-item>
 
+        <el-form-item prop="proCode">
+          <div class="flex-y-center w-full">
+            <svg-icon class="mx-2" icon-class="cascader" />
+            <el-select
+              v-model="loginData.proCode"
+              class="no-border"
+              placeholder="请选择产线"
+              size="large"
+            >
+              <el-option
+                v-for="item in productionList"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code"
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+
+        <el-form-item prop="stationId">
+          <div class="flex-y-center w-full">
+            <svg-icon class="mx-2" icon-class="client" />
+            <el-select
+              v-model="loginData.stationId"
+              class="no-border"
+              placeholder="请选择工位"
+              size="large"
+            >
+              <el-option
+                v-for="item in stationList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </div>
+        </el-form-item>
+
         <!-- 登录按钮 -->
         <el-button
           :loading="loading"
-          class="w-full"
+          class="login-btn"
           size="large"
           type="primary"
           @click.prevent="handleLogin"
           >{{ $t("login.login") }}
         </el-button>
-
-        <!-- 账号密码提示 -->
-        <!-- <div class="mt-10 text-sm">
-          <span>{{ $t("login.username") }}: admin</span>
-          <span class="ml-4"> {{ $t("login.password") }}: 123456</span>
-        </div> -->
       </el-form>
     </el-card>
 
@@ -113,12 +147,18 @@
 
 <script lang="ts" setup>
 import { useSettingsStore, useUserStore } from "@/store";
-import { getCaptchaApi, getOrgListApi } from "@/api/auth";
+import {
+  getCaptchaApi,
+  getOrgListApi,
+  getProductionList,
+  stationListByCode,
+} from "@/api/auth";
 import { LoginData } from "@/api/auth/types";
 import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
 import router from "@/router";
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
+import { watch } from "vue";
 // Stores
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
@@ -129,7 +169,10 @@ const { t } = useI18n();
 // Reactive states
 const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
 const icpVisible = ref(true);
-const orgList = ref([]);
+const showJobNumber = ref(false);
+const orgList = ref<any>([]);
+const productionList = ref<any>([]);
+const stationList = ref<any>([]);
 const loading = ref(false); // 按钮loading
 const isCapslock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
@@ -169,6 +212,27 @@ const loginRules = computed?.(() => {
         message: t("login.message.orgId.required"),
       },
     ],
+    proCode: [
+      {
+        required: true,
+        trigger: "blur",
+        message: "请选择产线",
+      },
+    ],
+    stationId: [
+      {
+        required: true,
+        trigger: "blur",
+        message: "请选择工位",
+      },
+    ],
+    jobNumber: [
+      {
+        required: true,
+        trigger: "blur",
+        message: "请输入工号",
+      },
+    ],
   };
 });
 
@@ -247,6 +311,20 @@ watchEffect?.(() => {
   }
 });
 
+watch(
+  () => loginData.value.proCode,
+  (newValue) => {
+    if (newValue) {
+      stationListByCode(newValue).then((data: any) => {
+        stationList.value = data.data;
+        if (stationList.value) {
+          loginData.value.stationId = stationList.value[0].id;
+        }
+      });
+    }
+  }
+);
+
 /**
  * 检查输入大小写
  */
@@ -257,6 +335,12 @@ function checkCapslock(e: any) {
 onMounted?.(() => {
   getOrgList();
   toggleTheme();
+  getProductionList().then((data: any) => {
+    productionList.value = data.data;
+    if (productionList.value) {
+      loginData.value.proCode = productionList.value[0].code;
+    }
+  });
 });
 </script>
 
@@ -269,12 +353,36 @@ html.dark .login-container {
   overflow-y: auto;
   background: url("@/assets/images/login-bg.png") no-repeat center right;
   background-size: cover;
+  position: relative;
 
   @apply wh-full flex-center;
 
   .login-form {
     padding: 30px 10px;
   }
+
+  .login-title {
+    color: white;
+    margin-left: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .form-container {
+    background: #a0a8b2;
+    border-radius: 16px;
+    width: 673px;
+    position: absolute;
+    right: 10%;
+  }
+
+  .login-btn {
+    width: 100%;
+    height: 50px;
+    border-radius: 25px;
+    margin-top: 15px;
+  }
 }
 
 .el-form-item {
@@ -301,6 +409,22 @@ html.dark .login-container {
   }
 }
 
+:deep(.el-select__placeholder) {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+:deep(.el-select__placeholder.is-transparent) {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+:deep(.el-input__inner::placeholder) {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+:deep(.el-input__inner) {
+  color: rgba(0, 0, 0, 0.9);
+}
+
 :deep(.el-select) {
   .el-select__wrapper {
     padding: 0;