update

src/api/role.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function findPage(data) {
+    return request({
+        url: '/user/role/findPage',
+        method: 'post',
+        data
+    })
+}

src/api/userInfo.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function findPage(data) {
+    return request({
+        url: '/user/findPage',
+        method: 'post',
+        data
+    })
+}

src/router/index.js

@@ -84,15 +84,15 @@ export const constantRoutes = [
     meta: { title: '用户', icon: 'el-icon-user' },
     children: [
       {
-        path: 'list',
-        name: 'UserList',
-        component: () => import('@/views/tree/index'),
+        path: 'info',
+        name: 'UserInfo',
+        component: () => import('@/views/user/info'),
         meta: { title: '用户管理' }
       },
       {
         path: 'role',
         name: 'UserRole',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/user/role'),
         meta: { title: '角色管理' }
       },
       {
@@ -120,7 +120,7 @@ export const constantRoutes = [
       {
         path: 'sysconfig',
         name: 'SettingSysconfig',
-        component: () => import('@/views/tree/index'),
+        component: () => import('@/views/form/index'),
         meta: { title: '系统设置' }
       }
     ]

src/views/user/info/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="app-container">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="ID" width="95">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column label="昵称">
+        <template slot-scope="scope">
+          {{ scope.row.nickName }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="手机号">
+        <template slot-scope="scope">
+          {{ scope.row.mp }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="邮箱">
+        <template slot-scope="scope">
+          {{ scope.row.mail }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="性别">
+        <template slot-scope="scope">
+          {{ scope.row.gender.text }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="状态">
+        <template slot-scope="scope">
+          <el-tag>{{ scope.row.state.text }}</el-tag>
+        </template>
+      </el-table-column>
+      
+
+      <el-table-column label="注册时间">
+        <template slot-scope="scope">
+          {{ scope.row.registerTime }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="角色">
+        <template slot-scope="scope">
+            <el-tag v-for="role in scope.row.listRoles" :key="role.id">{{ role.name }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { findPage } from "@/api/userInfo";
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: "success",
+        draft: "gray",
+        deleted: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true;
+      findPage({})
+        .then((response) => {
+          this.list = response.data;
+        })
+        .finally(() => (this.listLoading = false));
+    },
+  },
+};
+</script>

src/views/user/role/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="app-container">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column align="center" label="ID" width="95">
+        <template slot-scope="scope">
+          {{ scope.row.id }}
+        </template>
+      </el-table-column>
+      <el-table-column label="角色名称">
+        <template slot-scope="scope">
+          {{ scope.row.name }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="备注说明">
+        <template slot-scope="scope">
+          {{ scope.row.remark }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="拥有权限">
+        <template slot-scope="scope">
+          {{ scope.row.listAuthorities.length }}个
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { findPage } from "@/api/role";
+
+export default {
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: "success",
+        draft: "gray",
+        deleted: "danger",
+      };
+      return statusMap[status];
+    },
+  },
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+    };
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true;
+      findPage({})
+        .then((response) => {
+          this.list = response.data;
+        })
+        .finally(() => (this.listLoading = false));
+    },
+  },
+};
+</script>