cldV2_console/src/pages/Role/System/index.tsx

import { useModel, useRequest } from 'umi'
import Icon from '@/components/IconPark'
import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } from '@ant-design/pro-form'
import type { FormInstance } from 'antd'
import { message, Table, Tabs } from 'antd'
import React, { useRef, useMemo, useState, useEffect } from 'react'
import RoleMenu from './components/RoleMenu/roleMenu'
import {
  fetchRoleStaffListByRoleId,
  updateRolePermission,
  getRolePermissions
} from '@/services/user/api'
import type { ColumnsType } from 'antd/lib/table'
import ConnectModal from './components/ConnectModal'
import { formatPermission } from '@/utils/utils'

const System = () => {
  const { TabPane } = Tabs
  const formRef = useRef<FormInstance>(null)
  const columns: ColumnsType<API.RoleStaffListItem> = [
    {
      title: '用户',
      dataIndex: 'username',
      width: '15%'
    },
    {
      title: '手机',
      dataIndex: 'phone',
      width: '20%'
    },
    {
      title: '部门',
      dataIndex: 'departmentName',
      width: '20%'
    },
    {
      title: '岗位',
      dataIndex: 'position',
      width: '15%'
    },
    {
      title: '角色',
      dataIndex: 'age',
      width: '20%'
    },
    {
      title: '操作',
      dataIndex: 'opreate',
      width: '20%',
      render: () => (
        <span className="hover:text-hex-e7026e">
          <Icon type="delete" fill="#fd3995" />
        </span>
      )
    }
  ]

  const { initialState } = useModel('@@initialState')
  const menuId = useMemo(() => {
    return initialState?.menuList?.find(item => item.name === '系统管理')?.id
  }, initialState.menuList)

  const [state, setState] = useState({
    id: '',
    roleStaff: [],
    rolePermission: {}
  })
  const onSelect = (id: string) => {
    setState({ ...state, id })
  }

  const { run: tryGetRoleStaffList } = useRequest(
    (id: string) => fetchRoleStaffListByRoleId({ id }),
    {
      manual: true,
      onSuccess: result => {
        setState({ ...state, roleStaff: result })
      }
    }
  )

  const { run: tryGetRolePermissions } = useRequest((id: string) => getRolePermissions({ id }), {
    manual: true,
    onSuccess: (result: API.GetRolePermissionResultModel) => {
      const values = { ...formatPermission('init', result.permission) }
      formRef.current?.setFieldsValue({ ...values })
    }
  })

  useEffect(() => {
    if (state.id) {
      tryGetRoleStaffList(state.id)
      tryGetRolePermissions(state.id)
    }
    return () => {
      formRef.current?.resetFields()
    }
  }, [state.id])

  return (
    <div className="h-full w-full flex flex-row">
      <RoleMenu menuId={menuId} onSelect={onSelect} />
      <div className="w-max-3/4">
        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
          <div className="absolute right-4 top-4 z-100">
            {state.id && (
              <ConnectModal
                title="关联员工"
                dataId={state.id}
                onSelect={() => tryGetRoleStaffList(state.id)}
              />
            )}
          </div>
          <Tabs defaultActiveKey="1" type="card">
            <TabPane tab="员工列表" key="1">
              <Table<API.RoleStaffListItem>
                dataSource={state.roleStaff}
                columns={columns}
                rowKey={row => row.staffId}
              />
            </TabPane>
            <TabPane tab="角色权限" key="2">
              {state.id && (
                <ProForm
                  layout="horizontal"
                  formRef={formRef}
                  onFinish={async values => {
                    const newValues = formatPermission('submit', values)
                    await updateRolePermission({
                      permission: JSON.stringify(newValues),
                      id: state.id
                    })
                    message.success('设置成功')
                  }}>
                  {/* <ProFormSwitch
                  name="showHome"
                  label={
                    <span className="flex items-center">
                      <Icon type="home" className="mr-1" className="flex items-baseline mr-1" />
                      后台首页
                    </span>
                  }
                /> */}

                  <ProFormSwitch
                    name="showSystem"
                    label={
                      <span className="flex items-center">
                        <Icon
                          type="every-user"
                          className="mr-1"
                          className="flex items-baseline mr-1"
                        />
                        角色权限管理
                      </span>
                    }
                  />
                  <ProFormDependency name={['showSystem']}>
                    {({ showSystem }) => (
                      <ProFormCheckbox.Group
                        wrapperCol={{ offset: 1 }}
                        // initialValue={}
                        name="system"
                        options={[
                          { value: 'system', label: '系统管理', disabled: !showSystem },
                          { value: 'customer', label: '客户', disabled: !showSystem }
                          // { value: '3', label: '产品', disabled: !showAuth },
                          // { value: '4', label: '开票合同', disabled: !showAuth },
                          // { value: '5', label: '考勤', disabled: !showAuth },
                          // { value: '6', label: '人资', disabled: !showAuth },
                          // { value: '7', label: '财务费用', disabled: !showAuth }
                        ]}
                      />
                    )}
                  </ProFormDependency>
                  {/* <ProFormSwitch
                  name="showAudit"
                  label={
                    <span className="flex items-center">
                      <Icon
                        type="inspection"
                        className="mr-1"
                        className="flex items-baseline mr-1"
                      />
                      审批流程
                    </span>
                  }
                />
                <ProFormDependency name={['showAudit']}>
                  {({ showAudit }) => (
                    <ProFormCheckbox.Group
                      wrapperCol={{ offset: 1 }}
                      name="audit"
                      options={[
                        { value: '1', label: '流程角色', disabled: !showAudit },
                        { value: '2', label: '开票合同', disabled: !showAudit },
                        { value: '3', label: '财务费用', disabled: !showAudit },
                        { value: '4', label: '人资管理', disabled: !showAudit },
                        { value: '5', label: '考勤', disabled: !showAudit }
                      ]}
                    />
                  )}
                </ProFormDependency>
                <ProFormSwitch
                  name="reset"
                  label={
                    <span className="flex items-center">
                      <Icon
                        type="association"
                        className="mr-1"
                        className="flex items-baseline mr-1"
                      />
                      业务参数
                    </span>
                  }
                />
                <ProFormDependency name={['reset']}>
                  {({ reset }) => (
                    <ProFormCheckbox.Group
                      wrapperCol={{ offset: 1 }}
                      name="audit"
                      options={[
                        { value: '1', label: '客户', disabled: !reset },
                        { value: '2', label: '产品', disabled: !reset }
                      ]}
                    />
                  )}
                </ProFormDependency> */}
                </ProForm>
              )}
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  )
}

export default System