123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699 |
- <style>
- .impowerBox .title {
- display: none;
- }
- </style>
- <template>
- <div class="main">
- <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
- <a-tabs
- :activeKey="customActiveKey"
- :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
- @change="handleTabClick"
- >
- <a-tab-pane key="tab1" tab="企业微信扫码登录" forceRender>
- <a-form-item>
- <a-select v-model="creativeTag" @change="setData">
- <a-select-option value="huichuang">北京主公司</a-select-option>
- <a-select-option value="jiaoyang">北京分公司</a-select-option>
- </a-select>
- <div id="wx_reg" style="display: flex; justify-content: center; margin-top: 15px"></div>
- <div style="display: flex; justify-content: center; color: red; font-size: 16px">
- 需先用企业微信开通过账号,方可使用企业微信登录
- </div>
- </a-form-item>
- </a-tab-pane>
- <a-tab-pane key="tab2" tab="账号密码登录">
- <a-form-item>
- <a-input
- size="large"
- v-decorator="['username', validatorRules.username, { validator: this.handleUsernameOrEmail }]"
- type="text"
- placeholder="请输入帐户名"
- >
- <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
- </a-input>
- </a-form-item>
- <a-form-item>
- <a-input
- v-decorator="['password', validatorRules.password]"
- size="large"
- type="password"
- autocomplete="false"
- placeholder="密码"
- >
- <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
- </a-input>
- </a-form-item>
- <a-row :gutter="0">
- <a-col :span="14">
- <a-form-item>
- <a-input
- v-decorator="['inputCode', validatorRules.inputCode]"
- size="large"
- type="text"
- @change="inputCodeChange"
- placeholder="请输入验证码"
- >
- <a-icon
- slot="prefix"
- v-if="inputCodeContent == verifiedCode"
- type="smile"
- :style="{ color: 'rgba(0,0,0,.25)' }"
- />
- <a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }" />
- </a-input>
- </a-form-item>
- </a-col>
- <a-col :span="10">
- <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>
- </a-col>
- </a-row>
- </a-tab-pane>
- </a-tabs>
- <a-form-item v-if="customActiveKey != 'tab1'">
- <a-checkbox v-model="formLogin.rememberMe">自动登录</a-checkbox>
- <router-link :to="{ name: 'alteration' }" class="forge-password" style="float: right"> 忘记密码 </router-link>
- <!--
- <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
- 注册账户
- </router-link>
- -->
- </a-form-item>
- <a-form-item style="margin-top: 24px" v-if="customActiveKey != 'tab1'">
- <a-button
- size="large"
- type="primary"
- htmlType="submit"
- class="login-button"
- :loading="loginBtn"
- @click.stop.prevent="handleSubmit"
- :disabled="loginBtn"
- >确定
- </a-button>
- </a-form-item>
- <!-- <div class="otherLogin" v-if="customActiveKey != 'tab1'"><span class="titleTip">其他登录方式</span></div> -->
- <!-- <div class="feishu" @click="FSlogin" v-if="customActiveKey != 'tab1'">
- <span class="FSicon">
- <img src="@/assets/feishu.png" alt="">
- </span>
- <span class="FSinfo">使用飞书快捷登录</span>
- </div> -->
- <!-- <div class="user-login-other">
- <span>其他登录方式</span>
- <a><a-icon class="item-icon" type="alipay-circle"></a-icon></a>
- <a><a-icon class="item-icon" type="taobao-circle"></a-icon></a>
- <a><a-icon class="item-icon" type="weibo-circle"></a-icon></a>
- <router-link class="register" :to="{ name: 'register' }">
- 注册账户
- </router-link>
- </div> -->
- </a-form>
- <two-step-captcha
- v-if="requiredTwoStepCaptcha"
- :visible="stepCaptchaVisible"
- @success="stepCaptchaSuccess"
- @cancel="stepCaptchaCancel"
- ></two-step-captcha>
- <a-modal title="登录部门选择" :width="450" :visible="departVisible" :closable="false" :maskClosable="false">
- <template slot="footer">
- <a-button type="primary" @click="departOk">确认</a-button>
- </template>
- <a-form>
- <a-form-item
- :labelCol="{ span: 4 }"
- :wrapperCol="{ span: 20 }"
- style="margin-bottom: 10px"
- :validate-status="validate_status"
- >
- <a-tooltip placement="topLeft">
- <template slot="title">
- <span>您隶属于多部门,请选择登录部门</span>
- </template>
- <a-avatar style="backgroundcolor: #87d068" icon="gold" />
- </a-tooltip>
- <a-select
- @change="departChange"
- :class="{ 'valid-error': validate_status == 'error' }"
- placeholder="请选择登录部门"
- style="margin-left: 10px; width: 80%"
- >
- <a-icon slot="suffixIcon" type="gold" />
- <a-select-option v-for="d in departList" :key="d.id" :value="d.orgCode">
- {{ d.departName }}
- </a-select-option>
- </a-select>
- </a-form-item>
- </a-form>
- </a-modal>
- </div>
- </template>
- <script>
- //import md5 from "md5"
- import api from '@/api'
- import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
- import { mapActions } from 'vuex'
- import { timeFix } from '@/utils/util'
- import Vue from 'vue'
- import { ACCESS_TOKEN } from '@/store/mutation-types'
- import JGraphicCode from '@/components/jeecg/JGraphicCode'
- import { putAction } from '@/api/manage'
- import { postAction } from '@/api/manage'
- import { getAction } from '@/api/manage'
- import { encryption } from '@/utils/encryption/aesEncrypt'
- export default {
- components: {
- TwoStepCaptcha,
- JGraphicCode,
- },
- data() {
- return {
- creativeTag: 'huichuang',
- appId: 'ww24b8a47826f5875f',
- customActiveKey: 'tab1',
- loginBtn: false,
- // login type: 0 email, 1 username, 2 telephone
- loginType: 0,
- requiredTwoStepCaptcha: false,
- stepCaptchaVisible: false,
- form: this.$form.createForm(this),
- state: {
- time: 60,
- smsSendBtn: false,
- },
- formLogin: {
- username: '',
- password: '',
- captcha: '',
- mobile: '',
- rememberMe: true,
- },
- validatorRules: {
- username: {
- rules: [
- {
- required: true,
- message: '请输入用户名!',
- validator: 'click',
- },
- ],
- },
- password: {
- rules: [
- {
- required: true,
- message: '请输入密码!',
- validator: 'click',
- },
- ],
- },
- mobile: {
- rules: [
- {
- validator: this.validateMobile,
- },
- ],
- },
- captcha: {
- rule: [
- {
- required: true,
- message: '请输入验证码!',
- },
- ],
- },
- inputCode: {
- rules: [
- {
- required: true,
- message: '请输入验证码!',
- },
- {
- validator: this.validateInputCode,
- },
- ],
- },
- },
- verifiedCode: '',
- inputCodeContent: '',
- inputCodeNull: true,
- departList: [],
- departVisible: false,
- departSelected: '',
- currentUsername: '',
- validate_status: '',
- }
- },
- created() {
- Vue.ls.remove(ACCESS_TOKEN)
- this.getRouterData()
- // update-begin- --- author:scott ------ date:20190225 ---- for:暂时注释,未实现登录验证码功能
- // this.$http.get('/auth/2step-code')
- // .then(res => {
- // this.requiredTwoStepCaptcha = res.result.stepCode
- // }).catch(err => {
- // console.log('2step-code:', err)
- // })
- // update-end- --- author:scott ------ date:20190225 ---- for:暂时注释,未实现登录验证码功能
- // this.requiredTwoStepCaptcha = true
- },
- mounted() {
- this.$nextTick(() => {
- var url = ''
- if (process.env.NODE_ENV === 'development') {
- url = 'http://localhost:3000'
- } else if (process.env.NODE_ENV === 'production') {
- url = 'http://adsp.c-top.com.cn'
- }
- console.log(url)
- window.WwLogin({
- id: 'wx_reg',
- appid: this.appId,
- agentid: '1000002',
- redirect_uri: 'http://callback.c-top.com.cn:8080/jeecg-boot/qywexin',
- state: url + '/user/transfer-local?corpId='+this.appId,
- href: '',
- })
- })
- },
- methods: {
- ...mapActions(['Login', 'Logout', 'PhoneLogin']),
- setData() {
- if (this.creativeTag == 'huichuang') {
- this.appId = 'ww24b8a47826f5875f'
- } else {
- this.appId = 'wwef2e51064c0ac897'
- }
- this.$nextTick(() => {
- var url = ''
- if (process.env.NODE_ENV === 'development') {
- url = 'http://localhost:3000'
- } else if (process.env.NODE_ENV === 'production') {
- url = 'http://adsp.c-top.com.cn'
- }
- console.log(url)
- window.WwLogin({
- id: 'wx_reg',
- appid: this.appId,
- agentid: '1000002',
- redirect_uri: 'http://callback.c-top.com.cn:8080/jeecg-boot/qywexin',
- state: url + '/user/transfer-local?corpId='+this.appId,
- href: '',
- })
- })
- },
- // handler
- handleUsernameOrEmail(rule, value, callback) {
- const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
- if (regex.test(value)) {
- this.loginType = 0
- } else {
- this.loginType = 1
- }
- callback()
- },
- handleTabClick(key) {
- this.customActiveKey = key
- // this.form.resetFields()
- },
- handleSubmit() {
- let that = this
- let loginParams = {
- remember_me: that.formLogin.rememberMe,
- }
- // 使用账户密码登录
- if (that.customActiveKey === 'tab2') {
- that.form.validateFields(
- ['username', 'password', 'inputCode'],
- {
- force: true,
- },
- (err, values) => {
- if (!err) {
- getAction('/sys/getEncryptedString', {})
- .then((res) => {
- loginParams.username = values.username
- //loginParams.password = md5(values.password)
- loginParams.password = encryption(values.password, res.result.key, res.result.iv)
- that
- .Login(loginParams)
- .then((res) => {
- this.departConfirm(res)
- })
- .catch((err) => {
- that.requestFailed(err)
- })
- })
- .catch((err) => {
- that.requestFailed(err)
- })
- }
- }
- )
- // 使用手机号登录
- } else if (that.customActiveKey === 'tab3') {
- that.form.validateFields(
- ['mobile', 'captcha'],
- {
- force: true,
- },
- (err, values) => {
- if (!err) {
- loginParams.mobile = values.mobile
- loginParams.captcha = values.captcha
- that
- .PhoneLogin(loginParams)
- .then((res) => {
- console.log(res.result)
- this.departConfirm(res)
- })
- .catch((err) => {
- that.requestFailed(err)
- })
- }
- }
- )
- }
- },
- getCaptcha(e) {
- e.preventDefault()
- let that = this
- this.form.validateFields(
- ['mobile'],
- {
- force: true,
- },
- (err, values) => {
- if (!values.mobile) {
- that.cmsFailed('请输入手机号')
- } else if (!err) {
- this.state.smsSendBtn = true
- let interval = window.setInterval(() => {
- if (that.state.time-- <= 0) {
- that.state.time = 60
- that.state.smsSendBtn = false
- window.clearInterval(interval)
- }
- }, 1000)
- const hide = this.$message.loading('验证码发送中..', 0)
- let smsParams = {}
- smsParams.mobile = values.mobile
- smsParams.smsmode = '0'
- postAction('/sys/sms', smsParams)
- .then((res) => {
- if (!res.success) {
- setTimeout(hide, 0)
- this.cmsFailed(res.message)
- }
- console.log(res)
- setTimeout(hide, 500)
- })
- .catch((err) => {
- setTimeout(hide, 1)
- clearInterval(interval)
- that.state.time = 60
- that.state.smsSendBtn = false
- this.requestFailed(err)
- })
- }
- }
- )
- },
- stepCaptchaSuccess() {
- this.loginSuccess()
- },
- stepCaptchaCancel() {
- this.Logout().then(() => {
- this.loginBtn = false
- this.stepCaptchaVisible = false
- })
- },
- loginSuccess() {
- this.loginBtn = false
- this.$router.push({
- path: '/dashboard/analysis',
- })
- this.$notification.success({
- message: '欢迎',
- description: `${timeFix()},欢迎回来`,
- })
- },
- cmsFailed(err) {
- setTimeout(() => {
- this.$notification['error']({
- key: '1',
- message: '登录失败',
- description: err,
- duration: 4,
- })
- }, 2000)
- },
- requestFailed(err) {
- setTimeout(() => {
- this.$notification['error']({
- key: '1',
- message: '登录失败',
- description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
- duration: 4,
- })
- }, 2000)
- this.loginBtn = false
- },
- validateMobile(rule, value, callback) {
- if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
- callback()
- } else {
- callback('您的手机号码格式不正确!')
- }
- },
- validateInputCode(rule, value, callback) {
- if (!value || this.verifiedCode == this.inputCodeContent) {
- callback()
- } else {
- callback('您输入的验证码不正确!')
- }
- },
- generateCode(value) {
- this.verifiedCode = value.toLowerCase()
- },
- inputCodeChange(e) {
- this.inputCodeContent = e.target.value
- if (!e.target.value || 0 == e.target.value) {
- this.inputCodeNull = true
- } else {
- this.inputCodeContent = this.inputCodeContent.toLowerCase()
- this.inputCodeNull = false
- }
- },
- departConfirm(res) {
- if (res.success) {
- let multi_depart = res.result.multi_depart
- //0:无部门 1:一个部门 2:多个部门
- if (multi_depart == 0) {
- this.loginSuccess()
- this.$notification.warn({
- message: '提示',
- description: `您尚未归属部门,请确认账号信息`,
- duration: 3,
- })
- } else if (multi_depart == 2) {
- this.departVisible = true
- this.currentUsername = this.form.getFieldValue('username')
- this.departList = res.result.departs
- } else {
- this.loginSuccess()
- }
- } else {
- this.requestFailed(res)
- this.Logout()
- }
- },
- departOk() {
- if (!this.departSelected) {
- this.validate_status = 'error'
- return false
- }
- let obj = {
- orgCode: this.departSelected,
- username: this.form.getFieldValue('username'),
- }
- putAction('/sys/selectDepart', obj).then((res) => {
- if (res.success) {
- this.departClear()
- this.loginSuccess()
- } else {
- this.requestFailed(res)
- this.Logout().then(() => {
- this.departClear()
- })
- }
- })
- },
- departClear() {
- this.departList = []
- this.departSelected = ''
- this.currentUsername = ''
- this.departVisible = false
- this.validate_status = ''
- },
- departChange(value) {
- this.validate_status = 'success'
- this.departSelected = value
- },
- getRouterData() {
- this.$nextTick(() => {
- this.form.setFieldsValue({
- username: this.$route.params.username,
- })
- })
- },
- FSlogin() {
- console.log('FSlogin')
- // this.$router.push('http://192.168.0.111:8088/jeecg-boot/sys/feishu/url')
- // window.history.go('');
- window.location.href =
- 'https://open.feishu.cn/open-apis/authen/v1/index?redirect_uri=http%3A%2F%2Fadsp.tjyourong.com.cn%2Fuser%2FFStransfer&app_id=cli_9e68af69ca34d00e&state='
- // getAction('/sys/feishu/url', {}).then((res) => {
- // console.log(res);
- // if (res.success) {
- // }
- // })
- },
- },
- }
- </script>
- <style lang="scss" scoped>
- .user-layout-login {
- label {
- font-size: 14px;
- }
- .getCaptcha {
- display: block;
- width: 100%;
- height: 40px;
- }
- .forge-password {
- font-size: 14px;
- }
- button.login-button {
- padding: 0 15px;
- font-size: 16px;
- height: 40px;
- width: 100%;
- }
- .user-login-other {
- text-align: left;
- margin-top: 24px;
- line-height: 22px;
- .item-icon {
- font-size: 24px;
- color: rgba(0, 0, 0, 0.2);
- margin-left: 16px;
- vertical-align: middle;
- cursor: pointer;
- transition: color 0.3s;
- &:hover {
- color: #1890ff;
- }
- }
- .register {
- float: right;
- }
- }
- .otherLogin {
- margin-top: 60px;
- font-size: 14px;
- color: #999;
- height: 20px;
- line-height: 20px;
- text-align: center;
- position: relative;
- .titleTip::before {
- content: '';
- display: block;
- width: 120px;
- height: 1px;
- background-color: #ccc;
- position: absolute;
- top: 10px;
- left: 5px;
- }
- .titleTip::after {
- content: '';
- display: block;
- width: 120px;
- height: 1px;
- background-color: #ccc;
- position: absolute;
- top: 10px;
- right: 5px;
- }
- }
- .feishu {
- text-align: center;
- cursor: pointer;
- margin-top: 15px;
- padding: 5px 0;
- // border: 1px solid #ccc;
- border-radius: 10px;
- .FSicon {
- display: inline-block;
- width: 40px;
- height: 40px;
- background-color: #fff;
- border-radius: 50%;
- padding: 6px;
- img {
- height: 100%;
- }
- }
- .FSinfo {
- display: inline-block;
- height: 40px;
- line-height: 40px;
- margin-left: 15px;
- font-size: 16px;
- font-weight: 500;
- // color: rgb(0,127,255);
- }
- }
- .feishu:hover {
- color: rgb(0, 127, 255);
- }
- }
- </style>
- <style>
- .valid-error .ant-select-selection__placeholder {
- color: #f5222d;
- }
- </style>
|