男女模板区分

src/components/Operation/index.jsx

@@ -10,6 +10,7 @@ import check_circle from './img/check-circle.png';
 import check_right from './img/check-right.png';
 import {getAllDataList,getAllDataStringList,isAllClear,filterArr} from '@utils/tools';
 import store from '@store';
+import $ from 'jquery';
 
 
 class Operation extends Component {
@@ -25,7 +26,6 @@ class Operation extends Component {
       type: '',
       zIndex:40,
       sex:'3',
-      radio:[true,false,false]
     }
     this.showPrint = this.showPrint.bind(this);
     this.closePrint = this.closePrint.bind(this);
@@ -35,8 +35,6 @@ class Operation extends Component {
     this.clearAll = this.clearAll.bind(this);
     this.saveHis = this.saveHis.bind(this);
     this.keypress = this.keypress.bind(this);
-    this.changeRadio = this.changeRadio.bind(this);
-    this.getCheckIcon = this.getCheckIcon.bind(this);
   }
 
   showPrint() {
@@ -228,14 +226,6 @@ class Operation extends Component {
       return true
     }
   }
-  getCheckIcon(flg) {
-    alert(flg)
-    if (flg) {
-        return check_right;
-    } else {
-        return check_circle;
-    }
-}
   changeTitle() {
     return <div className={style['box']}>
       <input className={style['ipt']}
@@ -252,30 +242,29 @@ class Operation extends Component {
       />
       <div className={style['line']}></div>
       <div className={style['iptWrap']}>
-      {
-        this.state.radio.map(()=>{
-          
-        })
-      }
-        <label onClick={()=>{this.changeRadio(3)}}><img src={this.getCheckIcon(this.state.radio[0])} alt=""/>通用</label> 
-        <label onClick={()=>{this.changeRadio(1)}}><img src={this.getCheckIcon(this.state.radio[1])} alt=""/>男</label> 
-        <label onClick={()=>{this.changeRadio(2)}}><img src={this.getCheckIcon(this.state.radio[2])} alt=""/>女</label> 
+        <span id="commonSex" onClick={this.changeRadio.bind(this,1)}><img src={check_right} alt=""/>通用</span>
+        <span id="maleSex" onClick={this.changeRadio.bind(this,2)}><img src={check_circle} alt=""/>男</span>
+        <span id="femaleSex" onClick={this.changeRadio.bind(this,3)}><img src={check_circle} alt=""/>女</span>
       </div>
     </div>
   }
   changeRadio(sex){
-    let radios = [false,false,false]
     if(sex == 1){
-      radios = [false,true,false]
+      $('#commonSex img').attr('src',check_right)
+      $('#maleSex img').attr('src',check_circle)
+      $('#femaleSex img').attr('src',check_circle)
+      this.setState({sex:'3'})
     }else if(sex == 2){
-      radios = [false,false,true]
+      $('#commonSex img').attr('src',check_circle)
+      $('#maleSex img').attr('src',check_right)
+      $('#femaleSex img').attr('src',check_circle)
+      this.setState({sex:'1'})
     }else if(sex == 3){
-      radios = [true,false,false]
+      $('#commonSex img').attr('src',check_circle)
+      $('#maleSex img').attr('src',check_circle)
+      $('#femaleSex img').attr('src',check_right)
+      this.setState({sex:'2'})
     }
-    this.setState({
-      sex:sex,
-      radio:radios
-    })
   }
   makeSure() {
     const { save, clear, saveDataAll,diagShowTmp } = this.props;
@@ -293,7 +282,6 @@ class Operation extends Component {
         Notify.error('请输入模板名称')
         return;
       }
-      // diagShowTmp(false)
       saveDataAll(this.state.title,this.state.sex);
     }
   }

src/components/Operation/index.less

@@ -109,16 +109,20 @@
     }
 }
 .iptWrap {
-  width: 170px;
+  width: 190px;
   height: 20px;
   line-height: 18px;
-  margin: 15px auto;
-  label {
-    margin-right: 5px;
-  }
-  input {
-    width: 30px;
-    height: 30px;
+  margin: 5px auto;
+  span {
+    display: inline-block;
+    cursor: pointer;
+    padding-right: 12px;
+    font-size: 14px;
+    img {
+      vertical-align: middle;
+      position: relative;
+      top: -1px;
+    }
   }
 }
 .msg {
@@ -130,7 +134,7 @@
 .box {
     padding-top: 10px;
     box-sizing: border-box;
-    height: 80px;
+    height: 86px;
 }
 .ipt {
     font-size: 16px;

src/components/TemplateItems/TemplateItem/index.jsx

@@ -146,25 +146,20 @@ class TemplateItem extends React.Component {
         });
     }
 
-    handleEditIconClick(e) {
+    handleEditIconClick(e,name) {
         e.stopPropagation();
-        const text = this.titleDOM.innerHTML;
         let currId = this.props.id
-        this.props.handleTitleChange(currId,text);
+        this.props.handleTitleChange(currId,name);
     }
 
     recoverTitle() {
         this.titleDOM.innerHTML = this.props.title;
     }
 
-    confirmChangeTitle() {
-        
-    }
-
     render() {
-        // const DesItems = this.genContent();
-        const { allCheckShow,id,name,preview } = this.props;
+        const { allCheckShow,id,name,preview,sex } = this.props;
         let previewJson = JSON.parse(preview);
+        let sexStr = sex==2?' (女)':sex==1?' (男)':' (通用)';
         return (
             <div className={style.wrapper}>
                 <div className={ 
@@ -182,9 +177,9 @@ class TemplateItem extends React.Component {
                     <span
                         ref={(title) => this.titleDOM = title}
                         className={style['title']}
-                        title={name}
+                        title={name+sexStr}
                     >
-                        {name}
+                        {name+sexStr}
                     </span>
                     <img className={style.arrow} src={this.getArrow()} />
                     <img title={'删除模板'} 
@@ -201,7 +196,7 @@ class TemplateItem extends React.Component {
                         src={this.getEditIcon()}
                         onMouseEnter={() => this.handleEditIconMouseEnter()}
                         onMouseLeave={() => this.handleEditIconMouseLeave()}
-                        onClick={(e) => this.handleEditIconClick(e)}
+                        onClick={(e) => this.handleEditIconClick(e,name)}
                     />
                 </div>
                 <div