Merge pull request #265 from caofengbin/feature/支持从任意行添加或复制步骤

feat:支持从任意行添加或复制步骤

Author: ZhouYixun

src/components/StepDraggable.vue

@@ -113,8 +113,21 @@ const remove = (e) => {
   emit('remove', e);
 };
 
-const copyStep = (id) => {
-  emit('copyStep', id);
+/**
+ * 拷贝步骤的方法
+ * @param {*} id  步骤id
+ * @param {*} toLast 是否复制到最后一行
+ */ 
+ const copyStep = (id, toLast) => {
+  emit('copyStep', id, toLast);
+};
+/**
+ * 添加步骤到特定位置的方法
+ * @param {*} id         点选的位置
+ * @param {*} toNext     true添加到下一行，false添加到上一行
+ */
+ const addStepTotarget = (id, toNext) => {
+  emit('addStepTotarget', id, toNext);
 };
 </script>
 
@@ -241,7 +254,7 @@ const copyStep = (id) => {
             <div
               style="
                 float: right;
-                flex: 0 0 205px;
+                flex: 0 0 245px;
                 text-align: right;
                 margin-right: 12px;
               "
@@ -266,16 +279,51 @@ const copyStep = (id) => {
                   <Edit />
                 </el-icon>
               </el-button>
-              <el-button
-                circle
-                type="primary"
-                size="mini"
-                @click="copyStep(s.id)"
+              
+              <!--添加操作的按钮-->
+              <el-popconfirm
+                v-if="s.parentId === 0 && !isEdit"
+                style="margin-left: 10px"
+                :confirm-button-text="$t('steps.addToNextLine')"
+                :cancel-button-text="$t('steps.addToBeforeLine')"
+                confirm-button-type="text"
+                icon="el-icon-warning"
+                icon-color="green"
+                :title="$t('steps.addStepTips')"
+                @confirm="addStepTotarget(s.id, true)"
+                @cancel="addStepTotarget(s.id, false)"
               >
-                <el-icon :size="13" style="vertical-align: middle">
-                  <CopyDocument />
-                </el-icon>
-              </el-button>
+                <template #reference>
+                  <el-button circle type="primary" size="mini">
+                    <el-icon :size="13" style="vertical-align: middle">
+                      <DocumentAdd />
+                    </el-icon>
+                  </el-button>
+                </template>
+            </el-popconfirm>
+
+              <!--复制操作的按钮-->
+              <el-popconfirm
+                v-if="!isEdit"
+                style="margin-left: 10px"
+                :confirm-button-text="$t('steps.copyToLastLine')"
+                :cancel-button-text="$t('steps.copyToNextLine')"
+                confirm-button-type="text"
+                icon="el-icon-warning"
+                icon-color="green"
+                :title="$t('steps.copyStepTips')"
+                @confirm="copyStep(s.id, true)"
+                @cancel="copyStep(s.id, false)"
+              >
+                <template #reference>
+                  <el-button circle type="primary" size="mini">
+                    <el-icon :size="13" style="vertical-align: middle">
+                      <CopyDocument />
+                    </el-icon>
+                  </el-button>
+                </template>
+              </el-popconfirm>
+
               <el-button class="handle" circle size="mini">
                 <el-icon :size="13" style="vertical-align: middle">
                   <Rank />

src/components/StepList.vue

@@ -19,6 +19,8 @@ const props = defineProps({
 const emit = defineEmits(['runStep']);
 const dialogVisible = ref(false);
 const stepId = ref(0);
+const addToTargetStepId = ref(0);
+const addToTargetStepNext = ref(false);
 const parentId = ref(0);
 watch(dialogVisible, (newValue, oldValue) => {
   if (!newValue) {
@@ -33,12 +35,38 @@ const editStep = async (id) => {
 const setParent = (id) => {
   parentId.value = id;
 };
+// 条件语句中的添加步骤方法
 const addStep = () => {
   dialogVisible.value = true;
 };
+// 普通类型中的添加步骤方法
+const addStepTotarget = (id, toNext) => {
+  dialogVisible.value = true;
+  addToTargetStepId.value = id;
+  addToTargetStepNext.value = toNext
+};
 const flush = () => {
-  dialogVisible.value = false;
-  getStepsList();
+  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();
+      }
+    });
+  } else {
+    dialogVisible.value = false;
+    getStepsList();
+  }
 };
 const deleteStep = (id) => {
   axios
@@ -116,11 +144,12 @@ const getStepsList = () => {
 const runStep = () => {
   emit('runStep');
 };
-const copyStep = (id) => {
+const copyStep = (id, toLast) => {
   axios
     .get('/controller/steps/copy/steps', {
       params: {
         id,
+        toLast
       },
     })
     .then((resp) => {
@@ -212,5 +241,6 @@ onMounted(() => {
     @editStep="editStep"
     @copyStep="copyStep"
     @deleteStep="deleteStep"
+    @addStepTotarget="addStepTotarget"
   />
 </template>

src/locales/lang/en_US.js

@@ -109,6 +109,12 @@ const steps = {
   loading: 'Loading',
   loadDone: 'Load completed',
   loadMore: 'Load more',
+  copyStepTips: 'Are you sure you want to replicate this step? Click on the surrounding space to cancel',
+  copyToNextLine: 'copy to current line',
+  copyToLastLine: 'copy to last line',
+  addStepTips: 'Select the location to add the step and click on the surrounding space to cancel.',
+  addToNextLine: 'add to next line',
+  addToBeforeLine: 'add to previous line',
 };
 const code = {
   placeholder: 'Please choose language',

src/locales/lang/ja_JP.js

@@ -104,6 +104,12 @@ const steps = {
   loading: '加载中',
   loadDone: '加载完毕',
   loadMore: '加载更多',
+  copyStepTips: '确定复制该步骤吗？点击周围空白处取消',
+  copyToNextLine: '复制到当前行',
+  copyToLastLine: '复制到最后行',
+  addStepTips: '选择添加步骤的位置，点击周围空白处取消',
+  addToNextLine: '添加到下一行',
+  addToBeforeLine: '添加到上一行',
 };
 const code = {
   placeholder: '请选择',

src/locales/lang/zh_CN.js

@@ -104,7 +104,12 @@ const steps = {
   loading: '加载中',
   loadDone: '加载完毕',
   loadMore: '加载更多',
-
+  copyStepTips: '确定复制该步骤吗？点击周围空白处取消',
+  copyToNextLine: '复制到当前行',
+  copyToLastLine: '复制到最后行',
+  addStepTips: '选择添加步骤的位置，点击周围空白处取消',
+  addToNextLine: '添加到下一行',
+  addToBeforeLine: '添加到上一行',
 };
 const code = {
   placeholder: '请选择',

src/locales/lang/zh_TW.js

@@ -104,6 +104,12 @@ const steps = {
   loading: '加载中',
   loadDone: '加载完毕',
   loadMore: '加载更多',
+  copyStepTips: '确定复制该步骤吗？点击周围空白处取消',
+  copyToNextLine: '复制到当前行',
+  copyToLastLine: '复制到最后行',
+  addStepTips: '选择添加步骤的位置，点击周围空白处取消',
+  addToNextLine: '添加到下一行',
+  addToBeforeLine: '添加到上一行',
 };
 const code = {
   placeholder: '请选择',