JPwise 列表配置生成规范

配置结构总览

标准列表配置结构

javascript

export const columnData = {
  // 基础配置
  type: 1,                    // 列表类型：1-普通列表，4-行内编辑
  hasPage: true,              // 是否分页
  pageSize: 20,               // 每页条数
  multiple: true,             // 是否多选
  hasSummary: false,          // 是否显示合计行
  
  // 列配置
  columnList: { /* 列配置对象 */ },
  columnOptions: [],          // 列选项数组
  defaultColumnList: [],      // 默认列配置
  
  // 排序配置
  defaultSidx: "",            // 默认排序字段
  sort: "",                   // 排序方向：asc/desc
  
  // 树形配置
  treeTitle: "左侧标题",
  treeDataSource: "dictionary",
  treeDictionary: "",
  treeRelation: "",
  treePropsUrl: "",
  treePropsValue: "id",
  treePropsChildren: "children",
  treePropsLabel: "fullName",
  groupField: "",
  
  // 权限配置
  useColumnPermission: false,  // 列权限
  useFormPermission: false,    // 表单权限
  useBtnPermission: false,     // 按钮权限
  useDataPermission: false,    // 数据权限
  
  // 按钮配置
  customBtnsList: [],         // 行按钮列表
  customTopBtnsList: [],      // 顶部按钮列表
  
  // 事件函数
  funcs: {}                   // 生命周期函数
}

列配置规范 (columnList)

基础列配置模板

javascript

columnList: {
  // 基本属性
  id: "",                     // 列ID
  label: "",                  // 列标题
  prop: "",                   // 数据属性名
  width: 120,                 // 列宽度
  __vModel__: "",            // 绑定字段名
  field: "",                  // 数据库字段名
  fieldName: "",              // 字段显示名
  dataType: "",               // 数据类型
  dataLength: "",             // 数据长度
  primaryKey: 0,              // 是否主键：0-否，1-是
  allowNull: false,           // 是否允许为空
  
  // 搜索配置
  searchType: "",             // 搜索类型：EQ-等于，LK-模糊，RANGE-范围
  searchJnpfKey: "",          // 搜索组件类型
  search: false,              // 是否可搜索
  
  // 显示配置
  align: "center",            // 对齐方式：left/center/right
  sortable: true,             // 是否可排序
  showtable: true,            // 是否显示在表格中
  fixed: "",                  // 固定位置：left/right/""
  
  // 交互配置
  multiple: false,            // 是否多选（用于select类型）
  clearable: true,            // 是否可清除
  customColumn: true,         // 是否自定义列
  customFormatter: true,      // 是否自定义格式化
  
  // 数值格式化
  precision: "",              // 小数精度
  thousand: false,            // 是否千分位分隔
  currency: "",               // 货币符号
  format: "",                 // 日期格式
  
  // 组件配置
  __config__: {
    dataType: "dictionary",   // 数据类型：dictionary/static/dynamic
    defaultValue: "",         // 默认值
    dictionaryType: "",       // 字典类型
    label: "",                // 组件标签
    propsUrl: "",             // 接口地址
    propsName: "",            // 接口名称
    props: {
      label: "label",         // 显示字段
      value: "value"          // 值字段
    }
  },
  
  // 插槽配置
  __slot__: {
    options: [],              // 选项数据
    searchOptions: []         // 搜索选项数据
  },
  
  // 扩展配置
  totalInfo: "",              // 合计信息
  textColor: "",              // 文本颜色
  linkCC: "({ row, column, formatInfo, that, getDynamicModelData, openWindow }) => {\n   \n}"  // 链接点击事件
}

列类型智能映射规则

javascript

