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

import { useModel, useRequest } from '@umijs/max'
import { Delete, DataLock } from '@icon-park/react'
import ProForm, { ProFormCheckbox, ProFormDependency, ProFormSwitch } 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 styles from '@/pages/Role/index.less'
import classNames from 'classnames'
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 { PageContainer } from '@ant-design/pro-layout'

const Product = () => {
  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 = {
        building: [],
        curing: [],
        highway: [],
        gs: [],
        personal: [],
        enterprise: [],
        ...formatPermission('init', result.permission)
      }
      // 特殊处理云版switch
      // if (values.showBuilding || values.showCuring || values.showHighway || values.showGs) {
      //   values.showCloud = true
      //   delete values.showBuilding
      //   delete values.showCuring
      //   delete values.showHighway
      //   delete values.showGs
      // }

      // 特殊处理大司空2.0
      // if (values.showPersonal || values.showEnterprise) {
      //   values.showRoad = true
      //   delete values.showPersonal
      //   delete values.showEnterprise
      // }

      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 (
    <PageContainer title={false} breadcrumb={false}>
      <div className="h-full w-full flex flex-row">
        <RoleMenu menuId={menuId} onSelect={onSelect} itemCount={state.roleStaff?.length || 0} />
        <div className={classNames('w-max-3/4 w-3/4', styles.formItemWrap)}>
          <div className="ml-8 bg-white p-4 shadow-md  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({ lockstore: [] })
                            }
                          }
                        }}
                        name="showLockstore"
                        label={
                          <span className="flex items-center">
                            <DataLock theme="outline" className="flex items-baseline mr-1" />
                            软件锁-公共锁库
                          </span>
                        }
                      />
                      <ProFormDependency name={['showLockstore']}>
                        {({ showLockstore }) => (
                          <ProFormCheckbox.Group
                            wrapperCol={{ offset: 1 }}
                            name="lockstore"
                            options={[
                              { value: 'access', label: '查看', disabled: !showLockstore },
                              {
                                value: 'delete_record',
                                label: '删除记录',
                                disabled: !showLockstore
                              }
                            ]}
                          />
                        )}
                      </ProFormDependency>
                      <div className="text-lg font-bold">云版管理</div>
                      <div className="ml-6">
                        <ProFormSwitch
                          fieldProps={{
                            onChange(checked) {
                              if (!checked) {
                                formRef.current?.setFieldsValue({
                                  building: []
                                })
                              }
                            }
                          }}
                          name="showBuilding"
                          label={<span className="flex items-center">大司空云计价</span>}
                        />
                        <div>
                          <ProFormDependency name={['showBuilding']}>
                            {({ showBuilding }) => (
                              <ProFormCheckbox.Group
                                wrapperCol={{ offset: 1 }}
                                name="building"
                                options={[{ value: 'access', label: '查看', disabled: !showBuilding }]}
                              />
                            )}
                          </ProFormDependency>
                        </div>
                        <ProFormSwitch
                          fieldProps={{
                            onChange(checked) {
                              if (!checked) {
                                formRef.current?.setFieldsValue({
                                  curing: []
                                })
                              }
                            }
                          }}
                          name="showCuring"
                          label={<span className="flex items-center">养护云造价</span>}
                        />
                        <div>
                          <ProFormDependency name={['showCuring']}>
                            {({ showCuring }) => (
                              <ProFormCheckbox.Group
                                wrapperCol={{ offset: 1 }}
                                name="curing"
                                options={[{ value: 'access', label: '查看', disabled: !showCuring }]}
                              />
                            )}
                          </ProFormDependency>
                        </div>
                        <ProFormSwitch
                          fieldProps={{
                            onChange(checked) {
                              if (!checked) {
                                formRef.current?.setFieldsValue({
                                  highway: []
                                })
                              }
                            }
                          }}
                          name="showHighway"
                          label={<span className="flex items-center">公路云计价</span>}
                        />
                        <div>
                          <ProFormDependency name={['showHighway']}>
                            {({ showHighway }) => (
                              <ProFormCheckbox.Group
                                wrapperCol={{ offset: 1 }}
                                name="highway"
                                options={[{ value: 'access', label: '查看', disabled: !showHighway }]}
                              />
                            )}
                          </ProFormDependency>
                        </div>
                        <ProFormSwitch
                          fieldProps={{
                            onChange(checked) {
                              if (!checked) {
                                formRef.current?.setFieldsValue({
                                  gs: []
                                })
                              }
                            }
                          }}
                          name="showGs"
                          label={<span className="flex items-center">大司空概算</span>}
                        />
                        <div>
                          <ProFormDependency name={['showGs']}>
                            {({ showGs }) => (
                              <>
                                <ProFormCheckbox.Group
                                  wrapperCol={{ offset: 1 }}
                                  name="gs"
                                  options={[{ value: 'access', label: '查看', disabled: !showGs }]}
                                />
                              </>
                            )}
                          </ProFormDependency>
                        </div>
                      </div>
                      <div className="text-lg font-bold">大司空2.0</div>
                      <div className="ml-6">
                        <ProFormSwitch
                          fieldProps={{
                            onChange(checked) {
                              if (!checked) {
                                formRef.current?.setFieldsValue({ personal: [] })
                              }
                            }
                          }}
                          name="showPersonal"
                          label={<span className="flex items-center">个人版</span>}
                        />
                        <div>
                          <ProFormDependency name={['showPersonal']}>
                            {({ showPersonal }) => (
                              <ProFormCheckbox.Group
                                wrapperCol={{ offset: 1 }}
                                name="personal"
                                options={[{ value: 'access', label: '查看', disabled: !showPersonal }]}
                              />
                            )}
                          </ProFormDependency>
                        </div>
                        <ProFormSwitch
                          fieldProps={{
                            onChange(checked) {
                              if (!checked) {
                                formRef.current?.setFieldsValue({ enterprise: [] })
                              }
                            }
                          }}
                          name="showEnterprise"
                          label={<span className="flex items-center">企业版</span>}
                        />
                        <div>
                          <ProFormDependency name={['showEnterprise']}>
                            {({ showEnterprise }) => (
                              <>
                                <ProFormCheckbox.Group
                                  wrapperCol={{ offset: 1 }}
                                  name="enterprise"
                                  options={[
                                    { value: 'access', label: '查看', disabled: !showEnterprise },
                                    { value: 'add', label: '添加企业', disabled: !showEnterprise }
                                  ]}
                                />
                              </>
                            )}
                          </ProFormDependency>
                        </div>
                      </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>
    </PageContainer>
  )
}

export default Product