化验辅检删除弹窗修改

src/common/components/DelToast/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import style from './index.less';
+/**
+* 化验辅检删除弹窗 @Liucf 2019-5-22
+* 接收参数：
+* show：展示组件
+* name：删除项的名称
+* confirm：删除事件处理函数
+* cancel：取消事件处理函数
+*/
+
+class DelToast extends React.PureComponent{
+  constructor(props){
+    super(props);
+    this.handleDel = this.handleDel.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+  handleDel(){
+    const {confirm} = this.props;
+    confirm&&confirm();
+  }
+  handleCancel(){
+    const {cancel} = this.props;
+    cancel&&cancel();
+  }
+  render(){
+    const {show,name} = this.props;
+    if(show){
+      return <div className={style['del-box']} id="delBox">
+        <div className={style['del-con']}>
+          <div className={style['del-tri']}></div>
+          <div className={style['del-title']}>删除 {name} ？</div>
+          <div className={style['del-foot']}>
+            <span className={`${style['del-btn']} ${style['del-del']}`} onClick={this.handleDel}>删除</span>
+            <span className={`${style['del-btn']} ${style['del-cancel']}`} onClick={this.handleCancel}>取消</span>
+          </div>
+        </div>
+      </div>
+    }
+    return ''
+  }
+}
+
+export default DelToast;

src/common/components/DelToast/index.less

@@ -0,0 +1,51 @@
+// @import "~@less/mixin.less";
+.del-box{
+  position: absolute;
+  width: 206px;
+  height: 106px;
+  box-shadow: 2px 2px 5px rgba(0,0,0,.4);
+  background: #fff;
+  z-index: 66;
+  text-align: center;
+  padding: 20px;
+  right: -30px;
+  top: 40px;
+}
+.del-con{
+  position: relative;
+  .del-tri{
+    width: 0; 
+    height: 0;
+    border-width: 10px;
+    border-style: solid;
+    border-color: transparent transparent #fff transparent;
+    position: absolute;
+    top: -40px;
+    right: 10px;
+  }
+  .del-title{
+    margin-bottom: 19px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .del-foot{
+    .del-btn{
+      display: inline-block;
+      width: 63px;
+      height: 26px;
+      line-height: 26px;
+      text-align: center;
+      cursor: pointer;
+    }
+    .del-del{
+      color: #fff;
+      background: #EC3E3E;
+      margin: 0 20px 0 10px;
+    }
+    .del-cancel{
+      color:#000;
+      background: #E5E5E5;
+    }
+  }
+}

src/common/components/index.js

@@ -23,6 +23,7 @@ import NumberUnitPan from "./NumberUnitPan";
 import Add from "./Add";
 import ComplexModal from "./ComplexModal";
 import MiniToast from "./MiniToast";
+import DelToast from "./DelToast";
 
 module.exports = {
     Banner,
@@ -49,5 +50,6 @@ module.exports = {
     NumberUnitPan,
     Add,
     ComplexModal,
-    MiniToast
+    MiniToast,
+    DelToast
 };

src/common/less/variables.less

@@ -45,6 +45,8 @@
 @dropdwon-height:200px;
 @selected-bg:#fff;
 @import-color:#ffad5f;
+@closeIcon:url(../images/del_nor.png);
+@closeHor:url(../images/del_hor.png);
 
 /*********推送内容容器宽度*************/
 @push-width: 450px;

src/components/AddAssistCheck/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchOption, Calendar, ConfirmModal, Notify, Add } from '@commonComp';
+import { SearchOption, Calendar, ConfirmModal, Notify, Add ,DelToast} from '@commonComp';
 import styles from './index.less';
 import $ from 'jquery';
 import Textarea from './Textarea';
@@ -14,7 +14,8 @@ class AddAssistCheck extends React.Component {
       dateTime: "",
       active: '',
       visible: false,
-      id: null
+      id: null,
+      activeName:''
     }
     this.handleShowDate = this.handleShowDate.bind(this)
     this.getCurrentDate = this.getCurrentDate.bind(this)
@@ -25,10 +26,11 @@ class AddAssistCheck extends React.Component {
     this.handleCancel = this.handleCancel.bind(this)
   }
 
-  handleDelClick(id) {
+  handleDelClick(id,item) {
     this.setState({
       visible: true,
-      id: id
+      id: id,
+      activeName:item.name
     })
   }
 
@@ -39,7 +41,8 @@ class AddAssistCheck extends React.Component {
     handlePush && handlePush();           //右侧推送
     this.setState({
       visible: false,
-      id: null
+      id: null,
+      activeName:''
     })
     Notify.success("删除成功");
   }
@@ -47,7 +50,8 @@ class AddAssistCheck extends React.Component {
   handleCancel() {
     this.setState({
       visible: false,
-      id: null
+      id: null,
+      activeName:''
     })
   }
 
@@ -55,12 +59,22 @@ class AddAssistCheck extends React.Component {
     $(document).click((event) => {
       let _con = $('#searchWrapAssist');   // 设置目标区域
       let _cons = $('#datePick');   // 设置目标区域
+      let _del = $('#delBox')[0];   // 删除弹窗
+      let _close = $('#assiClose')[0];   // 删除icon
+      // console.log(111,event.target,_del,_close)
       if (_con && searchWrapAssist != event.target && !_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1
         this.setState({ show: false });
       }
       if (!_cons.is(event.target) && _cons.has(event.target).length === 0) { // Mark 1
         this.setState({ date: false });
       }
+      if(event.target != _close && event.target != _del && event.target.parentNode != _del){
+          this.setState({
+            visible: false,
+            id: null,
+            activeName:''
+          })
+      }
     });
     this.getCurrentDate();
   }
@@ -124,10 +138,11 @@ class AddAssistCheck extends React.Component {
   }
   getAssistLabel() {
     const { assistLabel, handleChangeAssistValue, handleChangeDate, isRead, handlePush, winWidth,getInfomation } = this.props;
+    const { visible,activeName,id } = this.state;
     return <ul className={styles.labelWrap} id="datePick">
       {
         assistLabel.map((item, idx) => {
-          return (<li key={item.id} className={styles.assistLists}>
+          return (<li key={item.questionId} className={styles.assistLists}>
             <span className={styles.assistName} style={{ width: winWidth < 1200 ? '120px' : 'auto' }}>
               <span className={styles.tagSpan}>
                 {item.name}：
@@ -140,11 +155,16 @@ class AddAssistCheck extends React.Component {
             <div className={styles.pointerFinger}>
               <p onClick={() => this.handleShowDate(idx)}>报告日期：<span>{item.time || this.state.dateTime}</span></p>
               <i onClick={() => this.handleShowDate(idx)}></i>
-              <a href="javascript:void(0);" onClick={() => { this.handleDelClick(idx) }}><img src={close} alt="" /></a>
+              {/*<a href="javascript:void(0);" onClick={() => { this.handleDelClick(idx,item) }}><img src={close} alt="" /></a>*/}
+              <span className={styles.closeIcon} id="assiClose" onClick={() => { this.handleDelClick(idx,item) }}></span>
               <div style={{ display: this.state.date && idx == this.state.active ? "block" : "none", position: "relative" }}>
                 <Calendar isShow={true} handleChange={(info) => { handleChangeDate(info, idx); this.setState({ date: false }) }}></Calendar>
               </div>
             </div>
+          <DelToast show={idx==id?visible:false}
+                    name={activeName} 
+                    cancel={this.handleCancel}
+                    confirm={this.delConfirm}/>
           </li>)
         })
       }
@@ -170,7 +190,7 @@ class AddAssistCheck extends React.Component {
             }
           </SearchOption> : ''}
         </div>
-        <ConfirmModal
+        {/*<ConfirmModal
           visible={visible}
           confirm={this.delConfirm}
           close={this.handleCancel}
@@ -182,7 +202,7 @@ class AddAssistCheck extends React.Component {
           oKBg={'#3B9ED0'}
         >
           <p className={styles['center']}>是否删除该辅检项？</p>
-        </ConfirmModal>
+        </ConfirmModal>*/}
       </div>
     )
   }

src/components/AddAssistCheck/index.less

@@ -1,5 +1,4 @@
 @import "~@less/variables.less";
-
 .staticTag {
     cursor: pointer;
     color: @blue;
@@ -38,6 +37,7 @@
         box-sizing: border-box;
         position: relative;
         clear: both;
+        border-radius: 4px;
         .pointerFinger {
             width: 222px;
             position: absolute;
@@ -50,7 +50,7 @@
                 cursor: pointer;
                 background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAANtJREFUOBHFU90RwiAMDj3H8FV3KQ4AxwAO5QQwgbvoY90DQ+/gUpogXj3bF/L75ctXANj7c85pY0zMPKy1U7bLmQqG4hFjwPIL8UEp9aI+UOxFotcRZ3MALEmu8I+xWoGk2VpiQqhoWneSmoXZvfWehaubsVgBoGxdxb93EekhdbVyKjWh5iNSvcUYjxJIK57WxN5rCOE+13E/scWCy2WMzLC81haTTzlkOONtf6I4KTM8SFPTWqjLicujZk/v/ZnLdV9ZrpmLiQwlBhwIjWVAjStOG6+NpsA/s99BMkpktdAgdAAAAABJRU5ErkJggg==') no-repeat;
             }
-            a {
+            /* a {
                 img {
                   width: 13px;
                   height: 13px;
@@ -58,9 +58,21 @@
                   cursor: pointer;
                   display: inline-block;
                   position: absolute;
-                  right: -4px;
+                  // right: -4px;
+                  right: 3px;
                   top: 2px;
                 }
+            } */
+            .closeIcon{
+              display: inline-block;
+              width: 15px;
+              height: 15px;
+              cursor: pointer;
+              position: absolute;
+              right: 3px;
+              top: 2px;
+              background: @closeIcon;
+              background-size: 100% 100%;
             }
             p{
                 display: inline-block;
@@ -85,6 +97,13 @@
           width: 100%;
         }
     }
+    .assistLists:hover{
+      background:#F2F2F2;
+      .closeIcon{
+        background: @closeHor;
+        background-size: 100% 100%;
+      }
+    }
 }
 .center {
     text-align: center;

src/components/AddInspect/SlideSelect/index.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import styles from "./index.less";
 import { normalVal,timestampToTime } from '@utils/tools';
-import { InspectCommon, Calendar} from '@commonComp';
+import { InspectCommon, Calendar,DelToast} from '@commonComp';
 import slideUp from "@common/images/slide-up.png";
 import slideDown from "@common/images/slide-down.png";
 import date1 from '../img/date1.png';
@@ -12,9 +12,14 @@ class SlideSelect extends Component {
     super(props);
     this.state = {
       show:false,
+      activeInd:false,
+      activeName:''
     };
     this.toTime = this.toTime.bind(this)
     this.handleSlide = this.handleSlide.bind(this)
+    this.handleDel = this.handleDel.bind(this)
+    this.handleCancel = this.handleCancel.bind(this)
+    this.delConfirm = this.delConfirm.bind(this)
   }
   toTime(time){
     let tmpTim = time.split(',').join('')-0
@@ -34,9 +39,31 @@ class SlideSelect extends Component {
       show:!tmpShow
     })
   }
+  handleDel(){
+    const {handleDelClick,idx,item} = this.props;
+    this.setState({
+      activeInd:true,
+      activeName:item.name
+    })
+    handleDelClick&&handleDelClick(1,idx);
+  }
+  handleCancel(){
+    this.setState({
+      activeInd:false,
+      activeName:''
+    })
+  }
+  delConfirm(){
+    const {handleDelConfirm} = this.props;
+    handleDelConfirm&&handleDelConfirm();
+    this.setState({
+      activeInd:false,
+      activeName:''
+    })
+  }
   render() {
     const {getInfomation,handleConfirm,changeActivePart,handleDelClick,getItemList,date,item,idx,handleFillShow,showDetails,handleLabelSub,showFill,changeShowFill,handlePush,dateTime,currentIdx,currentData,fillActive,handleShowDate,handleChangeDate} = this.props;
-    const {show} = this.state;
+    const {show,activeInd,activeName} = this.state;
     let numPlus = 0,numPlus1 = 0;
     return (
       <li key={item.questionId} className={styles.slideLi}> 
@@ -153,7 +180,12 @@ class SlideSelect extends Component {
                 : null
             }
         </div>
-        <img className={styles.partDel} src={close} alt="删除项" onClick={()=>{handleDelClick(1,idx)}}/>
+        {/*<img className={styles.partDel} src={close} alt="删除项" onClick={()=>{handleDelClick(1,idx)}}/>*/}
+        <span className={styles.partDel} onClick={this.handleDel}></span>
+        <DelToast show={activeInd?true:false}
+                    name={activeName} 
+                    cancel={this.handleCancel}
+                    confirm={this.delConfirm}/>
     </li>
     );
   }

src/components/AddInspect/SlideSelect/index.less

@@ -3,8 +3,7 @@
     // cursor: pointer;
     color: #767676;
     position: relative;
-    padding-top: 10px;
-    padding-bottom: 10px;
+    padding: 10px 10px 10px 0;
     border-bottom:1px dashed #989DA3;
     i {
         font-style: normal;
@@ -26,17 +25,27 @@
         vertical-align: top;
     } 
     .partDel {
-        width: 13px;
-        height: 13px;
+        width: 15px;
+        height: 15px;
         margin-bottom: 11px;
         cursor: pointer;
         display: inline-block;
         position: absolute;
-        right: 0;
-        top: 12px;
-        background-color: #fff;
+        right: 3px;
+        top: 13px;
+        // background-color: #fff;
+        background: @closeIcon;
+        background-size: 100% 100%;
     }
 }
+.slideLi:hover{
+    background:#F2F2F2;
+    border-radius: 4px;
+       .partDel{
+        background: @closeHor;
+        background-size: 100% 100%;
+      } 
+}
 .staticTagActive {
     cursor: pointer;
     color: #333;

src/components/AddInspect/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SearchOption, InspectCommon, Calendar ,Notify,ConfirmModal,Add} from '@commonComp';
+import { SearchOption, InspectCommon, Calendar ,Notify,ConfirmModal,Add,DelToast} from '@commonComp';
 import SlideExcel from './SlideExcel';
 import SlideSelect from './SlideSelect';
 import { deepClone } from '@utils/tools';
@@ -22,11 +22,10 @@ class Inspect extends React.Component {
       currentData: {},
       numPlus: 0,     //判断是否所有的填写单都是空
       num: 0,            //暂存数据，获取一次，不能每次都是新的数据
-      toastText: '',
-      visible: false,
       type: null,
       id: null,
-      tmpIds: [],      //内层外层
+      // tmpIds: [],      //内层外层
+      importFlag:false   //导入数据删除标识
     }
     this.handleChangeDate = this.handleChangeDate.bind(this)
     this.handleShowDate = this.handleShowDate.bind(this)
@@ -52,9 +51,9 @@ class Inspect extends React.Component {
       handleCloseExcel(id)
     }
     this.setState({
-      visible: false,
       type: null,
       id: null,
+      importFlag:false
     })
     Notify.success("删除成功");
     handlePush && handlePush();       //右侧推送
@@ -62,24 +61,19 @@ class Inspect extends React.Component {
   handleDelClick(type, idx) {
     this.setState({
       type: type,
-      id: idx,
-      visible: true
+      id: idx
     })
-    if (type == 1) {//单项
+    if (type == 2){
       this.setState({
-        toastText: '是否删除该化验项？'
-      })
-    } else if (type == 2) {//导入项
-      this.setState({
-        toastText: '是否删除导入项？'
+        importFlag: true
       })
     }
   }
   handleCancel() {
     this.setState({
-      visible: false,
       type: null,
       id: null,
+      importFlag:false
     })
   }
   componentDidMount() {
@@ -285,17 +279,22 @@ class Inspect extends React.Component {
   }
   render() {
     const { getInfomation,handleChangeValue,inspectVal, list, labelList, delPartItem, handleLabelSub, handleClear, handleConfirm, fillActive, getExcelDataList, handleCloseExcel, handlePush } = this.props;
-    const { toastText, visible, tmpId, tmpIdx } = this.state;
+    const { tmpId, tmpIdx,id ,importFlag} = this.state;
 
     return (
       <div className={styles.wrapper}>
         <div className={styles.check}>
           {
-            getExcelDataList.length > 0 && getExcelDataList.map((items, id) => {
+            getExcelDataList.length > 0 && getExcelDataList.map((items, ind) => {
               return <div style={{ marginTop: '10px' }}>
                 {
                   items && items.lisExcelRes.length > 0 ? <ul className={styles.excelDataLists}>
-                    <img className={styles.close} src={close} alt="关闭导入excel数据" onClick={() => { this.handleDelClick(2, id) }} />
+                    {/*<img className={styles.close} src={close} alt="关闭导入excel数据" onClick={() => { this.handleDelClick(2, id) }} />*/}
+                    <span className={styles.close} onClick={() => { this.handleDelClick(2, ind) }}></span>
+                    <DelToast show={id==ind && importFlag?true:false}
+                    name="该导入项" 
+                    cancel={this.handleCancel}
+                    confirm={this.delConfirm}/>
                     {
                       items.lisExcelRes.map((item, idx) => {
                         return <SlideExcel
@@ -334,6 +333,7 @@ class Inspect extends React.Component {
                   getItemList={this.getItemList}
                   changeActivePart={this.changeActivePart}
                   handleDelClick={this.handleDelClick}
+                  handleDelConfirm={this.delConfirm}
                   handleConfirm={handleConfirm}
                   getInfomation={getInfomation}
                 ></SlideSelect>
@@ -355,19 +355,6 @@ class Inspect extends React.Component {
             }
           </SearchOption> : ''}
         </div>
-        <ConfirmModal
-          visible={visible}
-          confirm={this.delConfirm}
-          close={this.handleCancel}
-          cancel={this.handleCancel}
-          okText="删除"
-          cancelText='取消'
-          okBorderColor={'#3B9ED0'}
-          okColor={'#fff'}
-          oKBg={'#3B9ED0'}
-        >
-          <p className={styles['center']}>{toastText}</p>
-        </ConfirmModal>
       </div>
     )
   }

src/components/AddInspect/index.less

@@ -174,14 +174,17 @@
     background-color: rgba(237,237,237,0.4);
     border: 1px solid #ccc;
     .close {
-        width: 13px;
-        height: 13px;
+        display: inline-block;
+        width: 15px;
+        height: 15px;
         position: absolute;
-        top: -5px;
-        right: -5px;
+        top: -10px;
+        right: -6px;
         z-index: 30;
-        background-color: #fff;
         border-radius: 50%;
+        background: @closeIcon;
+        background-size: 100% 100%;
+        background-color: #fff;
     }
     .excelDataLis {
         padding: 2px 0px;
@@ -211,6 +214,14 @@
         }
     }
 }
+.excelDataLists:hover{
+    .close{
+        background: @closeHor;
+        background-size: 100% 100%;
+        background-color: #fff;
+        cursor: pointer;
+    }   
+}
 .center {
     text-align: center;
     font-size: 16px;