Appearance
JPwise 配置生成高级特性
JPwise 配置生成系统的高级功能特性和智能化能力详述
📋 概述
本文档详细描述了JPwise配置生成系统支持的高级特性,包括字段关联联动、智能布局优化、业务规则处理、流程集成等核心能力。这些特性让生成的配置具备企业级应用所需的完整功能。
🔗 字段关联和联动特性
弹窗选择组件
功能描述:支持关联其他表数据,提供弹窗选择界面并自动回填相关字段
技术实现:
javascript
// 弹窗选择配置示例
{
"__config__": {
"tag": "JnpfPopupSelect",
"label": "甲方单位"
},
"popupType": "dialog",
"relationField": "name",
"field": "name",
"interfaceId": "",
"templateJson": [],
"popupTitle": "选择客户",
"popupWidth": "800px"
}
应用场景:
- 客户选择 → 自动带出客户编号、联系人、地址等
- 项目选择 → 自动带出项目经理、项目状态、预算金额等
- 商品选择 → 自动带出商品规格、单价、库存等
下拉联动组件
功能描述:上级字段变化时,下级字段选项动态更新
技术实现:
javascript
// 联动配置示例
{
"linkage": {
"trigger": "province",
"target": "city",
"linkageType": "cascader",
"updateMethod": "ajax"
}
}
应用场景:
- 省份 → 城市 → 区县
- 商品分类 → 商品子类 → 具体商品
- 部门 → 岗位 → 员工
计算字段功能
功能描述:支持字段间自动计算,实时更新相关数值
技术实现:
javascript
// 计算字段配置示例
{
"calculateRule": {
"formula": "quantity * price",
"trigger": ["quantity", "price"],
"target": "totalAmount",
"precision": 2
}
}
应用场景:
- 数量 × 单价 = 总金额
- 基本工资 + 津贴 = 总工资
- 开始时间 + 工期 = 结束时间
📐 表单布局高级特性
智能折叠面板
功能描述:根据字段类型和业务逻辑自动将字段分组到不同面板
布局规则:
javascript
// 面板分组策略
const panelGroups = {
basicInfo: {
label: "基本信息",
fields: ["name", "code", "type", "status"],
priority: 1
},
contactInfo: {
label: "联系信息",
fields: ["mobile", "email", "address"],
priority: 2
},
businessInfo: {
label: "业务信息",
fields: ["department", "position", "manager"],
priority: 3
},
extendInfo: {
label: "扩展信息",
fields: ["remark", "attachment"],
priority: 4
}
};
智能栅格布局
功能描述:基于组件类型和字段重要性自动分配合理的span值
布局策略:
javascript
// 12/24 span 分配策略
const spanRules = {
// 全宽组件 (span: 24)
fullWidth: ["textarea", "richtext", "childTable", "upload"],
// 半宽组件 (span: 12)
halfWidth: ["input", "select", "date", "number"],
// 1/3宽组件 (span: 8)
thirdWidth: ["radio", "checkbox", "switch"],
// 1/4宽组件 (span: 6)
quarterWidth: ["rate", "color", "icon"]
};
响应式布局适配
功能描述:根据屏幕尺寸自动调整布局
适配规则:
javascript
// 响应式断点
const breakpoints = {
xs: { maxWidth: 768, span: 24 }, // 手机
sm: { maxWidth: 992, span: 12 }, // 平板
md: { maxWidth: 1200, span: 8 }, // 小桌面
lg: { minWidth: 1200, span: 6 } // 大桌面
};
条件显示/隐藏
功能描述:根据其他字段值动态控制字段的显示状态
配置示例:
javascript
// 条件显示配置
{
"conditionalLogic": {
"show": {
"when": "contractType",
"is": "service",
"then": ["serviceStartDate", "serviceEndDate"]
},
"hide": {
"when": "userType",
"is": "external",
"then": ["internalCode", "departmentId"]
}
}
}
📋 业务规则处理
动态必填验证
功能描述:根据业务场景和其他字段值动态设置必填要求
规则配置:
javascript
// 条件必填规则
{
"conditionalRequired": {
"invoiceType === 'vat'": ["taxNumber", "companyAddress"],
"userType === 'employee'": ["employeeId", "department"],
"amount > 10000": ["approvalDocument"]
}
}
数据格式校验
功能描述:支持多种数据格式的实时验证
校验规则:
javascript
// 格式验证规则
const validationRules = {
mobile: /^1[3-9]\d{9}$/,
email: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
idCard: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
bankCard: /^[0-9]{16,19}$/,
postcode: /^[0-9]{6}$/
};
唯一性检查
功能描述:防止重复数据录入的实时验证
实现机制:
javascript
// 唯一性验证配置
{
"uniqueValidation": {
"fields": ["userAccount", "email", "mobile"],
"api": "/api/validate/unique",
"excludeSelf": true,
"message": "该值已存在,请重新输入"
}
}
📊 列表高级特性
智能按钮配置
功能描述:基于业务场景和权限自动生成标准化按钮
按钮策略:
javascript
// 业务场景按钮映射
const buttonMapping = {
// 基础管理场景
basic: {
toolbar: ["add", "export", "refresh", "batchDelete"],
actions: ["detail", "edit", "delete"]
},
// 审批流程场景
approval: {
toolbar: ["add", "export", "refresh"],
actions: ["detail", "edit", "submit", "recall", "approve", "reject"]
},
// 财务管理场景
financial: {
toolbar: ["add", "export", "import", "reconcile"],
actions: ["detail", "edit", "audit", "reverse", "print"]
}
};
事件处理函数自动生成
功能描述:为列表组件自动生成完整的生命周期钩子函数
生成模板:
javascript
// 生命周期事件模板
const lifecycleEvents = {
// 页面初始化
created() {
this.initData();
this.loadDictionaries();
},
// 组件挂载
mounted() {
this.search();
this.bindEvents();
},
// 数据加载完成
dataLoaded(data) {
this.processData(data);
this.updateSummary();
},
// 组件销毁
beforeDestroy() {
this.clearTimers();
this.unbindEvents();
}
};
权限验证逻辑
功能描述:内置完善的权限验证和按钮控制逻辑
权限控制:
javascript
// 权限验证模板
const permissionLogic = {
// 按钮权限验证
checkButtonPermission(action, row) {
const permissions = this.$store.getters.permissions;
const dataPermission = this.checkDataPermission(row);
return permissions.includes(action) && dataPermission;
},
// 数据权限验证
checkDataPermission(row) {
const userOrgId = this.$store.getters.userInfo.organizeId;
return row.organizeId === userOrgId || this.hasAdminRole();
}
};
智能搜索配置
功能描述:根据字段类型自动选择最适合的搜索组件
搜索组件映射:
javascript
// 搜索组件智能选择
const searchComponentMapping = {
varchar: {
component: "JnpfInput",
logic: "Like",
placeholder: "请输入{label}"
},
datetime: {
component: "JnpfDateRange",
logic: "Between",
format: "yyyy-MM-dd"
},
decimal: {
component: "JnpfNumberRange",
logic: "Between",
precision: 2
},
dict: {
component: "JnpfSelect",
logic: "Equal",
options: "dynamic"
}
};
🔄 流程集成特性
流程表单自动配置
功能描述:为流程功能自动添加必要的流程控制字段
流程字段:
javascript
// 流程相关字段
const workflowFields = {
FLOWID: "varchar(50) COMMENT '流程实例ID'",
TASKID: "varchar(50) COMMENT '当前任务ID'",
TASKOPERATOR: "varchar(500) COMMENT '任务处理人'",
FLOWSTATUS: "int(10) DEFAULT 0 COMMENT '流程状态'",
FLOWFINISHTIME: "datetime COMMENT '流程结束时间'",
FLOWPHASE: "varchar(50) COMMENT '流程阶段'",
STEPNAME: "varchar(200) COMMENT '环节名称'"
};
流程按钮自动生成
功能描述:根据流程节点自动生成相应的操作按钮
流程按钮:
javascript
// 流程操作按钮
const workflowButtons = {
// 起草阶段
draft: ["save", "submit", "delete"],
// 审批阶段
approval: ["approve", "reject", "transfer", "addSign"],
// 执行阶段
execution: ["complete", "pause", "terminate"],
// 已完成
completed: ["detail", "print", "archive"]
};
流程权限控制
功能描述:不同流程节点设置不同的字段权限
权限策略:
javascript
// 流程权限控制
const workflowPermissions = {
// 起草阶段 - 全部可编辑
draft: {
editable: "all",
readonly: ["flowStatus", "taskOperator"]
},
// 审批阶段 - 仅审批意见可编辑
approval: {
editable: ["approvalComment", "approvalResult"],
readonly: "others"
},
// 已完成 - 全部只读
completed: {
editable: [],
readonly: "all"
}
};
🤖 智能化配置能力
字段映射智能化
核心算法:基于字段名称模式识别和数据类型分析
识别规则:
javascript
// 字段名称模式识别
const fieldPatterns = {
// 用户相关
/.*user.*|.*person.*|.*employee.*/i: "UserSelect",
// 部门相关
/.*department.*|.*dept.*|.*org.*/i: "DepartSelect",
// 时间相关
/.*time$|.*date$/i: "DatePicker",
// 金额相关
/.*amount|.*price|.*money|.*fee/i: "InputNumber",
// 状态相关
/.*status|.*state/i: "Select"
};
布局自动优化
优化策略:基于组件类型、字段重要性和用户体验
优化规则:
javascript
// 布局优化算法
const layoutOptimization = {
// 重要字段优先显示
priorityFields: ["name", "code", "type", "status"],
// 相关字段分组
grouping: {
basic: ["name", "code", "type"],
contact: ["mobile", "email", "address"],
business: ["department", "position", "manager"]
},
// 栅格分配策略
spanAllocation: {
important: 12, // 重要字段占半行
normal: 12, // 普通字段占半行
simple: 8, // 简单字段占1/3行
wide: 24 // 宽字段占整行
}
};
配置质量保证
验证机制:多维度配置质量检查和自动修正
质量检查:
javascript
// 配置质量验证
const qualityChecks = {
// 完整性检查
completeness: {
requiredFields: ["id", "fullName", "enCode"],
requiredSections: ["formData", "columnData", "tables"]
},
// 一致性检查
consistency: {
formColumnMatch: true, // 表单和列表字段一致
tableFieldMatch: true, // 表结构和配置一致
buttonEventMatch: true // 按钮和事件函数一致
},
// 规范性检查
standards: {
namingConvention: true, // 命名规范
componentConfig: true, // 组件配置规范
permissionConfig: true // 权限配置规范
}
};
📈 性能优化特性
懒加载配置
功能描述:大数据量场景下的性能优化
javascript
// 懒加载配置
const lazyLoadConfig = {
pagination: {
pageSize: 20,
serverPaging: true
},
virtualScroll: {
enabled: true,
itemHeight: 40
}
};
缓存机制
功能描述:字典数据和选项缓存,提升响应速度
javascript
// 缓存策略
const cacheStrategy = {
dictionary: { expire: 3600000 }, // 字典缓存1小时
options: { expire: 1800000 }, // 选项缓存30分钟
userInfo: { expire: 7200000 } // 用户信息缓存2小时
};
🎯 总结
JPwise配置生成系统的高级特性为企业级应用提供了完整的功能支撑:
✅ 智能化程度高 - 自动识别、智能配置、质量保证
✅ 功能覆盖全 - 表单、列表、流程、权限全方位支持
✅ 扩展性强 - 灵活的配置机制,支持各种业务场景
✅ 性能优异 - 内置优化机制,支持大数据量操作
这些高级特性确保了生成的配置不仅功能完整,还具备了企业级应用所需的性能、安全性和可维护性。