Jeecg-Boot使用总结——个人开发踩坑

1,125 阅读1分钟

Jeecg-Boot使用总结——个人开发踩坑

前端获取当前用户信息

`import store from '@/store/'`
`const userId = store.getters.userInfo.id`

表单验证获取不到input绑定的值

this.$set(this.model, 'name', this.name)

获取当前年月日

 const nowDate = new Date()
 const date = {
   year: nowDate.getFullYear(),
   month: nowDate.getMonth() + 1,
   date: nowDate.getDate()
 }
 const newmonth = date.month >= 10 ? date.month : '0' + date.month
 const day = date.date >= 10 ? date.date : '0' + date.date
 this.updateTime = date.year + '-' + newmonth + '-' + day
     

选择器基本使用

//针对字典的使用,目前提供了一个标签实现下拉和radio组件
//下面 dictCode = "sys_user,realname,id,sex = '2'"表示从sys_user表中查询数据且只查询sex='2'的数据

      <j-dict-select-tag placeholder="请选择订单类型" v-model="model.orderType" dictCode="sys_user,realname,id,sex = '2'" />



//j-search-select-tag 可做带搜索的下拉 dict表名,显示字段名,存储字段名拼接而成的字符串,如果提供了dictOptions参数 则此参数可不填

       <j-search-select-tag
               v-model="model.customerId"
               placeholder="请选择客户"
               dict="ep_base_company,name,id,del_flag=0 and sstatus=0"
             >
        </j-search-select-tag>
        
//根据传入id筛选
:dictCode="'yd_contract_detail,pibu_item_name,id,del_flag = \'' + 0 + '\' and contract_id = \'' + model.contractId + '\''"

        
//此方法可以获取下拉name的值 model里面赋值id,这样传给后端id name都有了
         @getLabel="
              (value) => {
                model.warehouseName = value
              }
            "
//或者使用id查询   
         <j-search-select-tag
               v-model="model.customerId"
               placeholder="请选择客户"
               dict="ep_base_company,name,id,del_flag=0 and sstatus=0"
               ref="customerId"
               @change="getcustomerName"
             >
         </j-search-select-tag>
         
          getcustomerName(value) {
              if (this.$refs.customerId) {
                for (var i = 0; i < this.$refs.customerId.dictOptions.length; i++) {
                  if (value == this.$refs.customerId.dictOptions[i].value) {
                    this.model.customerName = this.$refs.customerId.dictOptions[i].text
                  }
                }
              }
            },

表格内容 超出时隐藏,点击就显示起泡框

data() {
   let ellipsis = (v, l = 10) => <j-ellipsis value={v} length={l} /> //申明ellipsis
   return {
     description: 'home页面',
     // 表头
     columns: [
       {
         title: '原料',
         align: 'center',
         dataIndex: 'ayarn',
         customRender: t => ellipsis(t) //添加customRender属性
       },
     ]
   }
 },

主子表子表下拉框、时间框弹框被遮挡优化

           //给table加个唯一标识id 'keytabel' 
           //需要在调用组件的时候给组件加个属性 getPopupContainer(下拉) || getCalendarContainer(时间)
           
           <a-table id="keytabel" ref="table" size="small" bordered row-key="key" :scroll="{ y:220 }" :columns="financeColumns" :dataSource="finance" :loading="loading" :rowSelection="{ onChange: onSelectChange }" class="j-table-force-nowrap">
              <span slot="store" slot-scope="text, record">
                <j-dict-select-tag :getPopupContainer="getModalAsContainer"   placeholder="请选择额外类型" v-model="record.extraType" dictCode="extra_type" />
              </span>
            </a-table>
            //方法
             methods: {
                    getModalAsContainer(){
                            return document.getElementById('keytabel')
                       },
             },
            
   

JEditableTable使用默认的条件进行查询

           
//JEditableTable靠织入JeecgListMixin来实现查询,created的时候会优先执行JVxeTableModelMixin的
//created,所以会优先load一次data。
//好在它有个开关可以关闭它自动加载数据。
//在我们自己的查询vue处理上,在data里加入disableMixinCreated:true并且在created里面自己手动加载数据即可。

created() {
  this.getSuperFieldList()
  this.$nextTick(()=>{
    if (this.type=='purchase'){
      this.$set(this.queryParam,'approved',"1")
    }
    this.loadData();
    //初始化字典配置 在自己页面定义
    this.initDictConfig();
  })
}

            
   

a-table数据根据返回值0,1判断

           
  {
    title: '是否含税',
    align: 'center',
    dataIndex: 'tax',
    customRender: function (text) {
      return text == 0 ? '是' : '否'
    },
  },

            
   

JModal确定按钮连续点击 多次提交

           
 
handleOk(e) {
       //修复连续点击确定Bug--------------- 20230427
       e.target.setAttribute("disabled","true");
       e.target.innerHTML="处理中";
       setTimeout(function (){
         e.target.removeAttribute("disabled");
         e.target.innerHTML="确定";
       },2000);
       //修复连续点击确定Bug--------------- 20230427 end
       if (this.okClose) {
         this.close()
       }
      },