|
@@ -1,4 +1,5 @@
|
|
|
import React from 'react';
|
|
|
+import PropTypes from 'prop-types';
|
|
|
import store from '@store';
|
|
|
import styles from './index.less';
|
|
|
import ReactDom from "react-dom";
|
|
@@ -21,7 +22,7 @@ import editHover from '../../../common/images/icon_edit_hover@2x.png';
|
|
|
import del from '../../../common/images/icon_del_default@2x.png';
|
|
|
import delHover from '../../../common/images/icon_del_hover@2x.png';
|
|
|
import Notify from '@commonComp/Notify';
|
|
|
-
|
|
|
+import ScrollArea from 'react-scrollbar';
|
|
|
class HistoryCaseContainer extends React.Component {
|
|
|
constructor(props){
|
|
|
super(props);
|
|
@@ -35,13 +36,13 @@ class HistoryCaseContainer extends React.Component {
|
|
|
editVisible: false,
|
|
|
templateName: '', // 病历名称
|
|
|
historyCase: [],
|
|
|
- currentIndex:-1,
|
|
|
+ currentIndex:-1, // 显示编辑/删除图标
|
|
|
delId: '', //删除病历id
|
|
|
editId: '', //编辑病历id
|
|
|
- activeIndex: 0,
|
|
|
+ activeIndex: -1, //字体显示蓝色高亮index
|
|
|
showEditIcon: false,
|
|
|
showDelIcon: false,
|
|
|
- desc: false // 正序/逆序
|
|
|
+ desc: true // 正序/逆序
|
|
|
}
|
|
|
this.handleCaseClick=this.handleCaseClick.bind(this)
|
|
|
this.handleQuoteClick=this.handleQuoteClick.bind(this)
|
|
@@ -55,6 +56,8 @@ class HistoryCaseContainer extends React.Component {
|
|
|
this.makeSureEdit = this.makeSureEdit.bind(this);
|
|
|
this.handleChange = this.handleChange.bind(this);
|
|
|
this.handleSortClick = this.handleSortClick.bind(this);
|
|
|
+
|
|
|
+ this.$scrollRef = React.createRef();
|
|
|
}
|
|
|
componentDidMount(){
|
|
|
const {items} = this.props
|
|
@@ -67,8 +70,6 @@ class HistoryCaseContainer extends React.Component {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- componentWillReceiveProps(nextProps){
|
|
|
- }
|
|
|
|
|
|
// 操作后获取获取列表数据
|
|
|
getTemplatePageAlls(val) {
|
|
@@ -86,7 +87,6 @@ class HistoryCaseContainer extends React.Component {
|
|
|
|
|
|
// 点击当前的历史病历
|
|
|
handleCaseClick(idx,val) {
|
|
|
-
|
|
|
const { items } = this.props;
|
|
|
let tmpItems = []
|
|
|
$("#hislistLeft li").eq(idx).css({
|
|
@@ -102,8 +102,6 @@ class HistoryCaseContainer extends React.Component {
|
|
|
this.setState({
|
|
|
activeId: idx,
|
|
|
activeHis: tmpItems,
|
|
|
- // dataStr: tmpItems.preview || {},
|
|
|
- // dataJson:JSON.parse(tmpItems.dataJson)||{},
|
|
|
dataStr: JSON.parse(tmpItems.preview)||[],
|
|
|
activeIndex: idx
|
|
|
})
|
|
@@ -141,6 +139,11 @@ class HistoryCaseContainer extends React.Component {
|
|
|
return
|
|
|
}
|
|
|
this.handleCaseClick(0, items[0])
|
|
|
+ // this.$scrollRef.scrollArea.refresh();
|
|
|
+ // this.context.scrollArea.scrollYTo(40);
|
|
|
+ console.log(this.$scrollRef,'this.$scrollRef');
|
|
|
+ console.log(this.context,'this.context');
|
|
|
+ this.forceUpdate()
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -168,6 +171,10 @@ class HistoryCaseContainer extends React.Component {
|
|
|
// 确认编辑病历
|
|
|
makeSureEdit(){
|
|
|
const { editId, templateName} = this.state
|
|
|
+ if (templateName === '') {
|
|
|
+ Notify.info('请输入病历名称')
|
|
|
+ return
|
|
|
+ }
|
|
|
store.dispatch(asyncUpdateByIdUsNames(editId, templateName)).then(res=>{
|
|
|
if (res.data.code === '0'){
|
|
|
Notify.success('病历修改成功');
|
|
@@ -191,11 +198,12 @@ class HistoryCaseContainer extends React.Component {
|
|
|
}
|
|
|
// 显示编辑确认框
|
|
|
handleEditQuoteClick(e, val, idx) {
|
|
|
+ // console.log(val,'显示编辑确认框');
|
|
|
e.stopPropagation()
|
|
|
this.setState({
|
|
|
editVisible: true,
|
|
|
editId: val.id,
|
|
|
- templateName: ''
|
|
|
+ templateName: val.name
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -234,7 +242,9 @@ class HistoryCaseContainer extends React.Component {
|
|
|
// 处理鼠标移除
|
|
|
handleMouseLeaveLi(idx){
|
|
|
// console.log('处理鼠标移除li');
|
|
|
-
|
|
|
+ this.setState({
|
|
|
+ currentIndex : -1
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
// 处理鼠标移入编辑按钮
|
|
@@ -288,16 +298,14 @@ class HistoryCaseContainer extends React.Component {
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
- // const { items } = this.props;
|
|
|
- // let length = items && items.length
|
|
|
- // let index = length - this.state.currentIndex -1
|
|
|
- // this.props.handleSortClick()
|
|
|
- // this.setState({
|
|
|
- // currentIndex: index
|
|
|
- // })
|
|
|
- }
|
|
|
+ componentDidUpdate() { // 刷新组件
|
|
|
+ // console.log(this.$scrollRef.current.scrollTop);
|
|
|
+ // console.log(this.$scrollRef);
|
|
|
+ // this.$scrollRef.current.scrollTop = this.$scrollRef.current.scrollHeight;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
render(){
|
|
|
const { items,handleSortClick,showHistoryBox,preInfo } = this.props;
|
|
@@ -319,6 +327,15 @@ class HistoryCaseContainer extends React.Component {
|
|
|
jsonDataString.advice = dataStr[11] && dataStr[11].content || ''; //医嘱
|
|
|
return jsonDataString;
|
|
|
}
|
|
|
+ const contStyle = {
|
|
|
+ opacity: '0.4',
|
|
|
+ right: '0',
|
|
|
+ top: '1px',
|
|
|
+ zIndex: '15',
|
|
|
+ width: '14px',
|
|
|
+ background: '#f1f1f1'
|
|
|
+ };
|
|
|
+ const barStyle = { background: '#777', width: '100%' };
|
|
|
return (
|
|
|
<div className={styles.mainHistory} id="hisWrapMove">
|
|
|
<div className={`${styles.closeHis} drag-title`} id="closeHis"></div>
|
|
@@ -329,30 +346,39 @@ class HistoryCaseContainer extends React.Component {
|
|
|
<span className={styles.sort} onClick={this.handleSortClick}>排序 <img src={sort} alt="排序"/></span>
|
|
|
</div>
|
|
|
<div className={styles.lists}>
|
|
|
- <ul id="hislistLeft">
|
|
|
+ <ScrollArea speed={0.8}
|
|
|
+ key= {items.length}
|
|
|
+ // ref={this.$scrollRef}
|
|
|
+ horizontal={false}
|
|
|
+ // stopScrollPropagation={items.length > 6 ? true : false}
|
|
|
+ style={{ maxHeight: '722px' }}
|
|
|
+ onScroll={(value) => {}}
|
|
|
+ className={styles["area"]}
|
|
|
+ verticalContainerStyle={contStyle}
|
|
|
+ verticalScrollbarStyle={barStyle}
|
|
|
+ contentClassName="content">
|
|
|
+ <ul id="hislistLeft" >
|
|
|
{(items && items.length > 0) ? items.map((val,idx)=>{
|
|
|
// return <li key={val.id} className={val.id == activeHistory.id?styles.bgc:''} onClick={(e)=>{this.handleCaseClick(e,idx)}}>
|
|
|
return <li key={val.id} onClick={() => { this.handleCaseClick(idx, val) }} onMouseEnter={() => this.handleMouseEnterLi(idx)} onMouseLeave={() => this.handleMouseLeaveLi(idx)}>
|
|
|
<div className={styles.itemLeft}>
|
|
|
<div className={styles.historyTop}>
|
|
|
- <span title={val.name} className={activeIndex === idx ? styles.itemNameActive :styles.itemName}>{val.name}</span>
|
|
|
- {currentIndex === idx && (<div className={styles.edit} onClick={(e) => { this.handleEditQuoteClick(e, val, idx) }} onMouseEnter={() => this.handleMouseEnterEdit(idx)} onMouseLeave={() => this.handleMouseLeaveEdit(idx)}>
|
|
|
- <img src={ this.state.showEditIcon ? editHover :edit} />
|
|
|
+ <span title={val.name} className={activeIndex === idx ? styles.itemNameActive :styles.itemName}>{val.name}</span>
|
|
|
+ {currentIndex === idx && (
|
|
|
+ <div className={styles.edit} onClick={(e) => { this.handleEditQuoteClick(e, val, idx) }} onMouseEnter={() => this.handleMouseEnterEdit(idx)} onMouseLeave={() => this.handleMouseLeaveEdit(idx)}>
|
|
|
+ <img src={ this.state.showEditIcon ? editHover :edit} />
|
|
|
</div>)}
|
|
|
- </div>
|
|
|
- <div className={activeIndex === idx ? styles.timeActive : styles.time}>{val.inquiryDate}</div>
|
|
|
+ </div>
|
|
|
+ <div className={activeIndex === idx ? styles.timeActive : styles.time}>{val.inquiryDate}</div>
|
|
|
|
|
|
</div>
|
|
|
<div className={styles.itemRight}>
|
|
|
|
|
|
- <button
|
|
|
- className={styles.quote}
|
|
|
- onClick={(e) => { this.handleQuoteClick(e, val, idx) }}
|
|
|
- >引 用</button>
|
|
|
+ <button className={styles.quote} onClick={(e) => { this.handleQuoteClick(e, val, idx) }}>引 用</button>
|
|
|
|
|
|
{currentIndex === idx && (
|
|
|
- <div className={styles.del} onClick={(e) => { this.handleDelQuoteClick(e, val, idx) }} onMouseEnter={() => this.handleMouseEnterDel(idx)} onMouseLeave={() => this.handleMouseLeaveDel(idx)}>
|
|
|
- <img src={this.state.showDelIcon?delHover :del} />
|
|
|
+ <div className={styles.del} onClick={(e) => { this.handleDelQuoteClick(e, val, idx) }} onMouseEnter={() => this.handleMouseEnterDel(idx)} onMouseLeave={() => this.handleMouseLeaveDel(idx)}>
|
|
|
+ <img src={this.state.showDelIcon?delHover :del} />
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
@@ -360,6 +386,9 @@ class HistoryCaseContainer extends React.Component {
|
|
|
}):<Empty message={'无历史病历'}></Empty>
|
|
|
}
|
|
|
</ul>
|
|
|
+
|
|
|
+ </ScrollArea>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div className={styles.mainHistoryRight}>
|