场景管理fix

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

@@ -106,11 +106,13 @@
   import useScene from './use-scene';
   import useSceneTemplete from './use-sence-templete';
   import { useRouter } from 'vue-router';
+  import { storeToRefs } from 'pinia';
 
   const router = useRouter();
 
   const useSceneList = useScene();
-  const { tableData, getSceneDetail } = useSceneList;
+  const { tableData } = storeToRefs(useSceneList);
+  const { getSceneDetail } = useSceneList;
   const useSceneTempleteDetail = useSceneTemplete();
   const { sceneList, templateList, workshopTemplateList } = useSceneTempleteDetail;
   const expendRowKeys = ref(['']);
@@ -199,6 +201,8 @@
     fixed: 'right',
     render(record) {
       return h(ActionColomn, {
+        // rowUpDisable:
+        // rowDownDisable:
         subItem: record.row,
         handleConig: handleConfig,
         handleAdd: handleAdd,
@@ -358,6 +362,7 @@
   const rowUp = (row) => {
     if (row.parent) {
       const parentIndex = row.parent.children!.indexOf(row);
+      row.parentIndex = parentIndex;
       if (parentIndex > 0) {
         const previousRow = row.parent.children![parentIndex - 1];
         // 进行交换位置

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

@@ -16,14 +16,29 @@
     <div style="width: 1px; height: 14px; color: #e9e9e9; margin-right: 14px">|</div>
     <img src="../../../assets/icons/edit.png" @click="changeEdit" class="action-img" alt="" />
     <img src="../../../assets/icons/delete.png" @click="changeDelete" class="action-img" alt="" />
-    <img src="../../../assets/icons/up.png" @click="changeUp" class="action-img" alt="" />
-    <img src="../../../assets/icons/down.png" @click="changeDown" class="action-img" alt="" />
+    <img
+      src="../../../assets/icons/up.png"
+      @click="changeUp"
+      :class="{ 'action-disable': isFirst, 'action-img': !isFirst }"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/down.png"
+      @click="changeDown"
+      :class="{ 'action-disable': isLast, 'action-img': !isLast }"
+      alt=""
+    />
   </div>
 </template>
 
 <script setup lang="ts">
   import { computed } from 'vue';
   import { ComAddDatas, WorkshopAddDatas, WorkspaceAddDatas } from '@/api/scene/sceneOperate.ts';
+  import useScene from './use-scene';
+  import { storeToRefs } from 'pinia';
+
+  const useSceneList = useScene();
+  const { tableData } = storeToRefs(useSceneList);
 
   const props = defineProps<{
     subItem: ComAddDatas | WorkshopAddDatas | WorkspaceAddDatas;
@@ -39,6 +54,20 @@
     return (props.subItem as any).workshopId ? true : false;
   });
 
+  const isFirst = computed(() => {
+    return (props.subItem as any).serial === 0 ? true : false;
+  });
+
+  const isLast = computed(() => {
+    if ((props.subItem as any).parentId === 0) {
+      return (props.subItem as any).serial === tableData.value.length - 1 ? true : false;
+    } else {
+      return (props.subItem as any).serial === (props.subItem as any).parent?.children.length - 1
+        ? true
+        : false;
+    }
+  });
+
   const changeConig = () => {
     props.handleConig(props.subItem);
   };
@@ -48,6 +77,9 @@
   };
 
   const changeEdit = () => {
+    console.log('props.subItem', props.subItem);
+    console.log('length', tableData.value.length);
+
     props.handleEdit(props.subItem);
   };
 
@@ -57,6 +89,7 @@
 
   const changeUp = () => {
     props.handleUp(props.subItem);
+    console.log('props.subItem', props.subItem);
   };
 
   const changeDown = () => {
@@ -80,6 +113,7 @@
     color: grey;
     line-height: 22px;
     margin-right: 7px;
+    cursor: not-allowed;
   }
 
   .otp-btn {
@@ -104,4 +138,11 @@
     height: 16px;
     margin-top: 5px;
   }
+  .action-disable {
+    margin-right: 10px;
+    height: 16px;
+    margin-top: 5px;
+    filter: grayscale(100%);
+    cursor: not-allowed;
+  }
 </style>

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

@@ -15,8 +15,8 @@ export const colomns = [
     label: '预览',
     prop: 'preview',
     render: ({ row, column }) => {
-      console.log('record row', row);
-      console.log('record', column);
+      // console.log('record row', row);
+      // console.log('record', column);
       if (!row.parent && row.labelList?.[0]?.id) {
         return (
           <a

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

@@ -6,9 +6,25 @@ import {
   LabelModuleListType,
 } from '@/api/scene/sceneOperate';
 import { WorkShopTempleteType } from '@/api/scene/secene-templet';
+import { defineStore } from 'pinia';
 import { ref } from 'vue';
 
-export function useScene() {
+// export function useScene() {
+//   //场景数据
+//   const tableData = ref<
+//     SceneListType<GetListWorkshop<WorkspaceAddDatas, WorkShopTempleteType>, LabelModuleListType>[]
+//   >([]);
+
+//   const getSceneDetail = () => {
+//     getSceneList().then((res) => {
+//       tableData.value = res;
+//     });
+//   };
+
+//   return { tableData, getSceneDetail };
+// }
+
+export const useScene = defineStore('scene-data', () => {
   //场景数据
   const tableData = ref<
     SceneListType<GetListWorkshop<WorkspaceAddDatas, WorkShopTempleteType>, LabelModuleListType>[]
@@ -21,6 +37,6 @@ export function useScene() {
   };
 
   return { tableData, getSceneDetail };
-}
+});
 
 export default useScene;