<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>direction=list + url 自动分页加载；loadBefore 追加 wheres；tableRef.load() 刷新。</view>
		</vol-alert>
		<u-search v-model="orderNo" @search="loadData" @custom="loadData" @clear="loadData" placeholder="订单编号" />
		<vol-table ref="tableRef" index url="api/demo_order/getPageData" :height="0" direction="list"
			titleField="OrderNo" :table-data="tableData" :columns="columns"
			:loadBefore="loadBefore" :loadAfter="loadAfter" />
	</view>
</template>

<!--
更多表单配置：http://app.volcore.xyz/docs/app/form/
更多表格配置：http://app.volcore.xyz/docs/app/table/
-->
<script setup>
import { ref } from 'vue'
const tableRef = ref(null)
const orderNo = ref('')
const tableData = ref([])

const loadBefore = (params) => {
	params.wheres.push({ name: 'OrderNo', value: orderNo.value, displayType: 'like' })
	return true
}
const loadAfter = () => true
const loadData = () => tableRef.value.load()

const columns = ref([
	{ field: 'OrderNo', title: '订单编号' },
	{ field: 'OrderType', title: '订单类型', type: 'select', bind: { key: '订单类型', data: [] } },
	{ field: 'TotalPrice', title: '总价', type: 'decimal' },
	{ field: 'TotalQty', title: '数量', type: 'int' },
	{ field: 'OrderDate', title: '订单日期', type: 'date' }
])
</script>