|
| 1 | +<template> |
| 2 | + <Container |
| 3 | + type="serverless" |
| 4 | + :title="$t('admin.serverless.title')" |
| 5 | + subtitle="" |
| 6 | + :breadcrumbs="[{ text: $t('admin.serverless.title') }]" |
| 7 | + > |
| 8 | + <!-- search & filter --> |
| 9 | + <!-- <div class="flex items-center gap-3 w-full pt-1"> |
| 10 | + <el-input |
| 11 | + v-model="keyword" |
| 12 | + :placeholder="$t('admin.name') + ',' + $t('admin.owner')" |
| 13 | + size="large" |
| 14 | + :prefix-icon="Search" |
| 15 | + @input="searchServerless" |
| 16 | + /> |
| 17 | + </div> --> |
| 18 | + <Table |
| 19 | + :title="$t('admin.serverless.listTitle')" |
| 20 | + :data="serverless" |
| 21 | + size="small" |
| 22 | + :border="false" |
| 23 | + class="custom-table" |
| 24 | + > |
| 25 | + <el-table-column :label="$t('admin.serverless.deployName')" min-width="200" show-overflow-tooltip> |
| 26 | + <template #default="scope"> |
| 27 | + <a |
| 28 | + :href="`/admin_panel/serverless/${scope.row.model_id}/${scope.row.deploy_id}`" |
| 29 | + target="_blank" |
| 30 | + class="underline" |
| 31 | + > |
| 32 | + {{ scope.row.deploy_name }} |
| 33 | + </a> |
| 34 | + </template> |
| 35 | + </el-table-column> |
| 36 | + <el-table-column |
| 37 | + prop="hardware" |
| 38 | + :label="$t('admin.serverless.resource')" |
| 39 | + min-width="240" |
| 40 | + show-overflow-tooltip |
| 41 | + /> |
| 42 | + <el-table-column |
| 43 | + prop="runtime_framework" |
| 44 | + :label="$t('admin.serverless.runtimeFramework')" |
| 45 | + width="130" |
| 46 | + /> |
| 47 | + <el-table-column |
| 48 | + prop="status" |
| 49 | + :label="$t('admin.serverless.status')" |
| 50 | + min-width="100" |
| 51 | + /> |
| 52 | + <el-table-column |
| 53 | + :label="$t('admin.operations')" |
| 54 | + width="260px" |
| 55 | + fixed="right" |
| 56 | + > |
| 57 | + <template #default="scope"> |
| 58 | + <div class="flex gap-2"> |
| 59 | + <CsgButton |
| 60 | + class="btn btn-secondary-gray btn-sm" |
| 61 | + :name="$t('admin.serverless.detail')" |
| 62 | + @click="showDetail(scope.row)" |
| 63 | + /> |
| 64 | + <CsgButton |
| 65 | + class="btn btn-primary btn-sm" |
| 66 | + :name="$t('admin.serverless.edit')" |
| 67 | + @click="shoeEdit(scope.row)" |
| 68 | + /> |
| 69 | + </div> |
| 70 | + </template> |
| 71 | + </el-table-column> |
| 72 | + <template #footer> |
| 73 | + <Pagination |
| 74 | + v-model:current-page="page" |
| 75 | + :page-size="per" |
| 76 | + layout="prev, pager, next" |
| 77 | + :total="total" |
| 78 | + @current-change="fetchServerless" |
| 79 | + /> |
| 80 | + </template> |
| 81 | + </Table> |
| 82 | + </Container> |
| 83 | +</template> |
| 84 | + |
| 85 | +<script setup> |
| 86 | + import { Container, Pagination, Table } from '../admin_component' |
| 87 | + import { ref, onMounted, inject } from 'vue' |
| 88 | + import { Search } from '@element-plus/icons-vue' |
| 89 | + import { ElMessage } from 'element-plus' |
| 90 | + import useFetchApi from '../../../packs/useFetchApi' |
| 91 | + import useUserStore from '@/stores/UserStore' |
| 92 | +
|
| 93 | + const userStore = useUserStore() |
| 94 | +
|
| 95 | + const serverless = ref([]) |
| 96 | + const page = ref(1) |
| 97 | + const per = ref(10) |
| 98 | + const total = ref(0) |
| 99 | + const keyword = ref('') |
| 100 | +
|
| 101 | + const fetchServerless = async (current) => { |
| 102 | + const { data, error } = await useFetchApi( |
| 103 | + `/user/${userStore.username}/run/serverless?page=${ |
| 104 | + current || page.value |
| 105 | + }&per=${per.value}&search=${keyword.value}` |
| 106 | + ).json() |
| 107 | + if (data.value) { |
| 108 | + const res_json = data.value |
| 109 | + serverless.value = res_json.data |
| 110 | + total.value = res_json.total |
| 111 | + } else { |
| 112 | + ElMessage.error(error.value.msg || 'Failed to fetch serverless') |
| 113 | + } |
| 114 | + } |
| 115 | +
|
| 116 | + const searchServerless = () => { |
| 117 | + page.value = 1 |
| 118 | + fetchServerless() |
| 119 | + } |
| 120 | +
|
| 121 | + const showDetail = (detail) => { |
| 122 | + window.location.href = `/admin_panel/serverless/${detail.model_id}/${detail.deploy_id}` |
| 123 | + } |
| 124 | +
|
| 125 | + const shoeEdit = (detail) => { |
| 126 | + window.location.href = `/admin_panel/serverless/${detail.model_id}/${detail.deploy_id}/edit` |
| 127 | + } |
| 128 | +
|
| 129 | + onMounted(() => { |
| 130 | + fetchServerless() |
| 131 | + }) |
| 132 | +</script> |
0 commit comments