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

import React, { useState, useEffect } from 'react'
import { Tag } from 'antd'
import ProTable from '@ant-design/pro-table'
import useAutoTable from '@/hooks/useAutoTable'
import consts from '@/consts'
import { queryLock } from '@/services/lock'
import Locks from '@/components/PopContent/Locks'

const Lockstore = props => {
  const { collapsed } = props
  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
  const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度

  const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
  const [state, setState] = useState({
    data: [],
    total: 0,
    id: ''
  })
  const initData = async payload => {
    const {
      code = -1,
      data: { longle = [], log = [], total = 0 } = { longle: [], log: [], total: 0 }
    } = await queryLock(payload)
    if (code === consts.RET_CODE.SUCCESS) {
      setState({ ...state, data: longle, log, total })
    }
    // console.log(longle[0].product)
    // const productArr = longle[0].product.split('+')
    // console.log(productArr)
  }
  useEffect(() => {
    // props.getlist();
    initData()
  }, [])
  const handleSearch = value => {
    initData({ search: value })
  }
  // 展示drawer
  const showDrawer = id => {
    // console.log(id);
    setState({ ...state, id, visible: true })
  }

  // 隐藏drawer
  const hideDrawer = () => {
    setState({ ...state, visible: false, id: '' })
  }
  const onCreate = values => {
    console.log(values)
  }
  const columns = [
    {
      title: '锁号',
      dataIndex: 'keyNum',
      key: 'keyNum',
      width: 150,
      render: (keyNum, record) => <a onClick={() => showDrawer(record.id)}>{keyNum}</a>
    },
    {
      title: '产品',
      dataIndex: 'product',
      key: 'product',
      width: 350,
      render: (text, record) => {
        const productArr = text.split('+')
        return (
          <div>
            {productArr.map((item, index) => (
              <Tag key={index} color="#886ab5">
                {item}
              </Tag>
            ))}
          </div>
        )
      }
    },
    {
      title: '办事处',
      dataIndex: 'category',
      key: 'category',
      width: 150
    },
    {
      title: '出库时间',
      dataIndex: 'makeDay',
      key: 'makeDay',
      width: 150
    },
    {
      title: '销售/借出/赠送时间',
      dataIndex: 'allotedTime',
      key: 'allotedTime',
      width: 160
    },
    {
      title: '责任人',
      dataIndex: 'responsible',
      key: 'responsible',
      width: 150
    },
    {
      title: '状态',
      dataIndex: 'statusT',
      key: 'statusT',
      width: 150
    },
    {
      title: '联系人',
      dataIndex: 'client',
      key: 'client',
      width: 150
    }
  ]
  return (
    <div>
      <ProTable
        rowKey={record => record.id}
        search={false}
        headerTitle="公共锁库"
        bordered
        columns={columns}
        dataSource={state.data}
        scroll={{ x, y }}
        toolbar={{
          search: {
            onSearch: handleSearch
          }
        }}
      />
      <Locks onClose={hideDrawer} visible={state.visible} onCreate={onCreate} id={state.id} />
    </div>
  )
}

export default Lockstore