index.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  1. import React, { Component } from 'react';
  2. import style from './index.less';
  3. import { Tab, ConfirmModal, Notify } from '@commonComp';
  4. import { tabChange, allChecked, changeVisible, keepPushData, allCheckedShow,allCheckedAdmin,allCheckedShowAdmin,whichTemp,floderSlide,floderAction,folderModal,clearSearchTemplateNorms,folderOrder } from '@store/actions/tabTemplate';
  5. import { initItemList,initAdminItemList, delItem,delItemAdmin, delBatchItem, delBatchItemAdmin,changeTitleAsync, setPageView,changeTitleAsyncAdmin,setPageViewAdmin,getFloderList,delFloder,addTemplateQuote,newFloder,findTemplateNorms,getFloderListAll } from '@store/async-actions/tabTemplate';
  6. import { connect } from "react-redux";
  7. import store from '@store';
  8. import { billing } from '@store/async-actions/pushMessage';
  9. import TemplateContainer from '@components/TemplateContainer';
  10. import TemplateItems from '@components/TemplateItems';
  11. import PushItemsContainer from '@containers/PushItemsContainer';
  12. import { pushAllDataList, getWindowInnerHeight, didPushParamChange } from '@utils/tools';
  13. import CopyRightContainer from "@containers/CopyRightContainer";
  14. import MedicalInfoContainer from '@containers/MedicalInfoContainer';
  15. import FolderName from '@components/FolderName';
  16. import slideDown from '@common/images/slideDown.png';
  17. import CaseQuailty from "../CaseQuailty";
  18. import pinyin from '@utils/Convert_Pinyin.js';
  19. import $ from "jquery";
  20. class PushContainer extends Component {
  21. constructor(props) {
  22. super(props);
  23. this.state = {
  24. data: null,
  25. tabs: [{
  26. title: '辅助信息',
  27. disabled: true
  28. },
  29. {
  30. title: '病历质控',
  31. }, {
  32. title: '模板',
  33. },
  34. {
  35. title: '医学知识',
  36. }
  37. ],
  38. visible: false,
  39. message: '', //提示的内容
  40. type: '', //1:删除模板 2:批量删除 3.修改标题 4.引用
  41. id: '', //单个删除
  42. obj: {}, //修改模板标题
  43. title: '', //修改后的标题
  44. okText: '确定', //确认按钮
  45. okBorderColor: 'red',
  46. oKBg: '',
  47. okColor: 'red',
  48. num: 0, //计数
  49. deptId:'', //科室id
  50. floderName:'', //文件夹名称
  51. folderListShow:false,
  52. folderNameVal:'',
  53. folderId:'',
  54. spell:'',
  55. fstName:'',
  56. tmpFolder:'',
  57. hasCalcIndex: false
  58. }
  59. this.$cont = React.createRef();
  60. this.itemList = null;
  61. this.handleActiveClick = this.handleActiveClick.bind(this)
  62. this.handleContentClick = this.handleContentClick.bind(this)
  63. this.handleTemplateDel = this.handleTemplateDel.bind(this)
  64. this.handleTitleChange = this.handleTitleChange.bind(this)
  65. this.handleAllCheckbox = this.handleAllCheckbox.bind(this)
  66. this.handleAllCheckboxAdmin = this.handleAllCheckboxAdmin.bind(this)
  67. this.handleMangerTemplate = this.handleMangerTemplate.bind(this)
  68. this.handleMangerTemplateAdmin = this.handleMangerTemplateAdmin.bind(this)
  69. this.handleDelList = this.handleDelList.bind(this)
  70. this.makeSure = this.makeSure.bind(this)
  71. this.handleClose = this.handleClose.bind(this);
  72. this.templateSearch = this.templateSearch.bind(this);
  73. this.clearTemplateSearch = this.clearTemplateSearch.bind(this)
  74. this.whichTemp = this.whichTemp.bind(this);
  75. this.floderSlideToggle = this.floderSlideToggle.bind(this);
  76. this.floderRename = this.floderRename.bind(this);
  77. this.handleInputFloder = this.handleInputFloder.bind(this);
  78. this.setFolderId = this.setFolderId.bind(this);
  79. this.floderDelete = this.floderDelete.bind(this);
  80. this.folderManage = this.folderManage.bind(this);
  81. }
  82. componentDidMount() {
  83. // const height = getWindowInnerHeight()-160;
  84. // this.$cont.current.style.height = height+"px";
  85. }
  86. templateSearch(name,selectTemp){
  87. store.dispatch(initItemList(1,name,selectTemp));
  88. }
  89. clearTemplateSearch(){
  90. store.dispatch(clearSearchTemplateNorms());
  91. }
  92. /**
  93. *
  94. * @param {tab组件切换id} id
  95. */
  96. handleActiveClick(id) {
  97. if (id == '2') {
  98. document.getElementById("searchTmp").value = ""
  99. // let searchVal = document.getElementById("searchTmp").value
  100. store.dispatch(initItemList(1,0));
  101. store.dispatch(getFloderListAll())
  102. $(".floderSlideLis").eq(0).next().slideDown()
  103. }
  104. store.dispatch(tabChange(id))
  105. }
  106. /**
  107. * 引用模板id
  108. * @param {模板id} id
  109. */
  110. handleContentClick(id, sex,hasCalcIndex) {
  111. let baseSex = store.getState().patInfo.message.sex
  112. this.setState({
  113. message: this.content(sex, baseSex),
  114. type: 4,
  115. id: id,
  116. okText: '引用',
  117. okBorderColor: '#3B9ED0',
  118. okColor: '#fff',
  119. oKBg: '#3B9ED0',
  120. }, () => {
  121. store.dispatch(changeVisible(true))
  122. })
  123. this.setState({
  124. hasCalcIndex: hasCalcIndex
  125. })
  126. }
  127. content(sex, baseSex) {
  128. if (sex != 3 && sex != baseSex) {
  129. return <p className={style['center']}>确认引用该模板?<p style={{ fontSize: '12px', color: '#6b6969', marginTop: '10px' }}>引用该模版可能显示有误</p></p>
  130. } else {
  131. return <p className={style['center']}>确认引用该模板?</p>
  132. }
  133. }
  134. /**
  135. * 删除模板
  136. * @param {模板id} id
  137. */
  138. handleTemplateDel(id,folderId) {
  139. this.setState({
  140. message: this.delDiv(),
  141. type: 1,
  142. folderId:folderId,
  143. id: id,
  144. okText: '删除',
  145. okBorderColor: 'red',
  146. okColor: 'red',
  147. oKBg: '#fff'
  148. }, () => {
  149. store.dispatch(changeVisible(true))
  150. })
  151. }
  152. delDiv() {
  153. return <p className={style['center']}>确认删除模板?</p>
  154. }
  155. onchange(value,deptId) {
  156. this.setState({
  157. title: value
  158. }, () => {
  159. this.setState({
  160. message: this.changeTitle(),
  161. })
  162. })
  163. }
  164. keypress(event) {
  165. let e = event ? event : window.event;
  166. if (e.keyCode == 13) {
  167. this.makeSure()
  168. }
  169. }
  170. handleInput(e) {
  171. let val = (e.target.value).substring(0, 20)
  172. this.onchange(val)
  173. }
  174. handleInputFloder(e){
  175. let val = (e.target.value).substring(0,20)
  176. this.setState({
  177. floderName: val
  178. },()=>{
  179. this.setState({
  180. message:this.changeFloderTitle()
  181. })
  182. })
  183. }
  184. handleInputFst(e){
  185. let val = (e.target.value).substring(0,20).replace(/[^a-zA-Z]/g,'')
  186. // console.log(val)
  187. $(e.target).val(val)
  188. this.setState({
  189. fstName: val
  190. }, () => {
  191. this.setState({
  192. message: this.changeTitle(),
  193. })
  194. })
  195. }
  196. spellFst(){
  197. let tmpFst = pinyin.getCamelChars(this.state.title);
  198. // console.log(tmpFst.substr(0,1).toUpperCase())
  199. this.setState({fstName:tmpFst.toUpperCase()})
  200. // this.$inp.current.vaule = tmpFst
  201. document.getElementById ('FstInp').value=tmpFst.toUpperCase()
  202. }
  203. changeTitle() {//模板名称修改
  204. return <div className={style['box']}>
  205. <div className={style['iptWrap']}>
  206. <div className={style.name}>
  207. <span className={style.leftName}>模板名称:</span>
  208. <input className={style['ipt']}
  209. placeholder="请输入模板名称"
  210. type="text"
  211. maxLength='20'
  212. value={this.state.title}
  213. onInput={(e) => {
  214. this.handleInput(e)
  215. }}
  216. onPropertyChange={(e) => { // 兼容ie
  217. this.handleInput(e)
  218. }}
  219. onKeyPress={e => this.keypress(e)}
  220. />
  221. </div>
  222. <div className={`${style.name} ${style.firstname}`}>
  223. <span className={style.leftName}>模板名首拼:</span>
  224. <input className={style['ipt']}
  225. placeholder=""
  226. type="text"
  227. maxLength='20'
  228. id="FstInp"
  229. value={this.state.fstName}
  230. onFocus={() =>this.spellFst()}
  231. onInput={(e) => {
  232. this.handleInputFst(e)
  233. }}
  234. onPropertyChange={(e) => { // 兼容ie
  235. this.handleInputFst(e)
  236. }}
  237. onKeyPress={e => this.keypress(e)}
  238. />
  239. </div>
  240. </div>
  241. </div>
  242. }
  243. /**
  244. * 改变模板标题
  245. * @param {模板id和模板title} obj
  246. */
  247. handleTitleChange(id, text,deptId,folderId,spell,folderName) {
  248. store.dispatch(changeVisible(true))
  249. this.props.admin&&store.dispatch(getFloderList())
  250. this.setState({
  251. type: 3,
  252. currId: id,
  253. title: text,
  254. text: text,
  255. deptId: deptId,
  256. fstName:spell,
  257. okText: '保存',
  258. okBorderColor: '#3B9ED0',
  259. okColor: '#fff',
  260. oKBg: '#3B9ED0',
  261. folderId:folderId,
  262. spell:spell,
  263. folderNameVal:folderName,
  264. tmpFolder:folderName,
  265. }, () => {
  266. this.setState({
  267. message: this.changeTitle(),
  268. })
  269. })
  270. }
  271. handleAllCheckboxAdmin() { //全.反选
  272. let tmpFlg = this.props.allCheckedAdmin;
  273. if (this.props.checkItemsAdmin.length < this.props.folderListContentArr.length && this.props.allCheckedAdmin) {
  274. tmpFlg = false;
  275. } else if (this.props.checkItemsAdmin.length == this.props.folderListContentArr.length && !this.props.allCheckedAdmin) {
  276. tmpFlg = true;
  277. } //两种特殊情况处理
  278. store.dispatch(allCheckedAdmin(!tmpFlg))
  279. }
  280. handleMangerTemplateAdmin() { //管理
  281. let tmpFlg = this.props.allCheckShowAdmin;
  282. store.dispatch(allCheckedAdmin(false))
  283. store.dispatch(allCheckedShowAdmin(!tmpFlg))
  284. }
  285. handleAllCheckbox() { //全.反选
  286. let tmpFlg = this.props.allChecked;
  287. if (this.props.checkItems.length < this.props.items.length && this.props.allChecked) {
  288. tmpFlg = false;
  289. } else if (this.props.checkItems.length == this.props.items.length && !this.props.allChecked) {
  290. tmpFlg = true;
  291. } //两种特殊情况处理
  292. store.dispatch(allChecked(!tmpFlg))
  293. }
  294. handleMangerTemplate() { //管理
  295. let tmpFlg = this.props.allCheckShow;
  296. store.dispatch(allChecked(false))
  297. store.dispatch(allCheckedShow(!tmpFlg))
  298. }
  299. handleDelList() { //批量删除
  300. this.setState({
  301. type: 2,
  302. message: this.delDiv(),
  303. okText: '删除',
  304. okBorderColor: 'red',
  305. okColor: 'red',
  306. oKBg: '#fff'
  307. })
  308. store.dispatch(changeVisible(true))
  309. }
  310. handleClickGetMore(page){
  311. let tmpPage = ++page
  312. store.dispatch(initItemList(tmpPage,true))
  313. }
  314. floderRename(name,id){//文件夹重命名
  315. this.setState({
  316. type: 5,
  317. title: '重命名文件夹',
  318. okText: '保存',
  319. floderName:name,
  320. folderId:id,
  321. okBorderColor: '#3B9ED0',
  322. okColor: '#fff',
  323. oKBg: '#3B9ED0',
  324. },()=>{
  325. this.setState({
  326. message:this.changeFloderTitle()
  327. })
  328. })
  329. store.dispatch(changeVisible(true))
  330. }
  331. changeFloderTitle() {
  332. return <div className={style['box']}>
  333. <div className={style['iptWrap']}>
  334. <div className={style.name}>
  335. <span className={style.leftName}>名称:</span>
  336. <input
  337. placeholder="请输入文件夹名称"
  338. type="text"
  339. maxLength='20'
  340. value={this.state.floderName}
  341. onInput={(e) => {
  342. this.handleInputFloder(e)
  343. }}
  344. onPropertyChange={(e) => { // 兼容ie
  345. this.handleInputFloder(e)
  346. }}
  347. onKeyPress={e => this.keypress(e)}
  348. />
  349. </div>
  350. </div>
  351. </div>
  352. }
  353. floderDelete(folderId){//文件夹删除
  354. this.setState({
  355. message: <p className={style['center']}>确认删除文件夹?</p>,
  356. type: 6,
  357. folderId:folderId,
  358. okText: '删除',
  359. okBorderColor: 'red',
  360. okColor: 'red',
  361. oKBg: '#fff'
  362. }, () => {
  363. store.dispatch(changeVisible(true))
  364. })
  365. // store.dispatch(delFloder(id))
  366. }
  367. makeSure() {
  368. const {type,id,title,tmpFolder,folderNameVal,text,fstName,spell,currId,deptId,folderId,floderName} = this.state
  369. if (type == 1) {
  370. if(this.props.admin){
  371. store.dispatch(delItemAdmin(id,folderId))
  372. }else{
  373. store.dispatch(delItem(id))
  374. }
  375. store.dispatch(changeVisible(false))
  376. } else if (type == 2) {
  377. if(this.props.admin){
  378. store.dispatch(delBatchItemAdmin(this.props.checkItemsAdmin))
  379. }else{
  380. store.dispatch(delBatchItem(this.props.checkItems))
  381. }
  382. store.dispatch(changeVisible(false))
  383. } else if (type == 3) {
  384. if (title == text &&tmpFolder==folderNameVal&&fstName==spell) {
  385. store.dispatch(changeVisible(false))
  386. Notify.success('标题修改成功');
  387. return;
  388. }
  389. if (title.trim() == '') {
  390. Notify.info('请输入模板名称');
  391. return;
  392. }
  393. let tempObj = {
  394. id: currId,
  395. title: title,
  396. deptId:deptId,
  397. folderId:folderId,
  398. folderName:folderNameVal,
  399. spell:fstName
  400. }
  401. if(this.props.admin){
  402. store.dispatch(changeTitleAsyncAdmin(tempObj))
  403. }else{
  404. store.dispatch(changeTitleAsync(tempObj))
  405. }
  406. } else if (type == 4) { //模板引入
  407. if(this.props.admin){
  408. store.dispatch(setPageViewAdmin(id))
  409. }else{
  410. store.dispatch(setPageView(id))
  411. const hasCalcIndex = this.state.hasCalcIndex
  412. if(hasCalcIndex) {
  413. store.dispatch(addTemplateQuote(id))
  414. }
  415. this.setState({
  416. hasCalcIndex: false
  417. })
  418. }
  419. store.dispatch(changeVisible(false))
  420. } else if(type == 6) { //删除文件夹
  421. if(this.props.admin){
  422. store.dispatch(delFloder(folderId))
  423. store.dispatch(changeVisible(false))
  424. }else{
  425. // store.dispatch(delFloder(folderId))
  426. // store.dispatch(delBatchItem(this.props.checkItems))
  427. }
  428. } else if(type == 5) {
  429. if(this.props.admin){
  430. store.dispatch(newFloder(floderName,folderId,'modify'))
  431. // store.dispatch(changeVisible(false))
  432. }else{
  433. }
  434. }
  435. }
  436. handleClose() {
  437. store.dispatch(changeVisible(false));
  438. this.setState({
  439. hasCalcIndex: false
  440. })
  441. }
  442. whichTemp(tab,name,hasSearch){
  443. if(tab!=2||!name){
  444. if(tab == 1 && name&&hasSearch) {
  445. this.templateSearch(name,1)
  446. } else {
  447. store.dispatch(initAdminItemList(1,true))
  448. }
  449. }else{
  450. this.templateSearch(name,2)
  451. }
  452. store.dispatch(whichTemp(tab))
  453. }
  454. floderSlideToggle(id){
  455. store.dispatch(floderSlide(id))
  456. }
  457. floderActionDo(id){
  458. store.dispatch(floderAction(id))
  459. }
  460. handleFolderShow(){
  461. const {folderListShow} = this.state
  462. this.setState({
  463. folderListShow:!folderListShow
  464. })
  465. }
  466. setFolderId(id,name){//文件夹
  467. this.setState({
  468. folderId :id,
  469. folderNameVal:name,
  470. folderListShow:false
  471. })
  472. }
  473. newFolder(flg){
  474. store.dispatch(folderModal(flg))
  475. }
  476. folderManage(flg) {
  477. store.dispatch(folderOrder(flg))
  478. }
  479. render() {
  480. const { activeId, checkItems,selectTemp,folderListContentArr, visible, showMsg,hasMore,current,floderListAdmin, items, allCheckShow,allCheckShowAdmin,adminItems,admin,checkItemsAdmin,clearSearch, templateNormsSearchList} = this.props;
  481. const { type,okBorderColor,okColor,oKBg,okText,message,folderListShow } = this.state
  482. return <div className={style["container"]} ref={this.$cont} >
  483. <Tab tabs={this.state.tabs}
  484. activeId={activeId}
  485. handleActiveClick={this.handleActiveClick}
  486. >
  487. <TemplateContainer activeId={activeId}>
  488. <PushItemsContainer></PushItemsContainer>
  489. <CaseQuailty></CaseQuailty>
  490. <TemplateItems
  491. items={items}
  492. clearSearch={clearSearch}
  493. adminItems={adminItems}
  494. admin={admin}
  495. handleAllCheckboxAdmin={this.handleAllCheckboxAdmin}
  496. handleMangerTemplateAdmin={this.handleMangerTemplateAdmin}
  497. current={current}
  498. hasMore={hasMore}
  499. checkItems={checkItems}
  500. checkItemsAdmin={checkItemsAdmin}
  501. allCheckShow={allCheckShow}
  502. allCheckShowAdmin={allCheckShowAdmin}
  503. handleContentClick={this.handleContentClick}
  504. handleTemplateDel={this.handleTemplateDel}
  505. handleTitleChange={this.handleTitleChange}
  506. handleDelList={this.handleDelList}
  507. handleMangerTemplate={this.handleMangerTemplate}
  508. handleAllCheckbox={this.handleAllCheckbox}
  509. handleClickGetMore={this.handleClickGetMore}
  510. templateSearch={this.templateSearch}
  511. whichTemp={this.whichTemp}
  512. selectTemp={selectTemp}
  513. floderSlide={this.floderSlideToggle}
  514. floderAction={this.floderActionDo}
  515. floderDelete={this.floderDelete}
  516. floderRename={this.floderRename}
  517. folderListContentArr={folderListContentArr}
  518. templateNormsSearchList={templateNormsSearchList}
  519. clearTemplateSearch={this.clearTemplateSearch}
  520. ></TemplateItems>
  521. <MedicalInfoContainer></MedicalInfoContainer>
  522. </TemplateContainer>
  523. </Tab>
  524. <ConfirmModal
  525. visible={visible}
  526. confirm={this.makeSure}
  527. close={this.handleClose}
  528. title={type==5?'重命名文件夹':type==3?'修改模板':null}
  529. cancel={this.handleClose}
  530. okText={okText}
  531. width={type==5 ? 500: type==3?580:300}
  532. height={type==3&&admin?280:200}
  533. okBorderColor={okBorderColor}
  534. okColor={okColor}
  535. oKBg={oKBg}
  536. borderBtm={type==5||type==3?'1px solid #ccc':null}
  537. >
  538. {message}
  539. {
  540. admin&&type==3?<div className={style.department}>
  541. <span className={style.leftName}>存储为:</span>
  542. <div className={style.selectFolder}>
  543. <input className={style.selectFolderIpt}
  544. type="text"
  545. maxLength='20'
  546. readOnly
  547. value={this.state.folderNameVal}
  548. onClick={(e) => {
  549. this.handleFolderShow(e)
  550. }}
  551. />
  552. <img src={slideDown} alt=""/>
  553. </div>
  554. {
  555. floderListAdmin.length>0&&folderListShow&&<ul className={`${style.departLis} ${style.departLisFolder}`}>
  556. {
  557. floderListAdmin.map((item,idx)=>{
  558. return <li onClick={()=>this.setFolderId(item.id,item.name)}>
  559. {item.name}
  560. </li>
  561. })
  562. }
  563. </ul>
  564. }
  565. <span className={style.newFolder} onClick={()=>this.newFolder(true)}>新建文件夹</span>
  566. <span className={style.mangerFolder} onClick={()=>this.folderManage(true)}>管理文件夹</span>
  567. </div>:null
  568. }
  569. </ConfirmModal>
  570. <CopyRightContainer />
  571. </div>
  572. }
  573. }
  574. const mapStateToProps = (state) => {//console.log(state)
  575. return {
  576. items: state.tabTemplate.items,
  577. adminItems: state.tabTemplate.adminItems,
  578. admin: state.homePage.admin,
  579. current: state.tabTemplate.current,
  580. hasMore: state.tabTemplate.hasMore,
  581. activeId: state.tabTemplate.activeId,
  582. checkItems: state.tabTemplate.checkItems,
  583. allChecked: state.tabTemplate.allChecked,
  584. visible: state.tabTemplate.visible,
  585. showMsg: state.tabTemplate.showMsg,
  586. allCheckShow: state.tabTemplate.allCheckShow,
  587. allCheckedAdmin: state.tabTemplate.allCheckedAdmin,
  588. allCheckShowAdmin: state.tabTemplate.allCheckShowAdmin,
  589. checkItemsAdmin: state.tabTemplate.checkItemsAdmin,
  590. clearSearch:state.print.clearSearch,
  591. selectTemp:state.tabTemplate.selectTemp,
  592. floderListAdmin:state.tabTemplate.floderListAdmin,
  593. folderListContentArr:state.tabTemplate.folderListContentArr,
  594. templateNormsSearchList: state.tabTemplate.templateNormsSearchList
  595. }
  596. }
  597. export default connect(mapStateToProps, null)(PushContainer);