菜单增加排序功能

@@ -59,8 +59,12 @@
   padding: 0 7px !important;
 }
 
+
+
 // 查询表单样式
 .from-clues {
+
+
   height: 100%;
   width: 100%;
   // min-width: 1280px;
@@ -80,6 +84,14 @@
       color: #E3F1FF;
     }
 
+
+
+    /deep/.el-icon-arrow-right {
+      color: rgb(228, 20, 20) !important;
+    }
+
+
+
     .el-input__inner {
       background: #07388B;
       border-radius: 2px;
@@ -183,7 +195,10 @@
     }
   }
 
+  .el-table__expand-icon {
+    color: #8DEAF9;
 
+  }
 
   .el-form-item--small.el-form-item {
     margin-bottom: 0px;
@@ -381,12 +396,12 @@
   color: #CEF8FF;
 }
 
-.el-icon-arrow-right {
-  width: 2px;
-  position: relative;
-  left: 10px;
-  color: #FFFFFF;
-}
+// .el-icon-arrow-right {
+//   width: 2px;
+//   position: relative;
+//   left: 10px;
+//   color: #FFFFFF;
+// }
 
 .el-breadcrumb__inner {
   color: #CEF8FF !important;
@@ -748,9 +763,13 @@
   }
 
   .from-clues-content {
+
+
     margin-top: 0;
     background: none;
     padding: 0;
+
+
   }
 
   .editDialogBox-box {

@@ -9,6 +9,7 @@
 }
 
 
+
 .from-clues {
   // height: 100%;
   width: 100%;
@@ -42,6 +43,12 @@
     width: 100%;
   }
 
+  .from-clues-content {
+    .el-table__expand-icon {
+      color: rgb(0, 0, 0);
+    }
+  }
+
   .el-form--inline .el-form-item {
     width: auto;
     margin-right: 0px;
@@ -198,9 +205,9 @@
 // }
 
 .el-icon-arrow-right {
-  width: 2px;
-  position: relative;
-  left: 10px;
+  // width: 2px;
+  // position: relative;
+  // left: 10px;
 }
 
 .el-breadcrumb__inner {
@@ -356,6 +363,8 @@
     margin-top: 0;
     background: none;
     padding: 0;
+
+
   }
 
   .editDialogBox-box {
@@ -704,6 +713,10 @@
     }
   }
 
+  .el-form-item {
+    display: flex;
+  }
+
   .el-input__inner {
     // background-color: #07388b;
   }

 <template>
-  <div class="timedTask from-clues">
+  <div class="from-clues">
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
         <el-form-item v-if="BASE_API.THEME=='jg'">

 <template>
-  <div class="timedTask from-clues">
+  <div class="from-clues">
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
         <el-form-item v-if="BASE_API.THEME=='jg'">
@@ -31,16 +31,13 @@
 <script>
   // 定时任务
   import data from "./data";
-  import { deleteAction, getAction, api } from "@/api/manageApi";
+  import { deleteAction, getAction, api, httpAction } from "@/api/manageApi";
   import EditDialog from "./edit-dialog.vue";
   import { mapGetters } from "vuex";
   import { getMenuInfo } from "@/api/user";
