From 373b80c3796008108467b3327bc8e23bb7ff98a6 Mon Sep 17 00:00:00 2001
From: YeungHoiChiu <1005935991@qq.com>
Date: Mon, 24 Jun 2024 15:16:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E6=AD=A5=E9=AA=A4?=
=?UTF-8?q?=E5=88=86=E7=BB=84=E8=87=AA=E7=94=B1=E6=8B=96=E6=8B=BD=EF=BC=8C?=
=?UTF-8?q?#287?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/StepDraggable.vue | 62 +++++++++++++++++++++++---------
src/components/StepList.vue | 34 +++++++++---------
2 files changed, 64 insertions(+), 32 deletions(-)
diff --git a/src/components/StepDraggable.vue b/src/components/StepDraggable.vue
index f6c3c3d2..83269a57 100644
--- a/src/components/StepDraggable.vue
+++ b/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 thisSort = 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;
+ thisSort = props.steps[e.added.newIndex].sort;
+ // 此场景中下面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,
+ thisSort,
})
.then((resp) => {
if (resp.code === 2000) {
@@ -117,8 +142,8 @@ const remove = (e) => {
* 拷贝步骤的方法
* @param {*} id 步骤id
* @param {*} toLast 是否复制到最后一行
- */
- const copyStep = (id, toLast) => {
+ */
+const copyStep = (id, toLast) => {
emit('copyStep', id, toLast);
};
/**
@@ -126,17 +151,19 @@ const remove = (e) => {
* @param {*} id 点选的位置
* @param {*} toNext true添加到下一行，false添加到上一行
*/
- const addStepTotarget = (id, toNext) => {
+const addStepTotarget = (id, toNext) => {
emit('addStepTotarget', id, toNext);
};
-
+
+
{
{
-
{
-
+
{
-
+
diff --git a/src/components/StepList.vue b/src/components/StepList.vue
index ba997321..2a91eb18 100644
--- a/src/components/StepList.vue
+++ b/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(() => {
}}
+