用户权限展示.

ui/src/views/user/Permission.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="content">
+    <a-spin :spinning="loading">
+      <a-table
+        :columns="columns"
+        :data-source="data"
+        :row-selection="rowSelection"
+        :expanded-row-keys.sync="expandedRowKeys"
+      >
+        <div slot="type" slot-scope="text">
+          <span v-if="text == 0" style="color: darkgreen">菜单</span
+          ><span v-else>按钮</span>
+        </div>
+      </a-table>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import request from "@/utils/request";
+
+const columns = [
+  {
+    title: "权限名称",
+    dataIndex: "name",
+    key: "name",
+  },
+  {
+    title: "类型",
+    dataIndex: "type",
+    key: "type",
+    width: "12%",
+    slots: { title: "type" },
+    scopedSlots: { customRender: "type" },
+  },
+  {
+    title: "权限标记",
+    dataIndex: "permission",
+    width: "30%",
+    key: "permission",
+  },
+];
+
+const rowSelection = {
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(
+      `selectedRowKeys: ${selectedRowKeys}`,
+      "selectedRows: ",
+      selectedRows
+    );
+  },
+  onSelect: (record, selected, selectedRows) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+};
+import { UserManageApi } from "@/utils/api";
+import notification from "ant-design-vue/lib/notification";
+
+export default {
+  name: "Permission",
+  components: {},
+  data() {
+    return {
+      loading: false,
+      data: [],
+      columns,
+      rowSelection,
+      expandedRowKeys: [],
+    };
+  },
+  methods: {
+    getPermissions() {
+      this.loading = true;
+      request({
+        url: UserManageApi.getPermissions.url,
+        method: UserManageApi.getPermissions.method,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code == 0) {
+          this.data = res.data;
+        } else {
+          notification.error({
+            message: "error",
+            description: res.msg,
+          });
+        }
+      });
+    },
+  },
+  created() {
+    this.getPermissions();
+  },
+};
+</script>
+
+<style scoped>
+.editable-row-operations a {
+  margin-right: 8px;
+}
+</style>

ui/src/views/user/UserManage.vue

@@ -2,24 +2,22 @@
   <div class="content">
     <a-spin :spinning="loading">
       <a-tabs default-active-key="1" size="large" tabPosition="top">
-        <a-tab-pane key="1" tab="用户列表">
-        </a-tab-pane>
-        <a-tab-pane key="2" tab="角色列表">
-        </a-tab-pane>
+        <a-tab-pane key="1" tab="用户列表"> </a-tab-pane>
+        <a-tab-pane key="2" tab="角色列表"> </a-tab-pane>
         <a-tab-pane key="3" tab="权限列表">
+          <Permission></Permission>
         </a-tab-pane>
-        <a-tab-pane key="4" tab="个人设置">
-        </a-tab-pane>
+        <a-tab-pane key="4" tab="个人设置"> </a-tab-pane>
       </a-tabs>
     </a-spin>
   </div>
 </template>
 
 <script>
-
+import Permission from "@/views/user/Permission.vue";
 export default {
   name: "UserManage",
-  components: {},
+  components: { Permission },
   data() {
     return {
       loading: false,
@@ -27,8 +25,7 @@ export default {
     };
   },
   methods: {},
-  created() {
-  },
+  created() {},
 };
 </script>