Merge pull request #56 from ywywZhou/mock_interaction_bugfix

fix: 调试任务交互验收问题修复 --story=120517052
TencentBlueKing · Nov 7, 2024 · f098b7e · f098b7e
2 parents 38a2a31 + 2e9c0aa
commit f098b7e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 82 deletions.
diff --git a/frontend/src/views/template/TemplateMock/MockExecute/components/DiffDialog.vue b/frontend/src/views/template/TemplateMock/MockExecute/components/DiffDialog.vue
@@ -32,18 +32,10 @@
           <tr
             v-for="(item, index) in diffList"
             :key="index">
-            <template v-if="item.isConstants">
-              <td>{{ item.left.name || '--' }}</td>
-              <td :class="{ 'is-deleted': !item.right.name, 'is-extra': !item.left.name }">
-                {{ item.right.name || '--' }}
-              </td>
-            </template>
-            <template v-else>
-              <td>{{ item.left.name ? `${item.left.node_name}: ${item.left.name}` : '--' }}</td>
-              <td :class="{ 'is-deleted': !item.right.name, 'is-extra': !item.left.name }">
-                {{ getTdName(item.right) }}
-              </td>
-            </template>
+            <td>{{ item.left.name ? `${item.left.node_name}: ${item.left.name}` : '--' }}</td>
+            <td style="background: #FFEEEE;">
+              {{ `${item.right.node_name}: ID 为 【${item.right.id}】 的 mock 方案不存在` }}
+            </td>
           </tr>
         </tbody>
       </table>
@@ -63,18 +55,6 @@
         default: () => ([]),
       },
     },
-    data() {
-      return {
-
-      };
-    },
-    methods: {
-      getTdName(data) {
-        let name = data.name ? `${data.node_name}: ${data.name}` : `${data.node_name}: ID 为 【${data.id}】 的 mock 方案不存在`;
-        name = !data.node_name ? '--' : name;
-        return name;
-      },
-    },
   };
 </script>
 <style lang="scss">

diff --git a/frontend/src/views/template/TemplateMock/MockExecute/components/MockRecode.vue b/frontend/src/views/template/TemplateMock/MockExecute/components/MockRecode.vue
@@ -129,54 +129,36 @@
           // 新旧diff
           const { constants } = resp1.pipeline_tree;
           const { mock_data_ids } = resp2.data;
-          const diffList = this.getDiffList(constants, mock_data_ids);
-
+          const diffList = this.getDiffList(mock_data_ids);
+          this.recodeData = { constants, mock_data_ids };
 
           if (!diffList.length) {
-            this.$bkMessage({
-              message: this.$t('复用成功'),
-              theme: 'success',
-            });
+            this.onConfirmReuse();
             return;
           }
 
           this.diffList = diffList;
           this.isDiffDialogShow = !!diffList.length;
-          this.recodeData = { constants, mock_data_ids };
         } catch (error) {
           console.warn(error);
         }
       },
-      getDiffList(constants, mockIds) {
-        // 复用的变量
-        const oldConstants = this.filterConstants(constants);
-        // 当前的变量
-        const { taskParamEdit: paramEditComp } = this.$parent.$refs;
-        let newConstants = paramEditComp ? paramEditComp.renderData : {};
-        newConstants = this.filterConstants(this.constants);
-
-        // constants diff
-        const keys = [...new Set([...Object.keys(oldConstants), ...Object.keys(newConstants)])];
-        let diffList = keys.reduce((acc, key) => {
-          // 如果该变量有一方没有则记录下来
-          if (newConstants[key] && oldConstants[key]) return acc;
-          acc.push({
-            isConstants: true,
-            left: newConstants[key] || {},
-            right: oldConstants[key] || {},
-          });
-          return acc;
-        }, []);
-
+      getDiffList(mockIds) {
         // mock diff
         const oldMock = mockIds;
         const newMock = this.mockFormData;
-        const nodeIds = [...new Set([...Object.keys(oldMock), ...Object.keys(newMock)])];
-        diffList = nodeIds.reduce((acc, nodeId) => {
+        const diffList = Object.keys(newMock).reduce((acc, nodeId) => {
           const nodeName = this.activities[nodeId]?.name;
-          if (!nodeName) return acc;
-
           let mockId = 0;
+
+          // 只记录历史mock方案不存在的diff
+          mockId = oldMock[nodeId];
+          if (!mockId || mockId === -1) return acc;
+          const isExist = this.nodeMockMap[nodeId].some(item => item.id === mockId);
+          if (isExist) return acc;
+
+          // right
+          const right = { id: mockId, node_name: nodeName };
           // left
           let left = {};
           mockId = newMock[nodeId];
@@ -186,39 +168,17 @@
             const mockInfo = this.nodeMockMap[nodeId].find(item => item.id === mockId);
             left = { ...mockInfo, node_name: nodeName };
           }
-          // right
-          let right = {};
-          mockId = oldMock[nodeId];
-          if (mockId === -1) {
-            left = { name: '无需Mock，真执行', node_name: nodeName };
-          } else if (mockId && this.nodeMockMap[nodeId]) {
-            const mockInfo = this.nodeMockMap[nodeId].find(item => item.id === mockId) || { id: mockId };
-            right = { ...mockInfo, node_name: nodeName };
-          }
-
-          // 如果新旧的mock方案都存在，则不算入diff
-          if (left.name && right.name) return acc;
 
           acc.push({
-            isMock: true,
             left,
             right,
           });
 
           return acc;
-        }, diffList);
+        }, []);
 
         return diffList;
       },
-      filterConstants(constants) {
-        return Object.keys(constants).reduce((acc, key) => {
-          const value = constants[key];
-          if (value.show_type === 'show') {
-            acc[key] = value;
-          }
-          return acc;
-        }, {});
-      },
       onConfirmReuse() {
         this.$emit('change', this.recodeData);
         this.isDiffDialogShow = false;

diff --git a/frontend/src/views/template/TemplateMock/MockExecute/index.vue b/frontend/src/views/template/TemplateMock/MockExecute/index.vue
@@ -188,7 +188,7 @@
         const { constants, mock_data_ids } = data;
 
         Object.entries(mock_data_ids).forEach(([key, value]) => {
-          const isMockExist = this.mockDataList[key]?.some(item => item.id === value);
+          const isMockExist = this.mockDataList.some(item => item.id === value && item.node_id === key);
           if (key in this.mockFormData && isMockExist) {
             this.mockFormData[key] = value;
           }
@@ -302,6 +302,9 @@
     margin: 24px;
   }
   .form-wrapper {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
     overflow-y: auto;
     position: relative;
     @include scrollbar;
@@ -313,14 +316,14 @@
       margin-bottom: 16px;
     }
     .variable-wrap {
-      height: 800px;
+      flex: 1;
       padding: 16px 24px;
       margin-bottom: 16px;
       background: #fff;
       box-shadow: 0 2px 4px 0 #1919290d;
     }
     .mock-wrap {
-      height: 600px;
+      flex: 1;
       padding: 16px 24px;
       margin-bottom: 4px;
       background: #fff;