庄锐波
5 months ago
10 changed files with 712 additions and 35 deletions
@ -1,11 +1,417 @@ |
|||
<script setup> |
|||
<template> |
|||
<div class="registration-list-page"> |
|||
<!-- 搜索栏 --> |
|||
<van-search |
|||
v-model="searchText" |
|||
show-action |
|||
placeholder="请输入关键字查询" |
|||
clearable |
|||
clear-trigger="always" |
|||
@clear="onClear" |
|||
@search="onSearch" |
|||
> |
|||
<template #action> |
|||
<div @click="onSearch">搜索</div> |
|||
</template> |
|||
</van-search> |
|||
|
|||
</script> |
|||
<!-- 日期快捷筛选按钮 --> |
|||
<div class="search-button-list"> |
|||
<van-button plain hairline :class="dateType === null ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(null)" round type="primary" size="mini">全部</van-button> |
|||
<van-button plain hairline :class="dateType === 1 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(1)" round type="primary" size="mini">本月</van-button> |
|||
<van-button plain hairline :class="dateType === 2 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(2)" round type="primary" size="mini">本季</van-button> |
|||
<van-button plain hairline :class="dateType === 3 ? 'search-btn active' : 'search-btn'" |
|||
@click="searchDateType(3)" round type="primary" size="mini">本年</van-button> |
|||
<van-button plain hairline :class="dateType === 9 ? 'search-btn active' : 'search-btn'" |
|||
@click="openDatePicker" round type="primary" size="mini">筛选</van-button> |
|||
</div> |
|||
|
|||
<template> |
|||
<!-- 指定月份显示 --> |
|||
<div class="search-date-display" v-show="dateShow"> |
|||
<span class="date-label" @click="openDatePicker">{{ dateSearchDisplay }}</span> |
|||
</div> |
|||
|
|||
<!-- 月份选择器弹出层 --> |
|||
<van-popup v-model:show="showDatePicker" position="bottom"> |
|||
<van-date-picker |
|||
title="选择月度" |
|||
v-model="currentDate" |
|||
:min-date="minDate" |
|||
:max-date="maxDate" |
|||
:columns-type="['year', 'month']" |
|||
@confirm="onDateConfirm" |
|||
@cancel="showDatePicker = false" |
|||
/> |
|||
</van-popup> |
|||
|
|||
<!-- 可滚动列表区域 --> |
|||
<div class="list-container"> |
|||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
|||
<van-list |
|||
v-model:loading="loading" |
|||
:finished="finished" |
|||
finished-text="没有更多了" |
|||
@load="onLoad" |
|||
:offset="50" |
|||
> |
|||
<!-- 空状态 --> |
|||
<van-empty v-if="finished && list.length === 0" description="暂无数据" /> |
|||
|
|||
<!-- 列表项 --> |
|||
<div class="card-item" v-for="item in list" :key="item.id"> |
|||
<div class="card-header"> |
|||
<span class="card-time">执法时间：{{ formatDate(item.enforcementTime) }}</span> |
|||
<span class="joint-mark" v-if="item.hasUnion === 1">联</span> |
|||
</div> |
|||
<div class="card-divider"></div> |
|||
<div class="card-body" @click="toDetailView(item.id)"> |
|||
<div class="card-title">{{ item.lawEnforcementItemText || '-' }}</div> |
|||
<div class="card-row"> |
|||
<span class="card-label">执法单位：</span> |
|||
<span>{{ item.bureauDeptName || '-' }}</span> |
|||
</div> |
|||
<div class="card-row"> |
|||
<span class="card-label">执法人员：</span> |
|||
<span class="enforcer-block"> |
|||
<span>{{ item.lawEnforcerDisplay || item.lawEnforcer || '-' }}</span> |
|||
<span v-for="(name, idx) in (item.lawEnforcer2List || [])" :key="idx">{{ name }}</span> |
|||
</span> |
|||
</div> |
|||
<div class="card-row"> |
|||
<span class="card-label">执法类别：</span> |
|||
<span>{{ item.lawEnforceCategoryText || '-' }}</span> |
|||
</div> |
|||
</div> |
|||
<!-- 评价按钮 --> |
|||
<div class="card-actions" v-if="item.outTimeDayNum != null && item.outTimeDayNum <= 5 && item.isEvaluate === 0"> |
|||
<a @click.stop="toEvaluate(item.id, item.lawEnforcementItemText)"> |
|||
<van-icon name="flower-o" /> 评价 |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</van-list> |
|||
</van-pull-refresh> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
<script setup name="enforcementRegistrationList"> |
|||
import { getEnterpriseEnforcementRegistrationList } from '@/api/enterprise'; |
|||
import { showToast } from 'vant'; |
|||
import 'vant/es/toast/style'; |
|||
|
|||
const { useCommon } = $globalStore; |
|||
const router = useRouter(); |
|||
|
|||
// ========== 列表状态 ========== |
|||
const list = ref([]); |
|||
const loading = ref(false); |
|||
const finished = ref(false); |
|||
const refreshing = ref(false); |
|||
const searchText = ref(''); |
|||
|
|||
// ========== 分页参数 ========== |
|||
const pageNum = ref(1); |
|||
const pageSize = ref(10); |
|||
|
|||
// ========== 日期筛选 ========== |
|||
const dateType = ref(null); |
|||
const dateSearch = ref(null); |
|||
const dateSearchDisplay = ref(''); |
|||
const dateShow = ref(false); |
|||
const showDatePicker = ref(false); |
|||
const currentDate = ref(['2026', '01']); |
|||
const minDate = new Date(2020, 0, 1); |
|||
const maxDate = new Date(2030, 11, 31); |
|||
|
|||
// ========== 格式化日期 ========== |
|||
const formatDate = (dateStr) => { |
|||
if (!dateStr) return '-'; |
|||
const d = new Date(dateStr); |
|||
const y = d.getFullYear(); |
|||
const m = String(d.getMonth() + 1).padStart(2, '0'); |
|||
const day = String(d.getDate()).padStart(2, '0'); |
|||
return `${y}-${m}-${day}`; |
|||
}; |
|||
|
|||
// ========== 加载数据 ========== |
|||
const fetchList = () => { |
|||
const params = { |
|||
pageNum: pageNum.value, |
|||
pageSize: pageSize.value, |
|||
enterpriseNumber: useCommon.enterpriseNumber, |
|||
}; |
|||
// 关键字搜索 |
|||
if (searchText.value) { |
|||
params.searchValue = searchText.value; |
|||
} |
|||
// 日期类型 |
|||
if (dateType.value != null && dateType.value !== 9) { |
|||
params.dateType = dateType.value; |
|||
} |
|||
// 指定月份 |
|||
if (dateSearch.value) { |
|||
params.dateSearch = dateSearch.value; |
|||
} |
|||
|
|||
getEnterpriseEnforcementRegistrationList(params, (res) => { |
|||
if (res.code === 200) { |
|||
const rows = res.rows || []; |
|||
const total = res.total || 0; |
|||
|
|||
if (refreshing.value) { |
|||
list.value = rows; |
|||
refreshing.value = false; |
|||
} else { |
|||
list.value = [...list.value, ...rows]; |
|||
} |
|||
|
|||
if (list.value.length >= total) { |
|||
finished.value = true; |
|||
} |
|||
loading.value = false; |
|||
} else { |
|||
loading.value = false; |
|||
finished.value = true; |
|||
showToast(res.msg || '加载失败'); |
|||
} |
|||
}, () => { |
|||
loading.value = false; |
|||
finished.value = true; |
|||
refreshing.value = false; |
|||
showToast('网络请求失败'); |
|||
}); |
|||
}; |
|||
|
|||
// ========== 触底加载更多 ========== |
|||
const onLoad = () => { |
|||
if (refreshing.value) return; |
|||
fetchList(); |
|||
pageNum.value++; |
|||
}; |
|||
|
|||
// ========== 下拉刷新 ========== |
|||
const onRefresh = () => { |
|||
pageNum.value = 1; |
|||
finished.value = false; |
|||
loading.value = true; |
|||
fetchList(); |
|||
pageNum.value++; |
|||
}; |
|||
|
|||
// ========== 搜索 ========== |
|||
const onSearch = () => { |
|||
pageNum.value = 1; |
|||
list.value = []; |
|||
finished.value = false; |
|||
loading.value = true; |
|||
fetchList(); |
|||
pageNum.value++; |
|||
}; |
|||
|
|||
// ========== 清空搜索 ========== |
|||
const onClear = () => { |
|||
searchText.value = ''; |
|||
onSearch(); |
|||
}; |
|||
|
|||
// ========== 日期类型切换 ========== |
|||
const searchDateType = (val) => { |
|||
dateType.value = val; |
|||
dateSearch.value = null; |
|||
dateShow.value = false; |
|||
onSearch(); |
|||
}; |
|||
|
|||
// ========== 打开月份选择器 ========== |
|||
const openDatePicker = () => { |
|||
dateType.value = 9; |
|||
showDatePicker.value = true; |
|||
}; |
|||
|
|||
// ========== 月份选择确认 ========== |
|||
const onDateConfirm = (value) => { |
|||
const year = value.selectedValues[0]; |
|||
const month = value.selectedValues[1]; |
|||
dateSearchDisplay.value = year + '/' + month; |
|||
dateSearch.value = year + '-' + month; |
|||
dateType.value = 9; |
|||
dateShow.value = true; |
|||
showDatePicker.value = false; |
|||
onSearch(); |
|||
}; |
|||
|
|||
// ========== 跳转详情 ========== |
|||
const toDetailView = (id) => { |
|||
router.push({ |
|||
path: '/registrationDetail', |
|||
query: { id } |
|||
}); |
|||
}; |
|||
|
|||
// ========== 跳转评价 ========== |
|||
const toEvaluate = (id, checkItem) => { |
|||
router.push({ |
|||
path: '/evaluate', |
|||
query: { |
|||
isSelect: false, |
|||
id, |
|||
lawEnforcementItemText: checkItem, |
|||
} |
|||
}); |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.registration-list-page { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
background-color: #ebf3fb; |
|||
|
|||
.list-container { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
padding: 0 0.27rem; |
|||
} |
|||
} |
|||
|
|||
/* ===== 搜索按钮行 ===== */ |
|||
.search-button-list { |
|||
display: flex; |
|||
flex-direction: row; |
|||
padding: 0.2rem 0.27rem 0; |
|||
gap: 0.15rem; |
|||
|
|||
.search-btn { |
|||
flex: 1; |
|||
height: 0.7rem; |
|||
background: #ebebeb; |
|||
border-color: #ebebeb; |
|||
color: #999; |
|||
font-size: 0.3rem; |
|||
} |
|||
|
|||
.search-btn.active { |
|||
background-color: #d9e6fd; |
|||
border-color: #75a5fb; |
|||
color: #1367fe; |
|||
} |
|||
} |
|||
|
|||
/* ===== 日期显示 ===== */ |
|||
.search-date-display { |
|||
padding: 0.15rem 0.27rem 0; |
|||
.date-label { |
|||
color: #c1bfbf; |
|||
font-size: 0.4rem; |
|||
} |
|||
} |
|||
|
|||
/* ===== 卡片样式 ===== */ |
|||
.card-item { |
|||
background: #fff; |
|||
border-radius: 0.2rem; |
|||
margin-top: 0.27rem; |
|||
padding: 0.2rem 0.3rem; |
|||
position: relative; |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.card-time { |
|||
color: #c1bfbf; |
|||
font-size: 0.32rem; |
|||
} |
|||
} |
|||
|
|||
.joint-mark { |
|||
display: inline-block; |
|||
width: 0.5rem; |
|||
height: 0.5rem; |
|||
background: #2d94fa; |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
font-size: 0.3rem; |
|||
line-height: 0.5rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
.card-divider { |
|||
height: 1px; |
|||
background: #f4f5f6; |
|||
margin: 0.15rem 0; |
|||
} |
|||
|
|||
.card-body { |
|||
.card-title { |
|||
font-size: 0.4rem; |
|||
font-weight: bold; |
|||
color: #000; |
|||
margin-bottom: 0.15rem; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.card-row { |
|||
display: flex; |
|||
font-size: 0.35rem; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
|
|||
.card-label { |
|||
color: #323233; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.enforcer-block { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.card-actions { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
border-top: 1px solid #f4f5f6; |
|||
margin-top: 0.2rem; |
|||
padding-top: 0.15rem; |
|||
|
|||
a { |
|||
font-size: 0.35rem; |
|||
color: #1367fe; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
a i { |
|||
margin-right: 0.1rem; |
|||
font-size: 0.4rem; |
|||
} |
|||
} |
|||
|
|||
/* ===== Vant 搜索框样式覆盖 ===== */ |
|||
:deep(.van-search__content) { |
|||
height: 0.9rem; |
|||
border: 1px solid #ececec; |
|||
border-radius: 0.15rem 0 0 0.15rem; |
|||
} |
|||
|
|||
:deep(.van-search__action) { |
|||
margin: 0 3% 0 0; |
|||
width: 10%; |
|||
height: 0.9rem; |
|||
background: #1367fe; |
|||
border: 0.01rem solid #1367fe; |
|||
border-radius: 0 0.15rem 0.15rem 0; |
|||
color: #fff; |
|||
text-align: center; |
|||
line-height: 0.9rem; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue