| | |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-date-picker |
| | | popper-class="custom-date-picker" |
| | | class="ztzf-date-picker" |
| | | v-model="dateRange" |
| | | type="daterange" |
| | |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | value-format="YYYY-MM-DD" |
| | | @change="handleSearch" |
| | | @change="handleDateChange" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | |
| | | </template> |
| | | <script setup> |
| | | import { pxToRem } from '@/utils/rem' |
| | | import { ElMessage } from 'element-plus' |
| | | import { deptsByAreaCode, getDockInfo } from '@/api/home/common'; |
| | | import TaskAlgorithmBusiness from './components/TaskAlgorithmBusiness.vue'; |
| | | import dayjs from 'dayjs'; |
| | |
| | | |
| | | let timeClick = (item,index) => { |
| | | checked.value = item; |
| | | // model.value = dateRanges[item]; |
| | | // dateRange.value = dateRanges[item]; |
| | | dateRange.value = []; |
| | | // emit('change', dateRanges[item],timeListEnum[index]); |
| | | searchForm.date_enum = timeListEnum[index]; |
| | | handleSearch(); |
| | |
| | | // 搜索 |
| | | const handleSearch = () => { |
| | | if (!dateRange.value) { dateRange.value = []; } |
| | | if (dateRange.value && dateRange.value.length) { |
| | | // 有值时 清除 日 本周 本月 本年状态 |
| | | checked.value = ''; |
| | | } |
| | | // 提交至store |
| | | let params = { |
| | | ...searchForm, |
| | |
| | | } |
| | | store.commit('setTaskSearchParams', params); |
| | | emit('search', params); |
| | | }; |
| | | const handleDateChange = (val) => { |
| | | if (val && val.length === 2) { |
| | | const start = dayjs(val[0]) |
| | | const end = dayjs(val[1]) |
| | | const diff = end.diff(start, 'day') |
| | | |
| | | if (diff > 30) { |
| | | ElMessage.warning('日期范围不能超过30天') |
| | | dateRange.value = [] |
| | | return |
| | | } |
| | | } |
| | | handleSearch() |
| | | }; |
| | | // 重置 |
| | | const handleReset = () => { |
| | |
| | | handleSearch(); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | /* 修改日期单元格背景色 */ |
| | | .custom-date-picker .el-picker-panel__body { |
| | | background: #012350 !important; |
| | | color: #fff !important; |
| | | } |
| | | </style> |
| | | <style lang="scss" scoped> |
| | | .search-box-test { |
| | | transition: all 0.3s; |