uni-app调用接口时如何参数是否为null

<template>
	<view>
		<view class="loadc_a">
			<view class="oper_aqq">
				<view>开始日期: </view>
				<picker mode="date" :value="startTime" :start="'2000-01-01'" :end="endDate"
					@change="bindStartDateChange">
					<view class="uni-input">{{ startTime }}</view>
				</picker>
			</view>
		</view>
		<view class="loadc_a">
			<view class="oper_aqq">
				<view>结束日期:</view>
				<picker mode="date" :value="endTime" :start="startTime" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{ endTime }}</view>
				</picker>
			</view>
		</view>
		<view class="loadc_a">
			<th-table :column="column" :listData="data" :checkSort="checkSort" :st="st" :sr="sr" :tdClick="tdClick"
				height="0.5" :stripe="true" :border="true" :loading="false">
				<template #b="Props">
					<span style="color: red;">{{ Props.item.b }}</span>
				</template>
				<template #c="Props">
					<span style="color: green;" @click="log(Props.item)">{{ Props.item.c }}</span>
				</template>
				<template #a="Props">
					<div style="color: pink;">{{ Props.item.a }}</div>
					<div>{{ Props.item.e }}</div>
				</template>
			</th-table>
			<view class="pagination">
				<button @click="prevPage" :disabled="pageNo === 1">上一页</button>
				<span>页码 {{ pageNo }}/{{ totalPages }}</span>
				<button @click="nextPage" :disabled="pageNo === totalPages">下一页</button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, computed, onMounted, defineProps, watch } from 'vue';
	import { getcurveShi } from '@/src/api/api.js';

	const props = defineProps({
		siteId: {
			type: String,
			required: true
		}
	});

	const currentDate = new Date();
	currentDate.setDate(1);
	const startTime = ref(currentDate.toISOString().split('T')[0]);
	const endTime = ref(new Date().toISOString().split('T')[0]);
	const siteId = ref(props.siteId);
	const data = ref([]);
	const pageNo = ref(1);
	const column = ref([]);

	// 开始日期
	const bindStartDateChange = (e : { detail : { value : string } }) => {
		startTime.value = e.detail.value;
		fetchData();
	};

	// 结束日期
	const bindEndDateChange = (e : { detail : { value : string } }) => {
		endTime.value = e.detail.value;
		fetchData();
	};

	// 自定义插槽单元格点击事件
	const log = (item) => {
		console.log(item);
	};

	// 计算总页数
	const totalPages = ref(0);

	// 分页操作
	const nextPage = () => {
		if (pageNo.value < totalPages.value) {
			pageNo.value += 1;
			fetchData();
		}
	};

	const prevPage = () => {
		if (pageNo.value > 1) {
			pageNo.value -= 1;
			fetchData();
		}
	};

	// 排序字段
	const st = ref('b');
	// sr 排序 1降序 -1升序
	const sr = ref(-1);
	const checkSort = (name, type) => {
		st.value = name;
		sr.value = type;
	};

	// 行点击事件 可不传 默认参数: 整行数据
	const tdClick = (item) => {
		console.log(item);
	};

	// 获取数据
	const fetchData = () => {
		// 打印参数,调试信息
		console.log("调用接口参数:", {
			endTime: endTime.value,
			pageNo: pageNo.value,
			siteId: siteId.value,
			startTime: startTime.value
		});

		// 检查参数是否为空
		if (!endTime.value || !pageNo.value || !siteId.value || !startTime.value) {
			console.error("参数不能为空");
			return;
		}

		getcurveShi(endTime.value, pageNo.value, siteId.value, startTime.value).then(response => {
			if (response.data && response.data.titles) {
				column.value = response.data.titles.map(item => ({
					title: item.title,
					isSort: false,
					isFixed: false,
					key: item.key
				}));
				totalPages.value = response.data.pageTotal;
				data.value = response.data.dataList;
			} else {
				console.error("接口返回数据格式错误", response);
			}
		}).catch(error => {
			console.error("接口调用失败", error);
		});
	};

	watch(() => props.siteId, (newVal) => {
		siteId.value = newVal;
		fetchData();
	}, { immediate: true });

	watch(startTime, () => {
		fetchData();
	});

	watch(endTime, () => {
		fetchData();
	});

	watch(pageNo, () => {
		fetchData();
	});

	// 页面挂载时调用接口
	onMounted(() => {
		fetchData();
	});
