@heisea/field

fieldjs

字段配置主要是方便配合配置类型的开发模式,通过便捷的数据配置,快速的编译出视图需要展示的配置,建议后端相同描述对应的字段应该是相同的，因此我们字段集中字段都是唯一的，在调用getTableInfo时会去除非必要配置生成{name:'',label:'','extend':{'min-width':''}}的配置

更新说明

v0.2.2

• upd: 列表添加desc判断调整

v0.2.1

• fix: 修复搜索项添加全部选项数据污染

v0.2.0

• feat: 新增refreshHeaders配置方法，解决退出重新登录，文件上传headers内容不刷新 v0.1.6
• fix: 修复深度拷贝类型判断存在错误
• upd: 优化搜索项存在props时,不会自动填充全部选项

v0.1.5

• upd: 优化配置同时存在name跟setName时，生产配置name顺序在setName后，会覆盖setName值

v0.1.4

• feat: 添加单个字段desc配置

v0.1.3

• fix: minWidth配置不生效

v0.1.2

• fix: Decs配置不生效

v0.1.1

• fix: 深拷贝被污染

v0.0.15

• feat: 字段不全label
• feat: getFieldName 快速获得对应name

v0.0.14

• fix: _getFilterArr 传入字段为空字符串时，不生成未匹配对象

v0.0.11

• fix: 初始化 desc修改为Decs

v0.0.10

• fix: getFormInfo {name:[查询字段]}覆盖原来字段

v0.0.9

• upd:添加 getTableInfo 时将会继承原本的所有属性以免错过属性，可以使用过滤过滤调不想要的属性
• upd:统一配置的优先级将低于原属性
• fix:深拷贝被污染
• feat: getField 获得字段信息

v0.0.8

• feat: 初始化参数{decs:'decs',decsTypes:['select', 'radio', 'checkbox']}添加，当有decs会为 getTableInfo 为type为decsTypes中包含生成一个描述字段如[name]decs的

v0.0.7

• feat: getFormInfo searcher过滤搜索不需要参数，并检查option并添加全部

v0.0.6

• feat: getFormInfo 添加过滤功能

v0.0.5

• fix:目标为对象时为空

v0.0.3

• feat：第一版本

兼容

• chrome //谷歌
• ie11 //IE
• safari //mac safari
• firefox // 火狐

目录说明

• build 项目脚手架配置
• lib 生产用代码
• src 源码
• index.html demo

命令

进行开发

npm start

打包出生产版本 commonjs 版本

npm run build:common

打包出生产版本 在html可引入的版本

npm run build:var

发布代码

  npm version <newversion> | major | minor | patch]

 npm publish

安装

配置NPM 地址

npm config set registry http://nexus.heisea.cn/nexus/content/groups/npm-all/	

下载包

npm i @heisea/field

使用

1.es6 引入方式

import field from '@heisea/field'

2.初始化,data参数必须配置

const StrConfig = new field({
    // 必填项 , 需要处理的字段内容
    data: {
        '引用数据名': {
            name:'数据使用的name参数',
            label:'数据的label参数',
            // ... 配置与brick数据配置一致
        }
    },
    /**
     * 选填 , 是否需要对数据做一些额外的宽度处理
     * data 当前表格数据编译后的内容
     */
    setTableWidth:(data)=>{
        data['引用数据名'].extend['width'] = '100px'
    }
})

配置说明

属性名	类型	说明
data	object	后续需要编译的字段文件集合
decs	String	默认decs为列表生成描述字段，用原有字段+decs字段
decsTypes	Array	默认'select', 'radio', 'checkbox' 和decs配合使用，选择的类型改变
props	Object	{minWidth:'最小宽度'// 默认minWidth }

Function

属性名	类型	说明
getFormInfo	(array	string),Object,Array2
getTableInfo	array	string
getField	String1,String2	String1 要查找的信息 String2 对应的字段

3.基本使用

// 创建字段文件,并在字段配置实例化时引入
let strObj = {
    '姓名': {
        name:'name',
        label:'姓名',
        type:'input'
    },
    '年龄': {
        name:'age',
        label:'年龄',
        type:'input'
    }
} 

const StrConfig = new StrConfig({
    data:strObj
})

// 开发时只要引入字段的属性名,我们特地为table跟form分别使用不同的方法

// 使用getFormInfo进行form的数据生成
StrConfig.getFormInfo(['姓名','年龄'])

// 编译后的数据
[
    {
        name:'name',
        label:'姓名',
        type:'input'
    },
    {
        name:'age',
        label:'年龄',
        type:'input'
    }
]

// 使用getTableInfo进行table的数据生成
StrConfig.getTableInfo(['姓名','年龄'])

// 编译后的数据
[
    {
        name:'name',
        label:'姓名',
        extend:{
            'min-width':'60px'
        }
    },
    {
        name:'age',
        label:'年龄',
        extend:{
            'min-width':'60px'
        }
    }
]

4.当引用字段集合的属性时,要对部分属性做特殊化处理

// 我们对getFormInfo和getTableInfo数组参数做了一些处理,分别支持string和object两种类型的引入,string会默认直接使用字段集合配置的属性,object则可以做一些额外的扩展处理

StrConfig.getFormInfo([
    '姓名',
    {
        name:'年龄',
        type:'select',
        options:[
            {
                label:'0~20',
                value:1
            },
            {
                label:'21~40',
                value:2
            }
        ]
    }
])

// 编译后
[
    {
        name:'name',
        label:'姓名',
        type:'input'
    },
    {
        name:'age',
        label:'年龄',
        type:'select',
        options:[
            {
                label:'0~20',
                value:1
            },
            {
                label:'21~40',
                value:2
            }
        ]
    }
]

// 可以发现,我们把原来年龄属性的内容与现在扩展的内容进行的组合,当属性发生冲突时,我们以当前配置的优先

注意:由于name关键字已经被我们使用,所以如果想想改属性的name属性,则需要使用另外一个属性setName

StrConfig.getFormInfo([
    {
        name:'姓名',
        setName:'nickname'
    }
])

// 编译后
[
    {
        name:'nickname',
        label:'姓名',
        type:'input'
    }
]

5.我们也可以对form引用的数据做一些统一的处理,比如全部加个"只读"属性

// getFormInfo的第二参数为对引用的数据集合字体加一个或多个属性,第三个参数为这些属性的属性值

StrConfig.getFormInfo(['姓名','年龄'],{readonly:true})

// 编译后
[
    {
        name:'name',
        label:'姓名',
        type:'input',
        readonly:true
    },
    {
        name:'age',
        label:'年龄',
        type:'input',
        readonly:true
    }
]

// 我们会对属性做一一对应
// 注意,如果我们对引用的数据已经做了一些和统一配置的属性一直的配置操作,则优先会已数据内的配置为准
StrConfig.getFormInfo([
    {
        name:'姓名',
        readonly:false
    }
],readonly:true)

// 编译后
[
    {
        name:'name',
        label:'姓名',
        type:'input',
        readonly:false // 已配置为准
    }
]

// 优先级为  数据单独配置 > 数据统一配置 > 字段集合默认配置