JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-22 18:05:17 +08:00
Code Issues Projects Releases Wiki Activity

style(form): 优化表格功能按钮显示

Browse Source
This commit is contained in:
roymondchen 2023-10-18 11:20:02 +08:00
parent 70b6bcd66b
commit 921867f650
1 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
packages/form/src/containers/Table.vue
View File

@ -120,41 +120,46 @@
</TMagicTable> </TMagicTable>
</TMagicTooltip> </TMagicTooltip>
<slot></slot> <slot></slot>
<TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
>新增一行</TMagicButton <div style="display: flex; justify-content: space-between; margin: 10px 0">
> <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
&nbsp; >新增一行</TMagicButton
<TMagicButton >
:icon="Grid"
size="small" <div style="display: flex">
type="primary" <TMagicButton
@click="toggleMode" :icon="Grid"
v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen" size="small"
>展开配置</TMagicButton type="primary"
> @click="toggleMode"
<TMagicButton v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
:icon="FullScreen" >展开配置</TMagicButton
size="small" >
type="primary" <TMagicButton
@click="toggleFullscreen" :icon="FullScreen"
v-if="config.enableFullscreen !== false" size="small"
> type="primary"
{{ isFullscreen ? '退出全屏' : '全屏编辑' }} @click="toggleFullscreen"
</TMagicButton> v-if="config.enableFullscreen !== false"
<TMagicUpload >
v-if="importable" {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
style="display: inline-block" </TMagicButton>
ref="excelBtn" <TMagicUpload
action="/noop" v-if="importable"
:disabled="disabled" style="display: inline-block"
:on-change="excelHandler" ref="excelBtn"
:auto-upload="false" action="/noop"
> :disabled="disabled"
<TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload :on-change="excelHandler"
>&nbsp; :auto-upload="false"
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()" >
>清空</TMagicButton <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton>
> </TMagicUpload>
<TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
>清空</TMagicButton
>
</div>
</div>
<div class="bottom" style="text-align: right" v-if="config.pagination"> <div class="bottom" style="text-align: right" v-if="config.pagination">
<TMagicPagination <TMagicPagination
@ -371,10 +376,6 @@ const newHandler = async (row?: any) => {
emit('change', props.model[modelName.value]); emit('change', props.model[modelName.value]);
}; };
if (!(globalThis as any).XLSX) {
asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
}
onMounted(() => { onMounted(() => {
if (props.config.defautSort) { if (props.config.defautSort) {
sortChange(props.config.defautSort); sortChange(props.config.defautSort);
@ -535,10 +536,15 @@ const clearHandler = () => {
mForm?.$emit('field-change', props.prop, props.model[modelName.value]); mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
}; };
const excelHandler = (file: any) => { const excelHandler = async (file: any) => {
if (!file?.raw) { if (!file?.raw) {
return false; return false;
} }
if (!(globalThis as any).XLSX) {
await asyncLoadJs('https://cdn.bootcdn.net/ajax/libs/xlsx/0.17.0/xlsx.full.min.js');
}
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
const data = reader.result; const data = reader.result;