vue-element-admin时间区间查询el-date-picker

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (260)

Mysql (59)

DedeCms (33)

jQuery (74)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

vue-element-admin el-date-picker

打开边栏(ESC) 关闭边栏(ESC)

vue-element-admin时间区间查询el-date-picker

from clipboard

1,日期区间组件

<el-date-picker
        class="filter-item"
        v-model="listQuery.dateRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="timestamp"
      >
      </el-date-picker>

要带上日期格式化value-format="timestamp"

不然，会发现得到的日期是这样的

Tue Jun 06 2023 00:00:00 GMT+0800 (中国标准时间)

2，data()数据

data() {
    return {
      tableKey: 0,
      list: null, // 数据列表
      total: 0, // 数据条数
      listLoading: true, // 获取数据加载中
      listQuery: {
        page: 1,
        limit: 20,
        keyword: undefined,
        ip: undefined,
        dateRange:[], // 时间选择器区间
      }, // 请求参数
      ids: [], // 全选数据
    }
  },

3，请求数据方法

// 获取列表
    getList() {
      this.listLoading = true
      var query = JSON.parse(JSON.stringify(this.listQuery)) //    深拷贝这个listQuery,listQuery和query是两个对象
      // var query = this.listQuery // listQuery和query是同一个对象，修改query里的某个属性， listQuery也会同步修改，为了避免这个 要对listquery进行深拷贝，   JSON.parse(JSON.stringify(就是一个深拷贝的办法
      query.dateRange = query.dateRange ? query.dateRange.join(',') : ''
      reqList(query).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },

4，axios方法

// 获取列表
export function reqList(query) {
  return request({
    url: '/admin/log_staff/list',
    method: 'get',
    params: query
  })
}

5,后台数据接口(thinkphp)：需要考虑到vue的时间戳是毫秒级的，需要除以1000才是秒级时间戳

/**
   * 列表
   */
  public function list(){
    $keyword = input('keyword');
    $ip = input('ip');
    $dateRange = input('dateRange');
    
    $where = [];
    if($keyword != '')$where[] = ['s.staffAccount','like','%'.$keyword.'%'];
    if($ip != '')$where[] = ['l.loginIp','like','%'.$ip.'%'];
    if ($dateRange != "") {
      $time = explode(",", $dateRange);
      $start = $time[0] / 1000; // vue传递的是毫秒级时间戳，转换成秒时间戳
      $end = strtotime(date("Y-m-d 23:59:59", $time[1] / 1000));
      $where[] = ['l.loginTime','egt',$start];
		  $where[] = ['l.loginTime','elt',$end];
    }
    
    $list = $this->alias('l')
			->join('__STAFF__ s','s.staffId=l.staffId','left')
			->field('l.*,s.staffAccount')
			->where($where)
			->order('l.logId desc')
      ->select()
      ->toArray();
    $total = $this->alias('l')
      ->join('__STAFF__ s','s.staffId=l.staffId','left')  
      ->where($where)
      ->count();
    return ZHTReturn('获取列表信息成功',200,['list' => $list, 'total' => $total]);
  }

6，关于深拷贝的介绍https://blog.csdn.net/weixin_57983561/article/details/117198822

赏