Login.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702
  1. <style>
  2. .impowerBox .title {
  3. display: none;
  4. }
  5. </style>
  6. <template>
  7. <div class="main">
  8. <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
  9. <a-tabs
  10. :activeKey="customActiveKey"
  11. :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
  12. @change="handleTabClick"
  13. >
  14. <a-tab-pane key="tab1" tab="企业微信扫码登录" forceRender>
  15. <a-form-item>
  16. <a-select v-model="creativeTag" @change="setData">
  17. <a-select-option value="huichuang">北京主公司</a-select-option>
  18. <a-select-option value="jiaoyang">北京分公司1</a-select-option>
  19. <a-select-option value="juyi">北京分公司2</a-select-option>
  20. </a-select>
  21. <div id="wx_reg" style="display: flex; justify-content: center; margin-top: 15px"></div>
  22. <div style="display: flex; justify-content: center; color: red; font-size: 16px">
  23. 需先用企业微信开通过账号,方可使用企业微信登录
  24. </div>
  25. </a-form-item>
  26. </a-tab-pane>
  27. <a-tab-pane key="tab2" tab="账号密码登录">
  28. <a-form-item>
  29. <a-input
  30. size="large"
  31. v-decorator="['username', validatorRules.username, { validator: this.handleUsernameOrEmail }]"
  32. type="text"
  33. placeholder="请输入帐户名"
  34. >
  35. <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
  36. </a-input>
  37. </a-form-item>
  38. <a-form-item>
  39. <a-input
  40. v-decorator="['password', validatorRules.password]"
  41. size="large"
  42. type="password"
  43. autocomplete="false"
  44. placeholder="密码"
  45. >
  46. <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
  47. </a-input>
  48. </a-form-item>
  49. <a-row :gutter="0">
  50. <a-col :span="14">
  51. <a-form-item>
  52. <a-input
  53. v-decorator="['inputCode', validatorRules.inputCode]"
  54. size="large"
  55. type="text"
  56. @change="inputCodeChange"
  57. placeholder="请输入验证码"
  58. >
  59. <a-icon
  60. slot="prefix"
  61. v-if="inputCodeContent == verifiedCode"
  62. type="smile"
  63. :style="{ color: 'rgba(0,0,0,.25)' }"
  64. />
  65. <a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }" />
  66. </a-input>
  67. </a-form-item>
  68. </a-col>
  69. <a-col :span="10">
  70. <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>
  71. </a-col>
  72. </a-row>
  73. </a-tab-pane>
  74. </a-tabs>
  75. <a-form-item v-if="customActiveKey != 'tab1'">
  76. <a-checkbox v-model="formLogin.rememberMe">自动登录</a-checkbox>
  77. <router-link :to="{ name: 'alteration' }" class="forge-password" style="float: right"> 忘记密码 </router-link>
  78. <!--
  79. <router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >
  80. 注册账户
  81. </router-link>
  82. -->
  83. </a-form-item>
  84. <a-form-item style="margin-top: 24px" v-if="customActiveKey != 'tab1'">
  85. <a-button
  86. size="large"
  87. type="primary"
  88. htmlType="submit"
  89. class="login-button"
  90. :loading="loginBtn"
  91. @click.stop.prevent="handleSubmit"
  92. :disabled="loginBtn"
  93. >确定
  94. </a-button>
  95. </a-form-item>
  96. <!-- <div class="otherLogin" v-if="customActiveKey != 'tab1'"><span class="titleTip">其他登录方式</span></div> -->
  97. <!-- <div class="feishu" @click="FSlogin" v-if="customActiveKey != 'tab1'">
  98. <span class="FSicon">
  99. <img src="@/assets/feishu.png" alt="">
  100. </span>
  101. <span class="FSinfo">使用飞书快捷登录</span>
  102. </div> -->
  103. <!-- <div class="user-login-other">
  104. <span>其他登录方式</span>
  105. <a><a-icon class="item-icon" type="alipay-circle"></a-icon></a>
  106. <a><a-icon class="item-icon" type="taobao-circle"></a-icon></a>
  107. <a><a-icon class="item-icon" type="weibo-circle"></a-icon></a>
  108. <router-link class="register" :to="{ name: 'register' }">
  109. 注册账户
  110. </router-link>
  111. </div> -->
  112. </a-form>
  113. <two-step-captcha
  114. v-if="requiredTwoStepCaptcha"
  115. :visible="stepCaptchaVisible"
  116. @success="stepCaptchaSuccess"
  117. @cancel="stepCaptchaCancel"
  118. ></two-step-captcha>
  119. <a-modal title="登录部门选择" :width="450" :visible="departVisible" :closable="false" :maskClosable="false">
  120. <template slot="footer">
  121. <a-button type="primary" @click="departOk">确认</a-button>
  122. </template>
  123. <a-form>
  124. <a-form-item
  125. :labelCol="{ span: 4 }"
  126. :wrapperCol="{ span: 20 }"
  127. style="margin-bottom: 10px"
  128. :validate-status="validate_status"
  129. >
  130. <a-tooltip placement="topLeft">
  131. <template slot="title">
  132. <span>您隶属于多部门,请选择登录部门</span>
  133. </template>
  134. <a-avatar style="backgroundcolor: #87d068" icon="gold" />
  135. </a-tooltip>
  136. <a-select
  137. @change="departChange"
  138. :class="{ 'valid-error': validate_status == 'error' }"
  139. placeholder="请选择登录部门"
  140. style="margin-left: 10px; width: 80%"
  141. >
  142. <a-icon slot="suffixIcon" type="gold" />
  143. <a-select-option v-for="d in departList" :key="d.id" :value="d.orgCode">
  144. {{ d.departName }}
  145. </a-select-option>
  146. </a-select>
  147. </a-form-item>
  148. </a-form>
  149. </a-modal>
  150. </div>
  151. </template>
  152. <script>
  153. //import md5 from "md5"
  154. import api from '@/api'
  155. import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
  156. import { mapActions } from 'vuex'
  157. import { timeFix } from '@/utils/util'
  158. import Vue from 'vue'
  159. import { ACCESS_TOKEN } from '@/store/mutation-types'
  160. import JGraphicCode from '@/components/jeecg/JGraphicCode'
  161. import { putAction } from '@/api/manage'
  162. import { postAction } from '@/api/manage'
  163. import { getAction } from '@/api/manage'
  164. import { encryption } from '@/utils/encryption/aesEncrypt'
  165. export default {
  166. components: {
  167. TwoStepCaptcha,
  168. JGraphicCode,
  169. },
  170. data() {
  171. return {
  172. creativeTag: 'huichuang',
  173. appId: 'ww24b8a47826f5875f',
  174. customActiveKey: 'tab1',
  175. loginBtn: false,
  176. // login type: 0 email, 1 username, 2 telephone
  177. loginType: 0,
  178. requiredTwoStepCaptcha: false,
  179. stepCaptchaVisible: false,
  180. form: this.$form.createForm(this),
  181. state: {
  182. time: 60,
  183. smsSendBtn: false,
  184. },
  185. formLogin: {
  186. username: '',
  187. password: '',
  188. captcha: '',
  189. mobile: '',
  190. rememberMe: true,
  191. },
  192. validatorRules: {
  193. username: {
  194. rules: [
  195. {
  196. required: true,
  197. message: '请输入用户名!',
  198. validator: 'click',
  199. },
  200. ],
  201. },
  202. password: {
  203. rules: [
  204. {
  205. required: true,
  206. message: '请输入密码!',
  207. validator: 'click',
  208. },
  209. ],
  210. },
  211. mobile: {
  212. rules: [
  213. {
  214. validator: this.validateMobile,
  215. },
  216. ],
  217. },
  218. captcha: {
  219. rule: [
  220. {
  221. required: true,
  222. message: '请输入验证码!',
  223. },
  224. ],
  225. },
  226. inputCode: {
  227. rules: [
  228. {
  229. required: true,
  230. message: '请输入验证码!',
  231. },
  232. {
  233. validator: this.validateInputCode,
  234. },
  235. ],
  236. },
  237. },
  238. verifiedCode: '',
  239. inputCodeContent: '',
  240. inputCodeNull: true,
  241. departList: [],
  242. departVisible: false,
  243. departSelected: '',
  244. currentUsername: '',
  245. validate_status: '',
  246. }
  247. },
  248. created() {
  249. Vue.ls.remove(ACCESS_TOKEN)
  250. this.getRouterData()
  251. // update-begin- --- author:scott ------ date:20190225 ---- for:暂时注释,未实现登录验证码功能
  252. // this.$http.get('/auth/2step-code')
  253. // .then(res => {
  254. // this.requiredTwoStepCaptcha = res.result.stepCode
  255. // }).catch(err => {
  256. // console.log('2step-code:', err)
  257. // })
  258. // update-end- --- author:scott ------ date:20190225 ---- for:暂时注释,未实现登录验证码功能
  259. // this.requiredTwoStepCaptcha = true
  260. },
  261. mounted() {
  262. this.$nextTick(() => {
  263. var url = ''
  264. if (process.env.NODE_ENV === 'development') {
  265. url = 'http://localhost:3000'
  266. } else if (process.env.NODE_ENV === 'production') {
  267. url = 'http://adsp.c-top.com.cn'
  268. }
  269. console.log(url)
  270. window.WwLogin({
  271. id: 'wx_reg',
  272. appid: this.appId,
  273. agentid: '1000002',
  274. redirect_uri: 'http://callback.c-top.com.cn:8080/jeecg-boot/qywexin',
  275. state: url + '/user/transfer-local?corpId='+this.appId,
  276. href: '',
  277. })
  278. })
  279. },
  280. methods: {
  281. ...mapActions(['Login', 'Logout', 'PhoneLogin']),
  282. setData() {
  283. if (this.creativeTag == 'huichuang') {
  284. this.appId = 'ww24b8a47826f5875f'
  285. } else if (this.creativeTag == 'jiaoyang'){
  286. this.appId = 'wwef2e51064c0ac897'
  287. }else if(this.creativeTag == 'juyi'){
  288. this.appId = 'ww460c4ae74efe25c9'
  289. }
  290. this.$nextTick(() => {
  291. var url = ''
  292. if (process.env.NODE_ENV === 'development') {
  293. url = 'http://localhost:3000'
  294. } else if (process.env.NODE_ENV === 'production') {
  295. url = 'http://adsp.c-top.com.cn'
  296. }
  297. console.log(url)
  298. window.WwLogin({
  299. id: 'wx_reg',
  300. appid: this.appId,
  301. agentid: '1000002',
  302. redirect_uri: 'http://callback.c-top.com.cn:8080/jeecg-boot/qywexin',
  303. state: url + '/user/transfer-local?corpId='+this.appId,
  304. href: '',
  305. })
  306. })
  307. },
  308. // handler
  309. handleUsernameOrEmail(rule, value, callback) {
  310. const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
  311. if (regex.test(value)) {
  312. this.loginType = 0
  313. } else {
  314. this.loginType = 1
  315. }
  316. callback()
  317. },
  318. handleTabClick(key) {
  319. this.customActiveKey = key
  320. // this.form.resetFields()
  321. },
  322. handleSubmit() {
  323. let that = this
  324. let loginParams = {
  325. remember_me: that.formLogin.rememberMe,
  326. }
  327. // 使用账户密码登录
  328. if (that.customActiveKey === 'tab2') {
  329. that.form.validateFields(
  330. ['username', 'password', 'inputCode'],
  331. {
  332. force: true,
  333. },
  334. (err, values) => {
  335. if (!err) {
  336. getAction('/sys/getEncryptedString', {})
  337. .then((res) => {
  338. loginParams.username = values.username
  339. //loginParams.password = md5(values.password)
  340. loginParams.password = encryption(values.password, res.result.key, res.result.iv)
  341. that
  342. .Login(loginParams)
  343. .then((res) => {
  344. this.departConfirm(res)
  345. })
  346. .catch((err) => {
  347. that.requestFailed(err)
  348. })
  349. })
  350. .catch((err) => {
  351. that.requestFailed(err)
  352. })
  353. }
  354. }
  355. )
  356. // 使用手机号登录
  357. } else if (that.customActiveKey === 'tab3') {
  358. that.form.validateFields(
  359. ['mobile', 'captcha'],
  360. {
  361. force: true,
  362. },
  363. (err, values) => {
  364. if (!err) {
  365. loginParams.mobile = values.mobile
  366. loginParams.captcha = values.captcha
  367. that
  368. .PhoneLogin(loginParams)
  369. .then((res) => {
  370. console.log(res.result)
  371. this.departConfirm(res)
  372. })
  373. .catch((err) => {
  374. that.requestFailed(err)
  375. })
  376. }
  377. }
  378. )
  379. }
  380. },
  381. getCaptcha(e) {
  382. e.preventDefault()
  383. let that = this
  384. this.form.validateFields(
  385. ['mobile'],
  386. {
  387. force: true,
  388. },
  389. (err, values) => {
  390. if (!values.mobile) {
  391. that.cmsFailed('请输入手机号')
  392. } else if (!err) {
  393. this.state.smsSendBtn = true
  394. let interval = window.setInterval(() => {
  395. if (that.state.time-- <= 0) {
  396. that.state.time = 60
  397. that.state.smsSendBtn = false
  398. window.clearInterval(interval)
  399. }
  400. }, 1000)
  401. const hide = this.$message.loading('验证码发送中..', 0)
  402. let smsParams = {}
  403. smsParams.mobile = values.mobile
  404. smsParams.smsmode = '0'
  405. postAction('/sys/sms', smsParams)
  406. .then((res) => {
  407. if (!res.success) {
  408. setTimeout(hide, 0)
  409. this.cmsFailed(res.message)
  410. }
  411. console.log(res)
  412. setTimeout(hide, 500)
  413. })
  414. .catch((err) => {
  415. setTimeout(hide, 1)
  416. clearInterval(interval)
  417. that.state.time = 60
  418. that.state.smsSendBtn = false
  419. this.requestFailed(err)
  420. })
  421. }
  422. }
  423. )
  424. },
  425. stepCaptchaSuccess() {
  426. this.loginSuccess()
  427. },
  428. stepCaptchaCancel() {
  429. this.Logout().then(() => {
  430. this.loginBtn = false
  431. this.stepCaptchaVisible = false
  432. })
  433. },
  434. loginSuccess() {
  435. this.loginBtn = false
  436. this.$router.push({
  437. path: '/dashboard/analysis',
  438. })
  439. this.$notification.success({
  440. message: '欢迎',
  441. description: `${timeFix()},欢迎回来`,
  442. })
  443. },
  444. cmsFailed(err) {
  445. setTimeout(() => {
  446. this.$notification['error']({
  447. key: '1',
  448. message: '登录失败',
  449. description: err,
  450. duration: 4,
  451. })
  452. }, 2000)
  453. },
  454. requestFailed(err) {
  455. setTimeout(() => {
  456. this.$notification['error']({
  457. key: '1',
  458. message: '登录失败',
  459. description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
  460. duration: 4,
  461. })
  462. }, 2000)
  463. this.loginBtn = false
  464. },
  465. validateMobile(rule, value, callback) {
  466. 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)) {
  467. callback()
  468. } else {
  469. callback('您的手机号码格式不正确!')
  470. }
  471. },
  472. validateInputCode(rule, value, callback) {
  473. if (!value || this.verifiedCode == this.inputCodeContent) {
  474. callback()
  475. } else {
  476. callback('您输入的验证码不正确!')
  477. }
  478. },
  479. generateCode(value) {
  480. this.verifiedCode = value.toLowerCase()
  481. },
  482. inputCodeChange(e) {
  483. this.inputCodeContent = e.target.value
  484. if (!e.target.value || 0 == e.target.value) {
  485. this.inputCodeNull = true
  486. } else {
  487. this.inputCodeContent = this.inputCodeContent.toLowerCase()
  488. this.inputCodeNull = false
  489. }
  490. },
  491. departConfirm(res) {
  492. if (res.success) {
  493. let multi_depart = res.result.multi_depart
  494. //0:无部门 1:一个部门 2:多个部门
  495. if (multi_depart == 0) {
  496. this.loginSuccess()
  497. this.$notification.warn({
  498. message: '提示',
  499. description: `您尚未归属部门,请确认账号信息`,
  500. duration: 3,
  501. })
  502. } else if (multi_depart == 2) {
  503. this.departVisible = true
  504. this.currentUsername = this.form.getFieldValue('username')
  505. this.departList = res.result.departs
  506. } else {
  507. this.loginSuccess()
  508. }
  509. } else {
  510. this.requestFailed(res)
  511. this.Logout()
  512. }
  513. },
  514. departOk() {
  515. if (!this.departSelected) {
  516. this.validate_status = 'error'
  517. return false
  518. }
  519. let obj = {
  520. orgCode: this.departSelected,
  521. username: this.form.getFieldValue('username'),
  522. }
  523. putAction('/sys/selectDepart', obj).then((res) => {
  524. if (res.success) {
  525. this.departClear()
  526. this.loginSuccess()
  527. } else {
  528. this.requestFailed(res)
  529. this.Logout().then(() => {
  530. this.departClear()
  531. })
  532. }
  533. })
  534. },
  535. departClear() {
  536. this.departList = []
  537. this.departSelected = ''
  538. this.currentUsername = ''
  539. this.departVisible = false
  540. this.validate_status = ''
  541. },
  542. departChange(value) {
  543. this.validate_status = 'success'
  544. this.departSelected = value
  545. },
  546. getRouterData() {
  547. this.$nextTick(() => {
  548. this.form.setFieldsValue({
  549. username: this.$route.params.username,
  550. })
  551. })
  552. },
  553. FSlogin() {
  554. console.log('FSlogin')
  555. // this.$router.push('http://192.168.0.111:8088/jeecg-boot/sys/feishu/url')
  556. // window.history.go('');
  557. window.location.href =
  558. '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='
  559. // getAction('/sys/feishu/url', {}).then((res) => {
  560. // console.log(res);
  561. // if (res.success) {
  562. // }
  563. // })
  564. },
  565. },
  566. }
  567. </script>
  568. <style lang="scss" scoped>
  569. .user-layout-login {
  570. label {
  571. font-size: 14px;
  572. }
  573. .getCaptcha {
  574. display: block;
  575. width: 100%;
  576. height: 40px;
  577. }
  578. .forge-password {
  579. font-size: 14px;
  580. }
  581. button.login-button {
  582. padding: 0 15px;
  583. font-size: 16px;
  584. height: 40px;
  585. width: 100%;
  586. }
  587. .user-login-other {
  588. text-align: left;
  589. margin-top: 24px;
  590. line-height: 22px;
  591. .item-icon {
  592. font-size: 24px;
  593. color: rgba(0, 0, 0, 0.2);
  594. margin-left: 16px;
  595. vertical-align: middle;
  596. cursor: pointer;
  597. transition: color 0.3s;
  598. &:hover {
  599. color: #1890ff;
  600. }
  601. }
  602. .register {
  603. float: right;
  604. }
  605. }
  606. .otherLogin {
  607. margin-top: 60px;
  608. font-size: 14px;
  609. color: #999;
  610. height: 20px;
  611. line-height: 20px;
  612. text-align: center;
  613. position: relative;
  614. .titleTip::before {
  615. content: '';
  616. display: block;
  617. width: 120px;
  618. height: 1px;
  619. background-color: #ccc;
  620. position: absolute;
  621. top: 10px;
  622. left: 5px;
  623. }
  624. .titleTip::after {
  625. content: '';
  626. display: block;
  627. width: 120px;
  628. height: 1px;
  629. background-color: #ccc;
  630. position: absolute;
  631. top: 10px;
  632. right: 5px;
  633. }
  634. }
  635. .feishu {
  636. text-align: center;
  637. cursor: pointer;
  638. margin-top: 15px;
  639. padding: 5px 0;
  640. // border: 1px solid #ccc;
  641. border-radius: 10px;
  642. .FSicon {
  643. display: inline-block;
  644. width: 40px;
  645. height: 40px;
  646. background-color: #fff;
  647. border-radius: 50%;
  648. padding: 6px;
  649. img {
  650. height: 100%;
  651. }
  652. }
  653. .FSinfo {
  654. display: inline-block;
  655. height: 40px;
  656. line-height: 40px;
  657. margin-left: 15px;
  658. font-size: 16px;
  659. font-weight: 500;
  660. // color: rgb(0,127,255);
  661. }
  662. }
  663. .feishu:hover {
  664. color: rgb(0, 127, 255);
  665. }
  666. }
  667. </style>
  668. <style>
  669. .valid-error .ant-select-selection__placeholder {
  670. color: #f5222d;
  671. }
  672. </style>