Merge branch 'master' of https://gitee.com/red-deng-deng/marketing-system
# Conflicts: # src/pages/system/station/main.js
This commit is contained in:
red-deng-deng
commit
e8a5de0ce6
|
|
@ -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 = "<span>" + message + "</span>"
|
||||
|
|
@ -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" > {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
width: 80%;
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.error{
|
||||
|
|
|
|||
|
|
@ -94,4 +94,9 @@
|
|||
}
|
||||
.plan-title{
|
||||
padding-bottom:20px ;
|
||||
}
|
||||
}
|
||||
.import-btn{
|
||||
position: absolute;
|
||||
left: 420px;
|
||||
top: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = [
|
||||
<TabPanel key="1" tab="活动" id="1" >
|
||||
const style = [
|
||||
<TabPanel key="1" tab="串码" id="1" >
|
||||
</TabPanel>,
|
||||
<TabPanel key="2" tab="仅兑换" id="2">
|
||||
|
||||
<TabPanel key="2" tab="链接" id="2">
|
||||
</TabPanel>,
|
||||
<TabPanel key="3" tab="二维码" id="2">
|
||||
</TabPanel>,
|
||||
];
|
||||
|
||||
const return_val = [
|
||||
<TabPanel key="1" tab="直接返回" id="1" >
|
||||
<TabPanel key="1" tab="指定数量" id="1" >
|
||||
</TabPanel>,
|
||||
<TabPanel key="2" tab="卡单" id="2">
|
||||
|
||||
<TabPanel key="2" tab="不限" id="2">
|
||||
</TabPanel>,
|
||||
];
|
||||
|
||||
|
|
@ -80,17 +76,10 @@ export default class acclist extends React.Component{
|
|||
return(
|
||||
<div id="step2">
|
||||
<Form model={this.state.model} rules={rules} ref="form1">
|
||||
<FormItem labelname="营销计划名称" prop="name" >
|
||||
<Ipt onChange={(e)=>{
|
||||
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'}/>
|
||||
</FormItem>
|
||||
<FormItem labelname=" 计划类型" prop="type">
|
||||
<FormItem labelname=" key样式" prop="style">
|
||||
<Tabs
|
||||
type="button">
|
||||
{type}
|
||||
type="button" >
|
||||
{style}
|
||||
</Tabs>
|
||||
</FormItem>
|
||||
<FormItem labelname="分销商" prop="reseller">
|
||||
|
|
@ -101,19 +90,29 @@ export default class acclist extends React.Component{
|
|||
{return_val}
|
||||
</Tabs>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="开始~结束时间" prop="date_time" >
|
||||
<CombinedDateRangePicker
|
||||
className="zent-datepicker-plan"
|
||||
value={this.state.model.date_time}
|
||||
showTime={{
|
||||
format: 'HH:mm:ss',
|
||||
defaultTime: ['12:00:00', '23:59:59'],
|
||||
}}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
onChange={this.onChangeCombinedDate}
|
||||
/>
|
||||
<FormItem labelname="key数量" prop="date_time" >
|
||||
<Ipt onChange={(e)=>{
|
||||
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'}/>
|
||||
<Button className="import-btn" >导入白名单</Button>
|
||||
</FormItem>
|
||||
|
||||
|
||||
<FormItem labelname="绑定类型" prop="checkedList" >
|
||||
<Checkbox.Group value={this.state.checkedList} onChange={this.onCheckChange}>
|
||||
<Checkbox value="1">兑换码</Checkbox>
|
||||
<Checkbox value="2">优惠券</Checkbox>
|
||||
<Checkbox value="3">立减金</Checkbox>
|
||||
</Checkbox.Group>
|
||||
</FormItem>
|
||||
<FormItem labelname="绑定对象">
|
||||
<Button>新建兑换码</Button>
|
||||
<Button>新建优惠券</Button>
|
||||
<Button>新建立减金</Button>
|
||||
</FormItem>
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -19,28 +19,26 @@ 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;
|
||||
|
|
@ -136,15 +134,15 @@ export default class station extends React.Component{
|
|||
}
|
||||
}
|
||||
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});
|
||||
|
|
@ -153,7 +151,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'){
|
||||
|
|
@ -167,15 +165,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=`
|
||||
<input placeholder=请输入新增${place}名 onKeydown={window["mystation"].sureFn(event,this,'${place}')} />
|
||||
<p><span class="del" onClick={window["mystation"].saveFn(this,'${place}')}>取消</span><span class="operation" onClick={window["mystation"].editFn(this,'${place}')}>保存</span></p>
|
||||
`;
|
||||
nextDom.appendChild(addipt);
|
||||
if(disbtn=='companyBtn'){
|
||||
this.setState({companyBtn:false});
|
||||
}else if(disbtn=='departmentBtn'){
|
||||
|
|
@ -183,22 +172,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(
|
||||
<div id="station" className="maincenter">
|
||||
|
|
@ -216,13 +235,15 @@ export default class station extends React.Component{
|
|||
<Card type="nested" title="公司" className="carditem">
|
||||
<div>
|
||||
<p className="newadd" onClick={(event)=>this.addItem(event,'companyBtn')}>+新建公司</p>
|
||||
<div className="addList" onClick={(event)=>this.chooseFn(event,'companyBtn')}>
|
||||
<div className="addComList" onClick={(event)=>this.chooseFn(event,'companyBtn')}>
|
||||
{
|
||||
this.state.company.map((item,key)=>{
|
||||
return(
|
||||
<div className="newitem companyBtn"><span>{item.name}</span>
|
||||
<div className="newitem companyBtn"><input value={item.name} type="text" onChange={e =>this.changeval(e,item)} onKeyDown={(e)=>this.sureFn(e,'公司')} />
|
||||
<p><span className="operation
|
||||
">编辑</span></p>
|
||||
" onClick={(e)=>this.saveFn(e,'公司')}>删除</span><span className="operation
|
||||
" onClick={(e)=>this.editFn(e,'公司')} style={{marginLeft:'15px'}}>取消</span><span className="operation
|
||||
" onClick={(e)=>this.editFn(e,'公司')} style={{marginLeft:'15px'}}>保存</span></p>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue