Browse Source

wip(gui-v2): file upload

pull/2795/head
Wing-Kam Wong 2 years ago
parent
commit
2140ddf876
  1. 65
      packages/nc-gui-v2/components/dlg/FileImport.vue

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

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

Loading…
Cancel
Save