fara-fe-admin/src/views/model/model-list/index.vue

<script setup lang="ts">

defineOptions({
  name: 'modelList',
})
import { Plus } from '@element-plus/icons-vue'
import { ElButton, ElDialog, ElEmpty, ElInput, ElMessage, ElOption, ElPagination, ElSelect, ElTable, ElTableColumn, ElTag } from 'element-plus'
// import SearchForm from './components/SearchForm.vue'

import type { TModel } from '@/types/model'
import { fetchModel, fetchModelDetail } from '@/api/modules/model'
import { formatDateGeneral } from '@/utils'

const tableRef = ref()
const loading = ref(false)
const router = useRouter()
const route = useRoute()

// 搜索参数
const searchParams = ref({
  name: '',
})
const dataList = ref<TModel[]>([]);

// 分页信息
const pagination = ref({
  page: 1,
  size: 20,
  total: 0,
})



const  handleRecommend = (id: string) => {

}

async function fetchData() {
  loading.value = true
  const res = await fetchModel()
  console.log(res, 'res')
  if(res.code === 0){
    dataList.value = res.data.content
    console.log(dataList.value, 'dataList')
    pagination.value.total = res.data.total
  }
  loading.value = false
}
function handlePageChange(page: number) {
  pagination.value.page = page
  if(pagination.value.page !== page){
    fetchData()
  }
}

function handleSizeChange(size: number) {
  pagination.value.size = size
  pagination.value.page = 1
  fetchData()
}

async function handleView (row: TModel) {
  console.log(row, 'view')
  // const response = await fetchModelDetail({id: row.id})
  // console.log(response,33344)
}



onMounted(async () => {
  await fetchData()
})


</script>

<template>
  <div class="absolute-container">
    <FaPageHeader title="大模型列表" />
    <FaPageMain class="flex-1 overflow-auto" main-class="flex-1 flex flex-col overflow-auto">
      <ElTable
        v-loading="loading"
        ref="tableRef" :data="dataList" stripe highlight-current-row border height="100%"
      >
        <ElTableColumn label="id" prop="id" min-width="240" />
        <ElTableColumn label="Name" prop="name" min-width="220" />
        <ElTableColumn label="service" prop="service" />
        <ElTableColumn label="spaceId" prop="spaceId" />
        <ElTableColumn label="userId" prop="userId" width="180" />
        <ElTableColumn label="userId" prop="customEdit" width="180" />
        <ElTableColumn label="createTime" prop="ctime" width="180">
          <template #default="scope">
            {{ formatDateGeneral(scope.row.ctime) }}
          </template>
        </ElTableColumn>
        <ElTableColumn fixed="right" label="操作" min-width="200">
          <template #default="{row}">
            <ElButton link type="primary" size="small" @click="handleView(row)">查看</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <div class="p-4">
        <ElPagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </FaPageMain>
  </div>
</template>
<style scoped>
.absolute-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
</style>