Browse Source

模板文件夹排序

zhangxc 5 years ago
parent
commit
3df4a022bf

BIN
src/components/FolderOrder/img/close.png


BIN
src/components/FolderOrder/img/floderD.png


BIN
src/components/FolderOrder/img/floderR.png


+ 168 - 0
src/components/FolderOrder/index.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import style from './index.less';
+import close from './img/close.png';
+import { Notify } from '@commonComp';
+import floderR from './img/floderR.png';
+import floderD from './img/floderD.png';
+class FolderOrder extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            folderModal:false,
+            selectIndex: -1,
+            folderList: null
+        }
+        this.textInput = React.createRef();
+        this.orderFolder = this.orderFolder.bind(this)
+        this.saveOrderFolder = this.saveOrderFolder.bind(this)
+    }
+    componentWillReceiveProps(props) {
+        this.setState({
+            folderList: JSON.parse(JSON.stringify(props.adminItems))
+        })
+    }
+    floderSlide(e,i) {
+        const selectIndex = this.state.selectIndex
+        if(selectIndex === i) {
+            this.setState({
+                selectIndex: -1
+            })
+        } else {
+            this.setState({
+                selectIndex: i
+            })
+        }
+        
+    }
+    saveOrderFolder(){
+        const {saveOrderFolder,patInfo} = this.props
+        const {folderList} = this.state
+        let folderListFilter = []
+        for(let i = 0; i < folderList.length; i++) {
+            let templateList = []
+            if(folderList[i].templateInfo) {
+                for(let j = 0; j < folderList[i].templateInfo.length;j++) {
+                    const templateItem = folderList[i].templateInfo[j]
+                    templateList.push({
+                            "folderId": templateItem.folderId,
+                            "id": templateItem.id,
+                            "isDeleted": "N",
+                            "orderNo": j,
+                            "templateId": 0
+                          }) 
+                }
+            }
+            
+            const item = 
+            {
+                "doctorId": patInfo.doctorId,
+                "hospitalId": patInfo.hospitalId,
+                "id": folderList[i].id,
+                "isDeleted": "N",
+                "name": folderList[i].name,
+                "orderNo": i,
+                "templateSortVOList": templateList
+                }
+                folderListFilter.push(item)
+        }
+        saveOrderFolder(folderListFilter)
+    }
+    orderFolder(index,e) {
+        e.stopPropagation();
+        const folderListCopy = JSON.parse(JSON.stringify(this.state.folderList))
+        const item = folderListCopy[index]
+        if(index > 0) {
+            folderListCopy.splice(index, 1)
+            folderListCopy.splice(index-1, 0 , item)
+        } else {
+            folderListCopy.splice(index, 1)
+            folderListCopy.splice(index+1, 0 , item)
+        }
+        this.setState({
+            folderList: folderListCopy
+        })
+    }
+    orderTemplate(i,index, e) {
+        e.stopPropagation();
+        const folderListCopy = JSON.parse(JSON.stringify(this.state.folderList))
+        const olderItem = folderListCopy[i]
+        const templateList = olderItem.templateInfo
+        const templateItem = templateList[index]
+        if(index > 0) {
+            templateList.splice(index, 1)
+            templateList.splice(index-1, 0 , templateItem)
+        } else {
+            templateList.splice(index, 1)
+            templateList.splice(index+1, 0 , templateItem)
+        }
+        this.setState({
+            folderList: folderListCopy
+        })
+    }
+    genAdminItems(items,flg) {
+        const Floder=[],Items = [];
+        const {admin,checkItemsAdmin} = this.props;
+       
+        const { selectIndex } = this.state;
+        for(let i = 0;i < items.length;i++){
+            let tmpItm = items[i]
+            Floder.push(
+                <div className={style.floderPart}>
+                    <div className={style.floderPartFl} onClick={(e)=>{tmpItm.templateInfo&&tmpItm.templateInfo.length>0 ?this.floderSlide(e,i) :''}}>
+                        <img src={selectIndex == i?floderD:floderR} className={style.floderRD}/>
+                        {tmpItm.name}({tmpItm.templateInfoCount})
+                        <span onClick={this.orderFolder.bind(this, i)}>{i===0? '下降':'上升'}</span>
+                        {/* <span className={`${style.floderPartAction}`} id="floderActionBtn" onClick={(e)=>{this.floderAction(e,i)}}>...</span> */}
+                    </div>
+                    {
+                        i==selectIndex&&tmpItm.templateInfo&&tmpItm.templateInfo.length>0&&<div className={style.floderPartFr}>
+                           { tmpItm.templateInfo.map((templateItem, index) => {
+                               return (<div>
+                                   {templateItem.name}
+                                   <span onClick={this.orderTemplate.bind(this, i, index)}>{index===0? '下降':'上升'}</span>
+                               </div>)
+                            })}
+                        </div>
+                    }
+                </div>
+            )
+        }
+        return Floder
+    }
+    onKeyPress(event){
+        let e = event?event:window.event;
+        if (e.keyCode == 13) {
+          this.saveNewFolder()
+        }
+    }
+    render() {
+        const { folderOrderShow,title,folderManage,adminItems,  } = this.props;
+        const domNode = document.getElementById('root');
+        const items = this.state.folderList
+        return folderOrderShow&&ReactDOM.createPortal(
+            <div className={style.newFolderWrap}>
+                <div className={style.folderModal} onClick={()=>folderManage(false)}></div>
+                <div className={style.nameWrap}>
+                    <div className={style.title}>
+                        {
+                            title?<div className={style.titleCon}>{title}</div>:null
+                        }
+                        <img src={close} alt="关闭" onClick={()=>folderManage(false)}/>
+                    </div>
+                    <div className={style['delContent']}>
+                        {this.genAdminItems(items,true)}
+                    </div>
+                    <div className={style['delFoot']}>
+                        <div className={style.halfBtn}>
+                            <span className={`${style['delBtn']} ${style['delDel']}`} onClick={this.saveOrderFolder}>保存</span>
+                        </div>
+                        <div className={style.halfBtn}>
+                            <span className={`${style['delBtn']} ${style['delCancel']}`} onClick={()=>folderManage(false)}>取消</span>
+                        </div>
+                    </div>
+                </div> 
+            </div>,domNode)
+    }
+}
+export default FolderOrder;

