feat: 1

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

@@ -138,7 +138,7 @@ const ConnectModal: React.FC<ConnectModalProps> = ({
           ))}
           {noMore && <div className="text-center text-gray-400">已到底部</div>}
           {!noMore && (
-            <div className="text-center mt-3 cursor-pointer">
+            <div className="flex justify-center mt-3 cursor-pointer">
               {loadingMore ? (
                 <LoadingOutlined />
               ) : (

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

@@ -85,7 +85,7 @@ const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
 
   return (
     <div className="h-full w-max-234px rounded-4px">
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
+      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex items-center justify-around">
         <span className="text-[0.9375rem]">角色列表</span>
 
         <ModalForm<{ name: string; backstageMenuId: string }>

src/pages/Role/System/index.tsx

@@ -4,7 +4,6 @@ import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant
 import type { FormInstance } from 'antd'
 import { message, Table, Tabs, Popconfirm } from 'antd'
 import React, { useRef, useMemo, useState, useEffect } from 'react'
-import RoleMenu from './components/RoleMenu'
 import {
   fetchRoleStaffListByRoleId,
   updateRolePermission,
@@ -12,7 +11,8 @@ import {
   deleteStaff
 } from '@/services/user/api'
 import type { ColumnsType } from 'antd/lib/table'
-import ConnectModal from './components/ConnectModal'
+import RoleMenu from '../System/components/RoleMenu'
+import ConnectModal from '../System/components/ConnectModal'
 import { formatPermission } from '@/utils/utils'
 
 const System = () => {

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

@@ -1,155 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { useRequest, request } from 'umi'
-import { Button, Input, message, Modal } from 'antd'
-import { fetchStaffList } from '@/services/user/api'
-import { LoadingOutlined, MoreOutlined } from '@ant-design/icons'
-
-interface ConnectModalProps {
-  postUrl: string
-  showButton?: boolean
-  title?: string
-  dataId?: string
-  onReload?: () => void
-  show?: boolean
-  onShowChange?: (isShow: boolean) => void
-}
-const ConnectModal: React.FC<ConnectModalProps> = ({
-  title,
-  dataId,
-  onReload,
-  show,
-  onShowChange,
-  postUrl,
-  showButton = true
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [visible, setVisible] = useState(false)
-  const [searchVal, setSearchVal] = useState('')
-
-  const { run: tryConnectStaff } = useRequest(
-    (params: API.AddRoleStaffCommonParams) =>
-      request(postUrl, {
-        method: 'POST',
-        data: params
-      }),
-    {
-      manual: true,
-      onSuccess: async () => {
-        message.success('关联成功')
-        if (!show) {
-          setVisible(false)
-        }
-        await onReload()
-      },
-      onError: e => {
-        message.error(e.message)
-      }
-    }
-  )
-
-  const {
-    run: tryQueryStaffList,
-    data,
-    noMore,
-    loadMore,
-    loadingMore
-  } = useRequest(
-    result =>
-      fetchStaffList({
-        current: result?.list.length / 10 + 1 || 1,
-        pageSize: 10,
-        search: searchVal
-      }),
-    {
-      manual: true,
-      loadMore: true,
-      ref: containerRef,
-      isNoMore: (res: API.BasicFetchResult<API.StaffItem>) => res.list.length >= res.total,
-      refreshDeps: [searchVal]
-    }
-  )
-
-  const handleSearch = (value: string) => {
-    setSearchVal(value)
-    setTimeout(() => {
-      tryQueryStaffList()
-    }, 250)
-  }
-
-  const { list = [] }: { list: API.StaffItem[] } = data || {}
-  useEffect(() => {
-    if (show || visible) {
-      tryQueryStaffList()
-    }
-  }, [show, visible])
-
-  const handleOnCancel = () => {
-    if (onShowChange !== undefined) {
-      onShowChange(false)
-    } else {
-      setVisible(false)
-    }
-  }
-
-  const itemSelectHandler = async (staffId: string) => {
-    const params = { staffId }
-    if (dataId) {
-      params.id = dataId
-    }
-    await tryConnectStaff(params)
-    handleOnCancel()
-  }
-  return (
-    <>
-      {showButton && (
-        <Button type="primary" onClick={() => setVisible(true)}>
-          {title}
-        </Button>
-      )}
-      <Modal
-        visible={show === undefined ? visible : show}
-        onCancel={handleOnCancel}
-        getContainer={false}
-        width="60vw"
-        title={
-          <Input.Search
-            placeholder="搜索员工（姓名）"
-            onSearch={value => handleSearch(value)}
-            onPressEnter={e => handleSearch(e.currentTarget.value)}
-            style={{ width: '95%' }}
-            allowClear={true}
-          />
-        }>
-        <div ref={containerRef} className="h-60vh overflow-y-auto overflow-x-hidden">
-          {list.map(item => (
-            <div className="group-item-card" key={item.id}>
-              <div className="w-4/3 flex justify-between">
-                <span className="w-1/5">{item.username}</span>
-                <span className="w-2/5">{item.phone}</span>
-                <span className="w-1/5">{item.position}</span>
-                <span className="w-1/5">{item.category}</span>
-              </div>
-              <div className="w-1/4 flex justify-end">
-                <span className="btn-outline" onClick={() => itemSelectHandler(item.id)}>
-                  选择ta
-                </span>
-              </div>
-            </div>
-          ))}
-          {noMore && <div className="text-center text-gray-400">已到底部</div>}
-          {!noMore && (
-            <div className="text-center mt-3 cursor-pointer">
-              {loadingMore ? (
-                <LoadingOutlined />
-              ) : (
-                <MoreOutlined rotate={90} style={{ fontSize: 24 }} onClick={loadMore} />
-              )}
-            </div>
-          )}
-        </div>
-      </Modal>
-    </>
-  )
-}
-
-export default ConnectModal

src/pages/Role/Workbench/components/RoleMenu/index.tsx

@@ -1,166 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { PlusOutlined, DownOutlined } from '@ant-design/icons'
-import { Button, message, Popconfirm, Popover, Input } from 'antd'
-import { useRequest } from 'umi'
-import {
-  createRoleWithMenuId,
-  fetchRoleListByMenuId,
-  deleteRole,
-  updateStaff
-} from '@/services/user/api'
-import { ModalForm, ProFormText } from '@ant-design/pro-form'
-
-type RoleMenuProps = {
-  menuId: string
-  onSelect?: (id: string) => void
-  itemCount?: number
-}
-
-const RoleMenu: React.FC<RoleMenuProps> = ({ menuId, onSelect, itemCount }) => {
-  const [state, setState] = useState({
-    value: ''
-  })
-  const [activeId, setActiveId] = useState('')
-  const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
-  const { run: tryFetchMenuRoles } = useRequest((id: string) => fetchRoleListByMenuId(id), {
-    manual: true,
-    onSuccess: result => {
-      setMenuRoles(result)
-    }
-  })
-
-  const { run: tryDeleteRole } = useRequest(
-    (id: string) => {
-      if (activeId === id) {
-        setActiveId('')
-      }
-      return deleteRole({ id })
-    },
-    {
-      manual: true,
-      onSuccess: () => {
-        tryFetchMenuRoles(menuId)
-      }
-    }
-  )
-  const { run: tryUpdateStaff } = useRequest(
-    (id: string, name: string) => {
-      if (activeId === id) {
-        setActiveId('')
-      }
-      return updateStaff({ id, name })
-    },
-    {
-      manual: true,
-      onSuccess: () => {
-        message.success('修改成功')
-        tryFetchMenuRoles(menuId)
-      }
-    }
-  )
-
-  const onChangeName = value => {
-    setState({ ...state, name: value })
-  }
-
-  const { run: tryAddRole } = useRequest(
-    (params: API.CreateRoleParams) => createRoleWithMenuId(params),
-    {
-      manual: true,
-      onSuccess: () => {
-        tryFetchMenuRoles(menuId)
-      }
-    }
-  )
-  useEffect(() => {
-    tryFetchMenuRoles(menuId)
-  }, [])
-
-  const handleItemClick = (id: string) => {
-    setActiveId(id)
-    if (onSelect) {
-      onSelect(id)
-    }
-  }
-
-  return (
-    <div className="h-full w-max-234px rounded-4px">
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
-        <span className="text-[0.9375rem]">角色列表</span>
-
-        <ModalForm<{ name: string; backstageMenuId: string }>
-          title="添加新的角色"
-          width="500px"
-          trigger={
-            <Button size="small" type="primary" ghost>
-              <PlusOutlined />
-              创建角色
-            </Button>
-          }
-          onFinish={async values => {
-            await tryAddRole(values)
-            message.success('添加成功')
-            return true
-          }}
-          initialValues={{ backstageMenuId: menuId }}>
-          <ProFormText name="backstageMenuId" hidden />
-          <ProFormText name="name" rules={[{ required: true, message: '请输入角色名' }]} />
-        </ModalForm>
-      </div>
-      <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
-        <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
-          {menuRoles.map(item => (
-            <li
-              key={item.id}
-              className={[
-                'flex justify-between items-center py-2 px-5 cursor-pointer',
-                item.id === activeId ? 'scale-up-center' : ''
-              ].join(' ')}
-              onClick={() => handleItemClick(item.id)}>
-              <span>{item.name}</span>
-              <Popover
-                placement="bottomRight"
-                content={
-                  <div className="popoverList">
-                    <ul>
-                      <Popconfirm
-                        title={
-                          <Input
-                            placeholder="角色名称"
-                            name="name"
-                            onChange={e => onChangeName(e.currentTarget.value)}
-                          />
-                        }
-                        okText="确认"
-                        cancelText="取消"
-                        onConfirm={() => tryUpdateStaff(item.id, state.name)}
-                        icon="">
-                        <li>编辑</li>
-                      </Popconfirm>
-                      <Popconfirm
-                        title="确认删除吗？"
-                        okText="确认"
-                        cancelText="取消"
-                        onConfirm={() => {
-                          if (itemCount && itemCount !== 0) {
-                            return message.warning('请先移除已经关联的员工')
-                          }
-                          return tryDeleteRole(item.id)
-                        }}>
-                        <li className="text-red-500">删除</li>
-                      </Popconfirm>
-                    </ul>
-                  </div>
-                }
-                trigger="click">
-                <DownOutlined />
-              </Popover>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  )
-}
-
-export default RoleMenu

src/pages/Role/Workbench/index.tsx

@@ -5,7 +5,6 @@ import type { FormInstance } from 'antd'
 import { Radio, Space } from 'antd'
 import { message, Table, Tabs, Popconfirm, Form } from 'antd'
 import React, { useRef, useMemo, useState, useEffect } from 'react'
-import RoleMenu from './components/RoleMenu'
 import {
   fetchRoleStaffListByRoleId,
   // updateRolePermission,
@@ -14,7 +13,8 @@ import {
   updatePermDataByRoleId
 } from '@/services/user/api'
 import type { ColumnsType } from 'antd/lib/table'
-import ConnectModal from './components/ConnectModal'
+import RoleMenu from '../System/components/RoleMenu'
+import ConnectModal from '../System/components/ConnectModal'
 // import { formatPermission } from '@/utils/utils'
 
 const permData = [

src/pages/Role/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Role = () => {
+  return (
+    <div>
+      <h2>角色权限管理</h2>
+    </div>
+  )
+}
+
+export default Role