Login.vue 26 KB

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