修改模板新建，添加数据校验

Flex

2025-06-10 f84b7cbd4a31c0c3c1c50b7f754429700eb72e6d

 easegen-front/src/views/digitalcourse/template/TemplateForm.vue

@@ -13,7 +13,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="背景图片" prop="templateName">
          <el-form-item label="背景图片" prop="bgImage">
            <el-upload
              v-model:file-list="fileList"
              class="upload-demo"
@@ -98,7 +98,6 @@
                type="checkbox"
                v-model="isChecked"
                class="checkbox-input"
                @click.stop
              />
            </div>
            <div class="image-checkbox-wrapper" @click="toggleCheck1">
@@ -107,7 +106,6 @@
                type="checkbox"
                v-model="isChecked1"
                class="checkbox-input"
                @click.stop
              />
            </div>
          </div>
@@ -115,8 +113,8 @@
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
      <el-button v-loading="IsUploadBack" @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
      <el-button @click="cancale">{{ t('common.cancel') }}</el-button>
    </template>
  </Dialog>
</template>
@@ -131,6 +129,9 @@
import {updateFile} from "@/api/infra/file";
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
import { ca } from 'element-plus/es/locale';
import { rule } from 'postcss';
import { truncate } from 'lodash-es';
const getUploadUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
const fileList = ref([]);
const lastUploadedFileUrl = ref('');
@@ -142,11 +143,13 @@
const isChecked1 = ref(false);
const toggleCheck = () => {
  isChecked.value = !isChecked.value;
  console.log(isChecked.value)
  if (isChecked.value==true) {
    formData.value.showPpt=1
  }else if (isChecked.value==false) {
    formData.value.showPpt=0
  }
  console.log(formData.value.showPpt)
};
const toggleCheck1 = () => {
  isChecked1.value =!isChecked1.value;
@@ -156,7 +159,10 @@
    formData.value.showDigitalHuman=0
  }
}
// 当前是否在上传背景图
const IsUploadBack = ref(false)
const beforeUpload = (file) => {
  console.log("beforeUpload")
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

@@ -168,13 +174,16 @@
    ElMessage.error('图片大小不能超过2MB!');
    return false;
  }
  
  return true;
};
async function updataImage(formData1) {
  IsUploadBack.value = truncate
  const response= await updateFile(formData1)
  console.log(response.data)
  if (response) {
    formData.value.bgImage=response.data
    IsUploadBack.value = false
    ElMessage.success('上传成功');
  }
}
@@ -207,8 +216,8 @@
  id: undefined,
  showBackground: 1,
  templateName: undefined,
  showDigitalHuman: undefined,
  showPpt: undefined,
  showDigitalHuman: 0,
  showPpt: 0,
  pptW: 505,
  pptH: 290,
  pptX: 40,
@@ -219,6 +228,7 @@
  humanY: 92,
  bgImage: undefined,
})

const formRules = reactive({
  templateName: [{ required: true, message: t('template.name') + t('common.notEmpty'), trigger: 'blur' }],
  showBackground: [{ required: true, message: t('template.isShowBackground') + t('common.notEmpty'), trigger: 'blur' }],
@@ -234,6 +244,7 @@
  humanX: [{ required: true, message: t('template.topPositionDigitalPeople') + t('common.notEmpty'), trigger: 'blur' }],
  humanY: [{ required: true, message: t('template.leftPositionDigitalPeople') + t('common.notEmpty'), trigger: 'blur' }],
  zg: [{ required: true, message: '模板类型', trigger: 'blur' }],
  bgImage: [{ required: true, message: '请上传背景图片', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
let ishasAdminRole = ref(false)
@@ -268,14 +279,20 @@
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  console.log(formData.value.showPpt)
  if( formData.value.showPpt === 0 ){
     message.error(t('common.NeedAddPpt'))
     return
  }

  const imageFile = await saveAsImage();
  if (imageFile) {
    const formData1 = new FormData();
    formData1.append('file', imageFile);
    const response = await updateFile(formData1);
    formData.value.previewImage = response.data;
    // 校验表单
    await formRef.value.validate()
    // 提交请求
    formLoading.value = true
    try {
@@ -313,8 +330,8 @@
  formData.value = {
    id: undefined,
    showBackground: 1,
    showDigitalHuman: undefined,
    showPpt: undefined,
    showDigitalHuman: 0,
    showPpt: 0,
    pptW: 505,
    pptH: 290,
    pptX: 40,
@@ -329,6 +346,16 @@
  }
  formRef.value?.resetFields()
}
// 取消按钮
const cancale = ()=>{
  resetForm()
  // 页面中不显示弹窗，背景图，数字人，ppt
  lastUploadedFileUrl.value = ""
  isChecked.value = false
  isChecked1.value = false
  dialogVisible.value = false
}

const captureElement = ref<HTMLElement | null>(null);
const saveAsImage = async () => {
  if (!captureElement.value) {