/** [onChange 勾选或取消函数] */
onChange=(e)=>{
let pridepictData=this.state.pridepictData;
pridepictData.forEach((item, i) => {
if(item.optionid==e.target.value){//当前操作的数据
item.isChecked=e.target.checked;
item.isCheckeda=e.target.checked;
}
});
this.setState({pridepictData})
}
/** [handleChange 获取] */
handleChange=(value,text)=>{
if(text=='input'){
if(value!=' '&&!isNaN(value)){
this.setState({input:value})
}
}else{
this.setState({unit:value})
}
}
/** [getData 过滤复数据 拿到本页面渲染数据] */
getData=(data)=>{
let pridepictData=[];
if(data&&data[0]){
data.forEach((item)=>{
let repeat=false;
if(data&&data[0]){
pridepictData.forEach((item1)=>{
if(item1.optionid==item.symid){
repeat=true
}
})
}
if(!repeat){//未重复
let obj={
moduleid:2,
optionid:item.symid,
optionname:item.symname,
input:'',
unit:'',
useflag:'1',
creator:window.sessionStorage.getItem('userid'),
updator:window.sessionStorage.getItem('userid'),
parentids:item.parentids,
parentid:item.parentid,
isChecked:true,
}
pridepictData.push(obj);
}
})
}
this.setState({pridepictData})
}
/** [onChoice 点击选择框函数] */
onChoice=()=>{
let {pridepictData,input,unit}=this.state;
let {getFieldValue,onChange,setInitData}=this.props;
let data=[];
let data1 = [];
pridepictData.forEach((item)=>{
console.log("pridepictData",item)
if(item.isChecked){ //选中的子项
item.input=input;
item.unit=unit;
data.push(item);
}else{
item.input=input;
item.unit=unit;
data1.push(item);
}
})
let pridepictValue=getFieldValue('pridepict');
if(pridepictValue==''||pridepictValue&&pridepictValue.length==0){//第一次设置值
onChange(data);
setInitData({pridepict:data});
}else{
let arr=[];//需要添加的数据集合
pridepictData.forEach((item)=>{
let repeat=false;
pridepictValue.forEach((item2)=>{
if(item.optionid==item2.optionid){//重复 替换相关数据
item.input=item2.input;
item.unit=item2.unit;
repeat=true;
}
})
if(!repeat){//没重复
arr.push(item);
}
})
arr.forEach((item)=>{pridepictValue.push(item)})
onChange(pridepictValue)
setInitData({pridepict:pridepictValue})
}
this.setState({pridepictData:data1,input:'',unit:'天'})
}
render() {
let pridepictData=this.state.pridepictData;
return (
<Container>
<LeftBox>已选</LeftBox>
<RightBox>
{
pridepictData&&pridepictData.length>0?
<SpecRow>
{
pridepictData.map((item)=>{
return(
<SpecCol span={8} key={item.optionid+item.optionname}>
<Checkbox
value={item.optionid} checked={item.isChecked}
onChange={this.onChange}>{item.optionname}
</Checkbox>
</SpecCol>
)
})
}
</SpecRow>
:null
}
</RightBox>
<SpecFooter>
<div style={{display:'flex'}}>
<Input style={{ width:100}} value={this.state.input} onChange={(e)=>{this.handleChange(e.target.value,'input')}}/>
<Select value={this.state.unit} style={{ width: 75 }} onChange={(value)=>{this.handleChange(value,'unit')}}>
<Option value={"天"}>天</Option>
<Option value={"周"}>周</Option>
<Option value={"月"}>月</Option>
<Option value={"季度"}>季度</Option>
<Option value={"年"}>年</Option>
</Select>
</div>
<Button type="primary" onClick={this.onChoice}>提交</Button>
</SpecFooter>
</Container>
);
}
}
componentDidMount(){
};
/** [changeCheckedValues 已选框改变函数] */
changeCheckedValues=(data,symptomData)=>{
let checklistData=[];
data.forEach((item) => {
symptomData.forEach((item1, i) => {
if(item1.symid==item){
checklistData.push(item1);
}
if(item1.symptomOptions&&item1.symptomOptions[0]){
item1.symptomOptions.forEach((item2) => {
if(item2.symid==item){
checklistData.push(item2);
}
if(item2.symptomOptions&&item2.symptomOptions[0]){
item2.symptomOptions.forEach((item3) => {
if(item3.symid==item){
checklistData.push(item3);
}
});
}
});
}
});
});
this.setState({checklistData:checklistData})
}
/** [firstSwitchModular 一级模块切换函数] */
firstSwitchModular=()=>{
this.setState({ type: type })
}
/** [handleClassifyClick tab切换函数] */
handleClassifyClick = (e) => {
this.setState({ type: e.key })
}
看看是不是需要这种：https://blog.csdn.net/qq_42415827/article/details/114638179
这个最多只能三级全选/反选，反正思路肯定差不多