const columnTypeMapping = {
  // 数据类型映射
  dataTypeMapping: {
    'varchar': { width: 150, align: 'left', sortable: true },
    'nvarchar': { width: 150, align: 'left', sortable: true },
    'int': { width: 100, align: 'right', sortable: true },
    'bigint': { width: 120, align: 'right', sortable: true },
    'decimal': { width: 120, align: 'right', sortable: true, precision: 2 },
    'datetime': { width: 160, align: 'center', sortable: true, format: 'yyyy-MM-dd HH:mm:ss' },
    'date': { width: 120, align: 'center', sortable: true, format: 'yyyy-MM-dd' },
    'text': { width: 200, align: 'left', sortable: false },
    'bit': { width: 80, align: 'center', sortable: true }
  },
  
  // 字段名模式映射
  fieldPatternMapping: {
    'ID': { width: 0, showtable: false },                    // ID字段隐藏
    'CODE': { width: 120, align: 'left', fixed: 'left' },   // 编码字段
    'NAME': { width: 150, align: 'left', fixed: 'left' },   // 名称字段
    'TITLE': { width: 200, align: 'left' },                 // 标题字段
    'STATUS': { width: 80, align: 'center' },               // 状态字段
    'AMOUNT': { width: 120, align: 'right', precision: 2 }, // 金额字段
    'DATE': { width: 120, align: 'center' },                // 日期字段
    'TIME': { width: 160, align: 'center' },                // 时间字段
    'REMARK': { width: 200, align: 'left' },                // 备注字段
    'USER': { width: 100, align: 'center' },                // 用户字段
    'DEPT': { width: 120, align: 'center' }                 // 部门字段
  }
}

按钮配置规范

行按钮配置 (customBtnsList)

标准行按钮模板

javascript

customBtnsList: [
  {
    value: "btn_row_edit",                    // 按钮标识（唯一）
    icon: "el-icon-edit",                     // 按钮图标
    label: "编辑",                            // 按钮文本
    unEdit: true,                             // 是否不可编辑
    disabled: false,                          // 是否禁用
    checked: true,                            // 是否默认选中
    func: `({ data, request, toast, refresh, initDynamicModelData, openWindow }) => {
      // 验证数据是否存在
      if (!data || !data.ID) {
        toast({ type: "error", message: "数据不完整，无法编辑", duration: 1500 });
        return;
      }
      // 验证权限（如果有工作流）
      if (this.config.webType == 3 && data.FLOWPHASE && data.FLOWPHASE != 0) {
        toast({ type: "error", message: "流程中的数据无法编辑", duration: 1500 });
        return;
      }
      this.handleOpen(data.ID);
    }`
  }
]

常用行按钮类型

javascript

const standardRowButtons = {
  // 编辑按钮
  edit: {
    value: "btn_row_edit",
    icon: "el-icon-edit",
    label: "编辑",
    validation: ["dataExists", "flowPermission"],
    action: "this.handleOpen(data.ID)"
  },
  
  // 删除按钮
  remove: {
    value: "btn_row_remove",
    icon: "el-icon-delete",
    label: "删除",
    validation: ["dataExists", "flowPermission", "confirmDialog"],
    action: "this.handleDel(data.ID, data.row_index)"
  },
  
  // 详情按钮
  detail: {
    value: "btn_row_detail",
    icon: "el-icon-tickets",
    label: "详情",
    validation: ["dataExists"],
    action: "this.handleOpen(data.ID, true, data)"
  },
  
  // 复制按钮
  copy: {
    value: "btn_row_copy",
    icon: "el-icon-copy-document",
    label: "复制",
    checked: false,  // 默认不显示
    validation: ["dataExists"],
    action: "this.handleCopy(data)"
  }
}

顶部按钮配置 (customTopBtnsList)

标准顶部按钮模板

javascript

customTopBtnsList: [
  {
    value: "btn_top_add",                     // 按钮标识
    icon: "el-icon-plus",                     // 按钮图标
    label: "新增",                            // 按钮文本
    unEdit: true,                             // 是否不可编辑
    disabled: false,                          // 是否禁用
    checked: true,                            // 是否默认选中
    btnType: "primary",                       // 按钮类型
    func: `({ data, request, toast, refresh, initDynamicModelData, openWindow }) => {
      // 检查权限
      if (!this.hasPermission || !this.hasPermission('add')) {
        toast({ type: "error", message: "暂无新增权限", duration: 1500 });
        return;
      }
      if (this.columnData.type === 4) {
        this.addHandleForRowEdit();
      } else {
        this.handleOpen();
      }
    }`
  }
]

