vxe-pc-ui/lib/form-design/src/layout-preview.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _vn = require("../../ui/src/vn");
var _layoutViewItem = require("./layout-view-item");
var _util = require("../src/util");
var _form = _interopRequireDefault(require("../../form/src/form"));
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = (0, _vue.defineComponent)({
  name: 'FormDesignLayoutPreview',
  props: {},
  emits: [],
  setup() {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const dragenterEvent = evnt => {
      const {
        widgetObjList,
        dragWidget
      } = formDesignReactData;
      if (dragWidget) {
        evnt.preventDefault();
        const rest = _xeUtils.default.findTree(widgetObjList, item => item && item.id === dragWidget.id, {
          children: 'children'
        });
        if (!rest) {
          formDesignReactData.sortWidget = dragWidget;
          widgetObjList.push(dragWidget);
          $xeFormDesign.dispatchEvent('drag-widget', {
            widget: dragWidget
          }, evnt);
        }
      }
    };
    const dragoverEvent = evnt => {
      evnt.preventDefault();
    };
    let lastDragTime = Date.now();
    const handleDragenterTopPlaceEvent = evnt => {
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      evnt.stopPropagation();
      if (lastDragTime > Date.now() - 300) {
        evnt.preventDefault();
        return;
      }
      if (sortWidget) {
        if ((0, _util.hasFormDesignLayoutType)(sortWidget)) {
          return;
        }
        // const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
        const currRest = _xeUtils.default.findTree(widgetObjList, item => item.id === sortWidget.id, {
          children: 'children'
        });
        if (currRest) {
          const {
            item,
            index,
            items,
            parent
          } = currRest;
          if (parent && parent.name === 'row') {
            // 如是是从 row 移出
            currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
          } else {
            items.splice(index, 1);
          }
          widgetObjList.unshift(item);
          lastDragTime = Date.now();
          $xeFormDesign.dispatchEvent('drag-widget', {
            widget: item
          }, evnt);
        }
      }
    };
    const handleDragenterBottomPlaceEvent = evnt => {
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      evnt.stopPropagation();
      if (lastDragTime > Date.now() - 300) {
        evnt.preventDefault();
        return;
      }
      if (sortWidget) {
        if ((0, _util.hasFormDesignLayoutType)(sortWidget)) {
          return;
        }
        // const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
        const currRest = _xeUtils.default.findTree(widgetObjList, item => item.id === sortWidget.id, {
          children: 'children'
        });
        if (currRest) {
          const {
            item,
            index,
            items,
            parent
          } = currRest;
          if (parent && parent.name === 'row') {
            // 如是是从 row 移出
            currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
          } else {
            items.splice(index, 1);
          }
          widgetObjList.push(item);
          lastDragTime = Date.now();
          $xeFormDesign.dispatchEvent('drag-widget', {
            widget: item
          }, evnt);
        }
      }
    };
    return () => {
      const {
        widgetObjList
      } = formDesignReactData;
      return (0, _vue.h)('div', {
        class: 'vxe-form-design--preview',
        onDragenter: dragenterEvent,
        onDragover: dragoverEvent
      }, [(0, _vue.h)('div', {
        class: 'vxe-form-design--preview-wrapper'
      }, [(0, _vue.h)('div', {
        class: 'vxe-form-design--preview-place-widget',
        onDragenter: handleDragenterTopPlaceEvent
      }), (0, _vue.h)(_form.default, {
        customLayout: true,
        span: 24,
        vertical: true
      }, {
        default() {
          return (0, _vue.h)(_vue.TransitionGroup, {
            class: 'vxe-form-design--preview-list',
            tag: 'div',
            name: 'vxe-form-design--preview-list'
          }, {
            default: () => {
              return widgetObjList.map((widget, widgetIndex) => {
                return (0, _vue.h)(_layoutViewItem.ViewItemComponent, {
                  key: widget.id,
                  item: widget,
                  itemIndex: widgetIndex,
                  items: widgetObjList
                }, {
                  default() {
                    const {
                      name
                    } = widget;
                    const compConf = _core.renderer.get(name) || {};
                    const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
                    const renderOpts = widget;
                    const isEditMode = true;
                    const params = {
                      widget,
                      readonly: false,
                      disabled: false,
                      isEditMode,
                      isViewMode: !isEditMode,
                      $formDesign: $xeFormDesign,
                      $formView: null
                    };
                    return renderWidgetDesignView ? (0, _vn.getSlotVNs)(renderWidgetDesignView(renderOpts, params)) : [];
                  }
                });
              });
            }
          });
        }
      }), (0, _vue.h)('div', {
        class: 'vxe-form-design--preview-place-widget',
        onDragenter: handleDragenterBottomPlaceEvent
      })])]);
    };
  }
});