linwe
2024-06-27 5a15bad0c4da87bc0da1f44a89b34c52d64b713b
src/page/login/userlogin.vue
@@ -1,6 +1,6 @@
<template>
    <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
        <!-- <el-form-item v-if="tenantMode" prop="tenantId">
  <el-form class="login-form" status-icon :rules="loginRules" ref="loginForm" :model="loginForm" label-width="0">
    <!-- <el-form-item v-if="tenantMode" prop="tenantId">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.tenantId"
@@ -9,20 +9,20 @@
        <i slot="prefix" class="icon-quanxian"/>
      </el-input>
    </el-form-item> -->
        <el-form-item prop="username">
            <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
                :placeholder="$t('login.username')">
                <i slot="prefix" class="icon-yonghu" />
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
                auto-complete="off" :placeholder="$t('login.password')">
                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword" />
                <i slot="prefix" class="icon-mima" />
            </el-input>
        </el-form-item>
        <!-- <el-form-item v-if="this.website.captchaMode" prop="code">
    <el-form-item prop="username">
      <el-input size="small" @keyup.enter.native="handleLogin" v-model="loginForm.username" auto-complete="off"
        :placeholder="$t('login.username')">
        <i slot="prefix" class="icon-yonghu" />
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small" @keyup.enter.native="handleLogin" :type="passwordType" v-model="loginForm.password"
        auto-complete="off" :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword" />
        <i slot="prefix" class="icon-mima" />
      </el-input>
    </el-form-item>
    <!-- <el-form-item v-if="this.website.captchaMode" prop="code">
      <el-row :span="24">
        <el-col :span="16">
          <el-input size="small"
@@ -41,221 +41,236 @@
        </el-col>
      </el-row>
    </el-form-item> -->
        <el-form-item>
            <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">{{
    <el-form-item>
      <el-button type="primary" size="small" @click.native.prevent="handleLogin" class="login-submit">{{
                $t('login.submit') }}
            </el-button>
        </el-form-item>
        <el-dialog title="用户信息选择" append-to-body :visible.sync="userBox" width="350px">
            <avue-form :option="userOption" v-model="userForm" @submit="submitLogin" />
        </el-dialog>
    </el-form>
      </el-button>
    </el-form-item>
    <el-dialog title="用户信息选择" append-to-body :visible.sync="userBox" width="350px">
      <avue-form :option="userOption" v-model="userForm" @submit="submitLogin" />
    </el-dialog>
  </el-form>
</template>
<script>
import Layout from "@/page/index/"
import { mapGetters } from "vuex"
import { info } from "@/api/system/tenant"
// import {getCaptcha} from "@/api/user";
import { getTopUrl } from "@/util/util"
  import Layout from "@/page/index/"
  import {
    mapGetters
  } from "vuex"
  import {
    info
  } from "@/api/system/tenant"
  // import {getCaptcha} from "@/api/user";
  import {
    getTopUrl
  } from "@/util/util"
export default {
  export default {
    name: "userlogin",
    data () {
        return {
            tenantMode: this.website.tenantMode,
            loginForm: {
                //租户ID
                tenantId: "000000",
                //部门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"
                        }],
                    },
                    {
                        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"
                        }],
                    },
                ]
            }
        }
    },
    created () {
        this.getTenant()
        //   this.refreshCode();
    },
    mounted () {
    },
    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 = ''
            }
    data() {
      return {
        tenantMode: this.website.tenantMode,
        loginForm: {
          //租户ID
          tenantId: "000000",
          //部门ID
          deptId: "",
          //角色ID
          roleId: "",
          //用户名
          username: "",
          //密码
          password: "",
          //账号类型
          type: "account",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
        },
        '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 = ''
        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"
              }],
            },
            {
              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"
              }],
            },
          ]
        }
      }
    },
    created() {
      this.getTenant()
      //   this.refreshCode();
    },
    mounted() {},
    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 = ''
        }
      }
    },
    computed: {
        ...mapGetters(["tagWel", "userInfo"])
      ...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
        //         })
        //     }
        // },
        showPassword () {
            this.passwordType === ""
                ? (this.passwordType = "password")
                : (this.passwordType = "")
        },
        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((res) => {
                        if (res.error) {
                            loading.close()
                            return
                        }
                        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
                                this.$store.dispatch("LogOut").then(() => {
                                    loading.close()
                                })
                                return false
                            }
                        }
                        this.$router.$avueRouter.formatRoutes(res.menuData, true)
                        this.$router.push({ path: res.fistMenu.path })
                        loading.close()
                    }).catch(() => {
                        loading.close()
                        // this.refreshCode()
                    })
                }
            })
        },
        getTenant () {
            let domain = getTopUrl()
            // 临时指定域名,方便测试
            //domain = "https://bladex.cn";
            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})`
                }
            })
      // 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
        }
        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((res) => {
              if (res.error) {
                loading.close()
                return
              }
              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
                  this.$store.dispatch("LogOut").then(() => {
                    loading.close()
                  })
                  return false
                }
              }
              this.$router.$avueRouter.formatRoutes(res.menuData, true)
              this.$router.push({
                path: res.fistMenu.path
              })
              loading.close()
            }).catch(() => {
              loading.close()
              // this.refreshCode()
            })
          }
        })
      },
      getTenant() {
        let domain = getTopUrl()
        // 临时指定域名,方便测试
        //domain = "https://bladex.cn";
        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></style>
<style></style>