<template> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="对象选择"> <el-cascader v-model="objArr" :options="objList" :props="{ checkStrictly: true, value: 'id', label: 'name' }" popper-class="cascaderParent" clearable></el-cascader> </el-form-item> <el-form-item label="时间维度"> <el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;"> <el-option v-for="item in timeType" :key="item.id" :label="item.name" :value="item.id" :clearable="false"> </el-option> </el-select> </el-form-item> <el-form-item label="时间"> <div v-show="queryParams.type === 1"> <el-date-picker v-model="monthValue" type="month" :picker-options="pickerOptions" @change="selectTime" :clearable="false" placeholder="选择月"> </el-date-picker> </div> <div v-show="queryParams.type === 2"> <el-date-picker v-model="weekValue" type="week" format="yyyy 第 WW 周" :picker-options="pickerOptionsWeek" @change="selectTime" :clearable="false" placeholder="选择周"> </el-date-picker> </div> <div v-show="queryParams.type === 3"> <el-date-picker v-model="dateValue" type="date" :picker-options="pickerOptions" @change="selectTime" :clearable="false" placeholder="选择日"> </el-date-picker> </div> </el-form-item> <el-form-item> <el-button type="primary" @click="search">查询</el-button> </el-form-item> <el-form-item> <span class="separateStyle"></span> </el-form-item> <el-form-item> <el-button type="primary" @click="exportData" plain>导出</el-button> </el-form-item> </el-form> </template> <script> import { getTree } from '@/api/base/factory' import moment from 'moment' export default { name: 'searchArea', data() { return { // 查询参数 queryParams: { type: 1, searchTime: null, objId: null }, timeType: [ {id: 1, name: '月'}, {id: 2, name: '周'}, {id: 3, name: '日'} ], monthValue: '', weekValue: '', dateValue: '', objArr: [], objList: [], pickerOptions: { disabledDate(date) { return date.getTime() > Date.now() } }, pickerOptionsWeek: { disabledDate(time) { let day = Date.now() let limitTime = moment(day).day(-1) return time.getTime() > new Date(limitTime).getTime() } } } }, mounted() { this.getObjTree() }, methods: { getObjTree() { getTree().then(res => { this.objList = res.data || [] }) }, selectTime() { switch (this.queryParams.type) { case 1: this.queryParams.searchTime = this.monthValue break; case 2: this.queryParams.searchTime = this.weekValue break; default: this.queryParams.searchTime = this.dateValue } }, // 查询 search() { if (!this.objArr.length === 0) { this.$modal.msgError('请选择对象') return false } else { this.queryParams.objId = this.objArr[this.objArr.length-1] } if (!this.queryParams.type) { this.$modal.msgError('请选择时间维度') return false } if (!this.queryParams.searchTime) { this.$modal.msgError('请选择时间') return false } switch (this.queryParams.type) { case 1: this.queryParams.searchTime = this.transformTime(this.monthValue) break; case 2: let value = moment(this.weekValue).day(6).format('YYYY-MM-DD') + ' 23:59:59' this.queryParams.searchTime = new Date(value).getTime() break; default: let value2 = moment(this.dateValue).format('YYYY-MM-DD') + ' 23:59:59' this.queryParams.searchTime = new Date(value2).getTime() } this.$emit('submit', this.queryParams) }, exportData() { this.$emit('exportD') }, transformTime(timeStamp) {// 本月最后一天 let year = moment(timeStamp).format('YYYY') let month = moment(timeStamp).format('MM') let newData = moment(new Date(year,month,0)).format('YYYY-MM-DD') + ' 23:59:59' let value = new Date(newData).getTime() return value } } } </script> <style> /* 级联选择器 */ .cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio { display: none; } </style> <style scoped> .separateStyle { display: inline-block; width: 1px; height: 24px; background: #E8E8E8; vertical-align: middle; } </style>