@wufengteam/inputs/es/SettingMember/index.js

平台提供的右侧属性编辑器，需要在主工程中注册

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; }
import React, { useState, useEffect, useRef } from 'react';
import { Form, Button, Tag, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { wufengController } from '@wufengteam/core';
import { TAG_ICON_STYLE, COLOR_DATA } from './constants';
import AddMemberModal from './components/AddMemberModal';
// @ts-ignore
// import roleIcon from './img/role.png';
// @ts-ignore
import departIcon from './img/depart.png';
import useDSLCore from '../hooks/useDSLCore';
import "./index.css";
import { cssPrefixCls } from '../utils';
import { getFirstChar } from './tool';
var Item = Form.Item;
var InnerSettngMember = function InnerSettngMember(props) {
  var value = props.value,
    onChange = props.onChange,
    pageInfo = props.pageInfo,
    component = props.component,
    isDefaultMenber = props.isDefaultMenber;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showModal = _useState2[0],
    setShowModal = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    allowPeopleChecked = _useState4[0],
    setAllowPeopleChecked = _useState4[1]; // 允许选择人员
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    defaultMemberChecked = _useState6[0],
    setDefaultMemberChecked = _useState6[1]; // 指定人员
  var _useState7 = useState([]),
    _useState8 = _slicedToArray(_useState7, 2),
    sDepartList = _useState8[0],
    setSDepartList = _useState8[1]; // 部门选中的数据,{title:'',key:''}[]
  var _useState9 = useState([]),
    _useState10 = _slicedToArray(_useState9, 2),
    sMemberList = _useState10[0],
    setSMemberList = _useState10[1]; // 成员选中数据
  var _useState11 = useState(false),
    _useState12 = _slicedToArray(_useState11, 2),
    curUserDepartChecked = _useState12[0],
    setCurUserDepartChecked = _useState12[1];
  var _useState13 = useState([]),
    _useState14 = _slicedToArray(_useState13, 2),
    dynamicCheckedList = _useState14[0],
    setdynamicCheckedList = _useState14[1]; // 当前用户所处部门
  var pageId = pageInfo.pageId;
  var id = component.id,
    selectType = component.props.selectType;
  var containerRef = useRef(null);
  var _useState15 = useState(selectType),
    _useState16 = _slicedToArray(_useState15, 2),
    currentSelectType = _useState16[0],
    setCurrentSelectType = _useState16[1];
  useEffect(function () {
    if (isDefaultMenber && (sDepartList === null || sDepartList === void 0 ? void 0 : sDepartList.length) + (dynamicCheckedList === null || dynamicCheckedList === void 0 ? void 0 : dynamicCheckedList.length) + (sMemberList === null || sMemberList === void 0 ? void 0 : sMemberList.length) > 1 && selectType === 'single' && currentSelectType === 'multiple') {
      // 是默认值并且从多选切换到单选，数据大于1 置空
      var checkedObj = {
        componentId: id,
        pageId: pageId,
        checkValues: {
          page: pageId,
          componentId: id,
          cfgObjs: []
        },
        childIdFilterList: [],
        containCurrentUserOrg: []
      };
      onChange === null || onChange === void 0 ? void 0 : onChange(checkedObj);
    }
    setCurrentSelectType(selectType);
  }, [selectType]);
  useEffect(function () {
    if (value) {
      setCurUserDepartChecked(true);
      var aChecked = value.allowPeopleChecked,
        dChecked = value.defaultMemberChecked,
        _value$checkValues = value.checkValues,
        checkValues = _value$checkValues === void 0 ? [] : _value$checkValues,
        _value$containCurrent = value.containCurrentUserOrg,
        containCurrentUserOrg = _value$containCurrent === void 0 ? [] : _value$containCurrent;
      setAllowPeopleChecked(aChecked);
      setDefaultMemberChecked(dChecked);
      var _checkValues$cfgObjs = checkValues.cfgObjs,
        cfgObjs = _checkValues$cfgObjs === void 0 ? [] : _checkValues$cfgObjs;
      if (cfgObjs && cfgObjs.length) {
        var mList = cfgObjs.filter(function (mItem) {
          return "".concat(mItem.type) === '1';
        });
        var dList = cfgObjs.filter(function (dItem) {
          return "".concat(dItem.type) === '2';
        });
        setSDepartList(dList);
        setSMemberList(mList);
      } else {
        setSDepartList([]);
        setSMemberList([]);
      }
      setdynamicCheckedList(containCurrentUserOrg);
    } else {
      setAllowPeopleChecked(false);
      setDefaultMemberChecked(false);
      setSDepartList([]);
      setSMemberList([]);
      setdynamicCheckedList([]);
    }
  }, [value]);
  var saveCfgObjData = function saveCfgObjData(depart, member, sDynamicCheckedList) {
    var departList = depart === null || depart === void 0 ? void 0 : depart.map(function (it) {
      // 组织信息
      // const { orgId, orgName } = it;
      return Object.assign(Object.assign({}, it), {
        type: 2
      });
    });
    var memberList = member === null || member === void 0 ? void 0 : member.map(function (it) {
      var _a;
      // 成员信息
      var _it$orgInfo = it.orgInfo,
        orgInfo = _it$orgInfo === void 0 ? [] : _it$orgInfo;
      var orgIds = [];
      if (orgInfo) {
        orgIds = ((_a = orgInfo === null || orgInfo === void 0 ? void 0 : orgInfo.map) === null || _a === void 0 ? void 0 : _a.call(orgInfo, function (mItem) {
          return mItem.orgId;
        })) || [];
      }
      return Object.assign(Object.assign({}, it), {
        orgIds: orgIds,
        type: 1
      });
    });
    // 动态参数
    var current = sDynamicCheckedList === null || sDynamicCheckedList === void 0 ? void 0 : sDynamicCheckedList.map(function (item) {
      return {
        type: 3,
        orgId: 0,
        orgName: item
        // orgName: '当前用户',
      };
    });
    return {
      page: pageId,
      componentId: id,
      cfgObjs: [].concat(_toConsumableArray(departList), _toConsumableArray(memberList), _toConsumableArray(current))
    };
  };
  var saveCfgObj = function saveCfgObj(obj) {
    var params = obj.params,
      callback = obj.callback;
    wufengController.getAction('saveCfgObj', params).then(function (res) {
      if (res === null || res === void 0 ? void 0 : res.resultCode) {
        var resultCode = res.resultCode,
          resultMsg = res.resultMsg;
        if ("".concat(resultCode) === '0') {
          if (callback) {
            callback();
            if (defaultMemberChecked || allowPeopleChecked) {
              message.success('人员数据保存成功');
            }
          } else {
            message.error(resultMsg);
          }
        }
      } else if (JSON.stringify(res) !== '{}') {
        // 流程平台返回没有全部的数据
        if (callback) {
          callback();
          if (defaultMemberChecked || allowPeopleChecked) {
            message.success('人员数据保存成功');
          }
        }
      }
    });
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "".concat(cssPrefixCls, "-SettingMember")
  }, (sDepartList === null || sDepartList === void 0 ? void 0 : sDepartList.length) === 0 && (sMemberList === null || sMemberList === void 0 ? void 0 : sMemberList.length) === 0 && (dynamicCheckedList === null || dynamicCheckedList === void 0 ? void 0 : dynamicCheckedList.length) === 0 && ( /*#__PURE__*/React.createElement(Button, {
    type: "dashed",
    icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
    className: "btnWrap",
    onClick: function onClick() {
      setShowModal(true);
    }
  }, isDefaultMenber ? '去设置' : '添加人员')), /*#__PURE__*/React.createElement("div", {
    onClick: function onClick() {
      setShowModal(true);
    },
    ref: containerRef,
    className: (sDepartList === null || sDepartList === void 0 ? void 0 : sDepartList.length) > 0 || (sMemberList === null || sMemberList === void 0 ? void 0 : sMemberList.length) > 0 || (dynamicCheckedList === null || dynamicCheckedList === void 0 ? void 0 : dynamicCheckedList.length) > 0 ? 'contentWrap' : ''
  }, sDepartList === null || sDepartList === void 0 ? void 0 : sDepartList.map(function (dItem, posIndex) {
    var orgId = dItem.orgId,
      orgName = dItem.orgName,
      isSonOrg = dItem.isSonOrg;
    return /*#__PURE__*/React.createElement(Tag, {
      key: orgId,
      icon: /*#__PURE__*/React.createElement("div", {
        style: {
          background: COLOR_DATA[posIndex % 8]
        },
        className: "iconBg"
      }, getFirstChar(orgName)),
      className: "tagItem"
    }, "".concat(isSonOrg) === '1' ? "".concat(orgName, "(\u542B\u5B50\u90E8\u95E8)") : orgName);
  }), sMemberList === null || sMemberList === void 0 ? void 0 : sMemberList.map(function (mItem, posIndex) {
    var staffId = mItem.staffId,
      staffName = mItem.staffName;
    return /*#__PURE__*/React.createElement(Tag, {
      key: staffId,
      icon: /*#__PURE__*/React.createElement("div", {
        style: {
          background: COLOR_DATA[posIndex % 8]
        },
        className: "iconBg"
      }, getFirstChar(staffName)),
      className: "tagItem"
    }, staffName);
  }), dynamicCheckedList === null || dynamicCheckedList === void 0 ? void 0 : dynamicCheckedList.map(function (mItem, posIndex) {
    return /*#__PURE__*/React.createElement(Tag, {
      icon: mItem === 'containCurrentUser' ? ( /*#__PURE__*/React.createElement("img", {
        src: departIcon,
        alt: "",
        style: TAG_ICON_STYLE
      })) : ( /*#__PURE__*/React.createElement("div", {
        style: {
          background: COLOR_DATA[posIndex % 8]
        },
        className: "iconBg"
      }, "\u5F53")),
      className: "tagItem"
    }, mItem === 'containCurrentUser' ? '当前用户' : '当前用户同部门人员');
  })), showModal && ( /*#__PURE__*/React.createElement(AddMemberModal, {
    memberListed: sMemberList,
    departListed: sDepartList,
    checkedList: dynamicCheckedList,
    visible: showModal,
    selectType: selectType,
    isDefaultMenber: isDefaultMenber || false,
    onCancel: function onCancel() {
      setShowModal(false);
    },
    onOk: function onOk(_ref) {
      var departList = _ref.sDepartList,
        memberList = _ref.sMemberList,
        sDynamicCheckedList = _ref.dynamicCheckedList;
      var params = saveCfgObjData(departList, memberList, sDynamicCheckedList);
      saveCfgObj({
        params: params,
        callback: function callback() {
          setSDepartList(departList);
          setSMemberList(memberList);
          setdynamicCheckedList(sDynamicCheckedList);
          setShowModal(false);
          if (onChange) {
            var checkedObj = {
              allowPeopleChecked: allowPeopleChecked,
              curUserDepartChecked: curUserDepartChecked,
              defaultMemberChecked: defaultMemberChecked,
              componentId: id,
              pageId: pageId,
              checkValues: params,
              containCurrentUserOrg: sDynamicCheckedList
            };
            onChange(checkedObj);
          }
        }
      });
    }
  })));
};
var SettingMember = function SettingMember(props) {
  var _a;
  var label = props.label,
    name = props.name,
    _props$context = props.context,
    context = _props$context === void 0 ? {} : _props$context,
    DSLCore = props.DSLCore;
  var dslQuery = useDSLCore({
    DSLCore: DSLCore
  });
  var _Object$assign = Object.assign(Object.assign({}, context), dslQuery),
    pageInfo = _Object$assign.pageInfo,
    component = _Object$assign.component;
  // 字段名称，判断是否是默认值
  var isDefaultMenber = name === 'defaultMenber';
  var _ref2 = ((_a = DSLCore === null || DSLCore === void 0 ? void 0 : DSLCore.current) === null || _a === void 0 ? void 0 : _a.props) || {},
    selectRange = _ref2.selectRange;
  // 是否必选
  var isRequired = !isDefaultMenber && selectRange === 'custom';
  return /*#__PURE__*/React.createElement(Item, {
    label: isRequired ? ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, label), /*#__PURE__*/React.createElement("span", {
      style: {
        marginLeft: '1px'
      },
      className: "editor-rightprops-required"
    }, "*"))) : ( /*#__PURE__*/React.createElement("span", null, label)),
    name: name
  }, /*#__PURE__*/React.createElement(InnerSettngMember, {
    pageInfo: pageInfo,
    component: component,
    isDefaultMenber: isDefaultMenber
  }));
};
export default SettingMember;