index.jsx 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. import react from "react";
  2. import style from "./index.less";
  3. import $ from 'jquery';
  4. import classNames from 'classnames';
  5. import {handleEnter,isIE,filterArr,deepClone,filterDataArr,setFontColorSize,handleMouseUp} from '@utils/tools.js';
  6. import {Notify} from '@commonComp';
  7. import SlideItem from "./SlideItem";
  8. import config from '@config/index.js';
  9. /**
  10. 单列多选组件(tagtype=1,controlType=2)
  11. 2019-2-20 By_liucf
  12. 接收参数:
  13. placeholder:标签名
  14. value:标签选中的值
  15. show:是否展示下拉
  16. data:下拉数据
  17. type:1-主诉,2-现病史,3-其他史,4-查体
  18. **/
  19. class Multiple extends react.Component{
  20. constructor(props){
  21. super(props);
  22. const {seleData,seleId} = deepClone(props.selecteds||[]);
  23. this.state={
  24. editable:false,
  25. timer:null,
  26. labelVal:"",
  27. seleData:seleData||"",
  28. seleId:seleId||[],
  29. }
  30. this.$div = React.createRef();
  31. this.handleShow = this.handleShow.bind(this);
  32. this.changeToEdit = this.changeToEdit.bind(this);
  33. this.onChange = this.onChange.bind(this);
  34. this.handleBlur = this.handleBlur.bind(this);
  35. this.handleConfirm = this.handleConfirm.bind(this);
  36. }
  37. getClass(){
  38. const {show,value,hideTag,isImports,isExtBlue,mouseSelect} = this.props;
  39. const orgBorder = isImports&&!value?style['orange-border']:'';
  40. const ext = isExtBlue?style['ext']:'';
  41. const editBorder = this.state.editable?style['blue-border']:'';
  42. const selectedArea = mouseSelect?style['selected-area']:'';
  43. if(show){
  44. $(this.$div.current).addClass(style['borderd']);
  45. }else{
  46. $(this.$div.current).removeClass(style['borderd']);
  47. }
  48. if(value){
  49. if(hideTag){
  50. return classNames(style['hide-tag'],orgBorder,setFontColorSize(isExtBlue?2:''),selectedArea)
  51. }
  52. return classNames(style['selected-tag'],orgBorder,editBorder,setFontColorSize(),selectedArea);
  53. }else{
  54. if(hideTag){
  55. return isExtBlue?classNames(setFontColorSize(2)):classNames(setFontColorSize(2),'prefixUnsetColor')
  56. }
  57. return classNames(style['tag'],orgBorder,ext,setFontColorSize(1),selectedArea);
  58. }
  59. // if(value){
  60. // return hideTag?classNames(style['hide-tag'],orgBorder,setFontColorSize(isExtBlue?2:'')):classNames(style['selected-tag'],orgBorder,editBorder,setFontColorSize());
  61. // }
  62. // return hideTag?classNames(setFontColorSize()):classNames(style['tag'],orgBorder,ext,setFontColorSize());
  63. }
  64. getListClass(){
  65. let name = style['text-list'];
  66. let isHide = this.props.show?'':style['hide'];
  67. return classNames(style['list'],name,isHide);
  68. }
  69. handleShow(e){//单击
  70. e&&e.stopPropagation();
  71. this.setStateInit();
  72. const {ikey,handleShow,placeholder,flag,id,value,tagType,type} = this.props;
  73. const that = this;
  74. clearTimeout(this.state.timer);
  75. this.state.timer = setTimeout(function(){
  76. if (that.state.editable) {//如果处于编辑状态点击不显示下拉框
  77. return;
  78. }else{
  79. handleShow&&handleShow({ikey,placeholder,flag,id,value,tagType,type});
  80. }
  81. },300)
  82. }
  83. setStateInit(){//恢复初始选中状态
  84. const {seleData,seleId} = deepClone(this.props.selecteds||[]);
  85. this.setState({
  86. seleData:seleData||"",
  87. seleId:seleId||[],
  88. })
  89. }
  90. changeToEdit(e){//双击
  91. const {value,id,placeholder,handleDbclick,handleHide} = this.props;
  92. let text = e.target.innerText || e.target.innerHTML;
  93. window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
  94. handleHide&&handleHide(); //展开情况下双击收起
  95. // clearTimeout(this.state.timer);//取消延时的单击事件
  96. e.stopPropagation();
  97. if(value&&value.trim()){//有选中值的标签才能双击编辑
  98. this.setState({
  99. labelVal:text,
  100. editable:true
  101. });
  102. /*setTimeout(()=>{
  103. e.target.focus();
  104. })*/
  105. handleDbclick && handleDbclick({value,id,placeholder});
  106. }
  107. }
  108. onChange(e){
  109. const {mainSaveText,ikey,type,handleLabelChange} = this.props;
  110. const {labelVal,editable} = this.state;
  111. let mainText = filterDataArr(mainSaveText);//主诉字数
  112. if(editable){//避免IE中点击标签也会触发
  113. let val = e.target.innerText || e.target.innerHTML;
  114. if(+type==1){// 主诉字数达到上限时不允许输入
  115. if(mainText.length >= config.limited){
  116. if(val.length > labelVal.length){
  117. e.target.innerText?(e.target.innerText = labelVal):(e.target.innerHTML = labelVal);
  118. Notify.info(config.limitText);
  119. return
  120. }else if(val.length == labelVal.length){
  121. this.setState({
  122. labelVal:val
  123. });
  124. }else{
  125. handleLabelChange && handleLabelChange({ikey,changeVal:val,type});
  126. }
  127. }
  128. }
  129. }
  130. }
  131. handleBlur(e){//修改存值
  132. e.stopPropagation();
  133. const {ikey,type,handleLabelChange} = this.props;
  134. const {editable} = this.state;
  135. const ev = e || window.event;
  136. if(editable){
  137. // 更改标签的value值
  138. let changeVal = ev.target.innerText || e.target.innerHTML;
  139. if(!isIE()){
  140. e.target.innerText?(e.target.innerText = ''):(e.target.innerHTML=''); //避免出现重复输入值
  141. }
  142. handleLabelChange && handleLabelChange({ikey,changeVal,type});
  143. }
  144. this.setState({
  145. editable:false
  146. });
  147. }
  148. handleConfirm(obj){
  149. const {handleConfirm,ikey,order,mainSaveText,value,handleHide,type} = this.props;
  150. const params = Object.assign({},obj,{ikey,order,mainSaveText,value,type});
  151. handleConfirm&&handleConfirm(params);
  152. handleHide&&handleHide();
  153. }
  154. handleMouseDown(){
  155. const {i,setSelectArea,boxMark}= this.props;
  156. !this.state.editable&&setSelectArea({i,boxMark,dir:'start'});
  157. }
  158. componentDidMount(){
  159. if(isIE()){
  160. $(this.$div.current).onIe8Input(function(e){
  161. this.onChange(e)
  162. },this);
  163. }
  164. }
  165. render(){
  166. const {placeholder,value,show,data,hideTag,select_start,i,boxMark} = this.props;
  167. const {editable,seleData,seleId} = this.state;
  168. return <div className={style["container"]}>
  169. <div className={this.getClass()}
  170. ref={this.$div}
  171. onClick={this.handleShow}
  172. onDoubleClick={hideTag?null:this.changeToEdit}
  173. onBlur={this.handleBlur}
  174. onInput={this.onChange}
  175. onKeyDown={handleEnter}
  176. onMouseUp={()=>handleMouseUp({select_start,i,boxMark})}
  177. onMouseDown={this.handleMouseDown.bind(this)}
  178. contentEditable={editable}>{value||placeholder}</div>
  179. <div className={this.getListClass()} contentEditable="false">
  180. <SlideItem
  181. show={show}
  182. data={data}
  183. seleData={seleData}
  184. seleId={seleId}
  185. handleConfirm={(obj)=>this.handleConfirm(obj)}
  186. ></SlideItem >
  187. </div>
  188. </div>
  189. }
  190. }
  191. export default Multiple;