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

<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" row-key="id" :request-api="listAlgorithmModelTrackApi">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="primary" v-auth="['demo:AlgorithmModelTrack:add']" icon="CirclePlus" @click="openDialog(1, '算法模型配置新增')">
          新增
        </el-button>
        <!-- <el-button type="primary" v-auth="['demo:AlgorithmModelTrack:import']" icon="Upload" plain @click="batchAdd"> 导入 </el-button>
        <el-button type="primary" v-auth="['demo:AlgorithmModelTrack:export']" icon="Download" plain @click="downloadFile"> 导出 </el-button> -->
        <el-button
          type="danger"
          v-auth="['demo:AlgorithmModelTrack:remove']"
          icon="Delete"
          plain
          :disabled="!scope.isSelected"
          @click="batchDelete(scope.selectedListIds)"
        >
          批量删除
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link icon="View" v-auth="['demo:AlgorithmModelTrack:query']" @click="openDialog(3, '算法模型配置查看', scope.row)">
          查看
        </el-button>
        <!-- <el-button
          type="primary"
          link
          icon="EditPen"
          v-auth="['demo:AlgorithmModelTrack:edit']"
          @click="openDialog(2, '算法模型配置编辑', scope.row)"
        >
          编辑
        </el-button> -->
        <el-button type="primary" link icon="Delete" v-auth="['demo:AlgorithmModelTrack:remove']" @click="deleteAlgorithmModelTrack(scope.row)">
          删除
        </el-button>
      </template>
    </ProTable>
    <FormDialog ref="formDialogRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="AlgorithmModelTrack">
import { ref, reactive, onMounted } from 'vue'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { ElMessageBox } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import FormDialog from '@/components/FormDialog/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import {
  listAlgorithmModelTrackApi,
  delAlgorithmModelTrackApi,
  addAlgorithmModelTrackApi,
  updateAlgorithmModelTrackApi,
  importTemplateApi,
  importAlgorithmModelTrackDataApi,
  exportAlgorithmModelTrackApi,
  getAlgorithmModelTrackApi
} from '@/api/modules/demo/AlgorithmModelTrack'

import { enumAlgorithmConfigTrackApi } from '@/api/modules/demo/AlgorithmConfigTrack'
import { AlgorithmType, SubSystem, enumsModelStatus, enumsAlgorithmType, enumsSubSystem } from '@/views/demo/utils'

// ProTable 实例
const proTable = ref<ProTableInstance>()

// 删除算法模型配置信息
const deleteAlgorithmModelTrack = async (params: any) => {
  await useHandleData(delAlgorithmModelTrackApi, params.id, '删除【' + params.id + '】算法模型配置')
  proTable.value?.getTableList()
}

// 批量删除算法模型配置信息
const batchDelete = async (ids: string[]) => {
  await useHandleData(delAlgorithmModelTrackApi, ids, '删除所选算法模型配置信息')
  proTable.value?.clearSelection()
  proTable.value?.getTableList()
}

// 导出算法模型配置列表
const downloadFile = async () => {
  ElMessageBox.confirm('确认导出算法模型配置数据?', '温馨提示', { type: 'warning' }).then(() =>
    useDownload(exportAlgorithmModelTrackApi, '算法模型配置列表', proTable.value?.searchParam)
  )
}

// 批量添加算法模型配置
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
  const params = {
    title: '算法模型配置',
    tempApi: importTemplateApi,
    importApi: importAlgorithmModelTrackDataApi,
    getTableList: proTable.value?.getTableList
  }
  dialogRef.value?.acceptParams(params)
}

