Login.vue 20 KB

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