SparePart.jsx

import React, { useEffect, useState } from 'react';
import { connect, history } from 'umi';
import { dispatchHandle } from '@/utils/publicHandle';
import {Table, Popconfirm, Button, Modal, Form} from 'antd'
import { PlusOutlined } from '@ant-design/icons';
import AddModal from '@/pages/Ops/Device/AssociatedInfo/AddModal';
import useFormTable from "@/useHooks/useFormTable";

const {confirm} = Modal

const ParentDevice = (props) => {
  const {dispatch, type = "info", deviceId,
    opsDevice: {relationPage, deviceListWith}
  } = props
  const [form] = Form.useForm()

  const [visible, setVisible] = useState(false)
  const [selectId, setSelectId] = useState([])

  /**
   * @Table方法
   */
  const getListItems = (payload = {}) => {
    dispatchHandle(dispatch, 'opsDevice/warehouse_service_device_inventory_account_relation_post', payload);
  }
  const { tableProps, search } = useFormTable(getListItems, {form, manual: true});

  const rowSelection = {
    onChange: ( selectedRowKeys ) => {
      setSelectId(selectedRowKeys);
    },
    selectedRowKeys: selectId,
  }

  /* 移除设备 */
  const handleUntie = ids => {
    dispatchHandle(dispatch,
      'opsDevice/warehouse_service_device_inventory_account_relation_delete_device_relation_post',
      {inventoryAccountIds: ids, deviceId},
      () => {
        search.submit({deviceId})
        // getListItems({deviceId})
      }
    )
  }
  const handleAssociate = (ids) => {
    dispatchHandle(dispatch,
      'opsDevice/warehouse_service_device_inventory_account_relation_add_device_relation_post',
      {inventoryAccountIds: ids, deviceId},
      () => {
        setVisible(false)
        search.submit({deviceId})
        // getListItems({deviceId})
      })
  }
  const batchDelete = () => {
    confirm({
      centered: true,
      title: '删除提示',
      icon: null,
      content: `是否移除选中父设备`,
      onOk() {
        handleUntie(selectId)
      }
    });

  }

  /* 关联父设备 */
  const columns = [

    { align: 'center', title: '物料编号', dataIndex: ['materialInfo','materialCode'] },
    { align: 'center', title: '品名', dataIndex: ['materialInfo','materialName'] },
    { align: 'center', title: '类型', dataIndex: ['materialInfo','materialType'] },
    { align: 'center', title: '品牌', dataIndex: ['materialSupplier','brand'] },
    { align: 'center', title: '规格', dataIndex: ['materialInfo','mmodel'] },
    { align: 'center', title: '单位', dataIndex: ['materialInfo','munit'] },
    { align: 'center', title: '库存数量', dataIndex: ['stockNum'] },
    { align: 'center', title: '单价(元)', dataIndex: ['materialSupplier','materialPrice'] },// 价格
    // { align: 'center', title: '剩余有效期（天）', dataIndex: 'c'},
    { align: 'center', title: '供应商', dataIndex: ['materialSupplier','supplierName'] },
    { align: 'center', title: '设备状态', dataIndex: ['materialStatus'],
      render: val => (
        <div className={{100: 'btn_disabled', 110: 'btn_warning', 105: 'btn_common'}[val]}>
          {{100: '报废', 110: '呆滞', 105: '正常'}[val]}
        </div>
      )
    },
    { align: 'center', title: '操作', key: 'option', width: 80, fixed: 'right',
      render: (text, record) => type === 'info'
        ?  <a onClick={() => history.push(`/warehouse-keeper/homework/standingBook/view/${record.id}?auditType=standList`)}>查看详情</a>
        : (
          <Popconfirm title="确认删除此备件/耗材吗？" onConfirm={() => handleUntie([record.inventoryAccountId])}>
            <a>移除</a>
          </Popconfirm>
        ),
    },
  ];


  useEffect(() => {
    search.submit({deviceId})
    // getListItems({deviceId})
  }, [])

  const relationData = relationPage.list?.map(item => ({...item, ...item.accountBO}))

  return (
    <>
      {type !== 'info' && (
        <div style={{padding: '10px 0'}}>
          <Button type="primary" style={{marginRight: 20}} onClick={() => setVisible(true)}>
            <PlusOutlined/>添加备件/耗材
          </Button>
          <Button
            danger
            disabled={selectId.length === 0}
            onClick={batchDelete}
          >删除</Button>
        </div>
      )}
      <Table
        bordered
        size="small"
        rowKey={(record) => record.id}
        dataSource={relationData}
        pagination={relationPage.pagination}
        columns={columns}
        scroll={{x: 2200}}
        rowSelection={type === 'info' ? {} : rowSelection}
        {...tableProps}
      />

      <AddModal
        type="relation"
        title="关联备件/耗材"
        deviceId={deviceId}
        visible={visible}
        columns={columns}
        tableUrl="warehouse_service_device_relation_page"
        onAssociate={handleAssociate}
        handleClose={() => setVisible(false)}
      />
    </>
  );
};

export default connect(({ opsDevice, loading }) => ({
  opsDevice,
  loading: loading.models.opsDevice,
}))(ParentDevice);