From e4c9808aa731fc7afd88b280ba09ae8559196949 Mon Sep 17 00:00:00 2001 From: v_xugzhou <941071842@qq.com> Date: Mon, 14 Oct 2024 15:07:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95=E4=BB=BB=E5=8A=A1?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96=E6=96=B9?= =?UTF-8?q?=E6=A1=88=20--story=3D119022030=20#=20Reviewed,=20transaction?= =?UTF-8?q?=20id:=2021232?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/RenderForm/formMixins.js | 4 +- frontend/src/config/i18n/cn.js | 13 +- frontend/src/config/i18n/en.js | 13 +- .../views/template/TemplateMock/Header.vue | 51 ++- .../MockExecute/components/DiffDialog.vue | 146 ++++++++ .../MockExecute/components/MockRecode.vue | 338 ++++++++++++++++++ .../TemplateMock/MockExecute/index.vue | 223 +++++++----- .../src/views/template/TemplateMock/index.vue | 14 +- 8 files changed, 700 insertions(+), 102 deletions(-) create mode 100644 frontend/src/views/template/TemplateMock/MockExecute/components/DiffDialog.vue create mode 100644 frontend/src/views/template/TemplateMock/MockExecute/components/MockRecode.vue diff --git a/frontend/src/components/common/RenderForm/formMixins.js b/frontend/src/components/common/RenderForm/formMixins.js index a8f37ec..69be3ff 100644 --- 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 index c483898..74c06fc 100644 --- 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 index f5fc7b0..30ffaa8 100644 --- 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 index af70c5e..cd1809d 100644 --- 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" /> {{ mockStep === 'setting' ? $t('流程调试') : $t('调试执行') }} - {{ headerLabel }} + {{ name }} +
+ diff --git a/frontend/src/views/template/TemplateMock/MockExecute/components/MockRecode.vue b/frontend/src/views/template/TemplateMock/MockExecute/components/MockRecode.vue new file mode 100644 index 0000000..82c768a --- /dev/null +++ b/frontend/src/views/template/TemplateMock/MockExecute/components/MockRecode.vue @@ -0,0 +1,338 @@ + + + + +./DiffDialog.vue diff --git a/frontend/src/views/template/TemplateMock/MockExecute/index.vue b/frontend/src/views/template/TemplateMock/MockExecute/index.vue index 1f7f6f2..f426922 100644 --- a/frontend/src/views/template/TemplateMock/MockExecute/index.vue +++ b/frontend/src/views/template/TemplateMock/MockExecute/index.vue @@ -2,84 +2,93 @@
-
-
-

- {{ $t('填写调试入参') }} -

- -
-
-

- {{ $t('选择 Mock 数据') }} -

- - + + +
+
+
+ + {{ $t('执行') }} + + + {{ $t('取消') }} +
-
- - {{ $t('执行') }} - - - {{ $t('取消') }} - -
+
@@ -87,13 +96,15 @@ import { mapActions } from 'vuex'; import tools from '@/utils/tools'; import TaskParamEdit from './components/TaskParamEdit.vue'; + import MockRecode from './components/MockRecode.vue'; export default { name: 'MockExecute', components: { TaskParamEdit, + MockRecode, }, props: { - headerLabel: { + mockTaskName: { type: String, default: '', }, @@ -173,8 +184,34 @@ this.isLoading = false; } }, + updateFormData(data) { + const { constants, mock_data_ids } = data; + + Object.entries(mock_data_ids).forEach(([key, value]) => { + const isMockExist = this.mockDataList[key]?.some(item => item.id === value); + if (key in this.mockFormData && isMockExist) { + this.mockFormData[key] = value; + } + }); + + const { taskParamEdit: paramEditComp } = this.$refs; + if (!paramEditComp) return; + + paramEditComp.renderData = Object.keys(constants).reduce((acc, key) => { + if (key in paramEditComp.renderData) { + acc[key] = constants[key].value; + } + return acc; + }, {}); + + this.$bkMessage({ + message: this.$t('复用成功'), + theme: 'success', + }); + }, async onCreateTask() { try { + if (!this.mockTaskName) return; const { taskParamEdit: paramEditComp, mockForm } = this.$refs; let validate = true; if (paramEditComp) { @@ -195,11 +232,16 @@ acc.nodes.push(cur); const mockInfo = this.mockDataList.find(item => item.id === value); acc.outputs[cur] = mockInfo ? mockInfo.data : {}; + acc.mock_data_ids[cur] = value; } return acc; - }, { nodes: [], outputs: {} }); + }, { + nodes: [], + outputs: {}, + mock_data_ids: {}, + }); const params = { - name: this.headerLabel, + name: this.mockTaskName, pipeline_tree: pipelineTree, mock_data: mockData, creator: this.creator, @@ -251,13 +293,17 @@ .mock-execute { flex: 1; display: flex; - flex-direction: column; max-height: calc(100% - 60px); background: #f5f7fa; - .form-wrapper { + .left-wrapper { flex: 1; - padding: 24px 270px; + display: flex; + flex-direction: column; + margin: 24px; + } + .form-wrapper { overflow-y: auto; + position: relative; @include scrollbar; .wrap-title { font-size: 14px; @@ -267,13 +313,18 @@ margin-bottom: 16px; } .variable-wrap { + height: 800px; padding: 16px 24px; margin-bottom: 16px; background: #fff; + box-shadow: 0 2px 4px 0 #1919290d; } .mock-wrap { + height: 600px; padding: 16px 24px; + margin-bottom: 4px; background: #fff; + box-shadow: 0 2px 4px 0 #1919290d; .bk-form { margin-bottom: 16px; } @@ -319,14 +370,12 @@ } } .action-wrapper { - height: 48px; - z-index: 2; - padding-left: 270px; - background: #fafbfd; - box-shadow: 0 -1px 0 0 #dcdee5; + position: sticky; + bottom: 0; + padding-top: 20px; + background: #f5f7fa; .bk-button { width: 88px; - margin-top: 8px; } } } diff --git a/frontend/src/views/template/TemplateMock/index.vue b/frontend/src/views/template/TemplateMock/index.vue index a369d38..9e1c35f 100644 --- a/frontend/src/views/template/TemplateMock/index.vue +++ b/frontend/src/views/template/TemplateMock/index.vue @@ -4,11 +4,12 @@ class="template-mock">
@@ -49,7 +50,7 @@ !item.optional); return hasSelected; }, - headerLabel() { - if (this.mockStep === 'setting') { - return this.tplName; - } - const nowTime = moment(new Date()).format('YYYYMMDDHHmmss'); - return `${this.tplName}_${this.$t('调试任务')}_${nowTime}`; - }, }, watch: { '$route.params': {