vue2-client 1.3.21 → 1.3.23

package/src/pages/login/Login.vue

@@ -1,277 +1,359 @@
-<template>
-  <common-layout>
-    <div class="top">
-      <div class="header">
-        <img alt="logo" class="logo" src="@vue2-client/assets/img/logo.png" />
-        <span class="title">{{ systemName }}</span>
-      </div>
-      <div class="desc">{{ systemDesc }}</div>
-    </div>
-    <div class="login">
-      <a-form :form="form" @submit="onSubmit">
-        <a-tabs :tabBarStyle="{textAlign: 'center'}" size="large" style="padding: 0 2px;">
-          <a-tab-pane key="1" tab="账户密码登录">
-            <a-alert
-              v-show="error"
-              :closable="true"
-              :message="error"
-              showIcon
-              style="margin-bottom: 24px;"
-              type="error" />
-            <a-form-item>
-              <a-input
-                v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
-                autocomplete="autocomplete"
-                placeholder="admin"
-                size="large"
-              >
-                <a-icon slot="prefix" type="user" />
-              </a-input>
-            </a-form-item>
-            <a-form-item>
-              <a-input
-                v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
-                autocomplete="autocomplete"
-                placeholder="888888"
-                size="large"
-                type="password"
-              >
-                <a-icon slot="prefix" type="lock" />
-              </a-input>
-            </a-form-item>
-          </a-tab-pane>
-        </a-tabs>
-        <div>
-          <a-checkbox :checked="true" >自动登录</a-checkbox>
-        </div>
-        <a-form-item>
-          <a-button :loading="logging" htmlType="submit" size="large" style="width: 100%;margin-top: 24px" type="primary">登录</a-button>
-        </a-form-item>
-      </a-form>
-    </div>
-  </common-layout>
-</template>
-
-<script>
-import CommonLayout from '@vue2-client/layouts/CommonLayout'
-import { getRoutesConfig, login, V4Login } from '@vue2-client/services/user'
-import { setAuthorization } from '@vue2-client/utils/request'
-import { loadRoutes, funcToRouter } from '@vue2-client/utils/routerUtil'
-import { mapMutations, mapState } from 'vuex'
-import JSEncrypt from 'jsencrypt'
-import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
-import { positions } from '@vue2-client/mock/common'
-import { timeFix } from '@vue2-client/utils/util'
-import { loginStart } from '@vue2-client/base-client/plugins/compatible/LoginServiceOA'
-
-export default {
-  name: 'Login',
-  components: { CommonLayout },
-  data () {
-    return {
-      logging: false,
-      error: '',
-      form: this.$form.createForm(this)
-    }
-  },
-  computed: {
-    ...mapState('setting', ['systemName', 'systemDesc', 'homePage', 'ticketPage', 'compatible'])
-  },
-  methods: {
-    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
-    onSubmit (e) {
-      e.preventDefault()
-      this.form.validateFields((err) => {
-        if (!err) {
-          this.logging = true
-          const name = this.form.getFieldValue('name')
-          const password = this.form.getFieldValue('password')
-          switch (this.compatible) {
-            case 'V3': {
-              login(name, password).then(this.afterLogin)
-              break
-            }
-            case 'OA' : {
-              loginStart(name, password).then(this.afterLoginOA).finally(() => { this.logging = false })
-              break
-            }
-            case 'V4' : {
-              V4Login(name, password).then(this.afterLoginV4)
-              break
-            }
-          }
-        }
-      })
-    },
-    afterLoginOA (result) {
-      // 默认第一个是旧OA地址
-      result.functions[0].navigate = result.functions[0].link
-      result.functions[0].link = null
-      this.afterGeneral(result)
-      this.setAccessToken(result.password)
-      this.$router.push(this.homePage).catch(() => {})
-    },
-    afterLoginV4 (res) {
-      const name = this.form.getFieldValue('name')
-      const password = this.form.getFieldValue('password')
-      this.logging = false
-      const loginRes = res
-      // 如果这是用户首次打开本系统，localStorage无法初始化，改用code判断
-      let pass = false
-      let V4Token = {}
-      // 判断是否是第一次使用本系统
-      if (res.code) {
-        if (res.code === 200) {
-          pass = true
-          // 如果返回值有code，证明是第一次使用系统，localStorage判断compatible失效
-          // token需要从.data中获取
-          V4Token = { token: res.data.access_token, expire: res.data.expires_in }
-        }
-      } else {
-        V4Token = { token: res.access_token, expire: res.expires_in }
-      }
-      this.setV4AccessToken(V4Token)
-      // 向本地缓存中临时存储compatible
-      if (loginRes.access_token || pass) {
-        const encrypt = new JSEncrypt()
-        encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB')
-        const data = encrypt.encrypt(JSON.stringify({ username: name, password: password }))
-        // 获取路由配置
-        getRoutesConfig(data).then(result => {
-          this.$login.login(result).then(() => {
-            this.afterGeneral(result)
-            if (result.deps === '用户工单登记') {
-              this.$router.push(this.ticketPage).catch(() => {})
-            } else {
-              this.$router.push(this.homePage).catch(() => {})
-            }
-          })
-        })
-      } else {
-        this.error = loginRes.msg
-      }
-    },
-    afterLogin (res) {
-      const name = this.form.getFieldValue('name')
-      const password = this.form.getFieldValue('password')
-      this.logging = false
-      const loginRes = res.states
-      if (loginRes === '登录成功') {
-        const encrypt = new JSEncrypt()
-        encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB')
-        const data = encrypt.encrypt(JSON.stringify({ username: name, password: password }))
-        // 获取路由配置
-        getRoutesConfig(data).then(result => {
-          this.$login.login(result).then(() => {
-            // V3任何情况首位加入资源管理
-            const resourceManageMain = {
-              name: '资源管理',
-              icon: 'api',
-              position: 1,
-              link: 'resourceManageMain'
-            }
-            result.functions.unshift(resourceManageMain)
-            this.afterGeneral(result)
-            this.setAccessToken(data)
-            if (result.deps === '用户工单登记') {
-              this.$router.push(this.ticketPage).catch(() => {})
-            } else {
-              this.$router.push(this.homePage).catch(() => {})
-            }
-          })
-        })
-      } else {
-        this.error = loginRes
-      }
-    },
-    afterGeneral (result) {
-      const user = Object.assign({
-        username: result.ename,
-        name: result.name,
-        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
-        address: '西安市',
-        position: positions[0]
-      }, result)
-      this.setUser(user)
-      this.setPermissions([{ id: 'queryForm', operation: ['add', 'edit'] }])
-      this.setRoles([{ id: 'admin', operation: ['add', 'edit', 'delete'] }])
-      loadRoutes(funcToRouter(user.functions))
-      this.$message.success(timeFix().CN + `，${result.name} 欢迎回来`, 3)
-    },
-    setAccessToken (data) {
-      if (data) {
-        localStorage.setItem(ACCESS_TOKEN, data)
-        let timestamp = new Date().getTime()// 当前的时间戳
-        timestamp = timestamp + 12 * 60 * 60 * 1000
-        // 格式化时间获取年月日, 登陆过期时间
-        const dateAfter = new Date(timestamp)
-        setAuthorization({ token: data, expireAt: dateAfter })
-      }
-    },
-    setV4AccessToken (data) {
-      if (data.token) {
-        localStorage.setItem(ACCESS_TOKEN, data.token)
-        setAuthorization({ token: data.token, expire: data.expire })
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.common-layout{
-  .top {
-    text-align: center;
-    .header {
-      height: 44px;
-      line-height: 44px;
-      a {
-        text-decoration: none;
-      }
-      .logo {
-        height: 44px;
-        vertical-align: top;
-        margin-right: 16px;
-      }
-      .title {
-        font-size: 33px;
-        color: @title-color;
-        font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-        font-weight: 600;
-        position: relative;
-        top: 2px;
-      }
-    }
-    .desc {
-      font-size: 14px;
-      color: @text-color-second;
-      margin-top: 12px;
-      margin-bottom: 40px;
-    }
-  }
-  .login{
-    width: 368px;
-    margin: 0 auto;
-    @media screen and (max-width: 576px) {
-      width: 95%;
-    }
-    @media screen and (max-width: 320px) {
-      .captcha-button{
-        font-size: 14px;
-      }
-    }
-    .icon {
-      font-size: 24px;
-      color: @text-color-second;
-      margin-left: 16px;
-      vertical-align: middle;
-      cursor: pointer;
-      transition: color 0.3s;
-
-      &:hover {
-        color: @primary-color;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <common-layout>
+    <div class="loginContent">
+      <div class="illustration">
+        <img src="@vue2-client/assets/login/illustration.webp" width="100%" height="100%"/>
+      </div>
+      <div class="business">
+        <div class="top">
+          <div class="header">
+            <span class="title">{{ systemName }}</span>
+          </div>
+        </div>
+        <div class="login" id="loginForm">
+          <a-form :form="form" @submit="onSubmit">
+            <a-tabs :tabBarStyle="{textAlign: 'center'}" size="large" style="padding: 0 2px;">
+              <a-tab-pane key="1" tab="账户密码登录">
+                <a-alert
+                  v-show="error"
+                  :closable="false"
+                  :message="error"
+                  showIcon
+                  style="margin-bottom: 2.8vh;"
+                  type="error" />
+                <a-form-item>
+                  <a-input
+                    v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
+                    autocomplete="autocomplete"
+                    placeholder="请输入账户名"
+                    size="large"
+                  >
+                    <a-icon slot="prefix" type="user" />
+                  </a-input>
+                </a-form-item>
+                <a-form-item>
+                  <a-input
+                    v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
+                    autocomplete="autocomplete"
+                    placeholder="请输入密码"
+                    size="large"
+                    type="password"
+                  >
+                    <a-icon slot="prefix" type="lock" />
+                  </a-input>
+                </a-form-item>
+                <a-form-item>
+                  <a-button :loading="logging" htmlType="submit" size="large" class="btn" type="primary">登录</a-button>
+                </a-form-item>
+              </a-tab-pane>
+            </a-tabs>
+          </a-form>
+        </div>
+      </div>
+    </div>
+  </common-layout>
+</template>
+
+<script>
+import CommonLayout from '@vue2-client/layouts/CommonLayout'
+import { getRoutesConfig, login, V4Login } from '@vue2-client/services/user'
+import { setAuthorization } from '@vue2-client/utils/request'
+import { loadRoutes, funcToRouter } from '@vue2-client/utils/routerUtil'
+import { mapMutations, mapState } from 'vuex'
+import JSEncrypt from 'jsencrypt'
+import { ACCESS_TOKEN } from '@vue2-client/store/mutation-types'
+import { positions } from '@vue2-client/mock/common'
+import { timeFix } from '@vue2-client/utils/util'
+import { loginStart } from '@vue2-client/base-client/plugins/compatible/LoginServiceOA'
+
+export default {
+  name: 'Login',
+  components: { CommonLayout },
+  data () {
+    return {
+      logging: false,
+      error: '',
+      form: this.$form.createForm(this)
+    }
+  },
+  computed: {
+    ...mapState('setting', ['systemName', 'systemDesc', 'homePage', 'ticketPage', 'compatible'])
+  },
+  methods: {
+    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
+    onSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err) => {
+        if (!err) {
+          this.logging = true
+          const name = this.form.getFieldValue('name')
+          const password = this.form.getFieldValue('password')
+          switch (this.compatible) {
+            case 'V3': {
+              login(name, password).then(this.afterLogin)
+              break
+            }
+            case 'OA' : {
+              loginStart(name, password).then(this.afterLoginOA).finally(() => { this.logging = false })
+              break
+            }
+            case 'V4' : {
+              V4Login(name, password).then(this.afterLoginV4)
+              break
+            }
+          }
+        }
+      })
+    },
+    afterLoginOA (result) {
+      // 默认第一个是旧OA地址
+      result.functions[0].navigate = result.functions[0].link
+      result.functions[0].link = null
+      this.afterGeneral(result)
+      this.setAccessToken(result.password)
+      this.$router.push(this.homePage).catch(() => {})
+    },
+    afterLoginV4 (res) {
+      const name = this.form.getFieldValue('name')
+      const password = this.form.getFieldValue('password')
+      this.logging = false
+      const loginRes = res
+      // 如果这是用户首次打开本系统，localStorage无法初始化，改用code判断
+      let pass = false
+      let V4Token = {}
+      // 判断是否是第一次使用本系统
+      if (res.code) {
+        if (res.code === 200) {
+          pass = true
+          // 如果返回值有code，证明是第一次使用系统，localStorage判断compatible失效
+          // token需要从.data中获取
+          V4Token = { token: res.data.access_token, expire: res.data.expires_in }
+        }
+      } else {
+        V4Token = { token: res.access_token, expire: res.expires_in }
+      }
+      this.setV4AccessToken(V4Token)
+      // 向本地缓存中临时存储compatible
+      if (loginRes.access_token || pass) {
+        const encrypt = new JSEncrypt()
+        encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB')
+        const data = encrypt.encrypt(JSON.stringify({ username: name, password: password }))
+        // 获取路由配置
+        getRoutesConfig(data).then(result => {
+          this.$login.login(result).then(() => {
+            this.afterGeneral(result)
+            if (result.deps === '用户工单登记') {
+              this.$router.push(this.ticketPage).catch(() => {})
+            } else {
+              this.$router.push(this.homePage).catch(() => {})
+            }
+          })
+        })
+      } else {
+        this.error = loginRes.msg
+      }
+    },
+    afterLogin (res) {
+      const name = this.form.getFieldValue('name')
+      const password = this.form.getFieldValue('password')
+      this.logging = false
+      const loginRes = res.states
+      if (loginRes === '登录成功') {
+        const encrypt = new JSEncrypt()
+        encrypt.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCqPvovSfXcwBbW8cKMCgwqNpsYuzF8RPAPFb7LGsnVo44JhM/xxzDyzoYtdfNmtbIuKVi9PzIsyp6rg+09gbuI6UGwBZ5DWBDBMqv5MPdOF5dCQkB2Bbr5yPfURPENypUz+pBFBg41d+BC+rwRiXELwKy7Y9caD/MtJyHydj8OUwIDAQAB')
+        const data = encrypt.encrypt(JSON.stringify({ username: name, password: password }))
+        // 获取路由配置
+        getRoutesConfig(data).then(result => {
+          this.$login.login(result).then(() => {
+            // V3任何情况首位加入资源管理
+            const resourceManageMain = {
+              name: '资源管理',
+              icon: 'api',
+              position: 1,
+              link: 'resourceManageMain'
+            }
+            result.functions.unshift(resourceManageMain)
+            this.afterGeneral(result)
+            this.setAccessToken(data)
+            if (result.deps === '用户工单登记') {
+              this.$router.push(this.ticketPage).catch(() => {})
+            } else {
+              this.$router.push(this.homePage).catch(() => {})
+            }
+          })
+        })
+      } else {
+        this.error = loginRes
+      }
+    },
+    afterGeneral (result) {
+      const user = Object.assign({
+        username: result.ename,
+        name: result.name,
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
+        address: '西安市',
+        position: positions[0]
+      }, result)
+      this.setUser(user)
+      this.setPermissions([{ id: 'queryForm', operation: ['add', 'edit'] }])
+      this.setRoles([{ id: 'admin', operation: ['add', 'edit', 'delete'] }])
+      loadRoutes(funcToRouter(user.functions))
+      this.$message.success(timeFix().CN + `，${result.name} 欢迎回来`, 3)
+    },
+    setAccessToken (data) {
+      if (data) {
+        localStorage.setItem(ACCESS_TOKEN, data)
+        let timestamp = new Date().getTime()// 当前的时间戳
+        timestamp = timestamp + 12 * 60 * 60 * 1000
+        // 格式化时间获取年月日, 登陆过期时间
+        const dateAfter = new Date(timestamp)
+        setAuthorization({ token: data, expireAt: dateAfter })
+      }
+    },
+    setV4AccessToken (data) {
+      if (data.token) {
+        localStorage.setItem(ACCESS_TOKEN, data.token)
+        setAuthorization({ token: data.token, expire: data.expire })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.common-layout {
+  background-image: url('/img/login/background.webp');
+  background-size: cover;
+  background-position: center;
+  .content {
+    .loginContent {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 63vw;
+      height: 64vh;
+      padding: 12.4vh 4.8vw 13.4vh 3.5vw;
+      //min-height: 582px;
+      //padding: 115px 90px 124px 66px;
+      transform: translate(-50%, -50%);
+      background: #fff;
+      border-radius: 30px;
+      display: flex;
+      .illustration {
+        flex: 1;
+        @media screen and (max-width: 959px) {
+          flex: 0;
+        }
+      }
+      .business {
+        flex: 1;
+        .top {
+          text-align: center;
+          .header {
+            height: 2vh;
+            line-height: 2.7vh;
+            padding-bottom: 5.4vh;
+            .title {
+              font-size: 1.5rem;
+              @media screen and (max-width: 479px) {
+                font-size: 1rem;
+              }
+              @media screen and (min-width: 480px) and (max-width: 767px) {
+                font-size: 1.3rem;
+              }
+              @media screen and (min-width: 768px) and (max-width: 959px) {
+                font-size: 1.5rem;
+              }
+              @media screen and (min-width: 960px) {
+                font-size: 1.3rem;
+              }
+              @media screen and (min-width: 1200px) {
+                font-size: 1.5rem;
+              }
+              color: #333333;
+              font-weight: bold;
+              font-family: 'Microsoft YaHei UI Light',serif;
+              letter-spacing: 0.13rem;
+            }
+          }
+        }
+        .login{
+          width: 20vw;
+          margin: 0 auto;
+          @media screen and (max-width: 479px) {
+            width: 50vw;
+          }
+          @media screen and (min-width: 480px) and (max-width: 767px) {
+            width: 50vw;
+          }
+          @media screen and (min-width: 768px) and (max-width: 959px) {
+            width: 40vw;
+          }
+          @media screen and (min-width: 960px) {
+            width: 20vw;
+          }
+          @media screen and (min-width: 1200px) {
+            width: 20vw;
+          }
+          .btn {
+            width: 100%;
+            height: 5.4vh;
+            border-radius: 30px;
+            background-color: #4F93FE;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="less">
+.common-layout {
+  .footer {
+    .copyright {
+      color: #fff !important;
+    }
+  }
+}
+#loginForm {
+  .ant-input {
+    border-radius: 30px;
+  }
+  .ant-input-lg {
+    height: 5.4vh;
+  }
+  .ant-tabs-bar {
+    margin-bottom: 3.2vh;
+  }
+  .ant-input-affix-wrapper {
+    font-size: 1.15rem;
+  }
+  .ant-input-affix-wrapper .ant-input:not(:first-child) {
+    padding-left: 2.4vw;
+    @media screen and (max-width: 479px) {
+      padding-left: 10vw;
+    }
+    @media screen and (min-width: 480px) and (max-width: 767px) {
+      padding-left: 8vw;
+    }
+    @media screen and (min-width: 768px) and (max-width: 959px) {
+      padding-left: 5vw;
+    }
+    @media screen and (min-width: 960px) {
+      padding-left: 4vw;
+    }
+    @media screen and (min-width: 1200px) {
+      padding-left: 2.4vw;
+    }
+  }
+  .ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
+    color: #4F93FE;
+  }
+  .ant-alert {
+    border-radius: 12px;
+  }
+  .ant-form-item {
+    margin-bottom: 2.6vh
+  }
+}
+</style>