index.jsx 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import style from './index.less';
  4. import close from './img/close.png';
  5. import { Notify } from '@commonComp';
  6. import floderR from './img/floderR.png';
  7. import floderD from './img/floderD.png';
  8. import diagUp from '@common/images/diagUp.png';
  9. import diagDown from '@common/images/diagDown.png';
  10. class FolderOrder extends React.Component {
  11. constructor(props) {
  12. super(props);
  13. this.state = {
  14. folderModal:false,
  15. selectIndex: -1,
  16. folderList: null,
  17. }
  18. this.textInput = React.createRef();
  19. this.orderFolder = this.orderFolder.bind(this)
  20. this.saveOrderFolder = this.saveOrderFolder.bind(this)
  21. }
  22. componentWillReceiveProps(props) {
  23. this.setState({
  24. folderList: JSON.parse(JSON.stringify(props.adminItems)),
  25. selectIndex: -1
  26. })
  27. }
  28. floderSlide(e,i) {
  29. const selectIndex = this.state.selectIndex
  30. if(selectIndex === i) {
  31. this.setState({
  32. selectIndex: -1
  33. })
  34. } else {
  35. this.setState({
  36. selectIndex: i
  37. })
  38. }
  39. }
  40. saveOrderFolder(){
  41. const {saveOrderFolder,patInfo,folderManage} = this.props
  42. const {folderList} = this.state
  43. let folderListFilter = []
  44. for(let i = 0; i < folderList.length; i++) {
  45. let templateList = []
  46. if(folderList[i].templateInfo) {
  47. for(let j = 0; j < folderList[i].templateInfo.length;j++) {
  48. const templateItem = folderList[i].templateInfo[j]
  49. templateList.push({
  50. "folderId": templateItem.folderId,
  51. "id": templateItem.folderMappingId,
  52. "isDeleted": "N",
  53. "orderNo": j,
  54. "templateId": templateItem.id
  55. })
  56. }
  57. }
  58. const item =
  59. {
  60. "doctorId": patInfo.doctorId,
  61. "hospitalId": patInfo.hospitalId,
  62. "id": folderList[i].id,
  63. "isDeleted": "N",
  64. "name": folderList[i].name,
  65. "orderNo": i,
  66. "templateSortVOList": templateList
  67. }
  68. folderListFilter.push(item)
  69. }
  70. saveOrderFolder(folderListFilter)
  71. folderManage(false)
  72. }
  73. orderFolder(index,e) {
  74. e.stopPropagation();
  75. const {selectIndex, folderList} = this.state
  76. const folderListCopy = JSON.parse(JSON.stringify(folderList))
  77. const item = folderListCopy[index]
  78. if(index > 0) {
  79. folderListCopy.splice(index, 1)
  80. folderListCopy.splice(index-1, 0 , item)
  81. if(index === selectIndex) {
  82. this.setState({
  83. selectIndex: selectIndex-1
  84. })
  85. }else if(index === selectIndex+1){
  86. this.setState({
  87. selectIndex: selectIndex+1
  88. })
  89. }
  90. } else {
  91. folderListCopy.splice(index, 1)
  92. folderListCopy.splice(index+1, 0 , item)
  93. if(selectIndex === index + 1) {
  94. this.setState({
  95. selectIndex: selectIndex - 1
  96. })
  97. }else if(selectIndex == 0 ) {
  98. this.setState({
  99. selectIndex: selectIndex+1
  100. })
  101. }
  102. }
  103. this.setState({
  104. folderList: folderListCopy
  105. })
  106. }
  107. orderTemplate(i,index, e) {
  108. e.stopPropagation();
  109. const folderListCopy = JSON.parse(JSON.stringify(this.state.folderList))
  110. const olderItem = folderListCopy[i]
  111. const templateList = olderItem.templateInfo
  112. const templateItem = templateList[index]
  113. if(index > 0) {
  114. templateList.splice(index, 1)
  115. templateList.splice(index-1, 0 , templateItem)
  116. } else {
  117. templateList.splice(index, 1)
  118. templateList.splice(index+1, 0 , templateItem)
  119. }
  120. this.setState({
  121. folderList: folderListCopy
  122. })
  123. }
  124. genAdminItems(items,flg) {
  125. const Floder=[],Items = [];
  126. const {admin,checkItemsAdmin} = this.props;
  127. const { selectIndex } = this.state;
  128. for(let i = 0;i < items.length;i++){
  129. let tmpItm = items[i]
  130. Floder.push(
  131. <div className={style.floderBox}>
  132. <div className={style.floderItem} onClick={(e)=>{tmpItm.templateInfo&&tmpItm.templateInfo.length>0 ?this.floderSlide(e,i) :''}}>
  133. <img src={selectIndex == i?floderD:floderR} className={style.floderRD}/>
  134. {tmpItm.name}({tmpItm.templateInfoCount})
  135. <span class={`${i ===0 ? style.arrowDown : style.arrowUp}`} onClick={this.orderFolder.bind(this, i)}></span>
  136. {/* <img class={style.orderIcon} src={i===0?diagDown:diagUp} alt="排序" onClick={this.orderFolder.bind(this, i)}/> */}
  137. {/* <span className={`${style.floderPartAction}`} id="floderActionBtn" onClick={(e)=>{this.floderAction(e,i)}}>...</span> */}
  138. </div>
  139. {
  140. i==selectIndex&&tmpItm.templateInfo&&tmpItm.templateInfo.length>0&&<div className={style.floderPartFr}>
  141. { tmpItm.templateInfo.map((templateItem, index) => {
  142. return (<div class={style.templateItem}>
  143. {templateItem.name}
  144. <span class={`${index===0 ? style.arrowDown : style.arrowUp}`} onClick={this.orderTemplate.bind(this, i, index)}></span>
  145. {/* <img class={style.orderIcon} src={index===0?diagDown:diagUp} alt="排序" onClick={this.orderTemplate.bind(this, i, index)}/> */}
  146. </div>)
  147. })}
  148. </div>
  149. }
  150. </div>
  151. )
  152. }
  153. return Floder
  154. }
  155. onKeyPress(event){
  156. let e = event?event:window.event;
  157. if (e.keyCode == 13) {
  158. this.saveNewFolder()
  159. }
  160. }
  161. render() {
  162. const { folderOrderShow,title,folderManage,adminItems, } = this.props;
  163. const domNode = document.getElementById('root');
  164. const items = this.state.folderList
  165. return folderOrderShow&&ReactDOM.createPortal(
  166. <div className={style.newFolderWrap}>
  167. <div className={style.folderModal} onClick={()=>folderManage(false)}></div>
  168. <div className={style.nameWrap}>
  169. <div className={style.title}>
  170. {
  171. title?<div className={style.titleCon}>{title}</div>:null
  172. }
  173. <img src={close} alt="关闭" onClick={()=>folderManage(false)}/>
  174. </div>
  175. <div className={style['delContent']}>
  176. {this.genAdminItems(items,true)}
  177. </div>
  178. <div className={style['delFoot']}>
  179. <div className={style.halfBtn}>
  180. <span className={`${style['delBtn']} ${style['delDel']}`} onClick={this.saveOrderFolder}>保存</span>
  181. </div>
  182. <div className={style.halfBtn}>
  183. <span className={`${style['delBtn']} ${style['delCancel']}`} onClick={()=>folderManage(false)}>取消</span>
  184. </div>
  185. </div>
  186. </div>
  187. </div>,domNode)
  188. }
  189. }
  190. export default FolderOrder;