修改界面

src/page/login/index.vue

@@ -1,145 +1,145 @@
 <template>
   <div :class="type">
-      <div class="login-container "
-       ref="login"
-       @keyup.enter.native="handleLogin">
-    <top-color v-show="false"></top-color>
-    <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
-        <div class="login-time">
-          {{time}}
-        </div>
-        <img class="img" src="/img/logo.png" alt="">
-        <p class="title">{{ $t('login.info') }}</p>
-      </div>
-      <div class="login-border">
-        <div class="login-main">
-          <h4 class="login-title">
-           {{website.title}}
-            <!-- <top-lang></top-lang> -->
-          </h4>
-          <userLogin v-if="activeName==='user'"></userLogin>
-          <codeLogin v-else-if="activeName==='code'"></codeLogin>
-          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
-          <div class="login-menu">
-            <!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> -->
-            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
-            <!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> -->
+    <div class="login-container "
+         ref="login"
+         @keyup.enter.native="handleLogin">
+      <top-color v-show="false"></top-color>
+      <div class="login-weaper animated bounceInDown">
+        <div class="login-left">
+          <div class="login-time">
+            {{ time }}
           </div>
+          <img class="img" src="/img/logo.png" alt="">
+          <p class="title">{{ $t('login.info') }}</p>
         </div>
+        <div class="login-border">
+          <div class="login-main">
+            <h4 class="login-title">
+              {{ website.title }}
+              <!-- <top-lang></top-lang> -->
+            </h4>
+            <userLogin v-if="activeName==='user'"></userLogin>
+            <codeLogin v-else-if="activeName==='code'"></codeLogin>
+            <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
+            <div class="login-menu">
+              <!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> -->
+              <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
+              <!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> -->
+            </div>
+          </div>
 
+        </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 <script>
-  import userLogin from "./userlogin";
-  import codeLogin from "./codelogin";
-  import thirdLogin from "./thirdlogin";
-  import {mapGetters} from "vuex";
-  import {dateFormat} from "@/util/date";
-  import {validatenull} from "@/util/validate";
-  import topLang from "@/page/index/top/top-lang";
-  import topColor from "@/page/index/top/top-color";
-  import {getQueryString, getTopUrl} from "@/util/util";
-  export default {
-    name: "login",
-    components: {
-      userLogin,
-      codeLogin,
-      thirdLogin,
-      topLang,
-      topColor
-    },
-    data() {
-      return {
-        type: "",
-        time: "",
-        activeName: "user",
-        socialForm: {
-          tenantId: "000000",
-          source: "",
-          code: "",
-          state: "",
-        }
-      };
-    },
-    watch: {
-      $route() {
-        this.handleLogin();
+import userLogin from "./userlogin";
+import codeLogin from "./codelogin";
+import thirdLogin from "./thirdlogin";
+import {mapGetters} from "vuex";
+import {dateFormat} from "@/util/date";
+import {validatenull} from "@/util/validate";
+import topLang from "@/page/index/top/top-lang";
+import topColor from "@/page/index/top/top-color";
+import {getQueryString, getTopUrl} from "@/util/util";
+
+export default {
+  name: "login",
+  components: {
+    userLogin,
+    codeLogin,
+    thirdLogin,
+    topLang,
+    topColor
+  },
+  data() {
+    return {
+      type: "",
+      time: "",
+      activeName: "user",
+      socialForm: {
+        tenantId: "000000",
+        source: "",
+        code: "",
+        state: "",
       }
-    },
-    created() {
+    };
+  },
+  watch: {
+    $route() {
       this.handleLogin();
-      this.getTime();
-      this.initType();
-    },
-    mounted() {
+    }
+  },
+  created() {
+    this.handleLogin();
+    this.getTime();
+    this.initType();
+  },
+  mounted() {
+  },
+  computed: {
+    ...mapGetters(["website", "tagWel"])
+  },
+  props: [],
+  methods: {
+    initType() {
+      let domain = getTopUrl();
+      switch (domain) {
+        case "http://ldt.guosen-fumao.cn":
+          this.type = "ldt"
+          break;
+        case "http://ldt-shop.guosen-fumao.cn":
+          this.type = "shop"
+          break;
+        case "http://ldt-mall.guosen-fumao.cn":
+          this.type = "mall"
+          break;
+        case "http://ldt-agent.guosen-fumao.cn":
+          this.type = "agent"
+          break;
+        default:
+          this.type = "ldt"
+          break;
+      }
     },
-    computed: {
-      ...mapGetters(["website", "tagWel"])
+    getTime() {
+      setInterval(() => {
+        this.time = dateFormat(new Date());
+      }, 1000);
     },
-    props: [],
-    methods: {
-      initType(){
-        //let domain = "http://ldt-mall.guosen-fumao.cn";
-        let domain = getTopUrl();
-        switch (domain) {
-          case "http://ldt.guosen-fumao.cn":
-            this.type = "ldt"
-            break;
-          case "http://ldt-shop.guosen-fumao.cn":
-            this.type = "shop"
-            break;
-          case "http://ldt-mall.guosen-fumao.cn":
-            this.type = "mall"
-            break;
-          case "http://ldt-agent.guosen-fumao.cn":
-            this.type = "agent"
-            break;
-          default:
-            this.type = "shop"
-            break;
-        }
-      },
-      getTime() {
-        setInterval(() => {
-          this.time = dateFormat(new Date());
-        }, 1000);
-      },
-      handleLogin() {
-        const topUrl = getTopUrl();
-        const redirectUrl = "/oauth/redirect/";
-        this.socialForm.source = getQueryString("source");
-        this.socialForm.code = getQueryString("code");
-        this.socialForm.state = getQueryString("state");
-        if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
-          let source = topUrl.split("?")[0];
-          source = source.split(redirectUrl)[1];
-          this.socialForm.source = source;
-        }
-        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
-          const loading = this.$loading({
-            lock: true,
-            text: '第三方系统登录中,请稍后。。。',
-            spinner: "el-icon-loading"
-          });
-          this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
-            window.location.href = topUrl.split(redirectUrl)[0];
-            this.$router.push({path: this.tagWel.value});
-            loading.close();
-          }).catch(() => {
-            loading.close();
-          });
-        }
+    handleLogin() {
+      const topUrl = getTopUrl();
+      const redirectUrl = "/oauth/redirect/";
+      this.socialForm.source = getQueryString("source");
+      this.socialForm.code = getQueryString("code");
+      this.socialForm.state = getQueryString("state");
+      if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
+        let source = topUrl.split("?")[0];
+        source = source.split(redirectUrl)[1];
+        this.socialForm.source = source;
+      }
+      if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+        const loading = this.$loading({
+          lock: true,
+          text: '第三方系统登录中,请稍后。。。',
+          spinner: "el-icon-loading"
+        });
+        this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
+          window.location.href = topUrl.split(redirectUrl)[0];
+          this.$router.push({path: this.tagWel.value});
+          loading.close();
+        }).catch(() => {
+          loading.close();
+        });
       }
     }
