fix: 优化权限管理

src/components/PopConfirmControl/index.tsx

+import { Popconfirm, PopconfirmProps } from 'antd'
+import React from 'react'
+
+export interface PopConfirmControlProps extends Partial<PopconfirmProps> {
+  visible?: boolean
+}
+const PopConfirmControl: React.FC<PopConfirmControlProps> = (props) => {
+  const { visible = true, children, ...restProps } = props
+  return <Popconfirm
+    title="确定要执行这个操作?"
+    okText="是"
+    cancelText="否"
+    { ...restProps }
+  >
+    { children }
+  </Popconfirm>
+}
+
+export default PopConfirmControl

src/hooks/useControlTable.ts

+import { useCallback } from "react"
+
+interface ControlTableOptions {
+  update?: any,
+  remove?: any,
+  preview?: any,
+  changeStatus?: any,
+}
+
+const emptyFn = () => {}
+
+const useControlTable = (options: ControlTableOptions) => {
+  const { update = emptyFn, remove = emptyFn, preview = emptyFn, changeStatus = emptyFn } = options
+
+  const handleUpdate = useCallback(() => {
+
+  }, [])
+
+  const handleRemove = useCallback(() => {
+
+  }, [])
+
+  const handlePreview = useCallback(() => {
+
+  }, [])
+
+  const handleChangeStatus = useCallback(() => {
+
+  }, [])
+
+  return {
+    handleUpdate,
+    handleRemove,
+    handlePreview,
+    handleChangeStatus
+  }
+}

src/pages/authConfig/userSystem/index.tsx

@@ -9,13 +9,13 @@ import {
   EyeOutlined
 } from '@ant-design/icons';
 import {StandardTable} from 'god'
