index.jsx 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. import React, { Component } from "react";
  2. import styles from "./index.less";
  3. import { normalVal,getArrow,timestampToTime,getDomUpDown,getPageCoordinate,setPosition,setFontColorSize } from '@utils/tools';
  4. import { InspectCommon, Notify,DelToast} from '@commonComp';
  5. import slideUp from "@common/images/slide-up.png";
  6. import slideDown from "@common/images/slide-down.png";
  7. import checkOff from '@common/images/check_off.png';
  8. import checkOn from '@common/images/check_on.png';
  9. import $ from 'jquery';
  10. import date1 from '../img/date1.png';
  11. import ScrollArea from 'react-scrollbar';
  12. import InspectName from '../InspectName';
  13. import store from '@store';
  14. import { embedPush } from '../../../store/async-actions/pushMessage'
  15. import config from '@config/index';
  16. import up from '@images/up.png';
  17. import down from '@images/down.png';
  18. class SlideSelect extends Component {
  19. constructor(props) {
  20. super(props);
  21. this.state = {
  22. show:false,
  23. activeInd:false,
  24. activeName:'',
  25. canEdit:true,
  26. style:'',
  27. timer: null,
  28. };
  29. this.toTime = this.toTime.bind(this);
  30. this.handleSlide = this.handleSlide.bind(this);
  31. this.handleDel = this.handleDel.bind(this);
  32. this.handleCancel = this.handleCancel.bind(this);
  33. this.delConfirm = this.delConfirm.bind(this);
  34. this.timeSure = this.timeSure.bind(this);
  35. this.setEdit = this.setEdit.bind(this);
  36. this.handleLabelSub = this.handleLabelSub.bind(this);
  37. this.handleBlur = this.handleBlur.bind(this);
  38. this.checkOnOff = this.checkOnOff.bind(this);
  39. }
  40. handleChangeDate(date) {
  41. // console.log(date,'外')
  42. }
  43. componentDidMount() {
  44. const {item} = this.props;
  45. $(document).click((event) => {
  46. if($(event.target).attr("id")!='addClose'&&$(event.target).attr("id")!='delTit'){
  47. this.setState({
  48. activeInd:false
  49. })
  50. }
  51. });
  52. let type = getArrow(item.minValue,item.maxValue,item.value||null)
  53. this.setState({style:type,value:item.value,time:item.time})
  54. const that = this;
  55. document.addEventListener('mousedown',function(e){
  56. //onMousedown的目标为滚动条时,标签填写单不关闭
  57. if(e.target.className=='scrollbar'){
  58. that.isBar = true;
  59. }else{
  60. that.isBar = false;
  61. }
  62. });
  63. // this.setState({ dateTime: getCurrentDate(1) })
  64. }
  65. toTime(time){
  66. let tmpTim = time.split(',').join('')-0
  67. if(time && tmpTim.toString() != 'NaN'){
  68. let date = new Date('1900-01-01');
  69. let dateTim = date.getTime();
  70. let times = (tmpTim-2)*24*60*60*1000;
  71. let result = timestampToTime(dateTim+times).split(' ')[0]
  72. return result;
  73. }else{
  74. return time;
  75. }
  76. }
  77. handleSlide(){
  78. let tmpShow = this.state.show
  79. this.setState({
  80. show:!tmpShow
  81. })
  82. }
  83. handleDel(time){
  84. const {handleDelClick,item} = this.props;
  85. this.setState({
  86. activeInd:true,
  87. activeName:item.uniqueName,
  88. })
  89. handleDelClick&&handleDelClick(1,time);
  90. }
  91. handleCancel(){
  92. this.setState({
  93. activeInd:false,
  94. activeName:''
  95. })
  96. }
  97. delConfirm(item){
  98. const {handleDelConfirm,handlePush} = this.props;
  99. handleDelConfirm&&handleDelConfirm(item);
  100. Notify.success("删除成功");
  101. handlePush && handlePush({mode:8}); //右侧推送
  102. this.setState({
  103. activeInd:false,
  104. activeName:''
  105. })
  106. }
  107. timeSure(date){
  108. const {handleChangeDate} = this.props;
  109. handleChangeDate&&handleChangeDate(date)
  110. }
  111. handleLabelSub(e,questionId,idx){
  112. const {handleLabelSub,handleFillShow,setHighter,refreshScroller} = this.props;
  113. handleLabelSub(e,questionId,idx);
  114. handleFillShow(e,idx);
  115. //弹窗高度超出屏幕,增加页面高度
  116. setPosition(e,"#inspectFill",setHighter);
  117. /*setTimeout(function(){//如果检验下面有很多数据,则会跳过头
  118. refreshScroller()&&refreshScroller().scrollYTo(290);
  119. })*/
  120. }
  121. handleInput(e,item,sign){
  122. const tempTimer = this.state.timer
  123. const {setTipValue} = this.props
  124. setTipValue(item,e.target.value,sign)
  125. if(sign == 2){
  126. let type = getArrow(item.minValue,item.maxValue,e.target.value||null)
  127. this.setState({
  128. style:type
  129. })
  130. }
  131. // 延迟推送
  132. clearTimeout(tempTimer)
  133. let timer = setTimeout(() => {
  134. store.dispatch(embedPush({
  135. action: "lis",
  136. mode: 1
  137. }))
  138. clearTimeout(tempTimer)
  139. }, config.delayPushTime);
  140. this.setState({
  141. timer
  142. })
  143. }
  144. handleBlur(){
  145. const {handlePush} = this.props;
  146. $('.canEdit').attr('disabled','disabled')
  147. handlePush && handlePush({mode:8}); //右侧推送
  148. }
  149. checkOnOff(item){
  150. const {checkOnOff,handlePush} = this.props
  151. checkOnOff(item)
  152. handlePush && handlePush({mode:8}); //右侧推送
  153. }
  154. setEdit(e){
  155. store.dispatch(embedPush({
  156. action: "lis",
  157. mode: 1
  158. }))
  159. $('.canEdit').blur().attr('disabled','disabled')
  160. $(e.target).removeAttr('disabled').focus()
  161. }
  162. render() {
  163. const {item,idx,time} = this.props;
  164. const {canEdit,activeInd,activeName,value,style} = this.state;
  165. return (
  166. item.flg == 1?<li key={item.uniqueName+idx} className={`${styles.slideLi} clearfix`}>
  167. <table>
  168. <tr>
  169. <img className={styles.imgCheck} src={item.check?checkOn:checkOff} onClick={()=>this.checkOnOff(item)} alt=""/>
  170. <span className={styles.bigname}>{item.uniqueName}</span>
  171. <span className={styles.smallname}></span>
  172. <span className={styles.edit}></span>
  173. <span className={styles.maxmin}></span>
  174. <span className={styles.pass}>检验时间:
  175. <input disabled="disabled" type="text"
  176. class="canEdit"
  177. onDoubleClick={(e)=>this.setEdit(e)}
  178. style={{color:'#333'}}
  179. placeholder='时间'
  180. autoComplete="off"
  181. value={item.time}
  182. onInput={(e)=>{this.handleInput(e,item,1)}}
  183. onBlur={()=>{this.handleBlur()}}
  184. />
  185. </span>
  186. <span id="addClose" className={styles.partDel} onClick={()=>{this.handleDel(item.time)}}></span>
  187. </tr>
  188. </table>
  189. <DelToast show={time==item.time&&activeInd?true:false}
  190. name={activeName}
  191. right={'-34px'}
  192. top={'30px'}
  193. cancel={this.handleCancel}
  194. confirm={()=>{this.delConfirm(item)}}/>
  195. </li>:<li key={item.uniqueName+idx} className={`${styles.slideLi} clearfix`}>
  196. <span style={{width:'22px'}}></span>
  197. <span className={styles.bigname}>{item.name}</span>
  198. <span className={styles.smallname}>{item.uniqueName}</span>
  199. <span className={styles.edit}>
  200. <input disabled="disabled" type="text"
  201. class="canEdit"
  202. onDoubleClick={(e)=>this.setEdit(e)}
  203. style={{ color: style == 2 || style == 4 ? 'red' : style == 1 ? '#D949FF' : '#333', backgroundColor: item.value && item.value.length>0 ? '#eeeeee' : ''}}
  204. placeholder='(填写)'
  205. autoComplete="off"
  206. value={item.value||item.otherValue}
  207. onInput={(e)=>{this.handleInput(e,item,2)}}
  208. onBlur={()=>{this.handleBlur()}}
  209. /><img style={{display:style==1||style==2?'inline-block':'none'}} src={style==1?down:style==2?up:''} />{item.units}
  210. </span>
  211. <span className={styles.maxmin}>{normalVal(item.minValue,item.maxValue)}</span>
  212. <span className={styles.pass}>检验时间:
  213. <input disabled="disabled" type="text"
  214. class="canEdit"
  215. onDoubleClick={(e)=>this.setEdit(e)}
  216. style={{color:'#333'}}
  217. placeholder='时间'
  218. autoComplete="off"
  219. value={item.time}
  220. onInput={(e)=>{this.handleInput(e,item,1)}}
  221. onBlur={()=>{this.handleBlur()}}
  222. />
  223. </span>
  224. <span id="addClose" className={styles.partDel} onClick={()=>{this.handleDel(item.time)}}></span>
  225. <DelToast show={time==item.time&&activeInd?true:false}
  226. name={activeName}
  227. right={'-34px'}
  228. top={'30px'}
  229. cancel={this.handleCancel}
  230. confirm={()=>{this.delConfirm(item)}}/>
  231. </li>
  232. );
  233. }
  234. }
  235. export default SlideSelect;