vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
250 lines (249 loc) • 10.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.formItemProps = 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 _util = require("./util");
var _render = require("./render");
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 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
};
exports.formItemProps = formItemProps;
var _default = (0, _vue.defineComponent)({
name: 'VxeFormItem',
props: formItemProps,
setup: function (props, _a) {
var slots = _a.slots;
var refElem = (0, _vue.ref)();
var $xeform = (0, _vue.inject)('$xeform', {});
var formGather = (0, _vue.inject)('$xeformgather', null);
var formItem = (0, _vue.reactive)((0, _util.createItem)($xeform, props));
var xeformitem = {
formItem: formItem
};
var xeformiteminfo = {
itemConfig: formItem
};
formItem.slots = slots;
(0, _vue.provide)('$xeformiteminfo', xeformiteminfo);
(0, _vue.provide)('$xeformitem', xeformitem);
(0, _vue.provide)('$xeformgather', null);
(0, _util.watchItem)(props, formItem);
(0, _vue.onMounted)(function () {
(0, _util.assemItem)($xeform, refElem.value, formItem, formGather);
});
(0, _vue.onUnmounted)(function () {
(0, _util.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 = (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 || props.span;
var align = item.align || props.align;
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
};
var isRequired = false;
if (visible === false) {
return (0, _vue.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 = (0, _vn.getSlotVNs)(compConf.renderItemContent(itemRender, params));
} else if (field) {
contentVNs = ["".concat(_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.message));
}
var ons = ovTooltip ? {
onMouseenter: function (evnt) {
$xeform.triggerTitleTipEvent(evnt, params);
},
onMouseleave: $xeform.handleTitleTipLeaveEvent
} : {};
return (0, _vue.h)('div', {
ref: refElem,
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 renderVN = function () {
var formProps = $xeform ? $xeform.props : null;
return formProps && formProps.customLayout ? renderItem($xeform, formItem) : (0, _vue.h)('div', {
ref: refElem
});
};
var $xeformitem = {
renderVN: renderVN
};
return $xeformitem;
},
render: function () {
return this.renderVN();
}
});
exports.default = _default;