vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
194 lines (193 loc) • 9.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _conf = _interopRequireDefault(require("../../v-x-e-table/src/conf"));
var _vXETable = require("../../v-x-e-table");
var _utils = require("../../tools/utils");
var _vn = require("../../tools/vn");
var _render = require("./render");
var _util = require("./util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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);
};
var VxeFormConfigItem = (0, _vue.defineComponent)({
name: 'VxeFormConfigItem',
props: {
itemConfig: Object
},
setup: function (props) {
var $xeform = (0, _vue.inject)('$xeform', {});
var xeformiteminfo = {
itemConfig: props.itemConfig
};
(0, _vue.provide)('$xeformiteminfo', xeformiteminfo);
(0, _vue.provide)('$xeformgather', null);
var renderVN = function () {
var reactData = $xeform.reactData;
var _a = $xeform.props,
data = _a.data,
rules = _a.rules,
allSpan = _a.span,
allAlign = _a.align,
allTitleAlign = _a.titleAlign,
allTitleWidth = _a.titleWidth,
allTitleColon = _a.titleColon,
allTitleAsterisk = _a.titleAsterisk,
allTitleOverflow = _a.titleOverflow,
allVertical = _a.vertical;
var computeValidOpts = $xeform.getComputeMaps().computeValidOpts;
var item = props.itemConfig;
var collapseAll = reactData.collapseAll;
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,
children = item.children,
showTitle = item.showTitle,
contentClassName = item.contentClassName,
contentStyle = item.contentStyle,
titleClassName = item.titleClassName,
titleStyle = item.titleStyle;
var compConf = (0, _utils.isEnableConf)(itemRender) ? _vXETable.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 || allSpan;
var align = item.align || allAlign;
var titleAlign = _xeUtils.default.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
var titleWidth = _xeUtils.default.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
var titleColon = _xeUtils.default.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
var titleAsterisk = _xeUtils.default.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
var itemOverflow = _xeUtils.default.isUndefined(titleOverflow) || _xeUtils.default.isNull(titleOverflow) ? allTitleOverflow : titleOverflow;
var itemVertical = _xeUtils.default.isUndefined(vertical) || _xeUtils.default.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
};
if (visible === false) {
return (0, _vue.createCommentVNode)();
}
var isRequired = false;
if (rules) {
var itemRules = rules[field];
if (itemRules) {
isRequired = itemRules.some(function (rule) {
return rule.required;
});
}
}
// 如果为项集合
var isGather = children && children.length > 0;
if (isGather) {
var childVNs = children.map(function (childItem, index) {
return (0, _vue.h)(VxeFormConfigItem, {
key: index,
itemConfig: childItem
});
});
return childVNs.length ? (0, _vue.h)('div', {
class: ['vxe-form--gather vxe-row', item.id, span ? "vxe-col--".concat(span, " is--span") : '', className ? _xeUtils.default.isFunction(className) ? className(params) : className : '']
}, childVNs) : (0, _vue.createCommentVNode)();
}
var contentVNs = [];
if (defaultSlot) {
contentVNs = $xeform.callSlot(defaultSlot, params);
} else if (compConf && compConf.renderItemContent) {
contentVNs = (0, _vn.getSlotVNs)(compConf.renderItemContent(itemRender, params));
} else if (field) {
contentVNs = [_xeUtils.default.toValueString(_xeUtils.default.get(data, field))];
}
if (collapseNode) {
contentVNs.push((0, _vue.h)('div', {
class: 'vxe-form--item-trigger-node',
onClick: $xeform.toggleCollapseEvent
}, [(0, _vue.h)('span', {
class: 'vxe-form--item-trigger-text'
}, collapseAll ? _conf.default.i18n('vxe.form.unfolding') : _conf.default.i18n('vxe.form.folding')), (0, _vue.h)('i', {
class: ['vxe-form--item-trigger-icon', collapseAll ? _conf.default.icon.FORM_FOLDING : _conf.default.icon.FORM_UNFOLDING]
})]));
}
if (errRule && validOpts.showMessage) {
contentVNs.push((0, _vue.h)('div', {
class: 'vxe-form--item-valid',
style: errRule.maxWidth ? {
width: "".concat(errRule.maxWidth, "px")
} : null
}, errRule.content));
}
var ons = ovTooltip ? {
onMouseenter: function (evnt) {
$xeform.triggerTitleTipEvent(evnt, params);
},
onMouseleave: $xeform.handleTitleTipLeaveEvent
} : {};
return (0, _vue.h)('div', {
class: ['vxe-form--item', item.id, span ? "vxe-col--".concat(span, " is--span") : '', className ? _xeUtils.default.isFunction(className) ? className(params) : className : '', itemClassName ? _xeUtils.default.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': (0, _util.isActivetem)($xeform, item),
'is--error': showError
}],
style: _xeUtils.default.isFunction(itemStyle) ? itemStyle(params) : itemStyle
}, [(0, _vue.h)('div', {
class: 'vxe-form--item-inner'
}, [showTitle !== false && (title || titleSlot) ? (0, _vue.h)('div', __assign({
class: ['vxe-form--item-title', titleAlign ? "align--".concat(titleAlign) : '', hasEllipsis ? 'is--ellipsis' : '', itemTitleClassName ? _xeUtils.default.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName : '', titleClassName ? _xeUtils.default.isFunction(titleClassName) ? titleClassName(params) : titleClassName : ''],
style: Object.assign({}, _xeUtils.default.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, _xeUtils.default.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth ? {
width: isNaN(titleWidth) ? titleWidth : "".concat(titleWidth, "px")
} : null),
title: ovTitle ? (0, _utils.getFuncText)(title) : null
}, ons), (0, _render.renderTitle)($xeform, item)) : null, (0, _vue.h)('div', {
class: ['vxe-form--item-content', align ? "align--".concat(align) : '', itemContentClassName ? _xeUtils.default.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName : '', contentClassName ? _xeUtils.default.isFunction(contentClassName) ? contentClassName(params) : contentClassName : ''],
style: Object.assign({}, _xeUtils.default.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, _xeUtils.default.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
}, contentVNs)])]);
};
var $xeformconfigitem = {
renderVN: renderVN
};
return $xeformconfigitem;
},
render: function () {
return this.renderVN();
}
});
var _default = VxeFormConfigItem;
exports.default = _default;