+  import { updateOrder } from "@/api/orders"
   import {
-    getUuid,
-    judgeSort,
-    realMove,
-    findParents,
-    removeTreeListItem,
+    judgeSort
   } from "@/utils/operation";
   export default {
     name: "menus",
@@ -69,7 +66,60 @@
 
         selectionList: [],
         tableData: {
-          columns: [].concat(data.columns()).concat([
+          columns: []
+            .concat(data.columns())
+            .concat([
+              {
+                label: "排序",
+                width: 300,
+                render: (h, scope) => {
+                  return (
+                    <div>
+                      <el-button
+                        type="text"
+                        class='movebtnColor'
+                        disabled={scope.row.isTop}
+                        onClick={() => {
+                          this.moveUp(scope.row, 'TOP')
+                        }}
+                      >
+                        置顶
+                      </el-button>
+                      <el-button
+                        type="text"
+                        class='movebtnColor'
+                        disabled={scope.row.isTop}
+                        onClick={() => {
+                          this.moveUp(scope.row, 'UP');
+                        }}
+                      >
+                        上移
+                      </el-button>
+                      <el-button
+                        type="text"
+                        class='movebtnColor'
+                        disabled={scope.row.isBottom}
+                        onClick={() => {
+                          this.moveDown(scope.row, 'DOWN');
+                        }}
+                      >
+                        下移
+                      </el-button>
+                      <el-button
+                        type="text"
+                        class='movebtnColor'
+                        disabled={scope.row.isBottom}
+                        onClick={() => {
+                          this.moveDown(scope.row, 'BOTTOM');
+                        }}
+                      >
+                        置底
+                      </el-button>
+                    </div>
+                  );
+                },
+              },
+            ]).concat([
               {
                 label: "操作",
                 width: 380,
@@ -104,7 +154,7 @@
         },
         tableUrl: api.menus, // 菜单接口地址
         meumurlid: api.subsystem,// 项目id接口地址
-        productId: ""//项目id
+        productId: "",//项目id
       };
     },
     created () {
@@ -153,7 +203,6 @@
       // 加载表格数据
       getTableList () {
         getMenuInfo(this.BASE_API.CODE).then((res) => {
-          console.log("/sthj", res);
           if (res.code === 200) {
             this.tablelistData = judgeSort(res.result)
             this.listData = this.tablelistData
@@ -180,8 +229,7 @@
         getAction(this.meumurlid, params)
           .then((res) => {
             this.productId = res.content[0].id;
-            this.getAuthorityList(res.content[0].id, res.content[0].code)
-            this.selectedSubsystemCode = res.content[0].code
+            // this.selectedSubsystemCode = res.content[0].code
 
           })
           .catch((error) => {
@@ -245,6 +293,83 @@
       reloadTableData () {
         this.getTableList()
       },
+
+      // 排序
+      moveUp (row, operate) {
+        if (row.isTop) {
+          return;
+        } else {
+          this.realMove(row, operate);
+        }
+      },
+      moveDown (row, operate) {
+        if (row.isBottom) {
+          return;
+        } else {
+          this.realMove(row, operate);
+        }
+      },
+
+      //树形表格移动
+      realMove (row, operate) {
+        function tarverse (nodes, id) {
+          let result;
+          for (let i = 0; i < nodes.length; i++) {
+            if (nodes[i].children && nodes[i].children.length > 0) {
+              result = tarverse(nodes[i].children, id);
+            }
+            if (nodes[i].id == id) {
+              if (operate === 'UP') {
+                result = nodes[i - 1].id;
+              } else if (operate === 'DOWN') {
+                result = nodes[i + 1].id;
+              }
+              return result;
+            }
+
+            if (result) return result;
+          }
+          return result
+        }
+
+        this.$nextTick(() => {
+          updateOrder('/rest/menus', row, operate, tarverse(this.tablelistData, row.id)).then(res => {
+            if (res.status === 1) {
+              this.getTableList()
+              this.$message.success({ message: res.message, showClose: true })
+            } else {
+              this.$message.error({ message: res.message, showClose: true })
+            }
+          })
+          this.tablelistData = judgeSort(this.tablelistData || []);
+        })
+        // this.tablelistData = changeSort(this.tablelistData, row.id);
+        // function changeSort (arr, id) {
+        //   if (arr.length) {
+        //     let flag = false;
+        //     for (let i in arr) {
+        //       if (arr[i].id == id) {
+        //         if (operate === "UP") {
+        //           arr[i] = arr.splice(i - 1, 1, arr[i])[0];
+        //         } else if (operate === "DOWN") {
+        //           let temp = arr.splice(i - 0 + 1, 1, arr[i])
+        //           arr[i] = temp[0];
+        //         } else if (operate === "TOP") {
+        //           arr.unshift(arr.splice(i, 1)[0]);
+        //         } else if (operate === "BOTTOM") {
+        //           arr.push(arr.splice(i, 1)[0]);
+        //         }
+        //         flag = true;
+        //         break;
+        //       }
+        //       if (!flag && arr[i].children && arr[i].children.length) {
+        //         arr[i].children = changeSort(arr[i].children, id);
+        //       }
+        //     }
+        //   }
+        //   return arr;
+        // }
+      }
     },
   };
 </script>
@@ -252,8 +377,4 @@
   @import "~@/styles/mixin.scss";
 
   // @import "~@/styles/public.scss";
-
-  /deep/.el-table__expand-icon {
-    color: #fff;
-  }
 </style>

 <template>
-  <div class="timedTask from-clues">
+  <div class="from-clues">
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
         <el-form-item v-if="BASE_API.THEME == 'jg'">

 <template>
-  <div class="timedTask from-clues">
+  <div class="from-clues">
     <div class="from-clues-header">
       <el-form ref="form" :model="form" label-width="80px">
         <el-form-item v-if="BASE_API.THEME == 'jg'">

 <template>
-  <div class="timedTask from-clues">
+  <div class="from-clues">
     <div class="from-clues-header">
       <el-form ref="ruleForm" :model="form" label-width="100px">
         <el-form-item v-if="BASE_API.THEME == 'jg'">