@aliretail/react-materials-components/es/LogisticsGroupDialog/index.js

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _Loading from "@alifd/next/es/loading";
import _Table from "@alifd/next/es/table";
import _Button from "@alifd/next/es/button";
import * as React from 'react';
import CheckLogistics from "../CheckLogistics";
import { usePersistFn } from 'ahooks';

var LogisticsGroupDialog = function LogisticsGroupDialog(props) {
  var _props$dataSource = props.dataSource,
      dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
      total = props.total,
      receiveOrderCode = props.receiveOrderCode,
      onFetchFullDataSource = props.onFetchFullDataSource;

  var _React$useState = React.useState(false),
      visible = _React$useState[0],
      setVisible = _React$useState[1];

  var _React$useState2 = React.useState([]),
      dialogDataSource = _React$useState2[0],
      setDialogDataSource = _React$useState2[1];

  var _React$useState3 = React.useState(false),
      loading = _React$useState3[0],
      setLoading = _React$useState3[1];
  /** 只展示前面两条 */


  var showed = dataSource.slice(0, 2);
  /** 获取弹窗里的dataSource */

  var handleFetchFullDataSource = usePersistFn(function () {
    setLoading(true);
    onFetchFullDataSource().then(function (d) {
      setDialogDataSource(d);
    })["finally"](function () {
      setLoading(false);
    });
  });

  var handleCloseDialog = function handleCloseDialog() {
    setVisible(false);
    setDialogDataSource([]);
  };

  var handleOpenDialog = function handleOpenDialog() {
    setVisible(true);
    handleFetchFullDataSource();
  };

  if (!dataSource.length) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
  }

  return /*#__PURE__*/React.createElement("div", null, showed.map(function (data) {
    return /*#__PURE__*/React.createElement("div", {
      key: data.deliveryCode
    }, data.type, " ", data.deliveryCode, ' ', /*#__PURE__*/React.createElement(CheckLogistics, {
      align: "t",
      className: "",
      footer: null,
      loading: loading,
      triggerType: "click",
      delivery: [data].filter(Boolean),
      trigger: /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        text: true,
        size: "small"
      }, "\u8BE6\u60C5")
    }));
  }), dataSource.length > 2 && /*#__PURE__*/React.createElement(_Button, {
    onClick: handleOpenDialog,
    type: "primary",
    text: true,
    size: "small"
  }, "\u5171", total, "\u6761"), /*#__PURE__*/React.createElement(_Dialog, {
    title: "\u7269\u6D41\u8BE6\u60C5",
    visible: visible,
    footerActions: ['cancel'],
    onCancel: handleCloseDialog,
    onClose: handleCloseDialog,
    style: {
      width: 600
    },
    cancelProps: {
      children: '关闭'
    }
  }, /*#__PURE__*/React.createElement(_Loading, {
    visible: loading
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      marginBottom: 8
    }
  }, "\u6536\u8D27\u5355 ", receiveOrderCode), /*#__PURE__*/React.createElement(_Table, {
    dataSource: dialogDataSource,
    hasBorder: false
  }, /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u7269\u6D41\u516C\u53F8",
    dataIndex: "type"
  }), /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u7269\u6D41\u5355\u53F7",
    dataIndex: "deliveryCode"
  }), /*#__PURE__*/React.createElement(_Table.Column, {
    title: "\u7269\u6D41\u8BE6\u60C5",
    cell: function cell(v, i, r) {
      var _r$deliveryInfos, _r$deliveryInfos$;

      return /*#__PURE__*/React.createElement(React.Fragment, null, "\u3010", r.deliveryStateDesc, "\u3011", (_r$deliveryInfos = r.deliveryInfos) === null || _r$deliveryInfos === void 0 ? void 0 : (_r$deliveryInfos$ = _r$deliveryInfos[0]) === null || _r$deliveryInfos$ === void 0 ? void 0 : _r$deliveryInfos$.packageInfo, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckLogistics, {
        align: "t",
        className: "",
        footer: null,
        loading: loading,
        triggerType: "click",
        delivery: [r].filter(Boolean),
        trigger: /*#__PURE__*/React.createElement(_Button, {
          type: "primary",
          text: true,
          size: "small"
        }, "\u7269\u6D41\u8BE6\u60C5")
      })));
    }
  })))));
};

export default LogisticsGroupDialog;