feat: 角色权限管理客户相关

config/routes.ts

@@ -34,12 +34,13 @@
         path: '/role/system',
         name: 'system',
         component: './Role/System',
-        auth: ['admin', 'system']
+        access: 'authRouteFilter'
       },
       {
         path: '/role/customer',
         name: 'customer',
-        component: './Role/Customer'
+        component: './Role/Customer',
+        access: 'authRouteFilter'
       }
     ]
   }

src/access.ts

@@ -2,8 +2,13 @@
  * @see https://umijs.org/zh-CN/plugins/plugin-access
  * */
 export default function access(initialState: { currentUser?: API.CurrentUser | undefined }) {
-  const { currentUser } = initialState || {};
+  const { currentUser, hasRoutes = [] } = initialState || {}
   return {
-    canAdmin: currentUser && currentUser.access === 'admin',
-  };
+    authRouteFilter: route => {
+      if (currentUser?.isAdmin) {
+        return true
+      }
+      return hasRoutes.includes(route.name)
+    }
+  }
 }

src/pages/Role/Customer/index.tsx

@@ -1,20 +1,237 @@
-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 type { FormInstance } from 'antd'
+import { message, Table, Tabs } from 'antd'
+import React, { useRef, useMemo, useState, useEffect } from 'react'
+
+import {
+  fetchRoleStaffListByRoleId,
+  updateRolePermission,
+  getRolePermissions
+} from '@/services/user/api'
+import type { ColumnsType } from 'antd/lib/table'
+import { formatPermission } from '@/utils/utils'
 import RoleMenu from '../System/components/RoleMenu/roleMenu'
