Merge pull request #288 from YeungHoiChiu/draggable-optimate

feat: 测试步骤可以从不同层级分组之间自由拖拽

src/components/StepDraggable.vue

@@ -37,6 +37,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  parentId: Number, // 用于分组拖拽时，更新step数据的parentId
 });
 const emit = defineEmits([
   'flush',
@@ -64,27 +65,51 @@ const switchStep = (id, e) => {
     });
 };
 const sortStep = (e) => {
-  if (props.isEdit && props.steps[e.moved.newIndex].parentId === 0) {
+  if (e.removed !== undefined) {
     return;
   }
   let startId = null;
   let endId = null;
   let direction = '';
-  if (e.moved.newIndex > e.moved.oldIndex) {
-    direction = 'down';
-    endId = props.steps[e.moved.newIndex].sort;
-    startId = props.steps[e.moved.newIndex - 1].sort;
+  let newIndex = null;
+  let stepsId = null;
+  let newParentId = null;
+  let caseId = null;
+  if (e.added !== undefined) {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.steps[e.added.newIndex].parentId = props.parentId; // 更新parentId
+    caseId = props.steps[e.added.newIndex].caseId;
+    newParentId = props.parentId;
+    newIndex = e.added.newIndex;
+    stepsId = props.steps[e.added.newIndex].id;
+    // 此场景中下面3个参数不重要，为了兼容后端参数要求随便填的，它们会由后端进行处理
+    direction = 'added';
+    startId = 1;
+    endId = 2;
   } else {
-    direction = 'up';
-    startId = props.steps[e.moved.newIndex].sort;
-    endId = props.steps[e.moved.newIndex + 1].sort;
+    caseId = props.steps[e.moved.newIndex].caseId;
+    if (props.isEdit && props.steps[e.moved.newIndex].parentId === 0) {
+      return;
+    }
+    if (e.moved.newIndex > e.moved.oldIndex) {
+      direction = 'down';
+      endId = props.steps[e.moved.newIndex].sort;
+      startId = props.steps[e.moved.newIndex - 1].sort;
+    } else {
+      direction = 'up';
+      startId = props.steps[e.moved.newIndex].sort;
+      endId = props.steps[e.moved.newIndex + 1].sort;
+    }
   }
   axios
     .put('/controller/steps/stepSort', {
-      caseId: props.steps[e.moved.newIndex].caseId,
+      caseId,
       direction,
       startId,
       endId,
+      newParentId,
+      newIndex,
+      stepsId,
     })
     .then((resp) => {
       if (resp.code === 2000) {
@@ -117,26 +142,28 @@ const remove = (e) => {
  * 拷贝步骤的方法
  * @param {*} id  步骤id
  * @param {*} toLast 是否复制到最后一行
- */ 
- const copyStep = (id, toLast) => {
+ */
+const copyStep = (id, toLast) => {
   emit('copyStep', id, toLast);
 };
 /**
  * 添加步骤到特定位置的方法
  * @param {*} id         点选的位置
  * @param {*} toNext     true添加到下一行，false添加到上一行
  */
- const addStepTotarget = (id, toNext) => {
+const addStepTotarget = (id, toNext) => {
   emit('addStepTotarget', id, toNext);
 };
 </script>
 
 <template>
   <el-scrollbar style="height: 100%">
-    <el-timeline v-if="steps.length > 0" class="stepsTimeline">
+    <el-timeline class="stepsTimeline">
+      <!-- 设置group，这样同名的group之间就可以互相拖拽 -->
       <VueDraggableNext
         tag="div"
         :list="steps"
+        group="case-step"
         handle=".handle"
         animation="200"
         force-fallback="true"
@@ -241,6 +268,7 @@ const remove = (e) => {
             </template>
             <step-draggable
               :steps="s['childSteps']"
+              :parent-id="s['id']"
               @setParent="setParent"
               @addStep="addStep"
               @flush="emit('flush')"
@@ -279,7 +307,6 @@ const remove = (e) => {
                   <Edit />
                 </el-icon>
               </el-button>
-
               <!--添加操作的按钮-->
               <el-popconfirm
                 v-if="s.parentId === 0 && !isEdit"
@@ -300,7 +327,7 @@ const remove = (e) => {
                     </el-icon>
                   </el-button>
                 </template>
-            </el-popconfirm>
+              </el-popconfirm>
 
               <!--复制操作的按钮-->
               <el-popconfirm
@@ -362,7 +389,10 @@ const remove = (e) => {
         </el-timeline-item>
       </VueDraggableNext>
     </el-timeline>
-    <el-empty v-else :description="$t('steps.empty')"></el-empty>
+    <el-empty
+      v-if="steps.length === 0"
+      :description="$t('steps.empty')"
+    ></el-empty>
   </el-scrollbar>
 </template>
 

src/components/StepList.vue

@@ -43,26 +43,26 @@ const addStep = () => {
 const addStepTotarget = (id, toNext) => {
   dialogVisible.value = true;
   addToTargetStepId.value = id;
-  addToTargetStepNext.value = toNext
+  addToTargetStepNext.value = toNext;
 };
 const flush = () => {
   if (addToTargetStepId.value > 0) {
     // 需要将新增的步骤挪动到目标行的上面或下面
     axios
-    .get('/controller/steps/stepSortTarget', {
-      params: {
-        targetStepId: addToTargetStepId.value,
-        addToTargetNext: addToTargetStepNext.value,
-      },
-    })
-    .then((resp) => {
-      if (resp.code === 2000) {
-        dialogVisible.value = false;
-        addToTargetStepNext.value = false;
-        addToTargetStepId.value = 0;
-        getStepsList();
-      }
-    });
+      .get('/controller/steps/stepSortTarget', {
+        params: {
+          targetStepId: addToTargetStepId.value,
+          addToTargetNext: addToTargetStepNext.value,
+        },
+      })
+      .then((resp) => {
+        if (resp.code === 2000) {
+          dialogVisible.value = false;
+          addToTargetStepNext.value = false;
+          addToTargetStepId.value = 0;
+          getStepsList();
+        }
+      });
   } else {
     dialogVisible.value = false;
     getStepsList();
@@ -149,7 +149,7 @@ const copyStep = (id, toLast) => {
     .get('/controller/steps/copy/steps', {
       params: {
         id,
-        toLast
+        toLast,
       },
     })
     .then((resp) => {
@@ -233,8 +233,10 @@ onMounted(() => {
       }}</el-button>
     </el-button-group>
   </div>
+  <!-- 第一层所有步骤的parentId都是0 -->
   <step-draggable
     :steps="steps"
+    :parent-id="0"
     @setParent="setParent"
     @addStep="addStep"
     @flush="flush"