<template>
|
<div class="list">
|
<TableCustom :queryForm="pagination" :tableData="data" :total="pagination.total" @currentChange="handleCurrentChange"
|
@sizeChange="handleSizeChange">
|
<template #search>
|
<el-form inline>
|
<el-form-item label="角色名称">
|
<el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
|
</el-form-item>
|
<el-form-item style="margin-left: 63px;">
|
<el-button @click="reset">重置</el-button>
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
<template #setting>
|
<el-button icon="el-icon-plus" @click="add" type="primary">添加角色</el-button>
|
</template>
|
<template #table>
|
<el-table-column type="index" width="55" label="序号"></el-table-column>
|
<el-table-column prop="roleName" label="角色名称"></el-table-column>
|
<el-table-column prop="roleNum" label="角色人数"></el-table-column>
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
<el-table-column label="操作" width="300">
|
<template slot-scope="{row}">
|
<div>
|
<el-button type="text"
|
@click="$router.push(`/system/detail-role?roleId=${row.roleId}`)">详情</el-button>
|
<el-button v-if="row.roleId != 1" type="text"
|
@click="$router.push(`/system/edit-role?roleId=${row.roleId}`)">编辑</el-button>
|
<el-button v-if="row.roleId != 1" type="text" @click="del(row)">删除</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCustom>
|
<ShowDelConfirm :show="delShow" @close="delShow = false" @confirm="delConfirm" />
|
</div>
|
</template>
|
|
<script>
|
import { getList, delRole } from './service'
|
export default {
|
name: 'Role',
|
data() {
|
return {
|
delShow: false,
|
data: [],
|
roleName: '',
|
pagination: {
|
total: 10,
|
pageNum: 1,
|
pageSize: 10,
|
},
|
delId: '',
|
};
|
},
|
computed: {
|
height() {
|
return this.$baseTableHeight()
|
},
|
},
|
watch: {},
|
created() {
|
// this.getListData()
|
},
|
mounted() { },
|
methods: {
|
add() {
|
this.$router.push('/system/add-role')
|
},
|
delConfirm() {
|
delRole(this.delId).then(() => {
|
this.delShow = false
|
this.disbRow = {}
|
this.getListData()
|
this.msgsuccess('删除成功')
|
})
|
},
|
del(row) {
|
this.delShow = true
|
this.delId = row.roleId
|
},
|
async getListData() {
|
let obj = {
|
roleName: this.roleName,
|
pageNum: this.pagination.pageNum,
|
pageSize: this.pagination.pageSize
|
}
|
this.listLoading = true
|
const { data: { data: { records, total } } } = await getList(obj)
|
this.data = records
|
this.pagination.total = total
|
},
|
reset() {
|
this.roleName = ''
|
this.pagination.pageNum = 1
|
this.getListData()
|
},
|
onSubmit() {
|
this.pagination.pageNum = 1
|
this.getListData()
|
},
|
|
handleCurrentChange(e) {
|
this.pagination.pageNum = e;
|
this.getListData()
|
},
|
handleSizeChange(e) {
|
this.pagination.pageSize = e
|
this.getListData()
|
},
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.list {
|
height: 100%;
|
}
|
|
.green {
|
background-color: green;
|
}
|
|
.red {
|
background-color: red;
|
}
|
|
.demo-form-inline {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.add_btn {
|
margin-bottom: 20px;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
|
.status_class {
|
display: flex;
|
align-items: center;
|
|
div:nth-child(1) {
|
width: 9px;
|
height: 9px;
|
border-radius: 50%;
|
margin-right: 5px;
|
}
|
|
div:nth-child(2) {
|
margin-right: 8px;
|
}
|
}
|
</style>
|
