JeecgBoot前端随笔

本文最后更新于：2 分钟前

本笔记是本人在开发中遇到的问题，由于此前未接触过，故此记录，方便以后的自己查看

相关方法解读

1
2
//初始化字典配置 在自己页面定义
this.initDictConfig();
1
2
// 加载页面参数
this.initPageParams()
1
2
//页面刷新
this.loadData();

页面跳转(路由)

示例：

定义一个事件，点击触发方法

1
2
3
<a-menu-item>
    <a @click='handleClassInstance(record)'>课堂实例</a>
</a-menu-item>

下方定义相对应的方法

1
2
3
4
5
6
// 跳转 添加 课堂实例
handleClassInstance(row) {
    console.log('row.id >>', row.id)
    // 写上想要跳转的地址
    this.$router.push({ path: '/course-management/case-study', query: { id: row.id } })
},

具体实现过程：

List页面

跳转到对应的页面之后,以新增方法为例

替换掉系统自带的新增按钮

1
<a-button @click='handleAdd({courseId:filters.courseId})' v-if='filters.courseId!=null' type='primary' icon='plus'>新增</a-button>

下方 methods 中加入以下代码

1
2
3
4
5
6
7
initPageParams() {
    if (this.$route.query && this.$route.query.id) {
        const id = this.$route.query.id

        Object.assign(this.filters, { courseId: id })
    }
},

From页面

在表单页加入一个 input输入框，用来接受传过来的 课程id，设置 隐藏

1
<a-input-number v-model='model.courseId' hidden />

在下方JS代码中，Props代码块里定义一个 courseId

1
2
3
4
courseId: {
    type: String,
    default: null
}

在下方 methods 里，修改系统自带的添加方法

1
2
3
4
5
6
7
8
9
10
add(v) {
    console.log('add >> F', v)
    const module = {
        courseId:  v.courseId ,
        moduleName:  v.moduleName ,
        moduleTitle:  v.moduleTitle ,
    }
    Object.assign(this.modelDefault, module)
    this.edit(this.modelDefault)
},

v 是什么，….暂时不知道这是从哪里来的

Modal页面

最后在 modal页面修改一下 ==add==方法

1
2
3
4
5
6
7
add (v) {
    console.log('add >> M', v);
    this.visible=true
    this.$nextTick(()=>{
        this.$refs.realForm.add(v);
    })
},

致此大功告成。

配置老师课程权限

用到了插槽，就是在 表格 的那个页面，点击某一字段的值，会出来一个弹窗，然后选择对应的权限

1、首先在合适的位置加入代码，模板都类似，相差不是特别大

注意： slot的名字就是插槽的名字，下方会使用

1
2
3
<template slot='coursePower' slot-scope='text,record'>
<a @click='handleCoursePower(record)'>{{ text }}</a>
</template>

2、在<a-table></a-table>外面，加入以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<j-modal
  title='课程权限配置'
  :visible='visible'
  :confirmLoading='confirmLoading'
  @ok='handleSubmit'
  @cancel='handleCancel'
  wrapClassName='j-depart-select-modal'
  switchFullscreen
  cancelText='关闭'>
  <a-spin tip='Loading...' :spinning='confirmLoading'>
    <a-tree
      v-model='checkedKeys'
      checkable
      :expanded-keys='expandedKeys'
      :auto-expand-parent='autoExpandParent'
      :selected-keys='selectedKeys'
      :tree-data='treeData'
      @expand='onExpand'
      @select='onSelect'
    />
  </a-spin>
</j-modal>

3、在列表显示的地方加入代码

1
2
3
4
5
6
7
{
  title:'课程权限',
  align:"center",
  dataIndex: 'coursePower',
      // 加入下方代码，名字对应上方 slot 的名字
  scopedSlots: { customRender: 'coursePower' }
},

4、弹窗之后里面的具体实现等等根据实际情况编写

页面排序

在 前端列表 页面加入以下代码即可

1
2
3
4
sorter: true,
customRender:function (text) {
   return !text?"":(text.length>20?text.substr(0,20):text)
}

二者缺一不可！

示例：

1
2
3
4
5
6
7
8
9
{
  title:'创建时间',
  align:"center",
  sorter: true,
  dataIndex: 'createTime',
  customRender:function (text) {
    return !text?"":(text.length>20?text.substr(0,20):text)
  }
},

自定义下拉框查询

参考链接：https://blog.csdn.net/zhengtornado/article/details/106979079

控制器里写相关查询代码

查询页面

前端页面

