feat: 系统管理页面调整

src/pages/Role/Customer/index.tsx

@@ -1,15 +1,20 @@
 import { useModel } from 'umi'
 import React, { useMemo } from 'react'
-import RoleMenu from '../System/components/roleMenu'
+import RoleMenu from '../System/components/RoleMenu/roleMenu'
 
 const Customer = () => {
   const { initialState } = useModel('@@initialState')
   const menuId = useMemo(() => {
     return initialState?.menuList?.find(item => item.name === '客户')?.id
   }, initialState.menuList)
+
+  // const [roleId, setRoleId] = useState('')
+  const onSelect = (id: string) => {
+    setRoleId(id)
+  }
   return (
     <div className="h-full w-full flex flex-row">
-      <RoleMenu menuId={menuId} />
+      <RoleMenu menuId={menuId} onSelect={onSelect} />
     </div>
   )
 }

src/pages/Role/System/components/ConnectModal/index.tsx

@@ -0,0 +1,27 @@
+import { Button, Input, Modal } from 'antd'
+import React from 'react'
+
+interface ConnectModalProps {
+  title: string
+}
+const ConnectModal: React.FC<ConnectModalProps> = ({ title }) => {
+  const [visible, setVisible] = useState(false)
+  const
+  return (
+    <>
+      <Button type="primary" onClick={() => setVisible(true)}>
+        {title}
+      </Button>
+      <Modal
+        visible={visible}
+        onCancel={() => setVisible(false)}
+        title={
+          <Input.Search placeholder="搜索员工（姓名）" onSearch={} onPressEnter={}></Input.Search>
+        }>
+        <div>111</div>
+      </Modal>
+    </>
+  )
+}
+
+export default ConnectModal

src/pages/Role/System/index.tsx

@@ -1,170 +1,179 @@
-import { useModel } from 'umi'
-import React, { useMemo } from 'react'
+import { useModel, useRequest } from 'umi'
 import Icon from '@/components/IconPark'
 import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
-import { Tabs } from 'antd'
-import ProTable from '@ant-design/pro-table'
-import RoleMenu from '../System/components/roleMenu'
+import { Table, Tabs } from 'antd'
+import React, { useMemo, useState, useEffect } from 'react'
+import RoleMenu from './components/RoleMenu/roleMenu'
+import { fetchRoleStaffListByRoleId } from '@/services/user/api'
+import type { ColumnsType } from 'antd/lib/table'
 
-const System = () => {
-  const { initialState } = useModel('@@initialState')
-  const menuId = useMemo(() => {
-    return initialState?.menuList?.find(item => item.name === '客户')?.id
-  }, initialState.menuList)
+const System: React.FC = () => {
   const { TabPane } = Tabs
-  const dataSource = [
-    {
-      key: '1',
-      name: '胡彦斌',
-      age: 32,
-      address: '西湖区湖底公园1号'
-    },
-    {
-      key: '2',
-      name: '胡彦祖',
-      age: 42,
-      address: '西湖区湖底公园1号'
-    }
-  ]
 
-  const columns = [
+  const columns: ColumnsType<API.RoleStaffListItem> = [
     {
       title: '用户',
-      dataIndex: 'name',
-      key: 'name'
+      dataIndex: 'username'
     },
     {
       title: '手机',
-      dataIndex: 'age',
-      key: 'age'
+      dataIndex: 'phone'
     },
     {
       title: '部门',
-      dataIndex: 'address',
-      key: 'address'
+      dataIndex: 'departmentName'
     },
     {
       title: '岗位',
-      dataIndex: 'address',
-      key: 'address'
+      dataIndex: 'position'
     },
     {
       title: '角色',
-      dataIndex: 'address',
-      key: 'address'
+      dataIndex: 'age'
     },
     {
       title: '操作',
-      dataIndex: 'address',
-      key: 'address'
+      dataIndex: 'opreate',
+      render: () => (
+        <span className="hover:text-hex-e7026e">
+          <Icon type="delete" fill="#fd3995" />
+        </span>
+      )
     }
   ]
 
+  const { initialState } = useModel('@@initialState')
+  const menuId = useMemo(() => {
+    return initialState?.menuList?.find(item => item.name === '系统管理')?.id
+  }, initialState.menuList)
+
+  const [state, setState] = useState<{ id: string; roleStaff: API.RoleStaffListItem[] }>({
+    id: '',
+    roleStaff: []
+  })
+  const onSelect = (id: string) => {
+    setState({ ...state, id })
+  }
+
+  const { run: tryGetRoleStaffList } = useRequest((id: string) => fetchRoleStaffListByRoleId(id), {
+    manual: true,
+    onSuccess: result => {
+      setState({ ...state, roleStaff: result })
+    }
+  })
+  useEffect(() => {
+    if (state.id) {
+      tryGetRoleStaffList()
+    }
+  }, [state.id])
   return (
     <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>
-                }
-              />
+      <RoleMenu menuId={menuId} onSelect={onSelect} />
+      <div className="w-max-3/4">
+        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a">
+          <Tabs defaultActiveKey="1" type="card">
+            <TabPane tab="员工列表" key="1">
+              <Table<API.RoleStaffListItem> dataSource={state.roleStaff} 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>
-                }
-              />
-              <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 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"
+                <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>
+                <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>
+                <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 }
+                      ]}
                     />
