Flex
2025-05-30 dd325aa187729f0b9e105a23e9d7454c76f823fc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<template>
  <div>
    <el-row>
      <el-col>
        <el-button
          plain
          round
          size="small"
          @click="toDisgitalhumans"
        >
          {{ t('courseCenter.myModel') }}
        </el-button>
      </el-col>
    </el-row>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="200px"
      v-loading="formLoading"
    >
      <el-form-item :label="t('courseCenter.name')" prop="name">
        <el-input v-model="formData.name" :placeholder="t('common.inputText')+t('courseCenter.name')" />
      </el-form-item>
      <el-form-item :label="t('courseCenter.digitalPeopleModel')" prop="useModel">
        <el-select v-model="formData.useModel" :placeholder="t('common.selectText')+t('courseCenter.digitalPeopleModel')">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.USE_MODEL)"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
        <div v-if="formData.useModel === 2" class="tip-text">
          上传30秒-5分钟绿幕录制视频,支持背景更换,制作您专属的虚拟数字人分身,适用于企业宣传、教育培训、口播视频等各大应用场景,并结合数字人口播技术,可替代真人出镜。!
          <br/>视频方向:纵向;
          <br/>文件格式:mp4;
          <br/>视频编码:.h264;
          <br/>视频时长:30 秒 ~ 5 分钟;
          <br/>分辨率:建议分辨率为9:16的720p或 1080p;
          <br/>文件大小:小于 100MB。
        </div>
        <div v-if="formData.useModel === 3" class="tip-text">
          上传5秒-5分钟的视频,1分钟内即可获取您的免费数字分身!
          <br/>视频方向:纵向;
          <br/>文件格式:mp4;
          <br/>视频编码:.h264;
          <br/>视频时长:5 秒 ~ 5 分钟;
          <br/>分辨率:建议分辨率为9:16的720p或 1080p;
          <br/>文件大小:小于 100MB。
        </div>
      </el-form-item>
      <el-form-item v-if="formData.useModel == 1" :label="t('courseCenter.image')" prop="pictureUrl">
        <UploadImg v-model="formData.pictureUrl" />
      </el-form-item>
      <el-form-item v-if="formData.useModel == 2 || formData.useModel == 3" :label="t('courseCenter.video')" prop="videoUrl">
        <UploadFile v-model="formData.videoUrl" :fileType="['mp4']" :limit="1" :fileSize="20" @on-success="handleFileSuccess('videoUrl', $event)"/>
      </el-form-item>
    </el-form>
    <div>
      <el-button v-hasPermi="['humans:custom:submit']" @click="submitForm(1)" type="primary" :disabled="formLoading">{{t('courseCenter.submit')}}</el-button>
    </div>
  </div>
</template>
 
 
<script setup lang="ts">
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import * as DigitalHumansApi from "@/api/digitalcourse/digitalhumans";
const message = useMessage() // 消息弹窗\
const { t } = useI18n() // 国际化
import { useRouter } from 'vue-router';
const router = useRouter();
const formLoading = ref(false)
const formData = ref({
  id: undefined,
  expireStatus: undefined,
  finishTime: undefined,
  matting: 0,
  name: undefined,
  code: undefined,
  pictureUrl: undefined,
  posture: 1,
  snapshotHeight: undefined,
  snapshotUrl: undefined,
  snapshotWidth: undefined,
  type: 1,
  useGeneralModel: undefined,
  useModel: undefined,
  status: undefined,
})
const formRules = reactive({
  name: [{ required: true, message: t('courseCenter.name')+t('common.notEmpty'), trigger: 'blur' }],
  pictureUrl: [{ required: true, message: t('courseCenter.image')+t('common.notEmpty'), trigger: 'blur' }],
  useModel: [{ required: true, message: t('courseCenter.digitalPeopleModel')+t('common.notEmpty'), trigger: 'blur' }],
  videoUrl: [{ required: true, message: t('courseCenter.video')+t('common.notEmpty'), trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const submitForm = async (status) => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as DigitalHumansApi.DigitalHumansVO
    data.status = status
    if (!data.id) {
      await DigitalHumansApi.createDigitalHumans(data)
      message.success(t('common.createSuccess'))
    } else {
      await DigitalHumansApi.updateDigitalHumans(data)
      message.success(t('common.updateSuccess'))
    }
  } finally {
    formLoading.value = false
    toDisgitalhumans()
  }
}
const toDisgitalhumans = () => {
  router.push("/digitalcourse/digitalhumans/custom/page")
}
const save = async () => {
  // 校验表单
  // await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as DigitalHumansApi.DigitalHumansVO
    if (!data.id) {
      await DigitalHumansApi.createDigitalHumans(data)
      message.success(t('common.createSuccess'))
    } else {
      await DigitalHumansApi.updateDigitalHumans(data)
      message.success(t('common.updateSuccess'))
    }
    // 提交成功后跳转到我的模型页面
    toDisgitalhumans()
  } finally {
    formLoading.value = false
  }
}
 
// 处理文件上传成功
const handleFileSuccess = (fileType,response) => {
  if (fileType === 'videoUrl') {
    formData.value.videoUrl = response.data;
  }
};
 
 
</script>
 
 
 
<style scoped lang="scss">
 
</style>