若依vue相关

增加时间条件的判断

// 如果时间字段是Date类型，如果拿传入的时间类型参数与空字符串''进行对比判断则会引发异常. 所以在上面的代码中去掉空字符串判断, 只保留非空判断就正常了

   and date_format(tm,'%y%m%d') = date_format(#{tm},'%y%m%d')

// 如果时间字段是String类型，需要增加非空字符串

   and date_format(tm,'%y%m%d') = date_format(#{tm},'%y%m%d')

增加时间段的判断 xml文件中

    
    
        AND date_format(addtime,'%y%m%d') >= date_format(#{params.beginTime},'%y%m%d')
    
    
    
        AND date_format(addtime,'%y%m%d') <= date_format(#{params.endTime},'%y%m%d')
    

前端通用方法

单选

    {{dict.dictLabel}}

字典值下拉数据

引入全局变量。不用频繁的操作数据库

1.新建一个global.js文件。
const commonStatus = [{ dictValue: '1', dictLabel: '是' }, { dictValue: '0', dictLabel: '否' }]
export default {
  commonStatus
}
2.页面引入
import global_ from '@/utils/global'
3.引用字典值
this.onceOptions = global_.commonStatus
4.字典值翻译
onceFormat(row, column) {
    return this.selectDictLabel(this.onceOptions, row.once)
},

增加计算属性

1.table列中增加 :formatter="coinFormat"属性

2.增加计算方法
coinFormat(row, column) {
   // 计算逻辑
   return parseFloat(row.coinTotalInPalyer+row.dbTotalInPalyer).toLocaleString()
},

第三方登陆接口

1.后端增加放行路由 SecurityConfig
 .antMatchers("/api/**").anonymous()
2.前端增加白名单 permission.js
const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/api']

新增路由，标签页显示

    1.  在需要跳转的地方增加  this.$router.push('/user/detail')
    2. router/index.js中增加  路由规则
    {
    path: '/user',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'detail',
        // 组件的地址
        component: (resolve) => require(['@/views/buyu/cfg/activities/index'], resolve),
        name: 'UserDetail',
        meta: { title: '用户详情' }
      }
    ]
    }

复制按钮

1.引入import ClipboardJS from 'clipboard'
2.按钮增加点击事件@click="execCopy()"
3.增加方法
execCopy() {
  var clipboard = new ClipboardJS('#copy')
  clipboard.on('success', e => {
    this.$notify({
      title: '成功',
      message: 'UUID复制成功',
      type: 'success'
    })
    clipboard.destroy()
  })
  clipboard.on('error', e => {
    this.$message.error('复制失败')
    clipboard.destroy()
  })
}

操作菜单隐藏列

1.data中新增初始化需要进行操作隐藏的列数据

columns: [
     { key: 0, label: `渠道`, visible: true },
     ...
 ],

2.工具栏增加:columns="columns" 参数

3.列数据中增加 v-if="columns[0].visible"

增加服务器排序

1.data中新增参数

// 排序字段
orderByColumn: null,
// 排序方向
isAsc: null,

2.table中增加方法

@sort-change="changeTableSort"

3.列数据中增加参数 sortable="custom"

sortable="custom"

4.method中增加方法

// 排序
changeTableSort(column){
 this.queryParams.orderByColumn = column.prop;
 this.queryParams.isAsc = (column.order === 'ascending' ? 'asc' : 'desc');
 // 执行方法
 this.getList();
}

5.产生的请求url

http://localhost/dev-api/buyu/user/list?pageNum=1&pageSize=15&orderByColumn=coin&isAsc=asc

刷新table页面（执行某一方法后需要刷新下tab页面）

reload(){
  // 需要刷新的tab的路径
  const currentView = '/mail/cfg'
  this.$store.dispatch('tagsView/delCachedView', currentView).then(() => {
    this.$nextTick(() => {
      this.$router.replace({
        path: '/redirect' + currentView
      })
    })
  })
}

增加时间段筛选

1.查询条件中增加

2.data中定义

dateRange: [],

3.method中增加 this.addDateRange(this.queryParams, this.dateRange) 作为查询条件

1.执行list查询方法
list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
    this.payDayLogList = response.rows;
    this.total = response.total;
    this.loading = false;
   }
);

时间选择禁用今天之后

1.查询条件中增加pickerDisabled



2.data中增加
pickerDisabled: {
  disabledDate: (time) => {
    return time.getTime() > new Date() * 1 + 600 * 1000;
  }
}