@wufengteam/wform/lib/MemberPicker/index.js

@wufengteam/wform

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _ismobilejs = _interopRequireDefault(require("ismobilejs"));
var _icons = require("@ant-design/icons");
var _core = require("@wufengteam/core");
var _utils = require("@wufengteam/utils");
var _AddMemberModal = _interopRequireDefault(require("./AddMemberModal"));
var _AddDepartModal = _interopRequireDefault(require("./AddDepartModal"));
var _components = require("./components");
var _props = require("../utils/props");
var _UnCustomizeMember = _interopRequireDefault(require("./UnCustomizeMember"));
var _depart = _interopRequireDefault(require("./img/depart.png"));
require("./index.css");
var _index2 = _interopRequireDefault(require("../components/FieldItem/index"));
var _FieldItemPc = _interopRequireDefault(require("../components/FieldItemPc"));
var _withTransformProps = _interopRequireDefault(require("../utils/withTransformProps"));
var _utils2 = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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; }
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
/* eslint-disable no-console */

// @ts-ignore

// interface InnerMemberPickerProps {
//   value?: any[] | undefined;
//   disabled?: boolean;
//   onChange?: (values: any) => void;
// }
var changeData = function changeData(data) {
  var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'STA';
  if (type === 'STA') {
    var _newData = (0, _utils.objSortBy)(data, 'staffId');
    return _newData.map(function (i) {
      return Object.assign(Object.assign({}, i), {
        partyId: i === null || i === void 0 ? void 0 : i.staffId,
        partyType: type,
        partyName: i === null || i === void 0 ? void 0 : i.staffName
      });
    });
  }
  var newData = (0, _utils.objSortBy)(data, 'orgId');
  return newData.map(function (i) {
    return Object.assign(Object.assign({}, i), {
      partyId: i === null || i === void 0 ? void 0 : i.orgId,
      partyType: type,
      partyName: i === null || i === void 0 ? void 0 : i.orgName
    });
  });
};
// TODO: permission 需要在运行态实现
// TODO: initialValue 默认值
// TODO: fieldAttr 隐藏-hide  新增记录时隐藏--addHide 需要在运行态展示
// TODO: 当为成员添加组件时，数据从右侧联动带出。搜索框
var InnerMemberPicker = function InnerMemberPicker(props) {
  var _a;
  var value = props.value,
    onChange = props.onChange,
    btnText = props.btnText,
    _props$selectType = props.selectType,
    selectType = _props$selectType === void 0 ? 'single' : _props$selectType,
    _props$fieldAttr = props.fieldAttr,
    fieldAttr = _props$fieldAttr === void 0 ? [] : _props$fieldAttr,
    compType = props.compType,
    _props$settingMember = props.settingMember,
    settingMember = _props$settingMember === void 0 ? {} : _props$settingMember,
    _props$$$componentIte = props.$$componentItem,
    $$componentItem = _props$$$componentIte === void 0 ? {} : _props$$$componentIte,
    name = props.name,
    disabled = props.disabled;
  var _$$componentItem$plat = $$componentItem.platform,
    platform = _$$componentItem$plat === void 0 ? 'pc' : _$$componentItem$plat,
    renderType = $$componentItem.renderType;
  var isMobile = (0, _ismobilejs.default)().phone;
  var _settingMember$compon = settingMember.componentId,
    componentId = _settingMember$compon === void 0 ? '' : _settingMember$compon,
    _settingMember$pageId = settingMember.pageId,
    pageId = _settingMember$pageId === void 0 ? '' : _settingMember$pageId;
  var tagStyle = {
    color: '#1C242E',
    background: '#EBF3FF',
    padding: '5px 6px'
  };
  var htTagStyle = {
    color: '#1C242E',
    background: '#F0F0F0',
    padding: '0px 4px'
  };
  var tagIconStyle = {
    width: '18px',
    height: '18px',
    marginRight: '2px'
  };
  var memberIconStyle = {
    width: '18px',
    height: '18px',
    marginRight: '2px',
    background: '#47E',
    display: 'inline-flex',
    justifyContent: 'center',
    color: '#fff',
    borderRadius: '100%'
  };
  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 = (0, _react.useState)(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var _useState3 = (0, _react.useState)(value || []),
    _useState4 = _slicedToArray(_useState3, 2),
    sModalData = _useState4[0],
    setsModalData = _useState4[1];
  var isMounted = (0, _react.useRef)(false);
  var _useState5 = (0, _react.useState)(false),
    _useState6 = _slicedToArray(_useState5, 2),
    hasDefault = _useState6[0],
    setHasDefault = _useState6[1]; // 是否有自定义的成员
  (0, _react.useEffect)(function () {
    if (value && Array.isArray(value)) {
      setsModalData(value);
    } else {
      setsModalData([]);
    }
  }, [JSON.stringify(value)]);
  (0, _react.useEffect)(function () {
    if (!isMounted.current) {
      isMounted.current = true;
    } else {
      setsModalData([]);
    }
  }, [selectType]);
  (0, _react.useEffect)(function () {
    return function () {
      isMounted.current = false;
    };
  }, []);
  (0, _react.useEffect)(function () {
    if (onChange) {
      var result = changeData(sModalData, compType === 'depart' ? 'ORG' : 'STA');
      if (result && Array.isArray(result) && result.length > 0) {
        onChange(result);
      } else {
        onChange(undefined);
      }
    }
  }, [sModalData]);
  var renderCommonpent = function renderCommonpent() {
    if (isMobile) {
      return /*#__PURE__*/_react.default.createElement(_components.MobileAddMemberModal, {
        defaultValue: value || [],
        visible: visible,
        onClose: function onClose() {
          return setVisible(false);
        },
        name: name,
        onOk: function onOk(memberData) {
          setsModalData(memberData);
          setVisible(false);
        },
        selectType: selectType,
        hasDefault: hasDefault,
        componentId: componentId,
        pageId: pageId,
        compType: compType,
        "$$componentItem": $$componentItem,
        getEngineApis: props === null || props === void 0 ? void 0 : props.getEngineApis
      });
    }
    if (compType === 'depart') {
      return /*#__PURE__*/_react.default.createElement(_AddDepartModal.default, {
        defaultValue: value || [],
        visible: visible,
        onCancel: function onCancel() {
          setVisible(false);
        },
        onOk: function onOk(departData) {
          setsModalData(departData);
          setVisible(false);
        },
        selectType: selectType,
        "$$componentItem": $$componentItem,
        getEngineApis: props === null || props === void 0 ? void 0 : props.getEngineApis
      });
    }
    if (hasDefault) {
      return /*#__PURE__*/_react.default.createElement(_AddMemberModal.default, {
        defaultValue: value || [],
        visible: visible,
        onCancel: function onCancel() {
          setVisible(false);
        },
        onOk: function onOk(memberData) {
          setsModalData(memberData);
          setVisible(false);
        },
        componentId: componentId,
        pageId: pageId,
        selectType: selectType,
        "$$componentItem": $$componentItem,
        getEngineApis: props === null || props === void 0 ? void 0 : props.getEngineApis
      });
    }
    return /*#__PURE__*/_react.default.createElement(_UnCustomizeMember.default, {
      defaultValue: value || [],
      visible: visible,
      onCancel: function onCancel() {
        setVisible(false);
      },
      onOk: function onOk(memberData) {
        setsModalData(memberData);
        setVisible(false);
      },
      componentId: componentId,
      pageId: pageId,
      selectType: selectType,
      "$$componentItem": $$componentItem,
      getEngineApis: props === null || props === void 0 ? void 0 : props.getEngineApis
    });
  };
  var selClick = function selClick() {
    var _a;
    // 非只读模式
    if (!disabled && !fieldAttr.includes('read')) {
      var appId = sessionStorage.getItem('appId');
      if (compType === 'member' && settingMember && (settingMember === null || settingMember === void 0 ? void 0 : settingMember.checkValues) && ((_a = settingMember === null || settingMember === void 0 ? void 0 : settingMember.checkValues) === null || _a === void 0 ? void 0 : _a.cfgObjs)) {
        if (renderType === 'editor') {
          _core.wufengController.getAction('verifyIfConfig', {
            componentId: componentId,
            page: pageId,
            appId: appId
          }).then(function (res) {
            setHasDefault(res);
            setTimeout(function () {
              setVisible(true);
            }, 100);
          });
        } else {
          customEngineApi.verifyIfConfig({
            componentId: componentId,
            page: pageId,
            appId: appId
          }).then(function (res) {
            setHasDefault(res);
            setTimeout(function () {
              setVisible(true);
            }, 100);
          });
        }
      } else {
        setVisible(true);
      }
    }
  };
  var showValueListContent = function showValueListContent() {
    return sModalData && Array.isArray(sModalData) && sModalData.map(function (item) {
      var _item$staffId = item.staffId,
        staffId = _item$staffId === void 0 ? '' : _item$staffId,
        staffName = item.staffName,
        orgId = item.orgId,
        orgName = item.orgName,
        isSonOrg = item.isSonOrg;
      var isOrg = compType === 'depart';
      var icon = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
      var title = staffName || orgName;
      if (!isOrg) {
        icon = /*#__PURE__*/_react.default.createElement("span", {
          style: memberIconStyle
        }, staffName.substr(0, 1));
      } else {
        icon = /*#__PURE__*/_react.default.createElement("img", {
          src: _depart.default,
          alt: "",
          style: tagIconStyle
        });
      }
      return /*#__PURE__*/_react.default.createElement(_antd.Tag, {
        icon: platform === 'pc' ? icon : '',
        key: isOrg ? orgId : staffId,
        closable: !disabled && !fieldAttr.includes('read'),
        style: platform === 'h5' ? htTagStyle : tagStyle,
        onClose: function onClose() {
          var otherList = [];
          if (isOrg) {
            // 部门组件
            otherList = sModalData.filter(function (dItem) {
              return dItem.orgId !== orgId;
            });
          } else {
            // 成员组件
            otherList = sModalData.filter(function (mItem) {
              return mItem.userId !== staffId;
            });
          }
          setsModalData(otherList);
        }
      }, "".concat(isSonOrg) === '1' ? "".concat(title, "(\u542B\u5B50\u90E8\u95E8)") : title);
    });
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '100%'
    }
  }, platform === 'h5' ? ( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(_utils2.prefix, "-mem-part-h5")
  }, /*#__PURE__*/_react.default.createElement("span", {
    onClick: selClick
  }, (sModalData === null || sModalData === void 0 ? void 0 : sModalData.length) !== 0 ? '继续添加' : '前往添加'), /*#__PURE__*/_react.default.createElement("div", {
    className: "lingxiteam-dform-arrow-horizontal"
  })), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
    style: {
      width: '100%',
      display: 'flex',
      justifyContent: 'flex-end'
    },
    wrap: true,
    align: "end",
    size: "small"
  }, showValueListContent())))) : ( /*#__PURE__*/_react.default.createElement(_antd.Space, {
    wrap: true
  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
    key: "add",
    icon: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, {
      style: {
        fontWeight: 'bold'
      }
    }),
    size: "middle",
    disabled: disabled || fieldAttr.includes('read'),
    onClick: selClick
  }, btnText), showValueListContent())), renderCommonpent());
};
var MemberPicker = function MemberPicker(props) {
  var name = props.name,
    label = props.label,
    _props$btnText = props.btnText,
    btnText = _props$btnText === void 0 ? '添加' : _props$btnText,
    fieldDes = props.fieldDes,
    _props$selectType2 = props.selectType,
    selectType = _props$selectType2 === void 0 ? 'single' : _props$selectType2,
    _props$fieldAttr2 = props.fieldAttr,
    fieldAttr = _props$fieldAttr2 === void 0 ? [] : _props$fieldAttr2,
    compType = props.compType,
    pickerType = props.pickerType,
    settingMember = props.settingMember,
    _props$$$componentIte2 = props.$$componentItem,
    $$componentItem = _props$$$componentIte2 === void 0 ? {} : _props$$$componentIte2,
    _props$visible = props.visible,
    visible = _props$visible === void 0 ? true : _props$visible,
    restProps = __rest(props, ["name", "label", "btnText", "fieldDes", "selectType", "fieldAttr", "compType", "pickerType", "settingMember", "$$componentItem", "visible"]);
  var finalFieldAttr = (0, _props.mergeFieldAttrAndVisible)({
    fieldAttr: fieldAttr || [],
    visible: visible
  });
  var renderType = $$componentItem.renderType,
    platform = $$componentItem.platform;
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderType === 'editor' ? ( /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
    label: label,
    name: name,
    fieldAttr: finalFieldAttr,
    fieldDes: fieldDes,
    initialValue: restProps.value,
    platform: $$componentItem.platform,
    Field: $$componentItem.Field,
    renderType: $$componentItem.renderType,
    requiredTip: "\u8BF7\u9009\u62E9"
  }, restProps), /*#__PURE__*/_react.default.createElement(InnerMemberPicker, Object.assign({
    name: name,
    btnText: btnText,
    selectType: selectType,
    fieldAttr: fieldAttr,
    compType: pickerType,
    settingMember: settingMember,
    "$$componentItem": $$componentItem
  }, restProps)))) : ( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, platform === 'pc' ? ( /*#__PURE__*/_react.default.createElement(_FieldItemPc.default, Object.assign({}, props), /*#__PURE__*/_react.default.createElement(InnerMemberPicker, Object.assign({
    name: name,
    btnText: btnText,
    selectType: selectType,
    fieldAttr: fieldAttr,
    compType: pickerType,
    settingMember: settingMember,
    "$$componentItem": $$componentItem
  }, restProps)))) : ( /*#__PURE__*/_react.default.createElement(_index2.default, Object.assign({
    label: label,
    name: name,
    fieldAttr: finalFieldAttr,
    fieldDes: fieldDes,
    initialValue: restProps.value,
    platform: $$componentItem.platform,
    Field: $$componentItem.Field,
    renderType: $$componentItem.renderType,
    requiredTip: "\u8BF7\u9009\u62E9"
  }, restProps), /*#__PURE__*/_react.default.createElement(InnerMemberPicker, Object.assign({
    name: name,
    btnText: btnText,
    selectType: selectType,
    fieldAttr: fieldAttr,
    compType: pickerType,
    settingMember: settingMember,
    "$$componentItem": $$componentItem
  }, restProps)))))));
};
var _default = exports.default = (0, _withTransformProps.default)(MemberPicker);