vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
225 lines (224 loc) • 11 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { defineComponent, h, onUnmounted, inject, ref, provide, onMounted, createCommentVNode, reactive } from 'vue';
import XEUtils from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { VXETable } from '../../v-x-e-table';
import { getFuncText, isEnableConf } from '../../tools/utils';
import { getSlotVNs } from '../../tools/vn';
import { createItem, watchItem, destroyItem, assemItem, isActivetem } from './util';
import { renderTitle } from './render';
export var formItemProps = {
title: String,
field: String,
span: [String, Number],
align: String,
titleAlign: {
type: String,
default: null
},
titleWidth: {
type: [String, Number],
default: null
},
titleColon: {
type: Boolean,
default: null
},
titleAsterisk: {
type: Boolean,
default: null
},
showTitle: {
type: Boolean,
default: true
},
vertical: {
type: Boolean,
default: null
},
className: [String, Function],
contentClassName: [String, Function],
contentStyle: [Object, Function],
titleClassName: [String, Function],
titleStyle: [Object, Function],
titleOverflow: {
type: [Boolean, String],
default: null
},
titlePrefix: Object,
titleSuffix: Object,
resetValue: { default: null },
visibleMethod: Function,
visible: { type: Boolean, default: null },
folding: Boolean,
collapseNode: Boolean,
itemRender: Object
};
export default defineComponent({
name: 'VxeFormItem',
props: formItemProps,
setup: function (props, _a) {
var slots = _a.slots;
var refElem = ref();
var $xeform = inject('$xeform', {});
var formGather = inject('$xeformgather', null);
var formItem = reactive(createItem($xeform, props));
var xeformitem = { formItem: formItem };
var xeformiteminfo = { itemConfig: formItem };
formItem.slots = slots;
provide('$xeformiteminfo', xeformiteminfo);
provide('$xeformitem', xeformitem);
provide('$xeformgather', null);
watchItem(props, formItem);
onMounted(function () {
assemItem($xeform, refElem.value, formItem, formGather);
});
onUnmounted(function () {
destroyItem($xeform, formItem);
});
var renderItem = function ($xeform, item) {
var props = $xeform.props, reactData = $xeform.reactData;
var data = props.data, rules = props.rules, allTitleAlign = props.titleAlign, allTitleWidth = props.titleWidth, allTitleColon = props.titleColon, allTitleAsterisk = props.titleAsterisk, allTitleOverflow = props.titleOverflow, allVertical = props.vertical;
var collapseAll = reactData.collapseAll;
var computeValidOpts = $xeform.getComputeMaps().computeValidOpts;
var validOpts = computeValidOpts.value;
var slots = item.slots, title = item.title, visible = item.visible, folding = item.folding, field = item.field, collapseNode = item.collapseNode, itemRender = item.itemRender, showError = item.showError, errRule = item.errRule, className = item.className, titleOverflow = item.titleOverflow, vertical = item.vertical, showTitle = item.showTitle, contentClassName = item.contentClassName, contentStyle = item.contentStyle, titleClassName = item.titleClassName, titleStyle = item.titleStyle;
var compConf = isEnableConf(itemRender) ? VXETable.renderer.get(itemRender.name) : null;
var itemClassName = compConf ? compConf.itemClassName : '';
var itemStyle = compConf ? compConf.itemStyle : null;
var itemContentClassName = compConf ? compConf.itemContentClassName : '';
var itemContentStyle = compConf ? compConf.itemContentStyle : null;
var itemTitleClassName = compConf ? compConf.itemTitleClassName : '';
var itemTitleStyle = compConf ? compConf.itemTitleStyle : null;
var defaultSlot = slots ? slots.default : null;
var titleSlot = slots ? slots.title : null;
var span = item.span || props.span;
var align = item.align || props.align;
var titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
var titleWidth = XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
var titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
var titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
var itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow;
var itemVertical = (XEUtils.isUndefined(vertical) || XEUtils.isNull(vertical)) ? allVertical : vertical;
var ovEllipsis = itemOverflow === 'ellipsis';
var ovTitle = itemOverflow === 'title';
var ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
var hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
var params = { data: data, field: field, property: field, item: item, $form: $xeform, $grid: $xeform.xegrid };
var isRequired = false;
if (visible === false) {
return createCommentVNode();
}
if (rules) {
var itemRules = rules[field];
if (itemRules) {
isRequired = itemRules.some(function (rule) { return rule.required; });
}
}
var contentVNs = [];
if (defaultSlot) {
contentVNs = $xeform.callSlot(defaultSlot, params);
}
else if (compConf && compConf.renderItemContent) {
contentVNs = getSlotVNs(compConf.renderItemContent(itemRender, params));
}
else if (field) {
contentVNs = ["".concat(XEUtils.get(data, field))];
}
if (collapseNode) {
contentVNs.push(h('div', {
class: 'vxe-form--item-trigger-node',
onClick: $xeform.toggleCollapseEvent
}, [
h('span', {
class: 'vxe-form--item-trigger-text'
}, collapseAll ? GlobalConfig.i18n('vxe.form.unfolding') : GlobalConfig.i18n('vxe.form.folding')),
h('i', {
class: ['vxe-form--item-trigger-icon', collapseAll ? GlobalConfig.icon.FORM_FOLDING : GlobalConfig.icon.FORM_UNFOLDING]
})
]));
}
if (errRule && validOpts.showMessage) {
contentVNs.push(h('div', {
class: 'vxe-form--item-valid',
style: errRule.maxWidth ? {
width: "".concat(errRule.maxWidth, "px")
} : null
}, errRule.message));
}
var ons = ovTooltip ? {
onMouseenter: function (evnt) {
$xeform.triggerTitleTipEvent(evnt, params);
},
onMouseleave: $xeform.handleTitleTipLeaveEvent
} : {};
return h('div', {
ref: refElem,
class: [
'vxe-form--item',
item.id,
span ? "vxe-col--".concat(span, " is--span") : '',
className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
{
'is--title': title,
'is--colon': titleColon,
'is--vertical': itemVertical,
'is--asterisk': titleAsterisk,
'is--required': isRequired,
'is--hidden': folding && collapseAll,
'is--active': isActivetem($xeform, item),
'is--error': showError
}
],
style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
}, [
h('div', {
class: 'vxe-form--item-inner'
}, [
(showTitle !== false) && (title || titleSlot) ? h('div', __assign({ class: [
'vxe-form--item-title',
titleAlign ? "align--".concat(titleAlign) : '',
hasEllipsis ? 'is--ellipsis' : '',
itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
], style: Object.assign({}, XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth ? {
width: isNaN(titleWidth) ? titleWidth : "".concat(titleWidth, "px")
} : null), title: ovTitle ? getFuncText(title) : null }, ons), renderTitle($xeform, item)) : null,
h('div', {
class: [
'vxe-form--item-content',
align ? "align--".concat(align) : '',
itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
],
style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
}, contentVNs)
])
]);
};
var renderVN = function () {
var formProps = $xeform ? $xeform.props : null;
return formProps && formProps.customLayout ? renderItem($xeform, formItem) : h('div', {
ref: refElem
});
};
var $xeformitem = {
renderVN: renderVN
};
return $xeformitem;
},
render: function () {
return this.renderVN();
}
});