文件夹管理排序

src/components/FolderOrder/index.jsx

@@ -5,6 +5,8 @@ import close from './img/close.png';
 import { Notify } from '@commonComp';
 import floderR from './img/floderR.png';
 import floderD from './img/floderD.png';
+import diagUp from '@common/images/diagUp.png';
+import diagDown from '@common/images/diagDown.png';
 class FolderOrder extends React.Component {
     constructor(props) {
         super(props);
@@ -19,7 +21,8 @@ class FolderOrder extends React.Component {
     }
     componentWillReceiveProps(props) {
         this.setState({
-            folderList: JSON.parse(JSON.stringify(props.adminItems))
+            folderList: JSON.parse(JSON.stringify(props.adminItems)),
+            selectIndex: -1
         })
     }
     floderSlide(e,i) {
@@ -36,7 +39,7 @@ class FolderOrder extends React.Component {
         
     }
     saveOrderFolder(){
-        const {saveOrderFolder,patInfo} = this.props
+        const {saveOrderFolder,patInfo,folderManage} = this.props
         const {folderList} = this.state
         let folderListFilter = []
         for(let i = 0; i < folderList.length; i++) {
@@ -46,10 +49,10 @@ class FolderOrder extends React.Component {
                     const templateItem = folderList[i].templateInfo[j]
                     templateList.push({
                             "folderId": templateItem.folderId,
-                            "id": templateItem.id,
+                            "id": templateItem.folderMappingId,
                             "isDeleted": "N",
                             "orderNo": j,
-                            "templateId": 0
+                            "templateId": templateItem.id
                           }) 
                 }
             }
@@ -67,17 +70,31 @@ class FolderOrder extends React.Component {
                 folderListFilter.push(item)
         }
         saveOrderFolder(folderListFilter)
+        folderManage(false)
     }
     orderFolder(index,e) {
         e.stopPropagation();
-        const folderListCopy = JSON.parse(JSON.stringify(this.state.folderList))
+        const {selectIndex, folderList} =   this.state
+        const folderListCopy = JSON.parse(JSON.stringify(folderList))
         const item = folderListCopy[index]
         if(index > 0) {
             folderListCopy.splice(index, 1)
             folderListCopy.splice(index-1, 0 , item)
+            if(index === selectIndex) {
+                this.setState({
+                    selectIndex: selectIndex-1
+                })
+            }else if(index === selectIndex+1){
+                this.setState({
+                    selectIndex: selectIndex+1
+                })
+            }
         } else {
             folderListCopy.splice(index, 1)
             folderListCopy.splice(index+1, 0 , item)
+            this.setState({
+                selectIndex: selectIndex+1
+            })
         }
         this.setState({
             folderList: folderListCopy
@@ -108,19 +125,19 @@ class FolderOrder extends React.Component {
         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) :''}}>
+                <div className={style.floderBox}>
+                    <div className={style.floderItem} 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>
+                        <img  class={style.orderIcon} src={i===0?diagDown:diagUp} alt="排序" onClick={this.orderFolder.bind(this, i)}/>
                         {/* <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>
+                               return (<div class={style.templateItem}>
                                    {templateItem.name}
-                                   <span onClick={this.orderTemplate.bind(this, i, index)}>{index===0? '下降':'上升'}</span>
+                                   <img class={style.orderIcon} src={index===0?diagDown:diagUp} alt="排序" onClick={this.orderTemplate.bind(this, i, index)}/>
                                </div>)
                             })}
                         </div>

src/components/FolderOrder/index.less

@@ -16,18 +16,23 @@
     .nameWrap{
         z-index: 130;
         position: fixed;
-        top: 50%;
+        top: 10%;
         left: 50%;
         margin: auto;
         border-radius: 5px;
         background: #fff;
         width: 500px;
+        height: 80%;
         margin-left: -250px;
-        margin-top: -115px;
+        padding: 40px 0 65px 0;
+        // margin-top: -115px;
         .mainWrap {
             padding: 50px 10px;
         }
         .title {
+            position: absolute;
+            width: 100%;
+            top: 0;
             height: 40px;
             line-height: 40px;
             border-bottom: 1px solid #ccc;
@@ -54,6 +59,9 @@
         }
     }
     .delFoot{
+        position: absolute;
+        width: 100%;
+        bottom: 0;
         .halfBtn {
             width: 50%;
             display: inline-block;
@@ -81,7 +89,40 @@
         }
     }
     .delContent{
-        height: 200px;
+        height: 100%;
         overflow-y: auto;
     }
+    .floderBox{
+        line-height: 45px;
+    }
+    .floderItem{
+        border-bottom: 1px solid #EAEDF1;
+        padding: 0 40px 0 10px;
+        position: relative;
+        cursor: pointer;
+        line-height: 45px;
+    }
+    .floderRD{
+        width: 20px;
+        height: 20px;
+        position: relative;
+        top: 5px;
+        right: 4px;
+        pointer-events: none;
+    }
+    .orderIcon{
+        width: 20px;
+        position: absolute;
+        top: 11px;
+        right: 25px;
+    }
+    
+    .templateItem{
+        position: relative;
+        line-height: 45px;
+        padding: 0 40px 0 10px;;
+    }
+    .templateItem:hover {
+        border: 1px solid #3B9ED0;
+    }
 }

src/store/async-actions/tabTemplate.js

@@ -291,10 +291,10 @@ export const delFloder = (id) => { //文件夹删除
 export const orderFloder = (folderList) => { //文件夹排序
   let baseList = store.getState().patInfo.message;
   return (dispatch) => {
-    axios.json('/templateFolderAdmin/sort', folderList).then((res) => {
+    axios.json('/templateFolderAdmin/sort', {templateFolderSortVOList:folderList}).then((res) => {
       let data = res.data;
       if (data.code == 0) {
-        console.log(res,'管理员文件夹列表获取')
+        Notify.success('保存成功');
         dispatch(getFloderListAll())
       } else {
         Notify.error(data.msg);

src/store/reducers/tabTemplate.js

@@ -56,7 +56,6 @@ const initDataList = {
 }
 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;