diff --git a/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue b/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
index e908a03..4340162 100644
--- a/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
+++ b/ant-design-vue-jeecg/src/components/layouts/UserLayoutLogin.vue
@@ -5,57 +5,44 @@
<div id="logoImg">
<img src="~@/assets/logo.png" alt="" srcset="" class="imge">
</div>
- <div id="text">
- 华恒WMS仓储管理系统
- </div>
+ <div id="text">华恒WMS仓储管理系统</div>
</div>
<div id="backgroundImg">
-
+ <img src="~@/assets/beijingtu.jpg" alt="" srcset="" class="imge"/>
</div>
<div id="copyright">
- <div id="company">
- Copyright © 2024 华恒焊接股份有限公司
- </div>
+ <div id="company">Copyright © 2024 华恒焊接股份有限公司</div>
</div>
</div>
-
<div class="right-div">
- <div id="welcome">
- 欢迎来到华恒仓储管理系统 ！
- </div>
- <a-form-model ref="form" :model="model" :rules="validatorRules">
- <a-form-model-item required prop="username">
- <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin"
- @blur="getWarehouse">
- </a-input>
- </a-form-model-item>
- <a-form-model-item required prop="password">
- <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword"
- placeholder="请输入密码">
-
- </a-input>
- </a-form-model-item>
- <a-form-model-item prop="warehouseCode">
- <a-select
- show-search
- placeholder="请选择仓库"
- option-filter-prop="label"
- v-model="model.warehouseCode" id="warehouseCode">
- <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
- item.name
- }}
- </a-select-option>
- </a-select>
- </a-form-model-item>
- <a-form-item>
- <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button" :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">
- 登 录
- </a-button>
- </a-form-item>
- </a-form-model>
- </div>
-
-
+ <div id="welcome">欢迎来到华恒仓储管理系统 ！</div>
+ <a-form-model ref="form" :model="model" :rules="validatorRules">
+ <a-form-model-item required prop="username">
+ <a-input id="name" v-model="model.username" size="default" autocomplete="off" placeholder="请输入帐户名 / admin" @blur="getWarehouse">
+ </a-input>
+ </a-form-model-item>
+ <a-form-model-item required prop="password">
+ <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
+ </a-input>
+ </a-form-model-item>
+ <a-form-model-item prop="warehouseCode">
+ <a-select
+ show-search
+ placeholder="请选择仓库"
+ option-filter-prop="label"
+ v-model="model.warehouseCode" id="warehouseCode">
+ <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
+ item.name
+ }}
+ </a-select-option>
+ </a-select>
+ </a-form-model-item>
+ <a-form-item>
+ <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
+ :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
+ </a-form-item>
+ </a-form-model>
+ </div>
<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
<login-select-tenant ref="loginSelect" @success="loginSelectOk" ></login-select-tenant>
@@ -63,19 +50,19 @@
</template>
<script>
-import RouteView from "@/components/layouts/RouteView"
-import {mixinDevice} from '@/utils/mixin.js'
-import LoginAccount from "@views/user/LoginAccount.vue";
-import {mapActions} from "vuex";
-import {getAction} from "@api/manage";
-import {getWarehouseByUserCode} from "@api/api";
-import TwoStepCaptcha from "@comp/tools/TwoStepCaptcha.vue";
-import LoginSelectTenant from "@views/user/LoginSelectTenant.vue";
-import {timeFix} from "@/utils/util";
+import RouteView from '@/components/layouts/RouteView'
+import { mixinDevice } from '@/utils/mixin.js'
+import LoginAccount from '@views/user/LoginAccount.vue'
+import { mapActions } from 'vuex'
+import { getAction } from '@api/manage'
+import { getWarehouseByUserCode } from '@api/api'
+import TwoStepCaptcha from '@comp/tools/TwoStepCaptcha.vue'
+import LoginSelectTenant from '@views/user/LoginSelectTenant.vue'
+import { timeFix } from '@/utils/util'
export default {
- name: "UserLayout",
- components: {LoginSelectTenant, TwoStepCaptcha},
+ name: 'UserLayout',
+ components: { LoginSelectTenant, TwoStepCaptcha },
data() {
return {
requestCodeSuccess: false,
@@ -91,29 +78,40 @@ export default {
model: {
username: '',
password: '',
- warehouseCode: '',
+ warehouseCode: ''
// inputCode: ''
},
validatorRules: {
username: [
- {required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请输入用户名!</span>},
- {validator: this.handleUsernameOrEmail}
+ {
+ required: true,
+ message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入用户名!</span>
+ },
+ { validator: this.handleUsernameOrEmail }
],
- password: [{
- required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请输入密码!</span>, validator: 'click'
- }],
- warehouseCode: [{
- required: true, message: <span style="color: red; font-weight: bold; margin-left: 45px;">请选择仓库!</span>, trigger: "change" , validator: 'click'
- }],
+ password: [
+ {
+ required: true,
+ message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入密码!</span>,
+ validator: 'click'
+ }
+ ],
+ warehouseCode: [
+ {
+ required: true,
+ message: <span style="color: red; font-weight: bold; margin-left: 10%;">请选择仓库!</span>,
+ trigger: 'change',
+ validator: 'click'
+ }
+ ]
}
}
},
created() {
- this.handleChangeCheckCode();
- this.getWarehouse();
+ this.handleChangeCheckCode()
+ this.getWarehouse()
},
-
methods: {
stepCaptchaCancel() {
this.Logout().then(() => {
@@ -126,10 +124,10 @@ export default {
this.loginSuccess()
},
handleSubmit() {
- this.loginBtn = true;
+ this.loginBtn = true
// if (this.customActiveKey === 'tab1') {
- // 使用账户密码登录
- this.handleLogin(this.rememberMe)
+ // 使用账户密码登录
+ this.handleLogin(this.rememberMe)
// } else {
// //手机号码登录
// this.$refs.plogin.handleLogin(this.rememberMe)
@@ -137,7 +135,7 @@ export default {
},
// 校验失败
validateFail() {
- this.loginBtn = false;
+ this.loginBtn = false
},
requestSuccess(loginResult) {
this.$refs.loginSelect.show(loginResult)
@@ -146,52 +144,54 @@ export default {
this.loginSuccess()
},
loginSuccess() {
- this.$router.push({path: "/dashboard/analysis"});
+ this.$router.push({ path: '/dashboard/analysis' })
this.$notification.success({
message: '欢迎',
- description: `${timeFix()}，欢迎回来`,
- });
+ description: `${timeFix()}，欢迎回来`
+ })
},
//登录后台失败
requestFailed(err) {
- let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
+ let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'
this.$notification['error']({
message: '登录失败',
description: description,
- duration: 4,
- });
+ duration: 4
+ })
//账户密码登录错误后更新验证码
if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
this.$refs.alogin.handleChangeCheckCode()
}
- this.loginBtn = false;
+ this.loginBtn = false
},
...mapActions(['Login']),
/**刷新验证码*/
handleChangeCheckCode() {
- this.currdatetime = new Date().getTime();
+ this.currdatetime = new Date().getTime()
// this.model.inputCode = ''
- getAction(`/sys/randomImage/${this.currdatetime}`).then(res => {
- if (res.success) {
- this.randCodeImage = res.result
- this.requestCodeSuccess = true
- } else {
- this.$message.error(res.message)
+ getAction(`/sys/randomImage/${this.currdatetime}`)
+ .then(res => {
+ if (res.success) {
+ this.randCodeImage = res.result
+ this.requestCodeSuccess = true
+ } else {
+ this.$message.error(res.message)
+ this.requestCodeSuccess = false
+ }
+ })
+ .catch(() => {
this.requestCodeSuccess = false
- }
- }).catch(() => {
- this.requestCodeSuccess = false
- })
+ })
},
getWarehouse() {
- const that = this;
- this.querySource.username = that.model.username;
- let obj = getWarehouseByUserCode(that.querySource);
- obj.then((res) => {
- that.warehouseList = res.result;
+ const that = this
+ this.querySource.username = that.model.username
+ let obj = getWarehouseByUserCode(that.querySource)
+ obj.then(res => {
+ that.warehouseList = res.result
if (this.warehouseList != null) {
- this.model.warehouseCode = this.warehouseList[0].code;
+ this.model.warehouseCode = this.warehouseList[0].code
}
})
},
@@ -222,7 +222,7 @@ export default {
// 判断登录类型
handleUsernameOrEmail(rule, value, callback) {
- const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
+ const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
if (regex.test(value)) {
this.loginType = 0
} else {
@@ -239,47 +239,51 @@ export default {
let promiseArray = []
for (let item of arr) {
let p = new Promise((resolve, reject) => {
- this.$refs['form'].validateField(item, (err) => {
+ this.$refs['form'].validateField(item, err => {
if (!err) {
- resolve();
+ resolve()
} else {
- reject(err);
+ reject(err)
}
})
- });
+ })
promiseArray.push(p)
}
- Promise.all(promiseArray).then(() => {
- callback()
- }).catch(err => {
- callback(err)
- })
+ Promise.all(promiseArray)
+ .then(() => {
+ callback()
+ })
+ .catch(err => {
+ callback(err)
+ })
},
acceptUsername(username) {
this.model['username'] = username
},
// 账号密码登录
handleLogin(rememberMe) {
- this.validateFields(['username', 'password'], (err) => {
+ this.validateFields(['username', 'password'], err => {
if (!err) {
let loginParams = {
username: this.model.username,
password: this.maskedPassword,
warehouseCode: this.model.warehouseCode,
checkKey: this.currdatetime,
- remember_me: rememberMe,
+ remember_me: rememberMe
}
- this.Login(loginParams).then((res) => {
- this.$emit('success', res.result)
- this.loginSuccess()
- }).catch((err) => {
- this.validateFail()
- this.requestFailed(err)
- this.$emit('fail', err)
- if (err.code == 499) {
- this.$router.push({path: "/user/systemTokenModal"})
- }
- });
+ this.Login(loginParams)
+ .then(res => {
+ this.$emit('success', res.result)
+ this.loginSuccess()
+ })
+ .catch(err => {
+ this.validateFail()
+ this.requestFailed(err)
+ this.$emit('fail', err)
+ if (err.code == 499) {
+ this.$router.push({ path: '/user/systemTokenModal' })
+ }
+ })
} else {
this.validateFail()
this.$emit('validateFail')
@@ -291,231 +295,234 @@ export default {
</script>
<style lang="less" scoped>
- #userLayout {
- height: 100%;
- display: flex; /* 设置flex布局 */
- width: 100%; /* 容器宽度设置为100% */
- }
- ::v-deep .ant-select-selection{
- border-width: 1px;
- border-radius: 12px;
- width: 100% !important;
- height: 100% !important;
- background-color: #fff;
- background-image: url(../../assets/cangku.png);
- padding-left: 50px; /* 留出图片的空间 */
- background-repeat: no-repeat;
- background-position: 20px center;
- background-size: 28px 28px;
- box-shadow: 2px 5px 5px #c3c3c3;
- font-size: 18px;
- }
+#userLayout {
+ height: 100%;
+ display: flex; /* 设置flex布局 */
+ width: 100%; /* 容器宽度设置为100% */
+}
+::v-deep .ant-select-selection {
+ border-width: 1px;
+ border-radius: 12px;
+ width: 100% !important;
+ height: 100% !important;
+ background-color: #fff;
+ background-image: url(../../assets/cangku.png);
+ padding-left: 50px; /* 留出图片的空间 */
+ background-repeat: no-repeat;
+ background-position: 20px center;
+ background-size: 28px 28px;
+ box-shadow: 2px 5px 5px #c3c3c3;
+ font-size: 18px;
+}
- /deep/ .ant-select-selection__rendered{
- margin-top: 8px;
- }
+/deep/ .ant-select-selection__rendered {
+ margin-top: 8px;
+}
- ///deep/ .ant-select-dropdown-menu-item-selected{
- // font-size: 18px;
- // height: 30px;
- //}
+///deep/ .ant-select-dropdown-menu-item-selected{
+// font-size: 18px;
+// height: 30px;
+//}
- .left-div {
- flex: 0 0 65%; /* 左侧div宽度为容器的70% */
- }
+.left-div {
+ flex: 0 0 65%; /* 左侧div宽度为容器的70% */
+}
- .right-div {
- flex: 0 0 35%;
- background-color: #FAFAFA;
- button.login-button {
- padding: 0 15px;
- font-size: 16px;
- height: 20px;
- width: 60%;
- }
- }
- #backgroundImg {
- //margin-top: 80px;
- height: 60%;
- //margin-left: 130px;
- background-image: url(../../assets/beijingtu.jpg);
+.right-div {
+ flex: 0 0 35%;
+ background-color: #fafafa;
+}
+#backgroundImg {
+ height: 80%;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ .imge {
+ height: 75%;
background-size: contain;
background-repeat: no-repeat;
position: relative;
- left: 9%;
- }
- #logo {
- height: 15%;
- width: 100%;
- //background-color: red;
- //margin-left: 150px;
- //margin-left: 11%;
- //margin-top: 30px;
- display: flex;
+ background-position: top center;
}
- #logoImg {
- width: 35%;
- height: 100%;
- float: right;
- position: relative;
- //background-color: yellow;
- .imge{
- width: 50%;
- height: 20%;
- position: absolute;
- right: 3%; /* 水平居右 */
- top: 50%; /* 从顶部偏移50% */
- transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
- //object-fit: contain;
- //top: 39%;
- //left: 45%;
- //object-fit: cover; /* 或 contain、fill、none、scale-down */
- //object-position: center;
- }
- }
- #text{
- height: 100%;
- width: 100%;
- font-size: 1vw;
- align-content: center;
- color: #333333;
- //margin-left: 5px;
- font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
- font-weight: bold;
- //background-color: blue;
- }
- #copyright{
- height: 40%;
- width: 100%;
- //margin-left: 820px;
- //margin-top: 100px;
- }
- #form-container{
- width: 200px; /* 设置宽度 */
- height: 50px; /* 设置高度 */
- //margin-left: 820px;
- //margin-top: 100px;
- }
- #company{
- //background-color: #0c8fcf;
- align-content: center;
- text-align: right;
- color: #AC1E2B;
- font-size: 14px;
- width: 90%;
- height: 95%;
- }
- #suggest{
- //background-color: yellow;
- //width: 350px;
- width: 100%;
- height: 25%;
- color: #666666;
- font-size: 14px;
- //text-align: center;
- }
- #welcome{
- font-size: 20px;
- margin-top: 150px;
- margin-left: 45px;
- color: #333333;
- }
- #name{
- border-width: 1px;
- border-style: solid;
- border-radius: 12px;
- width: 450px;
- height: 50px;
- margin-top: 30px;
- margin-left: 45px;
- background-image: url(../../assets/huiyuan.png);
- padding-left: 60px; /* 留出图片的空间 */
- background-repeat: no-repeat;
- background-position: 20px center;
- background-size: 26px 26px;
- font-size: 18px;
- color: #333333;
- box-shadow: 2px 5px 5px #c3c3c3;
- }
- #name::after {
- content: "";
- display: inline-block;
- width: 0;
- height: 0;
- overflow: hidden;
- }
- #name::placeholder{
- font-size: 18px;
- color: #999999;
- padding-left: 0px
- }
- #password{
- //border-color: #AC1E2B;
- border-width: 1px;
- border-style: solid;
- border-radius: 12px;
- width: 450px;
- height: 50px;
- margin-top: 10px;
- margin-left: 45px;
- background-image: url(../../assets/mima.png);
- padding-left: 60px; /* 留出图片的空间 */
- background-repeat: no-repeat;
- background-position: 20px center;
- background-size: 26px 26px;
- font-size: 18px;
- color: #333333;
- box-shadow: 2px 5px 5px #c3c3c3;
- }
- #password::after {
- content: "";
- display: inline-block;
- width: 0;
- height: 0;
- overflow: hidden;
- }
- #password::placeholder{
- font-size: 18px;
- color: #999999;
- padding-left: 0px
- }
- #warehouseCode{
- border-color: #ebf3fd;
- border-width: 1px;
- border-style: solid;
- border-radius: 12px;
- width: 450px;
- height: 50px;
- margin-top: 10px;
- margin-left: 45px;
- font-size: 16px;
- text-align: center;
- //color: #333333;
- }
- a-select {
- width: 100%;
- height: 100%;
- font-size: 16px;
- color: #333;
- background-color: #fff;
- border: 1px solid #ccc;
- border-radius: 4px;
- }
- #logIn{
- border-color: #AC1E2B;
- border-width: 1px;
- border-style: solid;
- border-radius: 12px;
- width: 450px;
- height: 50px;
- margin-top: 10px;
- margin-left: 45px;
- font-size: 26px;
- align-items: center;
- justify-content: center;
- display: flex;
- color: #ebf3fd;
- background-color: red;
+}
+#logo {
+ height: 15%;
+ width: 100%;
+ //background-color: red;
+ //margin-left: 150px;
+ //margin-left: 11%;
+ //margin-top: 30px;
+ display: flex;
+}
+#logoImg {
+ width: 35%;
+ height: 100%;
+ float: right;
+ position: relative;
+ //background-color: yellow;
+ .imge {
+ width: 60%;
+ height: 20%;
+ position: absolute;
+ right: 3%; /* 水平居右 */
+ top: 50%; /* 从顶部偏移50% */
+ transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
+ //object-fit: contain;
+ //top: 39%;
+ //left: 45%;
+ //object-fit: cover; /* 或 contain、fill、none、scale-down */
+ //object-position: center;
}
-
+}
+#text {
+ height: 100%;
+ width: 100%;
+ font-size: 1vw;
+ align-content: center;
+ color: #333333;
+ //margin-left: 5px;
+ font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
+ font-weight: bold;
+ //background-color: blue;
+}
+#copyright {
+ height: 5%;
+ width: stretch;
+ position: fixed;
+ // transform: translateX(-50%);
+ //margin-left: 820px;
+ //margin-top: 100px;
+}
+#form-container {
+ width: 200px; /* 设置宽度 */
+ height: 50px; /* 设置高度 */
+ //margin-left: 820px;
+ //margin-top: 100px;
+}
+#company {
+ align-content: center;
+ text-align: center;
+ color: #ac1e2b;
+ height: 100%;
+ width: 100%;
+ font-size: 0.9vw;
+ align-content: baseline;
+ font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
+}
+#welcome {
+ width: 85%;
+ height: 3vw;
+ margin-top: 25%;
+ margin-left: 50%;
+ transform: translateX(-48%);
+ color: #333333;
+ font-size: 1.5vw;
+ align-content: center;
+ font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
+}
+#name {
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 0.6vw;
+ width: 85%;
+ height: 3vw;
+ line-height: 3vw;
+ margin-top: 2.5vw;
+ margin-left: 8%;
+ background-image: url(../../assets/huiyuan.png);
+ padding-left: 12%; /* 留出图片的空间 */
+ background-repeat: no-repeat;
+ background-position: 20px center;
+ background-size: 26px 26px;
+ font-size: 1vw;
+ color: #333333;
+ box-shadow: 2px 5px 5px #c3c3c3;
+}
+#name::after {
+ content: '';
+ display: inline-block;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+}
+#name::placeholder {
+ font-size: 18px;
+ color: #999999;
+ padding-left: 0px;
+}
+#password {
+ //border-color: #AC1E2B;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 0.6vw;
+ width: 85%;
+ height: 3vw;
+ line-height: 3vw;
+ margin-top: 0.5vw;
+ margin-left: 8%;
+ background-image: url(../../assets/mima.png);
+ padding-left: 12%; /* 留出图片的空间 */
+ background-repeat: no-repeat;
+ background-position: 20px center;
+ background-size: 26px 26px;
+ font-size: 1vw;
+ color: #333333;
+ box-shadow: 2px 5px 5px #c3c3c3;
+}
+#password::after {
+ content: '';
+ display: inline-block;
+ width: 0;
+ height: 0;
+ overflow: hidden;
+}
+#password::placeholder {
+ font-size: 18px;
+ color: #999999;
+ padding-left: 0px;
+}
+/deep/ .ant-form-item-control{
+ line-height: 65px;
+}
+#warehouseCode {
+ border-color: #ebf3fd;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 0.6vw;
+ width: 85%;
+ height: 3vw;
+ line-height: 3vw;
+ margin-top: 0.5vw;
+ margin-left: 8%;
+ font-size: 1vw;
+ text-align: center;
+ //color: #333333;
+}
+a-select {
+ width: 100%;
+ height: 100%;
+ font-size: 16px;
+ color: #333;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+#logIn {
+ border-color: #ac1e2b;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 0.6vw;
+ width: 85%;
+ height: 3vw;
+ line-height: 3vw;
+ margin-top: 0.5vw;
+ margin-left: 8%;
+ font-size: 1.8vw;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ color: #ebf3fd;
+ background-color: red;
+ box-shadow: 2px 5px 5px #c3c3c3;
+}
</style>
\ No newline at end of file