cldV2react/src/pages/Product/Lock/LockStore/components/ReceiveLock.jsx

import { Button, Input, message, Modal } from 'antd'
import React, { useState, useRef } from 'react'
import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
import consts from '@/basic/consts'
import { apiReceiveOldLock, queryOldLockList } from '@/services/product'
import { ProductLabel } from '../index'
import ProTable from '@ant-design/pro-table'

const ReceiveLock = ({ refresh, ...resetModalProps }) => {
  const tRef = useRef()
  const [tParams, setParams] = useState({
    search: null
  })
  const receiveLongle = async (name, id) => {
    const { code = -1 } = await apiReceiveOldLock({ id })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success(`锁(${name})接收成功`)
      tRef.current?.reload()
      refresh()
    }
  }

  const columns = [
    {
      dataIndex: 'keyNum',
      title: '锁号'
    },
    {
      dataIndex: 'category',
      title: '办事处'
    },
    {
      dataIndex: 'product',
      title: '产品',
      width: '60%',
      render: text => <ProductLabel data={text} />
    },
    {
      dataIndex: 'opreate',
      title: '操作',
      render: (_, record) => (
        <Button size="small" onClick={() => receiveLongle(record.keyNum, record.id)}>
          接收
        </Button>
      )
    }
  ]

  const handleOnSearch = val => {
    setParams({ ...tParams, search: val })
  }
  return (
    <Modal
      width="50vw"
      {...resetModalProps}
      bodyStyle={{ padding: '24px 24px 0' }}
      getContainer={() => document.getElementById('root')}
      title={
        <div className="flex items-center justify-between">
          <span>
            以下锁为系统升级前未接收的锁，请及时接收。
            {/* <Tooltip title="新系统生成的锁，将在列表中按“本部门”展示。">
              <Attention theme="outline" fill="#333" />
            </Tooltip> */}
          </span>
          <Input.Search
            style={{ width: '300px', marginRight: '50px' }}
            placeholder="输入锁号/产品进行搜索"
            allowClear
            onSearch={handleOnSearch}
          />
        </div>
      }>
      <div className={styles.modalContent}>
        <ProTable
          rowKey={record => record.id}
          columns={columns}
          actionRef={tRef}
          params={tParams}
          toolBarRender={false}
          search={false}
          bordered={true}
          scroll={{ y: 460 }}
          request={async params => {
            const { data: { longle, total } = { longle: [], total: 0 }, code = -1 } = await queryOldLockList(params)
            return {
              data: longle,
              success: code === consts.RET_CODE.SUCCESS,
              total
            }
          }}
        />
      </div>
    </Modal>
  )
}

export default ReceiveLock