常用顶部按钮类型

javascript

const standardTopButtons = {
  // 新增按钮
  add: {
    value: "btn_top_add",
    icon: "el-icon-plus",
    label: "新增",
    btnType: "primary",
    validation: ["addPermission"],
    priority: 1
  },
  
  // 批量编辑按钮
  batchEdit: {
    value: "btn_top_edit",
    icon: "el-icon-edit-outline",
    label: "编辑",
    validation: ["editPermission", "singleSelection", "flowPermission"],
    priority: 2
  },
  
  // 批量删除按钮
  batchRemove: {
    value: "btn_top_batchRemove",
    icon: "el-icon-delete",
    label: "批量删除",
    validation: ["deletePermission", "hasSelection", "confirmDialog"],
    priority: 3
  },
  
  // 导出Excel按钮
  exportExcel: {
    value: "btn_top_download",
    icon: "icon-ym icon-ym-file-excel",
    label: "导出Excel",
    validation: ["exportPermission", "hasData"],
    priority: 4
  },
  
  // 导入Excel按钮
  importExcel: {
    value: "btn_top_importExcel",
    icon: "icon-ym icon-ym-btn-import",
    label: "导入Excel",
    validation: ["importPermission"],
    priority: 5
  },
  
  // 刷新按钮
  refresh: {
    value: "btn_top_refresh",
    icon: "el-icon-refresh",
    label: "刷新",
    validation: [],
    priority: 6
  }
}

事件处理函数规范 (funcs)

生命周期函数配置

javascript

funcs: {
  // 数据加载完成事件
  afterOnload: {
    func: `({ data, attributes, events, methods, tableRef, request, getTableStyle, setTableStyle }) => {
      // 数据加载完成后执行
      console.log('数据加载完成，记录数:', data.length);
      
      // 自动设置表格样式
      if (data.length > 0) {
        setTableStyle({
          stripe: true,
          border: true,
          size: 'mini'
        });
      }
      
      // 初始化汇总信息
      this.initSummaryData && this.initSummaryData(data);
    }`,
    name: "数据加载完成事件",
    type: "afterOnload"
  },
  
  // 组件挂载事件
  mounted: {
    func: `({ data, methods, tableRef }) => {
      // 组件挂载完成后执行
      console.log('列表组件已挂载');
      
      // 初始化权限检查
      this.initPermissions && this.initPermissions();
      
      // 设置默认排序
      if (this.defaultSidx) {
        this.$nextTick(() => {
          tableRef && tableRef.sort(this.defaultSidx, this.sort || 'desc');
        });
      }
      
      // 监听窗口变化，自适应表格高度
      this.handleResize = () => {
        this.$nextTick(() => {
          tableRef && tableRef.doLayout();
        });
      };
      window.addEventListener('resize', this.handleResize);
    }`,
    name: "组件挂载事件",
    type: "mounted"
  },
  
  // 页面初始化事件
  onload: {
    func: `({ setInitSearchInfo, request }) => {
      // 页面初始化时执行
      console.log('页面初始化开始');
      
      // 设置初始搜索条件
      const initSearchInfo = {
        // 添加默认搜索条件
        // status: '1', // 例如：默认只查询启用状态的数据
      };
      
      // 从路由参数获取搜索条件
      const routeQuery = this.$route.query;
      Object.keys(routeQuery).forEach(key => {
        if (routeQuery[key]) {
          initSearchInfo[key] = routeQuery[key];
        }
      });
      
      setInitSearchInfo(initSearchInfo);
      
      // 初始化其他配置
      this.initializeConfig && this.initializeConfig();
    }`,
    name: "页面初始化事件",
    type: "onload"
  },
  
  // 组件销毁事件
  beforeDestroy: {
    func: `({ data, methods, tableRef }) => {
      // 组件销毁前执行清理
      if (this.handleResize) {
        window.removeEventListener('resize', this.handleResize);
      }
      
      // 清理定时器
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer);
      }
      
      console.log('列表组件已销毁');
    }`,
    name: "组件销毁事件",
    type: "beforeDestroy"
  }
}

