| | |
| | | <!-- |
| | | * @Author: Liuyi candymxq888@outlook.com |
| | | * @Date: 2024-08-06 16:17:39 |
| | | * @LastEditors: Liuyi candymxq888@outlook.com |
| | | * @LastEditTime: 2024-10-23 15:51:47 |
| | | * @FilePath: \water-qinghe-web\src\views\system\user\index.vue |
| | | * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE |
| | | --> |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form :model="queryParams" ref="queryRef" :inline="true"> |
| | | <el-form-item label="用户名称" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入用户名称" |
| | | clearable |
| | | style="width: 200px" |
| | | @keyup.enter="handleQuery" |
| | | /> |
| | | <el-input v-model="queryParams.name" placeholder="请输入用户名称" clearable style="width: 200px" |
| | | @keyup.enter="handleQuery" /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> |
| | |
| | | </el-form> |
| | | <el-row :gutter="10" class="mb8"> |
| | | <el-col :span="1.5"> |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | icon="Plus" |
| | | @click="handleAdd" |
| | | >新增</el-button> |
| | | <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button> |
| | | </el-col> |
| | | </el-row> |
| | | <!--表格及分页--> |
| | | <el-table v-loading="loading" :data="tableData"> |
| | | <el-table-column |
| | | v-for="(item, key, index) of tableHeader" |
| | | :prop="key.toString()" |
| | | :label="item" |
| | | :key="index" |
| | | align="center" |
| | | > |
| | | <el-table-column v-for="(item, key, index) of tableHeader" :prop="key.toString()" :label="item" :key="index" |
| | | align="center"> |
| | | <template #default="scope"> |
| | | <div v-if="key === 'userType'"> |
| | | {{userTypeList?.filter(fil => fil.dictValue == scope.row.userType.toString())[0].dictLabel}} |
| | | {{userTypeList?.filter(fil => fil.dictValue == scope.row.userType.toString())?.[0]?.dictLabel}} |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button> |
| | | <el-button v-if="scope.row.userType == 3" link type="primary" icon="Edit" @click="handleRole(scope.row)">绑定角色</el-button> |
| | | <el-button v-if="scope.row.userType == 3" link type="primary" icon="Edit" |
| | | @click="handleRole(scope.row)">绑定角色</el-button> |
| | | <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | :total="pageParam.total" |
| | | v-model:page="pageParam.page" |
| | | v-model:limit="pageParam.limit" |
| | | :page-sizes="[10,20,30]" |
| | | @pagination="getList" |
| | | /> |
| | | <pagination :total="pageParam.total" v-model:page="pageParam.page" v-model:limit="pageParam.limit" |
| | | :page-sizes="[10, 20, 30]" @pagination="getList" /> |
| | | <!-- 添加或修改对话框 --> |
| | | <el-dialog :title="title" v-model="open" append-to-body center> |
| | | <el-form class="form-box" ref="userRef" :model="form" :rules="rules"> |
| | |
| | | </el-form-item> |
| | | <el-form-item label="用户类型" prop="userType"> |
| | | <el-select v-model="form.userType" placeholder="请选择用户类型"> |
| | | <el-option |
| | | v-for="(item,index) in userTypeList" |
| | | :label="item.dictLabel" |
| | | :value="item.dictValue" |
| | | :key="index" |
| | | ></el-option> |
| | | <el-option v-for="(item, index) in userTypeList" :label="item.dictLabel" :value="item.dictValue" |
| | | :key="index"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="联系邮箱" prop="email"> |
| | |
| | | </el-dialog> |
| | | |
| | | <!-- 角色设置弹窗 --> |
| | | <el-dialog |
| | | v-model="open1" |
| | | title="角色绑定" |
| | | align-center |
| | | center |
| | | width="300" |
| | | > |
| | | <el-dialog v-model="open1" title="角色绑定" align-center center width="300"> |
| | | <div class="bandCheck"> |
| | | <el-checkbox-group v-model="roleCheckedList"> |
| | | <el-checkbox v-for="(item,index) in roleSelectList" :key="index" :label="item.name" :value="item.id" size ="large" /> |
| | | <el-checkbox v-for="(item, index) in roleSelectList" :key="index" :label="item.name" :value="item.id" |
| | | size="large" /> |
| | | </el-checkbox-group> |
| | | </div> |
| | | <div class="handleBtn"> |
| | |
| | | max-width: 100px; |
| | | height: 50px; |
| | | } |
| | | |
| | | .el-dialog{ |
| | | width:50vw; |
| | | |
| | | .user-form{ |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | |
| | | align-items: center; |
| | | margin: 20px auto; |
| | | width: 90%; |
| | | |
| | | .el-form-item{ |
| | | width: 45%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .bandCheck{ |
| | | width:100%; |
| | | /* background-color: beige; */ |
| | |
| | | align-items: center; |
| | | margin-bottom:100px; |
| | | } |
| | | |
| | | .handleBtn{ |
| | | width:100%; |
| | | /* background-color: beige; */ |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | |
| | | .el-button{ |
| | | width:100px; |
| | | } |
| | | } |
| | | </style> |
| | | |