jeecg问题汇总

相关链接

1. 组件样式Ant Design of Vue
2. Jeecg-Boot 技术文档V2.0

1. jeecg打印自动生成的sql

2. 导出数据，把小数转化为百分数

2.1 低版本（V2.1.3）

使用高级字段转换用法

• exportConvert：在导出的时候需要替换值则配置该值为true，同时增加一个方法，方法名为原get方法名前加convert。

	/**月度排单占比*/
	@Excel(name = "月度排单占比", width = 15, exportConvert=true)
    private java.lang.Double rankMonthPer;
	/**
	 * 转换值示例： 将小数转化成百分比输出
	 * @return
	 */
	public String convertgetRankMonthPer(){
		DecimalFormat df = new DecimalFormat("0.00%");
		return df.format(this.rankMonthPer);
	}

2.2 高版本

使用Excel注解里的numFormat

3. 排序（多字段升降序排序）

3.1 低版本（V2.1.3）

3.1.1 单字段排序

导出时不需要做特殊处理，导出的数据也是排序后的数据

3.1.2 多字段排序

目前该版本不支持多字段排序，所以需要后端查询时把排序条件加入进去

QueryWrapper<Interrankinfo> queryWrapper = QueryGenerator.initQueryWrapper(interrankinfo, req.getParameterMap());
queryWrapper.orderByDesc("trading_month");
queryWrapper.orderByAsc("rank_rangking");

导出时需要重写exportXls方法，把排序的条件加入进去。

3.2 高版本（version 2.4.6+）

可通过配置直接实现，不需要特殊处理。

4. a-table更改某行数据的样式

增加:customRow属性

5. 导出时列隐藏

• 低版本：只需要在entity对象里将相应字段的@Excel注解去掉就行
• 高版本：@Excel注解里加上下面的属性
  

6. vue中get请求解决传输数据是数组格式问题

• 问题
  如果请求参数是数组arr=[1,2,3]，get请求不对数组做任何处理，则传递给后端的接口是"url地址?arr[]=1&arr[]=2&arr[]=3"，接口会报错，因为识别不了“[]”这个符号。具体可以看 vue中get请求解决传输数据是数组格式问题。
• 解决方案
  如果使用qs，需要改源码不方便，可以将数组转化成用逗号隔开的字符串，这样后端就可以接收到，并在动态生成查询语句时，会解析成数组，用in进行查询。

7. 组件

7.1 下拉多选，加上全选和清空按钮

<template>
  <a-card>
    <a-form :form="form">
      <a-form-item label="员工">
        <a-select
          v-decorator="['instCode']"
          :loading="selectOptionsLoading"
          placeholder="这里是展示一键全选/清空的demo"
          option-filter-prop="children"
          mode="multiple"
          @change="changeInstCodeSelect"
          :maxTagCount="3"
        >
          <div slot="dropdownRender" slot-scope="menu">
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0;" />
            <div style="padding: 4px 8px; cursor: pointer;" @mousedown="e => e.preventDefault()">
              <a-button type="link" @click="selectAll">全选</a-button>
              <a-button type="link" @click="clearAll">清空</a-button>
            </div>
          </div>
          <a-select-option v-for="item in selectOptions" :value="item.mockKey" :key="item.mockKey">
            {{ item.mockLabel }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script>
  export default {
    name: 'BaseForm',
    components: {
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        selectOptions: [],
        selectOptionsLoading: false
      }
    },
    mounted () {
      this.getMemberList()
    },
    methods: {
      // 获取数据源，根据实际自己改
      getMemberList () {
        this.selectOptionsLoading = false
        this.selectOptions = [{mockKey:1, mockLabel:"1"},{mockKey:2, mockLabel:"2"}]
      },
      // 全选 -- 把数据源赋给select绑定的值
      selectAll () {
        const arr = [];
        (this.selectOptions).forEach(item => {
          arr.push(item.mockKey)
        })
        this.form.setFieldsValue({
          'instCode': arr
        })
        // 需要获取所有机构编码的值，否则调用全选后再查询时，查询的还是上次的机构编码
        //this.queryParam.instCode =  arr.join(',');
      },
      // 清空 -- 清空select绑定的值
      clearAll () {
        this.form.setFieldsValue({
          'instCode': []
        });
        // 需要清空查询条件的值，否则调用清空后再查询时，查询的还是上次的机构编码
        //this.queryParam.instCode =  [];
      },

      // 改变选择的机构时，调用的方法，将选择的多个机构编码用逗号隔开成字符串，并将结果传回后台
      changeInstCodeSelect(value) {
        //this.queryParam.instCode =  value.join(',');
      }
    }
  }
</script>

7.2 月份范围组件

<template>
  <a-card>
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form>
        <a-row :gutter="24">
          <a-col :md="12" :sm="16">
            <a-form-item label="统计月份">
              <div>
                <a-range-picker
                  :placeholder="['开始月份', '结束月份']"
                  format="YYYY-MM"
                  :value="value"
                  :mode="mode"
                  @panelChange="handleChange"
                  @change="handleChange"
                />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
  </a-card>
</template>
<script>
  // 引入日期组件
  import JDate from '@/components/jeecg/JDate.vue'

  export default {
    name: 'BaseForm',
    components: {
      JDate
    },
    data () {
      return {
        mode: ['month', 'month'],
        value: []
      }
    },
    methods: {
      // 月份值发生改变时，调用该方法，将开始月份和结束月份结果赋给查询参数
      handleChange(value) {
        this.value = value;
        this.month_begin = this.onBizMonChange(value[0]);
        this.month_end = this.onBizMonChange(value[1]);
        this.mode = ['month','month'];
      },

      // 修改日期结果格式，否则结果为时间
      onBizMonChange(dateObj) {
        return dateObj == null ? null : dateObj.format('YYYYMM');
      },
    }
  }
</script>