Login.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
  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, mapGetters } 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. ...mapGetters(['userInfo']),
  283. setData() {
  284. if (this.creativeTag == 'huichuang') {
  285. this.appId = 'ww24b8a47826f5875f'
  286. } else if (this.creativeTag == 'jiaoyang'){
  287. this.appId = 'wwef2e51064c0ac897'
  288. }else if(this.creativeTag == 'juyi'){
  289. this.appId = 'ww460c4ae74efe25c9'
  290. }
  291. this.$nextTick(() => {
  292. var url = ''
  293. if (process.env.NODE_ENV === 'development') {
  294. url = 'http://localhost:3000'
  295. } else if (process.env.NODE_ENV === 'production') {
  296. url = 'http://adsp.c-top.com.cn'
  297. }
  298. console.log(url)
  299. window.WwLogin({
  300. id: 'wx_reg',
  301. appid: this.appId,
  302. agentid: '1000002',
  303. redirect_uri: 'http://callback.c-top.com.cn:8080/jeecg-boot/qywexin',
  304. state: url + '/user/transfer-local?corpId='+this.appId,
  305. href: '',
  306. })
  307. })
  308. },
  309. // handler
  310. handleUsernameOrEmail(rule, value, callback) {
  311. const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
  312. if (regex.test(value)) {
  313. this.loginType = 0
  314. } else {
  315. this.loginType = 1
  316. }
  317. callback()
  318. },
  319. handleTabClick(key) {
  320. this.customActiveKey = key
  321. // this.form.resetFields()
  322. },
  323. handleSubmit() {
  324. let that = this
  325. let loginParams = {
  326. remember_me: that.formLogin.rememberMe,
  327. }
  328. // 使用账户密码登录
  329. if (that.customActiveKey === 'tab2') {
  330. that.form.validateFields(
  331. ['username', 'password', 'inputCode'],
  332. {
  333. force: true,
  334. },
  335. (err, values) => {
  336. if (!err) {
  337. getAction('/sys/getEncryptedString', {})
  338. .then((res) => {
  339. loginParams.username = values.username
  340. //loginParams.password = md5(values.password)
  341. loginParams.password = encryption(values.password, res.result.key, res.result.iv)
  342. that
  343. .Login(loginParams)
  344. .then((res) => {
  345. this.departConfirm(res)
  346. })
  347. .catch((err) => {
  348. that.requestFailed(err)
  349. })
  350. })
  351. .catch((err) => {
  352. that.requestFailed(err)
  353. })
  354. }
  355. }
  356. )
  357. // 使用手机号登录
  358. } else if (that.customActiveKey === 'tab3') {
  359. that.form.validateFields(
  360. ['mobile', 'captcha'],
  361. {
  362. force: true,
  363. },
  364. (err, values) => {
  365. if (!err) {
  366. loginParams.mobile = values.mobile
  367. loginParams.captcha = values.captcha
  368. that
  369. .PhoneLogin(loginParams)
  370. .then((res) => {
  371. console.log(res.result)
  372. this.departConfirm(res)
  373. })
  374. .catch((err) => {
  375. that.requestFailed(err)
  376. })
  377. }
  378. }
  379. )
  380. }
  381. },
  382. getCaptcha(e) {
  383. e.preventDefault()
  384. let that = this
  385. this.form.validateFields(
  386. ['mobile'],
  387. {
  388. force: true,
  389. },
  390. (err, values) => {
  391. if (!values.mobile) {
  392. that.cmsFailed('请输入手机号')
  393. } else if (!err) {
  394. this.state.smsSendBtn = true
  395. let interval = window.setInterval(() => {
  396. if (that.state.time-- <= 0) {
  397. that.state.time = 60
  398. that.state.smsSendBtn = false
  399. window.clearInterval(interval)
  400. }
  401. }, 1000)
  402. const hide = this.$message.loading('验证码发送中..', 0)
  403. let smsParams = {}
  404. smsParams.mobile = values.mobile
  405. smsParams.smsmode = '0'
  406. postAction('/sys/sms', smsParams)
  407. .then((res) => {
  408. if (!res.success) {
  409. setTimeout(hide, 0)
  410. this.cmsFailed(res.message)
  411. }
  412. console.log(res)
  413. setTimeout(hide, 500)
  414. })
  415. .catch((err) => {
  416. setTimeout(hide, 1)
  417. clearInterval(interval)
  418. that.state.time = 60
  419. that.state.smsSendBtn = false
  420. this.requestFailed(err)
  421. })
  422. }
  423. }
  424. )
  425. },
  426. stepCaptchaSuccess() {
  427. this.loginSuccess()
  428. },
  429. stepCaptchaCancel() {
  430. this.Logout().then(() => {
  431. this.loginBtn = false
  432. this.stepCaptchaVisible = false
  433. })
  434. },
  435. loginSuccess() {
  436. this.loginBtn = false
  437. this.$router.push({
  438. path: '/dashboard/analysis',
  439. })
  440. if (this.userInfo().id == '4aba62011120ac565c7f2b9f8f4aa96b' || this.userInfo().id == 'e9ca23d68d884d4ebb19d07889727dae' || this.userInfo().id == 'db2d59e9b4a3b18629c838fd7f5b58d8') {
  441. const a = document.createElement('a');
  442. document.body.appendChild(a);
  443. a.style.display = 'none';
  444. a.href = 'http://adsp.c-top.com.cn/boss-data-kanban';
  445. a.target = '_blank'
  446. a.click();
  447. // let tempPage = window.open('', '_blank');
  448. // tempPage.location="/boss-data-kanban";
  449. // window.open("/boss-data-kanban","_blank")
  450. }
  451. this.$notification.success({
  452. message: '欢迎',
  453. description: `${timeFix()},欢迎回来`,
  454. })
  455. },
  456. cmsFailed(err) {
  457. setTimeout(() => {
  458. this.$notification['error']({
  459. key: '1',
  460. message: '登录失败',
  461. description: err,
  462. duration: 4,
  463. })
  464. }, 2000)
  465. },
  466. requestFailed(err) {
  467. setTimeout(() => {
  468. this.$notification['error']({
  469. key: '1',
  470. message: '登录失败',
  471. description: ((err.response || {}).data || {}).message || err.message || '请求出现错误,请稍后再试',
  472. duration: 4,
  473. })
  474. }, 2000)
  475. this.loginBtn = false
  476. },
  477. validateMobile(rule, value, callback) {
  478. 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)) {
  479. callback()
  480. } else {
  481. callback('您的手机号码格式不正确!')
  482. }
  483. },
  484. validateInputCode(rule, value, callback) {
  485. if (!value || this.verifiedCode == this.inputCodeContent) {
  486. callback()
  487. } else {
  488. callback('您输入的验证码不正确!')
  489. }
  490. },
  491. generateCode(value) {
  492. this.verifiedCode = value.toLowerCase()
  493. },
  494. inputCodeChange(e) {
  495. this.inputCodeContent = e.target.value
  496. if (!e.target.value || 0 == e.target.value) {
  497. this.inputCodeNull = true
  498. } else {
  499. this.inputCodeContent = this.inputCodeContent.toLowerCase()
  500. this.inputCodeNull = false
  501. }
  502. },
  503. departConfirm(res) {
  504. if (res.success) {
  505. let multi_depart = res.result.multi_depart
  506. //0:无部门 1:一个部门 2:多个部门
  507. if (multi_depart == 0) {
  508. this.loginSuccess()
  509. this.$notification.warn({
  510. message: '提示',
  511. description: `您尚未归属部门,请确认账号信息`,
  512. duration: 3,
  513. })
  514. } else if (multi_depart == 2) {
  515. this.departVisible = true
  516. this.currentUsername = this.form.getFieldValue('username')
  517. this.departList = res.result.departs
  518. } else {
  519. this.loginSuccess()
  520. }
  521. } else {
  522. this.requestFailed(res)
  523. this.Logout()
  524. }
  525. },
  526. departOk() {
  527. if (!this.departSelected) {
  528. this.validate_status = 'error'
  529. return false
  530. }
  531. let obj = {
  532. orgCode: this.departSelected,
  533. username: this.form.getFieldValue('username'),
  534. }
  535. putAction('/sys/selectDepart', obj).then((res) => {
  536. if (res.success) {
  537. this.departClear()
  538. this.loginSuccess()
  539. } else {
  540. this.requestFailed(res)
  541. this.Logout().then(() => {
  542. this.departClear()
  543. })
  544. }
  545. })
  546. },
  547. departClear() {
  548. this.departList = []
  549. this.departSelected = ''
  550. this.currentUsername = ''
  551. this.departVisible = false
  552. this.validate_status = ''
  553. },
  554. departChange(value) {
  555. this.validate_status = 'success'
  556. this.departSelected = value
  557. },
  558. getRouterData() {
  559. this.$nextTick(() => {
  560. this.form.setFieldsValue({
  561. username: this.$route.params.username,
  562. })
  563. })
  564. },
  565. FSlogin() {
  566. console.log('FSlogin')
  567. // this.$router.push('http://192.168.0.111:8088/jeecg-boot/sys/feishu/url')
  568. // window.history.go('');
  569. window.location.href =
  570. '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='
  571. // getAction('/sys/feishu/url', {}).then((res) => {
  572. // console.log(res);
  573. // if (res.success) {
  574. // }
  575. // })
  576. },
  577. },
  578. }
  579. </script>
  580. <style lang="scss" scoped>
  581. .user-layout-login {
  582. label {
  583. font-size: 14px;
  584. }
  585. .getCaptcha {
  586. display: block;
  587. width: 100%;
  588. height: 40px;
  589. }
  590. .forge-password {
  591. font-size: 14px;
  592. }
  593. button.login-button {
  594. padding: 0 15px;
  595. font-size: 16px;
  596. height: 40px;
  597. width: 100%;
  598. }
  599. .user-login-other {
  600. text-align: left;
  601. margin-top: 24px;
  602. line-height: 22px;
  603. .item-icon {
  604. font-size: 24px;
  605. color: rgba(0, 0, 0, 0.2);
  606. margin-left: 16px;
  607. vertical-align: middle;
  608. cursor: pointer;
  609. transition: color 0.3s;
  610. &:hover {
  611. color: #1890ff;
  612. }
  613. }
  614. .register {
  615. float: right;
  616. }
  617. }
  618. .otherLogin {
  619. margin-top: 60px;
  620. font-size: 14px;
  621. color: #999;
  622. height: 20px;
  623. line-height: 20px;
  624. text-align: center;
  625. position: relative;
  626. .titleTip::before {
  627. content: '';
  628. display: block;
  629. width: 120px;
  630. height: 1px;
  631. background-color: #ccc;
  632. position: absolute;
  633. top: 10px;
  634. left: 5px;
  635. }
  636. .titleTip::after {
  637. content: '';
  638. display: block;
  639. width: 120px;
  640. height: 1px;
  641. background-color: #ccc;
  642. position: absolute;
  643. top: 10px;
  644. right: 5px;
  645. }
  646. }
  647. .feishu {
  648. text-align: center;
  649. cursor: pointer;
  650. margin-top: 15px;
  651. padding: 5px 0;
  652. // border: 1px solid #ccc;
  653. border-radius: 10px;
  654. .FSicon {
  655. display: inline-block;
  656. width: 40px;
  657. height: 40px;
  658. background-color: #fff;
  659. border-radius: 50%;
  660. padding: 6px;
  661. img {
  662. height: 100%;
  663. }
  664. }
  665. .FSinfo {
  666. display: inline-block;
  667. height: 40px;
  668. line-height: 40px;
  669. margin-left: 15px;
  670. font-size: 16px;
  671. font-weight: 500;
  672. // color: rgb(0,127,255);
  673. }
  674. }
  675. .feishu:hover {
  676. color: rgb(0, 127, 255);
  677. }
  678. }
  679. </style>
  680. <style>
  681. .valid-error .ant-select-selection__placeholder {
  682. color: #f5222d;
  683. }
  684. </style>