hunanzeyunew/snowy-admin-web/src/views/biz/bizsettle/orderItem.vue

<template>
	<a-modal
		ref="modalRef"
		v-model:visible="visible"
		width="1350px"
		:body-style="{
			height: 'calc(100vh - 200px)',
			overflow: 'auto'
		}"
		centered
		:destoryOnClose="true"
		:afterClose="handleAfterClose"
		@ok="handleOk"
	>
		<a-row>
			<a-col :span="23" style="margin-left:20px;">
				<a-spin :spinning="submitLoading">
					<a-form ref="searchFormRef" :model="searchFormState" class="ant-advanced-search-form" name="advanced_search" style="margin-top:20px;margin-left:20px;">
						<a-row :gutter="24">
							<a-col :span="6">
								<a-form-item label="订单编号" name="orderNumber">
									<a-input v-model:value="searchFormState.orderNumber" placeholder="订单编号查询" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="客户名称" name="customerName">
									<a-input v-model:value="searchFormState.customerName" placeholder="客户名称查询" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item label="货品名称" name="goodsName">
									<a-input v-model:value="searchFormState.goodsName" placeholder="货品名称查询" />
								</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-button type="primary" @click="table.refresh(true)">查询</a-button>
								<a-button style="margin: 0 8px" @click="reset">重置</a-button>
							</a-col>
						</a-row>
					</a-form>
					<s-table
						ref="table"
						:alert="options.alert.show"
						:columns="columns"
						:data="loadData"
						:rowKey="(record) => record.id"
						:row-selection="options.rowSelection"
						bordered
						sticky
					>
					</s-table>
				</a-spin>
			</a-col>
		</a-row>
		<template #title>
			<div ref="modalTitleRef" style="width: 100%; cursor: move">选择物流订单</div>
		</template>
		<template #modalRender="{ originVNode }">
			<div :style="transformStyle">
				<component :is="originVNode" />
			</div>
		</template>
	</a-modal>
</template>
<script name="orderItem" setup>
	import { computed, watch, watchEffect } from 'vue'
	import { useDraggable } from '@vueuse/core'
	import { Empty, message } from 'ant-design-vue'
	import bizOrderApi from "@/api/biz/bizOrderApi";

	// 默认展开的节点
	let defaultExpandedKeys = ref([])
	const treeData = ref([])
	// 替换treeNode 中 title,key,children
	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
	const cardLoading = ref(true)

	const submitLoading = ref(false)
	let searchFormState = reactive({})
	const searchFormRef = ref()
	const table = ref()
	const storeDatas = ref([])

	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '订单编号',
			width: 100,
			dataIndex: 'orderNumber',
			ellipsis: true,
			align:'center'
		},
		{
			title: '客户名称',
			width: 100,
			dataIndex: 'customerName',
			ellipsis: true,
			align:'center'
		},
		{
			title: '货品名称',
			width: 90,
			dataIndex: 'goodsName',
			ellipsis: true,
			align:'center'
		},
		{
			title: '货品编码',
			width: 80,
			dataIndex: 'goodsCode',
			ellipsis: true,
			align:'center'
		},
		{
			title: '供应商名称',
			width: 100,
			dataIndex: 'supplierName',
			align:'center'
		},
		{
			title: '订单重量(吨)',
			width: 80,
			dataIndex: 'orderWeight',
			ellipsis: true,
			align:'center'
		},
		/*{
			title: '过磅重量(吨)',
			width: 80,
			dataIndex: 'netWeight',
			ellipsis: true
		},*/
		{
			title: '托运重量(吨)',
			width: 80,
			dataIndex: 'shippingWeight',
			ellipsis: true,
			align:'center'
		},
		{
			title: '运费单价(元/吨)',
			width: 80,
			dataIndex: 'freightPrice',
			ellipsis: true,
			align:'center'
		}
	]

	const selectedRowKeys = ref([])
	const selectedRecords = ref([])
	const selectedCallBack = ref('bom')
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
				selectedRecords.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
				selectedRecords.value = selectedRows
			}
		}
	}

	const loadData = (parameter) => {
		const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
		searchFormParam.orderStatus = '7'
		searchFormParam.orderType = '1'
		return bizOrderApi.bizSupplierOrderPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}

	// 仓库下拉框
	/*baseStoreApi.baseStoreSelector().then((res) => {
		storeDatas.value = res
	})

	// 加载左侧的树
	baseItemKindApi.baseItemKindTree().then((res) => {
		cardLoading.value = false
		if (res !== null) {
			treeData.value = [
				{
					id: '',
					pId: '-1',
					name: '全部分类',
					children: res
				}
			]
			// 默认展开2级
			treeData.value.forEach((item) => {
				// 因为0的顶级
				if (item.pId === '-1') {
					defaultExpandedKeys.value.push(item.id)
					// 取到下级ID
					if (item.children) {
						item.children.forEach((items) => {
							defaultExpandedKeys.value.push(items.id)
						})
					}
				}
			})
		}
	})*/
	// 点击树查询
	const treeSelect = (selectedKeys) => {
		if (selectedKeys.length > 0) {
			searchFormState.kindId = selectedKeys.toString()
		} else {
			delete searchFormState.kindId
		}
		table.value.refresh(true)
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		table.value.refresh(true)
	}

	const visible = ref(false)
	const modalTitleRef = ref(null)
	const showModal = (selectType, callBackType) => {
		console.log("111")
		options.rowSelection.type = selectType === 'radio' ? 'radio' : 'checkbox'
		selectedCallBack.value = callBackType
		visible.value = true
		table.value.refresh(true)
	}
	const { x, y, isDragging } = useDraggable(modalTitleRef)

	const emit = defineEmits(['bomItemCallBack', 'bomCallBack'])

	const handleOk = (e) => {
		if (selectedRecords.value && selectedRecords.value.length > 0) {
			if (selectedCallBack.value === 'orderItem') {
				emit('orderItemCallBack', JSON.parse(JSON.stringify(selectedRecords.value)))
			}
			visible.value = false
			selectedRowKeys.value = []
			selectedRecords.value = []
			table.value.clearSelected()
		} else {
			message.error('物流订单不能为空！')
		}
	}
	const startX = ref(0)
	const startY = ref(0)
	const startedDrag = ref(false)
	const transformX = ref(0)
	const transformY = ref(0)
	const preTransformX = ref(0)
	const preTransformY = ref(0)
	const dragRect = ref({
		left: 0,
		right: 0,
		top: 0,
		bottom: 0
	})
	watch([x, y], () => {
		if (!startedDrag.value) {
			startX.value = x.value
			startY.value = y.value
			const bodyRect = document.body.getBoundingClientRect()
			const titleRect = modalTitleRef.value.getBoundingClientRect()
			dragRect.value.right = bodyRect.width - titleRect.width
			dragRect.value.bottom = bodyRect.height - titleRect.height
			preTransformX.value = transformX.value
			preTransformY.value = transformY.value
		}
		startedDrag.value = true
	})
	watch(isDragging, () => {
		if (!isDragging) {
			startedDrag.value = false
		}
	})
	watchEffect(() => {
		if (startedDrag.value) {
			transformX.value =
				preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value
			transformY.value =
				preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value
		}
	})
	const transformStyle = computed(() => {
		return {
			transform: `translate(${transformX.value}px, ${transformY.value}px)`
		}
	})

	const handleAfterClose = () => {
		console.log('handleAfterClose')
		searchFormState = reactive({})
	}
	// 抛出函数
	defineExpose({
		showModal
	})
</script>

<style lang="less" scoped>
	.cardImp {
		margin-right: 10px;
	}
</style>