+import ConnectModal from '../System/components/ConnectModal'
 
 const Customer = () => {
+  const { TabPane } = Tabs
+  const formRef = useRef<FormInstance>(null)
+
+  const columns: ColumnsType<API.RoleStaffListItem> = [
+    {
+      title: '用户',
+      dataIndex: 'username',
+      width: '15%'
+    },
+    {
+      title: '手机',
+      dataIndex: 'phone',
+      width: '20%'
+    },
+    {
+      title: '部门',
+      dataIndex: 'departmentName',
+      width: '20%'
+    },
+    {
+      title: '岗位',
+      dataIndex: 'position',
+      width: '15%'
+    },
+    {
+      title: '角色',
+      dataIndex: 'age',
+      width: '20%'
+    },
+    {
+      title: '操作',
+      dataIndex: 'opreate',
+      width: '20%',
+      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 [roleId, setRoleId] = useState('')
+  const [state, setState] = useState({
+    id: '',
+    roleStaff: []
+  })
   const onSelect = (id: string) => {
-    setRoleId(id)
+    setState({ ...state, id })
   }
+
+  const { run: tryGetRoleStaffList } = useRequest(
+    (id: string) => fetchRoleStaffListByRoleId({ id }),
+    {
+      manual: true,
+      onSuccess: result => {
+        setState({ ...state, roleStaff: result })
+      }
+    }
+  )
+
+  const { run: tryGetRolePermissions } = useRequest((id: string) => getRolePermissions({ id }), {
+    manual: true,
+    onSuccess: (result: API.GetRolePermissionResultModel) => {
+      const values = { ...formatPermission('init', result.permission) }
+      console.log('values', values)
+
+      formRef.current?.setFieldsValue(values)
+    }
+  })
+
+  useEffect(() => {
+    if (state.id) {
+      tryGetRoleStaffList(state.id)
+      tryGetRolePermissions(state.id)
+    }
+  }, [state.id])
+
   return (
     <div className="h-full w-full flex flex-row">
       <RoleMenu menuId={menuId} onSelect={onSelect} />
+      <div className="w-max-3/4">
+        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
+          <div className="absolute right-4 top-4 z-100">
+            {state.id && (
+              <ConnectModal
+                title="关联员工"
+                dataId={state.id}
+                onSelect={() => tryGetRoleStaffList(state.id)}
+              />
+            )}
+          </div>
+          <Tabs defaultActiveKey="1" type="card">
+            <TabPane tab="员工列表" key="1">
+              <Table<API.RoleStaffListItem>
+                dataSource={state.roleStaff}
+                columns={columns}
+                rowKey={row => row.staffId}
+              />
+            </TabPane>
+            <TabPane tab="角色权限" key="2">
+              {state.id && (
+                <ProForm
+                  formRef={formRef}
+                  layout="horizontal"
+                  onFinish={async values => {
+                    const newValues = formatPermission('submit', values)
+                    await updateRolePermission({
+                      permission: JSON.stringify(newValues),
+                      id: state.id
+                    })
+                    message.success('设置成功')
+                  }}>
+                  {/* <ProFormSwitch
+                  name="showHome"
+                  label={
+                    <span className="flex items-center">
+                      <Icon type="home" className="mr-1" className="flex items-baseline mr-1" />
+                      后台首页
+                    </span>
+                  }
+                /> */}
+
+                  <ProFormSwitch
+                    name="showSystem"
+                    label={
+                      <span className="flex items-center">
+                        <Icon
+                          type="every-user"
+                          className="mr-1"
+                          className="flex items-baseline mr-1"
+                        />
+                        角色权限管理
+                      </span>
+                    }
+                  />
+                  <ProFormDependency name={['showSystem']}>
+                    {({ showSystem }) => (
+                      <ProFormCheckbox.Group
+                        wrapperCol={{ offset: 1 }}
+                        // initialValue={}
+                        name="system"
+                        options={[
+                          { value: 'system', label: '系统管理', disabled: !showSystem },
+                          { value: 'customer', label: '客户', disabled: !showSystem }
+                          // { 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 }
+                      ]}
+                    />
+                  )}
+                </ProFormDependency> */}
+                </ProForm>
+              )}
+            </TabPane>
+          </Tabs>
+        </div>
+      </div>
     </div>
   )
 }

src/pages/Role/System/components/RoleMenu/roleMenu.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { PlusOutlined, DownOutlined } from '@ant-design/icons'
-import { Button, message, Popover } from 'antd'
+import { Button, message, Popconfirm, Popover } from 'antd'
 import './index.less'
 import { useRequest } from 'umi'
 import { createRoleWithMenuId, fetchRoleListByMenuId, deleteRole } from '@/services/user/api'
@@ -26,12 +26,12 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect }) => {
       if (activeId === id) {
         setActiveId('')
       }
-      deleteRole({ id })
+      return deleteRole({ id })
     },
     {
       manual: true,
-      onSuccess: async () => {
-        await tryFetchMenuRoles()
+      onSuccess: () => {
+        tryFetchMenuRoles(menuId)
       }
     }
   )
@@ -97,9 +97,13 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect }) => {
                     <ul>
                       <li>复制</li>
                       <li>粘贴</li>
-                      <li className="text-red-500" onClick={() => tryDeleteRole(item.id)}>
-                        删除
-                      </li>
+                      <Popconfirm
+                        title="确认删除吗？"
+                        okText="确认"
+                        cancelText="取消"
+                        onConfirm={() => tryDeleteRole(item.id)}>
+                        <li className="text-red-500">删除</li>
+                      </Popconfirm>
                     </ul>
                   </div>
                 }

src/pages/Role/System/index.tsx

@@ -1,17 +1,22 @@
 import { useModel, useRequest } from 'umi'
 import Icon from '@/components/IconPark'
 import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
+import type { FormInstance } from 'antd'
 import { message, Table, Tabs } from 'antd'
-import React, { useMemo, useState, useEffect } from 'react'
+import React, { useRef, useMemo, useState, useEffect } from 'react'
 import RoleMenu from './components/RoleMenu/roleMenu'