事件函数参数说明

javascript

const eventParameters = {
  // afterOnload 参数
  afterOnload: {
    data: "数据数组",
    attributes: "属性对象",
    events: "事件对象",
    methods: "方法对象",
    tableRef: "表格引用",
    request: "请求对象",
    getTableStyle: "获取表格样式函数",
    setTableStyle: "设置表格样式函数"
  },
  
  // mounted 参数
  mounted: {
    data: "数据数组",
    methods: "方法对象",
    tableRef: "表格引用"
  },
  
  // onload 参数
  onload: {
    setInitSearchInfo: "设置初始搜索条件函数",
    request: "请求对象"
  },
  
  // 按钮事件参数
  buttonEvent: {
    data: "当前行数据（行按钮）或选中数据（顶部按钮）",
    request: "请求对象",
    toast: "消息提示函数",
    refresh: "刷新数据函数",
    initDynamicModelData: "初始化动态数据函数",
    openWindow: "打开窗口函数"
  }
}

权限验证规范

通用权限验证函数

javascript

const permissionValidations = {
  // 数据存在性验证
  dataExists: (data) => {
    if (!data || !data.ID) {
      return { valid: false, message: "数据不完整，无法操作" };
    }
    return { valid: true };
  },
  
  // 工作流权限验证
  flowPermission: (data, config) => {
    if (config.webType == 3 && data.FLOWPHASE && data.FLOWPHASE != 0) {
      return { valid: false, message: "流程中的数据无法操作" };
    }
    return { valid: true };
  },
  
  // 单选验证
  singleSelection: (selectionData) => {
    if (!selectionData.length || selectionData.length != 1) {
      return { valid: false, message: "请选择一条数据进行操作" };
    }
    return { valid: true };
  },
  
  // 多选验证
  hasSelection: (selectionData) => {
    if (!selectionData.length) {
      return { valid: false, message: "请选择要操作的数据" };
    }
    return { valid: true };
  },
  
  // 数据存在验证
  hasData: (list) => {
    if (!list || list.length === 0) {
      return { valid: false, message: "暂无数据可操作" };
    }
    return { valid: true };
  }
}

智能配置生成算法

列配置自动生成

javascript

function generateColumnConfig(fields, businessScenario) {
  const columnConfig = {
    columnList: [],
    searchFields: [],
    summaryFields: []
  };
  
  fields.forEach(field => {
    const column = {
      ...getBaseColumnConfig(field),
      ...getTypeSpecificConfig(field),
      ...getBusinessSpecificConfig(field, businessScenario)
    };
    
    columnConfig.columnList.push(column);
    
    // 自动添加搜索字段
    if (shouldAddToSearch(field)) {
      columnConfig.searchFields.push(generateSearchField(field));
    }
    
    // 自动添加汇总字段
    if (shouldAddToSummary(field)) {
      columnConfig.summaryFields.push(field.field);
    }
  });
  
  return columnConfig;
}

按钮配置自动生成

javascript

function generateButtonConfig(businessScenario, permissions) {
  const buttonConfig = {
    customBtnsList: [],
    customTopBtnsList: []
  };
  
  // 基础行按钮
  const baseRowButtons = ['edit', 'remove', 'detail'];
  baseRowButtons.forEach(buttonType => {
    if (hasPermission(permissions, buttonType)) {
      buttonConfig.customBtnsList.push(
        generateRowButton(buttonType, businessScenario)
      );
    }
  });
  
  // 基础顶部按钮
  const baseTopButtons = ['add', 'batchRemove', 'exportExcel', 'refresh'];
  baseTopButtons.forEach(buttonType => {
    if (hasPermission(permissions, buttonType)) {
      buttonConfig.customTopBtnsList.push(
        generateTopButton(buttonType, businessScenario)
      );
    }
  });
  
  return buttonConfig;
}

最佳实践

配置生成原则

