TencentBlueKing · luofann · Oct 18, 2024 · Oct 14, 2024
diff --git a/frontend/src/components/common/RenderForm/formMixins.js b/frontend/src/components/common/RenderForm/formMixins.js
@@ -229,7 +229,9 @@ export const getFormMixins = (attrs = {}) => {
               let valueEmpty = false;
               if (valueType === 'Object') {
                 valueEmpty = !Object.keys(value).length;
-              } else if (valueType === 'String' || valueType === 'Array') {
+              } else if (valueType === 'Array') {
+                valueEmpty = !value.filter(item => item).length;
+              } else if (valueType === 'String') {
                 valueEmpty = !value.length;
               } else if (valueType === 'Number') {
                 valueEmpty = !value.toString();

diff --git a/frontend/src/config/i18n/cn.js b/frontend/src/config/i18n/cn.js
@@ -373,7 +373,7 @@ const cn = {
   关联流程: '关联流程',
   描述: '描述',
   规则配置: '规则配置',
-  需保证有且仅有一条规则被命中: '需保证有且仅有一条规则被命中',
+  'Unique：需保证有且仅有一条规则被命中': 'Unique：需保证有且仅有一条规则被命中',
   '该决策表已被流程中的节点引用，仅支持修改规则，不支持修改字段(修改字段需要修改节点引用后重新保存流程)。': '该决策表已被流程中的节点引用，仅支持修改规则，不支持修改字段(修改字段需要修改节点引用后重新保存流程)。',
   '{0}成功': '{0}成功',
   新建: '新建',
@@ -908,6 +908,17 @@ const cn = {
   天: '天 | {n} 天 | {n} 天',
   新建全局变量: '新建全局变量',
   error_handle_秒: '秒',
+  流程的入参: '流程的入参',
+  scopeType: '指对应资源在接入平台所属的作用域范围的类型。如该资源属于业务 1，则该字段的值可设为"project"。',
+  scopeValue: '指对应资源在接入平台所属的作用域范围的值。如该资源属于业务1，则该字段的值可设为"1"。',
+  名字: '名字',
+  mockReuseTips: '部分变量、Mock 方案已发生变化，继续操作将{0}以下不匹配的数据：',
+  忽略: '忽略',
+  继续复用: '继续复用',
+  '调试数据已发生变化，请确认是否继续复用': '调试数据已发生变化，请确认是否继续复用',
+  当前调试任务: '当前调试任务',
+  待复用调试任务: '待复用调试任务',
+  复用成功: '复用成功',
 };
 
 export default cn;
diff --git a/frontend/src/config/i18n/en.js b/frontend/src/config/i18n/en.js
@@ -373,7 +373,7 @@ const en = {
   关联流程: 'Related Process',
   描述: 'Description',
   规则配置: 'Rule Configuration',
-  需保证有且仅有一条规则被命中: 'Ensure that one and only one rule is hit',
+  'Unique：需保证有且仅有一条规则被命中': 'Unique: Ensure that one and only one rule is hit',
   '该决策表已被流程中的节点引用，仅支持修改规则，不支持修改字段(修改字段需要修改节点引用后重新保存流程)。': 'This decision table is referenced by a node in a process. Only rule modifications are supported, not field modifications (field modifications require updating the node references and saving the process again).',
   '{0}成功': '{0} Successful',
   新建: 'Add',
@@ -908,6 +908,17 @@ const en = {
   天: 'Day | one day | {n} days',
   新建全局变量: 'Add Global Variables',
   error_handle_秒: 'Sec Interval',
+  流程的入参: 'Input Parameters of the Process',
+  scopeType: 'Indicates the type of the scope to which the corresponding resource belongs in the access platform. For example, if the resource belongs to Business 1, the value of this field can be set to "project".',
+  scopeValue: 'Indicates the value of the scope to which the corresponding resource belongs in the access platform. For example, if the resource belongs to Business 1, the value of this field can be set to "1".',
+  名字: 'Name',
+  mockReuseTips: 'Some variables and Mock schemes have changed. Continuing will {0} the following mismatched data:',
+  忽略: 'ignore',
+  继续复用: 'Continue Reuse',
+  '调试数据已发生变化，请确认是否继续复用': 'Debug data has changed, please confirm whether to continue reusing',
+  当前调试任务: 'Current Debug Task',
+  待复用调试任务: 'Pending Reuse Debug Task',
+  复用成功: 'Reuse success',
 };
 
 export default en;
diff --git a/frontend/src/views/template/TemplateMock/Header.vue b/frontend/src/views/template/TemplateMock/Header.vue
@@ -5,7 +5,21 @@
         class="bk-icon icon-arrows-left back-icon"
         @click="onCancelMock" />
       <span class="title">{{ mockStep === 'setting' ? $t('流程调试') : $t('调试执行') }}</span>
-      <span class="template-name">{{ headerLabel }}</span>
+      <span
+        v-if="mockStep === 'setting'"
+        class="template-name">{{ name }}</span>
+      <template v-else>
+        <bk-input
+          v-model="taskName"
+          v-validate="taskNameRule"
+          class="name-input"
+          name="taskName"
+          :maxlength="stringLength.TASK_NAME_MAX_LENGTH"
+          :show-word-limit="true" />
+        <span
+          v-show="veeErrors.has('taskName')"
+          class="common-error-tip">{{ veeErrors.first('taskName') }}</span>
+      </template>
     </div>
     <div
       v-if="mockStep === 'setting'"
@@ -38,10 +52,12 @@
 </template>
 
 <script>
+  import moment from 'moment-timezone';
+  import { STRING_LENGTH, NAME_REG } from '@/constants/index.js';
   export default {
     name: 'TemplateMockHeader',
     props: {
-      headerLabel: {
+      tplName: {
         type: String,
         default: '',
       },
@@ -62,6 +78,33 @@
         default: () => ([]),
       },
     },
+    data() {
+      return {
+        taskName: '',
+        stringLength: STRING_LENGTH,
+        taskNameRule: {
+          required: true,
+          max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
+          regex: NAME_REG,
+        },
+      };
+    },
+    watch: {
+      tplName: {
+        handler(val) {
+          if (this.mockStep === 'setting') {
+            this.taskName = val;
+            return;
+          }
+          const nowTime = moment(new Date()).format('YYYYMMDDHHmmss');
+          this.taskName = `${val}_${this.$t('调试任务')}_${nowTime}`;
+        },
+        immediate: true,
+      },
+      taskName(val) {
+        this.$emit('onChange', val);
+      },
+    },
     methods: {
       // 退出调试
       onCancelMock() {
@@ -123,5 +166,9 @@
       background: #dcdee5;
     }
   }
+  .name-input {
+    width: 320px;
+    margin-left: 16px;
+  }
 }
 </style>
diff --git a/frontend/src/views/template/TemplateMock/MockExecute/components/DiffDialog.vue b/frontend/src/views/template/TemplateMock/MockExecute/components/DiffDialog.vue
@@ -0,0 +1,146 @@
+<template>
+  <bk-dialog
+    :width="480"
+    :value="isDiffDialogShow"
+    :mask-close="false"
+    :auto-close="false"
+    :render-directive="'if'"
+    footer-position="center"
+    :ok-text="$t('继续复用')"
+    ext-cls="common-dialog diff-dialog"
+    @confirm="$emit('confirm')"
+    @cancel="$emit('cancel')">
+    <template slot="header">
+      <div class="warning-icon bk-icon icon-exclamation" />
+      <p>{{ $t('调试数据已发生变化，请确认是否继续复用') }}</p>
+    </template>
+    <template>
+      <i18n
+        tag="div"
+        path="mockReuseTips"
+        class="tips-wrap">
+        <span class="highlight">{{ $t('忽略') }}</span>
+      </i18n>
+      <table class="diff-table">
+        <thead>
+          <tr>
+            <th>{{ $t('当前调试任务') }}</th>
+            <th>{{ $t('待复用调试任务') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <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>
+          </tr>
+        </tbody>
+      </table>
+    </template>
+  </bk-dialog>
+</template>
+<script>
+  export default {
+    name: 'DiffDialog',
+    props: {
+      isDiffDialogShow: {
+        type: Boolean,
+        default: false,
+      },
+      diffList: {
+        type: Array,
+        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-dialog .bk-dialog {
+    .bk-dialog-header {
+      padding: 7px 32px 16px;
+      border-bottom: none;
+    }
+    .warning-icon {
+      display: inline-block;
+      height: 42px;
+      width: 42px;
+      line-height: 42px;
+      margin-bottom: 19px;
+      font-size: 22px;
+      color: #FF9C01;
+      background: #FFE8C3;
+      border-radius: 50%;
+    }
+    .bk-dialog-body {
+      padding: 0 32px;
+      margin-bottom: 12px;
+      .tips-wrap {
+        padding: 12px 16px;
+        background: #F5F6FA;
+        border-radius: 2px;
+        margin-bottom: 12px;
+        .highlight {
+          color: #FF9C01;
+        }
+      }
+      .diff-table {
+        width: 100%;
+        border: 1px solid #dcdee5;
+        border-collapse: collapse;
+        border-radius: 2px;
+        th, td {
+          width: 50%;
+          height: 32px;
+          padding: 5px 16px;
+          font-weight: normal;
+          color: #63656e;
+          border: none;
+          border-bottom: 1px solid #dcdee5;
+          border-right: 1px solid #dcdee5;
+        }
+        th {
+          color: #313238;
+          background: #f0f1f5;
+          text-align: left;
+        }
+        td {
+          font-size: 12px;
+        }
+        .is-deleted {
+          background: #FFEEEE;
+        }
+        .is-extra {
+          background: #F2FFF4;
+        }
+      }
+    }
+    .bk-dialog-footer {
+      padding-bottom: 24px;
+      border-top: none;
+      background: #fff;
+    }
+  }
+</style>