hunanzeyunew/snowy-admin-web/src/views/biz/count/orderplan.vue

<template>
	<a-card>
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="订单名称" name="orderName">
						<a-input v-model:value="searchFormState.orderName" placeholder="订单名称查询" />
					</a-form-item>
				</a-col>
				<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-button type="primary" @click="query()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					<a-button type="dashed" class="snowy-buttom-left" @click="exportData()"><export-outlined />导出</a-button>
<!--					<a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a>-->
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card style="margin-top: 5px">
		<a-table
			ref="tableRef"
			:columns="columns"
			:data-source="companyData"
			bordered
			:row-key="(record) => record.id"
			:rowClassName="rowClassName"
		>
			<!--	:pagination="false"		-->
			<template #bodyCell="{ column, record, index }">
				<template v-if="column.dataIndex === 'serial'">
					{{ index + 1 }}
				</template>
<!--				<template v-if="column.dataIndex === 'actualWeight'">
					<span v-if="record.actualWeight>record.netWeight" style="color:red">{{ record.actualWeight}}</span>
					<span v-else>{{ record.actualWeight}}</span>
				</template>-->
			</template>
		</a-table>
	</a-card>
</template>

<script setup name="receiptcount">
	import { Modal } from 'ant-design-vue'
	import { ref, onMounted } from 'vue'
	import { cloneDeep } from 'lodash-es'
	import bizRecordApi from '@/api/biz/bizRecordApi'
	import downloadUtil from '@/utils/downloadUtil'
	import bizOrderApi from "@/api/biz/bizOrderApi";


	const searchFormRef = ref()
	const searchFormState = ref({
		times: [],
		licensePlate: '',
		goodsName: '',
		receiptCompany: ''
	})

	onMounted(() => {
		loadData()
	})

	// 查询区域显示更多控制
	const advanced = ref(false)
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
	}
	//表格相关
	const columns = [
		{
			title: '序号',
			width: 80,
			dataIndex: 'serial',
			align:'center'
		},
		{
			title: '订单名称',
			dataIndex: 'orderName',
			align:'center'
		},
		{
			title: '订单编号',
			dataIndex: 'orderNumber',
			align:'center'
		},
		{
			title: '客户名称',
			dataIndex: 'customerName',
			align:'center'
		},
		{
			title: '订单重量(吨)',
			dataIndex: 'orderWeight',
			align:'center'
		},
		{
			title: '过磅重量(吨)',
			dataIndex: 'netWeight',
			align:'center'
		},
		{
			title: '卸货重量(吨)',
			dataIndex: 'shippingWeight',
			align:'center'
		},
		{
			title: '实际拖运重量(吨)',
			dataIndex: 'actualWeight',
			align:'center'
		},
	]
	const companyData = ref([])
	const loadData = () => {
		const searchFormParam = cloneDeep(searchFormState.value)
		bizOrderApi.getOrderTotal(searchFormParam).then((data) => {
			companyData.value = data.records
		})
	}

	// 根据条件设置行的类名
	const rowClassName = (record, index) => {
		// 如果 status 为 'inactive'，则标红
		console.log("record:"+JSON.stringify(record))
		return record.actualWeight > record.netWeight ? 'highlight' : '';
	};

	const query = () => {
		loadData()
	}
	// 导出
	const exportData = () => {
		const searchFormParam = cloneDeep(searchFormState.value)
		Modal.confirm({
			title: '提示',
			content: '确定要导出订单计划统计记录吗?',
			maskClosable: true,
			onOk: () => {
				bizOrderApi.exportRecordTotal(searchFormParam).then((res) => {
					downloadUtil.resultDownload(res)
				})
			}
		})
	}
</script>

<style>
/*.highlight {
	animation: blink 2s infinite;
}
@keyframes blink {
	0%, 100% { background-color: transparent; }
	50% { background-color: red; }
}*/

.highlight {
	background-color: red; /* 设置背景色为红色 */
	/*color: white;*/ /* 可选：设置文字颜色为白色，以便更好地显示 */
}
</style>