index.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. import PropTypes from "prop-types"
  2. import React from "react"
  3. import style from "./index.less"
  4. import TemplateItem from './TemplateItem'
  5. import check_circle from './TemplateItem/img/check-circle.png';
  6. import delIcon from '@common/images/del_nor.png';
  7. import check_right from './TemplateItem/img/check-right.png';
  8. import tempTip from './TemplateItem/img/tempTip.png';
  9. import tempTrd from './TemplateItem/img/tempTrd.png';
  10. import tmpAllCircle from './TemplateItem/img/tmpAllCircle.png';
  11. import tmpAllRight from './TemplateItem/img/tmpAllRight.png';
  12. import floderR from './TemplateItem/img/floderR.png';
  13. import floderD from './TemplateItem/img/floderD.png';
  14. import Empty from '@components/Empty';
  15. import $ from 'jquery';
  16. import store from '@store';
  17. import { initCommonItemList,findTemplateNorms,getFloderListAll } from '@store/async-actions/tabTemplate';
  18. import { windowEventHandler,getWindowInnerHeight } from '@utils/tools'
  19. class TemplateItems extends React.Component {
  20. constructor(props) {
  21. super(props);
  22. this.state = {
  23. msg:'还没有保存模板',
  24. val:'',
  25. height:'',
  26. showTipContent:false,
  27. hasSearch: false,
  28. showIndex: 0
  29. }
  30. this.$cont = React.createRef();
  31. this.$conts = React.createRef();
  32. this.$search = React.createRef();
  33. this.genItems = this.genItems.bind(this);
  34. this.templateSearch = this.templateSearch.bind(this);
  35. this.handleEnter = this.handleEnter.bind(this);
  36. this.handleChange = this.handleChange.bind(this);
  37. this.clear = this.clear.bind(this);
  38. this.showTipContent = this.showTipContent.bind(this);
  39. this.getFloderLis = this.getFloderLis.bind(this);
  40. this.whichTemp = this.whichTemp.bind(this);
  41. }
  42. componentDidMount(){
  43. const height = getWindowInnerHeight()-195;
  44. this.setState({
  45. height:height
  46. })
  47. windowEventHandler('resize', ()=>{
  48. if(this.$conts.current){
  49. const height = getWindowInnerHeight()-195;
  50. this.setState({
  51. height:height
  52. })
  53. }
  54. });
  55. $(document).click((event) => {
  56. let _del = $('#floderAction')[0]; // 弹窗
  57. let _dels = $(event.target).attr("id"); // 触发弹窗列表
  58. if (_del) {//onMousedown的目标为滚动条时,删除弹窗不关闭
  59. if (!event.target.isEqualNode(_del) && event.target.parentNode != _del &&_dels != 'floderActionBtn') {
  60. this.floderAction(false,'none')
  61. }
  62. }
  63. })
  64. }
  65. showTipContent(){
  66. let show = this.state.showTipContent
  67. this.setState({
  68. showTipContent:!show
  69. })
  70. }
  71. floderSlide(e,item,i){
  72. e.stopPropagation()
  73. const {floderSlide,admin,clearReset} = this.props
  74. const {showIndex} = this.state
  75. if(!item.templateInfo){
  76. return;
  77. }
  78. $(e.target).next().slideToggle()
  79. let domLis = $(e.target).parent().siblings()
  80. for(let i = 0;i < domLis.length;i++){
  81. let tmpD = domLis[i]
  82. $(tmpD).children().eq(1).slideUp()
  83. }
  84. floderSlide(item.id)
  85. clearReset&&clearReset()
  86. if(admin) {
  87. if(showIndex === i) {
  88. this.setState({
  89. showIndex: -1
  90. })
  91. } else {
  92. this.setState({
  93. showIndex: i
  94. })
  95. }
  96. }
  97. }
  98. floderAction(e,id){
  99. e&&e.stopPropagation()
  100. const {floderAction} = this.props;
  101. floderAction(id)
  102. }
  103. genItems(items,flg) {
  104. const Items = [];
  105. const {admin,checkItems,allCheckShow,handleContentClick,handleTemplateDel,handleTitleChange,checkItemsAdmin,allCheckShowAdmin} = this.props;
  106. items.forEach((v,idx) => {
  107. Items.push(
  108. <TemplateItem
  109. {...v}
  110. key={v.id}
  111. idx={idx}
  112. checkItems={checkItems}
  113. allCheckShow={allCheckShow}
  114. handleContentClick={handleContentClick}
  115. handleTemplateDel={handleTemplateDel}
  116. handleTitleChange={handleTitleChange}
  117. admin={admin}
  118. adminflg={flg}
  119. checkItemsAdmin={checkItemsAdmin}
  120. allCheckShowAdmin={allCheckShowAdmin}
  121. />
  122. );
  123. });
  124. return Items;
  125. }
  126. floderRename(e,name,id){
  127. e.stopPropagation()
  128. this.props.floderAction(false,'none')
  129. this.props.floderRename(name,id)
  130. }
  131. floderDelete(e,id){
  132. e.stopPropagation()
  133. this.props.floderAction(false,'none')
  134. this.props.floderDelete(id)
  135. }
  136. genAdminItems(items,flg) {
  137. const Floder=[],Items = [];
  138. const {admin,checkItemsAdmin} = this.props;
  139. let {showIndex}=this.state
  140. if(items.length>0&&!items[0].templateInfo){
  141. showIndex = -1
  142. }
  143. for(let i = 0;i < items.length;i++){
  144. let tmpItm = items[i]
  145. Floder.push(
  146. <div className={style.floderPart}>
  147. <div className={`${style.floderPartFl} floderSlideLis`} onClick={(e)=>this.floderSlide(e,tmpItm,i)}>
  148. {admin&&<img src={showIndex== i?floderD:floderR} className={style.floderRD}/>}
  149. {!admin&&<img src={tmpItm.slide == 1?floderD:floderR} className={style.floderRD}/>}
  150. {tmpItm.name}({tmpItm.templateInfoCount})
  151. {admin&&tmpItm.name!='未分类文件夹'&&<span className={`${style.floderPartAction}`} id="floderActionBtn" onClick={(e)=>{this.floderAction(e,tmpItm.id)}}>...</span>}
  152. {tmpItm.action == 1&&tmpItm.name!='未分类文件夹'&&<div className={style.floderAction} id="floderAction">
  153. <p onClick={(e)=>{this.floderRename(e,tmpItm.name,tmpItm.id)}}>重命名文件夹</p>
  154. <p onClick={(e)=>{this.floderDelete(e,tmpItm.id)}}>删除文件夹</p>
  155. </div>}
  156. </div>
  157. {
  158. tmpItm.templateInfo&&tmpItm.templateInfo.length>0&&<div className={style.floderPartFr}>
  159. {
  160. this.getFloderLis(tmpItm.templateInfo,flg,tmpItm.name,tmpItm.id)
  161. }
  162. </div>
  163. }
  164. </div>
  165. )
  166. }
  167. return Floder
  168. }
  169. getFloderLis(items,flg,folderName){//文件夹内的模板明细
  170. const Items = [];
  171. const {admin,checkItemsAdmin,allCheckShowAdmin} = this.props;
  172. items.forEach((v,idx) => {
  173. Items.push(
  174. <TemplateItem
  175. {...v}
  176. key={v.id}
  177. idx={idx}
  178. folderName={folderName}
  179. checkItems={this.props.checkItems}
  180. allCheckShow={this.props.allCheckShow}
  181. handleContentClick={this.props.handleContentClick}
  182. handleTemplateDel={this.props.handleTemplateDel}
  183. handleTitleChange={this.props.handleTitleChange}
  184. admin={this.props.admin}
  185. adminflg={flg}
  186. checkItemsAdmin={checkItemsAdmin}
  187. allCheckShowAdmin={allCheckShowAdmin}
  188. />
  189. );
  190. });
  191. return Items;
  192. }
  193. getCheckIcon() {
  194. const {admin,checkItems,items,checkItemsAdmin,adminItems,folderListContentArr} = this.props;
  195. if(admin){
  196. if (folderListContentArr.length == checkItemsAdmin.length && checkItemsAdmin.length != 0) {
  197. return check_right;
  198. } else {
  199. return check_circle;
  200. }
  201. }
  202. if (items.length == checkItems.length && checkItems.length != 0) {
  203. return tmpAllRight;
  204. } else {
  205. return tmpAllCircle;
  206. }
  207. }
  208. templateSearch(){
  209. const {templateSearch,selectTemp,admin} = this.props
  210. if(!(this.$search.current.value).trim()) {
  211. return
  212. }
  213. if(admin) {
  214. templateSearch((this.$search.current.value).trim(),2)
  215. } else {
  216. templateSearch((this.$search.current.value).trim(),selectTemp)
  217. }
  218. if(this.$search.current.value.trim()){
  219. this.setState({
  220. msg:'暂无模板信息'
  221. })
  222. }else{
  223. this.setState({
  224. msg:'还没有保存模板'
  225. })
  226. }
  227. this.setState({
  228. hasSearch: true
  229. })
  230. }
  231. handleEnter(e){
  232. if(e.keyCode==13){
  233. this.templateSearch();
  234. }
  235. }
  236. handleChange(){
  237. const {admin,selectTemp} = this.props;
  238. const value = (this.$search.current.value).substring(0,30);
  239. // this.$search.current.value = value
  240. if(!admin&&selectTemp==1&&value == ''){
  241. store.dispatch(initCommonItemList(1,""))
  242. }else if(!admin&&selectTemp==2&&value == ''){
  243. this.setState({
  244. hasSearch:false
  245. })
  246. store.dispatch(findTemplateNorms(''))
  247. }else if(admin){
  248. this.setState({
  249. hasSearch:false
  250. })
  251. store.dispatch(getFloderListAll(''))
  252. }
  253. setTimeout(() => {
  254. this.setState({
  255. val: value
  256. });
  257. }, 30);
  258. }
  259. clear(){
  260. const {clearTemplateSearch,selectTemp,admin} = this.props
  261. this.$search.current.value = '';
  262. this.setState({
  263. val:''
  264. });
  265. this.$search.current.focus();
  266. this.templateSearch();
  267. this.setState({
  268. hasSearch: false
  269. })
  270. clearTemplateSearch&&clearTemplateSearch()
  271. setTimeout(()=>{
  272. $(".floderSlideLis").eq(0).next().slideDown()
  273. },0)
  274. if(!admin){
  275. store.dispatch(initCommonItemList(1,""))
  276. }
  277. }
  278. clickTabChange(){
  279. }
  280. componentWillReceiveProps(next){
  281. //点清空恢复初始状态
  282. if(this.props.clearSearch!==next.clearSearch || next.reset){
  283. this.clear();
  284. this.props.clearReset()
  285. }
  286. const oldIndex = this.state.showIndex
  287. // if(next.reset) {
  288. // this.clear()
  289. // }
  290. if(next.reset && oldIndex != 0) {
  291. $(".floderSlideLis").eq(oldIndex).next().slideUp()
  292. this.setState({
  293. showIndex: 0,
  294. hasSearch: false
  295. })
  296. }
  297. }
  298. whichTemp(num,val){
  299. setTimeout(()=>{
  300. $(".floderSlideLis").eq(0).next().slideDown()
  301. },0)
  302. this.props.whichTemp(num,val)
  303. // if(val){
  304. // this.setState({
  305. // hasSearch:true
  306. // })
  307. // }
  308. }
  309. render() {
  310. const {selectTemp,whichTemp, checkItemsAdmin,handleAllCheckboxAdmin,handleMangerTemplateAdmin,allCheckShowAdmin,admin,adminItems,allCheckShow, handleMangerTemplate,handleClickGetMore, handleDelList, handleAllCheckbox, items,checkItems,current,hasMore,templateNormsSearchList } = this.props;
  311. const {height,showTipContent,hasSearch} = this.state
  312. return (
  313. <div className={style.wrapper} >
  314. {//管理员操作
  315. adminItems&&admin ? (allCheckShowAdmin ?
  316. <div className={style.wrapperTop}>
  317. <div className={style['check-wrap']} onClick={handleAllCheckboxAdmin} style={{paddingLeft:'10px'}}>
  318. <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
  319. </div>
  320. <span onClick={handleAllCheckboxAdmin}>全选</span>
  321. <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplateAdmin}>完成</span>
  322. {
  323. checkItemsAdmin.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
  324. <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
  325. }
  326. </div> :
  327. <div className={style.wrapperTop}>
  328. <div className={style.templateSearch}>
  329. <input placeholder="模板搜索" id="searchTmp" maxLength="30" ref={this.$search} type="text" onInput={this.handleChange} onPropertyChange={this.handleChange} onKeyUp={this.handleEnter}/>
  330. {this.state.val?<img src={delIcon} id='clearTemplateSearch' alt="清空" onClick={this.clear}/>:''}
  331. <div className={style.search} onClick={this.templateSearch}>搜索</div>
  332. </div>
  333. {
  334. adminItems.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplateAdmin}>管理</span>
  335. }
  336. </div>) : null
  337. }
  338. {//个人
  339. items&&!admin?
  340. <div className={style.wrapperTop}>
  341. <div className={style.templateSearch}>
  342. <input placeholder="模板搜索" id="searchTmp" maxLength="30" ref={this.$search} type="text" onInput={this.handleChange} onPropertyChange={this.handleChange} onKeyUp={this.handleEnter}/>
  343. {this.state.val?<img src={delIcon} alt="清空" onClick={this.clear}/>:''}
  344. <div className={style.search} onClick={this.templateSearch}>搜索</div>
  345. </div>
  346. </div> : null
  347. }
  348. {
  349. <div className={style.comAdminWrp}>
  350. <div className={`${style.tempLists} ${style.tempListsP}`} ref={this.$cont} style={{display:admin?'none':'block',border:'1px solid #EAEDF1'}}>
  351. {//个人
  352. allCheckShow ?<div className={`${style.wrapperTop} ${style.wrapperTopM} ${style.personalTmp} ${selectTemp==1?style.personalTmpOwn:null}`} onClick={()=>whichTemp(1)}>
  353. <i></i>
  354. <i></i>
  355. <div className={style['check-wrap']} onClick={handleAllCheckbox}>
  356. <img className={`${style['fl-element']} ${style['check-box']}`} src={this.getCheckIcon()} />
  357. </div>
  358. <span onClick={handleAllCheckbox}>全选</span>
  359. <span className={`${style['fr-element']} ${style['done']}`} onClick={handleMangerTemplate}>完成</span>
  360. {checkItems.length>0&&<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>}
  361. {/* {
  362. checkItems.length>0?<span className={`${style['fr-element']} ${style['del-items']}`} onClick={handleDelList}>删除</span>:
  363. <span className={`${style['fr-element']} ${style['del-items-gray']}`}>删除</span>
  364. } */}
  365. </div>:null
  366. }
  367. {
  368. <div className={`${style.topBorder} clearfix`}>
  369. {
  370. !allCheckShow&&<div className={`${style.personalTmp} ${selectTemp==1?style.personalTmpOwn:''} clearfix`} onClick={()=>whichTemp(1,(this.state.val).trim(),hasSearch)}>
  371. <span className={style.tip}>个人模板</span>
  372. <i></i>
  373. {
  374. items.length > 0&&<span className={`${style['fr-element']} ${style['manger']}`} onClick={handleMangerTemplate}>管理</span>
  375. }
  376. </div>
  377. }
  378. {
  379. !admin?!allCheckShowAdmin&&<div
  380. className={`${style.personalTmp} ${style.personalTmpStatand} ${selectTemp==2?style.personalTmpOwn:''}`}
  381. onClick={()=>{this.whichTemp(2,(this.state.val).trim(),hasSearch);allCheckShow&&handleMangerTemplate(2)}}
  382. >标准模板 {selectTemp==2&&<img src={tempTip} className={style.tempTip} alt="" onMouseEnter={this.showTipContent} onMouseLeave={this.showTipContent}/>}
  383. {
  384. showTipContent&&<div className={style.tempTipContent}>
  385. <img src={tempTrd} alt=""/>
  386. <p>1. 标准模板中的科室,对应的是经朗通医疗团队整理的,符合临床医学意义的科室;</p>
  387. <p>2.只有特定的“管理员”账号,可对“标准模板”进行修改,普通账号仅可进行“引用”。</p>
  388. </div>
  389. }
  390. </div>:''
  391. }
  392. </div>
  393. }
  394. {
  395. <div style={{height:height-54+'px',overflow:'auto'}}>
  396. {
  397. selectTemp==1&&this.genItems(items).length > 0?this.genItems(items):selectTemp==2&&this.genAdminItems(adminItems,true).length > 0?hasSearch ? this.genItems(templateNormsSearchList,true):this.genAdminItems(adminItems,true): <Empty message={this.state.msg}></Empty>
  398. }
  399. </div>
  400. }
  401. </div>
  402. {
  403. admin&&<div className={style.tempLists} ref={this.$conts} style={{border:admin?'0':'1px solid #EAEDF1'}}>
  404. <div style={{height:height+'px',overflow:'auto'}}>
  405. {this.genAdminItems(adminItems,true).length > 0?hasSearch ?this.genItems(templateNormsSearchList):this.genAdminItems(adminItems,true): <Empty message={this.state.msg}></Empty>}
  406. </div>
  407. </div>
  408. }
  409. </div>
  410. }
  411. {/* <div className={style.tempLists} ref={this.$cont}>
  412. {
  413. this.genItems().length > 0?this.genItems(): <Empty message={this.state.msg}></Empty>
  414. }
  415. {//注释掉的暂时没有分也功能
  416. hasMore?<p onClick={()=>handleClickGetMore(current)} className={style.loadMore}>点击查看更多</p>:null
  417. }
  418. </div> */}
  419. </div>
  420. )
  421. }
  422. }
  423. export default TemplateItems;
  424. TemplateItems.propTypes = {
  425. items: PropTypes.arrayOf(PropTypes.object),
  426. handleContentClick: PropTypes.func,
  427. handleUpdate: PropTypes.func,
  428. handleTemplateDel: PropTypes.func,
  429. handleTitleChange: PropTypes.func
  430. };