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

import { useState } from 'react'
import { useRequest } from '@umijs/max'
import { RoleType } from '../RoleLeftMenu'
import { Card, Checkbox, Button, message, Spin, Affix } from 'antd'
import { queryRoleDetailByID, setRolePermission } from '@/services/permission'
import { BackstagePermission } from '@/enums/access'

import './index.less'

type PermTabsProps = {
  currentPermData: {
    ID: string
    roleType: RoleType
  }
}
const backstagePermissionArray = Object.values(BackstagePermission)
// 过滤权限枚举
const filterPermission = (permission: string[]) => {
  if (!Array.isArray(permission)) return []
  return permission.filter(item => backstagePermissionArray?.includes(item))
}

const PermTabs: React.FC<PermTabsProps> = ({ currentPermData: { ID } }) => {
  const [permission, setPermission] = useState([])

  const { loading } = useRequest(() => queryRoleDetailByID({ ID }), {
    refreshDeps: [ID],
    onSuccess: ({ backstagePermission = [] } = {}) => {
      setPermission(filterPermission(backstagePermission))
    },
    onError: e => console.log(e)
  })

  const { run: trySetRolePermission, loading: submitStauts } = useRequest(
    (params: API.RolePermissionParams) => setRolePermission(params),
    {
      manual: true,
      onSuccess: () => {
        message.success('设置成功')
      }
    }
  )
  const handleBackOnchange = (checked: boolean, role: string) => {
    if (checked) {
      setPermission([...permission, role])
    } else {
      setPermission(permission.filter(item => item !== role))
    }
  }

  const handleSubmit = () => {
    const params = {
      ID,
      frontPermission: filterPermission(permission)
    }
    trySetRolePermission(params)
  }

  return (
    <>
      <div style={{ height: 'calc(100vh - 250px)' }} className="overflow-y-auto">
        <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, BackstagePermission.VIEW_SUBJECT_MAINSTAY)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_SUBJECT_MAINSTAY)}>
                    启用
                  </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, BackstagePermission.VIEW_PROJECT_MANAGEMENT)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_PROJECT_MANAGEMENT)}>
                    查看项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'addBa1')}
                    checked={permission.includes('updatePsw')}>
                    新建项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa1')}
                    checked={permission.includes('updatePsw')}>
                    编辑项目
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'bindBa1')}
                    checked={permission.includes('updatePsw')}>
                    绑定角色
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'deployBa1')}
                    checked={permission.includes('updatePsw')}>
                    流程配置
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">审批角色</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_APPROVAL_ROLE)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_APPROVAL_ROLE)}>
                    查看角色
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.ADD_APPROVAL_ROLE)
                    }
                    checked={permission.includes(BackstagePermission.ADD_APPROVAL_ROLE)}>
                    新建角色
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_APPROVAL_ROLE)
                    }
                    checked={permission.includes(BackstagePermission.EDIT_APPROVAL_ROLE)}>
                    编辑角色
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">审批流程模板</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_AUDIT_TEMPLATE)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_AUDIT_TEMPLATE)}>
                    查看流程
                  </Checkbox>
                  {/* <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'addBa2')}
                    checked={permission.includes('updatePsw')}>
                    新建流程
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa2')}
                    checked={permission.includes('updatePsw')}>
                    编辑流程
                  </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, BackstagePermission.VIEW_INSTITUTION)}
                    checked={permission.includes(BackstagePermission.VIEW_INSTITUTION)}>
                    查看单位
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.ADD_INSTITUTION)}
                    checked={permission.includes(BackstagePermission.ADD_INSTITUTION)}>
                    新建单位
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_INSTITUTION)}
                    checked={permission.includes(BackstagePermission.EDIT_INSTITUTION)}>
                    编辑单位
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_STAFF_WITH_IN)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_STAFF_WITH_IN)}>
                    人员管理
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_ORGANIZATION)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_ORGANIZATION)}>
                    组织管理
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION_SETTING)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_INSTITUTION_SETTING)}>
                    单位设置
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">人员管理</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INSTITUTION_STAFF)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_STAFF_WITH_OUT)}>
                    查看人员
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.ADD_INSTITUTION_STAFF)
                    }
                    checked={permission.includes(BackstagePermission.ADD_INSTITUTION_STAFF)}>
                    新增人员
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_INSTITUTION_STAFF)
                    }
                    checked={permission.includes(BackstagePermission.EDIT_INSTITUTION_STAFF)}>
                    编辑人员
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">限制登录</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_ILLEGAL_USER)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_ILLEGAL_USER)}>
                    查看人员
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_ILLEGAL_USER)
                    }
                    checked={permission.includes(BackstagePermission.EDIT_ILLEGAL_USER)}>
                    编辑人员
                  </Checkbox>
                </div>
              </div>
            </Card>
          </div>
          <div className="shadow-md mb-4">
            <Card size="small" type="inner" title="业务审批设置">
              <div>
                <h4 className="pt-3">业务编号配置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_RULE_CODE)}
                    checked={permission.includes(BackstagePermission.VIEW_RULE_CODE)}>
                    查看编号规则
                  </Checkbox>
                </div>
              </div>
              {/* <div>
                  <h4>业务管理</h4>
                  <div className="my-2">
                    <Checkbox
                      onChange={e => handleBackOnchange(e.target.checked, 'viewBusiness')}
                      checked={permission.includes('viewBusiness')}>
                      查看信息
                    </Checkbox>
                  </div>
                </div> */}
              <div>
                <h4 className="pt-3">流程用户配置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_PROCESS_USER)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_PROCESS_USER)}>
                    查看流程用户
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">资料清单配置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_INVENTORY_TEMPLATE)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_INVENTORY_TEMPLATE)}>
                    查看资料清单模板
                  </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, BackstagePermission.VIEW_BASE_SCHEMA)}
                    checked={permission.includes(BackstagePermission.VIEW_BASE_SCHEMA)}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_BASE_SCHEMA)}
                    checked={permission.includes(BackstagePermission.EDIT_BASE_SCHEMA)}>
                    编辑信息
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">数据源设置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.VIEW_DS_LIST)}
                    checked={permission.includes(BackstagePermission.VIEW_DS_LIST)}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, BackstagePermission.EDIT_DS_LIST)}
                    checked={permission.includes(BackstagePermission.EDIT_DS_LIST)}>
                    编辑信息
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4 className="pt-3">预算业务表单设置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BUDGET_SCHEMA)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_BUDGET_SCHEMA)}>
                    查看信息
                  </Checkbox>
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.EDIT_BUDGET_SCHEMA)
                    }
                    checked={permission.includes(BackstagePermission.EDIT_BUDGET_SCHEMA)}>
                    编辑信息
                  </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, BackstagePermission.VIEW_PERMISSION_ROLE)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_PERMISSION_ROLE)}>
                    查看信息
                  </Checkbox>
                </div>
              </div>
              <div>
                <h4>后台功能角色设置</h4>
                <div className="my-2">
                  <Checkbox
                    onChange={e =>
                      handleBackOnchange(e.target.checked, BackstagePermission.VIEW_BACK_PERMISSION_ROLE)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_BACK_PERMISSION_ROLE)}>
                    查看信息
                  </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, BackstagePermission.VIEW_SYSTEM_ADMIN_SETTING)
                    }
                    checked={permission.includes(BackstagePermission.VIEW_SYSTEM_ADMIN_SETTING)}>
                    查看信息
                  </Checkbox>
                  {/* <Checkbox
                    onChange={e => handleBackOnchange(e.target.checked, 'editBa9')}
                    checked={permission.includes('updatePsw')}
                    >
                    编辑信息
                  </Checkbox> */}
                </div>
              </div>
            </Card>
          </div>
        </Spin>
      </div>
      <Affix offsetBottom={10}>
        <Button type="primary" onClick={handleSubmit} loading={submitStauts}>
          提交
        </Button>
      </Affix>
    </>
  )
}

export default PermTabs