vxe-table-ro-test
Version:
一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...
190 lines (189 loc) • 8.65 kB
JavaScript
import { defineComponent, h, ref, computed, inject, reactive, nextTick, createCommentVNode } from 'vue';
import { VxeUI } from '../../../ui';
import XEUtils from 'xe-utils';
import { parseFile } from '../../../ui/src/utils';
import { errLog } from '../../../ui/src/log';
const { getI18n, getIcon } = VxeUI;
export default defineComponent({
name: 'VxeTableImportPanel',
props: {
defaultOptions: Object,
storeData: Object
},
setup(props) {
const VxeUIModalComponent = VxeUI.getComponent('VxeModal');
const VxeUIButtonComponent = VxeUI.getComponent('VxeButton');
const VxeUISelectComponent = VxeUI.getComponent('VxeSelect');
const $xeTable = inject('$xeTable', {});
const { computeImportOpts } = $xeTable.getComputeMaps();
const reactData = reactive({
loading: false
});
const refFileBtn = ref();
const computeSelectName = computed(() => {
const { storeData } = props;
return `${storeData.filename}.${storeData.type}`;
});
const computeHasFile = computed(() => {
const { storeData } = props;
return storeData.file && storeData.type;
});
const computeParseTypeLabel = computed(() => {
const { storeData } = props;
const { type, typeList } = storeData;
if (type) {
const selectItem = XEUtils.find(typeList, item => type === item.value);
return selectItem ? selectItem.label : '*.*';
}
return `*.${typeList.map((item) => item.value).join(', *.')}`;
});
const clearFileEvent = () => {
const { storeData } = props;
Object.assign(storeData, {
filename: '',
sheetName: '',
type: ''
});
};
const selectFileEvent = () => {
const { storeData, defaultOptions } = props;
$xeTable.readFile(defaultOptions).then((params) => {
const { file } = params;
Object.assign(storeData, parseFile(file), { file });
}).catch((e) => e);
};
const showEvent = () => {
nextTick(() => {
const targetElem = refFileBtn.value;
if (targetElem) {
targetElem.focus();
}
});
};
const cancelEvent = () => {
const { storeData } = props;
storeData.visible = false;
};
const importEvent = () => {
const { storeData, defaultOptions } = props;
const importOpts = computeImportOpts.value;
reactData.loading = true;
$xeTable.importByFile(storeData.file, Object.assign({}, importOpts, defaultOptions)).then(() => {
reactData.loading = false;
storeData.visible = false;
}).catch(() => {
reactData.loading = false;
});
};
const renderVN = () => {
const { defaultOptions, storeData } = props;
const selectName = computeSelectName.value;
const hasFile = computeHasFile.value;
const parseTypeLabel = computeParseTypeLabel.value;
return VxeUIModalComponent
? h(VxeUIModalComponent, {
modelValue: storeData.visible,
title: getI18n('vxe.import.impTitle'),
className: 'vxe-table-import-popup-wrapper',
width: 540,
mask: true,
lockView: true,
showFooter: false,
escClosable: true,
maskClosable: true,
loading: reactData.loading,
'onUpdate:modelValue'(value) {
storeData.visible = value;
},
onShow: showEvent
}, {
default: () => {
return h('div', {
class: 'vxe-export--panel'
}, [
h('table', {
cellspacing: 0,
cellpadding: 0,
border: 0
}, [
h('tbody', [
h('tr', [
h('td', getI18n('vxe.import.impFile')),
h('td', [
hasFile
? h('div', {
class: 'vxe-import-selected--file',
title: selectName
}, [
h('span', selectName),
h('i', {
class: getIcon().INPUT_CLEAR,
onClick: clearFileEvent
})
])
: h('button', {
ref: refFileBtn,
class: 'vxe-import-select--file',
onClick: selectFileEvent
}, getI18n('vxe.import.impSelect'))
])
]),
h('tr', [
h('td', getI18n('vxe.import.impType')),
h('td', parseTypeLabel)
]),
h('tr', [
h('td', getI18n('vxe.import.impMode')),
h('td', [
VxeUISelectComponent
? h(VxeUISelectComponent, {
modelValue: defaultOptions.mode,
options: storeData.modeList,
'onUpdate:modelValue'(value) {
defaultOptions.mode = value;
}
})
: createCommentVNode()
])
])
])
]),
h('div', {
class: 'vxe-export--panel-btns'
}, [
VxeUIButtonComponent
? h(VxeUIButtonComponent, {
content: getI18n('vxe.import.impCancel'),
onClick: cancelEvent
})
: createCommentVNode(),
VxeUIButtonComponent
? h(VxeUIButtonComponent, {
status: 'primary',
disabled: !hasFile,
content: getI18n('vxe.import.impConfirm'),
onClick: importEvent
})
: createCommentVNode()
])
]);
}
})
: createCommentVNode();
};
if (process.env.NODE_ENV === 'development') {
nextTick(() => {
if (!VxeUIModalComponent) {
errLog('vxe.error.reqComp', ['vxe-modal']);
}
if (!VxeUIButtonComponent) {
errLog('vxe.error.reqComp', ['vxe-button']);
}
if (!VxeUISelectComponent) {
errLog('vxe.error.reqComp', ['vxe-select']);
}
});
}
return renderVN;
}
});