vxe-pc-ui/lib/form-design/widget-subtable/subtable-view.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WidgetSubtableViewComponent = exports.WidgetSubtableEditComponent = void 0;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _util = require("../src/util");
var _vn = require("../../ui/src/vn");
var _use = require("../../form-design/src/use");
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _button = _interopRequireDefault(require("../../button/src/button"));
var _checkbox = _interopRequireDefault(require("../../checkbox/src/checkbox"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const ViewSubItemComponent = (0, _vue.defineComponent)({
  props: {
    parentWidget: {
      type: Object,
      default: () => ({})
    },
    widget: {
      type: Object,
      default: () => ({})
    },
    childIndex: {
      type: Number,
      default: 0
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    const $xeFormView = (0, _vue.inject)('$xeFormView', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const sortDragstartSubItemEvent = evnt => {
      evnt.stopPropagation();
      const divEl = evnt.currentTarget;
      const dataTransfer = evnt.dataTransfer;
      const widgetId = divEl.getAttribute('data-widget-id') || '';
      const dragWidget = $xeFormDesign.getWidgetById(widgetId);
      if (dataTransfer) {
        dataTransfer.setData('text/plain', widgetId);
      }
      formDesignReactData.sortWidget = dragWidget;
      formDesignReactData.dragWidget = null;
    };
    const sortDragenterSubItemEvent = evnt => {
      const {
        parentWidget,
        childIndex
      } = props;
      const {
        widgetObjList,
        sortWidget
      } = formDesignReactData;
      const targetWidget = parentWidget.children[childIndex];
      const formDesignInternalData = $xeFormDesign.internalData;
      const {
        lastDragTime
      } = formDesignInternalData;
      evnt.stopPropagation();
      if (lastDragTime && lastDragTime > Date.now() - 300) {
        evnt.preventDefault();
        return;
      }
      if (sortWidget && targetWidget && parentWidget) {
        if (sortWidget.id === parentWidget.id) {
          return;
        }
        if (sortWidget.id === targetWidget.id) {
          return;
        }
        if ((0, _util.hasFormDesignLayoutType)(sortWidget)) {
          return;
        }
        if (targetWidget && !(0, _util.hasFormDesignLayoutType)(targetWidget)) {
          const currRest = _xeUtils.default.findTree(widgetObjList, item => item.id === sortWidget.id, {
            children: 'children'
          });
          if (currRest) {
            const {
              item,
              index,
              items,
              parent
            } = currRest;
            // 如果是 subtable 内移动
            if (parent && parent.id === parentWidget.id) {
              parentWidget.children[childIndex] = item;
              parentWidget.children[index] = targetWidget;
            } else {
              parentWidget.children.splice(childIndex, 0, item);
              items.splice(index, 1);
            }
            formDesignInternalData.lastDragTime = Date.now();
            $xeFormDesign.dispatchEvent('drag-widget', {
              widget: item
            }, evnt);
          }
        }
      }
    };
    return () => {
      const {
        widget
      } = props;
      const {
        dragWidget,
        activeWidget,
        sortWidget
      } = formDesignReactData;
      const name = widget ? widget.name : '';
      const compConf = _core.renderer.get(name) || {};
      const renderSubtableView = compConf.renderFormDesignWidgetSubtableEditView || compConf.renderFormDesignWidgetSubtableCellView || compConf.renderFormDesignWidgetSubtableDefaultView;
      const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
      const renderOpts = widget || {
        name
      };
      const isEditMode = !!$xeFormDesign;
      const defParams = {
        widget,
        readonly: false,
        disabled: false,
        isEditMode,
        isViewMode: !isEditMode,
        $formDesign: $xeFormDesign,
        $formView: $xeFormView
      };
      const isActive = activeWidget && widget && activeWidget.id === widget.id;
      const subOpts = {
        name
      };
      const subParams = {
        $table: null,
        $grid: null,
        seq: '',
        column: {
          field: widget.field,
          title: widget.title
        },
        columnIndex: 0,
        $columnIndex: 0,
        _columnIndex: 0,
        rowid: '',
        row: {},
        rowIndex: 0,
        $rowIndex: 0,
        _rowIndex: 0,
        isEdit: false,
        isHidden: false,
        fixed: null,
        type: '',
        level: 1,
        visibleData: [],
        items: [],
        data: [],
        widget: widget
      };
      return (0, _vue.h)('div', {
        class: ['vxe-form-design--widget-subtable-view-item', {
          'is--active': isActive,
          'is--sort': sortWidget && widget && sortWidget.id === widget.id,
          'is--drag': dragWidget && widget && dragWidget.id === widget.id
        }],
        draggable: true,
        'data-widget-id': widget.id,
        onDragstart: sortDragstartSubItemEvent,
        onDragenter: sortDragenterSubItemEvent,
        onClick(evnt) {
          if (widget) {
            $xeFormDesign.handleClickWidget(evnt, widget);
          }
        }
      }, [(0, _vue.h)('div', {
        class: 'vxe-form-design--widget-subtable-view-item-wrapper'
      }, [(0, _vue.h)('div', {
        class: 'vxe-form-design--widget-subtable-view-item-box vxe-form--item-row'
      }, renderSubtableView ? (0, _vue.h)(_formItem.default, {
        class: ['vxe-form-design--widget-render-form-item'],
        title: widget.title,
        field: widget.field,
        itemRender: {}
      }, {
        default() {
          return (0, _vn.getSlotVNs)(renderSubtableView(subOpts, subParams));
        }
      }) : renderWidgetDesignView ? (0, _vn.getSlotVNs)(renderWidgetDesignView(renderOpts, defParams)) : []), isActive ? (0, _vue.h)('div', {
        class: 'vxe-form-design--preview-item-operate'
      }, [(0, _vue.h)(_button.default, {
        icon: (0, _core.getIcon)().FORM_DESIGN_WIDGET_COPY,
        status: 'primary',
        size: 'mini',
        circle: true,
        onClick(params) {
          $xeFormDesign.handleCopyWidget(params.$event, widget);
        }
      }), (0, _vue.h)(_button.default, {
        icon: (0, _core.getIcon)().FORM_DESIGN_WIDGET_DELETE,
        status: 'danger',
        size: 'mini',
        circle: true,
        onClick(params) {
          $xeFormDesign.handleRemoveWidget(params.$event, widget);
        }
      })]) : (0, _vue.createCommentVNode)()])]);
    };
  }
});
const WidgetSubtableEditComponent = exports.WidgetSubtableEditComponent = (0, _vue.defineComponent)({
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
    if (!$xeFormDesign) {
      return () => [];
    }
    const {
      reactData: formDesignReactData
    } = $xeFormDesign;
    const handleDragoverWrapperEvent = evnt => {
      const {
        sortWidget,
        widgetObjList
      } = formDesignReactData;
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      evnt.stopPropagation();
      if (!sortWidget || !widget || widget.id === sortWidget.id) {
        return;
      }
      if ((0, _util.hasFormDesignLayoutType)(sortWidget)) {
        if (_core.VxeUI.modal) {
          _core.VxeUI.modal.message({
            content: (0, _core.getI18n)('vxe.formDesign.widgetProp.subtableProp.errSubDrag'),
            status: 'error',
            id: 'errSubDrag'
          });
        }
        return;
      }
      // 如果控件不在当前子表中，则拖进去
      if (widget.name && !widget.children.some(item => item.id === sortWidget.id)) {
        const rest = _xeUtils.default.findTree(widgetObjList, item => item.id === sortWidget.id, {
          children: 'children'
        });
        if (rest) {
          const {
            item,
            index,
            items
          } = rest;
          formDesignReactData.sortWidget = null;
          formDesignReactData.activeWidget = item;
          widget.children.push(item);
          items.splice(index, 1);
          formDesignReactData.sortWidget = item;
        }
      }
    };
    const handleDragenterWrapperEvent = evnt => {
      evnt.stopPropagation();
    };
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        title,
        children,
        options
      } = widget;
      const {
        showCheckbox
      } = options;
      return (0, _vue.h)(_formItem.default, {
        title,
        className: 'vxe-form-design--widget-subtable-form-item'
      }, {
        default() {
          return (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-view',
            onDragenter: handleDragenterWrapperEvent,
            onDragover: handleDragoverWrapperEvent
          }, [(0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-view-left'
          }, [showCheckbox ? (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-col'
          }, [(0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-head'
          }, [(0, _vue.h)(_checkbox.default)]), (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-body'
          }, [(0, _vue.h)(_checkbox.default)])]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-col'
          }, [(0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-head'
          }, (0, _core.getI18n)('vxe.formDesign.widgetProp.subtableProp.seqTitle')), (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-body'
          }, '1')])]), (0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-view-right'
          }, [(0, _vue.h)('div', {
            class: 'vxe-form-design--widget-subtable-view-wrapper'
          }, [(0, _vue.h)(_vue.TransitionGroup, {
            class: 'vxe-form-design--widget-subtable-view-list',
            tag: 'div',
            name: 'vxe-form-design--widget-subtable-view-list'
          }, {
            default: () => {
              return children ? children.map((childWidget, childIndex) => {
                return (0, _vue.h)(ViewSubItemComponent, {
                  key: childWidget.id,
                  parentWidget: widget,
                  widget: childWidget,
                  childIndex
                });
              }) : [];
            }
          }), (0, _vue.h)('div', {
            key: 'empty',
            class: 'vxe-form-design--widget-subtable-view-empty'
          }, (0, _core.getI18n)('vxe.formDesign.widgetProp.subtableProp.colPlace'))])])]);
        }
      });
    };
  }
});
const WidgetSubtableViewComponent = exports.WidgetSubtableViewComponent = (0, _vue.defineComponent)({
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const VxeTableGridComponent = _core.VxeUI.getComponent('VxeGrid');
    const $xeFormView = (0, _vue.inject)('$xeFormView', null);
    const {
      computeKebabCaseName
    } = (0, _use.useWidgetName)(props);
    const refGrid = (0, _vue.ref)();
    const defaultDataList = (0, _vue.ref)([{}]);
    const computeFormReadonly = (0, _vue.computed)(() => {
      if ($xeFormView) {
        return $xeFormView.props.readonly;
      }
      return false;
    });
    const computeSubtableColumns = (0, _vue.computed)(() => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        children,
        options
      } = widget;
      const formReadonly = computeFormReadonly.value;
      const columns = [];
      if (options.showCheckbox) {
        columns.push({
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        });
      }
      columns.push({
        type: 'seq',
        width: 60,
        fixed: 'left'
      });
      if (children) {
        children.forEach(childWidget => {
          const {
            name
          } = childWidget;
          const compConf = _core.renderer.get(name) || {};
          const parseSubtableColumn = compConf.parseFormDesignWidgetSubtableColumn;
          let colConf = {
            field: childWidget.field,
            title: childWidget.title
          };
          if (parseSubtableColumn) {
            colConf = Object.assign(colConf, parseSubtableColumn({
              $formView: $xeFormView,
              name: childWidget.name,
              widget: childWidget,
              readonly: !!formReadonly
            }));
          } else {
            if (formReadonly) {
              colConf.cellRender = {
                name: childWidget.name,
                props: childWidget.options
              };
            } else {
              colConf.editRender = {
                name: childWidget.name,
                props: childWidget.options
              };
            }
          }
          const renderSubtableDefaultView = compConf.renderFormDesignWidgetSubtableDefaultView;
          const renderSubtableCellView = compConf.renderFormDesignWidgetSubtableCellView || renderSubtableDefaultView;
          const renderSubtableEditView = compConf.renderFormDesignWidgetSubtableEditView;
          const colSlots = {};
          if (renderSubtableDefaultView || renderSubtableCellView) {
            colSlots.default = slotParams => {
              const {
                isEdit,
                column
              } = slotParams;
              const {
                editRender,
                cellRender
              } = column;
              const params = Object.assign({
                widget: childWidget
              }, slotParams);
              if (isEdit && editRender) {
                if (renderSubtableCellView) {
                  return (0, _vn.getSlotVNs)(renderSubtableCellView(editRender, params));
                }
              }
              if (renderSubtableDefaultView) {
                return (0, _vn.getSlotVNs)(renderSubtableDefaultView(cellRender || {}, params));
              }
              return [];
            };
          }
          if (renderSubtableEditView) {
            colSlots.edit = slotParams => {
              const {
                column
              } = slotParams;
              const {
                editRender
              } = column;
              const params = Object.assign({
                widget: childWidget
              }, slotParams);
              return (0, _vn.getSlotVNs)(renderSubtableEditView(editRender, params));
            };
          }
          colConf.slots = colSlots;
          columns.push(colConf);
        });
      }
      if (!formReadonly) {
        columns.push({
          field: 'action',
          title: '操作',
          fixed: 'right',
          width: 80,
          slots: {
            default({
              row
            }) {
              return (0, _vue.h)(_button.default, {
                mode: 'text',
                icon: 'vxe-icon-delete',
                status: 'error',
                onClick() {
                  removeSubRow(row);
                }
              });
            }
          }
        });
      }
      return columns;
    });
    const computeGridOptions = (0, _vue.computed)(() => {
      const {
        renderParams
      } = props;
      const {
        widget,
        isEditMode
      } = renderParams;
      const subtableColumns = computeSubtableColumns.value;
      const formReadonly = computeFormReadonly.value;
      const gridConf = {
        border: true,
        showOverflow: true,
        height: 300,
        columnConfig: {
          resizable: true,
          minWidth: 140
        },
        rowConfig: {
          keyField: '_id'
        },
        data: isEditMode ? defaultDataList.value : $xeFormView ? $xeFormView.getItemValue(widget) : null,
        columns: subtableColumns,
        toolbarConfig: {
          zoom: true,
          custom: false,
          slots: {
            buttons: 'toolbarButtons'
          }
        }
      };
      if (!formReadonly) {
        gridConf.keepSource = true;
        gridConf.editConfig = {
          mode: 'row',
          trigger: 'click',
          showStatus: true
        };
      }
      return gridConf;
    });
    const getSubRecord = () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const record = {
        _id: Date.now()
      };
      _xeUtils.default.each(widget.children, childWidget => {
        record[childWidget.field] = null;
      });
      return record;
    };
    const addSubRowEvent = () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      if ($xeFormView) {
        let list = $xeFormView.getItemValue(widget);
        if (!_xeUtils.default.isArray(list)) {
          list = [];
        }
        const newRow = getSubRecord();
        list.unshift(newRow);
        $xeFormView.setItemValue(widget, list.slice(0)).then(() => {
          return (0, _vue.nextTick)().then(() => {
            const $grid = refGrid.value;
            if ($grid) {
              $grid.setEditRow(newRow);
            }
          });
        });
      }
    };
    const removeSubRow = row => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      if ($xeFormView) {
        const list = $xeFormView.getItemValue(widget);
        if (list) {
          $xeFormView.setItemValue(widget, list.filter(item => item._id !== row._id));
        }
      }
    };
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const kebabCaseName = computeKebabCaseName.value;
      const gridOptions = computeGridOptions.value;
      const formReadonly = computeFormReadonly.value;
      return (0, _vue.h)(_formItem.default, {
        class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
        title: widget.title,
        field: widget.field,
        span: 24
      }, {
        default() {
          return VxeTableGridComponent ? (0, _vue.h)(VxeTableGridComponent, Object.assign(Object.assign({}, gridOptions), {
            ref: refGrid
          }), {
            toolbarButtons() {
              return formReadonly ? [] : [(0, _vue.h)(_button.default, {
                content: '新增',
                icon: 'vxe-icon-add',
                status: 'primary',
                onClick: addSubRowEvent
              })];
            }
          }) : (0, _vue.createCommentVNode)();
        }
      });
    };
  }
});