:key="index.toString()"，这段代码去掉会报错

1
2
3
4
5
6
7
<a-col :xl="6" :lg="7" :md="8" :sm="24">
    <a-form-item label="任课老师">
        <a-select  v-model="queryParam.teacherName" placeholder="请选择任课老师">
            <a-select-option v-for="item in projectNameList2" :key="index.toString()" :value="item.name"> {{item.name}}</a-select-option>
        </a-select>
    </a-form-item>
</a-col>

data（）里定义以下参数

1
2
3
projectNameList:[],
teacherName:'',
index:'',

url 里写入对应控制器的路径

1
teacherList:'/School/TeacherList'

methods 里面定义

1
2
3
4
5
6
7
8
getName(){
    postAction(this.url.courseList).then((res) =>{
        if (res.success){
            this.projectNameList=res.result;
            console.log(this.projectNameList)
        }
    })
},

添加页面

1
2
3
4
5
6
7
<a-col :span="24">
    <a-form-model-item label="任课老师" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teacherName">
        <a-select v-model="model.teacherName" v-decorator="['teacherName', validatorRules.teacherName]">
            <a-select-option  v-for="(item, index)  in projectNameList2" :key="index.toString()" :value="item.name" > {{item.name}}</a-select-option>
        </a-select>
    </a-form-model-item>
</a-col>

modal里定义相应的值

1
2
3
4
5
6
projectNameList:[],
projectNameList2:[],
model:{
    classCourse:'',
    teacherName:''
},

其他与添加时一样。

超长文本截取

1、引入相关组件

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

2、在components里加入

1
JEllipsis

3、在 data() 与 return{}中间加入

1
2
// 20 代表的是长度，加入后会有些地方报红，但不影响使用
let ellipsis = (v, l = 20) => (<j-ellipsis value={v} length={l}/>)

4、在想要截取的字段下方加入

1
customRender:(t) => ellipsis(t)

完成！

参考链接：https://blog.csdn.net/github_39019743/article/details/105274552

字典遇到过的问题

前几天遇到了一个问题 ，查询结果一直显示为 null

xxx_dictText 就是这个字段，后来发现是实体类的原因，用字典注解的这个字段，首字母是大写的。于是我便改为小写实验了一下，竟然成功了。

总结：字典的实体类字段 首字母尽量不要用大写 ，否则可能会造成某些异常问题。

时间范围查询

由于是自己重写的方法，所有没有调用系统自带的那些查询条件，就摸索了一套解决方案。

1
2
3
<if test="teaCourseRecordVo.classUpTime_begin != null and teaCourseRecordVo.classUpTime_begin != '' and teaCourseRecordVo.classUpTime_end != null and teaCourseRecordVo.classUpTime_end != ''">
    and cls.`class_up_time` between #{teaCourseRecordVo.classUpTime_begin} and #{teaCourseRecordVo.classUpTime_end}
</if>

xml 里的具体格式就是这样，相对于的前端代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<a-col :xl="10" :lg="11" :md="12" :sm="24">
  <a-form-item label="上课时间">
    <a-range-picker
      :ranges="{ 今天: [moment(), moment()], '本月': [moment(), moment().endOf('month')] }"
      style="width: 350px"
      v-model="queryParam.classUpTime"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      :placeholder="['开始时间', '结束时间']"
      @change="onDateChange"
      @ok="onDateOk"
    />
  </a-form-item>
</a-col>

注意：需要导入组件

1
2
3
4
5
import { filterObj } from '@/utils/util'
import moment from 'moment'
  components: {
    filterObj, moment
  },

定义参数：

1
2
3
4
// 查询条件
queryParam: {
    createTimeRange:[],
},

用到的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
       *  时间查询 开始
       */
      moment,
      getQueryParams() {
        var param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
        delete param.classUpTime // 时间参数不传递后台
        if (this.superQueryParams) {
          param['superQueryParams'] = encodeURI(this.superQueryParams)
          param['superQueryMatchType'] = this.superQueryMatchType
        }
        return filterObj(param)
      },
      // 重置
      searchReset() {
        var that = this
        that.queryParam = {} //清空查询区域参数
        that.loadData(this.ipagination.current)
      },
      onDateChange: function(value, dateString) {
        console.log(dateString[0], dateString[1])
        this.queryParam.classUpTime_begin = dateString[0]
        this.queryParam.classUpTime_end = dateString[1]
      },
       onDateOk(value) {
        console.log(value)
      }
      /**
       * 时间查询 END
       */

这样就可以实现具体的功能了。

