|
@@ -0,0 +1,170 @@
|
|
|
+<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>
|