前端UI实现在当前行的下方复制步骤的能力

EricJin-git · Sep 4, 2023 · c0c770d · c0c770d
1 parent 7c33af9
commit c0c770d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/src/components/StepDraggable.vue b/src/components/StepDraggable.vue
@@ -113,8 +113,13 @@ 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);
 };
 </script>
 
@@ -266,16 +271,28 @@ const copyStep = (id) => {
  <Edit />
  </el-icon>
  </el-button>
- <el-button
- circle
- type="primary"
- size="mini"
- @click="copyStep(s.id)"
+
+ <!--复制操作的按钮-->
+ <el-popconfirm
+ 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)"
  >
- <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">
+ <CopyDocument />
+ </el-icon>
+ </el-button>
+ </template>
+ </el-popconfirm>
+
  <el-button class="handle" circle size="mini">
  <el-icon :size="13" style="vertical-align: middle">
  <Rank />

diff --git a/src/components/StepList.vue b/src/components/StepList.vue
@@ -116,11 +116,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) => {

diff --git a/src/locales/lang/zh_CN.js b/src/locales/lang/zh_CN.js
@@ -104,7 +104,9 @@ const steps = {
  loading: '加载中',
  loadDone: '加载完毕',
  loadMore: '加载更多',
-
+ copyStepTips: '确定复制该步骤吗？点击周围空白处取消',
+ copyToNextLine: '复制到当前行',
+ copyToLastLine: '复制到最后行',
 };
 const code = {
  placeholder: '请选择',