173 lines
4.5 KiB
Vue
173 lines
4.5 KiB
Vue
<template>
|
|
<el-form :inline="true" class="demo-form-inline">
|
|
<span class="blue-block"></span>
|
|
<el-form-item label="对象选择">
|
|
<el-cascader
|
|
v-model="objArr"
|
|
:options="objList"
|
|
:props="{ checkStrictly: true, value: 'id', label: 'name' }"
|
|
popper-class="cascaderParent"
|
|
size="small"
|
|
clearable></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="时间维度">
|
|
<el-select v-model="queryParams.type" placeholder="请选择" style="width: 80px;" size="small">
|
|
<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"
|
|
size="small"
|
|
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"
|
|
size="small"
|
|
placeholder="选择月">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @click="search">查询</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<span class="separateStyle"></span>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" size="small" @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>
|
|
<style lang="scss" scoped>
|
|
.demo-form-inline {
|
|
.blue-block {
|
|
display: inline-block;
|
|
width: 4px;
|
|
height: 16px;
|
|
background-color: #0B58FF;
|
|
border-radius: 1px;
|
|
margin-right: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
</style> |