diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/components/EnforcementRecordList.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/components/EnforcementRecordList.vue index 40c3ed07..56091efa 100644 --- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/components/EnforcementRecordList.vue +++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/components/EnforcementRecordList.vue @@ -13,29 +13,40 @@
加载中... - @@ -56,31 +67,38 @@ const props = defineProps({ enterpriseNumber: { type: String, default: '' - }, - isRecordExpanded: { - type: Boolean, - default: false } }); -defineEmits(['toggle-expand']); - // ========== 数据 ========== const recordTab = ref(0); const cityRecords = ref([]); const loading = ref(false); +const isExpanded = ref(true); + +// ========== 分页 ========== +const pageNum = ref(1); +const pageSize = ref(10); +const hasMore = ref(true); +const loadingMore = ref(false); // ========== 获取执法记录数据 ========== -const fetchEnfRegistrationList = () => { +const fetchEnfRegistrationList = (isLoadMore = false) => { if (!props.enterpriseNumber) { cityRecords.value = []; return; } - loading.value = true; + if (isLoadMore) { + loadingMore.value = true; + } else { + loading.value = true; + } // warnType：1=全市，0=本单位（与后端 AppEnforcementRegistrationController 一致） const params = { warnType: recordTab.value === 0 ? 1 : 0, enterpriseNumber: props.enterpriseNumber, + pageNum: pageNum.value, + pageSize: pageSize.value, }; // 本单位：传执法单位 id，优先 bureauUnitId，否则用当前用户 deptId if (recordTab.value === 1) { @@ -90,27 +108,61 @@ const fetchEnfRegistrationList = () => { } } queryEnfRegistrationList(params, (res) => { - loading.value = false; + if (isLoadMore) { + loadingMore.value = false; + } else { + loading.value = false; + } if (res.code === 200) { const payload = res.data || {}; const rows = payload.list || payload.rows || (Array.isArray(payload) ? payload : []); - cityRecords.value = (Array.isArray(rows) ? rows : []).filter( + const pageData = (Array.isArray(rows) ? rows : []).filter( item => item !== null && item !== undefined ); + + if (isLoadMore) { + cityRecords.value = [...cityRecords.value, ...pageData]; + } else { + cityRecords.value = pageData; + } + + // 判断是否还有更多数据 + const total = payload.total || 0; + if (pageData.length === 0 || pageData.length < pageSize.value || (total > 0 && cityRecords.value.length >= total)) { + hasMore.value = false; + } else { + hasMore.value = true; + pageNum.value++; + } } else { - cityRecords.value = []; + if (!isLoadMore) { + cityRecords.value = []; + } console.error('获取执法记录失败:', res.msg); } }, (err) => { - loading.value = false; - cityRecords.value = []; + if (isLoadMore) { + loadingMore.value = false; + } else { + loading.value = false; + cityRecords.value = []; + } + hasMore.value = false; console.error('获取执法记录接口失败', err); }); }; +// ========== 加载更多 ========== +const loadMore = () => { + if (loadingMore.value || !hasMore.value) return; + fetchEnfRegistrationList(true); +}; + // ========== 切换执法记录 Tab ========== const handleRecordTabChange = (tabIndex) => { recordTab.value = tabIndex; + pageNum.value = 1; + hasMore.value = true; cityRecords.value = []; fetchEnfRegistrationList(); }; @@ -119,6 +171,8 @@ watch( () => props.enterpriseNumber, (val) => { if (val) { + pageNum.value = 1; + hasMore.value = true; fetchEnfRegistrationList(); } else { cityRecords.value = []; @@ -177,94 +231,137 @@ watch( } } - .record-card-item { + .record-card { background: #fff; border-radius: 8px; - padding: 0.3rem; margin: 10px; - margin-top: 20px; - box-shadow: 0 0px 8px #e5e5e5; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + overflow: hidden; } - .record-header { - margin-bottom: 0.3rem; + .record-card-header { + padding: 16px; - .record-date { - font-size: 14px; + .header-time { + font-size: 12px; color: #999; - margin-bottom: 0.15rem; + margin-bottom: 6px; } - .record-company { + .header-company { font-size: 16px; - color: #000; font-weight: 600; - padding: 10px 0px 10px 20px; - letter-spacing: 0.05rem; + color: #333; + margin-bottom: 6px; } - .record-count { - font-size: 14px; - color: #393939dd; - padding-left: 20px; - letter-spacing: 0.02rem; + .header-count { + font-size: 13px; + color: #666; } } - .record-timeline { - position: relative; - margin-left: 28px; - margin-top: 26px; + .record-card-body { + padding: 16px; + padding-bottom: 24px; } - .timeline-item { + .card-toggle-btn { display: flex; - align-items: flex-start; - padding: 0.1rem 0; + justify-content: center; + align-items: center; + padding: 8px 0 12px; + color: #999; + font-size: 18px; + cursor: pointer; + + &:active { + color: #666; + } + } + + .card-load-more { + display: flex; + justify-content: center; + align-items: center; + padding: 8px 0 16px; + font-size: 14px; + color: #1367fe; + cursor: pointer; + text-decoration: underline; + + &:active { + color: #0d5ce0; + } + + .loading-text { + color: #999; + text-decoration: none; + pointer-events: none; + } + } + + .card-no-more { + display: flex; + justify-content: center; + align-items: center; + padding: 8px 0 16px; + font-size: 12px; + color: #999; + } + + .record-timeline-item { position: relative; + padding-left: 24px; + padding-bottom: 16px; + + &:last-child { + padding-bottom: 0; + + .timeline-line { + display: none; + } + } .timeline-dot { - width: 10px; - height: 10px; + position: absolute; + left: 6px; + top: 6px; + width: 8px; + height: 8px; border-radius: 50%; background: #1367fe; - margin-right: 0.2rem; - flex-shrink: 0; - position: relative; - z-index: 1; - top: 4px; + } + + .timeline-line { + position: absolute; + left: 9px; + top: 14px; + bottom: 0; + width: 2px; + background: #e0e0e0; } .timeline-content { - flex: 1; - min-width: 0; + padding-left: 8px; - .timeline-time { - font-size: 16px; - color: #ccc; - font-weight: 400; + .record-time { + font-size: 14px; + color: #333; + margin-bottom: 4px; } - .timeline-unit { - font-size: 14px; - color: #999; - padding: 10px 0px; + .record-unit { + font-size: 12px; + color: #666; .unit-label { - color: #000; + color: #999; } } } } - .record-expand { - display: flex; - justify-content: center; - padding: 0.2rem 0; - color: #ccc; - font-size: 0.4rem; - } - .loading-state { display: flex; justify-content: center; @@ -274,6 +371,7 @@ watch( .record-list { height: calc(100vh - 150px); + overflow-y: auto; } } diff --git a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/query/enforcementQuery.vue b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/query/enforcementQuery.vue index c62fcf54..ad1e8626 100644 --- a/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/query/enforcementQuery.vue +++ b/zdxt-web-client/zdxt-efcode-enforcement-app/src/views/enforcement/query/enforcementQuery.vue @@ -24,40 +24,42 @@
- - - - - -
-
- {{ item.enforcementTime || item.createTime || '-' }} -
-
-
{{ item.enterpriseName || item.name || '-' }}
-
被执法次数：{{ item.enforceCount || item.count || 0 }}次
-
-
- -
- - + + + + + +
+
+ +
+
+
{{ group.enterpriseName || '-' }}
+
被执法次数：{{ group.records.length }}次
+
+ +
+
+
+
+
+
{{ item.createTime || item.enforcementTime || '-' }}
+
执法单位：{{ item.bureauDeptName || item.unitName || '-' }}
-
--> +
- +
+ + +
+ + {{ loading ? '加载中...' : '查看更多' }} + +
+
+ 没有更多了 +
\ No newline at end of file