From 035bcc1e9fe4b099a8f32108191a7c7842906782 Mon Sep 17 00:00:00 2001
From: Flex <q1406482700@163.com>
Date: 星期五, 06 六月 2025 16:07:26 +0800
Subject: [PATCH] 修改文件上传，添加文件上传状态提示
---
easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue | 169 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 113 insertions(+), 56 deletions(-)
diff --git a/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue b/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
index 5179f76..5007d1a 100644
--- a/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
+++ b/easegen-front/src/views/digitalcourse/digitalhumans/DigitalHumansForm.vue
@@ -8,13 +8,23 @@
v-loading="formLoading"
>
<el-form-item :label="t('digitalhumans.name')" prop="name">
- <el-input v-model="formData.name" :placeholder="t('common.inputText') + t('digitalhumans.name')" />
+ <el-input
+ v-model="formData.name"
+ :placeholder="t('common.inputText') + t('digitalhumans.name')"
+ />
</el-form-item>
- <el-form-item :label="t('digitalhumans.code')" prop="code" v-if="false" > // 褰撳墠鏁板瓧浜鸿棰戠殑缂栫爜绫诲瀷
- <el-input v-model="formData.code" :placeholder="t('common.inputText') + t('digitalhumans.code')" />
+ <el-form-item :label="t('digitalhumans.code')" prop="code" v-if="false">
+ // 褰撳墠鏁板瓧浜鸿棰戠殑缂栫爜绫诲瀷
+ <el-input
+ v-model="formData.code"
+ :placeholder="t('common.inputText') + t('digitalhumans.code')"
+ />
</el-form-item>
<el-form-item :label="t('digitalhumans.gender')" prop="gender">
- <el-select v-model="formData.gender" :placeholder="t('common.selectText')+t('digitalhumans.gender')">
+ <el-select
+ v-model="formData.gender"
+ :placeholder="t('common.selectText') + t('digitalhumans.gender')"
+ >
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value"
@@ -23,8 +33,12 @@
/>
</el-select>
</el-form-item>
- <el-form-item :label="t('digitalhumans.useModel')" prop="useModel" v-if="false" > //鏁板瓧浜烘ā寮忛�夋嫨妗�
- <el-select v-model="formData.useModel" :placeholder="t('common.selectText')+t('digitalhumans.useModel')">
+ <el-form-item :label="t('digitalhumans.useModel')" prop="useModel" v-if="false">
+ //鏁板瓧浜烘ā寮忛�夋嫨妗�
+ <el-select
+ v-model="formData.useModel"
+ :placeholder="t('common.selectText') + t('digitalhumans.useModel')"
+ >
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.USE_MODEL)"
:key="dict.value"
@@ -35,11 +49,15 @@
</el-form-item>
<el-form-item label="鑳屾櫙鏍峰紡" prop="isTransparent">
<el-select v-model="formData.isTransparent" placeholder="璇烽�夋嫨鏄惁鍘婚櫎鑳屾櫙">
- <el-option value="1" label="閫忔槑鑳屾櫙"/>
- <el-option value="2" label="缁垮箷鑳屾櫙"/>
+ <el-option value="1" label="閫忔槑鑳屾櫙" />
+ <el-option value="2" label="缁垮箷鑳屾櫙" />
</el-select>
</el-form-item>
- <el-form-item v-if="formData.useModel == 1" :label="t('digitalhumans.picture')" prop="pictureUrl">
+ <el-form-item
+ v-if="formData.useModel == 1"
+ :label="t('digitalhumans.picture')"
+ prop="pictureUrl"
+ >
<UploadImg v-if="formData" v-model="formData.fixPictureUrl" />
<UploadImg v-else v-model="formData.pictureUrl" />
</el-form-item>
@@ -47,13 +65,26 @@
<el-form-item v-if="formData.useModel == 2" :label="t('digitalhumans.video')" prop="videoUrl">
<!-- 鍘熸湰鑷甫鐨勮棰戜笂浼� -->
<!-- <UploadFile v-if="!(formData.videoUrl || formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/> -->
- <UploadFile v-if="!(formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/>
+ <!-- <UploadFile v-if="!(formData.fixVideoUrl)" v-model="formData.videoUrl" :fileType="['mp4','mov']" :limit="1" @on-success="handleFileSuccess('videoUrl', $event)"/> -->
+ <!-- 淇敼瀹屽杽鍚庣殑鏂囦欢涓婁紶缁勪欢锛屽師缁勪欢鏃犳硶鍒ゆ柇鏂囦欢涓婁紶涓笌鏂囦欢涓婁紶缁撴潫涓ょ鐘舵�� -->
+ <FileUploadComent
+ v-if="!formData.fixVideoUrl"
+ v-model="formData.videoUrl"
+ :fileType="['mp4', 'mov']"
+ :limit="1"
+ @fileUploadEnd="FileUploadEnd"
+ @fileUploadStart="FileUploadStart"
+ @on-success="handleFileSuccess('videoUrl', $event)"
+ />
<!-- 鍘熻棰戞挱鏀惧櫒 -->
<!-- <video-player v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/> -->
- <!-- 鏂扮殑瑙嗛鎾斁鍣� -->
- <VideoPlayerMov v-if="formData.videoUrl || formData.fixVideoUrl" :property="videoProperty"/>
+ <!-- 鏂扮殑瑙嗛鎾斁鍣� -->
+ <VideoPlayerMov
+ v-if="formData.videoUrl || formData.fixVideoUrl"
+ :property="videoProperty"
+ />
</el-form-item>
-<!-- <el-form-item :label="鎶犲浘鏍囪瘑" prop="matting">
+ <!-- <el-form-item :label="鎶犲浘鏍囪瘑" prop="matting">
<el-select v-model="formData.matting" :placeholder="璇烽�夋嫨鎶犲浘鏍囪瘑">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_MATTING)"
@@ -64,7 +95,10 @@
</el-select>
</el-form-item>-->
<el-form-item :label="t('digitalhumans.posture')" prop="posture">
- <el-select v-model="formData.posture" :placeholder="t('common.selectText') + t('digitalhumans.posture')">
+ <el-select
+ v-model="formData.posture"
+ :placeholder="t('common.selectText') + t('digitalhumans.posture')"
+ >
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_POSTURE)"
:key="dict.value"
@@ -74,7 +108,10 @@
</el-select>
</el-form-item>
<el-form-item :label="t('digitalhumans.type')" prop="type">
- <el-select v-model="formData.type" :placeholder="t('common.selectText') + t('digitalhumans.type')">
+ <el-select
+ v-model="formData.type"
+ :placeholder="t('common.selectText') + t('digitalhumans.type')"
+ >
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_TYPE)"
:key="dict.value"
@@ -85,21 +122,29 @@
</el-form-item>
</el-form>
<template #footer>
- <el-button @click="submitForm" type="primary" :disabled="formLoading" :loading="isUploading" >{{t('common.ok')}}</el-button>
- <el-button @click="dialogVisible = false">{{t('common.cancel')}}</el-button>
+ <el-button
+ @click="submitForm"
+ type="primary"
+ :disabled="formLoading"
+ :loading="isUploading"
+ >{{ t('common.ok') }}</el-button
+ >
+ <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
+import FileUploadComent from './FileUploadComent.vue'
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import * as DigitalHumansApi from '@/api/digitalcourse/digitalhumans'
-import VideoPlayer from "@/components/DiyEditor/components/mobile/VideoPlayer/index.vue";
-import VideoPlayerMov from "@/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue";
-import {DiyComponent} from "@/components/DiyEditor/util";
-import {VideoPlayerProperty} from "@/components/DiyEditor/components/mobile/VideoPlayer/config";
+import VideoPlayer from '@/components/DiyEditor/components/mobile/VideoPlayer/index.vue'
+import VideoPlayerMov from '@/components/DiyEditor/components/mobile/VideoPlayer_mov/index.vue'
+import { DiyComponent } from '@/components/DiyEditor/util'
+import { VideoPlayerProperty } from '@/components/DiyEditor/components/mobile/VideoPlayer/config'
import { useUpload } from '@/components/UploadFile/src/useUpload'
-import { el } from 'element-plus/es/locale';
-import { any } from 'vue-types';
+import { el } from 'element-plus/es/locale'
+import { any } from 'vue-types'
+import { start } from 'nprogress'
const { t } = useI18n() // 鍥介檯鍖�
const message = useMessage() // 娑堟伅寮圭獥
@@ -126,7 +171,7 @@
useGeneralModel: undefined,
useModel: undefined,
status: undefined,
- isTransparent: undefined,
+ isTransparent: undefined
})
// 褰撳墠鏄惁姝ｅ湪涓婁紶瑙嗛
@@ -144,11 +189,14 @@
}
} as DiyComponent<VideoPlayerProperty>
-watch(()=> formData.value.videoUrl,(newVal,oldValue)=>{
- if (newVal && newVal.length > 0){
- videoProperty.videoUrl = formData.value.fixVideoUrl || newVal
+watch(
+ () => formData.value.videoUrl,
+ (newVal, oldValue) => {
+ if (newVal && newVal.length > 0) {
+ videoProperty.videoUrl = formData.value.fixVideoUrl || newVal
+ }
}
-})
+)
const formRules = reactive({
gender: [{ required: true, message: '鎬у埆涓嶈兘涓虹┖', trigger: 'change' }],
name: [{ required: true, message: '鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }],
@@ -165,22 +213,31 @@
})
const formRef = ref() // 琛ㄥ崟 Ref
-const StartCes = () => {
- console.log( " ----- 寮�濮� ----- " )
+const FileUploadStart = () => {
isUploading.value = true
}
-const End = (res)=>{
- const FileObject = {
- file:res
- }
- httpRequest( FileObject ).then( response =>{
- console.log(response)
- formData.value.videoUrl = response.data;
- } ).finally( res => {
- isUploading.value = false
- } )
+const FileUploadEnd = () => {
+ isUploading.value = false
+}
+const StartCes = () => {
+ console.log(' ----- 寮�濮� ----- ')
+ isUploading.value = true
+}
+
+const End = (res) => {
+ const FileObject = {
+ file: res
+ }
+ httpRequest(FileObject)
+ .then((response) => {
+ console.log(response)
+ formData.value.videoUrl = response.data
+ })
+ .finally((res) => {
+ isUploading.value = false
+ })
}
/** 鎵撳紑寮圭獥 */
@@ -197,7 +254,7 @@
} finally {
formLoading.value = false
}
- }else{
+ } else {
InitHumMODEL()
}
}
@@ -245,26 +302,26 @@
type: undefined,
useGeneralModel: undefined,
useModel: undefined,
- status: undefined,
+ status: undefined
}
formRef.value?.resetFields()
}
-const handleFileSuccess = (fileType,response) => {
+const handleFileSuccess = (fileType, response) => {
+ alert('Pause')
if (fileType === 'videoUrl') {
- formData.value.videoUrl = response.data;
- }
-};
-
-// 淇敼榛樿鐨勬暟瀛椾汉瑙嗛妯″紡涓鸿棰�
-
-const InitHumMODEL = ()=>{
- let ModelList = getIntDictOptions( DICT_TYPE.USE_MODEL )
- for (let index = 0; index < ModelList.length; index++) {
- const element = ModelList[index];
- if( element.label === "瑙嗛" ){
- formData.value.useModel = Number( element.value )
- }
+ formData.value.videoUrl = response.data
}
}
+// 淇敼榛樿鐨勬暟瀛椾汉瑙嗛妯″紡涓鸿棰�
+
+const InitHumMODEL = () => {
+ let ModelList = getIntDictOptions(DICT_TYPE.USE_MODEL)
+ for (let index = 0; index < ModelList.length; index++) {
+ const element = ModelList[index]
+ if (element.label === '瑙嗛') {
+ formData.value.useModel = Number(element.value)
+ }
+ }
+}
</script>
--
Gitblit v1.9.3