Skip to content

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配置生成系统的高级特性为企业级应用提供了完整的功能支撑:

智能化程度高 - 自动识别、智能配置、质量保证
功能覆盖全 - 表单、列表、流程、权限全方位支持
扩展性强 - 灵活的配置机制,支持各种业务场景
性能优异 - 内置优化机制,支持大数据量操作

这些高级特性确保了生成的配置不仅功能完整,还具备了企业级应用所需的性能、安全性和可维护性。