Elpis

一个企业级应用框架，通过全栈实现。

model 配置

{
  mode: 'dashboard',  // 模版类型， 不同模版类型对应不同不一样的数据结构
  // 头部菜单
  menu: [{
    key: '', // 菜单唯一标识
    name: '', // 菜单名称
    icon: '', // 菜单图标，element-icon的图标
    meunType: '', // 枚举值， group / module

    // 但 meunType 为 group 时，可填
    subMenu: [{
      // 可递归 meunItem
    }, ...], // 子菜单

    // 当 meunType 为 module 时，可填
    moduleType: '', // 枚举值， sider iframe / custom /schema

    // 当 moduleType 为 sider 时，
    siderConfig: {
      menu: [{
        // 可递归 meunItem(除 moduleType 为 sider 外)
      }]
    },

    // 当 moduleType 为 iframe 时，
    iframeConfig: {
      path: '', // iframe 路径
    },

    // 当 moduleType 为 custom 时，
    customConfig: {
      path: '', // 自定义组件路径
    },

    // 当 moduleType 为 schema 时，
    schemaConfig: {
      api: '', // 数据源API (遵循 RESTful 规范)
      schema: { // 板块数据结构
        type: 'object',
        properties: {
          key: {
            ...schema, // 标准 schema 配置
            type: "", // 字段类型
            label: "", // 字段的中文名
            // 字段在 table 中的相关配置
            tableOption: {
              ...elTableColumnConfig,
              toFixed: 0, // 小数点后保留位数
              comType: "", // 自定义内容 image  mapping, tpl, 不传就显示字段返回的内容
              // 当 comType === tpl 
              tpl: '', //  支持 html, 取列表值 用${key} key 为 字段名， '<div>${key}<div>'
               // 当  === mapping
              map: {}, // 映射， 值支持 html
              
              visible: true, // 默认为 true (false时， 表示不在表单中显示)
            },
            // 字段在 search-bar 中的相关配置
            searchOption: {
              ...eleComponentConfig, // 标准 el-component-column 配置
              comType: '', // 配置控件类型 input/select/...
              default: '', // 默认值

              // comType === 'select'
              enumList: [], // 下拉框可选项

              // comType === 'dynamicSelect'
              api: ''
            },
            // 字段在不同动态 component 中的相关配置， 前缀对应 componentComfig 中的键值
            // 如：componentConfig.createForm, 这里对应 createFormOption
            // 字段在 formPanel 中相关配置
            formPanelOption: {
              ...eleComponentConfig, // 标准 el-component-column 配置
              comType: '', // 控件类型 input/select/...

              // 当 comType === select，且存在 api 时，请求接口的参数
              params: {},
              visible: 'visible', // 是否展示 (visible(显示)/none(隐藏)/hidden(隐藏-保留值), 默认为 visible
              disabled: false, // 是否禁用 (true/false), 默认为 false
              default: '', // 默认值
              // 字段联动协议 object, 多个时候为 array
              reactions: {
                dependencies: [], // 依懒的字段路径
                effectType: "", // 联动效果类型， 枚举值：value(值) / visible(显隐) / disabled(禁用) / enum(选项)
                /**
                 * 联动效果
                 * $dep 依赖字段的值
                 * 如 $dep[0] * $dep[1] ?? 0
                 */
                effect: ''
              }, ...],
              add: {}, // 新增表单相关配置, 可继承 formPanelOption 配置
              edit: {
                hasDetails: true, // true 表示需要请求详情况接口，false 时直接取列表的值
              }, // 编辑表单相关配置, 可继承 formPanelOption 配置
              // comType === 'select' 时生效
              enumList: [],   // 枚举列表
              // comType === 'dynamicSelect'
              api: '', 
              // label 是否显示 : , 设置 colon 等 false 的时候不显示
              colon: false,
              labelAlign: 'end', // label 对其方式，默认 end(右对齐) start(左对齐)
            },
            // 同 formPanelOption
            formPageOption: {

            },
            detailPanelOption: {
              ...eleComponentConfig, // 标准 el-component-column 配置
            }
          },
          ...
        },
        require: [], // 标记哪些字段是必填项
      },
      // table 相关配置
      tableConfig: {
        headerButtons: [{
          label: "", // 按钮中文名
          eventKey: "", // 按钮事件名
          eventOption: {
            // 当 eventKey === 'showComponent'
            comName: ''
          }, // 按钮事件具体配置
          ...elButtonConfig, // 标准 el-button 配置
        }, ...],
        rowButtons: [
          {
            label: "", // 按钮中文名
            eventKey: "", // 按钮事件名 remove 删除 change 改变数据状态 group 集合
            subButtons: [{
              ...  // 属性同父， 但不支持
            }, ...], // 子按钮
            visible: '$rowData.state === 1', // 是否显示
            eventOption: {
              // 当 eventKey === 'showComponent'
              comName: '', // 组件名称

              // 当 eventKey === 'remove'
              params: {
                // paramKey = 参数的键值
                // rowValueKey = 参数值, 格式为：schema::tableKey, 到 table 中找响应的字段
                paramKey: rowValueKey，
                // 当 eventKey === 'change' 时接口参数， 如果要字符串需如 "'cccc'" 设置
                paramKey: '$rowData.id'
              },
              // eventKey === 'change' 需要传api
              api: ''， // api 接口
              tip: '' // 二次确认提示
            }, // 按钮事件具体配置
            ...elButtonConfig, // 标准 el-button 配置
          },
          ...
        ],
      },
      // search-bar 相关配置
      saerchConfig: {},
      // 动态组件 相关配置
      at:{

        // 表单相关配置
        formPanel: {
          add: {
            title: '', // 表单标题
            saveBtnText: '', // 保存按钮文案
          },
          edit: {
            mainKey: '', // 表单主键，用于喂一标识要修改的数据对象
            title: '', // 表单标题
            saveBtnText: '', // 保存按钮文案
          },
        },
        // detail-panel 相关配置
        detailPanel: {
          mainKey: '', // 表单主键，用于喂一标识要修改的数据对象
          title: '', // 表单标题
        }
      }
    },
  }, ...],

}

服务端启用

const { serverStart } = require("@cxb_npm/elpis");

// 启动 elpis  服务
const app = serverStart({});

自定义服务端

• router-schema
• router
• controller
• service
• extend
• config

前端构建

const { frontendBuild } = require("@cxb_npm/elpis");

// 编译构建前端工程
frontendBuild(process.env._ENV);

自定义页面扩展

• 在 app/pages/ 目录下写入口 entry.xxx.js

dashboard / custom-view 自定义页面扩展

• 在 app/pages/dashboard/xxxx 下写页面

dashboard / schema-view / components 动态组件扩展

1. 在 app/pages/dashboard/complex-view/schema-view/components 下写组件
2. 配置到 app/pages/dashboard/complex-view/schema-view/components/component-config.js 中

schema-form 控件扩展

• 在 app/widgets/schema-form/complex-view 下写控件
• 配置到 app/widgets/schema-form/form-item-config.js 中

schema-search-bar 控件扩展

• 在 app/widgets/schema-search-bar/complex-view 下写控件
• 配置到 app/widgets/schema-search-bar/search-bar-config.js 中