Skip to content

A
apaas-ui
Commit 812057c8 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

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

parent 8755cec3
Show whitespace changes
Inline Side-by-side
Showing with 619 additions and 39 deletions
src/assets/css/index.css
View file @ 812057c8
......@@ -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 0 → 100644
View file @ 812057c8
<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 0 → 100644
View file @ 812057c8
<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
View file @ 812057c8
......@@ -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
View file @ 812057c8
<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 0 → 100644
View file @ 812057c8
<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
View file @ 812057c8
<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>
<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",
},
data() {
return {
};
{
account: "012345",
name: "贵州省水利厅",
role: "普通用户",
organization: "贵阳市水利局",
state: 1,
update_time: "2020-04-27 13:24:19",
},
watch: {
{
account: "012346",
name: "贵州省公安厅",
role: "普通用户",
organization: "贵阳市水利局",
state: 1,
update_time: "2020-04-27 13:24:19",
},
computed: {
{
account: "012347",
name: "贵阳机关事务大数据平台",
role: "普通用户",
organization: "贵阳市水利局",
state: 1,
update_time: "2020-04-27 13:24:19",
},
created() {
{
account: "012348",
name: "长兴县应急指挥平台",
role: "普通用户",
organization: "贵阳市水利局",
state: 1,
update_time: "2020-04-27 13:24:19",
},
mounted() {
],
roleData: [
{
name: "超级管理员",
description: "拥有所有权限",
},
{
name: "组织管理员",
description: "拥有对应组织的权限",
},
{
name: "普通用户",
description: "普通权限用户",
},
{
name: "普通用户-开发者",
description: "基于普通用户多一些开发的选项",
},
],
showDialog: false,
}),
methods: {
listAction(value) {
console.log(value);
},
getDetail(item) {
console.log("getDetail " + item.name);
},
setRole(item) {
console.log("setRole " + item.name);
this.dialogShow();
},
setState(item) {
console.log("setState " + item.name);
},
dialogSelectionChange(values) {
console.log(values);
},
dialogShow() {
this.$refs.dialog.show();
},
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
View file @ 812057c8
<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
View file @ 812057c8
<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
View file @ 812057c8
<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
View file @ 812057c8
<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
View file @ 812057c8
<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
View file @ 812057c8
<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
View file @ 812057c8
<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
View file @ 812057c8
......@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment