庄锐波
5 months ago
10 changed files with 715 additions and 234 deletions
@ -0,0 +1,226 @@ |
|||||
|
<template> |
||||
|
<div class="date-filter-picker"> |
||||
|
<!-- 日期快捷筛选按钮 --> |
||||
|
<div class="search-button-list"> |
||||
|
<van-button |
||||
|
plain |
||||
|
hairline |
||||
|
:class="dateType === null ? 'search-btn active' : 'search-btn'" |
||||
|
@click="handleDateType(null)" |
||||
|
round |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
> |
||||
|
全部 |
||||
|
</van-button> |
||||
|
<van-button |
||||
|
plain |
||||
|
hairline |
||||
|
:class="dateType === 1 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="handleDateType(1)" |
||||
|
round |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
> |
||||
|
本月 |
||||
|
</van-button> |
||||
|
<van-button |
||||
|
plain |
||||
|
hairline |
||||
|
:class="dateType === 2 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="handleDateType(2)" |
||||
|
round |
||||
|
type="primary" |
||||
|
size="mini" |
||||
|
> |
||||
|
本季 |
||||
|
</van-button> |
||||
|
<van-button |
||||
|
plain |
||||
|
hairline |
||||
|
:class="dateType === 3 ? 'search-btn active' : 'search-btn'" |
||||
|
@click="handleDateType(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> |
||||
|
|
||||
|
<!-- 指定月份显示 --> |
||||
|
<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> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="DateFilterPicker"> |
||||
|
import { ref, watch } from 'vue'; |
||||
|
|
||||
|
// Props |
||||
|
const props = defineProps({ |
||||
|
// 日期类型：null=全部，1=本月，2=本季，3=本年，9=筛选 |
||||
|
modelValue: { |
||||
|
type: Number, |
||||
|
default: null |
||||
|
}, |
||||
|
dateSearch: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
}, |
||||
|
dateShow: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// Emits |
||||
|
const emit = defineEmits(['update:modelValue', 'update:dateSearch', 'update:dateShow', 'change']); |
||||
|
|
||||
|
// 当前选中的日期类型 |
||||
|
const dateType = ref(props.modelValue); |
||||
|
|
||||
|
// 日期显示文本 |
||||
|
const dateSearchDisplay = ref(''); |
||||
|
|
||||
|
// 是否显示日期选择器 |
||||
|
const showDatePicker = ref(false); |
||||
|
|
||||
|
// 当前选中的日期 |
||||
|
const currentDate = ref(['2026', '01']); |
||||
|
|
||||
|
// 最小和最大日期 |
||||
|
const minDate = new Date(2020, 0, 1); |
||||
|
const maxDate = new Date(2030, 11, 31); |
||||
|
|
||||
|
// 监听外部值变化 |
||||
|
watch(() => props.modelValue, (newVal) => { |
||||
|
dateType.value = newVal; |
||||
|
}); |
||||
|
|
||||
|
watch(() => props.dateSearch, (newVal) => { |
||||
|
if (newVal) { |
||||
|
const parts = newVal.split('-'); |
||||
|
if (parts.length >= 2) { |
||||
|
currentDate.value = [parts[0], parts[1]]; |
||||
|
dateSearchDisplay.value = `${parts[0]}/${parts[1]}`; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// ========== 方法 ========== |
||||
|
|
||||
|
// 处理日期类型切换 |
||||
|
const handleDateType = (val) => { |
||||
|
dateType.value = val; |
||||
|
|
||||
|
const now = new Date(); |
||||
|
const year = now.getFullYear(); |
||||
|
const month = String(now.getMonth() + 1).padStart(2, '0'); |
||||
|
|
||||
|
let searchValue = null; |
||||
|
|
||||
|
if (val === null) { |
||||
|
// 全部 |
||||
|
searchValue = null; |
||||
|
} else if (val === 1) { |
||||
|
// 本月 - 传 month |
||||
|
searchValue = 'month'; |
||||
|
} else if (val === 2) { |
||||
|
// 本季 - 传 quarter |
||||
|
searchValue = 'quarter'; |
||||
|
} else if (val === 3) { |
||||
|
// 本年 - 传 year |
||||
|
searchValue = 'year'; |
||||
|
} |
||||
|
|
||||
|
emit('update:modelValue', val); |
||||
|
emit('update:dateSearch', searchValue); |
||||
|
emit('update:dateShow', false); |
||||
|
emit('change', { dateType: val, dateSearch: searchValue }); |
||||
|
}; |
||||
|
|
||||
|
// 打开日期选择器 |
||||
|
const openDatePicker = () => { |
||||
|
dateType.value = 9; |
||||
|
showDatePicker.value = true; |
||||
|
emit('update:modelValue', 9); |
||||
|
emit('update:dateShow', true); |
||||
|
}; |
||||
|
|
||||
|
// 日期选择确认 |
||||
|
const onDateConfirm = (value) => { |
||||
|
const year = value.selectedValues[0]; |
||||
|
const month = value.selectedValues[1]; |
||||
|
|
||||
|
dateSearchDisplay.value = `${year}/${month}`; |
||||
|
const searchValue = `${year}-${month}`; // 手动选择具体月份时传 yyyy-mm-dd 格式 |
||||
|
|
||||
|
emit('update:modelValue', 9); |
||||
|
emit('update:dateSearch', searchValue); |
||||
|
emit('update:dateShow', true); |
||||
|
emit('change', { dateType: 9, dateSearch: searchValue }); |
||||
|
|
||||
|
showDatePicker.value = false; |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.date-filter-picker { |
||||
|
/* ===== 搜索按钮行 ===== */ |
||||
|
.search-button-list { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
padding: 10px; |
||||
|
.search-btn { |
||||
|
width: 54px; |
||||
|
height: 24px; |
||||
|
background: #ebebeb; |
||||
|
border-color: #ebebeb; |
||||
|
color: #999; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
|
||||
|
.search-btn.active { |
||||
|
background-color: #d9e6fd; |
||||
|
border-color: #75a5fb; |
||||
|
color: #1367fe; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* ===== 日期显示 ===== */ |
||||
|
.search-date-display { |
||||
|
padding: 10px; |
||||
|
.date-label { |
||||
|
color: #c1bfbf; |
||||
|
font-size: 0.4rem; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,188 @@ |
|||||
|
<template> |
||||
|
<div class="history-activity-detail"> |
||||
|
<!-- 头部导航 --> |
||||
|
<!-- <van-nav-bar title="活动详情" left-arrow @click-left="goBack" /> --> |
||||
|
|
||||
|
<div class="detail-content"> |
||||
|
<!-- 企业信息 --> |
||||
|
<div class="custom-cell-group"> |
||||
|
<div class="activity-title">企业信息</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">企业名称</span> |
||||
|
<span class="custom-cell-value">{{ activityDetail.enterpriseName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">统一社会信用代码</span> |
||||
|
<span class="custom-cell-value">{{ activityDetail.enterpriseNumber || '-' }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="detail-content"> |
||||
|
<!-- 入企信息 --> |
||||
|
<div class="custom-cell-group"> |
||||
|
<div class="activity-title">入企信息</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">入企单位</span> |
||||
|
<span class="custom-cell-value">{{ activityDetail.bureauDeptName || '-' }}</span> |
||||
|
</div> |
||||
|
<div class="custom-cell"> |
||||
|
<div class="custom-cell-label"> |
||||
|
<span>入企人员</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<div class="custom-cell-address">{{ activityDetail.lawEnforcer }}{{ activityDetail.lawEnforcerId |
||||
|
}}</div> |
||||
|
<div class="custom-cell-address">{{ activityDetail.lawEnforcerOther }}{{ |
||||
|
activityDetail.lawEnforcerIdOther }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">入企事由</span> |
||||
|
<span class="custom-cell-value">{{ activityDetail.lawEnforcementTypeText }}</span> |
||||
|
</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">入企事项</span> |
||||
|
<span class="custom-cell-value">{{ activityDetail.LawEnforcementItemText }}</span> |
||||
|
</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">入企时间</span> |
||||
|
<span class="custom-cell-value">{{ formattedDate(activityDetail.enforcementTime) }}</span> |
||||
|
</div> |
||||
|
<div class="custom-cell"> |
||||
|
<span class="custom-cell-label">原因</span> |
||||
|
<span class="custom-cell-value">{{ activityDetail.reason }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div><!-- 附件 --> |
||||
|
<div class="detail-content"> |
||||
|
<div class="custom-cell-group" |
||||
|
v-if="activityDetail.params && activityDetail.params.fileList && activityDetail.params.fileList.length > 0"> |
||||
|
<div class="activity-title">附件</div> |
||||
|
<div class="attachments-list"> |
||||
|
<div v-for="(file, index) in activityDetail.params.fileList" :key="index" class="attachment-item"> |
||||
|
<img v-if="file.uploadPath" :src="baseUrl + file.uploadPath" class="attachment-image" /> |
||||
|
<van-icon v-else name="paper" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!-- 备注 --> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup name="HistoryActivityDetail"> |
||||
|
import { ref, onMounted } from 'vue'; |
||||
|
import { useRouter, useRoute } from 'vue-router'; |
||||
|
import { formattedDate } from '@/util/util.js'; |
||||
|
import { queryNonRegistrationDetail } from '@/api/enforcement/index'; |
||||
|
import { baseUrl } from '@/config/env'; |
||||
|
|
||||
|
const router = useRouter(); |
||||
|
const route = useRoute(); |
||||
|
|
||||
|
// 活动详情数据 |
||||
|
const activityDetail = ref({}); |
||||
|
|
||||
|
// 返回上一页 |
||||
|
const goBack = () => { |
||||
|
router.back(); |
||||
|
}; |
||||
|
// 获取详情数据 |
||||
|
const fetchDetail = (id) => { |
||||
|
queryNonRegistrationDetail({ id }, (res) => { |
||||
|
if (res.code === 200) { |
||||
|
activityDetail.value = res.data || {}; |
||||
|
} else { |
||||
|
console.error('获取活动详情失败:', res.msg); |
||||
|
} |
||||
|
}, (err) => { |
||||
|
console.error('获取活动详情接口失败', err); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const id = route.query.id; |
||||
|
if (id) { |
||||
|
fetchDetail(id); |
||||
|
} |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less" scoped> |
||||
|
.history-activity-detail { |
||||
|
min-height: 100vh; |
||||
|
background-color: #ebf3fb; |
||||
|
box-sizing: border-box; |
||||
|
padding-top: 12px; |
||||
|
|
||||
|
.detail-content { |
||||
|
margin: 0px 15px 15px 15px; |
||||
|
|
||||
|
.activity-title { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
padding: 16px; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.custom-cell-group { |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.custom-cell { |
||||
|
display: flex; |
||||
|
padding: 16px; |
||||
|
border-bottom: 1px solid #f5f5f5; |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.custom-cell-label { |
||||
|
width: 68px; |
||||
|
flex-shrink: 0; |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
margin-right: 26px; |
||||
|
} |
||||
|
|
||||
|
.custom-cell-value { |
||||
|
flex: 1; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
word-break: break-all; |
||||
|
} |
||||
|
|
||||
|
.custom-cell-address { |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
padding-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
:deep(.van-cell-group--inset) { |
||||
|
margin: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.attachments-list { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
.attachment-item { |
||||
|
padding: 10px; |
||||
|
.attachment-image { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 4px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue