feat: 数据扩展

src/views/demo/data/AmplifyForm.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="amplify-main">
+    <ProForm :items-options="items" :model="model"></ProForm>
+    <el-button type="primary" style="margin-left: 50px" @click="showDataSelectionDialog()">选择批次</el-button>
+
+    <el-dialog v-model="dataDialogVisible" title="选择数据批次" style="width: 70vw">
+      <el-container>
+        <el-table :data="batchDataList" tooltip-effect="dark" style="width: 100%; margin-bottom: 30px" @selection-change="handleSelectionChange">
+          <el-table-column type="selection"></el-table-column>
+          <el-table-column prop="batchNum" label="所有批次"></el-table-column>
+          <el-table-column prop="batchSize" label="数量"></el-table-column>
+        </el-table>
+
+        <el-container style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 30px">
+          <el-button type="primary" icon="ArrowRightBold" :disabled="!canSelect" @click="clickSelectData"></el-button>
+          <el-button type="primary" style="margin: 10px 0 0" icon="ArrowLeftBold" :disabled="!canDeselect" @click="clickDeselectData"></el-button>
+        </el-container>
+
+        <el-table :data="selectedBatchDataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleDeselectionChange">
+          <el-table-column type="selection"></el-table-column>
+          <el-table-column prop="batchNum" label="已选批次"></el-table-column>
+          <el-table-column prop="batchSize" label="数量"></el-table-column>
+        </el-table>
+      </el-container>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dataDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmSelection">确定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { reactive, ref, computed, onMounted, defineEmits } from 'vue'
+import ProForm from '@/components/ProForm/index.vue'
+import { batchListDataApi } from '@/api/modules/demo/data'
+import { getDictsApi } from '@/api/modules/system/dictData'
+
+const emit = defineEmits(['updateData', 'updateModel', 'updateParams'])
+
+// 数据
+let model = {
+  taskName: 'sss',
+  transfer: null
+}
+
+const dataDialogVisible = ref(false)
+let batchDataList = ref(reactive([] as any[]))
+let selectedBatchDataList = ref(reactive([] as any[]))
+let tempSelectedBatchDataList = ref(reactive([] as any[]))
+let tempDeselectedBatchDataList = ref(reactive([] as any[]))
+let parameList = ref(reactive([] as any[]))
+let queryBatchData = ref(reactive([] as any[]))
+
+onMounted(() => {
+  batchListDataApi().then(res => {
+    queryBatchData.value = reactive(res.data)
+  })
+
+  getDictsApi('expand_data_params').then(res => {
+    parameList.value = reactive(JSON.parse(res.data[0].remark))
+    parameList.value.forEach(item => {
+      items.push({
+        label: item.name,
+        prop: item.agName,
+        span: 12,
+        rules: [{ required: item.required, message: '不能为空' }],
+        compOptions: {
+          elTagName: 'input',
+          clearable: true,
+          placeholder: '请输入..'
+        }
+      })
+      model[`${item.agName}`] = item.defaultValue
+    })
+    emit('updateModel', model)
+    // Emit parameList 给父组件
+    emit('updateParams', parameList.value)
+  })
+})
+
+const handleSelectionChange = data => {
+  tempSelectedBatchDataList.value = reactive(data)
+}
+
+let canSelect = computed(() => tempSelectedBatchDataList.value.length > 0)
+
+const handleDeselectionChange = data => {
+  tempDeselectedBatchDataList.value = reactive(data)
+}
+
+const clickSelectData = () => {
+  let set = new Set()
+  tempSelectedBatchDataList.value.forEach(batch => {
+    set.add(batch.batchNum)
+    selectedBatchDataList.value.push(batch)
+  })
+
+  batchDataList.value = reactive(
+    batchDataList.value.filter(batch => !set.has(batch.batchNum))
+  )
+  emit('updateData', selectedBatchDataList.value)
+}
+
+const canDeselect = computed(() => tempDeselectedBatchDataList.value.length > 0)
+
+const clickDeselectData = () => {
+  let set = new Set()
+  tempDeselectedBatchDataList.value.forEach(batch => {
+    set.add(batch.batchNum)
+    batchDataList.value.push(batch)
+  })
+
+  selectedBatchDataList.value = reactive(
+    selectedBatchDataList.value.filter(batch => !set.has(batch.batchNum))
+  )
+  emit('updateData', selectedBatchDataList.value)
+}
+
+const showDataSelectionDialog = () => {
+  if (selectedBatchDataList.value.length === 0) {
+    batchDataList.value = queryBatchData.value
+  }
+  dataDialogVisible.value = true
+}
+
+const confirmSelection = () => {
+  emit('updateData', selectedBatchDataList.value)
+  dataDialogVisible.value = false
+}
+
+let items: ProForm.ItemsOptions[] = reactive([
+  {
+    label: '任务名称',
+    prop: 'taskName',
+    span: 14,
+    rules: [{ required: true, message: '请输入任务名称' }],
+    compOptions: {
+      elTagName: 'input',
+      clearable: true,
+      placeholder: '请输入用户名'
+    }
+  }
+])
+</script>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>

