From 303d818c4d13def65f202bb7502960f120dcd7cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8C=97=E6=B5=B7=E4=B8=80=E5=88=80?= <849005670@qq.com> Date: Thu, 11 Nov 2021 14:55:20 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A1=A8=E5=8D=95=E9=AA=8C?= =?UTF-8?q?=E8=AF=81=E8=A7=84=E5=88=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/form/main.js | 184 ++++++++++++-------- src/components/form/main.less | 1 + src/pages/plan/add/add.less | 7 +- src/pages/plan/add/step2.js | 81 +++++---- src/pages/system/station/main.js | 281 +++++++++++++++++-------------- 5 files changed, 315 insertions(+), 239 deletions(-) diff --git a/src/components/form/main.js b/src/components/form/main.js index 0faffbb4..893ef9d5 100644 --- a/src/components/form/main.js +++ b/src/components/form/main.js @@ -6,7 +6,7 @@ import { import _ from "lodash"; import Menu from "../menu/main.js" import ReactDom from 'react-dom'; - + export default class form extends React.Component { @@ -19,28 +19,21 @@ export default class form extends React.Component { rules: props.rules } } - + componentDidMount() { - + console.log(this) - const dom = ReactDom.findDOMNode(this); - console.log(dom) + const dom = ReactDom.findDOMNode(this); let doms = dom.getElementsByClassName("form-Item"); console.log(doms.length) for (let i = 0; i < doms.length; i++) { var com = doms[i].children; - console.log(com) let item = com[com.length - 1] let formItem = this.props.children[i]; let formItem_com = _.get(formItem, "props.children.props"); let self = this; - let input_compontent = com[1].children[0].getElementsByTagName("input") let o = com[1].children[0]; - console.log("表单内容") - console.log(formItem) - - let rules_item = _.get(self.state.rules, formItem.props.prop) if (input_compontent.length > 0) { input_compontent[0].oninput = function(e) { @@ -50,77 +43,134 @@ export default class form extends React.Component { self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); } } - for (let i = 0; i < rules_item.length; i++) { - if (e.target.value == "") { + for (let j = 0; j < rules_item.length; j++) { - if (rules_item[i].type == "required") { - self.removeClasss(item); - self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); - } - } else { - if (rules_item[i].type == "regExp") { - - var regu = rules_item[i].reg; - var re = new RegExp(regu); - let s = e.target.value; - if (re.test(s)) { - console.log("满足") - self.removeClasss(item) - - } else { - console.log("不满足") - self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); - } - } else { + if (rules_item[j].type == "required") { + console.log(6666) + if (e.target.value == "") { + console.log(77777) self.removeClasss(item) + self.isRequired(formItem_com.value, o.className, item, rules_item[j].message); + break; + } + else{ + self.removeClasss(item) } } + + if (rules_item[j].type == "regExp") { + + var regu = rules_item[j].reg; + var re = new RegExp(regu); + let s = e.target.value; + if (re.test(s)) { + console.log("满足") + self.removeClasss(item) + + } else { + console.log("不满足") + self.isRequired(formItem_com.value, o.className, item, rules_item[j].message); + } + + } + + + + + + } } - - - - input_compontent[0].onchange = function(e) { - if (e.target.value == "") { - self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); - } else { - self.removeClasss(item) - } - - } - - - + input_compontent[0].onblur = function(e) { + + for (let j = 0; j < rules_item.length; j++) { + if (e.target.value == "") { - self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); + if (rules_item[j].type == "required") { + self.removeClasss(item); + self.isRequired(formItem_com.value, o.className, item, rules_item[j].message); + } + } else { - self.removeClasss(item) + if (rules_item[j].type == "regExp") { + + var regu = rules_item[j].reg; + var re = new RegExp(regu); + let s = e.target.value; + if (re.test(s)) { + console.log("满足") + self.removeClasss(item) + + } else { + console.log("不满足") + self.isRequired(formItem_com.value, o.className, item, rules_item[j].message); + + } + } + else{ + console.log("移除") + self.removeClasss(item) + } } - + } + } + + + + // input_compontent[0].onchange = function(e) { + + // if (e.target.value == "") { + + // if (rules_item[i].type == "required") { + // self.removeClasss(item); + // self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); + // } + // } else { + // if (rules_item[i].type == "regExp") { + + // var regu = rules_item[i].reg; + // var re = new RegExp(regu); + // let s = e.target.value; + // if (re.test(s)) { + // console.log("满足") + // self.removeClasss(item) + + // } else { + // console.log("不满足") + // self.isRequired(formItem_com.value, o.className, item, rules_item[i].message); + // } + // } else { + // console.log("移除") + // self.removeClasss(item) + // } + + // } + + + // } + + + + } } } removeClasss(compontent) { var str = compontent.firstChild.className; - console.log(str) let index = str.indexOf("error"); console.log(index) if (index > -1) { compontent.firstChild.className = str.replace(" error", ""); - console.log(compontent.lastChild) compontent.removeChild(compontent.lastChild); } } isRequired(value, className, compontent, message) { - console.log(compontent.firstChild.className) - console.log(value) if (compontent.firstChild.className.indexOf("error") < 0) { - console.log(className) var error = document.createElement("div"); error.className = "error-msg" error.innerHTML = "" + message + "" @@ -143,9 +193,9 @@ export default class form extends React.Component { } } - - - validator(){ + + + validator() { console.log("表单验证") let doms = document.getElementsByClassName("form-Item"); for (let i = 0; i < doms.length; i++) { @@ -157,10 +207,8 @@ export default class form extends React.Component { let formItem_com = _.get(formItem, "props.children.props"); //对应的验证规则 let rules_item = _.get(this.state.rules, formItem.props.prop) - if(rules_item) - { - for(let j =0; j < rules_item.length ;j++) - { + if (rules_item) { + for (let j = 0; j < rules_item.length; j++) { if (formItem_com.value == "") { if (rules_item[j].type == "required") { this.removeClasss(item); @@ -168,15 +216,15 @@ export default class form extends React.Component { } } else { console.log("规则验证") - + if (rules_item[j].type == "regExp") { - + var regu = rules_item[j].reg; var re = new RegExp(regu); let s = formItem_com.value; console.log("验证条件") console.log(s) - + if (re.test(s)) { console.log("满足") this.removeClasss(item) @@ -187,15 +235,15 @@ export default class form extends React.Component { } else { this.removeClasss(item) } - + } - + } - + } } } - + render() { return ( < div className = "form" > { diff --git a/src/components/form/main.less b/src/components/form/main.less index 438cecd7..43a1b59e 100644 --- a/src/components/form/main.less +++ b/src/components/form/main.less @@ -17,6 +17,7 @@ width: 80%; height: 100%; padding-top: 20px; + position: relative; } .error{ diff --git a/src/pages/plan/add/add.less b/src/pages/plan/add/add.less index e4fa2b49..1d0552cf 100644 --- a/src/pages/plan/add/add.less +++ b/src/pages/plan/add/add.less @@ -94,4 +94,9 @@ } .plan-title{ padding-bottom:20px ; -} \ No newline at end of file +} +.import-btn{ + position: absolute; + left: 420px; + top: 20px; +} diff --git a/src/pages/plan/add/step2.js b/src/pages/plan/add/step2.js index 8e0d408c..6a0a793b 100644 --- a/src/pages/plan/add/step2.js +++ b/src/pages/plan/add/step2.js @@ -1,10 +1,11 @@ import ReactDOM from 'react-dom'; import React, { Component } from 'react'; import { HashRouter as Router, Route, Link } from "react-router-dom"; -import { Button ,Tabs, CombinedDateRangePicker,Select,Input} from 'zent'; +import { Button ,Tabs, CombinedDateRangePicker,Select,Input,Checkbox } from 'zent'; import Ipt from "../../../components/input/main" import Form from "../../../components/form/main" import FormItem from "../../../components/form-item/main" + const TabPanel = Tabs.TabPanel; export default class acclist extends React.Component{ @@ -17,7 +18,8 @@ export default class acclist extends React.Component{ reseller:"", return_id:"", date_time:"" - } + }, + checkedList:[] } } @@ -27,34 +29,28 @@ export default class acclist extends React.Component{ submit(){ this.refs.form1.validator() } + onCheckChange = (checkedList) => { + this.setState({ checkedList }); + } render(){ //校验规则 const rules = { - name: [ - { type: "required", message: "请输入变更主题"}, - { type: "regExp", message: "格式不对",reg:"^[1][3,5,7,8][0-9]\\d{8}$"}, - ], - reseller: [ - { type: "required", message: "请选择分销商"}, - ], - date_time: [ - { type: "required", message: "请选择时间"}, - ], + } - const type = [ - + const style = [ + , - - + , + + , ]; const return_val = [ - + , - - + , ]; @@ -80,17 +76,10 @@ export default class acclist extends React.Component{ return(
- - { - let model2 = this.state.model; - model2.name = e; - this.setState({model:model2}) - }} value={this.state.model.name} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'520px'} alignment={'left'}/> - - + - {type} + type="button" > + {style} @@ -101,19 +90,29 @@ export default class acclist extends React.Component{ {return_val} - - - + + { + let model2 = this.state.model; + model2.name = e; + this.setState({model:model2}) + }} value={this.state.model.name} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'400px'} alignment={'left'}/> + + + + + + 兑换码 + 优惠券 + 立减金 + + + + + + + +
) diff --git a/src/pages/system/station/main.js b/src/pages/system/station/main.js index 3cba426e..93113c1b 100644 --- a/src/pages/system/station/main.js +++ b/src/pages/system/station/main.js @@ -19,128 +19,128 @@ export default class station extends React.Component{ post:[{id:1-1-1,name:'后端'},{id:2,name:'前端'},{id:3,name:'测试'}], } this.addItem=this.addItem.bind(this); + this.sureFn=this.sureFn.bind(this); } - onChange = options => { - this.setState(options); - }; //弹出框 setVisible = visible => { this.setState({ visible }); }; saveFn(e,placeholder){ - if(e.innerHTML=="取消"){ - if(placeholder=='公司'){ - this.setState({'companyBtn':true}); - }else if(placeholder=='部门'){ - this.setState({'departmentBtn':true}); - }else if(placeholder=='岗位'){ - this.setState({'postBtn':true}); - } - e.parentNode.parentNode.remove(); - }else{ - this.setState({visible:true}); - } + // if(e.innerHTML=="取消"){ + // if(placeholder=='公司'){ + // this.setState({'companyBtn':true}); + // }else if(placeholder=='部门'){ + // this.setState({'departmentBtn':true}); + // }else if(placeholder=='岗位'){ + // this.setState({'postBtn':true}); + // } + // e.parentNode.parentNode.remove(); + // }else{ + // this.setState({visible:true}); + // } } editFn(e,placeholder){ - let cssname=null; - let stationame=[]; - if(placeholder=='公司'){ - cssname='companyBtn'; - stationame=this.state.company - }else if(placeholder=='部门'){ - cssname='departmentBtn'; - stationame=this.state.department - }else if(placeholder=='岗位'){ - cssname='postBtn'; - stationame=this.state.post - } - if(e.parentNode.parentNode.children[0].value){ - if( e.innerHTML=="保存"){ - if(this.hasVal(cssname,e.parentNode.parentNode.children[0].value)>-1){ - Notify.clear() - Notify.warn(`公司名重复`); - }else{ - e.parentNode.firstChild.innerHTML='删除'; - e.parentNode.parentNode.children[0].disabled="disabled"; - e.parentNode.parentNode.className=cssname+" newitem"; - Notify.clear() - Notify.success('保存成功'); - - - this.setState({company:[]}) - e.innerHTML="编辑"; - if(placeholder=='公司'){ - this.setState({'companyBtn':true}); - }else if(placeholder=='部门'){ - this.setState({'departmentBtn':true}); - }else if(placeholder=='岗位'){ - this.setState({'postBtn':true}); - } - } - }else{ - e.parentNode.parentNode.children[0].disabled=""; - e.parentNode.parentNode.children[0].focus(); - e.parentNode.parentNode.className="newitem focusactive"; - e.innerHTML="保存"; - if(placeholder=='公司'){ - this.setState({'companyBtn':false}); - }else if(placeholder=='部门'){ - this.setState({'departmentBtn':false}); - }else if(placeholder=='岗位'){ - this.setState({'postBtn':false}); - } - } - }else{ - Notify.clear() - Notify.error(`请填入${placeholder}名称`); - e.parentNode.parentNode.children[0].focus(); - } + // let cssname=null; + // let stationame=[]; + // if(placeholder=='公司'){ + // cssname='companyBtn'; + // stationame=this.state.company + // }else if(placeholder=='部门'){ + // cssname='departmentBtn'; + // stationame=this.state.department + // }else if(placeholder=='岗位'){ + // cssname='postBtn'; + // stationame=this.state.post + // } + // if(e.parentNode.parentNode.children[0].value){ + // if( e.innerHTML=="保存"){ + // if(this.hasVal(stationame,e.parentNode.parentNode.children[0].value)>-1){ + // Notify.clear() + // Notify.warn(`${placeholder}已存在，请重新增加`); + // }else{ + // e.parentNode.firstChild.innerHTML='删除'; + // e.parentNode.parentNode.children[0].disabled="disabled"; + // e.parentNode.parentNode.className=cssname+" newitem"; + // Notify.clear() + // Notify.success('保存成功'); + // e.innerHTML="编辑"; + // if(placeholder=='公司'){ + // this.setState({'companyBtn':true}); + // }else if(placeholder=='部门'){ + // this.setState({'departmentBtn':true}); + // }else if(placeholder=='岗位'){ + // this.setState({'postBtn':true}); + // } + // } + // }else{ + // e.parentNode.parentNode.children[0].disabled=""; + // e.parentNode.parentNode.children[0].focus(); + // e.parentNode.parentNode.className="newitem focusactive"; + // e.innerHTML="保存"; + // if(placeholder=='公司'){ + // this.setState({'companyBtn':false}); + // }else if(placeholder=='部门'){ + // this.setState({'departmentBtn':false}); + // }else if(placeholder=='岗位'){ + // this.setState({'postBtn':false}); + // } + // } + // }else{ + // Notify.clear() + // Notify.error(`请填入${placeholder}名称`); + // e.parentNode.parentNode.children[0].focus(); + // } } hasVal(obj,parmas){ let site=_.findIndex(obj,(o)=> {return o.name == parmas}); return site; } - sureFn(e,rp,placeholder){ - if(e.target.value&&e.keyCode==13){ - let cssname=null; - if(placeholder=='公司'){ - cssname='companyBtn'; - }else if(placeholder=='部门'){ - cssname='departmentBtn'; - }else if(placeholder=='岗位'){ - cssname='postBtn'; - } - if(this.hasVal(this.state.company,e.target.value)>-1){ - Notify.clear() - Notify.warn(`公司名重复`); - }else{ - rp.parentNode.children[1].firstChild.innerHTML='删除'; - rp.disabled="disabled"; - rp.parentNode.className=cssname+" newitem"; - Notify.clear() - Notify.success('保存成功'); - rp.parentNode.children[1].lastChild.innerHTML="编辑"; - if(placeholder=='公司'){ - this.setState({'companyBtn':true}); - }else if(placeholder=='部门'){ - this.setState({'departmentBtn':true}); - }else if(placeholder=='岗位'){ - this.setState({'postBtn':true}); - } - } - } + sureFn(e,placeholder){ + // if(e.target.value&&e.keyCode==13){ + // let cssname=null; + // let stationame=[]; + // if(placeholder=='公司'){ + // cssname='companyBtn'; + // stationame=this.state.company + // }else if(placeholder=='部门'){ + // cssname='departmentBtn'; + // stationame=this.state.department + // }else if(placeholder=='岗位'){ + // cssname='postBtn'; + // stationame=this.state.post + // } + // if(this.hasVal(stationame,e.target.value)>-1){ + // Notify.clear() + // Notify.warn(`${placeholder}已存在，请重新增加`); + // }else{ + // this.parentNode.children[1].firstChild.innerHTML='删除'; + // this.disabled="disabled"; + // this.parentNode.className=cssname+" newitem"; + // Notify.clear() + // Notify.success('保存成功'); + // rp.parentNode.children[1].lastChild.innerHTML="编辑"; + + // if(placeholder=='公司'){ + // this.setState({'companyBtn':true}); + // }else if(placeholder=='部门'){ + // this.setState({'departmentBtn':true}); + // }else if(placeholder=='岗位'){ + // this.setState({'postBtn':true}); + // } + // } + // } } chooseFn(e,disbtn){ - let netList=document.querySelectorAll('.'+disbtn); - netList.forEach((item,i)=>{ - item.addEventListener('click',()=>{ - netList.forEach((item2,i2)=>{ - item2.className=disbtn+" newitem" - }); - item.className=disbtn+" newitem choseactive"; - }); - }); + // let netList=document.querySelectorAll('.'+disbtn); + // netList.forEach((item,i)=>{ + // item.addEventListener('click',()=>{ + // netList.forEach((item2,i2)=>{ + // item2.className=disbtn+" newitem" + // }); + // item.className=disbtn+" newitem choseactive"; + // }); + // }); } close(){ this.setState({'visible':false}); @@ -149,7 +149,7 @@ export default class station extends React.Component{ this.setState({'visible':true}); } addItem(e,disbtn){ - //获取节点，追加填入的input + // 获取节点，追加填入的input let flag=null; let place=null; if(disbtn=='companyBtn'){ @@ -163,15 +163,6 @@ export default class station extends React.Component{ place="岗位" } if(flag){ - let btnName=1; - let nextDom=e.target.nextSibling; - let addipt=document.createElement('div'); - addipt.className=disbtn+" newitem"; - addipt.innerHTML=` - -

