agmp_iot_jetlinks_ui/src/components/FSelectDevices/index.tsx

import { Input, Modal } from 'antd';
import { EditOutlined } from '@ant-design/icons';
import type { Key } from 'react';
import { useRef, useState } from 'react';
import { connect } from '@formily/react';
import type { ActionType, ProColumns } from '@jetlinks/pro-table';
import ProTable from '@jetlinks/pro-table';
import type { DeviceInstance } from '@/pages/device/Instance/typings';
import moment from 'moment';
import { useIntl } from '@@/plugin-locale/localeExports';
import Service from '@/pages/device/Instance/service';
import SearchComponent from '../SearchComponent';

interface Props {
  value: Partial<DeviceInstance>[];
  onChange: (data: Partial<DeviceInstance>[]) => void;
}

export const service = new Service('device/instance');
const FSelectDevices = connect((props: Props) => {
  // todo 考虑与单选设备合并
  const [visible, setVisible] = useState<boolean>(false);
  const intl = useIntl();
  const actionRef = useRef<ActionType>();
  const [searchParam, setSearchParam] = useState({});
  const columns: ProColumns<DeviceInstance>[] = [
    // {
    //   dataIndex: 'index',
    //   valueType: 'indexBorder',
    //   width: 48,
    // },
    {
      title: 'ID',
      dataIndex: 'id',
    },
    {
      title: intl.formatMessage({
        id: 'pages.table.deviceName',
        defaultMessage: '设备名称',
      }),
      dataIndex: 'name',
      ellipsis: true,
    },
    {
      title: intl.formatMessage({
        id: 'pages.table.productName',
        defaultMessage: '产品名称',
      }),
      dataIndex: 'productName',
      ellipsis: true,
    },
    {
      title: intl.formatMessage({
        id: 'pages.device.instance.registrationTime',
        defaultMessage: '注册时间',
      }),
      dataIndex: 'registryTime',
      width: '200px',
      render: (text: any) => (text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''),
      sorter: true,
    },
    // {
    //   title: intl.formatMessage({
    //     id: 'pages.table.description',
    //     defaultMessage: '说明',
    //   }),
    //   dataIndex: 'description',
    //   width: '15%',
    //   ellipsis: true,
    // },
  ];

  const [data, setData] = useState<Partial<DeviceInstance>[]>(props.value);
  const rowSelection = {
    onChange: (selectedRowKeys: Key[], selectedRows: DeviceInstance[]) => {
      setData(selectedRows);
    },
    selectedRowKeys: data?.map((item) => item.id) as Key[],
  };

  return (
    <>
      <Input
        disabled
        value={props.value?.map((item) => item.name).join(',')}
        addonAfter={<EditOutlined onClick={() => setVisible(true)} />}
      />
      {visible && (
        <Modal
          maskClosable={false}
          visible
          title="选择设备"
          width="80vw"
          onCancel={() => setVisible(false)}
          onOk={() => {
            setVisible(false);
            props.onChange(data);
          }}
        >
          <SearchComponent<DeviceInstance>
            field={columns}
            enableSave={false}
            model="simple"
            onSearch={async (data1) => {
              setSearchParam(data1);
            }}
            target="choose-device"
          />
          <ProTable<DeviceInstance>
            tableAlertRender={false}
            rowSelection={{
              type: 'checkbox',
              ...rowSelection,
            }}
            search={false}
            columnEmptyText={''}
            toolBarRender={false}
            rowKey="id"
            pagination={{
              pageSize: 10,
            }}
            params={searchParam}
            columns={columns}
            actionRef={actionRef}
            request={(params) => service.query(params)}
          />
        </Modal>
      )}
    </>
  );
});

export default FSelectDevices;