vxe-pc-ui
Version:
A vue based PC component library
327 lines (326 loc) • 10.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WidgetRowViewComponent = exports.WidgetRowEditComponent = void 0;
var _vue = require("vue");
var _util = require("../src/util");
var _core = require("@vxe-ui/core");
var _vn = require("../../ui/src/vn");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _formGroup = _interopRequireDefault(require("../../form/src/form-group"));
var _formItem = _interopRequireDefault(require("../../form/src/form-item"));
var _row = _interopRequireDefault(require("../../row/src/row"));
var _col = _interopRequireDefault(require("../../row/src/col"));
var _button = _interopRequireDefault(require("../../button/src/button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const ViewColItemComponent = (0, _vue.defineComponent)({
name: 'ViewColItem',
props: {
parentWidget: {
type: Object,
default: () => ({})
},
widget: {
type: Object,
default: () => ({})
},
span: Number,
colItemIndex: {
type: Number,
default: 0
}
},
emits: [],
setup(props) {
const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const {
reactData: formDesignReactData
} = $xeFormDesign;
const handleDragstartColItemEvent = 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 sortDragenterColItemEvent = evnt => {
const {
parentWidget,
colItemIndex
} = props;
const {
widgetObjList,
sortWidget
} = formDesignReactData;
const targetWidget = parentWidget.children[colItemIndex];
const formDesignInternalData = $xeFormDesign.internalData;
evnt.stopPropagation();
if (sortWidget && parentWidget && sortWidget.id !== parentWidget.id) {
if ((0, _util.hasFormDesignLayoutType)(sortWidget)) {
return;
}
if (!(0, _util.hasFormDesignLayoutType)(targetWidget)) {
const currRest = _xeUtils.default.findTree(widgetObjList, item => item && item.id === sortWidget.id, {
children: 'children'
});
if (currRest) {
const {
item,
index,
items,
parent
} = currRest;
// 如果数据异常，动态修复
if (parentWidget.children.length !== parentWidget.options.colSize) {
parentWidget.children = _xeUtils.default.range(0, parentWidget.options.colSize).map(index => {
return parentWidget.children[index] || $xeFormDesign.createEmptyWidget();
});
}
// 如果是 row 内移动
if (parent && parent.id === parentWidget.id) {
parentWidget.children[colItemIndex] = item;
parentWidget.children[index] = targetWidget;
} else {
// 如果已存在控件
if (targetWidget && targetWidget.name) {
return;
}
parentWidget.children[colItemIndex] = item;
items.splice(index, 1);
}
evnt.preventDefault();
formDesignInternalData.lastDragTime = Date.now();
$xeFormDesign.dispatchEvent('drag-widget', {
widget: item
}, evnt);
}
}
}
};
return () => {
const {
widget,
span
} = props;
const {
dragWidget,
activeWidget,
sortWidget
} = formDesignReactData;
return (0, _vue.h)(_formItem.default, {
span,
padding: false
}, {
default() {
const name = widget ? widget.name : '';
const compConf = _core.renderer.get(name) || {};
const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView;
const renderOpts = widget || {
name
};
const params = {
widget,
readonly: false,
disabled: false,
isEditMode: true,
isViewMode: false,
$formDesign: $xeFormDesign,
$formView: null
};
const isActive = activeWidget && widget && activeWidget.id === widget.id;
const isEmptyWidget = !renderWidgetDesignView;
return (0, _vue.h)('div', {
class: 'vxe-form-design--widget-row-view',
'data-widget-id': widget.id,
draggable: !isEmptyWidget,
onDragstart: handleDragstartColItemEvent,
onDragenter: sortDragenterColItemEvent,
onClick(evnt) {
if (widget) {
$xeFormDesign.handleClickWidget(evnt, widget);
}
}
}, [(0, _vue.h)('div', {
class: ['vxe-form-design--widget-row-view-item-inner', {
'is--empty': isEmptyWidget,
'is--active': isActive,
'is--sort': sortWidget && widget && sortWidget.id === widget.id,
'is--drag': dragWidget && widget && dragWidget.id === widget.id
}]
}, [renderWidgetDesignView ? (0, _vue.h)('div', {
class: 'vxe-form-design--widget-row-view-item-wrapper'
}, [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-row-view-item-box vxe-form--item-row'
}, (0, _vn.getSlotVNs)(renderWidgetDesignView(renderOpts, params))), 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)()]) : (0, _vue.h)('div', {
class: 'vxe-form-design--widget-row-view-empty'
}, '控件位置')])]);
}
});
};
}
});
const WidgetRowEditComponent = exports.WidgetRowEditComponent = (0, _vue.defineComponent)({
name: 'WidgetRowEdit',
props: {
renderOpts: {
type: Object,
default: () => ({})
},
renderParams: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const computedColObjList = (0, _vue.computed)(() => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const {
options
} = widget;
const {
colSpan
} = options;
const colList = colSpan ? `${colSpan}`.split(',') : [];
const rest = colList.map(span => Number(span));
return rest;
});
return () => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
return (0, _vue.h)(_formGroup.default, {
field: widget.field
}, {
default() {
const colObjList = computedColObjList.value;
return colObjList.map((span, colItemIndex) => {
return (0, _vue.h)(ViewColItemComponent, {
key: colItemIndex,
parentWidget: widget,
widget: widget.children[colItemIndex],
span,
colItemIndex
});
});
}
});
};
}
});
const WidgetRowViewComponent = exports.WidgetRowViewComponent = (0, _vue.defineComponent)({
name: 'WidgetRowView',
props: {
renderOpts: {
type: Object,
default: () => ({})
},
renderParams: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const $xeFormDesign = (0, _vue.inject)('$xeFormDesign', null);
const $xeFormView = (0, _vue.inject)('$xeFormView', null);
const computedColObjList = (0, _vue.computed)(() => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const {
options
} = widget;
const {
colSpan
} = options;
const colList = colSpan ? `${colSpan}`.split(',') : [];
const rest = colList.map(span => Number(span));
return rest;
});
return () => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const colObjList = computedColObjList.value;
return (0, _vue.h)(_row.default, {}, {
default() {
return colObjList.map((span, colItemIndex) => {
return (0, _vue.h)(_col.default, {
key: colItemIndex,
class: 'vxe-form--item-row',
span
}, {
default() {
const subWidget = widget.children[colItemIndex];
if (subWidget) {
const {
name
} = subWidget;
const compConf = _core.renderer.get(name) || {};
const renderWidgetDesignView = compConf.renderFormDesignWidgetView;
const renderOpts = subWidget;
const isEditMode = !!$xeFormDesign;
const params = {
widget: subWidget,
readonly: false,
disabled: false,
isEditMode,
isViewMode: !isEditMode,
$formDesign: $xeFormDesign,
$formView: $xeFormView
};
if (renderWidgetDesignView) {
return (0, _vn.getSlotVNs)(renderWidgetDesignView(renderOpts, params));
}
}
return (0, _vue.createCommentVNode)();
}
});
});
}
});
};
}
});