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

import { useModel, useRequest } from 'umi'
import { Delete } from '@icon-park/react'
import ProForm, { ProFormDependency, ProFormSwitch, ProFormCheckbox } from '@ant-design/pro-form'
import type { FormInstance } from 'antd'
import { message, Table, Tabs, Radio, Space, Popconfirm } from 'antd'
import React, { useRef, useMemo, useState, useEffect } from 'react'

import {
  fetchRoleStaffListByRoleId,
  updateRolePermission,
  getRolePermissions,
  updatePermDataByRoleId,
  deleteStaff
} from '@/services/user/api'
import type { ColumnsType } from 'antd/lib/table'
import { formatPermission } from '@/utils/utils'
import RoleMenu from '../System/components/RoleMenu'
import ConnectModal from '../System/components/ConnectModal'
import FormItem from 'antd/lib/form/FormItem'
import { permData } from '../Customer'
import { PieChartOutlined } from '@ant-design/icons'

const Statistic = () => {
  const { TabPane } = Tabs
  const formRef = useRef<FormInstance>(null)
  const formRef2 = useRef<FormInstance>(null)

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

  const [state, setState] = useState({
    id: '',
    roleStaff: [],
    rolePermission: {},
    dataPermission: {},
    activeKey: ''
  })
  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 = {
        client: [],
        company: [],
        business: [],
        ...formatPermission('init', result.permission)
      }

      if (
        values['showSoftware-usage'] ||
        values['showInvoice-aggregate'] ||
        values['showInvoice-trends'] ||
        values['showInvoice-receivables']
      ) {
        values.showProduct = true
        delete values['showSoftware-usage']
        delete values['showInvoice-aggregate']
        delete values['showInvoice-trends']
        delete values['showInvoice-receivables']
      }

      if (values['showCustomer-additions']) {
        values.showCustomer = true
        delete values['showCustomer-additions']
      }
      setState({
        ...state,
        rolePermission: values,
        dataPermission: result.dataPermission ? JSON.parse(result.dataPermission) : null
      })

      formRef.current?.setFieldsValue({ ...values })
      formRef2.current?.setFieldsValue(
        result.dataPermission ? JSON.parse(result.dataPermission) : null
      )
    }
  })

  const { run: tryDeleteStaff } = useRequest(
    (params: API.DeleteStaff) => {
      return deleteStaff(params)
    },
    {
      manual: true,
      onSuccess: () => {
        message.success('移除员工成功')
        tryGetRoleStaffList(state.id)
      }
    }
  )

  useEffect(() => {
    if (state.id) {
      tryGetRoleStaffList(state.id)
      tryGetRolePermissions(state.id)
    }
    if (state.activeKey === '2') {
      formRef.current?.setFieldsValue({ ...state.rolePermission })
    }
    if (state.activeKey === '3') {
      formRef2.current?.setFieldsValue({ ...state.dataPermission })
    }
  }, [state.id, state.activeKey])

  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: (_, record) => (
        <Popconfirm
          title="确认删除吗？"
          okText="确认"
          cancelText="取消"
          onConfirm={() => tryDeleteStaff({ id: state.id, staffId: record.staffId })}>
          <div className="pl-2 text-hex-fd3995 cursor-pointer hover:text-hex-e7026e">
            <Delete />
          </div>
        </Popconfirm>
      )
    }
  ]

  return (
    <div className="h-full w-full flex flex-row">
      <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
      <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}
                postUrl="/role/staff/add"
                closeAfterSelect={false}
                onReload={() => tryGetRoleStaffList(state.id)}
              />
            )}
          </div>
          <Tabs
            defaultActiveKey="1"
            type="card"
            onChange={key => setState({ ...state, activeKey: key })}>
            <TabPane tab="员工列表" key="1">
              <Table<API.RoleStaffListItem>
                dataSource={state.roleStaff}
                columns={columns}
                rowKey={row => row.staffId}
              />
            </TabPane>
            <TabPane tab="角色权限" key="2">
              <div className="ml-4">
                {state.id && (
                  <ProForm
                    formRef={formRef}
                    layout="horizontal"
                    onFinish={async values => {
                      const newValues = formatPermission('submit', values)
                      await updateRolePermission({
                        permission: JSON.stringify(newValues),
                        id: state.id
                      })
                      message.success('设置成功')
                    }}>
                    <ProFormSwitch
                      fieldProps={{
                        onChange(checked) {
                          if (!checked) {
                            formRef.current?.setFieldsValue({
                              'software-usage': [],
                              'invoice-aggregate': [],
                              'invoice-trends': [],
                              'customer-additions': [],
                              'invoice-receivables': []
                            })
                          }
                        }
                      }}
                      name="showProduct"
                      label={
                        <span className="flex items-center">
                          <PieChartOutlined theme="outline" className="flex items-baseline mr-1" />
                          产品销售
                        </span>
                      }
                    />
                    <div className="ml-25px">
                      <ProFormDependency name={['showProduct']}>
                        {({ showProduct }) => (
                          <>
                            <ProFormCheckbox.Group
                              name="software-usage"
                              label="软件锁用量"
                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
                            />
                            <ProFormCheckbox.Group
                              name="invoice-aggregate"
                              label="发票收款入账汇总"
                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
                            />
                            <ProFormCheckbox.Group
                              name="invoice-trends"
                              label="发票收款入账趋势"
                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
                            />
                            <ProFormCheckbox.Group
                              name="invoice-receivables"
                              label="应收款统计"
                              options={[{ value: 'access', label: '查看', disabled: !showProduct }]}
                            />
                          </>
                        )}
                      </ProFormDependency>
                    </div>
                    <ProFormSwitch
                      fieldProps={{
                        onChange(checked) {
                          if (!checked) {
                            formRef.current?.setFieldsValue({
                              'customer-additions': []
                            })
                          }
                        }
                      }}
                      name="showCustomer"
                      label={
                        <span className="flex items-center">
                          <PieChartOutlined theme="outline" className="flex items-baseline mr-1" />
                          客户数据
                        </span>
                      }
                    />
                    <div className="ml-25px">
                      <ProFormDependency name={['showCustomer']}>
                        {({ showCustomer }) => (
                          <ProFormCheckbox.Group
                            name="customer-additions"
                            label="客户新增"
                            options={[{ value: 'access', label: '查看', disabled: !showCustomer }]}
                          />
                        )}
                      </ProFormDependency>
                    </div>
                  </ProForm>
                )}
              </div>
            </TabPane>
            <TabPane tab="数据权限" key="3">
              {state.id && (
                <ProForm
                  formRef={formRef2}
                  layout="vertical"
                  onFinish={async values => {
                    try {
                      await updatePermDataByRoleId({
                        id: state.id,
                        dataPermission: JSON.stringify(values)
                      })
                    } catch (error) {
                      return message.error(error.toString())
                    }
                    message.success('设置成功')
                    return true
                  }}>
                  <FormItem name="access" label="产品销售模块可见" required>
                    <Radio.Group>
                      <Space direction="vertical">
                        {permData.map(item => (
                          <Radio key={item.value} value={item.value}>
                            {item.label}
                          </Radio>
                        ))}
                      </Space>
                    </Radio.Group>
                  </FormItem>
                </ProForm>
              )}
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  )
}

export default Statistic