taais/src/components/DataAugmentationFormDialog/index.vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :title="parameter.title"
    :destroy-on-close="true"
    :width="parameter.width"
    :top="parameter.top"
    :before-close="handleClose"
    draggable
  >
    <ProFrom ref="proFormRef" :items-options="parameter.itemsOptions" :form-options="_options" :model="parameter.model">
      <template #modelAddress="{}">
        <FileUpload :file-size="4096" :file-type="['pt']" @update:model-value="setModelAddr" />
      </template>
    </ProFrom>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" v-if="parameter.isEdit" :loading="butLoading" @click="handleSubmit">确认</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="FormDialog">
import { ref, ComputedRef, computed, reactive } from 'vue'
import ProFrom from '@/components/ProForm/index.vue'
import { ElMessage } from 'element-plus'
import FileUpload from '@/components/Upload/File.vue'

// import mittBus from '@/utils/mittBus'

interface EmitEvent {
  (e: 'update'): void
}

const emits = defineEmits<EmitEvent>()

const videoUploadRef = ref<InstanceType<typeof FileUpload> | null>(null)

export interface FormParameterProps {
  title: string // 标题
  width?: number // 弹框宽度
  labelWidth?: number // label宽度
  api?: (params: any) => Promise<any> // 表单提交api
  isEdit?: boolean // 是否编辑
  top?: string // 离顶部距离
  formOptions?: ProForm.FormOptions // 表单配置
  itemsOptions: ProForm.ItemsOptions[] // 动态表单字段配置
  model?: Record<ProForm.FormItem['prop'], ProForm.FormItem['value']> // 表单数据对象
  getTableList?: () => void // 获取表格数据的Api
}

// dialog状态
const dialogVisible = ref(false)
const butLoading = ref(false)
// 父组件传过来的参数
const parameter = ref<FormParameterProps>({
  title: '',
  width: 500,
  top: '10vh',
  itemsOptions: [],
  formOptions: {},
  isEdit: true
})
const _options: ComputedRef<ProForm.FormOptions> = computed(() => {
  const form = {
    labelWidth: 120,
    hasFooter: false,
    disabled: false
  }
  return Object.assign(form, parameter.value.formOptions)
})

const modelAddr = ref(null)
const setModelAddr = res => {
  //console.log("setModelAddr res:")
  console.log(res)
  modelAddr.value = res
}
//属性选择逻辑
const mergeWithCondition = (formModel, parameterModel) => {
  const result = {}
  // 获取所有可能的属性名
  const allKeys = new Set([...Object.keys(formModel), ...Object.keys(parameterModel)])

  allKeys.forEach(key => {
    // 检查 formModel 中的属性值
    if (formModel.hasOwnProperty(key) && formModel[key] !== null && formModel[key] !== '' && formModel[key] !== undefined) {
      result[key] = formModel[key]
    } else {
      // 使用 parameterModel 中的属性值
      result[key] = parameterModel[key]
    }
  })

  return result
}

const isFloat = str => {
  // 正则表达式匹配浮点数
  const floatRegex = /^-?\d+(\.\d+)?$/

  // 使用正则表达式测试字符串
  return floatRegex.test(str)
}
const proFormRef = ref<InstanceType<typeof ProFrom> | null>(null)
// 表单提交校验
const handleSubmit = () => {
  const formEl = proFormRef.value?.proFormRef
  const formModel = proFormRef.value?.formModel
  formModel.modelAddress = modelAddr.value
  //console.log('formModel', formModel)

  butLoading.value = true
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      let data = {}
      if (algorithmModelId.value) {
        data = { ...formModel, ...parameter.value.model, algorithmId: algorithmModelId.value }
      } else {
        // data = { ...formModel, ...parameter.value.model }
        data = mergeWithCondition(formModel, parameter.value.model)
      }
      let excludedKeys = ['name', 'taskType', 'inputOssId', 'remarks', 'modelAddress']
      for (let key in data) {
        if (data.hasOwnProperty(key) && !excludedKeys.includes(key)) {
          if (!isFloat(data[key])) {
            ElMessage.error(key + '参数设置不合理！')
            butLoading.value = false
            return
          } else {
            let num = parseFloat(data[key])
            if (key == 's_v' && Number.isInteger(num) && num % 2 == 0) {
              ElMessage.error(key + '参数只能为奇数！')
              butLoading.value = false
              return
            }
          }
        }
      }
      // 使用 Object.fromEntries 从指定的键值对创建新的对象
      let hyperparameters = Object.fromEntries(Object.entries(data).filter(([key, _]) => !excludedKeys.includes(key)))
      // 将 hyperparameters 对象转换为 JSON 字符串
      let hyperparameterConfigurationStr = JSON.stringify(hyperparameters)
      // 向 data 对象中新增 hyperparameterConfiguration 属性
      data.hyperparameterConfiguration = hyperparameterConfigurationStr
      // 删除 modelAddress 属性，如果它存在
      if (data.hasOwnProperty('modelAddress')) {
        delete data.modelAddress
      }
      // console.log(data)
      parameter.value.api!(data).then(res => {
        if (res.code == 200) {
          proFormRef.value?.resetForm(formEl)
          ElMessage.success('操作成功')
          emits('update')
          setItemsOptions()
          parameter.value.model = {}
          dialogVisible.value = false
          parameter.value.getTableList && parameter.value.getTableList()
        } else {
          //console.log('message', res.message)
        }
      })
      butLoading.value = false
    }
    butLoading.value = false
  })
}
// mittBus.on('data:fileName', (fileName: string) => {
//   if (fileName !== undefined && fileName !== null) {
//     console.log(proFormRef.value?.formModel)
//     if(proFormRef.value?.formModel){
//       proFormRef.value.formModel.name = fileName.split('.')[0]
//     }
//   }
// })
// 取消按钮，重置表单，关闭弹框
const setItemsOptions = () => {
  if (parameter.value.itemsOptions.length > 4) {
    parameter.value.itemsOptions.splice(4) //取消和确认后需要重新设置itemOptions
  }
}
const handleClose = () => {
  parameter.value.model = {}
  dialogVisible.value = false
  setItemsOptions()
}
const handleCancel = () => {
  //console.log(parameter.value.model)
  parameter.value.model = {}
  setItemsOptions()
  const formEl = proFormRef.value?.proFormRef
  if (!formEl) return
  if (parameter.value.model?.url) {
    ElMessage.info('请先删除已经上传的图片')
    return
  }
  proFormRef.value?.resetForm(formEl)
  butLoading.value = false
  dialogVisible.value = false
}

let algorithmModelId = ref(0)

// 接收父组件参数
const openDialog = (params: FormParameterProps, algoModelId = null) => {
  algorithmModelId.value = algoModelId
  parameter.value = { ...parameter.value, ...params }
  _options.value.disabled = !parameter.value.isEdit
  butLoading.value = false
  dialogVisible.value = true
}

defineExpose({
  openDialog
})
</script>

<style scoped>
.upload-video-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  margin-top: 20px;
  border: 1px dashed #cccccc;
  :deep(.upload-file-uploader) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
  }
}
</style>