用户管理添加拖拽排序

src/views/newUserManagement/index.vue

@@ -43,7 +43,7 @@
                     <span @click.stop="handleRemove(item)" class="error">删除</span>
                   </div>
                 </div> -->
-                <el-tree ref="treeArr" :data="arrs" :props="defaultArrProps" highlight-current :filter-node-method="filterArrNode" default-expand-all node-key="user_group_id" @node-click="handleNodeClick" :expand-on-click-node="false">
+                <el-tree ref="treeArr" draggable :data="arrs" :props="defaultArrProps" highlight-current :filter-node-method="filterArrNode" default-expand-all node-key="user_group_id" @node-click="handleNodeClick" @node-drop="nodeDrop" :allow-drop="allowDrop" :expand-on-click-node="false">
                   <span class="custom-tree-node" slot-scope="{ node,data }">
                     <div class="flex">
                       <span class="customTxt">{{ node.label }}</span>
@@ -231,8 +231,8 @@ import { listToTree } from '@/utils/validate'
 import XLSX from "xlsx";
 import { Format } from '@/utils/validate'
 import { exportToExcel } from '@/utils/table'
-import { exportJsonToExcel  } from '@/utils/Export2Excel.js'
-import {reactive} from "vue";
+import { exportJsonToExcel } from '@/utils/Export2Excel.js'
+import { reactive } from "vue";
 // import * as XLSX from 'xlsx'
 import XLSX_STYLE from 'xlsx-style'
 import FileSaver from 'file-saver'
@@ -277,7 +277,7 @@ export default {
         "user_sec_pwd": null,
         "user_status": null,
         "user_token": null,
-        "email":null
+        "email": null
       },
       tableRules: {
         user_name: [{ required: true, message: "请输入账号名称", trigger: "blur" }],
@@ -314,7 +314,7 @@ export default {
       },
       arrTree: [],
       treeCheckObj: {},
-      groupname:'',
+      groupname: '',
       execList: []
     }
   },
@@ -349,12 +349,27 @@ export default {
       const { code, returnData } = await this.getQueryListAuth(this.queryId)
       if (code == 0) {
         if (returnData && returnData.length) {
+          returnData.map(item => {
+            item.user_group_level = Number(item.user_group_level)
+            item.user_group_sort = Number(item.user_group_sort)
+          })
           this.arrTree = _.cloneDeep(returnData)
           const treeMenu = listToTree(returnData, 'up_user_group_id', 'user_group_id')
-          this.arrs = treeMenu
+          this.arrs = this.orderData(treeMenu)
         }
       }
     },
