fix: 角色列表 codeReview

src/pages/Permission/Role/components/RoleLeftMenu/index.tsx

@@ -21,7 +21,6 @@ const RoleLeftMenu = ({ onSelect }) => {
   const [state, setState] = useState({
     value: ''
   })
-  // const [activeId, setActiveId] = useState('')
   const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
   const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
     manual: true,
@@ -33,7 +32,7 @@ const RoleLeftMenu = ({ onSelect }) => {
           roleType: item.roleType
         }))
       )
-      // setActiveId(result[0]['ID'])
+      result?.length && onSelect?.(result[0]?.ID)
     }
   })
   const { run: tryAddRole } = useRequest((params: API.CreateRoleParams) => addRoleMenu(params), {
@@ -76,14 +75,12 @@ const RoleLeftMenu = ({ onSelect }) => {
                     title={
                       <Input
                         placeholder="角色名称"
-                        name="name"
                         onChange={e => onChangeName(e.currentTarget.value)}
                       />
                     }
-                    okText="确认"
+                    okText="确定"
                     cancelText="取消"
-                    onConfirm={() => tryUpdateRole(item.id, state.name)}
-                    icon="">
+                    onConfirm={() => tryUpdateRole(item.id, state.name)}>
                     <FormOutlined className="pr-2" />
                   </Popconfirm>
                   <Popconfirm
@@ -109,12 +106,7 @@ const RoleLeftMenu = ({ onSelect }) => {
   useEffect(() => {
     tryFetchRoleListByMenu()
   }, [])
-  const saveActiveId = (id: string) => {
-    // setActiveId(id)
-    if (onSelect) {
-      onSelect(id)
-    }
-  }
+
   return (
     <div
       className="w-216px rounded-20px"
@@ -150,59 +142,12 @@ const RoleLeftMenu = ({ onSelect }) => {
         <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
           {menuRoles.length ? (
             <DirectoryTree
-              multiple
-              defaultExpandAll
-              defaultSelectedKeys={menuRoles[0]?.key}
-              onSelect={keys => saveActiveId(keys[0])}
+              defaultSelectedKeys={[menuRoles[0]?.key]}
+              onSelect={keys => onSelect(keys[0])}
               showIcon={false}
               treeData={renderTreeNode(menuRoles)}
             />
           ) : null}
-          {/* {menuRoles.map(item => (
-            <Popover
-              key={item.id}
-              placement="right"
-              content={
-                <div>
-                  {item.roleType !== 'system' ? (
-                    <span>
-                      <Popconfirm
-                        title={
-                          <Input
-                            placeholder="角色名称"
-                            name="name"
-                            onChange={e => onChangeName(e.currentTarget.value)}
-                          />
-                        }
-                        okText="确定"
-                        cancelText="取消"
-                        onConfirm={() => tryUpdateRole(item.ID, state.name)}
-                        icon="">
-                        <FormOutlined className="pr-1" />
-                      </Popconfirm>
-                      <Popconfirm
-                        title="确定删除该角色"
-                        okText="确定"
-                        cancelText="取消"
-                        onConfirm={() => tryDelRole(item.ID)}
-                        icon={<QuestionCircleOutlined style={{ color: 'red' }} />}>
-                        <DeleteOutlined />
-                      </Popconfirm>
-                    </span>
-                  ) : null}
-                </div>
-              }>
-              <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>
-              </li>
-            </Popover>
-          ))} */}
         </ul>
       </div>
     </div>

src/pages/Permission/Role/index.tsx

@@ -7,30 +7,20 @@ import { DeleteOutlined } from '@ant-design/icons'
 import { PageContainer } from '@ant-design/pro-layout'
 import { message, Popconfirm, Table, Tabs } from 'antd'
 import type { ColumnsType } from 'antd/lib/table'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import { useRequest } from 'umi'
 import ConnectModal from './components/ConnectModal'
 import RoleLeftMenu from './components/RoleLeftMenu'
 import SetPermission from './components/SetPermission'
+const { TabPane } = Tabs
 
 const Role = () => {
   const [state, setState] = useState({
-    ID: '',
+    currentRoleID: '',
     roleStaff: [],
     activeKey: ''
   })
-  // const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
-  const onSelect = (ID: string) => {
-    setState({ ...state, ID })
-  }
-  const { TabPane } = Tabs
-  // const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
-  //   manual: true,
-  //   onSuccess: result => {
-  //     setMenuRoles(result)
-  //     // setState({ ...state, ID: result[0]['ID'] })
-  //   }
-  // })
+
   const { run: tryGetRoleStaffList } = useRequest(
     (roleID: string) => fetchRoleListByRoleId({ roleID }),
     {
@@ -50,12 +40,12 @@ const Role = () => {
       }
     }
   )
-  useEffect(() => {
-    // tryFetchRoleListByMenu()
-    if (state.ID) {
-      tryGetRoleStaffList(state.ID)
-    }
-  }, [state.ID])
+
+  const onSelect = (currentRoleID: string) => {
+    setState({ ...state, currentRoleID })
+    tryGetRoleStaffList(currentRoleID)
+  }
+
   const columns: ColumnsType<API.MenuByRoleIdItem> = [
     {
       title: '账号',

src/pages/Project/Verification/index.tsx

@@ -11,6 +11,7 @@ import type { ActionType, ProColumnType } from '@ant-design/pro-table'
 import ApprovalDetail from './Detail'
 import { ModalForm, ProFormText } from '@ant-design/pro-form'
 import type { ProFormInstance } from '@ant-design/pro-form'
+import classNames from 'classnames'
 
 // export enum PublishType {
 //   FAIL = '0',
@@ -68,21 +69,23 @@ const FlowList = () => {
       title: '模板名称',
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
       render: (_, record) => (
-        <span
-          className="text-primary hover:cursor-pointer hover:text-blue-600"
-          onClick={() => {
-            setState({
-              ...state,
-              visible: true,
-              current: { dataID: record.ID, name: record.name, readPretty: true }
-            })
-          }}>
+        <span className="text-primary ">
           {record.stickyTop ? (
-            <span className="w-30px text-center rounded-lg text-primary border border-hex-0089ff bg-hex-e9f5ff">
+            <span className="w-30px text-center rounded-lg border border-hex-0089ff bg-hex-e9f5ff px-1">
               默
             </span>
           ) : null}
-          <span className="ml-2">{record.name}</span>
+          <span
+            className="ml-2 hover:cursor-pointer hover:text-blue-600"
+            onClick={() => {
+              setState({
+                ...state,
+                visible: true,
+                current: { dataID: record.ID, name: record.name, readPretty: true }
+              })
+            }}>
+            {record.name}
+          </span>
         </span>
       )
     },
@@ -131,21 +134,14 @@ const FlowList = () => {
             }}>
             配置流程
           </span>
-          {/* <span
-            className={[
-              'pl-2',
-              record.publish ? 'text-gray-500' : 'text-primary cursor-pointer'
-            ].join(' ')}
-            onClick={() => !record.publish && tryPublish({ ID: record.approval.ID })}>
-            发布
-          </span> */}
-
           <Popconfirm
             title="是否删除此流程模板？"
             okText="确定"
             cancelText="取消"
             onConfirm={() => tryDel({ ID: record.ID })}>
-            <span className="text-red-500 pl-2 cursor-pointer hover:text-red-600">删除</span>
+            <span className={classNames('text-red-500 pl-2 cursor-pointer hover:text-red-600', {})}>
+              删除
+            </span>
           </Popconfirm>
         </div>
       )