db-metadata前端组件库

数据驱动的前端组件库(基于Vue + elementUI).需要配合后端(DBMS)使用, 形成快速开发平台.以表驱动一套完整的业务模块.　需要做的仅仅是做一些配置.或开发自己的模板. 后端地址: db-metadata-service

配置说明

axios : axios配置对象,　由于meta-element内部会进行axios请求, api接口的根路径需要通过此进行配置,　以及一些其他关于axios的配置。
authorities: meta-element内置了Vue全局方法$hasAuth,　并且内部部分组件需要进行权限控制, 此属性是内部鉴权的角色依据.
其他...

-[x] meta-Manager 默认不加载 -[x] 每个需要meta的组件都需要传入objectCode, 在meta的一级属性上添加 -[x] 组件meta数据准备和组件渲染顺序, 是否应该支持异步渲染组件？ - meta就绪前,是否应当渲染组件,亦或是阻塞(类似于v-if的手段)。目前的设计是, meta非必选; - 异步渲染的目标, 是希望meta数据就续前, 不影响组件的渲染, 等meta数据就绪后, 支持流入组件, 组件内部再根据meta进行重新构建组件并渲染 > [解决] prop本身为单向流入, 介于组件内部会将prop传入的meta与全局配置meta执行merge操作, 导致有些属性未被vue跟踪. 因此在merge操作中支持Vue.$set进行k-v合并, 即可解决此问题.

-[x] 专门封装一个http请求, 对响应数据进行校验, 含有\则reject, 或报错(axios/case.js) -[x] 对$message进行封装处理: element支持, 但需要对resp和err进行"msg"属性保障处理(responseExchange.js) -[x] vue watch 看上去时生效, 时而不生效(data_url延迟) -[x] 组件中的变量初始值统一(null, {}等): 基本类型null, 对象{}/数组[] -[ ] 创建一个Meta class, 对所有组件的prop: meta 进行强类型校验, 同时初始化meta(和全局默认meta进行merge) -[ ] 重复路由点击报错(NavigationDuplicated), element bug. 等待element(2.13). https://github.com/ElemeFE/element/pull/17269 -[ ] 思考组件强干预的策略: - 广泛应用插槽(视图干预) - ref引用(逻辑干预) - 模板(DOM)替换(模板干预: 视图、逻辑全替换, 支持可脱离vue单页应用?)

-[x] DropDownBox, RadioBox, CheckBox支持三种传入选项数据的方式: - 硬编码传入options属性 - 组件元对象中定义options属性和值 - data_url组件内自动获取选项数据(GET), 响应格式需为[{key:value}, ...],若不满足,需要给组件元数据定义behavior选项,并自定义'format'函数,将响应数据转换为key-value格式

优先级: 逐渐降低. 数据格式均需满足: [{key:value}, ...]

-[x] CheckBox支持(a,b,c 多值形式)

-[ ] 组件中各个属性先后位置尽量统一

    name
    mixins
    component
    props
    data
    methods
    watch
    beforeCreated
    created
    beforeMounted
    mounted
    computed

-[x] 不同组件中相同功能的属性命名尽量统一 -[x] const、let 分时适用 -[x] 对象属性调用方式, 应当形成规约: obj.a OR obj['a']: 属性读取超过两级, 第二级后用['']方式读取 -[x] this泛用优化: 箭头函数内部保留this作用域, 因此可以直接调用this; -[x] MetaConf界面优化-每个field单独一个JsonBox编辑框, 可单独编辑, 也可整体上传 -[x] 后期根据表单生产器可视化拖拽创建配置

-[ ] 表格(TableList) -[x] 字段值过长, 省略隐藏(...): 支持配置(element ui查询) -[x] 单行CRUD: 新增、查询、更新、删除 -[x] 表格的单行/多行模式配置 -[x] 表格多行模式下, 单击编辑/删除, 防止事件冒泡 -[ ] 编辑行时, 涉及多个组件的跳转(跳转方式的配置),例如： - 弹框: TableList => FormTmpl - 开页: TableList => FormTmpl

    需要思考
-[x] 下拉设置列显隐功能 由renderHeader实现 =>(替换为) 插槽实
-[x] 表格的操作条支持插槽扩展
-[ ] 目前SearchPanel没有嵌入在TableList, 存在一个问题: 当SearchPanel中有输入值, 
再去改选TableList字段显隐时, SearchPanel中的参数如何带入到触发的搜索中？
-[x] 表格排序支持: 
    ```
    设置字段的conf['sortable']为:
    1. false: 不允许排序(默认)
    2. true:  单页排序
    3. custom: 服务端排序
    ```
