用户管理页面（解决toggleRowSelection在dialog用不了的隐患，包含el-table的plus版本的组件）-海口c网

新增/编辑/删除/分配角色，图片上传在此文章分类下另一个文章

1.重点分配角色：

<template><!-- 客户资料 --><div class="pageBox"><elPlusTable :tableData="tableData" :tablePage="tablePage" @onSizeChange='onSizeChange' @onCurrentChange='onCurrentChange'><template v-slot:searchConditions><el-form-item label="用户名称"><el-input v-model="formInline.name" placeholder="请输入" clearable /></el-form-item><el-form-item label="用户账号"><el-input v-model="formInline.username" placeholder="请输入" clearable /></el-form-item><el-form-item label="用户电话"><el-input v-model="formInline.mobilenumber" placeholder="请输入" clearable /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit"><Search style="width: 1em; height: 1em; margin-right: 8px" />查询</el-button><el-button type="primary" @click="onSubmitreset"><Search style="width: 1em; height: 1em; margin-right: 8px" />重置</el-button></el-form-item></template><template v-slot:optionBtn><el-button type="primary" @click="clickDialogBtn('新增',{})"><Plus style="width: 1em; height: 1em; margin-right: 8px" />新增</el-button><el-button @click="adminGetAllUser"><Delete style="width: 1em; height: 1em; margin-right: 8px" />删除</el-button></template><template v-slot:tableColumns><el-table-column type="selection" align="center" :selectable="selectable" width="110" /><el-table-column prop="avatar" align="center" label="头像"><template #default="scope"><el-image style="height: 40px;width: 40px;" :src="scope.row.avatar"></el-image></template></el-table-column><el-table-column prop="nickname" align="center" label="用户名称" /><el-table-column prop="username" align="center" label="用户账号" /><el-table-column prop="mobileNumber" align="center" label="用户电话" /><el-table-column prop="email" align="center" label="用户Email" /><el-table-column fixed="right" align="center" label="操作" min-><template #default="scope"><el-button link type="primary" size="small" @click="clickDialogBtn('编辑',scope.row)"><Edit style="width: 1em; height: 1em; margin-right: 8px" />编辑</el-button><el-button @click="remove(scope.row)" link type="primary" size="small"><Delete style="width: 1em; height: 1em; margin-right: 8px" />删除</el-button><el-button link type="primary" size="small" @click="handleClick(scope.row)">分配角色</el-button></template></el-table-column></template></elPlusTable><assigningRoles ref='assigningRolesREF' @onSure="onSureRole" /><addOrEditDialog ref="dialogRef" @onSure='addOnSure' @onSure2='addOnSurePWD'></addOrEditDialog></div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import PageBase from '@common/views/PageBase'
import assigningRoles from './assigningRoles.vue'
import elPlusTable from '@src/components/elPlusTableBase/index.vue'
import addOrEditDialog from './addOrEditDialog.vue'
import { useTTACLinkStore } from '@src/store/index'
import {adminGetAllUser,allocationUserRole,adminGetAllUserByPage,adminAddUser,adminRemoveUser,adminUpdateUser,adminUpdateUserPwd,getUserRoles,getAuthById,getAllAuth
} from '@common/apis/ttacLink'import {ElImage,ElPopconfirm,ElTable,ElTableColumn,ElButton,ElRadio,ElRadioGroup,ElMessage,ElForm,ElInput,ElIcon,ElTooltip,ElCheckbox,ElCheckboxGroup,ElFormItem,ElSelect,ElOption,ElDialog
} from 'element-plus'
import { ElMessageBox } from 'element-plus'@Options({components: {ElImage,ElPopconfirm,ElMessage,addOrEditDialog,elPlusTable,assigningRoles,ElTable,ElTableColumn,ElButton,ElRadio,ElRadioGroup,ElForm,ElInput,ElIcon,ElTooltip,ElCheckbox,ElCheckboxGroup,ElFormItem,ElSelect,ElOption,ElDialog}
})
export default class index extends PageBase {// 按钮功能权限private buttons: any = []// 权限读取private async getNowCustomerPageAuthInfoFn() {const ttacLinkStore = useTTACLinkStore()// let apiRoutes = await getAuthById(ttacLinkStore.currentUserInfo.userinfo.id)let apiRoutes = await getAllAuth()// getStore().commit('system/set_PCAPI_routes', apiRoutes)// if (this.$store.state.system.PCAPI_routes.findIndex((item) => item.menuPath == this.$route.path) > -1) {//   this.buttons = this.$store.state.system.PCAPI_routes.find((item) => item.menuPath == this.$route.path).button.split(',')// }// console.log('按钮权限：', this.buttons)}mounted() {this.adminGetAllUser()this.getNowCustomerPageAuthInfoFn()}private url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'private async remove(row) {// 使用 confirm 对话框的例子ElMessageBox.confirm('是否删除该行？', '警告', {distinguishCancelAndClose: true,confirmButtonText: '确定',cancelButtonText: '取消'}).then(async () => {console.log('用户点击了确定')let res = await adminRemoveUser([row.id])if (res.code == -1) {ElMessage({message: '删除失败!',type: 'error'})} else {ElMessage({message: '删除成功!',type: 'success'})this.adminGetAllUser()}}).catch((action) => {if (action === 'cancel') {console.log('用户点击了取消')// ElMessage({//       message: '取消!',//       type: 'error'//     })} else {console.log('用户关闭了对话框')}})}private async addOnSurePWD(data, key) {if (key == '编辑') {try {await adminUpdateUserPwd(data)ElMessage({message: '修改密码成功!',type: 'success'})this.adminGetAllUser()} catch (error) {}}}private async addOnSure(data, key) {if (key == '新增') {try {await adminAddUser(data)} catch (e) {ElMessage({message: '新增失败!',type: 'error'})return}ElMessage({message: '新增成功!',type: 'success'})this.adminGetAllUser()} else if (key == '编辑') {try {await adminUpdateUser(data)ElMessage({message: '编辑成功!',type: 'success'})this.adminGetAllUser()} catch (error) {}}}private async onSureRole(currentUserId, roles) {// 更新用户的角色列表let requestdata = { userId: currentUserId, userroleIds: [] }for (let index = 0; index < roles.length; index++) {const element = roles[index]requestdata.userroleIds.push(element.id)}await allocationUserRole(requestdata)// '分配角色成功'// this.$lyl_notifyPopup.success(`${this.$t('i18n.roleChangeInfo')}`)ElMessage({message: '成功分配权限!',type: 'success'})}private clickDialogBtn(dialogTitle: string, rowData: any) {;(this.$refs.dialogRef as any).openDialog(dialogTitle, rowData)}private tablePage: any = {pageSize: 10,total: 0,currentPage: 1}private async adminGetAllUser() {try {let res = await adminGetAllUserByPage(this.tablePage.currentPage,this.tablePage.pageSize,this.formInline.name,this.formInline.username,this.formInline.mobilenumber)this.tableData = res.data.datathis.tablePage.total = res.data.totalDataCountthis.tablePage.currentPage = res.data.pageIndex} catch (error) {console.log(error)}// let res = await adminGetAllUser()// this.tableData = res.data}private userId: string = ''private async handleClick(row) {this.userId = row.idlet currentRoles = await getUserRoles(row.id);(this.$refs.assigningRolesREF as any).openDialog(row, currentRoles.data)}private formInline: any = {name: '',username: '',mobilenumber: ''}private onSubmit = () => {this.adminGetAllUser()console.log('submit!')}private onSubmitreset() {this.formInline = {name: '',username: '',mobilenumber: ''}this.adminGetAllUser()}private selectable: any = nullprivate tableData: any[] = []private onSizeChange(val) {this.tablePage.pageSize = valthis.tablePage.currentPage = 1this.adminGetAllUser()console.log('变化了', val)}private onCurrentChange(val) {this.adminGetAllUser()console.log('变化了', val)}
}
</script>

