@wufengteam/wform/es/MemberPicker/components/MobileAddMemberModal/index.js

@wufengteam/wform

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/* eslint-disable no-lonely-if */
import React, { useState, useEffect, useRef } from 'react';
import { Popup } from 'antd-mobile-5';
import { wufengController } from '@wufengteam/core';
import { SearchBar, Breadcrumb, MobileDepart, SelectData, MobileMember, MobileNavBar } from '..';
import { prefix } from '../../../utils';
import "./index.css";
var MobileAddMemberModal = function MobileAddMemberModal(props) {
  var _a;
  var visible = props.visible,
    onClose = props.onClose,
    name = props.name,
    onOk = props.onOk,
    _props$selectType = props.selectType,
    selectType = _props$selectType === void 0 ? 'single' : _props$selectType,
    _props$hasDefault = props.hasDefault,
    hasDefault = _props$hasDefault === void 0 ? false : _props$hasDefault,
    componentId = props.componentId,
    pageId = props.pageId,
    _props$compType = props.compType,
    compType = _props$compType === void 0 ? 'member' : _props$compType,
    _props$defaultValue = props.defaultValue,
    defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
    _props$$$componentIte = props.$$componentItem,
    $$componentItem = _props$$$componentIte === void 0 ? {} : _props$$$componentIte;
  var renderType = $$componentItem.renderType;
  var _ref = ((_a = props === null || props === void 0 ? void 0 : props.getEngineApis) === null || _a === void 0 ? void 0 : _a.call(props)) || {},
    _ref$customEngineApi = _ref.customEngineApi,
    customEngineApi = _ref$customEngineApi === void 0 ? {} : _ref$customEngineApi;
  var _useState = useState([]),
    _useState2 = _slicedToArray(_useState, 2),
    breadcrumbList = _useState2[0],
    setBreadcrumbList = _useState2[1]; // 层级目录数据
  var _useState3 = useState(true),
    _useState4 = _slicedToArray(_useState3, 2),
    subDepartFlag = _useState4[0],
    setSubDepartFlag = _useState4[1]; // 底部是否包含子部门的标识
  var _useState5 = useState([]),
    _useState6 = _slicedToArray(_useState5, 2),
    departList = _useState6[0],
    setDepartList = _useState6[1]; // 部门列表数据
  var _useState7 = useState(undefined),
    _useState8 = _slicedToArray(_useState7, 2),
    selectDepart = _useState8[0],
    setSelectDepart = _useState8[1]; // 展示在界面上的部门列表
  var _useState9 = useState([]),
    _useState10 = _slicedToArray(_useState9, 2),
    memberList = _useState10[0],
    setMemberList = _useState10[1]; // 已选的成员列表数据
  var _useState11 = useState(''),
    _useState12 = _slicedToArray(_useState11, 2),
    searchValue = _useState12[0],
    setSearchValue = _useState12[1]; // 搜索框值
  var _useState13 = useState([]),
    _useState14 = _slicedToArray(_useState13, 2),
    selDepartList = _useState14[0],
    setSelDepartList = _useState14[1]; // 已选的部门列表数据
  var memberRef = useRef();
  /**
   * 获取部门数据
   */
  var getOrgInfoByAsync = function getOrgInfoByAsync(e) {
    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
    var _a, _b;
    if (renderType === 'editor') {
      if (type === 'id') {
        var params = {
          orgId: e
        };
        wufengController.getAction('getOrgInfoByAsync', params).then(function (res) {
          setDepartList(res);
        });
      } else {
        wufengController.getAction('getOrgByOrgName', {
          orgName: e
        }).then(function (res) {
          setDepartList(res);
        });
      }
    } else {
      if (type === 'id') {
        var _params = {
          orgId: e
        };
        (_a = customEngineApi === null || customEngineApi === void 0 ? void 0 : customEngineApi.getOrgInfoByAsync) === null || _a === void 0 ? void 0 : _a.call(customEngineApi, _params).then(function (res) {
          setDepartList(res);
        });
      } else {
        (_b = customEngineApi === null || customEngineApi === void 0 ? void 0 : customEngineApi.getOrgInfoByAsync) === null || _b === void 0 ? void 0 : _b.call(customEngineApi, {
          orgName: e
        }).then(function (res) {
          setDepartList(res);
        });
      }
    }
  };
  useEffect(function () {
    if (visible) {
      if (compType === 'depart' || compType === 'member' && !hasDefault) {
        getOrgInfoByAsync('0', 'id');
      }
      if (compType === 'depart') {
        setSelDepartList(defaultValue);
      } else {
        setMemberList(defaultValue);
      }
    } else {
      setBreadcrumbList([]);
      setSubDepartFlag(true);
      setDepartList([]);
      setSelectDepart(undefined);
      setMemberList([]);
      setSelDepartList([]);
      setSearchValue('');
    }
  }, [visible]);
  /**
   * 搜索框返回事件
   */
  var searchBarBack = function searchBarBack() {
    onClose();
  };
  /**
   * 层级目录点击事件
   */
  var breadcrumbClick = function breadcrumbClick(obj, index) {
    var bList = _toConsumableArray(breadcrumbList);
    bList = bList.splice(0, index + 1);
    setBreadcrumbList(bList);
    getOrgInfoByAsync(obj === null || obj === void 0 ? void 0 : obj.orgId, 'id');
    setSelectDepart(obj);
  };
  /**
   * 成员选择事件
   */
  var memberSelect = function memberSelect(flag, obj) {
    if (selectType === 'single') {
      if (flag) {
        setMemberList([obj]);
      } else {
        setMemberList([]);
      }
    } else if (flag) {
      var newMem = _toConsumableArray(memberList);
      newMem.push(obj);
      setMemberList(newMem);
    } else {
      var filter = memberList.filter(function (it) {
        return it.staffId !== obj.staffId;
      });
      setMemberList(filter);
    }
  };
  /**
   * 部门点击事件
   */
  var departClick = function departClick(obj) {
    var newList = _toConsumableArray(breadcrumbList);
    newList.push(obj);
    setBreadcrumbList(newList);
    getOrgInfoByAsync(obj === null || obj === void 0 ? void 0 : obj.orgId, 'id');
    setSelectDepart(obj);
  };
  /**
   * 导航栏确认事件
   */
  var navOnOK = function navOnOK() {
    var list = memberList;
    if (compType === 'depart') {
      list = selDepartList;
    }
    if (onOk) onOk(list);
  };
  /**
   * 搜索框确认事件
   */
  var searchSubmit = function searchSubmit(e) {
    if (compType === 'member') {
      if (memberRef && memberRef.current) memberRef.current.searchConfirm(e);
    } else {
      getOrgInfoByAsync(e, 'name');
    }
  };
  /**
   * 部门选择事件
   */
  var deptSelect = function deptSelect(flag, obj) {
    if (selectType === 'single') {
      if (flag) {
        setSelDepartList([obj]);
      } else {
        setSelDepartList([]);
      }
    } else if (flag) {
      var newDept = _toConsumableArray(selDepartList);
      newDept.push(obj);
      setSelDepartList(newDept);
    } else {
      var filter = selDepartList.filter(function (it) {
        return it.orgId !== obj.orgId;
      });
      setSelDepartList(filter);
    }
  };
  return /*#__PURE__*/React.createElement(Popup, {
    visible: visible,
    className: "".concat(prefix, "-mamm"),
    bodyStyle: {
      height: '100vh'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "-mamm-content")
  }, /*#__PURE__*/React.createElement(MobileNavBar, {
    name: name,
    onBack: searchBarBack,
    onOk: navOnOK
  }), /*#__PURE__*/React.createElement(SearchBar, {
    placeholder: compType === 'member' ? '搜索成员' : '搜索部门',
    maxLength: 10,
    value: searchValue,
    onChange: function onChange(e) {
      return setSearchValue(e);
    },
    onSearch: searchSubmit
  }), !hasDefault && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Breadcrumb, {
    value: breadcrumbList,
    onClick: breadcrumbClick
  }))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "-mamm-line")
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "-mamm-data")
  }, !hasDefault && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileDepart, {
    value: departList,
    onClick: departClick,
    compType: compType,
    departList: selDepartList,
    onSelect: deptSelect,
    flag: subDepartFlag
  }), /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "-mamm-line")
  }))), compType === 'member' && ( /*#__PURE__*/React.createElement(MobileMember, {
    cRef: memberRef,
    flag: subDepartFlag,
    orgId: selectDepart === null || selectDepart === void 0 ? void 0 : selectDepart.orgId,
    departList: departList,
    onSelect: memberSelect,
    memberList: memberList,
    hasDefault: hasDefault,
    componentId: componentId,
    pageId: pageId,
    "$$componentItem": $$componentItem,
    getEngineApis: props === null || props === void 0 ? void 0 : props.getEngineApis
  }))), /*#__PURE__*/React.createElement(SelectData, {
    flag: subDepartFlag,
    flagChange: function flagChange(e) {
      return setSubDepartFlag(e);
    },
    value: memberList,
    onSelect: memberSelect,
    deptValue: selDepartList,
    deptOnSelect: deptSelect,
    onConfirm: navOnOK
  })));
};
export default MobileAddMemberModal;