-import {ColumnType} from 'antd/lib/table/interface'
 import { IButtonFilter, IFormFilter } from 'god/dist/src/standard-table/TableController';
 import { PublicApi } from '@/services/api';
 import EyePreview from '@/components/EyePreview';
 import StatusSwitch from '@/components/StatusSwitch';
 import { STATUS_ENUM } from '@/constants';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import useSysetemTable from './useSystemTable';
 
 // 模拟请求
 const fetchData = async (params) => {
@@ -24,108 +24,18 @@ const fetchData = async (params) => {
 }
 
 const UserSystem: React.FC<{}> = () => {
-  const ref = useRef<any>({})
-
-  const addItem = () => {
-    history.push('/memberCenter/systemSetting/authConfig/userSystem/add')
-  }
-  const deleteItem = (record) => {
-    // 删除该项
-    PublicApi.postMemberUserDelete({
-      userId: record.userId
-    }).then(() => {
-      ref.current.reload()
-    })
-  }
-
-  const updateItem = (record) => {
-    history.push(`/memberCenter/systemSetting/authConfig/userSystem/edit?id=${record.userId}&preview=0`)
-  }
-
-  const handleStatus = (record) => {
-    PublicApi.postMemberUserUpdatestatus({
-      userId: record.userId,
-      status: record.status === 1 ? 0 : 1
-    }).then(res => {
-      ref.current.reload()
-    })
-  }
-  const columns: ColumnType<any>[] = [
-    {
-      title: '账号',
-      dataIndex: 'account',
-      align: 'center',
-      key: 'account',
-      className: 'commonPickColor',
-      render: (text, record) => <EyePreview url={`/memberCenter/systemSetting/authConfig/userSystem/detail?id=${record.userId}&preview=1`}>{text}</EyePreview>
-    },
-    {
-      title: '用户姓名',
-      dataIndex: 'name',
-      align: 'center',
-      key: 'name',
-    },
-    {
-      title: '所属机构',
-      dataIndex: 'orgName',
-      align: 'center',
-      key: 'orgName'
-    },
-    {
-      title: '绑定手机号码',
-      align: 'center',
-      dataIndex: 'phone',
-      key: 'phone',
-    },
-    {
-      title: '所属角色',
-      align: 'center',
-      dataIndex: 'roleName',
-      key: 'roleName',
-    },
-    {
-      title: '最后登录时间',
-      align: 'center',
-      dataIndex: 'lastLoginTime',
-      key: 'lastLoginTime',
-    },
-    {
-      title: '状态',
-      align: 'center',
-      dataIndex: 'status',
-      key: 'status',
-      render: (text: any, record:any) => <StatusSwitch handleConfirm={() => handleStatus(record)} record={record}/>
-    },
-    {
-      title: '操作',
-      dataIndex: 'option',
-      align: 'center',
-      render: (text:any, record:any) => {
-        return (
-          <>
-            {
-              record.status === 0 && <Popconfirm
-                title="确定要执行这个操作?"
-                onConfirm={() => deleteItem(record)}
-                okText="是"
-                cancelText="否"
-              >
-                <Button type='link'>删除</Button>
-              </Popconfirm>
-            }
-            <Button type='link' onClick={()=>updateItem(record)}>修改</Button>
-          </>
-        )
-      }
-    }
-  ];
+  const {
+    dataRef,
+    tableRef,
+    addItem
+  } = useSysetemTable()
 
   return (
     <PageHeaderWrapper>
       <Card className="common-wrapper">
       <StandardTable
-        columns={columns}
-        currentRef={ref}
+        columns={dataRef.current.columns}
+        currentRef={tableRef.current}
         fetchTableData={(params:any) => fetchData(params)}
         formilyLayouts={{
           justify: 'space-between'
@@ -143,7 +53,7 @@ const UserSystem: React.FC<{}> = () => {
           ctx: {
             effects: ($) => {
               $('onFieldInputChange', 'status').subscribe(() => {
-                ref.current.reload()
+                tableRef.current.reload()
               })
             },
             schema: {

src/pages/authConfig/userSystem/useSystemTable.tsx

+import React, { useRef } from 'react'
+import EyePreview from "@/components/EyePreview";
+import StatusSwitch from '@/components/StatusSwitch';
+import { Button } from 'antd';
+import PopConfirmControl from '@/components/PopConfirmControl';
+import { PublicApi } from '@/services/api';
+import { history } from 'umi'
+
+const useSysetemTable = () => {
+  const tableRef = useRef<any>({})
+
+  const dataRef = useRef<any>({
+    columns: [
+      {
+        title: '账号',
+        dataIndex: 'account',
+        align: 'center',
+        key: 'account',
+        className: 'commonPickColor',
+        render: (text, record) => <EyePreview url={`/memberCenter/systemSetting/authConfig/userSystem/detail?id=${record.userId}&preview=1`}>{text}</EyePreview>
+      },
+      {
+        title: '用户姓名',
+        dataIndex: 'name',
+        align: 'center',
+        key: 'name',
+      },
+      {
+        title: '所属机构',
+        dataIndex: 'orgName',
+        align: 'center',
+        key: 'orgName'
+      },
+      {
+        title: '绑定手机号码',
+        align: 'center',
+        dataIndex: 'phone',
+        key: 'phone',
+      },
+      {
+        title: '所属角色',
+        align: 'center',
+        dataIndex: 'roleName',
+        key: 'roleName',
+      },
+      {
+        title: '最后登录时间',
+        align: 'center',
+        dataIndex: 'lastLoginTime',
+        key: 'lastLoginTime',
+      },
+      {
+        title: '状态',
+        align: 'center',
+        dataIndex: 'status',
+        key: 'status',
+        render: (text: any, record:any) => <StatusSwitch handleConfirm={() => handleStatus(record)} record={record}/>
+      },
+      {
+        title: '操作',
+        dataIndex: 'option',
+        align: 'center',
+        render: (text:any, record:any) => {
+          return (
+            <>
+              <PopConfirmControl
+                onConfirm={() => deleteItem(record)}
+                visible={record.status === 0}
+              >
+                <Button type='link'>删除</Button>
+              </PopConfirmControl>
+
+              <Button type='link' onClick={()=>updateItem(record)}>修改</Button>
+            </>
+          )
+        }
+      }
+    ]
+  })
+
+  const addItem = () => {
+    history.push('/memberCenter/systemSetting/authConfig/userSystem/add')
+  }
+
+  const deleteItem = (record) => {
+    // 删除该项
+    PublicApi.postMemberUserDelete({
+      userId: record.userId
+    }).then(() => {
+      tableRef.current.reload()
+    })
+  }
+
+  const updateItem = (record) => {
+    history.push(`/memberCenter/systemSetting/authConfig/userSystem/edit?id=${record.userId}&preview=0`)
+  }
+
+  const handleStatus = (record) => {
+    PublicApi.postMemberUserUpdatestatus({
+      userId: record.userId,
+      status: record.status === 1 ? 0 : 1
+    }).then(res => {
+      tableRef.current.reload()
+    })
+  }
+
+  return {
+    tableRef,
+    dataRef,
+    addItem,
+  }
+}
+
+export default useSysetemTable