-  };
+  }
+};
 </script>
 
 <style lang="scss">
-  @import "./style/login-shop.scss";
-  @import "./style/login-ldt.scss";
-  @import "./style/login-agent.scss";
+@import "./style/login-shop.scss";
+@import "./style/login-ldt.scss";
+@import "./style/login-agent.scss";
 </style>

src/page/login/userlogin.vue

@@ -57,7 +57,7 @@
       <el-button type="primary"
                  size="small"
                  @click.native.prevent="handleLogin"
-                 class="login-submit">{{$t('login.submit')}}
+                 class="login-submit">{{ $t('login.submit') }}
       </el-button>
     </el-form-item>
     <el-dialog title="用户信息选择"
@@ -70,221 +70,220 @@
 </template>
 
 <script>
-  import {mapGetters} from "vuex";
-  import {info} from "@/api/system/tenant";
-  import {getCaptcha} from "@/api/user";
-  import {getTopUrl} from "@/util/util";
+import {mapGetters} from "vuex";
+import {info} from "@/api/system/tenant";
+import {getCaptcha} from "@/api/user";
+import {getTopUrl} from "@/util/util";
 
-  export default {
-    name: "userlogin",
-    data() {
-      return {
-        tenantMode: this.website.tenantMode,
-        type:"",
-        loginForm: {
-          //租户ID
-          tenantId: "",
-          //部门ID
-          deptId: "",
-          //角色ID
-          roleId: "",
-          //用户名
-          username: "",
-          //密码
-          password: "",
-          //账号类型
-          type: "account",
-          //验证码的值
-          code: "",
-          //验证码的索引
-          key: "",
-          //预加载白色背景
-          image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
-        },
-        loginRules: {
-          tenantId: [
-            {required: false, message: "请输入租户ID", trigger: "blur"}
-          ],
-          username: [
-            {required: true, message: "请输入用户名", trigger: "blur"}
-          ],
-          password: [
-            {required: true, message: "请输入密码", trigger: "blur"},
-            {min: 1, message: "密码长度最少为6位", trigger: "blur"}
-          ]
-        },
-        passwordType: "password",
-        userBox: false,
-        userForm: {
-          deptId: '',
-          roleId: ''
-        },
-        userOption: {
-          labelWidth: 70,
-          submitBtn: true,
-          emptyBtn: false,
-          submitText: '登录',
-          column: [
-            {
-              label: '部门',
-              prop: 'deptId',
-              type: 'select',
-              props: {
-                label: 'deptName',
-                value: 'id'
-              },
-              dicUrl: '/api/blade-system/dept/select',
-              span: 24,
-              display: false,
-              rules: [{
-                required: true,
-                message: "请选择部门",
-                trigger: "blur"
-              }],
+export default {
+  name: "userlogin",
+  data() {
+    return {
+      tenantMode: this.website.tenantMode,
+      type: "",
+      loginForm: {
+        //租户ID
+        tenantId: "",
+        //部门ID
+        deptId: "",
+        //角色ID
+        roleId: "",
+        //用户名
+        username: "",
+        //密码
+        password: "",
+        //账号类型
+        type: "account",
+        //验证码的值
+        code: "",
+        //验证码的索引
+        key: "",
+        //预加载白色背景
+        image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
+      },
+      loginRules: {
+        tenantId: [
+          {required: false, message: "请输入租户ID", trigger: "blur"}
+        ],
+        username: [
+          {required: true, message: "请输入用户名", trigger: "blur"}
+        ],
+        password: [
+          {required: true, message: "请输入密码", trigger: "blur"},
+          {min: 1, message: "密码长度最少为6位", trigger: "blur"}
+        ]
+      },
+      passwordType: "password",
+      userBox: false,
+      userForm: {
+        deptId: '',
+        roleId: ''
+      },
+      userOption: {
+        labelWidth: 70,
+        submitBtn: true,
+        emptyBtn: false,
+        submitText: '登录',
+        column: [
+          {
+            label: '部门',
+            prop: 'deptId',
+            type: 'select',
+            props: {
+              label: 'deptName',
+              value: 'id'
             },
-            {
-              label: '角色',
-              prop: 'roleId',
-              type: 'select',
-              props: {
-                label: 'roleName',
-                value: 'id'
-              },
-              dicUrl: '/api/blade-system/role/select',
-              span: 24,
-              display: false,
-              rules: [{
-                required: true,
-                message: "请选择角色",
-                trigger: "blur"
-              }],
+            dicUrl: '/api/blade-system/dept/select',
+            span: 24,
+            display: false,
+            rules: [{
+              required: true,
+              message: "请选择部门",
+              trigger: "blur"
+            }],
+          },
+          {
+            label: '角色',
+            prop: 'roleId',
+            type: 'select',
+            props: {
+              label: 'roleName',
+              value: 'id'
             },
-          ]
-        }
-      };
-    },
-    created() {
-      // this.getTenant();
-      this.refreshCode();
-    },
-    mounted() {
-      //let domain = "http://ldt-mall.guosen-fumao.cn";
-      let domain = getTopUrl();
-      switch (domain) {
-        case "http://ldt.guosen-fumao.cn":
-          this.type = "ldt"
-          this.loginForm.tenantId = "000000";
-          this.loginForm.username = "admin";
-          break;
-        case "http://ldt-shop.guosen-fumao.cn":
-          this.type = "shop"
-          break;
-        case "http://ldt-mall.guosen-fumao.cn":
-          this.type = "mall"
-          break;
-        case "http://ldt-agent.guosen-fumao.cn":
-          this.type = "agent"
-          break;
-        default:
-          this.type = "shop"
-          this.loginForm.tenantId = "000000";
-          this.loginForm.username = "admin";
-          break;
+            dicUrl: '/api/blade-system/role/select',
+            span: 24,
+            display: false,
+            rules: [{
+              required: true,
+              message: "请选择角色",
+              trigger: "blur"
+            }],
+          },
+        ]
+      }
+    };
+  },
+  created() {
+    // this.getTenant();
+    this.refreshCode();
+  },
+  mounted() {
+    let domain = getTopUrl();
+    switch (domain) {
+      case "http://ldt.guosen-fumao.cn":
+        this.type = "ldt"
+        this.loginForm.tenantId = "000000";
+        this.loginForm.username = "admin";
+        break;
+      case "http://ldt-shop.guosen-fumao.cn":
+        this.type = "shop"
+        break;
+      case "http://ldt-mall.guosen-fumao.cn":
+        this.type = "mall"
+        break;
+      case "http://ldt-agent.guosen-fumao.cn":
+        this.type = "agent"
+        break;
+      default:
+        this.type = "ldt"
+        this.loginForm.tenantId = "000000";
+        this.loginForm.username = "admin";
+        break;
+    }
+  },
+  watch: {
+    'loginForm.deptId'() {
+      const column = this.findObject(this.userOption.column, "deptId");
+      if (this.loginForm.deptId.includes(",")) {
+        column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
+        column.display = true;
+      } else {
+        column.dicUrl = '';
       }
     },
-    watch: {
-      'loginForm.deptId'() {
-        const column = this.findObject(this.userOption.column, "deptId");
-        if (this.loginForm.deptId.includes(",")) {
-          column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
-          column.display = true;
-        } else {
-          column.dicUrl = '';
-        }
-      },
-      'loginForm.roleId'() {
-        const column = this.findObject(this.userOption.column, "roleId");
-        if (this.loginForm.roleId.includes(",")) {
-          column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
-          column.display = true;
-        } else {
-          column.dicUrl = '';
-        }
+    'loginForm.roleId'() {
+      const column = this.findObject(this.userOption.column, "roleId");
+      if (this.loginForm.roleId.includes(",")) {
+        column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
+        column.display = true;
+      } else {
+        column.dicUrl = '';
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["tagWel", "userInfo"])
+  },
+  props: [],
+  methods: {
+    refreshCode() {
+      if (this.website.captchaMode) {
+        getCaptcha().then(res => {
+          const data = res.data;
+          this.loginForm.key = data.key;
+          this.loginForm.image = data.image;
+        })
       }
     },
-    computed: {
-      ...mapGetters(["tagWel", "userInfo"])
+    showPassword() {
+      this.passwordType === ""
+        ? (this.passwordType = "password")
+        : (this.passwordType = "");
     },
-    props: [],
-    methods: {
-      refreshCode() {
-        if (this.website.captchaMode) {
-          getCaptcha().then(res => {
-            const data = res.data;
-            this.loginForm.key = data.key;
-            this.loginForm.image = data.image;
-          })
-        }
-      },
-      showPassword() {
-        this.passwordType === ""
-          ? (this.passwordType = "password")
-          : (this.passwordType = "");
-      },
-      submitLogin (form, done) {
-        if (form.deptId !== '') {
-          this.loginForm.deptId = form.deptId;
+    submitLogin(form, done) {
+      if (form.deptId !== '') {
+        this.loginForm.deptId = form.deptId;
+      }
+      if (form.roleId !== '') {
+        this.loginForm.roleId = form.roleId;
+      }
+      this.handleLogin();
+      done();
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          const loading = this.$loading({
+            lock: true,
+            text: '登录中,请稍后。。。',
+            spinner: "el-icon-loading"
+          });
+          this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
+            if (this.website.switchMode) {
+              const deptId = this.userInfo.dept_id;
+              const roleId = this.userInfo.role_id;
+              if (deptId.includes(",") || roleId.includes(",")) {
+                this.loginForm.deptId = deptId;
+                this.loginForm.roleId = roleId;
+                this.userBox = true;
+                loading.close();
+                return false;
+              }
+            }
+            this.$router.push({path: this.tagWel.value});
+            loading.close();
+          }).catch(() => {
+            loading.close();
+            this.refreshCode();
+          });
         }
-        if (form.roleId !== '') {
-          this.loginForm.roleId = form.roleId;
+      });
+    },
+    getTenant() {
+      let domain = getTopUrl();
+      // 临时指定域名，方便测试
+      // domain = "https://bladex.vip";
+      info(domain).then(res => {
+        const data = res.data;
+        if (data.success && data.data.tenantId) {
+          this.tenantMode = false;
+          this.loginForm.tenantId = data.data.tenantId;
+          this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
         }
-        this.handleLogin();
-        done();
-      },
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            const loading = this.$loading({
-              lock: true,
-              text: '登录中,请稍后。。。',
-              spinner: "el-icon-loading"
-            });
-            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
-              if (this.website.switchMode) {
-                const deptId = this.userInfo.dept_id;
-                const roleId = this.userInfo.role_id;
-                if (deptId.includes(",") || roleId.includes(",")) {
-                  this.loginForm.deptId = deptId;
-                  this.loginForm.roleId = roleId;
-                  this.userBox = true;
-                  loading.close();
-                  return false;
-                }
-              }
-              this.$router.push({path: this.tagWel.value});
-              loading.close();
-            }).catch(() => {
-              loading.close();
-              this.refreshCode();
-            });
-          }
-        });
-      },
-      getTenant() {
-        let domain = getTopUrl();
-        // 临时指定域名，方便测试
-        // domain = "https://bladex.vip";
-        info(domain).then(res => {
-          const data = res.data;
-          if (data.success && data.data.tenantId) {
-            this.tenantMode = false;
-            this.loginForm.tenantId = data.data.tenantId;
-            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
-          }
-        })
-      }
+      })
     }
-  };
+  }
+};
 </script>
 
 <style>