角色管理页面

src/pages/authority/roles.vue

- <template>
-  <div></div>
+<template>
+  <div class="roles_list">
+    <apass-list
+      @list-action="listAction"
+      search-placeholder="请输入关键字"
+      :list-header="listHeader"
+      :list-data="listData"
+      :list-total="listTotal"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
+        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
+      </el-breadcrumb>
+      <template slot="header-left">
+        <el-button type="primary" @click="$router.push('/authority/roles/add')">
+          新建角色
+        </el-button>
+      </template>
+    </apass-list>
+
+    <apass-dialog
+      ref="dialog"
+      :title="dialogInfo.title"
+      :msg="dialogInfo.msg"
+      :submit="dialogInfo.submit"
+    ></apass-dialog>
+  </div>
 </template>
 
 <script>
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+
 export default {
-  methods: {}
+  components: { apassList, apassDialog },
+  data: () => ({
+    dialogInfo: {
+      title: "",
+      msg: "",
+      submit: null,
+    },
+    listTotal: 300,
+    listHeader: [],
+    listData: [],
+  }),
+  methods: {
+    listAction(value) {
+      console.log(value);
+    },
+    showDialog() {
+      this.$refs.dialog.show();
+    },
+    deleteItem(item) {
+      this.dialogInfo.title = "";
+      this.dialogInfo.msg = "确认删除当前角色";
+      this.dialogInfo.cancelText = "";
+      this.dialogInfo.sunbmitText = "";
+      this.dialogInfo.submit = () => {
+        console.log("deleteItem - " + item.name);
+      };
+      this.showDialog();
+    },
+  },
+  mounted() {
+    this.listHeader = [
+      {
+        label: "角色类型",
+        prop: "name",
+        type: "button",
+        callback(item) {
+          console.log("查看详情 - " + item.name);
+        },
+      },
+      {
+        label: "创建人",
+        prop: "creator",
+        type: "",
+        align: "center",
+      },
+      {
+        label: "创建日期",
+        prop: "create_date",
+        type: "",
+        align: "center",
+      },
+      {
+        label: "操作",
+        type: "buttons",
+        align: "center",
+        width: 240,
+        actionList: [
+          {
+            label: "分配权限",
+            callback(item) {
+              console.log("分配权限 - " + item.name);
+            },
+          },
+          {
+            label: "删除",
+            callback: this.deleteItem,
+          },
+        ],
+      },
+    ];
+    this.listData = [
+      {
+        id: 0,
+        name: "普通用户",
+        creator: "谢飞",
+        create_date: "2020-04-27 13:24:19",
+      },
+      {
+        id: 1,
+        name: "组织管理员",
+        creator: "谢飞",
+        create_date: "2020-04-27 13:24:19",
+      },
+      {
+        id: 2,
+        name: "超级管理员",
+        creator: "谢飞",
+        create_date: "2020-04-27 13:24:19",
+      },
+      {
+        id: 3,
+        name: "普通用户-开发者",
+        creator: "谢飞",
+        create_date: "2020-04-27 13:24:19",
+      },
+      {
+        id: 4,
+        name: "测试用户",
+        creator: "谢飞",
+        create_date: "2020-04-27 13:24:19",
+      },
+    ];
+  },
 };
 </script>
 
 <style scoped>
+.roles_list {
+  height: 100%;
+}
 </style>

src/pages/authority/users.vue

@@ -7,7 +7,7 @@
     >
       <el-breadcrumb separator="/" slot="breadcrumb">
         <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
-        <el-breadcrumb-item to="/authority/users">用户管理</el-breadcrumb-item>
+        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
       </el-breadcrumb>
       <template slot="header-left">
         <el-button type="primary" @click="$router.push('/authority/users/add')">