有关筛选条件的问题

简介: 有关筛选条件的问题
今天实现一个有关根据时间范围进行筛选的组件
效果如下:

话不多说 直接开摆
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item>
        <el-select @change="changeChooseType" class="selSty" v-model="chooseType" placeholder="请选择"
          style="width: 110px;">
          <el-option v-for="item in dateTypeselect" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker class="selSty1" v-model="createTimes" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
          @change="radioDateInit()">
        </el-date-picker>
        <el-radio-group style="margin-left: 15px;" v-model="radioDate" @change="nowDay(radioDate)">
          <el-radio-button label="0" border>今天</el-radio-button>
          <el-radio-button label="3" border>近三天</el-radio-button>
          <el-radio-button label="30" border>本月</el-radio-button>
          <el-radio-button label="60" border>上月</el-radio-button>
          <el-radio-button label="365" border>本年</el-radio-button>
        </el-radio-group>
      </el-form-item>
      </el-form>
return {
        chooseType: "创建时间",
        //时间下拉菜单
        dateTypeselect: [{
          value: "创建时间",
          label: "创建时间",
        }, ],
        //单选框时间 默认选择3天
        radioDate: 3,
        createTimes:[],
}
methods:{
    //初始化时间
      initCreateDate() {
        this.radioDate = 3;
        let nowDate = new Date().getTime();
        this.createTimes = [
          this.timestampToTime(nowDate - 2 * 1000 * 24 * 60 * 60) + " 00:00:00",
          this.timestampToTime(nowDate) + " 23:59:59",
        ];
        if (null != this.createTimes && this.createTimes.length > 0) {
          this.queryParams.createTimeStart = this.createTimes[0];
          this.queryParams.createTimesEnd = this.createTimes[1];
        }
        this.handleQuery()
      },
      //时间解析
      Time(now) {
        let year = new Date(now).getFullYear();
        let month = new Date(now).getMonth() + 1;
        let date = new Date(now).getDate();
        if (month < 10) month = "0" + month;
        if (date < 10) date = "0" + date;
        return year + "-" + month + "-" + date;
      },
      //获得某月的天数:
      getMonthDays: function(myMonth) {
        let monthStartDate = new Date(new Date().getFullYear(), myMonth, 1);
        let monthEndDate = new Date(new Date().getFullYear(), myMonth + 1, 1);
        let days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
        return days;
      },
      //时间转换
      timestampToTime(time) {
        // 时间戳为10位需*1000,时间戳为13位的话不需乘1000
        var date = new Date(time);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        let h = date.getHours();
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes();
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds();
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d;
      },
      nowDay(val) {
        this.isCustomerChooseTime = false;
        let nowDate = new Date().getTime();
        let y = new Date().getFullYear();
        if (val == 0) {
          this.createTimes = [
            this.timestampToTime(nowDate) + " 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        } else if (val == 3) {
          this.createTimes = [
            this.timestampToTime(nowDate - 2 * 1000 * 24 * 60 * 60) + " 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        } else if (val == 30) {
          let month = new Date().getMonth() + 1;
          month = month < 10 ? "0" + month : month;
          this.createTimes = [
            y + "-" + month + "-01 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        } else if (val == 60) {
          let startTime = this.Time(
            new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
          );
          let endTime = this.Time(
            new Date(
              new Date().getFullYear(),
              new Date().getMonth() - 1,
              this.getMonthDays(new Date().getMonth() - 1)
            )
          );
          this.createTimes = [startTime + " 00:00:00", endTime + " 23:59:59"];
        } else if (val == 365) {
          this.createTimes = [
            y + "-01-01 00:00:00",
            this.timestampToTime(nowDate) + " 23:59:59",
          ];
        }
        this.queryParams.createTimeStart = this.createTimes[0]
        this.queryParams.createTimesEnd = this.createTimes[1]
        this.handleQuery();
      },
      changeChooseType(val) {
        if (val == "创建时间") {
          this.chooseType == "创建时间";
          this.queryParams.createTimeStart = this.createTimes[0];
          this.queryParams.createTimesEnd = this.createTimes[1];
          this.queryParams.invoiceTimeStart = "";
          this.queryParams.invoiceTimeEnd = "";
          this.handleQuery();
        }
      },
      //时间选中状态更改
      radioDateInit() {
        this.radioDate = "";
        this.isCustomerChooseTime = true;
        if (null != this.createTimes && this.createTimes.length > 0) {
          this.queryParams.createTimeStart = this.createTimes[0];
          this.queryParams.createTimesEnd = this.createTimes[1];
        }
        this.handleQuery();
      },
//在使用的时候,需要在查询列表的方法里赋值对应的参数,或者自己后端接口实体新增createTimeStart、createTimesEnd用于接收参数;
//我这里是使用map进行接收:
this.queryParams.params["createTimeStart"] = this.queryParams.createTimeStart
this.queryParams.params["createTimesEnd"] = this.queryParams.createTimesEnd
}
相关文章
|
缓存 Rust
第9期 新一代快速打包工具 Turbopack
第9期 新一代快速打包工具 Turbopack
567 0
|
NoSQL Ubuntu Redis
Ubuntu开机自启redis
本文介绍了如何在Ubuntu系统中通过创建systemd服务单元文件、重新加载systemd配置、启用服务和启动服务的步骤来实现Redis的开机自启动。
624 1
|
机器学习/深度学习 自然语言处理
谷歌发布时序预测基础模型TimesFM
【2月更文挑战第27天】谷歌发布时序预测基础模型TimesFM
990 3
谷歌发布时序预测基础模型TimesFM
|
存储 编解码 网络协议
Android平台GB28181执法记录仪硬件选型和国标技术实现探讨
前几年,我们在做Android平台GB28181设备接入模块的时候,第一个使用场景想到的就是用在公检法应急指挥等场景下的执法记录仪,本篇blog,我们主要围绕Android平台GB28181执法记录仪的硬件选型、设备接入、音视频流配置、流媒体传输、存储和管理、控制与控制中心等方面进行设计,探讨下Android平台GB28181设备接入模块在执法记录仪行业的应用。
418 1
Android平台GB28181执法记录仪硬件选型和国标技术实现探讨
|
关系型数据库 MySQL 数据库
MySQL 复制A的表结构和数据到表B
在MySQL中复制表A至表B可通过不同方法实现。一种是先用`CREATE TABLE B LIKE A;`复制结构,再用`INSERT INTO B SELECT * FROM A;`填充数据。另一种更简便的方法是直接使用`CREATE TABLE B AS SELECT * FROM A;`一次性完成结构和数据的复制。还有一种高级方法是通过`SHOW CREATE TABLE A;`获取表A的创建语句,手动调整后创建表B,如有需要再用`INSERT INTO ... SELECT`复制数据。注意权限问题、跨数据库复制时需指定数据库名,以及大表复制时可能影响性能。
962 1
|
监控 关系型数据库 MySQL
zabbix 简单介绍 及部署
zabbix 简单介绍 及部署
|
存储 安全 网络安全
浅述金融行业的双模核心
【2月更文挑战第30天】当前金融行业IT架构由双模核心(稳态+敏态)和云组成。稳态核心专注于稳定业务,敏态核心服务于敏捷需求,受益于互联网和开源技术。
|
Web App开发 Windows
FFmpeg开发笔记(十五)详解MediaMTX的推拉流
MediaMTX是开源轻量级流媒体服务器,提供RTSP, RTMP, HLS, WebRTC和SRT服务。启动后,它在不同端口监听。通过FFmpeg的推拉流测试,证明了MediaMTX成功实现HLS流媒体转发,但HLS播放兼容性问题可能因缺少音频流导致。推流地址为rtsp://127.0.0.1:8554/stream,RTMP地址为rtmp://127.0.0.1:1935/stream,HLS播放地址为http://127.0.0.1:8888/stream(Chrome)和http://127.0.0.1:8888/stream/index.m3u8(其他播放器可能不支持)。
2645 2
FFmpeg开发笔记(十五)详解MediaMTX的推拉流
|
Prometheus 监控 Cloud Native
Java 服务挂掉,服务器异常宕机问题排查
Java 服务挂掉,服务器异常宕机问题排查
2822 1
|
机器学习/深度学习 搜索推荐
RankNet
RankNet 是一种用于学习排名的机器学习模型,由 Microsoft Research Asia 在 2005 年提出。
483 2

热门文章

最新文章