JPwise-docs

Appearance

JPwise-Web API 方法参考 - Claude Code ​

重要说明：本文档区分低代码配置和高代码开发两种模式的API使用方式

🎯 使用模式说明 ​

低代码模式（配置化开发） ​

  • 使用场景：通过可视化配置生成页面，在配置界面编写脚本
  • API特点：内置封装方法，直接调用，无需导入
  • 代码位置：表单属性脚本、列表属性脚本、组件脚本等配置面板

高代码模式（传统开发） ​

  • 使用场景：手写Vue组件，完全自定义开发
  • API特点：需要导入相关工具类，遵循Vue组件规范
  • 代码位置：.vue 文件中的 <script> 部分

📝 低代码模式 API ​

表单属性脚本（onLoad/beforeSubmit） ​

💡 在表单设计器的"表单属性"面板中编写

数据操作 ​

javascript
setFormData("字段名", 值, 行索引?, 是否文本?)     // 设置表单数据
getFieldOptions("字段名")                      // 获取字段选项  
setFieldOptions("字段名", [选项数组])           // 设置字段选项

界面控制 ​

javascript
setShowOrHide("字段名", true/false, "button"?) // 显示/隐藏
setRequired("字段名", true/false)              // 设置必填
setDisabled("字段名", true/false, 索引?, 类型?) // 设置禁用

可用对象 ​

javascript
formData         // 表单数据对象
userState        // 用户信息（userInfo.companyID等）
flowTaskInfo     // 流程信息（thisStepCode等）
eventType        // 事件类型（仅beforeSubmit）

表单组件脚本 ​

💡 在表单设计器中选择组件，在"组件脚本"面板中编写

组件数据 ​

javascript
paramData        // 参数数据对象
rowData          // 当前行数据
data            // 组件选中数据
rowIndex        // 行索引

组件方法 ​

javascript
openWindow(配置对象)                    // 打开窗口
addSelector({$操作符$字段名: "值"})      // 添加查询条件
downloadFile("url", "文件名")          // 下载文件
downloadFiles([文件数组])              // 批量下载
downloadWord("模板码", "类型", "id", "名称") // 导出Word
callback(true/false)                  // 控制上传

列表脚本 API ​

💡 在列表设计器的相关脚本面板中编写

列表属性脚本（onLoad） ​

javascript
setInitSearchInfo({字段名: "值"})       // 设置初始查询条件
request("url", "方法", 数据?)          // 发送请求

表格脚本 ​

javascript
setTableStyle({cellStyle: 函数, rowStyle: 函数})  // 设置表格样式
getTableStyle()                                  // 获取表格样式
setShowOrHide("字段名", true/false, "type"?)     // 显示/隐藏

字段点击事件 ​

javascript
row              // 当前行数据
column           // 列配置信息
openWindow(配置)  // 打开窗口
downloadFile()   // 下载文件
downloadFiles()  // 批量下载

💻 高代码模式 API ​

Vue组件开发基础 ​

💡 高代码模式下的Vue组件开发核心导入

必须导入的工具类 ​

javascript
// Vue组件中必需的导入
import { jnpf } from '@/utils/jnpf'
import { mapState, mapGetters } from 'vuex'
import listMixin from '@/mixins/basics/list'
import formMixin from '@/mixins/basics/form'
import btnPermission from '@/mixins/btn_permission'

export default {
  mixins: [listMixin, btnPermission],
  computed: {
    ...mapState(['user']),
    ...mapGetters(['buttonAuthList'])
  }
}

API调用模式 ​

javascript
// 导入API方法
import { doGet, doPost, doDelete } from '@/api/basic'

// 统一API调用
export function getData(params) {
  return doGet('/api/module/list', params)
}

export function saveData(data) {
  return doPost('/api/module/save', data)
}

工具方法使用 ​

💡 高代码模式中的工具方法通过导入方式使用

javascript
// 基础工具方法示例
import { jnpf } from '@/utils/jnpf'

// 日期格式化
jnpf.dateFormat(new Date(), 'yyyy-MM-dd')
// 权限检查  
jnpf.hasP("权限码")
// 数据存储
jnpf.storageSet('key', value)

📖 详细工具方法参考： 工具方法参考文档

🔄 通用配置（两种模式都适用） ​

openWindow 详细配置 ​

💡 在两种模式中都可以使用的弹窗配置

基础配置 ​

javascript
{
  url: "页面路径",                    // 必需
  title: "窗口标题",
  width: "800px", 
  height: "600px",
  popupType: "general",             // general/fullScreen/drwan
  showHeader: true,                 // 显示头部
  showFooter: true,                 // 显示底部
  refresh: true,                    // 关闭后刷新
  isDetail: false,                  // 是否详情页
  openTabsOnBrowser: false,         // 浏览器新标签页
}

数据配置 ​

javascript
data: {
  TmplCode: "功能设计ID",           // 必需（与flowId二选一）
  flowId: "流程设计ID",             // 必需（与TmplCode二选一）
  id: "数据ID",
  formType: 2,                     // 1-开发模式，2-配置模式
  opType: "1",                     // 流程状态
  defVal: {},                      // 默认值
  taskId: "流程任务ID",
  taskNodeId: "流程任务节点ID"
}

回调配置 ​

javascript
onDestroy: {
  confirm: ({ data, selectedData }) => {
    // 确认回调：data-表单数据，selectedData-选择数据
  },
  componentClose: () => {
    // 关闭回调
  }
}

常用页面路径 ​

javascript
"views/basic/dynamicModel/list/Form"      // 表单页面
"views/workFlow/components/FlowBox"       // 流程表单页面  
"views/basic/dynamicModel/list/index"     // 列表页面
"views/infra/word/wordPBSTemplate/index"  // 自定义页面示例

📝 使用示例对比 ​

低代码模式示例 ​

javascript
// ✅ 表单属性脚本中 (onLoad)
setFormData("NAME", "默认名称");
setFormData("STATUS", "1"); 
setRequired("NAME", true);

// 权限控制
if (this.jnpf.hasFormP('SALARY')) {
  setShowOrHide("SALARY", true);
}

// 弹窗调用
openWindow({
  url: "views/basic/dynamicModel/list/Form",
  title: "编辑数据", 
  data: { TmplCode: "123456", id: "789", formType: 2 }
});

高代码模式示例 ​

javascript
// ✅ Vue组件中
<template>
  <div>
    <el-button @click="openEditDialog">编辑</el-button>
  </div>
</template>

<script>
import { jnpf } from '@/utils/jnpf'
import formMixin from '@/mixins/basics/form'

export default {
  mixins: [formMixin],
  data() {
    return {
      formData: {
        name: '',
        status: ''
      }
    }
  },
  methods: {
    openEditDialog() {
      this.openWindow({
        url: "views/basic/dynamicModel/list/Form",
        title: "编辑数据",
        data: { 
          TmplCode: this.tmplCode, 
          id: this.currentId, 
          formType: 2 
        },
        onDestroy: {
          confirm: () => this.refresh()
        }
      });
    },
    
    checkFieldPermission() {
      return jnpf.hasFormP('SALARY');
    }
  }
}
</script>

API参考核心：区分低代码配置和高代码开发的使用方式