12 changed files with 833 additions and 31 deletions
@ -0,0 +1,382 @@ |
|||||
|
<template> |
||||
|
<div id="userLayout"> |
||||
|
<div class="login_panle"> |
||||
|
<div class="login_panle_form" v-show="loginCard==1"> |
||||
|
<div class="login_panle_form_title"> |
||||
|
<!-- <img |
||||
|
class="login_panle_form_title_logo" |
||||
|
:src="$GIN_VUE_ADMIN.appLogo" |
||||
|
alt |
||||
|
/> --> |
||||
|
<p class="login_panle_form_title_p">恒信高科后台管理系统</p> |
||||
|
</div> |
||||
|
<el-form |
||||
|
ref="loginForm" |
||||
|
:model="loginForm" |
||||
|
:rules="rules" |
||||
|
@keyup.native.enter="submitForm" |
||||
|
> |
||||
|
<el-form-item prop="username"> |
||||
|
<el-input v-model="loginForm.username" placeholder="请输入用户名"> |
||||
|
<template #suffix> |
||||
|
<i class="el-input__icon el-icon-user" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password"> |
||||
|
<el-input |
||||
|
v-model="loginForm.password" |
||||
|
:type="lock === 'lock' ? 'password' : 'text'" |
||||
|
placeholder="请输入密码" |
||||
|
> |
||||
|
<template #suffix> |
||||
|
<i |
||||
|
:class="'el-input__icon el-icon-' + lock" |
||||
|
@click="changeLock" |
||||
|
/> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item style="position: relative" prop="captcha"> |
||||
|
<el-input |
||||
|
v-model="loginForm.captcha" |
||||
|
name="logVerify" |
||||
|
placeholder="请输入验证码" |
||||
|
style="width: 60%" |
||||
|
/> |
||||
|
<div class="vPic"> |
||||
|
<img |
||||
|
v-if="picPath" |
||||
|
:src="picPath" |
||||
|
alt="请输入验证码" |
||||
|
@click="loginVerify()" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
style="width: 46%; margin-left: 25%" |
||||
|
@click="submitForm" |
||||
|
>登 录</el-button |
||||
|
> |
||||
|
</el-form-item> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(1)"> |
||||
|
账号登录 |
||||
|
</el-col> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(2)"> |
||||
|
扫码登录 |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="login_panle_form" v-show="loginCard==2"> |
||||
|
<div class="login_panle_form_title"> |
||||
|
<!-- <img |
||||
|
class="login_panle_form_title_logo" |
||||
|
:src="$GIN_VUE_ADMIN.appLogo" |
||||
|
alt |
||||
|
/> --> |
||||
|
<p class="login_panle_form_title_p">恒信高科后台管理系统</p> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div id="weChat" style="margin-left: 13px;"></div> |
||||
|
<el-row :gutter="20"> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(1)"> |
||||
|
账号登录 |
||||
|
</el-col> |
||||
|
<el-col :span="12" style="text-align: center;color: #0082EF;" @click.native="loginType(2)"> |
||||
|
扫码登录 |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- <el-button type="primary" round @click="qyWx">授权</el-button> --> |
||||
|
</div> |
||||
|
<div class="login_panle_right" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getToken, setToken, removeToken,setKey } from '@/utils/auth' |
||||
|
import { mapActions } from 'vuex' |
||||
|
import { captcha,mylogin,mysystemlogin,scancodelogin } from '@/api/user' |
||||
|
export default { |
||||
|
name: 'Login', |
||||
|
data() { |
||||
|
const checkUsername = (rule, value, callback) => { |
||||
|
if (value.length < 5) { |
||||
|
return callback(new Error('请输入正确的用户名')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const checkPassword = (rule, value, callback) => { |
||||
|
if (value.length < 6) { |
||||
|
return callback(new Error('请输入正确的密码')) |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
loginCard:2, |
||||
|
redirect: undefined, |
||||
|
curYear: 0, |
||||
|
lock: 'lock', |
||||
|
loginForm: { |
||||
|
username: '', |
||||
|
password: '', |
||||
|
captcha: '', |
||||
|
captchaId: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
username: [{ required: true, message: '请输入工号',trigger: 'blur' }], |
||||
|
password: [{ validator: checkPassword, trigger: 'blur' }], |
||||
|
captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }, |
||||
|
{ |
||||
|
min: 5, |
||||
|
max: 6, |
||||
|
message: '验证码格式不正确', |
||||
|
trigger: 'blur', |
||||
|
}] |
||||
|
}, |
||||
|
logVerify: '', |
||||
|
picPath: '' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.getWeChat() |
||||
|
this.loginVerify() |
||||
|
this.curYear = new Date().getFullYear() |
||||
|
}, |
||||
|
watch: { |
||||
|
$route: { |
||||
|
handler: function(route) { |
||||
|
const query = route.query |
||||
|
if (query) { |
||||
|
this.redirect = query.redirect |
||||
|
this.otherQuery = this.getOtherQuery(query) |
||||
|
} |
||||
|
}, |
||||
|
immediate: true |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
...mapActions('user', ['myLoginIn']), |
||||
|
getWeChat () { |
||||
|
// 动态引入企业微信js文件 |
||||
|
const s = document.createElement('script') |
||||
|
s.type = 'text/javascript' |
||||
|
s.src = 'http://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js' |
||||
|
const wxElement = document.body.appendChild(s) |
||||
|
// 调用企业微信二维码方法 |
||||
|
wxElement.onload = function () { |
||||
|
window.WwLogin({ |
||||
|
id: 'weChat', // 需要显示的容器id |
||||
|
appid: 'ww02f310301953277a', // 公众号appid wx******* |
||||
|
agentid: '1000008', // 公众号agentid wx******* |
||||
|
scope: 'snsapi_login', // 网页默认即可 |
||||
|
redirect_uri: 'https%3A%2F%2Fwww.hxgk.group%2Fjumpapiurl%2Fscancode', // 授权成功后回调的url，需要在企业微信配置，我的方法是回调到自己的weChatBack页面 |
||||
|
state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验 |
||||
|
style: 'black', // 提供"black"、"white"可选。二维码的样式 |
||||
|
href: '' // 外部css文件url，需要https |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
loginType(a){ |
||||
|
console.log("aaa") |
||||
|
if (a==1) { |
||||
|
this.loginCard=1 |
||||
|
} |
||||
|
if (a==2) { |
||||
|
this.loginCard=2 |
||||
|
} |
||||
|
}, |
||||
|
async checkInit() { |
||||
|
const res = await checkDB() |
||||
|
if (res.code === 0) { |
||||
|
if (res.data?.needInit) { |
||||
|
this.$store.commit('user/NeedInit') |
||||
|
this.$router.push({ name: 'Init' }) |
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已配置数据库信息，无法初始化' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
// async login() { |
||||
|
// return await this.myLoginIn(this.loginForm) |
||||
|
// }, |
||||
|
qyWx(){ |
||||
|
window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww02f310301953277a&redirect_uri=https%3A%2F%2Fwww.hxgk.group%2Fjumpapiurl%2Fscancode%3Fcontroll%3Dshiyan%26id%3D123456%26num%3D654321&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect" |
||||
|
}, |
||||
|
async submitForm() { |
||||
|
this.$refs.loginForm.validate(async(v) => { |
||||
|
if (v) { |
||||
|
// const flag = await this.login() |
||||
|
const res = await scancodelogin(this.loginForm) |
||||
|
if (res.code === 0) { |
||||
|
setToken(res.data.token) |
||||
|
setKey(res.data.key) |
||||
|
console.log("res.data.userinfo") |
||||
|
console.log(res.data.userinfo) |
||||
|
// this.$store.commit('saveCurrDbSource',this.db) |
||||
|
sessionStorage.setItem('userinfo',JSON.stringify(res.data.userinfo)); |
||||
|
this.$store.commit('user/setUserInfo', res.data.userinfo) |
||||
|
this.$store.commit('user/setToken', res.data.token) |
||||
|
this.$store.commit('user/setKey', res.data.key) |
||||
|
console.log("this.$store.state.user.token") |
||||
|
console.log(this.$store.state.user.token) |
||||
|
console.log("this.$store.state.user.userInfo") |
||||
|
console.log(this.$store.state.user.userInfo) |
||||
|
console.log("this.$store.state.user.key") |
||||
|
console.log(this.$store.state.user.key) |
||||
|
// this.$store.state.变量名 |
||||
|
this.$router.push('/') |
||||
|
// this.$router.push('/') |
||||
|
this.loading = false |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
this.$message({ |
||||
|
type: 'error', |
||||
|
message: '请正确填写登录信息', |
||||
|
showClose: true |
||||
|
}) |
||||
|
this.loginVerify() |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getOtherQuery(query) { |
||||
|
return Object.keys(query).reduce((acc, cur) => { |
||||
|
if (cur !== 'redirect') { |
||||
|
acc[cur] = query[cur] |
||||
|
} |
||||
|
return acc |
||||
|
}, {}) |
||||
|
}, |
||||
|
changeLock() { |
||||
|
this.lock = this.lock === 'lock' ? 'unlock' : 'lock' |
||||
|
}, |
||||
|
loginVerify() { |
||||
|
|
||||
|
captcha({}).then((ele) => { |
||||
|
this.picPath = ele.data.picPath |
||||
|
this.loginForm.captchaId = ele.data.captchaId |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
#userLayout { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
//background-image: url("@/assets/login_background.jpg"); |
||||
|
// background-image: url("../assets/login_background.jpg"); |
||||
|
background-image: url("../../assets/404_images/login_background.jpg"); |
||||
|
background-size: cover; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
.login_panle { |
||||
|
position: absolute; |
||||
|
top: 3vh; |
||||
|
left: 2vw; |
||||
|
width: 96vw; |
||||
|
height: 94vh; |
||||
|
background-color: rgba(255, 255, 255, .8); |
||||
|
backdrop-filter: blur(5px); |
||||
|
border-radius: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-evenly; |
||||
|
.login_panle_right { |
||||
|
// background-image: url("../assets/login_left.svg"); |
||||
|
background-image: url("../../assets/404_images/login_left.svg"); |
||||
|
background-size: cover; |
||||
|
width: 40%; |
||||
|
height: 60%; |
||||
|
float: right !important; |
||||
|
} |
||||
|
.login_panle_form { |
||||
|
width: 420px; |
||||
|
background-color: #fff; |
||||
|
padding: 40px 40px 40px 40px; |
||||
|
border-radius: 10px; |
||||
|
box-shadow: 2px 3px 7px rgba(0, 0, 0, .2); |
||||
|
.login_panle_form_title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin: 30px 0; |
||||
|
.login_panle_form_title_logo { |
||||
|
width: 90px; |
||||
|
height: 72px; |
||||
|
} |
||||
|
.login_panle_form_title_p { |
||||
|
font-size: 30px; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
} |
||||
|
.vPic { |
||||
|
width: 33%; |
||||
|
height: 38px; |
||||
|
float: right !important; |
||||
|
background: #ccc; |
||||
|
img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
cursor: pointer; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.login_panle_foot { |
||||
|
position: absolute; |
||||
|
bottom: 20px; |
||||
|
.links { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.link-icon { |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
} |
||||
|
} |
||||
|
.copyright { |
||||
|
color: #777777; |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
//小屏幕不显示右侧，将登陆框居中 |
||||
|
@media (max-width: 750px) { |
||||
|
.login_panle_right { |
||||
|
display: none; |
||||
|
} |
||||
|
.login_panle { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
.login_panle_form { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* |
||||
|
powerBy : bypanghu@163.com |
||||
|
*/ |
||||
|
</style> |
||||
@ -0,0 +1,209 @@ |
|||||
|
<template> |
||||
|
<el-container> |
||||
|
<!-- 行政组织级 --> |
||||
|
<el-aside width="220px"> |
||||
|
<el-scrollbar > |
||||
|
<el-tree style="margin-top:10px" |
||||
|
:data="orglist" |
||||
|
:props="treeStruct" |
||||
|
@node-click="clickOrg" |
||||
|
></el-tree> |
||||
|
</el-scrollbar> |
||||
|
</el-aside> |
||||
|
<el-aside width="200px"> |
||||
|
<el-tree style="margin-top:10px" |
||||
|
:data="postList" |
||||
|
:props="treeStruct" |
||||
|
@node-click="clickPost" |
||||
|
></el-tree> |
||||
|
</el-aside> |
||||
|
<el-main> |
||||
|
<!--头部系统页面--> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<div> |
||||
|
<el-radio-group v-model="choiceSystem" size="medium" @change="systemChange"> |
||||
|
<el-radio-button :label="sysItem.coder" v-for="(sysItem,sysIndex) in systemList" :key="sysIndex">{{sysItem.title}}</el-radio-button> |
||||
|
</el-radio-group> |
||||
|
</div>301200 |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-scrollbar style="max-height:95%"> |
||||
|
|
||||
|
<el-table |
||||
|
:data="systemMenuList" |
||||
|
style="width: 100%;margin-bottom: 20px;" |
||||
|
row-key="id" |
||||
|
border |
||||
|
default-expand-all |
||||
|
:tree-props="{children: 'child', hasChildren: 'hasChildren'}"> |
||||
|
<el-table-column |
||||
|
label="菜单名称" |
||||
|
width="180"> |
||||
|
<template slot-scope="{ row }"> |
||||
|
<el-checkbox v-model="row.istrue" :label="row.name" @change="menuSelect(row)"></el-checkbox> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
label="操作" |
||||
|
> |
||||
|
<template slot-scope="{ row }"> |
||||
|
<el-checkbox v-model="mItem.istrue" v-for="(mItem,mIndex) in row.menuOperation" :label="mItem.name" :key="mIndex" @change="menuOperationSelect(row,mItem)"></el-checkbox> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-button type="primary" :loading="buttonLoading" @click="subewport">确定授权</el-button> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</template> |
||||
|
|
||||
|
<script>//systemaccredit |
||||
|
import { govthree, positionlist } from "@/api/personnel/post"; //行政组织相关 |
||||
|
import { getsystemlist,getSystemMenuThree } from "@/api/systemaccredit/systemapi"; //行政组织相关 |
||||
|
//岗位配权 |
||||
|
export default { |
||||
|
data () { |
||||
|
return { |
||||
|
isIndeterminate:{}, |
||||
|
isIndeterminates:{}, |
||||
|
buttonLoading:false, |
||||
|
choiceSystem:'kpi', |
||||
|
systemList:[], |
||||
|
//已选择的行政组织及岗位 |
||||
|
orgAndPost:{ |
||||
|
orgId:0, |
||||
|
postId:0 |
||||
|
}, |
||||
|
//数据树结构体 |
||||
|
treeStruct: { |
||||
|
children: "child", |
||||
|
label: "name", |
||||
|
}, |
||||
|
orglist:[], //行政组织 |
||||
|
postList:[], //岗位 |
||||
|
systemMenuList:[], //系统菜单 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 页面渲染时获取初始数据 |
||||
|
this.getOrgThree(); //行政组织 |
||||
|
this.systemInit(); //系统初始化 |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
//初始话要授权的系统 |
||||
|
async systemInit(){ |
||||
|
const from = { |
||||
|
page: 1, |
||||
|
pagesize: 100000, |
||||
|
}; |
||||
|
const res = await getsystemlist(from); |
||||
|
console.log("初始话要授权的系统----》",res.data) |
||||
|
this.systemList = res.data.list |
||||
|
if(res.data.list.length > 0){ |
||||
|
this.choiceSystem = res.data.list[0].coder |
||||
|
} |
||||
|
this.getAboutSystemMenu(); //系统菜单初始化 |
||||
|
}, |
||||
|
|
||||
|
//获取行政组织树 |
||||
|
async getOrgThree(){ |
||||
|
const res = await govthree(); |
||||
|
this.orglist = res.data |
||||
|
}, |
||||
|
//根据行政组织获取岗位 |
||||
|
clickOrg(val){ |
||||
|
this.getPost(val.id); |
||||
|
this.orgAndPost.orgId = val.id; |
||||
|
}, |
||||
|
// 获取岗位 |
||||
|
async getPost(val) { |
||||
|
const from = { |
||||
|
organization: val.toString(), |
||||
|
page: 1, |
||||
|
pagesize: 10, |
||||
|
}; |
||||
|
const res = await positionlist(from); |
||||
|
this.postList = res.data.list; |
||||
|
}, |
||||
|
//点击岗位列表 |
||||
|
clickPost(val){ |
||||
|
this.orgAndPost.postId = val.id; |
||||
|
this.getAboutSystemMenu() |
||||
|
}, |
||||
|
// |
||||
|
//选择系统 |
||||
|
systemChange(val){ |
||||
|
console.log("选择系统-----》",val) |
||||
|
|
||||
|
}, |
||||
|
//获取相关系统菜单 |
||||
|
async getAboutSystemMenu(){ |
||||
|
const from = { |
||||
|
name: this.choiceSystem, |
||||
|
ordid:this.orgAndPost.orgId.toString(), |
||||
|
postid:this.orgAndPost.postId.toString(), |
||||
|
}; |
||||
|
const res = await getSystemMenuThree(from); |
||||
|
console.log("系统菜单树-----》",res) |
||||
|
res.data.forEach(item =>{ |
||||
|
console.log("系统菜单树-----》",item) |
||||
|
}) |
||||
|
this.systemMenuList = res.data; |
||||
|
}, |
||||
|
//提交授权 |
||||
|
subewport(){ |
||||
|
this.buttonLoading = true |
||||
|
console.log("提交授权-----》",this.systemMenuList) |
||||
|
}, |
||||
|
|
||||
|
//菜单级操作 |
||||
|
menuSelect(val){ |
||||
|
console.log("菜单级操作-----》",val) |
||||
|
console.log("菜单级操作-----》",JSON.stringify(this.isIndeterminate)) |
||||
|
}, |
||||
|
//按钮级操作 |
||||
|
menuOperationSelect(val,mation){ |
||||
|
console.log("按钮级操作-----》",val,mation) |
||||
|
// this.isIndeterminate[val.parentid] = mation.istrue |
||||
|
// this.isIndeterminates[mation.parentid] = mation.istrue |
||||
|
val.istrue = mation.istrue |
||||
|
console.log("按钮级操作--1---》",val.istrue,mation.istrue,this.isIndeterminate,this.isIndeterminates) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.el-aside { |
||||
|
text-align: center; |
||||
|
height: calc(103% - 2px); |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
border-right: 1px solid rgb(220, 223, 230); |
||||
|
margin: 2px 0 0 0; |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
.el-main{ |
||||
|
height: 105%; |
||||
|
} |
||||
|
.el-container { |
||||
|
height:calc(100% - 50px); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.el-scrollbar { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.el-scrollbar__wrap { |
||||
|
overflow: hidden; |
||||
|
overflow-y: auto; |
||||
|
overflow: scroll; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue