gaoshp
2024-11-19 f29900986f01cf5d39b5755cec674825cef27961
src/views/login/components/passwordForm.vue
@@ -1,127 +1,187 @@
<template>
   <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
   <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login"
      class="login-form">
      <el-form-item prop="user">
         <el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
            <template #append>
               <el-select v-model="userType" style="width: 130px;">
                  <el-option :label="$t('login.admin')" value="admin"></el-option>
                  <el-option :label="$t('login.user')" value="user"></el-option>
               </el-select>
            </template>
         <el-input v-model="form.user" prefix-icon="el-icon-user" clearable
            :placeholder="$t('login.userPlaceholder')" class="inputHeight">
         </el-input>
      </el-form-item>
      <el-form-item prop="password">
         <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px;">
            <el-col :span="12">
               <el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
            </el-col>
            <el-col :span="12" class="login-forgot">
               <router-link to="/reset_password">{{ $t('login.forgetPassword') }}?</router-link>
            </el-col>
         <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
            :placeholder="$t('login.PWPlaceholder')" class="inputHeight"></el-input>
      </el-form-item>
      <el-form-item>
         <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
         <el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">{{ $t('login.signIn')
            }}</el-button>
      </el-form-item>
      <div class="login-reg">
         {{$t('login.noAccount')}} <router-link to="/user_register">{{$t('login.createAccount')}}</router-link>
      </div>
   </el-form>
