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

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

const SetPermission = ({ ID, roleType = 'system' }) => {
  const [state, setState] = useState({
    frontPermission: [], // 前台权限
    backstagePermission: [] // 后台权限
  })
  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')}
                    checked={state.frontPermission.includes('todo')}
                    disabled={roleType !== 'system' ? false : true}>
                    已办待办
                  </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, 'access')}
                    checked={state.frontPermission.includes('access')}
                    disabled={roleType !== 'system' ? false : true}>
                    查看项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'add')}
                    checked={state.frontPermission.includes('add')}
                    disabled={roleType !== 'system' ? false : true}>
                    新建项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'report')}
                    checked={state.frontPermission.includes('report')}
                    disabled={roleType !== 'system' ? false : true}>
                    项目上报
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">我参与的项目</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'access1')}
                    checked={state.frontPermission.includes('access1')}
                    disabled={roleType !== 'system' ? false : true}>
                    查看项目
                  </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 !== 'system' ? false : true}>
                    查看项目
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">指标库</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'section')}
                    checked={state.frontPermission.includes('section')}
                    disabled={roleType !== 'system' ? false : true}>
                    区间对数
                  </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')}
                    checked={state.frontPermission.includes('edit')}
                    disabled={roleType !== 'system' ? false : true}>
                    编辑
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">企事业信息</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'access2')}
                    checked={state.frontPermission.includes('access2')}
                    disabled={roleType !== 'system' ? false : true}>
                    查看
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">安全设置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'phone')}
                    checked={state.frontPermission.includes('phone')}
                    disabled={roleType !== 'system' ? false : true}>
                    手机绑定
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleFrontOnchange(e.target.checked, 'password')}
                    checked={state.frontPermission.includes('password')}
                    disabled={roleType !== 'system' ? false : true}>
                    密码修改
                  </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, 'accessBa1')}
                    checked={state.frontPermission.includes('accessBa1')}
                    disabled={true}>
                    查看项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
                    checked={state.frontPermission.includes('addBa1')}
                    disabled={true}>
                    新建项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
                    checked={state.frontPermission.includes('editBa1')}
                    disabled={true}>
                    编辑项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
                    checked={state.frontPermission.includes('bindBa1')}
                    disabled={true}>
                    绑定角色
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
                    checked={state.frontPermission.includes('deployBa1')}
                    disabled={true}>
                    流程配置
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">审批流程模板</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa2')}
                    checked={state.frontPermission.includes('accessBa2')}
                    disabled={true}>
                    查看流程
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
                    checked={state.frontPermission.includes('addBa2')}
                    disabled={true}>
                    新建流程
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
                    checked={state.frontPermission.includes('editBa2')}
                    disabled={true}>
                    编辑流程
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">项目创建人</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa3')}
                    checked={state.frontPermission.includes('accessBa3')}
                    disabled={true}>
                    查看创建人
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'addBa3')}
                    checked={state.frontPermission.includes('addBa3')}
                    disabled={true}>
                    新建创建人
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'deleteBa3')}
                    checked={state.frontPermission.includes('deleteBa3')}
                    disabled={true}>
                    删除创建人
                  </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.frontPermission.includes('accessBa4')}
                    disabled={true}>
                    查看单位
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'addBa4')}
                    checked={state.frontPermission.includes('addBa4')}
                    disabled={true}>
                    新建单位
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'staff')}
                    checked={state.frontPermission.includes('staff')}
                    disabled={true}>
                    人员管理
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'organizational')}
                    checked={state.frontPermission.includes('organizational')}
                    disabled={true}>
                    组织管理
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'deploy')}
                    checked={state.frontPermission.includes('deploy')}
                    disabled={true}>
                    单位设置
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">人员管理</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa5')}
                    checked={state.frontPermission.includes('accessBa5')}
                    disabled={true}>
                    查看人员
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa5')}
                    checked={state.frontPermission.includes('editBa5')}
                    disabled={true}>
                    编辑人员
                  </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.frontPermission.includes('accessBa6')}
                    disabled={true}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa6')}
                    checked={state.frontPermission.includes('editBa6')}
                    disabled={true}>
                    编辑信息
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">企事业单位信息</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa7')}
                    checked={state.frontPermission.includes('accessBa7')}
                    disabled={true}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa7')}
                    checked={state.frontPermission.includes('editBa7')}
                    disabled={true}>
                    编辑信息
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">人员信息</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'accessBa8')}
                    checked={state.frontPermission.includes('accessBa8')}
                    disabled={true}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa8')}
                    checked={state.frontPermission.includes('editBa8')}
                    disabled={true}>
                    编辑信息
                  </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.frontPermission.includes('accessBa9')}
                    disabled={true}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
                    checked={state.frontPermission.includes('editBa9')}
                    disabled={true}>
                    编辑信息
                  </Checkbox>
                </div>
              </div>
            </Card>
          </div>
        </TabPane>
      </Tabs>
      <Affix offsetBottom={10}>
        <Button type="primary" onClick={handleSubmit}>
          提交
        </Button>
      </Affix>
    </div>
  )
}

export default SetPermission