108 lines
4.1 KiB
Vue
108 lines
4.1 KiB
Vue
<template>
|
|
<a-row :gutter="[24, 18]">
|
|
<a-col :span="24">
|
|
<a-card>
|
|
<a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
|
|
<a-row :gutter="24">
|
|
<a-col :span="6">
|
|
<a-form-item label="订单号" name="orderNum">
|
|
<a-input v-model:value="searchFormData.orderNum" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<a-form-item label="产品名称" name="proName">
|
|
<a-input v-model:value="searchFormData.proName"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<a-form-item label="交易时间" name="time">
|
|
<a-range-picker v-model:value="searchFormData.time" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col class="align-left" :span="6">
|
|
<a-space>
|
|
<a-button @click="handleResetSearch">重置</a-button>
|
|
<a-button ghost type="primary" @click="handleSearch">
|
|
查询
|
|
</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-card>
|
|
<a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
|
|
@change="onTableChange" />
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
|
|
</template>
|
|
<script setup>
|
|
import { ref, onBeforeMount } from 'vue'
|
|
import { usePagination } from '@/hooks'
|
|
// 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: 'flowNum', key: 'flowNum' },
|
|
// { title: '订单创建时间', dataIndex: 'transactionTime', key: 'transactionTime' },
|
|
// { title: '产品名称', dataIndex: 'flowNum', key: 'flowNum' },
|
|
// { title: '计费方式', dataIndex: 'flowNum', key: 'flowNum' },
|
|
// { title: '订单类型', dataIndex: 'flowNum', key: 'flowNum' },
|
|
// { title: '订单状态', dataIndex: 'flowNum', key: 'flowNum' },
|
|
// { title: '订单金额', dataIndex: 'flowNum', key: 'flowNum' },
|
|
// { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '流水号', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '交易时间', dataIndex: 'transactionTime', key: 'transactionTime' },
|
|
{ title: '主机ID', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '实例ID', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '算力型号', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '算力数量', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '计费时间范围', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '计费时长', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '单价', dataIndex: 'flowNum', key: 'flowNum' },
|
|
{ title: '交易金额', dataIndex: 'flowNum', key: 'flowNum' },
|
|
])
|
|
onBeforeMount(() => {
|
|
getPageList()
|
|
|
|
})
|
|
const getPageList = () => {
|
|
listData.value = [
|
|
{ flowNum: 1 }
|
|
]
|
|
}
|
|
/**
|
|
* 分页
|
|
*/
|
|
function onTableChange({ current, pageSize }) {
|
|
paginationState.current = current
|
|
paginationState.pageSize = pageSize
|
|
getPageList()
|
|
}
|
|
/**
|
|
* 搜索
|
|
*/
|
|
function handleSearch() {
|
|
resetPagination()
|
|
getPageList()
|
|
}
|
|
/**
|
|
* 重置
|
|
*/
|
|
function handleResetSearch() {
|
|
searchFormData.value = {}
|
|
resetPagination()
|
|
getPageList()
|
|
}
|
|
</script> |