</template>
<script>
   export default {
      data() {
         return {
            userType: 'admin',
            form: {
               user: "admin",
               password: "admin",
               autologin: false
            },
            rules: {
               user: [
                  {required: true, message: this.$t('login.userError'), trigger: 'blur'}
               ],
               password: [
                  {required: true, message: this.$t('login.PWError'), trigger: 'blur'}
               ]
            },
            islogin: false,
         }
      },
      watch:{
         userType(val){
            if(val == 'admin'){
               this.form.user = 'admin'
               this.form.password = 'admin'
            }else if(val == 'user'){
               this.form.user = 'user'
               this.form.password = 'user'
            }
         }
      },
      mounted() {
      },
      methods: {
         async login(){
            var validate = await this.$refs.loginForm.validate().catch(()=>{})
            if(!validate){ return false }
            this.islogin = true
            var data = {
               username: this.form.user,
               password: this.$TOOL.crypto.MD5(this.form.password)
            }
            //获取token
            var user = await this.$API.auth.token.post(data)
            if(user.code == 200){
               this.$TOOL.cookie.set("TOKEN", user.data.token, {
                  expires: this.form.autologin? 24*60*60 : 0
               })
               this.$TOOL.data.set("USER_INFO", user.data.userInfo)
            }else{
               this.islogin = false
               this.$message.warning(user.message)
               return false
            }
            //获取菜单
            var menu = null
            if(this.form.user == 'admin'){
               menu = await this.$API.system.menu.myMenus.get()
            }else{
               menu = await this.$API.demo.menu.get()
            }
            if(menu.code == 200){
               if(menu.data.menu.length==0){
                  this.islogin = false
                  this.$alert("当前用户无任何菜单权限,请联系系统管理员", "无权限访问", {
                     type: 'error',
                     center: true
                  })
                  return false
               }
               this.$TOOL.data.set("MENU", menu.data.menu)
               this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
               this.$TOOL.data.set("DASHBOARDGRID", menu.data.dashboardGrid)
            }else{
               this.islogin = false
               this.$message.warning(menu.message)
               return false
            }
            this.$router.replace({
               path: '/'
            })
            this.$message.success("Login Success 登录成功")
            this.islogin = false
//import io from 'socket.io-client';
export default {
   data() {
      return {
         socket: null,
         userType: 'admin',
         form: {
            user: "",
            password: "",
            autologin: false
         },
         rules: {
            user: [
               { required: true, message: this.$t('login.userError'), trigger: 'blur' }
            ],
            password: [
               { required: true, message: this.$t('login.PWError'), trigger: 'blur' }
            ]
         },
         islogin: false,
      }
   },
   watch: {
      userType(val) {
         if (val == 'admin') {
            this.form.user = 'admin'
            this.form.password = 'admin'
         } else if (val == 'user') {
            this.form.user = 'user'
            this.form.password = 'user'
         }
      }
   },
   mounted() {
      //this.$HTTP.get('/api/blade-sync/outer-app-config/appStatus')
   },
   methods: {
      async login() {
         var validate = await this.$refs.loginForm.validate().catch(() => { })
         if (!validate) { return false }
         this.islogin = true
         var data = {
            username: this.form.user,
            //password: this.$TOOL.crypto.MD5(this.form.password)
            password: this.form.password,
            tenantId: "000000",
            grant_type: "password",
            scope: "all"
         }
         var isToken = false;
         await this.$HTTP.postJ("/api/blade-auth/oauth/token?" + this.$TOOL.qsStringify(data)).then(res => {
            this.islogin = false;
            if (res.user_id) {
               isToken = true;
               //获取token
               this.$TOOL.cookie.set("TOKEN", res.access_token, {
                  expires: this.form.autologin ? 24 * 60 * 60 : 0
               })
               res.userName = res.user_name;
               res.role = ["SA", "admin", "Auditor"];
               res.dashboard = "0";
               res.userId = "1";
               this.$TOOL.data.set("USER_INFO", res);
            } else {
               this.$message({
                  showClose: true,
                  message: res.msg || res.error_description,
                  type: 'error'
               });
            }
         })
         if (!isToken) return;
         //获取菜单
         await this.$HTTP.get("/api/blade-system/menu/routes?" + this.$TOOL.qsStringify({ "appCode": "CPS" })).then(res => {
            if (res.data.length == 0) {
               this.islogin = false
               this.$alert("当前用户无任何菜单权限,请联系系统管理员", "无权限访问", {
                  type: 'error',
                  center: true
               })
               return false
            }
            //开始
            function addComponentToLastLevel(items) {
               return items.map((item) => {
                  // 复制当前项,避免直接修改原始对象
                  const clonedItem = { ...item };
                  // 检查当前项是否有 children 属性
                  if (clonedItem.children) {
                     // 递归处理 children
                     clonedItem.children = addComponentToLastLevel(clonedItem.children);
                  } else {
                     // 如果没有 children 属性,说明是最后一级,添加 component 对象
                     var len = clonedItem.path.length;
                     if (item.name == "任务调度") {
                        clonedItem.origin = item.path;
                        clonedItem.component = "myiframe/urlPath";   //有component不可以使用iframe
                        clonedItem.path = "/myiframe/urlPath";
                     } else {
                        clonedItem.component = clonedItem.path.substring(1, len);
                     }
                  }
                  clonedItem.meta = { title: clonedItem.name, icon: "el-icon-takeaway-box", type: "menu" }
                  return clonedItem;
               });
            }
            var transformedArray = addComponentToLastLevel(res.data);
            //获取多个工作台
            this.$HTTP.get("/api/blade-system/workbench/list?status=1").then(resp => {
               if (resp.data.length) {
                  resp.data.forEach((item, index) => {
                     item.component = "home";
                     item.meta = { title: item.name, icon: 'el-icon-menu', affix: true };
                     item.path = "/dashboard";
                     item.parentId = item.id;
                  })
                  transformedArray.unshift({
                     children: resp.data,
                     code: "desk",
                     component: "console/desk",
                     id: "001",
                     meta: {title: '首页', icon: 'el-icon-takeaway-box', type: 'menu'},
                     name: "首页",
                     path: "/home"
                  });
                  transformedArray.forEach((item,index)=>{
                     if(item.name == "仪表板") {
                        transformedArray.splice(1,index);
                     }
                  })
                  var obj = {
                     dashboardGrid: ["Access", "deskNotice", "Entrance"],
                     menu: transformedArray,
                     permissions: ["list.add", "list.edit", "list.delete", "user.add", "user.edit", "user.delete"]
                  }
                  this.$TOOL.data.set("MENU", obj.menu);
                  console.log(obj.menu, 'menu')
                  this.$TOOL.data.set("PERMISSIONS", obj.permissions)
                  this.$TOOL.data.set("DASHBOARDGRID", obj.dashboardGrid)
                  this.$router.replace({
                     path: '/'
                  })
                  // this.$message.success("Login Success 登录成功")
                  this.islogin = false;
               }
            })
         })
      }
   }
}
</script>
<style>
.login-form {
   margin: 0 auto;
   margin-top: 46px;
   width: 294px;
}
.inputHeight {
   height: 40px;
   line-height: 40px;
}
</style>