本方法参考自：https://blog.csdn.net/qq_38215042/article/details/110875770

Tea标签页使用

这是一个选项卡切换组件

官方示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
  <div>
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="Tab 1">
        Content of Tab Pane 1
           这里可以换成自定的页面
      </a-tab-pane>
      <a-tab-pane key="2" tab="Tab 2" force-render>
        Content of Tab Pane 2
           这里可以换成自定的页面
      </a-tab-pane>
      <a-tab-pane key="3" tab="Tab 3">
        Content of Tab Pane 3
          这里可以换成自定的页面
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    callback(key) {
      console.log(key);
    },
  },
};
</script>

弹窗的使用

近期项目中遇到了一个功能，在查询老师上课记录的时候，需要显示出签到/班级人数，并且点击后会弹出一个对话框，显示出对应的数据。

效果如下：

特此记录一下，防止时间久了，自己会遗忘。

实现

先定义一个插槽，点击会触发弹窗的方法

1
2
3
<span slot="action" slot-scope="text, record">
    <a @click="handleTest(record)">{{text}}</a>
</span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
        {
          title: '签到/班级学生',
          align: 'center',
          dataIndex: 'peopleCounting',
          scopedSlots: { customRender: 'action' }
        }

//方法
    handleTest(v) {
      this.visible = true
      // console.log('>>>>>', v)
      getAction(this.url.listCondition, {
        classId: v.classId,
        courseName: v.courseName
      }).then((res) => {
        if (res.success) {
          this.stuList = res.result.records
        }
      })
    },
    handleCancel() {
      this.handleClear()
    },
    handleClear() {
      this.visible = false
    },

需要定义好的值

1
2
visible: false,
confirmLoading: false

在标签</a-table>的外面定义弹窗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<j-modal
  title='学生到课情况'
  :visible='visible'
  :confirmLoading='confirmLoading'
  width="700px"
  @cancel='handleCancel'
  :footer="null" 
  switchFullscreen
  cancelText='关闭'>
  <a-spin tip='Loading...' :spinning='confirmLoading'>
    <a-table
      rowKey="id"
      :columns="columnstwo"
      :dataSource="stuList"
    >
    </a-table>
  </a-spin>
</j-modal>

定义弹窗里面表格的字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
columnstwo: [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function(t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '账号',
    align: 'center',
    dataIndex: 'accountNumber'
  },
  {
    title: '学生',
    align: 'center',
    dataIndex: 'studentName'
  },
  {
    title: '状态',
    align: 'center',
    dataIndex: 'type_dictText'
  }
],

其他调用对应的方法即可。

实现分页

默认使用的是 table分页，实现分页只需要加入一个配置即可

1
:pagination="pagination"

而 list 却不能这样使用

记录下 copy 别人的分页

1
2
3
 <a-list 	:pagination="ipagination"  
            :data-source="dataSource">
</a-list>

以上两个设置必须要有，第一个是分页设置的一个方法，第二个是数据源，及获取的地址

方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
ipagination: {
  current: 1,
  pageSize: 8,
  showTotal: (total, range) => {
    return range[0] + '-' + range[1] + ' 共' + total + '条'
  },
  showSizeChanger: false,
  showQuickJumper: false,
  total: 0,
  onChange: function(page, pageSize) {
    this.current = page
  }
}
1
2
3
4
5
watch: {
  'ipagination.current': function(val) {
    this.loadData(val)
  }
},

显示图片

使用img标签显示图片

1
<img :src="getImgView(model.schoolLogo)" />

getImgView()方法可以获取图片的路径

1
2
3
4
5
6
7
8
9
10
// 引入
import {getAction,getFileAccessHttpUrl} from '@/api/manage'

/* 图片预览 */
getImgView(text){
    if(text && text.indexOf(",")>0){
        text = text.substring(0,text.indexOf(","))
    }
    return getFileAccessHttpUrl(text)
},

jeecgboot自动生成的页面不需要上述这一步也可以使用

因为它引用了

1
2
3
4
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'

mixins: [JeecgListMixin, mixinDevice],

JeecgListMixin中涵盖了此方法。

气泡式的卡片浮层

a-popover

文档：https://www.antdv.com/components/popover-cn/

文字提示气泡框

a-tooltip

文档：https://www.antdv.com/components/tooltip-cn/

Badge徽标数

a-badge

文档：https://www.antdv.com/components/badge-cn/

不定时更新~

JeecgBoot
JeecgBoot

本文作者: 仅安
本文链接: https://jinan6.vip/posts/4114942351/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！