cldV2react/src/pages/Product/Lock/Lockstore/index.jsx

import React, { useEffect, useState, useRef } from 'react'
import { Tag, Select, Tooltip, Input, DatePicker, Button } from 'antd'
import ProTable from '@ant-design/pro-table'
import consts from '@/consts'
import { useModel, connect } from 'umi'
import { queryLock } from '@/services/lock'
import LocksDetail from '@/pages/Product/Lock/LockStore/components/LocksDetail'
import ContactDetail from '@/pages/Customer/Client/components/ClientDetail'
import SoftwareDetail from '@/pages/Product/Lock/LockStore/components/SoftwareDetail'
import { useModal } from '@/components/Modal'
import { useTableScroll } from '@/hooks/useAutoTable'
import CompanyDetail from '@/pages/Customer/Company/components/CompanyDetail'
import { refactorSortField } from '@/utils/utils'
import ReceiveLock from './components/ReceiveLock'
import ReceiveNewLock from './components/ReceiveNewLock'
import PermSelect from '@/pages/Customer/Company/components/PermSelect'
import { PermDataTypeEunm } from '@/pages/Customer/Company/components/PermSelect'

// 渲染产品标签
export const ProductLabel = ({ data }) => {
  if (!data) return <></>
  let newData = data
  if (!Array.isArray(data)) {
    newData = data.split('+')
  }
  return (
    <div>
      {newData.map((item, index) => (
        <span key={index} className="mr-5px">
          <Tag color="#886ab5">{item}</Tag>
        </span>
      ))}
    </div>
  )
}

const longleStatusNum = {
  1: {
    text: '生成'
  },
  2: {
    text: '接收'
  },
  3: {
    text: '借出'
  },
  4: {
    text: '销售'
  },
  5: {
    text: '升级'
  },
  6: {
    text: '更换'
  },
  7: {
    text: '收回'
  },
  8: {
    text: '备注'
  },
  9: {
    text: '赠送'
  }
}

