若依vue相关

增加时间条件的判断

// 如果时间字段是Date类型，如果拿传入的时间类型参数与空字符串''进行对比判断则会引发异常. 所以在上面的代码中去掉空字符串判断, 只保留非空判断就正常了
<if test="tm != null">
   and date_format(tm,'%y%m%d') = date_format(#{tm},'%y%m%d')
</if>
// 如果时间字段是String类型，需要增加非空字符串
<if test="tm != null and tm != ''">
   and date_format(tm,'%y%m%d') = date_format(#{tm},'%y%m%d')
</if>

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

<sql id="queryDay-condition">
    <!-- 开始时间检索 -->
    <if test="params.beginTime != null and params.beginTime != ''">
        AND date_format(addtime,'%y%m%d') &gt;= date_format(#{params.beginTime},'%y%m%d')
    </if>
    <!-- 结束时间检索 -->
    <if test="params.endTime != null and params.endTime != ''">
        AND date_format(addtime,'%y%m%d') &lt;= date_format(#{params.endTime},'%y%m%d')
    </if>
</sql>

前端通用方法

单选

<el-radio-group v-model="form.used">
    <el-radio
      v-for="dict in usedOptions"
      :key="dict.dictValue"
      :label="parseInt(dict.dictValue)"
    >{{dict.dictLabel}}</el-radio>
</el-radio-group>

字典值下拉数据

<el-select v-model="queryParams.charge" placeholder="请选择状态" clearable size="small">
  <el-option
    v-for="dict in chargeOptions"
    :key="dict.dictValue"
    :label="dict.dictLabel"
    :value="dict.dictValue"
  />
</el-select>

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

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"属性
<el-table-column label="金币库存" align="center" prop="kucun" :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" 参数

<right-toolbar :showSearch.sync="showSearch" :columns="columns" @queryTable="getList">
</right-toolbar>

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

<el-table-column label="渠道" align="center" prop="flavor" 
:formatter="flavorFormat" 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.查询条件中增加

<el-form-item label="时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
</el-form-item>

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
<el-date-picker clearable size="small"
    v-model="logQueryParam.end"
    :picker-options="pickerDisabled"
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="选择时间">
</el-date-picker>

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