/*
*发布商品的布局(表单内容) 一行多列 左侧label 右侧内容
* */
import React, { PureComponent, Fragment } from 'react';
import {
Form, Select, Icon, Row, Col, Input, InputNumber, DatePicker, TreeSelect, Cascader, Checkbox, Radio, Upload, Button, Tooltip,
} from 'antd';
import global from '@/global.less';
import styles from './index.less';
import { sldInputAfterAddons, sldBeforeUpload, getSldComImg, sldComLanguage, getLocalStorageStingVal } from '@/utils/utils';
const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const InputGroup = Input.Group;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
const Option = Select.Option;
const { TextArea } = Input;
export default class SldTableRowTwo extends PureComponent {
constructor(props) {
super(props);
this.state = {
props_data: props,
};
}
componentWillReceiveProps(props) {
this.setState({
props_data: props,
});
}
//处理input内容变化事件
handleInputOnchange = (e, item) => {
if (item.handleChange) {
item.handleChange(e);
}
};
//处理复选框变化事件
handleSingleCheckboxOnchange = (e, item) => {
if (item.onChange) {
item.onChange(e);
}
};
//多选事件
sldCheckShop = (items, value) => {
if (items.sldCheckShop) {
items.sldCheckShop(value);
}
};
redioOnChange = (e, val) => {
if (val.onChange) {
val.onChange(e.target.value);
}
};
//图品的点击预览
sldShowImgPre = (val,item) => {
if (val.preView) {
val.preView(true, item);
}
};
radio_select = (e, item) => {
if (item.callback) {
item.callback(e);
}
};
commonCon = (val, index) => {
let {
form: { getFieldDecorator }, item_width,
} = this.props;
//普通输入框
item_width = item_width != undefined ? item_width : 'auto';
const uploadButton = (
);
if (val.type == 'input') {
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
,
)}
);
}else if (val.type == 'show_text') {
//内容展示,目前用于商品详情页
return (
{val.text.length>84
?
{val.text.substring(0,83)}...
:val.text
}
);
}else if (val.type == 'show_text1') {
//内容展示,目前用于商品详情页
return (
{val.text.length > 30 ? val.text.substring(0,30) + '...' : val.text}
);
}else if (val.type == 'show_goods_img_more') {
//展示商品图片(多图),目前用于商品详情页
return (
{val.data.length > 0 && val.data.map((item,index)=>{
return
this.sldShowImgPre(val,item.imageUrl)} style={{flexDirection:'row',justifyContent:'center',alignItems:'center',overFlow:'hidden',width:100,height:100,display:'inline-flex',backgroundColor:'#F8F8F8',marginRight:10}}>
;
})}
);
} else if (val.type == 'inputnum') {
//数字搜索框
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })( this.handleInputOnchange(e, val)}/>)}
);
} else if (val.type == 'select') {
//下拉选择框
return (
{getFieldDecorator(val.name, val.initialValue ? {
initialValue: val.initialValue,
rules: val.rules,
} : {
rules: val.rules,
})(
,
)}
);
} else if (val.type == 'multiple_select') {
//下拉多选框
return (
{getFieldDecorator(val.name, val.initialValue ? {
initialValue: val.initialValue,
rules: val.rules,
} : {
rules: val.rules,
})(
,
)}
);
} else if (val.type == 'textarea') {
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
);
} else if (val.type == 'rangepicker') {
//时间范围选择器
return (
{getFieldDecorator(val.name)(
{
return triggerNode.parentNode
}}
/>,
)}
);
}else if (val.type == 'checkboxgroup') {
//checkbox多选
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
this.sldCheckShop(val, value)}/>,
)}
);
} else if (val.type == 'datepicker') {
//时间选择器
return (
{val.initialValue && getFieldDecorator(val.name, {
initialValue: val.initialValue,
rules: val.rules,
})(
{
return triggerNode.parentNode
}}
/>,
)}
{!val.initialValue && getFieldDecorator(val.name, { rules: val.rules })(
{
return triggerNode.parentNode
}}
/>,
)}
);
} else if (val.type == 'rangeval') {
//范围选择器
return (
{getFieldDecorator([val.name1])()}
{getFieldDecorator([val.name2])()}
);
} else if (val.type == 'input_after') {
//带图标后缀
return (
val.callback(val.operate_obj)}>
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
,
)}
);
} else if (val.type == 'textarea_single') {
return
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
;
} else if (val.type == 'TreeSelect') {
return
{getFieldDecorator(val.name, {
initialValue: val.initialValue == '' ? undefined : val.initialValue,
rules: val.rules,
})(
triggerNode.parentNode}
/>,
)}
;
} else if (val.type == 'cascader') {
//店铺分类选择
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
,
)}
);
}else if (val.type == 'cascader_area') {
//三级地址选择
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
,
)}
);
} else if (val.type == 'single_checkbox') {
//选择框
return (
{getFieldDecorator(val.name, {
valuePropName: 'checked',
initialValue: val.initialValue,
rules: val.rules,
})(
this.handleSingleCheckboxOnchange(e, val)}
>
{val.check_con}
,
)}
);
} else if (val.type == 'radio') {
//radio
return (
{getFieldDecorator(val.name, {
valuePropName: 'checked',
rules: val.rules,
initialValue: val.initialValue,
})(
this.redioOnChange(e, val)}>
{val.sel_data.map((item, index) => {
return {item.name};
})}
,
)}
);
} else if (val.type == 'radio_select') {
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
this.radio_select(e, val)}>
{val.data.map((cval, ckey) => {
return {cval.value};
})}
,
)}
);
} else if (val.type == 'checkboxgroup') {
//radio
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
this.sldCheckShop(val, value)}/>,
)}
);
} else if (val.type == 'upload_img_upload') {
return
val.uploadPreview(info)}
onChange={(info) => val.uploadChange(info,val.extra_param!=undefined?val.extra_param:{})}
headers={{
Authorization: 'Bearer ' + getLocalStorageStingVal('sld_token')
}}
>
{val.fileList.length >= (val.num!=undefined?val.num:6) ? null : uploadButton}
;
} else if (val.type == 'show_img_more') {
return
{val.data.map(item=>{
return
{getSldComImg(item,200,200,100,100)}
})}
;
} else if (val.type == 'goods_spec_sele') {
let con =
{
val.sel_data.length > 0 && val.sel_data.map((vall, keyl) => {
return
{vall.name}
{vall.attrList.length > 0 &&
{vall.attrList.map((valr, keyr) => {
return {valr.name}
{vall.type == 2 &&
val.uploadPreview(info)}
onChange={(info) => val.uploadChange(info)}
headers={{
Authorization: 'Bearer ' + getLocalStorageStingVal('sld_token')
}}
>
{uploadButton}
}
;
})}
}
;
})
}
;
return con;
} else if (val.type == 'show_text_btn') {
return
{val.initialValue}
{val.btn != undefined &&
}
;
} else if (val.type == 'cascader_common') {
//多级联动选择器-通用
return (
{getFieldDecorator(val.name, { initialValue: val.initialValue, rules: val.rules })(
val.onChange(selectedOptions)}
placeholder={val.placeholder}/>,
)}
);
}
};
render() {
const { data, lwidth, rwidth, totalHeght, part_width } = this.state.props_data;
let {
form: { getFieldDecorator },
} = this.props;
const total_width = document.body.clientWidth-208;
const cur_height = totalHeght != undefined ? totalHeght : 70;
return (
{data != undefined && data.length > 0 && data.map((val, index) => {
return
{val.required != undefined && val.required && *}
{val.label}
{this.commonCon(val, index)}
;
})}
);
}
}