Skip to content

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

菜单权限组件

parent b6c50c16
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 73 deletions
src/assets/css/index.css
View file @ ab6f8fbf
......@@ -535,40 +535,40 @@ width: 620px!important;
background-color: #e1e4fb;
border-color: #e1e4fb;
}
.appas_table .el-table th > .cell {
.apass_table .el-table th > .cell {
color: #1a2236;
}
.appas_table .el-table td,
.appas_table .el-table th.is-leaf {
.apass_table .el-table td,
.apass_table .el-table th.is-leaf {
border: none !important;
line-height: 23px;
}
.appas_table .el-table::before {
.apass_table .el-table::before {
display: none;
}
.appas_table .el-table {
.apass_table .el-table {
width: 100%;
}
.appas_table .el-table__row:nth-child(odd) td {
.apass_table .el-table__row:nth-child(odd) td {
background-color: #f8f9fd;
}
.appas_table .row_action {
.apass_table .row_action {
user-select: none;
}
.appas_table .row_action .btn {
.apass_table .row_action .btn {
font-size: 14px;
font-weight: bold;
color: #0f2683;
cursor: pointer;
}
.appas_table .row_action .btn.warn {
.apass_table .row_action .btn.warn {
color: #830f53;
}
.appas_table .row_action .btn.disabled {
.apass_table .row_action .btn.disabled {
color: #dde4ff;
cursor: not-allowed;
}
.appas_table .row_action .interval_line {
.apass_table .row_action .interval_line {
font-size: 14px;
color: #dde4ff;
margin: 0 20px;
......
src/components/apass-dialog.vue
View file @ ab6f8fbf
......@@ -10,7 +10,7 @@
<span v-text="title || '提示'"></span>
</h3>
<div class="dialog_content appas_table" v-if="$slots.content">
<div class="dialog_content apass_table" v-if="$slots.content">
<slot name="content"></slot>
</div>
<p class="dialog_msg" v-html="msg" v-else></p>
......
src/components/apass-list.vue
View file @ ab6f8fbf
......@@ -44,10 +44,10 @@
<div class="cross_line" v-if="!hideHeader"></div>
<div class="list-container appas_table" v-if="$slots.list">
<div class="list-container" v-if="$slots.list">
<slot name="list"></slot>
</div>
<div class="list-container appas_table" v-else>
<div class="list-container" v-else>
<list-table
:header="listHeader"
:data="listData"
......
src/components/apass-table.vue
View file @ ab6f8fbf
<template>
<div class="appas_table">
<el-table slot="list" :border="false" :data="data">
<div class="apass_table">
<el-table :data="data">
<el-table-column :width="paddingLeft - 10"></el-table-column>
<el-table-column
v-for="(item, index) in header"
......
src/components/menu-permission.vue 0 → 100644
View file @ ab6f8fbf
<template>
<div class="menu_permission">
<el-table border :data="data">
<el-table-column label="名称" width="214">
<template slot-scope="scope">
<div class="permission_list">
<el-checkbox
:value="selectAllInfo[scope.row.prop]"
@change="selectAll(scope.row.prop)"
>
{{ scope.row.name }}
</el-checkbox>
</div>
</template>
</el-table-column>
<el-table-column label="选项">
<template slot-scope="scope">
<el-checkbox-group
v-model="permissions[scope.row.prop]"
class="permission_list"
@change="selectPermission"
>
<el-checkbox
v-for="(item, index) in scope.row.children"
:label="item.value"
:key="'permission_' + index"
>
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
model: {
prop: "permissions",
event: "change-permissions",
},
props: {
permissions: {
type: Object,
default: {},
},
data: {
type: Array,
default: () => [],
},
},
data: () => ({
selectAllInfo: {},
}),
watch: {
permissions: {
handler() {
this.upSelectAllInfo();
},
deep: true,
},
},
methods: {
selectPermission(values) {
this.$emit("change-permissions", this.permissions);
},
upSelectAllInfo() {
this.data.forEach((item) => {
let values = this.permissions[item.prop];
let datas = this.data.find((v) => v.prop === item.prop).children;
let selectAllFlag = true;
datas.forEach((v) => {
selectAllFlag = selectAllFlag && values.indexOf(v.value) > -1;
});
this.selectAllInfo[item.prop] = selectAllFlag;
});
},
selectAll(prop) {
let newValues = { ...this.permissions };
this.selectAllInfo[prop] = !this.selectAllInfo[prop];
if (this.selectAllInfo[prop]) {
newValues[prop] = this.data
.find((item) => item.prop === prop)
.children.map((item) => item.value);
} else {
newValues[prop] = [];
}
this.$emit("change-permissions", newValues);
},
},
mounted() {
this.upSelectAllInfo();
},
};
</script>
<style scoped>
.menu_permission {
margin-top: 20px;
}
</style>
<style>
.menu_permission .el-table__header-wrapper {
display: none;
}
.permission_list .el-checkbox {
color: #58617a;
line-height: 40px;
}
.permission_list .el-checkbox__input.is-checked .el-checkbox__inner,
.permission_list .el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #515fe7;
}
.permission_list .el-checkbox__input.is-checked + .el-checkbox__label {
color: #58617a;
}
.menu_permission .el-table .cell {
padding: 0 50px !important;
}
.menu_permission .el-table--border {
border: 1px solid #f4f7fc;
border-radius: 6px;
}
</style>
src/pages/authority/users.vue
View file @ ab6f8fbf
......@@ -17,63 +17,67 @@
权限审批
</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="$router.push(`/authority/users/detail/${scope.row.id}`)"
>
详情
</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>
<div class="apass_table" slot="list">
<el-table :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="
$router.push(`/authority/users/detail/${scope.row.id}`)
"
>
详情
</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>
</div>
</apass-list>
<apass-dialog
......
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