vxe-pc-ui
Version:
A vue based PC component library
269 lines (268 loc) • 8.18 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useWidgetPropDataSource = useWidgetPropDataSource;
var _vue = require("vue");
var _core = require("@vxe-ui/core");
var _formItem = _interopRequireDefault(require("../../../form/src/form-item"));
var _button = _interopRequireDefault(require("../../../button/src/button"));
var _textarea = _interopRequireDefault(require("../../../textarea/src/textarea"));
var _tip = _interopRequireDefault(require("../../../tip/src/tip"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function useWidgetPropDataSource(props, renderConfig) {
const renConf = Object.assign({}, renderConfig);
const isSubOption = renConf.isSubOption;
const optionsContent = (0, _vue.ref)('');
const expandIndexList = (0, _vue.ref)([]);
const addOptionEvent = () => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const options = widget.options.options || [];
options.push({
value: (0, _core.getI18n)('vxe.formDesign.widgetProp.dataSource.defValue', [options.length + 1])
});
widget.options.options = [...options];
};
const subRE = /^(\s|\t)+/;
const hasSubOption = str => {
return subRE.test(str);
};
const expandAllOption = () => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const options = widget.options.options || [];
const indexList = [];
options.forEach((group, gIndex) => {
const {
options
} = group;
if (options && options.length) {
indexList.push(gIndex);
}
});
expandIndexList.value = indexList;
};
const toggleExpandOption = (item, gIndex) => {
if (expandIndexList.value.includes(gIndex)) {
expandIndexList.value = expandIndexList.value.filter(num => num !== gIndex);
} else {
expandIndexList.value.push(gIndex);
}
};
const removeOptionEvent = (item, group) => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const {
options
} = widget;
if (group) {
if (group.options) {
group.options = group.options.filter(obj => obj !== item);
}
} else {
options.options = options.options.filter(obj => obj !== item);
}
};
const confirmBatchAddOptionEvent = () => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const optList = [];
const rowList = optionsContent.value.split('\n');
let prevGroup = null;
if (isSubOption) {
rowList.forEach((str, index) => {
const nextStr = rowList[index + 1];
const value = str.trim();
if (!value) {
return;
}
const item = {
value
};
if (prevGroup) {
if (hasSubOption(str)) {
prevGroup.options.push(item);
return;
}
prevGroup = null;
optList.push(item);
} else {
optList.push(item);
}
if (nextStr) {
if (hasSubOption(nextStr)) {
prevGroup = Object.assign(item, {
options: []
});
}
}
});
} else {
rowList.forEach(str => {
optList.push({
value: str.trim()
});
});
}
widget.options.options = optList;
expandAllOption();
};
const openPopupEditEvent = () => {
var _a;
const {
renderParams
} = props;
const {
widget
} = renderParams;
const contList = [];
(_a = widget.options.options) === null || _a === void 0 ? void 0 : _a.forEach(group => {
var _a;
contList.push(group.value);
(_a = group.options) === null || _a === void 0 ? void 0 : _a.forEach(item => {
contList.push(`\t${item.value}`);
});
});
optionsContent.value = contList.join('\n');
_core.VxeUI.modal.open({
title: `${widget.title} - ${(0, _core.getI18n)('vxe.formDesign.widgetProp.dataSource.batchEditOption')}`,
width: 500,
height: '50vh ',
resize: true,
showFooter: true,
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: (0, _core.getI18n)('vxe.formDesign.widgetProp.dataSource.buildOption'),
onConfirm: confirmBatchAddOptionEvent,
slots: {
default() {
return (0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-data-source-popup'
}, [(0, _vue.h)(_tip.default, {
status: 'primary',
title: '',
content: (0, _core.getI18n)(`vxe.formDesign.widgetProp.dataSource.${isSubOption ? 'batchEditSubTip' : 'batchEditTip'}`)
}), (0, _vue.h)(_textarea.default, {
resize: 'none',
modelValue: optionsContent.value,
'onUpdate:modelValue'(val) {
optionsContent.value = val;
}
})]);
}
}
});
};
const renderOption = (item, group, isExpand, gIndex, hasSub, isFirst, isLast) => {
const hasFirstLevel = !group;
return (0, _vue.h)('div', {
class: ['vxe-form-design--widget-form-item-data-source-option', {
'is--first': isFirst,
'is--last': isLast
}]
}, [(0, _vue.h)('div', {
class: 'vxe-form-design--widget-expand-btn'
}, hasFirstLevel && hasSub ? [(0, _vue.h)('i', {
class: isExpand ? (0, _core.getIcon)().FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE : (0, _core.getIcon)().FORM_DESIGN_WIDGET_OPTION_EXPAND_OPEN,
onClick() {
toggleExpandOption(item, gIndex);
}
})] : []), (0, _vue.h)('input', {
class: 'vxe-default-input',
value: item.value,
onInput(evnt) {
item.value = evnt.target.value;
}
}), (0, _vue.h)(_button.default, {
status: 'danger',
mode: 'text',
icon: (0, _core.getIcon)().FORM_DESIGN_WIDGET_DELETE,
onClick() {
removeOptionEvent(item, group);
}
})]);
};
const renderOptions = () => {
const {
renderParams
} = props;
const {
widget
} = renderParams;
const {
options
} = widget;
const groups = options.options;
const optVNs = [];
if (groups) {
groups.forEach((group, gIndex) => {
const {
options
} = group;
const isExpand = expandIndexList.value.includes(gIndex);
if (options && options.length) {
optVNs.push(renderOption(group, null, isExpand, gIndex, true, gIndex === 0, gIndex === groups.length - 1));
if (isExpand) {
optVNs.push((0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-data-source-sub-option'
}, options.map(item => renderOption(item, group, isExpand, 0, false, false, false))));
}
} else {
optVNs.push(renderOption(group, null, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1));
}
});
}
return optVNs;
};
(0, _vue.watch)(() => props.renderParams.widget, () => {
expandAllOption();
});
(0, _vue.onMounted)(() => {
expandAllOption();
});
const renderDataSourceFormItemContent = () => {
return [(0, _vue.h)('div', {}, [(0, _vue.h)(_button.default, {
status: 'primary',
mode: 'text',
content: (0, _core.getI18n)('vxe.formDesign.widgetProp.dataSource.addOption'),
onClick: addOptionEvent
}), (0, _vue.h)(_button.default, {
status: 'primary',
mode: 'text',
content: (0, _core.getI18n)('vxe.formDesign.widgetProp.dataSource.batchEditOption'),
onClick: openPopupEditEvent
})]), (0, _vue.h)('div', {
class: 'vxe-form-design--widget-form-item-data-source-wrapper'
}, renderOptions())];
};
return {
renderDataSourceFormItem() {
return (0, _vue.h)(_formItem.default, {
title: (0, _core.getI18n)('vxe.formDesign.widgetProp.dataSource.name'),
field: 'options'
}, {
default() {
return renderDataSourceFormItemContent();
}
});
},
renderDataSourceFormItemContent
};
}