const LockStore = ({ prodList = [], dispatch, shouldUpdate }) => {
  const tRef = useRef()
  const [selectKeys] = useState([])
  const { toggleDrawer, setDrawerProps, toggleModal, setModalProps } = useModal()
  const showReceiveLockModal = () => {
    setModalProps({
      width: '60vw',
      modalRender: () => <ReceiveLock />,
      onCancel: () => toggleModal()
    })
    toggleModal()
  }
  const showReceiveNewLockModal = () => {
    setModalProps({
      width: '60vw',
      modalRender: () => <ReceiveNewLock />,
      onCancel: () => toggleModal()
    })
    toggleModal()
  }
  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
  const [state, setState] = useState({
    params: { dataPermission: 'oneself', staffIds: null },
    data: [],
    totalOld: 0, // 待接收锁总数
    totalNew: 0,
    id: ''
  })

  // 获取软件锁产品列表
  function fetchSoftProducts() {
    dispatch({
      type: 'lock/fetchProdList'
    })
  }

  const handleSearch = value => {
    setState({ ...state, params: { ...state.params, search: value } })
  }

  // 刷新
  // const refreshData = () => {
  //   tRef.current.reload()
  // }

  useEffect(() => {
    if (shouldUpdate) {
      tRef.current.reload()
    }
  }, [shouldUpdate])

  // 展示drawer
  const showDrawer = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <LocksDetail id={id} orderIds={state.orderIds} />
    })
    toggleDrawer()
  }
  // 展示DrawerClient
  const showDrawerClient = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <ContactDetail dataId={id} />
    })
    toggleDrawer()
  }
  // 展示DrawerResponsible
  const showDrawerResponsible = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <SoftwareDetail dataId={id} />
    })
    toggleDrawer()
  }

  // 展示客户详情抽屉
  const showCompanyDrawer = id => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <CompanyDetail dataId={id} />
    })
    toggleDrawer()
  }

  const columns = [
    {
      title: '锁号',
      dataIndex: 'keyNum',
      width: 150,
      render: (keyNum, record) => (
        <span
          onClick={() => showDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {keyNum}
        </span>
      )
    },
    {
      title: '产品',
      dataIndex: 'product',
      width: 200,
      render: text => <ProductLabel data={text} />
    },
    {
      title: '出库时间',
      dataIndex: 'makeDay',
      valueType: 'date',
      sorter: true,
      width: 150
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 150,
      filters: true,
      onFilter: true,
      valueType: 'select',
      valueEnum: longleStatusNum,
      render: (_, { status }) => {
        return <>{longleStatusNum[status]?.text}</>
      }
    },
    {
      title: '责任人',
      dataIndex: 'responsible',
      width: 150,
      render: (text, record) => (
        <span
          onClick={() => showDrawerResponsible(record.responsibleId)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {text}
        </span>
      )
    },
    {
      title: '客户',
      dataIndex: 'customerName',
      render: (text, record) => (
        <span
          onClick={() => showCompanyDrawer(record.customerId)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {text}
        </span>
      )
    },
    {
      title: '联系人',
      dataIndex: 'client',
      width: 150,
      render: (text, record) => (
        <span
          onClick={() => showDrawerClient(record.clientId)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {text}
        </span>
      )
    },
    {
      title: '销售/借出/赠送时间',
      dataIndex: 'allotedTime',
      width: 160
    },
    {
      title: '办事处',
      dataIndex: 'category',
      width: 150
    },
    {
      title: '部门',
      dataIndex: 'departmentName',
      width: 150
    }
  ]
  const { getScrollRef, redoHeight } = useTableScroll(columns, selectKeys)

  // 处理权限Select下拉组件OnChange事件
  const handlePermChange = ({ staffIds = [], dataPermission }) => {
    if (staffIds?.length) {
      setState({ ...state, params: { ...state.params, staffIds, dataPermission: null } })
      return
    }
    setState({ ...state, params: { ...state.params, staffIds: null, dataPermission } })
  }

  return (
    <ProTable
      rowKey={record => record.id}
      search={false}
      bordered
      actionRef={tRef}
      params={state.params}
      columns={columns}
      onLoadingChange={loadingStatus => {
        loadingStatus && redoHeight()
      }}
      request={async (params, sort, filter) => {
        const srotOrder = refactorSortField(sort)
        const {
          code = -1,
          data: { longle = [], total = 0, totalOld = 0, totalNew = 0 } = {
            longle: [],
            total: 0,
            totalOld: 0,
            totalNew: 0
          }
        } = await queryLock({ ...params, ...srotOrder, ...filter })
        setState({ ...state, totalOld, totalNew })
        return {
          data: longle,
          success: code === consts.RET_CODE.SUCCESS,
          total
        }
      }}
      scroll={getScrollRef}
      headerTitle={
        <>
          <PermSelect onConfirm={handlePermChange} dataType={PermDataTypeEunm.PRODUCT} />
          <Button type="primary" className="ml-4" onClick={() => showReceiveLockModal()}>
            待接收锁 ({state.totalOld})
          </Button>
          <Button type="primary" className="ml-4" onClick={() => showReceiveNewLockModal()}>
            待接收新锁 ({state.totalNew})
          </Button>
        </>
      }
      toolbar={{
        search: (
          <Tooltip placement="bottom" title="输入软件锁号">
            <Input.Search
              style={{ width: '300px' }}
              allowClear={true}
              placeholder={`在${
                permData[PermDataTypeEunm.PRODUCT]?.find(
                  item => item.value === state.params.dataPermission
                )?.label || '自定义'
              }下搜索`}
              onSearch={handleSearch}
            />
          </Tooltip>
        ),
        actions: [
          <DatePicker
            key="date"
            bordered={false}
            placeholder="请选择出库时间"
            onChange={e =>
              setState({
                ...state,
                params: { ...state.params, makeDay: e ? e.format('YYYY-MM-DD') : '' }
              })
            }
          />,
          <Select
            key="select"
            bordered={false}
            style={{ width: '150px' }}
            labelInValue={true}
            allowClear={true}
            placeholder="请选择产品"
            onDropdownVisibleChange={async e => {
              e && !prodList?.length && (await fetchSoftProducts())
            }}
            options={prodList.map(item => ({ value: item.title }))}
            onChange={e =>
              setState({ ...state, params: { ...state.params, product: e?.value || '' } })
            }
          />
        ]
      }}
    />
  )
}

export default connect(({ lock, refresh }) => ({
  prodList: lock.prodList,
  shouldUpdate: refresh.longle
}))(LockStore)