drag catalogs

server/Application/Api/Controller/CatalogController.class.php

@@ -80,7 +80,7 @@ class CatalogController extends BaseController {
     //保存目录
     public function save(){
         $cat_name = I("cat_name");
-        $s_number = I("s_number/d") ? I("s_number/d") : 99 ;
+        $s_number = I("s_number/d") ? I("s_number/d") : '' ;
         $cat_id = I("cat_id/d")? I("cat_id/d") : 0;
         $parent_cat_id = I("parent_cat_id/d")? I("parent_cat_id/d") : 0;
         $item_id =  I("item_id/d");
@@ -101,7 +101,7 @@ class CatalogController extends BaseController {
         }
         
         $data['cat_name'] = $cat_name ;
-        $data['s_number'] = $s_number ;
+        if($s_number)$data['s_number'] = $s_number ;
         $data['item_id'] = $item_id ;
         $data['parent_cat_id'] = $parent_cat_id ;
         if ($parent_cat_id > 0 ) {
@@ -212,5 +212,33 @@ class CatalogController extends BaseController {
         $this->sendResult(array("default_cat_id"=>$default_cat_id ));
     }
 
+    //批量更新
+    public function batUpdate(){
+        $cats = I("cats");
+        $item_id = I("item_id/d");
+        $login_user = $this->checkLogin();
+        if (!$this->checkItemPermn($login_user['uid'] , $item_id)) {
+            $this->sendError(10103);
+            return ;
+        }
+        $ret = '';
+        $data_array = json_decode(htmlspecialchars_decode($cats) , true) ;
+        if ($data_array) {
+            foreach ($data_array as $key => $value) {
+                if ($value['cat_name']) {
+                    $ret = D("Catalog")->where(" cat_id = '$value[cat_id]' and item_id = '$item_id' ")->save(array(
+                        "cat_name" => $value['cat_name'] ,
+                        "parent_cat_id" => $value['parent_cat_id'] ,
+                        "level" => $value['level'] ,
+                        "s_number" => $value['s_number'] ,
+                        ));
+                }
+
+            }
+        }
+
+        $this->sendResult(array());
+    }
+
 
 }

web_src/src/components/catalog/Index.vue

@@ -5,40 +5,43 @@
     <el-container>
       <el-card class="center-card">
 
-      <el-button  type="text" class="add-cat" @click="add_cat">{{$t('add_cat')}}</el-button>
-      <el-button type="text" class="goback-btn" @click="goback">{{$t('goback')}}</el-button>
-       <el-table align="left"
-            :data="catalogs_table"
-             height="400"
-             :row-class-name="tableRowClassName"
-            style="width: 100%">
-            <el-table-column
-              prop="cat_name"
-              :label="$t('cat_name')"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="addtime"
-              :label="$t('add_time')"
-              >
-            </el-table-column>
-            <el-table-column
-              prop="s_number"
-              :label="$t('s_number')">
-            </el-table-column>
-            <el-table-column
-              prop=""
-              width="110"
-              :label="$t('operation')">
-              <template slot-scope="scope">
-                <el-button @click="edit(scope.row)" type="text" size="small">{{$t('edit')}}</el-button>
-                <el-button @click="delete_cat(scope.row.cat_id)" type="text" size="small">{{$t('delete')}}</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-
-
-            </el-card>
+        <el-row>
+          <el-button  type="text" class="add-cat" @click="add_cat">{{$t('add_cat')}}</el-button>
+          <el-button type="text" class="goback-btn" @click="goback">{{$t('goback')}}</el-button>
+        </el-row>
+        <p class="tips" v-if="treeData.length > 1">{{$t('cat_tips')}}</p>
+        <el-tree
+          class="tree-node"
+          :data="treeData"
+          node-key="id"
+          default-expand-all
+          @node-drag-end="handleDragEnd"
+          draggable
+          >
+
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span>{{ node.label }}</span>
+            <span class="right-bar">
+              <el-button
+                type="text"
+                size="mini"
+                 class="el-icon-edit"
+                @click.stop="edit(node, data)">
+                
+              </el-button>
+              <el-button
+                type="text"
+                size="mini"
+                class="el-icon-delete"
+                @click.stop="delete_cat(node, data)">
+                
+              </el-button>
+            </span>
+          </span>
+        </el-tree>
+
+
+      </el-card>
       <el-dialog :visible.sync="dialogFormVisible"  width="300px">
         <el-form >
             <el-form-item :label="$t('cat_name')+' : '" >
@@ -54,9 +57,6 @@
                   </el-option>
                 </el-select>
             </el-form-item>
-            <el-form-item :label="$t('s_number')" >
-              <el-input  :placeholder="$t('s_number_explain')" v-model="MyForm.s_number"></el-input>
-            </el-form-item>
         </el-form>
 
         <div slot="footer" class="dialog-footer">
@@ -76,7 +76,7 @@
 export default {
   name: 'Login',
   components : {
-
+    
   },
   data () {
     return {
@@ -87,44 +87,16 @@ export default {
         s_number:''
       },
       catalogs:[],
-      catalogs_level_2:[],
       dialogFormVisible:false,
+      treeData: [],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
     }
 
   },
   computed: {
-    //表格形式展示目录数据
-    catalogs_table:function(){
-        var Info = this.catalogs.slice(0);
-        var cat_array = [] ;
-        for (var i = 0; i < Info.length; i++) {
-          Info[i]['cat_name'] = Info[i]['cat_name'];
-          cat_array.push(Info[i]);
-          var sub = Info[i]['sub'] 
-          if (sub.length > 0 ) {
-            for (var j = 0; j < sub.length; j++) {
-              cat_array.push( {
-                "cat_id":sub[j]['cat_id'] ,
-                "parent_cat_id":sub[j]['parent_cat_id'] ,
-                "s_number":sub[j]['s_number'] ,
-                "cat_name":' -- ' + sub[j]['cat_name']
-              });
-              var sub2 = sub[j]['sub'] ;
-              for (var k = 0; k < sub2.length; k++) {
-                cat_array.push( {
-                  "cat_id":sub2[k]['cat_id'] ,
-                  "s_number":sub2[k]['s_number'] ,
-                  "parent_cat_id":sub2[k]['parent_cat_id'] ,
-                  "cat_name":' ----- ' + sub2[k]['cat_name']
-                });
-              };
-
-            };
-          };
-          
-        };
-        return cat_array;
-    },
     //新建/编辑目录时供用户选择的上级目录列表
     parent_catalogs:function(){
         var Info = this.catalogs.slice(0);
@@ -146,16 +118,8 @@ export default {
         return cat_array;
 
     }
-  },
+  }, 
   methods: {
-
-      tableRowClassName({row, rowIndex}) {
-        if (row['level'] == '2') {
-          return 'success-row';
-        }
-        return '';
-      },
-
       get_catalog(){
         var that = this ;
         var url = DocConfig.server+'/api/catalog/catListGroup';
@@ -165,7 +129,32 @@ export default {
           .then(function (response) {
             if (response.data.error_code === 0 ) {
               var Info = response.data.data ;
+
               that.catalogs =  Info;
+              that.treeData = [];
+              for (var i = 0; i < Info.length; i++) {
+                let node = {'children':[]};
+                node['id'] = Info[i]['cat_id'];
+                node['label'] = Info[i]['cat_name'];
+                if (Info[i]['sub'].length > 0 ) {
+                  for (var j = 0; j < Info[i]['sub'].length; j++) {
+                      let node2 = {'children':[]};
+                      node2['id'] = Info[i]['sub'][j]['cat_id'];
+                      node2['label'] = Info[i]['sub'][j]['cat_name'];
+                      if (Info[i]['sub'][j]['sub'].length > 0 ) {
+                        for (var k = 0; k < Info[i]['sub'][j]['sub'].length; k++) {
+                            let node3 = {};
+                            node3['id'] = Info[i]['sub'][j]['sub'][k]['cat_id'];
+                            node3['label'] = Info[i]['sub'][j]['sub'][k]['cat_name'];
+                            node2['children'].push(node3);
+                        };
+                      };
+                    node['children'].push(node2);
+                  };
+                  
+                };
+                that.treeData.push(node);
+              };
             }else{
               that.$alert(response.data.error_message);
             }
@@ -184,7 +173,6 @@ export default {
           params.append('cat_id', this.MyForm.cat_id);
           params.append('parent_cat_id', this.MyForm.parent_cat_id);
           params.append('cat_name', this.MyForm.cat_name);
-          params.append('s_number', this.MyForm.s_number);
 
           that.axios.post(url, params)
             .then(function (response) {
@@ -201,24 +189,19 @@ export default {
               console.log(error);
             });
       },
-      edit(row){
-         var temp={};  
-         temp = JSON.parse(JSON.stringify(row));  
-        if (temp.cat_name) {
-          temp.cat_name = temp.cat_name.replace(' -- ','');
-          temp.cat_name = temp.cat_name.replace(' ----- ','');
+      edit(node, data){
+        this.MyForm = {
+          cat_id:data.id,
+          parent_cat_id: node.parent.data.id,
+          cat_name:data.label,
         };
-        if (temp.parent_cat_id == '0') {
-          temp.parent_cat_id = '';
-        };
-
-        this.MyForm = temp;
 
         this.dialogFormVisible = true;
       },
 
-      delete_cat(cat_id){
+      delete_cat(node, data){
           var that = this ;
+          var cat_id = data.id ;
           var url = DocConfig.server+'/api/catalog/delete';
 
           this.$confirm(that.$t('confirm_cat_delete'), ' ', {
@@ -250,7 +233,99 @@ export default {
       goback(){
         var url = '/'+this.$route.params.item_id;
         this.$router.push({path:url})
+      },
+      handleDragEnd(node1, node2 , position , evt){
+        var that = this ;
+        if (!this.checkCat(this.treeData)) {
+          this.$alert(this.$t("cat_limite_tips"));
+          this.get_catalog();
+          return ;
+        };
+        let treeData2 = this.dimensionReduction(this.treeData) ;
+        var url = DocConfig.server+'/api/catalog/batUpdate';
+        var params = new URLSearchParams();
+        params.append('item_id',  that.$route.params.item_id);
+        params.append('cats',  JSON.stringify(treeData2));
+        that.axios.post(url, params)
+          .then( (response)=> {
+              if (response.data.error_code === 0 ) {
+
+              }else{
+                that.$alert(response.data.error_message);
+              }
+          })
+
+      },
+      //检查合法性，不能超过三个层级目录
+      checkCat(treeData){
+        for (var i = 0; i < treeData.length; i++) {
+          if (!treeData[i].hasOwnProperty('children')) {
+            continue ;
+          };
+          for (var j = 0; j < treeData[i]['children'].length; j++) {
+            if (!treeData[i]['children'][j].hasOwnProperty('children')) {
+              continue ;
+            };
+            for (var k = 0; k < treeData[i]['children'][j]['children'].length; k++) {
+              if (! treeData[i]['children'][j]['children'][k].hasOwnProperty('children')) {
+                continue ;
+              };
+              if (treeData[i]['children'][j]['children'][k]['children'].length > 0 ) {
+                return false ;
+              };
+       
+            };
+            
+          };
+          
+        };
+
+        return true ;
+      },
+      //将目录数组降维
+      dimensionReduction(treeData){
+        let treeData2 = []; 
+        for (var i = 0; i < treeData.length; i++) {
+          treeData2.push({
+            'cat_id' : treeData[i]['id'] ,
+            'cat_name' : treeData[i]['label'] ,
+            'parent_cat_id' : 0 ,
+            'level' : 2 ,
+            's_number' : (i+1) ,
+          });
+          if (!treeData[i].hasOwnProperty('children')) {
+            continue ;
+          };
+          for (var j = 0; j < treeData[i]['children'].length; j++) {
+
+            treeData2.push({
+              'cat_id' : treeData[i]['children'][j]['id'] ,
+              'cat_name' : treeData[i]['children'][j]['label'] ,
+              'parent_cat_id' : treeData[i]['id'] ,
+              'level' : 3 ,
+              's_number' : (j+1) ,
+            });
+
+            if (!treeData[i]['children'][j].hasOwnProperty('children')) {
+              continue ;
+            };
+            for (var k = 0; k < treeData[i]['children'][j]['children'].length; k++) {
+              treeData2.push({
+                'cat_id' : treeData[i]['children'][j]['children'][k]['id'] ,
+                'cat_name' : treeData[i]['children'][j]['children'][k]['label'] ,
+                'parent_cat_id' : treeData[i]['children'][j]['id'] ,
+                'level' : 4 ,
+                's_number' : (k+1) ,
+              });
+       
+            };
+            
+          };
+          
+        };
+        return treeData2 ;
       }
+
   },
 
   mounted(){
@@ -258,6 +333,7 @@ export default {
   },
   
   beforeDestroy(){
+
   }
 }
 </script>
@@ -275,20 +351,46 @@ export default {
 
 .center-card{
   text-align: left;
-  width: 800px;
-  height: 600px;
+  width: 600px;
+  min-height: 500px;
+  max-height: 90%;
+  overflow-y:auto; 
 }
 
 .goback-btn{
   z-index: 999;
-  margin-left: 600px;
+  margin-left: 400px;
 }
-</style>
 
-<!-- 全局css -->
-<style >
-.el-table .success-row {
-  background: #f0f9eb;
+.cat-box{
+  background-color:rgb(250, 250, 250);
+  width: 100%;
+  height: 40px;
+  margin-bottom: 10px;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+.cat-name{
+  line-height: 40px;
+  margin-left: 20px;
+  color: #262626;
+}
+.tree-node{
+  margin-top: 20px;
+}
+.custom-tree-node{
+  width: 100%;
+}
+.right-bar{
+  float: right;
+  margin-right: 20px;
+}
+
+.tips{
+  margin-left: 10px;
+  color: #9ea1a6;
+  font-size: 11px;
+
 }
 
 </style>

web_src/static/lang/en.js

@@ -301,5 +301,8 @@ exports.default = {
     "recover":"recover",
     "recover_tips":"Are you sure to recover? The recovered page will appear in the item root",
 
+    "cat_tips":"Drag to sort",
+    "cat_limite_tips":"Only up to three levels of directories are supported",
+
 
 };

web_src/static/lang/zh-CN.js

@@ -307,5 +307,9 @@ exports.default = {
     "del_time":"删除时间",
     "recover":"恢复",
     "recover_tips":"确认恢复吗？恢复的页面将出现在项目根目录",
+    
+    "cat_tips":"可拖动以排序",
+    "cat_limite_tips":"showdoc只支持最多三层目录，请优化目录结构",
+
 
 };