elunez / eladmin-mp

eladmin mybatis-plus版本:项目基于 Spring Boot 2.6.4 、MyBatis-Plus、Spring Security、Redis、Vue的前后端分离的后台管理系统, 权限控制采用 RBAC,支持数据字典与数据权限管理,支持一键生成前后端代码,支持动态路由
https://eladmin.vip/demo
Apache License 2.0
470 stars 179 forks source link

设置默认查询条件反应卡顿,无法再次手动更改 #17

Closed snowdreams1006 closed 1 year ago

snowdreams1006 commented 1 year ago

例如系统工具>本地存储管理,设置默认查询条件会导致el-input无法再次输入,<date-range-picker延迟选择等问题,请问应该如何设置默认值?

问题截图:

chrome-capture-2023-7-3

复现流程:

  1. 找到 src\views\tools\storage\local\index.vue文件中的搜索框区域,如下:
<div v-if="crud.props.searchToggle">
  <!-- 搜索 -->
  <el-input v-model="query.blurry" clearable size="small" placeholder="输入内容模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
  <date-range-picker v-model="query.createTime" class="date-item" />
  <rrOperation />
</div>
  1. CRUD.HOOK.beforeRefresh钩子函数中设置默认查询条件,如下:

注意: 如果在created生命周期内不仅不会立即生效也还是会出现同样问题;

  // 钩子:在获取表格数据之前执行,false 则代表不获取数据
  [CRUD.HOOK.beforeRefresh]() {
    // 默认今天
    if (!this.query.createTime) {
      let startTime = new Date(new Date().setHours(0, 0, 0))
      let endTime = new Date(new Date().setHours(23, 59, 59))
      startTime = startTime.strftime('%Y-%m-%d %H:%M:%S')
      endTime = endTime.strftime('%Y-%m-%d %H:%M:%S')
      this.query.createTime = [startTime, endTime]
    }
    if (!this.query.blurry) {
      this.query.blurry = 'bestsellers'
    }
    return true
  },
  1. 搜索框无法清除内容也不能输入内容,日期选择框选择后没有反应,再次点击查询才出现;

chrome-capture-2023-7-3

RandolphChin commented 1 year ago

设置默认查询条件,应该在封装的 CRUD 方法中参数 query 对象中设置

cruds() {
    return CRUD(
         // 其他参数
         { query: { createTime: defaultCreateTime ,  blurry:  'bestsellers' } 
    })
}

// createTime 的默认值你可以在一个js 中写一个方法返回这个默认创建时间,再引入这个js文件
// 示例
 function defaultCreateTime () {
      let startTime = new Date(new Date().setHours(0, 0, 0))
      let endTime = new Date(new Date().setHours(23, 59, 59))
      startTime = startTime.strftime('%Y-%m-%d %H:%M:%S')
      endTime = endTime.strftime('%Y-%m-%d %H:%M:%S')
      const arr = [startTime, endTime]
      return arr
}

export default defaultCreateTime 

这样就能解决你 “搜索框无法清除内容也不能输入内容,日期选择框选择后没有反应,再次点击查询才出现”

snowdreams1006 commented 1 year ago

设置默认查询条件,应该在封装的 CRUD 方法中参数 query 对象中设置

cruds() {
    return CRUD(
         // 其他参数
         { query: { createTime: defaultCreateTime ,  blurry:  'bestsellers' } 
    })
}

// createTime 的默认值你可以在一个js 中写一个方法返回这个默认创建时间,再引入这个js文件
// 示例
 function defaultCreateTime () {
      let startTime = new Date(new Date().setHours(0, 0, 0))
      let endTime = new Date(new Date().setHours(23, 59, 59))
      startTime = startTime.strftime('%Y-%m-%d %H:%M:%S')
      endTime = endTime.strftime('%Y-%m-%d %H:%M:%S')
      const arr = [startTime, endTime]
      return arr
}

export default defaultCreateTime 

这样就能解决你 “搜索框无法清除内容也不能输入内容,日期选择框选择后没有反应,再次点击查询才出现”

感谢,亲测可用,是一种解决办法!