JPwise-docs

Appearance

JPwise 组件类型映射 ​

基础控件 ​

comInput - 单行输入框 ​

javascript
{
  __config__: {
    jnpfKey: "comInput",
    label: "单行输入",
    labelWidth: null,
    showLabel: true,
    tag: "el-input",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  __slot__: {
    prepend: "",
    append: ""
  },
  placeholder: "请输入",
  style: { width: "100%" },
  clearable: true,
  maxlength: null,
  readonly: false,
  disabled: false
}

textarea - 多行输入框 ​

javascript
{
  __config__: {
    jnpfKey: "textarea",
    label: "多行输入",
    labelWidth: null,
    showLabel: true,
    tag: "el-input",
    required: false,
    layout: "colFormItem",
    span: 24,
    tableName: "",
    trigger: "blur"
  },
  type: "textarea",
  placeholder: "请输入",
  autosize: { minRows: 4, maxRows: 4 },
  style: { width: "100%" },
  maxlength: null,
  "show-word-limit": true,
  readonly: false,
  disabled: false
}

numInput - 数字输入框 ​

javascript
{
  __config__: {
    jnpfKey: "numInput",
    label: "数字输入",
    showLabel: true,
    labelWidth: null,
    tag: "el-input-number",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  placeholder: "数字文本",
  min: null,
  max: null,
  step: 1,
  "step-strictly": false,
  precision: 2,
  "controls-position": "right",
  disabled: false
}

JPWInput - 统计数值组件 ​

javascript
{
  __config__: {
    jnpfKey: "JPWInput",
    label: "统计数值",
    showLabel: true,
    labelWidth: null,
    tag: "JPW-input",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  placeholder: "数字文本",
  precision: 2,
  disabled: false
}

switch - 开关组件 ​

javascript
{
  __config__: {
    jnpfKey: "switch",
    label: "开关",
    labelWidth: null,
    showLabel: true,
    tag: "el-switch",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  disabled: false,
  activeTxt: "开",
  inactiveTxt: "关",
  "active-color": null,
  "inactive-color": null,
  "active-value": 1,
  "inactive-value": 0
}

select - 下拉选择 ​

javascript
{
  __config__: {
    jnpfKey: "select",
    label: "下拉选择",
    labelWidth: null,
    showLabel: true,
    tag: "JPW-Select",
    required: false,
    layout: "colFormItem",
    span: 12,
    dataType: "dictionary",
    dictionaryType: "",
    props: {
      label: "fullName",
      value: "enCode"
    }
  },
  __slot__: {
    options: []
  },
  placeholder: "请选择",
  style: { width: "100%" },
  clearable: true,
  disabled: false,
  filterable: false,
  multiple: false
}

date - 日期选择 ​

javascript
{
  __config__: {
    jnpfKey: "date",
    label: "日期选择",
    labelWidth: null,
    showLabel: true,
    tag: "el-date-picker",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  placeholder: "请选择",
  type: "date",
  style: { width: "100%" },
  disabled: false,
  clearable: true,
  format: "yyyy-MM-dd",
  "value-format": "yyyy-MM-dd HH:mm:ss",
  readonly: false
}

uploadFz - 文件上传 ​

javascript
{
  __config__: {
    jnpfKey: "uploadFz",
    label: "文件上传",
    labelWidth: null,
    showLabel: true,
    tag: "JNPF-UploadFz",
    required: false,
    layout: "colFormItem",
    span: 24,
    tableName: "",
    trigger: "click"
  },
  disabled: false,
  accept: "",
  fileSize: 30,
  sizeUnit: "MB",
  buttonText: "点击上传",
  showTip: false,
  limit: 9,
  hasWatermark: false,
  watermark: "",
  displayType: "list",
  autoExtract: false,
  versionCompare: false
}

uploadImg - 图片上传 ​

javascript
{
  __config__: {
    jnpfKey: "uploadImg",
    label: "图片上传",
    labelWidth: null,
    showLabel: true,
    tag: "JNPF-UploadImg",
    required: false,
    layout: "colFormItem",
    span: 24,
    tableName: "",
    trigger: "click"
  },
  disabled: false,
  accept: "",
  showTip: false,
  fileSize: 10,
  sizeUnit: "MB",
  limit: 9
}

editor - 富文本编辑器 ​

javascript
{
  __config__: {
    jnpfKey: "editor",
    label: "富文本",
    labelWidth: null,
    showLabel: true,
    tag: "JNPF-Quill",
    required: false,
    layout: "colFormItem",
    span: 24,
    tableName: "",
    trigger: "blur"
  },
  placeholder: "请输入"
}

高级控件 ​

userSelect - 用户选择 ​

javascript
{
  __config__: {
    jnpfKey: "userSelect",
    label: "用户选择",
    labelWidth: null,
    showLabel: true,
    tag: "user-select",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  placeholder: "请选择",
  selectType: "all",
  ableDepIds: [],
  ableUserIds: [],
  multiple: false,
  clearable: true,
  disabled: false,
  relationField: "fullName"
}

depSelect - 部门选择 ​

javascript
{
  __config__: {
    jnpfKey: "depSelect",
    label: "部门选择",
    labelWidth: null,
    showLabel: true,
    tag: "dep-select",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  placeholder: "请选择",
  selectType: "all",
  ableDepIds: [],
  defaultDepIds: [],
  multiple: false,
  clearable: true,
  filterable: false,
  disabled: false,
  relationField: "fullName"
}

popupSelect - 弹窗选择 ​

javascript
{
  __config__: {
    jnpfKey: "popupSelect",
    label: "弹窗选择",
    labelWidth: null,
    showLabel: true,
    tag: "popupSelect",
    required: false,
    layout: "colFormItem",
    span: 12
  },
  __slot__: {
    options: []
  },
  placeholder: "请选择",
  interfaceCode: "",
  hasPage: true,
  pageSize: 20,
  propsValue: "id",
  relationField: "fullName",
  popupType: "dialog",
  popupTitle: "选择数据",
  popupWidth: "80%",
  disabled: false,
  clearable: true
}

billRule - 单据规则组件 ​

javascript
{
  __config__: {
    jnpfKey: "billRule",
    label: "单据组件",
    labelWidth: null,
    showLabel: true,
    tag: "el-input",
    required: false,
    layout: "colFormItem",
    generate: "whenSubmit",
    span: 12,
    rule: "",
    ruleName: ""
  },
  readonly: true,
  placeholder: "系统自动生成"
}

address - 地址选择 ​

javascript
{
  __config__: {
    jnpfKey: "address",
    label: "国省市区域",
    labelWidth: null,
    showLabel: true,
    tag: "JNPF-Address",
    required: false,
    layout: "colFormItem",
    span: 12,
    tableName: ""
  },
  placeholder: "请选择",
  disabled: false,
  clearable: true,
  filterable: false,
  multiple: false,
  level: 2
}

table - 设计子表 ​

javascript
{
  __config__: {
    jnpfKey: "table",
    label: "设计子表",
    showLabel: false,
    tag: "JNPF-InputTable",
    layout: "rowFormItem",
    span: 24,
    type: "table",
    rowType: "table",
    children: [],
    tableName: ""
  },
  btnsList: [],
  customBtnsList: [],
  customTopBtnsList: [],
  disabled: false,
  actionText: "添加",
  "show-summary": false,
  addType: 0,
  summaryField: [],
  hasNo: true,
  hasBatchBtn: false
}

布局控件 ​

groupTitle - 分组标题 ​

javascript
{
  __config__: {
    jnpfKey: "groupTitle",
    label: "分组标题",
    labelWidth: null,
    showLabel: false,
    tag: "groupTitle",
    required: false,
    layout: "colFormItem",
    span: 24,
    tableName: ""
  },
  content: "分组标题",
  "content-position": "left"
}

collapse - 折叠面板 ​

javascript
{
  __config__: {
    jnpfKey: "collapse",
    label: "折叠面板",
    showLabel: false,
    tag: "el-collapse",
    layout: "rowFormItem",
    span: 24,
    children: [
      {
        title: "面板1",
        name: "1",
        isHide: ["pc", "app"],
        __config__: {
          children: []
        }
      }
    ],
    active: ["1"]
  },
  accordion: false
}

divider - 分割线 ​

javascript
{
  __config__: {
    jnpfKey: "divider",
    label: "分割线",
    labelWidth: null,
    showLabel: false,
    tag: "el-divider",
    required: false,
    layout: "colFormItem",
    span: 24
  },
  __slot__: {
    default: "我是分割线"
  },
  "content-position": "center"
}

实际项目配置属性 ​

扩展的__config__属性 ​

javascript
// 基于真实项目的配置属性
{
  __config__: {
    // 基础属性
    jnpfKey: "comInput",
    label: "字段标签",
    labelWidth: null,
    showLabel: true,
    tag: "el-input",
    required: false,
    layout: "colFormItem",
    span: 12,
    
    // 实际项目扩展属性
    tableName: "T_F_INVOICEAPPLY",  // 关联表名
    formId: 104,                    // 表单ID
    renderKey: 1725963424312,       // 渲染键值
    dynamicFields: "ReceiptInfo.ID", // 动态字段
    noShow: false,                  // 是否隐藏
    unique: false,                  // 是否唯一
    regList: [],                    // 验证规则数组
    trigger: "blur",                // 触发方式
    visibility: ["pc", "app"]       // 可见性设置
  }
}

Span值智能配置策略 ​

javascript
// 基于实际使用的span值分配策略
function getOptimalSpan(jnpfKey) {
  const fullWidthComponents = [
    'collapse', 'groupTitle', 'divider', 'tab',  // 布局组件
    'table', 'uploadFz', 'uploadImg', 'editor',  // 大型组件
    'textarea', 'signature', 'alert'             // 内容组件
  ];
  
  const halfWidthComponents = [
    'comInput', 'numInput', 'JPWInput', 'switch',  // 输入组件
    'select', 'date', 'time', 'userSelect',        // 选择组件
    'depSelect', 'popupSelect', 'billRule'         // 高级组件
  ];
  
  if (fullWidthComponents.includes(jnpfKey)) return 24;
  if (halfWidthComponents.includes(jnpfKey)) return 12;
  
  // 默认返回12
  return 12;
}

组件选择算法 ​

优先级规则 ​

  1. 业务语义优先 - 根据字段名称语义选择
  2. 数据类型匹配 - 根据数据库字段类型
  3. 长度约束 - 根据字段长度选择合适组件
  4. 业务场景 - 根据功能类型调整组件选择

智能选择流程 ​

javascript
function selectComponent(field, context) {
  // 1. 检查字段名称模式
  const namePattern = checkFieldNamePattern(field.name);
  if (namePattern) return namePattern;
  
  // 2. 检查业务场景
  const scenarioComponent = checkBusinessScenario(field, context);
  if (scenarioComponent) return scenarioComponent;
  
  // 3. 检查数据类型
  const typeComponent = checkDataType(field.dataType);
  if (typeComponent) return typeComponent;
  
  // 4. 默认组件
  return getDefaultComponent(field);
}

触发方式配置 ​

javascript
// 不同组件的标准触发方式
const triggerMapping = {
  'comInput': 'blur',        // 输入框失去焦点触发
  'textarea': 'blur',        // 多行输入失去焦点触发
  'numInput': '["blur", "change"]', // 数字输入双重触发
  'select': 'change',        // 选择器变化触发
  'switch': 'change',        // 开关变化触发
  'date': 'change',          // 日期选择变化触发
  'userSelect': 'click',     // 用户选择点击触发
  'uploadFz': 'click'        // 文件上传点击触发
}

事件处理配置 ​

标准事件处理函数 ​

javascript
// 基于form-config.js的标准事件配置
const standardEvents = {
  // 输入类组件事件
  inputEvents: {
    change: "({ data, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData }) => {\n    // 在此编写代码\n    \n}",
    blur: "({ data, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData }) => {\n    // 在此编写代码\n    \n}"
  },
  
  // 选择类组件事件
  selectEvents: {
    change: "({ data, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData, rowData }) => {\n    // 在此编写代码\n    \n}",
    customParamsChange: "({ data, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData }) => {\n    // 专属函数 禁止自定义 后续优化将不回显此函数\n    \n}"
  },
  
  // 上传类组件事件
  uploadEvents: {
    beforeUpload: "({ data, callback, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData }) => {\n    // 在此编写代码\n    \n}",
    change: "({ data, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData }) => {\n    // 在此编写代码\n    \n}",
    extractSuccess: "({ data, tempFormId, formData, setFormData, setShowOrHide, setRequired, setDisabled, request, getFieldOptions, setFieldOptions, paramData }) => {\n    // 在此编写代码\n    \n}"
  }
}

组件特定配置 ​

javascript
// 基于form-config.js的完整组件配置映射
const componentSpecialConfig = {
  // 弹窗选择组件特殊配置
  popupSelect: {
    interfaceFields: {
      propsValue: "id",
      relationField: "fullName",
      columnEnums: "",
      columnOptions: [],
      interfaceName: ""
    },
    popupConfig: {
      popupType: "dialog",
      popupTitle: "选择数据",
      popupWidth: "80%",
      hasPage: true,
      pageSize: 20
    }
  },
  
  // 单据规则特殊配置
  billRule: {
    ruleConfig: {
      generate: "whenSubmit", // 提交时生成
      rule: "",              // 规则内容
      ruleName: "",          // 规则名称
      readonly: true,         // 只读状态
      placeholder: "系统自动生成"
    }
  },
  
  // 表格组件特殊配置
  table: {
    tableConfig: {
      addType: 0,
      summaryField: [],
      hasNo: true,
      hasBatchBtn: false,
      btnsList: [],
      customBtnsList: [],
      customTopBtnsList: []
    }
  }
}