feat: 权限设置增加loding

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

@@ -1,4 +1,4 @@
-import { Card, Tabs, Checkbox, Affix, Button, message } from 'antd'
+import { Card, Tabs, Checkbox, Affix, Button, message, Spin } from 'antd'
 import React, { useState } from 'react'
 import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
 import { useRequest } from 'umi'
@@ -18,7 +18,7 @@ const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID, roleType } }
     backstagePermission: [] // 后台权限
   })
 
-  useRequest(() => queryRoleDetailByID({ ID }), {
+  const { loading } = useRequest(() => queryRoleDetailByID({ ID }), {
     refreshDeps: [ID],
     onSuccess: ({ frontPermission = [], backstagePermission = [] } = {}) => {
       setState({ ...state, frontPermission, backstagePermission })
@@ -26,7 +26,7 @@ const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID, roleType } }
     onError: e => console.log(e)
   })
 
-  const { run: trySetRolePermission } = useRequest(
+  const { run: trySetRolePermission, loading: submitStauts } = useRequest(
     (params: API.SetRolePermissionParams) => setRolePermission(params),
     {
       manual: true,
@@ -64,375 +64,385 @@ const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID, roleType } }
     <div>
       <Tabs type="card">
         <TabPane tab="前台" key="3" className="tab-height overflow-y-auto">
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="待办列表">
-              <div>
-                {/* <h4>我的项目</h4> */}
-                <div className="my-2">
-                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'todo')} disabled>
-                    已办待办
-                  </Checkbox>
+          <Spin spinning={loading}>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="待办列表">
+                <div>
+                  {/* <h4>我的项目</h4> */}
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'todo')}
+                      disabled>
+                      已办待办
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="项目列表">
-              <div>
-                <h4>我的项目</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'viewProject')}
-                    checked={state.frontPermission.includes('viewProject')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    查看项目
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'addProject')}
-                    checked={state.frontPermission.includes('addProject')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    新建项目
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'report')}
-                    checked={state.frontPermission.includes('report')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    项目上报
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'editProject')}
-                    checked={state.frontPermission.includes('editProject')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    编辑项目
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'exportProject')}
-                    checked={state.frontPermission.includes('exportProject')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    导出项目
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'delProject')}
-                    checked={state.frontPermission.includes('delProject')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    删除项目
-                  </Checkbox>
+              </Card>
+            </div>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="项目列表">
+                <div>
+                  <h4>我的项目</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'viewProject')}
+                      checked={state.frontPermission.includes('viewProject')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      查看项目
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'addProject')}
+                      checked={state.frontPermission.includes('addProject')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      新建项目
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'report')}
+                      checked={state.frontPermission.includes('report')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      项目上报
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'editProject')}
+                      checked={state.frontPermission.includes('editProject')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      编辑项目
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'exportProject')}
+                      checked={state.frontPermission.includes('exportProject')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      导出项目
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'delProject')}
+                      checked={state.frontPermission.includes('delProject')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      删除项目
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">我参与的项目</h4>
-                <div className="my-2">
-                  <Checkbox
-                    disabled={roleType === RoleType.SYSTEM}
-                    checked={state.frontPermission.includes('viewParticipatingProject')}
-                    onChange={e =>
-                      handleFrontOnchange(e.target.checked, 'viewParticipatingProject')
-                    }>
-                    查看项目
-                  </Checkbox>
-                  <Checkbox
-                    disabled={roleType === RoleType.SYSTEM}
-                    checked={state.frontPermission.includes('saveIndex')}
-                    onChange={e => handleFrontOnchange(e.target.checked, 'saveIndex')}>
-                    指标入库
-                  </Checkbox>
-                  <Checkbox
-                    disabled={roleType === RoleType.SYSTEM}
-                    checked={state.frontPermission.includes('exportParticipatingProject')}
-                    onChange={e =>
-                      handleFrontOnchange(e.target.checked, 'exportParticipatingProject')
-                    }>
-                    导出
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">我参与的项目</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      disabled={roleType === RoleType.SYSTEM}
+                      checked={state.frontPermission.includes('viewParticipatingProject')}
+                      onChange={e =>
+                        handleFrontOnchange(e.target.checked, 'viewParticipatingProject')
+                      }>
+                      查看项目
+                    </Checkbox>
+                    <Checkbox
+                      disabled={roleType === RoleType.SYSTEM}
+                      checked={state.frontPermission.includes('saveIndex')}
+                      onChange={e => handleFrontOnchange(e.target.checked, 'saveIndex')}>
+                      指标入库
+                    </Checkbox>
+                    <Checkbox
+                      disabled={roleType === RoleType.SYSTEM}
+                      checked={state.frontPermission.includes('exportParticipatingProject')}
+                      onChange={e =>
+                        handleFrontOnchange(e.target.checked, 'exportParticipatingProject')
+                      }>
+                      导出
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">全部项目</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'viewAllProjects')}
-                    checked={state.frontPermission.includes('viewAllProjects')}
-                    disabled={roleType === RoleType.SYSTEM}>
-                    查看项目
-                  </Checkbox>
-                  <Checkbox
-                    disabled={roleType === RoleType.SYSTEM}
-                    checked={state.frontPermission.includes('saveIndexAll')}
-                    onChange={e => handleFrontOnchange(e.target.checked, 'saveIndexAll')}>
-                    指标入库
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">全部项目</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'viewAllProjects')}
+                      checked={state.frontPermission.includes('viewAllProjects')}
+                      disabled={roleType === RoleType.SYSTEM}>
+                      查看项目
+                    </Checkbox>
+                    <Checkbox
+                      disabled={roleType === RoleType.SYSTEM}
+                      checked={state.frontPermission.includes('saveIndexAll')}
+                      onChange={e => handleFrontOnchange(e.target.checked, 'saveIndexAll')}>
+                      指标入库
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">指标库</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'section')}
-                    disabled>
-                    区间对数
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">指标库</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'section')}
+                      disabled>
+                      区间对数
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="个人设置">
-              <div>
-                <h4>基本设置</h4>
-                <div className="my-2">
-                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'edit')} disabled>
-                    编辑
-                  </Checkbox>
+              </Card>
+            </div>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="个人设置">
+                <div>
+                  <h4>基本设置</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'edit')}
+                      disabled>
+                      编辑
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">企事业信息</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
-                    disabled>
-                    查看
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">企事业信息</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
+                      disabled>
+                      查看
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">安全设置</h4>
-                <div className="my-2">
-                  <Checkbox onChange={e => handleFrontOnchange(e.target.checked, 'phone')} disabled>
-                    手机绑定
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleFrontOnchange(e.target.checked, 'password')}
-                    disabled>
-                    密码修改
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">安全设置</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'phone')}
+                      disabled>
+                      手机绑定
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleFrontOnchange(e.target.checked, 'password')}
+                      disabled>
+                      密码修改
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
+              </Card>
+            </div>
+          </Spin>
         </TabPane>
         <TabPane tab="后台" key="4" className="tab-height overflow-y-auto">
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="项目">
-              <div>
-                <h4>项目管理</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'password')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    密码修改
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    新建项目
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑项目
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    绑定角色
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    流程配置
-                  </Checkbox>
+          <Spin spinning={loading}>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="项目">
+                <div>
+                  <h4>项目管理</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'password')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      密码修改
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      新建项目
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑项目
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      绑定角色
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      流程配置
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">审批流程模板</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看流程
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    新建流程
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑流程
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">审批流程模板</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看流程
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      新建流程
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑流程
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">项目创建人</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看创建人
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    新建创建人
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    删除创建人
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">项目创建人</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看创建人
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      新建创建人
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      删除创建人
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="企事业单位">
-              <div>
-                <h4>单位管理</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa4')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看单位
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    新建单位
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'staff')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    人员管理
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    组织管理
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    单位设置
-                  </Checkbox>
+              </Card>
+            </div>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="企事业单位">
+                <div>
+                  <h4>单位管理</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa4')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看单位
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      新建单位
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'staff')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      人员管理
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      组织管理
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      单位设置
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">人员管理</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看人员
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑人员
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">人员管理</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看人员
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑人员
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="业务设置">
-              <div>
-                <h4>项目信息</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa6')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看信息
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑信息
-                  </Checkbox>
+              </Card>
+            </div>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="业务设置">
+                <div>
+                  <h4>项目信息</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa6')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看信息
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑信息
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">企事业单位信息</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看信息
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑信息
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">企事业单位信息</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看信息
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑信息
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-              <div>
-                <h4 className="pt-3">人员信息</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看信息
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑信息
-                  </Checkbox>
+                <div>
+                  <h4 className="pt-3">人员信息</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看信息
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑信息
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
-          <div className="shadow-md mb-4">
-            <Card size="small" type="inner" title="系统管理">
-              <div>
-                <h4>管理员设置</h4>
-                <div className="my-2">
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa9')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    查看信息
-                  </Checkbox>
-                  <Checkbox
-                    onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
-                    checked={state.backstagePermission.includes('updatePsw')}
-                    disabled>
-                    编辑信息
-                  </Checkbox>
+              </Card>
+            </div>
+            <div className="shadow-md mb-4">
+              <Card size="small" type="inner" title="系统管理">
+                <div>
+                  <h4>管理员设置</h4>
+                  <div className="my-2">
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'accessBa9')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      查看信息
+                    </Checkbox>
+                    <Checkbox
+                      onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
+                      checked={state.backstagePermission.includes('updatePsw')}
+                      disabled>
+                      编辑信息
+                    </Checkbox>
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </div>
+              </Card>
+            </div>
+          </Spin>
         </TabPane>
       </Tabs>
       <Affix offsetBottom={10}>
-        <Button type="primary" onClick={handleSubmit}>
+        <Button type="primary" onClick={handleSubmit} loading={submitStauts}>
           提交
         </Button>
       </Affix>

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

@@ -128,10 +128,10 @@ const RoleLeftMenu: React.FC<RoleLeftMenuProps> = ({
   if (!menuRoles?.length || isNullOrUnDef(defaultActiveRole)) return null
   return (
     <div
-      className="w-216px rounded-20px"
+      className="min-w-54 rounded-3xl"
       style={{ height: 'calc(100vh - 122px)', background: '#ffffff' }}>
       <div className="menu-title flex items-center justify-around">
-        <span className="py-5 text-16px text-opacity-85">角色列表</span>
+        <span className="py-4 text-base text-opacity-85">角色列表</span>
         <ModalForm
           title="新建角色"
           width="30%"