<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>
<!-- 被测评人 -->
<el-form-item label="被测评人：" prop="dcId">
<el-select
v-model="formData.dcId"
multiple
filterable
remote
reserve-keyword
clearable
placeholder="
请选择被测评人"
:remote-method="searchBdr"
:loading="bdrLoading"
@focus="handleBdrFocus"
style="width: 100%"
>
<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">
<el-input
v-model="formData.dcDept"
placeholder="
请输入人员部门"
clearable
:prefix-icon="OfficeBuilding"
/>
</el-form-item>
<!-- 提交状态 -->
<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 || '-' }}</span>
</div>
</div>
<!--
底部：状态、得分和操作按钮 -->
<div class="card-footer-section">
<div class="status-container">
<el-tag :type="item.state === '1' ? 'success' : 'info'">
{{ item.state === '1' ? '已提交' : '未提交' }}
</el-tag>
<div class="score">总分: {{ item.score || '0' }}</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 'vue';
import axios from 'axios';
import {
Document,
User,
OfficeBuilding,
Search,
Refresh
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
// 环境变量管理API地址
const API_BASE = import.meta.env.VITE_API_BASE || 'http://172.26.26.43/dev-api';
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: '',
dcId: [],
dcDept: '',
state: null
});
// 表格数据
const tableData = ref([]);
const loading = ref(false);
// 分页配置
const pagination = reactive({
current: 1,
size: 10,
total: 0
});
// 表单引用
const indexForm = ref(null);
//
请求取消令牌
let cancel
TokenSource = axios.Cancel
Token.source();
// 处理被测评人输入框
获取焦点
const handleBdrFocus = () => {
if (bdrCache.value.length === 0) {
fetchBdrList('');
}
};
//
获取被测评人列表
const fetchBdrList = async (keyword = '') => {
const
token = getAuth
Token();
if (!
token) return;
bdrLoading.value = true;
try {
const response = await axios.get(BDR_API_URL, {
headers: {
'Authorization': `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 || '返回数据格式不正确';
ElMessage.error('
获取被测评人列表
失败: ' + msg);
}
}
} catch (error) {
console.error('
获取被测评人列表
失败:', error);
ElMessage.error('
获取被测评人列表
失败');
} 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 getAuth
Token = () => {
const
token = localStorage.getItem('
token');
if (!
token) {
ElMessage.warning('
请先登录');
router.push('/login');
return null;
}
return
token;
};
// 搜索按钮处理函数 - 防抖
let searchTimer = null;
const handleSearch = () => {
// 检查被测评人选择数量
if (formData.dcId.length > 1) {
ElMessage.warning({
message: '当前只能搜索一个被测人员',
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: 'Operation', // 路由名称
params: {
id: row.dcWjId // 传递问卷ID作为参数
}
});
};
// 分页大小改变
const handleSizeChange = (size) => {
pagination.size = size;
fetchData();
};
// 页码改变
const handlePageChange = (page) => {
pagination.current = page;
fetchData();
};
//
获取数据
const fetchData = async () => {
//
获取认证令牌
const
token = getAuth
Token();
if (!
token) return;
// 取消之前的
请求
if (cancel
TokenSource) {
cancel
TokenSource.cancel('
请求被取消');
}
cancel
TokenSource = axios.Cancel
Token.source();
loading.value = true;
try {
// 构造
请求参数
const params = {
pageNum: pagination.current,
pageSize: pagination.size,
...formData,
// 安全处理：确保 dcId 是数组再 join
dcId: Array.isArray(formData.dcId)
? formData.dcId.join(',')
: '' // 将数组转换为逗号分隔的字符串
};
// 调用API - 添加认证头
const response = await axios.get(API_URL, {
params,
cancel
Token: cancel
TokenSource.
token,
headers: {
'Content-Type': 'application/json',
'Authorization': `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('没有找到匹配的数据');
}
} else {
const errorMsg = data?.msg || '未知错误';
console.error('API返回错误:', errorMsg);
ElMessage.error(`
请求
失败: ${errorMsg}`);
tableData.value = [];
pagination.total = 0;
}
} catch (error) {
// 处理认证
失败
if (error.response && error.response.status === 401) {
ElMessage.error('认证过期，
请重新登录');
localStorage.removeItem('
token');
router.push('/login');
return;
}
// 忽略取消
请求的错误
if (!axios.isCancel(error)) {
console.error('
获取数据
失败:', error);
const errorMsg = error.response?.data?.message || '网络
请求
失败';
ElMessage.error(`
请求
失败: ${errorMsg}`);
tableData.value = [];
pagination.total = 0;
}
} finally {
loading.value = false;
}
};
// 页面加载时
获取初始数据
onMounted(() => {
fetchData();
});
// 组件卸载时取消所有
请求
onUnmounted(() => {
if (cancel
TokenSource) {
cancel
TokenSource.cancel('组件卸载，取消
请求');
}
});
</script>
<style scoped>
/* 移动端适配样式 */
.detail-container {
padding: 12px;
}
/* 卡片容器样式 */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 16px;
padding: 8px;
}
/* 单个卡片样式 */
.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>
帮我修改一下该页面的整体布局，使得该页面适用于移动端，而不是PC端
探讨了在底部标签栏组件FooterGuide中提前加载导致无法获取localStorage中token的问题，提出通过定时器每5秒尝试获取token，确保登录后能正确读取。
扫一扫
1897
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
