taais-web/src/views/demo/dataAugmentation/index.vue

<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>

        <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="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: 'ssss',
  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)
}
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 showDataSelectionDialog = () => {
  // bIsTrainData.value = isTrainData
  if (selectedBatchDataList.value.length === 0) {
    batchDataList.value = queryBatchData.value
  }
  dataDialogVisible.value = true
}
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[]

  parameList.value.map(item => {
    item.value = model[`${item.agName}`]
  })
  console.log('parameList.value', parameList.value)
  const data = {
    batchNum,
    taskName: model.taskName,
    otherParams: JSON.stringify(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>