src/views/demo/data/amplify.vue

@@ -1,170 +1,62 @@
 <template>
   <div class="amplify-container">
-    <div class="amplify-main">
-      <ProForm :items-options="items" :model="model"> </ProForm>
-      <el-button type="primary" style="margin-left: 50px" @click="showDataSelectionDialog()">选择批次</el-button>
-    </div>
-
-    <el-footer>
-      <el-button class="submit" type="primary" @click="handleSubmit">提交</el-button>
-    </el-footer>
-    <el-dialog v-model="dataDialogVisible" title="选择数据批次" style="width: 70vw">
-      <el-container>
-        <el-table :data="batchDataList" tooltip-effect="dark" style="width: 100%; margin-bottom: 30px" @selection-change="handleSelectionChange">
-          <el-table-column type="selection"> </el-table-column>
-          <el-table-column prop="batchNum" label="所有批次"> </el-table-column>
-          <el-table-column prop="batchSize" label="数量"> </el-table-column>
-        </el-table>
+    <AmplifyForm @updateData="updateBatchData" @updateModel="updateModelData" @updateParams="updateParamsList" />
 
-        <el-container style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 30px">
-          <el-button type="primary" icon="ArrowRightBold" :disabled="!canSelect" @click="clickSelectData"></el-button>
-          <el-button
-            type="primary"
-            style="margin: 10px 0 0"
-            icon="ArrowLeftBold"
-            :disabled="!canDeselect"
-            @click="clickDeselectData"
-          ></el-button>
-        </el-container>
+    <div style="margin: 0 auto">
+      <el-footer>
+        <el-button class="submit" type="primary" @click="handleSubmit">提交</el-button>
+      </el-footer>
+    </div>
 
