文章目录
前言
该功能采用uniapp，vue3的语法来设计一个报警页面数据渲染，并根据不同的分类条件展示不同的数据列表。
预览实现效果
1 展示大列表数据效果
2. 不同分类类型的页面
3. 点击列表数据，弹出详细页，并将数据及时修改
提示：以下是本篇文章正文内容，下面案例可供参考
一、搭建静态页面
1.1 创建一个页面的整体布局框架
1.2 在每个区域中设计相关的组件
思路：分析该页面需要哪些功能
1. 需要搜索栏，列表展示的卡片，实现挑选的分类的组件 - - 分段器
2. 然后逐一设计
1.3 静态页面代码
1.3.1 搜索栏代码区域
<view class="search-bar">
<picker
mode="date"
@change="handleAlertTimeChange"
@cancel="handleAlertTimeCancel"
style="margin-right: 10rpx;"
>
<view class="filter-item" style=" display: flex; align-items: center; border-radius: 10rpx; border: 1rpx solid #e5e5e5;padding: 10rpx; width: 230rpx; height: 80rpx; ">
<u-icon name="calendar" size="50" color="#909399" style="align-items: center;"></u-icon>
<text style="display: flex; align-items: center; ">{{ queryParams.alertTime }}</text>
</view>
</picker>
<u-input
v-model="queryParams.search"
placeholder="请输入工具名称或编号"
clearable
@confirm="handleSearch"
class="search-input"
style="border-radius: 10rpx; border: 1rpx solid #e5e5e5;width: 350rpx; height: 80rpx;"
></u-input>
<u-button @click="handleSearch" type="primary" size="mini" class="search-button">搜索</u-button>
</view>1.3.2 分段器代码区域
<u-subsection
:list="alertTypeList"
@change="handleAlertTypeChange"
style="margin-bottom: 20rpx;"
></u-subsection>1.3.3 列表卡片代码区域
<view class="timeline-content">
<view
v-for="(item, idx) in group.events"
:key="idx"
class="alertCard"
>
<view class="leftContent" @tap="editAlertEvent" :data-alert_id="item.alertId" :data-index="index">
<block v-if="item.alertType==2">
<view class="top" style="margin-left: 30rpx;display: flex; justify-content: space-between; align-items: center;">
<text class="equip-text" >规则: {{ item.ruleName }}</text>
</view>
</block>
<block v-else>
<view class="top" style="display: flex; justify-content: space-between;align-items: flex-start; ">
<view class="fixed-width">
<text class="equip-text-title">编号: {{ item.equipName }}</text>
</view>
<view class="fixed-width-right">
<text class="equip-text" >名称： {{ item.cateMain }}{{ item.cateSub?("（"+item.cateSub+"）"):'' }}</text>
</view>
</view>
</block>
<view class="middle" style=" display: flex; justify-content: space-between; align-items: flex-start;">
<view class="alertType fixed-width" >
<view style="display: flex;">
<view v-if="item.alertState == 1" style="margin-right: 10rpx; ">
<u-tag text="已处理" mode="light" type="success" shape="circle" font-size="50rpx" ></u-tag>
</view>
<view v-if="item.alertState == 0" style="margin-right: 10rpx;">
<u-tag text="报警中" mode="light" type="error" shape="circle" font-size="50rpx"></u-tag>
</view>
<view v-if="item.alertType == 1">
<u-tag text="过期报警" mode="light" type="error" shape="circle" font-size="50rpx"></u-tag>
</view>
<view v-if="item.alertType == 2">
<u-tag text="规则报警" mode="light" type="error" shape="circle" font-size="50rpx"></u-tag>
</view>
<view v-if="item.alertType == 3">
<u-tag text="临期报警" mode="light" type="warning" shape="circle" font-size="50rpx"></u-tag>
</view>
</view>
</view>
<view class="fixed-width-right v-center">
<text class="equip-text">时间：{{ item.alertTime }}</text>
</view>
</view>
</view>
</view>
</view>1.3.4 如果还想根据不同时间段来显示时间范围内的列表
<view v-for="(group, index) in groupedEvents" :key="index" class="timeline-item">
<!-- 时间点 -->
<view class="timeline-node">
<text class="date-text">
{{ group.date }}
</text>
<text class="week-day">
{{ getWeekDay(group.date) }}
</text>
</view>
</view>二、创建相关数据接口API
1.思路
该页面需要哪些功能就需要获取请求哪些功能的API
1. 需要获取列表数据
2. 获取每一个数据的详细信息
3. 编辑数据
2.数据api代码区域
import {request, get, post} from "@/common/utils/http.js";
// 获取报警列表信息
export function getListAlertEvent(query) {
return post("/alertEvent/list-data", query);
}
// 查询报警事件详细
export function getAlertEvent(alertId) {
return request({
url: '/alertEvent/' + alertId,
method: 'get'
})
}
// 修改报警事件
export function updateAlertEvent(data) {
return request({
url: '/alertEvent/update',
method: 'post',
data: data
})
}
三、创建相关逻辑的store
3.1 编写获取列表数据方法
// 获取列表数据
async fetchListAlertEvent(PageData) {
const res = await getListAlertEvent(PageData);
return res
},
3.2 获取列表中详细数据方法
// 获取报警详情信息
async fetchAlertInfo(data) {
try {
this.loading = true;
const response = await getAlertEvent(data);
this.error = null;
return response;
} catch (error) {
console.error("Failed to fetch data:", error);
} finally {
this.loading = false;
}
},3.3 修改数据方法
// 修改报警信息
async updateAlertInfo(data) {
try {
this.loading = true; // 开始加载
const response = await updateAlertEvent(data); // 调用 API 方法新增规则
if (response.code === 200) {
// 如果新增成功，更新规则列表
return response;
} else {
// 如果新增失败，抛出错误
throw new Error(response.message || 'Failed ');
}
} catch (error) {
console.error("Failed:", error);
this.error = error.message; // 保存错误信息
throw error; // 抛出错误以便调用方处理
} finally {
this.loading = false; // 结束加载
}
},注意：vue3中store的方法是采用pinia的，我们在声明的方法的时候一定注意调用接口的函数一定是在api中声明的方法，store中声明的相同功能函数的名要和api中区别开！
四、在页面中编辑相关的功能逻辑
4.1 首先获取数据来遍历列表
思路：调用store中获取列表数据的方法，定义一个空数组，将服务器中的值传到空数组中进行遍历
// 获取数据列表
const getAlertEventList = async () => {
alertStore.fetchListAlertEvent(queryParams).then((res) => {
if (res.code != 200) {
uni.showToast({
title: '加载失败',
icon: 'error'
})
if (queryParams.pageNum > 1) {
queryParams.pageNum--
}
return
}
}).finally(() => {
uni.stopPullDownRefresh()
})
}
4.2 实现列表下滑的时候分页功能
// 获取数据列表
const getAlertEventList = async () => {
console.log("getEquipEventList:", JSON.stringify(queryParams));
alertStore.fetchListAlertEvent(queryParams).then((res) => {
if (res.code != 200) {
uni.showToast({
title: '加载失败',
icon: 'error'
})
if (queryParams.pageNum > 1) {
queryParams.pageNum--
}
return
}
if (queryParams.pageNum == 1) {
alertEventList.value = res.rows
} else {
alertEventList.value = alertEventList.value.concat(res.rows)
}
if (res.rows.length == 0) {
isHaveNextPage.value = false
queryParams.pageNum--
uni.showToast({
title: '没有更多了',
icon: 'none'
})
}
}).finally(() => {
uni.stopPullDownRefresh()
})
}
onPullDownRefresh(() => {
queryParams.pageNum = 1
getAlertEventList()
})
onReachBottom(() => {
console.log("onReachBottom:" , queryParams)
queryParams.pageNum++
getAlertEventList()
})注意：在实现分页的功能的时候要注意的点：
1. 在pages.json 中找到该页面中将 ，需配置 "enablePullDownRefresh":true
2. 调用uniapp中自带的触底和下拉刷新的方法 onPullDownRefresh，onReachBottom
4.3 将后台服务器中获取的数据跟静态页面双向绑定渲染
主要要将每一个数据中绑定的时候添加index或者唯一区别的字符，然后绑定后台传递的参数名，一定使用{{}}或者v-model或者：value等
例如：
<view class="fixed-width">
<text class="equip-text-title">编号: {{ item.equipName }}</text>
</view> 4.3 分段器功能逻辑
在template中
<u-subsection
:list="alertTypeList"
@change="handleAlertTypeChange"
style="margin-bottom: 20rpx;"
></u-subsection>list：主要是显示要设置的分类数组有哪些，按照自己需要输入
@change：主要点击不同分类的时候触发的事件，转换显示不同分类数据
// 分段器选项
const alertTypeList = [
{ name: '过期报警',value: '1'},
{ name: '临期报警',value: '3' },
{ name: '规则报警',value: '2' },
];
// 处理分段器变化的事件
const handleAlertTypeChange = (index) => {
queryParams.alertType = alertTypeList[index].value
queryParams.pageNum=1
getAlertEventList()
}4.5 搜索栏功能逻辑
// 处理日期选择器变化的事件
const handleAlertTimeChange = (e) => {
queryParams.alertTime = e.detail.value;
}
// 处理日期选择器取消事件
const handleAlertTimeCancel = () => {
queryParams.alertTime = '';
};
// 处理搜索按钮点击事件
const handleSearch = () => {
queryParams.pageNum=1
getAlertEventList()
}4.6 编辑功能逻辑
4.6.1 将该编辑的数据的id和index传到下一页
const editAlertEvent = (e) => {
const alertId = e.currentTarget.dataset.alert_id
const index = e.currentTarget.dataset.index
const aid = Number(alertId)?parseInt(alertId):-1
uni.navigateTo({
// url: `pages/admin/updateAlert?alertId=${alertId}&index=${index}`,
url:'/pages/admin/updateAlert?aid=' + aid + '&index=' + index,
})
}注意：在列表页中点击卡片前往下一页编辑的时候，将这个数据的index和id要及时传到下一页中，然后根据传的id在获取请求这个id的列表详细数据详细
4.6.2 获取数据的id来请求该数据的详细数据详细
onLoad((e) => {
console.log('alert onLoad:',e);
alertData.alertId = parseInt(e.aid);
listIndex = parseInt(e.index);
uni.showLoading({
title: '加载中'
});
alertStore.fetchAlertInfo(alertData.alertId).then(res => {
if(res.code!=200){
uni.showToast({
title: '加载失败',
icon: 'error'
})
return
}
const data=res.data
//
for (let key in alertData) {
if (alertData.hasOwnProperty(key)) {
alertData[key] = data[key]
}
}
// 初始化报警类型状态
currentAlertStateIndex.value=alertStatesRange.findIndex(item=>item.value==alertData.state)
if(currentAlertStateIndex.value==-1){
currentAlertStateIndex.value=0
}
// 初始化报警类型
currentAlertTypeIndex.value=alertTypesRange.findIndex(item=>item.value==alertData.alertType)
if(currentAlertTypeIndex.value==-1){
currentAlertTypeIndex.value=0
}
}).finally(()=>{
console.log('equipment onload finally')
uni.hideLoading();
})
});注意：在该页面中展示数据的时候，是在页面加载的时候就将数据渲染出来
在onLoad中编写业务逻辑
4.6.3 编辑各个模块的逻辑
例子：修改报警状态的功能逻辑
const onAlertStateChange = (e) => {
currentAlertStateIndex.value=e.detail.value
alertData.state=alertStatesRange[currentAlertStateIndex.value].value
};4.7 将数据保存提交到服务器，并将数据及时回显到上一页中
4.7.1 将数据保存到服务器中
const onSave = () => {
if (!roles.value.includes('manager') && !roles.value.includes('boss')) {
uni.showToast({
title: '无权限修改数据',
icon: 'none',
});
return;
}
uni.showLoading({
title: '保存中',
})
alertStore.updateAlertInfo(alertData).then(res => {
uni.hideLoading();
debugger
if (res.code == 200) {
const data={}
data.alert = res.data;
data.listIndex = listIndex;
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
if (prevPage && prevPage.$vm.setUpdateAlert) {
// prevPage.$vm.setUpdateAlert({value: alertData});
prevPage.$vm.setUpdateAlert(data);
}
uni.showModal({
title: '提示',
content: '保存成功',
showCancel: false,
success: function (res) {
uni.navigateBack()
}
});
} else {
uni.showToast({
title: res.msg ? res.msg : '保存失败',
icon: 'none'
})
}
}).finally(()=>{
uni.hideLoading();
})
};4.7.2 数据及时回显到上一页中显示
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
if (prevPage && prevPage.$vm.setUpdateAlert) {
// prevPage.$vm.setUpdateAlert({value: alertData});
prevPage.$vm.setUpdateAlert(data);
} 在上一页中定义 setUpdateAlert方法
const setUpdateAlert = (data) => {
alertEventList.value[data.listIndex].alertState = data.alert.state
alertEventList.value[data.listIndex].remark = data.alert.remark
}
注意：要在上一页的列表setUpdateAlert方法，并将方法进行暴露出来，然后在编辑页中进行调用
总结
以上就是今天要讲的内容，在实现一个数据渲染和加上条件检索数据列表的时候，首先需要清楚要以那个参数作为判断点，和将数据修改后要将数据及时显示，用的方法为set+方法名，首先要在渲染显示数据那一页声明函数，然后在修改页面中引用。
扫一扫
5787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
