From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/infra/file/FileForm.vue | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 107 insertions(+), 0 deletions(-)
diff --git a/src/views/infra/file/FileForm.vue b/src/views/infra/file/FileForm.vue
new file mode 100644
index 0000000..84b2504
--- /dev/null
+++ b/src/views/infra/file/FileForm.vue
@@ -0,0 +1,107 @@
+<template>
+ <Dialog v-model="dialogVisible" title="涓婁紶鏂囦欢">
+ <el-upload
+ ref="uploadRef"
+ v-model:file-list="fileList"
+ :action="uploadUrl"
+ :auto-upload="false"
+ :data="data"
+ :disabled="formLoading"
+ :limit="1"
+ :on-change="handleFileChange"
+ :on-error="submitFormError"
+ :on-exceed="handleExceed"
+ :on-progress="handleProgress"
+ :on-success="submitFormSuccess"
+ :http-request="httpRequest"
+ accept=".jpg, .png, .gif"
+ drag
+ >
+ <i class="el-icon-upload"></i>
+ <div class="el-upload__text"> 灏嗘枃浠舵嫋鍒版澶勶紝鎴� <em>鐐瑰嚮涓婁紶</em></div>
+ <template #tip>
+ <div class="el-upload__tip" style="color: red">
+ 鎻愮ず锛氫粎鍏佽瀵煎叆 jpg銆乸ng銆乬if 鏍煎紡鏂囦欢锛�
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitFileForm">纭� 瀹�</el-button>
+ <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { UploadFile, UploadProgressEvent } from 'element-plus/es/components/upload/src/upload'
+
+defineOptions({ name: 'InfraFileForm' })
+
+const { t } = useI18n() // 鍥介檯鍖�
+const message = useMessage() // 娑堟伅寮圭獥
+
+const dialogVisible = ref(false) // 寮圭獥鐨勬槸鍚﹀睍绀�
+const formLoading = ref(false) // 琛ㄥ崟鐨勫姞杞戒腑
+const fileList = ref([]) // 鏂囦欢鍒楄〃
+const data = ref({ path: '' })
+const uploadRef = ref()
+
+const { uploadUrl, httpRequest } = useUpload()
+
+/** 鎵撳紑寮圭獥 */
+const open = async () => {
+ dialogVisible.value = true
+ resetForm()
+}
+defineExpose({ open }) // 鎻愪緵 open 鏂规硶锛岀敤浜庢墦寮�寮圭獥
+
+/** 澶勭悊涓婁紶鐨勬枃浠跺彂鐢熷彉鍖� */
+const handleFileChange = (file: UploadFile) => {
+ data.value.path = file.name
+}
+
+/** 澶勭悊鏂囦欢涓婁紶杩涘害鏄剧ず */
+const handleProgress = (upEvt: UploadProgressEvent, file: UploadFile) => {
+ file.percentage = upEvt.percent
+}
+
+/** 鎻愪氦琛ㄥ崟 */
+const submitFileForm = () => {
+ if (fileList.value.length == 0) {
+ message.error('璇蜂笂浼犳枃浠�')
+ return
+ }
+ formLoading.value = true
+ unref(uploadRef)?.submit()
+}
+
+/** 鏂囦欢涓婁紶鎴愬姛澶勭悊 */
+const emit = defineEmits(['success']) // 瀹氫箟 success 浜嬩欢锛岀敤浜庢搷浣滄垚鍔熷悗鐨勫洖璋�
+const submitFormSuccess = () => {
+ // 娓呯悊
+ dialogVisible.value = false
+ formLoading.value = false
+ unref(uploadRef)?.clearFiles()
+ // 鎻愮ず鎴愬姛锛屽苟鍒锋柊
+ message.success(t('common.createSuccess'))
+ emit('success')
+}
+
+/** 涓婁紶閿欒鎻愮ず */
+const submitFormError = (): void => {
+ message.error('涓婁紶澶辫触锛岃鎮ㄩ噸鏂颁笂浼狅紒')
+ formLoading.value = false
+}
+
+/** 閲嶇疆琛ㄥ崟 */
+const resetForm = () => {
+ // 閲嶇疆涓婁紶鐘舵�佸拰鏂囦欢
+ formLoading.value = false
+ uploadRef.value?.clearFiles()
+}
+
+/** 鏂囦欢鏁拌秴鍑烘彁绀� */
+const handleExceed = (): void => {
+ message.error('鏈�澶氬彧鑳戒笂浼犱竴涓枃浠讹紒')
+}
+</script>
--
Gitblit v1.8.0