|
|
@@ -0,0 +1,261 @@
|
|
|
+<script setup>
|
|
|
+import { reactive, ref } from 'vue'
|
|
|
+import { useWindowSize } from '@vueuse/core'
|
|
|
+
|
|
|
+const { width, height } = useWindowSize()
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ filter: {
|
|
|
+ type:Object
|
|
|
+ }
|
|
|
+})
|
|
|
+const emit = defineEmits(['change','close'])
|
|
|
+
|
|
|
+const timeTypeOpt=[
|
|
|
+ {
|
|
|
+ text:'发布时间',
|
|
|
+ value:'publish_time'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'审批时间',
|
|
|
+ value:'approve_time'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'更新时间',
|
|
|
+ value:'modify_time'
|
|
|
+ },
|
|
|
+]
|
|
|
+const reportStatusOpt=[
|
|
|
+ {
|
|
|
+ text:'已推送消息',
|
|
|
+ value:2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'未推送消息',
|
|
|
+ value:1
|
|
|
+ }
|
|
|
+]
|
|
|
+const publishStatusOpt=[
|
|
|
+ {
|
|
|
+ text:'未发布',
|
|
|
+ value:1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'已发布',
|
|
|
+ value:2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'待提交',
|
|
|
+ value:3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'待审批',
|
|
|
+ value:4
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'已驳回',
|
|
|
+ value:5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text:'已通过',
|
|
|
+ value:6
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+const filterState = reactive({
|
|
|
+ publishStatus: props.filter.publishStatus||'',
|
|
|
+ msgIsSend: props.filter.MsgIsSend||'',
|
|
|
+ timeType: props.filter.timeType||'',
|
|
|
+ startDate: props.filter.StartDate,
|
|
|
+ endDate:props.filter.EndDate,
|
|
|
+ date:[]
|
|
|
+})
|
|
|
+
|
|
|
+function handleSave() {
|
|
|
+ emit('change',filterState)
|
|
|
+}
|
|
|
+function handleClose() {
|
|
|
+ emit('close')
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+function getName(key) {
|
|
|
+ const nameMap = {
|
|
|
+ 'publishStatus': publishStatusOpt.find(_ => _.value===filterState.publishStatus),
|
|
|
+ 'timeType': timeTypeOpt.find(_ => _.value===filterState.timeType),
|
|
|
+ 'msgIsSend': reportStatusOpt.find(_ => _.value===filterState.msgIsSend)
|
|
|
+ }
|
|
|
+
|
|
|
+ let title = nameMap[key]?.text
|
|
|
+ return title
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const showPicker = ref(false)
|
|
|
+const selectKey = ref('')
|
|
|
+const selectTimeType = ref([])
|
|
|
+const selectStatus = ref([])
|
|
|
+const selectMsgSend = ref([])
|
|
|
+const selectDate = ref([])
|
|
|
+function handleOpenPicker(key) {
|
|
|
+ selectKey.value = key;
|
|
|
+ selectTimeType.value = [filterState[key]]
|
|
|
+ selectStatus.value = [filterState[key]]
|
|
|
+ selectMsgSend.value = [filterState[key]]
|
|
|
+ showPicker.value = true;
|
|
|
+
|
|
|
+ console.log( selectTimeType.value)
|
|
|
+}
|
|
|
+function handleConfirmTimeType() {
|
|
|
+ filterState.timeType=selectTimeType.value[0]
|
|
|
+ showPicker.value=false
|
|
|
+}
|
|
|
+function handleConfirmStatus(e) {
|
|
|
+ filterState.publishStatus=selectStatus.value[0]
|
|
|
+ showPicker.value=false
|
|
|
+}
|
|
|
+function handleConfirmMsgSend() {
|
|
|
+ console.log(selectMsgSend.value)
|
|
|
+ filterState.msgIsSend=selectMsgSend.value[0]
|
|
|
+ showPicker.value=false
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const showCalendar = ref(false)
|
|
|
+function handleOpenDatePicker() {
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="filter-cont">
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ value-class="cell-con"
|
|
|
+ required
|
|
|
+ title="报告状态"
|
|
|
+ :value="getName('publishStatus')"
|
|
|
+ is-link
|
|
|
+ @click="handleOpenPicker('publishStatus')"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ value-class="cell-con"
|
|
|
+ required
|
|
|
+ title="筛选时间类型"
|
|
|
+ :value="getName('timeType')"
|
|
|
+ is-link
|
|
|
+ @click="handleOpenPicker('timeType')"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ value-class="cell-con"
|
|
|
+ required
|
|
|
+ title="推送消息状态"
|
|
|
+ :value="getName('msgIsSend')"
|
|
|
+ is-link
|
|
|
+ @click="handleOpenPicker('msgIsSend')"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group>
|
|
|
+ <van-cell
|
|
|
+ value-class="cell-con"
|
|
|
+ required
|
|
|
+ title="更新时间"
|
|
|
+ :value="filterState.startDate"
|
|
|
+ is-link
|
|
|
+ @click="handleOpenDatePicker"
|
|
|
+ />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="bot-btns">
|
|
|
+ <van-button class="bot-btn" type="default" @click="handleClose"
|
|
|
+ >取消</van-button
|
|
|
+ >
|
|
|
+ <van-button class="bot-btn" type="primary" @click="handleSave"
|
|
|
+ >确认</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 日期筛选 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showCalendar"
|
|
|
+ :position="width>650?'center':'bottom'"
|
|
|
+ :style="width>650?{ width: '400px'}:''"
|
|
|
+ round
|
|
|
+ >
|
|
|
+ <van-calendar
|
|
|
+ ref="calendarIns"
|
|
|
+ :poppable="false"
|
|
|
+ type="range"
|
|
|
+ allow-same-day
|
|
|
+ :min-date="calendarMinDate"
|
|
|
+ @confirm="handleCalendarChange"
|
|
|
+ :style="{ height: '500px' }"
|
|
|
+ class="calendar-box"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div style="position: relative;">
|
|
|
+ <span style="color:#666;position: absolute;left:16px" @click="handleResetCalendar">重置</span>
|
|
|
+ <span>日期选择</span>
|
|
|
+ </div>
|
|
|
+ <div class="time-type-box">
|
|
|
+ <span @click="dateType=1" :class="['item',dateType===1?'active':'']">发布时间</span>
|
|
|
+ <span @click="dateType=2" :class="['item',dateType===2?'active':'']">更新时间</span>
|
|
|
+ <span @click="dateType=3" :class="['item',dateType===3?'active':'']">审批时间</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-calendar>
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 下拉选择 -->
|
|
|
+ <van-popup
|
|
|
+ v-model:show="showPicker"
|
|
|
+ :position="width>650?'center':'bottom'"
|
|
|
+ :style="width>650?{ width: '400px'}:''"
|
|
|
+ round
|
|
|
+ >
|
|
|
+ <van-picker
|
|
|
+ v-if="selectKey==='timeType'"
|
|
|
+ v-model="selectTimeType"
|
|
|
+ :columns="timeTypeOpt"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="handleConfirmTimeType"
|
|
|
+ />
|
|
|
+ <van-picker
|
|
|
+ v-else-if="selectKey==='publishStatus'"
|
|
|
+ v-model="selectStatus"
|
|
|
+ :columns="publishStatusOpt"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="handleConfirmStatus"
|
|
|
+ />
|
|
|
+ <van-picker
|
|
|
+ v-else-if="selectKey==='msgIsSend'"
|
|
|
+ v-model="selectMsgSend"
|
|
|
+ :columns="reportStatusOpt"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="handleConfirmMsgSend"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+<style scoped lang="scss">
|
|
|
+.filter-cont {
|
|
|
+ .bot-btns{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 48px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ .bot-btn{
|
|
|
+ width: 315px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