数据驱动 - 根据字段类型和业务场景智能选择配置
权限优先 - 严格验证用户权限，确保数据安全
用户体验 - 提供清晰的错误提示和操作反馈
性能考虑 - 合理设置分页和懒加载
扩展性 - 预留扩展接口，便于业务定制

常见配置模式

javascript

const configurationPatterns = {
  // 基础数据管理模式
  basicDataManagement: {
    features: ['add', 'edit', 'delete', 'export', 'search'],
    permissions: ['read', 'write', 'delete', 'export'],
    layout: 'standard'
  },
  
  // 审批流程模式
  approvalWorkflow: {
    features: ['add', 'edit', 'detail', 'export', 'search'],
    permissions: ['read', 'write', 'approve', 'export'],
    layout: 'workflow',
    specialColumns: ['flowStatus', 'approver', 'approveTime']
  },
  
  // 只读查询模式
  readOnlyQuery: {
    features: ['detail', 'export', 'search'],
    permissions: ['read', 'export'],
    layout: 'readonly',
    hideButtons: ['add', 'edit', 'delete']
  }
}

性能优化建议

合理分页 - 根据数据量设置合适的pageSize
懒加载 - 大数据集使用虚拟滚动
缓存策略 - 字典数据等静态信息进行缓存
索引优化 - 确保排序和搜索字段有合适的数据库索引

错误处理规范

javascript

const errorHandlingPatterns = {
  // 网络错误处理
  networkError: {
    retry: true,
    maxRetries: 3,
    fallbackMessage: "网络连接异常，请稍后重试"
  },
  
  // 权限错误处理
  permissionError: {
    redirect: false,
    message: "权限不足，请联系管理员"
  },
  
  // 数据错误处理
  dataError: {
    validate: true,
    sanitize: true,
    message: "数据格式不正确"
  }
}

注意：此规范文档是列表配置生成的核心依据，所有自动生成逻辑必须严格遵循这些规则！

主项目-前端

配置标准

开发指南

最佳实践

参考文档

开发标准

开发指南

部署手册

开发指南

参考文档

开发标准

故障排除

文件预览

JPwise 列表配置生成规范

配置结构总览

标准列表配置结构

列配置规范 (columnList)

基础列配置模板

列类型智能映射规则

按钮配置规范

行按钮配置 (customBtnsList)

标准行按钮模板

常用行按钮类型

顶部按钮配置 (customTopBtnsList)

标准顶部按钮模板

常用顶部按钮类型

事件处理函数规范 (funcs)

生命周期函数配置

事件函数参数说明

权限验证规范

通用权限验证函数

智能配置生成算法

列配置自动生成

按钮配置自动生成

最佳实践

配置生成原则

常见配置模式

性能优化建议

错误处理规范

JPwise 列表配置生成规范 ​

配置结构总览 ​

标准列表配置结构 ​

列配置规范 (columnList) ​

基础列配置模板 ​

列类型智能映射规则 ​

按钮配置规范 ​

行按钮配置 (customBtnsList) ​

标准行按钮模板 ​

常用行按钮类型 ​

顶部按钮配置 (customTopBtnsList) ​

标准顶部按钮模板 ​

常用顶部按钮类型 ​

事件处理函数规范 (funcs) ​

生命周期函数配置 ​

事件函数参数说明 ​

权限验证规范 ​

通用权限验证函数 ​

智能配置生成算法 ​

列配置自动生成 ​

按钮配置自动生成 ​

最佳实践 ​

配置生成原则 ​

常见配置模式 ​

性能优化建议 ​

错误处理规范 ​

JPwise 列表配置生成规范

配置结构总览

标准列表配置结构

列配置规范 (columnList)

基础列配置模板

列类型智能映射规则

按钮配置规范

行按钮配置 (customBtnsList)

标准行按钮模板

常用行按钮类型

顶部按钮配置 (customTopBtnsList)

标准顶部按钮模板

常用顶部按钮类型

事件处理函数规范 (funcs)

生命周期函数配置

事件函数参数说明

权限验证规范

通用权限验证函数

智能配置生成算法

列配置自动生成

按钮配置自动生成

最佳实践

配置生成原则

常见配置模式

性能优化建议

错误处理规范