</script>


<style lang="scss" scoped>
	@import "/static/css/Operation.css";

	.loadc_a,
	.freef_q {
		margin-top: 10rpx;
		padding: 10rpx;
		background-color: #f5f6f8;
	}

	.freef_q {
		display: flex;
		white-space: nowrap;
	}

	.elec_q {
		width: 300rpx;
		display: inline-block;
		margin-right: 10rpx;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.pagination button {
		padding: 10px 20px;
		margin: 0 10px;
	}

	.oper_aqq {
		display: flex;
		font-size: 36rpx;
	}
</style>

<script setup lang="ts">
	import { ref, computed, onMounted, defineProps, watch } from 'vue';
	import { getcurveShi } from '@/src/api/api.js';

	const props = defineProps({
		siteId: {
			type: String,
			required: true
		}
	});

	const currentDate = new Date();
	currentDate.setDate(1);
	const startTime = ref(currentDate.toISOString().split('T')[0]);
	const endTime = ref(new Date().toISOString().split('T')[0]);
	const siteId = ref(props.siteId);
	const data = ref([]);
	const pageNo = ref(1);
	const column = ref([]);

	// 开始日期
	const bindStartDateChange = (e : { detail : { value : string } }) => {
		startTime.value = e.detail.value;
		fetchData();
	};

	// 结束日期
	const bindEndDateChange = (e : { detail : { value : string } }) => {
		endTime.value = e.detail.value;
		fetchData();
	};

	// 自定义插槽单元格点击事件
	const log = (item) => {
		console.log(item);
	};

	// 计算总页数
	const totalPages = ref(0);

	// 分页操作
	const nextPage = () => {
		if (pageNo.value < totalPages.value) {
			pageNo.value += 1;
			fetchData();
		}
	};

	const prevPage = () => {
		if (pageNo.value > 1) {
			pageNo.value -= 1;
			fetchData();
		}
	};

	// 排序字段
	const st = ref('b');
	// sr 排序 1降序 -1升序
	const sr = ref(-1);
	const checkSort = (name, type) => {
		st.value = name;
		sr.value = type;
	};

	// 行点击事件 可不传 默认参数: 整行数据
	const tdClick = (item) => {
		console.log(item);
	};

	// 获取数据
	const fetchData = () => {
		// 打印参数,调试信息
		console.log("调用接口参数:", {
			endTime: endTime.value,
			pageNo: pageNo.value,
			siteId: siteId.value,
			startTime: startTime.value
		});

		// 检查参数是否为空
		if (!endTime.value || !pageNo.value || !siteId.value || !startTime.value) {
			console.error("参数不能为空");
			return;
		}

		getcurveShi(endTime.value, pageNo.value, siteId.value, startTime.value).then(response => {
			if (response.data && response.data.titles) {
				column.value = response.data.titles.map(item => ({
					title: item.title,
					isSort: false,
					isFixed: false,
					key: item.key
				}));
				totalPages.value = response.data.pageTotal;
				data.value = response.data.dataList;
			} else {
				console.error("接口返回数据格式错误", response);
			}
		}).catch(error => {
			console.error("接口调用失败", error);
		});
	};

	watch(() => props.siteId, (newVal) => {
		siteId.value = newVal;
		fetchData();
	}, { immediate: true });

	watch(startTime, () => {
		fetchData();
	});

	watch(endTime, () => {
		fetchData();
	});

	watch(pageNo, () => {
		fetchData();
	});

	// 页面挂载时调用接口
	onMounted(() => {
		fetchData();
	});
</script>


<style lang="scss" scoped>
	@import "/static/css/Operation.css";

	.loadc_a,
	.freef_q {
		margin-top: 10rpx;
		padding: 10rpx;
		background-color: #f5f6f8;
	}

	.freef_q {
		display: flex;
		white-space: nowrap;
	}

	.elec_q {
		width: 300rpx;
		display: inline-block;
		margin-right: 10rpx;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.pagination button {
		padding: 10px 20px;
		margin: 0 10px;
	}

	.oper_aqq {
		display: flex;
		font-size: 36rpx;
	}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值