vxe-design
Version:
A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms
1,234 lines (1,214 loc) • 336 kB
JavaScript
import { VxeUI, renderer as renderer$2, getI18n as getI18n$4, getIcon as getIcon$2, useSize as useSize$1, getConfig as getConfig$1, createEvent as createEvent$1, renderEmptyElement as renderEmptyElement$1 } from '@vxe-ui/core';
export { VxeUI } from '@vxe-ui/core';
import { defineComponent, ref, reactive, h, inject, createCommentVNode, TransitionGroup, watch, provide, nextTick, computed, onMounted } from 'vue';
import XEUtils from 'xe-utils';
import 'dom-zindex';
const { setConfig: setConfig$1, setIcon } = VxeUI;
VxeUI.designVersion = "4.1.6";
setConfig$1({
formDesign: {
height: 400,
showHeader: true,
showPc: true,
showStyleSetting: false
},
formView: {},
listDesign: {
height: 400,
showPc: true
},
listView: {}
});
const iconPrefix = 'vxe-icon-';
setIcon({
// form-design
FORM_DESIGN_STYLE_SETTING: iconPrefix + 'layout',
FORM_DESIGN_PROPS_PC: iconPrefix + 'pc',
FORM_DESIGN_PROPS_MOBILE: iconPrefix + 'mobile',
FORM_DESIGN_PROPS_ADD: iconPrefix + 'add',
FORM_DESIGN_PROPS_EDIT: iconPrefix + 'edit',
FORM_DESIGN_WIDGET_ADD: iconPrefix + 'square-plus-fill',
FORM_DESIGN_WIDGET_COPY: iconPrefix + 'copy',
FORM_DESIGN_WIDGET_DELETE: iconPrefix + 'delete',
FORM_DESIGN_WIDGET_SWAP_LR: iconPrefix + 'swap',
FORM_DESIGN_WIDGET_OPTION_DELETE: iconPrefix + 'delete',
FORM_DESIGN_WIDGET_OPTION_EXPAND_OPEN: iconPrefix + 'square-plus',
FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE: iconPrefix + 'square-minus',
// list-design
LIST_DESIGN_FIELD_SETTING: iconPrefix + 'custom-column',
LIST_DESIGN_LIST_SETTING: iconPrefix + 'menu',
LIST_DESIGN_LIST_SETTING_SEARCH_DELETE: iconPrefix + 'delete',
LIST_DESIGN_LIST_SETTING_ACTIVE_DELETE: iconPrefix + 'delete'
});
const { log } = VxeUI;
const designVersion = `design v${"4.1.6"}`;
function createComponentLog(name) {
const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
const versionInfo = [uiVersion, tableVersion, ganttVersion, designVersion].join(' ');
return {
warnLog: log.create('warn', versionInfo + '] [' + name),
errLog: log.create('error', versionInfo + '] [' + name)
};
}
const warnLog = log.create('warn', designVersion);
const errLog$3 = log.create('error', designVersion);
function checkDependVersion() {
const pVersion = 4;
const sVersion = 11;
if (VxeUI.checkVersion) {
if (!VxeUI.checkVersion(VxeUI.tableVersion, pVersion, sVersion)) {
errLog$3('vxe.error.errorVersion', [`vxe-table@${VxeUI.tableVersion || '?'}`, `vxe-table v${pVersion}.${sVersion}+`]);
}
}
else {
errLog$3(`Requires vxe-table v${pVersion}.${sVersion}+`);
}
}
const defineVxeComponent = defineComponent;
var VxeFlowDesignComponent = defineVxeComponent({
name: 'VxeFlowDesign',
props: {},
emits: [],
setup(props, context) {
const { slots } = context;
const xID = XEUtils.uniqueId();
const refElem = ref();
const reactData = reactive({});
const refMaps = {
refElem
};
const computeMaps = {};
const $xeFlowDesign = {
xID,
props,
context,
reactData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps
};
const renderVN = () => {
const defaultSlot = slots.default;
return h('div', {
ref: refElem,
class: ['vxe-flow-design']
}, defaultSlot ? defaultSlot({}) : []);
};
$xeFlowDesign.renderVN = renderVN;
return $xeFlowDesign;
},
render() {
return this.renderVN();
}
});
const VxeFlowDesign = Object.assign({}, VxeFlowDesignComponent, {
install(app) {
checkDependVersion();
app.component(VxeFlowDesignComponent.name, VxeFlowDesignComponent);
}
});
if (VxeUI.dynamicApp) {
VxeUI.dynamicApp.use(VxeFlowDesign);
}
VxeUI.component(VxeFlowDesignComponent);
const FlowDesign = VxeFlowDesign;
var VxeFlowViewComponent = defineVxeComponent({
name: 'VxeFlowView',
props: {},
emits: [],
setup(props, context) {
const { slots } = context;
const xID = XEUtils.uniqueId();
const refElem = ref();
const reactData = reactive({});
const refMaps = {
refElem
};
const computeMaps = {};
const $xeFlowView = {
xID,
props,
context,
reactData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps
};
const renderVN = () => {
const defaultSlot = slots.default;
return h('div', {
ref: refElem,
class: ['vxe-flow-view']
}, defaultSlot ? defaultSlot({}) : []);
};
$xeFlowView.renderVN = renderVN;
return $xeFlowView;
},
render() {
return this.renderVN();
}
});
const VxeFlowView = Object.assign({}, VxeFlowViewComponent, {
install(app) {
checkDependVersion();
app.component(VxeFlowViewComponent.name, VxeFlowViewComponent);
}
});
if (VxeUI.dynamicApp) {
VxeUI.dynamicApp.use(VxeFlowView);
}
VxeUI.component(VxeFlowViewComponent);
const FlowView = VxeFlowView;
function toCssUnit(val, unit = 'px') {
if (XEUtils.isNumber(val) || /^\d+$/.test(`${val}`)) {
return `${val}${unit}`;
}
return `${val || ''}`;
}
function isEnableConf(conf) {
return conf && conf.enabled !== false;
}
let maxWidgetId = 100000;
function getNewWidgetId(widgetObjList) {
XEUtils.eachTree(widgetObjList, item => {
if (item) {
maxWidgetId = Math.max(maxWidgetId, item.id);
}
}, { children: 'children' });
return ++maxWidgetId;
}
/**
* 判断是否布局控件
*/
const hasFormDesignLayoutType = (widget) => {
if (widget) {
const widgetConf = getWidgetConfig(widget.name);
return widgetConf.group === 'layout';
}
return false;
};
const { errLog: errLog$2 } = createComponentLog('form-design');
// 控件原始配置信息，带响应
const refWidgetReactConfigMaps$1 = ref({});
const getWidgetConfig = (name) => {
const widgetReactConfigMaps = refWidgetReactConfigMaps$1.value;
return widgetReactConfigMaps[name] || {};
};
function getWidgetConfigTitle(name, $xeFormDesign) {
const widgetConf = getWidgetConfig(name);
if (widgetConf) {
const configTitle = widgetConf.title;
const params = { name, $formDesign: $xeFormDesign };
return XEUtils.toValueString(XEUtils.isFunction(configTitle) ? configTitle(params) : configTitle);
}
return name;
}
function getWidgetConfigCustomGroup(name, $xeFormDesign) {
const widgetConf = getWidgetConfig(name);
if (widgetConf) {
const configCustomGroup = widgetConf.customGroup;
const params = { name, $formDesign: $xeFormDesign };
return XEUtils.toValueString(XEUtils.isFunction(configCustomGroup) ? configCustomGroup(params) : configCustomGroup);
}
return name;
}
const validWidgetUniqueField = (field, widgetObjList) => {
return !XEUtils.findTree(widgetObjList, item => item.field === field, { children: 'children' });
};
class FormDesignWidgetInfo {
constructor($xeFormDesign, name, widgetObjList) {
Object.defineProperty(this, "id", {
enumerable: true,
configurable: true,
writable: true,
value: 0
});
Object.defineProperty(this, "field", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "title", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "name", {
enumerable: true,
configurable: true,
writable: true,
value: ''
});
Object.defineProperty(this, "required", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "hidden", {
enumerable: true,
configurable: true,
writable: true,
value: false
});
Object.defineProperty(this, "options", {
enumerable: true,
configurable: true,
writable: true,
value: {}
});
Object.defineProperty(this, "children", {
enumerable: true,
configurable: true,
writable: true,
value: []
});
Object.defineProperty(this, "model", {
enumerable: true,
configurable: true,
writable: true,
value: {
update: false,
value: ''
}
});
let customField = '';
if (name) {
const compConf = renderer$2.get(name) || {};
if (compConf) {
const widgetReactConfigMaps = refWidgetReactConfigMaps$1.value;
const createWidgetFormConfig = compConf.createFormDesignWidgetConfig;
if (createWidgetFormConfig) {
const params = { name, $formDesign: $xeFormDesign };
const widgetConfig = createWidgetFormConfig(params) || {};
const titleConf = widgetConfig.title;
const fieldConf = widgetConfig.field;
this.title = XEUtils.toValueString(XEUtils.isFunction(titleConf) ? titleConf(params) : titleConf);
this.options = widgetConfig.options || {};
this.children = widgetConfig.children || [];
if (fieldConf) {
if (XEUtils.isFunction(fieldConf)) {
customField = fieldConf({ name, $formDesign: $xeFormDesign });
}
else {
customField = fieldConf;
}
}
if (!widgetReactConfigMaps[name]) {
widgetReactConfigMaps[name] = Object.assign({}, widgetConfig);
refWidgetReactConfigMaps$1.value = Object.assign({}, widgetReactConfigMaps);
}
}
}
}
const widgetId = getNewWidgetId(widgetObjList);
if (customField) {
// 如果使用了自定义字段，验证字段名是否唯一
if (!validWidgetUniqueField(customField, widgetObjList)) {
errLog$2('vxe.error.uniField', [customField]);
}
}
this.id = widgetId;
this.field = customField || `${name}${widgetId}`.toLowerCase();
this.name = name;
}
}
function configToWidget(conf) {
const widget = new FormDesignWidgetInfo(null, conf.name, []);
widget.id = conf.id;
widget.title = conf.title || '';
widget.field = conf.field || '';
widget.required = conf.required || false;
widget.hidden = conf.hidden || false;
widget.options = Object.assign({}, widget.options, conf.options);
widget.children = conf.children ? conf.children.map(item => configToWidget(item)) : [];
return widget;
}
function getSlotVNs(vns) {
if (XEUtils.isArray(vns)) {
return vns;
}
return vns ? [vns] : [];
}
var LayoutWidgetComponent = defineVxeComponent({
props: {},
emits: [],
setup() {
const $xeFormDesign = inject('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const { reactData: formDesignReactData } = $xeFormDesign;
const dragstartEvent = (evnt) => {
const divEl = evnt.currentTarget;
const dataTransfer = evnt.dataTransfer;
const widgetName = divEl.getAttribute('data-widget-name') || '';
if ($xeFormDesign.validWidgetUnique(widgetName)) {
const dragWidget = $xeFormDesign.createWidget(widgetName);
if (dataTransfer) {
dataTransfer.setData('text/plain', widgetName);
}
formDesignReactData.sortWidget = null;
formDesignReactData.dragWidget = dragWidget;
}
else {
evnt.preventDefault();
}
};
const dragendEvent = (evnt) => {
evnt.preventDefault();
if (formDesignReactData.dragWidget) {
const newWidget = formDesignReactData.dragWidget;
formDesignReactData.activeWidget = newWidget;
$xeFormDesign.dispatchEvent('widget-add', { newWidget }, evnt);
// add-widget 已废弃
$xeFormDesign.dispatchEvent('add-widget', { newWidget }, evnt);
}
formDesignReactData.dragWidget = null;
formDesignReactData.sortWidget = null;
};
const cancelDragoverItem = (evnt, group) => {
const { widgetObjList, dragWidget } = formDesignReactData;
if (dragWidget) {
if (group.children.some(widget => widget.name === dragWidget.name)) {
const rest = XEUtils.findTree(widgetObjList, item => item && item.id === dragWidget.id, { children: 'children' });
if (rest) {
rest.items.splice(rest.index, 1);
}
}
}
};
const addNewWidget = (evnt, widgetName) => {
if ($xeFormDesign.validWidgetUnique(widgetName)) {
const { widgetObjList } = formDesignReactData;
const dragWidget = $xeFormDesign.createWidget(widgetName);
widgetObjList.push(dragWidget);
formDesignReactData.activeWidget = dragWidget;
formDesignReactData.sortWidget = null;
formDesignReactData.dragWidget = null;
$xeFormDesign.dispatchEvent('widget-add', { newWidget: dragWidget }, evnt);
// add-widget 已废弃
$xeFormDesign.dispatchEvent('add-widget', { newWidget: dragWidget }, evnt);
}
};
const renderWidgetIcon = (widgetConf) => {
const { icon } = widgetConf;
let icVns = [];
if (icon) {
if (XEUtils.isFunction(icon)) {
icVns = getSlotVNs(icon({ widget: widgetConf }));
}
else {
icVns.push(h('i', {
class: icon
}));
}
}
return h('div', {
class: 'vxe-form-design--widget-item-icon'
}, icVns);
};
const renderWidgetList = (group) => {
const widgetVNs = [];
if (group.children) {
group.children.forEach((widget, index) => {
const { name } = widget;
const configTitle = getWidgetConfigTitle(name, $xeFormDesign);
const compConf = renderer$2.get(name) || {};
const widgetConf = getWidgetConfig(name);
const renderWidgetItem = compConf.renderFormDesignWidgetItem;
widgetVNs.push(h('div', {
key: index,
class: 'vxe-form-design--widget-item'
}, h('div', {
class: 'vxe-form-design--widget-box',
'data-widget-name': name,
title: configTitle,
draggable: true,
onDragstart: dragstartEvent,
onDragend: dragendEvent
}, renderWidgetItem
? getSlotVNs(renderWidgetItem({}, { $formDesign: $xeFormDesign }))
: [
renderWidgetIcon(widgetConf),
h('div', {
class: 'vxe-form-design--widget-item-name'
}, configTitle),
h('div', {
class: 'vxe-form-design--widget-item-add',
onClick(evnt) {
addNewWidget(evnt, name);
}
}, [
h('i', {
class: getIcon$2().FORM_DESIGN_WIDGET_ADD
})
])
])));
});
}
return widgetVNs;
};
const renderWidgetGroups = () => {
const { widgetConfigs } = formDesignReactData;
return widgetConfigs.map((config, gIndex) => {
const { title, group } = config;
return h('div', {
key: gIndex,
class: 'vxe-form-design--widget-group'
}, [
h('div', {
class: 'vxe-form-design--widget-title'
}, group ? getI18n$4(`vxe.formDesign.widget.group.${group}`) : `${title || ''}`),
h('div', {
class: 'vxe-form-design--widget-list',
onDragover(evnt) {
cancelDragoverItem(evnt, config);
}
}, renderWidgetList(config))
]);
});
};
return () => {
return h('div', {
class: 'vxe-form-design--widget'
}, renderWidgetGroups());
};
}
});
const ViewItemComponent = defineVxeComponent({
name: 'FormDesignLayoutViewItem',
props: {
item: {
type: Object,
default: () => ({})
},
itemIndex: {
type: Number,
default: 0
},
items: {
type: Array,
default: () => []
}
},
emits: [],
setup(props, { slots }) {
const VxeUIButtonComponent = VxeUI.getComponent('vxe-button');
const $xeFormDesign = inject('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const { reactData: formDesignReactData } = $xeFormDesign;
const sortDragstartEvent = (evnt) => {
const { widgetObjList } = formDesignReactData;
const divEl = evnt.currentTarget;
const widgetId = Number(divEl.getAttribute('data-widget-id'));
const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' });
if (currRest) {
formDesignReactData.dragWidget = null;
formDesignReactData.sortWidget = currRest.item;
}
};
const sortDragendEvent = () => {
formDesignReactData.activeWidget = formDesignReactData.sortWidget;
formDesignReactData.sortWidget = null;
};
const sortDragenterEvent = (evnt) => {
const { widgetObjList, sortWidget } = formDesignReactData;
const formDesignInternalData = $xeFormDesign.internalData;
const { lastDragTime } = formDesignInternalData;
if (lastDragTime && lastDragTime > Date.now() - 300) {
evnt.preventDefault();
return;
}
if (sortWidget) {
const divEl = evnt.currentTarget;
evnt.preventDefault();
const widgetId = Number(divEl.getAttribute('data-widget-id'));
if (widgetId !== sortWidget.id) {
const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' });
if (targetRest) {
const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === sortWidget.id, { children: 'children' });
if (currRest) {
// 控件换位置
if (currRest.parent && currRest.parent.name === 'row') {
// 如是是从 row 移出
currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget();
}
else {
currRest.items.splice(currRest.index, 1);
}
targetRest.items.splice(targetRest.index, 0, currRest.item);
formDesignInternalData.lastDragTime = Date.now();
$xeFormDesign.dispatchEvent('widget-drag', { widget: currRest.item }, evnt);
// drag-widget 已废弃
$xeFormDesign.dispatchEvent('drag-widget', { widget: currRest.item }, evnt);
}
}
}
}
};
// const dragoverItemEvent = (evnt: DragEvent) => {
// // const { sortWidget, dragWidget } = formDesignReactData
// // if (sortWidget || dragWidget) {
// // evnt.preventDefault()
// // }
// }
const handleClickEvent = (evnt, item) => {
$xeFormDesign.handleClickWidget(evnt, item);
};
return () => {
const { dragWidget, activeWidget, sortWidget } = formDesignReactData;
const { item } = props;
const { name } = item;
const isActive = activeWidget && activeWidget.id === item.id;
const defaultSlot = slots.default;
return h('div', {
key: item.id,
'data-widget-id': item.id,
draggable: true,
class: ['vxe-form-design--preview-item', `widget-${XEUtils.kebabCase(name)}`, {
'is--active': isActive,
'is--sort': sortWidget && sortWidget.id === item.id,
'is--drag': dragWidget && dragWidget.id === item.id
}],
onDragstart: sortDragstartEvent,
onDragend: sortDragendEvent,
onDragenter: sortDragenterEvent,
// onDragover: dragoverItemEvent,
onContextmenu(evnt) {
$xeFormDesign.handleContextmenuWidget(evnt, item);
},
onClick(evnt) {
handleClickEvent(evnt, item);
}
}, [
h('div', {
class: 'vxe-form-design--preview-item-view vxe-form--item-row'
}, defaultSlot ? defaultSlot({}) : []),
isActive
? h('div', {
class: 'vxe-form-design--preview-item-operate'
}, [
h(VxeUIButtonComponent, {
icon: getIcon$2().FORM_DESIGN_WIDGET_COPY,
status: 'primary',
size: 'mini',
circle: true,
onClick(params) {
$xeFormDesign.handleCopyWidget(params.$event, item);
}
}),
h(VxeUIButtonComponent, {
icon: getIcon$2().FORM_DESIGN_WIDGET_DELETE,
status: 'danger',
size: 'mini',
circle: true,
onClick(params) {
$xeFormDesign.handleRemoveWidget(params.$event, item);
}
})
])
: createCommentVNode()
]);
};
}
});
var LayoutPreviewComponent$1 = defineVxeComponent({
name: 'FormDesignLayoutPreview',
props: {},
emits: [],
setup() {
const VxeUIFormComponent = VxeUI.getComponent('vxe-form');
const $xeFormDesign = inject('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const { reactData: formDesignReactData } = $xeFormDesign;
const dragenterEvent = (evnt) => {
const { widgetObjList, dragWidget } = formDesignReactData;
if (dragWidget) {
evnt.preventDefault();
const rest = XEUtils.findTree(widgetObjList, item => item && item.id === dragWidget.id, { children: 'children' });
if (!rest) {
formDesignReactData.sortWidget = dragWidget;
widgetObjList.push(dragWidget);
$xeFormDesign.dispatchEvent('widget-drag', { widget: dragWidget }, evnt);
// drag-widget 已废弃
$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 (hasFormDesignLayoutType(sortWidget)) {
return;
}
// const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
const currRest = XEUtils.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('widget-drag', { widget: item }, evnt);
// drag-widget 已废弃
$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 (hasFormDesignLayoutType(sortWidget)) {
return;
}
// const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
const currRest = XEUtils.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('widget-drag', { widget: item }, evnt);
// drag-widget 已废弃
$xeFormDesign.dispatchEvent('drag-widget', { widget: item }, evnt);
}
}
};
return () => {
const { widgetObjList } = formDesignReactData;
return h('div', {
class: 'vxe-form-design--preview',
onDragenter: dragenterEvent,
onDragover: dragoverEvent
}, [
h('div', {
class: 'vxe-form-design--preview-wrapper'
}, [
h('div', {
class: 'vxe-form-design--preview-place-widget',
onDragenter: handleDragenterTopPlaceEvent
}),
h(VxeUIFormComponent, {
customLayout: true,
span: 24,
vertical: true
}, {
default() {
return h(TransitionGroup, {
class: 'vxe-form-design--preview-list',
tag: 'div',
name: 'vxe-form-design--preview-list'
}, {
default: () => {
return widgetObjList.map((widget, widgetIndex) => {
return h(ViewItemComponent, {
key: widget.id,
item: widget,
itemIndex: widgetIndex,
items: widgetObjList
}, {
default() {
const { name } = widget;
const compConf = renderer$2.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 ? getSlotVNs(renderWidgetDesignView(renderOpts, params)) : [];
}
});
});
}
});
}
}),
h('div', {
class: 'vxe-form-design--preview-place-widget',
onDragenter: handleDragenterBottomPlaceEvent
})
])
]);
};
}
});
const { getIcon: getIcon$1, getI18n: getI18n$3 } = VxeUI;
const DefaultSettingFormComponent = defineVxeComponent({
name: 'DefaultSettingForm',
props: {
formData: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const VxeUIFormComponent = VxeUI.getComponent('vxe-form');
const VxeUIFormItemComponent = VxeUI.getComponent('vxe-form-item');
const VxeUISwitchComponent = VxeUI.getComponent('vxe-switch');
const VxeUITextComponent = VxeUI.getComponent('vxe-text');
const $xeFormDesign = inject('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const { props: formDesignProps } = $xeFormDesign;
return () => {
const { formData } = props;
return h(VxeUIFormComponent, {
data: formData,
span: 24,
vertical: true,
titleBold: true
}, {
default() {
const { showPc, showMobile } = formDesignProps;
return [
h(VxeUIFormItemComponent, {
title: getI18n$3('vxe.formDesign.formName'),
field: 'title',
itemRender: { name: 'VxeInput', props: { placeholder: getI18n$3('vxe.formDesign.defFormTitle') } }
}),
showPc && showMobile
? h(VxeUIFormItemComponent, {
title: getI18n$3('vxe.formDesign.widgetProp.displaySetting.name')
}, {
default() {
return [
h('div', {
class: 'vxe-form-design--widget-form-item-devices'
}, [
h('div', {
class: 'vxe-form-design--widget-form-item-pc'
}, [
h(VxeUITextComponent, {
icon: getIcon$1().FORM_DESIGN_PROPS_PC,
content: getI18n$3('vxe.formDesign.widgetProp.displaySetting.pc')
}),
h(VxeUISwitchComponent, {
modelValue: formData.pcVisible,
openLabel: getI18n$3('vxe.formDesign.widgetProp.displaySetting.visible'),
closeLabel: getI18n$3('vxe.formDesign.widgetProp.displaySetting.hidden'),
'onUpdate:modelValue'(val) {
formData.pcVisible = val;
}
})
]),
h('div', {
class: 'vxe-form-design--widget-form-item-mobile'
}, [
h(VxeUITextComponent, {
icon: getIcon$1().FORM_DESIGN_PROPS_MOBILE,
content: getI18n$3('vxe.formDesign.widgetProp.displaySetting.mobile')
}),
h(VxeUISwitchComponent, {
modelValue: formData.mobileVisible,
openLabel: getI18n$3('vxe.formDesign.widgetProp.displaySetting.visible'),
closeLabel: getI18n$3('vxe.formDesign.widgetProp.displaySetting.hidden'),
'onUpdate:modelValue'(val) {
formData.mobileVisible = val;
}
})
])
])
];
}
})
: createCommentVNode()
];
}
});
};
}
});
var LayoutSettingComponent$1 = defineVxeComponent({
name: 'FormDesignLayoutSetting',
props: {},
emits: [],
setup() {
const VxeUITabsComponent = VxeUI.getComponent('vxe-tabs');
const VxeUITabPaneComponent = VxeUI.getComponent('vxe-tab-pane');
const $xeFormDesign = inject('$xeFormDesign', null);
if (!$xeFormDesign) {
return () => [];
}
const { props: formDesignProps, reactData: formDesignReactData } = $xeFormDesign;
const activeTab = ref(1);
const renderSettingWidgetForm = () => {
const { activeWidget } = formDesignReactData;
if (activeWidget) {
const compConf = renderer$2.get(activeWidget.name);
const renderWidgetFormView = compConf ? compConf.renderFormDesignWidgetFormView : null;
if (renderWidgetFormView) {
const isEditMode = true;
return h('div', {
class: 'vxe-form-design--custom-widget-form-view'
}, getSlotVNs(renderWidgetFormView(activeWidget, { isEditMode, isViewMode: !isEditMode, widget: activeWidget, $formDesign: $xeFormDesign, $formView: null })));
}
}
return createCommentVNode();
};
const renderSettingConfigForm = () => {
const { formRender } = formDesignProps;
const { formData } = formDesignReactData;
if (formRender) {
const compConf = renderer$2.get(formRender.name);
const renderSettingView = compConf ? compConf.renderFormDesignSettingFormView : null;
if (renderSettingView) {
return h('div', {
class: 'vxe-form-design--custom-setting-form-view'
}, getSlotVNs(renderSettingView(formRender, { formConfig: formData, $formDesign: $xeFormDesign })));
}
}
return h(DefaultSettingFormComponent, {
formData
});
};
watch(() => formDesignReactData.activeWidget, () => {
activeTab.value = 1;
});
return () => {
return h('div', {
class: 'vxe-form-design--setting'
}, [
h('div', {
class: 'vxe-form-design--setting-form'
}, [
h(VxeUITabsComponent, {
modelValue: activeTab.value,
titleWidth: '50%',
titleAlign: 'center',
padding: true,
class: 'vxe-form-design--setting-form-tabs',
'onUpdate:modelValue'(val) {
activeTab.value = val;
}
}, {
default() {
return [
h(VxeUITabPaneComponent, {
title: getI18n$4('vxe.formDesign.widgetPropTab'),
name: 1
}, {
default() {
return renderSettingWidgetForm();
}
}),
h(VxeUITabPaneComponent, {
title: getI18n$4('vxe.formDesign.widgetFormTab'),
name: 2
}, {
default() {
return renderSettingConfigForm();
}
})
];
}
})
])
]);
};
}
});
const getDefaultSettingFormData$1 = (defOpts) => {
return {
title: '',
pcVisible: defOpts ? !!defOpts.pcVisible : true,
pcVertical: true,
pcTitleBold: true,
pcTitleColon: false,
pcTitleAlign: '',
pcTitleWidth: '',
pcTitleAutoWidth: true,
pcTitleWidthUnit: '',
mobileVisible: defOpts ? !!defOpts.mobileVisible : true,
mobileVertical: true,
mobileTitleBold: true,
mobileTitleColon: false,
mobileTitleAlign: '',
mobileTitleWidth: '',
mobileTitleAutoWidth: true,
mobileTitleWidthUnit: ''
};
};
const createDefaultFormViewPCFormConfig = (params) => {
const { formConfig } = params;
return {
vertical: formConfig.pcVertical,
titleBold: formConfig.pcTitleBold,
titleColon: formConfig.pcTitleColon,
titleAlign: formConfig.pcTitleAlign,
titleWidth: formConfig.pcTitleAutoWidth ? 'auto' : formConfig.pcTitleWidth
};
};
const createDefaultFormViewMobileFormConfig = (params) => {
const { formConfig } = params;
return {
vertical: formConfig.mobileVertical,
titleBold: formConfig.mobileTitleBold,
titleColon: formConfig.mobileTitleColon,
titleAlign: formConfig.mobileTitleAlign,
titleWidth: formConfig.mobileTitleAutoWidth ? 'auto' : formConfig.mobileTitleWidth
};
};
var VxeFormViewComponent = defineVxeComponent({
name: 'VxeFormView',
props: {
modelValue: Object,
config: Object,
readonly: Boolean,
disabled: Boolean,
viewRender: Object,
formOptions: Object,
createFormConfig: Function,
size: {
type: String,
default: () => getConfig$1().formView.size || getConfig$1().size
}
},
emits: [
'update:modelValue',
'submit',
'reset'
],
setup(props, context) {
const VxeUIFormComponent = VxeUI.getComponent('vxe-form');
const VxeUIFormGroupComponent = VxeUI.getComponent('vxe-form-group');
const VxeUIFormItemComponent = VxeUI.getComponent('vxe-form-item');
const { emit, slots } = context;
const xID = XEUtils.uniqueId();
const refElem = ref();
const formRef = ref();
const { computeSize } = useSize$1(props);
const $xeFormDesignLayoutStyle = inject('$xeFormDesignLayoutStyle', null);
const reactData = reactive({
formConfig: {},
formRules: {},
widgetObjList: []
});
const refMaps = {
refElem
};
const computeMaps = {
computeSize
};
const $xeFormView = {
xID,
props,
context,
reactData,
getRefMaps: () => refMaps,
getComputeMaps: () => computeMaps
};
const clearConfig = () => {
return loadConfig({
formConfig: {},
widgetData: []
});
};
const loadConfig = (config) => {
if (config) {
const { formConfig, widgetData } = config;
loadFormConfig(formConfig || {});
loadWidgetData(widgetData || []);
}
return nextTick();
};
const parseConfig = (config) => {
const { formConfig, widgetData } = config || {};
const widgetObjList = parseWidgetData(widgetData || []);
return Object.assign(Object.assign({}, parseForm(widgetObjList)), { formConfig: parseFormConfig(formConfig || {}), widgetData: widgetObjList });
};
const parseFormConfig = (formConfig) => {
const { viewRender, createFormConfig, formOptions } = props;
const params = { viewRender, formConfig };
if (createFormConfig) {
return createFormConfig(params);
}
const { name } = viewRender || {};
const compConf = renderer$2.get(name) || {};
const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null;
return Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params), formOptions);
};
const loadFormConfig = (formConfig) => {
reactData.formConfig = parseFormConfig(formConfig);
return nextTick();
};
const parseForm = (widgetObjList) => {
const formData = {};
const formRules = {};
XEUtils.eachTree(widgetObjList, widget => {
const { name, field, required } = widget;
const compConf = renderer$2.get(name) || {};
const createWidgetFieldValue = compConf.createFormDesignWidgetFieldValue;
const createWidgetFieldRules = compConf.createFormDesignWidgetFieldRules;
formData[field] = createWidgetFieldValue ? createWidgetFieldValue({ widget, $formView: $xeFormView }) : getWidgetDefaultValue(widget);
if (createWidgetFieldRules) {
const rules = createWidgetFieldRules({ widget, $formView: $xeFormView });
if (rules && rules.length) {
formRules[field] = rules;
}
}
else if (required) {
formRules[field] = getWidgetDefaultRule();
}
}, { children: 'children' });
return {
formData,
formRules
};
};
const parseWidgetData = (widgetData) => {
return (widgetData || []).map(item => configToWidget(item));
};
const loadWidgetData = (widgetData) => {
const widgetObjList = parseWidgetData(widgetData);
reactData.widgetObjList = widgetObjList;
const { formData, formRules } = parseForm(widgetObjList);
reactData.formRules = formRules;
emit('update:modelValue', Object.assign(formData, props.modelValue));
return nextTick();
};
const getWidgetDefaultValue = (widget) => {
switch (widget.name) {
case 'subtable':
return [];
}
return null;
};
const getWidgetDefaultRule = () => {
return [
{ required: true, content: '该填写该字段！' }
];
};
const updateWidgetStatus = (widget, value) => {
const { field } = widget;
const $form = formRef.value;
if ($form) {
$form.updateStatus({ field }, value);
}
return nextTick();
};
const setItemValue = (widget, value) => {
const { modelValue } = props;
const { field } = widget;
const $form = formRef.value;
if (modelValue) {
modelValue[field] = value;
}
if ($form) {
$form.updateStatus({ field }, value);
}
return nextTick();
};
const getItemValue = (widget) => {
const { modelValue } = props;
if (modelValue) {
return modelValue[widget.field];
}
return null;
};
const dispatchEvent = (type, params, evnt) => {
emit(type, createEvent$1(evnt, { $formView: $xeFormView }, params));
};
const toWidgetFields = (widget) => {
if (widget) {
if (XEUtils.isArray(widget)) {
return widget.map(item => item.name);
}
else {
return [widget.name];
}
}
return null;
};
const formViewMethods = {
dispatchEvent,
clearConfig,
loadConfig,
parseConfig,
loadFormConfig,
loadWidgetData,
updateWidgetStatus,
setItemValue,
getItemValue,
validate() {
const $form = formRef.value;
if ($form) {
return $form.validate();
}
return nextTick();
},
validateWidget(widget) {
const $form = formRef.value;
if ($form) {
return $form.validateField(toWidgetFields(widget));
}
return nextTick();
},
clearValidate(widget) {
const $form = formRef.value;
if ($form) {
return $form.clearValidate(toWidgetFields(widget));
}
return nextTick();
},
reset() {
const { widgetObjList } = reactData;
const { formData } = parseForm(widgetObjList);
emit('update:modelValue', Object.assign({}, formData));
return nextTick();
},
/**
* 已废弃
* @deprecated
*/
updateItemStatus(widget, value) {
warnLog('vxe.error.delFunc', ['updateItemStatus', 'updateWidgetStatus']);
return updateWidgetStatus(widget, value);
}
};
const handleSubmit = (params) => {
dispatchEvent('submit', params, params.$event);
};
const handleReset = (params) => {
dispatchEvent('reset', params, params.$event);
};
const formViewPrivateMethods = {};
Object.assign($xeFormView, formViewMethods, formViewPrivateMethods);
const renderVN = () => {
const { readonly, disabled, modelValue } = props;
const { formConfig, formRules, widgetObjList } = reactData;
const vSize = computeSize.value;
const topSlot = slots.top;
const bottomSlot = slots.bott