meswork/JY1.0
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加营销系统模块

Browse Source
This commit is contained in:
hedekun
2018-11-08 08:39:42 +08:00
commit f7eb22e5bb
181 changed files with 35426 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

411
src/views/login/index.vue Normal file
View File

@@ -0,0 +1,411 @@
<template>
<div>
<div class="login-container">
<i class="login-img"/>
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
auto-complete="on"
label-position="left"
label-width="0px"
class="card-box login-form">
<h1 class="title">高精机电装备有限公司数字化工厂</h1>
<div class="line"/>
<div class="content">
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="username" />
</span>
<el-input v-model="loginForm.username" name="username" type="text" auto-complete="on" placeholder="请输入用户名" @input.native="changeUser" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"/>
</span>
<el-input
:type="pwdType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="请输入密码"
@keyup.enter.native="handleLogin"/>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
</el-form-item>
<div>
<el-checkbox v-model="loginForm.checked" class="remeberPassword">记住账号密码</el-checkbox>
<el-button type="text" style="margin-left: 224px" @click="handleEdit('form')">修改密码</el-button>
</div>
<el-button :loading="loading" class="signIn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
登录
</el-button>
<div class="tips">
<span>超级管理员</span>
<span>账号：1001</span>
<span>密码：1001</span>
</div>
<div class="tips">
<span>采购管理员</span>
<span>账号：6201</span>
<span>密码：6201</span>
</div>
<div class="tips">
<span>外协管理员</span>
<span>账号：1003</span>
<span>密码：1003</span>
</div>
<div class="tips">
<span>车间计划管理员</span>
<span>账号：2002</span>
<span>密码：2002</span>
</div>
<div class="tips">
<span>技术中心管理员</span>
<span>账号：3001</span>
<span>密码：3001</span>
</div>
<div class="tips">
<span>库存管理员</span>
<span>账号：3002</span>
<span>密码：3002</span>
</div>
<div class="tips">
<span>营销中心管理员</span>
<span>账号：4001</span>
<span>密码：4001</span>
</div>
</div>
</el-form>
</div>
<el-dialog :visible.sync="dialogFormVisible" title="修改密码" center style="min-height: 200px" width="400px">
<el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px">
<el-form-item label="考勤编号" prop="Account" style="display: inline-block">
<el-input v-model="form.Account" size="small" style="width:200px"/>
</el-form-item>
<el-form-item label="原始密码" prop="beforPassword" style="display: inline-block">
<el-input v-model="form.beforPassword" size="small" style="width:200px"/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword" style="display: inline-block">
<el-input v-model="form.newPassword" size="small" style="width:200px"/>
</el-form-item>
<el-form-item label="确认密码" prop="againPassword" style="display: inline-block">
<el-input v-model="form.againPassword" size="small" style="width:200px"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="callOff()">取消</el-button>
<el-button type="primary" size="small" @click="EditPassword('form')">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
import { editPassword } from '@/api/login'
import Cookie from 'js-cookie'
export default {
name: 'Login',
data() {
const validateValue = (rules, value, callback) => {
if (this.form.newPassword !== this.form.againPassword) {
callback(new Error('两次输入密码不同'))
} else {
callback()
}
}
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
callback(new Error('请输入正确的用户名'))
} else {
callback()
}
}
// const validatePass = (rule, value, callback) => {
// if (value.length < 5) {
// callback(new Error('密码不能小于5位'))
// } else {
// callback()
// }
// }
return {
rules: {
againPassword: [
{ required: true, message: '请输入确认密码', trigger: 'blur' },
{ required: true, trigger: 'blur', validator: validateValue }],
Account: [{ required: true, message: '请输入考勤编号', trigger: 'blur' }],
beforPassword: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }]
},
list: [],
form: {
againPassword: '',
Account: '',
beforPassword: '',
newPassword: ''
},
dialogFormVisible: false,
loginForm: {
username: '',
password: '',
checked: false
},
loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }]
// password: [{ required: true, trigger: 'blur', validator: validatePass }]
},
loading: false,
pwdType: 'password'
}
},
// 页面加载调用获取cookie值
mounted() {
this.getCookie()
},
methods: {
showPwd() {
if (this.pwdType === 'password') {
this.pwdType = ''
} else {
this.pwdType = 'password'
}
},
changeUser() {
this.loginForm.password = ''
},
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('Login', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
if (this.loginForm.checked === true) { // 传入账号名，密码，和保存天数3个参数
this.setCookie(this.loginForm.username, this.loginForm.password, this.loginForm.checked)
} else {
this.clearCookie()
}
})
},
// 设置cookie
setCookie(username, password, checked) {
Cookie.set('username', username, { expires: 7 })
Cookie.set('password', password, { expires: 7 })
Cookie.set('checked', checked, { expires: 7 })
},
// 读取 cookie
getCookie() {
this.loginForm.username = Cookie.get('username')
this.loginForm.password = Cookie.get('password')
this.loginForm.checked = Boolean(Cookie.get('checked'))
},
// 清除cookie
clearCookie() {
Cookie.remove('username')
Cookie.remove('password')
Cookie.remove('checked')
},
handleEdit() {
this.addForm('form', [this.dialogFormVisible = true])
},
callOff() {
this.dialogFormVisible = false
},
EditPassword(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
editPassword(this.form.Account, this.form.beforPassword, this.form.newPassword, 5).then(response => {
if (response.data.result[0].result === '1') {
if (response.data.output[0].返回 === '1') {
this.$message.success('修改成功')
this.dialogFormVisible = false
} else {
this.$message.error('用户名或密码不正确')
}
} else {
this.$message.error('编辑失败')
this.dialogFormVisible = false
}
})
}
})
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
.login-container {
position: fixed;
height: 100%;
width:100%;
background-color: #192045;
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #293444 inset !important;
-webkit-text-fill-color: #fff !important;
}
.login-img{
position: absolute;
width: 100%;
height: 100%;
background: url("../../../static/login.png") no-repeat;
}
input {
background: transparent;
border: 0;
-webkit-appearance: none;
border-radius: 0;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
}
.el-input {
display: inline-block;
height: 47px;
width: 85%;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: #f3b82d;
font-size: 20px!important;
vertical-align: middle;
width: 30px;
display: inline-block;
&_login {
font-size: 20px;
}
}
.title {
font-size: 22px;
line-height: 30px;
color: #ffffff;
margin: 0 auto 20px auto;
text-align: center;
font-weight: bold;
font-family: 微软雅黑Regular＆Bold;
}
.content{
width: 330px;
margin: 60px auto 0 auto;
}
.line{
width: 70%;
margin: 0 auto 25px auto;
background-color: #ffffff;
height: 1px;
}
.login-form {
position: absolute;
left: 0;
right: 0;
width: 400px;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.el-input__inner{
border: none!important;
font-size: 18px!important;
color: #29335b!important;
}
.el-form-item {
border: 1px solid #f3b82d;
background: #ffffff;
border-radius: 5px;
color: #454545;
}
/*登录button*/
.signIn{
width: 100%;
border: none;
margin-top: 20px;
border-radius: 5px;
font-size: 18px;
color:#29335b;
background: -webkit-linear-gradient(left, #f5c44f , #9fd2ab); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #f5c44f, #9fd2ab); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #f5c44f, #9fd2ab); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #f5c44f , #9fd2ab); /* 标准的语法（必须放在最后） */
}
.remeberPassword{
color: $dark_gray;
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select:none;
}
@media (min-width: 1024px) {
/*根据屏幕大小确定显示的位置*/
.login-form{
position: absolute;
left: 40%;
top: 0;
width: 600px;
}
.title{
font-size: 32px!important;
line-height: 32px;
}
.el-form-item{
width: 400px;
height: 48px;
}
.content{
width: 400px;
}
}
@media (min-width: 1281px) {
.login-form{
position: absolute;
left: 30%;
top: 6%;
width: 600px;
}
}
}
</style>
<style>
.remeberPassword .el-checkbox__inner:hover{
border: 1px solid #f3b82d;
}
.remeberPassword .el-checkbox__input.is-checked .el-checkbox__inner{
background-color: #f3b82d;
border-color: #f3b82d;
}
.remeberPassword .el-checkbox__input.is-checked+.el-checkbox__label{
color: #fff;
}
.remeberPassword .el-checkbox__input.is-focus .el-checkbox__inner{
border-color: #f3b82d;
}
.login-container input:-webkit-autofill{
-webkit-box-shadow:0 0 0 1000px #fff inset !important;
-webkit-text-fill-color: #29335b !important;
}
</style>