+ 87 - 0
src/components/FolderOrder/index.less

@@ -0,0 +1,87 @@
+@import "~@less/variables.less";
+
+.newFolderWrap {
+    .folderModal {
+        z-index: 120;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: #000;
+        opacity: .3;
+        filter: alpha(opacity=60);
+        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+    }
+    .nameWrap{
+        z-index: 130;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        margin: auto;
+        border-radius: 5px;
+        background: #fff;
+        width: 500px;
+        margin-left: -250px;
+        margin-top: -115px;
+        .mainWrap {
+            padding: 50px 10px;
+        }
+        .title {
+            height: 40px;
+            line-height: 40px;
+            border-bottom: 1px solid #ccc;
+            img{
+                float: right;
+            }
+        }
+        .leftName {
+            width: 135px;
+            text-align: right;
+            padding-right: 16px;
+            display: inline-block;
+        }
+        .titleCon {
+            float: left;
+            height: 40px;
+            line-height: 40px;
+            margin-left: 10px;
+        }
+        input {
+            border: 1px solid #CCCCCC;
+            padding: 5px 10px;
+            width: 240px;
+        }
+    }
+    .delFoot{
+        .halfBtn {
+            width: 50%;
+            display: inline-block;
+            text-align: center;
+            height: 65px;
+        }
+        .delBtn{
+          display: inline-block;
+          width: 100px; 
+          height: 34px;
+          line-height: 32px;
+          border-radius: 5px;
+          margin: 0 auto;
+          cursor: pointer;
+        }
+        .delDel{
+          color: #fff;
+          background: #3B9ED0;
+        }
+        .delCancel{
+          color:#000;
+          background: #fff;
+          border: 1px solid #1E1E1E;
+          color: #1E1E1E;
+        }
+    }
+    .delContent{
+        height: 200px;
+        overflow-y: auto;
+    }
+}