-import { fetchRoleStaffListByRoleId, updateRolePermission } from '@/services/user/api'
+import {
+  fetchRoleStaffListByRoleId,
+  updateRolePermission,
+  getRolePermissions
+} from '@/services/user/api'
 import type { ColumnsType } from 'antd/lib/table'
 import ConnectModal from './components/ConnectModal'
 import { formatPermission } from '@/utils/utils'
 
 const System = () => {
   const { TabPane } = Tabs
-
+  const formRef = useRef<FormInstance>(null)
   const columns: ColumnsType<API.RoleStaffListItem> = [
     {
       title: '用户',
@@ -57,7 +62,8 @@ const System = () => {
 
   const [state, setState] = useState({
     id: '',
-    roleStaff: []
+    roleStaff: [],
+    rolePermission: {}
   })
   const onSelect = (id: string) => {
     setState({ ...state, id })
@@ -72,9 +78,22 @@ const System = () => {
       }
     }
   )
+
+  const { run: tryGetRolePermissions } = useRequest((id: string) => getRolePermissions({ id }), {
+    manual: true,
+    onSuccess: (result: API.GetRolePermissionResultModel) => {
+      const values = { ...formatPermission('init', result.permission) }
+      formRef.current?.setFieldsValue({ ...values })
+    }
+  })
+
   useEffect(() => {
     if (state.id) {
       tryGetRoleStaffList(state.id)
+      tryGetRolePermissions(state.id)
+    }
+    return () => {
+      formRef.current?.resetFields()
     }
   }, [state.id])
 
@@ -82,7 +101,6 @@ const System = () => {
     <div className="h-full w-full flex flex-row">
       <RoleMenu menuId={menuId} onSelect={onSelect} />
       <div className="w-max-3/4">
-        <div></div>
         <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
           <div className="absolute right-4 top-4 z-100">
             {state.id && (
@@ -105,8 +123,9 @@ const System = () => {
               {state.id && (
                 <ProForm
                   layout="horizontal"
+                  formRef={formRef}
                   onFinish={async values => {
-                    const newValues = formatPermission(values)
+                    const newValues = formatPermission('submit', values)
                     await updateRolePermission({
                       permission: JSON.stringify(newValues),
                       id: state.id

src/services/user/api.ts

@@ -32,7 +32,7 @@ export async function queryMenuList() {
   return request<API.MenuListItem[]>('/menu/list')
 }
 
-/** 获取菜单角色权限列表 */
+/** 获取用户权限 */
 export async function queryMenuRole() {
   return request<API.Roles>('/menu/role')
 }
@@ -82,6 +82,13 @@ export async function updateRolePermission(params: API.UpdateRolePermissionParam
   })
 }
 
+/** 角色下详情 */
+export async function getRolePermissions(params: { id: string }) {
+  return request<API.GetRolePermissionResultModel>('/role/detail', {
+    params
+  })
+}
+
 /** 获取员工列表 */
 export async function fetchStaffList(params: API.GetStaffListParams) {
   return request<API.StaffItem[]>('/api/staff/list', {

src/services/user/typings.d.ts

@@ -168,4 +168,12 @@ declare namespace API {
     id: string
     permission: string
   }
+
+  type GetRolePermissionResultModel = {
+    id: string
+    backstageMenuId: string
+    name: string
+    permission: string | null
+    dataPermission: string | null
+  }
 }

src/utils/utils.ts

@@ -20,7 +20,20 @@ export const isAntDesignProOrDev = (): boolean => {
   return isAntDesignPro()
 }
 
-export const formatPermission = (values: any) => {
+export const formatPermission = (type: 'init' | 'submit', values: any) => {
+  if (type === 'init') {
+    const newValues = { ...JSON.parse(values) }
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key in newValues) {
+      if (Object.prototype.hasOwnProperty.call(newValues, key)) {
+        if (newValues[key]?.length) {
+          newValues[`show${key.replace(key[0], key[0].toUpperCase())}`] = true
+          console.log(`show${key.replace(key[0], key[0].toUpperCase())}`)
+        }
+      }
+    }
+    return newValues
+  }
   const newValues = { ...values }
   // eslint-disable-next-line no-restricted-syntax
   for (const key in newValues) {