|
@@ -1,148 +1,155 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
<el-card class="form-container">
|
|
|
- <div class="login-title">
|
|
|
- <h2>{{ defaultSettings.title }}</h2>
|
|
|
- <div @click="showJobNumber = !showJobNumber">
|
|
|
- {{ showJobNumber ? "账号密码登录" : "扫码登录" }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <el-form
|
|
|
- ref="loginFormRef"
|
|
|
- :model="loginData"
|
|
|
- :rules="loginRules"
|
|
|
- class="login-form"
|
|
|
- size="default"
|
|
|
- >
|
|
|
- <el-form-item v-if="showJobNumber" prop="jobNumber">
|
|
|
- <div class="flex-y-center w-full">
|
|
|
- <svg-icon class="mx-2" icon-class="document" />
|
|
|
- <el-input
|
|
|
- ref="username"
|
|
|
- v-model="loginData.jobNumber"
|
|
|
- class="h-[48px]"
|
|
|
- name="jobNumber"
|
|
|
- placeholder="请扫码或输入工号"
|
|
|
- size="large"
|
|
|
- />
|
|
|
+ <el-scrollbar class="scrollbar">
|
|
|
+ <div class="login-title">
|
|
|
+ <h2>{{ defaultSettings.title }}</h2>
|
|
|
+ <div @click="showJobNumber = !showJobNumber">
|
|
|
+ {{ showJobNumber ? "账号密码登录" : "扫码登录" }}
|
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
- <div v-else>
|
|
|
- <!-- 用户名 -->
|
|
|
- <el-form-item prop="userName">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form
|
|
|
+ ref="loginFormRef"
|
|
|
+ :model="loginData"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form"
|
|
|
+ size="default"
|
|
|
+ >
|
|
|
+ <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"
|
|
|
+ v-model="loginData.jobNumber"
|
|
|
class="h-[48px]"
|
|
|
- name="userName"
|
|
|
- placeholder="请输入用户名"
|
|
|
+ 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>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 组织 -->
|
|
|
- <el-form-item prop="orgId">
|
|
|
- <div class="flex-y-center w-full">
|
|
|
- <svg-icon class="mx-2" icon-class="captcha" />
|
|
|
- <el-select
|
|
|
- v-model="loginData.orgId"
|
|
|
- class="no-border"
|
|
|
- placeholder="请选择组织"
|
|
|
- size="large"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in orgList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.deptName"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
- </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"
|
|
|
- @change="onStationChange"
|
|
|
+ <el-tooltip
|
|
|
+ :content="$t('login.capsLock')"
|
|
|
+ :visible="isCapslock"
|
|
|
+ placement="right"
|
|
|
>
|
|
|
- <el-option
|
|
|
- v-for="item in stationList"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.id"
|
|
|
- />
|
|
|
- </el-select>
|
|
|
+ <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>
|
|
|
-
|
|
|
- <!-- 登录按钮 -->
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- class="login-btn"
|
|
|
- size="large"
|
|
|
- type="primary"
|
|
|
- @click.prevent="handleLogin"
|
|
|
- >{{ $t("login.login") }}
|
|
|
- </el-button>
|
|
|
- </el-form>
|
|
|
+
|
|
|
+ <el-form-item prop="orgId">
|
|
|
+ <div class="flex-y-center w-full">
|
|
|
+ <svg-icon class="mx-2" icon-class="captcha" />
|
|
|
+ <el-select
|
|
|
+ v-model="loginData.orgId"
|
|
|
+ class="no-border"
|
|
|
+ placeholder="请选择组织"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in orgList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.deptName"
|
|
|
+ :value="item.id"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </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"
|
|
|
+ @change="onStationChange"
|
|
|
+ >
|
|
|
+ <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="login-btn"
|
|
|
+ size="large"
|
|
|
+ type="primary"
|
|
|
+ @click.prevent="handleLogin"
|
|
|
+ >{{ $t("login.login") }}
|
|
|
+ </el-button>
|
|
|
+ </el-form>
|
|
|
+ </el-scrollbar>
|
|
|
</el-card>
|
|
|
|
|
|
<!-- ICP备案 -->
|
|
|
<div v-show="icpVisible" class="absolute bottom-1 text-[10px] text-center">
|
|
|
<p>Copyright © 2022-2025 jgai.com All Rights Reserved.</p>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <svg-icon
|
|
|
+ class="activeNotice"
|
|
|
+ style="right: 20px; top: 20px; position: absolute"
|
|
|
+ icon-class="shutdown"
|
|
|
+ size="40"
|
|
|
+ @click="toExitApp"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -184,7 +191,11 @@ const loginData = ref<LoginData>({
|
|
|
userName: "",
|
|
|
password: "",
|
|
|
});
|
|
|
-
|
|
|
+const toExitApp = () => {
|
|
|
+ if (window.openHarmonyBridge && window.openHarmonyBridge.exitApp) {
|
|
|
+ window.openHarmonyBridge.exitApp("");
|
|
|
+ }
|
|
|
+};
|
|
|
const loginRules = computed?.(() => {
|
|
|
return {
|
|
|
userName: [
|
|
@@ -497,4 +508,13 @@ onMounted?.(() => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+@media (max-height: 540px) {
|
|
|
+ /* 在页面高度低于500px时应用的样式 */
|
|
|
+ .form-container {
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .scrollbar {
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|