| | |
| | | <template> |
| | | <div> |
| | | <div class="page"> |
| | | <h2 class="page-title">平台管理员</h2> |
| | | <el-form :inline="true" class="search-form" @submit.prevent="doSearch"> |
| | | <el-form-item label="姓名"> |
| | |
| | | <el-button @click="resetSearch">重置</el-button> |
| | | </el-form-item> |
| | | <el-form-item class="push-right"> |
| | | <el-button v-permission="'sys:users:create'" type="success" @click="openCreate">新增管理员</el-button> |
| | | <el-button v-permission="'sys:users:create'" type="primary" @click="openCreate">新增管理员</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" :index="indexMethod" type="index" /> |
| | | <el-table-column prop="realName" label="姓名" width="100" show-overflow-tooltip /> |
| | | <el-table-column prop="username" label="登录账号" width="120" show-overflow-tooltip /> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </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" |
| | | /> |
| | | |
| | | <!-- 新增 --> |
| | |
| | | <el-option |
| | | v-for="r in roles" |
| | | :key="r.id" |
| | | :label="`${r.roleName} (${r.roleCode})`" |
| | | :label="r.roleName" |
| | | :value="r.id" |
| | | /> |
| | | </el-select> |
| | |
| | | <el-option |
| | | v-for="r in roles" |
| | | :key="r.id" |
| | | :label="`${r.roleName} (${r.roleCode})`" |
| | | :label="r.roleName" |
| | | :value="r.id" |
| | | /> |
| | | </el-select> |
| | |
| | | filters.mobile = ""; |
| | | filters.roleId = undefined; |
| | | filters.status = undefined; |
| | | page.value = 1; |
| | | load(); |
| | | } |
| | | |
| | | function onSizeChange(nextSize: number) { |
| | | size.value = nextSize; |
| | | page.value = 1; |
| | | load(); |
| | | } |
| | |
| | | font-weight: 700; |
| | | } |
| | | |
| | | .page { |
| | | display: flex; |
| | | flex-direction: column; |
| | | height: calc(100vh - 190px); |
| | | min-height: 420px; |
| | | } |
| | | |
| | | .search-form { |
| | | margin-bottom: 12px; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 4px 0; |
| | | flex: none; |
| | | } |
| | | .push-right { |
| | | margin-left: auto; |
| | | } |
| | | .pager { |
| | | .table-wrap { |
| | | flex: 1; |
| | | min-height: 0; |
| | | } |
| | | .main-pager { |
| | | margin-top: 12px; |
| | | justify-content: flex-end; |
| | | flex: none; |
| | | } |
| | | |
| | | .avatar-upload-row { |