From 921867f6509c541c15371fd0ae6c54341431eeb6 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 18 Oct 2023 11:20:02 +0800
Subject: [PATCH] =?UTF-8?q?style(form):=20=E4=BC=98=E5=8C=96=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=8A=9F=E8=83=BD=E6=8C=89=E9=92=AE=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Table.vue | 86 ++++++++++++++------------
 1 file changed, 46 insertions(+), 40 deletions(-)

diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 02c92e0d..4c4274d7 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -120,41 +120,46 @@
       </TMagicTable>
     </TMagicTooltip>
     <slot></slot>
-    <TMagicButton v-if="addable" size="small" type="primary" :disabled="disabled" plain @click="newHandler()"
-      >新增一行</TMagicButton
-    >
-    &nbsp;
-    <TMagicButton
-      :icon="Grid"
-      size="small"
-      type="primary"
-      @click="toggleMode"
-      v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
-      >展开配置</TMagicButton
-    >
-    <TMagicButton
-      :icon="FullScreen"
-      size="small"
-      type="primary"
-      @click="toggleFullscreen"
-      v-if="config.enableFullscreen !== false"
-    >
-      {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
-    </TMagicButton>
-    <TMagicUpload
-      v-if="importable"
-      style="display: inline-block"
-      ref="excelBtn"
-      action="/noop"
-      :disabled="disabled"
-      :on-change="excelHandler"
-      :auto-upload="false"
-    >
-      <TMagicButton size="small" type="success" :disabled="disabled" plain>导入EXCEL</TMagicButton> </TMagicUpload
-    >&nbsp;
-    <TMagicButton v-if="importable" size="small" type="warning" :disabled="disabled" plain @click="clearHandler()"
-      >清空</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()"
+        >新增一行</TMagicButton
+      >
+
+      <div style="display: flex">
+        <TMagicButton
+          :icon="Grid"
+          size="small"
+          type="primary"
+          @click="toggleMode"
+          v-if="enableToggleMode && config.enableToggleMode !== false && !isFullscreen"
+          >展开配置</TMagicButton
+        >
+        <TMagicButton
+          :icon="FullScreen"
+          size="small"
+          type="primary"
+          @click="toggleFullscreen"
+          v-if="config.enableFullscreen !== false"
+        >
+          {{ isFullscreen ? '退出全屏' : '全屏编辑' }}
+        </TMagicButton>
+        <TMagicUpload
+          v-if="importable"
+          style="display: inline-block"
+          ref="excelBtn"
+          action="/noop"
+          :disabled="disabled"
+          :on-change="excelHandler"
+          :auto-upload="false"
+        >
+          <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">
       <TMagicPagination
@@ -371,10 +376,6 @@ const newHandler = async (row?: any) => {
   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(() => {
   if (props.config.defautSort) {
     sortChange(props.config.defautSort);
@@ -535,10 +536,15 @@ const clearHandler = () => {
   mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
 };
 
-const excelHandler = (file: any) => {
+const excelHandler = async (file: any) => {
   if (!file?.raw) {
     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();
   reader.onload = () => {
     const data = reader.result;