feat: 权限相关功能

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

@@ -0,0 +1,47 @@
+import TreeNodeSelect from '@/pages/Project/Management/List/components/TreeNodeSelect'
+import { LinkRoleAccountItem } from '@/services/permission'
+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'
+
+const ConnectModal = ({ dataId, onReload }) => {
+  const { run: tryConnectRoleAccount } = useRequest(
+    (params: API.LinkAccountItem) => LinkRoleAccountItem(params),
+    {
+      manual: true,
+      onSuccess: async () => {
+        await onReload()
+      }
+    }
+  )
+  return (
+    <ModalForm
+      title="添加用户"
+      width="500px"
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 16 }}
+      layout="horizontal"
+      trigger={
+        <Button size="small" type="primary" ghost>
+          <PlusOutlined />
+          添加用户
+        </Button>
+      }
+      onFinish={async values => {
+        await tryConnectRoleAccount({ ...values, ID: dataId })
+        message.success('添加成功')
+        return true
+      }}>
+      <ProForm.Item
+        label="选择用户"
+        name="accountID"
+        rules={[{ required: true, message: '请选择创建人' }]}>
+        <TreeNodeSelect />
+      </ProForm.Item>
+    </ModalForm>
+  )
+}
+
+export default ConnectModal

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

@@ -26,7 +26,7 @@ const RoleLeftMenu = ({ onSelect }) => {
     manual: true,
     onSuccess: result => {
       setMenuRoles(result)
-      setActiveId(result[0]['id'])
+      // setActiveId(result[0]['ID'])
     }
   })
   const { run: tryAddRole } = useRequest((params: API.CreateRoleParams) => addRoleMenu(params), {
@@ -60,8 +60,6 @@ const RoleLeftMenu = ({ onSelect }) => {
   }, [])
   const handleItemClick = (id: string) => {
     setActiveId(id)
-    console.log(id)
-
     if (onSelect) {
       onSelect(id)
     }
@@ -101,6 +99,7 @@ const RoleLeftMenu = ({ onSelect }) => {
         <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
           {menuRoles.map(item => (
             <Popover
+              key={item.id}
               placement="right"
               content={
                 <div>
@@ -136,9 +135,9 @@ const RoleLeftMenu = ({ onSelect }) => {
                 key={item.id}
                 className={[
                   'flex justify-between items-center py-2 px-5 cursor-pointer',
-                  item.id === activeId ? 'scale-up-center' : ''
+                  item.ID === activeId ? 'scale-up-center' : ''
                 ].join(' ')}
-                onClick={() => handleItemClick(item.id)}>
+                onClick={() => handleItemClick(item.ID)}>
                 <span>{item.name}</span>
               </li>
             </Popover>

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

@@ -0,0 +1,3 @@
+.tab-height {
+  height: calc(100vh - 240px - 4rem);
+}

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

@@ -0,0 +1,305 @@
+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 './index.less'
+import { setRolePermission } from '@/services/permission'
+
+const SetPermission = ({ activeKey }) => {
+  const { TabPane } = Tabs
+  const formRef = useRef<FormInstance>(null)
+  useEffect(() => {}, [activeKey])
+  return (
+    <ProForm layout="horizontal" formRef={formRef}>
+      <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>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <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>
+              <div>
+                <h4>我参与的项目</h4>
+                <ProFormDependency name={['ShowProjectIn']}>
+                  {({ ShowProjectIn }) => (
+                    <ProFormCheckbox.Group
+                      wrapperCol={{ offset: 1 }}
+                      name="projectIn"
+                      options={[{ value: 'access', label: '查看项目' }]}
+                    />
+                  )}
+                </ProFormDependency>
+              </div>
+              <div>
+                <h4>全部项目</h4>
+                <ProFormDependency name={['ShowAllProject']}>
+                  {({ ShowAllProject }) => (
+                    <ProFormCheckbox.Group
+                      wrapperCol={{ offset: 1 }}
+                      name="allProject"
+                      options={[{ value: 'access', label: '查看项目' }]}
+                    />
+                  )}
+                </ProFormDependency>
+              </div>
+              <div>
+                <h4>指标库</h4>
+                <ProFormDependency name={['ShowSection']}>
+                  {({ ShowSection }) => (
+                    <ProFormCheckbox.Group
+                      wrapperCol={{ offset: 1 }}
+                      name="section"
+                      options={[{ value: 'section', label: '区间对数' }]}
+                    />
+                  )}
+                </ProFormDependency>
+              </div>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <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>
+              <div>
+                <h4>企事业信息</h4>
+                <ProFormDependency name={['ShowCompanyList']}>
+                  {({ ShowCompanyList }) => (
+                    <ProFormCheckbox.Group
+                      wrapperCol={{ offset: 1 }}
+                      name="companyList"
+                      options={[{ value: 'access', label: '查看' }]}
+                    />
+                  )}
+                </ProFormDependency>
+              </div>
+              <div>
+                <h4>安全设置</h4>
+                <ProFormDependency name={['ShowSettings']}>
+                  {({ ShowSettings }) => (
+                    <ProFormCheckbox.Group
+                      wrapperCol={{ offset: 1 }}
+                      name="settings"
+                      options={[
+                        { value: 'phone', label: '手机绑定' },
+                        { value: 'password', label: '密码修改' }
+                      ]}
+                    />
+                  )}
+                </ProFormDependency>
+              </div>
+            </Card>
+          </div>
+        </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>
+                <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>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <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>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <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>
+            </Card>
+          </div>
+          <div className="shadow-md mb-4">
+            <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>
+            </Card>
+          </div>
+        </TabPane>
+      </Tabs>
+    </ProForm>
+  )
+}
+
+export default SetPermission

src/pages/Permission/Role/index.tsx

@@ -1,48 +1,116 @@
-import { fetchRoleListByMenu } from '@/services/permission'
+import {
+  fetchRoleListByMenu,
+  fetchRoleListByRoleId,
+  UnLinkRoleAccountItem
+} from '@/services/permission'
+import { DeleteOutlined } from '@ant-design/icons'
 import { PageContainer } from '@ant-design/pro-layout'
-import { Tabs } from 'antd'
+import { message, Popconfirm, Table, Tabs } from 'antd'
+import type { ColumnsType } from 'antd/lib/table'
 import React, { useEffect, useState } from 'react'
 import { useRequest } from 'umi'
+import ConnectModal from './components/ConnectModal'
 import RoleLeftMenu from './components/RoleLeftMenu'
+import SetPermission from './components/SetPermission'
 
 const Role = () => {
   const [state, setState] = useState({
-    id: ''
+    ID: '',
+    roleStaff: [],
+    activeKey: ''
   })
   const [menuRoles, setMenuRoles] = useState<API.MenuRoleItem[]>([])
-  const onSelect = (id: string) => {
-    setState({ ...state, id })
+  const onSelect = (ID: string) => {
+    setState({ ...state, ID })
   }
   const { TabPane } = Tabs
-  const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
-    manual: true,
-    onSuccess: result => {
-      setMenuRoles(result)
-      setState({ ...state, id: result[0]['id'] })
+  // const { run: tryFetchRoleListByMenu } = useRequest(() => fetchRoleListByMenu(), {
+  //   manual: true,
+  //   onSuccess: result => {
+  //     setMenuRoles(result)
+  //     // setState({ ...state, ID: result[0]['ID'] })
+  //   }
+  // })
+  const { run: tryGetRoleStaffList } = useRequest(
+    (roleID: string) => fetchRoleListByRoleId({ roleID }),
+    {
+      manual: true,
+      onSuccess: result => {
+        setState({ ...state, roleStaff: result.items })
+      }
     }
-  })
+  )
+  const { run: tryUnLinkRoleAccount } = useRequest(
+    (params: API.LinkAccountItem) => UnLinkRoleAccountItem(params),
+    {
+      manual: true,
+      onSuccess: async () => {
+        message.success('移除成功')
+        await tryGetRoleStaffList(state.ID)
+      }
+    }
+  )
   useEffect(() => {
-    tryFetchRoleListByMenu()
-  }, [])
+    // tryFetchRoleListByMenu()
+    if (state.ID) {
+      tryGetRoleStaffList(state.ID)
+    }
+  }, [state.ID])
+  const columns: ColumnsType<API.MenuByRoleIdItem> = [
+    {
+      title: '账号',
+      dataIndex: 'account',
+      width: '15%'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      width: '15%'
+    },
+    {
+      title: '企事业名称',
+      dataIndex: 'institutionID',
+      width: '35%',
+      render: (_, record) => record.institution.name
+    },
+    {
+      title: '操作',
+      dataIndex: 'operation',
+      width: '10%',
+      render: (_, record) => (
+        <Popconfirm
+          title="确认移除吗？"
+          okText="确认"
+          cancelText="取消"
+          onConfirm={() => tryUnLinkRoleAccount({ ID: state.ID, accountID: record.ID })}>
+          <span className="text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
+            <DeleteOutlined />
+          </span>
+        </Popconfirm>
+      )
+    }
+  ]
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
         <RoleLeftMenu onSelect={onSelect}></RoleLeftMenu>
-        <div className="w-6/7 ml-8 bg-white p-4 rounded-20px">
-          <div className="max-w-800px">
+        <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)} />
+            )}
+          </div>
+          <div>
             <Tabs>
               <TabPane tab="用户列表" key="1">
-                <span>用户列表</span>
+                <Table<API.MenuByRoleIdItem>
+                  columns={columns}
+                  dataSource={state.roleStaff}
+                  rowKey={row => row.id}
+                />
               </TabPane>
               <TabPane tab="功能权限" key="2">
-                <Tabs type="card">
-                  <TabPane tab="前台" key="3">
-                    前台
-                  </TabPane>
-                  <TabPane tab="后台" key="4">
-                    后台
-                  </TabPane>
-                </Tabs>
+                <SetPermission activeKey={state.activeKey} />
               </TabPane>
             </Tabs>
           </div>

src/services/api/typings.d.ts

@@ -318,4 +318,23 @@ declare namespace API {
   type DelRoleParams = {
     ID: string
   }
+
+  type MenuByRoleIdItem = {
+    account: string
+    name: string
+    institution: {
+      ID: string
+      name: string
+    }
+  }
+
+  type LinkAccountItem = {
+    ID: string
+    accountID: string
+  }
+
+  type SetRolePermissionParams = {
+    ID: string
+    frontPermission: string
+  }
 }

src/services/permission.ts

@@ -30,3 +30,35 @@ export async function delRoleMenu(params: API.DelRoleParams) {
     data: params
   })
 }
+
+/** 获取角色下员工列表 */
+export async function fetchRoleListByRoleId(params) {
+  return request<API.MenuByRoleIdItem[]>('/account/list', {
+    method: 'POST',
+    data: params
+  })
+}
+
+/** 角色下关联账号 */
+export async function LinkRoleAccountItem(params: API.LinkAccountItem) {
+  return request('/role/link/account', {
+    method: 'POST',
+    data: params
+  })
+}
+
+/** 角色下移除账号 */
+export async function UnLinkRoleAccountItem(params: API.LinkAccountItem) {
+  return request('/role/unlink/account', {
+    method: 'POST',
+    data: params
+  })
+}
+
+/** 角色下设置权限 */
+export async function setRolePermission(params: API.SetRolePermissionParams) {
+  return request('/role/set/permission', {
+    method: 'POST',
+    data: params
+  })
+}