| | |
| | | <template> |
| | | <div class="login"> |
| | | <div class="img-container"> |
| | | <!-- <div class="img-container"> |
| | | <img :src="loginImg" alt=""> |
| | | </div> |
| | | <el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="on" label-position="left"> |
| | | <el-form-item prop="username"> |
| | | </div> --> |
| | | <el-form ref="loginForm" :model="loginForm" class="login-form" label-position="left"> |
| | | <el-form-item prop="loginName"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | | v-model="loginForm.loginName" |
| | | placeholder="输入用户名" |
| | | name="username" |
| | | name="loginName" |
| | | type="text" |
| | | auto-complete="on" |
| | | |
| | | > |
| | | <span v-show="isClearIconShow" slot="suffix" class="suffix-icon" @click="clearUsername"> |
| | | <svg-icon icon-class="close-circle" /> |
| | | </span> |
| | | |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="password"> |
| | |
| | | v-model="loginForm.password" |
| | | placeholder="输入密码" |
| | | name="password" |
| | | auto-complete="on" |
| | | |
| | | @keyup.enter.native="handleLogin" |
| | | > |
| | | <span slot="suffix" class="suffix-icon" :class="{eyeOpen: isOpen}" @click="showPwd"> |
| | |
| | | </el-input> |
| | | </el-form-item> |
| | | |
| | | <el-form-item> |
| | | <el-select v-model="loginForm.role" placeholder="请选择角色" size="small"> |
| | | <el-option label="角色1" value="role1"></el-option> |
| | | <el-option label="角色2" value="role2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | |
| | | <div class="user-action"> |
| | | <a @click="handleForgetPassword"> |
| | | <span>忘记密码</span> |
| | | </a> |
| | | </div> |
| | | <el-button :loading="loading" class="loginButton" type="primary" @click.native.prevent="handleLogin">登 录</el-button> |
| | | </el-form> |
| | | </div> |
| | |
| | | * @author Sky |
| | | */ |
| | | export default { |
| | | name: 'Login', |
| | | |
| | | data () { |
| | | return { |
| | | // path: '/' + process.env.VUE_APP_FACTORY_KEY + '/user/confirm-password', |
| | | // loginImg: require('@/assets/img/login-logo.png'), |
| | | loginImg: require('@/assets/login-left.jpg'), |
| | | loginForm: { // 表单数据 |
| | | username: process.env.VUE_APP_BUILD_MODE === 'production' ? '' : 'bayer_admin', |
| | | password: process.env.VUE_APP_BUILD_MODE === 'production' ? '' : '123456' |
| | | loginName: '', |
| | | password: '' |
| | | }, |
| | | passwordType: 'password', // 输入框类型 |
| | | loading: false, // 加载中 |
| | |
| | | isOpen: false // 根据状态显示不同样式类名 |
| | | } |
| | | }, |
| | | computed: { |
| | | isClearIconShow () { |
| | | return this.loginForm.username.length |
| | | } |
| | | }, |
| | | |
| | | methods: { |
| | | // 忘记密码回调 |
| | | handleForgetPassword () { |
| | | this.$alert('', '请联系公司管理员修改密码', { |
| | | confirmButtonText: '知道了', |
| | | center: true, |
| | | showClose: true |
| | | }) |
| | | }, |
| | | |
| | | // 清除用户名 |
| | | clearUsername () { |
| | | if (this.loginForm.username) { |
| | | this.loginForm.username = '' |
| | | } |
| | | }, |
| | | |
| | | // 密码显示切换 |
| | | showPwd () { |
| | | if (this.passwordType === 'password') { |
| | |
| | | |
| | | // 登录 |
| | | handleLogin () { |
| | | localStorage.setItem('userId','user001'); |
| | | localStorage.setItem('userType', this.loginForm.role); |
| | | let url = "/api/user/login"; |
| | | let params = this.loginForm; |
| | | this.$axios.get(url,{ |
| | | params |
| | | }).then(data_ => { |
| | | console.log(data_); |
| | | if(data_.data.success) { |
| | | localStorage.setItem('userId',data_.data.data.id); |
| | | localStorage.setItem('userName',data_.data.data.id); |
| | | localStorage.setItem('roleId',data_.data.data.roleCode); |
| | | localStorage.setItem('roleName',data_.data.data.roleName); |
| | | localStorage.setItem('departId',data_.data.data.departCode); |
| | | localStorage.setItem('departName',data_.data.data.departName); |
| | | this.$router.push('/'); |
| | | }else { |
| | | this.$message({message:'登陆失败', type: 'warning'}); |
| | | } |
| | | |
| | | }).catch(error =>{ |
| | | console.log(error); |
| | | }) |
| | | |
| | | |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style rel="stylesheet/scss" lang="scss"> |
| | | <style > |
| | | |
| | | </style> |