<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
// 响应式数据
const surveyList = ref
([]
);
const total = ref
(0
);
const loading = ref
(false
);
const formData = reactive
({
dcWjTitle: '',
dcId: [],
dcDept: '',
state: null
}
);
const bdrOptions = ref
([]
);
const bdrLoading = ref
(false
);
const pagination = reactive
({
current: 1,
size: 10,
total: 0
}
);
// 被测评人选择器相关
const bdrSearchKeyword = ref
(''
);
const showBdrList = ref
(false
);
const filteredBdrOptions = ref
([]
);
const showBdrPlaceholder = ref
(true
);
// 状态选择器相关
const stateOptions = ref
([
{ label: '全部', value: null },
{ label: '已提交', value: 1 },
{ label: '未提交', value: 0 }
]
);
const showStateList = ref
(false
);
// 计算
属性
const selectedBdrLabel = computed
(() => {
if
(formData.dcId.length === 0
) return '';
const selected = bdrOptions.value.find
(b => b.value === formData.dcId[0]
);
return selected ? selected.label : '';
}
);
const getStateLabel =
(value
) => {
const state = stateOptions.value.find
(s => s.value === value
);
return state ? state.label : '全部';
};
// 被测评人选择器方法
const handleBdrFocus =
() => {
showBdrList.value = true;
showBdrPlaceholder.value = false;
filterBdrOptions
();
};
const handleBdrInput =
(e
) => {
bdrSearchKeyword.value = e.detail.value;
filterBdrOptions
();
};
const handleBdrSelect =
(item
) => {
formData.dcId = [item.value];
showBdrList.value = false;
bdrSearchKeyword.value = '';
showBdrPlaceholder.value = false;
};
const toggleBdrList =
() => {
showBdrList.value = !showBdrList.value;
if
(showBdrList.value
) {
filterBdrOptions
();
}
};
// 状态选择器方法
const handleStateSelect =
(state
) => {
formData.state = state.value;
showStateList.value = false;
};
const toggleStateList =
() => {
showStateList.value = !showStateList.value;
};
// 过滤被测评人选项
const filterBdrOptions =
() => {
if
(!bdrSearchKeyword.value
) {
filteredBdrOptions.value = [...bdrOptions.value];
return;
}
const keyword = bdrSearchKeyword.value.toLowerCase
();
filteredBdrOptions.value = bdrOptions.value.filter
(item =>
item.label.toLowerCase
().includes
(keyword
)
);
};
// 获取问卷数据
const fetchSurveyData = async
() => {
try {
loading.value = true;
const token = uni.getStorageSync
('token'
);
if
(!token
) {
uni.showToast
({ title: '请先登录', icon: 'none' }
);
uni.redirectTo
({ url: '/pages/login/login' }
);
return;
}
const res = await uni.request
({
url: 'http://172.26.26.43/dev-api/wjdc/wj/listTx',
method: 'GET',
data: {
pageNum: pagination.current,
pageSize: pagination.size,
dcWjTitle: formData.dcWjTitle,
dcId: formData.dcId.join
(','
),
dcDept: formData.dcDept,
state: formData.state
},
header: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
timeout: 10000 // 增加超时设置
}
);
// 完整的响应日志
// console.log
('API响应:', res
);
// 处理不同的响应格式
let responseData = null;
// 处理 uni.request 的不同返回值格式
if
(Array.isArray
(res
)) {
// uni-app 返回数组格式 [error, response]
if
(res[0]
) throw res[0]; // 如果有错误对象
responseData = res[1].data;
} else {
// 直接返回对象格式
responseData = res.data;
}
// 检查响应状态码
if
(responseData?.code === 200
) {
surveyList.value = responseData.rows || [];
total.value = responseData.total || 0;
pagination.total = responseData.total || 0;
} else {
// 更详细的错误信息
const errorMsg = responseData?.msg ||
`API返回非200状态: ${responseData?.code || '未知'}`;
throw new Error
(errorMsg
);
}
} catch
(error
) {
console.error
('请求错误详情:', error
);
// 更精确的错误分类
let userFriendlyMsg = '加载问卷数据失败';
if
(error.errMsg?.includes
('timeout'
)) {
userFriendlyMsg = '请求超时，请检查网络连接';
}
else if
(error.errMsg?.includes
('404'
)) {
userFriendlyMsg = 'API地址不存在，请联系管理员';
}
else if
(error.errMsg?.includes
('401'
)) {
userFriendlyMsg = '登录已过期，请重新登录';
uni.redirectTo
({ url: '/pages/login/login' }
);
}
else if
(error.message
) {
userFriendlyMsg = error.message;
}
uni.showToast
({
title: userFriendlyMsg,
icon: 'none',
duration: 3000
}
);
} finally {
loading.value = false;
}
};
// 获取被测评人列表
const fetchBdrList = async
() => {
try {
const token = uni.getStorageSync
('token'
);
if
(!token
) {
console.warn
('未获取到token，跳过获取被测评人列表'
);
return;
}
// 打印请求开始信息
// console.log
('开始获取被测评人列表...'
);
const res = await uni.request
({
url: 'http://172.26.26.43/dev-api/wjdc/wj/getBdrList',
method: 'GET',
header: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
},
timeout: 8000
}
);
// 详细记录原始响应
// console.log
('被测评人API原始响应:', res
);
// 统一处理uni-app不同平台的响应格式
let response = null;
if
(Array.isArray
(res
)) {
// 小程序格式 [error, response]
if
(res[0]
) {
throw res[0];
}
response = res[1];
} else {
// H5格式 { data, statusCode, ... }
response = res;
}
// 检查HTTP状态码
if
(response.statusCode !== 200
) {
throw new Error
(`HTTP错误: ${response.statusCode}`
);
}
// 解析响应体
const responseBody = response.data;
// console.log
('API响应体:', responseBody
);
// 处理不同的API响应结构
let data = [];
if
(Array.isArray
(responseBody
)) {
// 情况1: 直接返回数组
data = responseBody;
} else if
(responseBody.data && Array.isArray
(responseBody.data
)) {
// 情况2: { data: [...] }
data = responseBody.data;
} else if
(responseBody.rows && Array.isArray
(responseBody.rows
)) {
// 情况3: { rows: [...] }
data = responseBody.rows;
} else if
(responseBody.result && Array.isArray
(responseBody.result
)) {
// 情况4: { result: [...] }
data = responseBody.result;
} else {
console.error
('无法识别的API响应格式:', responseBody
);
throw new Error
('无效的API响应格式'
);
}
// 转换数据格式
bdrOptions.value = data.map
(item => {
// 调试输出每个项目
// console.log
('被测评人原始项:', item
);
// 尝试可能的字段组合
return {
label: item.dcName || item.name || item.username || item.nickname || '未知名称',
value: item.dcId || item.id || item.userId || item.value || null
};
}
);
// console.log
('转换后的被测评人选项:', bdrOptions.value
);
// 初始化过滤后的选项
filteredBdrOptions.value = [...bdrOptions.value];
} catch
(error
) {
console.error
('获取被测评人失败:', error
);
// 更详细的错误处理
let errorMsg = '获取被测评人失败';
if
(error.errMsg
) {
if
(error.errMsg.includes
('401'
)) {
errorMsg = '认证失败，请重新登录';
uni.redirectTo
({ url: '/pages/login/login' }
);
}
else if
(error.errMsg.includes
('timeout'
)) {
errorMsg = '请求超时，请检查网络';
}
else if
(error.errMsg.includes
('404'
)) {
errorMsg = 'API地址不存在';
}
else if
(error.errMsg.includes
('fail'
)) {
errorMsg = `网络请求失败: ${error.errMsg}`;
}
}
else if
(error.message
) {
errorMsg = error.message;
}
uni.showToast
({
title: errorMsg,
icon: 'none',
duration: 3000
}
);
} finally {
// 添加加载状态管理
bdrLoading.value = false;
}
};
// 搜索按钮处理
const handleSearch =
() => {
pagination.current = 1;
fetchSurveyData
();
};
// 重置按钮处理
const handle
Reset =
() => {
formData.dcWjTitle = '';
formData.dcId = [];
formData.dcDept = '';
formData.state = null;
bdrSearchKeyword.value = '';
showBdrList.value = false;
showStateList.value = false;
showBdrPlaceholder.value = true;
handleSearch
();
};
// 编辑/查看问卷
const handleView =
(item
) => {
uni.navigateTo
({
url: `/pages/operation/operation?id=${item.dcWjId}`
}
);
};
// 分页大小改变
const handleSizeChange =
(e
) => {
pagination.size = e.detail.value;
pagination.current = 1;
fetchSurveyData
();
};
// 页码改变
const handlePageChange =
(page
) => {
pagination.current = page;
fetchSurveyData
();
};
// 刷新数据
const refreshData =
() => {
pagination.current = 1;
fetchSurveyData
();
};
// 页面显示时加载数据
onShow
(() => {
fetchSurveyData
();
fetchBdrList
();
}
);
</script>
<template>
<view
class="container">
<!-- 搜索
表单区域 -->
<view
class="search-card">
<view
class="form-group title-group">
<text
class="form-label">问卷标题：</text>
<input
v-model="formData.dcWjTitle"
placeholder="请输入问卷标题"
class="form-input title-input"
/>
</view>
<view
class="form-row">
<!-- 被测评人选择器 -->
<view
class="form-group form-group-half">
<text
class="form-label">被测评人：</text>
<view
class="search-select-container">
<view
class="input-container" @click="showBdrList = true">
<!-- 已选项显示 -->
<view v-if="formData.dcId.length > 0"
class="selected-display">
{{ selectedBdrLabel }}
</view>
<!-- 占位符 -->
<text v-else-if="showBdrPlaceholder"
class="placeholder-text">
请选择被测评人
</text>
<!-- 下拉箭头 -->
<view
class="dropdown-icon">
<text>▼</text>
</view>
</view>
<!-- 下拉列表 -->
<view v-if="showBdrList"
class="dropdown-list">
<view
class="search-box">
<input
v-model="bdrSearchKeyword"
placeholder="搜索被测评人"
class="search-input"
@input="filterBdrOptions"
/>
</view>
<scroll-view scroll-y="true"
class="dropdown-scroll">
<view
v-for="
(item, index
) in filteredBdrOptions"
:key="index"
class="dropdown-item"
:
class="{ 'selected': formData.dcId[0] === item.value }"
@click="handleBdrSelect
(item
)"
>
{{ item.label }}
</view>
<view v-if="filteredBdrOptions.length === 0"
class="empty-option">
无匹配结果
</view>
</scroll-view>
</view>
<!-- 遮罩层 -->
<view
v-if="showBdrList"
class="dropdown-mask"
@click="showBdrList = false"
></view>
</view>
</view>
<!-- 人员部门 -->
<view
class="form-group form-group-half">
<text
class="form-label">人员部门：</text>
<input
v-model="formData.dcDept"
placeholder="请输入部门"
class="form-input"
/>
</view>
</view>
<!-- 提交状态和按钮组 -->
<view
class="form-row-bottom">
<!-- 提交状态 -->
<view
class="state-group">
<text
class="form-label">提交状态：</text>
<view
class="search-select-container">
<view
class="state-select-box" @click="toggleStateList">
<text
class="selected-state">
{{ getStateLabel
(formData.state
) }}
</text>
<view
class="dropdown-icon">
<text>▼</text>
</view>
</view>
<!-- 状态下拉列表 -->
<view v-if="showStateList"
class="dropdown-list state-dropdown">
<view
v-for="
(state, index
) in stateOptions"
:key="index"
class="dropdown-item"
:
class="{ 'selected': formData.state === state.value }"
@click="handleStateSelect
(state
)"
>
{{ state.label }}
</view>
</view>
<!-- 遮罩层 -->
<view
v-if="showStateList"
class="dropdown-mask"
@click="showStateList = false"
></view>
</view>
</view>
<!-- 按钮组 -->
<view
class="button-group">
<button
class="search-button" @click="handleSearch">搜索</button>
<button
class="
reset-button" @click="handle
Reset">重置</button>
</view>
</view>
</view>
<!-- 数据显示区域 -->
<view
class="data-card">
<view
class="card-header">
<button
class="refresh-button" @click="refreshData">刷新数据</button>
</view>
<!-- 加载状态 -->
<view v-if="loading"
class="loading-container">
<view
class="loading-spinner"></view>
<text
class="loading-text">加载中...</text>
</view>
<!-- 数据展示 -->
<view v-else>
<view
v-for="
(item, index
) in surveyList"
:key="index"
class="data-card-item"
>
<view
class="card-header-section">
<view
class="card-title">{{ item.dcWjTitle }}</view>
</view>
<view
class="card-body-section">
<view
class="card-row">
<text
class="card-label">被测评人：</text>
<text
class="card-value">{{ item.dcName }}</text>
</view>
<view
class="card-row">
<text
class="card-label">部门：</text>
<text
class="card-value">{{ item.dcDept }}</text>
</view>
<view
class="card-row">
<text
class="card-label">创建时间：</text>
<text
class="card-value">{{ item.createTime }}</text>
</view>
<view
class="card-row">
<text
class="card-label">提交时间：</text>
<text
class="card-value">{{ item.updateTime || '-' }}</text>
</view>
</view>
<view
class="card-footer-section">
<view
class="status-container">
<view
:
class="[
'status-tag',
item.state === '1' ? 'status-submitted' : 'status-not-submitted'
]"
>
{{ item.state === '1' ? '已提交' : '未提交' }}
</view>
<view
class="score">总分: {{ item.score || '0' }}</view>
</view>
<button
class="view-button" @click="handleView
(item
)">编辑/查看</button>
</view>
</view>
<!-- 空数据提示 -->
<view v-if="surveyList.length === 0"
class="empty">
<text>暂无数据</text>
</view>
</view>
<!-- 分页控件 -->
<view v-if="surveyList.length > 0"
class="pagination-container">
<picker
mode="selector"
:range="[5, 10, 20, 50]"
:value="[5, 10, 20, 50].indexOf
(pagination.size
)"
@change="handleSizeChange"
class="page-size-picker"
>
<view
class="picker">
每页 {{ pagination.size }} 条
</view>
</picker>
<view
class="pagination-buttons">
<button
:disabled="pagination.current === 1"
@click="handlePageChange
(pagination.current - 1
)"
class="page-button prev-button"
>
上一页
</button>
<text
class="page-info">
第 {{ pagination.current }} 页 / 共 {{ Math.ceil
(pagination.total / pagination.size
) }} 页
</text>
<button
:disabled="pagination.current >= Math.ceil
(pagination.total / pagination.size
)"
@click="handlePageChange
(pagination.current + 1
)"
class="page-button next-button"
>
下一页
</button>
</view>
<text
class="total-records">共 {{ pagination.total }} 条记录</text>
</view>
</view>
</view>
</template>
我想要被测评人，选择名字后，名字后面会有一个小圆点点击可以删除选择的该名字
本文介绍了一种在网页中清空表单的有效方法，通过添加class=reset属性到按钮，实现点击即清空表单的功能。对于type=hidden标签，通过修改其类型为text并设置display为none，同样可以达到清空的目的。
扫一扫
573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
