行拖拽 ​

<template>
	<fk-space direction="vertical">
		<fk-button type="primary" @click="handleAddCode">{{ codeSet.size ? '异步删除菜单权限' : '异步添加菜单权限' }}</fk-button>
		<VxeGrid ref="grid" class="config-table" v-bind="gridOptions" v-on="gridEvents" />
	</fk-space>
</template>

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

const codeSet = reactive(new Set());

/**
 * 表格 grid 配置
 */
const gridOptions = reactive(
	mergeGridProps({
		height: 360,
		pagerConfig: null,
		columnConfig: {
			width: 160,
		},
		/** 配置 */
		toolbarConfig: {
			buttons: [
				{
					code: '123',
					// 支持方法
					label: () => '新增商品',
					type: 'primary',
					visible: () => {
						return codeSet.has('copy');
					},
				},
				{
					code: '2',
					label: '导入商品',
					dropdowns: [
						{
							code: 'command_1',
							label: '导出文件1',
						},
						{
							code: 'command_2',
							label: '导出文件2',
						},
						{
							code: 'command_3',
							label: '导出文件3',
							disabled: true,
						},
					],
				},
			],
		},
		menuConfig: {
			className: 'table-large-contextmenu',
			body: {
				slots: {
					header({ row }) {
						return <div class="ctxmenu-header">订单编号：{row.id}</div>;
					},
					footer({ row }) {
						return (
							<div class="ctxmenu-footer">
								<Input type="textarea"></Input>
								<fk-button size="mini" type="primary">
									确定
								</fk-button>
							</div>
						);
					},
				},
				options: [
					[
						{
							code: 'copy',
							name: () => '复制内容（Ctrl+C）',
							prefixIcon: 'vxe-table-icon-fullscreen',
							visible: () => {
								return codeSet.has('copy');
							},
							children: [
								{
									code: 'clear',
									// 支持方法
									name: () => '清除内容123',
									visible({ row }) {
										return !!row;
									},
								},
								{ code: 'reload', name: '刷新表格', prefixIcon: 'vxe-table-icon-repeat', visible: true, disabled: false },
							],
						},
						{
							code: 'clear',
							name: '清除内容',
							disabled() {
								return !codeSet.has('clear');
							},
							visible: () => {
								return codeSet.has('clear');
							},
						},
						{
							code: 'reload',
							name: '刷新表格',
							prefixIcon: 'vxe-table-icon-repeat',
							disabled: false,
							visible: () => {
								return codeSet.has('reload');
							},
						},
					],
					[
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{
							code: 'myPrint',
							prefixIcon: 'vxe-table-icon-repeat',
							name: '打印销售订单',
							suffixConfig: { content: 'Ctrl+P' },
							visible: true,
							disabled: false,
						},
						{ code: 'myExport', name: '导出.csv', prefixConfig: { icon: 'vxe-icon-download' }, visible: true, disabled: false },
					],
				],
			},
		},
		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 = {
	menuClick(event) {
		console.log('menuClick >>', event);
	},
};

const handleAddCode = () => {
	if (codeSet.size) {
		codeSet.clear();
		return;
	}
	codeSet.add('copy');
	codeSet.add('clear');
	codeSet.add('reload');
};
</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;
	// }
}
</style>