添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/components/seachHeader/index.vue

@@ -1,156 +1,181 @@
<template>
<div class="header">
  <el-form :inline="true" :model="seachData" class="demo-form-inline">
    <el-form-item label="事件编号">
      <el-input v-model="seachData.code" placeholder="事件编号"></el-input>
    </el-form-item>
    <el-form-item label="来源查询">
      <el-select v-model="seachData.resource" placeholder="请选择来源">
        <el-option
            v-for="item in eventSourceOptions"
            :key="item.label"
            :label="item.label"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="大类名称">
        <el-input v-model="seachData.categoryBig" placeholder="大类名称"></el-input>
    </el-form-item>
    <el-form-item label="小类名称">
        <el-input v-model="seachData.categorySmall" placeholder="小类名称"></el-input>
    </el-form-item>
    <el-form-item label="报警点位">
      <el-input v-model="seachData.site" placeholder="报警点位"></el-input>
    </el-form-item>
    <el-form-item label="所属区域">
      <el-cascader
          v-model="seachData.street"
          :options="communityOptions"
          :props="options"
          @change="handleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="报警时间">
      <el-date-picker
          v-model="seachData.alarmTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getUserList">查询</el-button>
      <el-button
          v-if="addData"
          class="addBtn button-addition"
          type="primary"
          @click="dialogCreate()"
      >添加</el-button
      >
    </el-form-item>
  </el-form>
<!--      <div>-->
<!--        <el-button type="primary" @click="getUserList">查询</el-button>-->
<!--        <el-button-->
<!--            class="addBtn button-addition"-->
<!--            type="primary"-->
<!--            @click="dialogCreate()"-->
<!--        >添加</el-button-->
<!--        >-->
<!--      </div>-->
</div>
    <div class="header">
        <el-form :inline="true" :model="seachData" class="demo-form-inline">
            <el-form-item label="事件编号">
                <el-input
                    v-model="seachData.code"
                    placeholder="事件编号"
                ></el-input>
            </el-form-item>
            <el-form-item label="来源查询">
                <el-select
                    v-model="seachData.resource"
                    placeholder="请选择来源"
                >
                    <el-option
                        v-for="item in eventSourceOptions"
                        :key="item.label"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="大类名称">
                <el-input
                    v-model="seachData.categoryBig"
                    placeholder="大类名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="小类名称">
                <el-input
                    v-model="seachData.categorySmall"
                    placeholder="小类名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="报警点位">
                <el-input
                    v-model="seachData.site"
                    placeholder="报警点位"
                ></el-input>
            </el-form-item>
            <el-form-item label="所属区域">
                <el-cascader
                    v-model="seachData.street"
                    :options="communityOptions"
                    :props="options"
                    clearable
                    @change="handleChange"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="报警时间">
                <el-date-picker
                    v-model="seachData.alarmTime"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getUserList">查询</el-button>
                <el-button
                    v-if="addData"
                    class="addBtn button-addition"
                    type="primary"
                    @click="dialogCreate()"
                    >添加</el-button
                >
              <el-button type="primary" @click="resetAll">重置</el-button>
            </el-form-item>
        </el-form>
        <!--      <div>-->
        <!--        <el-button type="primary" @click="getUserList">查询</el-button>-->
        <!--        <el-button-->
        <!--            class="addBtn button-addition"-->
        <!--            type="primary"-->
        <!--            @click="dialogCreate()"-->
        <!--        >添加</el-button-->
        <!--        >-->
        <!--      </div>-->
    </div>
</template>

<script>
import {RESOURCE_OPTIONS} from "@/utils/helper";
import { RESOURCE_OPTIONS } from "@/utils/helper";
import department from "@/api/system/department";

export default {
  data(){
    return{
      options:{
        label:'regionName',
        value:'id',
      },
      communityOptions:[],
      eventSourceOptions: RESOURCE_OPTIONS,
      seachData:{
    data() {
        return {
            options: {
                label: 'regionName',
                value: 'id',
            },
            communityOptions: [],
            eventSourceOptions: RESOURCE_OPTIONS,
            seachData: {

            },
            addData: false,
            alarmTime: '',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    created() {
    },
    mounted() {
        this.getPool()
        this.getCommunityOptions()
    },
    methods: {
      resetAll(){
        this.seachData = {}
        this.$emit('getUserList', { seachData: this.seachData });
      },
      addData:false,
      alarmTime:'',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]},
    }
  },
  created() {
  },
  mounted() {
    this.getPool()
    this.getCommunityOptions()
  },
  methods:{
    handleChange(value) {
      console.log(value);
    },
    // 获取社区和街道
    getCommunityOptions() {
      department.getDepartmentList()
          .then(res => {
            this.communityOptions = res;
          })
          .catch(err => this.$message.error(err))
    },
    getPool(){
      console.log(this.$route.name);
      let name = this.$route.name
      this.addData = name == 'pool';
    },
    onSubmit(){
        handleChange(value) {
            console.log(value);
        },
        // 获取社区和街道
        getCommunityOptions() {
            department.getDepartmentList()
                .then(res => {
                    this.communityOptions = res;
                })
                .catch(err => this.$message.error(err))
        },
        getPool() {
            console.log(this.$route.name);
            let name = this.$route.name
            this.addData = name == 'pool';
        },
        onSubmit() {

        },
        getUserList() {
            console.log(this.seachData)
            this.seachData.street = this.seachData.street ? this.seachData.street[this.seachData.street.length - 1] : null;
            this.$emit('getUserList', { seachData: this.seachData });
        },
        dialogCreate() {
            this.$emit('dialogCreatepro')
        },
    },
    getUserList(){
      this.seachData.street = this.seachData.street[this.seachData.street.length-1]
      this.$emit('getUserList', {seachData:this.seachData})
    },
    dialogCreate(){
      this.$emit('dialogCreatepro')
    },
  },
}
</script>

<style lang="scss" scoped>
  .header{
.header {
    line-height: normal;
  }
}
</style>