-                    业务参数
-                  </span>
-                }
-              />
-              <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>
+                  )}
+                </ProFormDependency>
+              </ProForm>
+            </TabPane>
+          </Tabs>
+        </div>
       </div>
     </div>
   )

src/services/user/api.ts

@@ -59,46 +59,17 @@ export async function createRoleWithMenuId(params: API.CreateRoleParams) {
   })
 }
 
-/** 获取规则列表 GET /api/rule */
-export async function rule(
-  params: {
-    // query
-    /** 当前的页码 */
-    current?: number
-    /** 页面的容量 */
-    pageSize?: number
-  },
-  options?: { [key: string]: any }
-) {
-  return request<API.RuleList>('/api/rule', {
-    method: 'GET',
-    params: {
-      ...params
-    },
-    ...(options || {})
+/** 获取角色下员工列表 */
+export async function fetchRoleStaffListByRoleId({ id: string }) {
+  return request<API.RoleStaffListItem[]>('/role/staff', {
+    params: { id }
   })
 }
 
-// /** 新建规则 PUT /api/rule */
-// export async function updateRule(options?: { [key: string]: any }) {
-//   return request<API.RuleListItem>('/api/rule', {
-//     method: 'PUT',
-//     ...(options || {}),
-//   });
-// }
-
-// /** 新建规则 POST /api/rule */
-// export async function addRule(options?: { [key: string]: any }) {
-//   return request<API.RuleListItem>('/api/rule', {
-//     method: 'POST',
-//     ...(options || {}),
-//   });
-// }
-
-// /** 删除规则 DELETE /api/rule */
-// export async function removeRule(options?: { [key: string]: any }) {
-//   return request<Record<string, any>>('/api/rule', {
-//     method: 'DELETE',
-//     ...(options || {}),
-//   });
-// }
+/** 获取员工列表 */
+export async function fetchStaffList(params: API.GetStaffListParams) {
+  return request<API.StaffItem[]>('/api/staff/list', {
+    params,
+    prefix: ''
+  })
+}

src/services/user/typings.d.ts

@@ -87,9 +87,72 @@ declare namespace API {
   }
 
   type RoleStaffListItem = {
-    id: string
-    parentId: string
-    name: string
-    create_time: string
+    staffId: string
+    categoryId: string
+    departmentId: string
+    positionId: string
+    username: string
+    category: string
+    jobNumber: string
+    qq: string
+    phone: string
+    departmentName: string
+    position: string
+    hiredate: string
+  }
+
+  type GetStaffListParams = {
+    current: number
+    pageSize: number
+    search?: string
+    departmentId?: string
+  }
+
+  type StaffItem = {
+    staffId: string
+    categoryId: string
+    departmentId: string
+    positionId: string
+    username: string
+    category: string
+    avatar: string
+    qq: string
+    qualifications: string
+    departmentName: string
+    gender: string
+    phone: string
+    avtelephoneatar: string
+    email: string
+    birthday: string
+    position: string
+    jobNumber: string
+    hiredate: string
+    remittanceName: string
+    bankName: string
+    bankNumber: string
+    coupletNumber: string
+    salaryCard: string
+    salaryBank: string
+    baseWage: string
+    postWage: string
+    achievementBonus: string
+    marriage: string
+    nativePlace: string
+    emergencyContacts: string
+    living: string
+    IDcards: string
+    IDcardsImgA: string
+    IDcardsImgB: string
+    certificate: string
+    diploma: string
+    professionalTitle: string
+    nation: string
+    graduateInstitutions: string
+    major: string
+    education: string
+    graduationTime: string
+    registeredResidence: string
+    householdRegistrationType: string
+    IDcardsValidity: string
   }
 }

windi.config.ts

@@ -19,9 +19,6 @@ export default defineConfig({
         lg: '992px',
         xl: '1200px',
         '2xl': '1600px'
-      },
-      boxShadow: {
-        card: '0px 0px 13px 0px rgba(74, 53,107, 0.08)'
       }
     }
   }