场景管理排序fix

src/views/system-config/scene-manage/SceneManage.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, reactive, h, watch, computed } from 'vue';
+  import { ref, onMounted, reactive, h, computed } from 'vue';
   import { Plus } from '@element-plus/icons-vue';
   import { BasicTable, BasicColumn } from '@/components/Table';
   import { ElMessageBox } from 'element-plus';
@@ -88,11 +88,11 @@
   import { DATA_LEVEL, DrawerType, ENABLED } from './constant';
   import {
     colomns,
-    dataSourceWithParent,
     updateSerials,
     findItemLevel,
     removeParent,
     flattenCodes,
+    getParent,
   } from './use-method.tsx';
   import {
     ComAddDatas,
@@ -150,19 +150,12 @@
 
   onMounted(() => {
     //添加父级，主要用于排序功能
-    dataSourceWithParent(tableData.value, null);
+    //dataSourceWithParent(tableData.value, null);
+
     //获取tableData数据
     getSceneDetail();
   });
 
-  //增加parent用于排序
-  watch(
-    () => tableData.value,
-    () => {
-      dataSourceWithParent(tableData.value, null);
-    },
-  );
-
   function onCheckedRow(rowKeys) {
     console.log(rowKeys);
   }
@@ -375,20 +368,19 @@
   //向上排序
   const rowUp = (row) => {
     if (row.parent) {
-      const parentIndex = row.parent.children!.indexOf(row);
-      row.parentIndex = parentIndex;
+      const parentIndex = row.parent.children!.findIndex((item) => item.id === row.id);
       if (parentIndex > 0) {
         const previousRow = row.parent.children![parentIndex - 1];
+        const targetParent = getParent(tableData.value, previousRow.parent.id);
         // 进行交换位置
-        row.parent.children!.splice(parentIndex - 1, 2, row, previousRow);
+        targetParent.children!.splice(parentIndex - 1, 2, row, previousRow);
       }
     } else {
-      const index = tableData.value.indexOf(row);
+      const index = tableData.value.findIndex((item) => item.id === row.id);
       if (index > 0) {
         tableData.value.splice(index - 1, 2, row, tableData.value[index - 1]);
       }
     }
-
     tableData.value = updateSerials(tableData.value);
     sortSceneList(removeParent(tableData.value))
       .then(() => {
@@ -402,14 +394,15 @@
   //向下排序
   const rowDown = (row) => {
     if (row.parent) {
-      const parentIndex = row.parent.children!.indexOf(row);
+      const parentIndex = row.parent.children!.findIndex((item) => item.id === row.id);
       if (parentIndex < row.parent.children?.length - 1) {
         const behindRow = row.parent.children![parentIndex + 1];
+        const targetParent = getParent(tableData.value, behindRow.parent.id);
         // 进行交换位置
-        row.parent.children!.splice(parentIndex, 2, behindRow, row);
+        targetParent.children!.splice(parentIndex, 2, behindRow, row);
       }
     } else {
-      const index = tableData.value.indexOf(row);
+      const index = tableData.value.findIndex((item) => item.id === row.id);
       if (index < tableData.value.length - 1) {
         tableData.value.splice(index, 2, tableData.value[index + 1], row);
       }

src/views/system-config/scene-manage/use-method.tsx

@@ -15,8 +15,6 @@ export const colomns = [
     label: '预览',
     prop: 'preview',
     render: ({ row, column }) => {
-      // console.log('record row', row);
-      // console.log('record', column);
       if (!row.parent && row.labelList?.[0]?.id) {
         return (
           <a
@@ -96,21 +94,9 @@ export const updateSerials = (data) => {
   for (let i = 0; i < data.length; i++) {
     data[i].serial = i;
 
-    // if (currentItem.id === targetId) {
-    //   if (!currentItem.children) {
-    //     currentItem.children = [];
-    //   }
-    //   currentItem.children.push(newAdd);
-    //   return true; // 表示已经找到并修改
-    // }
-
     // 如果有子项，递归查找
     if (data[i].children && data[i].children.length > 0) {
       updateSerials(data[i].children);
-
-      // if (found) {
-      //   return true; // 如果在子项中找到目标项，停止继续查找
-      // }
     }
   }
   return data;
@@ -163,6 +149,25 @@ export const findItemLevel = (data, targetId, targetName, currentLevel = 0) => {
   return -1;
 };
 
+
+//得到parent
+export const getParent = (data:DataSourceUser[], targetId:number) => {
+  let parentNode = {} as DataSourceUser
+  for (let i = 0; i < data.length; i++) {
+    const item = data[i];
+
+    if (item.id === targetId ) {
+      parentNode = item
+    }
+
+    if (item.children && item.children.length > 0) {
+       getParent(item.children, targetId);
+    }
+  }
+
+  return parentNode;
+};
+
 //删除行
 export const deleteTableRow = (dataSource, targetId) => {
   const deleteRecursive = (data) => {

src/views/system-config/scene-manage/use-scene.ts

@@ -8,21 +8,7 @@ import {
 import { WorkShopTempleteType } from '@/api/scene/secene-templet';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-
-// export function useScene() {
-//   //场景数据
-//   const tableData = ref<
-//     SceneListType<GetListWorkshop<WorkspaceAddDatas, WorkShopTempleteType>, LabelModuleListType>[]
-//   >([]);
-
-//   const getSceneDetail = () => {
-//     getSceneList().then((res) => {
-//       tableData.value = res;
-//     });
-//   };
-
-//   return { tableData, getSceneDetail };
-// }
+import { dataSourceWithParent } from './use-method';
 
 export const useScene = defineStore('scene-data', () => {
   //场景数据
@@ -33,6 +19,8 @@ export const useScene = defineStore('scene-data', () => {
   const getSceneDetail = () => {
     getSceneList().then((res) => {
       tableData.value = res;
+      //添加父级，主要用于排序功能
+      tableData.value = dataSourceWithParent(tableData.value, null);
     });
   };