wip(gui-v2): file upload

packages/nc-gui-v2/components/dlg/FileImport.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { UploadChangeParam } from 'ant-design-vue'
 import { useI18n } from 'vue-i18n'
+import MdiFileIcon from '~icons/mdi/file-plus-outline'
 const { t } = useI18n()
 
 interface Props {
@@ -11,6 +12,7 @@ interface Props {
 const { modelValue, importType } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
+const activeKey = ref('upload')
 const fileList = ref([])
 const handleDrop = (e: DragEvent) => {
   console.log(e)
@@ -45,32 +47,45 @@ const handleChange = (info: UploadChangeParam) => {
 </script>
 
 <template>
-  <v-dialog
-    v-model="dialogShow"
-    persistent
-    max-width="550"
-    @keydown.esc="dialogShow = false"
-    @keydown.enter="$emit('create', table)"
-  >
-    <v-card class="">
-      <a-upload-dragger
-        v-model:fileList="fileList"
-        name="file"
-        :multiple="true"
-        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
-        @change="handleChange"
-        @drop="handleDrop"
-      >
-        <p class="ant-upload-drag-icon">
-          <inbox-outlined></inbox-outlined>
-        </p>
-        <p class="ant-upload-text">Click or drag file to this area to upload</p>
-        <p class="ant-upload-hint">
-          {{ uploadHint }}
-        </p>
-      </a-upload-dragger>
+  <v-dialog v-model="dialogShow" persistent @keydown.esc="dialogShow = false">
+    <v-card style="height: 400px; width: 700px">
+      <a-tabs v-model:activeKey="activeKey" hide-add type="editable-card" :tab-position="top">
+        <a-tab-pane key="upload" :closable="false">
+          <template #tab>
+            <span>
+              <MdiTableIcon class="text-primary mdi-icons" />
+              Upload
+            </span>
+          </template>
+          <a-upload-dragger v-model:fileList="fileList" name="file" :multiple="true" @change="handleChange" @drop="handleDrop">
+            <MdiFileIcon />
+            <p class="ant-upload-text">Click or drag file to this area to upload</p>
+            <p class="ant-upload-hint">
+              {{ uploadHint }}
+            </p>
+          </a-upload-dragger>
+        </a-tab-pane>
+        <a-tab-pane v-if="importType === 'json'" key="json" :closable="false">
+          <template #tab>
+            <span>
+              <MdiTableIcon class="text-primary mdi-icons" />
+              Json String
+            </span>
+          </template>
+          <!-- TODO -->
+        </a-tab-pane>
+        <a-tab-pane v-else key="url" :closable="false">
+          <template #tab>
+            <span>
+              <MdiTableIcon class="text-primary mdi-icons" />
+              Url
+            </span>
+          </template>
+          <!-- TODO -->
+        </a-tab-pane>
+      </a-tabs>
     </v-card>
   </v-dialog>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss"></style>