基于react实现通用后台管理系统
这套系统是基于vue的通用管理系统的react实现。主要目标是实现配置化开发后台页面。
一个页面的配置集合称为model，放在*/src/model/* 目录下。一个model由以下几个要素构成：
- fieldList 字段的集合
- listConfig 列表的配置项
- operators 针对一条记录的操作集合
- staticOperators 类似于operators，但不针对与一条特定记录(比如新建功能)
- filters 筛选条件的配置项
- filterOperators 针对筛选的操作
fieldList是字段的集合，鍵是字段名，值是字段的描述。
关于栏位的描述可以自行扩展，针对于后台业务，目前实现了以下几种描述：
- label 栏位的展示名称
- labelComponent 用组件的形式展示栏位名称，示例如下：
labelComponent:{
default:{
component:()=>import("@/components/user/labels/LabelRedStar").then(rst=>rst.default),
exclude:['create']
},
info:{
component:()=>import("@/components/user/labels/LabelRedStar").then(rst=>rst.default),
}
},- editorComponent 编辑用的组件，示例如下：
editorComponent:{
name:"FieldString",
config:{
placeholder:'请输入客户名',
},
createConfig:{
placeholder:"测试createconfig"
},
editConfig:{
placeholder:"测试editconfig"
},
default:'',
},name属性表明使用内置的编辑组件，你也可以使用自定义的编辑组件，只需要向上面的labelComponent声明一个component属性即可。
config编辑框组件的配置项，createConfig和editConfig对应Create组件和Edit两种模式下特有的配置项。
default值是create时必须的，这个参数可以传function，Create组件会调用该函数，调用函数返回的值作为初始值。
- view
view参数是用来回答如何展示值的，目前在列表以及Info组件都用到了这个参数。
目前支持两种类型：
view:{
handler(data,config,record){
return config.prefix + data;
},
config:{
prefix:"用户名"
}
},
view:{
component:()=>import("@/components/common/views/viewEnum").then((rst)=>rst.default),
config:{
enums:genderEnum,
},
},第一种是对于简单的情况，声明一个handler即可，第二种是组件的形式，和上面的命名一致，需要component属性。
为了应对更复杂的需求，提供一个join参数，用来联合其他栏位。join参数有两种形式，一种是数组，一种是对象。对象形式意味着对于原始栏位要给个别名处理，key为原始栏位，value为别名后的栏位。
- colspan 目前用于Info Create Edit三个组件中，实际实在MetaTable这个基础组件中使用到的。示例如下：
colspan:{
create:3,
edit:3,
info:{
label:2,
field:2,
},
}一般而言一个栏位对应的label只需要站一位，所以value是数字的情况该值为field对应的colspan。当value为对象形式的时候，你可以更好的控制label和field佔用的colspan
- tableColumnConfig 在表格中table column的配置项
filters是一個數組，每一項示例如下：
{
label:"姓名",
field:"username",
editorComponent:{
name:"FieldString",
config:{
placeholder:"请输入用户姓名",
},
default:"",
},
watch:true,
},label是展示名，field是请求时的key，editorComponent是编辑框组件的配置，既可以声明name属性使用内置的编辑组件，也可以使用component属性注入一个自定义编辑组件。最后的watch属性是用来监听该组件值变化然后触发查询。
operators有两种声明方式：
{
handler(resolve,data){
Message({
message:`${data.name}不要总想着搞个大新闻`,
type:"success",
duration:2000,
})
setTimeout(()=>{
resolve();
},1000)
},
triggerConfig:{
text:"搞个大新闻",
type:"warning",
size:"small",
},
},
{
name:"delete",
component:()=>import("@/components/common/operators/Delete").then((rst)=>rst.default),
config:{
doDeleteRequest:delUser,
triggerConfig:{
text:"删除用户",
type:"danger",
size:"small",
},
}
},第一种声明一个handler，渲染为按钮，triggerConfig是对这个按钮的配置项。当点击按钮时会调用handler，此时this指向operators组件，handle被传入的第一个参数是个函数，该函数被调用后会自动刷新列表内容。
第二种声明是组件式声明，name是唯一标示，一般而言推荐和组件名称保持一致。这种方式下要通知列表更新需要组件this.props.onUpdate()。同时这一模式下还会默认传入两个参数：data和fieldList，对应这条记录以及上面的fieldList。
对于staticOperators下的component，data传入的是当前列表内容，是一个数组。除此之外还有selectedData，如果列表有选中功能，则该属性对应选择的数据。formData对应筛选组件的值(对象形式，key是field属性)。
filterOperators极少会被用到。它的data是filters组件的值。还有一个特殊属性是filters，对应上面的filters配置项。