头部按钮配置 ​

<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 { Input, VxeGrid, mergeGridProps, pop } from '@erp/biz';
import { Button, Popconfirm, Popover } from '@erp/common';
import data from './data.json';
import type { VxeGridListeners } from '@erp/biz';

const addressConfig = reactive({
	options: [
		{
			value: '1',
			label: '仓库1111',
		},
		{
			value: '2',
			label: '仓库222222',
		},
		{
			value: '3',
			label: '仓库22222233333',
		},
	],
	value: '',
	beforeOk(done) {
		if (!addressConfig.value) {
			pop.warning('请选择仓库');
			done(false);
		}
		done(true);
	},
	popupVisibleChange(visible) {
		if (!visible) {
			addressConfig.value = '';
		}
	},
});

/**
 * 表格 grid 配置
 */
const gridOptions = reactive(
	mergeGridProps({
		height: 360,
		pagerConfig: null,
		columnConfig: {
			width: 160,
		},
		/** 配置 */
		toolbarConfig: {
			buttons: [
				{
					code: '123',
					// 支持方法
					label: () => '新增商品',
					type: 'primary',
					// 自定义区域
					buttonRender() {
						return (
							<Popover title="Title" trigger="click" position="bottom">
								{{
									default: () => <Button>Click Me</Button>,
									content: () => <p>Here is the text content</p>,
								}}
							</Popover>
						);
					},
				},
				{
					code: '2',
					label: () => '导入商品',
					props: {
						trigger: 'hover',
					},
					dropdowns: [
						{
							code: 'command_1',
							label: () => '导出文件1',
						},
						{
							code: 'command_2',
							label: '导出文件2',
						},
						{
							code: 'command_3',
							label: '导出文件3',
							disabled: true,
						},
					],
				},
			],
			tools: [
				{
					code: '123',
					// 支持方法
					label: () => '新增商品',
					type: 'primary',
					// 自定义区域
					toolRender() {
						return (
							<Popconfirm
								contentClass="common-pop-confirm"
								ok-text="确定"
								position="bottom"
								cancel-text="取消"
								onBeforeOk={addressConfig.beforeOk}
								onPopupVisibleChange={addressConfig.popupVisibleChange}
							>
								{{
									default: () => <Button>修改发货仓</Button>,
									content: () => (
										<Input type="radio" direction="vertical" v-model={addressConfig.value} options={addressConfig.options}></Input>
									),
								}}
							</Popconfirm>
						);
					},
				},
				{
					code: '2',
					label: () => '导入商品',
					props: {
						trigger: 'hover',
					},
					dropdowns: [
						{
							code: 'command_1',
							label: () => '导出文件1',
						},
						{
							code: 'command_2',
							label: '导出文件2',
						},
						{
							code: 'command_3',
							label: '导出文件3',
							disabled: true,
						},
					],
				},
			],
		},
		columns: [
			{ field: 'checkbox', type: 'checkbox', 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 = {};
</script>
<style lang="less">
.table-large-contextmenu {
	padding: 0;
	--vxe-ui-table-menu-item-width: 260px;
	.ctxmenu-header {
		height: 32px;
		display: inline-flex;
		justify-content: center;
		width: 100%;
		align-items: center;
		background: rgb(var(--fkblue-6));
		color: #fff;
		border-radius: 4px 4px 0 0;
	}
	.ctxmenu-footer {
		width: 100%;
		display: flex;
		align-items: flex-end;
		padding: 6px 8px;
		flex-direction: column;
		border-left: 4px solid rgb(var(--fkblue-6));
		background-color: var(--color-fill-1);
		border-radius: 0 0 4px 4px;
		.erp-input {
			width: 100%;
		}
	}
	.vxe-context-menu--link {
		line-height: 24px;
		font-size: 12px;
	}

	// .vxe-table--context-menu {
	// 	max-height: 70vh;
	// 	overflow-y: auto;
	// 	overflow-x: visible;
	// }
}
.common-pop-confirm {
	padding: 0;
	.fk-popconfirm-body {
		padding: 12px;
		margin-bottom: 0;
	}
	.fk-popconfirm-footer {
		padding: 12px;
		border-top: 1px solid var(--color-border-1);
	}
	.erp-input .fk-radio-group {
		display: inline-block;
	}
}
</style>