app主要样式
搜索
// 构建查询参数
function buildQueryParam(pageNum) {
queryForm.pageNum = pageNum;
return Object.assign({}, queryForm, { pageNum });
}将
pageNum(当前页面)赋值给queryForm.pageNum。使用
Object.assign方法创建一个新的对象,包含queryForm的所有属性,并添加或覆盖pageNum属性。返回这个新的对象作为查询参数。
// 查询
async function query(mescroll, isDownFlag, param) {
try {
let res = await purchaseOrderApi.getPurchaseOrderList(param);
if (!isDownFlag) {
purchaseOrderList.value = purchaseOrderList.value.concat(res.data.list);
} else {
purchaseOrderList.value = res.data.list;
}
mescroll.endSuccess(res.data.list.length, res.data.pages > res.data.pageNum);
} catch (e) {
smartSentry.captureError(e);
//联网失败, 结束加载
mescroll.endErr();
}
}异步函数用于从服务器获取采购订单列表。
mescroll是滚动插件实例。isDownFlag表示是否是下拉刷新操作。如果是下拉刷新,值为true;否则为false。param是查询参数,通过buildQueryParam函数构建。使用
try...catch块来处理请求和错误。如果请求成功,根据isDownFlag的值决定是追加数据还是替换数据。最后调用mescroll.endSuccess方法结束加载动画。如果请求失败,捕获异常并调用mescroll.endErr方法结束加载动画。
//搜索
function search() {
query(getMescroll(), true, buildQueryParam(1));
uni.pageScrollTo({
scrollTop: 0,
});
}这个函数用于触发搜索操作。
它调用了
query函数,传入getMescroll()(获取滚动插件实例)、true(表示是下拉刷新)和buildQueryParam(1)(构建查询参数)。然后调用
uni.pageScrollTo方法将页面滚动到顶部。
弹窗
父组件
<!-- 弹窗组件 -->
<purchasemodal ref="queryFormPopUpRef" @close="searchUpdate"/>
//弹窗
function toggleModal() {
queryFormPopUpRef.value.show();
}
//关闭
function searchUpdate(data) {
if(data===null){
return;
}else{
queryForm.purchaseOrderStatus = data.purchaseOrderStatus;
query(getMescroll(), true, buildQueryParam(1));
uni.pageScrollTo({
scrollTop: 0,
});
}
}将
data.purchaseOrderStatus赋值给queryForm.purchaseOrderStatus。然后调用
query函数,传入getMescroll()(获取滚动插件实例)、true(表示是下拉刷新)和buildQueryParam(1)(构建查询参数)。最后调用
uni.pageScrollTo方法将页面滚动到顶部。
子组件
function cancel() {
close();
temp.value = '';
emits('close', null);
}
function ok() {
close();
emits('close', toRaw(form));
temp.value = '';
}emits('close', toRaw(form)): 触发一个名为 'close' 的事件,并传递 toRaw(form) 作为参数。toRaw 是 Vue.js 中的一个方法,用于获取原始对象,而不是其响应式代理
带参跳转
父组件
//跳转到详情页
function navigateToDetail(qualityInspectionOrderCode) {
// 调用 uni.navigateTo 方法进行页面跳转
uni.navigateTo({
url: `/pages/workbench/quality-control/incoming-inspection/incoming-inspection-confirm3/components/incoming-inspection-query-detail3?qualityInspectionOrderCode=${qualityInspectionOrderCode}`
});
}子组件
async function getQualityControlDetail(qualityInspectionCode) {
formData.value = {};
try {
let res = await qualityControlApi.getQualityControlDetail(qualityInspectionCode);
formData.value = res.data;
materials.value = res.data.qualityInspectionOrderGoodsDetailsList.map((item, index) => ({
createTime: item.createTime,
goodsCode:item.goodsCode,
goodsName: item.goodsName,
goodsSpecification: item.goodsSpecification,
expectedQualityInspectGoodsNumber: item.expectedQualityInspectGoodsNumber,
updaterName: item.updaterName,
updateTime: item.updateTime,
goodsUnitId: item.goodsUnitId,
goodsUnitName:item.goodsUnitName,
expectedQualityInspectGoodsNumber:item.expectedQualityInspectGoodsNumber,
qualityInspectionPassedGoodsNumber:item.qualityInspectionPassedGoodsNumber,
defectiveItemCause:item.defectiveItemCause
}));
} catch (error) {
console.error('获取数据失败:', error);
}
}
// 组件挂载时获取数据
onMounted(() => {
if (qualityInspectionCode) {
getQualityControlDetail(qualityInspectionCode);
} else {
console.error('质检单编号未提供');
}
});