<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
-input
v
-model="formData.dcId"
placeholder="请输入被测评人"
clearable
:prefix
-icon="User"
/>
</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();
// 环境变量管理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 = {
pag
eNum: 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;
}
.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>
我想索引板块的被测评人搜索框有如下效果，在点击空白输入框还未输入时调用接口：http
://172.26.26.43/dev
-api/wjdc/wj/getBdrList ，响应的数据格式：[{"dcId"
:14,"dcName"
:"张三"},{"dcId"
:15,"dcName"
:"李四"},{"dcId"
:16,"dcName"
:"王五"}] ，显示返回的名称dcName前10个，然后可以输入关键字带出含有该字的名字，如输入张，显示张三，张兰。选择张三就把张三添加到搜索框里，支持多选
本文介绍固定布局模型的工作原理，包括如何根据width属性设置列宽，以及如何处理auto宽度的情况。首行定义所有列宽，后续行中的单元格宽度依据首行设定。
扫一扫
2228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
