<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>支持表格列固定到左边或者右边 fixed:"left/right"</view>
			<view>拖动表格字段可查看效果</view>
		</vol-alert>
		<vol-table index :height="0" direction="horizontal" :table-data="tableData" :columns="columns">
			<template #field="{ data }">
				<view v-if="data.field === 'oper'" class="btns" @click.stop>
					<vol-button size="small" type="primary" @click="onView(data)">查看</vol-button>
				</view>
			</template>
		</vol-table>
	</view>
</template>

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

const { proxy } = getCurrentInstance()

const columns = ref([
	{ title: '固定左边', field: 'processCode', width: 90, fixed: 'left' },
	{ title: '工序名称', field: 'processName', width: 100 },
	{ title: '物料编码', field: 'materialCode', width: 100 },
	{ title: '物料名称', field: 'materialName', width: 100 },
	{ title: '提交时间', field: 'submitTime', width: 160, type: 'date' },
	{
		title: '固定右边',
		field: 'oper',
		width: 80,
		align: 'center',
		fixed: 'right',
		slot: true // 使用 #field 时必须配置
	}
])

const tableData = ref([
	{
		processCode: 'PR001',
		processName: '插轴',
		materialCode: 'M-1001',
		materialName: '螺丝',
		submitTime: '2022-01-15 08:20'
	},
	{
		processCode: 'PR002',
		processName: '整平',
		materialCode: 'M-2002',
		materialName: '电路板',
		submitTime: '2022-01-16 10:30'
	}
])

const onView = (data) => {
	proxy.$toast(`查看：${data.row.processCode}`)
}
</script>