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

<template>
  <div class="amplify-main">
    <ProForm :items-options="items" :model="model"></ProForm>
    <el-button type="primary" v-if="showSelectBatchButton" 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[]))

const props = defineProps({ showSelectBatchButton: Boolean })

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 === 'true', message: item.name + '不能为空' }],
        compOptions: {
          elTagName: 'input',
          clearable: true,
          placeholder: '请输入' + item.name
        }
      })
      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
}

const labeledTypeData = [
  {
    label: 'obb',
    value: 'obb'
  },
  {
    label: 'hbb',
    value: 'hbb'
  }
]

let items: ProForm.ItemsOptions[] = reactive([
  {
    label: '任务名称',
    prop: 'taskName',
    span: 14,
    rules: [{ required: true, message: '请输入任务名称' }],
    compOptions: {
      elTagName: 'input',
      clearable: true,
      placeholder: '请输入用户名'
    }
  },
  {
    label: '扩充方式',
    prop: 'augmentationType',
    span: 14,
    rules: [{ required: true, message: '请输入扩充方式' }],
    compOptions: {
      elTagName: 'select',
      enum: labeledTypeData
    }
  }
])
</script>

<style scoped lang="scss">
@import './index.scss';
</style>