feat: 表格列设置持久化存储、固定不可操作列

src/pages/Institutions/Company/Detail/components/Staff.tsx

@@ -1,8 +1,7 @@
 import ProTable from '@ant-design/pro-table'
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { Button, Tooltip } from 'antd'
 import consts from '@/utils/consts'
-// import { history } from 'umi'
 import { connect } from 'umi'
 import dayjs from 'dayjs'
 import { queryAccountList } from '@/services/api/institution'
@@ -14,6 +13,7 @@ import { genderEum } from '@/pages/Institutions/Staff'
 import AnimateContent from '@/components/AnimateContent'
 import { ModalType } from '@/utils/enum'
 import IconFont from '@/components/IconFont'
+import type { ColumnsStateType } from '@ant-design/pro-table/lib/typing'
 
 type ListProps = ConnectProps & {
   accountType: API.AccountType[]
@@ -143,7 +143,7 @@ const Staff: React.FC<ListProps> = ({
     },
     {
       title: '操作',
-      dataIndex: 'operation',
+      dataIndex: 'operate',
       width: 61,
       align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
@@ -169,6 +169,28 @@ const Staff: React.FC<ListProps> = ({
 
   const wrapHeight = document.querySelector('.ant-pro-page-container-warp')?.clientHeight || 0
 
+  const columnsState: ColumnsStateType = useMemo(
+    () => ({
+      defaultValue: {
+        account: {
+          disable: true
+        },
+        name: {
+          disable: true
+        },
+        institutionID: {
+          disable: true
+        },
+        operate: {
+          disable: true
+        }
+      },
+      persistenceKey: 'staff_list_column_key',
+      persistenceType: 'localStorage'
+    }),
+    []
+  )
+
   return (
     <div>
       <ProTable<API.AccountListItem>
@@ -178,6 +200,7 @@ const Staff: React.FC<ListProps> = ({
         scroll={{
           y: document.body.clientHeight - (263 + wrapHeight)
         }}
+        columnsState={columnsState}
         columns={generateColumns(columns, schema)}
         search={false}
         request={async (params, filter, sorter) => {

src/pages/Institutions/Company/List/index.tsx

@@ -2,7 +2,7 @@ import dayjs from 'dayjs'
 import ProTable from '@ant-design/pro-table'
 import consts from '@/utils/consts'
 import { Button } from 'antd'
-import { useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { history } from 'umi'
 import { queryInstitutionList } from '@/services/api/institution'
 import type { ProColumnType, ActionType } from '@ant-design/pro-table'
@@ -10,6 +10,7 @@ import { PageContainer } from '@ant-design/pro-layout'
 import CompanyDrawer from './components/CompanyDrawer'
 import { ModalType } from '@/utils/enum'
 import AnimateContent from '@/components/AnimateContent'
+import type { ColumnsStateType } from '@ant-design/pro-table/lib/typing'
 
 export type InstitutionDetailProps = {
   dataID: string
@@ -81,7 +82,7 @@ const CompanyList = () => {
     },
     {
       title: '操作',
-      dataIndex: 'operation',
+      dataIndex: 'operate',
       width: 61,
       align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
@@ -104,12 +105,32 @@ const CompanyList = () => {
     }
   ]
 
+  const columnsState: ColumnsStateType = useMemo(
+    () => ({
+      defaultValue: {
+        name: {
+          disable: true
+        },
+        institutionAcountTotal: {
+          disable: true
+        },
+        operate: {
+          disable: true
+        }
+      },
+      persistenceKey: 'institution_list_column_key',
+      persistenceType: 'localStorage'
+    }),
+    []
+  )
+
   return (
     <PageContainer title={false}>
       <ProTable<API.InstitutionListItem>
         rowKey="ID"
         params={state.params}
         actionRef={tRef}
+        columnsState={columnsState}
         scroll={{ y: document.body.clientHeight - 291 }}
         columns={columns}
         request={async (params, filter, sorter) => {

src/pages/Institutions/Staff/index.tsx

@@ -2,13 +2,14 @@ import ProTable from '@ant-design/pro-table'
 import type { ProColumnType, ActionType } from '@ant-design/pro-table'
 import { PageContainer } from '@ant-design/pro-layout'
 import consts from '@/utils/consts'
-import { useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import type { ConnectProps } from 'umi'
 import { queryAccountList } from '@/services/api/institution'
 import dayjs from 'dayjs'
 import StaffDetail from './components/StaffDetail'
 import AnimateContent from '@/components/AnimateContent'
 import { ModalType } from '@/utils/enum'
+import type { ColumnsStateType } from '@ant-design/pro-table/lib/typing'
 
 type ListProps = ConnectProps & {
   accountTypeList: { label: string; value: string }[]
@@ -112,7 +113,7 @@ const CompanyList: React.FC<ListProps> = () => {
     },
     {
       title: '操作',
-      dataIndex: 'operation',
+      dataIndex: 'operate',
       width: 61,
       align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
@@ -137,12 +138,35 @@ const CompanyList: React.FC<ListProps> = () => {
     }
   ]
 
+  const columnsState: ColumnsStateType = useMemo(
+    () => ({
+      defaultValue: {
+        account: {
+          disable: true
+        },
+        name: {
+          disable: true
+        },
+        institutionID: {
+          disable: true
+        },
+        operate: {
+          disable: true
+        }
+      },
+      persistenceKey: 'staff_list_column_key',
+      persistenceType: 'localStorage'
+    }),
+    []
+  )
+
   return (
     <PageContainer title={false}>
       <ProTable<API.AccountListItem>
         rowKey="ID"
         params={state.params}
         actionRef={tRef}
+        columnsState={columnsState}
         scroll={{ y: document.body.clientHeight - 313 }}
         columns={columns}
         request={async (params, filter, sorter) => {

src/pages/Project/Created/index.tsx

@@ -1,5 +1,5 @@
 import { PageContainer } from '@ant-design/pro-layout'
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useMemo } from 'react'
 import ProTable from '@ant-design/pro-table'
 import type { ActionType } from '@ant-design/pro-table'
 import { ModalForm } from '@ant-design/pro-form'
@@ -13,6 +13,7 @@ import { saveCreator } from '@/services/api/user'
 import { useRequest } from 'umi'
 import { getProjectList } from '@/services/api/project'
 import TreeNodeSelect from '../Management/List/components/TreeNodeSelect'
+import type { ColumnsStateType } from '@ant-design/pro-table/lib/typing'
 
 enum CreatedModalType {
   ADD = '1',
@@ -118,6 +119,22 @@ const Created = () => {
       return false
     }
   }
+
+  const columnsState: ColumnsStateType = useMemo(
+    () => ({
+      defaultValue: {
+        account: {
+          disable: true
+        },
+        institutionID: {
+          disable: true
+        }
+      },
+      persistenceKey: 'project_creator_column_key',
+      persistenceType: 'localStorage'
+    }),
+    []
+  )
   return (
     <PageContainer title={false}>
       <ProTable
@@ -125,6 +142,7 @@ const Created = () => {
         actionRef={tRef}
         columns={columns}
         search={false}
+        columnsState={columnsState}
         toolbar={{
           actions: [
             <Button

src/pages/Project/Management/List/index.tsx

@@ -2,7 +2,7 @@ import { delProject, getProjectList } from '@/services/api/project'
 import ProTable from '@ant-design/pro-table'
 import { Button, Popconfirm, Tag } from 'antd'
 import consts from '@/utils/consts'
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useMemo } from 'react'
 import { connect, history, useRequest } from 'umi'
 import { DeleteOutlined } from '@ant-design/icons'
 import ProjectModal, { ModalType } from './components/ProjectModal'
@@ -13,6 +13,7 @@ import AnimateContent from '@/components/AnimateContent'
 import type { ProColumnType, ActionType } from '@ant-design/pro-table'
 import type { ConnectProps } from 'umi'
 import type { SchemaBaseModelState } from '@/pages/Schema/Base/model'
+import type { ColumnsStateType } from '@ant-design/pro-table/lib/typing'
 
 type ListProps = ConnectProps & {
   pTypeList: { label: string; value: string }[]
@@ -104,7 +105,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
     },
     {
       title: '操作',
-      dataIndex: 'operation',
+      dataIndex: 'operate',
       width: 91,
       align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } }),
@@ -137,6 +138,22 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
     }
   ]
 
+  const columnsState: ColumnsStateType = useMemo(
+    () => ({
+      defaultValue: {
+        name: {
+          disable: true
+        },
+        opreate: {
+          disable: true
+        }
+      },
+      persistenceKey: 'project_list_column_key',
+      persistenceType: 'localStorage'
+    }),
+    []
+  )
+
   const onAnimateChange = visible => setState({ ...state, visible })
   return (
     <PageContainer title={false}>
@@ -144,6 +161,7 @@ const List: React.FC<ListProps> = ({ schema, dispatch, pTypeList }) => {
         rowKey="ID"
         params={state.params}
         actionRef={tRef}
+        columnsState={columnsState}
         scroll={{ y: document.body.clientHeight - 291 }}
         columns={columns}
         request={async (params, filter, sorter) => {