组织管理页面

src/components/apass-dialog.vue

@@ -24,8 +24,8 @@ export default {
   name: "dialog-action",
   props: {
     width: {
-      type: [Number, String],
-      default: () => 400,
+      type: String,
+      default: () => "400px",
     },
     title: {
       type: String,

src/components/apass-list.vue

@@ -15,7 +15,7 @@
           <el-input
             v-model="searchFilter"
             prefix-icon="el-icon-search"
-            placeholder="请输入应用名称"
+            :placeholder="searchPlaceholder"
             style="width:240px;"
             @input="searchAction"
           ></el-input>
@@ -53,6 +53,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    searchPlaceholder: {
+      type: String,
+      default: "请输入关键字"
+    }
   },
   data: () => ({
     searchFilter: "",

src/components/organization-list/organization-list.vue

@@ -42,18 +42,18 @@ export default {
   },
   mounted() {
     this.pageResize();
-    window.onresize = () => {
-      this.pageResize();
-    };
+    window.addEventListener("resize", this.pageResize);
+  },
+  destroyed() {
+    window.removeEventListener("resize", this.pageResize);
   },
 };
 </script>
 
 <style scoped>
 .organization_list {
-  margin: 20px -20px 0;
+  margin: 0 -20px;
   padding: 30px 0 0;
-  border-top: 1px solid #e3e5ef;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;

src/pages/authority/organization.vue

 <template>
-  <div class="organization_container">
-    <div class="apass_breadcrumb">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
+  <div class="organization_list">
+    <apass-list
+      @list-action="listAction"
+      search-placeholder="请输入关键字"
+      :list-total="listTotal"
+    >
+      <el-breadcrumb separator="/" slot="breadcrumb">
+        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
         <el-breadcrumb-item>组织管理</el-breadcrumb-item>
       </el-breadcrumb>
-    </div>
-    <div class="main_container">
-      <div class="organization_header">
-        <el-button type="primary" @click="addOrganization">
+      <template slot="header-left">
+        <el-button
+          type="primary"
+          @click="$router.push('/authority/organizationedit')"
+        >
           新建组织
         </el-button>
-        <p class="organization_info">
-          <img :src="require('@/assets/imgs/title_ic_zuzhi.png')" />
-          <span>当前组织总数：</span>
-          <span>8</span>
-        </p>
-        <el-input
-          v-model="searchFilter"
-          prefix-icon="el-icon-search"
-          placeholder="请输入组织名称"
-          style="width:180px;"
-          @input="searchAction"
-          class="ces_toolbar_inp"
-        ></el-input>
-      </div>
+      </template>
+      <p class="organization_info" slot="header-center">
+        <img :src="require('@/assets/imgs/title_ic_zuzhi.png')" />
+        <span>当前组织总数：</span>
+        <span>8</span>
+      </p>
       <organization-list
-        :data="organizationList"
+        slot="list"
+        :data="listData"
         details-url="/authority/organizationdetail/"
         @delete-action="deleteAction"
       ></organization-list>
-      <div class="flex_grow"></div>
-      <comments-pagination
-        :total="100"
-        :page-sizes="pageSizes"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        @size-change="changePageSize"
-        @current-change="changeCurrentPage"
-      ></comments-pagination>
-    </div>
-    <dialog-action
-      ref="myConfirm"
-      :confirm-options="confirmOptions"
-    ></dialog-action>
+    </apass-list>
+
+    <apass-dialog ref="dialog" title="提示">
+      <p slot="content" style="text-align: left;">确认删除该组织吗？</p>
+      <template slot="action">
+        <el-button type="defalut" size="mini" @click="dialogHide">
+          取消
+        </el-button>
+        <el-button type="primary" size="mini" @click="dialogSubmit">
+          确定
+        </el-button>
+      </template>
+    </apass-dialog>
   </div>
 </template>
 
 <script>
+import apassList from "@/components/apass-list";
 import organizationList from "@/components/organization-list/organization-list";
-import commentsPagination from "@/components/comments-pagination";
-import dialogAction from "@/components/dialog-action";
+import apassDialog from "@/components/apass-dialog";
 
 export default {
-  components: {
-    organizationList,
-    dialogAction,
-    commentsPagination,
-  },
+  components: { apassList, organizationList, apassDialog },
   data: () => ({
-    searchFilter: "",
-    organizationList: [
+    listTotal: 300,
+    listData: [
       {
         id: 1000001,
         img:
@@ -152,67 +145,50 @@ export default {
         time: "2019-04-11 12:50:30",
       },
     ],
-    pageSizes: [10, 50, 100],
-    pageSize: 10,
-    currentPage: 1,
-    confirmOptions: {
-      title: "",
-      message: "",
-      btnCancelText: "",
-      btnSubmitText: "",
-      item: null,
-    },
+    roleData: [
+      {
+        name: "超级管理员",
+        description: "拥有所有权限",
+      },
+      {
+        name: "组织管理员",
+        description: "拥有对应组织的权限",
+      },
+      {
+        name: "普通用户",
+        description: "普通权限用户",
+      },
+      {
+        name: "普通用户-开发者",
+        description: "基于普通用户多一些开发的选项",
+      },
+    ],
+    showDialog: false,
   }),
   methods: {
-    addOrganization() {
-      this.$router.push("/authority/organizationedit");
-    },
-    searchAction() {
-      console.log(this.searchFilter);
+    listAction(value) {
+      console.log(value);
     },
     deleteAction(item) {
-      this.confirmOptions.title = "删除提示";
-      this.confirmOptions.message = `确认删除${item.name}吗？`;
-      this.confirmOptions.btnCancelText = "";
-      this.confirmOptions.btnSubmitText = "";
-      this.confirmOptions.confirmSubmit = () => {
-        console.log("deleteItem - " + item.name);
-        this.$refs.myConfirm.hideModel();
-      };
-      this.$refs.myConfirm.showModel();
+      this.dialogShow();
     },
-    changePageSize(value) {
-      this.pageSize = value;
-      this.currentPage = 1;
+    dialogShow() {
+      this.$refs.dialog.show();
     },
-    changeCurrentPage(value) {
-      this.currentPage = value;
+    dialogHide() {
+      this.$refs.dialog.hide();
+    },
+    dialogSubmit() {
+      console.log("dialog submit");
+      this.dialogHide();
     },
   },
 };
 </script>
 
 <style scoped>
-.organization_container {
+.organization_list {
   height: 100%;
-  padding: 0 20px;
-  overflow: auto;
-}
-.main_container {
-  min-height: calc(100% - 84px);
-  padding: 15px 20px;
-  border-radius: 10px;
-  background-color: #fff;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: stretch;
-  margin-bottom: 42px;
-}
-.organization_header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 .organization_info {
   display: inline-flex;
@@ -229,15 +205,4 @@ export default {
 .organization_info > span:nth-of-type(2) {
   color: #1a2236;
 }
-.flex_grow {
-  flex-grow: 1;
-}
-</style>
-
-<style>
-.organization_container .el-button--primary {
-  background-color: #515fe7;
-  border-color: #515fe7;
-  color: #e6ebfe;
-}
 </style>

src/pages/authority/users.vue

 <template>
   <div class="users_list">
-    <apass-list @list-action="listAction" :list-total="listTotal">
+    <apass-list
+      @list-action="listAction"
+      search-placeholder="请输入关键字"
+      :list-total="listTotal"
+    >
       <el-breadcrumb separator="/" slot="breadcrumb">
         <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
         <el-breadcrumb-item to="/authority/users">用户管理</el-breadcrumb-item>
@@ -69,7 +73,7 @@
       </el-table>
     </apass-list>
 
-    <apass-dialog ref="dialog" width="590" title="分配角色">
+    <apass-dialog ref="dialog" width="590px" title="分配角色">
       <el-table
         slot="content"
         :border="false"