<template>
	<view class="table-demo">
		<vol-alert type="primary">
			<view>图片 img、文件 file；multiple/maxCount/url；:readonly 控制是否可上传。</view>
		</vol-alert>
		<vol-table :readonly="isReadonly" direction="list" titleField="rowTitle" :table-data="tableData" :columns="columns" />
		<vol-button @click="isReadonly = !isReadonly">{{ isReadonly ? '可编辑' : '只读' }}</vol-button>
	</view>
</template>

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

const columns = ref([
	{ field: 'rowTitle', title: '标题', hidden: true },
	{ type: 'group', title: '图片' },
	{ title: '多图', field: 'imgs', type: 'img', url: 'api/sys_user/upload', multiple: true, maxCount: 3, required: true },
	{ title: '单图', field: 'imgsSingle', type: 'img', url: 'api/sys_user/upload', multiple: false, maxCount: 1 },
	{ type: 'group', title: '文件' },
	{ title: '文件', field: 'files', type: 'file', url: 'api/sys_user/upload', maxCount: 5 }
])

const tableData = ref([{
	rowTitle: '上传示例',
	imgs: [{ orginUrl: 'Upload/.../wechat.jpg', url: 'https://api.volcore.xyz/Upload/.../wechat.jpg' }],
	imgsSingle: [],
	files: [{ orginUrl: '/Upload/.../doc.pdf', url: 'https://proapi.volcore.xyz/Upload/.../doc.pdf' }]
}])
</script>