行拖拽 ​

<template>
	<VxeGrid ref="grid" class="config-table" v-bind="gridOptions" v-on="gridEvents">
		<template #operator>
			<FkButton type="primary" size="mini">确定</FkButton>
			<FkButton size="mini" type="text">编辑</FkButton>
		</template>
	</VxeGrid>
</template>

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

/**
 * 引用template模板
 */
const gridRef = useTemplateRef<VxeGridInstance>('grid');

/**
 * 表格 grid 配置
 */
const gridOptions = reactive(
	mergeGridProps({
		// optimize: true,
		height: 360,
		pagerConfig: null,
		columnConfig: {
			width: 160,
		},
		showOverflow: false,
		filterConfig: {
			teleportTo: '.vxe-grid',
		},
		editConfig: {
			mode: 'row',
			trigger: 'manual',
		},
		rowConfig: {
			// 启用拖拽
			drag: true,
		},
		rowDragConfig: {
			animation: true,
			tooltipMethod({ row }) {
				return row.id;
			},
			dragEndMethod(params) {
				const ids = [10585764, 10583356, 10585750];
				if (ids.includes(params.oldRow.id) || ids.includes(params.newRow.id)) {
					const canDrag = ids.includes(params.newRow.id) && ids.includes(params.oldRow.id);
					if (!canDrag) {
						pop.error('不能拖拽到该行');
					}
					return canDrag;
				}
				return true;
			},
		},
		spanMethod(params) {
			if (params.rowIndex === 0 && params.columnIndex === 1) {
				return {
					rowspan: 3,
					colspan: 1,
				};
			} else if ((params.rowIndex === 1 || params.rowIndex === 2) && params.columnIndex === 1) {
				return {
					rowspan: 0,
					colspan: 0,
				};
			}
		},
		columns: [
			{ field: 'checkbox', type: 'checkbox', width: 55, align: 'center', headerAlign: 'center', fixed: 'left' },
			{
				field: 'client_name',
				title: '客户名称',
				fixed: 'left',
			},
			{
				field: 'id',
				title: '内部订单号',
				sortable: true,
				dragSort: true,
				editRender: {
					name: 'Input',
					props: {
						type: 'text',
						size: 'small',
						allowClear: false,
					},
				},
			},
			{
				field: 'order_status',
				title: '状态',
				width: 220,
				editRender: {
					name: 'Input',
					props: {
						type: 'text',
						size: 'small',
						allowClear: false,
					},
				},
			},
			{
				field: 'order_tags',
				title: '标记',
				filters: [
					{ label: 'Test2', value: 'Test2', checked: false },
					{ label: 'Test3', value: 'Test3', checked: false },
					{ label: 'Test4', value: 'Test4', checked: false },
					{ label: 'Test5', value: 'Test5', checked: false },
				],
			},
			{ 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: '订单来源' },
			{
				field: '#operator',
				title: '操作',
				fixed: 'right',
				/** 支持 slot */
				slots: { default: 'operator' },
				width: 180,
				dragSort: 'right',
				canMouseSelected: false,
				className: 'cell-btns',
			},
		],
		data: data.data.list,
	}),
);

const gridEvents: VxeGridListeners = {
	rowDragstart(params) {
		console.log(`拖拽开始`, params);
	},
	rowDragend(params) {
		console.log('拖拽结束', params);
		console.log('拖拽后的数据', gridRef.value?.getTableData().fullData);
	},
};
</script>
<style scoped lang="less">
.config-table {
	button + button {
		margin-left: 12px;
	}
}
</style>