121 lines
2.5 KiB
Vue
121 lines
2.5 KiB
Vue
<template>
|
|
<div class="manage-container">
|
|
<el-table :data="roleData" border stripe style="width: 100%">
|
|
<el-table-column
|
|
prop="id"
|
|
label="ID"
|
|
width="60"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
:label="$t('staff.yhm')"
|
|
width="120"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="key"
|
|
label="key"
|
|
width="120"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="createTime"
|
|
:label="$t('grouping.cjsj')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="updateTime"
|
|
:label="$t('grouping.gxsj')"
|
|
width="200"
|
|
align="center"
|
|
></el-table-column>
|
|
</el-table>
|
|
<vab-query-form>
|
|
<vab-query-form-right-panel>
|
|
<el-pagination
|
|
:background="background"
|
|
:current-page="queryForm.page"
|
|
:layout="layout"
|
|
:page-size="queryForm.size"
|
|
:total="total"
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
></el-pagination>
|
|
</vab-query-form-right-panel>
|
|
</vab-query-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { miniRoleSelect } from '@/api/role';
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
roleData: [],
|
|
lazy: true,
|
|
activeName: 'first',
|
|
layout: 'total, sizes, prev, pager, next, jumper',
|
|
total: 0,
|
|
background: true,
|
|
listLoading: true,
|
|
elementLoadingText: '正在加载...',
|
|
queryForm: {
|
|
page: 1,
|
|
size: 20,
|
|
name: '',
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
height() {
|
|
return 500;
|
|
},
|
|
},
|
|
created() {},
|
|
methods: {
|
|
realIndex() {
|
|
this.fetchData();
|
|
},
|
|
async fetchData() {
|
|
this.listLoading = true;
|
|
const { data } = await miniRoleSelect(this.queryForm);
|
|
this.roleData = data.items;
|
|
this.total = data.total;
|
|
setTimeout(() => {
|
|
this.listLoading = false;
|
|
}, 500);
|
|
},
|
|
handleQuery() {
|
|
this.queryForm.page = 1;
|
|
this.fetchData();
|
|
},
|
|
handleSizeChange(val) {
|
|
this.queryForm.size = val;
|
|
this.fetchData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.queryForm.page = val;
|
|
this.fetchData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.manage-container {
|
|
width: 100%;
|
|
|
|
.vab-query-form {
|
|
margin-bottom: 30px;
|
|
|
|
.el-input {
|
|
width: 180px;
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|