<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 || queryParams.type === 2"> <el-date-picker v-model="yearValue" type="year" :picker-options="pickerOptions" @change="selectTime" :clearable="false" placeholder="选择年"> </el-date-picker> </div> <div v-show="queryParams.type === 3"> <el-date-picker v-model="yearMonth" type="month" :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, // 1季度2月3日 searchTime: null, objId: null }, timeType: [ {id: 1, name: '季度'}, {id: 2, name: '月'}, {id: 3, name: '日'} ], yearValue: '', yearMonth: '', objArr: [], objList: [], pickerOptions: { disabledDate(date) { return date.getTime() > Date.now() } } } }, mounted() { this.getObjTree() }, methods: { getObjTree() { getTree().then(res => { this.objList = res.data || [] }) }, selectTime() { if (this.queryParams.type === 3) { this.queryParams.searchTime = this.yearMonth } else { this.queryParams.searchTime = this.yearValue } }, // 查询 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 } if (this.queryParams.type === 3) { this.queryParams.searchTime = this.transformTime(this.yearMonth) + '' } else { this.queryParams.searchTime = this.transformYear(this.yearValue) + '' } 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 }, transformYear(timeStamp) {// 本年最后一天 let year = moment(timeStamp).format('YYYY') let newData = year+'-12-31 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>