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

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _Pagination from "@alifd/next/es/pagination";
import _Table from "@alifd/next/es/table";
import _Button from "@alifd/next/es/button";
import _Input from "@alifd/next/es/input";
import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";

/* eslint-disable react/prop-types */
import * as React from 'react';
import Edit from "./Edit";
import { useRequest } from 'ahooks';
import ImageText from "../ImageText";
var SelectGoodDialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var children = props.children,
      value = props.value,
      _props$type = props.type,
      type = _props$type === void 0 ? 'normal' : _props$type,
      onFetchNormalGoods = props.onFetchNormalGoods,
      onFetchGroupGoods = props.onFetchGroupGoods,
      onChange = props.onChange;

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

  var _React$useState2 = React.useState('title'),
      selectValue = _React$useState2[0],
      setSelectValue = _React$useState2[1];

  var _React$useState3 = React.useState(),
      inputValue = _React$useState3[0],
      setInputValue = _React$useState3[1];

  var _React$useState4 = React.useState([]),
      selectedKeys = _React$useState4[0],
      setSelectedKeys = _React$useState4[1];

  var trigger = function () {
    if (value !== null && value !== void 0 && value.length) {
      return /*#__PURE__*/React.createElement(Edit, {
        keys: value,
        type: type,
        onFetchGoodsInfo: function onFetchGoodsInfo() {
          if (type === 'normal') {
            return onFetchNormalGoods({
              limit: 1,
              start: 0,
              scItemIdList: value,
              addChildren: 0,
              type: '0'
            });
          }

          return onFetchGroupGoods({
            limit: 1,
            start: 0,
            scItemIdList: value,
            addChildren: 1
          });
        }
      });
    }

    return children;
  }();

  var _useRequest = useRequest(function (args) {
    if (type === 'normal') {
      return onFetchNormalGoods(args);
    }

    return onFetchGroupGoods(args);
  }, {
    manual: true
  }),
      loading = _useRequest.loading,
      data = _useRequest.data,
      params = _useRequest.params,
      run = _useRequest.run;

  var _ref = (params === null || params === void 0 ? void 0 : params[0]) || {},
      start = _ref.start,
      limit = _ref.limit; // start = (current - 1) * size
  // current = start / size + 1


  var current = start / limit + 1;
  var columns = [{
    title: '货品',
    dataIndex: 'scItem',
    cell: function cell(v) {
      return /*#__PURE__*/React.createElement(ImageText, v);
    }
  }];
  /** 表格行选择 */

  var rowSelection = {
    mode: 'single',
    selectedRowKeys: selectedKeys,
    onChange: function onChange(keys) {
      return setSelectedKeys(keys);
    }
  };
  /** 分页参数 */

  var pagination = {
    current: current,
    pageSize: limit,
    total: (data === null || data === void 0 ? void 0 : data.total) || 0,
    totalRender: function totalRender(total) {
      return "\u5171" + total + "\u6761";
    },
    style: {
      textAlign: 'right',
      marginTop: 10
    },
    size: 'small',
    pageSizeSelector: 'dropdown',
    type: 'simple',
    onChange: function onChange(c) {
      var nextStart = (c - 1) * limit;
      run(_extends({}, params === null || params === void 0 ? void 0 : params[0], {
        start: nextStart
      }));
    },
    onPageSizeChange: function onPageSizeChange(s) {
      var nextLimit = s;
      run(_extends({}, params === null || params === void 0 ? void 0 : params[0], {
        limit: nextLimit
      }));
    }
  };
  /** 打开弹窗 */

  var handleClick = function handleClick() {
    setVisible(true);
    setSelectedKeys(value || []);
    run({
      start: 0,
      limit: 10
    });
  };
  /** 关闭弹窗 */


  var handleClose = function handleClose() {
    setVisible(false);
  };
  /** 查询 */


  var handleSearch = function handleSearch() {
    var _extends2;

    var key = selectValue;
    var v = inputValue;
    run(_extends({}, params === null || params === void 0 ? void 0 : params[0], (_extends2 = {
      start: 0
    }, _extends2[key] = v, _extends2)));
  };

  var handleOk = function handleOk() {
    setVisible(false);
    onChange === null || onChange === void 0 ? void 0 : onChange(selectedKeys);
  };

  var select = /*#__PURE__*/React.createElement(_Select, {
    value: selectValue,
    onChange: setSelectValue
  }, /*#__PURE__*/React.createElement(_Select.Option, {
    value: "title"
  }, "\u8D27\u54C1\u540D\u79F0"), /*#__PURE__*/React.createElement(_Select.Option, {
    value: "scItemId"
  }, "\u8D27\u54C1\u7F16\u7801"));
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(trigger, {
    onClick: handleClick
  }), /*#__PURE__*/React.createElement(_Dialog, {
    ref: ref,
    onCancel: handleClose,
    onClose: handleClose,
    onOk: handleOk,
    style: {
      width: 500
    },
    shouldUpdatePosition: true,
    visible: visible,
    title: "\u9009\u62E9\u8D27\u54C1",
    cache: false
  }, /*#__PURE__*/React.createElement(_Input.Group, {
    addonBefore: select,
    style: {
      marginBottom: 8
    }
  }, /*#__PURE__*/React.createElement(_Input, {
    hasClear: true,
    value: inputValue,
    onChange: setInputValue
  }), /*#__PURE__*/React.createElement(_Button, {
    type: "primary",
    onClick: handleSearch,
    style: {
      marginLeft: 16
    }
  }, "\u67E5\u8BE2")), /*#__PURE__*/React.createElement(_Table, {
    primaryKey: "scItemId",
    loading: loading,
    dataSource: data === null || data === void 0 ? void 0 : data.content,
    rowSelection: rowSelection,
    hasBorder: false,
    columns: columns
  }), /*#__PURE__*/React.createElement(_Pagination, pagination)));
});
export default SelectGoodDialog;