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

<template>
  <div class="amplify-container">
    <div class="amplify-main">
      <ProForm :items-options="items" :model="model"> </ProForm>
      <el-container>
        <el-table :data="batchDataList" tooltip-effect="dark" style="width: 100%" @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; justify-content: center;margin: 0 30px">
          <el-button type="primary" icon="ArrowRightBold" :disabled="!canSelect" @click="clickSelectData"></el-button>
          <el-container style="height: 10px"></el-container>
          <el-button type="primary" 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>
    </div>

    <el-footer>
      <el-button class="submit" type="primary" @click="handleSubmit">提交</el-button>
    </el-footer>
  </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
}
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[]))
onMounted(() => {
  batchListDataApi().then(res => {
    batchDataList.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)
}
const 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 handleSubmit = () => {
  amplifyApi(selectedBatchDataList.value).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>