系统权限添加

.env.development

@@ -1,2 +1,2 @@
 NODE_ENV = development
-VITE_API_URL = http://173.18.12.205:8002
+VITE_API_URL = http://173.18.12.205:8005

src/router/index.ts

@@ -152,33 +152,33 @@ const router = createRouter({
           component: OpenPlatform,
           children: [],
         },
-        // {
-        //   path: "kgpermission",
-        //   name: "kgpermission",
-        //   meta: {
-        //     title: "系统权限",
-        //   },
-        //   redirect: "/kmplatform/kgpermission/AccountManage",
-        //   component: PermissionManage,
-        //   children: [
-        //     {
-        //       path: "RoleManage",
-        //       name: "kgb-RoleManage",
-        //       meta: {
-        //         title: "角色管理",
-        //       },
-        //       component: RoleManage,
-        //     },
-        //     {
-        //       path: "AccountManage",
-        //       name: "kgb-AccountManage",
-        //       meta: {
-        //         title: "账号管理",
-        //       },
-        //       component: AccountManage,
-        //     },
-        //   ],
-        // },
+        {
+          path: "kgpermission",
+          name: "kgpermission",
+          meta: {
+            title: "系统权限",
+          },
+          redirect: "/kmplatform/kgpermission/AccountManage",
+          component: PermissionManage,
+          children: [
+            {
+              path: "RoleManage",
+              name: "kgb-RoleManage",
+              meta: {
+                title: "角色管理",
+              },
+              component: RoleManage,
+            },
+            {
+              path: "AccountManage",
+              name: "kgb-AccountManage",
+              meta: {
+                title: "账号管理",
+              },
+              component: AccountManage,
+            },
+          ],
+        },
       ],
     },
   ],

src/stores/menu.js

@@ -2,36 +2,41 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useMenuStore = defineStore('menu', () => {
-  const routeList = ref([{
-    path: '/kmplatform/home',
-    name: 'kmplatform-home',
-    title: "主页",
-    children: []
-  },
-  {
-    path: '/kmplatform/knowledgebase',
-    name: 'knowledgebase',
-    title: "知识库",
-    children: []
-  },
-  {
-    path: '/kmplatform/kgbuilder',
-    name: 'kgbuilder',
-    title: "知识图谱构建",
-    children: []
-  },
-  {
-    path: '/kmplatform/openplatform',
-    name: 'openplatform',
-    title: "开放平台",
-    children: []
-  },
-  // {
-  //   path: '/kmplatform/kgpermission',
-  //   name: 'kgpermission',
-  //   title: "系统权限",
-  //   children: []
-  // }
-])
-  return { routeList }
+  let routeList = ref([])
+//   const routeList = ref([{
+//     path: '/kmplatform/home',
+//     name: 'kmplatform-home',
+//     title: "主页",
+//     children: []
+//   },
+//   {
+//     path: '/kmplatform/knowledgebase',
+//     name: 'knowledgebase',
+//     title: "知识库",
+//     children: []
+//   },
+//   {
+//     path: '/kmplatform/kgbuilder',
+//     name: 'kgbuilder',
+//     title: "知识图谱构建",
+//     children: []
+//   },
+//   {
+//     path: '/kmplatform/openplatform',
+//     name: 'openplatform',
+//     title: "开放平台",
+//     children: []
+//   },
+//   {
+//     path: '/kmplatform/kgpermission',
+//     name: 'kgpermission',
+//     title: "系统权限",
+//     children: []
+//   }
+// ])
+
+const updateRouteList = (newRoutes) => {
+    routeList.value = newRoutes; // 更新路由列表
+  };
+  return { routeList,updateRouteList }
 })

