ProcessMaker 4中JavaScript代码编写位置及原v3代码适配咨询

核心差异说明 #

ProcessMaker 4基于Vue.js重构，和v3的jQuery操作逻辑完全不同，无法直接沿用v3的DOM选择器写法，但可通过以下方式实现类似功能：

自定义JS的编写位置 #

• Dynaform设计器内的"JavaScript"标签页：这是最常用的位置，对应v3里的表单JS代码区，但写法需适配Vue框架：
  • 替代$('#submitAdd').click()：用Vue的@click绑定事件到按钮，或在mounted()钩子中监听DOM事件
  • 替代getValue/setValue：直接操作Vue的数据模型，比如通过this.$data调用表单字段的绑定变量

示例适配（对应你提供的v3代码） #

假设表单里有price字段和gridListExpenses网格，在Dynaform的JavaScript标签页中可这样写：

// 挂载完成后监听按钮点击
mounted() {
  document.getElementById('submitAdd').addEventListener('click', () => {
    // 获取price字段的值（假设字段绑定变量为price）
    const price = this.$data.price;
    // 给网格指定行指定列赋值（假设网格绑定变量为gridListExpenses）
    this.$data.gridListExpenses[j][30] = price;
    // 触发视图更新
    this.$forceUpdate();
  });
}

或更符合Vue规范的方式：

1. 在Dynaform按钮设置中，给submitAdd按钮添加@click="handleSubmitAdd"事件绑定
2. 在JavaScript标签页定义方法：

methods: {
  handleSubmitAdd() {
    const price = this.$data.price;
    this.$data.gridListExpenses[j][30] = price;
    this.$forceUpdate();
  }
}

• 全局自定义脚本：若需在多个表单/流程中复用代码，可在Admin > Settings > Scripts中创建全局JavaScript脚本，再在需要的地方引用。

注意事项 #

• 避免直接操作DOM：ProcessMaker 4的表单是Vue组件，直接用jQuery操作DOM可能破坏Vue响应式机制，优先使用Vue数据驱动方式。
• 网格操作：网格数据为数组格式，修改数组元素后需调用this.$forceUpdate()触发视图刷新，或使用Vue的数组变异方法（如Vue.set）。

内容的提问来源于stack exchange，提问作者Ghodsieh Shahsavan