Skip to content

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

组织管理列表

parent 648e2bd9
Show whitespace changes
Inline Side-by-side
Showing with 452 additions and 22 deletions
src/components/app-card.vue → src/components/app-list/app-card.vue
View file @ 8ebacf7e
......@@ -62,7 +62,7 @@ export default {
<style scoped>
.app_card {
width: calc(20% - 36px);
background-image: url(../assets/imgs/bg_block.png);
background-image: url(../../assets/imgs/bg_block.png);
background-size: 100% 100%;
padding: 33px 25px 34px;
box-sizing: border-box;
......@@ -74,7 +74,7 @@ export default {
position: relative;
}
.app_card:hover {
background-image: url(../assets/imgs/bg_block_hov.png);
background-image: url(../../assets/imgs/bg_block_hov.png);
}
.app_card > .remove_btn {
position: absolute;
......
src/components/organization-list/organization-card.vue 0 → 100644
View file @ 8ebacf7e
<template>
<div class="organization_card">
<a class="remove_btn" @click.prevent="deleteAction">
<i class="el-icon-close"></i>
</a>
<div class="organization_card-icon">
<el-avatar shape="square" :size="56" fit="cover" :src="data.img" />
</div>
<div class="organization_card-info">
<p
class="organization_card-name text_clip"
v-text="data.name"
@click="intoDetail"
></p>
</div>
<p class="organization_card-text">
<span>
<i class="el-icon-setting"></i>
<span>业务系统数</span>
</span>
<span class="text_clip" v-text="data.system_count"></span>
</p>
<p class="organization_card-text">
<span>
<i class="el-icon-user"></i>
<span>组织管理员</span>
</span>
<span class="text_clip" v-text="data.organization_manager"></span>
</p>
<p class="organization_card-text">
<span>
<i class="el-icon-time"></i>
<span>创建时间</span>
</span>
<span class="text_clip" v-text="data.time"></span>
</p>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: {},
},
cardType: {
type: [String, Number],
default: 0,
},
detailsUrl: {
type: String,
default: 0,
},
},
methods: {
deleteAction() {
this.$emit("delete-action", this.data);
},
intoDetail() {
this.$router.push(`${this.detailsUrl}${this.data.id}`);
},
},
};
</script>
<style scoped>
.organization_card {
background-image: url(../../assets/imgs/bg_xlblock.png);
background-size: 100% 100%;
padding: 33px 25px 34px;
box-sizing: border-box;
margin: 0 18px 38px;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
position: relative;
}
.organization_card:hover {
background-image: url(../../assets/imgs/bg_xlblock_hov.png);
}
.organization_card > .remove_btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 20px;
color: #8890a7;
cursor: pointer;
}
.organization_card > .organization_card-icon {
margin-right: 18px;
}
.organization_card > .organization_card-info {
width: calc(100% - 56px - 20px);
}
.organization_card-info > .organization_card-name {
font-size: 18px;
line-height: 32px;
color: #0d1847;
cursor: pointer;
}
.organization_card > .organization_card-action {
width: 100%;
text-align: center;
margin: 34px 0 5px;
}
.organization_card-text {
width: 100%;
font-size: 14px;
color: #0d1847;
line-height: 25px;
margin-top: 19px;
display: flex;
justify-content: space-between;
align-items: center;
}
.organization_card-text > span:nth-child(1) {
flex-shrink: 0;
color: #8890a7;
}
</style>
<style>
.organization_card-action > .el-button--primary.is-plain {
background-color: #d0d5e7;
border-color: #a5afd6;
color: #0f2683;
}
</style>
src/components/organization-list/organization-list.vue 0 → 100644
View file @ 8ebacf7e
<template>
<div class="organization_list" ref="container">
<organization-card
v-for="(item, index) in data"
:key="'organization_card_' + index"
:data="item"
@delete-action="deleteAction"
:details-url="detailsUrl"
:style="{ width: 'calc(100% / ' + rowNum + ' - 36px)' }"
></organization-card>
</div>
</template>
<script>
import organizationCard from "./organization-card";
export default {
components: {
organizationCard,
},
props: {
data: {
type: Array,
default: [],
},
detailsUrl: {
type: String,
default: 0,
},
},
data: () => ({
rowNum: 5,
}),
methods: {
deleteAction(item) {
this.$emit("delete-action", item);
},
pageResize() {
let listWidth = this.$refs.container.clientWidth;
this.rowNum = Math.floor(listWidth / 310);
},
},
mounted() {
this.pageResize();
window.onresize = () => {
this.pageResize();
};
},
};
</script>
<style scoped>
.organization_list {
margin: 20px -20px 0;
padding: 30px 0 0;
border-top: 1px solid #e3e5ef;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
</style>
src/components/table-um.vue
View file @ 8ebacf7e
......@@ -5,7 +5,6 @@
<div class="ces_toolbar">
<el-button
v-if="filterList && filterList.length"
size="small"
style="float: left;"
@click="showFliterList = !showFliterList"
>
......@@ -837,10 +836,6 @@ em {
border: 0;
padding: 0;
}
.ces_toolbar_inp .el-input__inner {
height: 32px;
line-height: 32px;
}
</style>
<style scoped>
.ces-table {
......@@ -848,7 +843,7 @@ em {
}
.ces_toolbar {
position: absolute;
top: -40px;
top: -50px;
right: 0;
left: 0;
text-align: right;
......
src/pages/authority/authority.vue
View file @ 8ebacf7e
<template>
<div class="fwgl_container">
<side-nav-bar title="权限管理" :nav-list="navList" :title-path="navList[0] && navList[0].path"></side-nav-bar>
<side-nav-bar title="权限管理" :title-icon="require('@/assets/imgs/tool_quanxian.png')" :nav-list="navList" :title-path="navList[0] && navList[0].path"></side-nav-bar>
<div class="main_container">
<router-view :key="'type_' + $route.params.type"></router-view>
</div>
......
src/pages/authority/organization.vue
View file @ 8ebacf7e
<template>
<div></div>
<template>
<div class="organization_container">
<div class="sevice_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item>权限管理</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">
新建组织
</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>
<organization-list
:data="organizationList"
details-url="/authority/organization/"
@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>
</div>
</template>
<script>
import organizationList from "@/components/organization-list/organization-list";
import commentsPagination from "@/components/comments-pagination";
import dialogAction from "@/components/dialog-action";
export default {
methods: {}
components: {
organizationList,
dialogAction,
commentsPagination,
},
data: () => ({
searchFilter: "",
organizationList: [
{
id: 1000001,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "贵阳市公安局",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000002,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "语音识别",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000003,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000004,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000005,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000006,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000007,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 100000,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000009,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
{
id: 1000010,
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
name: "轨迹绘制",
system_count: 6,
organization_manager: 3,
time: "2019-04-11 12:50:30",
},
],
pageSizes: [10, 50, 100],
pageSize: 10,
currentPage: 1,
confirmOptions: {
title: "",
message: "",
btnCancelText: "",
btnSubmitText: "",
item: null,
},
}),
methods: {
addOrganization() {
console.log("add organization");
},
searchAction() {
console.log(this.searchFilter);
},
deleteAction(item) {
if (this.cardType === 0) {
this.confirmOptions.title = "删除提示";
this.confirmOptions.message =
"您需要先进行应用商店下架申请，应用处于下架状态时才能进行删除操作。";
this.confirmOptions.btnCancelText = "";
this.confirmOptions.btnSubmitText = "";
this.confirmOptions.confirmSubmit = () => {
console.log("deleteItem - " + item.name);
this.$refs.myConfirm.hideModel();
};
} else if (this.cardType === 1) {
this.confirmOptions.title = "是否删除部署的应用";
this.confirmOptions.message =
"该操作会导致正在调用该应用的用户被迫终止对应用的调用，删除前需向正在调用该应用的用户发送通知，自通知发送之日起，2日后应用将被删除。";
this.confirmOptions.btnCancelText = "";
this.confirmOptions.btnSubmitText = "发送通知";
this.confirmOptions.confirmSubmit = () => {
console.log("deleteItem - " + item.name);
this.$refs.myConfirm.hideModel();
};
}
this.$refs.myConfirm.showModel();
},
changePageSize(value) {
this.pageSize = value;
this.currentPage = 1;
},
changeCurrentPage(value) {
this.currentPage = value;
},
},
};
</script>
<style scoped>
.organization_container {
height: 100%;
padding: 0 20px;
overflow: auto;
}
.main_container {
min-height: calc(100% - 74px);
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;
justify-content: center;
align-items: center;
}
.organization_info > img {
margin-right: 10px;
}
.organization_info > span {
font-size: 18px;
color: #58617a;
}
.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/workbench/fwgl/fwglList.vue
View file @ 8ebacf7e
......@@ -29,6 +29,7 @@
@action-approval="approvalItem"
@action-detail="detailItem"
@action-allot="allotItem"
style="margin-top: 50px;"
></ces-table>
</div>
<dialog-action
......@@ -525,7 +526,4 @@ export default {
overflow: hidden;
background-color: #fff;
}
.main_container .ces-table-page {
margin-top: 42px;
}
</style>
src/pages/workbench/yygl/yyglList.vue
View file @ 8ebacf7e
......@@ -11,7 +11,6 @@
<div class="filter_action">
<el-button
v-if="filterList && filterList.length"
size="small"
@click="showFliterList = !showFliterList"
>
{{ showFliterList ? "收起" : "筛选" }}
......@@ -76,7 +75,7 @@
@action-edit="editItem"
@off-line="offLine"
@goods-shelf="goodsShelf"
style="margin-top: 44px;"
style="margin-top: 50px;"
></ces-table>
</div>
<dialog-action
......@@ -88,7 +87,7 @@
<script>
import tableFilter from "@/components/table-filter";
import appList from "@/components/app-list";
import appList from "@/components/app-list/app-list";
import cesTable from "@/components/table-um";
import dialogAction from "@/components/dialog-action";
import commentsPagination from "@/components/comments-pagination";
......@@ -532,11 +531,12 @@ export default {
<style scoped>
.list_container {
height: 100%;
min-height: 100%;
padding: 0 20px;
overflow: auto;
}
.main_container {
height: calc(100% - 75px);
min-height: calc(100% - 75px);
padding: 15px 20px;
border-radius: 10px;
overflow: hidden;
......
src/router/index.js
View file @ 8ebacf7e
......@@ -216,7 +216,7 @@ export default new Router({
component: () => import("@/pages/user/order_list"),
},
],
},
}, // 个人中心
{
path: "/authority", // 权限管理
name: "authority",
......@@ -244,7 +244,7 @@ export default new Router({
component: () => import("@/pages/authority/roles"),
},
],
},
}, // 权限管理
],
},
{
......
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