vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
357 lines (356 loc) • 15.5 kB
JavaScript
;
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 _utils = require("../../tools/utils");
var _modal = _interopRequireDefault(require("../../modal/src/modal"));
var _input = _interopRequireDefault(require("../../input/src/input"));
var _checkbox = _interopRequireDefault(require("../../checkbox/src/checkbox"));
var _select = _interopRequireDefault(require("../../select/src/select"));
var _button = _interopRequireDefault(require("../../button/src/button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = (0, _vue.defineComponent)({
name: 'VxeExportPanel',
props: {
defaultOptions: Object,
storeData: Object
},
setup: function (props) {
var $xetable = (0, _vue.inject)('$xetable', {});
var _a = $xetable.getComputeMaps(),
computeExportOpts = _a.computeExportOpts,
computePrintOpts = _a.computePrintOpts;
var reactData = (0, _vue.reactive)({
isAll: false,
isIndeterminate: false,
loading: false
});
var xButtonConfirm = (0, _vue.ref)();
var xInputFilename = (0, _vue.ref)();
var xInputSheetname = (0, _vue.ref)();
var computeCheckedAll = (0, _vue.computed)(function () {
var storeData = props.storeData;
return storeData.columns.every(function (column) {
return column.checked;
});
});
var computeShowSheet = (0, _vue.computed)(function () {
var defaultOptions = props.defaultOptions;
return ['html', 'xml', 'xlsx', 'pdf'].indexOf(defaultOptions.type) > -1;
});
var computeSupportMerge = (0, _vue.computed)(function () {
var storeData = props.storeData,
defaultOptions = props.defaultOptions;
return !defaultOptions.original && defaultOptions.mode === 'current' && (storeData.isPrint || ['html', 'xlsx'].indexOf(defaultOptions.type) > -1);
});
var computeSupportStyle = (0, _vue.computed)(function () {
var defaultOptions = props.defaultOptions;
return !defaultOptions.original && ['xlsx'].indexOf(defaultOptions.type) > -1;
});
var handleOptionCheck = function (column) {
var storeData = props.storeData;
var matchObj = _xeUtils.default.findTree(storeData.columns, function (item) {
return item === column;
});
if (matchObj && matchObj.parent) {
var parent_1 = matchObj.parent;
if (parent_1.children && parent_1.children.length) {
parent_1.checked = parent_1.children.every(function (column) {
return column.checked;
});
parent_1.halfChecked = !parent_1.checked && parent_1.children.some(function (column) {
return column.checked || column.halfChecked;
});
handleOptionCheck(parent_1);
}
}
};
var checkStatus = function () {
var storeData = props.storeData;
var columns = storeData.columns;
reactData.isAll = columns.every(function (column) {
return column.disabled || column.checked;
});
reactData.isIndeterminate = !reactData.isAll && columns.some(function (column) {
return !column.disabled && (column.checked || column.halfChecked);
});
};
var changeOption = function (column) {
var isChecked = !column.checked;
_xeUtils.default.eachTree([column], function (item) {
item.checked = isChecked;
item.halfChecked = false;
});
handleOptionCheck(column);
checkStatus();
};
var allColumnEvent = function () {
var storeData = props.storeData;
var isAll = !reactData.isAll;
_xeUtils.default.eachTree(storeData.columns, function (column) {
if (!column.disabled) {
column.checked = isAll;
column.halfChecked = false;
}
});
reactData.isAll = isAll;
checkStatus();
};
var showEvent = function () {
(0, _vue.nextTick)(function () {
var filenameInp = xInputFilename.value;
var sheetnameInp = xInputSheetname.value;
var confirmBtn = xButtonConfirm.value;
var targetElem = filenameInp || sheetnameInp || confirmBtn;
if (targetElem) {
targetElem.focus();
}
});
checkStatus();
};
var getExportOption = function () {
var storeData = props.storeData,
defaultOptions = props.defaultOptions;
var hasMerge = storeData.hasMerge,
columns = storeData.columns;
var checkedAll = computeCheckedAll.value;
var supportMerge = computeSupportMerge.value;
var expColumns = _xeUtils.default.searchTree(columns, function (column) {
return column.checked;
}, {
children: 'children',
mapChildren: 'childNodes',
original: true
});
return Object.assign({}, defaultOptions, {
columns: expColumns,
isMerge: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false
});
};
var printEvent = function () {
var storeData = props.storeData;
var printOpts = computePrintOpts.value;
storeData.visible = false;
$xetable.print(Object.assign({}, printOpts, getExportOption()));
};
var exportEvent = function () {
var storeData = props.storeData;
var exportOpts = computeExportOpts.value;
reactData.loading = true;
$xetable.exportData(Object.assign({}, exportOpts, getExportOption())).then(function () {
reactData.loading = false;
storeData.visible = false;
}).catch(function () {
reactData.loading = false;
});
};
var cancelEvent = function () {
var storeData = props.storeData;
storeData.visible = false;
};
var confirmEvent = function () {
var storeData = props.storeData;
if (storeData.isPrint) {
printEvent();
} else {
exportEvent();
}
};
var renderVN = function () {
var defaultOptions = props.defaultOptions,
storeData = props.storeData;
var isAllChecked = reactData.isAll,
isAllIndeterminate = reactData.isIndeterminate;
var hasTree = storeData.hasTree,
hasMerge = storeData.hasMerge,
isPrint = storeData.isPrint,
hasColgroup = storeData.hasColgroup;
var isHeader = defaultOptions.isHeader;
var cols = [];
var checkedAll = computeCheckedAll.value;
var showSheet = computeShowSheet.value;
var supportMerge = computeSupportMerge.value;
var supportStyle = computeSupportStyle.value;
_xeUtils.default.eachTree(storeData.columns, function (column) {
var colTitle = (0, _utils.formatText)(column.getTitle(), 1);
var isColGroup = column.children && column.children.length;
var isChecked = column.checked;
var indeterminate = column.halfChecked;
cols.push((0, _vue.h)('li', {
class: ['vxe-export--panel-column-option', "level--".concat(column.level), {
'is--group': isColGroup,
'is--checked': isChecked,
'is--indeterminate': indeterminate,
'is--disabled': column.disabled
}],
title: colTitle,
onClick: function () {
if (!column.disabled) {
changeOption(column);
}
}
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', indeterminate ? _conf.default.icon.TABLE_CHECKBOX_INDETERMINATE : isChecked ? _conf.default.icon.TABLE_CHECKBOX_CHECKED : _conf.default.icon.TABLE_CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, colTitle)]));
});
return (0, _vue.h)(_modal.default, {
modelValue: storeData.visible,
title: _conf.default.i18n(isPrint ? 'vxe.export.printTitle' : 'vxe.export.expTitle'),
width: 660,
mask: true,
lockView: true,
showFooter: false,
escClosable: true,
maskClosable: true,
loading: reactData.loading,
'onUpdate:modelValue': function (value) {
storeData.visible = value;
},
onShow: showEvent
}, {
default: function () {
return (0, _vue.h)('div', {
class: 'vxe-export--panel'
}, [(0, _vue.h)('table', {
cellspacing: 0,
cellpadding: 0,
border: 0
}, [(0, _vue.h)('tbody', [[isPrint ? (0, _vue.createCommentVNode)() : (0, _vue.h)('tr', [(0, _vue.h)('td', _conf.default.i18n('vxe.export.expName')), (0, _vue.h)('td', [(0, _vue.h)(_input.default, {
ref: xInputFilename,
modelValue: defaultOptions.filename,
type: 'text',
clearable: true,
placeholder: _conf.default.i18n('vxe.export.expNamePlaceholder'),
'onUpdate:modelValue': function (value) {
defaultOptions.filename = value;
}
})])]), isPrint ? (0, _vue.createCommentVNode)() : (0, _vue.h)('tr', [(0, _vue.h)('td', _conf.default.i18n('vxe.export.expType')), (0, _vue.h)('td', [(0, _vue.h)(_select.default, {
modelValue: defaultOptions.type,
options: storeData.typeList.map(function (item) {
return {
value: item.value,
label: _conf.default.i18n(item.label)
};
}),
'onUpdate:modelValue': function (value) {
defaultOptions.type = value;
}
})])]), isPrint || showSheet ? (0, _vue.h)('tr', [(0, _vue.h)('td', _conf.default.i18n('vxe.export.expSheetName')), (0, _vue.h)('td', [(0, _vue.h)(_input.default, {
ref: xInputSheetname,
modelValue: defaultOptions.sheetName,
type: 'text',
clearable: true,
placeholder: _conf.default.i18n('vxe.export.expSheetNamePlaceholder'),
'onUpdate:modelValue': function (value) {
defaultOptions.sheetName = value;
}
})])]) : (0, _vue.createCommentVNode)(), (0, _vue.h)('tr', [(0, _vue.h)('td', _conf.default.i18n('vxe.export.expMode')), (0, _vue.h)('td', [(0, _vue.h)(_select.default, {
modelValue: defaultOptions.mode,
options: storeData.modeList.map(function (item) {
return {
value: item.value,
label: _conf.default.i18n(item.label)
};
}),
'onUpdate:modelValue': function (value) {
defaultOptions.mode = value;
}
})])]), (0, _vue.h)('tr', [(0, _vue.h)('td', [_conf.default.i18n('vxe.export.expColumn')]), (0, _vue.h)('td', [(0, _vue.h)('div', {
class: 'vxe-export--panel-column'
}, [(0, _vue.h)('ul', {
class: 'vxe-export--panel-column-header'
}, [(0, _vue.h)('li', {
class: ['vxe-export--panel-column-option', {
'is--checked': isAllChecked,
'is--indeterminate': isAllIndeterminate
}],
title: _conf.default.i18n('vxe.table.allTitle'),
onClick: allColumnEvent
}, [(0, _vue.h)('span', {
class: ['vxe-checkbox--icon', isAllIndeterminate ? _conf.default.icon.TABLE_CHECKBOX_INDETERMINATE : isAllChecked ? _conf.default.icon.TABLE_CHECKBOX_CHECKED : _conf.default.icon.TABLE_CHECKBOX_UNCHECKED]
}), (0, _vue.h)('span', {
class: 'vxe-checkbox--label'
}, _conf.default.i18n('vxe.export.expCurrentColumn'))])]), (0, _vue.h)('ul', {
class: 'vxe-export--panel-column-body'
}, cols)])])]), (0, _vue.h)('tr', [(0, _vue.h)('td', _conf.default.i18n('vxe.export.expOpts')), (0, _vue.h)('td', [(0, _vue.h)('div', {
class: 'vxe-export--panel-option-row'
}, [(0, _vue.h)(_checkbox.default, {
modelValue: defaultOptions.isHeader,
title: _conf.default.i18n('vxe.export.expHeaderTitle'),
content: _conf.default.i18n('vxe.export.expOptHeader'),
'onUpdate:modelValue': function (value) {
defaultOptions.isHeader = value;
}
}), (0, _vue.h)(_checkbox.default, {
modelValue: defaultOptions.isFooter,
disabled: !storeData.hasFooter,
title: _conf.default.i18n('vxe.export.expFooterTitle'),
content: _conf.default.i18n('vxe.export.expOptFooter'),
'onUpdate:modelValue': function (value) {
defaultOptions.isFooter = value;
}
}), (0, _vue.h)(_checkbox.default, {
modelValue: defaultOptions.original,
title: _conf.default.i18n('vxe.export.expOriginalTitle'),
content: _conf.default.i18n('vxe.export.expOptOriginal'),
'onUpdate:modelValue': function (value) {
defaultOptions.original = value;
}
})]), (0, _vue.h)('div', {
class: 'vxe-export--panel-option-row'
}, [(0, _vue.h)(_checkbox.default, {
modelValue: isHeader && hasColgroup && supportMerge ? defaultOptions.isColgroup : false,
title: _conf.default.i18n('vxe.export.expColgroupTitle'),
disabled: !isHeader || !hasColgroup || !supportMerge,
content: _conf.default.i18n('vxe.export.expOptColgroup'),
'onUpdate:modelValue': function (value) {
defaultOptions.isColgroup = value;
}
}), (0, _vue.h)(_checkbox.default, {
modelValue: hasMerge && supportMerge && checkedAll ? defaultOptions.isMerge : false,
title: _conf.default.i18n('vxe.export.expMergeTitle'),
disabled: !hasMerge || !supportMerge || !checkedAll,
content: _conf.default.i18n('vxe.export.expOptMerge'),
'onUpdate:modelValue': function (value) {
defaultOptions.isMerge = value;
}
}), isPrint ? (0, _vue.createCommentVNode)() : (0, _vue.h)(_checkbox.default, {
modelValue: supportStyle ? defaultOptions.useStyle : false,
disabled: !supportStyle,
title: _conf.default.i18n('vxe.export.expUseStyleTitle'),
content: _conf.default.i18n('vxe.export.expOptUseStyle'),
'onUpdate:modelValue': function (value) {
defaultOptions.useStyle = value;
}
}), (0, _vue.h)(_checkbox.default, {
modelValue: hasTree ? defaultOptions.isAllExpand : false,
disabled: !hasTree,
title: _conf.default.i18n('vxe.export.expAllExpandTitle'),
content: _conf.default.i18n('vxe.export.expOptAllExpand'),
'onUpdate:modelValue': function (value) {
defaultOptions.isAllExpand = value;
}
})])])])]])]), (0, _vue.h)('div', {
class: 'vxe-export--panel-btns'
}, [(0, _vue.h)(_button.default, {
content: _conf.default.i18n('vxe.export.expCancel'),
onClick: cancelEvent
}), (0, _vue.h)(_button.default, {
ref: xButtonConfirm,
status: 'primary',
content: _conf.default.i18n(isPrint ? 'vxe.export.expPrint' : 'vxe.export.expConfirm'),
onClick: confirmEvent
})])]);
}
});
};
return renderVN;
}
});
exports.default = _default;