| | |
| | | <template> |
| | | <div> |
| | | <div class="page"> |
| | | <el-form :inline="true" class="search-form" @submit.prevent="doSearch"> |
| | | <el-form-item label="角色名称"> |
| | | <el-input v-model="filters.roleName" placeholder="模糊查询" clearable style="width: 160px" /> |
| | | <el-input v-model="filters.roleName" placeholder="请输入角色名称" clearable style="width: 160px" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" native-type="submit">搜索</el-button> |
| | | <el-button @click="resetSearch">重置</el-button> |
| | | </el-form-item> |
| | | <el-form-item class="push-right"> |
| | | <el-button v-permission="'sys:roles:create'" type="success" @click="goCreate">新增</el-button> |
| | | <el-button v-permission="'sys:roles:create'" type="primary" @click="goCreate">新增</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <el-table :data="rows" v-loading="loading" stripe> |
| | | <div class="table-wrap"> |
| | | <el-table :data="rows" v-loading="loading" stripe height="100%"> |
| | | <el-table-column label="序号" width="64" type="index" :index="indexMethod" /> |
| | | <el-table-column prop="roleName" label="角色名称" min-width="140" show-overflow-tooltip /> |
| | | <el-table-column label="关联账号数" width="120" align="center"> |
| | |
| | | <el-button v-permission="'sys:roles:update'" type="primary" link @click="goEdit(row)">编辑</el-button> |
| | | <el-button |
| | | v-permission="'sys:roles:delete'" |
| | | type="danger" |
| | | type="primary" |
| | | link |
| | | :disabled="row.userCount > 0" |
| | | @click="confirmDelete(row)" |
| | |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-table> |
| | | </div> |
| | | |
| | | <el-pagination |
| | | class="pager" |
| | | class="main-pager" |
| | | background |
| | | layout="prev, pager, next" |
| | | layout="sizes, prev, pager, next" |
| | | :total="total" |
| | | :page-size="size" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | v-model:current-page="page" |
| | | @current-change="load" |
| | | @size-change="onSizeChange" |
| | | /> |
| | | </div> |
| | | </template> |
| | |
| | | load(); |
| | | } |
| | | |
| | | function onSizeChange(nextSize: number) { |
| | | size.value = nextSize; |
| | | page.value = 1; |
| | | load(); |
| | | } |
| | | |
| | | function goCreate() { |
| | | router.push({ name: "role-create" }); |
| | | } |
| | |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 4px 0; |
| | | flex: none; |
| | | } |
| | | .push-right { |
| | | margin-left: auto; |
| | | } |
| | | .pager { |
| | | .page { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: calc(100vh - 190px); |
| | | min-height: 420px; |
| | | } |
| | | .table-wrap { |
| | | flex: 1; |
| | | min-height: 0; |
| | | } |
| | | .main-pager { |
| | | margin-top: 12px; |
| | | justify-content: flex-end; |
| | | flex: none; |
| | | } |
| | | </style> |