取消保存

- `; - nextDom.appendChild(addipt); if(disbtn=='companyBtn'){ this.setState({companyBtn:false}); }else if(disbtn=='departmentBtn'){ @@ -179,22 +170,52 @@ export default class station extends React.Component{ }else if(disbtn=='postBtn'){ this.setState({postBtn:false}); } - let netList=document.querySelectorAll('.'+disbtn); - netList.forEach((item,i)=>{ - item.className=disbtn+" newitem"; - netList.forEach((item2,i2)=>{ - netList[netList.length-1].className="newitem focusactive"; - console.log(netList[netList.length-1].children[0].focus()); - }) - }) + // let data=JSON.parse(JSON.stringify(this.state.company)); + let obj={id:'',name:''} + // data.unshift(obj); + + // this.setState({company:data}); + + + let data = [...this.state.company] + + data.unshift(obj); + this.setState({company:data}); + + + + // setTimeout(()=>{ + // let netList=document.querySelectorAll('.companyBtn'); + // console.log(netList) + // netList.forEach((item,i)=>{ + // console.log(item); + // item.className=disbtn+" newitem"; + // netList.forEach((item2,i2)=>{ + // netList[0].className="newitem focusactive"; + // netList[0].children[0].focus(); + // }) + // }) + // },200) + + + + }else{ Notify.clear() Notify.warn(`请先操作新增的${place}名`); } - } - + changeval(e,item){ + let index=this.hasVal(this.state.company,item); + let changeVal=_.cloneDeepWith(this.state.company, []); + if(index==-1){ + changeVal[0].name=e.target.value; + this.setState({company:changeVal}); + } + } render(){ + // let netList=document.querySelectorAll('.companyBtn'); + // console.log('netList',netList); const { current, pageSize } = this.state; return(
@@ -212,13 +233,15 @@ export default class station extends React.Component{

this.addItem(event,'companyBtn')}>+新建公司

-
this.chooseFn(event,'companyBtn')}> +
this.chooseFn(event,'companyBtn')}> { this.state.company.map((item,key)=>{ return( -
{item.name} +
this.changeval(e,item)} onKeyDown={(e)=>this.sureFn(e,'公司')} />

编辑

+ " onClick={(e)=>this.saveFn(e,'公司')}>删除this.editFn(e,'公司')} style={{marginLeft:'15px'}}>取消this.editFn(e,'公司')} style={{marginLeft:'15px'}}>保存

) })