+ 18 - 3
src/components/Operation/index.jsx

@@ -10,6 +10,7 @@ import PreviewContainer from '@containers/PreviewContainer';
 import { ConfirmModal, Notify } from '@commonComp';
 import Search from './Search';
 import FolderName from '@components/FolderName';
+import FolderOrder from '@components/FolderOrder';
 import check_circle from './img/check-circle.png';
 import check_right from './img/check-right.png';
 import {getAllDataList,getAllDataStringList,isAllPartClear,isAllClear,filterDataArr,readyKeepHistory,checkDeptContent} from '@utils/tools';
@@ -55,6 +56,7 @@ class Operation extends Component {
     this.handleChangeIpt = this.handleChangeIpt.bind(this);
     this.newFolder = this.newFolder.bind(this);
     this.saveNewFolder = this.saveNewFolder.bind(this);
+    this.folderManage = this.folderManage.bind(this)
   }
 
   showPrint() {
@@ -150,6 +152,9 @@ class Operation extends Component {
   newFolder(flg){
     this.props.folderModal(flg)
   }
+  folderManage(flg) {
+    this.props.folderOrder(flg)
+  }
   saveHis(type) {
     const { diagShowTmp,getFloderList,admin } = this.props;
     let baseList = store.getState();
@@ -388,9 +393,9 @@ class Operation extends Component {
     newFloder(val)
   }
   render() {
-    const { showPrint, closePrint, showPreview, closePreview,handleChangeIpt,newFolder } = this;
+    const { showPrint, closePrint, showPreview, closePreview,handleChangeIpt,newFolder,folderManage } = this;
     const { visible, preVisible,diagShow } = this.props.print;
-    const {winWidth,cancelDelTag,departLis,handleChangeValue,admin,floderListAdmin,folderModalShow,floderModal} = this.props;
+    const {winWidth,cancelDelTag,departLis,handleChangeValue,admin,floderListAdmin,folderModalShow,floderModal,folderOrderShow,folderOrder,adminItems,patInfo,saveOrderFolder} = this.props;
     const {zIndex,type,le,value,folder,folderListShow} = this.state;
     return <div className={style['container']} style={{left:le}}>
       <span className={style['button']} onClick={showPrint}><img src={printImg} /> 打印病历</span>
@@ -461,7 +466,7 @@ class Operation extends Component {
                   </ul>
                 }
               <span className={style.newFolder} onClick={()=>newFolder(true)}>新建文件夹</span>
-              <span className={style.mangerFolder}>管理文件夹</span>
+              <span className={style.mangerFolder} onClick={()=>folderManage(true)}>管理文件夹</span>
           </div>
           </div>:null
         }
@@ -472,6 +477,16 @@ class Operation extends Component {
         newFolder={newFolder}
         saveNewFolder={this.saveNewFolder}
         title='新建文件夹'></FolderName>
+        <FolderOrder
+        folderOrderShow = {folderOrderShow}
+        folderOrder = {folderOrder}
+        folderManage={folderManage}
+        adminItems = {adminItems}
+        saveOrderFolder = {saveOrderFolder}
+        patInfo={patInfo}
+        title = '管理文件夹'>
+
+        </FolderOrder>
     </div>;
   }
 }

+ 11 - 2
src/containers/OperationContainer.js

@@ -9,8 +9,8 @@ import {
   DIAG_SHOW
 } from "../store/types/print";
 import { saveMessage, clearMessages } from "../store/async-actions/print";
-import { saveTemplateDetail, getDepartments, saveAdminTemplateDetail, getFloderList,newFloder } from '@store/async-actions/tabTemplate';
-import { getDptLis,folderModal } from '@store/actions/tabTemplate';
+import { saveTemplateDetail, getDepartments, saveAdminTemplateDetail, getFloderList,newFloder,orderFloder } from '@store/async-actions/tabTemplate';
+import { getDptLis,folderModal,folderOrder } from '@store/actions/tabTemplate';
 import { saveClickNum, getInitModules } from '@store/async-actions/homePage';
 import { getOtherHisRecord } from '@store/async-actions/fetchModules';
 import { RECOVER_TAG_MAIN } from '@store/types/mainSuit';
@@ -34,11 +34,20 @@ function mapStateToProps(state) {
     departLis: state.tabTemplate.departLis,
     floderListAdmin:state.tabTemplate.floderListAdmin,
     folderModalShow:state.tabTemplate.folderModalShow,
+    folderOrderShow:state.tabTemplate.folderOrderShow,
+    adminItems: state.tabTemplate.adminItems,
+    patInfo: state.patInfo.message
   });
 }
 
 function mapDispatchToProps(dispatch) {
   return {
+    folderOrder(show){ 
+      dispatch(folderOrder(show))
+    },
+    saveOrderFolder(folderList){
+      dispatch(orderFloder(folderList))
+    },
     folderModal(show){
       dispatch(folderModal(show))
     },

+ 5 - 0
src/store/actions/tabTemplate.js

@@ -23,8 +23,13 @@ import {
     FLODER_ACTION,
     FOLDER_LIST_ADMIN,
     FOLDER_MODAL,
+    FOLDER_ORDER_SHOW
 } from '@store/types/tabTemplate';
 
+export const folderOrder = (show) => ({ //文件夹展开
+    type: FOLDER_ORDER_SHOW,
+    show
+});
 export const folderModal = (show) => ({ //文件夹展开
     type: FOLDER_MODAL,
     show

+ 3 - 8
src/store/async-actions/tabTemplate.js

@@ -288,19 +288,14 @@ export const delFloder = (id) => { //文件夹删除
     })
   }
 };
-export const orderFloder = (data) => { //文件夹排序
+export const orderFloder = (folderList) => { //文件夹排序
   let baseList = store.getState().patInfo.message;
   return (dispatch) => {
-    axios.json('/templateFolderAdmin/sort', {
-      "doctorId": baseList.doctorId,
-      "hospitalId": baseList.hospitalId,
-      "id": id,
-      "name": name,
-      "templateType": 2  //模板类型(个人1,管理员2)
-    }).then((res) => {
+    axios.json('/templateFolderAdmin/sort', folderList).then((res) => {
       let data = res.data;
       if (data.code == 0) {
         console.log(res,'管理员文件夹列表获取')
+        dispatch(getFloderListAll())
       } else {
         Notify.error(data.msg);
       }

+ 8 - 0
src/store/reducers/tabTemplate.js

@@ -23,6 +23,7 @@ import {
   FLODER_ACTION,
   FOLDER_LIST_ADMIN,
   FOLDER_MODAL,
+  FOLDER_ORDER_SHOW,
 } from '../types/tabTemplate';
 
 
@@ -51,8 +52,15 @@ const initDataList = {
   floderListAdmin:[],//文件夹列表
   folderModalShow:false,//新建文件夹弹窗
   folderListContentArr :[],//管理员文件夹内模板合并
+  folderOrderShow: false, //文件夹管理弹窗
 }
 export default (state = initDataList, action) => {
+  if (action.type === FOLDER_ORDER_SHOW) {//文件夹管理员列表
+    console.log('folderOrderfolderOrder',action)
+    const newState = Object.assign({}, state);
+    newState.folderOrderShow = action.show;
+    return newState;
+  }
   if (action.type === FOLDER_MODAL) {//文件夹管理员列表
     const newState = Object.assign({}, state);
     newState.folderModalShow = action.show;

+ 1 - 0
src/store/types/tabTemplate.js

@@ -22,3 +22,4 @@ export const FLODER_SLIDE = 'FLODER_SLIDE';
 export const FLODER_ACTION = 'FLODER_ACTION';
 export const FOLDER_LIST_ADMIN = 'FOLDER_LIST_ADMIN';
 export const FOLDER_MODAL = 'FOLDER_MODAL';
+export const FOLDER_ORDER_SHOW = 'FOLDER_ORDER_SHOW';