代码提交

.env.development

@@ -18,6 +18,4 @@ VITE_PWA = false
 VITE_API_URL = /api
 
 # 开发环境跨域代理，支持配置多个
-VITE_PROXY = [["/api","https://mock.mengxuegu.com/mock/629d727e6163854a32e8307e"]]
-# VITE_PROXY = [["/api","https://www.fastmock.site/mock/f81e8333c1a9276214bcdbc170d9e0a0"]]
-# VITE_PROXY = [["/api-easymock","https://mock.mengxuegu.com"],["/api-fastmock","https://www.fastmock.site"]]
+VITE_PROXY = [["/api","http://192.168.43.77:18088"]]

src/api/config/servicePort.ts

@@ -1,2 +1,2 @@
 // 后端微服务模块前缀
-export const PORT1 = "/geeker";
+export const PORT1 = "";

src/api/interface/index.ts

@@ -1,4 +1,6 @@
 // 请求响应参数（不包含data）
+import {asInfos, user} from "@/stores/interface";
+
 export interface Result {
   code: string;
   msg: string;
@@ -39,6 +41,8 @@ export namespace Login {
   }
   export interface ResLogin {
     access_token: string;
+    user: user;
+    asInfo:[]
   }
   export interface ResAuthButtons {
     [key: string]: string[];

src/layouts/components/Header/components/Avatar.vue

@@ -4,7 +4,7 @@
       <div class="avatar">
         <img src="@/assets/images/avatar.png" alt="avatar" />
       </div>
-      <div class="username">{{ username }}</div>
+      <div class="username">{{ username+'('+userJob+')' }}</div>
       <img class="chevron-down" src="@/assets/images/chevron_down.png" />
     </div>
     <template #dropdown>
@@ -42,7 +42,8 @@ import PasswordDialog from "./PasswordDialog.vue";
 import mittBus from "@/utils/mittBus";
 const router = useRouter();
 const userStore = useUserStore();
-const username = computed(() => userStore.userInfo.name);
+const username = computed(() => userStore.userInfo.user_name);
+const userJob = computed(() => userStore.userInfo.user_job);
 
 const openDrawer = () => {
   mittBus.emit("openThemeDrawer");

src/layouts/components/Header/components/InfoDialog.vue

@@ -2,49 +2,44 @@
   <el-dialog v-model="dialogVisible" title="个人信息" width="700px" draggable>
     <el-form ref="formRef" :model="userForm"  label-width="120px">
       <el-form-item label="用户账号:" prop="account">
-       {{userForm.account}}
+       {{userForm.user_account}}
       </el-form-item>
       <el-form-item label="角色:" prop="role">
-        {{userForm.role}}
+        {{userForm.role_id}}
       </el-form-item>
       <el-form-item label="关联台站:" prop="stations">
-        {{userForm.stations}}
+        {{formatData(asInfoForm)}}
       </el-form-item>
       <el-form-item label="用户姓名:" prop="name">
-        {{userForm.name}}
+        {{userForm.user_name}}
       </el-form-item>
       <el-form-item label="职务:" prop="post">
-        {{userForm.post}}
+        {{userForm.user_job}}
       </el-form-item>
       <el-form-item label="所属单位:" prop="affiliation">
-       {{userForm.affiliation}}
+       {{userForm.user_unit}}
       </el-form-item>
       <el-form-item label="联系电话:" prop="phone">
-        {{userForm.phone}}
+        {{userForm.user_phone}}
       </el-form-item>
     </el-form>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="dialogVisible = false">确认</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
-const userForm = ref<any>({
-  account: "Admin",
-  role: "观测员",
-  stations:"便携站",
-  name: "王武",
-  post: "装备保障人员",
-  affiliation: "某个气象局",
-  phone: "18088888888"
-});
-
+import {computed, ref} from "vue";
+import {useUserStore} from "@/stores/modules/user";
+const userStore = useUserStore();
+const userForm  = computed(() => userStore.userInfo);
+const asInfoForm  = computed(() => userStore.asInfo);
+const formatData=(data)=> {
+  return data.map(item => `${item.as_name}（${item.as_code}）`).join(', ');
+}
 const dialogVisible = ref(false);
 const openDialog = () => {
   dialogVisible.value = true;

src/layouts/components/Header/components/Message.vue

@@ -2,7 +2,7 @@
   <div class="message">
     <el-popover placement="bottom" :width="310" trigger="click">
       <template #reference>
-        <el-badge :value="5" class="item">
+        <el-badge  class="item">
           <i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
         </el-badge>
       </template>

src/stores/interface/index.ts

@@ -29,7 +29,28 @@ export interface GlobalState {
 /* UserState */
 export interface UserState {
   token: string;
-  userInfo: { name: string };
+  userInfo: user;
+  asInfo:Array <asInfos>
+}
+
+export interface user {
+  name: string,
+  user_account:string,
+  user_id:string,
+  role_id:string,
+  user_job:string,
+  user_password:string,
+  user_name:string,
+  user_phone:string,
+  user_unit:string,
+  role_name:string,
+  role_permissions:string
+}
+
+export interface asInfos {
+  user_id:string,
+  as_code:string,
+  as_name:string
 }
 
 /* tabsMenuProps */

src/stores/modules/user.ts

@@ -3,10 +3,11 @@ import { UserState } from "@/stores/interface";
 import piniaPersistConfig from "@/stores/helper/persist";
 
 export const useUserStore = defineStore({
-  id: "geeker-user",
-  state: (): UserState => ({
+  id: "atmosphere-user1",
+  state: (): UserState => <UserState>({
     token: "",
-    userInfo: { name: "Geeker" }
+    userInfo: {},
+    asInfo:[]
   }),
   getters: {},
   actions: {
@@ -17,7 +18,10 @@ export const useUserStore = defineStore({
     // Set setUserInfo
     setUserInfo(userInfo: UserState["userInfo"]) {
       this.userInfo = userInfo;
+    },
+    setAsInfo(asInfo: UserState["asInfo"]) {
+      this.asInfo = asInfo;
     }
   },
-  persist: piniaPersistConfig("geeker-user")
+  persist: piniaPersistConfig("atmosphere-user1")
 });

src/views/login/components/LoginForm.vue

@@ -70,8 +70,11 @@ const login = (formEl: FormInstance | undefined) => {
 
     try {
       // 1.执行登录接口
-      const { data } = await loginApi({ ...loginForm, password: md5(loginForm.password) });
-      userStore.setToken(data.access_token);
+      const { data } = await loginApi({ ...loginForm, password: loginForm.password });
+
+      userStore.setToken(Date.now().toString());
+      userStore.setUserInfo(data.user)
+      userStore.setAsInfo(data.asInfo)
 
       // 2.添加动态路由
       await initDynamicRouter();