tjdify/web/app/components/header/account-setting/dept-page/index.tsx

'use client'
import { useState } from 'react'
import useSWR from 'swr'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
import DetailModal from './detail-modal'
import UserModal from './user-modal'
import { useContext } from 'use-context-selector'
import { RiAddLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { delDept, fetchDepts } from '@/service/common'
import I18n from '@/context/i18n'
import { useAppContext } from '@/context/app-context'
import LogoEmbeddedChatHeader from '@/app/components/base/logo/logo-embedded-chat-header'
import { useProviderContext } from '@/context/provider-context'
import { Plan } from '@/app/components/billing/type'
import Button from '@/app/components/base/button'
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { NUM_INFINITE } from '@/app/components/billing/config'
import { LanguagesSupported } from '@/i18n/language'
import cn from '@/utils/classnames'
import Confirm from '@/app/components/base/confirm'
import useTimestamp from '@/hooks/use-timestamp'
import { Column as AntdColumn, Space as AntdSpace, Table as AntdTable } from 'antd'
dayjs.extend(relativeTime)

const DeptsPage = () => {
  const { t } = useTranslation()
  const { locale } = useContext(I18n)
  const { formatTime } = useTimestamp()
  const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
  const { data, mutate }: any = useSWR(
    {
      url: '/depts',
      params: {
      },
    },
    fetchDepts,
  )
  const [detailModalVisible, setDetailModalVisible] = useState(false)
  const [userModalVisible, setUserModalVisible] = useState(false)
  const [transfer, setTransfer] = useState<any>({
    mode: 'add',
    row: null,
  })
  const deptList = data?.data || []
  const { plan, enableBilling } = useProviderContext()
  const isNotUnlimitedMemberPlan = enableBilling && plan.type !== Plan.team && plan.type !== Plan.enterprise
  const isMemberFull = enableBilling && isNotUnlimitedMemberPlan && deptList.length >= plan.total.teamMembers
  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
  const [row, setRow] = useState<any>({})
  const handleDel = async () => {
    try {
      await delDept({
        url: `/depts/${row.dept_id}`,
        body: {},
      })
      setShowConfirmDelete(false)
      mutate()
    }
    catch (e) { }
  }
  return (
    <>
      <div className='flex flex-col'>
        <div className='mb-4 flex items-center gap-3 rounded-xl border-l-[0.5px] border-t-[0.5px] border-divider-subtle bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5'>
          <LogoEmbeddedChatHeader className='!h-12 !w-12' />
          <div className='grow'>
            <div className='system-md-semibold text-text-secondary'>{currentWorkspace?.name}</div>
            {enableBilling && (
              <div className='system-xs-medium mt-1 text-text-tertiary'>
                {isNotUnlimitedMemberPlan
                  ? (
                    <div className='flex space-x-1'>
                      <div>{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && deptList.length > 1 && 's'}</div>
                      <div className=''>{deptList.length}</div>
                      <div>/</div>
                      <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
                    </div>
                  )
                  : (
                    <div className='flex space-x-1'>
                      <div>{deptList.length}</div>
                      <div>{t('billing.plansCommon.memberAfter')}{locale !== LanguagesSupported[1] && deptList.length > 1 && 's'}</div>
                    </div>
                  )}
              </div>
            )}
          </div>
          {isMemberFull && (
            <UpgradeBtn className='mr-2' loc='member-invite' />
          )}
          <Button variant='primary' className={cn('shrink-0')} disabled={!isCurrentWorkspaceManager || isMemberFull}
            onClick={() => {
              setTransfer({ mode: 'add', row: null })
              setDetailModalVisible(true)
            }}>
            <RiAddLine className='mr-1 h-4 w-4' />
            新增
          </Button>
        </div>
        <div className='overflow-visible lg:overflow-visible'>
          <AntdTable
            rowKey="dept_id"
            dataSource={deptList}
            pagination={false}
          >
            <AntdColumn title="部门名称" dataIndex="dept_name" key="dept_name"/>
            {/* <AntdColumn title="关联用户数量" dataIndex="relation" key="relation" align="center" width={120}/> */}
            <AntdColumn title="操作" key="action" align="center" width={100} render={(_: any, record: any) => (
              <AntdSpace size="middle">
                {!(record.children?.length > 0) && (
                  <Button variant='ghost-accent' size='small' className={cn('shrink-0')}
                    onClick={() => {
                      setTransfer({
                        mode: 'user',
                        row: JSON.parse(JSON.stringify(record)),
                      })
                      setUserModalVisible(true)
                    }}>
                    关联用户
                  </Button>
                )}
                <Button variant='ghost-accent' size='small' className={cn('shrink-0')} disabled={!isCurrentWorkspaceManager || isMemberFull}
                  onClick={() => {
                    setTransfer({
                      mode: 'edit',
                      row: JSON.parse(JSON.stringify(record)),
                    })
                    setDetailModalVisible(true)
                  }}>
                  编辑
                </Button>
                {!(record.children?.length > 0) && !(record.relation > 0) && (
                  <Button variant='ghost' size='small' className={cn('shrink-0 text-red-600')} disabled={!isCurrentWorkspaceManager || isMemberFull} onClick={() => {
                    setRow(record)
                    setShowConfirmDelete(true)
                  }}>
                    刪除
                  </Button>
                )}
              </AntdSpace>
            )}/>
          </AntdTable>
        </div>
      </div>
      {
        detailModalVisible && (
          <DetailModal
            transfer={transfer}
            onCancel={() => setDetailModalVisible(false)}
            onSend={() => {
              mutate()
            }}
          />
        )
      }
      {
        userModalVisible && (
          <UserModal
            transfer={transfer}
            onCancel={() => {
              setUserModalVisible(false)
              mutate()
            }}
            onSend={() => mutate()}
          />
        )
      }
      {showConfirmDelete && (
        <Confirm
          title="删除确认"
          content={`请确认是否删除${row.dept_name}？`}
          isShow={showConfirmDelete}
          onConfirm={handleDel}
          onCancel={() => setShowConfirmDelete(false)}
        />
      )}
    </>
  )
}

export default DeptsPage