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

import { Card, Tabs, Checkbox, Affix, Button, message } from 'antd'
import React, { useState } from 'react'
import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
import { useRequest } from 'umi'
import { RoleType } from '../RoleLeftMenu'
import './index.less'
const { TabPane } = Tabs

type PermTabsProps = {
  currentPermData: {
    ID: string
    roleType: RoleType
  }
}
const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID, roleType } }) => {
  const [state, setState] = useState({
    frontPermission: [], // 前台权限
    backstagePermission: [] // 后台权限
  })

  useRequest(() => queryRoleDetailByID({ ID }), {
    refreshDeps: [ID],
    onSuccess: ({ frontPermission = [], backstagePermission = [] } = {}) => {
      setState({ ...state, frontPermission, backstagePermission })
    },
    onError: e => console.log(e)
  })

  const { run: trySetRolePermission } = useRequest(
    (params: API.SetRolePermissionParams) => setRolePermission(params),
    {
      manual: true,
      onSuccess: () => {
        message.success('设置成功')
      }
    }
  )
  const handleFrontOnchange = (checked: boolean, perm: string) => {
    if (checked) {
      setState({ ...state, frontPermission: [...state.frontPermission, perm] })
    } else {
      setState({ ...state, frontPermission: state.frontPermission.filter(item => item !== perm) })
    }
  }
  const handleBackOnchange = (checked: boolean, perm: string) => {
    if (checked) {
      setState({ ...state, backstagePermission: [...state.backstagePermission, perm] })
    } else {
      setState({
        ...state,
        backstagePermission: state.backstagePermission.filter(item => item !== perm)
      })
    }
  }
  const handleSubmit = () => {
    trySetRolePermission({
      ID,
      frontPermission: state.frontPermission,
      backstagePermission: state.backstagePermission
    })
  }

  return (
    <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>
                </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>
                </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>
              </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>
              </div>
              <div>
                <h4 className="pt-3">指标库</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'section')}
                    disabled>
                    区间对数
                  </Checkbox>
                </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>
                </div>
              </div>
              <div>
                <h4 className="pt-3">企事业信息</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
                    disabled>
                    查看
                  </Checkbox>
                </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>
              </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>
                <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>
                <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>
                <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>
            </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>
                <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>
            </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>
                <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>
                <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>
            </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>
            </Card>
          </div>
        </TabPane>
      </Tabs>
      <Affix offsetBottom={10}>
        <Button type="primary" onClick={handleSubmit}>
          提交
        </Button>
      </Affix>
    </div>
  )
}

export default PermTabs