src/utils/http.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
+import { getSessionVar,deleteSessionVar } from "@/utils/session";
 // 创建 axios 实例
 const http = axios.create({
   baseURL: '',  // 设置基本 URL
@@ -12,7 +13,10 @@ http.interceptors.request.use(
     // 在发送请求之前做些什么
     // console.log('请求被拦截:', config);
     // 例如：添加 token 到请求头
-    config.headers['Authorization'] = 'Bearer your_token_here';
+    // config.headers['Authorization'] = 'Bearer your_token_here';
+    if (getSessionVar('session_id') != null && getSessionVar('username') != null){
+            config.headers.Authorization = 'Beaver ' + getSessionVar('username') + ' ' + getSessionVar('session_id');
+      }
     return config;  // 必须返回 config，否则请求不会被发送
   },
   (error) => {
@@ -30,11 +34,10 @@ http.interceptors.request.use(
 http.interceptors.response.use(
   (response) => {
     // 对响应数据做些什么
-    // console.log('响应被拦截:', response);
     // 可以在此处理响应数据
     const { data, code, message } = response.data
     if (code === 200) {
-      return data
+      return data || response.data
     } else {
       ElMessage({
         message: message,

src/views/AppCopy.vue

@@ -1,69 +1,145 @@
 <template>
   <el-container v-if="isLoggedIn == false" class="login-box">
-    <div style="width: 50%;"></div>
+    <div style="width: 50%"></div>
     <div class="login-container">
-  <div class="login-header">
-      <!-- <h1>知识图谱自动化构建平台</h1><br> -->
-      <h1>欢迎{{isSignedIn? '注册' : '登录'}}知识图谱自动化构建平台</h1>
-    </div>
+      <div class="login-header">
+        <!-- <h1>知识图谱自动化构建平台</h1><br> -->
+        <h1>欢迎{{ isSignedIn ? "注册" : "登录" }}知识图谱自动化构建平台</h1>
+      </div>
 
-    <div v-if="isSignedIn == false">
-      <el-form v-model="loginForm">
-        <el-form-item label="用户名" :label-width="loginForm.formLabelWidth" size="large">
-          <el-input v-model="loginForm.username" name="username" placeholder="请输入用户名"></el-input>
-        </el-form-item>
-        <el-form-item label="密码" :label-width="loginForm.formLabelWidth" size="large">
-          <el-input v-model="loginForm.password" name="password" type="password" placeholder="请输入密码"></el-input>
-        </el-form-item>
-        <el-form-item label="" :label-width="loginForm.formLabelWidth">
-          <el-button type="primary" @click="handleLoginSubmit">登录</el-button>
-          <el-button type="success" @click="handleSignIn">注册</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <div v-if="isSignedIn == true">
-      <!-- <div>
+      <div v-if="isSignedIn == false">
+        <el-form v-model="loginForm">
+          <el-form-item
+            label="用户名"
+            :label-width="loginForm.formLabelWidth"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.username"
+              name="username"
+              placeholder="请输入用户名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="密码"
+            :label-width="loginForm.formLabelWidth"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.password"
+              name="password"
+              type="password"
+              placeholder="请输入密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="" :label-width="loginForm.formLabelWidth">
+            <el-button type="primary" @click="handleLoginSubmit"
+              >登录</el-button
+            >
+            <el-button type="success" @click="handleSignIn">注册</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div v-if="isSignedIn == true">
+        <!-- <div>
         <h1>注册</h1>
       </div> -->
 
-      <el-form :model="loginForm" :rules="signinRules" ref="signinForm">
-        <el-form-item label="用户名" :label-width="loginForm.formLabelWidth" prop="username" size="large">
-          <el-input v-model="loginForm.username" name="username" placeholder="请输入用户名"></el-input>
-        </el-form-item>
-        <el-form-item label="显示姓名" :label-width="loginForm.formLabelWidth" prop="full_name" size="large">
-          <el-input v-model="loginForm.full_name" name="full_name" placeholder="请输入姓名"></el-input>
-        </el-form-item>
-        <el-form-item label="密码" :label-width="loginForm.formLabelWidth" prop="password" size="large">
-          <el-input v-model="loginForm.password" name="password" type="password" placeholder="请输入密码"></el-input>
-        </el-form-item>
-        <el-form-item lable="密码确认" :label-width="loginForm.formLabelWidth" prop="password2" size="large">
-          <el-input v-model="loginForm.password2" name="password2" type="password" placeholder="请再次输入密码"></el-input>
-        </el-form-item>
-        <el-form-item label="邮箱" :label-width="loginForm.formLabelWidth" prop="email" size="large">
-          <el-input v-model="loginForm.email" name="email" placeholder="请输入邮箱"></el-input>
-        </el-form-item>
-        <el-form-item label="" :label-width="loginForm.formLabelWidth">
-          <el-button type="primary" @click="handleSignInSubmit">注册</el-button>
-          <el-button type="success" @click="handleSignIn">登录</el-button>
-        </el-form-item>
-      </el-form>
+        <el-form :model="loginForm" :rules="signinRules" ref="signinForm">
+          <el-form-item
+            label="用户名"
+            :label-width="loginForm.formLabelWidth"
+            prop="username"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.username"
+              name="username"
+              placeholder="请输入用户名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="显示姓名"
+            :label-width="loginForm.formLabelWidth"
+            prop="full_name"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.full_name"
+              name="full_name"
+              placeholder="请输入姓名"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="密码"
+            :label-width="loginForm.formLabelWidth"
+            prop="password"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.password"
+              name="password"
+              type="password"
+              placeholder="请输入密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            lable="密码确认"
+            :label-width="loginForm.formLabelWidth"
+            prop="password2"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.password2"
+              name="password2"
+              type="password"
+              placeholder="请再次输入密码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label="邮箱"
+            :label-width="loginForm.formLabelWidth"
+            prop="email"
+            size="large"
+          >
+            <el-input
+              v-model="loginForm.email"
+              name="email"
+              placeholder="请输入邮箱"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="" :label-width="loginForm.formLabelWidth">
+            <el-button type="primary" @click="handleSignInSubmit"
+              >注册</el-button
+            >
+            <el-button type="success" @click="handleSignIn">登录</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
-    </div>
-  
   </el-container>
   <el-container class="main-container" v-if="isLoggedIn">
     <el-header class="site_header">
       <el-row>
-
         <el-col :span="18">
-          <div style="margin-top:8px;font-size:large;font-weight: bold;">
-            <span style="vertical-align: middle;">知识图谱自动化构建平台</span>
+          <div style="margin-top: 8px; font-size: large; font-weight: bold">
+            <span style="vertical-align: middle">知识图谱自动化构建平台</span>
             <span class="knowledge-base-icon" @click="goToKMPlatform"></span>
           </div>
         </el-col>
-        <el-col :span="6" style="justify-content:flex-end;display: flex; flex-direction: row;margin-top:8px;">
-          <el-dropdown style="margin-top:10px">
-            <div style="font-size:medium;font-weight: bold; color:#000">{{ user.full_name }}</div>
+        <el-col
+          :span="6"
+          style="
+            justify-content: flex-end;
+            display: flex;
+            flex-direction: row;
+            margin-top: 8px;
+          "
+        >
+          <el-dropdown style="margin-top: 10px">
+            <div style="font-size: medium; font-weight: bold; color: #000">
+              {{ user.full_name }}
+            </div>
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>用户资料</el-dropdown-item>
@@ -72,13 +148,15 @@
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-
         </el-col>
       </el-row>
     </el-header>
     <el-container>
       <el-aside class="main-aside">
-        <SideMenu @selectQueue="onSelectQueue" @selectMenu="onSelectMenu"></SideMenu>
+        <SideMenu
+          @selectQueue="onSelectQueue"
+          @selectMenu="onSelectMenu"
+        ></SideMenu>
       </el-aside>
       <el-main class="content-area">
         <!-- 主要内容区域 -->
@@ -90,29 +168,35 @@
   </el-container>
 </template>
 <script setup lang="ts">
-import { onMounted, ref,watch, watchEffect } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { RouterView } from 'vue-router'
-import SideMenu from '@/components/SideMenu.vue'
-import { userLogin, userSignin } from '@/api/AgentApi'
-import { deleteSessionVar, getSessionVar, saveSessionVar } from '@/utils/session'
-import { ElNotification, ElMessageBox } from 'element-plus'
+import { onMounted, ref, watch, watchEffect } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { RouterView } from "vue-router";
+import SideMenu from "@/components/SideMenu.vue";
+import { userLogin, userSignin } from "@/api/AgentApi";
+import {
+  deleteSessionVar,
+  getSessionVar,
+  saveSessionVar,
+} from "@/utils/session";
+import { ElNotification, ElMessageBox } from "element-plus";
+import { useMenuStore } from "@/stores/menu.js";
+const { updateRouteList } = useMenuStore();
 const router = useRouter();
-const route = useRoute()
+const route = useRoute();
 // console.log('router', router.getRoutes(), route)
-const isSignedIn = ref(false)
+const isSignedIn = ref(false);
 const loginForm = ref({
-  username: '',
-  password: '',
-  full_name: '',
-  password2: '',
-  email: '',
-  formLabelWidth: 100
-})
-const signinForm = ref()
+  username: "",
+  password: "",
+  full_name: "",
+  password2: "",
+  email: "",
+  formLabelWidth: 100,
+});
+const signinForm = ref();
 
 function goToKMPlatform() {
-  router.push({ name: 'kmplatform' })
+  router.push({ name: "kmplatform" });
 }
 
 const validatePassword = (rule: any, value: any, callback: Function) => {
@@ -138,7 +222,7 @@ const validatePassword2 = (rule, value, callback) => {
 const signinRules = ref({
   username: [
     { required: true, message: "请输入用户名", trigger: "blur" },
-    { min: 3, max: 20, message: "长度在 3 到 10 个字符", trigger: "blur" }
+    { min: 3, max: 20, message: "长度在 3 到 10 个字符", trigger: "blur" },
   ],
   full_name: [
     { required: true, message: "请输入姓名", trigger: "blur" },
@@ -153,16 +237,19 @@ const signinRules = ref({
   ],
   email: [
     { required: true, message: "请输入邮箱", trigger: "blur" },
-    { type: "email", message: "请输入有效的邮箱地址", trigger: ["blur", "change"] },
+    {
+      type: "email",
+      message: "请输入有效的邮箱地址",
+      trigger: ["blur", "change"],
+    },
   ],
-
-})
-const isLoggedIn = ref(false)
+});
+const isLoggedIn = ref(false);
 const user = ref({
   id: "0",
-  full_name: 'John Doe',
-  username: 'johndoe',
-})
+  full_name: "John Doe",
+  username: "johndoe",
+});
 //校验注册信息
 const onSelectQueue = (idData: any) => {
   // console.log(router.getRoutes());
@@ -171,17 +258,17 @@ const onSelectQueue = (idData: any) => {
   // 可以使用 router.push 方法来实现路由跳转
 
   router.push({ path: `/workspace/queue/${idData.id}` });
-}
+};
 const onSelectMenu = (menuData: any) => {
   if (menuData.name == "graph") {
-    router.push({ path: `/workspace/graph` })
+    router.push({ path: `/workspace/graph` });
   }
-}
+};
 const handleSignIn = () => {
-  loginForm.value.username = ''
-  loginForm.value.password = ''
-  isSignedIn.value = !isSignedIn.value
-}
+  loginForm.value.username = "";
+  loginForm.value.password = "";
+  isSignedIn.value = !isSignedIn.value;
+};
 
 const handleSignInSubmit = () => {
   // console.log('submit', loginForm.value)
@@ -191,86 +278,119 @@ const handleSignInSubmit = () => {
         username: loginForm.value.username,
         password: loginForm.value.password,
         full_name: loginForm.value.full_name,
-        email: loginForm.value.email
-      }).then((res: any) => {
-        loginForm.value.password = ''
-        loginForm.value.password2 = ''
-        loginForm.value.email = ''
-        loginForm.value.full_name = ''
-        loginForm.value.username = ''
-        ElNotification({
-          title: '成功',
-          message: res.message,
-          type: 'success',
-          duration: 3000
-        })
-        isSignedIn.value = !isSignedIn.value
-      }).catch((err: any) => {
-        ElNotification({
-          title: '错误',
-          message: err.message,
-          type: 'error',
-          duration: 3000
-        })
+        email: loginForm.value.email,
       })
+        .then((res: any) => {
+          loginForm.value.password = "";
+          loginForm.value.password2 = "";
+          loginForm.value.email = "";
+          loginForm.value.full_name = "";
+          loginForm.value.username = "";
+          ElNotification({
+            title: "成功",
+            message: res.message,
+            type: "success",
+            duration: 3000,
+          });
+          isSignedIn.value = !isSignedIn.value;
+        })
+        .catch((err: any) => {
+          ElNotification({
+            title: "错误",
+            message: err.message,
+            type: "error",
+            duration: 3000,
+          });
+        });
     } else {
       console.log("表单校验失败");
     }
   });
-}
+};
 
 const handleLoginSubmit = () => {
   // console.log('submit', loginForm.value)
-  userLogin({ username: loginForm.value.username, password: loginForm.value.password }).then((res: any) => {
+  userLogin({
+    username: loginForm.value.username,
+    password: loginForm.value.password,
+  }).then((res: any) => {
     // console.log(res.records[0])
-    loginForm.value.password = ''
-    saveSessionVar("session_id", res.records[0].session_id)
-    saveSessionVar("user_id", res.records[0].user_id)
-    saveSessionVar("username", res.records[0].username)
-    saveSessionVar("full_name", res.records[0].full_name)
+    loginForm.value.password = "";
+    saveSessionVar("session_id", res.records[0].session.session_id);
+    saveSessionVar("user_id", res.records[0].session.user_id);
+    saveSessionVar("username", res.records[0].session.username);
+    saveSessionVar("full_name", res.records[0].session.full_name);
+    let knowledageSystem = '';
+    let routeList:any= [{
+    path: '/kmplatform/home',
+    name: 'kmplatform-home',
+    title: "主页",
+    children: []
+  }]
+    res.records[0].menu_permissions.forEach((item: any) => {
+      if(item.menu_name == "知识更新管理") {
+        knowledageSystem = 'true';
+      }
+      if (item.menu_route) {
+        routeList.push({
+          path: item.menu_route,
+          name: item.menu_route.split("/")[2],
+          title: item.name,
+          children: item.children,
+        }) ;
+      }
+    });
+    console.log("knowledageSystem", knowledageSystem);
+    saveSessionVar("knowledageSystem",knowledageSystem);
+
+
+    updateRouteList(routeList);
 
     user.value = {
-      id: getSessionVar('user_id') || "0",
-      full_name: getSessionVar('full_name') || 'John Doe',
-      username: getSessionVar('username') || 'johndoe',
-    }
+      id: getSessionVar("user_id") || "0",
+      full_name: getSessionVar("full_name") || "John Doe",
+      username: getSessionVar("username") || "johndoe",
+    };
 
     isLoggedIn.value = true;
-    goToKMPlatform()
-  })
-}
+    goToKMPlatform();
+  });
+};
 
 function handleLogout() {
-  deleteSessionVar("session_id")
-  deleteSessionVar("user_id")
-  deleteSessionVar("username")
-  deleteSessionVar("full_name")
-  isLoggedIn.value = false
+  deleteSessionVar("session_id");
+  deleteSessionVar("user_id");
+  deleteSessionVar("username");
+  deleteSessionVar("full_name");
+  updateRouteList([]);
+  deleteSessionVar("knowledageSystem");
+  isLoggedIn.value = false;
 }
 
 onMounted(() => {
   // 模拟从后端获取数据
   setTimeout(() => {
     user.value = {
-      id: getSessionVar('user_id') || "0",
-      full_name: getSessionVar('full_name') || 'John Doe',
-      username: getSessionVar('username') || 'johndoe',
-    }
+      id: getSessionVar("user_id") || "0",
+      full_name: getSessionVar("full_name") || "John Doe",
+      username: getSessionVar("username") || "johndoe",
+    };
     if (user.value.id != "0") {
-      isLoggedIn.value = true
+      isLoggedIn.value = true;
     } else {
-      isLoggedIn.value = false
+      isLoggedIn.value = false;
     }
 
-    router.push({ path: '/' })
-  })
-})
+    router.push({ path: "/" });
+  });
+});
 watchEffect(() => {
   // 监听路由变化
-  console.log('route changed', route)
+  console.log("route changed", route);
   if (route.query.logout) {
-    handleLogout()
-  }})
+    handleLogout();
+  }
+});
 </script>
 <style scoped>
 #app {
