JeeSite 5.17.1:Vue 组件事件补齐、表格列拖拽、BPM 流程预选下一步处理人

2026-05-21 27 预计阅读时间:1 分钟
来源:oschina.net AI 摘要 原文链接

免责声明:本文为 AI 摘要整理,建议结合原文阅读。摘要可能省略上下文、版本差异或边界条件,不作为官方说明。

预计阅读时间:7 分钟

JeeSite 5.17.1 是一次偏"体验打磨"的迭代——Vue 分离端补上了几个开发者反复提的事件和参数缺口,BPM 发起流程时终于能看到下一步谁来接,AI 模块加了深度思考折叠。改动不大但每个都踩在实际痛点上,值得升级。

ListSelect:update:valueupdate:labelValue 事件

之前用 ListSelect 做弹窗选择,选完之后只能靠 change 回调拿到 value,想同步拿 label 得自己再查一遍字典。5.17.1 补了两个 Vue3 风格的 update: 事件,选择结果可以直接在父组件里双向绑定。

<template>
  <ListSelect
    v-model:value="selectedId"
    v-model:labelValue="selectedLabel"
    :title="选择用户"
    :url="/js/user/listData"
    itemCode="userCode"
    itemName="userName"
  />
  <p>已选:{{ selectedLabel }}{{ selectedId }}</p>
</template>

<script setup>
import { ref } from 'vue'
import { ListSelect } from '@jeesite/vue'

const selectedId = ref('')
const selectedLabel = ref('')
</script>

两个 v-model 同时绑定,选完弹窗关闭后 selectedIdselectedLabel 自动更新,不用再写额外的 onChange 去查字典表。

Table 列拖拽:dragColumnProps 参数

表格列宽或顺序需要用户自己调整时,以前要自己引入 vuedraggable 再包装一层。现在 Table 组件内置了拖拽支持,通过 dragColumnProps 传入配置即可开启。

<template>
  <Table
    :columns="columns"
    :dataSource="tableData"
    :dragColumnProps="{
      animation: 200,
      ghostClass: 'dragging-col',
      group: 'tableColumns',
      disabled: false,
    }"
  />
</template>

<script setup>
import { ref } from 'vue'
import { Table } from '@jeesite/vue'

const columns = ref([
  { title: '编号', dataIndex: 'code', width: 120 },
  { title: '名称', dataIndex: 'name', width: 200 },
  { title: '状态', dataIndex: 'status', width: 100 },
])

const tableData = ref([
  { code: '001', name: '项目A', status: '进行中' },
  { code: '002', name: '项目B', status: '已完成' },
])
</script>

animation 控制拖拽动画毫秒数,ghostClass 给正在拖的列加样式,disabled 可以在特定场景下临时关掉拖拽。拖完列顺序变化会自动反映到 columns 数组里,持久化到后端只需在拖拽结束回调里把新顺序存下来。

BPM:发起流程时预选下一步处理人

这个改动解决了一个很常见的抱怨——发起人填完表单提交,系统自动路由到下一步,但发起人完全不知道接下来谁会处理,出了问题只能去流程追踪里查。5.17.1 在发起页面加了下一步处理人选择区域,发起前就能看到并干预。

在流程定义 XML 里启用这个功能:

<!-- bpm流程定义中,nextUserIntercept 节点配置 -->
<userTask id="step2" name="部门审批">
  <extensionElements>
    <jeesite:nextUserIntercept enabled="true" showOnStart="true"/>
  </extensionElements>
</userTask>

showOnStart="true" 让发起页面显示下一步候选处理人列表,发起人可以手动指定或确认系统自动计算的结果。如果流程有多个分支,每个分支的候选人都会分组展示。

setAuthCache 的 immediate 参数

权限缓存 setAuthCache 默认是异步写入的,某些场景下(比如登录后立刻跳转需要权限数据的页面)会出现缓存还没写完就读到了旧数据。加 immediate: true 后会同步写入再返回。

// 登录成功后立即刷新权限缓存,确保后续请求能拿到最新数据
User user = UserUtils.getUser(loginCode);
setAuthCache(user, Cache.CACHE_AUTH_USER, true); // immediate = true

代价是同步写会多占几毫秒,只在登录、权限变更等关键节点用,日常刷新还是走异步默认值就行。

AI 模块:深度思考自动折叠

AI 对话里长推理过程会把页面撑得很长,5.17.1 加了自动折叠——深度思考内容默认收起,只显示结论部分,点击可展开看完整推理链。发送按钮也做了状态优化,正在思考时按钮变为加载态,避免重复提交。

升级建议

场景 是否值得升
项目用了 ListSelect 做弹窗选择 升,省掉自己查字典的代码
表格列顺序需要用户自定义 升,内置拖拽比自封装稳定
BPM 流程发起人抱怨看不到下一步 升,直接解决痛点
只用了后端 Spring Boot 部分 可以升,但前端改动与你无关

升级命令(Maven 项目):

# 修改 pom.xml 中 jeesite-core 版本号为 5.17.1
# 然后拉取新依赖
mvn clean install -DskipTests

# Vue 分离端单独更新
cd vue-web
npm install @jeesite/vue@5.17.1
npm run build

整体来看,5.17.1 不是大版本,但每个改动都指向具体的使用摩擦——事件补齐减少胶水代码,拖拽内置减少依赖,BPM 预选减少信息盲区。如果你的项目正好踩在这些点上,升级成本很低,收益直接。


相关推荐