ss-crm-manage-web/src/views/Basic/Role/Comp/RoleEmployee.vue

<template>
  <div>
    <el-table v-loading="loading" :data="tableList" border>
      <el-table-column type="index" width="50" />
      <el-table-column
        v-for="col in columns"
        :prop="col.prop"
        :key="col.prop"
        :label="col.label"
        :width="col.width"
      />
    </el-table>
    <Pagination
      v-model:limit="pageSize"
      v-model:page="currentPage"
      :total="total"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="RoleEmployee">
import { getRoleUsers } from '@/api/system/role'

const props = defineProps({
  roleId: {
    type: Number
  }
})

watch(
  () => props.roleId,
  (newValue) => {
    getList(newValue)
  }
)

const loading = ref(false)
const tableList = ref([])
const total = ref(0)
const pageSize = ref(20)
const currentPage = ref(1)

const columns = ref([
  { prop: 'nickname', label: '姓名' },
  { prop: 'mobile', label: '手机号' },
  { prop: 'deptName', label: '部门' },
  { prop: '', label: '角色', width: '300px' }
])

async function getList() {
  loading.value = true
  try {
    const data = await getRoleUsers({
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      id: props.roleId
    })
    tableList.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>