用户管理页面和权限审批页面

src/assets/css/index.css

@@ -501,13 +501,75 @@ width: 620px!important;
   max-width: 1200px;
   margin: 0 auto;
 }
-.sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+
+
+/* common */
+.apass_breadcrumb > .el-breadcrumb {
+  margin: 15px 0;
+}
+.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
   font-size: 14px;
   font-weight: bold;
   color: #898d9e;
-  line-height: 42px;
+  line-height: 23px;
 }
-.sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner  {
+.apass_breadcrumb > .el-breadcrumb .el-breadcrumb__item:last-child .el-breadcrumb__inner  {
   color: #242c43;
   font-weight: normal;
+}
+.apass_button .el-button {
+  min-width: 90px;
+  color: #0f2683;
+}
+.apass_button .el-button--mini, 
+.apass_button .el-button--mini.is-round {
+  padding: 10px 15px;
+}
+.apass_button .el-button--primary {
+  color: #fff;
+  background-color: #0f2683;
+  border-color: #0f2683;
+}
+.apass_button .el-button--primary.is-plain {
+  color: #0f2683;
+  background-color: #e1e4fb;
+  border-color: #e1e4fb;
+}
+.appas_table .el-table th > .cell {
+  color: #1a2236;
+}
+.appas_table .el-table td,
+.appas_table .el-table th.is-leaf {
+  border: none !important;
+  line-height: 23px;
+}
+.appas_table .el-table::before {
+  display: none;
+}
+.appas_table .el-table {
+  width: 100%;
+}
+.appas_table .el-table__row:nth-child(odd) td {
+  background-color: #f8f9fd;
+}
+.appas_table .row_action {
+    user-select: none;
+}
+.appas_table .row_action .btn {
+  font-size: 14px;
+  font-weight: bold;
+  color: #0f2683;
+  cursor: pointer;
+}
+.appas_table .row_action .btn.warn {
+  color: #830f53;
+}
+.appas_table .row_action .btn.disabled {
+  color: #dde4ff;
+  cursor: not-allowed;
+}
+.appas_table .row_action .interval_line {
+    font-size: 14px;
+    color: #dde4ff;
+    margin: 0 20px;
 }
\ No newline at end of file

src/components/apass-dialog.vue

+<template>
+  <transition name="mask-bg-fade">
+    <el-dialog
+      class="apass_dialog"
+      :visible.sync="showDialog"
+      :width="width"
+      top="25vh"
+    >
+      <h3 class="dialog_title" slot="title">
+        <span v-text="title"></span>
+      </h3>
+      <div class="dialog_content appas_table">
+        <slot name="content"></slot>
+      </div>
+      <div slot="footer" class="dialog_action apass_button">
+        <slot name="action"></slot>
+      </div>
+    </el-dialog>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: "dialog-action",
+  props: {
+    width: {
+      type: [Number, String],
+      default: () => 400,
+    },
+    title: {
+      type: String,
+      default: () => "",
+    },
+  },
+  data: () => ({
+    showDialog: false,
+  }),
+  methods: {
+    show() {
+      this.showDialog = true;
+    },
+    hide() {
+      this.showDialog = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dialog_title::before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  width: 4px;
+  height: 16px;
+  border-radius: 2px;
+  background-color: #515fe7;
+  margin-right: 10px;
+}
+.dialog_title > span {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  font-weight: bold;
+  color: #1d1e20;
+}
+</style>
+
+<style>
+.apass_dialog .el-dialog__header {
+  padding: 20px;
+  border-bottom: 1px solid #edf0ff;
+}
+.apass_dialog .el-dialog__body {
+  padding: 10px 30px;
+}
+.apass_dialog .el-dialog__footer {
+  padding: 20px;
+}
+</style>

src/components/apass-list.vue

+<template>
+  <div class="apass_list-container">
+    <div class="apass_breadcrumb">
+      <slot name="breadcrumb"></slot>
+    </div>
+    <div class="main-container">
+      <div class="header-container" v-if="!hideHeader">
+        <div class="header-left apass_button">
+          <slot name="header-left"></slot>
+        </div>
+        <div class="header-center">
+          <slot name="header-center"></slot>
+        </div>
+        <div class="header-right">
+          <el-input
+            v-model="searchFilter"
+            prefix-icon="el-icon-search"
+            placeholder="请输入应用名称"
+            style="width:240px;"
+            @input="searchAction"
+          ></el-input>
+        </div>
+      </div>
+      <div class="cross_line" v-if="!hideHeader"></div>
+      <div class="list-container appas_table">
+        <slot name="list"></slot>
+      </div>
+      <list-pagination
+        :total="listTotal"
+        :page-sizes="pageSizes"
+        :page-size="pageSize"
+        :current-page="currentPage"
+        @size-change="changePageSize"
+        @current-change="changeCurrentPage"
+      ></list-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import ListPagination from "@/components/comments-pagination";
+
+export default {
+  components: {
+    ListPagination,
+  },
+  props: {
+    listTotal: {
+      type: Number,
+      default: 0,
+    },
+    hideHeader: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    searchFilter: "",
+    pageSize: 10,
+    currentPage: 1,
+    timer: null,
+    pageSizes: [10, 50, 100],
+  }),
+  methods: {
+    searchAction(value) {
+      this.listAction();
+    },
+    changePageSize(value) {
+      this.pageSize = value;
+      this.currentPage = 1;
+      this.listAction();
+    },
+    changeCurrentPage(value) {
+      this.currentPage = value;
+      this.listAction();
+    },
+    listAction() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+
+      this.timer = setTimeout(() => {
+        this.$emit("list-action", {
+          filter: this.searchFilter,
+          pageSize: this.pageSize,
+          currentPage: this.currentPage,
+        });
+      }, 200);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.apass_list-container {
+  padding: 0 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  overflow: auto;
+}
+.main-container {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  padding: 0 20px 15px;
+  background-color: #fff;
+  border-radius: 10px;
+  margin-bottom: 40px;
+}
+.header-container {
+  padding-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header-container .el-button + .el-button {
+  margin-left: 25px;
+}
+.cross_line {
+  border-top: 1px solid #e3e5ef;
+  margin: 20px -20px 0;
+}
+.list-container {
+  flex-grow: 1;
+}
+</style>

src/components/comments-pagination.vue

@@ -105,11 +105,14 @@ export default {
 }
 .page_action > a > i {
   font-weight: bold;
+  color: #5588ff;
 }
 .page_action > a.disabled {
-  opacity: 0.5;
   cursor: not-allowed;
 }
+.page_action > a.disabled > i {
+  color: #d6d8dc;
+}
 </style>
 
 <style>

src/pages/authority/organization.vue

 <template>
   <div class="organization_container">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item>权限管理</el-breadcrumb-item>
         <el-breadcrumb-item>组织管理</el-breadcrumb-item>

src/pages/authority/permission.vue

+<template>
+  <div class="permission_list">
+    <apass-list
+      @list-action="listAction"
+      :list-total="listTotal"
+      :hide-header="true"
+    >
+      <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>
+      <el-table slot="list" :border="false" :data="listData">
+        <el-table-column label="" width="40"></el-table-column>
+        <el-table-column label="账号" width="160">
+          <template slot-scope="scope">
+            <span v-text="scope.row.account"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="业务系统名称">
+          <template slot-scope="scope">
+            <span v-text="scope.row.name"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户类型" align="center" width="240">
+          <template slot-scope="scope">
+            <span v-text="scope.row.role"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户所属组织">
+          <template slot-scope="scope">
+            <span v-text="scope.row.organization"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户状态" align="center" width="160">
+          <template slot-scope="scope">
+            <span v-text="scope.row.state === 0 ? '禁用' : '启用'"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="申请时间" align="center" width="200">
+          <template slot-scope="scope">
+            <span v-text="scope.row.update_time"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="300">
+          <template slot-scope="scope">
+            <div class="row_action">
+              <a class="btn" @click="permissionAction(scope.row)">
+                通过
+              </a>
+              <span class="interval_line">|</span>
+              <a class="btn warn" @click="permissionAction(scope.row, false)">
+                拒绝
+              </a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </apass-list>
+  </div>
+</template>
+
+<script>
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
+
+export default {
+  components: { apassList, apassDialog },
+  data: () => ({
+    listTotal: 300,
+    listData: [
+      {
+        account: "012344",
+        name: "贵阳机关事务大数据平台",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 0,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012345",
+        name: "贵州省水利厅",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012346",
+        name: "贵州省公安厅",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012347",
+        name: "贵阳机关事务大数据平台",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012348",
+        name: "长兴县应急指挥平台",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+    ],
+  }),
+  methods: {
+    listAction(value) {
+      console.log(value);
+    },
+    permissionAction(item, passFlag = true) {
+      console.log((passFlag ? "通过 " : "拒绝 ") + item.name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.permission_list {
+  height: 100%;
+}
+</style>

src/pages/authority/users.vue

 <template>
-    <div>
+  <div class="users_list">
+    <apass-list @list-action="listAction" :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>
+      </el-breadcrumb>
+      <template slot="header-left">
+        <el-button type="primary">
+          新建用户
+        </el-button>
+        <el-button @click="$router.push('/authority/users/permission')">
+          权限审批
+        </el-button>
+      </template>
+      <el-table slot="list" :border="false" :data="listData">
+        <el-table-column label="" width="40"></el-table-column>
+        <el-table-column label="账号" width="160">
+          <template slot-scope="scope">
+            <span v-text="scope.row.account"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="业务系统名称">
+          <template slot-scope="scope">
+            <span v-text="scope.row.name"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户类型" align="center" width="160">
+          <template slot-scope="scope">
+            <span v-text="scope.row.role"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属组织">
+          <template slot-scope="scope">
+            <span v-text="scope.row.organization"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="账号状态" align="center" width="240">
+          <template slot-scope="scope">
+            <span v-text="scope.row.state === 0 ? '禁用' : '启用'"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="上次操作修改时间" align="center" width="200">
+          <template slot-scope="scope">
+            <span v-text="scope.row.update_time"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="300">
+          <template slot-scope="scope">
+            <div class="row_action">
+              <a class="btn" @click="getDetail(scope.row)">
+                详情
+              </a>
+              <span class="interval_line">|</span>
+              <a class="btn" @click="setRole(scope.row)">
+                分配角色
+              </a>
+              <span class="interval_line">|</span>
+              <a
+                class="btn"
+                :class="{ warn: scope.row.state === 1 }"
+                @click="setState(scope.row)"
+              >
+                {{ scope.row.state === 0 ? "启用" : "禁用" }}
+              </a>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </apass-list>
 
-    </div>
+    <apass-dialog ref="dialog" width="590" title="分配角色">
+      <el-table
+        slot="content"
+        :border="false"
+        :data="roleData"
+        @selection-change="dialogSelectionChange"
+      >
+        <el-table-column type="selection" width="60" align="right">
+        </el-table-column>
+        <el-table-column label="角色">
+          <template slot-scope="scope">
+            <span v-text="scope.row.name"></span>
+          </template>
+        </el-table-column>
+        <el-table-column label="说明">
+          <template slot-scope="scope">
+            <span v-text="scope.row.description"></span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <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>
-export default {
-    props: [],
-    components: {
+import apassList from "@/components/apass-list";
+import apassDialog from "@/components/apass-dialog";
 
+export default {
+  components: { apassList, apassDialog },
+  data: () => ({
+    listTotal: 300,
+    listData: [
+      {
+        account: "012344",
+        name: "贵阳机关事务大数据平台",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 0,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012345",
+        name: "贵州省水利厅",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012346",
+        name: "贵州省公安厅",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012347",
+        name: "贵阳机关事务大数据平台",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+      {
+        account: "012348",
+        name: "长兴县应急指挥平台",
+        role: "普通用户",
+        organization: "贵阳市水利局",
+        state: 1,
+        update_time: "2020-04-27 13:24:19",
+      },
+    ],
+    roleData: [
+      {
+        name: "超级管理员",
+        description: "拥有所有权限",
+      },
+      {
+        name: "组织管理员",
+        description: "拥有对应组织的权限",
+      },
+      {
+        name: "普通用户",
+        description: "普通权限用户",
+      },
+      {
+        name: "普通用户-开发者",
+        description: "基于普通用户多一些开发的选项",
+      },
+    ],
+    showDialog: false,
+  }),
+  methods: {
+    listAction(value) {
+      console.log(value);
     },
-    data() {
-        return {
-
-        };
+    getDetail(item) {
+      console.log("getDetail " + item.name);
     },
-    watch: {
-
+    setRole(item) {
+      console.log("setRole " + item.name);
+      this.dialogShow();
     },
-    computed: {
-
+    setState(item) {
+      console.log("setState " + item.name);
     },
-    created() {
-
+    dialogSelectionChange(values) {
+      console.log(values);
     },
-    mounted() {
-
+    dialogShow() {
+      this.$refs.dialog.show();
     },
-    methods: {
-
+    dialogHide() {
+      this.$refs.dialog.hide();
+    },
+    dialogSubmit() {
+      console.log("dialog submit");
+      this.dialogHide();
     },
+  },
 };
 </script>
 
 <style scoped>
-
+.users_list {
+  height: 100%;
+}
 </style>
-

src/pages/service_shop/sjfwDetail.vue

 <template>
   <div class="sevice_detail">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
         <el-breadcrumb-item to="/shop/data_service_list">

src/pages/service_shop/skfwDetail.vue

 <template>
   <div class="sevice_detail">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
         <el-breadcrumb-item to="/shop/space_time_service_list">

src/pages/service_shop/yysdDetail.vue

 <template>
   <div class="sevice_detail">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
         <el-breadcrumb-item to="/shop/app_store_list">

src/pages/service_shop/zhfwDetail.vue

 <template>
   <div class="sevice_detail">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
         <el-breadcrumb-item to="/shop/comprehensive_app_list">

src/pages/workbench/app_build.vue

 <template>
   <div class="app_build-container">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
         <el-breadcrumb-item>应用构建（镜像形式）</el-breadcrumb-item>
@@ -421,14 +421,14 @@ export default {
 </style>
 
 <style>
-.app_build-container .sevice_breadcrumb {
+.app_build-container .apass_breadcrumb {
   padding: 0 20px;
 }
-.app_build-container .sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
+.app_build-container .apass_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
   color: #626de9;
 }
 .app_build-container
-  .sevice_breadcrumb
+  .apass_breadcrumb
   > .el-breadcrumb
   .el-breadcrumb__item:last-child
   .el-breadcrumb__inner {

src/pages/workbench/fwgl/fwglList.vue

 <template>
   <div class="list_container">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
         <el-breadcrumb-item>我的服务</el-breadcrumb-item>
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>

src/pages/workbench/yygl/yyglList.vue

 <template>
   <div class="list_container">
-    <div class="sevice_breadcrumb">
+    <div class="apass_breadcrumb">
       <el-breadcrumb separator="/">
-        <el-breadcrumb-item>我的服务</el-breadcrumb-item>
+        <el-breadcrumb-item>我的应用</el-breadcrumb-item>
         <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
@@ -26,7 +26,7 @@
             prefix-icon="el-icon-search"
             placeholder="请输入应用名称"
             style="width:180px;"
-            @input="searchChange"
+            @input="searchAction"
             class="ces_toolbar_inp"
           ></el-input>
         </div>
@@ -252,7 +252,7 @@ export default {
     },
   },
   methods: {
-    searchChange(value) {
+    searchAction(value) {
       console.log(value);
     },
     filterChange(filter) {

src/router/index.js

@@ -263,6 +263,11 @@ export default new Router({
               name: "users",
               component: () => import("@/pages/authority/users"),
             },
+            {
+              path: "/authority/users/permission", // 用户管理页 - 权限审批
+              name: "users",
+              component: () => import("@/pages/authority/permission"),
+            },
             {
               path: "/authority/menu", // 菜单管理页
               name: "menu",