庄锐波
7 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> |
</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> |
</style> |
||||
|
|||||
Loading…
Reference in new issue