在uniapp中这是一个为了实现从接口获取数据的页面,现在要将这个页面改为将上一个页选中某一条记录后跳转到此页面时,将从接口获取到的所有信息中根据上一个页面传递过来的参数把这条记录筛选出来,并把所有信息以表单形式展示,并且可以编辑并提交到数据库,如何修改代码
时间: 2024-11-22 16:42:47 浏览: 25
为了实现从上一个页面传递参数并在当前页面中根据该参数筛选出特定记录并显示为表单,你需要进行以下修改:
### 1. 接收上一个页面传递的参数
在 `mounted` 钩子中接收上一个页面传递的参数,并将其存储在组件的 `data` 中。
### 2. 修改 `fetchData` 方法
在 `fetchData` 方法中,根据接收到的参数过滤数据,并将筛选出的记录赋值给 `editableData`。
### 3. 修改模板部分
将模板中的静态数据显示部分改为动态表单,并绑定 `v-model` 到 `editableData` 中的相应字段。
以下是具体的代码修改示例:
```html
<template>
<div>
<button @click="fetchData">获取数据</button>
<view v-if="dataLoaded">
<!-- 显示获取到的数据 -->
<pre>{{ formattedData }}</pre>
<!-- 表单部分 -->
<form @submit.prevent="updateData">
<label for="field1">字段1:</label>
<input id="field1" v-model="editableData.field1" type="text" />
<label for="field2">字段2:</label>
<input id="field2" v-model="editableData.field2" type="text" />
<!-- 根据实际情况添加更多输入框 -->
<button type="submit">提交修改</button>
</form>
</view>
</div>
</template>
<script>
import request from '@/utils/request';
import { getToken } from '../utils/auth';
export default {
data() {
return {
data: null,
editableData: {},
dataLoaded: false,
selectedRecordId: null, // 用于存储上一个页面传递的记录ID
};
},
methods: {
fetchData() {
// 构造请求参数
const params = {
page: 1,
rows: 30,
sort: "DANGER_R_ID",
order: "desc",
wheres: JSON.stringify([
{ name: "ORDER_STATUS", value: "1" }
])
};
// 发送带有token和参数的请求
request({
url: '/api/danger_rectify_record/getPageData',
method: 'POST',
header: {
'content-type': 'application/json',
'Authorization': `Bearer ${getToken()}`
},
data: params,
dataType: 'json'
}).then(response => {
// 请求成功,处理响应数据
this.data = response;
if (this.selectedRecordId) {
// 根据 selectedRecordId 过滤数据
const record = this.data.data.find(item => item.id === this.selectedRecordId);
if (record) {
this.editableData = { ...record };
}
}
this.dataLoaded = true;
}).catch(error => {
// 请求失败,处理错误
console.error(error);
uni.showToast({ title: '请求失败', icon: 'none' });
});
},
updateData() {
// 发送更新请求
request({
url: '/api/check_carryout_record_daily/updateData',
method: 'POST',
header: {
'content-type': 'application/json',
'Authorization': `Bearer ${getToken()}`
},
data: {
...this.editableData
},
dataType: 'json'
}).then(response => {
// 更新成功处理
uni.showToast({ title: '更新成功', icon: 'success' });
// 可以选择重新获取数据以刷新页面
// this.fetchData();
}).catch(error => {
// 更新失败处理
console.error(error);
uni.showToast({ title: '更新失败', icon: 'none' });
});
},
},
computed: {
formattedData() {
// 如果 data 存在,返回格式化的 JSON 字符串,否则返回空字符串
return this.data ? JSON.stringify(this.data, null, 2) : '';
}
},
mounted() {
// 获取上一个页面传递的参数
this.selectedRecordId = this.$route.query.recordId;
// 调用 fetchData 方法
this.fetchData();
}
};
</script>
```
### 解释
1. **接收参数**:在 `mounted` 钩子中,通过 `this.$route.query.recordId` 获取上一个页面传递的记录ID,并将其存储在 `selectedRecordId` 中。
2. **过滤数据**:在 `fetchData` 方法中,如果 `selectedRecordId` 存在,则从响应数据中找到对应的记录,并将其赋值给 `editableData`。
3. **表单展示**:在模板中,使用 `v-model` 绑定 `editableData` 中的字段,使其成为可编辑的表单。
这样,当用户从上一个页面传递记录ID并跳转到此页面时,页面会自动筛选出对应的记录并显示为可编辑表单。
阅读全文