<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>表格基础配置，宽度自适应，表头固定，左右不可滚动</view>
		</vol-alert>
		<view class="fx">
			<view class="fx-1">
				<u-input v-model="fields.materialName" placeholder="物料名称"></u-input>
			</view>
			<view class="search-btn">
				<vol-button @click="searchClick" type="primary" size="small">
					<u-icon name="search" color="#fff"></u-icon> 搜索
				</vol-button>
			</view>
		</view>
		<vol-table :textInline="false" direction="horizontal" :table-data="tableData" :columns="columns">
		</vol-table>
	</view>
</template>

<!--
更多表单配置：http://app.volcore.xyz/docs/app/form/
更多表格配置：http://app.volcore.xyz/docs/app/table/
-->
<script setup>
import { ref, reactive } from 'vue'

const fields = reactive({ materialName: '' })

const columns = ref([
	{ title: '工序编号', field: 'processCode', width: 80 },
	{ title: '工序名称', field: 'processName', width: 85 },
	{ title: '物料名称', field: 'materialName', width: 80 },
	{ title: '用料数量', field: 'materialAmount', width: 80 }
])

const tableData = ref([
	{
		processCode: 'PR001',
		processName: '插轴',
		materialName: '螺丝',
		materialAmount: 100
	},
	{
		processCode: 'PR002',
		processName: '整平',
		materialName: '电路板',
		materialAmount: 50
	}
])

const searchClick = () => {
	// proxy.http.post(url, {}, true).then(x => { tableData.value = x.list || x })
}
</script>