2.1.1 • Published 6 years ago
superlist v2.1.1
使用
1、import SuperList from 'XXX/SuperList';
2、<SuperList help ref={el => this.SuperList = el} config={formData} />
//可以根据this.SuperList 调用很多SuperList方法
config配置
{
dev:true,//是否调试模式
callback:()=>{},//实列化以后将会执行
apiName:'getZjCjCarRemind',//有的话会直接去请求数据并给表单赋值
params:['id'],//请求的参数
}
已知问题:
1、图片列表只能有一个***
2、按钮显隐判断不够完善**
2、字段显隐判断不够完善**
4、textarea样式未定**
5、外部插件依赖没有抽出去(将采用props传入方式将插件完全独立)
t_0.4 log
将所有方法放到另一个文件里去了*
去除redux
去除按钮的field=yes直接发送ajax
t_0.3 log
去除redux
去除按钮的field=yes直接发送ajax
--调用--
标签
<SuperList ref={el => this.SuperList = el} config={formData} />
this.props.config.upDateState = this.upDateState.bind(this);//更新state的方法
this.props.config.setFieldsValue = this.setFieldsValue.bind(this);//更新字段值
this.props.config.setImages = this.setImages.bind(this);//更新图片集合
this.props.config.setFieldMust = this.setFieldMust.bind(this);//更新字段是否为必填
this.props.config.setFieldHide = this.setFieldHide.bind(this);//设置字段隐藏或者显示 {name:true, ...} || {name:false}
this.props.config.upDateForm = this.upDateForm.bind(this);//请求默认值并附上去 (api, body={}, callback=()=>{})
this.props.config.getAllFiledValus = this.getAllFiledValus.bind(this);//获取所有字段值 isVerify 是否验证 (布尔值)
let { setImages } = this.SuperList.props.config;
--表格配置--
const formData = {
dev:true,//是否调试模式
callback:()=>{},//实列化以后将会执行
apiName:'getZjCjCarRemind',//有的话会直接去请求数据并给表单赋值
params:['id'],//请求的参数
formConfig:[
{
label: '审批人员',//中文名
field: 'approver',//字段 ----------所有field必须是惟一的
type: 'text',//类型 ()
must: true,//是否必填
conitions: [//根据某个字段判断这整个的一些动作 和按钮一样的
{
exg: { approvalFlag: '1' },//
action: 'show', //动作 hide show disabled
}
],
render:({value, prev, allValue})=>{
if(value === '0'){
return '车辆年检'
}else if(value === '1'){
return '车辆保险'
}else {
return '未知'
}
},
other: {//同步蚂蚁 属性
placeholder: '请输入审批人员',
}
},
{
label: '选择照片',//中文名
field: 'imageList',//字段 固定
type: 'images',
files: [],
must: true
},
{//动态获取下拉数据
label: '项目名称',//中文名
field: 'projectName',//字段
type: 'select',
fetchConfig:{
params:[],
apiName:'getDepartmentMemberList',
option:{
label:'name',
value:'id',
childrenName:'oaMemberList',
option:{}
},
},
// must: true,
other: {//同步蚂蚁
cols: 2,
}
},
],
btns: [//
{
type:'sendAjax',//直接发送ajax ----暂时未改还是直接使用field为yes时直接发送ajax
field: 'yes',//提交按钮
label: '提交申请',
isVerify:true,//是否验证表单字段格式是否正确
apiName:'addZjCjApplicationForApproval',//apiName存在的话会直接发送ajax
confirmText:'确定提交吗?',//有提示文字会自动弹出提示框 string || {desc,title} 存在的话在提交时候回弹出这句话
other: {//同步蚂蚁按钮类型
type: 'primary'
},
isHide:true,
conitions:[//控制显隐
{
exg:{id:'1', name:'wang'},//条件
action:'hide', //动作 目前只写了 (hide、show、disabled)
}
],
click:({push, values})=>{
push(`/applyAdd/${values.id}`)
}
}
]
}
联动下拉配置
{
label: '项目名称',//中文名
field: 'projectForWechat',//字段
type: 'select',
children:'chargeUserForWechat',//子下拉(联动专属)
childrenApiName:'getPersonnelByProject',//子下拉的apiName
paramsField:'orgId',//子下拉请求是使用的字段名,字段值默认使用此下拉的值
fetchConfig:{
params:[],
apiName:'getProjectList',
option:{//子下拉使用的也是这个配置
label:'name',
value:'id',
otherId:'orgId'
},
},
must: true,
other: {//同步蚂蚁
cols: 1,
}
},
{
label: '指定人员',//中文名
field: 'chargeUserForWechat',//字段
type: 'select',
must: true,
parent:'projectForWechat',
defaultSelectData: [
{
value: '',
label: '请先选择项目'
}
],
other: {//同步蚂蚁
cols: 1,
}
},
//自定义组件
{
type: 'Component',
MyComponent: ProblemCard,//这个组件的props里会带着从getQuestionDetailWechat结构请求来的数据
fetchConfig: {
apiName: 'getQuestionDetailWechat',
params: ['recordid']//取的是表单里的数据
},
}