From 4ed9ccce89a4bb9c80e35627dfa80581f1c1b078 Mon Sep 17 00:00:00 2001
From: xuyiming <xuyiming@bd-apaas.com>
Date: Thu, 28 May 2020 17:33:50 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E7=BB=87=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/apass-dialog.vue               |   4 +-
 src/components/apass-list.vue                 |   6 +-
 .../organization-list/organization-list.vue   |  10 +-
 src/pages/authority/organization.vue          | 175 +++++++-----------
 src/pages/authority/users.vue                 |   8 +-
 5 files changed, 88 insertions(+), 115 deletions(-)

diff --git a/src/components/apass-dialog.vue b/src/components/apass-dialog.vue
index 60213d4..53e7d8c 100644
--- a/src/components/apass-dialog.vue
+++ b/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,
diff --git a/src/components/apass-list.vue b/src/components/apass-list.vue
index fa93b69..6c73ecd 100644
--- a/src/components/apass-list.vue
+++ b/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: "",
diff --git a/src/components/organization-list/organization-list.vue b/src/components/organization-list/organization-list.vue
index 9410d93..e98d86f 100644
--- a/src/components/organization-list/organization-list.vue
+++ b/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;
diff --git a/src/pages/authority/organization.vue b/src/pages/authority/organization.vue
index edda898..b155595 100644
--- a/src/pages/authority/organization.vue
+++ b/src/pages/authority/organization.vue
@@ -1,66 +1,59 @@
 <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>
diff --git a/src/pages/authority/users.vue b/src/pages/authority/users.vue
index 92c7f29..3f3ff14 100644
--- a/src/pages/authority/users.vue
+++ b/src/pages/authority/users.vue
@@ -1,6 +1,10 @@
 <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"
-- 
2.26.0