+    orderData (arr) {
+      const narr = [...arr]
+      if (!narr.length) return []
+      narr.map(item => {
+        if (item.children?.length) {
+          item.children = _.orderBy(item.children, ['user_group_level', 'user_group_sort'], ['asc', 'asc'])
+          this.orderData(item.children)
+        }
+      })
+      return narr
+    },
     filterArrNode (value, data) {
       if (!value) return true;
       return data.user_group_name.indexOf(value) !== -1;
@@ -373,6 +388,33 @@ export default {
       // console.log(this.arrs)
       // this.treeCheckId = this.arrs[this.arrs.length-1].user_group_id
     },
+    //拖拽目标判断
+    allowDrop (draggingNode, dropNode, type) {
+      if (draggingNode.parent.id == dropNode.parent.id) {
+        return type == "next"
+      } else {
+        return false
+      }
+    },
+    //拖拽完成
+    nodeDrop (draggingNode, dropNode) {
+      const [o1, o2] = [{ ...draggingNode.data }, { ...dropNode.data }]
+      o1.user_group_sort = dropNode.data.user_group_sort
+      o2.user_group_sort = draggingNode.data.user_group_sort
+      const https = [this.getChangeList(this.queryId, o1, 2, 'user_group_id'), this.getChangeList(this.queryId, o2, 2, 'user_group_id')]
+      this.dropHttp(https)
+    },
+    async dropHttp (https) {
+      const result = await Promise.allSettled(https)
+      result.map(item => {
+        if (item.status == 'fulfilled') {
+          this.$message.success('操作成功')
+        } else {
+          this.$message.success('操作失败')
+        }
+      })
+      this.getTreeData()
+    },
     async handleNodeClick (data) {
       this.groupname = data.user_group_name
       if (data.user_group_id) {
@@ -436,7 +478,7 @@ export default {
           if (this.rmObj.children) {
             delete this.rmObj.children
           }
-          const { code } = await this.getChangeList(this.queryId, this.rmObj, 3)
+          const { code } = await this.getChangeList(this.queryId, { user_group_id: this.rmObj.user_group_id }, 3)
           if (code == 0) {
             this.getTreeData()
             this.rmObj = {}
@@ -475,6 +517,25 @@ export default {
               code = res.code
             } else {
               let result = null
+              if (data.up_user_group_id) {
+                const items = this.arrTree.filter(item => item.user_group_id == data.up_user_group_id)
+                if (!items.length) return
+                const { user_group_level } = items[0]
+                const levels = this.arrTree.filter(item => item.user_group_level == Number(user_group_level) + 1)
+                if (!levels.length) return
+                const nlevels = _.orderBy(levels, 'user_group_sort', 'asc')
+                const { user_group_sort } = nlevels?.at(-1)
+                data.user_group_sort = Number(user_group_sort) + 1
+                data.user_group_level = Number(user_group_level) + 1
+              } else {
+                const items = this.arrTree.filter(item => !item.up_user_group_id)
+                if (!items.length) return
+                const { user_group_level } = items[0]
+                const nlevels = _.orderBy(items, 'user_group_sort', 'asc')
+                const { user_group_sort } = nlevels?.at(-1)
+                data.user_group_sort = Number(user_group_sort) + 1
+                data.user_group_level = Number(user_group_level)
+              }
               if (id == 'test') {
                 data.user_group_id = null
                 result = await this.getChangeList(this.queryId, data, 1)
@@ -656,7 +717,7 @@ export default {
       this.clearTableForm()
     },
     //导出
-    downFile() {
+    downFile () {
       var wb = XLSX.utils.table_to_book(
         document.querySelector("#userTableData")
       );
@@ -670,7 +731,7 @@ export default {
           new Blob([wbout], {
             type: "application/octet-stream",
           }),
-        this.groupname + Format('yyyy-MM-dd', new Date()), + ".xlsx"
+          this.groupname + Format('yyyy-MM-dd', new Date()), + ".xlsx"
         );
       } catch (e) {
         if (typeof console !== "undefined") console.log(e, wbout);
@@ -680,144 +741,143 @@ export default {
     exportHandler: _.throttle(
       function (refName) {
         const table = this.$refs[refName].$el.cloneNode(true)
-        const fileName = `${ this.groupname + Format('yyyy-MM-dd', new Date())}.xlsx`
+        const fileName = `${this.groupname + Format('yyyy-MM-dd', new Date())}.xlsx`
         console.log(fileName)
         exportToExcel(table, this.groupname, fileName)
       },
       2000,
       { trailing: false }
     ),
-    handleExport() {
- 
- var arr = [];
- let mJson = JSON.parse(JSON.stringify(this.execList));
+    handleExport () {
 
- // ============ 【添加表列的标头】
+      var arr = [];
+      let mJson = JSON.parse(JSON.stringify(this.execList));
 
- let TableHead = ['登录账号','用户名','所属用户组','用户状态','登出时间','登陆时间'];
+      // ============ 【添加表列的标头】
 
- // 指定导出字段
- let mField = "登录账号,用户名,所属用户组,用户状态,登出时间,登陆时间";
+      let TableHead = ['登录账号', '用户名', '所属用户组', '用户状态', '登出时间', '登陆时间'];
 
- // ======================= 【处理mJson数据】
+      // 指定导出字段
+      let mField = "登录账号,用户名,所属用户组,用户状态,登出时间,登陆时间";
 
- let mFieldsArray = mField.split(','); // 将 mField 字符串转换为以逗号分隔的数组
+      // ======================= 【处理mJson数据】
 
- // 遍历 mJson 数组中的每个对象
- for (let i = 0; i < mJson.length; i++) {
-   let newObj = {}; // 创建一个新对象存储重新排序后的键名和键值
+      let mFieldsArray = mField.split(','); // 将 mField 字符串转换为以逗号分隔的数组
 
-   // 遍历 mFieldsArray 数组中的每个字段
-   for (let j = 0; j < mFieldsArray.length; j++) {
-     let field = mFieldsArray[j];
-     if (mJson[i].hasOwnProperty(field)) {
-       if (field == "accountTime") {
-         newObj[field] = mJson[i][field].substring(0, 10); // 将原对象中的对应键名和键值赋给新对象
-       }
-       else if(field == "goodsStatus")
-       {
+      // 遍历 mJson 数组中的每个对象
+      for (let i = 0; i < mJson.length; i++) {
+        let newObj = {}; // 创建一个新对象存储重新排序后的键名和键值
+
+        // 遍历 mFieldsArray 数组中的每个字段
+        for (let j = 0; j < mFieldsArray.length; j++) {
+          let field = mFieldsArray[j];
+          if (mJson[i].hasOwnProperty(field)) {
+            if (field == "accountTime") {
+              newObj[field] = mJson[i][field].substring(0, 10); // 将原对象中的对应键名和键值赋给新对象
+            }
+            else if (field == "goodsStatus") {
 
-         switch (mJson[i][field]) {
+              switch (mJson[i][field]) {
 
-           case '0':
-             newObj[field] = "一级"; 
-             break;
-           case '1':
-             newObj[field] = "二级"; 
-             break;
-           case '2':
-             newObj[field] = "三级"; 
-             break;
-           default:
-             newObj[field] = "四级"; 
-         }
-       }
-       else {
-       newObj[field] = mJson[i][field]; // 将原对象中的对应键名和键值赋给新对象
-     }
+                case '0':
+                  newObj[field] = "一级";
+                  break;
+                case '1':
+                  newObj[field] = "二级";
+                  break;
+                case '2':
+                  newObj[field] = "三级";
+                  break;
+                default:
+                  newObj[field] = "四级";
+              }
+            }
+            else {
+              newObj[field] = mJson[i][field]; // 将原对象中的对应键名和键值赋给新对象
+            }
 
-   }
+          }
 
- }
- mJson[i] = newObj; // 将新对象替换原对象
-}
+        }
+        mJson[i] = newObj; // 将新对象替换原对象
+      }
 
-//  console.log(mJson);
-// ============ 【添加表列的标头】
+      //  console.log(mJson);
+      // ============ 【添加表列的标头】
 
-// 创建一个空的二维数组
-var arr = [];
-// 使用JSON.parse方法把json变量转换成一个对象数组
-var objArr = mJson;
-// 遍历对象数组，把每个对象的属性值放入一个一维数组中，然后把这个一维数组添加到二维数组中
-for(var i = 0; i<objArr.length; i++) {
-// 创建一个空的一维数组
-var row = []; // 获取当前对象
-var obj = objArr[i]; // 遍历对象的属性，把属性值放入一维数组中
+      // 创建一个空的二维数组
+      var arr = [];
+      // 使用JSON.parse方法把json变量转换成一个对象数组
+      var objArr = mJson;
+      // 遍历对象数组，把每个对象的属性值放入一个一维数组中，然后把这个一维数组添加到二维数组中
+      for (var i = 0; i < objArr.length; i++) {
+        // 创建一个空的一维数组
+        var row = []; // 获取当前对象
+        var obj = objArr[i]; // 遍历对象的属性，把属性值放入一维数组中
 
-for (var key in obj) {
-// console.log("### key =" + key + " ###");
-if (key == "CreatDate" || key == "Id") {  // 排除字段
-} else {
- row.push(obj[key]);
-}
-}
-// 把一维数组添加到二维数组中
-arr.push(row);
-}
+        for (var key in obj) {
+          // console.log("### key =" + key + " ###");
+          if (key == "CreatDate" || key == "Id") {  // 排除字段
+          } else {
+            row.push(obj[key]);
+          }
+        }
+        // 把一维数组添加到二维数组中
+        arr.push(row);
+      }
 
-arr.unshift(TableHead); // 添加列标头名
-// console.log("######################");
-// console.log(arr);
+      arr.unshift(TableHead); // 添加列标头名
+      // console.log("######################");
+      // console.log(arr);
 
-// ============ 【添加表格标题行】
-let TableTitle = ["用户列表"];  // 表标题内容
-// 计算合并标题单元格
-let ColCount = TableHead.length;
-let ColLetter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-let ColIndex = ColCount - 1;
-let m_TitleMerges = "A1:" + ColLetter.charAt(ColIndex) + "1";
-const TitleMerges = [];
-TitleMerges.push(m_TitleMerges);  //["A1:E1"]
-// let TitleMerges=["A1:E1"];
-// ============ 【设置列宽】
-let wscols = [
-{ wch: 8 }, // 编号
-{ wch: 14 }, // 编码1
-{ wch: 12 }, // 分类
-{ wch: 20 }, // 名称
-{ wch: 12 }, // 品牌
-{ wch: 15 }, // 规格
-{ wch: 5 }, // 单位
-{ wch: 15 }, // 区域
-{ wch: 8 }, // 方式
-{ wch: 10 }, // 日期
-{ wch: 8 }, // 状态
-{ wch: 8 }, // 使用者
-{ wch: 15 }, // 部门
-{ wch: 8 }, // 者
-{ wch: 15 }, // 
-];
+      // ============ 【添加表格标题行】
+      let TableTitle = ["用户列表"];  // 表标题内容
+      // 计算合并标题单元格
+      let ColCount = TableHead.length;
+      let ColLetter = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+      let ColIndex = ColCount - 1;
+      let m_TitleMerges = "A1:" + ColLetter.charAt(ColIndex) + "1";
+      const TitleMerges = [];
+      TitleMerges.push(m_TitleMerges);  //["A1:E1"]
+      // let TitleMerges=["A1:E1"];
+      // ============ 【设置列宽】
+      let wscols = [
+        { wch: 8 }, // 编号
+        { wch: 14 }, // 编码1
+        { wch: 12 }, // 分类
+        { wch: 20 }, // 名称
+        { wch: 12 }, // 品牌
+        { wch: 15 }, // 规格
+        { wch: 5 }, // 单位
+        { wch: 15 }, // 区域
+        { wch: 8 }, // 方式
+        { wch: 10 }, // 日期
+        { wch: 8 }, // 状态
+        { wch: 8 }, // 使用者
+        { wch: 15 }, // 部门
+        { wch: 8 }, // 者
+        { wch: 15 }, // 
+      ];
 
-// alert("开始导出");
+      // alert("开始导出");
 
-// console.log(arr);
+      // console.log(arr);
 
-// 开始导出
-exportJsonToExcel({
-// 这里用到了Export2Excel.js
-header: TableTitle,  // 表标题
-data: arr,  // 实际数据从第三行开始
-filename: "明细表",  // 文件名
-merges: TitleMerges,  // 合并A1到C1单元格作为标题行
-bookType: 'xls',  // 生成的文件类型
-autoWidth: true,  // 不自动调整列宽
-XlsWidth: wscols
-});
- // alert("ok")
- // exportExcelGoods()
- // this.$message.success('导出成功')
-},
+      // 开始导出
+      exportJsonToExcel({
+        // 这里用到了Export2Excel.js
+        header: TableTitle,  // 表标题
+        data: arr,  // 实际数据从第三行开始
+        filename: "明细表",  // 文件名
+        merges: TitleMerges,  // 合并A1到C1单元格作为标题行
+        bookType: 'xls',  // 生成的文件类型
+        autoWidth: true,  // 不自动调整列宽
+        XlsWidth: wscols
+      });
+      // alert("ok")
+      // exportExcelGoods()
+      // this.$message.success('导出成功')
+    },
   }
 }
 </script>