Browse Source

fix: 修复tabs下form设置初始值失效的问题

lanjianrong 4 years ago
parent
commit
e8e874d6f1
3 changed files with 25 additions and 10 deletions
  1. 0 2
      src/app.tsx
  2. 12 4
      src/pages/Role/Customer/index.tsx
  3. 13 4
      src/pages/Role/System/index.tsx

+ 0 - 2
src/app.tsx

@@ -37,8 +37,6 @@ export async function getInitialState(): Promise<{
   if (history.location.pathname !== loginPath) {
   if (history.location.pathname !== loginPath) {
     try {
     try {
       const { data: currentUser } = await fetchUserInfo()
       const { data: currentUser } = await fetchUserInfo()
-      console.log('currentUser', currentUser)
-
       return {
       return {
         fetchUserInfo,
         fetchUserInfo,
         menuList: currentUser.menus,
         menuList: currentUser.menus,

+ 12 - 4
src/pages/Role/Customer/index.tsx

@@ -64,7 +64,9 @@ const Customer = () => {
 
 
   const [state, setState] = useState({
   const [state, setState] = useState({
     id: '',
     id: '',
-    roleStaff: []
+    roleStaff: [],
+    rolePermission: {},
+    activeKey: ''
   })
   })
   const onSelect = (id: string) => {
   const onSelect = (id: string) => {
     setState({ ...state, id })
     setState({ ...state, id })
@@ -84,7 +86,7 @@ const Customer = () => {
     manual: true,
     manual: true,
     onSuccess: (result: API.GetRolePermissionResultModel) => {
     onSuccess: (result: API.GetRolePermissionResultModel) => {
       const values = { ...formatPermission('init', result.permission) }
       const values = { ...formatPermission('init', result.permission) }
-      formRef.current?.setFieldsValue(values)
+      setState({ ...state, rolePermission: values })
     }
     }
   })
   })
 
 
@@ -93,7 +95,10 @@ const Customer = () => {
       tryGetRoleStaffList(state.id)
       tryGetRoleStaffList(state.id)
       tryGetRolePermissions(state.id)
       tryGetRolePermissions(state.id)
     }
     }
-  }, [state.id])
+    if (state.activeKey === '2') {
+      formRef.current?.setFieldsValue({ ...state.rolePermission })
+    }
+  }, [state.id, state.activeKey])
 
 
   return (
   return (
     <div className="h-full w-full flex flex-row">
     <div className="h-full w-full flex flex-row">
@@ -109,7 +114,10 @@ const Customer = () => {
               />
               />
             )}
             )}
           </div>
           </div>
-          <Tabs defaultActiveKey="1" type="card">
+          <Tabs
+            defaultActiveKey="1"
+            type="card"
+            onChange={key => setState({ ...state, activeKey: key })}>
             <TabPane tab="员工列表" key="1">
             <TabPane tab="员工列表" key="1">
               <Table<API.RoleStaffListItem>
               <Table<API.RoleStaffListItem>
                 dataSource={state.roleStaff}
                 dataSource={state.roleStaff}

+ 13 - 4
src/pages/Role/System/index.tsx

@@ -63,7 +63,8 @@ const System = () => {
   const [state, setState] = useState({
   const [state, setState] = useState({
     id: '',
     id: '',
     roleStaff: [],
     roleStaff: [],
-    rolePermission: {}
+    rolePermission: {},
+    activeKey: ''
   })
   })
   const onSelect = (id: string) => {
   const onSelect = (id: string) => {
     setState({ ...state, id })
     setState({ ...state, id })
@@ -83,7 +84,9 @@ const System = () => {
     manual: true,
     manual: true,
     onSuccess: (result: API.GetRolePermissionResultModel) => {
     onSuccess: (result: API.GetRolePermissionResultModel) => {
       const values = { ...formatPermission('init', result.permission) }
       const values = { ...formatPermission('init', result.permission) }
-      formRef.current?.setFieldsValue({ ...values })
+      setState({ ...state, rolePermission: values })
+
+      // formRef.current?.setFieldsValue({ ...values })
     }
     }
   })
   })
 
 
@@ -92,10 +95,13 @@ const System = () => {
       tryGetRoleStaffList(state.id)
       tryGetRoleStaffList(state.id)
       tryGetRolePermissions(state.id)
       tryGetRolePermissions(state.id)
     }
     }
+    if (state.activeKey === '2') {
+      formRef.current?.setFieldsValue({ ...state.rolePermission })
+    }
     return () => {
     return () => {
       formRef.current?.resetFields()
       formRef.current?.resetFields()
     }
     }
-  }, [state.id])
+  }, [state.id, state.activeKey])
 
 
   return (
   return (
     <div className="h-full w-full flex flex-row">
     <div className="h-full w-full flex flex-row">
@@ -111,7 +117,10 @@ const System = () => {
               />
               />
             )}
             )}
           </div>
           </div>
-          <Tabs defaultActiveKey="1" type="card">
+          <Tabs
+            defaultActiveKey="1"
+            type="card"
+            onChange={key => setState({ ...state, activeKey: key })}>
             <TabPane tab="员工列表" key="1">
             <TabPane tab="员工列表" key="1">
               <Table<API.RoleStaffListItem>
               <Table<API.RoleStaffListItem>
                 dataSource={state.roleStaff}
                 dataSource={state.roleStaff}