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

B 端物料组件库

import _Dialog from "@alifd/next/es/dialog";
import _Message from "@alifd/next/es/message";
import _extends from "@babel/runtime/helpers/extends";
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import request from '@aliretail/react-universal-request';
import { setup, SchemaForm, createFormActions } from "../FormComponents";
setup();
var actions = createFormActions();
var debounceFlag = false;

var DeliverGoodsDialog = function DeliverGoodsDialog(props) {
  var visible = props.visible,
      handleOk = props.handleOk,
      handleClose = props.handleClose,
      children = props.children,
      params = props.params,
      title = props.title,
      apiCode = props.apiCode,
      appCode = props.appCode,
      logisticsAppCode = props.logisticsAppCode,
      logisticsApiCode = props.logisticsApiCode,
      labelText = props.labelText,
      valueText = props.valueText,
      logisticsCompanyDataSource = props.logisticsCompanyDataSource;

  var _useState = useState(visible),
      dialogVisible = _useState[0],
      setDialogVisible = _useState[1];

  var _useState2 = useState([]),
      companyList = _useState2[0],
      setCompanyList = _useState2[1];

  useEffect(function () {
    setDialogVisible(visible);
  }, [visible]);

  var onClose = function onClose() {
    setDialogVisible(false);
    handleClose && handleClose();
  };

  var onOk = function onOk() {
    if (!appCode || !apiCode || debounceFlag) {
      return;
    }

    actions.validate().then(function () {
      debounceFlag = true;
      var _actions$getFormState = actions.getFormState().values,
          companyId = _actions$getFormState.companyId,
          logisticsNo = _actions$getFormState.logisticsNo;
      var currentCompany = companyList.filter(function (item) {
        return item.code === companyId;
      })[0];

      var submitParams = _extends({}, params, {
        logisticsNo: logisticsNo,
        logisticsCompanyName: currentCompany.name,
        logisticsCompanyId: currentCompany.id ? currentCompany.id : undefined,
        logisticsCompanyCode: currentCompany.code
      });

      request({
        method: 'post',
        appCode: appCode,
        apiCode: apiCode,
        autoShowErrorMessage: true,
        data: submitParams
      }).then(function (resp) {
        var result = resp.result;

        if (result.success) {
          onClose();
          handleOk && handleOk();
        } else {
          _Message.error(result.message || '接口异常');
        }
      })["finally"](function () {
        debounceFlag = false;
      });
    })["catch"](function () {// TODO
      // console.log(err);
    });
  };

  useEffect(function () {
    if (dialogVisible) {
      if (logisticsCompanyDataSource && logisticsCompanyDataSource.length) {
        var list = logisticsCompanyDataSource.map(function (it) {
          return _extends({}, it, {
            value: it.code,
            label: it.name
          });
        });
        setCompanyList(list);
        return;
      }

      if (!logisticsAppCode || !logisticsApiCode || companyList.length) {
        return;
      }

      request({
        method: 'post',
        appCode: logisticsAppCode,
        apiCode: logisticsApiCode,
        autoShowErrorMessage: true
      }).then(function (res) {
        var result = res.result;

        if (result.success && result.result) {
          var _list = result.result.map(function (item) {
            return _extends({}, item, {
              value: item.code,
              label: item.name
            });
          });

          setCompanyList(_list);
        } else {
          _Message.error(result.message || '获取物流公司失败');
        }
      });
    }
  }, [dialogVisible]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, children && /*#__PURE__*/React.cloneElement(children, {
    onClick: function onClick() {
      setDialogVisible(true);
    }
  }), /*#__PURE__*/React.createElement(_Dialog, {
    title: title,
    visible: dialogVisible,
    locale: {
      ok: '确定',
      cancel: '取消'
    },
    style: {
      width: '400px'
    },
    onOk: onOk,
    onCancel: onClose,
    onClose: onClose
  }, /*#__PURE__*/React.createElement(SchemaForm, {
    defaultValue: _extends({}, params, {
      valueText: valueText
    }),
    actions: actions,
    schema: {
      type: 'object',
      properties: {
        gridLayout: {
          type: 'object',
          'x-component': 'GridLayout',
          'x-component-props': {
            isForm: true,
            type: 'dialog'
          },
          properties: {
            valueText: {
              title: labelText,
              'x-component': 'input',
              'x-component-props': {
                isPreview: true
              }
            },
            companyId: {
              title: '物流公司',
              required: true,
              'x-component': 'select',
              'x-component-props': {
                placeholder: '请选择',
                showSearch: true
              },
              'retail-form-item-props': {
                inputAreaWidth: 272
              },
              'x-rules': [{
                required: true,
                message: '请选择物流公司'
              }],
              "enum": companyList
            },
            logisticsNo: {
              title: '物流单号',
              required: true,
              'x-component': 'input',
              'x-component-props': {
                placeholder: '请输入',
                maxLength: 50,
                showLimitHint: true
              },
              'retail-form-item-props': {
                inputAreaWidth: 272
              },
              'x-rules': [{
                required: true,
                message: '请输入物流单号'
              }]
            }
          }
        }
      }
    }
  })));
};

DeliverGoodsDialog.defaultProps = {
  visible: false,
  params: {},
  title: '发货',
  labelText: '售后单号',
  valueText: '-'
};
DeliverGoodsDialog.propTypes = {
  handleOk: PropTypes.func,
  handleClose: PropTypes.func,
  children: PropTypes.element,
  visible: PropTypes.bool,
  params: PropTypes.object,
  title: PropTypes.string,
  appCode: PropTypes.string,
  apiCode: PropTypes.string,
  logisticsAppCode: PropTypes.string,
  logisticsApiCode: PropTypes.string,
  labelText: PropTypes.string,
  valueText: PropTypes.string,
  logisticsCompanyDataSource: PropTypes.array
};
export default DeliverGoodsDialog;