Compare commits
2 Commits
4ebfaaf727
...
00eb5d6c7c
| Author | SHA1 | Date | |
|---|---|---|---|
|
00eb5d6c7c | ||
|
|
bcb9ccc0ce |
@ -6,3 +6,6 @@ export const orderList = (params:any) => request.get('/v1/order/pay_list',{param
|
||||
|
||||
// 我的订单
|
||||
export const useList = (params:any) => request.get('/v1/order/use_list',{params})
|
||||
|
||||
// 容器实例列表
|
||||
export const hostCaseList = (params:any) => request.get('/v1/hostCase/list',{params})
|
||||
|
||||
@ -41,14 +41,6 @@ import { ref,onBeforeMount } from 'vue'
|
||||
import { usePagination } from '@/hooks'
|
||||
import { orderList } from '@/apis/admin'
|
||||
import dayjs from 'dayjs'
|
||||
// const listData=ref([ {title:1}])
|
||||
// const paginationState=ref({
|
||||
// total: 0,
|
||||
// current: 1,
|
||||
// pageSize: 10,
|
||||
// showTotal: (total) => `总 ${total} 条数据`,
|
||||
// pageSizeOptions: ['10', '20', '30', '40'],
|
||||
// })
|
||||
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
|
||||
const columns = ref([
|
||||
{ title: '日期', dataIndex: 'created_at', key: 'created_at' },
|
||||
|
||||
@ -35,226 +35,98 @@
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="header-filter">
|
||||
<a-select
|
||||
placeholder="筛选标签"
|
||||
style="width: 160px;"
|
||||
size="large"
|
||||
>
|
||||
<a-select placeholder="筛选标签" style="width: 160px;" size="large">
|
||||
<a-select-option value="all">全部标签</a-select-option>
|
||||
<a-select-option value="running">运行中</a-select-option>
|
||||
<a-select-option value="stopped">已停止</a-select-option>
|
||||
</a-select>
|
||||
<a-input-search
|
||||
placeholder="搜索实例名称/ID"
|
||||
style="width: 240px; margin-left: 12px;"
|
||||
size="large"
|
||||
@search="onSearch"
|
||||
/>
|
||||
<a-input-search placeholder="搜索实例名称/ID" style="width: 240px; margin-left: 12px;" size="large"
|
||||
@search="onSearch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格 -->
|
||||
<div class="table-container">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:pagination="false"
|
||||
:loading="loading"
|
||||
row-key="id"
|
||||
class="instance-table"
|
||||
>
|
||||
<template #empty>
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<inbox-outlined />
|
||||
<a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState" @change="onTableChange">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'gpu_model'">
|
||||
<div>
|
||||
{{ 'GPU型号:' + record.gpu_model,'GPU数量:' + record.gpu_count ,'单卡显存GB:' + record.gpu_memory_gb , 'CPU核数:' + record.cpu_cores , '内存（MB）:' + record.memory_mb}}
|
||||
</div>
|
||||
<div class="empty-text">暂无数据</div>
|
||||
<div class="empty-desc">当前没有实例数据，您可以租用新实例开始使用</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-left">
|
||||
<span class="total-text">共 {{ total }} 条</span>
|
||||
</div>
|
||||
<div class="pagination-center">
|
||||
<a-pagination
|
||||
v-model:current="currentPage"
|
||||
v-model:page-size="pageSize"
|
||||
:total="total"
|
||||
:page-size-options="['10', '20', '50', '100']"
|
||||
show-size-changer
|
||||
show-quick-jumper
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<div class="pagination-right">
|
||||
<span class="goto-text">前往</span>
|
||||
<a-input-number
|
||||
v-model:value="currentPage"
|
||||
:min="1"
|
||||
:max="Math.ceil(total / pageSize)"
|
||||
size="small"
|
||||
style="width: 60px; margin: 0 8px;"
|
||||
/>
|
||||
<span class="goto-text">页</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, h } from 'vue';
|
||||
import { Button, Table, Input, Select, Pagination, InputNumber } from 'ant-design-vue';
|
||||
import {
|
||||
ReloadOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
BellOutlined,
|
||||
KeyOutlined,
|
||||
AppstoreOutlined,
|
||||
InboxOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onBeforeMount } from 'vue'
|
||||
import { usePagination } from '@/hooks'
|
||||
import { hostCaseList } from '@/apis/admin'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
import dayjs from 'dayjs'
|
||||
const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
|
||||
const columns = ref([
|
||||
{ title: '实例ID/名称', dataIndex: 'id', key: 'id' },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status' },
|
||||
{ title: '规格详情', dataIndex: 'gpu_model', key: 'gpu_model' },
|
||||
{ title: '本地磁盘', dataIndex: 'system_disk', key: 'system_disk' },
|
||||
{ title: '健康状态', dataIndex: 'health_status', key: 'health_status' },
|
||||
{ title: '付费方式', dataIndex: 'price_type', key: 'price_type' },
|
||||
{ title: '释放时间', dataIndex: 'release_at', key: 'release_at' },
|
||||
{ title: '停机时间', dataIndex: 'down_at', key: 'down_at' },
|
||||
{ title: 'SSH登陆', dataIndex: 'ssh_link', key: 'ssh_link' },
|
||||
{ title: '操作', dataIndex: 'aciton', key: 'aciton' },
|
||||
])
|
||||
onBeforeMount(() => {
|
||||
getPageList()
|
||||
|
||||
})
|
||||
const getPageList = async () => {
|
||||
try {
|
||||
const { pageSize, current } = paginationState
|
||||
const res: any = await hostCaseList({ pageSize: pageSize, pageNum: current });
|
||||
listData.value = res.list;
|
||||
paginationState.total = res?.Total;
|
||||
|
||||
export default defineComponent({
|
||||
name: 'InstanceList',
|
||||
components: {
|
||||
AButton: Button,
|
||||
ATable: Table,
|
||||
AInput: Input,
|
||||
AInputSearch: Input.Search,
|
||||
ASelect: Select,
|
||||
ASelectOption: Select.Option,
|
||||
APagination: Pagination,
|
||||
AInputNumber: InputNumber,
|
||||
ReloadOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
BellOutlined,
|
||||
KeyOutlined,
|
||||
AppstoreOutlined,
|
||||
InboxOutlined,
|
||||
},
|
||||
} catch (error: any) {
|
||||
console.error('产品优势请求失败:', error);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 分页
|
||||
*/
|
||||
function onTableChange({ current, pageSize }) {
|
||||
paginationState.current = current
|
||||
paginationState.pageSize = pageSize
|
||||
getPageList()
|
||||
}
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
function handleSearch() {
|
||||
resetPagination()
|
||||
getPageList()
|
||||
}
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
function handleResetSearch() {
|
||||
searchFormData.value = {}
|
||||
resetPagination()
|
||||
getPageList()
|
||||
}
|
||||
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
const loading = ref(false);
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(0);
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '实例ID / 名称',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
customRender: ({ text }: { text: string }) => {
|
||||
return h('span', { class: `status-${text.toLowerCase()}` }, text);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '规格详情',
|
||||
dataIndex: 'spec',
|
||||
key: 'spec',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '本地磁盘',
|
||||
dataIndex: 'disk',
|
||||
key: 'disk',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '健康状态',
|
||||
dataIndex: 'health',
|
||||
key: 'health',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '付费方式',
|
||||
dataIndex: 'payment',
|
||||
key: 'payment',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '释放时间/停机时间',
|
||||
dataIndex: 'releaseTime',
|
||||
key: 'releaseTime',
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: 'SSH登录',
|
||||
dataIndex: 'ssh',
|
||||
key: 'ssh',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '快捷工具',
|
||||
dataIndex: 'tools',
|
||||
key: 'tools',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
// 数据源
|
||||
const dataSource = ref([]);
|
||||
|
||||
// 模拟数据（可从接口获取）
|
||||
const fetchInstances = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
dataSource.value = [];
|
||||
total.value = 0;
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
};
|
||||
|
||||
fetchInstances();
|
||||
|
||||
const handleRent = () => {
|
||||
router.push('/layout/admin/instanceCreate');
|
||||
};
|
||||
|
||||
const handleRenew = () => {
|
||||
console.log('批量续费');
|
||||
};
|
||||
|
||||
const onSearch = (value: string) => {
|
||||
console.log('搜索:', value);
|
||||
};
|
||||
|
||||
return {
|
||||
columns,
|
||||
dataSource,
|
||||
loading,
|
||||
currentPage,
|
||||
pageSize,
|
||||
total,
|
||||
handleRent,
|
||||
handleRenew,
|
||||
onSearch,
|
||||
};
|
||||
},
|
||||
});
|
||||
// 租用实例
|
||||
const handleRent = () => {
|
||||
router.push('/layout/admin/instanceCreate');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user