@wufengteam/inputs/lib/BindFormField/index.js

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

"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 _icons = require("@ant-design/icons");
var _flow = require("@alita/flow");
var _core = require("@wufengteam/core");
var _ahooks = require("ahooks");
var _comp = require("../assets/img/comp");
require("./index.css");
var _utils = require("../utils");
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; } /* eslint-disable no-console */
var Option = _antd.Select.Option;
var Search = _antd.Input.Search;
var Panel = _antd.Collapse.Panel;
// 可关联的组件类型
var includesComps = ['Input', 'Select', 'MultipleSelect', 'DatePicker', 'TimePicker', 'InputNumber', 'Radio', 'CheckboxGroup', 'InputPhone', 'InputMail', 'Rate', 'SerialNumber'];
var InnerBindForm = function InnerBindForm(_ref) {
  var value = _ref.value,
    onChange = _ref.onChange;
  var _useState = (0, _react.useState)(false),
    _useState2 = _slicedToArray(_useState, 2),
    visible = _useState2[0],
    setVisible = _useState2[1];
  var _useState3 = (0, _react.useState)('self'),
    _useState4 = _slicedToArray(_useState3, 2),
    searchType = _useState4[0],
    setSearchType = _useState4[1];
  var _useState5 = (0, _react.useState)(),
    _useState6 = _slicedToArray(_useState5, 2),
    activeKey = _useState6[0],
    setActiveKey = _useState6[1];
  var _useState7 = (0, _react.useState)(value),
    _useState8 = _slicedToArray(_useState7, 2),
    selfValue = _useState8[0],
    setSelfValue = _useState8[1];
  var _useState9 = (0, _react.useState)([]),
    _useState10 = _slicedToArray(_useState9, 2),
    appsData = _useState10[0],
    setAppsData = _useState10[1];
  var _useState11 = (0, _react.useState)(''),
    _useState12 = _slicedToArray(_useState11, 2),
    search = _useState12[0],
    setSearch = _useState12[1];
  var _useState13 = (0, _react.useState)(''),
    _useState14 = _slicedToArray(_useState13, 2),
    searchTemp = _useState14[0],
    setSearchTemp = _useState14[1];
  var _useMap = (0, _ahooks.useMap)(),
    _useMap2 = _slicedToArray(_useMap, 2),
    dataMap = _useMap2[0],
    _useMap2$ = _useMap2[1],
    set = _useMap2$.set,
    get = _useMap2$.get;
  var _useState15 = (0, _react.useState)(1),
    _useState16 = _slicedToArray(_useState15, 2),
    pageNum = _useState16[0],
    updatePageNum = _useState16[1];
  if (!window.appId) {
    window.appId = sessionStorage.getItem('appId');
  }
  /**
   * 获取表单数据
   */
  var qryCatalogChild = function qryCatalogChild(appId, catalogItemName) {
    _core.wufengController.getAction('qryCatalogChild', {
      appId: appId,
      catalogType: 'NCDPAPP',
      catalogItemName: catalogItemName
    }).then(function (res) {
      if (res && res.resultCode === '0') {
        var catalogItemId = localStorage.getItem('catalogItemId');
        setAppsData(res === null || res === void 0 ? void 0 : res.resultObject.filter(function (item) {
          return item.catalogItemId !== catalogItemId;
        }));
      }
    });
  };
  /**
   * 根据表单目录id 查询业务对象
   * @param appId
   * @param catalogItemId
   */
  var findBusiObjectByCatalogItemId = function findBusiObjectByCatalogItemId(catalogItemId) {
    var _window = window,
      appId = _window.appId;
    _core.wufengController.getAction('findBusiObjectByCatalogItemId', {
      appId: appId,
      catalogItemId: catalogItemId
    }).then(function (res) {
      if (res && res.resultCode === '0') {
        set(catalogItemId, res === null || res === void 0 ? void 0 : res.resultObject);
      }
    });
  };
  // 初始化获取当前应用关联表单
  (0, _react.useEffect)(function () {
    qryCatalogChild(window.appId, '');
  }, []);
  (0, _react.useEffect)(function () {
    if (searchType === 'self') {
      qryCatalogChild(window.appId, search);
    }
  }, [search, pageNum]);
  var onClose = function onClose() {
    setVisible(false);
  };
  var onEnd = function onEnd() {
    setVisible(false);
    // 减小 dsl 大小，不要传整个大对象，用到啥传啥
    onChange === null || onChange === void 0 ? void 0 : onChange({
      appId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.appId,
      busiObjectCode: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectCode,
      busiObjectCat: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectCat,
      busiObjectId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectId,
      busiObjectName: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectName,
      labelKey: selfValue === null || selfValue === void 0 ? void 0 : selfValue.labelKey,
      attrName: selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrName,
      attrCode: selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrCode,
      catalogItemId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemId,
      busiObjectAttrId: selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectAttrId
    });
  };
  (0, _react.useEffect)(function () {
    setSelfValue(value);
    if (value && (value === null || value === void 0 ? void 0 : value.appId) && (value === null || value === void 0 ? void 0 : value.appId) === window.appId) {
      findBusiObjectByCatalogItemId(value === null || value === void 0 ? void 0 : value.catalogItemId);
      setSearchType('self');
      setActiveKey(value === null || value === void 0 ? void 0 : value.catalogItemId);
    }
  }, [JSON.stringify(value)]);
  (0, _react.useEffect)(function () {
    setSearchTemp('');
    setSearch('');
  }, [visible]);
  var Avatar = function Avatar(_ref2) {
    var item = _ref2.item,
      isCheck = _ref2.isCheck,
      color = _ref2.color;
    if (item.remark === 'ED') {
      return /*#__PURE__*/_react.default.createElement("img", {
        style: {
          width: '14px',
          height: '14px'
        },
        src: isCheck ? _comp.FileExcelActiveIcon : _comp.FileExcelIcon,
        alt: ""
      });
    }
    return /*#__PURE__*/_react.default.createElement(_icons.FileTextOutlined, {
      style: {
        color: color
      }
    });
  };
  var getSelectTitle = function getSelectTitle() {
    if ((value === null || value === void 0 ? void 0 : value.busiObjectName) && (value === null || value === void 0 ? void 0 : value.attrName)) {
      return "".concat(selfValue === null || selfValue === void 0 ? void 0 : selfValue.busiObjectName, "-").concat(selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrName);
    }
    return undefined;
  };
  var renderList = function renderList(catalogItemId) {
    var _a, _b;
    // 获取数据。并且过滤可展示组件
    var data = (_b = (_a = get(catalogItemId)) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b.filter(function (item) {
      return includesComps.includes(item === null || item === void 0 ? void 0 : item.compType);
    });
    return /*#__PURE__*/_react.default.createElement(_antd.List, {
      size: "small",
      dataSource: data,
      renderItem: function renderItem(item) {
        // 新增catalogItemId判断，防止出现共有属性如obj_id,导致都会被选中
        var isCheck = (selfValue === null || selfValue === void 0 ? void 0 : selfValue.attrCode) + (selfValue === null || selfValue === void 0 ? void 0 : selfValue.catalogItemId) === (item === null || item === void 0 ? void 0 : item.attrCode) + catalogItemId;
        var color = isCheck ? '#3366EE' : '';
        return /*#__PURE__*/_react.default.createElement(_antd.List.Item, {
          onClick: function onClick() {
            setSelfValue(Object.assign(Object.assign({}, get(catalogItemId)), {
              labelKey: item === null || item === void 0 ? void 0 : item.attrCode,
              attrName: item === null || item === void 0 ? void 0 : item.attrName,
              attrCode: item === null || item === void 0 ? void 0 : item.attrCode,
              catalogItemId: catalogItemId
            }));
          }
        }, /*#__PURE__*/_react.default.createElement(_antd.List.Item.Meta, {
          avatar: /*#__PURE__*/_react.default.createElement(Avatar, {
            item: item,
            isCheck: isCheck,
            color: color
          }),
          title: /*#__PURE__*/_react.default.createElement("span", {
            style: {
              color: color
            }
          }, item === null || item === void 0 ? void 0 : item.attrName)
        }), isCheck && ( /*#__PURE__*/_react.default.createElement(_icons.CheckOutlined, {
          style: {
            color: color
          }
        })));
      }
    });
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    onClick: function onClick(e) {
      e.stopPropagation();
      setVisible(!visible);
    }
  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
    value: getSelectTitle() || '请选择表单',
    dropdownStyle: {
      display: 'none'
    },
    style: {
      width: '100%'
    }
  })), /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
    className: "".concat(_utils.cssPrefixCls, "-BindFormField-Drawer"),
    closable: false,
    title: "\u9009\u62E9\u8868\u5355\u5B57\u6BB5",
    placement: "right",
    width: 480,
    onClose: onClose,
    visible: visible
  }, /*#__PURE__*/_react.default.createElement(_flow.Page, null, /*#__PURE__*/_react.default.createElement(_flow.Header, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      height: '50px'
    }
  }), /*#__PURE__*/_react.default.createElement(_antd.Space, {
    size: "small",
    style: {
      padding: '20px 24px'
    }
  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
    value: searchType,
    onChange: function onChange(val) {
      setSearchType(val);
      setSearch('');
      if (val === 'self' && !dataMap.has(window.appId)) {
        qryCatalogChild(window.appId, '');
      }
    },
    style: {
      width: 100
    }
  }, /*#__PURE__*/_react.default.createElement(Option, {
    value: "self"
  }, "\u672C\u5E94\u7528")), /*#__PURE__*/_react.default.createElement(Search, {
    placeholder: "\u8BF7\u8F93\u5165".concat(searchType === 'self' ? '表单名称' : '项目名称', "\u641C\u7D22"),
    onSearch: function onSearch(e) {
      updatePageNum(1);
      setSearch(e);
    },
    value: searchTemp,
    onChange: function onChange(e) {
      setSearchTemp(e.target.value);
    },
    className: "".concat(_utils.cssPrefixCls, "-searchWrap")
  }))), /*#__PURE__*/_react.default.createElement(_flow.Content, {
    id: "scrollSetId",
    style: {
      height: 'calc(100vh - 200px)',
      overflow: 'auto'
    }
  }, /*#__PURE__*/_react.default.createElement(_flow.Show, {
    when: searchType === 'self',
    fallback: renderList(window.appId)
  }, /*#__PURE__*/_react.default.createElement(_flow.Show, {
    when: appsData.length > 0,
    fallback: /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null)
  }, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
    activeKey: activeKey,
    expandIconPosition: "left",
    onChange: function onChange(a) {
      setActiveKey(a);
      if (!a) return;
      if (!dataMap.has(a)) {
        findBusiObjectByCatalogItemId(a);
      }
    },
    accordion: true
  }, appsData.map(function (i) {
    return /*#__PURE__*/_react.default.createElement(Panel, {
      header: i === null || i === void 0 ? void 0 : i.catalogItemName,
      key: i === null || i === void 0 ? void 0 : i.catalogItemId
    }, /*#__PURE__*/_react.default.createElement(_flow.Show, {
      when: dataMap.has(i === null || i === void 0 ? void 0 : i.catalogItemId),
      fallback: /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null)
    }, renderList(i === null || i === void 0 ? void 0 : i.catalogItemId)));
  }))))), /*#__PURE__*/_react.default.createElement(_flow.Footer, null, /*#__PURE__*/_react.default.createElement(_antd.Space, {
    size: "small",
    style: {
      padding: '20px 32px',
      display: 'flex',
      flexDirection: 'row-reverse'
    }
  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
    onClick: onClose
  }, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
    type: "primary",
    onClick: onEnd
  }, "\u786E\u8BA4"))))));
};
var BindFormField = function BindFormField(props) {
  var name = props.name,
    rules = props.rules,
    label = props.label;
  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
    label: label,
    name: name,
    rules: rules
  }, /*#__PURE__*/_react.default.createElement(InnerBindForm, null));
};
var _default = exports.default = BindFormField;