const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
// 打开弹框的功能
const openDialog = async (type: number, title: string, row?: any) => {
  let res = { data: {} }
  if (row?.id) {
    res = await getAlgorithmModelTrackApi(row?.id || null)
  }
  // 重置表单
  setItemsOptions()
  const params = {
    title,
    width: 580,
    isEdit: type !== 3,
    itemsOptions: itemsOptions,
    model: type == 1 ? {} : res.data,
    api: type == 1 ? addAlgorithmModelTrackApi : updateAlgorithmModelTrackApi,
    getTableList: proTable.value?.getTableList
  }
  formDialogRef.value?.openDialog(params)
}

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: 'selection', fixed: 'left', width: 70 },
  { prop: 'id', label: 'ID' },
  {
    prop: 'modelName',
    label: '模型名称',
    search: {
      el: 'input'
    },
    minWidth: 150
  },
  {
    prop: 'algorithmType',
    label: '算法',
    search: {
      el: 'input'
    },
    minWidth: 200
  },
  {
    prop: 'type',
    label: '类型',
    tag: true,
    enum: enumsAlgorithmType,
    search: {
      el: 'select'
    },
    width: 120
  },
  //   {
  //     prop: 'parentId',
  //     label: '父id',
  //     search: {
  //       el: 'input'
  //     },
  //     width: 120
  //   },
  {
    prop: 'subsystem',
    label: '分系统',
    tag: true,
    enum: enumsSubSystem,
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'modelStatus',
    label: '模型状态',
    tag: true,
    enum: enumsModelStatus,
    search: {
      el: 'select'
    },
    width: 120
  },
  //   {
  //     prop: 'sampleNumber',
  //     label: '训练样本数',
  //     search: {
  //       el: 'input'
  //     },
  //     width: 120
  //   },
  //   {
  //     prop: 'cycleEpoch',
  //     label: '训练循环次数',
  //     search: {
  //       el: 'input'
  //     },
  //     width: 120
  //   },
  {
    prop: 'modelAddress',
    label: '模型',
    search: {
      el: 'input'
    },
    width: 120
  },
  {
    prop: 'remarks',
    label: '备注',
    search: {
      el: 'input'
    },
    width: 200
  },
  //   {
  //     prop: 'system',
  //     label: '系统',
  //     search: {
  //       el: 'input'
  //     },
  //     width: 120
  //   },
  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
])
// 表单配置项
let itemsOptions: ProForm.ItemsOptions[] = []

const enumsAlgorithmConfigTrack = ref<any>([])

onMounted(async () => {
  const result: any = await enumAlgorithmConfigTrackApi()
  // console.log(result)
  // console.log(result['data'])
  for (let item of result['data']) {
    // console.log(item)
    // console.log(item['type'])
    // console.log(item['subsystem'])
    // console.log(AlgorithmType[item['type']])
    // console.log(SubSystem[item['subsystem']])
    // console.log(AlgorithmType)
    // console.log(SubSystem)
    // console.log('-------------------')
    item['label'] = item['label'] + '-' + SubSystem[item['subsystem']] + '-' + AlgorithmType[item['type']]
  }

  enumsAlgorithmConfigTrack.value = result['data']
  return result['data']
})

const setItemsOptions = () => {
  itemsOptions = [
    {
      label: '算法',
      prop: 'algorithmId',
      rules: [{ required: true, message: '算法不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'select',
        placeholder: '请输入算法',
        enum: enumsAlgorithmConfigTrack
      }
    },
    {
      label: '模型名称',
      prop: 'modelName',
      rules: [{ required: true, message: '模型名称不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入模型名称'
      }
    },
    {
      label: '模型',
      prop: 'modelInputOssId',
      rules: [{ required: false, message: '模型文件不能为空', trigger: 'blur' }],
      compOptions: {
        elTagName: 'file-upload',
        fileSize: 4096,
        fileType: ['pt', 'zip'],
        placeholder: '请上传模型文件'
      }
    },
    // {
    //   label: '训练样本数',
    //   prop: 'sampleNumber',
    //   rules: [{ required: true, message: '训练样本数不能为空', trigger: 'blur' }],
    //   compOptions: {
    //     placeholder: '请输入训练样本数'
    //   }
    // },
    // {
    //   label: '训练循环次数',
    //   prop: 'cycleEpoch',
    //   rules: [{ required: true, message: '训练循环次数不能为空', trigger: 'blur' }],
    //   compOptions: {
    //     placeholder: '请输入训练循环次数'
    //   }
    // },
    {
      label: '备注',
      prop: 'remarks',
      rules: [{ required: false, message: '备注不能为空', trigger: 'blur' }],
      compOptions: {
        placeholder: '请输入备注'
      }
    }
    // {
    //   label: '系统',
    //   prop: 'system',
    //   rules: [{ required: true, message: '系统不能为空', trigger: 'blur' }],
    //   compOptions: {
    //     placeholder: '请输入系统'
    //   }
    // }
  ]
}
</script>