¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <Dialog :title="dialogTitle" v-model="dialogVisible"> |
| | | <el-form |
| | | ref="formRef" |
| | | :model="formData" |
| | | :rules="formRules" |
| | | label-width="120px" |
| | | 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-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> |
| | | <el-form-item :label="t('digitalhumans.gender')" prop="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" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </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-option |
| | | v-for="dict in getIntDictOptions(DICT_TYPE.USE_MODEL)" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="Number(dict.value)" |
| | | /> |
| | | </el-select> |
| | | </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-select> |
| | | </el-form-item> |
| | | <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> |
| | | |
| | | <!-- <el-form-item v-if="formData.useModel == 2" :label="t('digitalhumans.video')" prop="videoUrl"> --> |
| | | <el-form-item v-if="false" :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)"/> |
| | | <!-- åè§é¢ææ¾å¨ --> |
| | | <!-- <video-player 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-select v-model="formData.matting" :placeholder="è¯·éæ©æ 徿 è¯"> |
| | | <el-option |
| | | v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_MATTING)" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </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-option |
| | | v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_POSTURE)" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </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-option |
| | | v-for="dict in getIntDictOptions(DICT_TYPE.DIGITALCOURSE_DIGITALHUMAN_TYPE)" |
| | | :key="dict.value" |
| | | :label="dict.label" |
| | | :value="dict.value" |
| | | /> |
| | | </el-select> |
| | | </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> |
| | | </template> |
| | | </Dialog> |
| | | </template> |
| | | <script setup lang="ts"> |
| | | 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 { useUpload } from '@/components/UploadFile/src/useUpload' |
| | | import { el } from 'element-plus/es/locale'; |
| | | import { any } from 'vue-types'; |
| | | |
| | | const { t } = useI18n() // å½é
å |
| | | const message = useMessage() // æ¶æ¯å¼¹çª |
| | | |
| | | const { uploadUrl, httpRequest } = useUpload() //ä¸ä¼ æ¹æ³ |
| | | const dialogVisible = ref(false) // å¼¹çªçæ¯å¦å±ç¤º |
| | | const dialogTitle = ref('') // å¼¹çªçæ é¢ |
| | | const formLoading = ref(false) // 表åçå è½½ä¸ï¼1ï¼ä¿®æ¹æ¶çæ°æ®å è½½ï¼2ï¼æäº¤çæé®ç¦ç¨ |
| | | const formType = ref('') // 表åçç±»åï¼create - æ°å¢ï¼update - ä¿®æ¹ |
| | | const formData = ref({ |
| | | id: undefined, |
| | | expireStatus: undefined, |
| | | finishTime: undefined, |
| | | gender: undefined, |
| | | matting: undefined, |
| | | name: undefined, |
| | | code: undefined, |
| | | pictureUrl: undefined, |
| | | posture: undefined, |
| | | snapshotHeight: undefined, |
| | | snapshotUrl: undefined, |
| | | snapshotWidth: undefined, |
| | | type: undefined, |
| | | useGeneralModel: undefined, |
| | | useModel: undefined, |
| | | status: undefined, |
| | | isTransparent: undefined, |
| | | }) |
| | | |
| | | // å½åæ¯å¦æ£å¨ä¸ä¼ è§é¢ |
| | | const isUploading = ref(false) |
| | | |
| | | const videoProperty = { |
| | | videoUrl: '', |
| | | posterUrl: '', |
| | | autoplay: false, |
| | | style: { |
| | | bgType: 'color', |
| | | bgColor: '#fff', |
| | | marginBottom: 8, |
| | | height: 300 |
| | | } |
| | | } as DiyComponent<VideoPlayerProperty> |
| | | |
| | | 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' }], |
| | | pictureUrl: [{ required: true, message: 'å¾çURLä¸è½ä¸ºç©º', trigger: 'blur' }], |
| | | posture: [{ required: true, message: 'å§¿å¿ä¸è½ä¸ºç©º', trigger: 'change' }], |
| | | snapshotHeight: [{ required: true, message: 'å¿«ç
§é«åº¦ä¸è½ä¸ºç©º', trigger: 'blur' }], |
| | | snapshotUrl: [{ required: true, message: 'å¿«ç
§URLä¸è½ä¸ºç©º', trigger: 'blur' }], |
| | | snapshotWidth: [{ required: true, message: 'å¿«ç
§å®½åº¦ä¸è½ä¸ºç©º', trigger: 'blur' }], |
| | | type: [{ required: true, message: 'ç±»åä¸è½ä¸ºç©º', trigger: 'change' }], |
| | | useGeneralModel: [{ required: true, message: '使ç¨éç¨æ¨¡åä¸è½ä¸ºç©º', trigger: 'change' }], |
| | | isTransparent: [{ required: true, message: 'æ¯å¦å»é¤èæ¯ä¸è½ä¸ºç©º', trigger: 'change' }], |
| | | status: [{ required: true, message: 'ç¶æä¸è½ä¸ºç©º', trigger: 'change' }], |
| | | videoUrl: [{ required: true, message: 'è§é¢ä¸è½ä¸ºç©º', trigger: 'blur' }] |
| | | }) |
| | | const formRef = ref() // 表å Ref |
| | | |
| | | 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 |
| | | } ) |
| | | |
| | | } |
| | | |
| | | /** æå¼å¼¹çª */ |
| | | const open = async (type: string, id?: number) => { |
| | | dialogVisible.value = true |
| | | dialogTitle.value = t('action.' + type) |
| | | formType.value = type |
| | | resetForm() |
| | | // ä¿®æ¹æ¶ï¼è®¾ç½®æ°æ® |
| | | if (id) { |
| | | formLoading.value = true |
| | | try { |
| | | formData.value = await DigitalHumansApi.getDigitalHumans(id) |
| | | } finally { |
| | | formLoading.value = false |
| | | } |
| | | }else{ |
| | | InitHumMODEL() |
| | | } |
| | | } |
| | | defineExpose({ open }) // æä¾ open æ¹æ³ï¼ç¨äºæå¼å¼¹çª |
| | | |
| | | /** æäº¤è¡¨å */ |
| | | const emit = defineEmits(['success']) // å®ä¹ success äºä»¶ï¼ç¨äºæä½æååçåè° |
| | | const submitForm = async () => { |
| | | // æ ¡éªè¡¨å |
| | | await formRef.value.validate() |
| | | // æäº¤è¯·æ± |
| | | formLoading.value = true |
| | | try { |
| | | const data = formData.value as unknown as DigitalHumansApi.DigitalHumansVO |
| | | if (formType.value === 'create') { |
| | | await DigitalHumansApi.createDigitalHumans(data) |
| | | message.success(t('common.createSuccess')) |
| | | } else { |
| | | await DigitalHumansApi.updateDigitalHumans(data) |
| | | message.success(t('common.updateSuccess')) |
| | | } |
| | | dialogVisible.value = false |
| | | // åéæä½æåçäºä»¶ |
| | | emit('success') |
| | | } finally { |
| | | formLoading.value = false |
| | | } |
| | | } |
| | | |
| | | /** é置表å */ |
| | | const resetForm = () => { |
| | | formData.value = { |
| | | id: undefined, |
| | | expireStatus: undefined, |
| | | finishTime: undefined, |
| | | gender: undefined, |
| | | matting: undefined, |
| | | name: undefined, |
| | | code: undefined, |
| | | pictureUrl: undefined, |
| | | posture: undefined, |
| | | snapshotHeight: undefined, |
| | | snapshotUrl: undefined, |
| | | snapshotWidth: undefined, |
| | | type: undefined, |
| | | useGeneralModel: undefined, |
| | | useModel: undefined, |
| | | status: undefined, |
| | | } |
| | | formRef.value?.resetFields() |
| | | } |
| | | const handleFileSuccess = (fileType,response) => { |
| | | 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 ) |
| | | } |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |