<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>
<!-- 数据表格 -->
<el-table
:data="tableData"
v-loading="loading"
element-loading-text="数据加载中..."
stripe
style="width: 100%"
class="mobile-table"
>
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="dcWjTitle" label="问卷标题" min-width="150" />
<el-table-column prop="dcName" label="被测评人" width="120" />
<el-table-column prop="dcDept" label="部门" width="120" />
<el-table-column prop="state" label="提交状态" width="100">
<template #default="scope">
<el-tag :type="scope.row.state === '1' ? 'success' : 'info'">
{{ scope.row.state === '1' ? '已提交' : '未提交' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="score" label="总分" width="120" />
<el-table-column prop="createTime" label="创建时间" width="180" />
<el-table-column label="操作" width="120" fixed="right">
<template #default="scope">
<el-button
size="small"
type="primary"
@click="handleView(scope.row)"
>
查看
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页控件 -->
<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();
// 被测评人相关数据
const bdrOptions = ref([]); // 被测评人选项列表
const bdrLoading = ref(false); // 加载状态
const bdrCache = ref([]); // 缓存所有被测评人数据
// 表单数据(修改dcId为数组类型)
const formData = reactive({
dcWjTitle: '',
dcId: [], // 改为数组类型,存储多个被测评人ID
dcDept: '',
state: null
});
// 处理被测评人输入框获取焦点
const handleBdrFocus = () => {
if (bdrCache.value.length === 0) {
fetchBdrList('');
}
};
// 获取被测评人列表
const fetchBdrList = async (keyword = '') => {
const token = getAuthToken();
if (!token) return;
bdrLoading.value = true;
try {
const response = await axios.get('http://172.26.26.43/dev-api/wjdc/wj/getBdrList', {
headers: {
'Authorization': `Bearer ${token}`
}
});
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); // 最多显示10条
} else {
// 未输入关键字时显示前10条
bdrOptions.value = bdrCache.value.slice(0, 10);
}
} else {
ElMessage.error('获取被测评人列表失败: ' + (response.data.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);
};
// 环境变量管理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 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 cancelTokenSource = axios.CancelToken.source();
// 获取认证令牌
const getAuthToken = () => {
const token = localStorage.getItem('token');
if (!token) {
ElMessage.warning('请先登录');
router.push('/login');
return null;
}
return token;
};
// 搜索按钮处理函数 - 添加防抖
let searchTimer = null;
const handleSearch = () => {
if (searchTimer) clearTimeout(searchTimer);
searchTimer = setTimeout(() => {
pagination.current = 1;
fetchData();
}, 300);
};
// 重置按钮处理函数
const handleReset = () => {
if (indexForm.value) {
indexForm.value.resetFields();
}
handleSearch();
};
// 查看详情
const handleView = (row) => {
console.log('查看详情:', row);
// 这里可以实现查看详情的逻辑
};
// 分页大小改变
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('请求被取消');
}
cancelTokenSource = axios.CancelToken.source();
loading.value = true;
try {
// 构造请求参数
const params = {
pageNum: pagination.current,
pageSize: pagination.size,
...formData
};
// 调用API - 添加认证头
const response = await axios.get(API_URL, {
params,
cancelToken: cancelTokenSource.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 (cancelTokenSource) {
cancelTokenSource.cancel('组件卸载,取消请求');
}
});
</script>
<style scoped>
/* 移动端适配样式 */
.detail-container {
padding: 12px;
}
/* 添加选择器样式 */
: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>
报错:[plugin:vite:vue] [vue/compiler-sfc] Identifier 'formData' has already been declared. (103:6)
D:/民意测评/VUE3-MYCP/src/views/Detail.vue
265|
266| // 表单数据
267| const formData = reactive({
268| dcWjTitle: '',
269| dcId: '',
最新发布