<template>
|
<div class="login-container" v-loading="clientLoading">
|
<!-- 表单盒子 -->
|
<div class="login_from_box">
|
<div class="login_from_l">
|
<div class="img_box"></div>
|
</div>
|
<div class="login_from_r">
|
<div class="row_title">
|
<img :src="dtLogo" class="logo" alt="" srcset="">
|
<p class="title">{{ $t("login.title") }}</p>
|
</div>
|
<p class="sub_title">{{ $t("login.subTitle") }}</p>
|
<!-- 登录表单 -->
|
<el-form :model="loginFromData" class="login_form">
|
<el-form-item label="">
|
<el-input v-model="loginFromData.user_no" :placeholder="$t('login.form.placeholder.account')" clearable>
|
<template #prefix>
|
<i class="iconfont icon-yonghu"></i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="">
|
<el-input v-model="loginFromData.user_password" :placeholder="$t('login.form.placeholder.pwd')" type="password" show-password>
|
<template #prefix>
|
<i class="iconfont icon-mima"></i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<div class="form_other_box">
|
<div class="form_other_box_l">
|
<el-checkbox v-model="isAutoLogin" :label="$t('login.btn.auto')" />
|
</div>
|
<el-button type="info" link @click="forgetpasswordDialog = true">{{ $t("login.btn.forgetPwd") }}</el-button>
|
</div>
|
<el-button type="primary" round style="width: 100%" @click="submit" :loading="isLoading">{{ $t("login.btn.submit") }}</el-button>
|
<!-- 中文状态下的 -->
|
<div class="policy_box">
|
<el-checkbox v-model="isPolicy"
|
:style="{ 'white-space': nowLang }"
|
>{{ $t("login.btn.policyStart")
|
}}<span class="policy_text" @click="goPolicyPage('termsOfService')">{{ $t("login.btn.termsOfService") }}</span
|
>、<span class="policy_text" @click="goPolicyPage('legalNoticesAndPrivacyPolicy')">{{
|
$t("login.btn.legalNoticesAndPrivacyPolicy")
|
}}</span></el-checkbox
|
>
|
</div>
|
<!-- 英文状态下的 -->
|
</el-form>
|
</div>
|
</div>
|
</div>
|
<!-- 忘记密码的弹出层 -->
|
<el-dialog v-model="forgetpasswordDialog" :title="$t('login.forgetPwd.title')" width="30%" center @close="dialogClose">
|
<Forgetpassword ref="fpasswordRef" @close="forgetpasswordDialogClose" />
|
</el-dialog>
|
<!-- 选择客户的弹出层 -->
|
<el-dialog v-model="selectClientDialog" :title="$t('login.clientList.title')" width="20%" center :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
|
<ClientList :data="clientData" @close="clientDialogClose" @submit="clientDialogSubmit" />
|
</el-dialog>
|
<!-- {{ formatLangElement }} -->
|
</template>
|
|
<script setup lang="ts" name="loginIndex">
|
import { reactive, ref, onMounted, computed } from "vue";
|
import { ElMessage } from "element-plus";
|
import { useI18n } from "vue-i18n";
|
import { useUser } from "/@/stores/user";
|
import { useSetting } from "/@/stores/setting";
|
import { api_get_client_list } from "/@/api/client";
|
import { LANG_VALUE } from "/@/common/enum";
|
import { useRouter } from "vue-router";
|
import logoPng from "/@/assets/images/dt_logo.png";
|
|
|
// @ts-ignore
|
import Forgetpassword from "./component/ForgetPwd/index.vue";
|
// @ts-ignore
|
import ClientList from "./component/Client/index.vue";
|
|
|
|
enum EPolicy {
|
termsOfService = "https://gb8qxc.yuque.com/ewildp/ceg57x/obvyp1?",
|
legalNoticesAndPrivacyPolicy = "https://gb8qxc.yuque.com/ewildp/ceg57x/mwg3ze?",
|
}
|
|
const { t } = useI18n();
|
const fpasswordRef = ref(null);
|
const store = useUser();
|
const storeSetting = useSetting();
|
const router = useRouter();
|
|
const dtLogo = ref(logoPng);
|
|
// 登录表单数据
|
const loginFromData: ILoginForm = reactive({
|
user_no: "",
|
user_password: "",
|
});
|
|
// 客户数据
|
const clientData = ref<IClientItem[]>([]);
|
|
// 是否自动登录
|
const isAutoLogin = ref<boolean>(false);
|
// 是否同意协议条款
|
const isPolicy = ref<boolean>(false);
|
// loading
|
const isLoading = ref<boolean>(false);
|
// 忘记密码的弹出层
|
const forgetpasswordDialog = ref<boolean>(false);
|
// 选择客户的弹出层
|
const selectClientDialog = ref<boolean>(false);
|
// 加载客户数据时的loading
|
const clientLoading = ref<boolean>(false);
|
|
|
|
|
const nowLang = computed(() => {
|
return storeSetting.language === LANG_VALUE.En ? "pre-wrap" : "nowrap";
|
});
|
|
|
/**
|
* 打开指定窗口
|
*/
|
const goPolicyPage = (name: EPolicy) => {
|
const url = (EPolicy as unknown as Record<EPolicy, string>)[name];
|
window.open(url);
|
};
|
|
|
|
const forgetpasswordDialogClose = () => {
|
forgetpasswordDialog.value = false;
|
};
|
|
const dialogClose = () => {
|
// @ts-ignore
|
fpasswordRef.value.close();
|
};
|
|
const clientDialogClose = () => {
|
selectClientDialog.value = false;
|
ElMessage.error(t("login.msg.err.init"));
|
};
|
|
|
const clientDialogSubmit = async (options: any) => {
|
try {
|
await store.clientLogin(options.clientCode, options.clientName);
|
// store.setClientName()
|
selectClientDialog.value = false;
|
ElMessage.success(t("login.msg.success.init"));
|
router.push("/index")
|
} catch (error) {
|
|
}
|
};
|
|
/**
|
* 提交表单
|
*/
|
const submit = async () => {
|
if (!loginFromData.user_no) return ElMessage.error(t("login.msg.err.account"));
|
if (!loginFromData.user_password) return ElMessage.error(t("login.msg.err.pwd"));
|
if (!isPolicy.value) return ElMessage.error(t("login.msg.err.policy"));
|
|
isLoading.value = true;
|
try {
|
const isHasManyClient = await store.login(loginFromData);
|
isLoading.value = false;
|
|
if(isHasManyClient) {
|
// 存在多个客户
|
await getClientData();
|
selectClientDialog.value = true;
|
} else {
|
// 不存在直接走下面的流程
|
ElMessage.success(t("login.msg.success.login"));
|
router.push("/index")
|
}
|
} catch (error) {
|
isLoading.value = false;
|
}
|
};
|
|
|
|
const getClientData = async () => {
|
clientLoading.value = true;
|
try {
|
const { data } = await api_get_client_list();
|
clientData.value = data.list.map((e: any) => ({
|
id: e.id,
|
code: e.code,
|
clientName: e.clientName
|
}));
|
clientLoading.value = false;
|
} catch (error) {
|
clientLoading.value = false;
|
await store.logout();
|
}
|
};
|
|
|
onMounted(async() => {
|
// 页面每次加载时都要清除token一下，保证用户必须得选完客户才能进去
|
// await store.logout();
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
@import "./index.scss";
|
|
::v-deep {
|
.login_form {
|
.el-input__wrapper {
|
border-radius: 0;
|
box-shadow: none;
|
border-bottom: 1px solid #dedede;
|
}
|
|
.el-input__prefix {
|
margin-right: 5px;
|
|
&:first-child {
|
margin-right: 3px;
|
}
|
}
|
}
|
|
// .el-checkbox {
|
// white-space: pre-wrap;
|
// }
|
|
.el-checkbox__label {
|
font-size: 14px;
|
color: #aaa;
|
}
|
|
.el-button.is-round {
|
padding: 20px 15px;
|
}
|
|
.policy_box {
|
.el-checkbox__label {
|
transform: scale(0.8) translateX(-40px);
|
}
|
|
.el-checkbox__inner {
|
border-radius: 50%;
|
overflow: hidden;
|
}
|
}
|
}
|
</style>
|
