<script setup>
import { ref, onMounted } from &
#39;vue&
#39;;
import { onShow } from &
#39;@dcloudio/uni-app&
#39;;
// 响应式数据
const surveyList = ref([]);
const total = ref(0);
const loading = ref(false);
// 获取问卷数据
const fetchSurveyData = async () => {
try {
loading.value = true;
// 使用uni.request发送
请求
const [
error, res] = await uni.request({
url
: &
#39;http
://172.26.26.43/dev-api/wjdc/wj/listTx&
#39;,
method
: &
#39;GET&
#39;,
data
: {
pageNum
: 1,
pageSize
: 10,
dcWjTitle
: &
#39;&
#39;,
dcId
: &
#39;&
#39;,
dcDept
: &
#39;&
#39;
}
});
if (
error) throw
error;
// 处理响应数据
const response = res.data;
if (response.code === 200) {
surveyList.value = response.rows;
total.value = response.total;
} else {
throw new
Error(response.msg || &
#39;
请求失败&
#39;);
}
} catch (
error) {
uni.showToast({
title
: error.message || &
#39;加载失败&
#39;,
icon
: &
#39;none&
#39;,
duration
: 2000
});
} finally {
loading.value = false;
}
};
// 使用onShow替代onMounted确保每次进入
页面都刷新
onShow(() => {
fetchSurveyData();
});
</script>
<template>
<view class="container">
<!-- 自定义加载状态 -->
<view v-if="loading" class="loading-container">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
</view>
<!-- 数据展示 -->
<template v-else>
<text class="total">共 {{ total }} 条记录</text>
<view v-for="(item, index) in surveyList"
:key="index" class="card">
<view class="title">{{ item.dcWjTitle }}</view>
<view class="info">
<text>部门
: {{ item.dcDept }}</text>
<text>创建人
: {{ item.createBy }}</text>
</view>
<view class="meta">
<text>创建时间
: {{ item.createTime }}</text>
<text class="score">得分
: {{ item.score }}</text>
</view>
</view>
<!-- 空数据提示 -->
<view v-if="surveyList.length === 0" class="empty">
<text>暂无数据</text>
</view>
</template>
</view>
</template>
<style scoped>
.container {
padding
: 20rpx;
background-color
: #f5f5f5;
min-height
: 100vh;
}
/* 自定义加载状态样式 */
.loading-container {
display
: flex;
flex-direction
: column;
align-items
: center;
justify-content
: center;
padding
: 40rpx 0;
}
.loading-spinner {
width
: 60rpx;
height
: 60rpx;
border
: 6rpx solid
#f3f3f3;
border-top
: 6rpx solid
#3498db;
border-radius
: 50%;
animation
: spin 1s linear infinite;
margin-bottom
: 20rpx;
}
@keyframes spin {
0% { transform
: rotate(0deg); }
100% { transform
: rotate(360deg); }
}
.loading-text {
color
: #666;
font-size
: 28rpx;
}
/* 数据样式 */
.total {
display
: block;
margin
: 20rpx 0;
padding
: 0 20rpx;
color
: #888;
font-size
: 28rpx;
}
.card {
padding
: 30rpx;
margin-bottom
: 30rpx;
border-radius
: 16rpx;
background-color
: #fff;
box-shadow
: 0 4rpx 12rpx rgba(0,0,0,0.05);
}
.title {
font-size
: 34rpx;
font-weight
: bold;
margin-bottom
: 20rpx;
color
: #333;
}
.info {
display
: flex;
justify-content
: space-between;
color
: #666;
font-size
: 28rpx;
margin-bottom
: 15rpx;
}
.meta {
display
: flex;
justify-content
: space-between;
color
: #999;
font-size
: 26rpx;
margin-top
: 15rpx;
}
.score {
color
: #e74c3c;
font-weight
: bold;
}
.empty {
text-align
: center;
padding
: 100rpx 0;
color
: #999;
font-size
: 32rpx;
}
</style>
我的数据加载板块参照代码：<template>
<div class="detail-container">
<!-- 索引板块卡片 -->
<el-card class="index-card">
<!-- 表单区域 -->
<el-form
:model="formData"
label-position="top"
ref="indexForm"
class="mobile-form"
>
<!-- 问卷标题 -->
<el-form-item label="问卷标题：" prop="dcWjTitle">
<el-input
v-model="formData.dcWjTitle"
placeholder="请输入问卷标题"
clearable
:prefix-icon="Document"
/>
</el-form-item>
<div class="form-row">
<!-- 被测评人 -->
<el-form-item label="被测评人：" prop="dcId" class="inline-form-item">
<el-select
v-model="formData.dcId"
multiple
filterable
remote
reserve-keyword
clearable
placeholder="请选择被测评人"
:remote-method="searchBdr"
:loading="bdrLoading"
@focus="handleBdrFocus"
>
<el-option
v-for="item in bdrOptions"
:key="item.dcId"
:label="item.dcName"
:value="item.dcId"
/>
</el-select>
</el-form-item>
<!-- 人员部门 -->
<el-form-item label="人员部门：" prop="dcDept" class="inline-form-item">
<el-input
v-model="formData.dcDept"
placeholder="请输入人员部门"
clearable
:prefix-icon="OfficeBuilding"
/>
</el-form-item>
</div>
<!-- 提交状态 -->
<el-form-item label="提交状态：" prop="state">
<el-select
v-model="formData.state"
placeholder="请选择提交状态"
clearable
class="mobile-select"
>
<el-option
label="已提交"
:value="1"
/>
<el-option
label="未提交"
:value="0"
/>
</el-select>
</el-form-item>
<!-- 新增：按钮区域 -->
<el-form-item class="button-group">
<el-button
type="primary"
@click="handleSearch"
class="action-button"
:icon="Search"
>
搜索
</el-button>
<el-button
@click="handleReset"
class="action-button"
:icon="Refresh"
>
重置
</el-button>
</el-form-item>
</el-form>
</el-card>
<!-- 数据显示板块 -->
<el-card class="data-card">
<template
#header>
<div class="card-header">
<el-button
type="primary"
size="small"
:icon="Refresh"
@click="fetchData"
>
刷新数据
</el-button>
</div>
</template>
<!-- 数据加载 -->
<div v-loading="loading" class="card-container">
<div
v-for="(item, index) in tableData"
:key="item.dcWjId"
class="data-card-item"
>
<!-- 顶部：序号和问卷标题 -->
<div class="card-header-section">
<!-- <div class="card-id">序号{{ item.dcWjId }}</div> -->
<div class="card-title">{{ item.dcWjTitle }}</div>
</div>
<!-- 中间：其他数据 -->
<div class="card-body-section">
<div class="card-row">
<span class="card-label">被测评人：</span>
<span class="card-value">{{ item.dcName }}</span>
</div>
<div class="card-row">
<span class="card-label">部门：</span>
<span class="card-value">{{ item.dcDept }}</span>
</div>
<div class="card-row">
<span class="card-label">创建时间：</span>
<span class="card-value">{{ item.createTime }}</span>
</div>
<div class="card-row">
<span class="card-label">提交时间：</span>
<span class="card-value">{{ item.updateTime || &
#39;-&
#39; }}</span>
</div>
</div>
<!-- 底部：状态、得分和操作按钮 -->
<div class="card-footer-section">
<div class="status-container">
<el-tag
:type="item.state === &
#39;1&
#39; ? &
#39;success&
#39;
: &
#39;info&
#39;">
{{ item.state === &
#39;1&
#39; ? &
#39;已提交&
#39;
: &
#39;未提交&
#39; }}
</el-tag>
<div class="score">总分
: {{ item.score || &
#39;0&
#39; }}</div>
</div>
<el-button
size="small"
type="primary"
@click="handleView(item)"
class="action-btn"
>
编辑/查看
</el-button>
</div>
</div>
<!-- 空数据提示 -->
<el-empty v-if="tableData.length === 0" description="暂无数据" />
</div>
<!-- 分页控件 -->
<div class="pagination-container">
<el-pagination
v-model
:current-page="pagination.current"
v-model
:page-size="pagination.size"
:page-sizes="[5, 10, 20, 50]"
layout="total, sizes, prev, pager, next, jumper"
:total="pagination.total"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</el-card>
</div>
</template>
<script setup>
// 确保正确导入所有 Vue 函数
import { ref, reactive, onMounted, onUnmounted } from &
#39;vue&
#39;;
import axios from &
#39;axios&
#39;;
import {
Document,
User,
OfficeBuilding,
Search,
Refresh
} from &
#39;@element-plus/icons-vue&
#39;;
import { ElMessage } from &
#39;element-plus&
#39;;
import { useRouter } from &
#39;vue-router&
#39;;
const router = useRouter();
// 环境变量管理API地址
const API_BASE = import.meta.env.VITE_API_BASE || &
#39;http
://172.26.26.43/dev-api&
#39;;
const API_URL = `${API_BASE}/wjdc/wj/listTx`;
const BDR_API_URL = `${API_BASE}/wjdc/wj/getBdrList`;
// 被测评人相关数据
const bdrOptions = ref([]); // 被测评人选项列表
const bdrLoading = ref(false); // 加载状态
const bdrCache = ref([]); // 缓存所有被测评人数据
// 表单数据
const formData = reactive({
dcWjTitle
: &
#39;&
#39;,
dcId
: [],
dcDept
: &
#39;&
#39;,
state
: null
});
// 表格数据
const tableData = ref([]);
const loading = ref(false);
// 分页配置
const pagination = reactive({
current
: 1,
size
: 10,
total
: 0
});
// 表单引用
const indexForm = ref(null);
//
请求取消令牌
let cancelTokenSource = axios.CancelToken.source();
// 处理被测评人输入框获取焦点
const handleBdrFocus = () => {
if (bdrCache.value.length === 0) {
fetchBdrList(&
#39;&
#39;);
}
};
// 获取被测评人列表
const fetchBdrList = async (keyword = &
#39;&
#39;) => {
const token = getAuthToken();
if (!token) return;
bdrLoading.value = true;
try {
const response = await axios.get(BDR_API_URL, {
headers
: {
&
#39;Authorization&
#39;
: `Bearer ${token}`
}
});
// 判断返回的数据是否是数组
if (Array.isArray(response.data)) {
// 缓存所有数据
bdrCache.value = response.data;
// 根据关键字过滤
if (keyword) {
const searchTerm = keyword.toLowerCase();
bdrOptions.value = bdrCache.value.filter(item =>
item.dcName && item.dcName.toLowerCase().includes(searchTerm)
).slice(0, 10); // 最多显示10条
} else {
// 未输入关键字时显示前10条
bdrOptions.value = bdrCache.value.slice(0, 10);
}
} else {
// 如果不是数组，则按照原有格式处理（假设有code和data）
if (response.data && response.data.code === 200) {
bdrCache.value = response.data.data || [];
// 同样的过滤逻辑
if (keyword) {
const searchTerm = keyword.toLowerCase();
bdrOptions.value = bdrCache.value.filter(item =>
item.dcName.toLowerCase().includes(searchTerm)
).slice(0, 10);
} else {
bdrOptions.value = bdrCache.value.slice(0, 10);
}
} else {
const msg = response.data?.msg || &
#39;返回数据格式不正确&
#39;;
ElMessage.
error(&
#39;获取被测评人列表失败
: &
#39; + msg);
}
}
} catch (
error) {
console.
error(&
#39;获取被测评人列表失败
:&
#39;,
error);
ElMessage.
error(&
#39;获取被测评人列表失败&
#39;);
} finally {
bdrLoading.value = false;
}
};
// 搜索被测评人（防抖）
let searchBdrTimer = null;
const searchBdr = (query) => {
if (searchBdrTimer) clearTimeout(searchBdrTimer);
searchBdrTimer = setTimeout(() => {
if (bdrCache.value.length === 0) {
fetchBdrList(query);
} else {
// 本地过滤
if (query) {
const searchTerm = query.toLowerCase();
bdrOptions.value = bdrCache.value.filter(item =>
item.dcName.toLowerCase().includes(searchTerm)
).slice(0, 10);
} else {
bdrOptions.value = bdrCache.value.slice(0, 10);
}
}
}, 300);
};
// 获取认证令牌
const getAuthToken = () => {
const token = localStorage.getItem(&
#39;token&
#39;);
if (!token) {
ElMessage.warning(&
#39;请先登录&
#39;);
router.push(&
#39;/login&
#39;);
return null;
}
return token;
};
// 搜索按钮处理函数 - 防抖
let searchTimer = null;
const handleSearch = () => {
// 检查被测评人选择数量
if (formData.dcId.length > 1) {
ElMessage.warning({
message
: &
#39;当前只能搜索一个被测人员&
#39;,
duration
: 3000
});
return;
}
if (searchTimer) clearTimeout(searchTimer);
searchTimer = setTimeout(() => {
pagination.current = 1;
fetchData();
}, 300);
};
// 重置按钮处理函数
const handleReset = () => {
if (indexForm.value) {
indexForm.value.resetFields();
// 确保重置后 dcId 是空数组
formData.dcId = [];
}
handleSearch();
};
// 编辑/查看
const handleView = (row) => {
router.push({
name
: &
#39;Operation&
#39;, // 路由名称
params
: {
id
: row.dcWjId // 传递问卷ID作为参数
}
});
};
// 分页大小改变
const handleSizeChange = (size) => {
pagination.size = size;
fetchData();
};
// 页码改变
const handlePageChange = (page) => {
pagination.current = page;
fetchData();
};
// 获取数据
const fetchData = async () => {
// 获取认证令牌
const token = getAuthToken();
if (!token) return;
// 取消之前的
请求
if (cancelTokenSource) {
cancelTokenSource.cancel(&
#39;
请求被取消&
#39;);
}
cancelTokenSource = axios.CancelToken.source();
loading.value = true;
try {
// 构造
请求参数
const params = {
pageNum
: pagination.current,
pageSize
: pagination.size,
...formData,
// 安全处理：确保 dcId 是数组再 join
dcId
: Array.isArray(formData.dcId)
? formData.dcId.join(&
#39;,&
#39;)
: &
#39;&
#39; // 将数组转换为逗号分隔的字符串
};
// 调用API - 添加认证头
const response = await axios.get(API_URL, {
params,
cancelToken
: cancelTokenSource.token,
headers
: {
&
#39;Content-Type&
#39;
: &
#39;application/json&
#39;,
&
#39;Authorization&
#39;
: `Bearer ${token}`
}
});
// 处理响应数据
const { data } = response;
if (data && data.code === 200) {
// 修改点：直接使用 data.rows 和 data.total
tableData.value = data.rows || [];
pagination.total = data.total || 0;
// 空数据提示
if (tableData.value.length === 0) {
ElMessage.info(&
#39;没有找到匹配的数据&
#39;);
}
} else {
const
errorMsg = data?.msg || &
#39;未知
错误&
#39;;
console.
error(&
#39;API返回
错误:&
#39;,
errorMsg);
ElMessage.
error(`
请求失败
: ${
errorMsg}`);
tableData.value = [];
pagination.total = 0;
}
} catch (
error) {
// 处理认证失败
if (
error.response &&
error.response.status === 401) {
ElMessage.
error(&
#39;认证过期，请重新登录&
#39;);
localStorage.removeItem(&
#39;token&
#39;);
router.push(&
#39;/login&
#39;);
return;
}
// 忽略取消
请求的
错误
if (!axios.isCancel(
error)) {
console.
error(&
#39;获取数据失败
:&
#39;,
error);
const
errorMsg =
error.response?.data?.message || &
#39;网络
请求失败&
#39;;
ElMessage.
error(`
请求失败
: ${
errorMsg}`);
tableData.value = [];
pagination.total = 0;
}
} finally {
loading.value = false;
}
};
//
页面加载时获取初始数据
onMounted(() => {
fetchData();
});
// 组件卸载时取消所有
请求
onUnmounted(() => {
if (cancelTokenSource) {
cancelTokenSource.cancel(&
#39;组件卸载，取消
请求&
#39;);
}
});
</script>
<style scoped>
.form-row {
display
: flex;
flex-wrap
: wrap;
gap
: 16px;
margin-bottom
: 16px;
}
.inline-form-item {
flex: 1;
min-width
: 250px;
}
.inline-form-item
:deep(.el-form-item__label) {
float
: left;
width
: auto;
padding-right
: 12px;
line-height
: 32px;
}
.inline-form-item
:deep(.el-form-item__content) {
display
: flex;
flex: 1;
}
/* 移动端响应式 */
@media (max-width
: 768px) {
.form-row {
flex-direction
: column;
gap
: 16px;
}
.inline-form-item {
min-width
: 100%;
}
.inline-form-item
:deep(.el-form-item__label) {
float
: none;
width
: 100%;
padding-right
: 0;
padding-bottom
: 8px;
}
}
/* 卡片容器样式 */
.card-container {
display
: grid;
grid-template-columns
: repeat(auto-fill, minmax(500px, 1fr));
gap
: 16px;
}
/* 单个卡片样式 */
.data-card-item {
background
: #fff;
border-radius
: 12px;
box-shadow
: 0 4px 12px rgba(0, 0, 0, 0.08);
padding
: 16px;
display
: flex;
flex-direction
: column;
transition
: all 0.3s ease;
border
: 1px solid
#ebeef5;
}
.data-card-item
:hover {
transform
: translateY(-4px);
box-shadow
: 0 6px 16px rgba(0, 0, 0, 0.12);
}
/* 卡片头部（序号+标题） */
.card-header-section {
padding-bottom
: 12px;
border-bottom
: 1px solid
#f0f2f5;
margin-bottom
: 12px;
}
.card-id {
font-size
: 14px;
color
: #909399;
margin-bottom
: 4px;
}
.card-title {
font-size
: 16px;
font-weight
: 600;
color
: #303133;
line-height
: 1.4;
word-break
: break-word;
}
/* 卡片主体（其他信息） */
.card-body-section {
flex: 1;
margin-bottom
: 12px;
}
.card-row {
display
: flex;
margin-bottom
: 8px;
font-size
: 14px;
}
.card-label {
color
: #606266;
min-width
: 70px;
text-align
: right;
}
.card-value {
color
: #303133;
flex: 1;
word-break
: break-word;
}
/* 卡片底部（状态+按钮） */
.card-footer-section {
display
: flex;
justify-content
: space-between;
align-items
: center;
padding-top
: 12px;
border-top
: 1px solid
#f0f2f5;
}
.status-container {
display
: flex;
align-items
: center;
gap
: 8px;
}
.score {
font-size
: 14px;
color
: #e6a23c;
font-weight
: 500;
}
.action-btn {
flex-shrink
: 0;
}
/* 移动端响应式 */
@media (max-width
: 768px) {
.card-container {
grid-template-columns
: 1fr;
}
.card-row {
flex-direction
: column;
margin-bottom
: 12px;
}
.card-label {
text-align
: left;
margin-bottom
: 4px;
font-weight
: 500;
}
.card-footer-section {
flex-direction
: column;
align-items
: stretch;
gap
: 12px;
}
.status-container {
justify-content
: space-between;
}
}
/* 添加选择器样式 */
:deep(.el-select) .el-input__inner {
height
: auto !important;
min-height
: 44px;
padding
: 5px 15px;
}
/* 标签样式 */
:deep(.el-tag) {
margin
: 2px 6px 2px 0;
}
/* 下拉菜单样式 */
:deep(.el-select-dropdown) {
max-height
: 300px;
overflow-y
: auto;
}
.index-card {
border-radius
: 12px;
box-shadow
: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.card-header {
font-size
: 18px;
font-weight
: 600;
color
: #1a1a1a;
}
.mobile-form {
:deep(.el-form-item__label) {
font-weight
: 500;
margin-bottom
: 6px;
}
:deep(.el-input__inner) {
height
: 44px;
border-radius
: 8px;
}
}
.mobile-select {
width
: 100%;
:deep(.el-input__inner) {
height
: 44px;
}
}
/* 按钮区域样式 */
.button-group {
display
: flex;
gap
: 12px;
margin-top
: 16px;
}
.action-button {
flex: 1;
height
: 46px;
font-size
: 16px;
border-radius
: 8px;
}
/* 移动端响应式调整 */
@media (max-width
: 480px) {
.button-group {
flex-direction
: column;
gap
: 10px;
}
.action-button {
width
: 100%;
}
}
</style>
本文探讨了Error#2032:流错误的原因及解决办法，特别关注设置URLRequest对象data属性的情况，并指出了在不同服务器环境下可能出现的问题。
扫一扫
5057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
