初始化

src/views/Basic/Role/Comp/RoleEmployee.vue

@@ -0,0 +1,71 @@
+<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: 'name', label: '姓名', width: '200px' },
+  { prop: 'mobile', label: '手机号', width: '150px' },
+  { prop: 'deptName', label: '部门' },
+  { prop: 'roles', label: '角色' }
+])
+
+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>