export const getRoleEdit = params => put('/api-user/roles', params);
export const getRole = (params) => get(`/api-user/listRoles?pageNum=${params.pageNum}&&pageSize=${params.pageSize}&&name=${params.name}`);
<template>
<div class="content_bg">
<div class="content">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="角色名：">
<el-input v-model="formInline.user" placeholder="角色名"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handerSearch">搜索</el-button>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="handerAdd">添加</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border style="width: 100%" row-key="id">
<el-table-column prop="code" label="code" align="center"> </el-table-column>
<el-table-column prop="name" label="角色名" align="center"> </el-table-column>
<el-table-column prop="updateTime" label="修改时间" align="center"> </el-table-column>
<el-table-column fixed="right" label="操作" width="300" align="center">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)" type="primary" size="small" :disabled="scope.row.id == 1"><i class="el-icon-edit"></i></el-button>
<el-button @click="handleDelete(scope.row)" type="primary" size="small" :disabled="scope.row.id == 1"><i class="el-icon-delete"></i></el-button>
<el-button type="primary" size="small" :disabled="scope.row.id == 1">分配权限</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 30px;float: right;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[1, 2, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
<el-dialog :title="flagName ? '添加' : '编辑'" :visible.sync="centerDialogVisible" width="50%" center>
<el-form label-position="top" label-width="80px" :model="formLabelAlign">
<el-form-item label="code(不能修改)" v-if="flagName">
<el-input v-model="formLabelAlign.code"></el-input>
</el-form-item>
<el-form-item label="code" v-else>
<el-input v-model="formLabelAlign.code" disabled></el-input>
</el-form-item>
<el-form-item label="角色">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">返回</el-button>
<el-button type="primary" @click="handerAddSave" v-if="flagName">保存</el-button>
<el-button type="primary" @click="handerEditSave" v-else>保存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { getRole, getRoleEdit, getRoleAdd, getRoleDelete } from '@/api/index';
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
pageNum: 1,
pageSize: 10,
total: 0,
formInline: {
user: ''
},
flagName: false,
centerDialogVisible: false,
formLabelAlign: {
name: '',
code: ''
},
tableData: []
};
},
created() {
this.getRoleList({});
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getRoleList();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.pageNum = val;
this.getRoleList();
},
// 查询
getRoleList() {
let params = {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.formInline.user
}
getRole(params).then(res => {
if (res.status == 200) {
this.tableData = res.data.data.list;
this.total = res.data.data.total;
this.pageNum = res.data.data.pageNum;
this.pageSize = res.data.data.pageSize;
}
});
},
// 搜索
handerSearch() {
this.getRoleList(this.formInline.name);
},
// 添加
handerAdd() {
this.formLabelAlign = {};
this.flagName = true;
this.centerDialogVisible = true;
},
// 编辑
handleEdit(row) {
console.log(111, row);
this.flagName = false;
this.centerDialogVisible = true;
this.formLabelAlign = row;
},
// 添加保存
handerAddSave() {
getRoleAdd(this.formLabelAlign).then(res => {
this.centerDialogVisible = false;
this.getRoleList();
this.$message.success('添加成功');
});
},
// 编辑保存
handerEditSave() {
getRoleEdit(this.formLabelAlign).then(res => {
this.centerDialogVisible = false;
this.getRoleList();
this.$message.success('修改成功');
});
},
handleDelete(row) {
this.$confirm('确定要删除吗?', '信息', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
getRoleDelete(row.id).then(res => {
this.getRoleList();
this.$message({
type: 'success',
message: '删除成功!'
});
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
};
</script>
<style lang="less" scoped></style>