fix: add beauty child step show

SonicCloudOrg · Feb 10, 2023 · b3f50c2 · b3f50c2
1 parent d7b8619
commit b3f50c2
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 31 deletions.
diff --git a/src/components/ChildStepListView.vue b/src/components/ChildStepListView.vue
@@ -0,0 +1,59 @@
+<script setup>
+/*
+ *   sonic-client-web  Front end of Sonic cloud real machine platform.
+ *   Copyright (C) 2022 SonicCloudOrg
+ *
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU Affero General Public License as published
+ *   by the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU Affero General Public License for more details.
+ *
+ *   You should have received a copy of the GNU Affero General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useI18n } from 'vue-i18n';
+import StepShow from './StepShow.vue';
+
+const { t: $t } = useI18n();
+const props = defineProps({
+  steps: Array,
+});
+</script>
+
+<template>
+  <el-timeline v-if="steps.length > 0" style="padding: 10px 0 10px 20px">
+    <el-timeline-item
+      v-for="(s, index) in steps"
+      :key="index"
+      :timestamp="
+        '步骤' +
+        (index + 1) +
+        '  - 所属用例：' +
+        (s.caseId === 0 ? $t('common.null') : s.caseId)
+      "
+      placement="top"
+      :type="
+        s['error'] === 1 ? 'primary' : s['error'] === 2 ? 'warning' : 'danger'
+      "
+      style="padding-bottom: 5px !important"
+      :hollow="true"
+    >
+      <el-card v-if="s.conditionType !== 0">
+        <template #header>
+          <step-show :step="s"></step-show>
+        </template>
+        <child-step-list-view :steps="s['childSteps']" />
+      </el-card>
+      <div v-else style="display: flex; justify-content: space-between">
+        <step-show :step="s"></step-show>
+      </div>
+    </el-timeline-item>
+  </el-timeline>
+  <el-empty v-else description="暂无步骤"></el-empty>
+</template>
diff --git a/src/components/StepShow.vue b/src/components/StepShow.vue
@@ -20,14 +20,20 @@
 import { ElMessage } from 'element-plus';
 import { useRoute } from 'vue-router';
 import { Edit } from '@element-plus/icons';
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
 import CodeEditor from './CodeEditor.vue';
 import axios from '../http/axios';
+import ChildStepListView from './ChildStepListView.vue';
 
+const { t: $t } = useI18n();
 const route = useRoute();
 const props = defineProps({
   step: Object,
 });
 
+const childStep = ref([]);
+
 const summitStep = () => {
   axios.put('/controller/steps', props.step).then((resp) => {
     if (resp.code === 2000) {
@@ -37,6 +43,16 @@ const summitStep = () => {
     }
   });
 };
+
+const getPublicStepInfo = (id) => {
+  axios.get('/controller/publicSteps', { params: { id } }).then((resp) => {
+    if (resp.code === 2000) {
+      if (resp.data.steps) {
+        childStep.value = resp.data.steps;
+      }
+    }
+  });
+};
 </script>
 
 <template>
@@ -440,6 +456,17 @@ const summitStep = () => {
     <el-tag type="info" size="small" style="margin-left: 10px">{{
       step.content
     }}</el-tag>
+    <el-popover placement="bottom" :width="700" trigger="click">
+      <child-step-list-view :steps="childStep" />
+      <template #reference>
+        <el-button
+          style="margin-left: 10px"
+          size="mini"
+          @click="getPublicStepInfo(step.text)"
+          >{{ $t('publicStepTS.viewSteps') }}</el-button
+        >
+      </template>
+    </el-popover>
   </span>
   <span v-if="step.stepType === 'monkey'">
     <el-tag style="margin-right: 10px" type="warning" size="small"

diff --git a/src/views/PublicStep.vue b/src/views/PublicStep.vue
@@ -6,7 +6,7 @@ import { useI18n } from 'vue-i18n';
 import PublicStepUpdate from '../components/PublicStepUpdate.vue';
 import Pageable from '../components/Pageable.vue';
 import axios from '../http/axios';
-import StepShow from '../components/StepShow.vue';
+import ChildStepListView from '../components/ChildStepListView.vue';
 
 const { t: $t } = useI18n();
 
@@ -128,36 +128,8 @@ onMounted(() => {
       align="center"
     >
       <template #default="scope">
-        <el-popover placement="left" :width="500" trigger="click">
-          <el-table :data="scope.row.steps" border max-height="350">
-            <el-table-column
-              width="80"
-              :label="$t('publicStepTS.stepId')"
-              prop="id"
-              align="center"
-              show-overflow-tooltip
-            />
-            <el-table-column
-              width="90"
-              :label="$t('publicStepTS.useCase')"
-              align="center"
-            >
-              <template #default="scope">
-                <el-tag v-if="scope.row.caseId === 0" size="mini">{{
-                  $t('common.null')
-                }}</el-tag>
-                <span v-else>{{ scope.row.caseId }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="$t('publicStepTS.stepInfo')"
-              header-align="center"
-            >
-              <template #default="scope">
-                <step-show :step="scope.row" />
-              </template>
-            </el-table-column>
-          </el-table>
+        <el-popover placement="left" :width="700" trigger="click">
+          <child-step-list-view :steps="scope.row.steps" />
           <template #reference>
             <el-button size="mini">{{
               $t('publicStepTS.viewSteps')