webSocket封装部分
This commit is contained in:
tdg930622
parent
c6f8823ad8
commit
40331ae769
84563
package-lock.json
generated
84563
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
135
package.json
135
package.json
@ -1,71 +1,72 @@
|
|||||||
{
|
{
|
||||||
"name": "project",
|
"name": "project",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"deploy": "vue-cli-service build",
|
"deploy": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"axios": "^0.27.2",
|
|
||||||
"china-location": "^2.1.0",
|
|
||||||
"core-js": "^3.6.4",
|
|
||||||
"echarts": "^5.1.1",
|
|
||||||
"element-ui": "^2.15.6",
|
|
||||||
"install": "^0.13.0",
|
|
||||||
"lodash": "^4.17.21",
|
|
||||||
"moment": "^2.25.3",
|
|
||||||
"npm": "^6.14.5",
|
|
||||||
"quill": "^1.3.7",
|
|
||||||
"quill-image-drop-module": "^1.0.3",
|
|
||||||
"quill-image-resize-module": "^3.0.0",
|
|
||||||
"sm-crypto": "^0.3.7",
|
|
||||||
"style-loader": "^2.0.0",
|
|
||||||
"trtc-sdk-v5": "^5.8.6",
|
|
||||||
"vue": "^2.6.11",
|
|
||||||
"vue-meta-info": "^0.1.7",
|
|
||||||
"vue-quill-editor": "^3.0.6",
|
|
||||||
"vue-router": "^3.1.6",
|
|
||||||
"vuex": "^3.4.0",
|
|
||||||
"vuex-persistedstate": "^4.0.0-beta.3"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@trydo/files-utils": "^0.1.19-alpha",
|
|
||||||
"@vue/cli-plugin-babel": "~4.3.0",
|
|
||||||
"@vue/cli-plugin-eslint": "~4.3.0",
|
|
||||||
"@vue/cli-service": "~4.3.0",
|
|
||||||
"babel-eslint": "^10.1.0",
|
|
||||||
"babel-plugin-component": "^1.1.1",
|
|
||||||
"babel-plugin-import": "^1.13.1",
|
|
||||||
"crypto-js": "^4.1.1",
|
|
||||||
"eslint": "^6.8.0",
|
|
||||||
"eslint-plugin-vue": "^6.2.2",
|
|
||||||
"sass": "^1.53.0",
|
|
||||||
"sass-loader": "^8.0.2",
|
|
||||||
"svg-sprite-loader": "^6.0.11",
|
|
||||||
"vue-template-compiler": "^2.6.11"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"root": true,
|
|
||||||
"env": {
|
|
||||||
"node": true
|
|
||||||
},
|
},
|
||||||
"extends": [
|
"dependencies": {
|
||||||
"plugin:vue/essential",
|
"axios": "^0.27.2",
|
||||||
"eslint:recommended"
|
"china-location": "^2.1.0",
|
||||||
],
|
"core-js": "^3.6.4",
|
||||||
"parserOptions": {
|
"echarts": "^5.1.1",
|
||||||
"parser": "babel-eslint"
|
"element-ui": "^2.15.6",
|
||||||
|
"install": "^0.13.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"moment": "^2.25.3",
|
||||||
|
"npm": "^6.14.5",
|
||||||
|
"quill": "^1.3.7",
|
||||||
|
"quill-image-drop-module": "^1.0.3",
|
||||||
|
"quill-image-resize-module": "^3.0.0",
|
||||||
|
"sm-crypto": "^0.3.7",
|
||||||
|
"style-loader": "^2.0.0",
|
||||||
|
"trtc-sdk-v5": "^5.8.6",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-meta-info": "^0.1.7",
|
||||||
|
"vue-quill-editor": "^3.0.6",
|
||||||
|
"vue-router": "^3.1.6",
|
||||||
|
"vuex": "^3.4.0",
|
||||||
|
"vuex-persistedstate": "^4.0.0-beta.3"
|
||||||
},
|
},
|
||||||
"rules": {
|
"devDependencies": {
|
||||||
"vue/no-unused-components": "off"
|
"@trydo/files-utils": "^0.1.19-alpha",
|
||||||
}
|
"@vue/cli-plugin-babel": "~4.3.0",
|
||||||
},
|
"@vue/cli-plugin-eslint": "~4.3.0",
|
||||||
"browserslist": [
|
"@vue/cli-service": "~4.3.0",
|
||||||
"> 1%",
|
"babel-eslint": "^10.1.0",
|
||||||
"last 2 versions",
|
"babel-plugin-component": "^1.1.1",
|
||||||
"not dead"
|
"babel-plugin-import": "^1.13.1",
|
||||||
]
|
"crypto-js": "^4.1.1",
|
||||||
|
"eslint": "^6.8.0",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"sass": "^1.53.0",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"svg-sprite-loader": "^6.0.11",
|
||||||
|
"vue-template-compiler": "^2.6.11",
|
||||||
|
"@stomp/stompjs": "^5.0.0"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
},
|
||||||
|
"rules": {
|
||||||
|
"vue/no-unused-components": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@ -19,6 +19,7 @@ import {TrydoFiles} from "@trydo/files-utils"
|
|||||||
// 引入全局通用自定义指令
|
// 引入全局通用自定义指令
|
||||||
import '@/assets/js/directive';
|
import '@/assets/js/directive';
|
||||||
import '@/assets/js/directiveVideo';
|
import '@/assets/js/directiveVideo';
|
||||||
|
import stompSocket from "./utils/stompSocket"
|
||||||
|
|
||||||
|
|
||||||
Vue.use(ElementUI);
|
Vue.use(ElementUI);
|
||||||
@ -34,6 +35,7 @@ Vue.prototype.$verify = verify;
|
|||||||
Vue.prototype.$clickThrottle = clickThrottle;
|
Vue.prototype.$clickThrottle = clickThrottle;
|
||||||
Vue.prototype.$echarts = echarts;
|
Vue.prototype.$echarts = echarts;
|
||||||
Vue.prototype.$TrydoFiles = TrydoFiles;
|
Vue.prototype.$TrydoFiles = TrydoFiles;
|
||||||
|
Vue.prototype.$stompSocket = stompSocket;
|
||||||
|
|
||||||
// vue使用vue-meta-info来动态设置标题
|
// vue使用vue-meta-info来动态设置标题
|
||||||
Vue.use(MetaInfo)
|
Vue.use(MetaInfo)
|
||||||
|
|||||||
@ -1,390 +1,418 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-wrap">
|
<div class="login-wrap">
|
||||||
<div class="login-logo">
|
<div class="login-logo">
|
||||||
<img src="../../assets/image/login-logo.png" height="40" alt="" >
|
<img src="../../assets/image/login-logo.png" height="40" alt="">
|
||||||
</div>
|
|
||||||
<div class="login-box">
|
|
||||||
<div class="login-content flex-column-center">
|
|
||||||
<div class="logo-wrap flex-row-center align-items-center">
|
|
||||||
<div class="f32 color-text-regular">欢迎登录</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex-column-center width100">
|
|
||||||
<el-tabs class="zd-el-tabs-custom p-v-24"
|
|
||||||
v-model="loginWay" @tab-click="handleChangeLoginWay">
|
|
||||||
<el-tab-pane label="短信登录" name="phone"></el-tab-pane>
|
|
||||||
<el-tab-pane label="账号登录" name="account"></el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<!--通过手机验证码登录-->
|
|
||||||
<el-form v-if="loginWay === 'phone'"
|
|
||||||
:model="ruleForm" :rules="rules"
|
|
||||||
ref="ruleForm" label-width="0"
|
|
||||||
class="width100">
|
|
||||||
<el-form-item label="" prop="telephone">
|
|
||||||
<el-input v-model.trim="ruleForm.telephone" placeholder="请输入手机号" maxLength="11"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="" prop="smsCode">
|
|
||||||
<div class="position-r">
|
|
||||||
<el-input v-model.trim="ruleForm.smsCode" maxLength="6"
|
|
||||||
placeholder="请输入验证码" class="login-sms-code"></el-input>
|
|
||||||
|
|
||||||
<div class="login-sms-code-btn position-a flex-row-center align-items-center">
|
|
||||||
<el-divider direction="vertical"></el-divider>
|
|
||||||
<el-button type="text" @click="handleGetMsgCode"
|
|
||||||
:disabled="codeBtnDisabled">
|
|
||||||
<div style="width: 110px">{{codeBtnText}}</div>
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex mt-24">
|
|
||||||
<el-button class="flex-fill" type="primary" @click="handleLoginByPhone">登录</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
|
|
||||||
<!--通过账号密码登录-->
|
|
||||||
<el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="width100 mt-30 pt-5">
|
|
||||||
<el-form-item label="" prop="account">
|
|
||||||
<el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="" prop="password">
|
|
||||||
<el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18" type="password"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<div class="flex mt-24">
|
|
||||||
<el-button class="flex-fill" type="primary" @click="handleLoginByAccount">登录</el-button>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="login_footer_ad flex-column-center align-items-center">
|
|
||||||
<div class="f12 color-86909C pt-8">
|
|
||||||
<span class="pl-8">Copyright © {{$util.getToyear()}} 法智数科 版权所有</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="login-box">
|
||||||
|
<div class="login-content flex-column-center">
|
||||||
|
<div class="logo-wrap flex-row-center align-items-center">
|
||||||
|
<div class="f32 color-text-regular">欢迎登录</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex-column-center width100">
|
||||||
|
<el-tabs class="zd-el-tabs-custom p-v-24"
|
||||||
|
v-model="loginWay" @tab-click="handleChangeLoginWay">
|
||||||
|
<el-tab-pane label="短信登录" name="phone"></el-tab-pane>
|
||||||
|
<el-tab-pane label="账号登录" name="account"></el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
|
<!--通过手机验证码登录-->
|
||||||
|
<el-form v-if="loginWay === 'phone'"
|
||||||
|
:model="ruleForm" :rules="rules"
|
||||||
|
ref="ruleForm" label-width="0"
|
||||||
|
class="width100">
|
||||||
|
<el-form-item label="" prop="telephone">
|
||||||
|
<el-input v-model.trim="ruleForm.telephone" placeholder="请输入手机号" maxLength="11"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" prop="smsCode">
|
||||||
|
<div class="position-r">
|
||||||
|
<el-input v-model.trim="ruleForm.smsCode" maxLength="6"
|
||||||
|
placeholder="请输入验证码" class="login-sms-code"></el-input>
|
||||||
|
|
||||||
|
<div class="login-sms-code-btn position-a flex-row-center align-items-center">
|
||||||
|
<el-divider direction="vertical"></el-divider>
|
||||||
|
<el-button type="text" @click="handleGetMsgCode"
|
||||||
|
:disabled="codeBtnDisabled">
|
||||||
|
<div style="width: 110px">{{codeBtnText}}</div>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex mt-24">
|
||||||
|
<el-button class="flex-fill" type="primary" @click="handleLoginByPhone">登录</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<!--通过账号密码登录-->
|
||||||
|
<el-form v-if="loginWay === 'account'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0"
|
||||||
|
class="width100 mt-30 pt-5">
|
||||||
|
<el-form-item label="" prop="account">
|
||||||
|
<el-input v-model.trim="ruleForm.account" placeholder="请输入手机号/账号" maxLength="18"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" prop="password">
|
||||||
|
<el-input v-model.trim="ruleForm.password" placeholder="请输入密码" maxLength="18"
|
||||||
|
type="password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div class="flex mt-24">
|
||||||
|
<el-button class="flex-fill" type="primary" @click="handleLoginByAccount">登录</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login_footer_ad flex-column-center align-items-center">
|
||||||
|
<div class="f12 color-86909C pt-8">
|
||||||
|
<span class="pl-8">Copyright © {{$util.getToyear()}} 法智数科 版权所有</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import socketClass from "../../utils/stompSocket";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
const validatePhone = (rule,value,callback)=>{
|
const validatePhone = (rule, value, callback) => {
|
||||||
if (!value){
|
if (!value) {
|
||||||
callback(new Error('请输入11位手机号码'));
|
callback(new Error('请输入11位手机号码'));
|
||||||
|
}
|
||||||
|
//使用正则表达式进行验证手机号码
|
||||||
|
else if (!/^1[3456789]\d{9}$/.test(value)) {
|
||||||
|
callback(new Error('手机号不正确！'));
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
loginWay: 'phone',
|
||||||
|
qrCodeSrc: '',
|
||||||
|
qrCodeInfo: {},
|
||||||
|
qrFail: false, // true-二维码失效
|
||||||
|
strKey: 'trydotec',
|
||||||
|
codeBtnText: '获取验证码',
|
||||||
|
codeBtnDisabled: false,
|
||||||
|
ruleForm: {
|
||||||
|
telephone: '',
|
||||||
|
account: '18381082759',
|
||||||
|
password: 'trydo@123456',
|
||||||
|
smsCode: '',
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
telephone: [
|
||||||
|
{validator: validatePhone, trigger: 'blur'}
|
||||||
|
],
|
||||||
|
smsCode: [
|
||||||
|
{required: true, message: '请输入短信验证码', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
account: [
|
||||||
|
{required: true, message: '请输入手机号', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
password: [
|
||||||
|
{required: true, message: '请输入密码', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
timer: null,
|
||||||
|
outTime: 60
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleLoginByPhone() {
|
||||||
|
this.$refs.ruleForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
|
||||||
|
let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
|
||||||
|
let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
|
||||||
|
let formData = {
|
||||||
|
'phone': telephone,
|
||||||
|
'code': smsCode,
|
||||||
|
'type': 2,
|
||||||
|
'platform': 2
|
||||||
|
}
|
||||||
|
this.$fetchApi.login(formData).then(res => {
|
||||||
|
sessionStorage.setItem('token', res.token)
|
||||||
|
this.$store.commit('setToken', res.token)
|
||||||
|
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
|
||||||
|
this.$store.commit('setUserInfo', res.user)
|
||||||
|
if (res.user.resources.length > 0) {
|
||||||
|
let url = "/workbench";
|
||||||
|
// let data= res.user.resources[0].children[0]
|
||||||
|
// if(data.children.length>0){
|
||||||
|
// url = data.children[0].url
|
||||||
|
// }else{
|
||||||
|
// url = data.url
|
||||||
|
// }
|
||||||
|
this.$store.commit('setRoutes', url)
|
||||||
|
this.$router.push(url)
|
||||||
|
} else {
|
||||||
|
this.$message.warning('未赋予数据权限！')
|
||||||
}
|
}
|
||||||
//使用正则表达式进行验证手机号码
|
})
|
||||||
else if (!/^1[3456789]\d{9}$/.test(value)){
|
|
||||||
callback(new Error('手机号不正确！'));
|
|
||||||
}else{
|
|
||||||
callback()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
loginWay: 'phone',
|
|
||||||
qrCodeSrc: '',
|
|
||||||
qrCodeInfo: {},
|
|
||||||
qrFail: false, // true-二维码失效
|
|
||||||
strKey: 'trydotec',
|
|
||||||
codeBtnText: '获取验证码',
|
|
||||||
codeBtnDisabled: false,
|
|
||||||
ruleForm: {
|
|
||||||
telephone: '',
|
|
||||||
account: '18381082759',
|
|
||||||
password: 'trydo@123456',
|
|
||||||
smsCode: '',
|
|
||||||
},
|
|
||||||
rules: {
|
|
||||||
telephone: [
|
|
||||||
{ validator: validatePhone, trigger: 'blur' }
|
|
||||||
],
|
|
||||||
smsCode: [
|
|
||||||
{ required: true, message: '请输入短信验证码', trigger: 'blur' }
|
|
||||||
],
|
|
||||||
account: [
|
|
||||||
{ required: true, message: '请输入手机号', trigger: 'blur' }
|
|
||||||
],
|
|
||||||
password: [
|
|
||||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
|
||||||
],
|
|
||||||
},
|
|
||||||
timer: null,
|
|
||||||
outTime: 60
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleLoginByPhone() {
|
|
||||||
this.$refs.ruleForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
|
|
||||||
let telephone = this.$util.encryptByDES(this.strKey, this.ruleForm.telephone)
|
|
||||||
let smsCode = this.$util.encryptByDES(this.strKey, this.ruleForm.smsCode)
|
|
||||||
let formData = {
|
|
||||||
'phone':telephone,
|
|
||||||
'code':smsCode,
|
|
||||||
'type':2,
|
|
||||||
'platform':2
|
|
||||||
}
|
|
||||||
this.$fetchApi.login(formData).then(res => {
|
|
||||||
sessionStorage.setItem('token', res.token)
|
|
||||||
this.$store.commit('setToken', res.token)
|
|
||||||
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
|
|
||||||
this.$store.commit('setUserInfo', res.user)
|
|
||||||
if(res.user.resources.length > 0){
|
|
||||||
let url = "/workbench";
|
|
||||||
// let data= res.user.resources[0].children[0]
|
|
||||||
// if(data.children.length>0){
|
|
||||||
// url = data.children[0].url
|
|
||||||
// }else{
|
|
||||||
// url = data.url
|
|
||||||
// }
|
|
||||||
this.$store.commit('setRoutes', url)
|
|
||||||
this.$router.push(url)
|
|
||||||
}else{
|
|
||||||
this.$message.warning('未赋予数据权限！')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleLoginByAccount() {
|
|
||||||
this.$refs.ruleForm.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
|
|
||||||
this.$store.commit('setPassword', this.rules.password)
|
|
||||||
let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
|
|
||||||
let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
|
|
||||||
let formData = {
|
|
||||||
'username':username,
|
|
||||||
'password':password,
|
|
||||||
'type':1,
|
|
||||||
'platform':2
|
|
||||||
}
|
|
||||||
this.$fetchApi.login(formData).then(res => {
|
|
||||||
|
|
||||||
sessionStorage.setItem('token', res.token)
|
|
||||||
this.$store.commit('setToken', res.token)
|
|
||||||
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
|
|
||||||
this.$store.commit('setUserInfo', res.user)
|
|
||||||
|
|
||||||
if(res.user.resources.length > 0){
|
|
||||||
let url = "/workbench";
|
|
||||||
// let data= res.user.resources[0].children[0]
|
|
||||||
// if(data.children.length>0){
|
|
||||||
// url = data.children[0].url
|
|
||||||
// }else{
|
|
||||||
// url = data.url
|
|
||||||
// }
|
|
||||||
this.$store.commit('setRoutes', url)
|
|
||||||
this.$router.push(url)
|
|
||||||
}else{
|
|
||||||
this.$message.warning('未赋予数据权限！')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 获取短信验证码
|
|
||||||
handleGetMsgCode() {
|
|
||||||
// form为表单名字并ref="form"; prop 换成你想监听的prop字段
|
|
||||||
this.$refs.ruleForm.validateField('telephone', (errMsg) => {
|
|
||||||
if (!errMsg) {
|
|
||||||
// 验证成功，获取短信验证码
|
|
||||||
// 防止重复点击
|
|
||||||
if(!this.$clickThrottle()) { return }
|
|
||||||
this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {
|
|
||||||
|
|
||||||
this.codeBtnDisabled = true
|
|
||||||
if (!this.timer) {
|
|
||||||
this.timer = setInterval(() => {
|
|
||||||
this.codeBtnText = this.outTime + 's 再次获取'
|
|
||||||
this.outTime = this.outTime - 1
|
|
||||||
if (this.outTime <= 0) {
|
|
||||||
// 倒计时结束，重置时间器clearInterval(this.timer)
|
|
||||||
clearInterval(this.timer)
|
|
||||||
this.codeBtnText = '获取短信验证码'
|
|
||||||
this.outTime = 60
|
|
||||||
this.timer = null
|
|
||||||
this.codeBtnDisabled = false
|
|
||||||
}
|
|
||||||
}, 1000)
|
|
||||||
// 每秒执行一次
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleChangeLoginWay(tab, event) {
|
|
||||||
if(this.$refs.ruleForm) {
|
|
||||||
this.$refs.ruleForm.clearValidate();
|
|
||||||
}
|
|
||||||
if(tab && typeof tab === 'string') {
|
|
||||||
this.loginWay = type
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// if('phone,account'.indexOf(this.loginWay) !== -1) {
|
|
||||||
// this.loginWay = 'qrCode'
|
|
||||||
// }else{
|
|
||||||
// this.loginWay = 'phone'
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if(this.loginWay === 'qrCode') {
|
|
||||||
// // 生成二维码
|
|
||||||
// this.getQRCode()
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
getQRCode() {
|
|
||||||
this.qrFail = false
|
|
||||||
this.$fetchApi.getLoginQRCode().then(res => {
|
|
||||||
this.qrCodeInfo = res
|
|
||||||
this.qrCodeSrc = res.qrCode
|
|
||||||
this.loginByScanCode()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
loginByScanCode() {
|
|
||||||
let timeNum = 0
|
|
||||||
let scanCodeTimer = setInterval(() => {
|
|
||||||
|
|
||||||
if (timeNum > 200) {
|
|
||||||
clearInterval(scanCodeTimer);
|
|
||||||
this.qrFail = true
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
|
|
||||||
this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
|
|
||||||
|
|
||||||
if(res.status=='INVALID'){
|
|
||||||
this.qrFail = true
|
|
||||||
clearInterval(scanCodeTimer);
|
|
||||||
}
|
|
||||||
if(res.status=='SUCCESS') {
|
|
||||||
// 登录成功
|
|
||||||
this.$store.commit('setToken', res.token)
|
|
||||||
this.$store.commit('setRoutes', JSON.parse(res.perms))
|
|
||||||
this.$router.push('/')
|
|
||||||
clearInterval(scanCodeTimer);
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
this.qrFail = true
|
|
||||||
clearInterval(scanCodeTimer);
|
|
||||||
})
|
|
||||||
|
|
||||||
}
|
|
||||||
timeNum ++;
|
|
||||||
}, 1500);
|
|
||||||
},
|
|
||||||
resetForm(formName) {
|
|
||||||
this.$refs[formName].resetFields();
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleLoginByAccount() {
|
||||||
|
this.$refs.ruleForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
|
||||||
|
this.$store.commit('setPassword', this.rules.password)
|
||||||
|
let username = this.$util.encryptByDES(this.strKey, this.ruleForm.account)
|
||||||
|
let password = this.$util.encryptByDES(this.strKey, this.ruleForm.password)
|
||||||
|
let formData = {
|
||||||
|
'username': username,
|
||||||
|
'password': password,
|
||||||
|
'type': 1,
|
||||||
|
'platform': 2
|
||||||
|
}
|
||||||
|
this.$fetchApi.login(formData).then(res => {
|
||||||
|
|
||||||
|
sessionStorage.setItem('token', res.token)
|
||||||
|
this.$store.commit('setToken', res.token)
|
||||||
|
sessionStorage.setItem('userInfo', JSON.stringify(res.user))
|
||||||
|
this.$store.commit('setUserInfo', res.user)
|
||||||
|
|
||||||
|
if (res.user.resources.length > 0) {
|
||||||
|
let url = "/workbench";
|
||||||
|
// let data= res.user.resources[0].children[0]
|
||||||
|
// if(data.children.length>0){
|
||||||
|
// url = data.children[0].url
|
||||||
|
// }else{
|
||||||
|
// url = data.url
|
||||||
|
// }
|
||||||
|
this.$store.commit('setRoutes', url)
|
||||||
|
this.$router.push(url)
|
||||||
|
this.$stompSocket.initStomp(a => this.socketSucc(a), b => this.socketErr(b));
|
||||||
|
} else {
|
||||||
|
this.$message.warning('未赋予数据权限！')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取短信验证码
|
||||||
|
handleGetMsgCode() {
|
||||||
|
// form为表单名字并ref="form"; prop 换成你想监听的prop字段
|
||||||
|
this.$refs.ruleForm.validateField('telephone', (errMsg) => {
|
||||||
|
if (!errMsg) {
|
||||||
|
// 验证成功，获取短信验证码
|
||||||
|
// 防止重复点击
|
||||||
|
if (!this.$clickThrottle()) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.$fetchApi.sendVerifyCode(this.ruleForm.telephone).then(res => {
|
||||||
|
|
||||||
|
this.codeBtnDisabled = true
|
||||||
|
if (!this.timer) {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.codeBtnText = this.outTime + 's 再次获取'
|
||||||
|
this.outTime = this.outTime - 1
|
||||||
|
if (this.outTime <= 0) {
|
||||||
|
// 倒计时结束，重置时间器clearInterval(this.timer)
|
||||||
|
clearInterval(this.timer)
|
||||||
|
this.codeBtnText = '获取短信验证码'
|
||||||
|
this.outTime = 60
|
||||||
|
this.timer = null
|
||||||
|
this.codeBtnDisabled = false
|
||||||
|
}
|
||||||
|
}, 1000)
|
||||||
|
// 每秒执行一次
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleChangeLoginWay(tab, event) {
|
||||||
|
if (this.$refs.ruleForm) {
|
||||||
|
this.$refs.ruleForm.clearValidate();
|
||||||
|
}
|
||||||
|
if (tab && typeof tab === 'string') {
|
||||||
|
this.loginWay = type
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// if('phone,account'.indexOf(this.loginWay) !== -1) {
|
||||||
|
// this.loginWay = 'qrCode'
|
||||||
|
// }else{
|
||||||
|
// this.loginWay = 'phone'
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if(this.loginWay === 'qrCode') {
|
||||||
|
// // 生成二维码
|
||||||
|
// this.getQRCode()
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
getQRCode() {
|
||||||
|
this.qrFail = false
|
||||||
|
this.$fetchApi.getLoginQRCode().then(res => {
|
||||||
|
this.qrCodeInfo = res
|
||||||
|
this.qrCodeSrc = res.qrCode
|
||||||
|
this.loginByScanCode()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
loginByScanCode() {
|
||||||
|
let timeNum = 0
|
||||||
|
let scanCodeTimer = setInterval(() => {
|
||||||
|
|
||||||
|
if (timeNum > 200) {
|
||||||
|
clearInterval(scanCodeTimer);
|
||||||
|
this.qrFail = true
|
||||||
|
} else {
|
||||||
|
|
||||||
|
this.$fetchApi.loginByQRCode(this.qrCodeInfo.verify).then(res => {
|
||||||
|
|
||||||
|
if (res.status == 'INVALID') {
|
||||||
|
this.qrFail = true
|
||||||
|
clearInterval(scanCodeTimer);
|
||||||
|
}
|
||||||
|
if (res.status == 'SUCCESS') {
|
||||||
|
// 登录成功
|
||||||
|
this.$store.commit('setToken', res.token)
|
||||||
|
this.$store.commit('setRoutes', JSON.parse(res.perms))
|
||||||
|
this.$router.push('/')
|
||||||
|
clearInterval(scanCodeTimer);
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
this.qrFail = true
|
||||||
|
clearInterval(scanCodeTimer);
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
timeNum++;
|
||||||
|
}, 1500);
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
},
|
||||||
|
|
||||||
|
socketSucc(frame) {
|
||||||
|
console.log(frame, '---初始化成功!!!')
|
||||||
|
},
|
||||||
|
socketErr(frame) {
|
||||||
|
console.log(frame, '---初始化失败!!!')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.login-logo{padding:20px 0 0 40px;}
|
.login-logo {
|
||||||
.login-wrap{
|
padding: 20px 0 0 40px;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url('~@/assets/image/login-bg1.png') no-repeat ;
|
|
||||||
background-size: cover;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.login-box{
|
|
||||||
width: 384px;
|
|
||||||
height: 370px;
|
|
||||||
position: absolute;
|
|
||||||
right: 15%;
|
|
||||||
top: 50%;
|
|
||||||
margin-top: -185px;
|
|
||||||
}
|
|
||||||
.login-content{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 2px;
|
|
||||||
background: $color-white;
|
|
||||||
padding: $size32;
|
|
||||||
padding-bottom: 0;
|
|
||||||
border-radius: 5px;
|
|
||||||
// box-shadow: 0px 33px 114px rgba(25, 96, 244, 0.26), 0px 9.94853px 34.3677px rgba(25, 96, 244, 0.169413), 0px 4.13211px 14.2746px rgba(25, 96, 244, 0.13), 0px 1.4945px 5.16283px rgba(25, 96, 244, 0.0905869);
|
|
||||||
box-shadow: 0px 4px 4px 0px #00000014;
|
|
||||||
|
|
||||||
}
|
|
||||||
.login-tab{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.login-btn{
|
|
||||||
color: #fff;
|
|
||||||
background-color: #5d78ff;
|
|
||||||
border-color: #5d78ff;
|
|
||||||
&:hover{
|
|
||||||
background-color: #3758ff;
|
|
||||||
border-color: #2a4eff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.login-qr-code-box{
|
|
||||||
width: 260px;
|
|
||||||
height: 260px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.login-qr-fail{
|
|
||||||
width: 260px;
|
|
||||||
height: 260px;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
}
|
|
||||||
.login_footer_ad{
|
|
||||||
position: fixed;
|
|
||||||
bottom: 30px;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -129px;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-wrap{
|
.login-wrap {
|
||||||
height: 29px;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url('~@/assets/image/login-bg1.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.logo-img{
|
|
||||||
width: 58%;
|
.login-box {
|
||||||
height: 24px;
|
width: 384px;
|
||||||
|
height: 370px;
|
||||||
|
position: absolute;
|
||||||
|
right: 15%;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -185px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: $color-white;
|
||||||
|
padding: $size32;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-radius: 5px;
|
||||||
|
// box-shadow: 0px 33px 114px rgba(25, 96, 244, 0.26), 0px 9.94853px 34.3677px rgba(25, 96, 244, 0.169413), 0px 4.13211px 14.2746px rgba(25, 96, 244, 0.13), 0px 1.4945px 5.16283px rgba(25, 96, 244, 0.0905869);
|
||||||
|
box-shadow: 0px 4px 4px 0px #00000014;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #5d78ff;
|
||||||
|
border-color: #5d78ff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #3758ff;
|
||||||
|
border-color: #2a4eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-qr-code-box {
|
||||||
|
width: 260px;
|
||||||
|
height: 260px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-qr-fail {
|
||||||
|
width: 260px;
|
||||||
|
height: 260px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login_footer_ad {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 30px;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -129px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-wrap {
|
||||||
|
height: 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-img {
|
||||||
|
width: 58%;
|
||||||
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.login-wrap{
|
.login-wrap {
|
||||||
.el-tabs__nav-wrap{
|
.el-tabs__nav-wrap {
|
||||||
&::after{
|
&::after {
|
||||||
background-color: $color-white !important;
|
background-color: $color-white !important;
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-input__inner{
|
|
||||||
border-top: 0 !important;
|
|
||||||
border-left: 0 !important;
|
|
||||||
border-right: 0 !important;
|
|
||||||
border-radius: 0 !important;
|
|
||||||
color: $color-text-primary;
|
|
||||||
}
|
|
||||||
.login-sms-code .el-input__inner{
|
|
||||||
padding-right: 150px;
|
|
||||||
}
|
|
||||||
.login-sms-code-btn{
|
|
||||||
top: 3px;
|
|
||||||
right: 0;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-input__inner {
|
||||||
|
border-top: 0 !important;
|
||||||
|
border-left: 0 !important;
|
||||||
|
border-right: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
color: $color-text-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-sms-code .el-input__inner {
|
||||||
|
padding-right: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-sms-code-btn {
|
||||||
|
top: 3px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
66
src/utils/stompSocket.js
Normal file
66
src/utils/stompSocket.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import {Client,Message }from '@stomp/stompjs';
|
||||||
|
|
||||||
|
let client = null;
|
||||||
|
let url = 'wss://mediate.dev.trydotec.com/mediate/ws/websocket';
|
||||||
|
let subscriptionMap = {};
|
||||||
|
|
||||||
|
const socketClass = {
|
||||||
|
// 初始化
|
||||||
|
initStomp(succ, err) {
|
||||||
|
console.log('----过来了')
|
||||||
|
client = new Client({
|
||||||
|
brokerURL: url,
|
||||||
|
debug: function (str) {
|
||||||
|
console.log(str);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
client.onConnect = succ;
|
||||||
|
client.onStompError = err;
|
||||||
|
client.activate();
|
||||||
|
},
|
||||||
|
// 关闭
|
||||||
|
deactivate() {
|
||||||
|
if (!client)return;
|
||||||
|
client.deactivate();
|
||||||
|
client = null;
|
||||||
|
subscriptionMap = {};
|
||||||
|
},
|
||||||
|
// 推送
|
||||||
|
publish(data) {
|
||||||
|
// data
|
||||||
|
// {
|
||||||
|
// destination: '/topic/general',
|
||||||
|
// body: 'Hello world',
|
||||||
|
// headers: { priority: '9' },
|
||||||
|
// }
|
||||||
|
if (!client)return;
|
||||||
|
client.publish(data);
|
||||||
|
},
|
||||||
|
// 订阅
|
||||||
|
subscription(url, callback) {
|
||||||
|
// callback = function (message) {
|
||||||
|
// // called when the client receives a STOMP message from the server
|
||||||
|
// if (message.body) {
|
||||||
|
// alert('got message with body ' + message.body);
|
||||||
|
// } else {
|
||||||
|
// alert('got empty message');
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
if (!client)return;
|
||||||
|
subscriptionMap[url] = client.subscribe(url, callback);
|
||||||
|
},
|
||||||
|
// 取消订阅
|
||||||
|
unsubscribe(url) {
|
||||||
|
if (!client)return;
|
||||||
|
if (url){
|
||||||
|
const a = subscriptionMap[url];
|
||||||
|
if (a){
|
||||||
|
a.unsubscribe();
|
||||||
|
delete subscriptionMap[url]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default socketClass;
|
||||||
Loading…
x
Reference in New Issue
Block a user