jeecg-boot相关

yarn add @jeecg/antd-online-mini

前端超长字段处理

  import JEllipsis from '@/components/jeecg/JEllipsis'

 components: {
      RecordModelModal,
      JEllipsis   // 新增
    },

data () {
  let ellipsis = (v, l = 20) => (<j-ellipsis value={v} length={l}/>)
 customRender: (t) => ellipsis(t)

启动redis:

redis-server.exe redis.windows.conf 

联动下拉列表：

 <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="ID" >
              <j-dict-select-tag :value="value" @change="onChange" placeholder="请选择ID" v-model="queryParam.xueyuanId" dictCode="qe_dept_xueyan,depart_name,id"/>
            </a-form-item>
          </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
                      <a-form-item label="ID">
                        <j-dict-select-tag placeholder="请选择ID" v-model="queryParam.xibuId" 
                        :dictCode="'qe_dept_xibu,depart_name,id ,parent_id=\''+queryParam.xueyuanId+'\''"/>
                        <!-- \''+model.teamCode+'\' -->
                      </a-form-item>
                    </a-col>

 antd中table根据不同状态显示不同按钮：(applystatus为状态字段名)

<span slot="action" slot-scope="{applystatus}">
              <template v-if="applystatus == '审批中'">
                <a>详情</ a>
                <a-divider type="vertical" />
                <a>撤回</ a>
              </template>
              <template v-else-if="applystatus == '草稿'">
                <a>编辑</ a>
                <a-divider type="vertical" />
                <a>删除</ a>
              </template>
              <template v-else-if="applystatus == '未通过'">
                <a>详情</ a>
              </template>
              
            </span>

自增序号：

v-for="(item, index) in arr"

{{index + 1}}

 取缓存中用户登录id

import store from '@/store'
let usercode = store.getters.userInfo.id

 实现打印功能：

（1）需要打印的元素添加id

id="printMe"

 （2）打印按钮

<a-button v-print="'#printMe'">打印</a-button>

 如何获取当前日期：

var date = new Date();

var time=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();//表示当前日期

 下拉列表的三级联动

<a-col :span="12" >
      <a-form-model-item label="入库部门" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="storOrg">
                <j-dict-select-tag type="list" v-model="model.storOrg" dictCode="impo_org,org_name,id" placeholder="请选择入库部门" />
              </a-form-model-item>
            </a-col>
           <a-col :span="12" >
             <a-form-model-item label="库房选择" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invenId">
               <j-dict-select-tag type="list" v-model="model.invenId" :dictCode="'org_stor,stor_name,id,org_id=\''+model.storOrg+'\''" placeholder="请选择库房选择" />
             </a-form-model-item>
           </a-col>
          <a-col :span="12" >
            <a-form-model-item label="库房管理员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invenAdmin">
              <j-dict-select-tag type="list" v-model="model.invenAdmin" :dictCode="'inven_admin,admin_name,id ,inven_id=\''+model.invenId+'\''" placeholder="请选择库房管理员" />
            </a-form-model-item>
          </a-col>

 jeecg-boot调用后台传递的接口

import { getAction, postAction } from '../../../api/manage'

getAction(this.url.list,{id:record.id}).then((res) => {
          if(res.success){
           this.$message.success('成功')
            this.loadData()
          }else{
            console.log("失败")
          }
        })

j-modal确认按钮(动态控制)

:ok-button-props="{ class: { 'jee-hidden': jeedisable } }"

jeedisable:false,

this.jeedisable = true

实现动态进度条

(1)

<a-progress :percent="progress" stroke-color="#b5002a" status="active"/>

 (2) data return

progress: 0,

(3) methods

//this.visible=true
  this.progress = 0;
  const timer = setInterval(() => {
   if (this.progress < 100) {
         this.progress += 20;
     } else {
         clearInterval(timer);
         //this.visible=false;
    }
  }, 5000);

 

报错解决方法：

1.Syntax Error: SassError: expected selector.报错解决方法

将 /deep/ 替换成 ::v-deep 即可

2.Node Sass version 7.0.1 is incompatible with ^4.0.0.

npm uninstall node-sass 

npm i -D sass