-[x] 主键名由后端提供(meta.objectPrimaryKey), 需要支持联合主键问题。当组件为联合主键时,编辑/新增判断需要调整支持, 批量删除需要调整支持(接口需要调整)
-[x] 像activeData, choseData目前并不支持从父组件流入其中，只是单向从TableList流向父组件，因此改为emit触发，还可以取消父组件对该属性的watch
-[ ] 行数据查看(form只读)目前两种方案: 1. 双击行(或添加“查看”按钮); 2. 行下拉展开详细信息
-[ ] 更多定制化的行操作按钮可以提供一个hover的“更多”下拉菜单
-[ ] 除了弹窗, 也需要支持右侧抽屉拉出模式——不同按钮操作下,抽屉和弹窗两种模式如何通过配置指定？
-[ ] 单元格render(转义)

-[ ] Tree -[x] 多选(check) -[ ] 搜索过滤 -[x] 展开/收缩所有 -[x] 全部勾选/取消全选/反选 -[ ] 添加/删除(批量)/编辑节点

-[ ] 表单Box(FormTmpl) -[x] 表单布局: 针对每个控件配置自定义(非element原生支持)inline属性 -[x] 区分表单编辑/新增模式 -[ ] 更新/新增模式下字段的不同属性配置, 可以设置两套配置(新增、编辑)- 暂定用一套配置。需要支持： - [x] 字段新增状态下：正常|隐藏|只读|禁用 - [x] 字段更新状态下：正常|隐藏|只读|禁用 - [x] 字段查看状态下：正常|隐藏|只读|禁用根据接口(toUpdate/toAdd/toView)可以做处理, 前端透明; 对应配置为: - 正常(能看,能生成sql): (showable: true, readonly:false, disabled: false) - 隐藏(不能看,能生成sql: (showable: false, readonly:true, disabled: false) - 只读(能看,不生成sql): (showable: true, readonly: true, disabled: true) - 禁用(不能看,不生成SQL: (showable: false, readonly: true, disabled: true)

-[ ] 表单渲染时需要整齐划一,控件的宽度统一指定;

-[ ] dialog -[x] ~~dialog 全局配置~~

-[ ] JsonBox -[x] 内部做兼容,支持Object, String(可转换为Object)

-[ ] BoolBox -[x] 添加对[false, true, "false", "true", 0, 1, "0", "1", "f", "t"]的支持, 保存时保留原值;

-[ ] SearchPanel 搜索面板 -[x] 参见jsonTemplate.json或者default.js -[x] SearchPanel脱离FormTmpl独立, 内部根据SearchPanel的meta另行实现,需要考虑范围搜索(如日期范围,需要两个日期控件), 大于等于等； 操作符： - 等于(eq) - 不等于(ne) - 大于(gt) - 小于(lt) - 大于等于(ge) - 小于等于(le) - 范围(range) - in(in) - 模糊(like: 左匹配、右匹配，全匹配)

-[ ] FindBox 搜索框 -[x] 搜索框，参见jsonTemplate.json或者default.js -[ ] 支持多选 -[x] 支持sql配置FindPanel可选内容

-[ ] FileBox 文件上传

```js
    // 上传后响应的数据
    [
       {"name": "readme.txt", "suffix": "txt", "url": "http://xxx", "token": "xxx"},
       // ...    
    ]
```

-[ ] ImgBox 图片上传 -[ ] 编辑表单时, ImgBox字段对应的value中键url的值应当为图片资源路径, 否则无法呈现并预览图片

-[ ] FindPanel 查找面板(复杂) -[x] 参见jsonTemplate.json或者default.js -[x] 支持数组(多选)回选

-[ ] Meta-Conf -[ ] 表单保存格式问题, 如果元对象编码和字段名一致导致key重复 - 当前保存的格式为： { // 组件 TableList: {}, // 元对象 test_table: {component_name: 'TableList', name: '', label: '', conf: {}}, // 下面是字段 id: {}, created_by: {}, // 其他字段 ... } - 可以改为: { component: { TableList: {}, }, object: { test_table: {} }, field: { id: {}, created_by: {}, // 其他字段 ... } } -[ ] ~~支持element原生属性的配置改为表单输入, 表单的构建建立在对element原生控件props的准确获取.~~ -[x] 支持iframe可跳转至业务组件, url传参(?componentCode=&objectCode=), 组件接受的路由参数可从splitRoute.js中参考 -[x] FormBuilder 表单项/表单属性编辑转换为表单(element ui 配置简化采用JsonBox) -[ ] 组件复用方式, 如何方便、可靠的提供给其他应用复用组件: npm install -[ ] meta_feature中的config字段需要根据featureType加载不同的mini表单——等featureType类型较多时再采用此方案 -[x] 新增功能弹窗，主键的输入改成下拉选择

    类似这样的输入都限定下拉选择；数据驱动一切，因此项目中数据的正确性至关重要，所有用户输入的入口，都必须用尽办法保证输入的正确性

-[x] created中初始化一些meta数据, mounted初始化业务数据

功能模板结构(config)

SingleGridTableTmpl —— 单表模板：普通表

   {
     "icon": "el-icon-s-grid", 
     "singleGrid": {
       "objectCode": "test_table"
     }
   }

MasterSlaveTableTmpl —— 主子表模板

   {
     "master": {
       "objectCode": "meta_object",
       "primaryKey": "code"
     },
     "slaves": [
       {
         "objectCode": "meta_field",
         "foreignFieldCode": "object_code",
         "order": 1
       },
       {
         "objectCode": "meta_change_log",
         "foreignFieldCode": "object_code",
         "order": 2
       }
     ],
     "icon": ""
   }

DataListTableTmpl —— 左侧列表-右侧单表模板

   {
     "list": {
       "objectCode": "XXX",
       "primaryKey": "x",
       "label": ""
     },
     "table": {
       "objectCode": "YYY",
       "foreignFieldCode": "y"
     },
     "icon": ""
   }

TreeSingleGridTmpl —— 单表模板：可展开的树表

   {
       "icon": "el-icon-s-management",
       "table": {
           "objectCode": "YYY",
           "primaryKey": "id",
           "foreignKey": "pid"
       }
   }

TreeTableTmpl —— 左侧树-右侧表模板

   {
     "tree": {
       "objectCode": "",
       "primaryKey": "",
       "idKey": "",
       "pidKey": "",
       "rootIdentify": "",
       "label": "",
       "isSync": false
     },
     "table": {
       "objectCode": "",
       "foreignFieldCode": "y"
     },
     "icon": ""
   }

TableFromTmpl —— 左侧表-右侧表单模板

   {
     "table": {
       "objectCode": ""
     },
     "icon": ""
   }

TreeFormTmpl —— 左侧树-右侧表单模板

   {
     "tree": {
       "objectCode": ""
     },
     "form": {
       "objectCode": ""
     },
     "icon": ""
   }

系统固定模板

MetaDataManager -[ ] MetaDataManager为系统模板, 模板类型为主子表(MasterSlaveTableTmpl)), 但内部并基于MasterSlaveTableTmpl扩展.需要重构, 重构思路:

1). 基于MasterSlaveTableTmpl扩展, 需要升级MasterSlaveTableTmpl使之具备这般可扩展性; 2). 依旧将MetaDataManager作为系统固化模板, 取消对feature的请求, 直接请求主子元对象(meta_object, meta_field), 从而取消歧义;

目录结构NEW

- document
- public
- packages
    - dropdownbox
    - ...
- src
    - mixins
    - utils
    - axios
    - constant
    - router
    - config
    - meta
    - layout
    - ...

其他资料

vue中动态增加method https://stackoverflow.com/questions/51797029/create-method-dynamically-in-vue-js

vue cli3使用vue.config.js，不再使用传统的webpack, 导致别名路径@设置后, IDE无法识别(@/constant).

  解决办法：将别名设置的部分抽取出来放到单独的配置文件`alias.config.js`，再配置IDE, WebPack->webpack configuration file 设置为alias.config.js即可。

ChangeLog

参见 changelog.md

db-metadata

db-metadata前端组件库

使用方式

iframe引入

项目构建

配置说明

组件库介绍

资料

表单设计器

说明

响应数据格式为

概念

TODO

功能模板结构(config)

系统固定模板

目录结构NEW

其他资料

ChangeLog

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators