perf: optimization workflow interactive

[wangdan-fit2cloud]

What this PR does / why we need it?

Summary of your change

Please indicate you've done the following:

• Made sure tests are passing and test coverage is added if needed.
• Made sure commit message follow the rule of Conventional Commits specification.
• Considered the docs impact and opened a new docs issue or PR with docs changes if needed.

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

Code Review and Suggestions:

Irregularities and Potential Issues:

1. Variable Naming: cloneWorkFlow appears to be intended to hold a copy of the graph data, but it's not assigned anywhere after initialization.

2. Redundant Logic for Save Check:

   • The logic inside back() that checks changes against getGraphData() is redundant because saveApplication already handles updating only when there are changes.

3. Synchronization Issue: In saveApplication, you're setting loading.value = back || false. If bool is true, loading should reflect this value correctly.

Optimization Suggestions:

1. Use watchEffect() for Graph Data Changes:
   Instead of performing the save operation manually on each change, consider using Vue's reactive watchers to detect graph changes automatically.

   watchEffect(() => {
     if (JSON.stringify(graphData.value) !== JSON.stringify(getGraphData())) {
       // Perform save operations here
       saveApplication(true, true);
     }
   });

   This approach ensures that saving occurs whenever the graph state changes without manual intervention.

2. Remove Redundancy in Click Outside History Functionality:
   Remove unnecessary checks within clickoutsideHistory.

   function clickoutsideHistory() {
     router.push({ path: `/application/${id}/WORK_FLOW/overview` });
   }

By making these optimizations, the code will become more efficient, readable, and maintainable. Additionally, using watchEffect() can simplify error handling related to network requests since Vue handles re-rendering and updates seamlessly during such conditions.

[shaohuzhang1]

The code appears to be well-formed according to ESLint rules. Here are some minor optimizations and improvements:

1. Consistent Indentation: Ensure consistent indentation throughout the code block.

2. Remove Redundant Lines: The hide-required-asterisk attribute is repeated without a reason. Remove it if not needed.

3. Correct Closing Braces: Ensure that all opening braces { have their corresponding closing braces } properly matched.

here's the optimized version of your code:

<template>
  <el-row :gutter="16" justify="space-around">
    <el-col
      v-for="(item, index) in formData.variableList"
      :key="item.id"
      :span="8"
    >
      <el-card shadow="never">
        <el-form-item label="$t('views.applicationWorkflow.variable.label')">
          <!-- Form item contents -->
        </el-form-item>
        <div v-if="... condition...">
          <!-- ... -->
        </div>
        <el-form-item v-else>
          <NodeCascader
            ref="nodeCascaderRef2"
            :nodeModel="nodeModel"
            class="w-full"
            :placeholder="$t('views.applicationWorkflow.variable.placeholder')"
            v-model="item.reference"
          />
        </el-form-item>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import NodeCascader from '@/components/NodeCascader.vue';
import { Plus } from '@element-plus/icons-vue';

const formDa = reactive({
  variableList: [...],
});

function addVariable() {
  // Add logic here
}
</script>

<style lang="scss">
/* Your styles here */
</style>

Key Changes:

• Removed unnecessary lines like ref="replyNodeFormRef" as it seems redundant with other attributes.
• ensured proper spacing around operators where necessary (e.g., after semicolons).
• Fixed any misaligned syntax errors within template loops or conditional statements.

This keeps the code clean and maintainable while adhering to standard coding practices and ESLint conventions.

[shaohuzhang1]

There are several areas in the code that could be improved:

1. Unnecessary Comments and Empty Lines:

   • The empty lines between sections can be removed.
   • Remove unnecessary comments.

2. Duplicate Values:

   • In globalFields, there is duplicate entry for both 'time' with two different labels. These should either have distinct labels or one labeled as appropriate.

3. Variable Naming Convention:

   • Ensure variable names follow consistent naming conventions (e.g., camelCase vs PascalCase).

4. Code Formatting:

   • Consider aligning multi-line strings to maintain consistency.

Here's refactored version of the code:

export const startNode = {
    conditions: [
        { name: 'current_date', fieldNames: ['date'] },
        { name: 'past_dates', fieldNames: ['period'] }
    ],
    globalFields: [
        { label: t('views.applicationWorkflow.nodes.startNode.currentTime'), value: 'time' }, // Use distinct labels if needed
        { label: t('chat.chatId'), value: 'chat_id' }                                                // Rename similar values consistently
    ]
};

This refactoring simplifies the structure while addressing potential duplication and clarity issues. Let me know if you need further adjustments!