1.新增

<template><el-dialog v-model="visible" title="分配角色" width="500px" center><div style='margin-top:20px;height:76%;'><elPlusTable ref="elplustableREF" :showPagination='showPagination' :showButton='showButton' :showSearch='showSearch' :tableData="tableData"@onSelectedData='getSelectionDataInfo'><template v-slot:tableColumns><el-table-column type="selection" min-width="55" /><el-table-column prop="rolename" label="角色名称" min-width="180" /></template></elPlusTable></div><template #footer><div class="dialog-footer"><el-button @click="close">取消</el-button><el-button type="primary" @click="confirm">确认</el-button></div></template></el-dialog>
</template><script lang="ts" >
import { ref, nextTick } from 'vue'
import { Options, Vue } from 'vue-class-component'
import elPlusTable from '@src/components/elPlusTableBase/index.vue'
import { Component, Prop, Emit, Watch } from 'vue-property-decorator'
import moment from 'moment'// import { downloadHisPdf } from '@/utils/PDF/getPdfDoc'import { getAllRole } from '@common/apis/ttacLink'
import PageBase from '@common/views/PageBase'
import {ElTableColumn,ElButton,ElRadio,ElRadioGroup,ElMessage,ElForm,ElInput,ElTable,ElIcon,ElTooltip,ElCheckbox,ElCheckboxGroup,ElFormItem,ElSelect,ElOption,ElDialog,ElRow
} from 'element-plus'
import { fa } from 'element-plus/es/locale'@Options({components: {elPlusTable,ElRow,ElDialog,ElTable,ElTableColumn,ElButton,ElRadio,ElRadioGroup,ElForm,ElInput,ElIcon,ElTooltip,ElCheckbox,ElCheckboxGroup,ElFormItem,ElSelect,ElOption}
})
export default class index extends PageBase {mounted() {}private showPagination: boolean = falseprivate visible: boolean = falseprivate showSearch: boolean = falseprivate showButton: boolean = falsepublic async openDialog(val, currentRoles) {this.visible = truelet res = await getAllRole()this.tableData = res.data// userId:当前行用户的 id    currentRoles：当前行用户的角色信息this.currentUserId = val.id//  计算已经初始化选中的行let initrows = []if (currentRoles) {for (let index = 0; index < this.tableData.length; index++) {const element = this.tableData[index]let find = currentRoles.find((o) => o.rolename === element.rolename)if (find) {initrows.push(element)}}await this.$nextTick();(this.$refs.elplustableREF as any).toggleRowSelections(initrows)window.console.log('initrows:', initrows)}// toggleRowSelection}private currentUserId: string = ''private ruleForm: any = {}private confirm() {this.onSure(this.currentUserId, this.chooseArray)this.visible = false}private close() {this.ruleForm = {}this.visible = false}private radio: any = ''private tableData: any[] = []// private tabHeight: string = '440px'// private getClickRowInfo(row) {//   this.$nextTick(() => {//     // ;(this.$refs.elplustableREF as any).toggleRowSelection(row, true)//   })//   // this.tableData.filter((item, index) => {//   //   if (row.id == item.id) {//   //     this.radio = index//   //   }//   // })// }private chooseArray: any[] = []private getSelectionDataInfo(row) {this.chooseArray = row}@Emit('onSure')private onSure(currentUserId: string, chooseArray: any[]) {}
}
</script>
<style lang="scss" scoped></style>

3.el-table抽离出来的组件

//el-table抽离出来的组件
<template><!-- 规格参数 --><div class="pageBox"><div class="searchBox" v-if="showSearch"><!-- 搜索条件 --><slot name="searchConditions"> </slot></div><div class="contentBox"><div class="optionBox" v-if="showButton"><!-- 操作按钮 --><slot name="optionBtn"> </slot></div><div class="tableBox" :style="{ height: showPagination ? 'calc(100% - 100px)' : 'calc(100% - 50px)' }"><el-table ref='pTable' height="100%" :data="tableData" style="width: 100%" @row-click="rowClickFn" @selection-change="selectionChange":header-cell-style="{ backgroundColor: '#007caa',color:'#fff' }">><!-- 表列表 --><slot name="tableColumns"> </slot></el-table></div><div class="paginationBox" v-if="showPagination"><!-- 分页 --><el-pagination v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize" :page-sizes="tablePage.pageSizes":size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="tablePage.total"@size-change="handleSizeChange" @current-change="handleCurrentChange" /></div></div></div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import PageBase from '@common/views/PageBase'
import addOrEditDialog from './addOrEditDialog.vue'
import { Prop, Component, Emit, Watch } from 'vue-property-decorator'
import {ElTable,ElTableColumn,ElButton,ElRadio,ElRadioGroup,ElMessage,ElForm,ElInput,ElIcon,ElTooltip,ElCheckbox,ElCheckboxGroup,ElFormItem,ElSelect,ElOption,ElDialog,ElPagination
} from 'element-plus'
import { computed } from 'vue'
import type { ComponentSize } from 'element-plus'
import dataDashboard from '@src/utils/modules/apiList/dataDashboard/dataDashboard'
@Options({components: {ElTable,ElTableColumn,ElButton,ElRadio,ElRadioGroup,ElForm,ElInput,ElIcon,ElTooltip,ElCheckbox,ElCheckboxGroup,ElFormItem,ElSelect,ElOption,ElDialog,ElPagination}
})
export default class index extends PageBase {mounted() {}@Prop({default: () => []})private tableData: any[]//  ------------------------------分页-----------------------------------------@Prop({default: true})showPagination: boolean //是否需要展示分页@Prop({default: true})showSearch: boolean //是否需要搜索@Prop({default: true})showButton: boolean //是否需要搜索@Prop({default: 20})total: number //数据总数//分页@Prop({default: {total: 0,currentPage: 1,pageSize: 10}})tablePage: anyprivate currentPage: number = 1 //当前页数private pageSize: number = 10 //一页多少条数据private pageSizes: number[] = [10, 20, 30, 40, 50]private size: string = 'default'private background: boolean = falseprivate disabled: boolean = false// 处理页码大小private handleSizeChange = (val: number) => {console.log(val)this.onSizeChange(val)}// 当前页变动private handleCurrentChange = (val: number) => {console.log(val)this.onCurrentChange(val)}private selectionChange(rows: any[]) {if (rows.length > 0) {}// if (val.length > 0) {//   ;(this.$refs.pTable as any).toggleRowSelection(val, true)// }this.onSelectedData(rows)}// 当选择项发生变化时会触发该事件@Emit('onSelectedData')private onSelectedData(data) {}private rowClickFn(data: any) {;(this.$refs.pTable as any).toggleRowSelection(data)this.getRowClickFn(data)}@Emit('getRowClickFn')private getRowClickFn(data: any) {}@Emit('onSizeChange')private onSizeChange(data: any) {}@Emit('onCurrentChange')private onCurrentChange(data: any) {}//这个解决了toggleRowSelection在dialog里用不了的隐患public toggleRowSelections(rows: any[]) {const table = this.$refs.pTable as anyif (table && table.toggleRowSelection) {rows.forEach((row) => {table.toggleRowSelection(row, true)})}}//  ---------------------------------------------------------------------------
}
</script><style lang="scss" scoped>
.pageBox {width: 100%;height: 100%;padding: 30px;box-sizing: border-box;.searchBox {width: 100%;height: 100px;border-radius: 10px;margin-bottom: 10px;display: flex;flex-wrap: nowrap;align-items: center;justify-content: left;padding: 10px;box-sizing: border-box;box-shadow: 0px 4px 12px 0px rgba(138, 149, 163, 0.35);::v-deep .el-form-item.asterisk-left {margin: 0 10px 0 0;}}.contentBox {padding: 10px;box-sizing: border-box;.optionBox {width: 100%;height: 50px;display: flex;align-items: center;}.tableBox {width: 100%;}.paginationBox {height: 50px;width: 100%;display: flex;flex-wrap: nowrap;align-items: center;justify-content: right;}width: 100%;height: calc(100% - 130px);border-radius: 10px;box-shadow: 0px 4px 12px 0px rgba(138, 149, 163, 0.35);}
}
.demo-pagination-block + .demo-pagination-block {margin-top: 10px;
}
.demo-pagination-block .demonstration {margin-bottom: 16px;
}
</style>