<template>
|
<div class="authorityManagement_box">
|
<My-bread :list="['运维管理', '权限管理']"></My-bread>
|
<el-divider />
|
<div class="inquire">
|
<el-form ref="formData1" :model="form" :inline="true">
|
<el-form-item label="" prop="name">
|
<el-input v-model="form.name" placeholder="关键字" />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button @click="onSubmit" icon="el-icon-search">查询</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="btn_box">
|
<el-button icon="el-icon-circle-plus-outline">添加</el-button>
|
<el-button type="primary">修改</el-button>
|
<el-button>删除</el-button>
|
</div>
|
</div>
|
<div class="table_box">
|
<el-table :data="tableData" stripe style="width: 100%">
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="name" label="角色名" />
|
<el-table-column prop="ip" label="IP地址" />
|
<el-table-column prop="creationtime" label="创建时间" />
|
|
<el-table-column fixed="right" label="操作" width="350">
|
<template #default>
|
<!-- <el-button type="primary" size="small">修改</el-button> -->
|
<el-button type="primary" size="small">菜单授权</el-button>
|
<el-button type="primary" size="small">图层授权</el-button>
|
<el-button type="primary" size="small">用户授权</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div style="margin-top: 40px" class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="2"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
MyBread,
|
},
|
|
data() {
|
return {
|
currentPage4: 1,
|
form: {
|
name: "",
|
region: "",
|
jurisdiction: "",
|
},
|
|
tableData: [
|
{
|
creationtime: "2022-05-03",
|
name: "admin",
|
ip: "192.168.11.1",
|
},
|
{
|
creationtime: "2022-05-03",
|
name: "admin",
|
ip: "192.168.11.1",
|
},
|
],
|
};
|
},
|
methods: {
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
onSubmit() {},
|
},
|
created() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.authorityManagement_box {
|
background: rgb(240, 242, 245);
|
border-radius: 10px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.inquire {
|
padding: 10px;
|
margin-top: 20px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
margin-bottom: 20px;
|
display: flex;
|
.btn_box {
|
margin-left: auto;
|
}
|
}
|
.table_box {
|
padding: 10px;
|
background: #fff;
|
border-radius: 5px;
|
border: 1px solid rgb(202, 201, 204);
|
}
|
}
|
</style>
|