@@ -287,13 +407,12 @@ watchEffect(() => {
 .login-box {
   width: 100vw;
   height: 100vh;
-  background-image: url('@/assets/images/loginBanar.png');
+  background-image: url("@/assets/images/loginBanar.png");
   background-repeat: no-repeat;
   background-size: cover;
 }
 
 .login-container {
-
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -306,7 +425,7 @@ watchEffect(() => {
   background-color: #eef6ff;
   border-radius: 12px 12px 12px 12px;
 }
-.login-header{
+.login-header {
   font-size: 26px;
   font-weight: bold;
   margin-bottom: 20px;

src/views/KMPlatform/Home/Home.vue

@@ -21,17 +21,19 @@
         </div>
       </div>
       <div class="modules">
-        <div v-for="item in modules" @click="handleModuleClick(item.path)">{{ item.name }}</div>
+        <div v-for="item in modules" @click="handleModuleClick(item.path)" >{{ item.name }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import { knowledgeGraphAddr } from "@/utils/config"
+import { getSessionVar } from '@/utils/session'
 const router = useRouter()
+console.log("getSessionVar('knowledageSystem') ",getSessionVar('knowledageSystem') )
 let process = ref<any>([
   {
     image: "node-icon",
@@ -52,17 +54,39 @@ let process = ref<any>([
 let modules = ref<any>([
   {
     name: "知识库构建",
-    path: "/kmplatform/knowledgebase/kbm"
+    path: "/kmplatform/knowledgebase/kbm",
+
+
   },
   {
     name: '知识图谱构建',
-    path: "/kmplatform/kgbuilder/tm"
+    path: "/kmplatform/kgbuilder/tm",
+
   },
   {
     name: "知识图谱维护",
-    path: knowledgeGraphAddr
+    path: knowledgeGraphAddr,
+
   }
 ])
+watchEffect(() => {
+  if (getSessionVar('knowledageSystem') == '' ) {
+    modules.value = [ 
+        {
+    name: "知识库构建",
+    path: "/kmplatform/knowledgebase/kbm",
+
+
+  },
+  {
+    name: '知识图谱构建',
+    path: "/kmplatform/kgbuilder/tm",
+
+  }
+    ]
+  }
+}
+)
 
 function handleModuleClick(path: string) {
   if (/^https?/g.test(path)) {

src/views/KMPlatform/Permission/AccountManage.vue

@@ -5,27 +5,129 @@
         创建账号
       </el-button>
     </div> -->
-    <el-table :data="tableData" style="width: 100%">
-    <el-table-column prop="date" label="Date" width="180" />
-    <el-table-column prop="name" label="Name" width="180" />
-    <el-table-column prop="address" label="Address" />
+    <el-table border   :data="tableData" style="width: 80%;font-size: 20px;overflow: hidden;border-radius: 4px;margin: 20px 0 0 50px;">
+    <el-table-column prop="id" label="ID" width="180" align="center" />
+    <el-table-column prop="username" label="用户名" width="180"   align="center"/>
+    <el-table-column prop="full_name" label="全名" width="300"  align="center"/>
+    <el-table-column prop="email" label="邮箱" width="400"  align="center"/>
+        <el-table-column fixed="right" label="操作"  align="center">
+      <template #default="scope">
+        <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
+      </template>
+    </el-table-column>
   </el-table>
+  <div class="page">
+    <el-pagination
+      v-if="total > 0"
+      :page-sizes="[10, 20, 30, 40, 100]"
+      :page-size="page.pageSize"
+       :total="total"
+      layout="total, prev, pager, next, jumper"></el-pagination>
+  </div>
+    <el-dialog v-model="dialogFormVisible" title="编辑账号" width="500">
+    <el-form :model="form">
+      <el-form-item label="用户名" >
+        <el-input v-model="form.username" disabled />
+      </el-form-item>
+      <el-form-item label="角色" >
+        <el-select v-model="form.role_ids" placeholder="Please select a zone">
+          <el-option v-for="item in rolesData" :key="item.id" :label="item.name" :value="item.id" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="submitChange">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive,getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance()
-let tableData = reactive([])
-const init = async() => {
-  const data = await proxy.$http.get('/open_platform/user/roles')
-  console.log(data,'111')
+let tableData = ref([])
+let total = ref(0)
+let dialogFormVisible = ref(false)
+let rolesData = ref([])
+let page = reactive({
+  userName:'',
+  pageNo: 1,
+  pageSize: 10
+})
+let form = reactive({
+  username: '',
+  user_id:0,
+  role_ids: '',
+})
+const init = () => {
+  proxy.$http.get('/open-platform/user/users',{
+        params: {
+          ...page,
+        }
+      })
+      .then((res) => {
+        console.log(res,'11')
+       if(res.records && res.records.length > 0) {
+          res.records.forEach(item => {
+            tableData.value.push(item)
+          })
+        } else {
+          tableData.value = []
+        }
+        total.value = res.total
+
+      })
 }
 init()
+const getRolesList = () => {
+  proxy.$http.get('/open-platform/user/roles')
+    .then((res) => {
+      if (res.records && res.records.length > 0) {
+        rolesData.value = res.records
+      } else {
+        rolesData.value = []
+      }
+    })
+}
+getRolesList()
+const handleEdit = (row) => {
+  dialogFormVisible.value = true
+  form.username = row.username
+  form.user_id = row.id
+  form.role_ids = row.role_ids ? row.role_ids[0] : ''
+}
+const submitChange = () => {
+  form.role_ids = form.role_ids ? [form.role_ids] : []
+  proxy.$http.post('/open-platform/user/users/roles', form)
+    .then((res) => {
+      if (res.code === 200) {
+        proxy.$message.success('修改成功')
+        dialogFormVisible.value = false
+        tableData.value = []
+        init()
+      } else {
+        proxy.$message.error(res.message || '修改失败')
+      }
+    })
+}
 
 </script>
 
-<style lang="scss" scoped>
-
-
+<style lang="less" scoped>
+:deep(.el-table th) {
+  background-color: #eef6ff !important; /* 设置你想要的背景颜色 */
+  color: #333; /* 设置表头文字颜色 */
+  font-weight: bold; /* 设置表头文字加粗 */
+}
+.page {
+  display: flex;
+  justify-content: end;
+  margin-top: 20px;
+  padding-right: 10%;
+}
 </style>

src/views/KMPlatform/Permission/RoleManage.vue

@@ -1,14 +1,141 @@
 <template>
-    <div>
-
-        角色管理
-    </div>
+  <div>
+    <!-- <div class="export-button pl-10">
+      <el-button v-has="99102" type="primary" @click="onClick_add">
+        创建账号
+      </el-button>
+    </div> -->
+    <el-table
+      border
+      :data="tableData"
+      style="
+        width: 80%;
+        font-size: 20px;
+        overflow: hidden;
+        border-radius: 4px;
+        margin: 20px 0 0 50px;
+      "
+    >
+      <el-table-column prop="id" label="ID" width="180" align="center" />
+      <el-table-column prop="name" label="角色名" width="280" align="center" />
+      <el-table-column
+        prop="description"
+        label="描述"
+        width="400"
+        align="center"
+      />
+      <el-table-column fixed="right" label="操作" align="center">
+        <template #default="scope">
+          <el-button link type="primary" @click="handleChange(scope.row)"
+            >编辑</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog
+      v-model="dialogFormVisible"
+      title="编辑角色"
+      width="500"
+      @close="handleClose"
+    >
+      <div></div>
+      <el-tree
+        style="max-width: 600px"
+        :data="permissionData"
+        show-checkbox
+        node-key="id"
+        :default-checked-keys="currentCheckedKeys"
+        :props="defaultProps"
+        ref="tree"
+      />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="handleClose">取消</el-button>
+          <el-button type="primary" @click="submitChange"> 确认 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup>
+import { ref, reactive, getCurrentInstance, nextTick } from "vue";
+const { proxy } = getCurrentInstance();
+const defaultProps = {
+  children: "children",
+  label: "name",
+};
+let tableData = ref([]);
+let total = ref(0);
+let dialogFormVisible = ref(false);
+let permissionData = ref([]);
+let form = reactive({
+  role_id: 0,
+  name: "",
+  description: "",
+  permission_ids: 0,
+});
+let currentCheckedKeys = ref([]);
+// 使用 ref 函数创建一个引用对象
+const tree = ref(null);
 
+const init = () => {
+  proxy.$http.get("/open-platform/user/roles").then((res) => {
+    console.log(res, "11");
+    if (res.records && res.records.length > 0) {
+      tableData.value = res.records
+    } else {
+      tableData.value = [];
+    }
+    total.value = res.total;
+  });
+};
+init();
+const getPermission = () => {
+  proxy.$http.get("/open-platform/user/permissions").then((res) => {
+    if (res.records && res.records.length > 0) {
+      permissionData.value = res.records;
+    } else {
+      permissionData.value = [];
+    }
+  });
+};
+getPermission();
+const handleChange = (row) => {
+  dialogFormVisible.value = true;
+  form.name = row.name;
+  form.role_id = row.id;
+  form.description = row.description;
+  currentCheckedKeys.value = row.permission_ids ? [...row.permission_ids] : [];
+};
+const handleClose = () => {
+  dialogFormVisible.value = false;
+  nextTick(() => {
+    tree.value.setCheckedKeys([]);
+  });
+};
+const submitChange = () => {
+    form.permission_ids = tree.value.getCheckedKeys();
+    proxy.$http
+      .post("/open-platform/user/roles", form)
+      .then((res) => {
+        proxy.$message.success("修改成功");
+        dialogFormVisible.value = false;
+        init();
+      })
+      .catch((err) => {
+        proxy.$message.error("修改失败");
+      });
+};
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="less" scoped>
+:deep(.el-table th) {
+  background-color: #eef6ff !important; /* 设置你想要的背景颜色 */
+  color: #333; /* 设置表头文字颜色 */
+  font-weight: bold; /* 设置表头文字加粗 */
+}
+:deep(.el-table .el-table__cell) {
+  padding: 10px 0 !important;
+}
+</style>

src/views/KMPlatform/Permission/permission.vue

@@ -57,18 +57,22 @@ function handleMenuClick(data) {
     }
 
     .menu-list {
-    //   margin: 20px 0px 0px;
+       margin: 15px 0px 0px;
 
-      .menu-item {
+         .menu-item {
         cursor: pointer;
         padding: 10px;
-        font-size: 18px;
+        margin-bottom: 5px;
+
         &:is(.active) {
-          color: #0a61f7;
+          // color: #0A61F7;
+          color:#40a1ff;
+           background: #eef6ff;
         }
 
         &:hover {
-          color: #0a61f7;
+          // color: #0A61F7;
+          background: #eef6ff;
         }
       }
     }

vite.config.ts

@@ -21,7 +21,7 @@ export default defineConfig(({ command, mode }) => {
           rewrite: path => path.replace(/^\/api/, '')
         },
         '/open-platform': {
-          target: 'http://173.18.12.205:8003/', // 后端服务器地址
+          target: 'http://173.18.12.205:8005', // 后端服务器地址
           changeOrigin: true, // 启用跨域
           // rewrite: (path) => path.replace(/^\/open-platform/, '') // 路径重写
         }