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

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

1.重点分配角色：

javascript 复制代码

<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.data
      this.tablePage.total = res.data.totalDataCount
      this.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.id
    let 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 = null
  private tableData: any[] = []
  private onSizeChange(val) {
    this.tablePage.pageSize = val
    this.tablePage.currentPage = 1
    this.adminGetAllUser()
    console.log('变化了', val)
  }
  private onCurrentChange(val) {
    this.adminGetAllUser()
    console.log('变化了', val)
  }
}
</script>

1.新增

javascript 复制代码

<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 = false
  private visible: boolean = false
  private showSearch: boolean = false
  private showButton: boolean = false
  public async openDialog(val, currentRoles) {
    this.visible = true
    let 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抽离出来的组件

javascript 复制代码

//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: any

  private currentPage: number = 1 //当前页数
  private pageSize: number = 10 //一页多少条数据
  private pageSizes: number[] = [10, 20, 30, 40, 50]
  private size: string = 'default'
  private background: boolean = false
  private 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 any
    if (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>