|
|
|
@ -1,7 +1,7 @@ |
|
|
|
<template> |
|
|
|
<div class="plan-mine"> |
|
|
|
<!-- 状态过滤栏 --> |
|
|
|
<div class="filter-bar"> |
|
|
|
<!-- <div class="filter-bar"> |
|
|
|
<div |
|
|
|
v-for="opt in filterOptions" |
|
|
|
:key="opt.label" |
|
|
|
@ -11,34 +11,11 @@ |
|
|
|
> |
|
|
|
{{ opt.label }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<!-- 搜索触发栏 --> |
|
|
|
<div class="search-trigger" @click="showSearchPopup = true"> |
|
|
|
<van-icon name="search" size="16" color="#666" /> |
|
|
|
<span class="search-trigger-text">{{ searchSummary || '点击筛选查询' }}</span> |
|
|
|
<van-icon v-if="hasSearchCondition" name="clear" size="14" color="#999" @click.stop="onResetSearch" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 排序栏 --> |
|
|
|
<div class="sort-bar"> |
|
|
|
<div |
|
|
|
class="sort-item" |
|
|
|
:class="{ active: sortField === 'createTime' }" |
|
|
|
@click="onToggleSort('createTime')" |
|
|
|
> |
|
|
|
<span>创建时间</span> |
|
|
|
<van-icon v-if="sortField === 'createTime'" :name="sortOrder === 'desc' ? 'arrow-down' : 'arrow-up'" size="12" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="sort-item" |
|
|
|
:class="{ active: sortField === 'planDate' }" |
|
|
|
@click="onToggleSort('planDate')" |
|
|
|
> |
|
|
|
<span>执行日期</span> |
|
|
|
<van-icon v-if="sortField === 'planDate'" :name="sortOrder === 'desc' ? 'arrow-down' : 'arrow-up'" size="12" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 统一搜索和时间筛选组件 --> |
|
|
|
<SearchFilterBar :search-value="searchText" :date-type="dateType" :date-search="dateSearch" |
|
|
|
@search="onSearch" @clear="onClear" @date-change="onDateChange" /> |
|
|
|
|
|
|
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> |
|
|
|
<van-list |
|
|
|
@ -58,12 +35,12 @@ |
|
|
|
}" |
|
|
|
@click="onToggleExpand(item)" |
|
|
|
> |
|
|
|
<div class="card-header"> |
|
|
|
<!-- <div class="card-header"> |
|
|
|
<div class="card-type">{{ item.isUnion === 1 ? '联合执法' : '非联合执法' }} / {{ item.isPublic === 1 ? '公开' : '非公开' }}</div> |
|
|
|
<div class="status blue" style="display: none"> |
|
|
|
{{ getStatusText(item.reserveStatus) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
|
|
|
|
<div class="plan-title">{{ item.enforceContent }}</div> |
|
|
|
|
|
|
|
@ -158,58 +135,15 @@ |
|
|
|
<van-empty v-if="!loading && planList.length === 0" description="暂无计划" /> |
|
|
|
</van-list> |
|
|
|
</van-pull-refresh> |
|
|
|
|
|
|
|
<!-- 搜索弹窗 --> |
|
|
|
<van-popup v-model:show="showSearchPopup" position="bottom" round :style="{ maxHeight: '70%' }"> |
|
|
|
<div class="search-popup"> |
|
|
|
<div class="search-popup-title">筛选查询</div> |
|
|
|
<van-field |
|
|
|
v-model="tempSearchForm.planDate" |
|
|
|
label="执法日期" |
|
|
|
placeholder="请选择" |
|
|
|
readonly |
|
|
|
is-link |
|
|
|
@click="showSearchDate = true" |
|
|
|
> |
|
|
|
<template #right-icon> |
|
|
|
<van-icon v-if="tempSearchForm.planDate" name="clear" @click.stop="tempSearchForm.planDate = ''" /> |
|
|
|
</template> |
|
|
|
</van-field> |
|
|
|
<van-field |
|
|
|
v-model="tempSearchForm.enterpriseName" |
|
|
|
label="企业名称" |
|
|
|
placeholder="输入企业名称" |
|
|
|
clearable |
|
|
|
/> |
|
|
|
<van-field |
|
|
|
v-model="tempSearchForm.enforceContent" |
|
|
|
label="执法事项" |
|
|
|
placeholder="输入执法事项" |
|
|
|
clearable |
|
|
|
/> |
|
|
|
<div class="search-popup-actions"> |
|
|
|
<van-button plain type="default" size="small" @click="onResetSearch">重置</van-button> |
|
|
|
<van-button type="primary" size="small" @click="onConfirmSearch">查询</van-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</van-popup> |
|
|
|
|
|
|
|
<!-- 日期选择器 --> |
|
|
|
<van-popup v-model:show="showSearchDate" position="bottom" round :style="{ zIndex: 3000 }"> |
|
|
|
<van-date-picker |
|
|
|
v-model="searchDateValue" |
|
|
|
title="选择执法日期" |
|
|
|
@confirm="onSearchDateConfirm" |
|
|
|
@cancel="showSearchDate = false" |
|
|
|
/> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup name="cpPlanMine"> |
|
|
|
import { ref, onMounted } from 'vue'; |
|
|
|
import { showConfirmDialog, showToast } from 'vant'; |
|
|
|
import { useRouter } from 'vue-router'; |
|
|
|
import { getPlanList, deletePlan } from '@/api/enforcement/plan'; |
|
|
|
import SearchFilterBar from '@/components/common/SearchFilterBar.vue'; |
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
|
|
|
|
@ -227,75 +161,28 @@ const onFilterChange = (val) => { |
|
|
|
doSearch(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 排序相关 |
|
|
|
const sortField = ref('createTime'); // createTime | planDate |
|
|
|
const sortOrder = ref('desc'); // desc | asc |
|
|
|
|
|
|
|
const onToggleSort = (field) => { |
|
|
|
if (sortField.value === field) { |
|
|
|
// 同一字段切换升降序 |
|
|
|
sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc'; |
|
|
|
} else { |
|
|
|
// 切换字段，默认降序 |
|
|
|
sortField.value = field; |
|
|
|
sortOrder.value = 'desc'; |
|
|
|
// 搜索和日期筛选相关 |
|
|
|
const searchText = ref(''); |
|
|
|
const dateType = ref(null); |
|
|
|
const dateSearch = ref(null); |
|
|
|
|
|
|
|
const onSearch = ({ searchValue } = {}) => { |
|
|
|
if (searchValue !== undefined) { |
|
|
|
searchText.value = searchValue; |
|
|
|
} |
|
|
|
doSearch(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 搜索相关 |
|
|
|
const searchForm = ref({ |
|
|
|
planDate: '', |
|
|
|
enterpriseName: '', |
|
|
|
enforceContent: '', |
|
|
|
}); |
|
|
|
const tempSearchForm = ref({ |
|
|
|
planDate: '', |
|
|
|
enterpriseName: '', |
|
|
|
enforceContent: '', |
|
|
|
}); |
|
|
|
const showSearchPopup = ref(false); |
|
|
|
const showSearchDate = ref(false); |
|
|
|
const searchDateValue = ref([ |
|
|
|
String(new Date().getFullYear()), |
|
|
|
String(new Date().getMonth() + 1).padStart(2, '0'), |
|
|
|
String(new Date().getDate()).padStart(2, '0'), |
|
|
|
]); |
|
|
|
|
|
|
|
// 是否有搜索条件 |
|
|
|
const hasSearchCondition = computed(() => { |
|
|
|
const f = searchForm.value; |
|
|
|
return !!(f.planDate || f.enterpriseName || f.enforceContent); |
|
|
|
}); |
|
|
|
|
|
|
|
// 搜索摘要 |
|
|
|
const searchSummary = computed(() => { |
|
|
|
const f = searchForm.value; |
|
|
|
const parts = []; |
|
|
|
if (f.planDate) parts.push(f.planDate); |
|
|
|
if (f.enterpriseName) parts.push(f.enterpriseName); |
|
|
|
if (f.enforceContent) parts.push(f.enforceContent); |
|
|
|
return parts.join(' | '); |
|
|
|
}); |
|
|
|
|
|
|
|
// 日期确认 |
|
|
|
const onSearchDateConfirm = ({ selectedValues }) => { |
|
|
|
tempSearchForm.value.planDate = selectedValues.join('-'); |
|
|
|
showSearchDate.value = false; |
|
|
|
}; |
|
|
|
|
|
|
|
// 确认搜索 |
|
|
|
const onConfirmSearch = () => { |
|
|
|
searchForm.value = { ...tempSearchForm.value }; |
|
|
|
showSearchPopup.value = false; |
|
|
|
const onClear = () => { |
|
|
|
searchText.value = ''; |
|
|
|
dateType.value = null; |
|
|
|
dateSearch.value = null; |
|
|
|
doSearch(); |
|
|
|
}; |
|
|
|
|
|
|
|
// 重置搜索 |
|
|
|
const onResetSearch = () => { |
|
|
|
tempSearchForm.value = { planDate: '', enterpriseName: '', enforceContent: '' }; |
|
|
|
searchForm.value = { planDate: '', enterpriseName: '', enforceContent: '' }; |
|
|
|
showSearchPopup.value = false; |
|
|
|
const onDateChange = ({ dateType: dt, dateSearch: ds }) => { |
|
|
|
dateType.value = dt; |
|
|
|
dateSearch.value = ds; |
|
|
|
doSearch(); |
|
|
|
}; |
|
|
|
|
|
|
|
@ -313,7 +200,7 @@ const finished = ref(false); |
|
|
|
const refreshing = ref(false); |
|
|
|
const pageNum = ref(1); |
|
|
|
const pageSize = 10; |
|
|
|
const expandedId = ref(null); // 当前展开的卡片ID |
|
|
|
const expandedId = ref(null); |
|
|
|
|
|
|
|
// 切换展开/收起 |
|
|
|
const onToggleExpand = (item) => { |
|
|
|
@ -368,12 +255,9 @@ const fetchList = () => { |
|
|
|
loading.value = true; |
|
|
|
const params = { pageNum: pageNum.value, pageSize }; |
|
|
|
// 携带搜索条件 |
|
|
|
if (searchForm.value.planDate) params.planDate = searchForm.value.planDate; |
|
|
|
if (searchForm.value.enterpriseName) params.enterpriseName = searchForm.value.enterpriseName; |
|
|
|
if (searchForm.value.enforceContent) params.enforceContent = searchForm.value.enforceContent; |
|
|
|
// 携带排序条件 |
|
|
|
params.orderByColumn = sortField.value; |
|
|
|
params.isAsc = sortOrder.value; |
|
|
|
if (searchText.value) params.searchValue = searchText.value; |
|
|
|
// 携带日期筛选条件 |
|
|
|
if (dateSearch.value) params.planDate = dateSearch.value; |
|
|
|
// 携带状态过滤 |
|
|
|
if (filterStatus.value) { |
|
|
|
params['params[reserveStatusList]'] = filterStatus.value; |
|
|
|
@ -428,15 +312,19 @@ const onDeletePlan = (item) => { |
|
|
|
}); |
|
|
|
}).catch(() => {}); |
|
|
|
}; |
|
|
|
|
|
|
|
// 页面挂载加载数据 |
|
|
|
onMounted(() => { |
|
|
|
loading.value = true; |
|
|
|
fetchList(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.plan-mine { |
|
|
|
height: 100%; |
|
|
|
overflow-y: auto; |
|
|
|
padding: 12px; |
|
|
|
padding-top: 0; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-bar { |
|
|
|
@ -464,91 +352,11 @@ const onDeletePlan = (item) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.search-trigger { |
|
|
|
margin-top: 8px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 8px; |
|
|
|
background: #fff; |
|
|
|
border-radius: 20px; |
|
|
|
padding: 10px 14px; |
|
|
|
margin-bottom: 8px; |
|
|
|
box-shadow: 0 2px 8px rgba(44, 116, 190, 0.06); |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
.search-trigger-text { |
|
|
|
flex: 1; |
|
|
|
font-size: 13px; |
|
|
|
color: #999; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.sort-bar { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 16px; |
|
|
|
margin-bottom: 12px; |
|
|
|
padding: 0 4px; |
|
|
|
|
|
|
|
.sort-item { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 3px; |
|
|
|
font-size: 13px; |
|
|
|
color: #999; |
|
|
|
cursor: pointer; |
|
|
|
padding: 4px 10px; |
|
|
|
border-radius: 14px; |
|
|
|
transition: all 0.2s; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #2382cf; |
|
|
|
font-weight: 500; |
|
|
|
background: rgba(35, 130, 207, 0.08); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.search-popup { |
|
|
|
padding: 16px; |
|
|
|
|
|
|
|
.search-popup-title { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
text-align: center; |
|
|
|
margin-bottom: 16px; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-field) { |
|
|
|
padding: 10px 0; |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-field__label) { |
|
|
|
width: 65px; |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
|
|
|
|
.search-popup-actions { |
|
|
|
display: flex; |
|
|
|
gap: 12px; |
|
|
|
margin-top: 20px; |
|
|
|
padding: 0 10px; |
|
|
|
|
|
|
|
.van-button { |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.plan-list { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 14px; |
|
|
|
padding:10px 12px; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
/* 卡片通用 */ |
|
|
|
@ -556,6 +364,7 @@ const onDeletePlan = (item) => { |
|
|
|
border-radius: 14px; |
|
|
|
padding: 16px; |
|
|
|
overflow: hidden; |
|
|
|
margin-bottom: 14px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-header { |
|
|
|
|
