|
|
@@ -1,161 +1,160 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <a-form-model ref="form" :model="model" :rules="validatorRules">
|
|
|
- <!-- IoT Edge相关 修改框架 -->
|
|
|
- <a-form-model-item required prop="username">
|
|
|
- <a-input v-model="model.username" size="large" placeholder="请输入帐户名">
|
|
|
- <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
- </a-input>
|
|
|
- </a-form-model-item>
|
|
|
- <a-form-model-item required prop="password">
|
|
|
- <a-input-password v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码">
|
|
|
- <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
- </a-input-password>
|
|
|
- </a-form-model-item>
|
|
|
+ <div>
|
|
|
+ <a-form-model ref="form" :model="model" :rules="validatorRules">
|
|
|
+ <a-form-model-item required prop="username">
|
|
|
+ <a-input v-model="model.username" size="large" placeholder="请输入帐户名 / admin">
|
|
|
+ <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
+ </a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ <a-form-model-item required prop="password">
|
|
|
+ <a-input v-model="model.password" size="large" type="password" autocomplete="false" placeholder="请输入密码 / 123456">
|
|
|
+ <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
+ </a-input>
|
|
|
+ </a-form-model-item>
|
|
|
|
|
|
- <!-- IoT Edge相关 修改框架 -->
|
|
|
- <!-- <a-row :gutter="0">
|
|
|
- <a-col :span="16">
|
|
|
- <a-form-model-item required prop="inputCode">
|
|
|
- <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
|
|
|
- <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
- </a-input>
|
|
|
- </a-form-model-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="8" style="text-align: right">
|
|
|
- <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
|
|
|
- <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
|
|
|
- </a-col>
|
|
|
- </a-row> -->
|
|
|
- </a-form-model>
|
|
|
- </div>
|
|
|
+ <!-- <a-row :gutter="0">
|
|
|
+ <a-col :span="16">
|
|
|
+ <a-form-model-item required prop="inputCode">
|
|
|
+ <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码">
|
|
|
+ <a-icon slot="prefix" type="smile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
|
|
|
+ </a-input>
|
|
|
+ </a-form-model-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" style="text-align: right">
|
|
|
+ <img v-if="requestCodeSuccess" style="margin-top: 2px;" :src="randCodeImage" @click="handleChangeCheckCode"/>
|
|
|
+ <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
|
|
|
+ </a-col>
|
|
|
+ </a-row> -->
|
|
|
+ </a-form-model>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getAction } from '@/api/manage'
|
|
|
- import Vue from 'vue'
|
|
|
- import { mapActions } from 'vuex'
|
|
|
+import { getAction } from '@/api/manage'
|
|
|
+import Vue from 'vue'
|
|
|
+import { mapActions } from 'vuex'
|
|
|
|
|
|
- export default {
|
|
|
- name: 'LoginAccount',
|
|
|
- data(){
|
|
|
- return {
|
|
|
- requestCodeSuccess: false,
|
|
|
- randCodeImage: '',
|
|
|
- currdatetime: '',
|
|
|
- loginType: 0,
|
|
|
- model:{
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- inputCode: ''
|
|
|
- },
|
|
|
- validatorRules:{
|
|
|
- username: [
|
|
|
- { required: true, message: '请输入用户名!' },
|
|
|
- { validator: this.handleUsernameOrEmail }
|
|
|
- ],
|
|
|
- password: [{
|
|
|
- required: true, message: '请输入密码!', validator: 'click'
|
|
|
- }],
|
|
|
- inputCode: [{
|
|
|
- required: true, message: '请输入验证码!'
|
|
|
- }]
|
|
|
- }
|
|
|
+export default {
|
|
|
+ name: 'LoginAccount',
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ requestCodeSuccess: false,
|
|
|
+ randCodeImage: '',
|
|
|
+ currdatetime: '',
|
|
|
+ loginType: 0,
|
|
|
+ model:{
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+ inputCode: ''
|
|
|
+ },
|
|
|
+ validatorRules:{
|
|
|
+ username: [
|
|
|
+ { required: true, message: '请输入用户名!' },
|
|
|
+ { validator: this.handleUsernameOrEmail }
|
|
|
+ ],
|
|
|
+ password: [{
|
|
|
+ required: true, message: '请输入密码!', validator: 'click'
|
|
|
+ }],
|
|
|
+ inputCode: [{
|
|
|
+ required: true, message: '请输入验证码!'
|
|
|
+ }]
|
|
|
+ }
|
|
|
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.handleChangeCheckCode();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ ...mapActions(['Login']),
|
|
|
+ /**刷新验证码*/
|
|
|
+ handleChangeCheckCode(){
|
|
|
+ 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)
|
|
|
+ this.requestCodeSuccess=false
|
|
|
+ }
|
|
|
+ }).catch(()=>{
|
|
|
+ this.requestCodeSuccess=false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 判断登录类型
|
|
|
+ handleUsernameOrEmail (rule, value, callback) {
|
|
|
+ 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 {
|
|
|
+ this.loginType = 1
|
|
|
}
|
|
|
+ callback()
|
|
|
},
|
|
|
- created() {
|
|
|
- this.handleChangeCheckCode();
|
|
|
+ /**
|
|
|
+ * 验证字段
|
|
|
+ * @param arr
|
|
|
+ * @param callback
|
|
|
+ */
|
|
|
+ validateFields(arr, callback){
|
|
|
+ let promiseArray = []
|
|
|
+ for(let item of arr){
|
|
|
+ let p = new Promise((resolve, reject) => {
|
|
|
+ this.$refs['form'].validateField(item, (err)=>{
|
|
|
+ if(!err){
|
|
|
+ resolve();
|
|
|
+ }else{
|
|
|
+ reject(err);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ promiseArray.push(p)
|
|
|
+ }
|
|
|
+ Promise.all(promiseArray).then(()=>{
|
|
|
+ callback()
|
|
|
+ }).catch(err=>{
|
|
|
+ callback(err)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ acceptUsername(username){
|
|
|
+ this.model['username'] = username
|
|
|
},
|
|
|
- methods:{
|
|
|
- ...mapActions(['Login']),
|
|
|
- /**刷新验证码*/
|
|
|
- handleChangeCheckCode(){
|
|
|
- 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)
|
|
|
- this.requestCodeSuccess=false
|
|
|
+ //账号密码登录
|
|
|
+ handleLogin(rememberMe){
|
|
|
+ this.validateFields([ 'username', 'password' ], (err)=>{
|
|
|
+ if(!err){
|
|
|
+ let loginParams = {
|
|
|
+ username: this.model.username,
|
|
|
+ password: this.model.password,
|
|
|
+ // captcha: this.model.inputCode,
|
|
|
+ checkKey: this.currdatetime,
|
|
|
+ remember_me: rememberMe,
|
|
|
}
|
|
|
- }).catch(()=>{
|
|
|
- this.requestCodeSuccess=false
|
|
|
- })
|
|
|
- },
|
|
|
- // 判断登录类型
|
|
|
- handleUsernameOrEmail (rule, value, callback) {
|
|
|
- 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 {
|
|
|
- this.loginType = 1
|
|
|
- }
|
|
|
- callback()
|
|
|
- },
|
|
|
- /**
|
|
|
- * 验证字段
|
|
|
- * @param arr
|
|
|
- * @param callback
|
|
|
- */
|
|
|
- validateFields(arr, callback){
|
|
|
- let promiseArray = []
|
|
|
- for(let item of arr){
|
|
|
- let p = new Promise((resolve, reject) => {
|
|
|
- this.$refs['form'].validateField(item, (err)=>{
|
|
|
- if(!err){
|
|
|
- resolve();
|
|
|
- }else{
|
|
|
- reject(err);
|
|
|
- }
|
|
|
- })
|
|
|
+ console.log("登录参数", loginParams)
|
|
|
+ this.Login(loginParams).then((res) => {
|
|
|
+ this.$emit('success', res.result)
|
|
|
+ }).catch((err) => {
|
|
|
+ //update-begin-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
|
|
|
+ if(err && err.code===412){
|
|
|
+ this.handleChangeCheckCode();
|
|
|
+ }
|
|
|
+ //update-end-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
|
|
|
+ this.$emit('fail', err)
|
|
|
});
|
|
|
- promiseArray.push(p)
|
|
|
+ }else{
|
|
|
+ this.$emit('validateFail')
|
|
|
}
|
|
|
- Promise.all(promiseArray).then(()=>{
|
|
|
- callback()
|
|
|
- }).catch(err=>{
|
|
|
- callback(err)
|
|
|
- })
|
|
|
- },
|
|
|
- acceptUsername(username){
|
|
|
- this.model['username'] = username
|
|
|
- },
|
|
|
- //账号密码登录
|
|
|
- handleLogin(rememberMe){
|
|
|
- this.validateFields([ 'username', 'password' ], (err)=>{
|
|
|
- if(!err){
|
|
|
- let loginParams = {
|
|
|
- username: this.model.username,
|
|
|
- password: this.model.password,
|
|
|
- // captcha: this.model.inputCode,
|
|
|
- checkKey: this.currdatetime,
|
|
|
- remember_me: rememberMe,
|
|
|
- }
|
|
|
- console.log("登录参数", loginParams)
|
|
|
- this.Login(loginParams).then((res) => {
|
|
|
- this.$emit('success', res.result)
|
|
|
- }).catch((err) => {
|
|
|
- //update-begin-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
|
|
|
- if(err && err.code===412){
|
|
|
- this.handleChangeCheckCode();
|
|
|
- }
|
|
|
- //update-end-author: taoyan date:20220425 for: 登录页面，当输入验证码错误时，验证码图片要刷新一下，而不是保持旧的验证码图片不变 #41
|
|
|
- this.$emit('fail', err)
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.$emit('validateFail')
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
</style>
|
yuhan