feat: 对应角色列表的员工列表

src/pages/Role/System/index.tsx

@@ -1,12 +1,17 @@
+import { useModel } from 'umi'
+import React, { useMemo } from 'react'
 import Icon from '@/components/IconPark'
-import { DownOutlined, PlusOutlined } from '@ant-design/icons'
 import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
-import { Button, Col, Row, Table, Tabs, List, Popover } from 'antd'
-import React from 'react'
+import { Tabs } from 'antd'
+import ProTable from '@ant-design/pro-table'
+import RoleMenu from '../System/components/roleMenu'
 
-const index = () => {
+const System = () => {
+  const { initialState } = useModel('@@initialState')
+  const menuId = useMemo(() => {
+    return initialState?.menuList?.find(item => item.name === '客户')?.id
+  }, initialState.menuList)
   const { TabPane } = Tabs
-  const data = ['超级管理员', '管理员A', '管理员B']
   const dataSource = [
     {
       key: '1',
@@ -24,169 +29,145 @@ const index = () => {
 
   const columns = [
     {
-      title: '姓名',
+      title: '用户',
       dataIndex: 'name',
       key: 'name'
     },
     {
-      title: '年龄',
+      title: '手机',
       dataIndex: 'age',
       key: 'age'
     },
     {
-      title: '住址',
+      title: '部门',
+      dataIndex: 'address',
+      key: 'address'
+    },
+    {
+      title: '岗位',
+      dataIndex: 'address',
+      key: 'address'
+    },
+    {
+      title: '角色',
+      dataIndex: 'address',
+      key: 'address'
+    },
+    {
+      title: '操作',
       dataIndex: 'address',
       key: 'address'
     }
   ]
 
-  const content = (
-    <div className="popoverList">
-      <ul>
-        <li>复制</li>
-        <li>粘贴</li>
-        <li className="text-red-500">删除</li>
-      </ul>
-    </div>
-  )
   return (
-    <div>
-      <Row>
-        <Col flex="260px">
-          <div className="leftTitle bg-white rounded">
-            <h2 className="titleBorder bg-[#f7f9fa] p-4 flex justify-between items-center">
-              <span>角色列表</span>
-              <Button size="small" type="primary" ghost>
-                <PlusOutlined />
-                创建角色
-              </Button>
-            </h2>
-            <div className="p-4">
-              <List
-                dataSource={data}
-                renderItem={item => (
-                  <List.Item>
-                    {item}
-                    <span className="float-right">
-                      <Popover placement="bottomRight" content={content} trigger="click">
-                        <DownOutlined />
-                      </Popover>
-                    </span>
-                  </List.Item>
-                )}
+    <div className="h-full w-full flex flex-row">
+      <RoleMenu menuId={menuId} />
+      <div className="bg-white ml-4 p-4 flex-auto">
+        <Tabs defaultActiveKey="1" type="card">
+          <TabPane tab="员工列表" key="1">
+            <ProTable
+              bordered
+              rowKey="key"
+              colums={columns}
+              search={false}
+              toolBarRender={false}
+              dataSource={dataSource}
+            />
+          </TabPane>
+          <TabPane tab="角色权限" key="2">
+            <ProForm layout="horizontal" initialValues={{ staff: ['1', '2'] }}>
+              <ProFormSwitch
+                name="showHome"
+                label={
+                  <span className="flex items-center">
+                    <Icon type="home" className="mr-1" className="flex items-baseline mr-1" />
+                    后台首页
+                  </span>
+                }
               />
-            </div>
-          </div>
-        </Col>
-        <Col flex="auto">
-          <div className="ml-4 bg-white p-4">
-            <Tabs defaultActiveKey="1" type="card">
-              <TabPane tab="员工列表" key="1">
-                <Table dataSource={dataSource} columns={columns} />
-              </TabPane>
-              <TabPane tab="角色权限" key="2">
-                <ProForm layout="horizontal" initialValues={{ staff: ['1', '2'] }}>
-                  <ProFormSwitch
-                    name="showHome"
-                    label={
-                      <span className="flex items-center">
-                        <Icon type="home" className="mr-1" className="flex items-baseline mr-1" />
-                        后台首页
-                      </span>
-                    }
-                  />
 
-                  <ProFormSwitch
-                    name="showAuth"
-                    label={
-                      <span className="flex items-center">
-                        <Icon
-                          type="every-user"
-                          className="mr-1"
-                          className="flex items-baseline mr-1"
-                        />
-                        角色权限管理
-                      </span>
-                    }
+              <ProFormSwitch
+                name="showAuth"
+                label={
+                  <span className="flex items-center">
+                    <Icon type="every-user" className="mr-1" className="flex items-baseline mr-1" />
+                    角色权限管理
+                  </span>
+                }
+              />
+              <ProFormDependency name={['showAuth']}>
+                {({ showAuth }) => (
+                  <ProFormCheckbox.Group
+                    wrapperCol={{ offset: 1 }}
+                    name="staff"
+                    options={[
+                      { value: '1', label: '系统管理', disabled: !showAuth },
+                      { value: '2', label: '客户', disabled: !showAuth },
+                      { value: '3', label: '产品', disabled: !showAuth },
+                      { value: '4', label: '开票合同', disabled: !showAuth },
+                      { value: '5', label: '考勤', disabled: !showAuth },
+                      { value: '6', label: '人资', disabled: !showAuth },
+                      { value: '7', label: '财务费用', disabled: !showAuth }
+                    ]}
                   />
-                  <ProFormDependency name={['showAuth']}>
-                    {({ showAuth }) => (
-                      <ProFormCheckbox.Group
-                        wrapperCol={{ offset: 1 }}
-                        name="staff"
-                        options={[
-                          { value: '1', label: '系统管理', disabled: !showAuth },
-                          { value: '2', label: '客户', disabled: !showAuth },
-                          { value: '3', label: '产品', disabled: !showAuth },
-                          { value: '4', label: '开票合同', disabled: !showAuth },
-                          { value: '5', label: '考勤', disabled: !showAuth },
-                          { value: '6', label: '人资', disabled: !showAuth },
-                          { value: '7', label: '财务费用', disabled: !showAuth }
-                        ]}
-                      />
-                    )}
-                  </ProFormDependency>
-                  <ProFormSwitch
-                    name="showAudit"
-                    label={
-                      <span className="flex items-center">
-                        <Icon
-                          type="inspection"
-                          className="mr-1"
-                          className="flex items-baseline mr-1"
-                        />
-                        审批流程
-                      </span>
-                    }
+                )}
+              </ProFormDependency>
+              <ProFormSwitch
+                name="showAudit"
+                label={
+                  <span className="flex items-center">
+                    <Icon type="inspection" className="mr-1" className="flex items-baseline mr-1" />
+                    审批流程
+                  </span>
+                }
+              />
+              <ProFormDependency name={['showAudit']}>
+                {({ showAudit }) => (
+                  <ProFormCheckbox.Group
+                    wrapperCol={{ offset: 1 }}
+                    name="audit"
+                    options={[
+                      { value: '1', label: '流程角色', disabled: !showAudit },
+                      { value: '2', label: '开票合同', disabled: !showAudit },
+                      { value: '3', label: '财务费用', disabled: !showAudit },
+                      { value: '4', label: '人资管理', disabled: !showAudit },
+                      { value: '5', label: '考勤', disabled: !showAudit }
+                    ]}
                   />
-                  <ProFormDependency name={['showAudit']}>
-                    {({ showAudit }) => (
-                      <ProFormCheckbox.Group
-                        wrapperCol={{ offset: 1 }}
-                        name="audit"
-                        options={[
-                          { value: '1', label: '流程角色', disabled: !showAudit },
-                          { value: '2', label: '开票合同', disabled: !showAudit },
-                          { value: '3', label: '财务费用', disabled: !showAudit },
-                          { value: '4', label: '人资管理', disabled: !showAudit },
-                          { value: '5', label: '考勤', disabled: !showAudit }
-                        ]}
-                      />
-                    )}
-                  </ProFormDependency>
-                  <ProFormSwitch
-                    name="reset"
-                    label={
-                      <span className="flex items-center">
-                        <Icon
-                          type="association"
-                          className="mr-1"
-                          className="flex items-baseline mr-1"
-                        />
-                        业务参数
-                      </span>
-                    }
+                )}
+              </ProFormDependency>
+              <ProFormSwitch
+                name="reset"
+                label={
+                  <span className="flex items-center">
+                    <Icon
+                      type="association"
+                      className="mr-1"
+                      className="flex items-baseline mr-1"
+                    />
+                    业务参数
+                  </span>
+                }
+              />
+              <ProFormDependency name={['reset']}>
+                {({ reset }) => (
+                  <ProFormCheckbox.Group
+                    wrapperCol={{ offset: 1 }}
+                    name="audit"
+                    options={[
+                      { value: '1', label: '客户', disabled: !reset },
+                      { value: '2', label: '产品', disabled: !reset }
+                    ]}
                   />
-                  <ProFormDependency name={['reset']}>
-                    {({ reset }) => (
-                      <ProFormCheckbox.Group
-                        wrapperCol={{ offset: 1 }}
-                        name="audit"
-                        options={[
-                          { value: '1', label: '客户', disabled: !reset },
-                          { value: '2', label: '产品', disabled: !reset }
-                        ]}
-                      />
-                    )}
-                  </ProFormDependency>
-                </ProForm>
-              </TabPane>
-            </Tabs>
-          </div>
-        </Col>
-      </Row>
+                )}
+              </ProFormDependency>
+            </ProForm>
+          </TabPane>
+        </Tabs>
+      </div>
     </div>
   )
 }
 
-export default index
+export default System

src/services/user/system.ts

@@ -0,0 +1,6 @@
+import { request } from 'umi'
+
+/** 获取角色id下员工列表 */
+export async function queryRoleStaffList() {
+  return request<API.RoleStaffListItem[]>('/role/staff')
+}

src/services/user/typings.d.ts

@@ -85,4 +85,11 @@ declare namespace API {
     description?: string
     type?: NoticeIconItemType
   }
+
+  type RoleStaffListItem = {
+    id: string
+    parentId: string
+    name: string
+    create_time: string
+  }
 }