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