SPDM/src/views/data/train/index.vue

<template>
  <div class="gl-page-content" v-if="isModelListPage">
    <div class="model-training-list" >
      <BaseTable
        showIndex
        ref="tableRef"
        :tableName="TABLE_NAME.MODEL_TRAINING_LIST"
        :api="getModelTrainingListApi"
        :searchLimitNum="3"
        :actionList="actionList"
        :exportApi="exportTrainingListApi"
        :exportFileName="$t('数据训练.数据训练列表')"
        :exportDict="{
          trainingStatus: 'TRAINING_STATUS',
          algorithmUsed: 'TRAINING_ALGORITHM'
        }"
      >
        <template #leftOptions>
          <el-button icon="plus" type="primary" @click="addModelFun">{{ $t('数据训练.新建训练') }}</el-button>
        </template>

        <template #trainUser>
          <!-- {{ row.createBy }} -->
        </template>
        <!-- <template #tableActions="{ row }">
          <div class="gl-table-actions">
            <el-link type="primary" @click="goModelDetailFun(row)">查看</el-link>
            <el-link type="primary" @click="editTrainingFun(row)">编辑</el-link>
            <el-popconfirm
              title="确认删除训练模型吗？"
              @confirm="delModelFun(row.id)"
            >
              <template #reference>
                <el-link type="danger">删除</el-link>
              </template>
            </el-popconfirm>
          </div>
        </template> -->
      </BaseTable>
      <Dialog
        v-model="dialogVisible"
        :diaTitle="isCreateModal?$t('数据训练.新建训练'):$t('数据训练.编辑训练')"
        :width="500"
        :height="500"
        @close="onCancelFun"
        show-footer
      >
        <TableForm ref="tableFormRef" :tableName="TABLE_NAME.MODEL_TRAINING_LIST" />
        <template #footer>
          <div>
            <el-button @click="onCancelFun">{{ $t('通用.取消') }}</el-button>
            <el-button type="primary" @click="onConfirmFun">{{ $t('通用.确定') }}</el-button>
          </div>
        </template>
      </Dialog>
    </div>
  </div>
  <modelTraining v-if="!isModelListPage" :modelForm="currentModelForm" @back="isModelListPage = true"></modelTraining>
</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getModelTrainingListApi, addModelApi, updateModelApi, delModelApi, exportTrainingListApi } from '@/api/data/dataForecast';
import { tableActionsLength } from '@/utils/common';
import BaseTable from '@/components/common/table/baseTable.vue';
import Dialog from '@/components/common/dialog/index.vue';
import TableForm from '@/components/common/table/tableForm.vue';
import modelTraining from './modelTraining.vue';
import { TABLE_NAME } from '@/utils/enum/tableName';
import i18n from '@/utils/i18n';

const tableRef = ref();
const tableFormRef = ref();

const isModelListPage = ref(true);

const isCreateModal = ref(false);

const dialogVisible = ref(false);

const currentModelForm = reactive<any>({});

const addModelFun = () => {
  isCreateModal.value = true;
  dialogVisible.value = true;
  nextTick(() => {
    tableFormRef.value.resetFun();
  });
};

const actionList = computed(() => {
  return [
    {
      title: i18n?.global?.t('通用.查看'),
      type: 'primary',
      click: (row: any) => {
        goModelDetailFun(row);
      },
    },
    {
      title: i18n?.global?.t('通用.编辑'),
      type: 'primary',
      click: (row: any) => {
        editTrainingFun(row);
      },
    },
    {
      title: i18n?.global?.t('通用.删除'),
      needConfirm: true,
      confirmText: i18n?.global?.t('通用.确认删除吗'),
      type: 'danger',
      click: (row: any) => {
        delModelFun(row.id);
      },
    },
  ];

});
const onCancelFun = () => {
  dialogVisible.value = false;
};

const goModelDetailFun = (row: any) => {
  for (const key in row) {
    currentModelForm[key] = row[key];
  }
  isModelListPage.value = false;
};

const editTrainingFun = (row: any) => {
  isCreateModal.value = false;
  dialogVisible.value = true;
  nextTick(() => {
    tableFormRef.value.setFormDataFun(row);
  });
};

const delModelFun = async (id: number) => {
  const res:any = await delModelApi({
    modelId: id,
  });
  if (res.code === 200) {
    ElMessage.success('删除训练数据成功！');
    tableRef.value.resetFun();
  } else {
    ElMessage.error('删除训练数据失败！' + res.message);
  }
};

const onConfirmFun = async() => {
  const valid = await tableFormRef.value?.validateFun();
  if (valid) {
    const formData = tableFormRef.value?.getFormDataFun();
    if (isCreateModal.value) {
      const req = {
        ...formData,
      };
      const res:any = await addModelApi(req);
      if (res.code === 200) {
        ElMessage.success('新建训练数据成功！');
        dialogVisible.value = false;
        tableRef.value.resetFun();
      }
    } else {
      const req = {
        modelId: formData.id,
        ...formData,
      };
      const res:any = await updateModelApi(req);
      if (res.code === 200) {
        ElMessage.success('更新训练数据成功！');
        dialogVisible.value = false;
        tableRef.value.resetFun();
      } else {
        ElMessage.error('更新训练数据失败！' + res.message);
      }

    }

  }

};

onMounted(() => {

});
</script>

<style lang="scss" scoped>
  .add-dia-content {
    padding-top: 20px;
  }
  .model-training {
    width: 100%;
    height: 100%;
  }
</style>