index.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340
  1. import React from 'react';
  2. import { SearchOption, Calendar, ConfirmModal, Notify, Add ,DelToast} from '@commonComp';
  3. import styles from './index.less';
  4. import config from '@config/index';
  5. import $ from 'jquery';
  6. import Textarea from './Textarea';
  7. import AssistName from './AssistName';
  8. import { getPageCoordinate,getCurrentDate,setPosition, setFontColorSize } from '@utils/tools';
  9. import ScrollArea from 'react-scrollbar';
  10. class AddAssistCheck extends React.Component {
  11. constructor(props) {
  12. super(props);
  13. this.state = {
  14. show: false,
  15. date: false,
  16. dateTime: "",
  17. active: '',
  18. visible: false,
  19. pageTop:'',
  20. id: null,
  21. stimer: null,
  22. activeName:''
  23. }
  24. this.handleShowDate = this.handleShowDate.bind(this)
  25. this.getSearchList = this.getSearchList.bind(this)
  26. this.getAssistLabel = this.getAssistLabel.bind(this)
  27. this.handleDelClick = this.handleDelClick.bind(this)
  28. this.delConfirm = this.delConfirm.bind(this)
  29. this.handleCancel = this.handleCancel.bind(this)
  30. this.timeSure = this.timeSure.bind(this)
  31. }
  32. componentDidMount() {
  33. $(document).click((event) => {
  34. let _con = $('#searchWrapAssist'); // 设置目标区域
  35. let _cons = $('#datePick'); // 设置目标区域
  36. let _conClick = $('#assistCheck'); // 点击的按钮
  37. let _del = document.getElementById("delBox"); // 删除弹窗
  38. let _close = document.getElementById("assiClose"); // 删除icon
  39. let _closeTil = $('#delTit')[0]; // 弹窗标题
  40. if(!this.isBar) {//onMousedown的目标为滚动条时,子项弹窗不关闭)
  41. if ($(event.target).attr('id')=='searchWrapAssist'||_con && _con != event.target && !_con.is(event.target) && _con.has(event.target).length === 0) { // Mark 1
  42. if (this.state.show) {
  43. this.props.setHighter(48)
  44. }
  45. this.setState({show: false});
  46. }
  47. if (!_cons.is(event.target)&&!_conClick && _cons.has(event.target).length === 0 || event.target.isEqualNode(_close)) { // Mark 1
  48. this.setState({date: false});
  49. }
  50. if($(event.target).attr("contenteditable")||event.target.textContent == '报告描述或意见'){
  51. this.setState({date: false});
  52. }
  53. if(_del){
  54. if($(event.target).attr('id') != 'assiClose' &&!event.target.isEqualNode(_close) && !event.target.isEqualNode(_del) && event.target.parentNode != _del && !event.target.isEqualNode(_closeTil)){
  55. this.setState({
  56. visible: false,
  57. id: null,
  58. activeName:''
  59. })
  60. }
  61. }
  62. }
  63. });
  64. const that = this;
  65. document.addEventListener('mousedown',function(e){
  66. //onMousedown的目标为滚动条时,标签填写单不关闭
  67. if(e.target.className=='scrollbar'){
  68. that.isBar = true;
  69. }else{
  70. that.isBar = false;
  71. }
  72. });
  73. getCurrentDate(1);
  74. }
  75. handleDelClick(id,item) {
  76. this.setState({
  77. visible: true,
  78. id: id,
  79. activeName:item.name
  80. })
  81. }
  82. delConfirm(type) {
  83. const { handleDelAssist, handlePush } = this.props;
  84. const { id,activeName } = this.state;
  85. $(".TextareaRsize").css({marginTop:0});
  86. handleDelAssist && handleDelAssist(id,activeName,type);
  87. handlePush && handlePush({mode:9}); //右侧推送
  88. this.setState({
  89. visible: false,
  90. id: null,
  91. activeName:''
  92. })
  93. Notify.success("删除成功");
  94. }
  95. handleCancel() {
  96. this.setState({
  97. visible: false,
  98. id: null,
  99. activeName:''
  100. })
  101. }
  102. handleSearchShow(e) {
  103. const { handlePush } = this.props;
  104. let tmpShow = this.state.show;
  105. this.setState({ show: !tmpShow,pageTop:getPageCoordinate(e).boxTop })
  106. // e.stopPropagation();
  107. if(tmpShow){
  108. this.props.setHighter(48)
  109. }else{
  110. setPosition(e,"#searchOption",this.props.setHighter)
  111. handlePush && handlePush({mode:9}); //右侧推送
  112. }
  113. }
  114. handleShowDate(idx) {
  115. this.setState({
  116. date: !this.state.date,
  117. active: idx
  118. })
  119. }
  120. handleSign(item,idx){
  121. const { handleSign,handlePush } = this.props;
  122. handleSign(item,idx)
  123. handlePush && handlePush({mode:8}); //右侧推送
  124. }
  125. getSearchList(list) { //搜索列表
  126. const contStyle={
  127. opacity:'0.4',
  128. right:'0',
  129. top:'1px',
  130. zIndex:'15',
  131. width:'14px',
  132. background:'#f1f1f1'};
  133. const barStyle={background:'#777',width:'100%'};
  134. return <ul className={`${styles.searchLiUl} ${styles.assistListUl}`} style={{height:'205px',width:'412px',overflow:'auto'}}>
  135. {
  136. list && list.map((item, idx) => {
  137. return <li key={item.id}
  138. className={styles.searchLi}
  139. title={item.name}
  140. onClick={() => {
  141. this.props.setHighter(96)
  142. this.handleSign(item,'search');
  143. this.setState({ show: false })
  144. }}
  145. >
  146. {item.name}
  147. </li>
  148. })
  149. }
  150. </ul>;
  151. }
  152. getCommonList() { //常用列表
  153. const { handleSign,assistList } = this.props;
  154. return <ul className={styles.searchLiUl}>
  155. {
  156. assistList && assistList.map((item, idx) => {
  157. return <li key={item.id}
  158. className={styles.searchLi}
  159. title={item.name}
  160. onClick={() => {
  161. this.props.setHighter(48)
  162. this.handleSign(item.conceptId, idx,'common');
  163. this.setState({ show: false })
  164. }}
  165. >
  166. {item.name}
  167. </li>
  168. })
  169. }
  170. </ul>
  171. }
  172. handleChangeDate(){}
  173. timeSure(date,idx){
  174. this.props.handleChangeDate(date,idx)
  175. this.setState({ date: false })
  176. }
  177. setEdit(e){
  178. // $('.canEdit').blur().attr('disabled','disabled')
  179. $(e.target).removeAttr('disabled').focus()
  180. }
  181. handleBlur(){
  182. // const {handlePush} = this.props;
  183. $('.canEdit').attr('disabled','disabled')
  184. // handlePush && handlePush({mode:8}); //右侧推送
  185. }
  186. handleInput(e,item,idx){
  187. const {setTipValue,handlePush} = this.props
  188. setTipValue(item,e.target.value,idx)
  189. //右侧推送--延时推送
  190. const stimer = this.state.timer;
  191. clearTimeout(stimer);
  192. let timer = setTimeout(function(){
  193. handlePush&&handlePush({mode:9});
  194. clearTimeout(stimer);
  195. },config.delayPushTime);
  196. this.setState({timer})
  197. }
  198. handleFocus(){
  199. const {handlePush} = this.props;
  200. handlePush&&handlePush({mode:9});
  201. }
  202. getAssistLabel() {
  203. const { assistLabel,checkedListImport, handleChangeAssistValue,checkOnOff, handleChangeDate, isRead, handlePush, winWidth,getInfomation,assistList } = this.props;
  204. const { visible,activeName,id,date } = this.state;
  205. //出现滚动条时阻止滚动冒泡,未出现时不阻止,否则外部滚动条滚不动
  206. const showedBar = $("#datePick .scrollbar-container").length===1;
  207. const contStyle={
  208. opacity:'0.4',
  209. right:'0',
  210. top:'1px',
  211. zIndex:'1',
  212. width:'8px',
  213. background:'#f1f1f1'};
  214. const barStyle={background:'#777',width:'100%'};
  215. return <React.Fragment>
  216. <ul className={styles.labelWrap} id="datePick">
  217. {
  218. assistLabel.map((item, idx) => {
  219. let staticTime = {}
  220. if(item.time){
  221. let tmp1 = (item.time).split(' ')[0].split('-')
  222. let tmp2 = (item.time).split(' ').length>1&&(item.time).split(' ')[1].split(':')
  223. staticTime = {
  224. year: tmp1[0]-0,
  225. month: tmp1[1]-0,
  226. day: tmp1[2]-0,
  227. hour: tmp2[0],
  228. minute: tmp2[1],
  229. second: tmp2[2]
  230. }
  231. }
  232. return (item.disabled?null:<li className={`${styles.assistLists} ${styles.clearfix}`}>
  233. {/* <span className={styles.assistName} style={{ width: winWidth<1200?'120px':(winWidth-987)+'px' }}> */}
  234. {/* <span className={styles.assistName} style={{ width: winWidth<1200?'120px':'auto' }}>
  235. <span className={styles.tagSpan}>
  236. {item.name}:
  237. <span className={styles.imgInfo} title='点击i图标可查看详细说明' onClick={()=>getInfomation({name: item.name, position: 1, type: 6})}></span>
  238. </span>
  239. </span> */}
  240. <AssistName item={item} idx={idx} checkOnOff={checkOnOff} name={item.name} winWidth={winWidth} handlePush={handlePush} getInfomation={getInfomation}></AssistName>
  241. <div className={`${styles.textareaWrap} ${setFontColorSize(2,1)}`}>
  242. <ScrollArea speed={0.8}
  243. horizontal={false}
  244. stopScrollPropagation={showedBar?true:false}
  245. style={{maxHeight:'100px'}}
  246. className={styles["area"]}
  247. verticalContainerStyle={contStyle}
  248. verticalScrollbarStyle={barStyle}
  249. contentClassName="content TextareaRsize">
  250. <Textarea value={item.value} disabled={item.disabled} handlePush={handlePush} isRead={isRead} handleChangeAssistValue={handleChangeAssistValue} idx={idx}></Textarea>
  251. </ScrollArea>
  252. </div>
  253. <div className={`${styles.pointerFinger} ${setFontColorSize(2,2)}`}>
  254. {/* <p>报告日期: */}
  255. <p>
  256. <span>
  257. <input type="text"
  258. class="canEdit"
  259. // onDoubleClick={(e)=>this.setEdit(e)}
  260. style={'#333'}
  261. placeholder='时间'
  262. autoComplete="off"
  263. value={item.time}
  264. onFocus={()=>{this.handleFocus()}}
  265. onInput={(e)=>{this.handleInput(e,item,idx)}}
  266. // onBlur={()=>{this.handleBlur()}}
  267. />
  268. </span>
  269. </p>
  270. <span className={styles.closeIcon} id="assiClose" onClick={() => { this.handleDelClick(idx,item) }}></span>
  271. </div>
  272. <DelToast show={idx==id&&item.name==activeName?visible:false}
  273. name={activeName}
  274. right={'-40px'}
  275. top={'50px'}
  276. cancel={this.handleCancel}
  277. confirm={()=>this.delConfirm(1)}/>
  278. {/* {
  279. id == null?null:<DelToast show={idx==id&&item.name==activeName?visible:false}
  280. name={activeName}
  281. cancel={this.handleCancel}
  282. confirm={this.delConfirm}/>
  283. } */}
  284. </li>)
  285. })
  286. }
  287. </ul>
  288. </React.Fragment>
  289. }
  290. render() {
  291. const { handleChangeValue, list,assistVal,windowHeight,assistList, refreshScroller } = this.props;
  292. const { visible,pageTop } = this.state;
  293. const contStyle={
  294. opacity:'0.4',
  295. right:'0',
  296. top:'1px',
  297. zIndex:'15',
  298. width:'14px',
  299. background:'#f1f1f1'};
  300. const barStyle={background:'#777',width:'100%'};
  301. return (
  302. <div className={styles.wrapper}>
  303. {this.getAssistLabel()}
  304. <div id="searchWrapAssist" style={{ position: "relative", clear: 'both' }}>
  305. <Add showText="添加检查项" handleClick={(e) => this.handleSearchShow(e)} id="assistCheck" />
  306. {this.state.show ? <SearchOption windowHeight={windowHeight} refreshScroller={refreshScroller } pageTop={pageTop} height={280} handleChangeValue={handleChangeValue} visible={true}>
  307. {list && list.length>0?this.getSearchList(list):(assistVal == ''?'':<p style={{padding:'42px 30px',color:'#bfbfbf'}}>暂无筛选项</p>)}
  308. {/* {
  309. (list && list.length>0) || (assistVal != '') || (assistList&&assistList.length==0)?'':<div>
  310. <p style={{padding:'5px 30px',color:'#bfbfbf'}}>常用检查项</p>
  311. {assistList.length>6?<ScrollArea speed={0.8}
  312. horizontal={false}
  313. stopScrollPropagation={true}
  314. style={{height:'225px'}}
  315. className={styles["area"]}
  316. verticalContainerStyle={contStyle}
  317. verticalScrollbarStyle={barStyle}
  318. contentClassName="content">
  319. {
  320. this.getCommonList()
  321. }
  322. </ScrollArea>:this.getCommonList()}
  323. </div>
  324. } */}
  325. </SearchOption> : ''}
  326. </div>
  327. </div>
  328. )
  329. }
  330. }
  331. export default AddAssistCheck;