taais-web/src/views/demo/data/amplify.vue

<template>
  <div class="amplify-container">
    <AmplifyForm @update-data="updateBatchData" @update-model="updateModelData" @update-params="updateParamsList" :show-select-batch-button="true" />

    <div style="margin: 0 auto">
      <el-footer>
        <el-button class="submit" type="primary" @click="handleSubmit">提交</el-button>
      </el-footer>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref } from 'vue'
import AmplifyForm from './AmplifyForm.vue'
import { amplifyApi } from '@/api/modules/demo/data'

let selectedBatchDataList = ref([] as any[])
let model = ref({})
let parameList = ref([] as any[])

// 监听 AmplifyForm 组件传递的数据
const updateBatchData = data => {
  selectedBatchDataList.value = data
}

const updateModelData = data => {
  model.value = data
}

// 监听 parameList 更新
const updateParamsList = data => {
  parameList.value = data
}

// 提交逻辑
const handleSubmit = () => {
  let batchNum = selectedBatchDataList.value.map(batch => batch.batchNum).join()

  // 将 parameList 中的值也传递到接口
  parameList.value.forEach(item => {
    item.value = model.value[`${item.agName}`]
  })

  const data = {
    batchNum,
    augmentationType: model.value.augmentationType,
    taskName: model.value.taskName,
    otherParams: parameList.value
  }

  amplifyApi(data).then(res => {
    console.log(res)
  })
}
</script>

<style scoped>
.amplify-container {
  /* 样式 */
}
</style>