<template>
<search-form :model="query">
<el-form-item label="订单编号" prop="no">
<el-input
v-model="query.no"
placeholder="请输入订单编号搜索"
clearable
@keyup.enter="getData()"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData()">搜索</el-button>
</el-form-item>
</search-form>
<page-table
:data="tableData"
v-loading="loading"
@change="handleChange"
>
<el-table-column label="订单ID" prop="id"></el-table-column>
<el-table-column label="订单编号" prop="no"></el-table-column>
</page-table>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import PageTable from '@/components/common/PageTable.vue'
import SearchForm from '@/components/common/SearchForm.vue'
import { OrderStatus,PayStatus,ShipStatus } from '@/enums/model'
import Http from '@/utils/http';
const cns = getCurrentInstance().appContext.config.globalProperties
const router = useRouter()
const tableData = ref({})
const defaultPage = {
page: 1,
per_page: 10,
}
const pagination = reactive({...defaultPage})
const loading = ref(false)
const orderStatusOptions = [
{label: '未确认', value: OrderStatus.Unconfirmed},
{label: '已确认', value: OrderStatus.Confirmed},
{label: '已取消', value: OrderStatus.Canceled},
]
const payStatusOptions = [
{label: '待支付', value: PayStatus.Unpaid},
{label: '已支付', value: PayStatus.Paid},
]
const shipStatusOptions = [
{label: '未发货', value: ShipStatus.Unshipped},
{label: '已发货', value: ShipStatus.Shipped},
{label: '已收货', value: ShipStatus.Received},
]
const sourceOptions = [
{label: 'PC端', value: 'pc'},
{label: 'H5端', value: 'h5'},
{label: 'APP端', value: 'app'},
{label: '微信小程序', value: 'wechat_mini'},
]
const defaultQuery = {
no: '',
user_keywords: '',
goods_id: '',
goods_name: '',
consignee_keywords: '',
order_status: null,
pay_status: null,
shipping_status: null,
done_start_time: null,
done_end_time: null,
source: null,
}
// 添加查询参数对象,增加搜索条件
const query = reactive({...defaultQuery})
const getData = (page=defaultPage.page) => {
loading.value = true
Http.doGet('order/info/index', { ...query, page: page, per_page: pagination.per_page }).then((res:any) => {
loading.value = false
if (cns.$successCode(res.code)) {
tableData.value = res.data
} else {
cns.$message.error(res.message)
}
}).catch(() => {
loading.value = false
})
}
const handleChange = (page:number,per_page:number) => {
pagination.per_page = per_page
getData(page)
}
const openDetail = (row:any) => {
router.push({name:'manage.order.detail', query: {id: row.id},params:{no: row.no}})
}
onMounted( () => {
getData()
})
</script>
<style scoped lang="scss">
</style>