-        <el-table :data="selectedBatchDataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleDeselectionChange">
-          <el-table-column type="selection"> </el-table-column>
-          <el-table-column prop="batchNum" label="已选批次"> </el-table-column>
-          <el-table-column prop="batchSize" label="数量"> </el-table-column>
-        </el-table>
-      </el-container>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dataDialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="dataDialogVisible = false"> 确 定 </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
-<script setup lang="tsx" name="amplify">
-import { reactive, ref, computed, onMounted } from 'vue'
-import ProForm from '@/components/ProForm/index.vue'
-import { batchListDataApi, amplifyApi } from '@/api/modules/demo/data'
-import { getDictsApi } from '@/api/modules/system/dictData'
-let model = {
-  taskName: '',
-  transfer: null
-}
-const dataDialogVisible = ref(false)
-let batchDataList = ref(reactive([] as any[]))
-let selectedBatchDataList = ref(reactive([] as any[]))
-let tempSelectedBatchDataList = ref(reactive([] as any[]))
-let tempDeselectedBatchDataList = ref(reactive([] as any[]))
-let parameList = ref(reactive([] as any[]))
-let queryBatchData = ref(reactive([] as any[]))
-onMounted(() => {
-  batchListDataApi().then(res => {
-    // batchDataList.value = reactive(res.data)
-    queryBatchData.value = reactive(res.data)
-  })
-  getDictsApi('expand_data_params').then(res => {
-    parameList.value = reactive(JSON.parse(res.data[0].remark))
-    parameList.value.forEach(item => {
-      items.push({
-        label: item.name,
-        prop: item.agName,
-        span: 12,
-        rules: [{ required: item.required, message: '不能为空' }],
-        compOptions: {
-          elTagName: 'input',
-          clearable: true,
-          placeholder: '请输入..'
-        }
-      })
-      model[`${item.agName}`] = item.defaultValue
-    })
-  })
-})
-const handleSelectionChange = data => {
-  tempSelectedBatchDataList.value = reactive(data)
-}
-let canSelect = computed(() => {
-  return tempSelectedBatchDataList.value.length > 0
-})
-const handleDeselectionChange = data => {
-  tempDeselectedBatchDataList.value = reactive(data)
-}
-const clickSelectData = () => {
-  let set = new Set()
-  for (let i = 0; i < tempSelectedBatchDataList.value.length; i++) {
-    set.add(tempSelectedBatchDataList.value[i].batchNum)
-    selectedBatchDataList.value.push(tempSelectedBatchDataList.value[i])
-  }
-  let newArray = [] as any[]
-  for (let i = 0; i < batchDataList.value.length; i++) {
-    if (!set.has(batchDataList.value[i].batchNum)) {
-      newArray.push(batchDataList.value[i])
-    }
-  }
-  batchDataList.value = reactive(newArray)
+
+<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 canDeselect = computed(() => {
-  return tempDeselectedBatchDataList.value.length > 0
-})
-const clickDeselectData = () => {
-  let set = new Set()
-  for (let i = 0; i < tempDeselectedBatchDataList.value.length; i++) {
-    set.add(tempDeselectedBatchDataList.value[i].batchNum)
-    batchDataList.value.push(tempDeselectedBatchDataList.value[i])
-  }
-  let newArray = [] as any[]
-  for (let i = 0; i < selectedBatchDataList.value.length; i++) {
-    if (!set.has(selectedBatchDataList.value[i].batchNum)) {
-      newArray.push(selectedBatchDataList.value[i])
-    }
-  }
-  selectedBatchDataList.value = reactive(newArray)
+
+const updateModelData = (data) => {
+  model.value = data
 }
-const showDataSelectionDialog = () => {
-  // bIsTrainData.value = isTrainData
-  if (selectedBatchDataList.value.length === 0) {
-    batchDataList.value = queryBatchData.value
-  }
-  dataDialogVisible.value = true
+
+// 监听 parameList 更新
+const updateParamsList = (data) => {
+  parameList.value = data
 }
+
+// 提交逻辑
 const handleSubmit = () => {
-  let val = [] as any[]
-  for (let i = 0; i < selectedBatchDataList.value.length; i++) {
-    val.push(selectedBatchDataList.value[i].batchNum)
-  }
-  const batchNum = val.join()
-  const otherParams = [] as any[]
+  let batchNum = selectedBatchDataList.value.map(batch => batch.batchNum).join()
 
-  parameList.value.map(item => {
-    item.value = model[`${item.agName}`]
+  // 将 parameList 中的值也传递到接口
+  parameList.value.forEach(item => {
+    item.value = model.value[`${item.agName}`]
   })
-  console.log('parameList.value', parameList.value)
+
   const data = {
     batchNum,
-    taskName: model.taskName,
+    taskName: model.value.taskName,
     otherParams: parameList.value
   }
-  console.log('data', data)
+
   amplifyApi(data).then(res => {
     console.log(res)
   })
 }
-let items: ProForm.ItemsOptions[] = reactive([
-  {
-    label: '任务名称',
-    prop: 'taskName',
-    span: 14,
-    // labelWidth: '90px',
-    rules: [{ required: true, message: '请输入任务名称' }],
-    compOptions: {
-      elTagName: 'input',
-      clearable: true,
-      placeholder: '请输入用户名'
-    }
-  }
-])
 </script>
-<style scoped lang="scss">
-@import './index.scss';
+
+<style scoped>
+.amplify-container {
+  /* 样式 */
+}
 </style>

src/views/taais/homePage/task/index.vue

@@ -105,10 +105,9 @@
 <!--        <span class="span_class"> {{ item.name }}</span>-->
 <!--        <el-input style="width: 300px" type="text" :placeholder="'请输入' + item.name" v-model="item.defaultValue"> </el-input>-->
 <!--      </el-container>-->
-      <el-container style="margin-top: 5px">
-
+      <el-container style="margin-top: 5px;">
+        <AmplifyForm @updateData="updateBatchData" @updateModel="updateModelData" @updateParams="updateParamsList" />
       </el-container>
-
       <el-container style="height: 10px"></el-container>
 
       <span class="dialog-footer">
@@ -182,10 +181,48 @@ import { createTaskApi } from '@/api/modules/task/task'
 import FormDialog from '@/components/FormDialog/index.vue'
 import { useRouter } from 'vue-router'
 import { listTaskConfigurationApi } from '@/api/modules/task/taskConfiguration'
-import { batchListDataApi } from '@/api/modules/demo/data'
+import {amplifyApi, batchListDataApi} from '@/api/modules/demo/data'
 import { listDataApi } from '@/api/modules/system/dictData'
 import { ElMessage } from 'element-plus'
-import Amplify from "@/views/demo/data/amplify.vue";
+import AmplifyForm from "@/views/demo/data/AmplifyForm.vue";
+
+let selectedBatchDataList1 = ref([] as any[])
+let model = ref({})
+let parameList = ref([] as any[])
+
+// 监听 AmplifyForm 组件传递的数据
+const updateBatchData = (data) => {
+  selectedBatchDataList1.value = data
+}
+
+const updateModelData = (data) => {
+  model.value = data
+}
+
+// 监听 parameList 更新
+const updateParamsList = (data) => {
+  parameList.value = data
+}
+
+// 提交逻辑
+const handleSubmit = () => {
+  let batchNum = selectedBatchDataList1.value.map(batch => batch.batchNum).join()
+
+  // 将 parameList 中的值也传递到接口
+  parameList.value.forEach(item => {
+    item.value = model.value[`${item.agName}`]
+  })
+
+  const data = {
+    batchNum,
+    taskName: model.value.taskName,
+    otherParams: parameList.value
+  }
+
+  amplifyApi(data).then(res => {
+    console.log(res)
+  })
+}
 const valid = data => {
   let ret = {
     code: 400,
@@ -327,8 +364,7 @@ const showExpandDataSuperParameterConfig = () => {
 }
 // 数据扩增超参修改保存
 const submitExpandDataConfigDialog = () => {
-  // console.log(expandDataConfig)
-  formData.expandConfig = JSON.stringify(expandDataConfig.value)
+  handleSubmit()
   expandDataDialogVisible.value = false
 }