feat: 角色列表的功能权限

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

@@ -4,7 +4,7 @@ import { PlusOutlined } from '@ant-design/icons'
 import ProForm, { ModalForm } from '@ant-design/pro-form'
 import { Button, message } from 'antd'
 import React from 'react'
-import { request, useRequest } from 'umi'
+import { useRequest } from 'umi'
 
 const ConnectModal = ({ dataId, onReload }) => {
   const { run: tryConnectRoleAccount } = useRequest(

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

@@ -1,38 +1,50 @@
-import ProForm, { ProFormDependency, ProFormCheckbox } from '@ant-design/pro-form'
-import { Card, Tabs } from 'antd'
-import type { FormInstance } from 'antd'
-import React, { useEffect, useState, useRef } from 'react'
+import { Card, Tabs, Checkbox, Affix, Button } from 'antd'
+import React, { useEffect, useState } from 'react'
 import './index.less'
 import { setRolePermission } from '@/services/permission'
+import { useRequest } from 'umi'
+const { TabPane } = Tabs
 
-const SetPermission = ({ activeKey }) => {
-  const { TabPane } = Tabs
-  const formRef = useRef<FormInstance>(null)
-  useEffect(() => {}, [activeKey])
+const SetPermission = ({ ID, activeKey }) => {
+  const [bottom, setBottom] = useState(10)
+  const { run: trySetRolePermission } = useRequest(
+    (frontPermission: string) => setRolePermission({ ID, frontPermission }),
+    {
+      manual: true,
+      onSuccess: () => {
+        message.success('设置成功')
+      }
+    }
+  )
+  const handleOnchange = e => {
+    // console.log(e)
+
+    trySetRolePermission(ID, e)
+  }
+  useEffect(() => {
+    if (activeKey === '2') {
+      trySetRolePermission(ID, e)
+    }
+  }, [activeKey])
   return (
-    <ProForm layout="horizontal" formRef={formRef}>
+    <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> */}
-                <ProFormDependency name={['ShowTodoList']}>
-                  {({ ShowTodoList }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="todoList"
-                      options={[
-                        {
-                          value: 'todo',
-                          label: '已办待办',
-                          disabled: !ShowTodoList,
-                          checked: 'checked'
-                        }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group
+                    onChange={handleOnchange}
+                    options={[
+                      {
+                        value: 'todo',
+                        label: '已办待办'
+                      }
+                    ]}
+                  />
+                </div>
               </div>
             </Card>
           </div>
@@ -40,55 +52,34 @@ const SetPermission = ({ activeKey }) => {
             <Card size="small" type="inner" title="项目列表">
               <div>
                 <h4>我的项目</h4>
-                <ProFormDependency name={['ShowProject']}>
-                  {({ ShowProject }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="project"
-                      options={[
-                        { value: 'access', label: '查看项目', disabled: 'disabled' },
-                        { value: 'add', label: '新建项目', disabled: 'disabled' },
-                        { value: 'appear', label: '项目上报' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group
+                    onChange={handleOnchange}
+                    options={[
+                      { value: 'access', label: '查看项目' },
+                      { value: 'add', label: '新建项目' },
+                      { value: 'report', label: '项目上报' }
+                    ]}
+                  />
+                </div>
               </div>
               <div>
-                <h4>我参与的项目</h4>
-                <ProFormDependency name={['ShowProjectIn']}>
-                  {({ ShowProjectIn }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="projectIn"
-                      options={[{ value: 'access', label: '查看项目' }]}
-                    />
-                  )}
-                </ProFormDependency>
+                <h4 className="pt-3">我参与的项目</h4>
+                <div className="my-2">
+                  <Checkbox.Group options={[{ value: 'access', label: '查看项目' }]} />
+                </div>
               </div>
               <div>
-                <h4>全部项目</h4>
-                <ProFormDependency name={['ShowAllProject']}>
-                  {({ ShowAllProject }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="allProject"
-                      options={[{ value: 'access', label: '查看项目' }]}
-                    />
-                  )}
-                </ProFormDependency>
+                <h4 className="pt-3">全部项目</h4>
+                <div className="my-2">
+                  <Checkbox.Group options={[{ value: 'viewAllProjects', label: '查看项目' }]} />
+                </div>
               </div>
               <div>
-                <h4>指标库</h4>
-                <ProFormDependency name={['ShowSection']}>
-                  {({ ShowSection }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="section"
-                      options={[{ value: 'section', label: '区间对数' }]}
-                    />
-                  )}
-                </ProFormDependency>
+                <h4 className="pt-3">指标库</h4>
+                <div className="my-2">
+                  <Checkbox.Group options={[{ value: 'section', label: '区间对数' }]} />
+                </div>
               </div>
             </Card>
           </div>
@@ -96,42 +87,26 @@ const SetPermission = ({ activeKey }) => {
             <Card size="small" type="inner" title="个人设置">
               <div>
                 <h4>基本设置</h4>
-                <ProFormDependency name={['ShowPersonal']}>
-                  {({ ShowPersonal }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="personal"
-                      options={[{ value: 'edit', label: '编辑' }]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group options={[{ value: 'edit', label: '编辑' }]} />
+                </div>
               </div>
               <div>
-                <h4>企事业信息</h4>
-                <ProFormDependency name={['ShowCompanyList']}>
-                  {({ ShowCompanyList }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="companyList"
-                      options={[{ value: 'access', label: '查看' }]}
-                    />
-                  )}
-                </ProFormDependency>
+                <h4 className="pt-3">企事业信息</h4>
+                <div className="my-2">
+                  <Checkbox.Group options={[{ value: 'access', label: '查看' }]} />
+                </div>
               </div>
               <div>
-                <h4>安全设置</h4>
-                <ProFormDependency name={['ShowSettings']}>
-                  {({ ShowSettings }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="settings"
-                      options={[
-                        { value: 'phone', label: '手机绑定' },
-                        { value: 'password', label: '密码修改' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <h4 className="pt-3">安全设置</h4>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'phone', label: '手机绑定' },
+                      { value: 'password', label: '密码修改' }
+                    ]}
+                  />
+                </div>
               </div>
             </Card>
           </div>
@@ -141,53 +116,41 @@ const SetPermission = ({ activeKey }) => {
             <Card size="small" type="inner" title="项目">
               <div>
                 <h4>项目管理</h4>
-                <ProFormDependency name={['ShowManagement']}>
-                  {({ ShowManagement }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="management"
-                      options={[
-                        { value: 'access', label: '查看项目' },
-                        { value: 'add', label: '新建项目' },
-                        { value: 'edit', label: '编辑项目' },
-                        { value: 'bind', label: '绑定角色' },
-                        { value: 'deploy', label: '流程配置' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
-              </div>
-              <div>
-                <h4>审批流程模板</h4>
-                <ProFormDependency name={['ShowVerification']}>
-                  {({ ShowVerification }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="verification"
-                      options={[
-                        { value: 'access', label: '查看流程' },
-                        { value: 'add', label: '新建流程' },
-                        { value: 'edit', label: '编辑流程' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
-              </div>
-              <div>
-                <h4>项目创建人</h4>
-                <ProFormDependency name={['ShowCreated']}>
-                  {({ ShowCreated }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="created"
-                      options={[
-                        { value: 'access', label: '查看创建人' },
-                        { value: 'add', label: '新建创建人' },
-                        { value: 'delete', label: '删除创建人' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看项目' },
+                      { value: 'add', label: '新建项目' },
+                      { value: 'edit', label: '编辑项目' },
+                      { value: 'bind', label: '绑定角色' },
+                      { value: 'deploy', label: '流程配置' }
+                    ]}
+                  />
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">审批流程模板</h4>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看流程' },
+                      { value: 'add', label: '新建流程' },
+                      { value: 'edit', label: '编辑流程' }
+                    ]}
+                  />
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">项目创建人</h4>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看创建人' },
+                      { value: 'add', label: '新建创建人' },
+                      { value: 'delete', label: '删除创建人' }
+                    ]}
+                  />
+                </div>
               </div>
             </Card>
           </div>
@@ -195,36 +158,28 @@ const SetPermission = ({ activeKey }) => {
             <Card size="small" type="inner" title="企事业单位">
               <div>
                 <h4>单位管理</h4>
-                <ProFormDependency name={['ShowCompany']}>
-                  {({ ShowCompany }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="company"
-                      options={[
-                        { value: 'access', label: '查看单位' },
-                        { value: 'add', label: '新建单位' },
-                        { value: 'staff', label: '人员管理' },
-                        { value: 'organizational', label: '组织管理' },
-                        { value: 'deploy', label: '单位设置' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
-              </div>
-              <div>
-                <h4>人员管理</h4>
-                <ProFormDependency name={['ShowStaff']}>
-                  {({ ShowStaff }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="staff"
-                      options={[
-                        { value: 'access', label: '查看人员' },
-                        { value: 'edit', label: '编辑人员' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看单位' },
+                      { value: 'add', label: '新建单位' },
+                      { value: 'staff', label: '人员管理' },
+                      { value: 'organizational', label: '组织管理' },
+                      { value: 'deploy', label: '单位设置' }
+                    ]}
+                  />
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">人员管理</h4>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看人员' },
+                      { value: 'edit', label: '编辑人员' }
+                    ]}
+                  />
+                </div>
               </div>
             </Card>
           </div>
@@ -232,48 +187,36 @@ const SetPermission = ({ activeKey }) => {
             <Card size="small" type="inner" title="业务设置">
               <div>
                 <h4>项目信息</h4>
-                <ProFormDependency name={['ShowSchema']}>
-                  {({ ShowSchema }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="schema"
-                      options={[
-                        { value: 'access', label: '查看信息' },
-                        { value: 'edit', label: '编辑信息' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
-              </div>
-              <div>
-                <h4>企事业单位信息</h4>
-                <ProFormDependency name={['ShowSchema']}>
-                  {({ ShowSchema }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="schema"
-                      options={[
-                        { value: 'access', label: '查看信息' },
-                        { value: 'edit', label: '编辑信息' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
-              </div>
-              <div>
-                <h4>人员信息</h4>
-                <ProFormDependency name={['ShowSchema']}>
-                  {({ ShowSchema }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="system"
-                      options={[
-                        { value: 'access', label: '查看信息' },
-                        { value: 'edit', label: '编辑信息' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看信息' },
+                      { value: 'edit', label: '编辑信息' }
+                    ]}
+                  />
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">企事业单位信息</h4>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看信息' },
+                      { value: 'edit', label: '编辑信息' }
+                    ]}
+                  />
+                </div>
+              </div>
+              <div>
+                <h4 className="pt-3">人员信息</h4>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看信息' },
+                      { value: 'edit', label: '编辑信息' }
+                    ]}
+                  />
+                </div>
               </div>
             </Card>
           </div>
@@ -281,24 +224,25 @@ const SetPermission = ({ activeKey }) => {
             <Card size="small" type="inner" title="系统管理">
               <div>
                 <h4>管理员设置</h4>
-                <ProFormDependency name={['ShowAdminUpdate']}>
-                  {({ ShowAdminUpdate }) => (
-                    <ProFormCheckbox.Group
-                      wrapperCol={{ offset: 1 }}
-                      name="adminUpdate"
-                      options={[
-                        { value: 'access', label: '查看信息' },
-                        { value: 'edit', label: '编辑信息' }
-                      ]}
-                    />
-                  )}
-                </ProFormDependency>
+                <div className="my-2">
+                  <Checkbox.Group
+                    options={[
+                      { value: 'access', label: '查看信息' },
+                      { value: 'edit', label: '编辑信息' }
+                    ]}
+                  />
+                </div>
               </div>
             </Card>
           </div>
         </TabPane>
       </Tabs>
-    </ProForm>
+      <Affix offsetBottom={bottom}>
+        <Button type="primary" onClick={handleOnchange}>
+          提交
+        </Button>
+      </Affix>
+    </div>
   )
 }
 

src/pages/Permission/Role/index.tsx

@@ -36,7 +36,7 @@ const Role = () => {
       manual: true,
       onSuccess: async () => {
         message.success('移除成功')
-        await tryGetRoleStaffList(state.ID)
+        await tryGetRoleStaffList(state.currentRoleID)
       }
     }
   )
@@ -86,8 +86,11 @@ const Role = () => {
         <RoleLeftMenu onSelect={onSelect} />
         <div className="w-6/7 ml-8 bg-white p-4 rounded-20px relative">
           <div className="absolute right-4 top-4 z-100">
-            {state.ID && (
-              <ConnectModal dataId={state.ID} onReload={() => tryGetRoleStaffList(state.ID)} />
+            {state.currentRoleID && (
+              <ConnectModal
+                dataId={state.currentRoleID}
+                onReload={() => tryGetRoleStaffList(state.currentRoleID)}
+              />
             )}
           </div>
           <div>
@@ -100,7 +103,7 @@ const Role = () => {
                 />
               </TabPane>
               <TabPane tab="功能权限" key="2">
-                <SetPermission activeKey={state.activeKey} />
+                <SetPermission ID={state.currentRoleID} activeKey={state.activeKey} />
               </TabPane>
             </Tabs>
           </div>