<template>
<view class="detail
-container">
<text>这是详情页</text>
</view>
</template>
<script>
export default {
setup() {
// 可以在这里添加逻辑
}
}
</script>
<style>
.detail
-container {
display: flex;
justify
-content: center;
align
-items: center;
height: 100vh;
}
</style>这个是我的详情页代码，现在我想要顶部有一个索引板块，板块里有输入框问卷标题：（cWjTitle）、输入框被测评人（dcId）、输入框人员部门（dcDept）、下拉选择框人员状态（state），代码逻辑和接口参照以下代码：<template>
<div class="detail
-container">
<!
-- 索引板块卡片
-->
<
el-card class="index
-card">
<!
-- 表单区域
-->
<
el-form
:mod
el="formData"
lab
el-position="top"
ref="indexForm"
class="mobile
-form"
>
<!
-- 问卷标题
-->
<
el-form
-item lab
el="问卷标题：" prop="dcWjTitle">
<
el-input
v
-mod
el="formData.dcWjTitle"
placeholder="请输入问卷标题"
clearable
:prefix
-icon="Document"
/>
</
el-form
-item>
<div class="form
-row">
<!
-- 被测评人
-->
<
el-form
-item lab
el="被测评人：" prop="dcId" class="inline
-form
-item">
<
el-s
elect
v
-mod
el="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"
:lab
el="item.dcName"
:value="item.dcId"
/>
</
el-s
elect>
</
el-form
-item>
<!
-- 人员部门
-->
<
el-form
-item lab
el="人员部门：" prop="dcDept" class="inline
-form
-item">
<
el-input
v
-mod
el="formData.dcDept"
placeholder="请输入人员部门"
clearable
:prefix
-icon="OfficeBuilding"
/>
</
el-form
-item>
</div>
<!
-- 提交状态
-->
<
el-form
-item lab
el="提交状态：" prop="state">
<
el-s
elect
v
-mod
el="formData.state"
placeholder="请选择提交状态"
clearable
class="mobile
-s
elect"
>
<
el-option
lab
el="已提交"
:value="1"
/>
<
el-option
lab
el="未提交"
:value="0"
/>
</
el-s
elect>
</
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
-lab
el">被测评人：</span>
<span class="card
-value">{{ item.dcName }}</span>
</div>
<div class="card
-row">
<span class="card
-lab
el">部门：</span>
<span class="card
-value">{{ item.dcDept }}</span>
</div>
<div class="card
-row">
<span class="card
-lab
el">创建时间：</span>
<span class="card
-value">{{ item.createTime }}</span>
</div>
<div class="card
-row">
<span class="card
-lab
el">提交时间：</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
-mod
el:current
-page="pagination.current"
v
-mod
el: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 canc
elTokenSource = axios.Canc
elToken.source();
// 处理被测评人输入框获取焦点
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(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 getAuthToken = () => {
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.resetFi
elds();
// 确保重置后 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 = getAuthToken();
if (!token) return;
// 取消之前的请求
if (canc
elTokenSource) {
canc
elTokenSource.canc
el('请求被取消');
}
canc
elTokenSource = axios.Canc
elToken.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,
canc
elToken: canc
elTokenSource.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.isCanc
el(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 (canc
elTokenSource) {
canc
elTokenSource.canc
el('组件卸载，取消请求');
}
});
</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__lab
el) {
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__lab
el) {
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
-lab
el {
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
-lab
el {
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-s
elect) .
el-input__inner {
height: auto !important;
min
-height: 44px;
padding: 5px 15px;
}
/* 标签样式 */
:deep(.
el-tag) {
margin: 2px 6px 2px 0;
}
/* 下拉菜单样式 */
:deep(.
el-s
elect
-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__lab
el) {
font
-weight: 500;
margin
-bottom: 6px;
}
:deep(.
el-input__inner) {
height: 44px;
border
-radius: 8px;
}
}
.mobile
-s
elect {
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>
但是样式布局要适用于手机端，注意这个是要写到移动端，uniapp+Vue3的项目里。
本文介绍了如何利用CSS属性如`float`、`margin`来控制网页元素的布局和间距。通过设置`margin-bottom`为负值，可以有效地减小控件之间的距离，实现紧凑的界面设计。这种方法在前端开发中常用于微调元素的位置。
扫一扫
908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
