forked from drone/command-center-dashboard

罗广辉
2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7
src/views/TaskManage/SearchBox.vue
@@ -17,6 +17,7 @@
        </el-form-item>
        <el-form-item>
          <el-date-picker
          popper-class="custom-date-picker"
                  class="ztzf-date-picker"
                  v-model="dateRange"
                  type="daterange"
@@ -24,7 +25,7 @@
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  @change="handleSearch"
                  @change="handleDateChange"
               />
        </el-form-item>
        <el-form-item>
@@ -68,6 +69,7 @@
</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';
@@ -167,7 +169,8 @@
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();
@@ -175,6 +178,10 @@
// 搜索
const handleSearch = () => {
  if (!dateRange.value) { dateRange.value = []; }
  if (dateRange.value && dateRange.value.length) {
      // 有值时 清除 日 本周 本月 本年状态
      checked.value = '';
  }
  // 提交至store
  let params = {
    ...searchForm,
@@ -183,6 +190,20 @@
  }
  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 = () => {
@@ -208,7 +229,13 @@
  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;