表格单选 ​

<template>
	<fk-space direction="vertical">
		<VxeGrid ref="grid" class="config-table" v-bind="gridOptions" v-on="gridEvents" />
	</fk-space>
</template>

<script setup lang="tsx">
import { reactive } from 'vue';
import { VxeGrid, mergeGridProps, pop } from '@erp/biz';
import data from './data.json';
import type { VxeGridListeners } from '@erp/biz';

/**
 * 表格 grid 配置
 */
const gridOptions = reactive(
	mergeGridProps({
		height: 360,
		pagerConfig: null,
		columnConfig: {
			width: 160,
		},
		radioConfig: {
			trigger: 'row',
			strict: false,
		},
		toolbarConfig: {
			buttons: [
				{
					label: '获取数据',
					code: 'getData',
					type: 'primary',
				},
			],
		},
		columns: [
			{ type: 'radio', width: 55, align: 'center', headerAlign: 'center', fixed: 'left' },
			{
				field: 'client_name',
				title: '客户名称',
			},
			{
				field: 'id',
				title: '内部订单号',
			},
			{
				field: 'order_status',
				title: '状态',
				width: 220,
			},
			{
				field: 'order_tags',
				title: '标记',
			},
			{ field: 'order_time', title: '订单日期', width: 170 },
			{ field: 'pay_time', title: '付款时间', width: 170 },
			{ field: 'buyer_account', title: '买家账号+店铺' },
			{ field: 'meet', title: '应付+运费' },
			{ field: 'payment_fee', title: '已付金额', align: 'right' },
			{ field: 'remaining_amount', title: '剩余支付金额' },

			{ field: 'client_remark', title: '客户留言' },
			{ field: 'customer_notes', title: '卖家备注' },
			{ field: 'offline_remark', title: '线下备注' },
			{ field: 'expresses', title: '快递公司' },
			{ field: 'receiver_address', title: '收货地址' },
			{ field: 'plan_ship_time', title: '计划发货日期' },
			{ field: 'order_sale', title: '业务员' },
			{ field: 'confirm_time', title: '确认收货时间' },
			{ field: 'remaining_delivery_time', title: '剩余发货时间' },
			{ field: 'order_source', title: '订单来源' },
		],
		data: data.data.list,
	}),
);

const gridEvents: VxeGridListeners = {
	toolbarButtonClick: ({ code, $grid }) => {
		if (code === 'getData') {
			// @ts-ignore
			pop.confirm(() => <JsonViewer data={$grid.getRadioRecord()}></JsonViewer>);
		}
	},
};
</script>