From b01759652e59c48cbe62ecd783edc904ee7b80ea Mon Sep 17 00:00:00 2001
From: Luo Fan <44999219+fannluo@users.noreply.github.com>
Date: Tue, 16 Apr 2019 19:18:37 +0800
Subject: [PATCH] =?UTF-8?q?improvement:=20=E6=9B=B4=E6=96=B0elint=E8=A7=84?=
 =?UTF-8?q?=E5=88=99=E5=B7=B2=E7=BB=8F=E7=9B=B8=E5=85=B3=E5=90=88=E6=B3=95?=
 =?UTF-8?q?=E6=80=A7=E4=BF=AE=E6=94=B9=20(#149)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pipeline/blueflow/.eslintrc.js                |  498 ++++-
 pipeline/blueflow/builds/webpack.base.js      |   15 +-
 .../blueflow/builds/webpack.prod.config.js    |    2 +-
 pipeline/blueflow/package.json                |   15 +-
 pipeline/blueflow/postcss.config.js           |    2 +-
 pipeline/blueflow/src/App.vue                 |  177 +-
 pipeline/blueflow/src/api/fileDownload.js     |    7 +-
 pipeline/blueflow/src/api/index.js            |   94 +-
 pipeline/blueflow/src/api/interceptors.js     |    8 +-
 .../common/Individualization/IpLogContent.vue |  166 +-
 .../common/PipelineCanvas/ConfigBar.vue       |  165 +-
 .../common/PipelineCanvas/MenuBar.vue         |  258 +--
 .../common/PipelineCanvas/NodeCanvas.vue      |   10 +-
 .../common/PipelineCanvas/NodeTemplate.vue    |  304 ++-
 .../common/PipelineCanvas/index.vue           |  996 +++++----
 .../common/RenderForm/FormGroup.vue           |  264 +--
 .../components/common/RenderForm/FormItem.vue |  424 ++--
 .../RenderForm/IpSelector/ConditionItem.vue   |  144 +-
 .../RenderForm/IpSelector/DynamicIp.vue       |  194 +-
 .../RenderForm/IpSelector/IpSearchInput.vue   |   54 +-
 .../IpSelector/MultipleIpSelector.vue         |  126 +-
 .../RenderForm/IpSelector/SelectCondition.vue |   98 +-
 .../IpSelector/SingleIpSelector.vue           |   82 +-
 .../common/RenderForm/IpSelector/StaticIp.vue |  327 ++-
 .../IpSelector/StaticIpAddingPanel.vue        |  188 +-
 .../common/RenderForm/IpSelector/index.vue    |  276 ++-
 .../common/RenderForm/RenderForm.vue          |  353 ++--
 .../common/RenderForm/formMixins.js           |    4 +-
 .../common/RenderForm/tags/TagCheckbox.vue    |   80 +-
 .../common/RenderForm/tags/TagDatatable.vue   |  483 +++--
 .../common/RenderForm/tags/TagDatetime.vue    |   51 +-
 .../common/RenderForm/tags/TagInput.vue       |  165 +-
 .../common/RenderForm/tags/TagInt.vue         |   52 +-
 .../common/RenderForm/tags/TagIpSelector.vue  |  184 +-
 .../RenderForm/tags/TagMember_selector.vue    |   41 +-
 .../common/RenderForm/tags/TagPassword.vue    |  121 +-
 .../common/RenderForm/tags/TagRadio.vue       |   72 +-
 .../common/RenderForm/tags/TagSelect.vue      |  317 ++-
 .../common/RenderForm/tags/TagText.vue        |   26 +-
 .../common/RenderForm/tags/TagTextarea.vue    |   61 +-
 .../common/RenderForm/tags/TagTree.vue        |  265 ++-
 .../common/RenderForm/tags/TagUpload.vue      |  202 +-
 .../components/common/base/BaseCheckbox.vue   |   40 +-
 .../components/common/base/BaseCollapse.vue   |   50 +-
 .../src/components/common/base/BaseInput.vue  |   48 +-
 .../src/components/common/base/BaseSearch.vue |   42 +-
 .../src/components/common/base/BaseTitle.vue  |   10 +-
 .../src/components/common/base/NoData.vue     |   31 +-
 .../common/dataTable/DataTablePagination.vue  |  496 ++---
 .../components/common/modal/ErrorCode401.vue  |   28 +-
 .../components/common/modal/ErrorCode403.vue  |   22 +-
 .../components/common/modal/ErrorCode405.vue  |   41 +-
 .../components/common/modal/ErrorCode406.vue  |   37 +-
 .../components/common/modal/ErrorCode407.vue  |   22 +-
 .../components/common/modal/ErrorCode500.vue  |   21 +-
 .../common/modal/ErrorCodeModal.vue           |  116 +-
 .../common/modal/UserLoginModal.vue           |   30 +-
 .../src/components/layout/BizSelector.vue     |  188 +-
 .../src/components/layout/CopyrightFooter.vue |   39 +-
 .../src/components/layout/Navigator.vue       |  461 ++--
 .../components/layout/NotFoundComponent.vue   |   38 +-
 .../src/components/tags/TagTestDatetime.vue   |   40 +-
 pipeline/blueflow/src/config/setting.js       |   14 +-
 pipeline/blueflow/src/constants/index.js      |    2 +-
 pipeline/blueflow/src/directives/index.js     |    2 +-
 pipeline/blueflow/src/main.js                 |    2 -
 .../blueflow/src/mixins/js/analysisMixins.js  |    2 +-
 .../blueflow/src/pages/appmaker/AppCard.vue   |   71 +-
 .../src/pages/appmaker/AppEditDialog.vue      |  277 ++-
 .../src/pages/appmaker/AppTaskHome/index.vue  |  349 ++--
 .../blueflow/src/pages/appmaker/index.vue     |  370 ++--
 pipeline/blueflow/src/pages/audit/index.vue   |  529 +++--
 pipeline/blueflow/src/pages/config/index.vue  |  146 +-
 pipeline/blueflow/src/pages/error/index.vue   |   64 +-
 pipeline/blueflow/src/pages/functor/index.vue |  675 +++---
 .../blueflow/src/pages/home/HomeSummary.vue   |   28 +-
 .../src/pages/home/QuickCreateTask.vue        |  250 ++-
 .../src/pages/home/SelectTemplateDialog.vue   |  186 +-
 .../blueflow/src/pages/home/TaskFeeds.vue     |  204 +-
 .../src/pages/home/TaskPercentChart.vue       |   93 +-
 pipeline/blueflow/src/pages/home/index.vue    |  411 ++--
 .../PeriodicList/DeletePeriodicDialog.vue     |   46 +-
 .../PeriodicList/ModifyPeriodicDialog.vue     |  269 ++-
 .../src/pages/periodic/PeriodicList/index.vue |  452 ++--
 .../blueflow/src/pages/periodic/index.vue     |    8 +-
 .../src/pages/statistics/Appmaker/index.vue   |  735 ++++---
 .../src/pages/statistics/Atom/index.vue       | 1104 +++++-----
 .../src/pages/statistics/Instance/index.vue   | 1108 +++++-----
 .../src/pages/statistics/Template/index.vue   |  959 +++++----
 .../pages/statistics/dataStatistics/index.vue |   96 +-
 .../blueflow/src/pages/statistics/index.vue   |   94 +-
 .../blueflow/src/pages/task/NodePreview.vue   |   98 +-
 .../pages/task/TaskCreate/TaskParamFill.vue   |  476 ++---
 .../pages/task/TaskCreate/TaskSelectNode.vue  | 1198 +++++------
 .../src/pages/task/TaskCreate/index.vue       |  234 +--
 .../pages/task/TaskExecute/ExecuteInfo.vue    |  334 ++-
 .../task/TaskExecute/GatewaySelectDialog.vue  |   56 +-
 .../pages/task/TaskExecute/ModifyParams.vue   |  188 +-
 .../src/pages/task/TaskExecute/ModifyTime.vue |  229 +-
 .../src/pages/task/TaskExecute/NodeTree.vue   |   80 +-
 .../src/pages/task/TaskExecute/RetryNode.vue  |  231 +-
 .../TaskExecute/TaskFunctionalization.vue     |  271 +--
 .../pages/task/TaskExecute/TaskOperation.vue  | 1851 ++++++++---------
 .../src/pages/task/TaskExecute/ViewParams.vue |  221 +-
 .../src/pages/task/TaskExecute/index.vue      |  178 +-
 .../pages/task/TaskExecute/revokeDialog.vue   |   34 +-
 .../pages/task/TaskList/TaskCloneDialog.vue   |   71 +-
 .../src/pages/task/TaskList/index.vue         |  744 ++++---
 .../blueflow/src/pages/task/TaskParamEdit.vue |  277 ++-
 pipeline/blueflow/src/pages/task/TaskStep.vue |  119 +-
 pipeline/blueflow/src/pages/task/index.vue    |    8 +-
 .../template/TemplateEdit/NodeConfig.vue      | 1676 ++++++++-------
 .../template/TemplateEdit/ReuseVarDialog.vue  |  206 +-
 .../TemplateSetting/TabGlobalVariables.vue    |  410 ++--
 .../TemplateSetting/TabLocalDraft.vue         |  165 +-
 .../TemplateSetting/TabTemplateConfig.vue     |  186 +-
 .../TemplateSetting/TemplateSetting.vue       |  243 ++-
 .../TemplateSetting/VariableEdit.vue          |  684 +++---
 .../TemplateSetting/VariableEditDialog.vue    |   58 +-
 .../src/pages/template/TemplateEdit/index.vue | 1560 +++++++-------
 .../TemplateList/AuthorityManageDialog.vue    |  192 +-
 .../TemplateList/ExportTemplateDialog.vue     |  301 ++-
 .../TemplateList/ImportTemplateDialog.vue     | 1015 +++++----
 .../src/pages/template/TemplateList/index.vue |  813 ++++----
 .../blueflow/src/pages/template/index.vue     |    8 +-
 pipeline/blueflow/src/routers/index.js        |    7 +-
 pipeline/blueflow/src/store/index.js          |   23 +-
 .../blueflow/src/store/modules/appmaker.js    |   14 +-
 .../blueflow/src/store/modules/atomForm.js    |    9 +-
 .../blueflow/src/store/modules/atomList.js    |   12 +-
 pipeline/blueflow/src/store/modules/audit.js  |    5 +-
 pipeline/blueflow/src/store/modules/config.js |    4 +-
 .../blueflow/src/store/modules/function.js    |    9 +-
 .../blueflow/src/store/modules/periodic.js    |   22 +-
 pipeline/blueflow/src/store/modules/task.js   |   58 +-
 .../blueflow/src/store/modules/taskList.js    |   10 +-
 .../blueflow/src/store/modules/template.js    |  106 +-
 .../src/store/modules/templateList.js         |   20 +-
 pipeline/blueflow/src/utils/atomFilter.js     |    7 +-
 pipeline/blueflow/src/utils/bus.js            |    2 +-
 pipeline/blueflow/src/utils/checkDataType.js  |    2 +-
 pipeline/blueflow/src/utils/dom.js            |   10 +-
 pipeline/blueflow/src/utils/draft.js          |   60 +-
 pipeline/blueflow/src/utils/formatPosition.js |  123 +-
 pipeline/blueflow/src/utils/nodeFilter.js     |   23 +-
 pipeline/blueflow/src/utils/tools.js          |    5 +-
 pipeline/blueflow/src/utils/uuid.js           |    2 +-
 .../blueflow/src/utils/validatePipeline.js    |   61 +-
 148 files changed, 16512 insertions(+), 16214 deletions(-)

diff --git a/pipeline/blueflow/.eslintrc.js b/pipeline/blueflow/.eslintrc.js
index e91a0b95f3..41c827c69c 100644
--- a/pipeline/blueflow/.eslintrc.js
+++ b/pipeline/blueflow/.eslintrc.js
@@ -12,44 +12,478 @@
 module.exports = {
     root: true,
     parserOptions: {
-        parser: "babel-eslint",
-        ecmaVersion: 2017,
+        parser: 'babel-eslint',
         sourceType: 'module'
     },
     env: {
         browser: true,
     },
+    extends: [
+        'plugin:vue/recommended',
+        'standard'
+    ],
+    // required to lint *.vue files
+    plugins: [
+        'vue'
+    ],
+    globals: {
+        // value 为 true 允许被重写，为 false 不允许被重写
+        NODE_ENV: true,
+        SITE_URL: true,
+        gettext: true,
+        getCookie: true,
+        $: true
+    },
+    // add your custom rules hered
     rules: {
-        "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
-        "arrow-parens": 0,
-        "no-empty": "error",
-        "no-extra-semi": "error",
-        "semi": ["error", "never"],
-        "generator-star-spacing": 0,
-        "no-unused-vars": 0,
-        "indent": ["error", 4, {
-            "SwitchCase": 1
-        }],
-        "space-before-function-paren": ["error", {
-            "anonymous": "always", 
-            "named": "always",
-            "asyncArrow": "always" 
-        }],
-        "no-trailing-spaces": ["error", {
-            "skipBlankLines": true 
-        }],
-        "comma-dangle": ["error", "never"],
-        "key-spacing": ["error", {
-            "beforeColon": false 
-        }],
-        "keyword-spacing": ["error", {
-            "before": true, 
-            "after": true
-        }],
-        "space-infix-ops": "error",
-        "spaced-comment": ["error", "always"],
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/array-bracket-spacing.md
+        'vue/array-bracket-spacing': ['error', 'never'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/arrow-spacing.md
+        'vue/arrow-spacing': ['error', {'before': true, 'after': true}],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attribute-hyphenation.md
+        'vue/attribute-hyphenation': ['error', 'always'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/attributes-order.md
+        // 属性顺序，不限制
+        'vue/attributes-order': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/block-spacing.md
+        'vue/block-spacing': ['error', 'always'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/brace-style.md
+        'vue/brace-style': ['error', '1tbs', {'allowSingleLine': false}],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/camelcase.md
+        // 后端数据字段经常不是驼峰，所以不限制 properties，也不限制解构
+        // 'vue/camelcase': ['error', {'properties': 'never', 'ignoreDestructuring': true}],
+        // @todo: 驼峰问题统一修改
+        'vue/camelcase': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/comma-dangle.md
+        // 禁止使用拖尾逗号，如 {demo: 'test',}
+        'vue/comma-dangle': ['error', 'never'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/comment-directive.md
+        // vue 文件 template 中允许 eslint-disable eslint-enable eslint-disable-line eslint-disable-next-line
+        // 行内注释启用/禁用某些规则，配置为 1 即允许
+        'vue/comment-directive': 1,
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/component-name-in-template-casing.md
+        // 组件 html 标签的形式，连字符形式，所有 html 标签均会检测，如引入第三方不可避免，可通过 ignores 配置，支持正则，不限制
+        'vue/component-name-in-template-casing': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/dot-location.md
+        // 等待 https://github.com/vuejs/eslint-plugin-vue/pull/794 合入
+        // 'vue/dot-location': ['error', 'property'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/eqeqeq.md
+        'vue/eqeqeq': ['error', 'always', {'null': 'ignore'}],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-closing-bracket-newline.md
+        // 单行写法不需要换行，多行需要，不限制
+        'vue/html-closing-bracket-newline': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-closing-bracket-spacing.md
+        'vue/html-closing-bracket-spacing': ['error', {
+            'startTag': 'never',
+            'endTag': 'never',
+            'selfClosingTag': 'always'
+        }],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-end-tags.md
+        'vue/html-end-tags': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-indent.md
+        'vue/html-indent': ['error', 4, {
+            'attribute': 1,
+            'baseIndent': 1,
+            'closeBracket': 0,
+            'alignAttributesVertically': false,
+            'ignores': []
+        }],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-quotes.md
+        'vue/html-quotes': ['error', 'double'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md
+        // html tag 是否自闭和，不限制
+        'vue/html-self-closing': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/jsx-uses-vars.md
+        // 当变量在 `JSX` 中被使用了，那么 eslint 就不会报出 `no-unused-vars` 的错误。需要开启 eslint no-unused-vars 规则才适用
+        'vue/jsx-uses-vars': 1,
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/key-spacing.md
+        'vue/key-spacing': ['error', {'beforeColon': false, 'afterColon': true}],
+
+        // 关键字周围空格一致性，在关键字前后保留空格，如 if () else {}
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/keyword-spacing.md
+        // 等待 https://github.com/vuejs/eslint-plugin-vue/pull/795 合入
+        // 'vue/keyword-spacing': ['error', {'before': true, 'after': true}],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/match-component-file-name.md
+        // 组件名称属性与其文件名匹配，不限制
+        'vue/match-component-file-name': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-attributes-per-line.md
+        // 每行属性的最大个数，不限制
+        'vue/max-attributes-per-line': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/multiline-html-element-content-newline.md
+        // 在多行元素的内容前后需要换行符，不限制
+        'vue/multiline-html-element-content-newline': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/mustache-interpolation-spacing.md
+        // template 中 {{var}}，不限制
+        'vue/mustache-interpolation-spacing': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/name-property-casing.md
+        'vue/name-property-casing': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-async-in-computed-properties.md
+        'vue/no-async-in-computed-properties': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-boolean-default.md
+        'vue/no-boolean-default': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-confusing-v-for-v-if.md
+        'vue/no-confusing-v-for-v-if': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-dupe-keys.md
+        // 二级属性名禁止重复
+        'vue/no-dupe-keys': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-duplicate-attributes.md
+        // 禁止 html 元素中出现重复的属性
+        'vue/no-duplicate-attributes': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-empty-pattern.md
+        // 等待 https://github.com/vuejs/eslint-plugin-vue/pull/798 合入
+        // 禁止解构中出现空 {} 或 []
+        // 'vue/no-empty-pattern': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-multi-spaces.md
+        // 删除 html 标签中连续多个不用于缩进的空格
+        'vue/no-multi-spaces': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-parsing-error.md
+        // 禁止语法错误
+        'vue/no-parsing-error': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-reserved-keys.md
+        // 禁止使用保留字
+        'vue/no-reserved-keys': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-restricted-syntax.md
+        // 禁止使用特定的语法
+        'vue/no-restricted-syntax': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-shared-component-data.md
+        // data 属性必须是函数
+        'vue/no-shared-component-data': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-side-effects-in-computed-properties.md
+        // 禁止在计算属性对属性进行修改，不限制
+        'vue/no-side-effects-in-computed-properties': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+        'vue/no-spaces-around-equal-signs-in-attribute': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-template-key.md
+        // 禁止在 <template> 中使用 key 属性，不限制
+        'vue/no-template-key': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-template-shadow.md
+        'vue/no-template-shadow': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-textarea-mustache.md
+        'vue/no-textarea-mustache': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-unused-components.md
+        // 禁止 components 中声明的组件在 template 中没有使用
+        'vue/no-unused-components': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-unused-vars.md
+        'vue/no-unused-vars': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-use-v-if-with-v-for.md
+        // 禁止 v-for 和 v-if 在同一元素上使用，不限制
+        'vue/no-use-v-if-with-v-for': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-v-html.md
+        // 禁止使用 v-html，防止 xss。有些业务会用到，不限制
+        'vue/no-v-html': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/object-curly-spacing.md
+        // 对象写在一行时，大括号里需要空格
+        'vue/object-curly-spacing': ['error', 'always'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md
+        // 官方推荐顺序
+        'vue/order-in-components': ['error', {
+            'order': [
+                'el',
+                'name',
+                'parent',
+                'functional',
+                ['delimiters', 'comments'],
+                ['components', 'directives', 'filters'],
+                'extends',
+                'mixins',
+                'inheritAttrs',
+                'model',
+                ['props', 'propsData'],
+                'data',
+                'computed',
+                'watch',
+                // LIFECYCLE_HOOKS: ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated', 'deactivated', 'beforeDestroy', 'destroyed']
+                'LIFECYCLE_HOOKS',
+                'methods',
+                ['template', 'render'],
+                'renderError'
+            ]
+        }],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/prop-name-casing.md
+        // 组件 props 属性名驼峰命名
+        // 'vue/prop-name-casing': ['error', 'camelCase'],
+        // @todo: 驼峰问题统一修改
+        'vue/prop-name-casing': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-component-is.md
+        // <component> 元素必须要有 :is 属性
+        'vue/require-component-is': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-default-prop.md
+        // props 必须要有默认值，不限制
+        'vue/require-default-prop': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-direct-export.md
+        // 组件必须要直接被 export。不限制
+        'vue/require-direct-export': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-type-constructor.md
+        // props 的 type 必须为构造函数，不能为字符串。
+        'vue/require-prop-type-constructor': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-prop-types.md
+        // props 必须要有 type。
+        'vue/require-prop-types': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-render-return.md
+        // render 函数必须要有返回值
+        'vue/require-render-return': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-v-for-key.md
+        // v-for 指令必须要有 key 属性
+        'vue/require-v-for-key': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/require-valid-default-prop.md
+        // props 默认值必须有效。不限制
+        'vue/require-valid-default-prop': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/return-in-computed-property.md
+        // 计算属性必须要有返回值
+        'vue/return-in-computed-property': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md
+        'vue/script-indent': ['error', 4, {
+            'baseIndent': 1,
+            'switchCase': 1
+        }],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/singleline-html-element-content-newline.md
+        // 单行 html 元素后面必须换行。不限制
+        'vue/singleline-html-element-content-newline': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/space-infix-ops.md
+        // 二元操作符两边要有空格
+        'vue/space-infix-ops': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/space-unary-ops.md
+        // new, delete, typeof, void, yield 等后面必须有空格，一元操作符 -, +, --, ++, !, !! 禁止有空格
+        'vue/space-unary-ops': ['error', {'words': true, 'nonwords': false}],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/this-in-template.md
+        // 不允许在 template 中使用 this
+        'vue/this-in-template': ['error', 'never'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/use-v-on-exact.md
+        // 强制使用精确修饰词。不限制
+        'vue/use-v-on-exact': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-bind-style.md
+        // v-bind 指令的写法。不限制
+        'vue/v-bind-style': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-on-function-call.md
+        // 强制或禁止在 v-on 指令中不带参数的方法调用后使用括号。不限制
+        'vue/v-on-function-call': 'off',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/v-on-style.md
+        // v-on 指令的写法。限制简写
+        'vue/v-on-style': ['error', 'shorthand'],
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-template-root.md
+        // 根节点必须合法
+        'vue/valid-template-root': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-bind.md
+        // v-bind 指令必须合法
+        'vue/valid-v-bind': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-cloak.md
+        // v-cloak 指令必须合法
+        'vue/valid-v-cloak': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-else-if.md
+        // v-else-if 指令必须合法
+        'vue/valid-v-else-if': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-else.md
+        // v-else 指令必须合法
+        'vue/valid-v-else': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-for.md
+        // valid-v-for 指令必须合法
+        'vue/valid-v-for': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-html.md
+        // v-html 指令必须合法
+        'vue/valid-v-html': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-if.md
+        // v-if 指令必须合法
+        'vue/valid-v-if': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-model.md
+        // v-model 指令必须合法
+        'vue/valid-v-model': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-on.md
+        // v-on 指令必须合法
+        'vue/valid-v-on': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-once.md
+        // v-once 指令必须合法
+        'vue/valid-v-once': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-pre.md
+        // v-pre 指令必须合法
+        'vue/valid-v-pre': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-show.md
+        // v-show 指令必须合法
+        'vue/valid-v-show': 'error',
+
+        // https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/valid-v-text.md
+        // v-text 指令必须合法
+        'vue/valid-v-text': 'error',
+
+        // https://eslint.org/docs/rules/brace-style
+        'brace-style': ['error', '1tbs', {'allowSingleLine': false}],
+
+        // https://eslint.org/docs/rules/camelcase
+        // 'camelcase': ['error', {'properties': 'never', 'ignoreDestructuring': true}],
+        // @todo: 驼峰问题统一修改
+        'camelcase': 'off',
+
+        // 缩进使用 4 个空格，并且 switch 语句中的 Case 需要缩进
+        // https://eslint.org/docs/rules/indent
+        'indent': ['error', 4, {
+            'SwitchCase': 1,
+            'flatTernaryExpressions': true
+        }],
+
+        // 数组的括号内的前后禁止有空格
+        // https://eslint.org/docs/rules/array-bracket-spacing
+        'array-bracket-spacing': ['error', 'never'],
+
+        // https://eslint.org/docs/rules/operator-linebreak
+        'operator-linebreak': ['error', 'before'],
+
+        // 在开发阶段打开调试
+        // https://eslint.org/docs/rules/no-debugger
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+
+        // 只有一个参数时，箭头函数体可以省略圆括号
+        // https://eslint.org/docs/rules/arrow-parens
+        'arrow-parens': 'off',
+
+        // 禁止空语句（可在空语句写注释避免），允许空的 catch 语句
+        // https://eslint.org/docs/rules/no-empty
+        'no-empty': ['error', {'allowEmptyCatch': true}],
+
+        // 禁止在语句末尾使用分号
+        // https://eslint.org/docs/rules/semi
+        'semi': ['error', 'never'],
+
+        // 禁用不必要的分号
+        // https://eslint.org/docs/rules/no-extra-semi
+        'no-extra-semi': 'error',
+
+        // generator 的 * 前面禁止有空格，后面必须有空格
+        // https://eslint.org/docs/rules/generator-star-spacing
+        'generator-star-spacing': [
+            'error',
+            {
+                before: false,
+                after: true
+            }
+        ],
+
+        // 函数圆括号之前有一个空格
+        // https://eslint.org/docs/rules/space-before-function-paren
+        'space-before-function-paren': ['error', {
+            'anonymous': 'always', // 匿名函数表达式
+            'named': 'always', // 命名的函数表达式
+            'asyncArrow': 'always' // 异步的箭头函数表达式
+        }],
+
+        // 禁止行尾有空格
+        // https://eslint.org/docs/rules/no-trailing-spaces
+        'no-trailing-spaces': ['error', {
+            'skipBlankLines': true // 允许在空行使用空白符
+        }],
+
+        // 注释的斜线或 * 后必须有空格
+        // https://eslint.org/docs/rules/spaced-comment
+        'spaced-comment': ['error', 'always', {
+            'line': {
+                'markers': ['*package', '!', '/', ',', '=']
+            },
+            'block': {
+                // 前后空格是否平衡
+                'balanced': false,
+                'markers': ['*package', '!', ',', ':', '::', 'flow-include'],
+                'exceptions': ['*']
+            }
+        }],
+
+        // https://eslint.org/docs/rules/no-template-curly-in-string
+        // 禁止在字符串中使用字符串模板。不限制
+        'no-template-curly-in-string': 'off',
+
+        // https://eslint.org/docs/rules/no-useless-escape
+        // 禁止出现没必要的转义。不限制
+        'no-useless-escape': 'off',
+
+        // https://eslint.org/docs/rules/no-var
+        // 禁止使用 var
+        'no-var': 'error',
+
+        // https://eslint.org/docs/rules/prefer-const
+        // 如果一个变量不会被重新赋值，必须使用 `const` 进行声明。
+        'prefer-const': 'error'
     },
-    extends: [
-        "plugin:vue/essential"
+    overrides: [
+        {
+            files: ['*.vue'],
+            rules: {
+                indent: 'off'
+            }
+        }
     ]
 }
\ No newline at end of file
diff --git a/pipeline/blueflow/builds/webpack.base.js b/pipeline/blueflow/builds/webpack.base.js
index e7dd592ef1..008293fe5f 100644
--- a/pipeline/blueflow/builds/webpack.base.js
+++ b/pipeline/blueflow/builds/webpack.base.js
@@ -68,14 +68,17 @@ module.exports = {
                 enforce: 'pre',
                 test: /\.(js|vue)$/,
                 loader: 'eslint-loader',
-                exclude: /node_modules/
+                exclude: /node_modules/,
+                options: {
+                    formatter: require('eslint-friendly-formatter')
+                }
             },
             {
                 test: /\.s?[ac]ss$/,
                 use: [
-                    process.env.NODE_ENV === 'development' ?
-                        'style-loader' :
-                        MiniCssExtractPlugin.loader,
+                    process.env.NODE_ENV === 'development'
+                        ? 'style-loader'
+                        : MiniCssExtractPlugin.loader,
                     'css-loader',
                     'postcss-loader',
                     'sass-loader'
@@ -94,14 +97,14 @@ module.exports = {
                     }
                 ],
                 exclude: [
-                    path.join(__dirname, "../node_modules")
+                    path.join(__dirname, '../node_modules')
                 ]
             },
             {
                 test: /\.js$/,
                 loader: 'babel-loader',
                 exclude: [
-                    path.join(__dirname, "../node_modules")
+                    path.join(__dirname, '../node_modules')
                 ]
             },
             {
diff --git a/pipeline/blueflow/builds/webpack.prod.config.js b/pipeline/blueflow/builds/webpack.prod.config.js
index eee75b51f6..48b6cbcbb6 100644
--- a/pipeline/blueflow/builds/webpack.prod.config.js
+++ b/pipeline/blueflow/builds/webpack.prod.config.js
@@ -19,7 +19,7 @@ const webpackBaseConfig = require('./webpack.base.js')
 
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
-module.exports = merge( webpackBaseConfig, {
+module.exports = merge(webpackBaseConfig, {
     plugins: [
         new webpack.DefinePlugin({
             'process.env': {
diff --git a/pipeline/blueflow/package.json b/pipeline/blueflow/package.json
index 2bab84d6b8..fc06a80c3e 100644
--- a/pipeline/blueflow/package.json
+++ b/pipeline/blueflow/package.json
@@ -28,8 +28,9 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "acorn": "^6.1.1",
     "babel-core": "^6.26.3",
-    "babel-eslint": "8.0.1",
+    "babel-eslint": "^10.0.1",
     "babel-loader": "^7.1.4",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -41,9 +42,15 @@
     "cross-env": "^5.1.6",
     "css-loader": "^0.28.11",
     "cssnano": "^3.10.0",
-    "eslint": "^4.19.1",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-vue": "^4.5.0",
+    "eslint": "^5.15.1",
+    "eslint-config-standard": "^12.0.0",
+    "eslint-friendly-formatter": "^4.0.1",
+    "eslint-loader": "^2.1.2",
+    "eslint-plugin-import": "^2.17.1",
+    "eslint-plugin-node": "^8.0.1",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^5.2.2",
     "expose-loader": "^0.7.5",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
diff --git a/pipeline/blueflow/postcss.config.js b/pipeline/blueflow/postcss.config.js
index b0e12f85f3..3e9480e7cf 100644
--- a/pipeline/blueflow/postcss.config.js
+++ b/pipeline/blueflow/postcss.config.js
@@ -16,4 +16,4 @@ module.exports = {
         //     autoprefixer: false
         // }
     }
-}
\ No newline at end of file
+}
diff --git a/pipeline/blueflow/src/App.vue b/pipeline/blueflow/src/App.vue
index 9e896fa9ec..f3013c8853 100644
--- a/pipeline/blueflow/src/App.vue
+++ b/pipeline/blueflow/src/App.vue
@@ -10,105 +10,104 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-<div id="app">
-    <navigator
-        v-if="!hideHeader"
-        :appmakerDataLoading="appmakerDataLoading"/>
-    <UserLoginModal ref="userLogin"></UserLoginModal>
-    <ErrorCodeModal ref="errorModal"></ErrorCodeModal>
-    <router-view v-if="isRouterAlive"></router-view>
-</div>
+    <div id="app">
+        <navigator
+            v-if="!hideHeader"
+            :appmaker-data-loading="appmakerDataLoading" />
+        <UserLoginModal ref="userLogin"></UserLoginModal>
+        <ErrorCodeModal ref="errorModal"></ErrorCodeModal>
+        <router-view v-if="isRouterAlive"></router-view>
+    </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import Vue from 'vue'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import bus from '@/utils/bus.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import UserLoginModal from '@/components/common/modal/UserLoginModal.vue'
-import ErrorCodeModal from '@/components/common/modal/ErrorCodeModal.vue'
-import Navigator from '@/components/layout/Navigator.vue'
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import bus from '@/utils/bus.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import UserLoginModal from '@/components/common/modal/UserLoginModal.vue'
+    import ErrorCodeModal from '@/components/common/modal/ErrorCodeModal.vue'
+    import Navigator from '@/components/layout/Navigator.vue'
 
-export default {
-    name: 'App',
-    components: {
-        Navigator,
-        UserLoginModal,
-        ErrorCodeModal
-    },
-    provide () {
-        return {
-            reload: this.reload
-        }
-    },
-    data () {
-        return {
-            isRouterAlive: true,
-            appmakerDataLoading: false // 轻应用加载 app 详情
-        }
-    },
-    computed: {
-        ...mapState({
-            'hideHeader': state => state.hideHeader,
-            'viewMode': state => state.view_mode,
-            'appId': state => state.app_id
-        })
-    },
-    created () {
-        /**
-         * 兼容标准插件配置项里，异步请求用到的全局弹窗提示
-         */
-        window.show_msg = (message, type) => {
-            this.$bkMessage({
-                message,
-                theme: type
+    export default {
+        name: 'App',
+        components: {
+            Navigator,
+            UserLoginModal,
+            ErrorCodeModal
+        },
+        provide () {
+            return {
+                reload: this.reload
+            }
+        },
+        data () {
+            return {
+                isRouterAlive: true,
+                appmakerDataLoading: false // 轻应用加载 app 详情
+            }
+        },
+        computed: {
+            ...mapState({
+                'hideHeader': state => state.hideHeader,
+                'viewMode': state => state.view_mode,
+                'appId': state => state.app_id
             })
-        }
+        },
+        created () {
+            /**
+             * 兼容标准插件配置项里，异步请求用到的全局弹窗提示
+             */
+            window.show_msg = (message, type) => {
+                this.$bkMessage({
+                    message,
+                    theme: type
+                })
+            }
 
-        if (this.viewMode === 'appmaker') {
-            this.getAppmakerDetail()
-        }
-    },
-    mounted () {
-        bus.$on('showLoginModal', (src) => {
-            this.$refs.userLogin.show(src)
-        })
-        bus.$on('showErrorModal', (type, responseText) => {
-            this.$refs.errorModal.show(type, responseText)
-        })
-        bus.$on('showMessage', (info) => {
-            this.$bkMessage({
-                message: info.message,
-                theme: info.theme || 'error'
-            })
-        })
-    },
-    methods: {
-        ...mapActions('appmaker/', [
-            'loadAppmakerDetail'
-        ]),
-        ...mapMutations([
-            'setTemplateId'
-        ]),
-        async getAppmakerDetail () {
-            this.appmakerDataLoading = true
-            try {
-                const data = await this.loadAppmakerDetail(this.appId)
-                this.setTemplateId(data.template_id)
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.appmakerDataLoading = false
+            if (this.viewMode === 'appmaker') {
+                this.getAppmakerDetail()
             }
         },
-        reload () {
-            this.isRouterAlive = false
-            this.$nextTick(() => {
-                this.isRouterAlive = true
+        mounted () {
+            bus.$on('showLoginModal', (src) => {
+                this.$refs.userLogin.show(src)
             })
+            bus.$on('showErrorModal', (type, responseText, title) => {
+                this.$refs.errorModal.show(type, responseText, title)
+            })
+            bus.$on('showMessage', (info) => {
+                this.$bkMessage({
+                    message: info.message,
+                    theme: info.theme || 'error'
+                })
+            })
+        },
+        methods: {
+            ...mapActions('appmaker/', [
+                'loadAppmakerDetail'
+            ]),
+            ...mapMutations([
+                'setTemplateId'
+            ]),
+            async getAppmakerDetail () {
+                this.appmakerDataLoading = true
+                try {
+                    const data = await this.loadAppmakerDetail(this.appId)
+                    this.setTemplateId(data.template_id)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.appmakerDataLoading = false
+                }
+            },
+            reload () {
+                this.isRouterAlive = false
+                this.$nextTick(() => {
+                    this.isRouterAlive = true
+                })
+            }
         }
     }
-}
 </script>
 <style lang="scss">
     @import './scss/app.scss';
diff --git a/pipeline/blueflow/src/api/fileDownload.js b/pipeline/blueflow/src/api/fileDownload.js
index 877b5b32b8..a3d55a1655 100644
--- a/pipeline/blueflow/src/api/fileDownload.js
+++ b/pipeline/blueflow/src/api/fileDownload.js
@@ -10,12 +10,11 @@
 * specific language governing permissions and limitations under the License.
 */
 export function fileDownload (data, filename) {
-    const blob = new Blob([data], {type: 'application/octet-stream'})
+    const blob = new Blob([data], { type: 'application/octet-stream' })
     if (typeof window.navigator.msSaveBlob !== 'undefined') {
         // hack old IE
         window.navigator.msSaveBlob(blob, filename)
-    }
-    else {
+    } else {
         const eleLink = document.createElement('a')
         const blobURL = window.URL.createObjectURL(blob)
         eleLink.style.display = 'none'
@@ -31,4 +30,4 @@ export function fileDownload (data, filename) {
         document.body.removeChild(eleLink)
         window.URL.revokeObjectURL(blobURL)
     }
-}
\ No newline at end of file
+}
diff --git a/pipeline/blueflow/src/api/index.js b/pipeline/blueflow/src/api/index.js
index c8062fc529..3bc2f0bdc2 100644
--- a/pipeline/blueflow/src/api/index.js
+++ b/pipeline/blueflow/src/api/index.js
@@ -17,16 +17,16 @@ import store from '@/store/index.js'
 import { getUrlSetting } from './urls.js'
 import { fileDownload } from './fileDownload.js'
 
-const axiosDefaults = require("axios/lib/defaults")
+const axiosDefaults = require('axios/lib/defaults')
 
-axiosDefaults.xsrfCookieName = window.APP_CODE + "_csrftoken"
-axiosDefaults.xsrfHeaderName = "X-CSRFToken"
+axiosDefaults.xsrfCookieName = window.APP_CODE + '_csrftoken'
+axiosDefaults.xsrfHeaderName = 'X-CSRFToken'
 axiosDefaults.withCredentials = true
 axiosDefaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
 
 const fullURL = window.location.protocol + '//' + window.location.host
 
-function request (opts){
+function request (opts) {
     const defaultOptions = {
         method: 'GET',
         url: '',
@@ -45,7 +45,7 @@ const api = {
      * @param {String} path 路径名称
      */
     getPrefix (path) {
-        const {site_url, cc_id} = store.state
+        const { site_url, cc_id } = store.state
         return getUrlSetting(site_url, cc_id)[path]
     },
     /**
@@ -108,7 +108,7 @@ const api = {
         const { cc_id } = store.state
         let prefixUrl = ''
         if (data) {
-            const {common} = data
+            const { common } = data
             if (common) {
                 prefixUrl = this.getPrefix('commonTemplate')
             } else {
@@ -117,7 +117,7 @@ const api = {
         } else {
             prefixUrl = this.getPrefix('template')
         }
-        const querystring = Object.assign({}, data, {business__cc_id: cc_id})
+        const querystring = Object.assign({}, data, { business__cc_id: cc_id })
         const opts = {
             method: 'GET',
             url: prefixUrl,
@@ -129,7 +129,7 @@ const api = {
      * 删除模板
      */
     deleteTemplate (data) {
-        const {templateId, common} = data
+        const { templateId, common } = data
         let prefixUrl = ''
         if (common) {
             prefixUrl = this.getPrefix('commonTemplate')
@@ -158,7 +158,7 @@ const api = {
      */
     getSubAtomList (data) {
         let prefixUrl = ''
-        const {ccId, common} = data
+        const { ccId, common } = data
         if (common) {
             prefixUrl = this.getPrefix('commonTemplate')
         } else {
@@ -200,8 +200,8 @@ const api = {
     $getAtomForm (type, classify, isMeta) {
         return this.getAtomFormURL(type, classify, isMeta).then(response => {
             const { output: outputData, form: url } = response.data
-            store.commit('atomForm/setAtomForm', {atomType: type, data: response.data, isMeta})
-            store.commit('atomForm/setAtomOutput', {atomType: type, outputData})
+            store.commit('atomForm/setAtomForm', { atomType: type, data: response.data, isMeta })
+            store.commit('atomForm/setAtomOutput', { atomType: type, outputData })
             return $.getScript(url)
         }).catch(e => {
             return Promise.reject(e)
@@ -212,7 +212,7 @@ const api = {
      * @param {String} template_id 模板id
      */
     getTemplateData (data) {
-        const {templateId, common} = data
+        const { templateId, common } = data
         let prefixUrl = ''
         if (common) {
             prefixUrl = this.getPrefix('commonTemplate')
@@ -230,8 +230,8 @@ const api = {
      * @param {String} data 包含templateId 模板Id, common 是否是公共流程
      */
     getTemplatePersons (data) {
-        const {cc_id} = store.state
-        const {templateId, common} = data
+        const { cc_id } = store.state
+        const { templateId, common } = data
         let prefixUrl = ''
         const params = {
             template_id: templateId
@@ -254,7 +254,7 @@ const api = {
      * @param {Object} data 模板人员配置数据
      */
     saveTemplatePersons (data) {
-        const {cc_id} = store.state
+        const { cc_id } = store.state
         const { templateId, createTask, fillParams, executeTask, common } = data
         let prefixUrl = ''
         const bodyData = {
@@ -318,7 +318,7 @@ const api = {
      */
     templateUploadCheck (data) {
         let prefixUrl = ''
-        const {common, formData} = data
+        const { common, formData } = data
         if (common) {
             prefixUrl = this.getPrefix('commonTemplateUploadCheck')
         } else {
@@ -337,7 +337,7 @@ const api = {
      * @param {Object} data {common是否是公共流程,formData数据}
      */
     templateImport (data) {
-        const {formData, common} = data
+        const { formData, common } = data
         let prefixUrl = ''
         if (common) {
             prefixUrl = this.getPrefix('commonTemplateImport')
@@ -357,7 +357,7 @@ const api = {
      * @param {String} data 模板列表数组字符串
      */
     templateExport (data) {
-        const {common, list} = data
+        const { common, list } = data
         let prefixUrl = ''
         if (common) {
             prefixUrl = this.getPrefix('commonTemplateExport')
@@ -422,7 +422,7 @@ const api = {
      * @param {Object} data 模板完整数据
      */
     saveTemplate (data) {
-        const { ccId ,name, templateId, pipelineTree, category, notifyReceivers, notifyType, timeout, common } = data
+        const { ccId, name, templateId, pipelineTree, category, notifyReceivers, notifyType, timeout, common } = data
         let prefixUrl = ''
         if (common) {
             prefixUrl = this.getPrefix('commonTemplate')
@@ -443,9 +443,9 @@ const api = {
                 timeout
             }
         }
-        if (templateId != undefined) {
+        if (templateId !== undefined) {
             opts.url = `${prefixUrl}${templateId}/`
-            opts.headers = {'X-HTTP-Method-Override': 'PATCH'}
+            opts.headers = { 'X-HTTP-Method-Override': 'PATCH' }
         }
         return request(opts)
     },
@@ -455,8 +455,8 @@ const api = {
      */
     getTaskList (data) {
         const { cc_id } = store.state
-        const {common, template_id} = data
-        const querystring = Object.assign({}, data, {business__cc_id: cc_id})
+        const { common, template_id } = data
+        const querystring = Object.assign({}, data, { business__cc_id: cc_id })
         const prefixUrl = this.getPrefix('instance')
         if (template_id) {
             querystring['template_source'] = 'business'
@@ -494,7 +494,7 @@ const api = {
         const dataString = qs.stringify({
             name,
             instance_id: task_id,
-            create_method: view_mode == 'appmaker' ? 'app_maker' : 'app',
+            create_method: view_mode === 'appmaker' ? 'app_maker' : 'app',
             create_info: app_id
         })
         const opts = {
@@ -571,7 +571,7 @@ const api = {
      */
     getPreviewNodeData (data) {
         const prefixUrl = this.getPrefix('instancePreview')
-        const {templateId, excludeTaskNodesId, common} = data
+        const { templateId, excludeTaskNodesId, common } = data
         const dataJson = {
             template_id: templateId,
             exclude_task_nodes_id: excludeTaskNodesId,
@@ -595,7 +595,7 @@ const api = {
      */
     createTask (data) {
         const { cc_id, app_id, view_mode, username } = store.state
-        const {templateId, name, description, execData, flowType, common} = data
+        const { templateId, name, description, execData, flowType, common } = data
         const prefixUrl = this.getPrefix('instance')
         const requestData = {
             'business': `api/v3/business/${cc_id}/`,
@@ -604,7 +604,7 @@ const api = {
             'name': name,
             'description': description,
             'pipeline_tree': execData,
-            'create_method': view_mode == 'appmaker' ? 'app_maker' : 'app',
+            'create_method': view_mode === 'appmaker' ? 'app_maker' : 'app',
             'create_info': app_id,
             'flow_type': flowType,
             'template_source': 'business'
@@ -651,7 +651,7 @@ const api = {
      * @param {String} instance_id 实例id
      */
     getInstanceStatus (data) {
-        const {instance_id, cc_id} = data
+        const { instance_id, cc_id } = data
         const prefixUrl = this.getPrefix('instanceStatus')
         const opts = {
             method: 'GET',
@@ -669,7 +669,7 @@ const api = {
      */
     instanceStart (instance_id) {
         const prefixUrl = this.getPrefix('instanceStart')
-        const data = qs.stringify({instance_id: instance_id})
+        const data = qs.stringify({ instance_id: instance_id })
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -685,7 +685,7 @@ const api = {
      */
     instancePause (instance_id) {
         const prefixUrl = this.getPrefix('instancePause')
-        const data = qs.stringify({instance_id: instance_id})
+        const data = qs.stringify({ instance_id: instance_id })
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -702,7 +702,7 @@ const api = {
     subInstanceResume (data) {
         const { instance_id, node_id } = data
         const prefixUrl = this.getPrefix('resumeSubProcess')
-        const dataString = qs.stringify({instance_id: instance_id, node_id: node_id})
+        const dataString = qs.stringify({ instance_id: instance_id, node_id: node_id })
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -718,7 +718,7 @@ const api = {
      */
     instanceResume (instance_id) {
         const prefixUrl = this.getPrefix('instanceResume')
-        const data = qs.stringify({instance_id: instance_id})
+        const data = qs.stringify({ instance_id: instance_id })
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -735,7 +735,7 @@ const api = {
     subInstancePause (data) {
         const { instance_id, node_id } = data
         const prefixUrl = this.getPrefix('pauseSubProcess')
-        const dataString = qs.stringify({instance_id: instance_id, node_id: node_id})
+        const dataString = qs.stringify({ instance_id: instance_id, node_id: node_id })
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -751,7 +751,7 @@ const api = {
      */
     instanceRevoke (instance_id) {
         const prefixUrl = this.getPrefix('instanceRevoke')
-        const data = qs.stringify({instance_id: instance_id})
+        const data = qs.stringify({ instance_id: instance_id })
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -783,7 +783,7 @@ const api = {
      */
     getNodeActDetail (data) {
         const prefixUrl = this.getPrefix('nodeActDetails')
-        const {instance_id, node_id, component_code, subprocess_stack} = data
+        const { instance_id, node_id, component_code, subprocess_stack } = data
         const opts = {
             method: 'GET',
             url: prefixUrl,
@@ -803,7 +803,7 @@ const api = {
      */
     getJobInstanceLog (data) {
         const prefixUrl = this.getPrefix('jobInstanceLog')
-        const {job_instance_id} = data
+        const { job_instance_id } = data
         const opts = {
             method: 'GET',
             url: prefixUrl,
@@ -820,7 +820,7 @@ const api = {
      */
     getNodeActInfo (data) {
         const prefixUrl = this.getPrefix('nodeActInfo')
-        const {instance_id, node_id, component_code, subprocess_stack} = data
+        const { instance_id, node_id, component_code, subprocess_stack } = data
         const opts = {
             method: 'GET',
             url: prefixUrl,
@@ -951,7 +951,6 @@ const api = {
      * 获取业务配置
      */
     loadBizConfig () {
-        const { cc_id } = store.state
         const prefixUrl = this.getPrefix('bizConfig')
         const opts = {
             method: 'GET',
@@ -981,7 +980,7 @@ const api = {
     loadAppmaker (data) {
         const { cc_id } = store.state
         const prefixUrl = this.getPrefix('appmaker')
-        const querystring = Object.assign({}, data, {business__cc_id: cc_id})
+        const querystring = Object.assign({}, data, { business__cc_id: cc_id })
         const opts = {
             method: 'GET',
             url: prefixUrl,
@@ -1156,10 +1155,7 @@ const api = {
     createPeriodic (data) {
         const prefixUrl = this.getPrefix('periodic')
         const { cc_id } = store.state
-        const requestData = {
-            'business': `api/v3/business/${cc_id}/`
-        }
-        const {name, cron, templateId, execData} = data
+        const { name, cron, templateId, execData } = data
         const opts = {
             method: 'POST',
             url: prefixUrl,
@@ -1179,7 +1175,7 @@ const api = {
      */
     getPeriodicList (data) {
         const { cc_id } = store.state
-        const querystring = Object.assign({}, data, {business__cc_id: cc_id})
+        const querystring = Object.assign({}, data, { business__cc_id: cc_id })
         const prefixUrl = this.getPrefix('periodic')
         const opts = {
             method: 'GET',
@@ -1209,7 +1205,7 @@ const api = {
      * @param {Object} data task_id 定时任务id, enabled 需要切换的状态
      */
     setPeriodicEnable (data) {
-        const {enabled, taskId} = data
+        const { enabled, taskId } = data
         const prefixUrl = this.getPrefix('periodicEnable') + taskId + '/'
         const dataString = qs.stringify({
             enabled
@@ -1227,7 +1223,7 @@ const api = {
      * @param {Object} data task_id 定时任务id, cron 表达式
      */
     modifyPeriodicCron (data) {
-        const {cron, taskId} = data
+        const { cron, taskId } = data
         const prefixUrl = this.getPrefix('periodicModifyCron') + taskId + '/'
         const dataString = qs.stringify({
             'cron': cron
@@ -1242,8 +1238,8 @@ const api = {
     },
     getPeriodic (data) {
         const { cc_id } = store.state
-        const {taskId} = data
-        const querystring = Object.assign({}, {business__cc_id: cc_id})
+        const { taskId } = data
+        const querystring = Object.assign({}, { business__cc_id: cc_id })
         const prefixUrl = this.getPrefix('periodic') + taskId + '/'
         const opts = {
             method: 'GET',
@@ -1253,7 +1249,7 @@ const api = {
         return request(opts)
     },
     modifyPeriodicConstants (data) {
-        const {constants, taskId} = data
+        const { constants, taskId } = data
         const prefixUrl = this.getPrefix('periodicModifyConstants') + taskId + '/'
         const dataString = qs.stringify({
             'constants': constants
diff --git a/pipeline/blueflow/src/api/interceptors.js b/pipeline/blueflow/src/api/interceptors.js
index 17f62049fb..f3abd4f7c7 100644
--- a/pipeline/blueflow/src/api/interceptors.js
+++ b/pipeline/blueflow/src/api/interceptors.js
@@ -48,7 +48,7 @@ axios.interceptors.response.use(
                 break
         }
         if (!response.data) {
-            let msg = gettext('接口数据返回为空')
+            const msg = gettext('接口数据返回为空')
             console.warn(gettext('接口异常，'), gettext('HTTP状态码：'), response.status)
             console.error(msg)
             response.data = {
@@ -56,7 +56,7 @@ axios.interceptors.response.use(
                 msg: msg
             }
         } else {
-            let msg = response.data
+            const msg = response.data
             response.data = {
                 code: response.status,
                 msg
@@ -64,8 +64,8 @@ axios.interceptors.response.use(
         }
         if (response.data.message) {
             if (checkDataType(response.data.message) === 'Object') {
-                let msg = []
-                for (let key in response.data.message) {
+                const msg = []
+                for (const key in response.data.message) {
                     msg.push(response.data.message[key].join(';'))
                 }
                 response.data.msg = msg.join(';')
diff --git a/pipeline/blueflow/src/components/common/Individualization/IpLogContent.vue b/pipeline/blueflow/src/components/common/Individualization/IpLogContent.vue
index e4613934d6..47e5d3bbd4 100644
--- a/pipeline/blueflow/src/components/common/Individualization/IpLogContent.vue
+++ b/pipeline/blueflow/src/components/common/Individualization/IpLogContent.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="ip-log-content" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="ip-log-content" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div class="detail-ip-log" v-html="logContent"></div>
         <el-input
             :placeholder="i18n.placeholder"
@@ -47,95 +47,95 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { mapActions } from 'vuex'
-export default {
-    name: 'IpLogContent',
-    props: [
-        'nodeInfo'
-    ],
-    data () {
-        return {
-            i18n: {
-                error_code: gettext("错误码"),
-                placeholder: gettext("请输入 IP")
-            },
-            loading: true,
-            failDetail: '',
-            ipTotal: [],
-            ipList: [],
-            pageSize: 5,
-            pageCount: 5,
-            ipTableData: [],
-            currentRow: null,
-            logContent: '',
-            dataTotal: [],
-            search: ''
-        }
-    },
-    mounted () {
-        this.loadIpLogContent()
-    },
-    watch: {
-        search: function () {
-            this.dataTotal = this.ipTotal.filter( item => ( !this.search || item.ip.includes(this.search)))
-            this.initTable()
-        }
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getJobInstanceLog'
-        ]),
-        async loadIpLogContent () {
-            this.loading = true
-            try {
-                if (
-                    this.nodeInfo.ex_data &&
-                    this.nodeInfo.ex_data.hasOwnProperty('show_ip_log') &&
-                    this.nodeInfo.ex_data.show_ip_log
-                ) {
-                    this.failDetail = await this.getJobInstanceLog({"job_instance_id": this.nodeInfo.ex_data.task_inst_id})
-                    let ipTotal = []
-                    let ipResults = this.failDetail.data[0].step_results
-                    for (let i in ipResults) {
-                        ipTotal = ipTotal.concat(ipResults[i].ip_logs)
-                    }
-                    this.ipTotal = ipTotal
-                    this.dataTotal = this.ipTotal
-                    this.initTable()
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
+    import '@/utils/i18n.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import { mapActions } from 'vuex'
+    export default {
+        name: 'IpLogContent',
+        props: [
+            'nodeInfo'
+        ],
+        data () {
+            return {
+                i18n: {
+                    error_code: gettext('错误码'),
+                    placeholder: gettext('请输入 IP')
+                },
+                loading: true,
+                failDetail: '',
+                ipTotal: [],
+                ipList: [],
+                pageSize: 5,
+                pageCount: 5,
+                ipTableData: [],
+                currentRow: null,
+                logContent: '',
+                dataTotal: [],
+                search: ''
             }
         },
-        currentChange (val) {
-            this.ipList = this.dataTotal.slice(val * this.pageSize - this.pageSize, val * this.pageSize)
-        },
-        getIpLogContent (data){
-            if (data !== null){
-                var self = this
-                this.ipList.every( item => {
-                    if (item.ip === data.ip){
-                        self.logContent = item.log_content
-                        return false
-                    }
-                    return true
-                })
+        watch: {
+            search: function () {
+                this.dataTotal = this.ipTotal.filter(item => (!this.search || item.ip.includes(this.search)))
+                this.initTable()
             }
         },
-        setCurrent (row) {
-            this.$refs.singleTable.setCurrentRow(row)
+        mounted () {
+            this.loadIpLogContent()
         },
-        initTable () {
-            this.currentChange(1)
-            this.getIpLogContent(this.ipList[0])
-            this.setCurrent(this.ipList[0])
+        methods: {
+            ...mapActions('task/', [
+                'getJobInstanceLog'
+            ]),
+            async loadIpLogContent () {
+                this.loading = true
+                try {
+                    if (
+                        this.nodeInfo.ex_data
+                        && this.nodeInfo.ex_data.hasOwnProperty('show_ip_log')
+                        && this.nodeInfo.ex_data.show_ip_log
+                    ) {
+                        this.failDetail = await this.getJobInstanceLog({ 'job_instance_id': this.nodeInfo.ex_data.task_inst_id })
+                        let ipTotal = []
+                        const ipResults = this.failDetail.data[0].step_results
+                        for (const i in ipResults) {
+                            ipTotal = ipTotal.concat(ipResults[i].ip_logs)
+                        }
+                        this.ipTotal = ipTotal
+                        this.dataTotal = this.ipTotal
+                        this.initTable()
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.loading = false
+                }
+            },
+            currentChange (val) {
+                this.ipList = this.dataTotal.slice(val * this.pageSize - this.pageSize, val * this.pageSize)
+            },
+            getIpLogContent (data) {
+                if (data !== null) {
+                    const self = this
+                    this.ipList.every(item => {
+                        if (item.ip === data.ip) {
+                            self.logContent = item.log_content
+                            return false
+                        }
+                        return true
+                    })
+                }
+            },
+            setCurrent (row) {
+                this.$refs.singleTable.setCurrentRow(row)
+            },
+            initTable () {
+                this.currentChange(1)
+                this.getIpLogContent(this.ipList[0])
+                this.setCurrent(this.ipList[0])
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .ip-log-content {
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
index ff26ff0096..4b0ed96f40 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
@@ -57,99 +57,98 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { Validator } from 'vee-validate'
-import { mapMutations } from 'vuex'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import BaseInput from '@/components/common/base/BaseInput.vue'
+    import '@/utils/i18n.js'
+    import { mapMutations } from 'vuex'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
 
-export default {
-    name: "ConfigBar",
-    components: {
-        BaseInput
-    },
-    props: ['name', 'cc_id', 'template_id', 'common', 'templateSaving', 'createTaskSaving', 'isTemplateDataChanged'],
-    data () {
-        return {
-            i18n: {
-                placeholder: gettext('请输入名称'),
-                NewProcess: gettext('新建流程'),
-                editProcess: gettext('编辑流程'),
-                addTask: gettext('新建任务'),
-                saveTplAndcreateTask: gettext('保存并新建任务'),
-                save: gettext("保存"),
-                return: gettext("返回")
-            },
-            tName: this.name.trim(),
-            templateNameRule: {
-                required: true,
-                max: STRING_LENGTH.TEMPLATE_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            isShowMode: true
-        }
-    },
-    watch: {
-        name (val) {
-            this.tName = val
-        }
-    },
-    computed: {
-        templateTitle () {
-            return this.$route.query.template_id === undefined ? this.i18n.NewProcess : this.i18n.editProcess
-        }
-    },
-    methods: {
-        ...mapMutations('template/', [
-            'setTemplateName'
-        ]),
-        onInputName (val) {
-            this.$emit('onChangeName', val)
-        },
-        onSaveTemplate (saveAndCreate = false) {
-            this.$validator.validateAll().then((result) => {
-                if (!result) return
-                this.tName = this.tName.trim()
-                this.setTemplateName(this.tName)
-                if (saveAndCreate && !this.isTemplateDataChanged) {
-                    const taskUrl = this.getTaskUrl()
-                    this.$router.push(taskUrl)
-                } else {
-                    this.$emit('onSaveTemplate', saveAndCreate)
-                }
-            })
+    export default {
+        name: 'ConfigBar',
+        components: {
+            BaseInput
         },
-        getHomeUrl () {
-            let url = `/template/home/${this.cc_id}/`
-            if (this.common) {
-                url += '?common=1'
+        props: ['name', 'cc_id', 'template_id', 'common', 'templateSaving', 'createTaskSaving', 'isTemplateDataChanged'],
+        data () {
+            return {
+                i18n: {
+                    placeholder: gettext('请输入名称'),
+                    NewProcess: gettext('新建流程'),
+                    editProcess: gettext('编辑流程'),
+                    addTask: gettext('新建任务'),
+                    saveTplAndcreateTask: gettext('保存并新建任务'),
+                    save: gettext('保存'),
+                    return: gettext('返回')
+                },
+                tName: this.name.trim(),
+                templateNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.TEMPLATE_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                isShowMode: true
             }
-            return url
         },
-        getTaskUrl () {
-            let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${this.template_id}`
-            if (this.common) {
-                url += '&common=1'
+        computed: {
+            templateTitle () {
+                return this.$route.query.template_id === undefined ? this.i18n.NewProcess : this.i18n.editProcess
             }
-            return url
         },
-        onNameEditing () {
-            this.isShowMode = false
-            this.$nextTick(()=>{
-                this.$refs.canvasNameInput.focus()
-                this.$refs.canvasNameInput.select()
-            })
+        watch: {
+            name (val) {
+                this.tName = val
+            }
         },
-        onInputBlur () {
-            this.$validator.validateAll().then((result) => {
-                if (!result) {
-                    return
+        methods: {
+            ...mapMutations('template/', [
+                'setTemplateName'
+            ]),
+            onInputName (val) {
+                this.$emit('onChangeName', val)
+            },
+            onSaveTemplate (saveAndCreate = false) {
+                this.$validator.validateAll().then((result) => {
+                    if (!result) return
+                    this.tName = this.tName.trim()
+                    this.setTemplateName(this.tName)
+                    if (saveAndCreate && !this.isTemplateDataChanged) {
+                        const taskUrl = this.getTaskUrl()
+                        this.$router.push(taskUrl)
+                    } else {
+                        this.$emit('onSaveTemplate', saveAndCreate)
+                    }
+                })
+            },
+            getHomeUrl () {
+                let url = `/template/home/${this.cc_id}/`
+                if (this.common) {
+                    url += '?common=1'
+                }
+                return url
+            },
+            getTaskUrl () {
+                let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${this.template_id}`
+                if (this.common) {
+                    url += '&common=1'
                 }
-                this.isShowMode = true
-            })
+                return url
+            },
+            onNameEditing () {
+                this.isShowMode = false
+                this.$nextTick(() => {
+                    this.$refs.canvasNameInput.focus()
+                    this.$refs.canvasNameInput.select()
+                })
+            },
+            onInputBlur () {
+                this.$validator.validateAll().then((result) => {
+                    if (!result) {
+                        return
+                    }
+                    this.isShowMode = true
+                })
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/MenuBar.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/MenuBar.vue
index 7c653f0511..c4296edeed 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/MenuBar.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/MenuBar.vue
@@ -18,11 +18,11 @@
                     :class="[
                         'node-type-item',
                         `common-icon-node-${item.type}`,
-                        {'node-type-has-sub': isNodeTypeHasSub(item.type)},
-                        {'node-source': !isNodeTypeHasSub(item.type)},
-                        {'active-node-type' : activeNodeType === item.type && showNodeList},
-                        {'startpoint-unavailable':item.type === 'startpoint' ?  isDisableStartPoint : false},
-                        {'endpoint-unavailable':item.type === 'endpoint' ?  isDisableEndPoint : false}
+                        { 'node-type-has-sub': isNodeTypeHasSub(item.type) },
+                        { 'node-source': !isNodeTypeHasSub(item.type) },
+                        { 'active-node-type': activeNodeType === item.type && showNodeList },
+                        { 'startpoint-unavailable': item.type === 'startpoint' ? isDisableStartPoint : false },
+                        { 'endpoint-unavailable': item.type === 'endpoint' ? isDisableEndPoint : false }
                     ]"
                     :data-type="item.type"
                     v-bktooltips.right="item.name"
@@ -37,10 +37,10 @@
         </div>
         <transition name="slideLeft">
             <div class="node-list" v-if="showNodeList">
-                <div class="list-container" v-bkloading="{isLoading: loading, opacity: 1}">
-                    <i :class="['common-icon-left-pin', 'node-list-pin', {actived: isPinActived}]" @click.stop="onClickPin"></i>
+                <div class="list-container" v-bkloading="{ isLoading: loading, opacity: 1 }">
+                    <i :class="['common-icon-left-pin', 'node-list-pin', { actived: isPinActived }]" @click.stop="onClickPin"></i>
                     <div class="search-node-wraper">
-                        <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput"/>
+                        <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput" />
                         <i class="common-icon-search"></i>
                     </div>
                     <div v-if="!showNoDataPanel" class="atom-list-wrapper">
@@ -52,7 +52,7 @@
                                 class="collapse-panel">
                                 <BaseCollapse>
                                     <template slot="header" class="panel-header">
-                                        <img class="header-icon" :src="item.group_icon||defaultTypeIcon"/>
+                                        <img class="header-icon" :src="item.group_icon || defaultTypeIcon" />
                                         <span class="header-title">{{item.group_name}}
                                             <span class="header-atom">
                                                 {{item.list.length}}{{i18n.num}}
@@ -100,141 +100,141 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
-import domUtils  from '@/utils/dom.js'
-import toolsUtils  from '@/utils/tools.js'
-import BaseCollapse from '../base/BaseCollapse.vue'
-import NoData from '../base/NoData.vue'
-import { NODE_DICT } from '@/constants/index.js'
-const nodeTypeList = ['startpoint', 'endpoint', 'parallelgateway', 'convergegateway', 'branchgateway', 'tasknode', 'subflow']
-const nodeTypeSubList = ['tasknode', 'subflow']
-const node_list = Object.keys(NODE_DICT).map(key => {
-    return {
-        type: key,
-        name: NODE_DICT[key]
-    }
-})
+    import '@/utils/i18n.js'
+    import domUtils from '@/utils/dom.js'
+    import toolsUtils from '@/utils/tools.js'
+    import BaseCollapse from '../base/BaseCollapse.vue'
+    import NoData from '../base/NoData.vue'
+    import { NODE_DICT } from '@/constants/index.js'
 
-export default {
-    name: 'MenuBar',
-    props: {
-        singleAtomListLoading: {
-            type: Boolean
-        },
-        subAtomListLoading: {
-            type: Boolean
-        },
-        atomTypeList: {
-            type: Object,
-            required: true
-        },
-        searchAtomResult: {
-            type: Array
-        },
-        isDisableStartPoint: {
-            type: Boolean
-        },
-        isDisableEndPoint: {
-            type: Boolean
-        }
-    },
-    components: {
-        BaseCollapse,
-        NoData
-    },
-    data () {
+    const nodeTypeList = ['startpoint', 'endpoint', 'parallelgateway', 'convergegateway', 'branchgateway', 'tasknode', 'subflow']
+    const nodeTypeSubList = ['tasknode', 'subflow']
+    const node_list = Object.keys(NODE_DICT).map(key => {
         return {
-            i18n: {
-                tools: gettext("工具"),
-                placeholder: gettext("请输入名称"),
-                startpoint: gettext('开始'),
-                endpoint: gettext('结束'),
-                num: gettext('个')
-            },
-            nodeDict: node_list,
-            nodeTypeList,
-            activeNodeType: null,
-            searchStr: '',
-            showNodeList: false,
-            isCollapseAll: false,
-            isPinActived: false,
-            searchMode: false,
-            defaultTypeIcon: require('@/assets/images/atom-type-default.svg')
+            type: key,
+            name: NODE_DICT[key]
         }
-    },
-    computed: {
-        loading () {
-            if (this.activeNodeType === 'tasknode') {
-                return this.singleAtomListLoading
-            } else if (this.activeNodeType === 'subflow') {
-                return this.subAtomListLoading
-            }
+    })
+
+    export default {
+        name: 'MenuBar',
+        components: {
+            BaseCollapse,
+            NoData
         },
-        listInPanel () {
-            if (this.searchMode) {
-                return this.searchAtomResult
-            } else {
-                return this.activeNodeType ? this.atomTypeList[this.activeNodeType] : []
+        props: {
+            singleAtomListLoading: {
+                type: Boolean
+            },
+            subAtomListLoading: {
+                type: Boolean
+            },
+            atomTypeList: {
+                type: Object,
+                required: true
+            },
+            searchAtomResult: {
+                type: Array
+            },
+            isDisableStartPoint: {
+                type: Boolean
+            },
+            isDisableEndPoint: {
+                type: Boolean
             }
         },
-        isGrouped () {
-            return !this.searchMode
+        data () {
+            return {
+                i18n: {
+                    tools: gettext('工具'),
+                    placeholder: gettext('请输入名称'),
+                    startpoint: gettext('开始'),
+                    endpoint: gettext('结束'),
+                    num: gettext('个')
+                },
+                nodeDict: node_list,
+                nodeTypeList,
+                activeNodeType: null,
+                searchStr: '',
+                showNodeList: false,
+                isCollapseAll: false,
+                isPinActived: false,
+                searchMode: false,
+                defaultTypeIcon: require('@/assets/images/atom-type-default.svg')
+            }
         },
-        showNoDataPanel () {
-            return this.activeNodeType && !this.listInPanel.length
-        }
-    },
-    created () {
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    mounted () {
-        window.addEventListener('click', this.handleOutOfMenuBarClick, false)
-    },
-    beforeDestroy () {
-        window.removeEventListener('click', this.handleOutOfMenuBarClick, false)
-    },
-    methods: {
-        onSelectNode (node) {
-            if (this.isNodeTypeHasSub(node)) {
-                this.activeNodeType = node
-                this.showNodeList = true
-            } else {
-                if (this.isPinActived) return
-                this.activeNodeType = null
-                this.showNodeList = false
+        computed: {
+            loading () {
+                if (this.activeNodeType === 'tasknode') {
+                    return this.singleAtomListLoading
+                } else {
+                    return this.subAtomListLoading
+                }
+            },
+            listInPanel () {
+                if (this.searchMode) {
+                    return this.searchAtomResult
+                } else {
+                    return this.activeNodeType ? this.atomTypeList[this.activeNodeType] : []
+                }
+            },
+            isGrouped () {
+                return !this.searchMode
+            },
+            showNoDataPanel () {
+                return this.activeNodeType && !this.listInPanel.length
             }
-            this.isCollapseAll = true
-            this.searchMode = false
-            this.searchStr = ''
-            this.$emit('show', this.showNodeList)
         },
-        onClickPin () {
-            this.isPinActived = !this.isPinActived
+        created () {
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
         },
-        handleOutOfMenuBarClick (event) {
-            const nodeListDOM = document.querySelector(".node-list")
-            if (this.showNodeList && !this.isPinActived && !domUtils.nodeContains(nodeListDOM, event.target)) {
-                this.showNodeList = false
-                this.$emit('show', this.showNodeList)
-            }
+        mounted () {
+            window.addEventListener('click', this.handleOutOfMenuBarClick, false)
+        },
+        beforeDestroy () {
+            window.removeEventListener('click', this.handleOutOfMenuBarClick, false)
         },
-        searchInputhandler () {
-            if (this.searchStr.length){
-                this.searchMode = true
-                this.$emit('onSearchAtom', {
-                    type: this.activeNodeType,
-                    text: this.searchStr
-                })
-            } else {
+        methods: {
+            onSelectNode (node) {
+                if (this.isNodeTypeHasSub(node)) {
+                    this.activeNodeType = node
+                    this.showNodeList = true
+                } else {
+                    if (this.isPinActived) return
+                    this.activeNodeType = null
+                    this.showNodeList = false
+                }
+                this.isCollapseAll = true
                 this.searchMode = false
+                this.searchStr = ''
+                this.$emit('show', this.showNodeList)
+            },
+            onClickPin () {
+                this.isPinActived = !this.isPinActived
+            },
+            handleOutOfMenuBarClick (event) {
+                const nodeListDOM = document.querySelector('.node-list')
+                if (this.showNodeList && !this.isPinActived && !domUtils.nodeContains(nodeListDOM, event.target)) {
+                    this.showNodeList = false
+                    this.$emit('show', this.showNodeList)
+                }
+            },
+            searchInputhandler () {
+                if (this.searchStr.length) {
+                    this.searchMode = true
+                    this.$emit('onSearchAtom', {
+                        type: this.activeNodeType,
+                        text: this.searchStr
+                    })
+                } else {
+                    this.searchMode = false
+                }
+            },
+            isNodeTypeHasSub (node) {
+                return nodeTypeSubList.indexOf(node) > -1
             }
-        },
-        isNodeTypeHasSub (node){
-            return nodeTypeSubList.indexOf(node) > -1
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/NodeCanvas.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/NodeCanvas.vue
index 28806a3f6d..3cb6ec6710 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/NodeCanvas.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/NodeCanvas.vue
@@ -14,10 +14,10 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'NodeCanvas'
-}
+    import '@/utils/i18n.js'
+    export default {
+        name: 'NodeCanvas'
+    }
 </script>
 <style lang="scss" scoped>
     @import '../../../scss/config.scss';
@@ -28,5 +28,3 @@ export default {
         background-size: 10px 10px;
     }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/NodeTemplate.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/NodeTemplate.vue
index 1245a02823..9eced1c0b3 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/NodeTemplate.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/NodeTemplate.vue
@@ -26,194 +26,192 @@
       @params hasUpdated {Boolean} 子流程节点是否有更新
       @params isActived {Boolean} 节点选择状态
     -->
-    <div id='node-template'>
+    <div id="node-template">
         <!-- 开始节点模板 -->
-        <script type='text/x-art-template' id='startpoint-template'>
+        <script type="text/x-art-template" id="startpoint-template">
             <div class="startpoint-node node-circle <%= status || ''%>">
-                <div class="node-type-status <%= status || ''%>">
-                     <span class="startpoint-span"> {{i18n.startPoint}}</span>
-                </div>
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <div class="node-type-status <%= status || ''%>">
+            <span class="startpoint-span"> {{i18n.startPoint}}</span>
+            </div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
             </div>
         </script>
         <!-- 终止节点模板 -->
-        <script type='text/x-art-template' id='endpoint-template'>
+        <script type="text/x-art-template" id="endpoint-template">
             <div class="endpoint-node node-circle <%= status || ''%>">
-                <div class="node-type-status <%= status || ''%>">
-                     <span class="endpoint-span"> {{ i18n.endPoint}}</span>
-                </div>
+            <div class="node-type-status <%= status || ''%>">
+            <span class="endpoint-span"> {{ i18n.endPoint}}</span>
+            </div>
                
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
             </div>
         </script>
         <!-- 并行网关节点模板 -->
-        <script type='text/x-art-template' id='parallelgateway-template'>
+        <script type="text/x-art-template" id="parallelgateway-template">
             <div class='parallelgateway-node node-circle <%= status || ''%>'>
-                <div class="common-icon-node-parallelgateway node-type-icon"></div>
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <div class="common-icon-node-parallelgateway node-type-icon"></div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
             </div>
         </script>
         <!-- 汇聚网关节点模板 -->
-        <script type='text/x-art-template' id='convergegateway-template'>
+        <script type="text/x-art-template" id="convergegateway-template">
             <div class='convergegateway-node node-circle <%= status || ''%>'>
-                <div class="common-icon-node-convergegateway node-type-icon"></div>
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <div class="common-icon-node-convergegateway node-type-icon"></div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
             </div>
         </script>
         <!-- 分支网关节点模板 -->
-        <script type='text/x-art-template' id='branchgateway-template'>
+        <script type="text/x-art-template" id="branchgateway-template">
             <div class='branchgateway-node node-circle <%= status || ''%>'>
-                <div class="common-icon-node-branchgateway node-type-icon"></div>
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <div class="common-icon-node-branchgateway node-type-icon"></div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
             </div>
         </script>
         <!-- 标准插件节点模板 -->
-        <script type='text/x-art-template' id='tasknode-template'>
+        <script type="text/x-art-template" id="tasknode-template">
             <div
-                class='node-tasknode node-with-text <%= status || ''%> <%= isActived ? 'isActived' : ''%>'
-                data-status=<%= status || ''%>
+            class='node-tasknode node-with-text <%= status || ''%> <%= isActived ? 'isActived' : ''%>'
+            data-status=<%= status || ''%>
             >
-                <div class='node-name'>
-                    <p class="name" title="<%= name %>"><%= name %></p>
-                </div>
-                <div class="task-name" title="<%= stage_name %>">
-                    <% if (stage_name) { %>
-                        <%= stage_name %>
-                    <% } %>
-                </div>
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
-                <!-- 节点右侧区域 -->
-                <% if (status === 'SUSPENDED' || status === 'RUNNING') { %>
-                    <div class="running-state">
-                        <% if (isShowClockIcon) { %>
-                            <i class="common-icon-clock"></i>
-                        <% } else { %>
-                        <% if (status === 'SUSPENDED') { %>
-                            <i class="common-icon-double-vertical-line"></i>
-                        <% } else if (status === 'RUNNING') { %>
-                            <i class="common-icon-loading"></i>
-                        <% }} %>
-                    </div>
-                <% } %>
-                <!-- 节点左侧区域 -->
-                <div class="task-operation">
-                    <% if (optional && mode !== 'execute') { %>
-                        <% if (mode === 'edit') { %>
-                            <div class="task-optional">
-                            </div>
-                        <% } else if (mode === 'select') { %>
-                            <div class="node-checkbox">
-                                <input
-                                    type="checkbox"
-                                    <%= checked ? "checked" : ""%>
-                                    id=<%= 'checkbox-' + id %>
-                                    data-id=<%= id %> />
-                                <label for=<%= 'checkbox-' + id %>></label>
-                            </div>
-                        <% } else if (mode === 'selectDisabled') { %>
-                            <div class="node-checkbox">
-                                <input
-                                    type="checkbox"
-                                    disabled
-                                    <%= checked ? "checked" : ""%>
-                                    id=<%= 'checkbox-' + id %>
-                                    data-id=<%= id %> />
-                                <label class="label-disabled" for=<%= 'checkbox-' + id %>></label>
-                            </div>
-                        <% } %>
-                    <% } %>
-                    <% if (error_ignorable && mode === 'edit') { %>
-                        <div class="dark-circle common-icon-dark-circle-i">
-                        </div>
-                    <% } %>
-                    <% if (isSkipped) { %>
-                        <div class="dark-circle common-icon-dark-circle-s">
-                        </div>
-                    <% } %>
-                    <% if (can_retry) { %>
-                        <div class="dark-circle common-icon-dark-circle-r">
-                        </div>
-                    <% } %>
-                </div>
+            <div class='node-name'>
+            <p class="name" title="<%= name %>"><%= name %></p>
+            </div>
+            <div class="task-name" title="<%= stage_name %>">
+            <% if (stage_name) { %>
+            <%= stage_name %>
+            <% } %>
+            </div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <!-- 节点右侧区域 -->
+            <% if (status === 'SUSPENDED' || status === 'RUNNING') { %>
+            <div class="running-state">
+            <% if (isShowClockIcon) { %>
+            <i class="common-icon-clock"></i>
+            <% } else { %>
+            <% if (status === 'SUSPENDED') { %>
+            <i class="common-icon-double-vertical-line"></i>
+            <% } else if (status === 'RUNNING') { %>
+            <i class="common-icon-loading"></i>
+            <% }} %>
+            </div>
+            <% } %>
+            <!-- 节点左侧区域 -->
+            <div class="task-operation">
+            <% if (optional && mode !== 'execute') { %>
+            <% if (mode === 'edit') { %>
+            <div class="task-optional">
+            </div>
+            <% } else if (mode === 'select') { %>
+            <div class="node-checkbox">
+            <input
+            type="checkbox"
+            <%= checked ? "checked" : ""%>
+            id=<%= 'checkbox-' + id %>
+            data-id=<%= id %> />
+            <label for=<%= 'checkbox-' + id %>></label>
+            </div>
+            <% } else if (mode === 'selectDisabled') { %>
+            <div class="node-checkbox">
+            <input
+            type="checkbox"
+            disabled
+            <%= checked ? "checked" : ""%>
+            id=<%= 'checkbox-' + id %>
+            data-id=<%= id %> />
+            <label class="label-disabled" for=<%= 'checkbox-' + id %>></label>
+            </div>
+            <% } %>
+            <% } %>
+            <% if (error_ignorable && mode === 'edit') { %>
+            <div class="dark-circle common-icon-dark-circle-i">
+            </div>
+            <% } %>
+            <% if (isSkipped) { %>
+            <div class="dark-circle common-icon-dark-circle-s">
+            </div>
+            <% } %>
+            <% if (can_retry) { %>
+            <div class="dark-circle common-icon-dark-circle-r">
+            </div>
+            <% } %>
+            </div>
             </div>
         </script>
         <!-- 子流程节点模板 -->
-        <script type='text/x-art-template' id='subflow-template'>
+        <script type="text/x-art-template" id="subflow-template">
             <div
-                class='node-subflow node-with-text <%= status || ''%> <%= isActived ? 'isActived' : ''%>'
-                data-status=<%= status || ''%>
+            class='node-subflow node-with-text <%= status || ''%> <%= isActived ? 'isActived' : ''%>'
+            data-status=<%= status || ''%>
             >
-                <div class='node-name'>
-                    <div class="subflow-node-icon">
-                        <div class="common-icon-add"></div>
-                    </div>
-                    <p class="name" title="<%= name %>"><%= name %></p>
-                </div>
-                <div class="task-name" title="<%= stage_name %>">
-                    <% if (stage_name) { %>
-                        <%= stage_name %>
-                    <% } %>
-                </div>
-                <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
-                <!-- 子流程节点有更新标识小红点 -->
-                <% if (hasUpdated) { %>
-                    <span class="updated-dot"></span>
-                <% } %>
-                <!-- 节点右侧区域 -->
-                <% if (status === 'SUSPENDED' || status === 'RUNNING') { %>
-                    <div class="running-state">
-                        <% if (status === 'SUSPENDED') { %>
-                            <i class="common-icon-double-vertical-line"></i>
-                        <% } else if (status === 'RUNNING') { %>
-                            <i class="common-icon-loading"></i>
-                        <% } %>
-                    </div>
-                <% } %>
-                <!-- 节点左侧区域 -->
-                <div class="task-operation">
-                    <% if (optional && mode !== 'execute') { %>
-                        <% if (mode === 'edit') { %>
-                        <div class="task-optional">
-                        </div>
-                        <% } else if (mode === 'select') { %>
-                            <div class="node-checkbox">
-                                <input
-                                    type="checkbox"
-                                    <%= checked ? "checked" : ""%>
-                                    id=<%= 'checkbox-' + id %>
-                                    data-id=<%= id %> />
-                                <label for=<%= 'checkbox-' + id %>></label>
-                            </div>
-                        <% } else if (mode === 'selectDisabled') { %>
-                            <div class="node-checkbox">
-                                <input
-                                    type="checkbox"
-                                    disabled
-                                    <%= checked ? "checked" : ""%>
-                                    id=<%= 'checkbox-' + id %>
-                                    data-id=<%= id %> />
-                                <label class="label-disabled" for=<%= 'checkbox-' + id %>></label>
-                            </div>
-                        <% } %>
-                    <% } %>
-                </div>
+            <div class='node-name'>
+            <div class="subflow-node-icon">
+            <div class="common-icon-add"></div>
+            </div>
+            <p class="name" title="<%= name %>"><%= name %></p>
+            </div>
+            <div class="task-name" title="<%= stage_name %>">
+            <% if (stage_name) { %>
+            <%= stage_name %>
+            <% } %>
+            </div>
+            <div class="common-icon-dark-circle-close" data-id=<%= id %> data-type=<%= type %>></div>
+            <!-- 子流程节点有更新标识小红点 -->
+            <% if (hasUpdated) { %>
+            <span class="updated-dot"></span>
+            <% } %>
+            <!-- 节点右侧区域 -->
+            <% if (status === 'SUSPENDED' || status === 'RUNNING') { %>
+            <div class="running-state">
+            <% if (status === 'SUSPENDED') { %>
+            <i class="common-icon-double-vertical-line"></i>
+            <% } else if (status === 'RUNNING') { %>
+            <i class="common-icon-loading"></i>
+            <% } %>
+            </div>
+            <% } %>
+            <!-- 节点左侧区域 -->
+            <div class="task-operation">
+            <% if (optional && mode !== 'execute') { %>
+            <% if (mode === 'edit') { %>
+            <div class="task-optional">
+            </div>
+            <% } else if (mode === 'select') { %>
+            <div class="node-checkbox">
+            <input
+            type="checkbox"
+            <%= checked ? "checked" : ""%>
+            id=<%= 'checkbox-' + id %>
+            data-id=<%= id %> />
+            <label for=<%= 'checkbox-' + id %>></label>
+            </div>
+            <% } else if (mode === 'selectDisabled') { %>
+            <div class="node-checkbox">
+            <input
+            type="checkbox"
+            disabled
+            <%= checked ? "checked" : ""%>
+            id=<%= 'checkbox-' + id %>
+            data-id=<%= id %> />
+            <label class="label-disabled" for=<%= 'checkbox-' + id %>></label>
+            </div>
+            <% } %>
+            <% } %>
+            </div>
             </div>
         </script>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'NodeTemplate',
-    data () {
-        return {
-            i18n: {
-                startPoint: gettext('开始'),
-                endPoint: gettext('结束')
+    import '@/utils/i18n.js'
+    export default {
+        name: 'NodeTemplate',
+        data () {
+            return {
+                i18n: {
+                    startPoint: gettext('开始'),
+                    endPoint: gettext('结束')
+                }
             }
         }
     }
-}
 </script>
-
-
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
index 4d860a3a47..ef5c09d847 100644
--- a/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
+++ b/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
@@ -11,7 +11,7 @@
 */
 <template>
     <div
-        :class="['pipeline-canvas', {'is-edit': isEdit}]"
+        :class="['pipeline-canvas', { 'is-edit': isEdit }]"
         id="pipelineCanvas"
         ref="pipelineCanvas">
         <ConfigBar
@@ -20,24 +20,24 @@
             :cc_id="cc_id"
             :common="common"
             :template_id="template_id"
-            :isTemplateDataChanged="isTemplateDataChanged"
-            :templateSaving="templateSaving"
-            :createTaskSaving="createTaskSaving"
+            :is-template-data-changed="isTemplateDataChanged"
+            :template-saving="templateSaving"
+            :create-task-saving="createTaskSaving"
             @onChangeName="onChangeName"
             @onSaveTemplate="onSaveTemplate">
         </ConfigBar>
         <MenuBar
             v-if="isMenuBarShow"
-            :singleAtomListLoading="singleAtomListLoading"
-            :subAtomListLoading="subAtomListLoading"
-            :atomTypeList="atomTypeList"
-            :searchAtomResult="searchAtomResult"
-            :isDisableStartPoint="isDisableStartPoint"
-            :isDisableEndPoint="isDisableEndPoint"
+            :single-atom-list-loading="singleAtomListLoading"
+            :sub-atom-list-loading="subAtomListLoading"
+            :atom-type-list="atomTypeList"
+            :search-atom-result="searchAtomResult"
+            :is-disable-start-point="isDisableStartPoint"
+            :is-disable-end-point="isDisableEndPoint"
             @show="onMenuBarShow"
             @onSearchAtom="onSearchAtom">
         </MenuBar>
-        <div :class="['tool-wrapper',{'tool-wrapper-telescopic ': showNodeList}]">
+        <div :class="['tool-wrapper',{ 'tool-wrapper-telescopic ': showNodeList }]">
             <transition name="wrapperLeft">
                 <div class="tool-position">
                     <bk-tooltip :content="i18n.zoomIn" :delay="1000">
@@ -57,7 +57,7 @@
                     </bk-tooltip>
                     <bk-tooltip :content="i18n.nodeSelection" :delay="1000" v-if="isEdit">
                         <div
-                            :class="['tool-icon', {'actived': isSelectionOpen}]"
+                            :class="['tool-icon', { 'actived': isSelectionOpen }]"
                             @click="onOpenDragSelection">
                             <i class="common-icon-marquee"></i>
                         </div>
@@ -77,7 +77,7 @@
                                 'common-icon-black-box': !isSelectAll,
                                 'common-icon-black-hook': isSelectAll,
                                 'tool-disable': isPreviewMode
-                                }]"></i>
+                            }]"></i>
                         </div>
                     </bk-tooltip>
                 </div>
@@ -87,535 +87,531 @@
             <span class="atom-number">{{i18n.added}} {{atomNumber}} {{i18n.node}}</span>
         </div>
         <NodeCanvas id="nodeCanvas"></NodeCanvas>
-        <NodeTemplate/>
+        <NodeTemplate />
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import '@/assets/js/bkflow.js'
-import nodeFilter from '@/utils/nodeFilter.js'
-import { uuid } from '@/utils/uuid.js'
-import tools from '@/utils/tools.js'
-import validatePipeline from '@/utils/validatePipeline.js'
-import { NODE_DICT } from '@/constants/index.js'
-import NodeTemplate from './NodeTemplate.vue'
-import ConfigBar from './ConfigBar.vue'
-import MenuBar from './MenuBar.vue'
-import NodeCanvas from './NodeCanvas.vue'
-import formatPositionUtils from '@/utils/formatPosition.js'
-import draft from '@/utils/draft.js'
-import toolsUtils from '@/utils/tools.js'
+    import '@/utils/i18n.js'
+    import '@/assets/js/bkflow.js'
+    import { uuid } from '@/utils/uuid.js'
+    import tools from '@/utils/tools.js'
+    import validatePipeline from '@/utils/validatePipeline.js'
+    import NodeTemplate from './NodeTemplate.vue'
+    import ConfigBar from './ConfigBar.vue'
+    import MenuBar from './MenuBar.vue'
+    import NodeCanvas from './NodeCanvas.vue'
+    import formatPositionUtils from '@/utils/formatPosition.js'
 
-const ENDPOINT_DIRECTION = ['Top', 'Left', 'Right', 'Bottom']
-export default {
-    name: 'PipelineCanvas',
-    props: {
-        isMenuBarShow: {
-            type: Boolean,
-            default () {
-                return true
+    const ENDPOINT_DIRECTION = ['Top', 'Left', 'Right', 'Bottom']
+    
+    export default {
+        name: 'PipelineCanvas',
+        components: {
+            NodeTemplate,
+            ConfigBar,
+            MenuBar,
+            NodeCanvas
+        },
+        props: {
+            isMenuBarShow: {
+                type: Boolean,
+                default () {
+                    return true
+                }
+            },
+            isConfigBarShow: {
+                type: Boolean,
+                default () {
+                    return true
+                }
+            },
+            isEdit: {
+                type: Boolean,
+                default () {
+                    return true
+                }
+            },
+            singleAtomListLoading: {
+                type: Boolean
+            },
+            subAtomListLoading: {
+                type: Boolean
+            },
+            templateSaving: {
+                type: Boolean
+            },
+            createTaskSaving: {
+                type: Boolean
+            },
+            atomTypeList: {
+                type: Object,
+                required: false
+            },
+            searchAtomResult: {
+                type: Array
+            },
+            canvasData: {
+                type: Object,
+                default () {
+                    return {
+                        'lines': [],
+                        'locations': []
+                    }
+                }
+            },
+            name: {
+                type: String,
+                required: false
+            },
+            cc_id: {
+                type: String,
+                required: false
+            },
+            template_id: {
+                type: String,
+                required: false
+            },
+            common: {
+                type: String,
+                required: false
+            },
+            isTemplateDataChanged: {
+                type: Boolean
+            },
+            isSelectNode: {
+                type: Boolean,
+                default: false
+            },
+            selectNodeType: {
+                type: Boolean,
+                default: false
+            },
+            isPreviewMode: {
+                type: Boolean,
+                default: false
+            },
+            isSelectAllNode: {
+                type: Boolean,
+                default: false
             }
         },
-        isConfigBarShow: {
-            type: Boolean,
-            default () {
-                return true
+        data () {
+            return {
+                i18n: {
+                    resetZoom: gettext('复位'),
+                    zoomIn: gettext('放大'),
+                    zoomOut: gettext('缩小'),
+                    nodeSelection: gettext('节点框选'),
+                    formatPosition: gettext('排版'),
+                    choiceAll: gettext('全选'),
+                    cancelChoiceAll: gettext('反选'),
+                    added: gettext('已添加'),
+                    node: gettext('个任务节点')
+                },
+                zoomRadio: 1,
+                nodeTypeUniqueInCanvas: ['startpoint', 'endpoint'],
+                limitSingleInput: ['endpoint', 'parallelgateway', 'branchgateway', 'tasknode', 'subflow'],
+                limitSingleOutput: ['startponit', 'convergegateway', 'tasknode', 'subflow'],
+                opts: {
+                    canvas: '#nodeCanvas', // 画布
+                    template: '#node-template', // 可配置的模版
+                    tools: '.node-source', // 流程拖动源
+                    locationConfig: {
+                        startpoint: ENDPOINT_DIRECTION,
+                        endpoint: ENDPOINT_DIRECTION,
+                        parallelgateway: ENDPOINT_DIRECTION,
+                        convergegateway: ENDPOINT_DIRECTION,
+                        branchgateway: ENDPOINT_DIRECTION,
+                        tasknode: ENDPOINT_DIRECTION,
+                        subflow: ENDPOINT_DIRECTION
+                    }, // 节点的类型和端点的位置
+                    lineWidth: 3, // 线的宽度 默认为2
+                    fillColor: '#348af3', // 高亮颜色
+                    defaultColor: '#a9adb6', // 默认颜色
+                    lineRadius: 1, // 线拐弯弧度
+                    pointColor: 'rgba(52, 138, 243, 0.15)', // 端点的颜色
+                    pointWidth: 3, // 连接端点的半径
+                    pointDistance: 0, // 端点与线的距离
+                    data: tools.deepClone(this.canvasData), // 渲染的数据源,
+                    id: 'node', // 配置渲染的节点id
+                    isEdit: this.isEdit, // 是否编辑
+                    dropElevent: null, // 拖拽的数据源
+
+                    getDefaultLocation: this.getDefaultLocation, // 获取某一类型节点的初始化节点数据
+                    onCreateLocationBefore: this.onCreateLocationBefore, // 节点创建前事件回调
+                    onCreateLocationAfter: this.onCreateLocationAfter, // 节点创建初始化后事件回调, 参数为节点id
+                    onCreateLineAfter: this.onCreateLineAfter, // 创建线条后事件回调
+                    onRemoveLineAfter: this.onRemoveLineAfter, // 删除线之后的回调函数
+                    onNodeMoveAfter: this.onNodeMoveAfter, // 拖动节点停止后的回调函数
+                    ondrawData: null, // 渲染流程后回调
+                    onLineDragStop: this.onLineDragStop, // 节点端点拖拽连线结束回调
+                    onNodeClick: this.onNodeClick, // 标准插件节点点击事件回调
+                    onLabelBlur: this.onLabelBlur, // 标准插件节点点击事件回调
+                    onLocationMoveAfter: this.onLocationMoveAfter, // 标准插件节点移动事件回调
+                    onRemoveLocationAfter: this.onRemoveLocationAfter, // 删除标准插件节点事件回调
+                    onCopyElement: this.onCopyElement, // 复制节点、连线回调
+                    onPasteElement: this.onPasteElement, // 粘贴节点、连线回调
+                    onDeleteElement: this.onDeleteElement, // 删除节点、连线回调
+                    onCloseDragSelection: this.onCloseDragSelection // 关闭节点框选回调
+                },
+                isDisableStartPoint: false,
+                isDisableEndPoint: false,
+                showNodeList: '',
+                isSelectionOpen: false,
+                nodesOfCopyed: [],
+                isSelectAll: this.isSelectAllNode
             }
         },
-        isEdit: {
-            type: Boolean,
-            default () {
-                return true
+        computed: {
+            locationsObj () {
+                return this.transformArrayToObj(this.canvasData.locations)
+            },
+            selectNodeName () {
+                return this.isSelectAll ? this.i18n.choiceAll : this.i18n.cancelChoiceAll
+            },
+            atomNumber () {
+                return this.canvasData.activities && this.isEdit ? Object.keys(this.canvasData.activities).length : 0
             }
         },
-        singleAtomListLoading: {
-            type: Boolean
-        },
-        subAtomListLoading: {
-            type: Boolean
-        },
-        templateSaving: {
-            type: Boolean
+        watch: {
+            zoomRadio (val) {
+                this.dataFlowInstance.setZoom(val)
+            }
         },
-        createTaskSaving: {
-            type: Boolean
+        created () {
+            this.onFormatPosition = tools.debounce(this.formatPositionHandler, 500)
         },
-        atomTypeList: {
-            type: Object,
-            required: false
+        mounted () {
+            const canvasInstance = $('#pipelineCanvas').dataflow(this.opts)
+            this.canvasInstance = canvasInstance
+            this.dataFlowInstance = $('#pipelineCanvas').data('dataflow')
+            this.$refs.pipelineCanvas.addEventListener('click', this.handleDeleteNode, 'false')
+            this.isDisableStartPoint = !!this.canvasData.locations.find((location) => location.type === 'startpoint')
+            this.isDisableEndPoint = !!this.canvasData.locations.find((location) => location.type === 'endpoint')
         },
-        searchAtomResult: {
-            type: Array
+        beforeDestroy () {
+            this.$refs.pipelineCanvas.removeEventListener('click', this.handleDeleteNode, 'false')
         },
-        canvasData: {
-            type: Object,
-            default () {
+        methods: {
+            getDefaultLocation (type) {
                 return {
-                    'lines': [],
-                    'locations': []
+                    id: uuid(),
+                    atomId: '',
+                    stage_name: gettext('步骤1'),
+                    optional: false,
+                    error_ignorable: false,
+                    mode: 'edit', // edit：编辑模板；select：选择节点；excute：执行任务；preview：预览
+                    checked: true, // 节点选中状态
+                    can_retry: true,
+                    isSkipped: true
                 }
-            }
-        },
-        name: {
-            type: String,
-            required: false
-        },
-        cc_id: {
-            type: String,
-            required: false
-        },
-        template_id: {
-            type: String,
-            required: false
-        },
-        common: {
-            type: String,
-            required: false
-        },
-        isTemplateDataChanged: {
-            type: Boolean
-        },
-        isSelectNode: {
-            type: Boolean,
-            default: false
-        },
-        selectNodeType: {
-            type: Boolean,
-            default: false
-        },
-        isPreviewMode: {
-            type: Boolean,
-            default: false
-        },
-        isSelectAllNode: {
-            type: Boolean,
-            default: false
-        }
-    },
-    components: {
-        NodeTemplate,
-        ConfigBar,
-        MenuBar,
-        NodeCanvas
-    },
-    data () {
-        return {
-            i18n: {
-                resetZoom: gettext('复位'),
-                zoomIn: gettext('放大'),
-                zoomOut: gettext('缩小'),
-                nodeSelection: gettext('节点框选'),
-                formatPosition: gettext('排版'),
-                choiceAll: gettext('全选'),
-                cancelChoiceAll: gettext('反选'),
-                added: gettext('已添加'),
-                node: gettext('个任务节点')
-            },
-            zoomRadio: 1,
-            nodeTypeUniqueInCanvas: ['startpoint', 'endpoint'],
-            limitSingleInput: ['endpoint', 'parallelgateway', 'branchgateway', 'tasknode', 'subflow'],
-            limitSingleOutput: ['startponit', 'convergegateway', 'tasknode', 'subflow'],
-            opts: {
-                canvas: "#nodeCanvas",  // 画布
-                template: "#node-template",  // 可配置的模版
-                tools: ".node-source",  // 流程拖动源
-                locationConfig: {
-                    startpoint: ENDPOINT_DIRECTION,
-                    endpoint: ENDPOINT_DIRECTION,
-                    parallelgateway: ENDPOINT_DIRECTION,
-                    convergegateway: ENDPOINT_DIRECTION,
-                    branchgateway: ENDPOINT_DIRECTION,
-                    tasknode: ENDPOINT_DIRECTION,
-                    subflow: ENDPOINT_DIRECTION
-                },  // 节点的类型和端点的位置
-                lineWidth: 3,  // 线的宽度 默认为2
-                fillColor: '#348af3',  // 高亮颜色
-                defaultColor: '#a9adb6',  // 默认颜色
-                lineRadius: 1, // 线拐弯弧度
-                pointColor: 'rgba(52, 138, 243, 0.15)',  // 端点的颜色
-                pointWidth: 3,  // 连接端点的半径
-                pointDistance: 0,  // 端点与线的距离
-                data: tools.deepClone(this.canvasData), // 渲染的数据源,
-                id: 'node',  // 配置渲染的节点id
-                isEdit: this.isEdit,  // 是否编辑
-                dropElevent: null,  // 拖拽的数据源
-
-                getDefaultLocation: this.getDefaultLocation,  // 获取某一类型节点的初始化节点数据
-                onCreateLocationBefore: this.onCreateLocationBefore, // 节点创建前事件回调
-                onCreateLocationAfter: this.onCreateLocationAfter, // 节点创建初始化后事件回调, 参数为节点id
-                onCreateLineAfter: this.onCreateLineAfter, // 创建线条后事件回调
-                onRemoveLineAfter: this.onRemoveLineAfter,  // 删除线之后的回调函数
-                onNodeMoveAfter: this.onNodeMoveAfter,  // 拖动节点停止后的回调函数
-                ondrawData: null,  // 渲染流程后回调
-                onLineDragStop: this.onLineDragStop, // 节点端点拖拽连线结束回调
-                onNodeClick: this.onNodeClick, // 标准插件节点点击事件回调
-                onLabelBlur: this.onLabelBlur, // 标准插件节点点击事件回调
-                onLocationMoveAfter: this.onLocationMoveAfter, // 标准插件节点移动事件回调
-                onRemoveLocationAfter: this.onRemoveLocationAfter, // 删除标准插件节点事件回调
-                onCopyElement: this.onCopyElement, // 复制节点、连线回调
-                onPasteElement: this.onPasteElement, // 粘贴节点、连线回调
-                onDeleteElement: this.onDeleteElement, // 删除节点、连线回调
-                onCloseDragSelection: this.onCloseDragSelection // 关闭节点框选回调
-            },
-            isDisableStartPoint: false,
-            isDisableEndPoint: false,
-            showNodeList: '',
-            isSelectionOpen: false,
-            nodesOfCopyed: [],
-            isSelectAll: this.isSelectAllNode
-        }
-    },
-    computed: {
-        locationsObj () {
-            return this.transformArrayToObj(this.canvasData.locations)
-        },
-        selectNodeName () {
-            return this.isSelectAll ? this.i18n.choiceAll : this.i18n.cancelChoiceAll
-        },
-        atomNumber () {
-            return this.canvasData.activities && this.isEdit ? Object.keys(this.canvasData.activities).length : 0
-        }
-    },
-    watch: {
-        zoomRadio (val) {
-            this.dataFlowInstance.setZoom(val)
-        }
-    },
-    created () {
-        this.onFormatPosition = toolsUtils.debounce(this.formatPositionHandler, 500)
-    },
-    mounted () {
-        const canvasInstance = $("#pipelineCanvas").dataflow(this.opts)
-        this.canvasInstance = canvasInstance
-        this.dataFlowInstance = $('#pipelineCanvas').data('dataflow')
-        this.$refs.pipelineCanvas.addEventListener('click', this.handleDeleteNode, 'false')
-        this.isDisableStartPoint = this.canvasData.locations.find((location) => location.type === 'startpoint') ? true : false
-        this.isDisableEndPoint = this.canvasData.locations.find((location) => location.type === 'endpoint') ? true : false
-    },
-    beforeDestroy () {
-        this.$refs.pipelineCanvas.removeEventListener('click', this.handleDeleteNode, 'false')
-    },
-    methods: {
-        getDefaultLocation (type) {
-            return {
-                id: uuid(),
-                atomId: '',
-                stage_name: gettext('步骤1'),
-                optional: false,
-                error_ignorable: false,
-                mode: 'edit', // edit：编辑模板；select：选择节点；excute：执行任务；preview：预览
-                checked: true, // 节点选中状态
-                can_retry: true,
-                isSkipped: true
-            }
-        },
-        transformArrayToObj (data) {
-            const obj = {}
-            data.forEach(item => {
-                obj[item.id] = tools.deepClone(item)
-            })
-            return obj
-        },
-        /**
-         * 获取包含连线目标端点的节点
-         * @param {Object} 端点 DOM 对象
-         */
-        getNodeWithEndpoint (endpoint) {
-            const parentEl = endpoint.parentNode
+            },
+            transformArrayToObj (data) {
+                const obj = {}
+                data.forEach(item => {
+                    obj[item.id] = tools.deepClone(item)
+                })
+                return obj
+            },
+            /**
+             * 获取包含连线目标端点的节点
+             * @param {Object} 端点 DOM 对象
+             */
+            getNodeWithEndpoint (endpoint) {
+                const parentEl = endpoint.parentNode
 
-            if (!parentEl || parentEl.nodeName === 'HTML') {
-                return false
-            }
+                if (!parentEl || parentEl.nodeName === 'HTML') {
+                    return false
+                }
 
-            if (parentEl.classList.contains('bk-flow-location')) {
-                return parentEl
-            } else {
-                return this.getNodeWithEndpoint(parentEl)
-            }
-        },
-        onCreateLocationBefore (loc) {
-            const validateMessage = validatePipeline.isLocationValid(loc, this.canvasData.locations)
+                if (parentEl.classList.contains('bk-flow-location')) {
+                    return parentEl
+                } else {
+                    return this.getNodeWithEndpoint(parentEl)
+                }
+            },
+            onCreateLocationBefore (loc) {
+                const validateMessage = validatePipeline.isLocationValid(loc, this.canvasData.locations)
 
-            if (!validateMessage.result) {
-                this.$bkMessage({
-                    message: validateMessage.message,
-                    theme: 'warning'
-                })
-                return false
-            }
-            return true
-        },
-        onCreateLocationAfter (loc) {
-            this.$emit('onLocationChange', 'add', Object.assign({}, loc))
-            if (loc.type === 'startpoint') {
-                this.isDisableStartPoint = true
-            } else if (loc.type === 'endpoint') {
-                this.isDisableEndPoint = true
-            }
-        },
-        onLineDragStop (line, event, connection) {
-            let validateMessage
-            if (!line.target.arrow) {
-                const nodeEl = this.getNodeWithEndpoint(event.target)
-                if (!nodeEl) { // 无效连线
+                if (!validateMessage.result) {
+                    this.$bkMessage({
+                        message: validateMessage.message,
+                        theme: 'warning'
+                    })
                     return false
-                } else { // 连线端点在节点上自动吸附
-                    if (line.source.id === nodeEl.id) {
-                        return false // 节点不可以连接自身
-                    }
-                    let arrow
-                    const nodeRects = nodeEl.getBoundingClientRect()
-                    const offsetX = event.clientX - nodeRects.left
-                    const offsetY = event.clientY - nodeRects.top
-                    if (offsetX < nodeRects.width / 2) {
-                        if (offsetY < nodeRects.height / 2) {
-                            arrow = offsetX > offsetY ? 'Top' : 'Left'
-                        } else {
-                            arrow = offsetX > (nodeRects.height - offsetY) ? 'Bottom' : 'Left'
+                }
+                return true
+            },
+            onCreateLocationAfter (loc) {
+                this.$emit('onLocationChange', 'add', Object.assign({}, loc))
+                if (loc.type === 'startpoint') {
+                    this.isDisableStartPoint = true
+                } else if (loc.type === 'endpoint') {
+                    this.isDisableEndPoint = true
+                }
+            },
+            onLineDragStop (line, event, connection) {
+                let validateMessage
+                if (!line.target.arrow) {
+                    const nodeEl = this.getNodeWithEndpoint(event.target)
+                    if (!nodeEl) { // 无效连线
+                        return false
+                    } else { // 连线端点在节点上自动吸附
+                        if (line.source.id === nodeEl.id) {
+                            return false // 节点不可以连接自身
                         }
-                    } else {
-                        if (offsetY < nodeRects.height / 2) {
-                            arrow = (nodeRects.width - offsetX) > offsetY ? 'Top' : 'right'
+                        let arrow
+                        const nodeRects = nodeEl.getBoundingClientRect()
+                        const offsetX = event.clientX - nodeRects.left
+                        const offsetY = event.clientY - nodeRects.top
+                        if (offsetX < nodeRects.width / 2) {
+                            if (offsetY < nodeRects.height / 2) {
+                                arrow = offsetX > offsetY ? 'Top' : 'Left'
+                            } else {
+                                arrow = offsetX > (nodeRects.height - offsetY) ? 'Bottom' : 'Left'
+                            }
                         } else {
-                            arrow = (nodeRects.width - offsetX) > (nodeRects.height - offsetY) ? 'Bottom' : 'Right'
+                            if (offsetY < nodeRects.height / 2) {
+                                arrow = (nodeRects.width - offsetX) > offsetY ? 'Top' : 'right'
+                            } else {
+                                arrow = (nodeRects.width - offsetX) > (nodeRects.height - offsetY) ? 'Bottom' : 'Right'
+                            }
                         }
-                    }
 
-                    line.target = {
-                        arrow,
-                        id: nodeEl.id
+                        line.target = {
+                            arrow,
+                            id: nodeEl.id
+                        }
+                        validateMessage = validatePipeline.isLineValid(line, this.canvasData)
+                        validateMessage.result && this.dataFlowInstance.createLine(line)
                     }
+                } else {
                     validateMessage = validatePipeline.isLineValid(line, this.canvasData)
-                    validateMessage.result && this.dataFlowInstance.createLine(line)
                 }
-            } else {
-                validateMessage = validatePipeline.isLineValid(line, this.canvasData)
-            }
 
-            if (!validateMessage.result) {
-                this.$bkMessage({
-                    message: validateMessage.message,
-                    theme: 'warning'
-                })
-                return false
-            }
-            return true
-        },
-        onCreateLineAfter (line) {
-            this.$emit('onLineChange', 'add',  line)
-            this.$nextTick(function () {
-                const branchInfo = this.canvasData.branchConditions[line.source.id]
-                if (branchInfo) {
-                    const lineId = this.canvasData.lines.filter(item => {
-                        return item.source.id === line.source.id && item.target.id === line.target.id
-                    })[0].id
-                    const labelName = branchInfo[lineId].evaluate
-                    const labelData = {
-                        id: lineId,
-                        nodeId: line.source.id,
-                        name: labelName
-                    }
-                    this.dataFlowInstance.addLabel(line, labelData)
+                if (!validateMessage.result) {
+                    this.$bkMessage({
+                        message: validateMessage.message,
+                        theme: 'warning'
+                    })
+                    return false
                 }
-            })
-
-        },
-        onRemoveLineAfter (line) {
-            this.$emit('onLineChange', 'delete', line)
-        },
-        onLocationMoveAfter (loc) {
-            this.$emit('onLocationMoveDone', loc)
-        },
-        onOpenDragSelection () {
-            this.dataFlowInstance.setDragSelection(true)
-            this.isSelectionOpen = true
-        },
-        onCloseDragSelection () {
-            this.isSelectionOpen = false
-        },
-        onZoomIn () {
-            this.zoomRadio = this.zoomRadio * 1.1
-        },
-        onZoomOut () {
-            this.zoomRadio = this.zoomRadio * 0.9
-        },
-        onResetPosition () {
-            this.dataFlowInstance.resetLocation()
-            this.zoomRadio = 1
-        },
-        formatPositionHandler () {
-            const validateMessage = validatePipeline.isDataValid(this.canvasData)
-            // 判断是否结构完整
-            if (!validateMessage.result) {
-                this.$bkMessage({
-                    message: validateMessage.message,
-                    theme: 'error'
+                return true
+            },
+            onCreateLineAfter (line) {
+                this.$emit('onLineChange', 'add', line)
+                this.$nextTick(function () {
+                    const branchInfo = this.canvasData.branchConditions[line.source.id]
+                    if (branchInfo) {
+                        const lineId = this.canvasData.lines.filter(item => {
+                            return item.source.id === line.source.id && item.target.id === line.target.id
+                        })[0].id
+                        const labelName = branchInfo[lineId].evaluate
+                        const labelData = {
+                            id: lineId,
+                            nodeId: line.source.id,
+                            name: labelName
+                        }
+                        this.dataFlowInstance.addLabel(line, labelData)
+                    }
                 })
-                return false
-            }
-            // 恢复大小后进行编排
-            this.onResetPosition()
+            },
+            onRemoveLineAfter (line) {
+                this.$emit('onLineChange', 'delete', line)
+            },
+            onLocationMoveAfter (loc) {
+                this.$emit('onLocationMoveDone', loc)
+            },
+            onOpenDragSelection () {
+                this.dataFlowInstance.setDragSelection(true)
+                this.isSelectionOpen = true
+            },
+            onCloseDragSelection () {
+                this.isSelectionOpen = false
+            },
+            onZoomIn () {
+                this.zoomRadio = this.zoomRadio * 1.1
+            },
+            onZoomOut () {
+                this.zoomRadio = this.zoomRadio * 0.9
+            },
+            onResetPosition () {
+                this.dataFlowInstance.resetLocation()
+                this.zoomRadio = 1
+            },
+            formatPositionHandler () {
+                const validateMessage = validatePipeline.isDataValid(this.canvasData)
+                // 判断是否结构完整
+                if (!validateMessage.result) {
+                    this.$bkMessage({
+                        message: validateMessage.message,
+                        theme: 'error'
+                    })
+                    return false
+                }
+                // 恢复大小后进行编排
+                this.onResetPosition()
 
-            // 需要做深拷贝一次 防止改变vue store内容
-            let lines = tools.deepClone(this.canvasData.lines)
-            let locations = this.canvasData.locations
-            let data = formatPositionUtils.formatPosition(lines, locations)
+                // 需要做深拷贝一次 防止改变vue store内容
+                const lines = tools.deepClone(this.canvasData.lines)
+                const locations = this.canvasData.locations
+                const data = formatPositionUtils.formatPosition(lines, locations)
 
-            this.onNewDraft(gettext('排版自动保存'), false)
-            let message = gettext('排版完成，原内容在本地缓存中')
-            // 重绘Canvas
-            this.dataFlowInstance.updateCanvas(data)
-            const {overBorderLine} = data
-            if (overBorderLine.length !== 0) {
-                overBorderLine.forEach(line => {
-                    const config = [
-                        'Flowchart', // 流程图种类
-                        {
-                            stub: [5, 20], // 起始端点连接线的最小长度
-                            gap: 8, // 线与端点点最小间隔
-                            cornerRadius: 2, // 折线弧度
-                            alwaysRespectStubs: true, // 允许 stub 配置生效
-                            midpoint: line.midpoint// 折线比例
+                this.onNewDraft(gettext('排版自动保存'), false)
+                const message = gettext('排版完成，原内容在本地缓存中')
+                // 重绘Canvas
+                this.dataFlowInstance.updateCanvas(data)
+                const { overBorderLine } = data
+                if (overBorderLine.length !== 0) {
+                    overBorderLine.forEach(line => {
+                        const config = [
+                            'Flowchart', // 流程图种类
+                            {
+                                stub: [5, 20], // 起始端点连接线的最小长度
+                                gap: 8, // 线与端点点最小间隔
+                                cornerRadius: 2, // 折线弧度
+                                alwaysRespectStubs: true, // 允许 stub 配置生效
+                                midpoint: line.midpoint// 折线比例
                             // todo:需要增加midpoint数据的source,target,midpoint数据进行后台和前端保存
-                        }
-                    ]
-                    this.dataFlowInstance.setConnector(line.source, line.target, config)
-                })
-            }
-            // 提示信息
-            this.$bkMessage({
-                message: message,
-                theme: 'success'
-            })
-            // 改变store中的line和location内容
-            this.onReplaceLineAndLocation(data)
-        },
-        handleDeleteNode (event) {
-            const node = event.target
-            if (!node.classList.contains('common-icon-dark-circle-close')) return
-            const id = node.dataset.id
-            const type = node.dataset.type
-            if (this.canvasInstance && id && type) {
-                this.dataFlowInstance.deleteLocation(id)
-                this.$emit('onLocationChange', 'delete', {id, type})
-            }
-            if (type === 'startpoint' ) {
-                this.isDisableStartPoint = false
-            } else if (type === 'endpoint') {
-                this.isDisableEndPoint = false
-            }
-        },
-        onNodeClick (id) {
-            this.$emit('onNodeClick', id)
-        },
-        onLabelBlur (labelData) {
-            this.$emit('onLabelBlur', labelData)
-        },
-        onUpdateNodeInfo (id, data) {
-            this.dataFlowInstance.updateLocationById(id, data)
-        },
-        onUpdateCanvas (data) {
-            this.dataFlowInstance.updateCanvas(data)
-        },
-        onSearchAtom (data) {
-            this.$emit('onSearchAtom', data)
-        },
-        onChangeName (name) {
-            this.$emit('onChangeName', name)
-        },
-        onSaveTemplate (saveAndCreate) {
-            const validateMessage = validatePipeline.isDataValid(this.canvasData)
-            if (!validateMessage.result) {
+                            }
+                        ]
+                        this.dataFlowInstance.setConnector(line.source, line.target, config)
+                    })
+                }
+                // 提示信息
                 this.$bkMessage({
-                    message: validateMessage.message,
-                    theme: 'error'
+                    message: message,
+                    theme: 'success'
                 })
-                return false
-            }
-            this.$emit('onSaveTemplate', saveAndCreate)
-        },
-        onNewDraft (message) {
-            this.$emit('onNewDraft', message)
-        },
-        onReplaceLineAndLocation (data) {
-            this.$emit('onReplaceLineAndLocation', data)
-        },
-        onMenuBarShow (val) {
-            this.showNodeList = val
-        },
-        onCopyElement (data) {
-            this.nodesOfCopyed = data
-        },
-        /**
-         * 节点粘贴
-         * @param {Number} x 节点 x 坐标偏移量
-         * @param {Number} y 节点 y 坐标偏移量
-         * @return {Array} 返回新增的节点
-         */
-        onPasteElement (x, y) {
-            const {locations, lines} = this.createCopyOfSelectedNodes()
-            locations.forEach(location => {
-                location.x += x
-                location.y += y
-                this.dataFlowInstance.createLocation(location)
-            })
-            lines.forEach(line => {
-                this.dataFlowInstance.createLine(line)
-            })
-            return locations
-        },
-        onDeleteElement (data) {
-            data.forEach(id => {
-                const node = {
-                    id,
-                    type: this.locationsObj[id].type
+                // 改变store中的line和location内容
+                this.onReplaceLineAndLocation(data)
+            },
+            handleDeleteNode (event) {
+                const node = event.target
+                if (!node.classList.contains('common-icon-dark-circle-close')) return
+                const id = node.dataset.id
+                const type = node.dataset.type
+                if (this.canvasInstance && id && type) {
+                    this.dataFlowInstance.deleteLocation(id)
+                    this.$emit('onLocationChange', 'delete', { id, type })
                 }
-                this.dataFlowInstance.deleteLocation(id)
-                this.$emit('onLocationChange', 'delete', node)
-            })
-        },
-        createCopyOfSelectedNodes () {
-            const lines = []
-            const locations = []
-            const locationIdReplaceHash = {} // 节点 id 替换映射表
-            const lineIdReplaceHash = {} // 连线 id 替换映射表
-            this.nodesOfCopyed.forEach((id, index) => {
-                const location = tools.deepClone(this.locationsObj[id])
-                const activity = tools.deepClone(this.canvasData.activities[id])
-                locationIdReplaceHash[id] = location.id = 'node' + uuid()
-
-                // 复制 location 数据
-                if (activity) {
-                    location.atomId = activity.type === 'ServiceActivity' ? activity.component.code : activity.template_id
+                if (type === 'startpoint') {
+                    this.isDisableStartPoint = false
+                } else if (type === 'endpoint') {
+                    this.isDisableEndPoint = false
                 }
-
-                if (location.type !== 'startpoint' && location.type !== 'endpoint') {
-                    locations.push(location)
+            },
+            onNodeClick (id) {
+                this.$emit('onNodeClick', id)
+            },
+            onLabelBlur (labelData) {
+                this.$emit('onLabelBlur', labelData)
+            },
+            onUpdateNodeInfo (id, data) {
+                this.dataFlowInstance.updateLocationById(id, data)
+            },
+            onUpdateCanvas (data) {
+                this.dataFlowInstance.updateCanvas(data)
+            },
+            onSearchAtom (data) {
+                this.$emit('onSearchAtom', data)
+            },
+            onChangeName (name) {
+                this.$emit('onChangeName', name)
+            },
+            onSaveTemplate (saveAndCreate) {
+                const validateMessage = validatePipeline.isDataValid(this.canvasData)
+                if (!validateMessage.result) {
+                    this.$bkMessage({
+                        message: validateMessage.message,
+                        theme: 'error'
+                    })
+                    return false
                 }
-            })
+                this.$emit('onSaveTemplate', saveAndCreate)
+            },
+            onNewDraft (message) {
+                this.$emit('onNewDraft', message)
+            },
+            onReplaceLineAndLocation (data) {
+                this.$emit('onReplaceLineAndLocation', data)
+            },
+            onMenuBarShow (val) {
+                this.showNodeList = val
+            },
+            onCopyElement (data) {
+                this.nodesOfCopyed = data
+            },
+            /**
+             * 节点粘贴
+             * @param {Number} x 节点 x 坐标偏移量
+             * @param {Number} y 节点 y 坐标偏移量
+             * @return {Array} 返回新增的节点
+             */
+            onPasteElement (x, y) {
+                const { locations, lines } = this.createCopyOfSelectedNodes()
+                locations.forEach(location => {
+                    location.x += x
+                    location.y += y
+                    this.dataFlowInstance.createLocation(location)
+                })
+                lines.forEach(line => {
+                    this.dataFlowInstance.createLine(line)
+                })
+                return locations
+            },
+            onDeleteElement (data) {
+                data.forEach(id => {
+                    const node = {
+                        id,
+                        type: this.locationsObj[id].type
+                    }
+                    this.dataFlowInstance.deleteLocation(id)
+                    this.$emit('onLocationChange', 'delete', node)
+                })
+            },
+            createCopyOfSelectedNodes () {
+                const lines = []
+                const locations = []
+                const locationIdReplaceHash = {} // 节点 id 替换映射表
+                const lineIdReplaceHash = {} // 连线 id 替换映射表
+                this.nodesOfCopyed.forEach((id, index) => {
+                    const location = tools.deepClone(this.locationsObj[id])
+                    const activity = tools.deepClone(this.canvasData.activities[id])
+                    locationIdReplaceHash[id] = location.id = 'node' + uuid()
 
-            // 复制 line 数据
-            this.canvasData.lines.forEach(line => {
-                if (locationIdReplaceHash[line.source.id] && locationIdReplaceHash[line.target.id]) {
-                    const lineCopy = tools.deepClone(line)
-                    lineIdReplaceHash[line.id] = lineCopy.id = 'line' + uuid()
-                    lineCopy.source.id = locationIdReplaceHash[line.source.id]
-                    lineCopy.target.id = locationIdReplaceHash[line.target.id]
-                    lines.push(lineCopy)
-                }
-            })
+                    // 复制 location 数据
+                    if (activity) {
+                        location.atomId = activity.type === 'ServiceActivity' ? activity.component.code : activity.template_id
+                    }
 
-            return {locations, lines}
-        },
-        onSelectNode () {
-            if (this.isPreviewMode) {
-                return
+                    if (location.type !== 'startpoint' && location.type !== 'endpoint') {
+                        locations.push(location)
+                    }
+                })
+
+                // 复制 line 数据
+                this.canvasData.lines.forEach(line => {
+                    if (locationIdReplaceHash[line.source.id] && locationIdReplaceHash[line.target.id]) {
+                        const lineCopy = tools.deepClone(line)
+                        lineIdReplaceHash[line.id] = lineCopy.id = 'line' + uuid()
+                        lineCopy.source.id = locationIdReplaceHash[line.source.id]
+                        lineCopy.target.id = locationIdReplaceHash[line.target.id]
+                        lines.push(lineCopy)
+                    }
+                })
+
+                return { locations, lines }
+            },
+            onSelectNode () {
+                if (this.isPreviewMode) {
+                    return
+                }
+                this.isSelectAll = !this.isSelectAll
+                this.$emit('onSelectNode', this.isSelectAll)
             }
-            this.isSelectAll = !this.isSelectAll
-            this.$emit('onSelectNode', this.isSelectAll)
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -668,7 +664,7 @@ export default {
         position: absolute;
         top: 80px;
         left: 380px;
-        z-index: 4;
+        z-index: 5;
     }
     .atom-node {
         position: absolute;
diff --git a/pipeline/blueflow/src/components/common/RenderForm/FormGroup.vue b/pipeline/blueflow/src/components/common/RenderForm/FormGroup.vue
index e6f4f1ac20..a6761af335 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/FormGroup.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/FormGroup.vue
@@ -37,11 +37,11 @@
             v-for="(form, index) in scheme.attrs.children"
             :key="`${form.tag_code}_${index}`"
             :is="form.type === 'combine' ? 'FormGroup' : 'FormItem'"
-            :class="{'rf-has-hook': form.type !== 'combine' && showHook}"
+            :class="{ 'rf-has-hook': form.type !== 'combine' && showHook }"
             :scheme="form"
             :option="groupOption"
             :value="value[form.tag_code]"
-            :parentValue="value"
+            :parent-value="value"
             @change="updateForm">
         </component>
         <div class="rf-tag-hook" v-if="showHook">
@@ -51,162 +51,162 @@
                     placements: ['left'],
                     customClass: 'offset-left-tooltip'
                 }"
-                :isChecked="hook"
+                :is-checked="hook"
                 @checkCallback="onHookForm">
             </BaseCheckbox>
         </div>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import FormItem from './FormItem.vue'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
+    import '@/utils/i18n.js'
+    import FormItem from './FormItem.vue'
+    import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
 
-export default {
-    name: 'FormGroup',
-    components: {
-        FormItem,
-        BaseCheckbox
-    },
-    props: {
-        scheme: {
-            type: Object,
-            default () {
-                return {}
-            }
-        },
-        option: {
-            type: Object,
-            default () {
-                return {}
-            }
+    export default {
+        name: 'FormGroup',
+        components: {
+            FormItem,
+            BaseCheckbox
         },
-        value: {
-            type: [Object, String],
-            default () {
-                return {}
+        props: {
+            scheme: {
+                type: Object,
+                default () {
+                    return {}
+                }
+            },
+            option: {
+                type: Object,
+                default () {
+                    return {}
+                }
+            },
+            value: {
+                type: [Object, String],
+                default () {
+                    return {}
+                }
+            },
+            hook: {
+                type: Boolean,
+                default: false
             }
         },
-        hook: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data () {
-        // 子 tag 配置项里 showHook 置为 false
-        const groupOption = Object.assign({}, this.option,{ showHook: false, showGroup: false })
+        data () {
+            // 子 tag 配置项里 showHook 置为 false
+            const groupOption = Object.assign({}, this.option, { showHook: false, showGroup: false })
 
-        const showForm = ('hidden' in this.scheme.attrs) ? !this.scheme.attrs.hidden : true
-        const showHook = ('hookable' in this.scheme.attrs) ?
-            (this.scheme.attrs.hookable && this.option.showHook) :
-            !!this.option.showHook
+            const showForm = ('hidden' in this.scheme.attrs) ? !this.scheme.attrs.hidden : true
+            const showHook = ('hookable' in this.scheme.attrs)
+                ? (this.scheme.attrs.hookable && this.option.showHook)
+                : !!this.option.showHook
 
-        return {
-            eventActions: {}, // combine 类型配置项定义的事件回调函数
-            groupOption,
-            showForm, // combine 类型 Tag 组是否显示
-            showHook, // combine 类型 Tag 组是否可勾选
-            i18n: {
-                hooked: gettext('取消勾选'),
-                cancelHook: gettext('勾选参数作为全局变量')
+            return {
+                eventActions: {}, // combine 类型配置项定义的事件回调函数
+                groupOption,
+                showForm, // combine 类型 Tag 组是否显示
+                showHook, // combine 类型 Tag 组是否可勾选
+                i18n: {
+                    hooked: gettext('取消勾选'),
+                    cancelHook: gettext('勾选参数作为全局变量')
+                }
             }
-        }
-    },
-    watch: {
-        option: {
-            handler: function (val) {
-                const option = Object.assign({}, this.groupOption, val, { showHook: false, showGroup: false })
-                this.groupOption = option
-            },
-            deep: true
-        }
-    },
-    created () {
-        const scheme = this.scheme
+        },
+        watch: {
+            option: {
+                handler: function (val) {
+                    const option = Object.assign({}, this.groupOption, val, { showHook: false, showGroup: false })
+                    this.groupOption = option
+                },
+                deep: true
+            }
+        },
+        created () {
+            const scheme = this.scheme
 
-        // 注册 combine 配置项里的事件函数到父组件实例
-        // 父组件目前包括 RenderForm(根组件)、FormGroup(combine 类型)、TagDataTable(表格类型)
-        if (scheme.events) {
-            scheme.events.map(item => {
-                const eventSource = `${item.source}_${item.type}`
-                this.eventActions[eventSource] = item.action
-                this.$parent.$on(eventSource, (data) => {
-                    this.eventActions[eventSource].call(this, data)
+            // 注册 combine 配置项里的事件函数到父组件实例
+            // 父组件目前包括 RenderForm(根组件)、FormGroup(combine 类型)、TagDataTable(表格类型)
+            if (scheme.events) {
+                scheme.events.map(item => {
+                    const eventSource = `${item.source}_${item.type}`
+                    this.eventActions[eventSource] = item.action
+                    this.$parent.$on(eventSource, (data) => {
+                        this.eventActions[eventSource].call(this, data)
+                    })
                 })
-            })
-        }
+            }
 
-        // 注册标准插件配置项 methods 属性里的方法到 Tag 实例组件
-        // 标准插件配置项里的方法会重载 mixins 里定义的方法
-        if (scheme.methods) {
-            Object.keys(scheme.methods).map(item => {
-                if (typeof scheme.methods[item] === 'function') {
-                    this[item] = scheme.methods[item]
-                }
-            })
-        }
-    },
-    mounted () {
-        // 组件插入到 DOM 后， 在父组件上发布该 combine 组件的 init 事件，触发标准插件配置项里监听的函数
-        this.$nextTick(()=>{
-            this.$parent.$emit(`${this.tagCode}_init`, this.value)
-        })
-    },
-    methods: {
-        updateForm (fieldArr, val) {
-            fieldArr.unshift(this.scheme.tag_code)
-            this.$emit('change', fieldArr, val)
-        },
-        onHookForm (val) {
-            this.$emit('onHook', this.scheme.tag_code, val)
-        },
-        /**
-         * 获取 combine 类型组件的子组件实例
-         * @param {String} tagCode 标准插件 tag_code，值空时，返回全部子组件
-         */
-        get_child (tagCode) {
-            let childComponent
-            if (typeof tagCode === 'string' && tagCode !== '') {
-                this.$children.some(item => {
-                    if (item.scheme && item.scheme.tag_code === tagCode) {
-                        childComponent = item.$children[0]
-                        return true
+            // 注册标准插件配置项 methods 属性里的方法到 Tag 实例组件
+            // 标准插件配置项里的方法会重载 mixins 里定义的方法
+            if (scheme.methods) {
+                Object.keys(scheme.methods).map(item => {
+                    if (typeof scheme.methods[item] === 'function') {
+                        this[item] = scheme.methods[item]
                     }
                 })
-            } else {
-                childComponent = this.$children
             }
-
-            return childComponent
         },
-        emit_event (name, type, data) {
-            this.$parent.$emit(`${name}_${type}`, data)
-        },
-        show () {
-            this.showForm = true
-        },
-        hide () {
-            this.showForm = false
+        mounted () {
+            // 组件插入到 DOM 后， 在父组件上发布该 combine 组件的 init 事件，触发标准插件配置项里监听的函数
+            this.$nextTick(() => {
+                this.$parent.$emit(`${this.tagCode}_init`, this.value)
+            })
         },
-        validate () {
-            let isValid = true
-            this.$children.forEach(childComp => {
-                const compType = childComp.$options.name
-
-                if (compType !== 'FormItem' && compType !== 'FormGroup') {
-                    return
+        methods: {
+            updateForm (fieldArr, val) {
+                fieldArr.unshift(this.scheme.tag_code)
+                this.$emit('change', fieldArr, val)
+            },
+            onHookForm (val) {
+                this.$emit('onHook', this.scheme.tag_code, val)
+            },
+            /**
+             * 获取 combine 类型组件的子组件实例
+             * @param {String} tagCode 标准插件 tag_code，值空时，返回全部子组件
+             */
+            get_child (tagCode) {
+                let childComponent
+                if (typeof tagCode === 'string' && tagCode !== '') {
+                    this.$children.some(item => {
+                        if (item.scheme && item.scheme.tag_code === tagCode) {
+                            childComponent = item.$children[0]
+                            return true
+                        }
+                    })
+                } else {
+                    childComponent = this.$children
                 }
 
-                const singleItemValid = childComp.validate()
+                return childComponent
+            },
+            emit_event (name, type, data) {
+                this.$parent.$emit(`${name}_${type}`, data)
+            },
+            show () {
+                this.showForm = true
+            },
+            hide () {
+                this.showForm = false
+            },
+            validate () {
+                let isValid = true
+                this.$children.forEach(childComp => {
+                    const compType = childComp.$options.name
+
+                    if (compType !== 'FormItem' && compType !== 'FormGroup') {
+                        return
+                    }
 
-                if (isValid) {
-                    isValid = singleItemValid
-                }
-            })
-            return isValid
+                    const singleItemValid = childComp.validate()
+
+                    if (isValid) {
+                        isValid = singleItemValid
+                    }
+                })
+                return isValid
+            }
         }
     }
-}
 </script>
 <style lang="scss">
 .rf-form-group {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/FormItem.vue b/pipeline/blueflow/src/components/common/RenderForm/FormItem.vue
index ac78d9e75d..39ce300ccc 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/FormItem.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/FormItem.vue
@@ -35,7 +35,7 @@
         </div>
         <label
             v-if="option.showLabel"
-            :class="['rf-tag-label', {'required': isRequired()}]">
+            :class="['rf-tag-label', { 'required': isRequired() }]">
             {{scheme.attrs.name}}
         </label>
         <div v-show="hook" class="rf-tag-form">
@@ -47,11 +47,11 @@
             ref="tagComponent"
             :is="tagComponent"
             v-bind="getDefaultAttrs()"
-            :tagCode="scheme.tag_code"
-            :atomEvents="scheme.events"
-            :atomMethods="scheme.methods"
+            :tag-code="scheme.tag_code"
+            :atom-events="scheme.events"
+            :atom-methods="scheme.methods"
             :value="formValue"
-            :parentValue="parentValue"
+            :parent-value="parentValue"
             @change="updateForm"
             @onShow="onShowForm"
             @onHide="onHideForm">
@@ -64,249 +64,248 @@
                     customClass: 'offset-left-tooltip',
                     zIndex: 2002
                 }"
-                :isChecked="hook"
+                :is-checked="hook"
                 @checkCallback="onHookForm">
             </BaseCheckbox>
         </div>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-import FormGroup from './FormGroup.vue'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import { checkDataType } from '@/utils/checkDataType.js'
+    import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
+    import FormGroup from './FormGroup.vue'
 
-// 导入 tag 文件注册为组件
-function registerTag () {
-    const innerComponent = require.context(
-        './tags/',
-        false,
-        /Tag[A-Z]\w+\.(vue|js)$/
-    )
-    const userComponent = require.context(
-        '../../tags/',
-        false,
-        /Tag[A-Z]\w+\.(vue|js)$/
-    )
-    const tagComponent = {}
-    const register = (fileName, context) => {
-        const componentConfig = context(fileName)
-        const comp = componentConfig.default
-        const typeName = comp.name.slice(3).replace(/[A-Z]/g, match => {
-            return `_${match.toLowerCase()}`
+    // 导入 tag 文件注册为组件
+    function registerTag () {
+        const innerComponent = require.context(
+            './tags/',
+            false,
+            /Tag[A-Z]\w+\.(vue|js)$/
+        )
+        const userComponent = require.context(
+            '../../tags/',
+            false,
+            /Tag[A-Z]\w+\.(vue|js)$/
+        )
+        const tagComponent = {}
+        const register = (fileName, context) => {
+            const componentConfig = context(fileName)
+            const comp = componentConfig.default
+            const typeName = comp.name.slice(3).replace(/[A-Z]/g, match => {
+                return `_${match.toLowerCase()}`
+            })
+            const name = 'tag' + typeName
+
+            tagComponent[name] = comp
+        }
+        innerComponent.keys().forEach(fileName => {
+            register(fileName, innerComponent)
+        })
+        userComponent.keys().forEach(fileName => {
+            register(fileName, userComponent)
         })
-        const name = 'tag' + typeName
 
-        tagComponent[name] = comp
+        return tagComponent
     }
-    innerComponent.keys().forEach(fileName => {
-        register(fileName, innerComponent)
-    })
-    userComponent.keys().forEach(fileName => {
-        register(fileName, userComponent)
-    })
-
-    return tagComponent
-}
-
 
-export default {
-    name: 'FormItem',
-    components: {
-        BaseCheckbox,
-        FormGroup
-    },
-    props: {
-        scheme: {
-            type: Object,
-            default () {
-                return {}
-            }
+    export default {
+        name: 'FormItem',
+        components: {
+            BaseCheckbox,
+            FormGroup
         },
-        option: {
-            type: Object,
-            default () {
-                return {}
+        props: {
+            scheme: {
+                type: Object,
+                default () {
+                    return {}
+                }
+            },
+            option: {
+                type: Object,
+                default () {
+                    return {}
+                }
+            },
+            value: {
+                type: [String, Number, Boolean, Array, Object]
+            },
+            parentValue: {
+                type: [String, Number, Boolean, Array, Object]
+            },
+            hook: {
+                type: Boolean,
+                default: false
             }
         },
-        value: {
-            type: [String, Number, Boolean, Array, Object]
-        },
-        parentValue: {
-            type: [String, Number, Boolean, Array, Object]
-        },
-        hook: {
-            type: Boolean,
-            default: false
-        }
-    },
-    data () {
-        let showForm = ('hidden' in this.scheme.attrs) ? !this.scheme.attrs.hidden : true
-        let showHook = ('hookable' in this.scheme.attrs) ?
-            (this.scheme.attrs.hookable && this.option.showHook) :
-            !!this.option.showHook
-        const formValue = this.getFormValue(this.value)
+        data () {
+            const showForm = ('hidden' in this.scheme.attrs) ? !this.scheme.attrs.hidden : true
+            const showHook = ('hookable' in this.scheme.attrs)
+                ? (this.scheme.attrs.hookable && this.option.showHook)
+                : !!this.option.showHook
+            const formValue = this.getFormValue(this.value)
 
-        return {
-            tagComponent: `tag_${this.scheme.type}`,
-            showForm,
-            showHook,
-            formValue,
-            i18n: {
-                hooked: gettext('取消勾选'),
-                cancelHook: gettext('勾选参数作为全局变量')
+            return {
+                tagComponent: `tag_${this.scheme.type}`,
+                showForm,
+                showHook,
+                formValue,
+                i18n: {
+                    hooked: gettext('取消勾选'),
+                    cancelHook: gettext('勾选参数作为全局变量')
+                }
             }
-        }
-    },
-    watch: {
-        scheme (val) {
-            this.tagComponent = `tag_${this.scheme.type}`
         },
-        value (val) {
-            this.formValue = this.getFormValue(val)
-        }
-    },
-    beforeCreate () {
-        const tagComponent = registerTag()
-        Object.keys(tagComponent).forEach(item => {
-            this.$options.components[item] = tagComponent[item]
-        })
-    },
-    methods: {
-        getDefaultAttrs () {
-            const attrs = tools.deepClone(this.scheme.attrs)
-            attrs.showVarList = this.option.showVarList // 是否自动显示变量列表
-            attrs.formEdit = this.option.formEdit
-            attrs.formMode = this.option.formMode
-
-            // UI 配置项里的 formEdit 优先于标准插件配置项里的 editable 属性
-            // if ('editable' in this.option) {
-            //     attrs.editable = this.option.editable
-            // }
-
-            return {...attrs}
+        watch: {
+            scheme (val) {
+                this.tagComponent = `tag_${this.scheme.type}`
+            },
+            value (val) {
+                this.formValue = this.getFormValue(val)
+            }
         },
-        getFormValue (val) {
-            const valueType = checkDataType(val)
+        beforeCreate () {
+            const tagComponent = registerTag()
+            Object.keys(tagComponent).forEach(item => {
+                this.$options.components[item] = tagComponent[item]
+            })
+        },
+        methods: {
+            getDefaultAttrs () {
+                const attrs = tools.deepClone(this.scheme.attrs)
+                attrs.showVarList = this.option.showVarList // 是否自动显示变量列表
+                attrs.formEdit = this.option.formEdit
+                attrs.formMode = this.option.formMode
 
-            if (valueType === 'Undefined') {
-                return
-            }
+                // UI 配置项里的 formEdit 优先于标准插件配置项里的 editable 属性
+                // if ('editable' in this.option) {
+                //     attrs.editable = this.option.editable
+                // }
 
-            let defaultValueFormat
-            let formValue
+                return { ...attrs }
+            },
+            getFormValue (val) {
+                const valueType = checkDataType(val)
 
-            if (this.hook) {
-                defaultValueFormat = {
-                    type: 'String',
-                    value: ''
+                if (valueType === 'Undefined') {
+                    return
                 }
-            } else {
-                defaultValueFormat = this.getDefaultValueFormat()
-            }
 
-            const isTypeValid = Array.isArray(defaultValueFormat.type) ?
-                defaultValueFormat.type.indexOf(valueType) > -1 :
-                defaultValueFormat.type === valueType
+                let defaultValueFormat
+                let formValue
 
-            if (isTypeValid) {
-                formValue = tools.deepClone(val)
-            } else {
-                formValue = tools.deepClone(defaultValueFormat.value)
-                this.updateForm([this.scheme.tag_code], formValue)
-            }
-
-            return formValue
-        },
-        getDefaultValueFormat () {
-            let valueFormat
-            switch (this.scheme.type) {
-                case 'input':
-                case 'textarea':
-                case 'radio':
-                case 'text':
-                case 'datetime':
-                case 'password':
-                    valueFormat = {
-                        type: ['String', 'Number'],
+                if (this.hook) {
+                    defaultValueFormat = {
+                        type: 'String',
                         value: ''
                     }
-                    break
-                case 'checkbox':
-                case 'datatable':
-                case 'tree':
-                case 'upload':
-                    valueFormat = {
-                        type: 'Array',
-                        value: []
-                    }
-                    break
-                case 'select':
-                    if (this.scheme.attrs.multiple) {
+                } else {
+                    defaultValueFormat = this.getDefaultValueFormat()
+                }
+
+                const isTypeValid = Array.isArray(defaultValueFormat.type)
+                    ? defaultValueFormat.type.indexOf(valueType) > -1
+                    : defaultValueFormat.type === valueType
+
+                if (isTypeValid) {
+                    formValue = tools.deepClone(val)
+                } else {
+                    formValue = tools.deepClone(defaultValueFormat.value)
+                    this.updateForm([this.scheme.tag_code], formValue)
+                }
+
+                return formValue
+            },
+            getDefaultValueFormat () {
+                let valueFormat
+                switch (this.scheme.type) {
+                    case 'input':
+                    case 'textarea':
+                    case 'radio':
+                    case 'text':
+                    case 'datetime':
+                    case 'password':
+                        valueFormat = {
+                            type: ['String', 'Number'],
+                            value: ''
+                        }
+                        break
+                    case 'checkbox':
+                    case 'datatable':
+                    case 'tree':
+                    case 'upload':
                         valueFormat = {
                             type: 'Array',
                             value: []
                         }
-                    } else {
+                        break
+                    case 'select':
+                        if (this.scheme.attrs.multiple) {
+                            valueFormat = {
+                                type: 'Array',
+                                value: []
+                            }
+                        } else {
+                            valueFormat = {
+                                type: ['String', 'Number'],
+                                value: ''
+                            }
+                        }
+                        break
+                    case 'int':
                         valueFormat = {
-                            type: ['String', 'Number'],
-                            value: ''
+                            type: 'Number',
+                            value: 0
                         }
-                    }
-                    break
-                case 'int':
-                    valueFormat = {
-                        type: 'Number',
-                        value: 0
-                    }
-                    break
-                case 'ip_selector':
-                    valueFormat = {
-                        type: 'Object',
-                        value: {
-                            selectors: [],
-                            ip: [],
-                            topo: [],
-                            filters: [],
-                            excludes: []
+                        break
+                    case 'ip_selector':
+                        valueFormat = {
+                            type: 'Object',
+                            value: {
+                                selectors: [],
+                                ip: [],
+                                topo: [],
+                                filters: [],
+                                excludes: []
+                            }
                         }
-                    }
-                    break
-                default:
-                    valueFormat = {
-                        type: 'String',
-                        value: ''
-                    }
-            }
-            return valueFormat
-        },
-        isRequired () {
-            let required = false
-            if ('validation' in this.scheme.attrs) {
-                required = this.scheme.attrs.validation.some(item => {
-                    return item.type === 'required'
-                })
+                        break
+                    default:
+                        valueFormat = {
+                            type: 'String',
+                            value: ''
+                        }
+                }
+                return valueFormat
+            },
+            isRequired () {
+                let required = false
+                if ('validation' in this.scheme.attrs) {
+                    required = this.scheme.attrs.validation.some(item => {
+                        return item.type === 'required'
+                    })
+                }
+                return required
+            },
+            updateForm (fieldArr, val) {
+                this.$emit('change', fieldArr, val)
+            },
+            onShowForm () {
+                this.showForm = true
+            },
+            onHideForm () {
+                this.showForm = false
+            },
+            onHookForm (val) {
+                this.$emit('onHook', this.scheme.tag_code, val)
+            },
+            validate (combineValue) {
+                return this.$refs.tagComponent ? this.$refs.tagComponent.validate(combineValue) : true
             }
-            return required
-        },
-        updateForm (fieldArr, val) {
-            this.$emit('change', fieldArr, val)
-        },
-        onShowForm () {
-            this.showForm = true
-        },
-        onHideForm () {
-            this.showForm = false
-        },
-        onHookForm (val) {
-            this.$emit('onHook', this.scheme.tag_code, val)
-        },
-        validate (combineValue) {
-            return this.$refs.tagComponent ? this.$refs.tagComponent.validate(combineValue) : true
         }
     }
-}
 </script>
 <style lang="scss">
 .rf-form-item {
@@ -364,4 +363,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/ConditionItem.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/ConditionItem.vue
index 86bd693e80..acee801429 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/ConditionItem.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/ConditionItem.vue
@@ -26,97 +26,97 @@
             <textarea
                 :placeholder="i18n.desc"
                 v-model="condition.value"
-                :class="{'disabled': !editable}"
+                :class="{ 'disabled': !editable }"
                 :disabled="!editable"
                 @change="onConditionTextChange">
             </textarea>
             <span v-show="valueError" class="common-error-tip value-error">{{i18n.notEmpty}}</span>
         </div>
         <div class="operation-wrap">
-            <i :class="['operation-btn', 'add-condition', {'disabled': !editable}]" @click.stop="onAddCondition"></i>
-            <i :class="['operation-btn', 'delete-condition', {'disabled': !editable}]" @click.stop="onDeleteCondition"></i>
+            <i :class="['operation-btn', 'add-condition', { 'disabled': !editable }]" @click.stop="onAddCondition"></i>
+            <i :class="['operation-btn', 'delete-condition', { 'disabled': !editable }]" @click.stop="onDeleteCondition"></i>
         </div>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
 
-const i18n = {
-    select: gettext('请选择'),
-    desc: gettext('输入筛选条件，多条筛选条件换行隔开'),
-    notEmpty: gettext('必填项')
-}
+    const i18n = {
+        select: gettext('请选择'),
+        desc: gettext('输入筛选条件，多条筛选条件换行隔开'),
+        notEmpty: gettext('必填项')
+    }
 
-export default {
-    name: 'ConditionItem',
-    props: ['editable', 'data', 'fieldsList', 'index'],
-    data () {
-        return {
-            isDropdownShow: false,
-            filedError: false,
-            valueError: false,
-            condition: {
-                field: this.data.field,
-                value: this.data.value.join('\n')
-            },
-            i18n
-        }
-    },
-    computed: {
-        filedsData () {
-            return this.fieldsList.map(item => {
-                return {
-                    id: item.bk_obj_id,
-                    name: item.bk_obj_name
-                }
-            })
-        }
-    },
-    watch: {
-        data: {
-            handler (val) {
-                this.condition = {
-                    field: val.field,
-                    value: val.value.join('\n')
-                }
-            },
-            deep: true
-        }
-    },
-    methods: {
-        onConditionSelect (value) {
-            const condition = {
-                field: value,
-                value: this.data.value
+    export default {
+        name: 'ConditionItem',
+        props: ['editable', 'data', 'fieldsList', 'index'],
+        data () {
+            return {
+                isDropdownShow: false,
+                filedError: false,
+                valueError: false,
+                condition: {
+                    field: this.data.field,
+                    value: this.data.value.join('\n')
+                },
+                i18n
             }
-            this.$emit('changeCondition', condition, this.index)
         },
-        onConditionTextChange () {
-            const condition = {
-                field: this.condition.field,
-                value: this.condition.value.split('\n')
+        computed: {
+            filedsData () {
+                return this.fieldsList.map(item => {
+                    return {
+                        id: item.bk_obj_id,
+                        name: item.bk_obj_name
+                    }
+                })
             }
-            this.$emit('changeCondition', condition, this.index)
         },
-        onAddCondition () {
-            if (!this.editable) {
-                return
+        watch: {
+            data: {
+                handler (val) {
+                    this.condition = {
+                        field: val.field,
+                        value: val.value.join('\n')
+                    }
+                },
+                deep: true
             }
-            this.$emit('addCondition')
         },
-        onDeleteCondition (data) {
-            if (!this.editable) {
-                return
+        methods: {
+            onConditionSelect (value) {
+                const condition = {
+                    field: value,
+                    value: this.data.value
+                }
+                this.$emit('changeCondition', condition, this.index)
+            },
+            onConditionTextChange () {
+                const condition = {
+                    field: this.condition.field,
+                    value: this.condition.value.split('\n')
+                }
+                this.$emit('changeCondition', condition, this.index)
+            },
+            onAddCondition () {
+                if (!this.editable) {
+                    return
+                }
+                this.$emit('addCondition')
+            },
+            onDeleteCondition (data) {
+                if (!this.editable) {
+                    return
+                }
+                this.$emit('deleteCondition')
+            },
+            validate () {
+                this.filedError = !this.condition.field
+                this.valueError = !this.condition.value
+                return !this.filedError && !this.valueError
             }
-            this.$emit('deleteCondition')
-        },
-        validate () {
-            this.filedError = !this.condition.field
-            this.valueError = !this.condition.value
-            return !this.filedError && !this.valueError
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .condition-item {
@@ -245,7 +245,3 @@ export default {
     }
 }
 </style>
-
-
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/DynamicIp.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/DynamicIp.vue
index 380ed2cb8c..ff8d681387 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/DynamicIp.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/DynamicIp.vue
@@ -41,114 +41,114 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
 
-import IpSearchInput from './IpSearchInput.vue'
+    import IpSearchInput from './IpSearchInput.vue'
 
-const i18n = {
-    selected: gettext('已选择'),
-    dynamicNum: gettext('个节点'),
-    searchNode: gettext('搜索节点'),
-    noData: gettext('无数据'),
-    notEmpty: gettext('必填项')
-}
-
-export default {
-    name: 'DynamicIp',
-    components: {
-        IpSearchInput
-    },
-    props: ['editable', 'dynamicIpList', 'dynamicIps'],
-    data () {
-        return {
-            topoList: this.transPrimaryToTree(this.dynamicIpList),
-            searchWord: '',
-            selectedList: this.dynamicIps.slice(0),
-            selectedIps: this.dynamicIps.map(item => `${item.bk_inst_id}_${item.bk_obj_id}`),
-            dataError: false,
-            i18n
-        }
-    },
-    watch: {
-        dynamicIpList (val) {
-            this.topoList = this.transPrimaryToTree(val)
-        },
-        dynamicIps (val) {
-            this.selectedList = val.slice(0)
-            this.selectedIps = val.map(item => `${item.bk_inst_id}_${item.bk_obj_id}`)
-            this.topoList = this.transPrimaryToTree(this.dynamicIpList)
-        }
-    },
-    methods: {
-        transPrimaryToTree (data, isParentDisabled = false) {
-            const list = []
-            data.map(d => {
-                const disabled = !this.editable || isParentDisabled
-                const checked = this.dynamicIps.findIndex(item => {
-                    return item.bk_inst_id === d.bk_inst_id && item.bk_obj_id === d.bk_obj_id
-                }) > -1
+    const i18n = {
+        selected: gettext('已选择'),
+        dynamicNum: gettext('个节点'),
+        searchNode: gettext('搜索节点'),
+        noData: gettext('无数据'),
+        notEmpty: gettext('必填项')
+    }
 
-                const item = {
-                    label: d.bk_inst_name,
-                    bk_inst_id: d.bk_inst_id,
-                    uniqueId: `${d.bk_inst_id}_${d.bk_obj_id}`,
-                    title: d.bk_in_name,
-                    bk_obj_id: d.bk_obj_id,
-                    disabled
-                }
-                if (Array.isArray(d.child)) {
-                    item.children = this.transPrimaryToTree(d.child, isParentDisabled || checked)
-                }
-                list.push(item)
-            })
-            return list
-        },
-        onTopoSearch (keyword) {
-            this.$refs.topoTree.filter(keyword)
+    export default {
+        name: 'DynamicIp',
+        components: {
+            IpSearchInput
         },
-        filterNode (value, data) {
-            if (!value) return true
-            return data.label.indexOf(value) > -1
+        props: ['editable', 'dynamicIpList', 'dynamicIps'],
+        data () {
+            return {
+                topoList: this.transPrimaryToTree(this.dynamicIpList),
+                searchWord: '',
+                selectedList: this.dynamicIps.slice(0),
+                selectedIps: this.dynamicIps.map(item => `${item.bk_inst_id}_${item.bk_obj_id}`),
+                dataError: false,
+                i18n
+            }
         },
-        onNodeCheckClick (node, checkData) {
-            let checkedNodes = checkData.checkedNodes.slice(0)
-            const nodeChecking = checkData.checkedKeys.indexOf(node.uniqueId) > -1
-            if (node.children && node.children.length && nodeChecking) {
-                this.unCheckChildrenNode(node, checkedNodes)
+        watch: {
+            dynamicIpList (val) {
+                this.topoList = this.transPrimaryToTree(val)
+            },
+            dynamicIps (val) {
+                this.selectedList = val.slice(0)
+                this.selectedIps = val.map(item => `${item.bk_inst_id}_${item.bk_obj_id}`)
+                this.topoList = this.transPrimaryToTree(this.dynamicIpList)
             }
-
-            const selectedList = checkedNodes.map(node => {
-                return {
-                    bk_inst_id: node.bk_inst_id,
-                    bk_obj_id: node.bk_obj_id
-                }
-            })
-            this.$emit('change', selectedList)
-            this.validate()
         },
-        unCheckChildrenNode (node, checkedNodes) {
-            node.children.forEach(item => {
-                const index = this.selectedIps.indexOf(item.uniqueId)
-                if (index > -1) {
-                    const checkedIndex = checkedNodes.findIndex(n => item.uniqueId === n.uniqueId)
-                    checkedNodes.splice(checkedIndex, 1)
+        methods: {
+            transPrimaryToTree (data, isParentDisabled = false) {
+                const list = []
+                data.map(d => {
+                    const disabled = !this.editable || isParentDisabled
+                    const checked = this.dynamicIps.findIndex(item => {
+                        return item.bk_inst_id === d.bk_inst_id && item.bk_obj_id === d.bk_obj_id
+                    }) > -1
+
+                    const item = {
+                        label: d.bk_inst_name,
+                        bk_inst_id: d.bk_inst_id,
+                        uniqueId: `${d.bk_inst_id}_${d.bk_obj_id}`,
+                        title: d.bk_in_name,
+                        bk_obj_id: d.bk_obj_id,
+                        disabled
+                    }
+                    if (Array.isArray(d.child)) {
+                        item.children = this.transPrimaryToTree(d.child, isParentDisabled || checked)
+                    }
+                    list.push(item)
+                })
+                return list
+            },
+            onTopoSearch (keyword) {
+                this.$refs.topoTree.filter(keyword)
+            },
+            filterNode (value, data) {
+                if (!value) return true
+                return data.label.indexOf(value) > -1
+            },
+            onNodeCheckClick (node, checkData) {
+                const checkedNodes = checkData.checkedNodes.slice(0)
+                const nodeChecking = checkData.checkedKeys.indexOf(node.uniqueId) > -1
+                if (node.children && node.children.length && nodeChecking) {
+                    this.unCheckChildrenNode(node, checkedNodes)
                 }
-                if (item.children && item.children.length) {
-                    this.unCheckChildrenNode(item, checkedNodes)
+
+                const selectedList = checkedNodes.map(node => {
+                    return {
+                        bk_inst_id: node.bk_inst_id,
+                        bk_obj_id: node.bk_obj_id
+                    }
+                })
+                this.$emit('change', selectedList)
+                this.validate()
+            },
+            unCheckChildrenNode (node, checkedNodes) {
+                node.children.forEach(item => {
+                    const index = this.selectedIps.indexOf(item.uniqueId)
+                    if (index > -1) {
+                        const checkedIndex = checkedNodes.findIndex(n => item.uniqueId === n.uniqueId)
+                        checkedNodes.splice(checkedIndex, 1)
+                    }
+                    if (item.children && item.children.length) {
+                        this.unCheckChildrenNode(item, checkedNodes)
+                    }
+                })
+            },
+            validate () {
+                if (this.dynamicIps.length) {
+                    this.dataError = false
+                    return true
+                } else {
+                    this.dataError = true
+                    return false
                 }
-            })
-        },
-        validate () {
-            if (this.dynamicIps.length) {
-                this.dataError = false
-                return true
-            } else {
-                this.dataError = true
-                return false
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .dynamic-ip-num {
@@ -196,5 +196,3 @@ export default {
     color: #c4c6cc;
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/IpSearchInput.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/IpSearchInput.vue
index 0f95519136..2e191a0db1 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/IpSearchInput.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/IpSearchInput.vue
@@ -16,41 +16,41 @@
             class="search-input"
             :placeholder="placeholder"
             v-model="keyword"
-            @input="onInputChange"/>
+            @input="onInputChange" />
         <i class="bk-icon icon-search search-icon"></i>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
 
-const i18n = {
-    placeholder: gettext('搜索IP，多个以逗号隔开')
-}
+    const i18n = {
+        placeholder: gettext('搜索IP，多个以逗号隔开')
+    }
 
-export default {
-    name: 'IpSearchInput',
-    props: {
-        placeholder: {
-            type: String,
-            default: i18n.placeholder
-        }
-    },
-    data () {
-        return {
-            keyword: '',
-            delay: 500,
-            timer: null
-        }
-    },
-    methods: {
-        onInputChange () {
-            clearTimeout(this.timer)
-            this.timer = setTimeout(()=>{
-                this.$emit('search', this.keyword)
-            }, this.delay)
+    export default {
+        name: 'IpSearchInput',
+        props: {
+            placeholder: {
+                type: String,
+                default: i18n.placeholder
+            }
+        },
+        data () {
+            return {
+                keyword: '',
+                delay: 500,
+                timer: null
+            }
+        },
+        methods: {
+            onInputChange () {
+                clearTimeout(this.timer)
+                this.timer = setTimeout(() => {
+                    this.$emit('search', this.keyword)
+                }, this.delay)
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .search-input {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/MultipleIpSelector.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/MultipleIpSelector.vue
index 211db4cbc6..abf7216116 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/MultipleIpSelector.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/MultipleIpSelector.vue
@@ -15,9 +15,9 @@
             <div
                 v-for="selector in selectorTabs"
                 :key="selector.type"
-                :class="['ip-tab-checkbox', {'disabled': !editable}]"
+                :class="['ip-tab-checkbox', { 'disabled': !editable }]"
                 @click="onChooseSelector(selector.id)">
-                <span :class="['checkbox', {'checked': selectors.indexOf(selector.id) > -1}]"></span>
+                <span :class="['checkbox', { 'checked': selectors.indexOf(selector.id) > -1 }]"></span>
                 <span class="checkbox-text">{{selector.name}}</span>
             </div>
         </div>
@@ -27,7 +27,7 @@
                     <div
                         v-if="selectors.indexOf(selector.id) > -1"
                         :key="selector.type"
-                        :class="['tab-item', {'tab-item-active': activeSelector === selector.id}]"
+                        :class="['tab-item', { 'tab-item-active': activeSelector === selector.id }]"
                         :editable="editable"
                         @click="onChangeTab(selector.id)">
                         {{selector.name}}
@@ -40,86 +40,86 @@
                 v-show="activeSelector === 'ip'"
                 ref="ip"
                 :editable="editable"
-                :staticIpList="staticIpList"
-                :staticIps="staticIps"
+                :static-ip-list="staticIpList"
+                :static-ips="staticIps"
                 @change="onStaticIpChange">
             </static-ip>
             <dynamic-ip
                 v-show="activeSelector === 'topo'"
                 ref="topo"
                 :editable="editable"
-                :dynamicIpList="dynamicIpList"
-                :dynamicIps="dynamicIps"
+                :dynamic-ip-list="dynamicIpList"
+                :dynamic-ips="dynamicIps"
                 @change="onDynamicIpChange">
             </dynamic-ip>
         </div>
     </div>
 </template>
 <script>
-import StaticIp from './StaticIp.vue'
-import DynamicIp from './DynamicIp.vue'
+    import StaticIp from './StaticIp.vue'
+    import DynamicIp from './DynamicIp.vue'
 
-export default {
-    name: 'MultipleIpSelector',
-    components: {
-        StaticIp,
-        DynamicIp
-    },
-    props: ['editable', 'selectorTabs', 'selectors', 'staticIpList', 'dynamicIpList', 'dynamicIps', 'staticIps'],
-    data () {
-        return {
-            activeSelector: this.selectors[0]
-        }
-    },
-    watch: {
-        selectors (val, oldVal) {
-            if (val.toString() !== oldVal.toString()) {
-                this.activeSelector = val[0]
+    export default {
+        name: 'MultipleIpSelector',
+        components: {
+            StaticIp,
+            DynamicIp
+        },
+        props: ['editable', 'selectorTabs', 'selectors', 'staticIpList', 'dynamicIpList', 'dynamicIps', 'staticIps'],
+        data () {
+            return {
+                activeSelector: this.selectors[0]
             }
-        }
-    },
-    methods: {
-        onChooseSelector (id) {
-            if (!this.editable) {
-                return
+        },
+        watch: {
+            selectors (val, oldVal) {
+                if (val.toString() !== oldVal.toString()) {
+                    this.activeSelector = val[0]
+                }
             }
-            const selectors = this.selectors.slice(0)
-            const index = selectors.indexOf(id)
-            if (index > -1) {
-                if (selectors.length === 1) {
+        },
+        methods: {
+            onChooseSelector (id) {
+                if (!this.editable) {
                     return
                 }
-                selectors.splice(index, 1)
-                if (id === this.activeSelector) {
-                    this.activeSelector = selectors[0]
+                const selectors = this.selectors.slice(0)
+                const index = selectors.indexOf(id)
+                if (index > -1) {
+                    if (selectors.length === 1) {
+                        return
+                    }
+                    selectors.splice(index, 1)
+                    if (id === this.activeSelector) {
+                        this.activeSelector = selectors[0]
+                    }
+                } else {
+                    selectors.push(id)
                 }
-            } else {
-                selectors.push(id)
+                this.$emit('change', 'selectors', selectors)
+            },
+            onChangeTab (id) {
+                this.activeSelector = id
+            },
+            onStaticIpChange (val) {
+                this.$emit('change', 'ip', val)
+            },
+            onDynamicIpChange (val) {
+                this.$emit('change', 'topo', val)
+            },
+            validate () {
+                let isValidate = true
+                this.selectors.forEach(item => {
+                    const result = this.$refs[item].validate()
+                    if (!result) {
+                        // this.onChangeTab(item)
+                        isValidate = false
+                    }
+                })
+                return isValidate
             }
-            this.$emit('change', 'selectors', selectors)
-        },
-        onChangeTab (id) {
-            this.activeSelector = id
-        },
-        onStaticIpChange (val) {
-            this.$emit('change', 'ip', val)
-        },
-        onDynamicIpChange (val) {
-            this.$emit('change', 'topo', val)
-        },
-        validate () {
-            let isValidate = true
-            this.selectors.forEach(item => {
-                const result = this.$refs[item].validate()
-                if (!result) {
-                    // this.onChangeTab(item)
-                    isValidate = false
-                }
-            })
-            return isValidate
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .selector-choose-wrap {
@@ -202,5 +202,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SelectCondition.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SelectCondition.vue
index 7de225feb4..a1bb8337da 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SelectCondition.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SelectCondition.vue
@@ -20,7 +20,7 @@
                 <condition-item
                     :ref="`conditionItem_${index}`"
                     :data="condition"
-                    :fieldsList="conditionFields"
+                    :fields-list="conditionFields"
                     :index="index"
                     :editable="editable"
                     @changeCondition="changeCondition"
@@ -33,63 +33,63 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
 
-import ConditionItem from './ConditionItem.vue'
+    import ConditionItem from './ConditionItem.vue'
 
-const i18n = {
-    allSatisfy: gettext('（同时满足）'),
-    addItem: gettext('增加一条筛选条件')
-}
+    const i18n = {
+        allSatisfy: gettext('（同时满足）'),
+        addItem: gettext('增加一条筛选条件')
+    }
 
-export default {
-    name: 'SelectCondition',
-    components: {
-        ConditionItem
-    },
-    props: ['editable', 'label', 'conditions', 'conditionFields'],
-    data () {
-        return {
-            i18n
-        }
-    },
-    methods: {
-        changeCondition (data, index) {
-            const conditions = this.conditions.slice(0)
-            conditions.splice(index, 1, data)
-            this.$emit('change', conditions)
+    export default {
+        name: 'SelectCondition',
+        components: {
+            ConditionItem
         },
-        addCondition (index = 0) {
-            if (!this.editable) {
-                return
+        props: ['editable', 'label', 'conditions', 'conditionFields'],
+        data () {
+            return {
+                i18n
             }
-            const conditions = this.conditions.slice(0)
-            conditions.splice(index + 1, 0, {
-                field: '',
-                value: []
-            })
-            this.$emit('change', conditions)
-        },
-        deleteCondition (index) {
-            const conditions = this.conditions.slice(0)
-            conditions.splice(index, 1)
-            this.$emit('change', conditions)
         },
-        validate () {
-            let isValid = true
-            if (this.conditions.length) {
-                this.conditions.forEach((item, index) => {
-                    const condition = `conditionItem_${index}`
-                    const result = this.$refs[condition][0].validate()
-                    if (!result) {
-                        isValid = false
-                    }
+        methods: {
+            changeCondition (data, index) {
+                const conditions = this.conditions.slice(0)
+                conditions.splice(index, 1, data)
+                this.$emit('change', conditions)
+            },
+            addCondition (index = 0) {
+                if (!this.editable) {
+                    return
+                }
+                const conditions = this.conditions.slice(0)
+                conditions.splice(index + 1, 0, {
+                    field: '',
+                    value: []
                 })
+                this.$emit('change', conditions)
+            },
+            deleteCondition (index) {
+                const conditions = this.conditions.slice(0)
+                conditions.splice(index, 1)
+                this.$emit('change', conditions)
+            },
+            validate () {
+                let isValid = true
+                if (this.conditions.length) {
+                    this.conditions.forEach((item, index) => {
+                        const condition = `conditionItem_${index}`
+                        const result = this.$refs[condition][0].validate()
+                        if (!result) {
+                            isValid = false
+                        }
+                    })
+                }
+                return isValid
             }
-            return isValid
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .condition-label {
@@ -113,5 +113,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue
index 3d16a99689..1c52577770 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/SingleIpSelector.vue
@@ -15,9 +15,9 @@
             <div
                 v-for="selector in selectorTabs"
                 :key="selector.type"
-                :class="['ip-tab-radio', {'disabled': !editable}]"
+                :class="['ip-tab-radio', { 'disabled': !editable }]"
                 @click="onChooseSelector(selector.id)">
-                <span :class="['radio', {'checked': activeSelector === selector.id}]"></span>
+                <span :class="['radio', { 'checked': activeSelector === selector.id }]"></span>
                 <span class="radio-text">{{selector.name}}</span>
             </div>
         </div>
@@ -26,62 +26,62 @@
                 v-show="activeSelector === 'ip'"
                 ref="ip"
                 :editable="editable"
-                :staticIpList="staticIpList"
-                :staticIps="staticIps"
+                :static-ip-list="staticIpList"
+                :static-ips="staticIps"
                 @change="onStaticIpChange">
             </static-ip>
             <dynamic-ip
                 v-show="activeSelector === 'topo'"
                 ref="topo"
                 :editable="editable"
-                :dynamicIpList="dynamicIpList"
-                :dynamicIps="dynamicIps"
+                :dynamic-ip-list="dynamicIpList"
+                :dynamic-ips="dynamicIps"
                 @change="onDynamicIpChange">
             </dynamic-ip>
         </div>
     </div>
 </template>
 <script>
-import StaticIp from './StaticIp.vue'
-import DynamicIp from './DynamicIp.vue'
+    import StaticIp from './StaticIp.vue'
+    import DynamicIp from './DynamicIp.vue'
 
-export default {
-    name: 'SingleIpSelector',
-    components: {
-        StaticIp,
-        DynamicIp
-    },
-    props: ['editable', 'selectorTabs', 'selectors', 'staticIpList', 'dynamicIpList', 'staticIps', 'dynamicIps'],
-    data () {
-        return {
-            activeSelector: this.selectors[0]
-        }
-    },
-    watch: {
-        selectors (val, oldVal) {
-            if (val.toString() !== oldVal.toString()) {
-                this.activeSelector = val[0]
-            }
-        }
-    },
-    methods: {
-        onChooseSelector (id) {
-            if (!this.editable) {
-                return
-            }
-            this.$emit('change', 'selectors', [id])
+    export default {
+        name: 'SingleIpSelector',
+        components: {
+            StaticIp,
+            DynamicIp
         },
-        onStaticIpChange (val) {
-            this.$emit('change', 'ip', val)
+        props: ['editable', 'selectorTabs', 'selectors', 'staticIpList', 'dynamicIpList', 'staticIps', 'dynamicIps'],
+        data () {
+            return {
+                activeSelector: this.selectors[0]
+            }
         },
-        onDynamicIpChange (val) {
-            this.$emit('change', 'topo', val)
+        watch: {
+            selectors (val, oldVal) {
+                if (val.toString() !== oldVal.toString()) {
+                    this.activeSelector = val[0]
+                }
+            }
         },
-        validate () {
-            return this.$refs[this.activeSelector].validate()
+        methods: {
+            onChooseSelector (id) {
+                if (!this.editable) {
+                    return
+                }
+                this.$emit('change', 'selectors', [id])
+            },
+            onStaticIpChange (val) {
+                this.$emit('change', 'ip', val)
+            },
+            onDynamicIpChange (val) {
+                this.$emit('change', 'topo', val)
+            },
+            validate () {
+                return this.$refs[this.activeSelector].validate()
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .selector-choose-wrap {
@@ -124,5 +124,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIp.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIp.vue
index d387febbe4..4614c36435 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIp.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIp.vue
@@ -21,7 +21,7 @@
                     @hide="onDropdownHide">
                     <bk-button type="default" class="trigger-btn" slot="dropdown-trigger" :disabled="!editable">
                         <span>{{i18n.moreOperations}}</span>
-                        <i :class="['bk-icon icon-angle-down',{'icon-flip': isDropdownShow}]"></i>
+                        <i :class="['bk-icon icon-angle-down',{ 'icon-flip': isDropdownShow }]"></i>
                     </bk-button>
                     <div slot="dropdown-content">
                         <div
@@ -59,7 +59,7 @@
                                 <td :class="item.agent ? 'agent-normal' : 'agent-failed'">{{item.agent ? 'Agent' + i18n.normal : 'Agent' + i18n.error}}</td>
                                 <td>
                                     <a
-                                        :class="['remove-ip-btn', {'disabled': !editable}]"
+                                        :class="['remove-ip-btn', { 'disabled': !editable }]"
                                         @click.stop="onRemoveIpClick(item.bk_host_id)">
                                         {{i18n.remove}}
                                     </a>
@@ -91,186 +91,186 @@
         </div>
         <static-ip-adding-panel
             v-if="isIpAddingPanelShow"
-            :staticIpList="staticIpList"
-            :staticIps="staticIps"
+            :static-ip-list="staticIpList"
+            :static-ips="staticIps"
             @onAddIpConfirm="onAddIpConfirm"
             @onAddIpCancel="onAddIpCancel">
         </static-ip-adding-panel>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
 
-import StaticIpAddingPanel from './StaticIpAddingPanel.vue'
-import IpSearchInput from './IpSearchInput.vue'
+    import StaticIpAddingPanel from './StaticIpAddingPanel.vue'
+    import IpSearchInput from './IpSearchInput.vue'
 
-const i18n = {
-    copyIp: gettext('复制IP'),
-    copyAgentIp: gettext('复制Agent未安装IP'),
-    clearIp: gettext('清空IP'),
-    clearFailedAgentIp: gettext('清空Agent未安装IP'),
-    add: gettext('添加'),
-    moreOperations: gettext('更多操作'),
-    selected: gettext('已选择'),
-    staticIpNum: gettext('个静态IP(未安装agent'),
-    num: gettext('个)'),
-    cloudArea: gettext('云区域'),
-    status: gettext('状态'),
-    error: gettext('异常'),
-    operation: gettext('操作'),
-    remove: gettext('移除'),
-    normal: gettext('正常'),
-    noDataClick: gettext('无数据，点击'),
-    server: gettext('服务器'),
-    noData: gettext('无数据'),
-    notEmpty: gettext('必填项')
-}
+    const i18n = {
+        copyIp: gettext('复制IP'),
+        copyAgentIp: gettext('复制Agent未安装IP'),
+        clearIp: gettext('清空IP'),
+        clearFailedAgentIp: gettext('清空Agent未安装IP'),
+        add: gettext('添加'),
+        moreOperations: gettext('更多操作'),
+        selected: gettext('已选择'),
+        staticIpNum: gettext('个静态IP(未安装agent'),
+        num: gettext('个)'),
+        cloudArea: gettext('云区域'),
+        status: gettext('状态'),
+        error: gettext('异常'),
+        operation: gettext('操作'),
+        remove: gettext('移除'),
+        normal: gettext('正常'),
+        noDataClick: gettext('无数据，点击'),
+        server: gettext('服务器'),
+        noData: gettext('无数据'),
+        notEmpty: gettext('必填项')
+    }
 
-export default {
-    name: 'StaticIp',
-    components: {
-        StaticIpAddingPanel,
-        IpSearchInput
-    },
-    props: ['editable', 'staticIpList', 'staticIps'],
-    data () {
-        const listCountPerPage = 10
-        const totalPage = Math.ceil(this.staticIps.length / listCountPerPage)
-        return {
-            isDropdownShow: false,
-            isIpAddingPanelShow: false,
-            isSearchMode: false,
-            copyText: '',
-            isPaginationShow: totalPage > 1,
-            currentPage: 1,
-            totalPage: totalPage,
-            listCountPerPage: listCountPerPage,
-            listInPage: this.staticIps.slice(0, listCountPerPage),
-            dataError: false,
-            moreOperations: [
-                {
-                    type: 'copyIp',
-                    name: i18n.copyIp
-                },
-                {
-                    type: 'copyAgentIp',
-                    name: i18n.copyAgentIp
-                },
-                {
-                    type: 'clearIp',
-                    name: i18n.clearIp
-                },
-                {
-                    type: 'clearFailedAgentIp',
-                    name: i18n.clearFailedAgentIp
-                }
-            ],
-            i18n
-        }
-    },
-    computed: {
-        failedAgentLength () {
-            return this.staticIps.filter(item => !item.agent).length
-        }
-    },
-    watch: {
-        staticIps (val) {
-            this.setPanigation(val)
-        }
-    },
-    methods: {
-        setPanigation (list = []) {
-            this.listInPage = list.slice(0, this.listCountPerPage)
-            this.totalPage = Math.ceil(list.length / this.listCountPerPage)
-            this.isPaginationShow = this.totalPage > 1
-            this.currentPage = 1
+    export default {
+        name: 'StaticIp',
+        components: {
+            StaticIpAddingPanel,
+            IpSearchInput
         },
-        onAddPanelShow () {
-            if (!this.editable) {
-                return
+        props: ['editable', 'staticIpList', 'staticIps'],
+        data () {
+            const listCountPerPage = 10
+            const totalPage = Math.ceil(this.staticIps.length / listCountPerPage)
+            return {
+                isDropdownShow: false,
+                isIpAddingPanelShow: false,
+                isSearchMode: false,
+                copyText: '',
+                isPaginationShow: totalPage > 1,
+                currentPage: 1,
+                totalPage: totalPage,
+                listCountPerPage: listCountPerPage,
+                listInPage: this.staticIps.slice(0, listCountPerPage),
+                dataError: false,
+                moreOperations: [
+                    {
+                        type: 'copyIp',
+                        name: i18n.copyIp
+                    },
+                    {
+                        type: 'copyAgentIp',
+                        name: i18n.copyAgentIp
+                    },
+                    {
+                        type: 'clearIp',
+                        name: i18n.clearIp
+                    },
+                    {
+                        type: 'clearFailedAgentIp',
+                        name: i18n.clearFailedAgentIp
+                    }
+                ],
+                i18n
             }
-            this.isIpAddingPanelShow = true
-        },
-        handleIpCopy (ipStr) {
-            this.copyText = ipStr
-            document.addEventListener("copy", this.copyHandler)
-            document.execCommand("copy")
-            document.removeEventListener("copy", this.copyHandler)
-            this.copyText = ''
-        },
-        copyHandler (e) {
-            e.clipboardData.setData("text/html", this.copyText)
-            e.clipboardData.setData("text/plain", this.copyText)
-            e.preventDefault()
-        },
-        copyIp () {
-            const ipStr = this.staticIps.map(item => item.bk_host_innerip).join(',')
-            this.handleIpCopy(ipStr)
-        },
-        copyAgentIp () {
-            let ipStr = this.staticIps.filter(item => !item.agent).map(d => d.bk_host_innerip).join(',')
-            this.handleIpCopy(ipStr)
-        },
-        clearIp () {
-            this.$emit('change', [])
-        },
-        clearFailedAgentIp () {
-            const staticIps = this.staticIps.filter(item => !!item.agent)
-            this.$emit('change', staticIps)
         },
-        onDropdownShow () {
-            this.isDropdownShow = true
-        },
-        onDropdownHide () {
-            this.isDropdownShow = false
-        },
-        onStaticIpSearch (keyword) {
-            if (keyword) {
-                const keyArr = keyword.split(',')
-                const list = this.staticIps.filter(item => {
-                    return keyArr.some(str => item.bk_host_innerip.indexOf(str) > -1)
-                })
-                this.setPanigation(list)
-                this.isSearchMode = true
-            } else {
-                this.setPanigation(this.staticIps)
-                this.isSearchMode = false
+        computed: {
+            failedAgentLength () {
+                return this.staticIps.filter(item => !item.agent).length
             }
         },
-        onOperationClick (type) {
-            this[type] && this[type]()
-        },
-        onRemoveIpClick (id) {
-            if (!this.editable) {
-                return
+        watch: {
+            staticIps (val) {
+                this.setPanigation(val)
             }
-            const index = this.staticIps.findIndex(item => item.bk_host_id === id)
-            const staticIps = this.staticIps.slice(0)
-            staticIps.splice(index, 1)
-            this.$emit('change', staticIps)
-        },
-        onAddIpConfirm (data) {
-            this.$emit('change', data)
-            this.isIpAddingPanelShow = false
-        },
-        onAddIpCancel () {
-            this.isIpAddingPanelShow = false
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.listInPage = this.staticIps.slice((page - 1) * this.listCountPerPage, page * this.listCountPerPage)
         },
-        validate () {
-            if (this.staticIps.length) {
-                this.dataError = false
-                return true
-            } else {
-                this.dataError = true
-                return false
+        methods: {
+            setPanigation (list = []) {
+                this.listInPage = list.slice(0, this.listCountPerPage)
+                this.totalPage = Math.ceil(list.length / this.listCountPerPage)
+                this.isPaginationShow = this.totalPage > 1
+                this.currentPage = 1
+            },
+            onAddPanelShow () {
+                if (!this.editable) {
+                    return
+                }
+                this.isIpAddingPanelShow = true
+            },
+            handleIpCopy (ipStr) {
+                this.copyText = ipStr
+                document.addEventListener('copy', this.copyHandler)
+                document.execCommand('copy')
+                document.removeEventListener('copy', this.copyHandler)
+                this.copyText = ''
+            },
+            copyHandler (e) {
+                e.clipboardData.setData('text/html', this.copyText)
+                e.clipboardData.setData('text/plain', this.copyText)
+                e.preventDefault()
+            },
+            copyIp () {
+                const ipStr = this.staticIps.map(item => item.bk_host_innerip).join(',')
+                this.handleIpCopy(ipStr)
+            },
+            copyAgentIp () {
+                const ipStr = this.staticIps.filter(item => !item.agent).map(d => d.bk_host_innerip).join(',')
+                this.handleIpCopy(ipStr)
+            },
+            clearIp () {
+                this.$emit('change', [])
+            },
+            clearFailedAgentIp () {
+                const staticIps = this.staticIps.filter(item => !!item.agent)
+                this.$emit('change', staticIps)
+            },
+            onDropdownShow () {
+                this.isDropdownShow = true
+            },
+            onDropdownHide () {
+                this.isDropdownShow = false
+            },
+            onStaticIpSearch (keyword) {
+                if (keyword) {
+                    const keyArr = keyword.split(',')
+                    const list = this.staticIps.filter(item => {
+                        return keyArr.some(str => item.bk_host_innerip.indexOf(str) > -1)
+                    })
+                    this.setPanigation(list)
+                    this.isSearchMode = true
+                } else {
+                    this.setPanigation(this.staticIps)
+                    this.isSearchMode = false
+                }
+            },
+            onOperationClick (type) {
+                this[type] && this[type]()
+            },
+            onRemoveIpClick (id) {
+                if (!this.editable) {
+                    return
+                }
+                const index = this.staticIps.findIndex(item => item.bk_host_id === id)
+                const staticIps = this.staticIps.slice(0)
+                staticIps.splice(index, 1)
+                this.$emit('change', staticIps)
+            },
+            onAddIpConfirm (data) {
+                this.$emit('change', data)
+                this.isIpAddingPanelShow = false
+            },
+            onAddIpCancel () {
+                this.isIpAddingPanelShow = false
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.listInPage = this.staticIps.slice((page - 1) * this.listCountPerPage, page * this.listCountPerPage)
+            },
+            validate () {
+                if (this.staticIps.length) {
+                    this.dataError = false
+                    return true
+                } else {
+                    this.dataError = true
+                    return false
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .operation-area {
@@ -359,4 +359,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
index 96957bd726..1d1796af5b 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/StaticIpAddingPanel.vue
@@ -38,7 +38,7 @@
                         <tr v-for="item in listInPage" :key="item.bk_host_id">
                             <td>
                                 <span
-                                    :class="['checkbox', {'checked': selectedIp.findIndex(el => el.bk_host_id === item.bk_host_id) > -1}]"
+                                    :class="['checkbox', { 'checked': selectedIp.findIndex(el => el.bk_host_id === item.bk_host_id) > -1 }]"
                                     @click="onHostItemClick(item)">
                                 </span>
                             </td>
@@ -69,112 +69,112 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
 
-import IpSearchInput from './IpSearchInput.vue'
+    import IpSearchInput from './IpSearchInput.vue'
 
-const i18n = {
-    add: gettext('添加'),
-    cloudArea: gettext('云区域'),
-    status: gettext('状态'),
-    error: gettext('异常'),
-    noData: gettext('无数据'),
-    normal: gettext('正常'),
-    cancel: gettext('取消')
-}
-
-export default {
-    name: 'StaticIpAddingPanel',
-    components: {
-        IpSearchInput
-    },
-    props: ['staticIpList', 'staticIps'],
-    data () {
-        const listCountPerPage = 10
-        const listInPage = this.staticIpList.slice(0, listCountPerPage)
-        const totalPage = Math.ceil(this.staticIpList.length / listCountPerPage)
+    const i18n = {
+        add: gettext('添加'),
+        cloudArea: gettext('云区域'),
+        status: gettext('状态'),
+        error: gettext('异常'),
+        noData: gettext('无数据'),
+        normal: gettext('正常'),
+        cancel: gettext('取消')
+    }
 
-        return {
-            listAllSelected: false,
-            isPaginationShow: totalPage > 1,
-            selectedIp: this.staticIps.slice(0),
-            currentPage: 1,
-            totalPage,
-            listCountPerPage,
-            listInPage,
-            i18n
-        }
-    },
-    watch: {
-        staticIpList (val) {
-            this.setPanigation(val)
-        }
-    },
-    methods: {
-        setPanigation (list = []) {
-            this.listInPage = list.slice(0, this.listCountPerPage)
-            this.totalPage = Math.ceil(list.length / this.listCountPerPage)
-            this.isPaginationShow = this.totalPage > 1
-            this.currentPage = 1
+    export default {
+        name: 'StaticIpAddingPanel',
+        components: {
+            IpSearchInput
         },
-        onIpSearch (keyword) {
-            if (keyword) {
-                const keyArr = keyword.split(',')
-                const list = this.staticIpList.filter(item => {
-                    return keyArr.some(str => item.bk_host_innerip.indexOf(str) > -1)
-                })
-                this.setPanigation(list)
-            } else {
-                this.setPanigation(this.staticIpList)
+        props: ['staticIpList', 'staticIps'],
+        data () {
+            const listCountPerPage = 10
+            const listInPage = this.staticIpList.slice(0, listCountPerPage)
+            const totalPage = Math.ceil(this.staticIpList.length / listCountPerPage)
+
+            return {
+                listAllSelected: false,
+                isPaginationShow: totalPage > 1,
+                selectedIp: this.staticIps.slice(0),
+                currentPage: 1,
+                totalPage,
+                listCountPerPage,
+                listInPage,
+                i18n
             }
         },
-        onSelectAllClick () {
-            if (this.listAllSelected) {
-                this.listInPage.forEach(item => {
-                    const index = this.selectedIp.findIndex(el => el.bk_host_id === item.bk_host_id)
-                    this.selectedIp.splice(index, 1)
-                })
-                this.listAllSelected = false
-            } else {
-                this.listInPage.forEach(item => {
-                    const index = this.selectedIp.findIndex(el => el.bk_host_id === item.bk_host_id)
-                    if (index === -1) {
-                        this.selectedIp.push(item)
-                    }
-                })
-                this.listAllSelected = true
+        watch: {
+            staticIpList (val) {
+                this.setPanigation(val)
             }
         },
-        onHostItemClick (host) {
-            const index = this.selectedIp.findIndex(el => el.bk_host_id === host.bk_host_id)
-            let checkedNumInPage = 0
+        methods: {
+            setPanigation (list = []) {
+                this.listInPage = list.slice(0, this.listCountPerPage)
+                this.totalPage = Math.ceil(list.length / this.listCountPerPage)
+                this.isPaginationShow = this.totalPage > 1
+                this.currentPage = 1
+            },
+            onIpSearch (keyword) {
+                if (keyword) {
+                    const keyArr = keyword.split(',')
+                    const list = this.staticIpList.filter(item => {
+                        return keyArr.some(str => item.bk_host_innerip.indexOf(str) > -1)
+                    })
+                    this.setPanigation(list)
+                } else {
+                    this.setPanigation(this.staticIpList)
+                }
+            },
+            onSelectAllClick () {
+                if (this.listAllSelected) {
+                    this.listInPage.forEach(item => {
+                        const index = this.selectedIp.findIndex(el => el.bk_host_id === item.bk_host_id)
+                        this.selectedIp.splice(index, 1)
+                    })
+                    this.listAllSelected = false
+                } else {
+                    this.listInPage.forEach(item => {
+                        const index = this.selectedIp.findIndex(el => el.bk_host_id === item.bk_host_id)
+                        if (index === -1) {
+                            this.selectedIp.push(item)
+                        }
+                    })
+                    this.listAllSelected = true
+                }
+            },
+            onHostItemClick (host) {
+                const index = this.selectedIp.findIndex(el => el.bk_host_id === host.bk_host_id)
+                let checkedNumInPage = 0
             
-            this.listInPage.forEach(el => {
-                if (this.selectedIp.findIndex(item => item.bk_host_id === el.bk_host_id) > -1) {
-                    checkedNumInPage += 1
+                this.listInPage.forEach(el => {
+                    if (this.selectedIp.findIndex(item => item.bk_host_id === el.bk_host_id) > -1) {
+                        checkedNumInPage += 1
+                    }
+                })
+                if (index > -1) {
+                    this.selectedIp.splice(index, 1)
+                    this.listAllSelected = checkedNumInPage > 1 ? 'half' : false
+                } else {
+                    this.selectedIp.push(host)
+                    this.listAllSelected = checkedNumInPage === this.listInPage.length - 1 ? true : 'half'
                 }
-            })
-            if (index > -1) {
-                this.selectedIp.splice(index, 1)
-                this.listAllSelected = checkedNumInPage > 1 ? 'half' : false
-            } else {
-                this.selectedIp.push(host)
-                this.listAllSelected = checkedNumInPage === this.listInPage.length - 1 ? true : 'half'
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.listAllSelected = false
+                this.listInPage = this.staticIpList.slice((page - 1) * this.listCountPerPage, page * this.listCountPerPage)
+            },
+            onAddIpConfirm () {
+                this.$emit('onAddIpConfirm', this.selectedIp.slice(0))
+            },
+            onAddIpCancel () {
+                this.$emit('onAddIpCancel')
             }
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.listAllSelected = false
-            this.listInPage = this.staticIpList.slice((page - 1) * this.listCountPerPage, page * this.listCountPerPage)
-        },
-        onAddIpConfirm () {
-            this.$emit('onAddIpConfirm', this.selectedIp.slice(0))
-        },
-        onAddIpCancel () {
-            this.$emit('onAddIpCancel')
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .ip-added-number {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/index.vue b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/index.vue
index f74a2c5a54..8ebb93610d 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/IpSelector/index.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/IpSelector/index.vue
@@ -16,24 +16,24 @@
                 v-if="isMultiple"
                 ref="multipleIpSelector"
                 :editable="editable"
-                :selectorTabs="selectorTabs"
-                :staticIpList="staticIpList"
-                :dynamicIpList="dynamicIpList"
+                :selector-tabs="selectorTabs"
+                :static-ip-list="staticIpList"
+                :dynamic-ip-list="dynamicIpList"
                 :selectors="selectors"
-                :staticIps="ip"
-                :dynamicIps="topo"
+                :static-ips="ip"
+                :dynamic-ips="topo"
                 @change="updateValue">
             </multiple-ip-selector>
             <single-ip-selector
                 v-else
                 ref="singleIpSelector"
                 :editable="editable"
-                :selectorTabs="selectorTabs"
-                :staticIpList="staticIpList"
-                :dynamicIpList="dynamicIpList"
+                :selector-tabs="selectorTabs"
+                :static-ip-list="staticIpList"
+                :dynamic-ip-list="dynamicIpList"
                 :selectors="selectors"
-                :staticIps="ip"
-                :dynamicIps="topo"
+                :static-ips="ip"
+                :dynamic-ips="topo"
                 @change="updateValue">
             </single-ip-selector>
         </div>
@@ -42,7 +42,7 @@
                 ref="filterConditions"
                 :label="i18n.filter"
                 :editable="editable"
-                :conditionFields="topoModelList"
+                :condition-fields="topoModelList"
                 :conditions="filters"
                 @change="updateValue('filters', $event)">
             </select-condition>
@@ -50,7 +50,7 @@
                 ref="excludeConditions"
                 :label="i18n.exclude"
                 :editable="editable"
-                :conditionFields="topoModelList"
+                :condition-fields="topoModelList"
                 :conditions="excludes"
                 @change="updateValue('excludes', $event)">
             </select-condition>
@@ -58,152 +58,146 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import '@/utils/i18n.js' // ip选择器兼容标准运维国际化
+    import SingleIpSelector from './SingleIpSelector.vue'
+    import MultipleIpSelector from './MultipleIpSelector.vue'
+    import SelectCondition from './SelectCondition.vue'
 
-import SingleIpSelector from './SingleIpSelector.vue'
-import MultipleIpSelector from './MultipleIpSelector.vue'
-import SelectCondition from './SelectCondition.vue'
-
-const i18n = {
-    staticIp: gettext('静态IP'),
-    dynamicIp: gettext('动态IP'),
-    filter: gettext('筛选条件'),
-    exclude: gettext('排除条件')
-}
-
-// ip选择器兼容标准运维国际化
-if (typeof window.gettext !== 'function') {
-    window.gettext = function gettext (string) {
-        return string
+    const i18n = {
+        staticIp: gettext('静态IP'),
+        dynamicIp: gettext('动态IP'),
+        filter: gettext('筛选条件'),
+        exclude: gettext('排除条件')
     }
-}
 
-const PANEL_NAME_HASH = {
-    ip: 'staticIp',
-    topo: 'dynamicIp'
-}
+    // ip选择器兼容标准运维国际化
+    if (typeof window.gettext !== 'function') {
+        window.gettext = function gettext (string) {
+            return string
+        }
+    }
 
-export default {
-    name: 'IpSelector',
-    components: {
-        SingleIpSelector,
-        MultipleIpSelector,
-        SelectCondition
-    },
-    model: {
-        prop: 'value',
-        event: 'change'
-    },
-    props: {
-        value: {
-            type: Object,
-            default () {
-                return {
-                    selectors: [],
-                    ip: [],
-                    topo: [],
-                    filters: [],
-                    excludes: []
-                }
-            }
+    export default {
+        name: 'IpSelector',
+        components: {
+            SingleIpSelector,
+            MultipleIpSelector,
+            SelectCondition
         },
-        selectorTabs: {
-            type: Array,
-            default () {
-                return [
-                    {
-                        type: 'staticIp',
-                        id: 'ip',
-                        name: i18n.staticIp
-                    },
-                    {
-                        type: 'dynamicIp',
-                        id: 'topo',
-                        name: i18n.dynamicIp
+        model: {
+            prop: 'value',
+            event: 'change'
+        },
+        props: {
+            value: {
+                type: Object,
+                default () {
+                    return {
+                        selectors: [],
+                        ip: [],
+                        topo: [],
+                        filters: [],
+                        excludes: []
                     }
-                ]
+                }
+            },
+            selectorTabs: {
+                type: Array,
+                default () {
+                    return [
+                        {
+                            type: 'staticIp',
+                            id: 'ip',
+                            name: i18n.staticIp
+                        },
+                        {
+                            type: 'dynamicIp',
+                            id: 'topo',
+                            name: i18n.dynamicIp
+                        }
+                    ]
+                }
+            },
+            editable: {
+                type: Boolean,
+                default: true
+            },
+            isMultiple: {
+                type: Boolean,
+                default: true
+            },
+            // 静态IP可选列表
+            staticIpList: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            // 动态IP可选列表
+            dynamicIpList: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            // 筛选、排除条件分类
+            topoModelList: {
+                type: Array,
+                default () {
+                    return []
+                }
             }
         },
-        editable: {
-            type: Boolean,
-            default: true
-        },
-        isMultiple: {
-            type: Boolean,
-            default: true
-        },
-        // 静态IP可选列表
-        staticIpList: {
-            type: Array,
-            default () {
-                return []
+        data () {
+            const { selectors, ip, topo, filters, excludes } = this.value
+            return {
+                selectors: selectors.slice(0),
+                ip: ip.slice(0),
+                topo: topo.slice(0),
+                filters: filters.slice(0),
+                excludes: excludes.slice(0),
+                i18n
             }
         },
-        // 动态IP可选列表
-        dynamicIpList: {
-            type: Array,
-            default () {
-                return []
+        watch: {
+            value: {
+                handler (val) {
+                    const { selectors, ip, topo, filters, excludes } = this.value
+                    this.selectors = selectors.slice(0)
+                    this.ip = ip.slice(0)
+                    this.topo = topo.slice(0)
+                    this.filters = filters.slice(0)
+                    this.excludes = excludes.slice(0)
+                },
+                deep: true
             }
         },
-        // 筛选、排除条件分类
-        topoModelList: {
-            type: Array,
-            default () {
-                return []
-            }
-        }
-    },
-    data () {
-        const {selectors, ip, topo, filters, excludes} = this.value
-        return {
-            selectors: selectors.slice(0),
-            ip: ip.slice(0),
-            topo: topo.slice(0),
-            filters: filters.slice(0),
-            excludes: excludes.slice(0),
-            i18n
-        }
-    },
-    watch: {
-        value: {
-            handler (val) {
-                const {selectors, ip, topo, filters, excludes} = this.value
-                this.selectors = selectors.slice(0)
-                this.ip = ip.slice(0)
-                this.topo = topo.slice(0)
-                this.filters = filters.slice(0)
-                this.excludes = excludes.slice(0)
-            },
-            deep: true
-        }
-    },
-    methods: {
-        updateValue (key, val) {
-            if (!key) {
-                return
-            }
+        methods: {
+            updateValue (key, val) {
+                if (!key) {
+                    return
+                }
 
-            if (Array.isArray(key) && Array.isArray(val)) {
-                key.forEach((k, i) => {
-                    this.value[k] = val[i]
-                })
-            } else {
-                this.value[key] = val
-            }
+                if (Array.isArray(key) && Array.isArray(val)) {
+                    key.forEach((k, i) => {
+                        this.value[k] = val[i]
+                    })
+                } else {
+                    this.value[key] = val
+                }
 
-            this.$emit('change', this.value)
-        },
-        validate () {
-            const selector = this.isMultiple ? this.$refs.multipleIpSelector : this.$refs.singleIpSelector
-            const selectorValidate = selector.validate()
-            const filterValidate = this.$refs.filterConditions.validate()
-            const excludeValidate = this.$refs.excludeConditions.validate()
+                this.$emit('change', this.value)
+            },
+            validate () {
+                const selector = this.isMultiple ? this.$refs.multipleIpSelector : this.$refs.singleIpSelector
+                const selectorValidate = selector.validate()
+                const filterValidate = this.$refs.filterConditions.validate()
+                const excludeValidate = this.$refs.excludeConditions.validate()
             
-            return selectorValidate && filterValidate && excludeValidate
+                return selectorValidate && filterValidate && excludeValidate
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .select-area {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/RenderForm.vue b/pipeline/blueflow/src/components/common/RenderForm/RenderForm.vue
index d7643ebc0b..d18c1e28aa 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/RenderForm.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/RenderForm.vue
@@ -32,209 +32,208 @@
  * param {Object} formData 表单值
  * param {Object} hooked 表单是否勾选
  */
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import FormGroup from './FormGroup.vue'
-import FormItem from './FormItem.vue'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import FormGroup from './FormGroup.vue'
+    import FormItem from './FormItem.vue'
 
-const DEFAUTL_OPTION = {
-    showHook: false, // 是否可以勾选
-    showGroup: false, // 是否显示 combine 类型标准插件名称
-    showLabel: false, // 是否显示标准插件名称
-    formEdit: true, // 是否可编辑
-    formMode: true // 是否为表单模式（查看参数时，input、textarea等不需要用表单展示）
-}
+    const DEFAUTL_OPTION = {
+        showHook: false, // 是否可以勾选
+        showGroup: false, // 是否显示 combine 类型标准插件名称
+        showLabel: false, // 是否显示标准插件名称
+        formEdit: true, // 是否可编辑
+        formMode: true // 是否为表单模式（查看参数时，input、textarea等不需要用表单展示）
+    }
 
-export default {
-    name: 'RenderForm',
-    components: {
-        FormGroup,
-        FormItem
-    },
-    model: {
-        prop: 'formData',
-        event: 'change'
-    },
-    data () {
-        return {
-            value: tools.deepClone(this.formData)
-        }
-    },
-    props: {
-        scheme: {
-            type: Array,
-            default () {
-                return []
-            }
+    export default {
+        name: 'RenderForm',
+        components: {
+            FormGroup,
+            FormItem
+        },
+        model: {
+            prop: 'formData',
+            event: 'change'
         },
-        formOption: {
-            type: Object,
-            default () {
-                return {
-                    ...DEFAUTL_OPTION
+        props: {
+            scheme: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            formOption: {
+                type: Object,
+                default () {
+                    return {
+                        ...DEFAUTL_OPTION
+                    }
+                }
+            },
+            formData: {
+                type: Object,
+                default () {
+                    return {}
+                }
+            },
+            hooked: {
+                type: Object,
+                default () {
+                    return {}
                 }
             }
         },
-        formData: {
-            type: Object,
-            default () {
-                return {}
+        data () {
+            return {
+                value: tools.deepClone(this.formData)
             }
         },
-        hooked: {
-            type: Object,
-            default () {
-                return {}
+        computed: {
+            option () {
+                return Object.assign({}, DEFAUTL_OPTION, this.formOption)
             }
-        }
-    },
-    computed: {
-        option () {
-            return Object.assign({}, DEFAUTL_OPTION, this.formOption)
-        }
-    },
-    watch: {
-        scheme: {
-            handler: function (val) {
-                this.setDefaultValue(val, this.formData)
-            },
-            deep: true
         },
-        formData: {
-            handler: function (val) {
-                this.value = tools.deepClone(val)
+        watch: {
+            scheme: {
+                handler: function (val) {
+                    this.setDefaultValue(val, this.formData)
+                },
+                deep: true
             },
-            deep: true
-        }
-    },
-    created () {
-        this.setDefaultValue(this.scheme, this.formData)
-    },
-    methods: {
-        /**
-         * 设置表单默认值
-         * 若传入的 formData 不包含表单项的值，取值顺序为：标准插件配置项 value 字段 -> 标准插件配置项 default 字段 -> tag 类型默认值
-         * @param {Array} scheme 表单配置项
-         * @param {Object} data 表单值
-         */
-        setDefaultValue (scheme, data) {
-            if (!scheme || !Array.isArray(scheme)) return
+            formData: {
+                handler: function (val) {
+                    this.value = tools.deepClone(val)
+                },
+                deep: true
+            }
+        },
+        created () {
+            this.setDefaultValue(this.scheme, this.formData)
+        },
+        methods: {
+            /**
+             * 设置表单默认值
+             * 若传入的 formData 不包含表单项的值，取值顺序为：标准插件配置项 value 字段 -> 标准插件配置项 default 字段 -> tag 类型默认值
+             * @param {Array} scheme 表单配置项
+             * @param {Object} data 表单值
+             */
+            setDefaultValue (scheme, data) {
+                if (!scheme || !Array.isArray(scheme)) return
 
-            scheme.forEach(item => {
-                const key = item.tag_code
+                scheme.forEach(item => {
+                    const key = item.tag_code
 
-                if (item.type === 'combine') {
-                    if (!this.hooked || !this.hooked[item.tag_code]) {
+                    if (item.type === 'combine') {
+                        if (!this.hooked || !this.hooked[item.tag_code]) {
+                            if (!(key in data)) {
+                                this.$set(data, key, {})
+                                this.$set(this.value, key, {})
+                            }
+                            this.setDefaultValue(item.attrs.children, data[key])
+                        }
+                    } else {
                         if (!(key in data)) {
-                            this.$set(data, key, {})
-                            this.$set(this.value, key, {})
+                            let val
+                            if ('value' in item.attrs) {
+                                val = tools.deepClone(item.attrs.value)
+                            } else if ('default' in item.attrs) {
+                                val = tools.deepClone(item.attrs.default)
+                            } else {
+                                switch (item.type) {
+                                    case 'input':
+                                    case 'textarea':
+                                    case 'radio':
+                                    case 'text':
+                                    case 'datetime':
+                                    case 'password':
+                                        val = ''
+                                        break
+                                    case 'checkbox':
+                                    case 'datatable':
+                                    case 'tree':
+                                    case 'upload':
+                                        val = []
+                                        break
+                                    case 'select':
+                                        val = item.attrs.multiple ? [] : ''
+                                        break
+                                    case 'int':
+                                        val = 0
+                                        break
+                                    case 'ip_selector':
+                                        val = {
+                                            selectors: [],
+                                            ip: [],
+                                            topo: [],
+                                            filters: [],
+                                            excludes: []
+                                        }
+                                        break
+                                    default:
+                                        val = ''
+                                }
+                            }
+                            this.$set(data, key, val)
                         }
-                        this.setDefaultValue (item.attrs.children, data[key])
                     }
-                } else {
-                    if (!(key in data)) {
-                        let val
-                        if ('value' in item.attrs) {
-                            val = tools.deepClone(item.attrs.value)
-                        } else if ('default' in item.attrs) {
-                            val = tools.deepClone(item.attrs.default)
-                        } else {
-                            switch (item.type) {
-                                case 'input':
-                                case 'textarea':
-                                case 'radio':
-                                case 'text':
-                                case 'datetime':
-                                case 'password':
-                                    val = ''
-                                    break
-                                case 'checkbox':
-                                case 'datatable':
-                                case 'tree':
-                                case 'upload':
-                                    val = []
-                                    break
-                                case 'select':
-                                    val = item.attrs.multiple ? [] : ''
-                                    break
-                                case 'int':
-                                    val = 0
-                                    break
-                                case 'ip_selector':
-                                    val = {
-                                        selectors: [],
-                                        ip: [],
-                                        topo: [],
-                                        filters: [],
-                                        excludes: []
-                                    }
-                                    break
-                                default:
-                                    val = ''
+                })
+            },
+            getFormValue (atom) {
+                return this.value[atom.tag_code]
+            },
+            updateForm (fieldArr, val) {
+                const field = fieldArr.slice(-1)[0]
+                let fieldDataObj = this.value
+                fieldArr.slice(0, -1).forEach(item => {
+                    if (item in fieldDataObj) {
+                        fieldDataObj = fieldDataObj[item]
+                    } else {
+                        this.$set(fieldDataObj, item, {})
+                    }
+                })
 
-                            }
+                this.$set(fieldDataObj, field, val)
+                this.$emit('change', this.value)
+            },
+            updateHook (field, val) {
+                this.$emit('onHookChange', field, val)
+            },
+            /**
+             * 获取 combine 类型组件的子组件实例
+             * @param {String} tagCode 标准插件 tag_code，值空时，返回全部子组件
+             */
+            get_child (tagCode) {
+                let childComponent
+                if (typeof tagCode === 'string' && tagCode !== '') {
+                    this.$children.some(item => {
+                        if (item.scheme && item.scheme.tag_code === tagCode) {
+                            childComponent = item.$children[0]
+                            return true
                         }
-                        this.$set(data, key, val)
-                    }
-                }
-            })
-        },
-        getFormValue (atom) {
-            return this.value[atom.tag_code]
-        },
-        updateForm (fieldArr, val) {
-            const field = fieldArr.slice(-1)[0]
-            let fieldDataObj = this.value
-            fieldArr.slice(0, -1).forEach(item => {
-                if (item in fieldDataObj) {
-                    fieldDataObj = fieldDataObj[item]
+                    })
                 } else {
-                    this.$set(fieldDataObj, item, {})
+                    childComponent = this.$children
                 }
-            })
 
-            this.$set(fieldDataObj, field, val)
-            this.$emit('change', this.value)
-        },
-        updateHook (field, val) {
-            this.$emit('onHookChange', field, val)
-        },
-        /**
-         * 获取 combine 类型组件的子组件实例
-         * @param {String} tagCode 标准插件 tag_code，值空时，返回全部子组件
-         */
-        get_child (tagCode) {
-            let childComponent
-            if (typeof tagCode === 'string' && tagCode !== '') {
-                this.$children.some(item => {
-                    if (item.scheme && item.scheme.tag_code === tagCode) {
-                        childComponent = item.$children[0]
-                        return true
+                return childComponent
+            },
+            /**
+             * 表单校验函数
+             * @TODO: 改写为 promise 异步机制
+             */
+            validate () {
+                let isValid = true
+                this.$children.forEach(childComp => {
+                    const singleItemValid = childComp.validate()
+
+                    if (isValid) {
+                        isValid = singleItemValid
                     }
                 })
-            } else {
-                childComponent = this.$children
+                return isValid
             }
-
-            return childComponent
-        },
-        /**
-         * 表单校验函数
-         * @TODO: 改写为 promise 异步机制
-         */
-        validate () {
-            let isValid = true
-            this.$children.forEach(childComp => {
-                const singleItemValid = childComp.validate()
-
-                if (isValid) {
-                    isValid = singleItemValid
-                }
-            })
-            return isValid
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .render-form {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/formMixins.js b/pipeline/blueflow/src/components/common/RenderForm/formMixins.js
index f6139ed8c7..b731a87258 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/formMixins.js
+++ b/pipeline/blueflow/src/components/common/RenderForm/formMixins.js
@@ -134,7 +134,7 @@ export function getFormMixins (attrs = {}) {
             this._tag_init && this._tag_init()
 
             // 组件插入到 DOM 后， 在父父组件上发布该 Tag 组件的 init 事件，触发标准插件配置项里监听的函数
-            this.$nextTick(()=>{
+            this.$nextTick(() => {
                 this.$parent.$parent.$emit(`${this.tagCode}_init`, this.value)
             })
         },
@@ -142,7 +142,7 @@ export function getFormMixins (attrs = {}) {
             updateForm (val) {
                 const fieldsArr = [this.tagCode]
                 this.$emit('change', fieldsArr, val)
-                this.$nextTick(()=> {
+                this.$nextTick(() => {
                     this.onChange()
                     this.validate()
                 })
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagCheckbox.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagCheckbox.vue
index 184055b5a1..013a8cedac 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagCheckbox.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagCheckbox.vue
@@ -23,53 +23,53 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const checkboxAttrs = {
-    items: {
-        type: Array,
-        required: true,
-        desc: "array like [{name: '', value: ''}, {name: '', value: ''}]"
-    },
-    value: {
-        type: Array,
-        required: false,
-        default () {
-            return []
+    const checkboxAttrs = {
+        items: {
+            type: Array,
+            required: true,
+            desc: "array like [{name: '', value: ''}, {name: '', value: ''}]"
+        },
+        value: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            }
         }
     }
-}
-export default {
-    name: 'TagCheckbox',
-    mixins: [getFormMixins(checkboxAttrs)],
-    computed: {
-        checkedValue: {
-            get () {
-                return this.value
+    export default {
+        name: 'TagCheckbox',
+        mixins: [getFormMixins(checkboxAttrs)],
+        computed: {
+            checkedValue: {
+                get () {
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
+                }
             },
-            set (val) {
-                this.updateForm(val)
-            }
-        },
-        viewValue () {
-            if (!this.checkedValue.length) {
-                return '--'
-            }
+            viewValue () {
+                if (!this.checkedValue.length) {
+                    return '--'
+                }
 
-            return this.checkedValue.map(val => {
-                let label = val
-                this.items.some(item => {
-                    if (item.value === val) {
-                        label = item.name
-                        return true
-                    }
-                })
-                return label
-            }).join(',')
+                return this.checkedValue.map(val => {
+                    let label = val
+                    this.items.some(item => {
+                        if (item.value === val) {
+                            label = item.name
+                            return true
+                        }
+                    })
+                    return label
+                }).join(',')
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .checkbox-item {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatatable.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatatable.vue
index d95c722c4f..458af583cb 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatatable.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatatable.vue
@@ -25,7 +25,7 @@
             border>
             <template v-for="(item, cIndex) in columns">
                 <el-table-column
-                    v-if="'hidden' in item.attrs? !item.attrs.hidden : true"
+                    v-if="'hidden' in item.attrs ? !item.attrs.hidden : true"
                     :key="item.tag_code"
                     :index="cIndex"
                     :prop="item.tag_code"
@@ -39,7 +39,7 @@
                             :scheme="item"
                             :option="getColumnOptions(scope.$index)"
                             :value="scope.row[item.tag_code]"
-                            :parentValue="scope.row"
+                            :parent-value="scope.row"
                             @change="onEditColumn">
                         </component>
                     </template>
@@ -67,273 +67,272 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations } from 'vuex'
-import tools from '@/utils/tools.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import { getFormMixins } from '../formMixins.js'
-import FormItem from '../FormItem.vue'
-import FormGroup from '../FormGroup.vue'
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations } from 'vuex'
+    import tools from '@/utils/tools.js'
+    import { getFormMixins } from '../formMixins.js'
+    import FormItem from '../FormItem.vue'
+    import FormGroup from '../FormGroup.vue'
 
-const datatableAttrs = {
-    columns: {
-        type: Array,
-        required: false,
-        default () {
-            return []
+    const datatableAttrs = {
+        columns: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            },
+            desc: 'initial data, which should be a array like [{tag config}]'
         },
-        desc: 'initial data, which should be a array like [{tag config}]'
-    },
-    editable: {
-        type: Boolean,
-        required: false,
-        default: true,
-        desc: 'show edit and delete button or not'
-    },
-    value: {
-        type: Array,
-        required: false,
-        default () {
-            return []
-        }
-    },
-    add_btn: {
-        type: Boolean,
-        required: false,
-        default: false,
-        desc: 'show add button or not'
-    },
-    empty_text: {
-        type: String,
-        required: false,
-        default: gettext('无数据'),
-        desc: 'tips when data is empty'
-    },
-    remote_url: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'remote url when remote is true'
-    },
-    remote_data_init: {
-        type: Function,
-        required: false,
-        default: function (data) {
-            return data
+        editable: {
+            type: Boolean,
+            required: false,
+            default: true,
+            desc: 'show edit and delete button or not'
         },
-        desc: 'how to process data after getting remote data'
-    }
-}
-export default {
-    /**
-     * notice：inject为了兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
-     */
-    inject: {
-        nodeId: {
-            default: null
-        }
-    },
-    name: 'TagDatatable',
-    components: {
-        FormItem,
-        FormGroup
-    },
-    mixins: [getFormMixins(datatableAttrs)],
-    data () {
-        return {
-            editRowNumber: undefined,
-            tableValue: tools.deepClone(this.value),
-            loading: false,
-            i18n: {
-                save_text: gettext("保存"),
-                cancel_text: gettext("取消"),
-                edit_text: gettext("编辑"),
-                operate_text: gettext("操作"),
-                delete_text: gettext("删除"),
-                add_text: gettext("添加")
+        value: {
+            type: Array,
+            required: false,
+            default () {
+                return []
             }
-        }
-    },
-    computed: {
-        /**
-         * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
-         */
-        ...mapState({
-            'atomForm': state => state.atomForm,
-            'constants': state => state.template.constants
-        })
-    },
-    watch: {
-        remote_url (value) {
-            this.remoteMethod()
         },
-        value (val, oldVal) {
-            this.tableValue = tools.deepClone(val)
-            /**
-             * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
-             */
-            if (this.tagCode === 'job_global_var' && this.formEdit) {
-                this.setOutputParams(oldVal)
-            }
-        }
-    },
-    mounted () {
-        if (this.tagCode === 'job_global_var' && this.formEdit) {
-            this.setOutputParams()
+        add_btn: {
+            type: Boolean,
+            required: false,
+            default: false,
+            desc: 'show add button or not'
+        },
+        empty_text: {
+            type: String,
+            required: false,
+            default: gettext('无数据'),
+            desc: 'tips when data is empty'
+        },
+        remote_url: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'remote url when remote is true'
+        },
+        remote_data_init: {
+            type: Function,
+            required: false,
+            default: function (data) {
+                return data
+            },
+            desc: 'how to process data after getting remote data'
         }
-        this.remoteMethod()
-    },
-    methods: {
-        /**
-         * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
-         */
-        ...mapMutations ('atomForm/', [
-            'setAtomOutput'
-        ]),
-        ...mapMutations ('template/', [
-            'deleteVariable'
-        ]),
-
+    }
+    export default {
         /**
-         * 表格内每列的数据的校验
-         * 筛选 ref 接口获得的子表单组件，分别调用 validate 方法
+         * notice：inject为了兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
          */
-        validateSubCom (index) {
-            let isValid = true
-            const startNameReg = `^row_${index}`
-            for (let ref in this.$refs) {
-                let singleItemValid = true
-                if (new RegExp(startNameReg).test(ref)) {
-                    const childComp = this.$refs[ref]
-                    if (childComp && childComp.length) {
-                        // ElTable 组件在添加固定列时，会生成两个相同的 ElTableBody 组件
-                        singleItemValid = childComp[0].validate()
-                    } else {
-                        delete this.$refs[ref]
-                    }
-
-                    if (isValid) {
-                        isValid = singleItemValid
-                    }
-                }
+        inject: {
+            nodeId: {
+                default: null
             }
-            return isValid
         },
-        getColumnOptions (index) {
+        name: 'TagDatatable',
+        components: {
+            FormItem,
+            FormGroup
+        },
+        mixins: [getFormMixins(datatableAttrs)],
+        data () {
             return {
-                showHook: false,
-                showGroup: false,
-                showLabel: false,
-                editable: this.editRowNumber === index,
-                formMode: this.editRowNumber === index
+                editRowNumber: undefined,
+                tableValue: tools.deepClone(this.value),
+                loading: false,
+                i18n: {
+                    save_text: gettext('保存'),
+                    cancel_text: gettext('取消'),
+                    edit_text: gettext('编辑'),
+                    operate_text: gettext('操作'),
+                    delete_text: gettext('删除'),
+                    add_text: gettext('添加')
+                }
             }
         },
-        onEdit (index, row) {
-            this.editRowNumber = index
-        },
-        onEditColumn (fieldsArr, val) {
-            const field = fieldsArr.slice(-1)
-            this.$set(this.tableValue[this.editRowNumber], field, val)
-        },
-        onDelete (index, row) {
-            this.tableValue.splice(index, 1)
-            this.updateForm(this.tableValue)
-        },
-        onSave (index, row) {
-            const valueValid = this.validateSubCom(index)
-            if (!valueValid) return
-
-            this.editRowNumber = undefined
-            this.updateForm(tools.deepClone(this.tableValue))
-        },
-        onCancel (index, row) {
-            this.editRowNumber = undefined
-            this.tableValue = tools.deepClone(this.value)
+        computed: {
+            /**
+             * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
+             */
+            ...mapState({
+                'atomForm': state => state.atomForm,
+                'constants': state => state.template.constants
+            })
         },
-        set_loading (loading) {
-            this.loading = loading
+        watch: {
+            remote_url (value) {
+                this.remoteMethod()
+            },
+            value (val, oldVal) {
+                this.tableValue = tools.deepClone(val)
+                /**
+                 * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
+                 */
+                if (this.tagCode === 'job_global_var' && this.formEdit) {
+                    this.setOutputParams(oldVal)
+                }
+            }
         },
-        add_row (){
-            if (typeof this.editRowNumber === 'number') {
-                const valueValid = this.validateSubCom(this.editRowNumber)
-                if (!valueValid) return
+        mounted () {
+            if (this.tagCode === 'job_global_var' && this.formEdit) {
+                this.setOutputParams()
             }
-
-            let originData = {}
-            this.columns.forEach((item, index) => {
-                originData[item.tag_code] = item.default || ''
-            })
-            this.editRowNumber = this.tableValue.length
-            this.tableValue.push(originData)
+            this.remoteMethod()
         },
-        remoteMethod () {
-            var remote_url = typeof this.remote_url === 'function' ? this.remote_url() : this.remote_url
-            if (remote_url) {
-                this.loading = true
-                var $this = this
+        methods: {
+            /**
+             * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
+             */
+            ...mapMutations('atomForm/', [
+                'setAtomOutput'
+            ]),
+            ...mapMutations('template/', [
+                'deleteVariable'
+            ]),
 
-                $.ajax({
-                    url: remote_url,
-                    method: "GET",
-                    success: res => {
-                        var data = $this.remote_data_init(res)
-                        for (let i in data) {
-                            data[i].width = Math.max(150, data[i].attrs.name.length * 20) + 'px'
+            /**
+             * 表格内每列的数据的校验
+             * 筛选 ref 接口获得的子表单组件，分别调用 validate 方法
+             */
+            validateSubCom (index) {
+                let isValid = true
+                const startNameReg = `^row_${index}`
+                for (const ref in this.$refs) {
+                    let singleItemValid = true
+                    if (new RegExp(startNameReg).test(ref)) {
+                        const childComp = this.$refs[ref]
+                        if (childComp && childComp.length) {
+                            // ElTable 组件在添加固定列时，会生成两个相同的 ElTableBody 组件
+                            singleItemValid = childComp[0].validate()
+                        } else {
+                            delete this.$refs[ref]
                         }
-                        $this.columns = data
-                        $this.loading = false
-                    },
-                    error: () => {
-                        $this.empty_text = gettext("请求表头数据失败，使用预置表头")
-                        $this.loading = false
-                    }
-                })
-            }
-        },
-        /**
-         * notice: 该方法为了兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
-         * description: 切换作业模板时，将当前作业的全局变量添加到输出参数
-         *
-         * @param {Array} oldVal 作业模板切换之前的全局变量值
-         */
-        setOutputParams (oldVal) {
-            const specialAtom = 'job_execute_task'
-            if (this.value) {
-                const atomOutput = this.atomForm.form[specialAtom].output.slice(0)
 
-                this.value.forEach(item => {
-                    if (typeof item.type === 'number' && item.type !== 2 && item.category === 1) {
-                        atomOutput.push({
-                            key: item.name,
-                            name: item.name
-                        })
+                        if (isValid) {
+                            isValid = singleItemValid
+                        }
                     }
+                }
+                return isValid
+            },
+            getColumnOptions (index) {
+                return {
+                    showHook: false,
+                    showGroup: false,
+                    showLabel: false,
+                    editable: this.editRowNumber === index,
+                    formMode: this.editRowNumber === index
+                }
+            },
+            onEdit (index, row) {
+                this.editRowNumber = index
+            },
+            onEditColumn (fieldsArr, val) {
+                const field = fieldsArr.slice(-1)
+                this.$set(this.tableValue[this.editRowNumber], field, val)
+            },
+            onDelete (index, row) {
+                this.tableValue.splice(index, 1)
+                this.updateForm(this.tableValue)
+            },
+            onSave (index, row) {
+                const valueValid = this.validateSubCom(index)
+                if (!valueValid) return
+
+                this.editRowNumber = undefined
+                this.updateForm(tools.deepClone(this.tableValue))
+            },
+            onCancel (index, row) {
+                this.editRowNumber = undefined
+                this.tableValue = tools.deepClone(this.value)
+            },
+            set_loading (loading) {
+                this.loading = loading
+            },
+            add_row () {
+                if (typeof this.editRowNumber === 'number') {
+                    const valueValid = this.validateSubCom(this.editRowNumber)
+                    if (!valueValid) return
+                }
+
+                const originData = {}
+                this.columns.forEach((item, index) => {
+                    originData[item.tag_code] = item.default || ''
                 })
-                this.setAtomOutput({
-                    atomType: specialAtom,
-                    outputData: atomOutput
-                })
-            }
-            if (oldVal && this.nodeId) {
-                oldVal.forEach(item => {
-                    if (typeof item.type === 'number' && item.type !== 2) {
-                        let variableKey
-                        Object.keys(this.constants).some(key => {
-                            const cst = this.constants[key]
-                            const sourceInfo = cst.source_info[this.nodeId]
-                            if (sourceInfo && sourceInfo.indexOf(item.key)) {
-                                variableKey = key
-                                return true
+                this.editRowNumber = this.tableValue.length
+                this.tableValue.push(originData)
+            },
+            remoteMethod () {
+                const remote_url = typeof this.remote_url === 'function' ? this.remote_url() : this.remote_url
+                if (remote_url) {
+                    this.loading = true
+                    const $this = this
+
+                    $.ajax({
+                        url: remote_url,
+                        method: 'GET',
+                        success: res => {
+                            const data = $this.remote_data_init(res)
+                            for (const i in data) {
+                                data[i].width = Math.max(150, data[i].attrs.name.length * 20) + 'px'
                             }
-                        })
+                            $this.columns = data
+                            $this.loading = false
+                        },
+                        error: () => {
+                            $this.empty_text = gettext('请求表头数据失败，使用预置表头')
+                            $this.loading = false
+                        }
+                    })
+                }
+            },
+            /**
+             * notice: 该方法为了兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
+             * description: 切换作业模板时，将当前作业的全局变量添加到输出参数
+             *
+             * @param {Array} oldVal 作业模板切换之前的全局变量值
+             */
+            setOutputParams (oldVal) {
+                const specialAtom = 'job_execute_task'
+                if (this.value) {
+                    const atomOutput = this.atomForm.form[specialAtom].output.slice(0)
 
-                        variableKey && this.deleteVariable(variableKey)
-                    }
-                })
+                    this.value.forEach(item => {
+                        if (typeof item.type === 'number' && item.type !== 2 && item.category === 1) {
+                            atomOutput.push({
+                                key: item.name,
+                                name: item.name
+                            })
+                        }
+                    })
+                    this.setAtomOutput({
+                        atomType: specialAtom,
+                        outputData: atomOutput
+                    })
+                }
+                if (oldVal && this.nodeId) {
+                    oldVal.forEach(item => {
+                        if (typeof item.type === 'number' && item.type !== 2) {
+                            let variableKey
+                            Object.keys(this.constants).some(key => {
+                                const cst = this.constants[key]
+                                const sourceInfo = cst.source_info[this.nodeId]
+                                if (sourceInfo && sourceInfo.indexOf(item.key)) {
+                                    variableKey = key
+                                    return true
+                                }
+                            })
+
+                            variableKey && this.deleteVariable(variableKey)
+                        }
+                    })
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatetime.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatetime.vue
index 01fbd441ae..d20669498b 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatetime.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagDatetime.vue
@@ -26,36 +26,36 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const datetimeAttrs = {
-    placeholder: {
-        type: String,
-        required: false,
-        default: gettext("请选择日期时间"),
-        desc: "placeholder"
-    },
-    value: {
-        type: String,
-        required: false,
-        default: ''
+    const datetimeAttrs = {
+        placeholder: {
+            type: String,
+            required: false,
+            default: gettext('请选择日期时间'),
+            desc: 'placeholder'
+        },
+        value: {
+            type: String,
+            required: false,
+            default: ''
+        }
     }
-}
-export default {
-    name: 'TagDatetime',
-    mixins: [getFormMixins(datetimeAttrs)],
-    computed: {
-        dateValue: {
-            get () {
-                return this.value
-            },
-            set (val) {
-                this.updateForm(val)
+    export default {
+        name: 'TagDatetime',
+        mixins: [getFormMixins(datetimeAttrs)],
+        computed: {
+            dateValue: {
+                get () {
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .tag-datetime {
@@ -69,4 +69,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagInput.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagInput.vue
index 8e9ff5eda6..cacfb745a5 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagInput.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagInput.vue
@@ -40,100 +40,100 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState } from 'vuex'
-import dom from '@/utils/dom.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { mapState } from 'vuex'
+    import dom from '@/utils/dom.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const VAR_REG = /\$\{\w*$/
+    const VAR_REG = /\$\{\w*$/
 
-const inputAttrs = {
-    placeholder: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'placeholder'
-    },
-    value: {
-        type: String,
-        required: false,
-        default: ''
-    },
-    showVarList: {
-        type: Boolean,
-        default: false
-    }
-}
-export default {
-    name: 'TagInput',
-    mixins: [getFormMixins(inputAttrs)],
-    data () {
-        return {
-            isListOpen: false,
-            varList: []
+    const inputAttrs = {
+        placeholder: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'placeholder'
+        },
+        value: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        showVarList: {
+            type: Boolean,
+            default: false
         }
-    },
-    computed: {
-        ...mapState({
-            'constants': state => state.template.constants
-        }),
-        constantArr: {
-            get () {
-                if (this.constants) {
-                    return Object.keys(this.constants)
+    }
+    export default {
+        name: 'TagInput',
+        mixins: [getFormMixins(inputAttrs)],
+        data () {
+            return {
+                isListOpen: false,
+                varList: []
+            }
+        },
+        computed: {
+            ...mapState({
+                'constants': state => state.template.constants
+            }),
+            constantArr: {
+                get () {
+                    if (this.constants) {
+                        return Object.keys(this.constants)
+                    }
+                    return []
+                },
+                set (val) {
+                    this.varList = val
                 }
-                return []
             },
-            set (val) {
-                this.varList = val
+
+            inputValue: {
+                get () {
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
+                }
             }
         },
-
-        inputValue: {
-            get () {
-                return this.value
+        created () {
+            window.addEventListener('click', this.handleListShow, false)
+        },
+        before () {
+            window.removeEventListener('click', this.handleListShow, false)
+        },
+        methods: {
+            handleListShow (e) {
+                if (!this.isListOpen) {
+                    return
+                }
+                const listPanel = document.querySelector('.rf-select-list')
+                if (listPanel && !dom.nodeContains(listPanel, e.target)) {
+                    this.isListOpen = false
+                }
             },
-            set (val) {
-                this.updateForm(val)
-            }
-        }
-    },
-    created () {
-        window.addEventListener('click', this.handleListShow, false)
-    },
-    before () {
-        window.removeEventListener('click', this.handleListShow, false)
-    },
-    methods: {
-        handleListShow (e) {
-            if (!this.isListOpen) {
-                return
-            }
-            const listPanel = document.querySelector(".rf-select-list")
-            if (listPanel && !dom.nodeContains(listPanel, e.target)) {
+            onInput (val) {
+                const matchResult = val.match(VAR_REG)
+                if (matchResult && matchResult[0]) {
+                    const regStr = matchResult[0].replace(/[\$\{\}]/g, '\\$&')
+                    const inputReg = new RegExp(regStr)
+                    this.varList = this.constantArr.filter(item => {
+                        return inputReg.test(item)
+                    })
+                } else {
+                    this.varList = []
+                }
+                this.isListOpen = !!this.varList.length
+            },
+            onSelectVal (val) {
+                const replacedValue = this.value.replace(VAR_REG, val)
+                this.updateForm(replacedValue)
                 this.isListOpen = false
             }
-        },
-        onInput (val) {
-            const matchResult = val.match(VAR_REG)
-            if (matchResult && matchResult[0]) {
-                const regStr = matchResult[0].replace(/[\$\{\}]/g, '\\$&')
-                const inputReg = new RegExp(regStr)
-                this.varList = this.constantArr.filter(item => {
-                    return inputReg.test(item)
-                })
-            } else {
-                this.varList = []
-            }
-            this.isListOpen = !!this.varList.length
-        },
-        onSelectVal (val) {
-            const replacedValue = this.value.replace(VAR_REG, val)
-            this.updateForm(replacedValue)
-            this.isListOpen = false
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/mixins/scrollbar.scss';
@@ -175,4 +175,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagInt.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagInt.vue
index 993d95f6b4..e72e52029b 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagInt.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagInt.vue
@@ -24,37 +24,37 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const intAttrs = {
-    placeholder: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'placeholder'
-    },
-    value: {
-        type: [Number, String],
-        required: false,
-        default: 0
+    const intAttrs = {
+        placeholder: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'placeholder'
+        },
+        value: {
+            type: [Number, String],
+            required: false,
+            default: 0
+        }
     }
-}
-export default {
-    name: 'TagInt',
-    mixins: [getFormMixins(intAttrs)],
-    computed: {
-        intValue: {
-            get () {
-                return Number(this.value)
-            },
-            set (val) {
-                val = parseInt(val)
-                this.updateForm(val)
+    export default {
+        name: 'TagInt',
+        mixins: [getFormMixins(intAttrs)],
+        computed: {
+            intValue: {
+                get () {
+                    return Number(this.value)
+                },
+                set (val) {
+                    val = parseInt(val)
+                    this.updateForm(val)
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .tag-input {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagIpSelector.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagIpSelector.vue
index 1a174577a9..01984436fd 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagIpSelector.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagIpSelector.vue
@@ -10,15 +10,15 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="tag-ip-selector" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="tag-ip-selector" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div v-if="formMode" class="tag-ip-selector-wrap">
             <ip-selector
                 ref="ipSelector"
                 :editable="editable"
-                :isMultiple="isMultiple"
-                :staticIpList="staticIpList"
-                :dynamicIpList="dynamicIpList"
-                :topoModelList="topoModelList"
+                :is-multiple="isMultiple"
+                :static-ip-list="staticIpList"
+                :dynamic-ip-list="dynamicIpList"
+                :topo-model-list="topoModelList"
                 v-model="ipValue">
             </ip-selector>
         </div>
@@ -26,103 +26,103 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import {mapActions} from 'vuex'
-import { getFormMixins } from '../formMixins.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import IpSelector from '../IpSelector/index.vue'
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { getFormMixins } from '../formMixins.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import IpSelector from '../IpSelector/index.vue'
 
-const intAttrs = {
-    isMultiple: {
-        type: Boolean,
-        required: false,
-        default: true,
-        desc: 'checkbox or radio'
-    },
-    value: {
-        type: [Object],
-        required: false,
-        default () {
-            return {
-                selectors: [],
-                ip: [],
-                topo: [],
-                filters: [],
-                excludes: []
+    const intAttrs = {
+        isMultiple: {
+            type: Boolean,
+            required: false,
+            default: true,
+            desc: 'checkbox or radio'
+        },
+        value: {
+            type: [Object],
+            required: false,
+            default () {
+                return {
+                    selectors: [],
+                    ip: [],
+                    topo: [],
+                    filters: [],
+                    excludes: []
+                }
             }
         }
     }
-}
-export default {
-    name: 'TagIp_selector',
-    components: {
-        IpSelector
-    },
-    mixins: [getFormMixins(intAttrs)],
-    data () {
-        return {
-            loading: true,
-            staticIpList: [],
-            dynamicIpList: [],
-            topoModelList: []
-        }
-    },
-    computed: {
-        ipValue: {
-            get () {
-                return this.value
-            },
-            set (val) {
-                this.updateForm(val)
+    export default {
+        name: 'TagIp_selector',
+        components: {
+            IpSelector
+        },
+        mixins: [getFormMixins(intAttrs)],
+        data () {
+            return {
+                loading: true,
+                staticIpList: [],
+                dynamicIpList: [],
+                topoModelList: []
             }
         },
-        viewValue () {
-            let val = ''
-            this.ipValue.selectors.forEach(selector => {
-                if (selector === 'ip') {
-                    val += this.ipValue[selector].map(item => item.bk_host_innerip).join('; ')
+        computed: {
+            ipValue: {
+                get () {
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
                 }
-                if (selector === 'topo') {
-                    val += this.ipValue[selector].map(item => item.bk_inst_id).join('; ')
-                }
-            })
-            return val || '--'
-        }
-    },
-    created () {
-        this.getData()
-    },
-    methods: {
-        ...mapActions([
-            'getHostInCC',
-            'getTopoTreeInCC',
-            'getTopoModelInCC'
-        ]),
-        getData () {
-            this.loading = true
-            const staticIpExtraFields = ['agent']
-
-            Promise.all([
-                this.getHostInCC(staticIpExtraFields),
-                this.getTopoTreeInCC(),
-                this.getTopoModelInCC()
-            ]).then(values => {
-                if (Array.isArray(values)) {
-                    this.staticIpList = (values[0] && values[0].data) || []
-                    this.dynamicIpList = (values[1] && values[1].data) || []
-                    this.topoModelList = (values[2] && values[2].data) || []
-                }
-                this.loading = false
-            }).catch(e => {
-                this.loading = false
-                errorHandler(e, this)
-            })
+            },
+            viewValue () {
+                let val = ''
+                this.ipValue.selectors.forEach(selector => {
+                    if (selector === 'ip') {
+                        val += this.ipValue[selector].map(item => item.bk_host_innerip).join('; ')
+                    }
+                    if (selector === 'topo') {
+                        val += this.ipValue[selector].map(item => item.bk_inst_id).join('; ')
+                    }
+                })
+                return val || '--'
+            }
+        },
+        created () {
+            this.getData()
         },
-        customValidate () {
-            return this.$refs.ipSelector.validate()
+        methods: {
+            ...mapActions([
+                'getHostInCC',
+                'getTopoTreeInCC',
+                'getTopoModelInCC'
+            ]),
+            getData () {
+                this.loading = true
+                const staticIpExtraFields = ['agent']
+
+                Promise.all([
+                    this.getHostInCC(staticIpExtraFields),
+                    this.getTopoTreeInCC(),
+                    this.getTopoModelInCC()
+                ]).then(values => {
+                    if (Array.isArray(values)) {
+                        this.staticIpList = (values[0] && values[0].data) || []
+                        this.dynamicIpList = (values[1] && values[1].data) || []
+                        this.topoModelList = (values[2] && values[2].data) || []
+                    }
+                    this.loading = false
+                }).catch(e => {
+                    this.loading = false
+                    errorHandler(e, this)
+                })
+            },
+            customValidate () {
+                return this.$refs.ipSelector.validate()
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .tag-ip-selector-wrap {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagMember_selector.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagMember_selector.vue
index 43dcca2404..fc56fe15e5 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagMember_selector.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagMember_selector.vue
@@ -21,31 +21,30 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
-import { errorHandler } from '@/utils/errorHandler.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const intAttrs = {
-    value: {
-        type: Array,
-        required: false,
-        default () {
-            return []
+    const intAttrs = {
+        value: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            }
         }
     }
-}
-export default {
-    name: 'TagMember_selector',
-    mixins: [getFormMixins(intAttrs)],
-    computed: {
-        memberValue: {
-            get () {
-                return this.value.slice(0)
-            },
-            set (val) {
-                this.updateForm(val)
+    export default {
+        name: 'TagMember_selector',
+        mixins: [getFormMixins(intAttrs)],
+        computed: {
+            memberValue: {
+                get () {
+                    return this.value.slice(0)
+                },
+                set (val) {
+                    this.updateForm(val)
+                }
             }
         }
     }
-}
 </script>
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagPassword.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagPassword.vue
index 8863669015..a3796c6867 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagPassword.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagPassword.vue
@@ -27,74 +27,75 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-import { mapState } from 'vuex'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { mapState } from 'vuex'
+    import { JSEncrypt } from 'jsencrypt'
+    import { getFormMixins } from '../formMixins.js'
 
-const passwordAttrs = {
-    value: {
-        type: [String, Boolean],
-        required: false,
-        default: ''
-    }
-}
-export default {
-    name: "TagPassword",
-    mixins: [getFormMixins(passwordAttrs)],
-    data () {
-        return {
-            encrypted: false,
-            passwordPlaceholder: '*****',
-            i18n: {
-                placeholder: gettext("要修改密码请点击后重新输入密码")
-            }
+    const passwordAttrs = {
+        value: {
+            type: [String, Boolean],
+            required: false,
+            default: ''
         }
-    },
-    computed: {
-        ...mapState({
-            'rsa_pub_key': state => state.rsa_pub_key
-        }),
-        password: {
-            get () {
-                return this.encrypted ? this.tempValue : this.value
-            },
-            set (val) {
-                this.tempValue = val
-                this.updateForm(val)
-            }
-        }
-    },
-    methods: {
-        _tag_init () {
-            if (this.value) {
-                this.encrypted = true
-                this.tempValue = this.passwordPlaceholder
+    }
+    export default {
+        name: 'TagPassword',
+        mixins: [getFormMixins(passwordAttrs)],
+        data () {
+            return {
+                encrypted: false,
+                passwordPlaceholder: '*****',
+                i18n: {
+                    placeholder: gettext('要修改密码请点击后重新输入密码')
+                }
             }
         },
-        clearPassword () {
-            this.password = ''
-            this.tempValue = ''
-            this.encrypted = false
-        },
-        encryptPassword () {
-            let val
-            if (this.password === this.passwordPlaceholder) {
-                return
-            }
-            if (this.password === '' || this.password === undefined) {
-                val = ''
-                return
+        computed: {
+            ...mapState({
+                'rsa_pub_key': state => state.rsa_pub_key
+            }),
+            password: {
+                get () {
+                    return this.encrypted ? this.tempValue : this.value
+                },
+                set (val) {
+                    this.tempValue = val
+                    this.updateForm(val)
+                }
             }
-            var crypt = new JSEncrypt()
-            crypt.setKey(this.rsa_pub_key)
-            val = crypt.encrypt(this.password)
+        },
+        methods: {
+            _tag_init () {
+                if (this.value) {
+                    this.encrypted = true
+                    this.tempValue = this.passwordPlaceholder
+                }
+            },
+            clearPassword () {
+                this.password = ''
+                this.tempValue = ''
+                this.encrypted = false
+            },
+            encryptPassword () {
+                let val
+                if (this.password === this.passwordPlaceholder) {
+                    return
+                }
+                if (this.password === '' || this.password === undefined) {
+                    val = ''
+                    return
+                }
+                const crypt = new JSEncrypt()
+                crypt.setKey(this.rsa_pub_key)
+                val = crypt.encrypt(this.password)
             
-            this.encrypted = true
-            this.tempValue = this.password
-            this.$emit('change', [this.tagCode], val)
+                this.encrypted = true
+                this.tempValue = this.password
+                this.$emit('change', [this.tagCode], val)
+            }
         }
     }
-}
 </script>
 
 <style>
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagRadio.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagRadio.vue
index d5d7b91729..4aa806838e 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagRadio.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagRadio.vue
@@ -23,48 +23,48 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const radioAttrs = {
-    items: {
-        type: Array,
-        required: true,
-        desc: "array like [{name: '', value: ''}, {name: '', value: ''}]"
-    },
-    value: {
-        required: false,
-        default: ''
+    const radioAttrs = {
+        items: {
+            type: Array,
+            required: true,
+            desc: "array like [{name: '', value: ''}, {name: '', value: ''}]"
+        },
+        value: {
+            required: false,
+            default: ''
+        }
     }
-}
-export default {
-    name: 'TagRadio',
-    mixins: [getFormMixins(radioAttrs)],
-    computed: {
-        checkedValue: {
-            get () {
-                return this.value
+    export default {
+        name: 'TagRadio',
+        mixins: [getFormMixins(radioAttrs)],
+        computed: {
+            checkedValue: {
+                get () {
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
+                }
             },
-            set (val) {
-                this.updateForm(val)
-            }
-        },
-        viewValue () {
-            if (this.checkedValue === '') {
-                return '--'
-            }
-
-            let label = this.checkedValue
-            this.items.some(item => {
-                if (item.value === this.checkedValue) {
-                    label = item.name
-                    return true
+            viewValue () {
+                if (this.checkedValue === '') {
+                    return '--'
                 }
-            })
-            return label
+
+                let label = this.checkedValue
+                this.items.some(item => {
+                    if (item.value === this.checkedValue) {
+                        label = item.name
+                        return true
+                    }
+                })
+                return label
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .radio-item {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagSelect.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagSelect.vue
index ba9bdfe935..3596f5a865 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagSelect.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagSelect.vue
@@ -39,188 +39,187 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const selectAttrs = {
-    value: {
-        required: false,
-        default: ''
-    },
-    items: {
-        type: Array,
-        required: false,
-        default () {
-            return []
+    const selectAttrs = {
+        value: {
+            required: false,
+            default: ''
         },
-        desc: "array like [{text: '', value: ''}, {text: '', value: ''}]"
-    },
-    multiple: {
-        type: Boolean,
-        required: false,
-        default: false,
-        desc: 'set multiple selected items'
-    },
-    multiple_limit: {
-        type: Number,
-        required: false,
-        default: 0,
-        desc: 'limit of selected items when multiple is true'
-    },
-    remote: {
-        type: Boolean,
-        required: false,
-        default: false,
-        desc: 'use remote data or not'
-    },
-    remote_url: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'remote url when remote is true'
-    },
-    remote_data_init: {
-        type: Function,
-        required: false,
-        default: function (data) {
-            return data
+        items: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            },
+            desc: "array like [{text: '', value: ''}, {text: '', value: ''}]"
         },
-        desc: 'how to process data after getting remote data'
-    },
-    placeholder: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'placeholder'
-    },
-    empty_text: {
-        type: String,
-        required: false,
-        default: gettext('无数据'),
-        desc: 'tips when data is empty'
-    }
-}
-export default {
-    name: 'TagSelect',
-    mixins: [getFormMixins(selectAttrs)],
-    data () {
-        return {
-            loading: false,
-            remote_cache: null,
-            loading_text: gettext('加载中')
-        }
-    },
-    computed: {
-        seletedValue: {
-            get () {
-                return this.value
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false,
+            desc: 'set multiple selected items'
+        },
+        multiple_limit: {
+            type: Number,
+            required: false,
+            default: 0,
+            desc: 'limit of selected items when multiple is true'
+        },
+        remote: {
+            type: Boolean,
+            required: false,
+            default: false,
+            desc: 'use remote data or not'
+        },
+        remote_url: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'remote url when remote is true'
+        },
+        remote_data_init: {
+            type: Function,
+            required: false,
+            default: function (data) {
+                return data
             },
-            set (val) {
-                this.updateForm(val)
+            desc: 'how to process data after getting remote data'
+        },
+        placeholder: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'placeholder'
+        },
+        empty_text: {
+            type: String,
+            required: false,
+            default: gettext('无数据'),
+            desc: 'tips when data is empty'
+        }
+    }
+    export default {
+        name: 'TagSelect',
+        mixins: [getFormMixins(selectAttrs)],
+        data () {
+            return {
+                loading: false,
+                remote_cache: null,
+                loading_text: gettext('加载中')
             }
         },
-        viewValue () {
-            if (Array.isArray(this.seletedValue)) { // 多选
-                if (!this.seletedValue.length) {
-                    return '--'
-                }
-                if (this.items.length) {
-                    return this.seletedValue.map(val => {
-                        return this.filterLabel(val)
-                    }).join(',')
-                } else {
-                    return this.value.join(',')
-                }
-            } else { // 单选
-                if (this.seletedValue === 'undefined') {
-                    return '--'
-                }
-                if (this.items.length) {
-                    return this.filterLabel(this.seletedValue)
-                } else {
+        computed: {
+            seletedValue: {
+                get () {
                     return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
                 }
-            }
-        }
-    },
-    mounted () {
-        this.remoteMethod()
-    },
-    methods: {
-        filterLabel (val) {
-            let label = val
-            this.items.some(item => {
-                if (item.value === val) {
-                    label = item.text
-                    return true
+            },
+            viewValue () {
+                if (Array.isArray(this.seletedValue)) { // 多选
+                    if (!this.seletedValue.length) {
+                        return '--'
+                    }
+                    if (this.items.length) {
+                        return this.seletedValue.map(val => {
+                            return this.filterLabel(val)
+                        }).join(',')
+                    } else {
+                        return this.value.join(',')
+                    }
+                } else { // 单选
+                    if (this.seletedValue === 'undefined') {
+                        return '--'
+                    }
+                    if (this.items.length) {
+                        return this.filterLabel(this.seletedValue)
+                    } else {
+                        return this.value
+                    }
                 }
-            })
-            return label
-        },
-        _set_value (value) {
-            if (this.remote && this.remote_cache === null) {
-                this.remoteMethod("")
             }
-            this.updateForm(value)
-        },
-        _get_value () {
-            return this.value
         },
-        onFocus () {
-            if (this.remote && this.remote_cache === null) {
-                this.remoteMethod("")
-            }
+        mounted () {
+            this.remoteMethod()
         },
-        remoteMethod (query) {
-            var $this = this
-            var remote_url = typeof this.remote_url === 'function' ? this.remote_url() : this.remote_url
-            if (!remote_url) return
+        methods: {
+            filterLabel (val) {
+                let label = val
+                this.items.some(item => {
+                    if (item.value === val) {
+                        label = item.text
+                        return true
+                    }
+                })
+                return label
+            },
+            _set_value (value) {
+                if (this.remote && this.remote_cache === null) {
+                    this.remoteMethod('')
+                }
+                this.updateForm(value)
+            },
+            _get_value () {
+                return this.value
+            },
+            onFocus () {
+                if (this.remote && this.remote_cache === null) {
+                    this.remoteMethod('')
+                }
+            },
+            remoteMethod (query) {
+                const $this = this
+                const remote_url = typeof this.remote_url === 'function' ? this.remote_url() : this.remote_url
+                if (!remote_url) return
 
-            this.loading = true
-            // 请求远程数据
-            if (this.remote_cache === null && remote_url) {
-                $.ajax({
-                    url: remote_url,
-                    method: "GET",
-                    success: function (res) {
-                        var data = $this.remote_data_init(res)
-                        $this.remote_cache = data
+                this.loading = true
+                // 请求远程数据
+                if (this.remote_cache === null && remote_url) {
+                    $.ajax({
+                        url: remote_url,
+                        method: 'GET',
+                        success: function (res) {
+                            const data = $this.remote_data_init(res)
+                            $this.remote_cache = data
 
-                        if ($this.remote_cache !== null) {
-                            if (query) {
-                                $this.items = $this.remote_cache.filter(item => {
-                                    return item.text.toLowerCase()
-                                        .indexOf(query.toLowerCase()) > -1
-                                })
+                            if ($this.remote_cache !== null) {
+                                if (query) {
+                                    $this.items = $this.remote_cache.filter(item => {
+                                        return item.text.toLowerCase()
+                                            .indexOf(query.toLowerCase()) > -1
+                                    })
+                                } else {
+                                    $this.items = $this.remote_cache
+                                }
                             } else {
-                                $this.items = $this.remote_cache
+                                $this.items = []
                             }
-                        } else {
-                            $this.items = []
-                        }
 
-                        $this.loading = false
-                    },
-                    error: function (resp) {
-                        $this.placeholder = gettext("请求数据失败")
-                        $this.loading = false
-                    }
-                })
-            } else {
-                if (query) {
-                    this.items = this.remote_cache.filter(item => {
-                        return item.text.toLowerCase()
-                            .indexOf(query.toLowerCase()) > -1
+                            $this.loading = false
+                        },
+                        error: function (resp) {
+                            $this.placeholder = gettext('请求数据失败')
+                            $this.loading = false
+                        }
                     })
                 } else {
-                    this.items = this.remote_cache
+                    if (query) {
+                        this.items = this.remote_cache.filter(item => {
+                            return item.text.toLowerCase()
+                                .indexOf(query.toLowerCase()) > -1
+                        })
+                    } else {
+                        this.items = this.remote_cache
+                    }
+                    this.loading = false
                 }
-                this.loading = false
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .el-select {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagText.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagText.vue
index cf6145e586..9f4aaed790 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagText.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagText.vue
@@ -15,20 +15,18 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const textAttrs = {
-    value: {
-        type: String,
-        required: false,
-        default: ''
+    const textAttrs = {
+        value: {
+            type: String,
+            required: false,
+            default: ''
+        }
+    }
+    export default {
+        name: 'TagText',
+        mixins: [getFormMixins(textAttrs)]
     }
-}
-export default {
-    name: 'TagText',
-    mixins: [getFormMixins(textAttrs)]
-}
 </script>
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagTextarea.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagTextarea.vue
index 8c72324691..853b392abb 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagTextarea.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagTextarea.vue
@@ -14,9 +14,9 @@
         <el-input
             type="textarea"
             v-model="textareaValue"
-            :class="{'rf-view-textarea-value': !formMode, 'rf-view-textarea': !editable}"
+            :class="{ 'rf-view-textarea-value': !formMode, 'rf-view-textarea': !editable }"
             :disabled="!editable || !formMode"
-            :autosize="formMode ? {minRows: 2} : true"
+            :autosize="formMode ? { minRows: 2 } : true"
             resize="none"
             :placeholder="placeholder">
         </el-input>
@@ -24,39 +24,39 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const textareaAttrs = {
-    value: {
-        type: String,
-        required: false,
-        default: ''
-    },
-    placeholder: {
-        type: String,
-        required: false,
-        default: '',
-        desc: "placeholder"
+    const textareaAttrs = {
+        value: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        placeholder: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'placeholder'
+        }
     }
-}
-export default {
-    name: "TagTextarea",
-    mixins: [getFormMixins(textareaAttrs)],
-    computed: {
-        textareaValue: {
-            get () {
-                if (!this.formMode && !this.value) {
-                    return '--'
+    export default {
+        name: 'TagTextarea',
+        mixins: [getFormMixins(textareaAttrs)],
+        computed: {
+            textareaValue: {
+                get () {
+                    if (!this.formMode && !this.value) {
+                        return '--'
+                    }
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
                 }
-                return this.value
-            },
-            set (val) {
-                this.updateForm(val)
             }
         }
     }
-}
 </script>
 <style lang="scss">
 @import '@/scss/mixins/scrollbar.scss';
@@ -86,6 +86,3 @@ export default {
     }
 }
 </style>
-
-
-
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagTree.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagTree.vue
index b8af4fa0c3..87390cf38b 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagTree.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagTree.vue
@@ -27,163 +27,162 @@
             @check="_handleBoxCheck"
             @node-expand="nodeExpend"
             @node-collapse="nodeCollapse"
-            >
+        >
         </el-tree>
         <span v-show="!validateInfo.valid" class="common-error-tip error-info">{{validateInfo.message}}</span>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const TreeAttrs = {
-    value: {
-        type: Array,
-        required: false,
-        default () {
-            return []
-        }
-    },
-    items: {
-        type: Array,
-        required: false,
-        default () {
-            return []
-        },
-        desc: 'set tree data, which should be a multiple layers array'
-    },
-    expanded_keys: {
-        type: Array,
-        required: false,
-        default () {
-            return []
-        }
-    },
-    show_checkbox: {
-        type: Boolean,
-        required: false,
-        default: true,
-        desc: 'whether node is selectable'
-    },
-    default_expand_all: {
-        type: Boolean,
-        required: false,
-        default: true,
-        desc: 'whether to expand all nodes by default'
-    },
-    remote: {
-        type: Boolean,
-        required: false,
-        default: false,
-        desc: 'use remote data or not'
-    },
-    remote_url: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'remote url when remote is true'
-    },
-    remote_data_init: {
-        type: Function,
-        required: false,
-        default: function (data) {
-            return data
+    const TreeAttrs = {
+        value: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            }
         },
-        desc: "how to process data after getting remote data"
-    }
-}
-export default {
-    name: 'TagTree',
-    mixins: [getFormMixins(TreeAttrs)],
-    data () {
-        return {
-            default_props: {
-                label: 'label',
-                children: 'children',
-                disabled: true
+        items: {
+            type: Array,
+            required: false,
+            default () {
+                return []
             },
-            loading: false,
-            remote_cache: null
-        }
-    },
-    mounted () {
-        this.remoteMethod()
-    },
-    methods: {
-        handleCheckChange (data, checked, indeterminate) {
-            return true
+            desc: 'set tree data, which should be a multiple layers array'
         },
-        filterNode (value, data) {
-            return true
+        expanded_keys: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            }
         },
-        handleBoxCheck (data) {
-            return this.editable && this.formMode && this.show_checkbox
+        show_checkbox: {
+            type: Boolean,
+            required: false,
+            default: true,
+            desc: 'whether node is selectable'
         },
-        _handleBoxCheck (data) {
-            if (this.handleBoxCheck(data)) {
-                this.updateForm(this.$refs.tree.getCheckedKeys(true))
-            }
+        default_expand_all: {
+            type: Boolean,
+            required: false,
+            default: true,
+            desc: 'whether to expand all nodes by default'
+        },
+        remote: {
+            type: Boolean,
+            required: false,
+            default: false,
+            desc: 'use remote data or not'
         },
-        nodeExpend (data, node, tag) {
-            this.expanded_keys.push(data.id)
+        remote_url: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'remote url when remote is true'
+        },
+        remote_data_init: {
+            type: Function,
+            required: false,
+            default: function (data) {
+                return data
+            },
+            desc: 'how to process data after getting remote data'
+        }
+    }
+    export default {
+        name: 'TagTree',
+        mixins: [getFormMixins(TreeAttrs)],
+        data () {
+            return {
+                default_props: {
+                    label: 'label',
+                    children: 'children',
+                    disabled: true
+                },
+                loading: false,
+                remote_cache: null
+            }
         },
-        nodeCollapse (data, node, tag) {
-            this.expanded_keys.pop(data.id)
+        mounted () {
+            this.remoteMethod()
         },
-        remoteMethod () {
-            const $this = this
+        methods: {
+            handleCheckChange (data, checked, indeterminate) {
+                return true
+            },
+            filterNode (value, data) {
+                return true
+            },
+            handleBoxCheck (data) {
+                return this.editable && this.formMode && this.show_checkbox
+            },
+            _handleBoxCheck (data) {
+                if (this.handleBoxCheck(data)) {
+                    this.updateForm(this.$refs.tree.getCheckedKeys(true))
+                }
+            },
+            nodeExpend (data, node, tag) {
+                this.expanded_keys.push(data.id)
+            },
+            nodeCollapse (data, node, tag) {
+                this.expanded_keys.pop(data.id)
+            },
+            remoteMethod () {
+                const $this = this
 
-            const remote_url = typeof this.remote_url === 'function' ? this.remote_url() : this.remote_url
-            if (!remote_url) return
+                const remote_url = typeof this.remote_url === 'function' ? this.remote_url() : this.remote_url
+                if (!remote_url) return
 
-            this.loading = true
+                this.loading = true
 
-            // 请求远程数据
-            if (this.remote_cache === null && remote_url) {
-                $.ajax({
-                    url: remote_url,
-                    method: "GET",
-                    success: function (res) {
-                        let treeData = $this.remote_data_init(res)
-                        // 表单为展示模式时，去掉未被选中的数据项
-                        if (!$this.editable || !$this.formMode) {
-                            treeData = $this.filterTreeItem(treeData)
-                        }
-                        $this.remote_cache = treeData
+                // 请求远程数据
+                if (this.remote_cache === null && remote_url) {
+                    $.ajax({
+                        url: remote_url,
+                        method: 'GET',
+                        success: function (res) {
+                            let treeData = $this.remote_data_init(res)
+                            // 表单为展示模式时，去掉未被选中的数据项
+                            if (!$this.editable || !$this.formMode) {
+                                treeData = $this.filterTreeItem(treeData)
+                            }
+                            $this.remote_cache = treeData
 
-                        if ($this.remote_cache !== null) {
-                            $this.items = $this.remote_cache
-                            $this.$refs.tree.setCheckedKeys($this.value)
-                        } else {
-                            $this.items = []
-                        }
+                            if ($this.remote_cache !== null) {
+                                $this.items = $this.remote_cache
+                                $this.$refs.tree.setCheckedKeys($this.value)
+                            } else {
+                                $this.items = []
+                            }
 
-                        $this.loading = false
-                    },
-                    error: function () {
-                        $this.empty_text = gettext("请求数据失败")
-                        $this.loading = false
+                            $this.loading = false
+                        },
+                        error: function () {
+                            $this.empty_text = gettext('请求数据失败')
+                            $this.loading = false
+                        }
+                    })
+                } else {
+                    this.items = this.remote_cache
+                    this.$refs.tree.setCheckedKeys(this.value)
+                    this.loading = false
+                }
+            },
+            filterTreeItem (data) {
+                return data.filter(item => {
+                    if (this.value.indexOf(item.id) > -1) {
+                        return item
+                    } else if (item.children) {
+                        item.children = this.filterTreeItem(item.children)
+                        return item
                     }
                 })
-            } else {
-                this.items = this.remote_cache
-                this.$refs.tree.setCheckedKeys(this.value)
-                this.loading = false
             }
-        },
-        filterTreeItem (data) {
-            return data.filter(item => {
-                if (this.value.indexOf(item.id) > -1) {
-                    return item
-                } else if (item.children) {
-                    item.children = this.filterTreeItem(item.children)
-                    return item
-                }
-            })
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .tag-tree {
diff --git a/pipeline/blueflow/src/components/common/RenderForm/tags/TagUpload.vue b/pipeline/blueflow/src/components/common/RenderForm/tags/TagUpload.vue
index 7e882b1c38..3ab53e8278 100644
--- a/pipeline/blueflow/src/components/common/RenderForm/tags/TagUpload.vue
+++ b/pipeline/blueflow/src/components/common/RenderForm/tags/TagUpload.vue
@@ -37,113 +37,117 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '../formMixins.js'
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '../formMixins.js'
 
-const uploadAttrs = {
-    value: {
-        type: Array,
-        required: false,
-        default () {
-            return []
-        }
-    },
-    url: {
-        type: String,
-        required: true,
-        desc: 'upload url'
-    },
-    multiple: {
-        type: Boolean,
-        required: false,
-        default: false,
-        desc: 'set multiple selected files when upload'
-    },
-    headers: {
-        type: Object,
-        required: false,
-        default () {
-            return {}
+    const uploadAttrs = {
+        value: {
+            type: Array,
+            required: false,
+            default () {
+                return []
+            }
         },
-        desc: 'upload headers, you should add X-CSRFToken when project has CsrfViewMiddleware'
-    },
-    auto_upload: {
-        type: Boolean,
-        required: false,
-        default: false,
-        desc: 'auto upload after selecting file'
-    },
-    limit: {
-        type: Number,
-        required: false,
-        default: 100,
-        desc: 'max of files'
-    },
-    placeholder: {
-        type: String,
-        required: false,
-        default: '',
-        desc: 'placeholder'
-    },
-    text: {
-        type: String,
-        required: false,
-        default: gettext('点击上传'),
-        desc: 'tips on upload button'
-    }
-}
-export default {
-    name: 'TagUpload',
-    mixins: [getFormMixins(uploadAttrs)],
-    computed: {
-        fileValue: {
-            get () {
-                return this.value
+        url: {
+            type: String,
+            required: true,
+            desc: 'upload url'
+        },
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: false,
+            desc: 'set multiple selected files when upload'
+        },
+        headers: {
+            type: Object,
+            required: false,
+            default () {
+                return {}
             },
-            set (val) {
-                this.updateForm(val)
-            }
+            desc: 'upload headers, you should add X-CSRFToken when project has CsrfViewMiddleware'
         },
-        viewValue () {
-            if (this.fileValue === 'undefined' || !this.fileValue.length) {
-                return '--'
-            }
-            return this.fileValue.join(',')
-        }
-    },
-    methods: {
-        // 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据
-        handlePreview (file) {},
-        // 文件列表移除文件时的钩子
-        handleRemove (file, fileList) {
-            return true
+        auto_upload: {
+            type: Boolean,
+            required: false,
+            default: false,
+            desc: 'auto upload after selecting file'
         },
-        _handleRemove (file, fileList) {
-            if (this.handleRemove(file, fileList)){
-                this.updateForm(fileList)
-            }
+        limit: {
+            type: Number,
+            required: false,
+            default: 100,
+            desc: 'max of files'
         },
-        // 文件上传成功时的钩子
-        handleSuccess (response, file, fileList){
-            return true
+        placeholder: {
+            type: String,
+            required: false,
+            default: '',
+            desc: 'placeholder'
         },
-        _handleSuccess (response, file, fileList) {
-            if (this.handleSuccess(response, file, fileList)){
-                this.updateForm(fileList)
+        text: {
+            type: String,
+            required: false,
+            default: gettext('点击上传'),
+            desc: 'tips on upload button'
+        }
+    }
+    export default {
+        name: 'TagUpload',
+        mixins: [getFormMixins(uploadAttrs)],
+        computed: {
+            fileValue: {
+                get () {
+                    return this.value
+                },
+                set (val) {
+                    this.updateForm(val)
+                }
+            },
+            viewValue () {
+                if (this.fileValue === 'undefined' || !this.fileValue.length) {
+                    return '--'
+                }
+                return this.fileValue.join(',')
             }
         },
-        // 文件上传失败时的钩子
-        handleError (err, file, fileList) {},
-        // 文件上传时的钩子
-        handleProgress (file, fileList) {},
-        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
-        handleChange (file, fileList) {},
-        // 文件超出个数限制时的钩子
-        handleExceed (file, fileList) {},
-        // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
-        beforeUpload (file, fileList) {},
-        // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传
-        beforeRemove (file, fileList) {}
+        methods: {
+            // 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据
+            handlePreview (file) {},
+            // 文件列表移除文件时的钩子
+            handleRemove (file, fileList) {
+                return true
+            },
+            _handleRemove (file, fileList) {
+                if (this.handleRemove(file, fileList)) {
+                    this.updateForm(fileList)
+                }
+            },
+            // 文件上传成功时的钩子
+            handleSuccess (response, file, fileList) {
+                return true
+            },
+            _handleSuccess (response, file, fileList) {
+                if (this.handleSuccess(response, file, fileList)) {
+                    this.updateForm(fileList)
+                }
+            },
+            // 文件上传失败时的钩子
+            handleError (err, file, fileList) {
+                if (err) {
+                    console.error(err)
+                }
+            },
+            // 文件上传时的钩子
+            handleProgress (file, fileList) {},
+            // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
+            handleChange (file, fileList) {},
+            // 文件超出个数限制时的钩子
+            handleExceed (file, fileList) {},
+            // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传
+            beforeUpload (file, fileList) {},
+            // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传
+            beforeRemove (file, fileList) {}
+        }
     }
-}
 </script>
diff --git a/pipeline/blueflow/src/components/common/base/BaseCheckbox.vue b/pipeline/blueflow/src/components/common/base/BaseCheckbox.vue
index b37472205a..f7d861881e 100644
--- a/pipeline/blueflow/src/components/common/base/BaseCheckbox.vue
+++ b/pipeline/blueflow/src/components/common/base/BaseCheckbox.vue
@@ -11,33 +11,33 @@
 */
 <template>
     <div class="base-checkbox" @click.stop="onCheck">
-        <span :class="['checkbox', {checked: this.checked}]">
+        <span :class="['checkbox', { checked: checked }]">
         </span>
         <slot></slot>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'BaseCheckbox',
-    props: ['isChecked'],
-    data () {
-        return {
-            checked: this.isChecked || false
-        }
-    },
-    methods: {
-        onCheck () {
-            this.checked = !this.checked
-            this.$emit('checkCallback', this.checked)
-        }
-    },
-    watch: {
-        isChecked (val) {
-            this.checked = val
+    import '@/utils/i18n.js'
+    export default {
+        name: 'BaseCheckbox',
+        props: ['isChecked'],
+        data () {
+            return {
+                checked: this.isChecked || false
+            }
+        },
+        watch: {
+            isChecked (val) {
+                this.checked = val
+            }
+        },
+        methods: {
+            onCheck () {
+                this.checked = !this.checked
+                this.$emit('checkCallback', this.checked)
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '../../../scss/config.scss';
diff --git a/pipeline/blueflow/src/components/common/base/BaseCollapse.vue b/pipeline/blueflow/src/components/common/base/BaseCollapse.vue
index c6d6f19fa5..0e6756f59e 100644
--- a/pipeline/blueflow/src/components/common/base/BaseCollapse.vue
+++ b/pipeline/blueflow/src/components/common/base/BaseCollapse.vue
@@ -11,8 +11,8 @@
 */
 <template>
     <div class="base-collapse">
-        <div :class="['header-wrapper', {actived: showContent}]" @click="onHeaderClick">
-            <slot name="header" ></slot>
+        <div :class="['header-wrapper', { actived: showContent }]" @click="onHeaderClick">
+            <slot name="header"></slot>
             <i class="common-icon-arrow-down toggle-arrow"></i>
         </div>
         <div class="content-wrapper clearfix" v-show="showContent">
@@ -21,31 +21,31 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: "BaseCollapse",
-    props: {
-        isCollapse: {
-            type: Boolean,
-            default: true
-        }
-    },
-    data () {
-        return {
-            showContent: !this.isCollapse
-        }
-    },
-    watch: {
-        isCollapse (val) {
-            this.showContent = !val
-        }
-    },
-    methods: {
-        onHeaderClick () {
-            this.showContent = !this.showContent
+    import '@/utils/i18n.js'
+    export default {
+        name: 'BaseCollapse',
+        props: {
+            isCollapse: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+                showContent: !this.isCollapse
+            }
+        },
+        watch: {
+            isCollapse (val) {
+                this.showContent = !val
+            }
+        },
+        methods: {
+            onHeaderClick () {
+                this.showContent = !this.showContent
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '../../../scss/config.scss';
diff --git a/pipeline/blueflow/src/components/common/base/BaseInput.vue b/pipeline/blueflow/src/components/common/base/BaseInput.vue
index c63970ab90..ef5c6f2a05 100644
--- a/pipeline/blueflow/src/components/common/base/BaseInput.vue
+++ b/pipeline/blueflow/src/components/common/base/BaseInput.vue
@@ -22,32 +22,32 @@
         @keyup.enter="onKeyupEnter">
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'BaseInput',
-    model: {
-        prop: 'value',
-        event: 'input'
-    },
-    props: ['value', 'name','title'],
-    methods: {
-        focus () {
-            this.$refs.baseInput.focus()
+    import '@/utils/i18n.js'
+    export default {
+        name: 'BaseInput',
+        model: {
+            prop: 'value',
+            event: 'input'
         },
-        select () {
-            this.$refs.baseInput.select()
-        },
-        onInput (e) {
-            this.$emit('input', e.target.value)
-        },
-        onBlur (e) {
-            this.$emit('blur', e.target.value)
-        },
-        onKeyupEnter (e) {
-            this.$emit('enter', e.target.value)
+        props: ['value', 'name', 'title'],
+        methods: {
+            focus () {
+                this.$refs.baseInput.focus()
+            },
+            select () {
+                this.$refs.baseInput.select()
+            },
+            onInput (e) {
+                this.$emit('input', e.target.value)
+            },
+            onBlur (e) {
+                this.$emit('blur', e.target.value)
+            },
+            onKeyupEnter (e) {
+                this.$emit('enter', e.target.value)
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -76,5 +76,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/base/BaseSearch.vue b/pipeline/blueflow/src/components/common/base/BaseSearch.vue
index 6b896c4369..2de3df221d 100644
--- a/pipeline/blueflow/src/components/common/base/BaseSearch.vue
+++ b/pipeline/blueflow/src/components/common/base/BaseSearch.vue
@@ -18,35 +18,35 @@
                 <i class="bk-icon icon-up-shape search-up-shape" v-if="shapeShow"></i>
             </div>
         </span>
-        <input class="search-input" :value="value" :placeholder="inputPlaceholader" @input="onInput"/>
+        <input class="search-input" :value="value" :placeholder="inputPlaceholader" @input="onInput" />
         <i class="common-icon-search"></i>
     </div>
 </template>
 
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'BaseSearch',
-    props: ['inputPlaceholader', 'value'],
-    data () {
-        return {
-            i18n: {
-                advancedSearch: gettext('高级搜索')
-            },
-            isAdvancedSerachShow: false,
-            shapeShow: false
-        }
-    },
-    methods: {
-        onShow () {
-            this.$emit('onShow', this.isAdvancedSerachShow)
-            this.shapeShow = !this.shapeShow
+    import '@/utils/i18n.js'
+    export default {
+        name: 'BaseSearch',
+        props: ['inputPlaceholader', 'value'],
+        data () {
+            return {
+                i18n: {
+                    advancedSearch: gettext('高级搜索')
+                },
+                isAdvancedSerachShow: false,
+                shapeShow: false
+            }
         },
-        onInput (e) {
-            this.$emit('input', e.target.value)
+        methods: {
+            onShow () {
+                this.$emit('onShow', this.isAdvancedSerachShow)
+                this.shapeShow = !this.shapeShow
+            },
+            onInput (e) {
+                this.$emit('input', e.target.value)
+            }
         }
     }
-}
 </script>
 
 <style lang='scss'>
diff --git a/pipeline/blueflow/src/components/common/base/BaseTitle.vue b/pipeline/blueflow/src/components/common/base/BaseTitle.vue
index 680f6b4b97..717059bcec 100644
--- a/pipeline/blueflow/src/components/common/base/BaseTitle.vue
+++ b/pipeline/blueflow/src/components/common/base/BaseTitle.vue
@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'BaseTitle',
-    props: ['title']
-}
+    import '@/utils/i18n.js'
+    export default {
+        name: 'BaseTitle',
+        props: ['title']
+    }
 </script>
 
 <style lang='scss' scoped>
diff --git a/pipeline/blueflow/src/components/common/base/NoData.vue b/pipeline/blueflow/src/components/common/base/NoData.vue
index 90eb4a752d..68b84c5b4f 100644
--- a/pipeline/blueflow/src/components/common/base/NoData.vue
+++ b/pipeline/blueflow/src/components/common/base/NoData.vue
@@ -20,25 +20,25 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'NoData',
-    props: {
-        message: {
-            type: String,
-            default () {
-                return ""
+    import '@/utils/i18n.js'
+    export default {
+        name: 'NoData',
+        props: {
+            message: {
+                type: String,
+                default () {
+                    return ''
+                }
             }
-        }
-    },
-    data () {
-        return {
-            i18n: {
-                no_data: gettext("无数据")
+        },
+        data () {
+            return {
+                i18n: {
+                    no_data: gettext('无数据')
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .no-data-wrapper {
@@ -61,4 +61,3 @@ export default {
         font-size: 14px;
     }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/dataTable/DataTablePagination.vue b/pipeline/blueflow/src/components/common/dataTable/DataTablePagination.vue
index e07ee0c59e..0cadfa430b 100644
--- a/pipeline/blueflow/src/components/common/dataTable/DataTablePagination.vue
+++ b/pipeline/blueflow/src/components/common/dataTable/DataTablePagination.vue
@@ -11,279 +11,279 @@
 */
 <!--封装的分页 table-->
 <template>
-  <div class="table" v-bkloading="{isLoading: loading, opacity: 1}">
-    <el-table
-    id="DataTablePagination"
-    ref="mutipleTable"
-    :data="data"
-    :max-height="height"
-    :stripe="options.stripe"
-    :border="options.border"
-    :empty-text="i18n.emptyNoData"
-    @sort-change="handleSortChange"
-    @selection-change="handleSelectionChange">
-      <!--选择框-->
-      <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;" >
-      </el-table-column>
-      <!--选择框end-->
-      <!--数据列-->
-      <template v-for="(column, index) in columns">
-        <el-table-column :key="index"  :prop="column.prop" :filters="column.filters" :filter-method="column.handleFilter" :label="column.label" :align="column.align" :width="column.width" :sortable="column.sortable" :min-width="column.minWidth">
-          <template slot-scope="scope">
-            <template v-if="!column.render">
-                <template v-if="column.router">
-                <router-link class="column-name" :to="column.router(scope.row, column)" v-html="column.formatter(scope.row, column)" :title="scope.row.templateName || scope.row.instanceName"></router-link>
-              </template>
-              <template v-else-if="column.formatter">
-                <span v-html="column.formatter(scope.row, column)"></span>
-              </template>
+    <div class="table" v-bkloading="{ isLoading: loading, opacity: 1 }">
+        <el-table
+            id="DataTablePagination"
+            ref="mutipleTable"
+            :data="data"
+            :max-height="height"
+            :stripe="options.stripe"
+            :border="options.border"
+            :empty-text="i18n.emptyNoData"
+            @sort-change="handleSortChange"
+            @selection-change="handleSelectionChange">
+            <!--选择框-->
+            <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;">
+            </el-table-column>
+            <!--选择框end-->
+            <!--数据列-->
+            <template v-for="(column, index) in columns">
+                <el-table-column :key="index" :prop="column.prop" :filters="column.filters" :filter-method="column.handleFilter" :label="column.label" :align="column.align" :width="column.width" :sortable="column.sortable" :min-width="column.minWidth">
+                    <template slot-scope="scope">
+                        <template v-if="!column.render">
+                            <template v-if="column.router">
+                                <router-link class="column-name" :to="column.router(scope.row, column)" v-html="column.formatter(scope.row, column)" :title="scope.row.templateName || scope.row.instanceName"></router-link>
+                            </template>
+                            <template v-else-if="column.formatter">
+                                <span v-html="column.formatter(scope.row, column)"></span>
+                            </template>
               
-              <template v-else>
-                <span>{{scope.row[column.prop]}}</span>
-              </template>
+                            <template v-else>
+                                <span>{{scope.row[column.prop]}}</span>
+                            </template>
+                        </template>
+                        <template v-else>
+                            <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
+                        </template>
+                    </template>
+                </el-table-column>
             </template>
-            <template v-else>
-              <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom>
-            </template>
-          </template>
-        </el-table-column>
-      </template>
-      <!--数据列end-->
+            <!--数据列end-->
 
-      <!--按钮操作组-->
-      <el-table-column ref="fixedColumn" :label="i18n.operate" align="center" :width="operates.width" :fixed="operates.fixed"
-                       v-if="operates.isShow && operates.data.filter(_x=>_x.show === true).length > 0">
-        <template slot-scope="scope">
-          <div class="operate-group">
-            <template v-for="(btn, key) in operates.data">
-              <div class="item" :style="{flex:operates.flex}" :key="key" v-if="btn.show">
-                <el-button :class="btn.cls" :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
-                           :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
-                </el-button>
-              </div>
-            </template>
-          </div>
-        </template>
-      </el-table-column>
-      <!--按钮操作组end-->
-    </el-table>
-    <!--分页-->
-    <el-pagination v-if="pagination" @size-change="handleSizeChange"
-                   @current-change="handleIndexChange"
-                   :page-size="tableCurrentPagination.limit"
-                   :page-sizes="tableCurrentPagination.pageArray" :current-page="tableCurrentPagination.pageIndex"
-                   layout="total,sizes, prev, pager, next, jumper"
-                   :total="total"
-                   :pagination="pagination"></el-pagination>
+            <!--按钮操作组-->
+            <el-table-column ref="fixedColumn" :label="i18n.operate" align="center" :width="operates.width" :fixed="operates.fixed"
+                v-if="operates.isShow && operates.data.filter(_x => _x.show === true).length > 0">
+                <template slot-scope="scope">
+                    <div class="operate-group">
+                        <template v-for="(btn, key) in operates.data">
+                            <div class="item" :style="{ flex: operates.flex }" :key="key" v-if="btn.show">
+                                <el-button :class="btn.cls" :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled"
+                                    :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }}
+                                </el-button>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+            </el-table-column>
+            <!--按钮操作组end-->
+        </el-table>
+        <!--分页-->
+        <el-pagination v-if="pagination" @size-change="handleSizeChange"
+            @current-change="handleIndexChange"
+            :page-size="tableCurrentPagination.limit"
+            :page-sizes="tableCurrentPagination.pageArray" :current-page="tableCurrentPagination.pageIndex"
+            layout="total,sizes, prev, pager, next, jumper"
+            :total="total"
+            :pagination="pagination"></el-pagination>
     <!--分页end-->
-  </div>
+    </div>
 </template>
 <!--封装的分页 table end-->
 <script>
-import '@/utils/i18n.js'
-// 每页展示条数的控制集合
-const _pageArray = [15, 25]
+    import '@/utils/i18n.js'
+    // 每页展示条数的控制集合
+    const _pageArray = [15, 25]
 
-export default {
-    name: 'DataTablePagination',
-    props: {
-        data: {
-            // 需要显示的数据列表
-            // prop:表头绑定的字段，
-            // label：表头名称，
-            // align：每列数据展示形式（left, center, right)，
-            // width:列宽
-            type: Array,
-            default () {
-                return []
-            }
-        },
-        columns: {
-            // 需要展示的列
-            // prop：列数据对应的属性，
-            // label：列名，
-            // align：对齐方式，
-            // width：列宽，默认为自适应
-            // sortable：是否启用排序功能，默认为false
-            // formatter: (row, column, cellValue) => {return;}格式化函数
-            // render: (h, params) => {return h('el-tag'),{
-            //      props: {}
-            // }, '显示文字'} //el-tag是标签，如h1,p标签等  显示文字可以通过对应函数再获取
-            type: Array,
-            default () {
-                return []
-            }
-        },
-        operates: {
-            // 后置操作按钮内容
-            // isShow: 是否显示后置操作按钮
-            // width: 按钮列宽，
-            // fixed：是否固定（left,right）
-            // list：按钮集合
-            //      label: 按钮文本，
-            //      type :按钮类型（primary / success / warning / danger / info / text），
-            //      show：按钮是否显示，
-            //      icon：按钮图标，
-            //      plain：按钮是否为朴素按钮，
-            //      disabled：按钮是否禁用，
-            //      method：按钮回调方法
-            type: Object,
-            default () {
-                return {}
-            }
-        },
-        total: {
-            // 数据总数
-            type: Number,
-            default: 0
-        },
-        pagination: {
-            // 分页参数
-            // limit:每页展示的条数，默认为_page_array[0]，
-            // pageIndex:当前页，默认为1，
-            // pageArray: 每页展示条数的控制集合，默认 _page_array 即[15, 25]
-            type: Object,
-            default: null
-        },
-        otherHeight: {
-            // 计算表格的高度
-            type: Number,
-            default: 160
-        },
-        options: {
-            // 表格的控制参数
-            // stripe 是否为斑马纹 table
-            // loading 是否添加表格loading加载动画
-            // highlightCurrentRow 是否支持当前行高亮显示
-            // mutiSelect 是否支持列表项选中功能
-            // filter 是否支持数据过滤功能
-            // action 是否支持 表格操作功能
-            // border 是否有表格外边框
-            type: Object,
-            default () {
-                return {
-                    stripe: false,
-                    loading: false,
-                    mutiSelect: false,
-                    highlightCurrentRow: false,
-                    filter: false,
-                    action: false,
-                    border: true
+    export default {
+        name: 'DataTablePagination',
+        components: {
+            expandDom: {
+                functional: true,
+                props: {
+                    row: Object,
+                    render: Function,
+                    index: Number,
+                    column: {
+                        type: Object,
+                        default: null
+                    }
+                },
+                render: (h, ctx) => {
+                    const params = {
+                        row: ctx.props.row,
+                        index: ctx.props.index
+                    }
+                    if (ctx.props.column) params.column = ctx.props.column
+                    return ctx.props.render(h, params)
                 }
             }
         },
-        loading: {
-            type: Boolean,
-            default () {
-                return false
-            }
-        }
-    },
-    components: {
-        expandDom: {
-            functional: true,
-            props: {
-                row: Object,
-                render: Function,
-                index: Number,
-                column: {
-                    type: Object,
-                    default: null
+        props: {
+            data: {
+                // 需要显示的数据列表
+                // prop:表头绑定的字段，
+                // label：表头名称，
+                // align：每列数据展示形式（left, center, right)，
+                // width:列宽
+                type: Array,
+                default () {
+                    return []
                 }
             },
-            render: (h, ctx) => {
-                const params = {
-                    row: ctx.props.row,
-                    index: ctx.props.index
+            columns: {
+                // 需要展示的列
+                // prop：列数据对应的属性，
+                // label：列名，
+                // align：对齐方式，
+                // width：列宽，默认为自适应
+                // sortable：是否启用排序功能，默认为false
+                // formatter: (row, column, cellValue) => {return;}格式化函数
+                // render: (h, params) => {return h('el-tag'),{
+                //      props: {}
+                // }, '显示文字'} //el-tag是标签，如h1,p标签等  显示文字可以通过对应函数再获取
+                type: Array,
+                default () {
+                    return []
                 }
-                if (ctx.props.column) params.column = ctx.props.column
-                return ctx.props.render(h, params)
-            }
-        }
-    },
-    data () {
-        return {
-            i18n: {
-                operate: gettext('操作'),
-                emptyNoData: gettext('无数据')
             },
-            // 当前页
-            pageIndex: 1,
-            // 表格当前分页
-            tableCurrentPagination: {
+            operates: {
+                // 后置操作按钮内容
+                // isShow: 是否显示后置操作按钮
+                // width: 按钮列宽，
+                // fixed：是否固定（left,right）
+                // list：按钮集合
+                //      label: 按钮文本，
+                //      type :按钮类型（primary / success / warning / danger / info / text），
+                //      show：按钮是否显示，
+                //      icon：按钮图标，
+                //      plain：按钮是否为朴素按钮，
+                //      disabled：按钮是否禁用，
+                //      method：按钮回调方法
+                type: Object,
+                default () {
+                    return {}
+                }
             },
-
-            // 多行选中
-            multipleSelection: []
-        }
-    },
-    mounted () {
-        // 判断是否需要分页，传递了pagination 参数 但是没有 pageArray 参数
-        if (this.pagination && !this.pagination.pageArray) {
-            // 设置每页展示条数数组
-            this.pagination.pageArray = _pageArray
-        }
-        if (this.pagination && !this.pagination.limit) {
-            // 设置每页展示数目
-            this.pagination.limit = this.limit
-        }
-        if (this.pagination && !this.pagination.pageIndex) {
-            // 设置当前页
-            this.pagination.pageIndex = 1
-        }
-        // 传入列表当前分页中
-        this.tableCurrentPagination = this.pagination || {
-            limit: this.total,
-            pageIndex: 1
-        }
-    },
-    computed: {
-        // 计算table高度
-        height () {
-            return 1280 - this.otherHeight
-            // return this.$utils.Common.getWidthHeight() - this.otherHeight
-        }
-    },
-    methods: {
-        // 切换每页显示的数量 size
-        handleSizeChange (size) {
-            if (this.pagination) {
-                this.tableCurrentPagination = {
-                    // 切换每页显示条数后，切换至第一页
-                    pageIndex: 1,
-                    limit: size,
-                    pageArray: _pageArray
+            total: {
+                // 数据总数
+                type: Number,
+                default: 0
+            },
+            pagination: {
+                // 分页参数
+                // limit:每页展示的条数，默认为_page_array[0]，
+                // pageIndex:当前页，默认为1，
+                // pageArray: 每页展示条数的控制集合，默认 _page_array 即[15, 25]
+                type: Object,
+                default: null
+            },
+            otherHeight: {
+                // 计算表格的高度
+                type: Number,
+                default: 160
+            },
+            options: {
+                // 表格的控制参数
+                // stripe 是否为斑马纹 table
+                // loading 是否添加表格loading加载动画
+                // highlightCurrentRow 是否支持当前行高亮显示
+                // mutiSelect 是否支持列表项选中功能
+                // filter 是否支持数据过滤功能
+                // action 是否支持 表格操作功能
+                // border 是否有表格外边框
+                type: Object,
+                default () {
+                    return {
+                        stripe: false,
+                        loading: false,
+                        mutiSelect: false,
+                        highlightCurrentRow: false,
+                        filter: false,
+                        action: false,
+                        border: true
+                    }
+                }
+            },
+            loading: {
+                type: Boolean,
+                default () {
+                    return false
                 }
-                this.$emit('handleSizeChange', this.tableCurrentPagination.limit)
             }
         },
-        // 切换页码
-        handleIndexChange (index) {
-            if (this.pagination) {
-                // 设置当前页
-                this.tableCurrentPagination.pageIndex = index
-                this.$emit('handleIndexChange', this.tableCurrentPagination.pageIndex)
+        data () {
+            return {
+                i18n: {
+                    operate: gettext('操作'),
+                    emptyNoData: gettext('无数据')
+                },
+                // 当前页
+                pageIndex: 1,
+                // 表格当前分页
+                tableCurrentPagination: {
+                },
+
+                // 多行选中
+                multipleSelection: []
             }
         },
-        // 多行选中
-        handleSelectionChange (val) {
-            // 将选择的 val 加入至 multipleSelection 中
-            this.multipleSelection = val
-            this.$emit('handleSelectionChange', val)
-        },
-        handleSortChange (column, prop, order) {
-            this.$emit('handleSortChange', [column, prop, order])
+        computed: {
+            // 计算table高度
+            height () {
+                return 1280 - this.otherHeight
+            // return this.$utils.Common.getWidthHeight() - this.otherHeight
+            }
         },
-        // 显示 筛选弹窗
-        handleFilter () {
-            this.$emit('handleFilter')
+        mounted () {
+            // 判断是否需要分页，传递了pagination 参数 但是没有 pageArray 参数
+            if (this.pagination && !this.pagination.pageArray) {
+                // 设置每页展示条数数组
+                this.pagination.pageArray = _pageArray
+            }
+            if (this.pagination && !this.pagination.limit) {
+                // 设置每页展示数目
+                this.pagination.limit = this.limit
+            }
+            if (this.pagination && !this.pagination.pageIndex) {
+                // 设置当前页
+                this.pagination.pageIndex = 1
+            }
+            // 传入列表当前分页中
+            this.tableCurrentPagination = this.pagination || {
+                limit: this.total,
+                pageIndex: 1
+            }
         },
-        // 显示 表格操作弹窗
-        handleAction () {
-            this.$emit('handleAction')
+        methods: {
+            // 切换每页显示的数量 size
+            handleSizeChange (size) {
+                if (this.pagination) {
+                    this.tableCurrentPagination = {
+                        // 切换每页显示条数后，切换至第一页
+                        pageIndex: 1,
+                        limit: size,
+                        pageArray: _pageArray
+                    }
+                    this.$emit('handleSizeChange', this.tableCurrentPagination.limit)
+                }
+            },
+            // 切换页码
+            handleIndexChange (index) {
+                if (this.pagination) {
+                    // 设置当前页
+                    this.tableCurrentPagination.pageIndex = index
+                    this.$emit('handleIndexChange', this.tableCurrentPagination.pageIndex)
+                }
+            },
+            // 多行选中
+            handleSelectionChange (val) {
+                // 将选择的 val 加入至 multipleSelection 中
+                this.multipleSelection = val
+                this.$emit('handleSelectionChange', val)
+            },
+            handleSortChange (column, prop, order) {
+                this.$emit('handleSortChange', [column, prop, order])
+            },
+            // 显示 筛选弹窗
+            handleFilter () {
+                this.$emit('handleFilter')
+            },
+            // 显示 表格操作弹窗
+            handleAction () {
+                this.$emit('handleAction')
+            }
         }
     }
-}
 </script>
 
 <style lang="scss">
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCode401.vue b/pipeline/blueflow/src/components/common/modal/ErrorCode401.vue
index c5f3d8c0b5..3cbbc3bb26 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCode401.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCode401.vue
@@ -16,23 +16,23 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'ErrorCode401',
-    data () {
-        return {
-            i18n: {
-                title: gettext('您需要登录蓝鲸智云'),
-                login: gettext('立即登录')
+    import '@/utils/i18n.js'
+    export default {
+        name: 'ErrorCode401',
+        data () {
+            return {
+                i18n: {
+                    title: gettext('您需要登录蓝鲸智云'),
+                    login: gettext('立即登录')
+                }
+            }
+        },
+        methods: {
+            onReloadLogin () {
+                window.top.location.reload()
             }
-        }
-    },
-    methods: {
-        onReloadLogin () {
-            window.top.location.reload()
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .content-wrapper {
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCode403.vue b/pipeline/blueflow/src/components/common/modal/ErrorCode403.vue
index ee708e0e85..444ad74eec 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCode403.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCode403.vue
@@ -19,19 +19,19 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'ErrorCode403',
-    data () {
-        return {
-            i18n: {
-                sorry: gettext("对不起，您没有当前应用的访问权限"),
-                try: gettext("请尝试如下操作："),
-                contact: gettext("联系应用“管理员”为您添加应用访问白名单或者 IP 白名单")
+    import '@/utils/i18n.js'
+    export default {
+        name: 'ErrorCode403',
+        data () {
+            return {
+                i18n: {
+                    sorry: gettext('对不起，您没有当前应用的访问权限'),
+                    try: gettext('请尝试如下操作：'),
+                    contact: gettext('联系应用“管理员”为您添加应用访问白名单或者 IP 白名单')
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     ul {
@@ -41,5 +41,3 @@ export default {
         list-style: disc;
     }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCode405.vue b/pipeline/blueflow/src/components/common/modal/ErrorCode405.vue
index ebed9c8288..34c593074f 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCode405.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCode405.vue
@@ -27,29 +27,29 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'ErrorCode405',
-    props: ['responseText'],
-    data () {
-        return {
-            i18n: {
-                sorry: gettext("对不起，您没有当前操作需要的的权限"),
-                contact1: gettext("1.联系业务运维为您添加"),
-                cc_system: gettext("配置平台"),
-                cc_roles: gettext("对应业务的角色，如运维人员、开发人员、产品人员、测试人员"),
-                contact2: gettext("2.联系业务运维为您添加需要操作的流程模板的权限"),
-                goto: gettext("3.或者前往"),
-                create_biz: gettext("创建属于自己的业务")
+    import '@/utils/i18n.js'
+    export default {
+        name: 'ErrorCode405',
+        props: ['responseText'],
+        data () {
+            return {
+                i18n: {
+                    sorry: gettext('对不起，您没有当前操作需要的的权限'),
+                    contact1: gettext('1.联系业务运维为您添加'),
+                    cc_system: gettext('配置平台'),
+                    cc_roles: gettext('对应业务的角色，如运维人员、开发人员、产品人员、测试人员'),
+                    contact2: gettext('2.联系业务运维为您添加需要操作的流程模板的权限'),
+                    goto: gettext('3.或者前往'),
+                    create_biz: gettext('创建属于自己的业务')
+                }
+            }
+        },
+        methods: {
+            onGotoCC () {
+                window.PAAS_API.open_other_app('bk_cc')
             }
-        }
-    },
-    methods: {
-        onGotoCC () {
-            window.PAAS_API.open_other_app('bk_cc')
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -65,4 +65,3 @@ li {
     text-align: left;
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCode406.vue b/pipeline/blueflow/src/components/common/modal/ErrorCode406.vue
index 927b79ff11..046970e2b0 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCode406.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCode406.vue
@@ -25,27 +25,27 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'ErrorCode406',
-    methods: {
-        onGotoCC () {
-            window.PAAS_API.open_other_app('bk_cc')
-        }
-    },
-    data () {
-        return {
-            i18n: {
-                sorry: gettext("对不起，您没有业务权限"),
-                contact1: gettext("1.联系业务运维为您添加"),
-                cc_system: gettext("配置平台"),
-                cc_roles: gettext("对应业务的角色，如运维人员、开发人员、产品人员、测试人员"),
-                goto: gettext("2.或者前往"),
-                create_biz: gettext("创建属于自己的业务")
+    import '@/utils/i18n.js'
+    export default {
+        name: 'ErrorCode406',
+        data () {
+            return {
+                i18n: {
+                    sorry: gettext('对不起，您没有业务权限'),
+                    contact1: gettext('1.联系业务运维为您添加'),
+                    cc_system: gettext('配置平台'),
+                    cc_roles: gettext('对应业务的角色，如运维人员、开发人员、产品人员、测试人员'),
+                    goto: gettext('2.或者前往'),
+                    create_biz: gettext('创建属于自己的业务')
+                }
+            }
+        },
+        methods: {
+            onGotoCC () {
+                window.PAAS_API.open_other_app('bk_cc')
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     ul {
@@ -55,4 +55,3 @@ export default {
         list-style: disc;
     }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCode407.vue b/pipeline/blueflow/src/components/common/modal/ErrorCode407.vue
index 94693ea565..8e2727cb8d 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCode407.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCode407.vue
@@ -19,19 +19,19 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'ErrorCode407',
-    data () {
-        return {
-            i18n: {
-                sorry: gettext("对不起，您没有当前应用的管理员权限"),
-                try: gettext("请尝试如下操作："),
-                contact: gettext("联系“管理员”为您添加管理员权限")
+    import '@/utils/i18n.js'
+    export default {
+        name: 'ErrorCode407',
+        data () {
+            return {
+                i18n: {
+                    sorry: gettext('对不起，您没有当前应用的管理员权限'),
+                    try: gettext('请尝试如下操作：'),
+                    contact: gettext('联系“管理员”为您添加管理员权限')
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     ul {
@@ -41,5 +41,3 @@ export default {
         list-style: disc;
     }
 </style>
-
-
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCode500.vue b/pipeline/blueflow/src/components/common/modal/ErrorCode500.vue
index bf8cad489b..bf3a357134 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCode500.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCode500.vue
@@ -17,19 +17,19 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'ErrorCode500',
-    props: ['responseText'],
-    data () {
-        return {
-            i18n: {
-                except: gettext("应用出现异常"),
-                contact: gettext("系统出现异常, 请记录下错误场景并与开发人员联系, 谢谢!")
+    import '@/utils/i18n.js'
+    export default {
+        name: 'ErrorCode500',
+        props: ['responseText'],
+        data () {
+            return {
+                i18n: {
+                    except: gettext('应用出现异常'),
+                    contact: gettext('系统出现异常, 请记录下错误场景并与开发人员联系, 谢谢!')
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -42,4 +42,3 @@ export default {
     text-align: left;
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/modal/ErrorCodeModal.vue b/pipeline/blueflow/src/components/common/modal/ErrorCodeModal.vue
index 91cad98d5a..70180d7a27 100644
--- a/pipeline/blueflow/src/components/common/modal/ErrorCodeModal.vue
+++ b/pipeline/blueflow/src/components/common/modal/ErrorCodeModal.vue
@@ -11,78 +11,81 @@
 */
 <template>
     <bk-dialog
-    ext-cls="error-content-dialog"
-    :is-show="isModalShow"
-    :title="` `"
-    :width="'600'"
-    padding="45px"
-    :has-header="true"
-    :has-footer="false"
-    :quick-close="false"
-    :close-icon="code !== 401"
-    @cancel="onCloseDialog">
+        ext-cls="error-content-dialog"
+        :is-show="isModalShow"
+        :title="title"
+        :width="'600'"
+        padding="45px"
+        :has-header="true"
+        :has-footer="false"
+        :quick-close="false"
+        :close-icon="code !== 401"
+        @cancel="onCloseDialog">
         <div slot="content" class="error-content">
             <div class="pic-wrapper">
                 <img :src="errorPic" class="error-pic" alt="error-pic">
             </div>
             <ErrorCode401 v-if="code === 401"></ErrorCode401>
             <ErrorCode403 v-if="code === 403"></ErrorCode403>
-            <ErrorCode405 v-if="code === 405" :responseText="responseText"></ErrorCode405>
+            <ErrorCode405 v-if="code === 405" :response-text="responseText"></ErrorCode405>
             <ErrorCode406 v-if="code === 406"></ErrorCode406>
             <ErrorCode407 v-if="code === 407"></ErrorCode407>
-            <ErrorCode500 v-if="code === 500" :responseText="responseText"></ErrorCode500>
+            <ErrorCode500 v-if="code === 500" :response-text="responseText"></ErrorCode500>
+            <div class="default-modal" v-if="code === 'default'" v-html="responseText"></div>
         </div>
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import ErrorCode401 from './ErrorCode401.vue'
-import ErrorCode403 from './ErrorCode403.vue'
-import ErrorCode405 from './ErrorCode405.vue'
-import ErrorCode406 from './ErrorCode406.vue'
-import ErrorCode407 from './ErrorCode407.vue'
-import ErrorCode500 from './ErrorCode500.vue'
-export default {
-    name: 'ErrorCodeModal',
-    components: {
-        ErrorCode403,
-        ErrorCode401,
-        ErrorCode405,
-        ErrorCode406,
-        ErrorCode407,
-        ErrorCode500
-    },
-    data () {
-        return {
-            isModalShow: false,
-            code: '',
-            responseText: '',
-            expPic401: require('@/assets/images/expre_401.png'),
-            expPic403: require('@/assets/images/expre_403.png'),
-            expPic500: require('@/assets/images/expre_500.png')
-        }
-    },
-    computed: {
-        errorPic () {
-            if (this.code === 500) {
-                return this.expPic500
-            } else if (this.code === 401) {
-                return this.expPic401
+    import '@/utils/i18n.js'
+    import ErrorCode401 from './ErrorCode401.vue'
+    import ErrorCode403 from './ErrorCode403.vue'
+    import ErrorCode405 from './ErrorCode405.vue'
+    import ErrorCode406 from './ErrorCode406.vue'
+    import ErrorCode407 from './ErrorCode407.vue'
+    import ErrorCode500 from './ErrorCode500.vue'
+    export default {
+        name: 'ErrorCodeModal',
+        components: {
+            ErrorCode403,
+            ErrorCode401,
+            ErrorCode405,
+            ErrorCode406,
+            ErrorCode407,
+            ErrorCode500
+        },
+        data () {
+            return {
+                isModalShow: false,
+                code: '',
+                responseText: '',
+                title: ' ',
+                expPic401: require('@/assets/images/expre_401.png'),
+                expPic403: require('@/assets/images/expre_403.png'),
+                expPic500: require('@/assets/images/expre_500.png')
+            }
+        },
+        computed: {
+            errorPic () {
+                if (this.code === 500) {
+                    return this.expPic500
+                } else if (this.code === 401) {
+                    return this.expPic401
+                }
+                return this.expPic403
             }
-            return this.expPic403
-        }
-    },
-    methods: {
-        show (code, responseText) {
-            this.code = code
-            this.responseText = responseText
-            this.isModalShow = true
         },
-        onCloseDialog () {
-            this.isModalShow = false
+        methods: {
+            show (code, responseText, title = ' ') {
+                this.code = code
+                this.responseText = responseText
+                this.isModalShow = true
+                this.title = title
+            },
+            onCloseDialog () {
+                this.isModalShow = false
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .error-content-dialog {
@@ -105,4 +108,3 @@ export default {
 }
 
 </style>
-
diff --git a/pipeline/blueflow/src/components/common/modal/UserLoginModal.vue b/pipeline/blueflow/src/components/common/modal/UserLoginModal.vue
index 7326d3ddb3..046391a01d 100644
--- a/pipeline/blueflow/src/components/common/modal/UserLoginModal.vue
+++ b/pipeline/blueflow/src/components/common/modal/UserLoginModal.vue
@@ -32,23 +32,22 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations} from 'vuex'
-export default {
-    name: 'UserLoginModal',
-    data () {
-        return {
-            isModalShow: false,
-            src: ''
-        }
-    },
-    methods: {
-        show (src) {
-            this.isModalShow = true
-            this.src = src
+    import '@/utils/i18n.js'
+    export default {
+        name: 'UserLoginModal',
+        data () {
+            return {
+                isModalShow: false,
+                src: ''
+            }
+        },
+        methods: {
+            show (src) {
+                this.isModalShow = true
+                this.src = src
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .login-wrapper {
@@ -56,4 +55,3 @@ export default {
         height:440px;
     }
 </style>
-
diff --git a/pipeline/blueflow/src/components/layout/BizSelector.vue b/pipeline/blueflow/src/components/layout/BizSelector.vue
index 6989de5fa3..aa02dae709 100644
--- a/pipeline/blueflow/src/components/layout/BizSelector.vue
+++ b/pipeline/blueflow/src/components/layout/BizSelector.vue
@@ -11,24 +11,24 @@
 */
 <template>
     <div
-        :class="['biz-wrapper',]"
+        :class="['biz-wrapper']"
         v-clickout="onHideBizList">
         <div
-            :class="['current-biz-name', {'list-open': showList, 'disabled-biz-name': disabled}]"
+            :class="['current-biz-name', { 'list-open': showList, 'disabled-biz-name': disabled }]"
             :title="currentBizName"
             @click="onToggleBizList">
             {{currentBizName}}
         </div>
         <div class="biz-list" v-show="showList">
             <div class="search-wrapper">
-                <input class="search-input" v-model="searchStr"/>
+                <input class="search-input" v-model="searchStr" />
                 <i class="common-icon-search"></i>
             </div>
             <ul>
                 <li
                     v-for="biz in businessList"
                     :key="biz.cc_id"
-                    :class="['biz-item', { 'selected': Number(currentBizId) === biz.cc_id}]"
+                    :class="['biz-item', { 'selected': Number(currentBizId) === biz.cc_id }]"
                     :title="biz.cc_name"
                     @click.stop="onSelectBiz(biz.cc_id)">
                     {{biz.cc_name}}
@@ -38,109 +38,108 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import toolsUtils from '@/utils/tools.js'
-import { setAtomConfigApiUrls } from '@/config/setting.js'
-import { errorHandler } from '@/utils/errorHandler.js'
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { setAtomConfigApiUrls } from '@/config/setting.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
 
-export default {
-    name: 'BizSelector',
-    data () {
-        return {
-            showList: false,
-            searchStr: ''
-        }
-    },
-    props: ['disabled'],
-    computed: {
-        ...mapState({
-            site_url: state => state.site_url,
-            username: state => state.username,
-            cc_id: state => state.cc_id,
-            bizList: state => state.bizList
-        }),
-        businessList () {
-            if (this.searchStr === '') {
-                return this.bizList
-            } else {
-                const reg = new RegExp(this.searchStr)
-                return this.bizList.filter(item => {
-                    return reg.test(item.cc_name)
-                })
+    export default {
+        name: 'BizSelector',
+        props: ['disabled'],
+        data () {
+            return {
+                showList: false,
+                searchStr: ''
             }
         },
-        currentBizId: {
-            get () {
-                return this.cc_id
+        computed: {
+            ...mapState({
+                site_url: state => state.site_url,
+                username: state => state.username,
+                cc_id: state => state.cc_id,
+                bizList: state => state.bizList
+            }),
+            businessList () {
+                if (this.searchStr === '') {
+                    return this.bizList
+                } else {
+                    const reg = new RegExp(this.searchStr)
+                    return this.bizList.filter(item => {
+                        return reg.test(item.cc_name)
+                    })
+                }
+            },
+            currentBizId: {
+                get () {
+                    return this.cc_id
+                },
+                set (id) {
+                    this.setBizId(id)
+                }
             },
-            set (id) {
-                this.setBizId(id)
+            currentBizName () {
+                const crtIndex = this.bizList.findIndex(item => Number(this.currentBizId) === item.cc_id)
+                return crtIndex > -1 ? this.bizList[crtIndex].cc_name : ''
             }
         },
-        currentBizName () {
-            const crtIndex = this.bizList.findIndex(item => Number(this.currentBizId) === item.cc_id)
-            return crtIndex > -1 ? this.bizList[crtIndex].cc_name : ''
-        }
-    },
-    created () {
-        this.setTimezone(this.cc_id)
-    },
-    methods: {
-        ...mapActions([
-            'getBizList',
-            'changeDefaultBiz',
-            'getBusinessTimezone'
-        ]),
-        ...mapMutations([
-            'setBizId',
-            'setBusinessTimezone'
-        ]),
-        async onSelectBiz (id) {
-            this.showList = false
-            try {
-                const res = await this.changeDefaultBiz(id)
-                if (res.result) {
-                    await this.setTimezone(id)
-                    setAtomConfigApiUrls(this.site_url, id)
-                    this.$router.push({path: `/business/home/${id}/`})
-                    // notice: 清除标准插件配置项里的全局变量缓存
-                    $.atoms = {}
+        created () {
+            this.setTimezone(this.cc_id)
+        },
+        methods: {
+            ...mapActions([
+                'getBizList',
+                'changeDefaultBiz',
+                'getBusinessTimezone'
+            ]),
+            ...mapMutations([
+                'setBizId',
+                'setBusinessTimezone'
+            ]),
+            async onSelectBiz (id) {
+                this.showList = false
+                try {
+                    const res = await this.changeDefaultBiz(id)
+                    if (res.result) {
+                        await this.setTimezone(id)
+                        setAtomConfigApiUrls(this.site_url, id)
+                        this.$router.push({ path: `/business/home/${id}/` })
+                        // notice: 清除标准插件配置项里的全局变量缓存
+                        $.atoms = {}
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onToggleBizList () {
+                if (this.disabled) {
+                    this.showList = false
                 } else {
-                    errorHandler(res, this)
+                    this.showList = !this.showList
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onToggleBizList () {
-            if (this.disabled) {
+            },
+            onHideBizList () {
                 this.showList = false
-            } else {
-                this.showList = !this.showList
-            }
-        },
-        onHideBizList () {
-            this.showList = false
-        },
-        async setTimezone (ccId) {
-            // 需要进行整型转换
-            const nowCCId = Number(ccId)
-            if (this.bizList.length !== 0) {
-                // 有业务列表不需要直接接口拉
-                let business = this.bizList.find((business) => business.cc_id === nowCCId)
-                let timezone = 'Asia/Shanghai'
-                if (business !== undefined) {
-                    // 业务如果不携带时区信息即undefined情况
-                    timezone = business.time_zone || 'Asia/Shanghai'
+            },
+            async setTimezone (ccId) {
+                // 需要进行整型转换
+                const nowCCId = Number(ccId)
+                if (this.bizList.length !== 0) {
+                    // 有业务列表不需要直接接口拉
+                    const business = this.bizList.find((business) => business.cc_id === nowCCId)
+                    let timezone = 'Asia/Shanghai'
+                    if (business !== undefined) {
+                        // 业务如果不携带时区信息即undefined情况
+                        timezone = business.time_zone || 'Asia/Shanghai'
+                    }
+                    this.setBusinessTimezone(timezone)
+                } else {
+                    await this.getBusinessTimezone()
                 }
-                this.setBusinessTimezone(timezone)
-            } else {
-                await this.getBusinessTimezone()
             }
         }
     }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -257,4 +256,3 @@ export default {
 }
 
 </style>
-
diff --git a/pipeline/blueflow/src/components/layout/CopyrightFooter.vue b/pipeline/blueflow/src/components/layout/CopyrightFooter.vue
index 2de9e0b3b2..8d5306a348 100644
--- a/pipeline/blueflow/src/components/layout/CopyrightFooter.vue
+++ b/pipeline/blueflow/src/components/layout/CopyrightFooter.vue
@@ -23,28 +23,28 @@
     </footer>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState } from 'vuex'
-import moment from 'moment-timezone'
-export default {
-    name: 'CopyrightFooter',
-    computed: {
-        ...mapState({
-            businessTimezone: state => state.businessTimezone
-        })
-    },
-    data () {
-        return {
-            year: moment.tz(this.businessTimezone).year(),
-            i18n: {
-                qq: gettext('QQ咨询'),
-                bk: gettext('蓝鲸官网'),
-                bkForum: gettext('蓝鲸论坛'),
-                copyRight: gettext('蓝鲸智云 版权所有')
+    import '@/utils/i18n.js'
+    import { mapState } from 'vuex'
+    import moment from 'moment-timezone'
+    export default {
+        name: 'CopyrightFooter',
+        data () {
+            return {
+                year: moment.tz(this.businessTimezone).year(),
+                i18n: {
+                    qq: gettext('QQ咨询'),
+                    bk: gettext('蓝鲸官网'),
+                    bkForum: gettext('蓝鲸论坛'),
+                    copyRight: gettext('蓝鲸智云 版权所有')
+                }
             }
+        },
+        computed: {
+            ...mapState({
+                businessTimezone: state => state.businessTimezone
+            })
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .footer-wrapper {
@@ -76,4 +76,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/components/layout/Navigator.vue b/pipeline/blueflow/src/components/layout/Navigator.vue
index 88fbee234d..e3c62094fa 100644
--- a/pipeline/blueflow/src/components/layout/Navigator.vue
+++ b/pipeline/blueflow/src/components/layout/Navigator.vue
@@ -12,23 +12,23 @@
 <template>
     <header>
         <router-link v-if="userType === 'maintainer' && view_mode === 'app'" to="/" @click.native="onGoToPath(businessHomeRoute)">
-            <img :src="logo" class="logo"/>
+            <img :src="logo" class="logo" />
         </router-link>
-        <img v-else :src="logo" class="logo"/>
+        <img v-else :src="logo" class="logo" />
         <nav>
             <div class="navigator" v-if="!appmakerDataLoading">
                 <template v-for="route in routeList">
                     <div
                         v-if="route.children && route.children.length"
                         :key="route.key"
-                        :class="['nav-item', { 'active': isNavActived(route)}]">
+                        :class="['nav-item', { 'active': isNavActived(route) }]">
                         <span>{{route.name}}</span>
                         <div class="sub-nav">
                             <router-link
                                 v-for="subRoute in route.children"
                                 tag="a"
                                 :key="subRoute.key"
-                                :class="['sub-nav-item', {'selected': isSubNavActived(subRoute)}]"
+                                :class="['sub-nav-item', { 'selected': isSubNavActived(subRoute) }]"
                                 :to="getPath(subRoute)"
                                 @click.native="onGoToPath(subRoute)">
                                 {{subRoute.name}}
@@ -39,7 +39,7 @@
                         v-else
                         tag="a"
                         :key="route.key"
-                        :class="['nav-item', { 'active': isNavActived(route)}]"
+                        :class="['nav-item', { 'active': isNavActived(route) }]"
                         :to="getPath(route)"
                         @click.native="onGoToPath(route)">
                         {{route.name}}
@@ -71,257 +71,252 @@
     </header>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { setAtomConfigApiUrls } from '@/config/setting.js'
-import BizSelector from './BizSelector.vue'
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import BizSelector from './BizSelector.vue'
 
-const ROUTE_LIST = {
-    // 职能化中心导航
-    functor_router_list: [
-        {
-            key: 'function',
-            path: '/function/home/',
-            name: gettext('职能化中心')
-        }
-    ],
-    // 职能化中心导航
-    auditor_router_list: [
-        {
-            key: 'audit',
-            path: '/audit/home/',
-            name: gettext('审计中心')
-        }
-    ],
-    // 通用导航
-    maintainer_router_list: [
-        {
-            key: 'template',
-            name: gettext('流程模板'),
-            children: [
-                {
-                    key: 'template',
-                    name: gettext('业务流程'),
-                    path: '/template/home/'
-                },
-                {
-                    key: 'commonTemplate',
-                    name: gettext('公共流程'),
-                    path: '/template/home/',
-                    query: {common: 1, common_template: 'common'}
-                }
-            ]
-        },
-        {
-            key: 'periodic',
-            path: '/periodic/home/',
-            name: gettext('周期任务')
-        },
-        {
-            key: 'taskflow',
-            path: '/taskflow/home/',
-            name: gettext('任务记录')
-        },
-        {
-            key: 'config',
-            path: '/config/home/',
-            name: gettext('业务配置')
-        },
-        {
-            key: 'appmaker',
-            path: '/appmaker/home/',
-            name: gettext('轻应用')
-        },
-        {
-            key: 'administrator',
-            name: gettext('管理员入口'),
-            children: [
-                {
-                    key: 'statistics',
-                    name: gettext('运营数据'),
-                    path: '/statistics/template/'
-                },
-                {
-                    key: 'common',
-                    name: gettext('公共流程'),
-                    path: '/template/home/',
-                    query: {common: 1}
-                }
-            ]
-        }
-    ]
-}
-
-export default {
-    inject: ['reload'],
-    name: 'Navigator',
-    components: {
-        BizSelector
-    },
-    props: ['appmakerDataLoading'],
-    data () {
-        return {
-            subNavKey: '',
-            logo: require('../../assets/images/logo/' + gettext('logo-zh') + '.svg'),
-            i18n: {
-                help: gettext("帮助文档")
-            },
-            businessHomeRoute: {
-                key: 'business',
-                path: '/business/home/'
+    const ROUTE_LIST = {
+        // 职能化中心导航
+        functor_router_list: [
+            {
+                key: 'function',
+                path: '/function/home/',
+                name: gettext('职能化中心')
             }
-        }
-    },
-    computed: {
-        ...mapState({
-            site_url: state => state.site_url,
-            username: state => state.username,
-            userType: state => state.userType,
-            cc_id: state => state.cc_id,
-            app_id: state => state.app_id,
-            view_mode: state => state.view_mode,
-            bizList: state => state.bizList,
-            templateId: state => state.templateId,
-            notFoundPage: state => state.notFoundPage,
-            isSuperUser: state => state.isSuperUser
-        }),
-        showHeaderRight () {
-            return this.userType === 'maintainer' && this.view_mode !== 'appmaker' && this.bizList.length
-        },
-        routeList () {
-            if (this.view_mode === 'appmaker') {
-                return [
+        ],
+        // 职能化中心导航
+        auditor_router_list: [
+            {
+                key: 'audit',
+                path: '/audit/home/',
+                name: gettext('审计中心')
+            }
+        ],
+        // 通用导航
+        maintainer_router_list: [
+            {
+                key: 'template',
+                name: gettext('流程模板'),
+                children: [
                     {
-                        key: 'appmakerTaskCreate',
-                        path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/selectnode`,
-                        query: {template_id: this.template_id},
-                        name: gettext('新建任务')
+                        key: 'template',
+                        name: gettext('业务流程'),
+                        path: '/template/home/'
                     },
                     {
-                        key: 'appmakerTaskList',
-                        path: `/appmaker/${this.app_id}/task_home/`,
-                        name: gettext('任务记录')
+                        key: 'commonTemplate',
+                        name: gettext('公共流程'),
+                        path: '/template/home/',
+                        query: { common: 1, common_template: 'common' }
                     }
                 ]
-            } else {
-                let routes = ROUTE_LIST[`${this.userType}_router_list`]
+            },
+            {
+                key: 'periodic',
+                path: '/periodic/home/',
+                name: gettext('周期任务')
+            },
+            {
+                key: 'taskflow',
+                path: '/taskflow/home/',
+                name: gettext('任务记录')
+            },
+            {
+                key: 'config',
+                path: '/config/home/',
+                name: gettext('业务配置')
+            },
+            {
+                key: 'appmaker',
+                path: '/appmaker/home/',
+                name: gettext('轻应用')
+            },
+            {
+                key: 'administrator',
+                name: gettext('管理员入口'),
+                children: [
+                    {
+                        key: 'statistics',
+                        name: gettext('运营数据'),
+                        path: '/statistics/template/'
+                    },
+                    {
+                        key: 'common',
+                        name: gettext('公共流程'),
+                        path: '/template/home/',
+                        query: { common: 1 }
+                    }
+                ]
+            }
+        ]
+    }
 
-                // 非管理员用户去掉管理员入口
-                if (!this.isSuperUser) {
-                    routes = routes.filter(item => item.key !== 'administrator')
+    export default {
+        inject: ['reload'],
+        name: 'Navigator',
+        components: {
+            BizSelector
+        },
+        props: ['appmakerDataLoading'],
+        data () {
+            return {
+                subNavKey: '',
+                logo: require('../../assets/images/logo/' + gettext('logo-zh') + '.svg'),
+                i18n: {
+                    help: gettext('帮助文档')
+                },
+                businessHomeRoute: {
+                    key: 'business',
+                    path: '/business/home/'
                 }
-                return routes
             }
         },
-        disabled () {
-            const route = this.$route
-            if (
-                route.path.indexOf('/statistics/') > -1 ||
-                route.query &&
-                route.query.common &&
-                !route.query.common_template &&
-                route.name !== 'templateStep' &&
-                route.name !== 'taskList'
-            ) {
-                return true
-            }
-            return false
-        }
-    },
-    mounted () {
-        this.initHome()
-    },
-    methods: {
-        initHome () {
-            if (this.userType === 'maintainer' && this.view_mode !== 'appmaker') {
-                this.getBizList()
+        computed: {
+            ...mapState({
+                site_url: state => state.site_url,
+                username: state => state.username,
+                userType: state => state.userType,
+                cc_id: state => state.cc_id,
+                app_id: state => state.app_id,
+                view_mode: state => state.view_mode,
+                bizList: state => state.bizList,
+                templateId: state => state.templateId,
+                notFoundPage: state => state.notFoundPage,
+                isSuperUser: state => state.isSuperUser
+            }),
+            showHeaderRight () {
+                return this.userType === 'maintainer' && this.view_mode !== 'appmaker' && this.bizList.length
+            },
+            routeList () {
+                if (this.view_mode === 'appmaker') {
+                    return [
+                        {
+                            key: 'appmakerTaskCreate',
+                            path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/selectnode`,
+                            query: { template_id: this.template_id },
+                            name: gettext('新建任务')
+                        },
+                        {
+                            key: 'appmakerTaskList',
+                            path: `/appmaker/${this.app_id}/task_home/`,
+                            name: gettext('任务记录')
+                        }
+                    ]
+                } else {
+                    let routes = ROUTE_LIST[`${this.userType}_router_list`]
+
+                    // 非管理员用户去掉管理员入口
+                    if (!this.isSuperUser) {
+                        routes = routes.filter(item => item.key !== 'administrator')
+                    }
+                    return routes
+                }
+            },
+            disabled () {
+                const route = this.$route
+                if (route.path.indexOf('/statistics/') > -1
+                    || (route.query
+                    && route.query.common
+                    && !route.query.common_template
+                    && route.name !== 'templateStep'
+                    && route.name !== 'taskList')
+                ) {
+                    return true
+                }
+                return false
             }
         },
-        ...mapActions([
-            'getBizList',
-            'changeDefaultBiz'
-        ]),
-        ...mapMutations([
-            'setBizId'
-        ]),
-        isNavActived (route) {
-            const key = route.key
+        mounted () {
+            this.initHome()
+        },
+        methods: {
+            initHome () {
+                if (this.userType === 'maintainer' && this.view_mode !== 'appmaker') {
+                    this.getBizList()
+                }
+            },
+            ...mapActions([
+                'getBizList',
+                'changeDefaultBiz'
+            ]),
+            ...mapMutations([
+                'setBizId'
+            ]),
+            isNavActived (route) {
+                const key = route.key
 
-            // 轻应用打开
-            if (this.view_mode === 'appmaker') {
-                if (this.$route.name === 'appmakerTaskExecute' || this.$route.name === 'appmakerTaskHome') {
-                    return key === 'appmakerTaskList'
-                } else {
-                    return key === 'appmakerTaskCreate'
+                // 轻应用打开
+                if (this.view_mode === 'appmaker') {
+                    if (this.$route.name === 'appmakerTaskExecute' || this.$route.name === 'appmakerTaskHome') {
+                        return key === 'appmakerTaskList'
+                    } else {
+                        return key === 'appmakerTaskCreate'
+                    }
                 }
-            }
 
-            // 职能化中心、审计中心打开
-            if (this.userType === 'functor') {
-                return key === 'function'
-            } else if (this.userType === 'auditor') {
-                return key === 'audit'
-            }
-            // 二级导航被选中
-            if (route.children && route.children.length) {
-                return route.children.some(item => {
-                    return this.matchPathResult(item.key)
-                })
-            }
+                // 职能化中心、审计中心打开
+                if (this.userType === 'functor') {
+                    return key === 'function'
+                } else if (this.userType === 'auditor') {
+                    return key === 'audit'
+                }
+                // 二级导航被选中
+                if (route.children && route.children.length) {
+                    return route.children.some(item => {
+                        return this.matchPathResult(item.key)
+                    })
+                }
 
-            return this.matchPathResult(key)
-        },
-        isSubNavActived (route) {
-            return this.matchPathResult(route.key)
-        },
-        matchPathResult (key) {
-            if (this.$route.query !== undefined && Object.keys(this.$route.query).length !== 0 && this.$route.query.common) {
-                if (this.$route.query.common_template || this.$route.name === 'templateStep') {
-                    return key === 'commonTemplate'
-                } else if (this.$route.name !== 'taskList'){
-                    return key === 'common'
+                return this.matchPathResult(key)
+            },
+            isSubNavActived (route) {
+                return this.matchPathResult(route.key)
+            },
+            matchPathResult (key) {
+                if (this.$route.query !== undefined && Object.keys(this.$route.query).length !== 0 && this.$route.query.common) {
+                    if (this.$route.query.common_template || this.$route.name === 'templateStep') {
+                        return key === 'commonTemplate'
+                    } else if (this.$route.name !== 'taskList') {
+                        return key === 'common'
+                    }
                 }
-            }
-            return new RegExp('^\/' + key).test(this.$route.path)
-        },
-        getPath (route) {
-            /** 404 页面时，导航统一跳转到首页 */
-            if (this.notFoundPage) {
-                if (['functor', 'auditor'].indexOf(this.userType) === -1
-                    && this.view_mode !== 'appmaker'
-                ) {
-                    return '/'
+                return new RegExp('^\/' + key).test(this.$route.path)
+            },
+            getPath (route) {
+                /** 404 页面时，导航统一跳转到首页 */
+                if (this.notFoundPage) {
+                    if (['functor', 'auditor'].indexOf(this.userType) === -1
+                        && this.view_mode !== 'appmaker'
+                    ) {
+                        return '/'
+                    }
                 }
-                
-            }
 
-            let path
-            if (route.key === 'appmakerTaskCreate') {
-                path = `${route.path}?template_id=${this.templateId}`
-            } else if (this.userType !== 'maintainer' || route.key === 'statistics') {
-                path = `${route.path}`
-            } else {
-                path =  {path: `${route.path}${this.cc_id}/`, query: route.query}
-            }
-            return path
-        },
-        onGoToPath (route) {
-            let path = this.getPath(route)
-            // 点击当前导航刷新页面
-            if (path === this.$route.path || path.path === this.$route.path) {
-                this.refreshCurrentPage()
+                let path
+                if (route.key === 'appmakerTaskCreate') {
+                    path = `${route.path}?template_id=${this.templateId}`
+                } else if (this.userType !== 'maintainer' || route.key === 'statistics') {
+                    path = `${route.path}`
+                } else {
+                    path = { path: `${route.path}${this.cc_id}/`, query: route.query }
+                }
+                return path
+            },
+            onGoToPath (route) {
+                const path = this.getPath(route)
+                // 点击当前导航刷新页面
+                if (path === this.$route.path || path.path === this.$route.path) {
+                    this.refreshCurrentPage()
+                }
+            },
+            onClickSubNav (route) {
+                this.onGoToPath(route)
+            },
+            refreshCurrentPage () {
+                this.reload()
             }
-            return
-        },
-        onClickSubNav (route) {
-            this.onGoToPath(route)
-        },
-        refreshCurrentPage () {
-            this.reload()
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/components/layout/NotFoundComponent.vue b/pipeline/blueflow/src/components/layout/NotFoundComponent.vue
index 7f2513af0d..9c80c7d06d 100644
--- a/pipeline/blueflow/src/components/layout/NotFoundComponent.vue
+++ b/pipeline/blueflow/src/components/layout/NotFoundComponent.vue
@@ -10,31 +10,31 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-	<div class="exception-box">
-		<img :src="require('@/assets/images/building.png')" alt="404">
-		<p>{{ i18n.no_page }}</p>
-	</div>
+    <div class="exception-box">
+        <img :src="require('@/assets/images/building.png')" alt="404">
+        <p>{{ i18n.no_page }}</p>
+    </div>
 </template>
 
 <script>
-import '@/utils/i18n.js'
-export default {
-    data () {
-        return {
-            i18n: {
-                no_page: gettext("没找到页面！")
+    import '@/utils/i18n.js'
+    export default {
+        data () {
+            return {
+                i18n: {
+                    no_page: gettext('没找到页面！')
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss">
-	.exception-box {
-		margin: 150px auto 0;
-		width: 300px;
-		text-align: center;
-		img {
-			width: 100%;
-		}
-	}
+    .exception-box {
+        margin: 150px auto 0;
+        width: 300px;
+        text-align: center;
+        img {
+            width: 100%;
+        }
+    }
 </style>
diff --git a/pipeline/blueflow/src/components/tags/TagTestDatetime.vue b/pipeline/blueflow/src/components/tags/TagTestDatetime.vue
index e03569300e..f7f631807e 100644
--- a/pipeline/blueflow/src/components/tags/TagTestDatetime.vue
+++ b/pipeline/blueflow/src/components/tags/TagTestDatetime.vue
@@ -25,29 +25,29 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { getFormMixins } from '@/components/common/RenderForm/formMixins.js'
-const datetimeAttrs = {
-    placeholder: {
-        type: String,
-        required: false,
-        default () {
-            return gettext("请选择日期时间")
+    import '@/utils/i18n.js'
+    import { getFormMixins } from '@/components/common/RenderForm/formMixins.js'
+    const datetimeAttrs = {
+        placeholder: {
+            type: String,
+            required: false,
+            default () {
+                return gettext('请选择日期时间')
+            },
+            desc: 'placeholder'
         },
-        desc: "placeholder"
-    },
-    value: {
-        type: String,
-        required: false,
-        default () {
-            return ''
+        value: {
+            type: String,
+            required: false,
+            default () {
+                return ''
+            }
         }
     }
-}
-export default {
-    name: 'TagTestDatetime',
-    mixins: [getFormMixins(datetimeAttrs)]
-}
+    export default {
+        name: 'TagTestDatetime',
+        mixins: [getFormMixins(datetimeAttrs)]
+    }
 </script>
 <style lang="scss" scoped>
 .tag-testdatetime {
diff --git a/pipeline/blueflow/src/config/setting.js b/pipeline/blueflow/src/config/setting.js
index b7d1364dd9..8a370666f1 100644
--- a/pipeline/blueflow/src/config/setting.js
+++ b/pipeline/blueflow/src/config/setting.js
@@ -35,7 +35,7 @@ export function setAtomConfigApiUrls (SITE_URL, BIZ_CC_ID) {
 // 在这里对ajax请求做一些统一公用处理
 export function setJqueryAjaxConfig () {
     $.ajaxSetup({
-        //	timeout: 8000,
+        // timeout: 8000,
         statusCode: {
             // tastypie args error
             400: function (xhr) {
@@ -52,14 +52,9 @@ export function setJqueryAjaxConfig () {
             },
             402: function (xhr) {
                 // 功能开关
-                var _src = xhr.responseText
-                var ajax_content = '<iframe name="403_iframe" frameborder="0" src="' + _src + '" style="width:570px;height:400px;"></iframe>'
-                art.dialog({
-                    title: gettext("提示"),
-                    lock: true,
-                    content: ajax_content
-                })
-                return
+                const src = xhr.responseText
+                const ajaxContent = '<iframe name="403_iframe" frameborder="0" src="' + src + '" style="width:570px;height:400px;"></iframe>'
+                bus.$emit('showErrorModal', 'default', ajaxContent, gettext('提示'))
             },
             403: function (xhr) {
                 bus.$emit('showErrorModal', '403')
@@ -76,4 +71,3 @@ export function setJqueryAjaxConfig () {
         }
     })
 }
-
diff --git a/pipeline/blueflow/src/constants/index.js b/pipeline/blueflow/src/constants/index.js
index aa92b24581..f5fcd3db06 100644
--- a/pipeline/blueflow/src/constants/index.js
+++ b/pipeline/blueflow/src/constants/index.js
@@ -65,4 +65,4 @@ const PERIODIC_REG = /^((\*\/)?(([0-5]?\d[,-/])*([0-5]?\d))|\*)[ ]((\*\/)?(([0]?
 const URL_REG= new RegExp('^(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]$')
 /* eslint-enable */
 
-export { TASK_STATE_DICT, NODE_DICT, NAME_REG, URL_REG , PERIODIC_REG, STRING_LENGTH}
+export { TASK_STATE_DICT, NODE_DICT, NAME_REG, URL_REG, PERIODIC_REG, STRING_LENGTH }
diff --git a/pipeline/blueflow/src/directives/index.js b/pipeline/blueflow/src/directives/index.js
index fad652335a..d15333f743 100644
--- a/pipeline/blueflow/src/directives/index.js
+++ b/pipeline/blueflow/src/directives/index.js
@@ -27,4 +27,4 @@ Vue.directive('clickout', {
     unbind (el) {
         window.removeEventListener('click', el.handler)
     }
-})
\ No newline at end of file
+})
diff --git a/pipeline/blueflow/src/main.js b/pipeline/blueflow/src/main.js
index f99d16dc4f..d26b9dd058 100644
--- a/pipeline/blueflow/src/main.js
+++ b/pipeline/blueflow/src/main.js
@@ -25,7 +25,6 @@ import { Input, Select, Radio, RadioGroup, RadioButton, Checkbox,
 import enLocale from 'element-ui/lib/locale/lang/en'
 import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
 import locales from 'element-ui/lib/locale'
-import { JSEncrypt } from 'jsencrypt'
 import { STRING_LENGTH } from '@/constants/index.js'
 
 Vue.use(VeeValidate)
@@ -55,7 +54,6 @@ Vue.use(Row)
 Vue.use(Col)
 Vue.use(Pagination)
 
-
 if (store.state.lang === 'en') {
     locale.use(langPkg.enUS)
     locales.use(enLocale)
diff --git a/pipeline/blueflow/src/mixins/js/analysisMixins.js b/pipeline/blueflow/src/mixins/js/analysisMixins.js
index bfd047174c..4964bc5f55 100644
--- a/pipeline/blueflow/src/mixins/js/analysisMixins.js
+++ b/pipeline/blueflow/src/mixins/js/analysisMixins.js
@@ -27,7 +27,7 @@ export const AnalysisMixins = {
     },
     mounted () {
         const ulList = document.querySelectorAll('.outside-ul')
-        for (let item of ulList) {
+        for (const item of ulList) {
             item.style['max-height'] = '250px'
         }
     },
diff --git a/pipeline/blueflow/src/pages/appmaker/AppCard.vue b/pipeline/blueflow/src/pages/appmaker/AppCard.vue
index a3c219c4eb..13ace0bfca 100644
--- a/pipeline/blueflow/src/pages/appmaker/AppCard.vue
+++ b/pipeline/blueflow/src/pages/appmaker/AppCard.vue
@@ -17,10 +17,10 @@
         </div>
         <div class="logo">
             <div v-if="isShowDefaultLogo" class="default-logo">
-                <i  class="common-icon-blueking"></i>
+                <i class="common-icon-blueking"></i>
             </div>
             <div v-else>
-                <img class="logo-pic" :src="appData.logo_url" @error="useDefaultLogo"/>
+                <img class="logo-pic" :src="appData.logo_url" @error="useDefaultLogo" />
             </div>
         </div>
         <div class="app-detail">
@@ -36,44 +36,43 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'AppCard',
-    props: ['appData', 'cc_id'],
-    data () {
-        return {
-            isShowDefaultLogo: false,
-            i18n: {
-                edit: gettext('编辑'),
-                delete: gettext('删除'),
-                template: gettext('流程模板：'),
-                appDesc: gettext('应用简介：')
+    import '@/utils/i18n.js'
+    export default {
+        name: 'AppCard',
+        props: ['appData', 'cc_id'],
+        data () {
+            return {
+                isShowDefaultLogo: false,
+                i18n: {
+                    edit: gettext('编辑'),
+                    delete: gettext('删除'),
+                    template: gettext('流程模板：'),
+                    appDesc: gettext('应用简介：')
+                }
             }
-        }
-    },
-    methods: {
-        useDefaultLogo () {
-            this.isShowDefaultLogo = true
-        },
-        onCardEdit () {
-            this.$emit('onCardEdit', this.appData)
-        },
-        onCardDelete () {
-            this.$emit('onCardDelete', this.appData)
         },
-        onGotoAppMaker () {
-            if (self === top) {
-                this.$bkMessage({
-                    'message': gettext('外链不支持打开轻应用，请在蓝鲸市场中打开此链接'),
-                    'theme': 'warning'
-                })
-            }
-            else {
-                window.PAAS_API.open_other_app(this.appData.code, this.appData.link)
+        methods: {
+            useDefaultLogo () {
+                this.isShowDefaultLogo = true
+            },
+            onCardEdit () {
+                this.$emit('onCardEdit', this.appData)
+            },
+            onCardDelete () {
+                this.$emit('onCardDelete', this.appData)
+            },
+            onGotoAppMaker () {
+                if (self === top) {
+                    this.$bkMessage({
+                        'message': gettext('外链不支持打开轻应用，请在蓝鲸市场中打开此链接'),
+                        'theme': 'warning'
+                    })
+                } else {
+                    window.PAAS_API.open_other_app(this.appData.code, this.appData.link)
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -159,5 +158,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/appmaker/AppEditDialog.vue b/pipeline/blueflow/src/pages/appmaker/AppEditDialog.vue
index a40ba2b7f7..7020fee355 100644
--- a/pipeline/blueflow/src/pages/appmaker/AppEditDialog.vue
+++ b/pipeline/blueflow/src/pages/appmaker/AppEditDialog.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-     <bk-dialog
+    <bk-dialog
         :quick-close="false"
         :has-header="true"
         :ext-cls="'common-dialog'"
@@ -19,7 +19,7 @@
         :is-show.sync="isEditDialogShow"
         @confirm="onConfirm"
         @cancel="onCancel">
-        <div slot="content" class="app-edit-content" v-bkloading="{isLoading: templateLoading, opacity: 1}">
+        <div slot="content" class="app-edit-content" v-bkloading="{ isLoading: templateLoading, opacity: 1 }">
             <div class="common-form-item">
                 <label class="required">{{i18n.template}}</label>
                 <div class="common-form-content">
@@ -39,7 +39,7 @@
                     <BaseInput
                         name="appName"
                         v-model="appData.appName"
-                        v-validate="appNameRule"/>
+                        v-validate="appNameRule" />
                     <span v-show="errors.has('appName')" class="common-error-tip error-msg">{{ errors.first('appName') }}</span>
                 </div>
             </div>
@@ -58,10 +58,10 @@
                     <i
                         class="bk-icon icon-info-circle scheme-tooltip"
                         v-bktooltips="{
-                           content: i18n.schemeTips,
-                           placements: ['left'],
-                           width: 400,
-                           zIndex: 1501
+                            content: i18n.schemeTips,
+                            placements: ['left'],
+                            width: 400,
+                            zIndex: 1501
                         }"></i>
                 </div>
             </div>
@@ -89,157 +89,156 @@
                             <i class="common-icon-blueking"></i>
                         </div>
                         <div v-else>
-                            <img class="logo-pic" :src="logoUrl" @error="useDefaultLogo"/>
+                            <img class="logo-pic" :src="logoUrl" @error="useDefaultLogo" />
                         </div>
                     </label>
                     <div class="upload-tip">{{i18n.uploadTips}}</div>
-                    <input ref="appLogo" type="file" id="app-logo" accept=".jpg, .jpeg, .png" @change="onLogoChange"/>
+                    <input ref="appLogo" type="file" id="app-logo" accept=".jpg, .jpeg, .png" @change="onLogoChange" />
                 </div>
             </div>
         </div>
-     </bk-dialog>
+    </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions } from 'vuex'
-import { Validator } from 'vee-validate'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-export default {
-    name: 'AppEditDialog',
-    components: {
-        BaseInput
-    },
-    props: ['cc_id', 'isCreateNewApp', 'isEditDialogShow', 'currentAppData'],
-    data () {
-        return {
-            templateLoading: true,
-            schemeLoading: false,
-            templateList: [],
-            schemeList: [],
-            appTemplateEmpty: false,
-            appData: {
-                appTemplate: this.currentAppData ? Number(this.currentAppData.template_id) : '',
-                appName: this.currentAppData ? this.currentAppData.name : '',
-                appScheme: this.currentAppData ? Number(this.currentAppData.template_scheme_id) : '',
-                appDesc: this.currentAppData ? this.currentAppData.desc : '',
-                appLogo: undefined
-            },
-            logoUrl: this.currentAppData ? this.currentAppData.logo_url : '',
-            isShowDefaultLogo: false,
-            isLogoEmpty: this.isCreateNewApp ? true : false,
-            appTemplateRule: {
-                required: true
-            },
-            appNameRule: {
-                required: true,
-                max: STRING_LENGTH.APP_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            appDescRule: {
-                max: STRING_LENGTH.APP_DESCRIPTION_MAX_LENGTH
-            },
-            i18n: {
-                title: this.isCreateNewApp ? gettext('新建轻应用') : gettext('修改轻应用'),
-                template: gettext('流程模板'),
-                templateTips: gettext('流程模板不能为空'),
-                appName: gettext('应用名称'),
-                scheme: gettext('执行方案'),
-                schemeTips: gettext('当流程模板包含可选节点时，用户可以在新建任务时添加执行方案。这里选择执行方案后，创建的轻应用只能按照固定执行方案新建任务。'),
-                appDesc: gettext('应用简介'),
-                appLogo: gettext('应用LOGO'),
-                change: gettext('点击更换'),
-                uploadTips: gettext('只能上传JPG/PNG类型文件，建议大小为100px*100px，不能超过 100K')
-            }
-        }
-    },
-    created () {
-        this.getTemplateList()
-        if (!this.isCreateNewApp) {
-            this.getTemplateScheme()
-        }
-    },
-    methods: {
-        ...mapActions('templateList', [
-            'loadTemplateList'
-        ]),
-        ...mapActions('task/', [
-            'loadTaskScheme'
-        ]),
-        useDefaultLogo () {
-            this.isShowDefaultLogo = true
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    export default {
+        name: 'AppEditDialog',
+        components: {
+            BaseInput
         },
-        async getTemplateList () {
-            this.templateLoading = true
-            try {
-                const templateListData = await this.loadTemplateList()
-                this.templateList = templateListData.objects
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.templateLoading = false
-            }
-        },
-        async getTemplateScheme () {
-            this.schemeLoading = true
-            try {
-                const data = {
-                    cc_id: this.cc_id,
-                    template_id: this.appData.appTemplate
+        props: ['cc_id', 'isCreateNewApp', 'isEditDialogShow', 'currentAppData'],
+        data () {
+            return {
+                templateLoading: true,
+                schemeLoading: false,
+                templateList: [],
+                schemeList: [],
+                appTemplateEmpty: false,
+                appData: {
+                    appTemplate: this.currentAppData ? Number(this.currentAppData.template_id) : '',
+                    appName: this.currentAppData ? this.currentAppData.name : '',
+                    appScheme: this.currentAppData ? Number(this.currentAppData.template_scheme_id) : '',
+                    appDesc: this.currentAppData ? this.currentAppData.desc : '',
+                    appLogo: undefined
+                },
+                logoUrl: this.currentAppData ? this.currentAppData.logo_url : '',
+                isShowDefaultLogo: false,
+                isLogoEmpty: !!this.isCreateNewApp,
+                appTemplateRule: {
+                    required: true
+                },
+                appNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.APP_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                appDescRule: {
+                    max: STRING_LENGTH.APP_DESCRIPTION_MAX_LENGTH
+                },
+                i18n: {
+                    title: this.isCreateNewApp ? gettext('新建轻应用') : gettext('修改轻应用'),
+                    template: gettext('流程模板'),
+                    templateTips: gettext('流程模板不能为空'),
+                    appName: gettext('应用名称'),
+                    scheme: gettext('执行方案'),
+                    schemeTips: gettext('当流程模板包含可选节点时，用户可以在新建任务时添加执行方案。这里选择执行方案后，创建的轻应用只能按照固定执行方案新建任务。'),
+                    appDesc: gettext('应用简介'),
+                    appLogo: gettext('应用LOGO'),
+                    change: gettext('点击更换'),
+                    uploadTips: gettext('只能上传JPG/PNG类型文件，建议大小为100px*100px，不能超过 100K')
                 }
-                this.schemeList = await this.loadTaskScheme(data)
-                this.schemeLoading = false
-            } catch (e) {
-                errorHandler(e, this)
             }
         },
-        onSelectTemplate (id, data) {
-            this.appData.appName = data.name
-            this.appTemplateEmpty = false
-        },
-        onOpenScheme (value) {
-            if (value && this.appData.appTemplate !== '') {
+        created () {
+            this.getTemplateList()
+            if (!this.isCreateNewApp) {
                 this.getTemplateScheme()
             }
         },
-        onSelectScheme (id, data) {
-            this.appData.appScheme = Number(id)
-        },
-        // logo 上传
-        onLogoChange (e) {
-            const pic = e.target.files[0]
-            const size = pic.size
-            if (size > 1024000) {
-                e.target.value = ''
-                this.appData.appLogo = []
-                this.$bkMessage({
-                    message: gettext('图片大小不能超过 100K'),
-                    theme: 'warning'
+        methods: {
+            ...mapActions('templateList', [
+                'loadTemplateList'
+            ]),
+            ...mapActions('task/', [
+                'loadTaskScheme'
+            ]),
+            useDefaultLogo () {
+                this.isShowDefaultLogo = true
+            },
+            async getTemplateList () {
+                this.templateLoading = true
+                try {
+                    const templateListData = await this.loadTemplateList()
+                    this.templateList = templateListData.objects
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.templateLoading = false
+                }
+            },
+            async getTemplateScheme () {
+                this.schemeLoading = true
+                try {
+                    const data = {
+                        cc_id: this.cc_id,
+                        template_id: this.appData.appTemplate
+                    }
+                    this.schemeList = await this.loadTaskScheme(data)
+                    this.schemeLoading = false
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onSelectTemplate (id, data) {
+                this.appData.appName = data.name
+                this.appTemplateEmpty = false
+            },
+            onOpenScheme (value) {
+                if (value && this.appData.appTemplate !== '') {
+                    this.getTemplateScheme()
+                }
+            },
+            onSelectScheme (id, data) {
+                this.appData.appScheme = Number(id)
+            },
+            // logo 上传
+            onLogoChange (e) {
+                const pic = e.target.files[0]
+                const size = pic.size
+                if (size > 1024000) {
+                    e.target.value = ''
+                    this.appData.appLogo = []
+                    this.$bkMessage({
+                        message: gettext('图片大小不能超过 100K'),
+                        theme: 'warning'
+                    })
+                } else {
+                    this.isLogoEmpty = false
+                    this.isShowDefaultLogo = false
+                    this.logoUrl = window.URL.createObjectURL(pic)
+                    this.appData.appLogo = pic
+                }
+            },
+            onConfirm () {
+                if (!this.appData.appTemplate) {
+                    this.appTemplateEmpty = true
+                    return
+                }
+                this.appData.appName = this.appData.appName.trim()
+                this.$validator.validateAll().then((result) => {
+                    if (!result) return
+                    this.$emit('onEditConfirm', this.appData)
                 })
-            } else {
-                this.isLogoEmpty = false
-                this.isShowDefaultLogo = false
-                this.logoUrl = window.URL.createObjectURL(pic)
-                this.appData.appLogo = pic
-            }
-        },
-        onConfirm () {
-            if (!this.appData.appTemplate) {
-                this.appTemplateEmpty = true
-                return
+            },
+            onCancel () {
+                this.$emit('onEditCancel')
             }
-            this.appData.appName = this.appData.appName.trim()
-            this.$validator.validateAll().then((result) => {
-                if (!result) return
-                this.$emit('onEditConfirm', this.appData)
-            })
-        },
-        onCancel () {
-            this.$emit('onEditCancel')
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/appmaker/AppTaskHome/index.vue b/pipeline/blueflow/src/pages/appmaker/AppTaskHome/index.vue
index b1e06482d9..f8d0326154 100644
--- a/pipeline/blueflow/src/pages/appmaker/AppTaskHome/index.vue
+++ b/pipeline/blueflow/src/pages/appmaker/AppTaskHome/index.vue
@@ -15,12 +15,12 @@
             <BaseTitle :title="i18n.taskRecord"></BaseTitle>
             <div class="operation-area clearfix">
                 <div class="appmaker-search">
-                    <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput"/>
+                    <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput" />
                     <i class="common-icon-search"></i>
                 </div>
             </div>
             <div class="appmaker-table-content">
-                <table v-bkloading="{isLoading: listLoading, opacity: 1}">
+                <table v-bkloading="{ isLoading: listLoading, opacity: 1 }">
                     <thead>
                         <tr>
                             <th class="appmaker-id">ID</th>
@@ -54,7 +54,7 @@
                         </tr>
                         <tr v-if="!appmakerList || !appmakerList.length" class="empty-tr">
                             <td colspan="8">
-                                <div class="empty-data"><NoData/></div>
+                                <div class="empty-data"><NoData /></div>
                             </td>
                         </tr>
                     </tbody>
@@ -75,190 +75,184 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseTitle from '@/components/common/base/BaseTitle.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-import toolsUtils from '@/utils/tools.js'
-export default {
-    name: 'appmakerTaskHome',
-    components: {
-        CopyrightFooter,
-        BaseTitle,
-        BaseSearch,
-        NoData
-    },
-    props: ['cc_id','app_id'],
-    data () {
-        return {
-            i18n: {
-                placeholder: gettext('请输入ID或流程名称'),
-                startedTime: gettext('执行开始'),
-                finishedTime: gettext('执行结束'),
-                name: gettext('任务名称'),
-                category: gettext('任务类型'),
-                creator: gettext('创建人'),
-                operator: gettext('执行人'),
-                status: gettext('状态'),
-                total: gettext("共"),
-                item: gettext("条记录"),
-                comma: gettext("，"),
-                currentPageTip: gettext("当前第"),
-                page: gettext("页"),
-                taskRecord: gettext('任务记录')
-            },
-            listLoading: true,
-            currentPage: 1,
-            totalPage: 1,
-            countPerPage: 15,
-            totalCount: 0,
-            isDeleteDialogShow: false,
-            theDeleteTemplateId: undefined,
-            pending: {
-                delete: false,
-                authority: false
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    import BaseTitle from '@/components/common/base/BaseTitle.vue'
+    import toolsUtils from '@/utils/tools.js'
+    export default {
+        name: 'appmakerTaskHome',
+        components: {
+            CopyrightFooter,
+            BaseTitle,
+            NoData
+        },
+        props: ['cc_id', 'app_id'],
+        data () {
+            return {
+                i18n: {
+                    placeholder: gettext('请输入ID或流程名称'),
+                    startedTime: gettext('执行开始'),
+                    finishedTime: gettext('执行结束'),
+                    name: gettext('任务名称'),
+                    category: gettext('任务类型'),
+                    creator: gettext('创建人'),
+                    operator: gettext('执行人'),
+                    status: gettext('状态'),
+                    total: gettext('共'),
+                    item: gettext('条记录'),
+                    comma: gettext('，'),
+                    currentPageTip: gettext('当前第'),
+                    page: gettext('页'),
+                    taskRecord: gettext('任务记录')
+                },
+                listLoading: true,
+                currentPage: 1,
+                totalPage: 1,
+                countPerPage: 15,
+                totalCount: 0,
+                isDeleteDialogShow: false,
+                theDeleteTemplateId: undefined,
+                pending: {
+                    delete: false,
+                    authority: false
+                },
+                searchStr: '',
+                appmakerList: [],
+                executeStatus: [] // 任务执行状态
+            }
+        },
+        computed: {
+        },
+        created () {
+            this.getAppmakerList()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
+        },
+        methods: {
+            ...mapActions('taskList/', [
+                'loadTaskList'
+            ]),
+            ...mapActions('task/', [
+                'getInstanceStatus'
+            ]),
+            async getAppmakerList () {
+                this.listLoading = true
+                try {
+                    const data = {
+                        limit: this.countPerPage,
+                        offset: (this.currentPage - 1) * this.countPerPage,
+                        create_method: 'app_maker',
+                        create_info: this.app_id,
+                        q: this.searchStr
+                    }
+                    const appmakerListData = await this.loadTaskList(data)
+                    const list = appmakerListData.objects
+                    this.appmakerList = list
+                    this.totalCount = appmakerListData.meta.total_count
+                    const totalPage = Math.ceil(this.totalCount / this.countPerPage)
+                    if (!totalPage) {
+                        this.totalPage = 1
+                    } else {
+                        this.totalPage = totalPage
+                    }
+                    this.executeStatus = list.map((item, index) => {
+                        const status = {}
+                        if (item.is_finished) {
+                            status.cls = 'finished bk-icon icon-check-circle-shape'
+                            status.text = gettext('完成')
+                        } else if (item.is_started) {
+                            status.cls = 'loading common-icon-loading'
+                            this.getExecuteDetail(item, index)
+                        } else {
+                            status.cls = 'created common-icon-dark-circle-shape'
+                            status.text = gettext('未执行')
+                        }
+                        return status
+                    })
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.listLoading = false
+                }
             },
-            searchStr: '',
-            appmakerList: [],
-            executeStatus: [] // 任务执行状态
-        }
-    },
-    computed: {
-    },
-    created () {
-        this.getAppmakerList()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        ...mapActions('taskList/', [
-            'loadTaskList'
-        ]),
-        ...mapActions('task/', [
-            'getInstanceStatus'
-        ]),
-        async getAppmakerList () {
-            this.listLoading = true
-            try {
+            async getExecuteDetail (task, index) {
                 const data = {
-                    limit: this.countPerPage,
-                    offset: (this.currentPage - 1) * this.countPerPage,
-                    create_method: 'app_maker',
-                    create_info: this.app_id,
-                    q: this.searchStr
-                }
-                const appmakerListData = await this.loadTaskList(data)
-                const list = appmakerListData.objects
-                this.appmakerList = list
-                this.totalCount = appmakerListData.meta.total_count
-                const totalPage = Math.ceil( this.totalCount / this.countPerPage)
-                if (!totalPage) {
-                    this.totalPage = 1
-                } else {
-                    this.totalPage = totalPage
+                    instance_id: task.id,
+                    cc_id: task.business.cc_id
                 }
-                this.executeStatus = list.map((item, index) => {
-                    const status = {}
-                    if (item.is_finished) {
-                        status.cls = 'finished bk-icon icon-check-circle-shape'
-                        status.text = gettext('完成')
-                    } else if (item.is_started) {
-                        status.cls = 'loading common-icon-loading'
-                        this.getExecuteDetail(item, index)
+                try {
+                    const detailInfo = await this.getInstanceStatus(data)
+                    if (detailInfo.result) {
+                        const state = detailInfo.data.state
+                        const status = {}
+                        switch (state) {
+                            case 'RUNNING':
+                            case 'BLOCKED':
+                                status.cls = 'running common-icon-dark-circle-ellipsis'
+                                status.text = gettext('执行中')
+                                break
+                            case 'SUSPENDED':
+                                status.cls = 'execute common-icon-dark-circle-pause'
+                                status.text = gettext('暂停')
+                                break
+                            case 'NODE_SUSPENDED':
+                                status.cls = 'execute'
+                                status.text = gettext('节点暂停')
+                                break
+                            case 'FAILED':
+                                status.cls = 'failed common-icon-dark-circle-close'
+                                status.text = gettext('失败')
+                                break
+                            case 'REVOKED':
+                                status.cls = 'revoke common-icon-dark-circle-shape'
+                                status.text = gettext('撤销')
+                                break
+                            default:
+                                status.text = gettext('未知')
+                        }
+                        this.executeStatus.splice(index, 1, status)
                     } else {
-                        status.cls = 'created common-icon-dark-circle-shape'
-                        status.text = gettext('未执行')
-                    }
-                    return status
-                })
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.listLoading = false
-            }
-        },
-        async getExecuteDetail (task, index) {
-            const data = {
-                instance_id: task.id,
-                cc_id: task.business.cc_id
-            }
-            try {
-                const detailInfo = await this.getInstanceStatus(data)
-                if (detailInfo.result) {
-                    const state = detailInfo.data.state
-                    const status = {}
-                    switch (state) {
-                        case 'RUNNING':
-                        case 'BLOCKED':
-                            status.cls = 'running common-icon-dark-circle-ellipsis'
-                            status.text = gettext('执行中')
-                            break
-                        case 'SUSPENDED':
-                            status.cls = 'execute common-icon-dark-circle-pause'
-                            status.text = gettext('暂停')
-                            break
-                        case 'NODE_SUSPENDED':
-                            status.cls = 'execute'
-                            status.text = gettext('节点暂停')
-                            break
-                        case 'FAILED':
-                            status.cls = 'failed common-icon-dark-circle-close'
-                            status.text = gettext('失败')
-                            break
-                        case 'REVOKED':
-                            status.cls = 'revoke common-icon-dark-circle-shape'
-                            status.text = gettext('撤销')
-                            break
-                        default:
-                            status.text = gettext('未知')
+                        errorHandler(detailInfo, this)
                     }
-                    this.executeStatus.splice(index, 1, status)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.getAppmakerList()
+            },
+            searchInputhandler () {
+                this.currentPage = 1
+                this.getAppmakerList()
+            },
+            statusMethod (is_started, is_finished) {
+                let status = ''
+                if (is_finished) {
+                    status = gettext('完成')
+                } else if (is_started) {
+                    status = gettext('执行中')
                 } else {
-                    errorHandler(detailInfo, this)
+                    status = gettext('未执行')
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.getAppmakerList()
-        },
-        searchInputhandler () {
-            this.currentPage = 1
-            this.getAppmakerList()
-        },
-        statusMethod (is_started, is_finished) {
-            var status = ''
-            if (is_finished) {
-                status = gettext('完成')
-            }
-            else if (is_started) {
-                status = gettext('执行中')
-            }
-            else {
-                status = gettext('未执行')
-            }
-            return status
-        },
-        statusClass (is_started, is_finished) {
-            var statusClass = ''
-            if (is_finished) {
-                statusClass = {success: true}
-            }
-            else if (is_started) {
-                statusClass = {warning: true}
-            }
-            else {
-                statusClass = {primary: true}
+                return status
+            },
+            statusClass (is_started, is_finished) {
+                let statusClass = ''
+                if (is_finished) {
+                    statusClass = { success: true }
+                } else if (is_started) {
+                    statusClass = { warning: true }
+                } else {
+                    statusClass = { primary: true }
+                }
+                return statusClass
             }
-            return statusClass
-        }
 
+        }
     }
-}
 </script>
 <style lang='scss' scoped>
 @import '@/scss/config.scss';
@@ -429,4 +423,3 @@ export default {
     color: #4a9bff;
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/appmaker/index.vue b/pipeline/blueflow/src/pages/appmaker/index.vue
index 94e345cdd9..9f0dba97e4 100644
--- a/pipeline/blueflow/src/pages/appmaker/index.vue
+++ b/pipeline/blueflow/src/pages/appmaker/index.vue
@@ -16,7 +16,7 @@
                 <bk-button type="primary" @click="onCreateApp">{{i18n.addApp}}</bk-button>
                 <BaseSearch
                     v-model="searchStr"
-                    :inputPlaceholader="i18n.placeholder"
+                    :input-placeholader="i18n.placeholder"
                     @onShow="onAdvanceShow"
                     @input="onSearchInput">
                 </BaseSearch>
@@ -26,17 +26,17 @@
                     <div class="advanced-query-content">
                         <div class="query-content">
                             <span class="query-span">{{i18n.creator}}</span>
-                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.creatorTime}}</span>
-                                <bk-date-range
-                                    :range-separator="'-'"
-                                    :quick-select="false"
-                                    :start-date.sync="editStartTime"
-                                    :end-date.sync="editEndTime"
-                                    @change="onChangeEditTime">
-                                </bk-date-range>
+                            <bk-date-range
+                                :range-separator="'-'"
+                                :quick-select="false"
+                                :start-date.sync="editStartTime"
+                                :end-date.sync="editEndTime"
+                                @change="onChangeEditTime">
+                            </bk-date-range>
                         </div>
                         <div class="query-button">
                             <div class="query-button">
@@ -47,15 +47,15 @@
                     </div>
                 </fieldset>
             </div>
-            <div v-bkloading="{isLoading: loading, opacity: 1}">
+            <div v-bkloading="{ isLoading: loading, opacity: 1 }">
                 <div v-if="appList.length" class="app-list clearfix">
                     <AppCard
                         v-for="item in appList"
                         :key="item.id"
-                        :appData="item"
+                        :app-data="item"
                         :cc_id="cc_id"
                         @onCardEdit="onCardEdit"
-                        @onCardDelete="onCardDelete"/>
+                        @onCardDelete="onCardDelete" />
                 </div>
                 <div v-else class="empty-app-list">
                     <NoData>
@@ -66,10 +66,10 @@
         </div>
         <AppEditDialog
             v-if="isEditDialogShow"
-            :isEditDialogShow="isEditDialogShow"
-            :isCreateNewApp="isCreateNewApp"
+            :is-edit-dialog-show="isEditDialogShow"
+            :is-create-new-app="isCreateNewApp"
             :cc_id="cc_id"
-            :currentAppData="currentAppData"
+            :current-app-data="currentAppData"
             @onEditConfirm="onEditConfirm"
             @onEditCancel="onEditCancel">
         </AppEditDialog>
@@ -83,194 +83,194 @@
             :is-show.sync="isDeleteDialogShow"
             @confirm="onDeleteConfirm"
             @cancel="onDeleteCancel">
-            <div slot="content" class="delete-tips" v-bkloading="{isLoading: pending.delete, opacity: 1}">
+            <div slot="content" class="delete-tips" v-bkloading="{ isLoading: pending.delete, opacity: 1 }">
                 {{i18n.deleteTips}}
             </div>
         </bk-dialog>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions, mapState } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import toolsUtils from '@/utils/tools.js'
-import NoData from '@/components/common/base/NoData.vue'
-import AppCard from './AppCard.vue'
-import AppEditDialog from './AppEditDialog.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-// moment用于时区使用
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import { mapActions, mapState } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import toolsUtils from '@/utils/tools.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import AppCard from './AppCard.vue'
+    import AppEditDialog from './AppEditDialog.vue'
+    import BaseSearch from '@/components/common/base/BaseSearch.vue'
+    // moment用于时区使用
+    import moment from 'moment-timezone'
 
-export default {
-    name: 'AppMaker',
-    components: {
-        AppCard,
-        NoData,
-        AppEditDialog,
-        BaseSearch
-    },
-    props: ['cc_id', 'common'],
-    data () {
-        return {
-            loading: true,
-            list: [],
-            searchMode: false,
-            searchList: [],
-            searchStr: '',
-            currentAppData: undefined,
-            isCreateNewApp: false,
-            isEditDialogShow: false,
-            isDeleteDialogShow: false,
-            isAdvancedSerachShow: false,
-            creator: undefined,
-            editStartTime: undefined,
-            editEndTime: undefined,
-            pending: {
-                edit: false,
-                delete: false
-            },
-            i18n: {
-                addApp: gettext('新建轻应用'),
-                placeholder: gettext('请输入轻应用名称'),
-                delete: gettext('删除'),
-                deleteTips: gettext('确认删除轻应用？'),
-                creator: gettext('创建人'),
-                creatorPlaceholder: gettext('请输入创建人'),
-                creatorTime: gettext('创建时间'),
-                query: gettext('搜索'),
-                reset: gettext('清空')
-            }
-        }
-    },
-    computed: {
-        ...mapState({
-            'businessTimezone': state => state.businessTimezone
-        }),
-        appList () {
-            return this.searchMode ? this.searchList : this.list
+    export default {
+        name: 'AppMaker',
+        components: {
+            AppCard,
+            NoData,
+            AppEditDialog,
+            BaseSearch
         },
-        emptyTips () {
-            return this.searchMode ? gettext('未找到相关轻应用') : gettext('暂未添加轻应用')
-        }
-    },
-    created () {
-        this.loadData()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        ...mapActions('appmaker', [
-            'loadAppmaker',
-            'appmakerEdit',
-            'appmakerDelete'
-        ]),
-        async loadData () {
-            this.loading = true
-
-            if (this.editStartTime === '') {
-                this.editStartTime = undefined
-            }
-
-            try {
-                const data = {
-                    creator: this.creator || undefined
-                }
-                if (this.editEndTime) {
-                    data['create_time__gte'] = moment.tz(this.editStartTime, this.businessTimezone).format('YYYY-MM-DD')
-                    data['create_time__lte'] = moment.tz(this.editEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
+        props: ['cc_id', 'common'],
+        data () {
+            return {
+                loading: true,
+                list: [],
+                searchMode: false,
+                searchList: [],
+                searchStr: '',
+                currentAppData: undefined,
+                isCreateNewApp: false,
+                isEditDialogShow: false,
+                isDeleteDialogShow: false,
+                isAdvancedSerachShow: false,
+                creator: undefined,
+                editStartTime: undefined,
+                editEndTime: undefined,
+                pending: {
+                    edit: false,
+                    delete: false
+                },
+                i18n: {
+                    addApp: gettext('新建轻应用'),
+                    placeholder: gettext('请输入轻应用名称'),
+                    delete: gettext('删除'),
+                    deleteTips: gettext('确认删除轻应用？'),
+                    creator: gettext('创建人'),
+                    creatorPlaceholder: gettext('请输入创建人'),
+                    creatorTime: gettext('创建时间'),
+                    query: gettext('搜索'),
+                    reset: gettext('清空')
                 }
-                const resp = await this.loadAppmaker(data)
-                this.list = resp.objects
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
             }
         },
-        searchInputhandler () {
-            if (this.searchStr.length) {
-                this.searchMode = true
-                const reg = new RegExp(this.searchStr, 'i')
-                this.searchList = this.list.filter(item => {
-                    return reg.test(item.name)
-                })
-            } else {
-                this.searchMode = false
-                this.searchList = []
-            }
-        },
-        onCreateApp () {
-            this.isEditDialogShow = true
-            this.isCreateNewApp = true
-            this.currentAppData = undefined
-        },
-        onCardEdit (app) {
-            this.isEditDialogShow = true
-            this.isCreateNewApp = false
-            this.currentAppData = app
-        },
-        onCardDelete (app) {
-            this.isDeleteDialogShow = true
-            this.currentAppData = app
-        },
-        async onDeleteConfirm () {
-            if (this.pending.delete) return
-            this.pending.delete = true
-            this.isDeleteDialogShow = false
-            try {
-                await this.appmakerDelete(this.currentAppData.id)
-                this.loadData()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.delete = false
+        computed: {
+            ...mapState({
+                'businessTimezone': state => state.businessTimezone
+            }),
+            appList () {
+                return this.searchMode ? this.searchList : this.list
+            },
+            emptyTips () {
+                return this.searchMode ? gettext('未找到相关轻应用') : gettext('暂未添加轻应用')
             }
         },
-        onDeleteCancel () {
-            this.isDeleteDialogShow = false
+        created () {
+            this.loadData()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
         },
-        async onEditConfirm (app) {
-            if (this.pending.edit) return
-            this.pending.edit = true
-            const id = this.isCreateNewApp ? '0' : this.currentAppData.id
-            try {
-                const formData = new FormData()
-                formData.append('id', id)
-                formData.append('template_id', app.appTemplate)
-                formData.append('name', app.appName)
-                formData.append('template_scheme_id', app.appScheme)
-                formData.append('desc', app.appDesc)
-                formData.append('logo', app.appLogo)
-                const resp = await this.appmakerEdit(formData)
-                if (resp.result) {
-                    this.isEditDialogShow = false
-                    this.loadData()
+        methods: {
+            ...mapActions('appmaker', [
+                'loadAppmaker',
+                'appmakerEdit',
+                'appmakerDelete'
+            ]),
+            async loadData () {
+                this.loading = true
+
+                if (this.editStartTime === '') {
+                    this.editStartTime = undefined
+                }
+
+                try {
+                    const data = {
+                        creator: this.creator || undefined
+                    }
+                    if (this.editEndTime) {
+                        data['create_time__gte'] = moment.tz(this.editStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                        data['create_time__lte'] = moment.tz(this.editEndTime, this.businessTimezone).add('1', 'd').format('YYYY-MM-DD')
+                    }
+                    const resp = await this.loadAppmaker(data)
+                    this.list = resp.objects
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.loading = false
+                }
+            },
+            searchInputhandler () {
+                if (this.searchStr.length) {
+                    this.searchMode = true
+                    const reg = new RegExp(this.searchStr, 'i')
+                    this.searchList = this.list.filter(item => {
+                        return reg.test(item.name)
+                    })
                 } else {
-                    errorHandler(resp, this)
+                    this.searchMode = false
+                    this.searchList = []
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.edit = false
+            },
+            onCreateApp () {
+                this.isEditDialogShow = true
+                this.isCreateNewApp = true
+                this.currentAppData = undefined
+            },
+            onCardEdit (app) {
+                this.isEditDialogShow = true
+                this.isCreateNewApp = false
+                this.currentAppData = app
+            },
+            onCardDelete (app) {
+                this.isDeleteDialogShow = true
+                this.currentAppData = app
+            },
+            async onDeleteConfirm () {
+                if (this.pending.delete) return
+                this.pending.delete = true
+                this.isDeleteDialogShow = false
+                try {
+                    await this.appmakerDelete(this.currentAppData.id)
+                    this.loadData()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.delete = false
+                }
+            },
+            onDeleteCancel () {
+                this.isDeleteDialogShow = false
+            },
+            async onEditConfirm (app) {
+                if (this.pending.edit) return
+                this.pending.edit = true
+                const id = this.isCreateNewApp ? '0' : this.currentAppData.id
+                try {
+                    const formData = new FormData()
+                    formData.append('id', id)
+                    formData.append('template_id', app.appTemplate)
+                    formData.append('name', app.appName)
+                    formData.append('template_scheme_id', app.appScheme)
+                    formData.append('desc', app.appDesc)
+                    formData.append('logo', app.appLogo)
+                    const resp = await this.appmakerEdit(formData)
+                    if (resp.result) {
+                        this.isEditDialogShow = false
+                        this.loadData()
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.edit = false
+                }
+            },
+            onEditCancel () {
+                this.isEditDialogShow = false
+            },
+            onAdvanceShow () {
+                this.isAdvancedSerachShow = !this.isAdvancedSerachShow
+            },
+            onChangeEditTime (oldValue, newValue) {
+                const dateArray = newValue.split(' - ')
+                this.editStartTime = dateArray[0]
+                this.editEndTime = dateArray[1]
+            },
+            onResetForm () {
+                this.creator = undefined
+                this.editStartTime = undefined
+                this.editEndTime = undefined
             }
-        },
-        onEditCancel () {
-            this.isEditDialogShow = false
-        },
-        onAdvanceShow () {
-            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
-        },
-        onChangeEditTime (oldValue, newValue) {
-            const dateArray = newValue.split(' - ')
-            this.editStartTime = dateArray[0]
-            this.editEndTime = dateArray[1]
-        },
-        onResetForm () {
-            this.creator = undefined
-            this.editStartTime = undefined
-            this.editEndTime = undefined
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -466,5 +466,3 @@ export default {
     margin: 0px;
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/audit/index.vue b/pipeline/blueflow/src/pages/audit/index.vue
index 0804f3298a..5ce75f1010 100644
--- a/pipeline/blueflow/src/pages/audit/index.vue
+++ b/pipeline/blueflow/src/pages/audit/index.vue
@@ -15,7 +15,7 @@
             <BaseTitle :title="i18n.auditList"></BaseTitle>
             <BaseSearch
                 v-model="searchStr"
-                :inputPlaceholader="i18n.placeholder"
+                :input-placeholader="i18n.placeholder"
                 @onShow="onAdvanceShow"
                 @input="onSearchInput">
             </BaseSearch>
@@ -64,11 +64,11 @@
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.creator}}</span>
-                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.operator}}</span>
-                            <input class="search-input" v-model="executor" :placeholder="i18n.executorPlaceholder"/>
+                            <input class="search-input" v-model="executor" :placeholder="i18n.executorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.status}}</span>
@@ -90,7 +90,7 @@
                 </fieldset>
             </div>
             <div class="audit-table-content">
-                <table v-bkloading="{isLoading: listLoading, opacity: 1}">
+                <table v-bkloading="{ isLoading: listLoading, opacity: 1 }">
                     <thead>
                         <tr>
                             <th class="audit-id">ID</th>
@@ -135,7 +135,7 @@
                         </tr>
                         <tr v-if="!auditList || !auditList.length" class="empty-tr">
                             <td colspan="10">
-                                <div class="empty-data"><NoData/></div>
+                                <div class="empty-data"><NoData /></div>
                             </td>
                         </tr>
                     </tbody>
@@ -156,278 +156,278 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseTitle from '@/components/common/base/BaseTitle.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-import toolsUtils from '@/utils/tools.js'
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    import BaseTitle from '@/components/common/base/BaseTitle.vue'
+    import BaseSearch from '@/components/common/base/BaseSearch.vue'
+    import toolsUtils from '@/utils/tools.js'
+    import moment from 'moment-timezone'
 
-export default {
-    name: 'auditTaskHome',
-    components: {
-        CopyrightFooter,
-        BaseTitle,
-        BaseSearch,
-        NoData
-    },
-    data () {
-        return {
-            i18n: {
-                auditList: gettext('审计中心'),
-                placeholder: gettext('请输入ID或流程名称'),
-                business: gettext('所属业务'),
-                startedTime: gettext('执行开始'),
-                finishedTime: gettext('执行结束'),
-                name: gettext('任务名称'),
-                category: gettext('任务类型'),
-                creator: gettext('创建人'),
-                operator: gettext('执行人'),
-                status: gettext('状态'),
-                operation: gettext('操作'),
-                view: gettext('查看'),
-                total: gettext('共'),
-                item: gettext('条记录'),
-                comma: gettext('，'),
-                currentPageTip: gettext('当前第'),
-                page: gettext('页'),
-                executing: gettext('执行中'),
-                pauseState: gettext('暂停'),
-                taskType: gettext('任务分类'),
-                query: gettext('搜索'),
-                reset: gettext('清空'),
-                taskTypePlaceholder: gettext('请选择分类'),
-                creatorPlaceholder: gettext('请输入创建人'),
-                executorPlaceholder: gettext('请输入执行人'),
-                statusPlaceholder: gettext('请选择状态')
+    export default {
+        name: 'auditTaskHome',
+        components: {
+            CopyrightFooter,
+            BaseTitle,
+            BaseSearch,
+            NoData
+        },
+        data () {
+            return {
+                i18n: {
+                    auditList: gettext('审计中心'),
+                    placeholder: gettext('请输入ID或流程名称'),
+                    business: gettext('所属业务'),
+                    startedTime: gettext('执行开始'),
+                    finishedTime: gettext('执行结束'),
+                    name: gettext('任务名称'),
+                    category: gettext('任务类型'),
+                    creator: gettext('创建人'),
+                    operator: gettext('执行人'),
+                    status: gettext('状态'),
+                    operation: gettext('操作'),
+                    view: gettext('查看'),
+                    total: gettext('共'),
+                    item: gettext('条记录'),
+                    comma: gettext('，'),
+                    currentPageTip: gettext('当前第'),
+                    page: gettext('页'),
+                    executing: gettext('执行中'),
+                    pauseState: gettext('暂停'),
+                    taskType: gettext('任务分类'),
+                    query: gettext('搜索'),
+                    reset: gettext('清空'),
+                    taskTypePlaceholder: gettext('请选择分类'),
+                    creatorPlaceholder: gettext('请输入创建人'),
+                    executorPlaceholder: gettext('请输入执行人'),
+                    statusPlaceholder: gettext('请选择状态')
+                },
+                taskBasicInfoLoading: true,
+                listLoading: true,
+                isAdvancedSerachShow: false,
+                currentPage: 1,
+                selectedCcId: -1,
+                totalPage: 1,
+                countPerPage: 15,
+                totalCount: 0,
+                taskSync: 0,
+                statusSync: 0,
+                searchStr: '',
+                bizCcId: undefined,
+                creator: undefined,
+                executor: undefined,
+                activeTaskCategory: undefined,
+                executeStartTime: undefined,
+                executeEndTime: undefined,
+                isStarted: undefined,
+                isFinished: undefined,
+                business: {
+                    list: [],
+                    loading: false,
+                    id: null,
+                    searchable: true,
+                    empty: false
+                },
+                auditList: [],
+                taskCategory: [],
+                statusList: [
+                    { 'id': 'nonExecution', 'name': gettext('未执行') },
+                    { 'id': 'runing', 'name': gettext('未完成') },
+                    { 'id': 'finished', 'name': gettext('完成') }
+                ],
+                executeStatus: [] // 任务执行态
+            }
+        },
+        created () {
+            this.loadFunctionTask()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
+            this.getBusinessList()
+            this.getBusinessBaseInfo()
+        },
+        methods: {
+            ...mapActions('auditTask/', [
+                'loadAuditTaskList'
+            ]),
+            ...mapActions('functionTask/', [
+                'loadFunctionBusinessList'
+            ]),
+            ...mapActions('task/', [
+                'getInstanceStatus'
+            ]),
+            ...mapActions('template/', [
+                'loadBusinessBaseInfo'
+            ]),
+            async loadFunctionTask () {
+                this.listLoading = true
+                try {
+                    const data = {
+                        limit: this.countPerPage,
+                        offset: (this.currentPage - 1) * this.countPerPage,
+                        business__cc_id: this.bizCcId,
+                        category: this.activeTaskCategory,
+                        audit__pipeline_instance__name__contains: this.searchStr,
+                        pipeline_instance__is_started: this.isStarted,
+                        pipeline_instance__is_finished: this.isFinished,
+                        pipeline_instance__creator__contains: this.creator,
+                        pipeline_instance__executor__contains: this.executor
+                    }
+                    if (this.executeEndTime) {
+                        if (this.common) {
+                            data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
+                            data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1', 'd').format('YYYY-MM-DD')
+                        } else {
+                            data['pipeline_instance__start_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                            data['pipeline_instance__start_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1', 'd').format('YYYY-MM-DD')
+                        }
+                    }
+                    const auditListData = await this.loadAuditTaskList(data)
+                    const list = auditListData.objects
+                    this.auditList = list
+                    this.totalCount = auditListData.meta.total_count
+                    const totalPage = Math.ceil(this.totalCount / this.countPerPage)
+                    if (!totalPage) {
+                        this.totalPage = 1
+                    } else {
+                        this.totalPage = totalPage
+                    }
+                    this.executeStatus = list.map((item, index) => {
+                        const status = {}
+                        if (item.is_finished) {
+                            status.cls = 'finished bk-icon icon-check-circle-shape'
+                            status.text = gettext('完成')
+                        } else if (item.is_started) {
+                            status.cls = 'loading common-icon-loading'
+                            this.getExecuteDetail(item, index)
+                        } else {
+                            status.cls = 'created common-icon-dark-circle-shape'
+                            status.text = gettext('未执行')
+                        }
+                        return status
+                    })
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.listLoading = false
+                }
             },
-            taskBasicInfoLoading: true,
-            listLoading: true,
-            isAdvancedSerachShow: false,
-            currentPage: 1,
-            selectedCcId: -1,
-            totalPage: 1,
-            countPerPage: 15,
-            totalCount: 0,
-            taskSync: 0,
-            statusSync: 0,
-            searchStr: '',
-            bizCcId: undefined,
-            creator: undefined,
-            executor: undefined,
-            activeTaskCategory: undefined,
-            executeStartTime: undefined,
-            executeEndTime: undefined,
-            isStarted: undefined,
-            isFinished: undefined,
-            business: {
-                list: [],
-                loading: false,
-                id: null,
-                searchable: true,
-                empty: false
+            onPageChange (page) {
+                this.currentPage = page
+                this.loadFunctionTask()
             },
-            auditList: [],
-            taskCategory: [],
-            statusList: [
-                {'id': 'nonExecution', 'name': gettext('未执行')},
-                {'id': 'runing', 'name': gettext('未完成')},
-                {'id': 'finished', 'name': gettext('完成')}
-            ],
-            executeStatus: [] // 任务执行态
-        }
-    },
-    created () {
-        this.loadFunctionTask()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-        this.getBusinessList()
-        this.getBusinessBaseInfo()
-    },
-    methods: {
-        ...mapActions('auditTask/', [
-            'loadAuditTaskList'
-        ]),
-        ...mapActions('functionTask/', [
-            'loadFunctionBusinessList'
-        ]),
-        ...mapActions('task/', [
-            'getInstanceStatus'
-        ]),
-        ...mapActions('template/', [
-            'loadBusinessBaseInfo'
-        ]),
-        async loadFunctionTask () {
-            this.listLoading = true
-            try {
+            searchInputhandler () {
+                this.currentPage = 1
+                this.loadFunctionTask()
+            },
+            async getExecuteDetail (task, index) {
                 const data = {
-                    limit: this.countPerPage,
-                    offset: (this.currentPage - 1) * this.countPerPage,
-                    business__cc_id: this.bizCcId,
-                    category: this.activeTaskCategory,
-                    audit__pipeline_instance__name__contains: this.searchStr,
-                    pipeline_instance__is_started: this.isStarted,
-                    pipeline_instance__is_finished: this.isFinished,
-                    pipeline_instance__creator__contains: this.creator,
-                    pipeline_instance__executor__contains: this.executor
+                    instance_id: task.id,
+                    cc_id: task.business.cc_id
                 }
-                if (this.executeEndTime) {
-                    if (this.common) {
-                        data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
-                        data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1','d').format('YYYY-MM-DD')
+                try {
+                    const detailInfo = await this.getInstanceStatus(data)
+                    if (detailInfo.result) {
+                        const state = detailInfo.data.state
+                        const status = {}
+                        switch (state) {
+                            case 'RUNNING':
+                            case 'BLOCKED':
+                                status.cls = 'running common-icon-dark-circle-ellipsis'
+                                status.text = gettext('执行中')
+                                break
+                            case 'SUSPENDED':
+                                status.cls = 'execute common-icon-dark-circle-pause'
+                                status.text = gettext('暂停')
+                                break
+                            case 'NODE_SUSPENDED':
+                                status.cls = 'execute'
+                                status.text = gettext('节点暂停')
+                                break
+                            case 'FAILED':
+                                status.cls = 'failed common-icon-dark-circle-close'
+                                status.text = gettext('失败')
+                                break
+                            case 'REVOKED':
+                                status.cls = 'revoke common-icon-dark-circle-shape'
+                                status.text = gettext('撤销')
+                                break
+                            default:
+                                status.text = gettext('未知')
+                        }
+                        this.executeStatus.splice(index, 1, status)
                     } else {
-                        data['pipeline_instance__start_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
-                        data['pipeline_instance__start_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
+                        errorHandler(detailInfo, this)
                     }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-                const auditListData = await this.loadAuditTaskList(data)
-                const list = auditListData.objects
-                this.auditList = list
-                this.totalCount = auditListData.meta.total_count
-                const totalPage = Math.ceil( this.totalCount / this.countPerPage)
-                if (!totalPage) {
-                    this.totalPage = 1
-                } else {
-                    this.totalPage = totalPage
+            },
+            async getBusinessList () {
+                this.business.loading = true
+                try {
+                    const businessData = await this.loadFunctionBusinessList()
+                    this.business.list = businessData.objects
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.business.loading = false
                 }
-                this.executeStatus = list.map((item, index) => {
-                    const status = {}
-                    if (item.is_finished) {
-                        status.cls = 'finished bk-icon icon-check-circle-shape'
-                        status.text = gettext('完成')
-                    } else if (item.is_started) {
-                        status.cls = 'loading common-icon-loading'
-                        this.getExecuteDetail(item, index)
-                    } else {
-                        status.cls = 'created common-icon-dark-circle-shape'
-                        status.text = gettext('未执行')
-                    }
-                    return status
-                })
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.listLoading = false
-            }
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.loadFunctionTask()
-        },
-        searchInputhandler () {
-            this.currentPage = 1
-            this.loadFunctionTask()
-        },
-        async getExecuteDetail (task, index) {
-            const data = {
-                instance_id: task.id,
-                cc_id: task.business.cc_id
-            }
-            try {
-                const detailInfo = await this.getInstanceStatus(data)
-                if (detailInfo.result) {
-                    const state = detailInfo.data.state
-                    const status = {}
-                    switch (state) {
-                        case 'RUNNING':
-                        case 'BLOCKED':
-                            status.cls = 'running common-icon-dark-circle-ellipsis'
-                            status.text = gettext('执行中')
-                            break
-                        case 'SUSPENDED':
-                            status.cls = 'execute common-icon-dark-circle-pause'
-                            status.text = gettext('暂停')
-                            break
-                        case 'NODE_SUSPENDED':
-                            status.cls = 'execute'
-                            status.text = gettext('节点暂停')
-                            break
-                        case 'FAILED':
-                            status.cls = 'failed common-icon-dark-circle-close'
-                            status.text = gettext('失败')
-                            break
-                        case 'REVOKED':
-                            status.cls = 'revoke common-icon-dark-circle-shape'
-                            status.text = gettext('撤销')
-                            break
-                        default:
-                            status.text = gettext('未知')
-                    }
-                    this.executeStatus.splice(index, 1, status)
-                } else {
-                    errorHandler(detailInfo, this)
+            },
+            async getBusinessBaseInfo () {
+                this.taskBasicInfoLoading = true
+                try {
+                    const data = await this.loadBusinessBaseInfo()
+                    this.taskCategory = data.task_categories
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.taskBasicInfoLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async getBusinessList () {
-            this.business.loading = true
-            try {
-                let businessData = await this.loadFunctionBusinessList()
-                this.business.list = businessData.objects
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.business.loading = false
-            }
-        },
-        async getBusinessBaseInfo () {
-            this.taskBasicInfoLoading = true
-            try {
-                const data = await this.loadBusinessBaseInfo()
-                this.taskCategory = data.task_categories
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.taskBasicInfoLoading = false
-            }
-        },
-        onAdvanceShow () {
-            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
-        },
-        onChangeExecuteTime (oldValue, newValue) {
-            const timeArray = newValue.split(" - ")
-            this.executeStartTime = timeArray[0]
-            this.executeEndTime = timeArray[1]
-        },
-        onClearCategory (){
-            this.activeTaskCategory = undefined
-        },
-        onSelectedCategory (name, value) {
-            this.activeTaskCategory = name
-        },
-        onResetForm () {
-            this.isStarted = undefined
-            this.isFinished = undefined
-            this.creator = undefined
-            this.executor = undefined
-            this.searchStr = undefined
-            this.statusSync = 0
-            this.selectedCcId = 0
-            this.taskSync = 0
-            this.activeTaskCategory = undefined
-            this.executeStartTime = undefined
-            this.executeEndTime = undefined
-        },
-        onSelectedStatus (id, name) {
-            this.isStarted = id !== 'nonExecution'
-            this.isFinished = id === 'finished'
-        },
-        onClearStatus () {
-            this.isStarted = undefined
-            this.isFinished = undefined
-        },
-        onSelectedBizCcId (name, value) {
-            if (this.bizCcId === name) {
-                return
+            },
+            onAdvanceShow () {
+                this.isAdvancedSerachShow = !this.isAdvancedSerachShow
+            },
+            onChangeExecuteTime (oldValue, newValue) {
+                const timeArray = newValue.split(' - ')
+                this.executeStartTime = timeArray[0]
+                this.executeEndTime = timeArray[1]
+            },
+            onClearCategory () {
+                this.activeTaskCategory = undefined
+            },
+            onSelectedCategory (name, value) {
+                this.activeTaskCategory = name
+            },
+            onResetForm () {
+                this.isStarted = undefined
+                this.isFinished = undefined
+                this.creator = undefined
+                this.executor = undefined
+                this.searchStr = undefined
+                this.statusSync = 0
+                this.selectedCcId = 0
+                this.taskSync = 0
+                this.activeTaskCategory = undefined
+                this.executeStartTime = undefined
+                this.executeEndTime = undefined
+            },
+            onSelectedStatus (id, name) {
+                this.isStarted = id !== 'nonExecution'
+                this.isFinished = id === 'finished'
+            },
+            onClearStatus () {
+                this.isStarted = undefined
+                this.isFinished = undefined
+            },
+            onSelectedBizCcId (name, value) {
+                if (this.bizCcId === name) {
+                    return
+                }
+                this.bizCcId = name
             }
-            this.bizCcId = name
         }
     }
-}
 </script>
 <style lang='scss'>
 @import '@/scss/config.scss';
@@ -711,4 +711,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/config/index.vue b/pipeline/blueflow/src/pages/config/index.vue
index 97e2f45434..3f09916a36 100644
--- a/pipeline/blueflow/src/pages/config/index.vue
+++ b/pipeline/blueflow/src/pages/config/index.vue
@@ -13,11 +13,11 @@
     <div class="config-page">
         <div class="page-container">
             <h3 class="page-title">{{i18n.title}}</h3>
-            <div class="page-content" v-bkloading="{isLoading: configLoading, opacity: 1}">
+            <div class="page-content" v-bkloading="{ isLoading: configLoading, opacity: 1 }">
                 <div class="common-form-item">
                     <label>{{i18n.executorLabel}}</label>
                     <div class="common-form-content">
-                        <BaseInput v-model="executor"/>
+                        <BaseInput v-model="executor" />
                         <bk-tooltip placement="right" width="400" class="desc-tooltip">
                             <i class="bk-icon icon-info-circle"></i>
                             <div slot="content" style="white-space: normal;">
@@ -50,85 +50,85 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import BaseInput from '@/components/common/base/BaseInput.vue'
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
 
-export default {
-    name: 'configPage',
-    components: {
-        BaseInput
-    },
-    data () {
-        return {
-            executor: undefined,
-            pending: false,
-            alwaysUseExecutor: false,
-            configLoading: false,
-            i18n: {
-                title: gettext('执行者配置'),
-                executorLabel: gettext('任务执行者'),
-                alwaysUseExecutorLabel: gettext('强制生效'),
-                executorTips: gettext('该字段默认在非运维人员执行任务时生效，为空则从配置平台(CMDB)随机获取运维身份'),
-                alwaysUseTips: gettext('开启后，所有任务都使用任务执行者身份来执行'),
-                save: gettext("保存")
-            }
-        }
-    },
-    created () {
-        this.getConfig()
-    },
-    methods: {
-        ...mapActions('config/', [
-            'loadBizConfig',
-            'configBizExecutor'
-        ]),
-        async getConfig () {
-            this.configLoading = true
-            try {
-                const resp = await this.loadBizConfig()
-                if (resp.result) {
-                    this.executor = resp.data.executor
-                    this.alwaysUseExecutor = resp.data.always_use_executor
-                } else {
-                    errorHandler(resp, this)
+    export default {
+        name: 'configPage',
+        components: {
+            BaseInput
+        },
+        data () {
+            return {
+                executor: undefined,
+                pending: false,
+                alwaysUseExecutor: false,
+                configLoading: false,
+                i18n: {
+                    title: gettext('执行者配置'),
+                    executorLabel: gettext('任务执行者'),
+                    alwaysUseExecutorLabel: gettext('强制生效'),
+                    executorTips: gettext('该字段默认在非运维人员执行任务时生效，为空则从配置平台(CMDB)随机获取运维身份'),
+                    alwaysUseTips: gettext('开启后，所有任务都使用任务执行者身份来执行'),
+                    save: gettext('保存')
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.configLoading = false
             }
         },
-        async onSaveConfig () {
-            if (this.pending) return
-            this.pending = true
-            this.executor = this.executor.trim()
-            try {
-                const data = {
-                    executor: this.executor,
-                    always_use_executor: this.alwaysUseExecutor
+        created () {
+            this.getConfig()
+        },
+        methods: {
+            ...mapActions('config/', [
+                'loadBizConfig',
+                'configBizExecutor'
+            ]),
+            async getConfig () {
+                this.configLoading = true
+                try {
+                    const resp = await this.loadBizConfig()
+                    if (resp.result) {
+                        this.executor = resp.data.executor
+                        this.alwaysUseExecutor = resp.data.always_use_executor
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.configLoading = false
                 }
-                const resp = await this.configBizExecutor(data)
-                if (resp.result) {
-                    this.$bkMessage({
-                        message: gettext('保存成功'),
-                        theme: 'success'
-                    })
-                } else {
-                    errorHandler(resp, this)
+            },
+            async onSaveConfig () {
+                if (this.pending) return
+                this.pending = true
+                this.executor = this.executor.trim()
+                try {
+                    const data = {
+                        executor: this.executor,
+                        always_use_executor: this.alwaysUseExecutor
+                    }
+                    const resp = await this.configBizExecutor(data)
+                    if (resp.result) {
+                        this.$bkMessage({
+                            message: gettext('保存成功'),
+                            theme: 'success'
+                        })
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending = false
+            },
+            onSwitchChange (selected) {
+                this.alwaysUseExecutor = selected
             }
-        },
-        onSwitchChange (selected) {
-            this.alwaysUseExecutor = selected
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -182,5 +182,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/error/index.vue b/pipeline/blueflow/src/pages/error/index.vue
index 2923e1a3e2..0af71ab789 100644
--- a/pipeline/blueflow/src/pages/error/index.vue
+++ b/pipeline/blueflow/src/pages/error/index.vue
@@ -18,41 +18,41 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import ErrorCode401 from '@/components/common/modal/ErrorCode401.vue'
-import ErrorCode403 from '@/components/common/modal/ErrorCode403.vue'
-import ErrorCode405 from '@/components/common/modal/ErrorCode405.vue'
-import ErrorCode406 from '@/components/common/modal/ErrorCode406.vue'
-import ErrorCode500 from '@/components/common/modal/ErrorCode500.vue'
-export default {
-    name: 'ErrorPage',
-    components: {
-        ErrorCode401,
-        ErrorCode403,
-        ErrorCode405,
-        ErrorCode406,
-        ErrorCode500
-    },
-    props: ['code'],
-    data () {
-        return {
-            errorModal: `ErrorCode${this.code}`,
-            expPic401: require('@/assets/images/expre_401.png'),
-            expPic403: require('@/assets/images/expre_403.png'),
-            expPic500: require('@/assets/images/expre_500.png')
-        }
-    },
-    computed: {
-        errorPic () {
-            if (this.code === '500') {
-                return this.expPic500
-            } else if (this.code === '401') {
-                return this.expPic401
+    import '@/utils/i18n.js'
+    import ErrorCode401 from '@/components/common/modal/ErrorCode401.vue'
+    import ErrorCode403 from '@/components/common/modal/ErrorCode403.vue'
+    import ErrorCode405 from '@/components/common/modal/ErrorCode405.vue'
+    import ErrorCode406 from '@/components/common/modal/ErrorCode406.vue'
+    import ErrorCode500 from '@/components/common/modal/ErrorCode500.vue'
+    export default {
+        name: 'ErrorPage',
+        components: {
+            ErrorCode401,
+            ErrorCode403,
+            ErrorCode405,
+            ErrorCode406,
+            ErrorCode500
+        },
+        props: ['code'],
+        data () {
+            return {
+                errorModal: `ErrorCode${this.code}`,
+                expPic401: require('@/assets/images/expre_401.png'),
+                expPic403: require('@/assets/images/expre_403.png'),
+                expPic500: require('@/assets/images/expre_500.png')
+            }
+        },
+        computed: {
+            errorPic () {
+                if (this.code === '500') {
+                    return this.expPic500
+                } else if (this.code === '401') {
+                    return this.expPic401
+                }
+                return this.expPic403
             }
-            return this.expPic403
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .error-page {
diff --git a/pipeline/blueflow/src/pages/functor/index.vue b/pipeline/blueflow/src/pages/functor/index.vue
index f39db6e573..a7d5819135 100644
--- a/pipeline/blueflow/src/pages/functor/index.vue
+++ b/pipeline/blueflow/src/pages/functor/index.vue
@@ -15,7 +15,7 @@
             <BaseTitle :title="i18n.functorList"></BaseTitle>
             <BaseSearch
                 v-model="searchStr"
-                :inputPlaceholader="i18n.placeholder"
+                :input-placeholader="i18n.placeholder"
                 @onShow="onAdvanceShow"
                 @input="onSearchInput">
             </BaseSearch>
@@ -49,7 +49,7 @@
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.creator}}</span>
-                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.status}}</span>
@@ -71,7 +71,7 @@
                 </fieldset>
             </div>
             <div class="functor-table-content">
-                <table v-bkloading="{isLoading: listLoading, opacity: 1}">
+                <table v-bkloading="{ isLoading: listLoading, opacity: 1 }">
                     <thead>
                         <tr>
                             <th class="functor-id">ID</th>
@@ -119,7 +119,7 @@
                         </tr>
                         <tr v-if="!functorList || !functorList.length" class="empty-tr">
                             <td colspan="9">
-                                <div class="empty-data"><NoData/></div>
+                                <div class="empty-data"><NoData /></div>
                             </td>
                         </tr>
                     </tbody>
@@ -176,7 +176,7 @@
                             :selected.sync="template.selected"
                             :setting-key="'id'"
                             :display-key="'name'"
-                            :has-children='true'
+                            :has-children="true"
                             :is-loading="template.loading"
                             :searchable="template.searchable"
                             :disabled="template.disabled"
@@ -197,353 +197,351 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions, mapMutations, mapState } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseTitle from '@/components/common/base/BaseTitle.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-import toolsUtils from '@/utils/tools.js'
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import { mapActions, mapMutations, mapState } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    import BaseTitle from '@/components/common/base/BaseTitle.vue'
+    import BaseSearch from '@/components/common/base/BaseSearch.vue'
+    import toolsUtils from '@/utils/tools.js'
+    import moment from 'moment-timezone'
 
-export default {
-    name: 'functorTaskHome',
-    components: {
-        CopyrightFooter,
-        BaseSearch,
-        BaseTitle,
-        NoData
-    },
-    props: ['cc_id', 'app_id'],
-    data () {
-        return {
-            i18n: {
-                functorList: gettext('职能化中心'),
-                placeholder: gettext('请输入ID或流程名称'),
-                business: gettext('所属业务'),
-                createdTime: gettext('提单时间'),
-                claimedTime: gettext('认领时间'),
-                ownBusiness: gettext('所属业务'),
-                finishedTime: gettext('执行结束'),
-                name: gettext('任务名称'),
-                billTime: gettext('提单时间'),
-                billTimePlaceholder: gettext('请选择时间'),
-                creator: gettext('提单人'),
-                claimant: gettext('认领人'),
-                status: gettext('状态'),
-                operation: gettext('操作'),
-                claim: gettext('认领'),
-                view: gettext('查看'),
-                new: gettext('新建任务'),
-                choiceBusiness: gettext('选择业务'),
-                choiceTemplate: gettext('选择模板'),
-                tips: gettext('如果未找到模板，请联系业务运维在流程模板的权限管理中对你或所有职能化人员授予“新建任务权限”'),
-                total: gettext('共'),
-                item: gettext('条记录'),
-                comma: gettext('，'),
-                choice: gettext('请选择'),
-                currentPageTip: gettext('当前第'),
-                page: gettext('页'),
-                functorType: gettext('任务分类'),
-                functorTypePlaceholder: gettext('请选择分类'),
-                creatorPlaceholder: gettext('请输入提单人'),
-                query: gettext('搜索'),
-                reset: gettext('清空')
-            },
-            listLoading: true,
-            selectedCcId: -1,
-            currentPage: 1,
-            totalPage: 1,
-            countPerPage: 15,
-            totalCount: 0,
-            functorSync: 0,
-            statusSync: 0,
-            searchStr: undefined,
-            isShowNewTaskDialog: false,
-            functorBasicInfoLoading: true,
-            functorList: [],
-            business: {
-                list: [],
-                selected: 0,
-                loading: false,
-                id: null,
-                searchable: true,
-                empty: false
-            },
-            template: {
-                list: [
-                    {
-                        name: gettext('业务流程'),
-                        children: []
-                    },
-                    {
-                        name: gettext('公共流程'),
-                        children: []
-                    }
-                ],
-                selected: 0,
-                loading: false,
-                searchable: true,
-                id: null,
-                empty: false,
-                disabled: true
-            },
-            bizCcId: undefined,
-            billTime: undefined,
-            creator: undefined,
-            executeStartTime: undefined,
-            executeEndTime: undefined,
-            isStarted: undefined,
-            isFinished: undefined,
-            isCommonTemplate: false,
-            isAdvancedSerachShow: false,
-            status: undefined,
-            functorCategory: [],
-            statusList: [
-                {'id': 'submitted', 'name': gettext('未认领')},
-                {'id': 'claimed', 'name': gettext('已认领')},
-                {'id': 'executed', 'name': gettext('已执行')},
-                {'id': 'finished', 'name': gettext('完成')}
-            ]
-        }
-    },
-    computed: {
-        ...mapState({
-            bizList: state => state.bizList,
-            categorys: state => state.categorys
-        })
-    },
-    created () {
-        this.loadFunctionTask()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-        this.getBusinessList()
-    },
-    methods: {
-        ...mapActions('functionTask/', [
-            'loadFunctionTaskList',
-            'loadFunctionBusinessList',
-            'loadFunctionTemplateList'
-        ]),
-        ...mapActions('templateList/',[
-            'loadTemplateList'
-        ]),
-        ...mapMutations('atomForm/', [
-            'clearAtomForm'
-        ]),
-        async loadFunctionTask () {
-            this.listLoading = true
-            try {
-                const data = {
-                    limit: this.countPerPage,
-                    offset: (this.currentPage - 1) * this.countPerPage,
-                    task__pipeline_instance__name__contains: this.searchStr,
-                    creator: this.creator || undefined,
-                    pipeline_instance__is_started: this.isStarted,
-                    pipeline_instance__is_finished: this.isFinished,
-                    task__business__cc_id: this.bizCcId,
-                    status: this.status
-                }
-                if (this.executeEndTime) {
-                    if (this.common) {
-                        data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
-                        data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1','d').format('YYYY-MM-DD')
-                    } else {
-                        data['create_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
-                        data['create_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
-                    }
-                }
-                const functorListData = await this.loadFunctionTaskList(data)
-                const list = functorListData.objects
-                this.functorList = list
-                this.totalCount = functorListData.meta.total_count
-                const totalPage = Math.ceil( this.totalCount / this.countPerPage)
-                if (!totalPage) {
-                    this.totalPage = 1
-                } else {
-                    this.totalPage = totalPage
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.listLoading = false
-            }
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.loadFunctionTask()
-        },
-        searchInputhandler () {
-            this.currentPage = 1
-            this.loadFunctionTask()
+    export default {
+        name: 'functorTaskHome',
+        components: {
+            CopyrightFooter,
+            BaseSearch,
+            BaseTitle,
+            NoData
         },
-        statusMethod (status, status_name) {
-            if (status === 'finished') {
-                return gettext('完成')
+        props: ['cc_id', 'app_id'],
+        data () {
+            return {
+                i18n: {
+                    functorList: gettext('职能化中心'),
+                    placeholder: gettext('请输入ID或流程名称'),
+                    business: gettext('所属业务'),
+                    createdTime: gettext('提单时间'),
+                    claimedTime: gettext('认领时间'),
+                    ownBusiness: gettext('所属业务'),
+                    finishedTime: gettext('执行结束'),
+                    name: gettext('任务名称'),
+                    billTime: gettext('提单时间'),
+                    billTimePlaceholder: gettext('请选择时间'),
+                    creator: gettext('提单人'),
+                    claimant: gettext('认领人'),
+                    status: gettext('状态'),
+                    operation: gettext('操作'),
+                    claim: gettext('认领'),
+                    view: gettext('查看'),
+                    new: gettext('新建任务'),
+                    choiceBusiness: gettext('选择业务'),
+                    choiceTemplate: gettext('选择模板'),
+                    tips: gettext('如果未找到模板，请联系业务运维在流程模板的权限管理中对你或所有职能化人员授予“新建任务权限”'),
+                    total: gettext('共'),
+                    item: gettext('条记录'),
+                    comma: gettext('，'),
+                    choice: gettext('请选择'),
+                    currentPageTip: gettext('当前第'),
+                    page: gettext('页'),
+                    functorType: gettext('任务分类'),
+                    functorTypePlaceholder: gettext('请选择分类'),
+                    creatorPlaceholder: gettext('请输入提单人'),
+                    query: gettext('搜索'),
+                    reset: gettext('清空')
+                },
+                listLoading: true,
+                selectedCcId: -1,
+                currentPage: 1,
+                totalPage: 1,
+                countPerPage: 15,
+                totalCount: 0,
+                functorSync: 0,
+                statusSync: 0,
+                searchStr: undefined,
+                isShowNewTaskDialog: false,
+                functorBasicInfoLoading: true,
+                functorList: [],
+                business: {
+                    list: [],
+                    selected: 0,
+                    loading: false,
+                    id: null,
+                    searchable: true,
+                    empty: false
+                },
+                template: {
+                    list: [
+                        {
+                            name: gettext('业务流程'),
+                            children: []
+                        },
+                        {
+                            name: gettext('公共流程'),
+                            children: []
+                        }
+                    ],
+                    selected: 0,
+                    loading: false,
+                    searchable: true,
+                    id: null,
+                    empty: false,
+                    disabled: true
+                },
+                bizCcId: undefined,
+                billTime: undefined,
+                creator: undefined,
+                executeStartTime: undefined,
+                executeEndTime: undefined,
+                isStarted: undefined,
+                isFinished: undefined,
+                isCommonTemplate: false,
+                isAdvancedSerachShow: false,
+                status: undefined,
+                functorCategory: [],
+                statusList: [
+                    { 'id': 'submitted', 'name': gettext('未认领') },
+                    { 'id': 'claimed', 'name': gettext('已认领') },
+                    { 'id': 'executed', 'name': gettext('已执行') },
+                    { 'id': 'finished', 'name': gettext('完成') }
+                ]
             }
-            else if (status === 'submitted'){
-                return gettext('未认领')
-            }
-            else if (status === 'rejected') {
-                return gettext('已驳回')
-            }
-            return status_name
-        },
-        statusClass (status) {
-            let cls
-            switch (status) {
-                case 'submitted': // 未认领
-                    cls = 'common-icon-flag-circle default'
-                    break
-                case 'claimed': // 已认领
-                    cls = 'common-icon-flag-circle success'
-                    break
-                case 'executed': // 已执行
-                    cls = 'common-icon-dark-circle-ellipsis primary'
-                    break
-                case 'rejected': // 已驳回
-                    cls = 'common-icon-dark-circle-close'
-                    break
-                case 'finished': // 完成
-                    cls = 'bk-icon icon-check-circle-shape default'
-                    break
-                default:
-                    cls = ''
-            }
-
-            return cls
         },
-        onNewTask () {
-            this.isShowNewTaskDialog = true
+        computed: {
+            ...mapState({
+                bizList: state => state.bizList,
+                categorys: state => state.categorys
+            })
         },
-        async getBusinessList () {
-            this.business.loading = true
-            try {
-                let businessData = await this.loadFunctionBusinessList()
-                this.business.list = businessData.objects
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.business.loading = false
-            }
+        created () {
+            this.loadFunctionTask()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
+            this.getBusinessList()
         },
-        async getTemplateList () {
-            this.template.loading = true
-            try {
-                // 查询职能化数据及公共流程数据
-                await Promise.all([this.loadFunctionTemplateList(this.business.id), this.loadTemplateList({common: 1})]).then(value =>{
-                    if (value[0].objects.length === 0) {
-                        this.template.list[0].children = [{'id': undefined, 'name': gettext('无数据')}]
-                    } else {
-                        this.template.list[0].children = value[0].objects
+        methods: {
+            ...mapActions('functionTask/', [
+                'loadFunctionTaskList',
+                'loadFunctionBusinessList',
+                'loadFunctionTemplateList'
+            ]),
+            ...mapActions('templateList/', [
+                'loadTemplateList'
+            ]),
+            ...mapMutations('atomForm/', [
+                'clearAtomForm'
+            ]),
+            async loadFunctionTask () {
+                this.listLoading = true
+                try {
+                    const data = {
+                        limit: this.countPerPage,
+                        offset: (this.currentPage - 1) * this.countPerPage,
+                        task__pipeline_instance__name__contains: this.searchStr,
+                        creator: this.creator || undefined,
+                        pipeline_instance__is_started: this.isStarted,
+                        pipeline_instance__is_finished: this.isFinished,
+                        task__business__cc_id: this.bizCcId,
+                        status: this.status
                     }
-                    if (value[1].objects.length === 0) {
-                        this.template.list[1].children = [{'id': undefined, 'name': gettext('无数据')}]
+                    if (this.executeEndTime) {
+                        if (this.common) {
+                            data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
+                            data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1', 'd').format('YYYY-MM-DD')
+                        } else {
+                            data['create_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                            data['create_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1', 'd').format('YYYY-MM-DD')
+                        }
+                    }
+                    const functorListData = await this.loadFunctionTaskList(data)
+                    const list = functorListData.objects
+                    this.functorList = list
+                    this.totalCount = functorListData.meta.total_count
+                    const totalPage = Math.ceil(this.totalCount / this.countPerPage)
+                    if (!totalPage) {
+                        this.totalPage = 1
                     } else {
-                        this.template.list[1].children = value[1].objects
+                        this.totalPage = totalPage
                     }
-                    this.clearAtomForm()
-                    this.$nextTick(() => {
-                        this.changeNoDataTextStyle()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.listLoading = false
+                }
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.loadFunctionTask()
+            },
+            searchInputhandler () {
+                this.currentPage = 1
+                this.loadFunctionTask()
+            },
+            statusMethod (status, status_name) {
+                if (status === 'finished') {
+                    return gettext('完成')
+                } else if (status === 'submitted') {
+                    return gettext('未认领')
+                } else if (status === 'rejected') {
+                    return gettext('已驳回')
+                }
+                return status_name
+            },
+            statusClass (status) {
+                let cls
+                switch (status) {
+                    case 'submitted': // 未认领
+                        cls = 'common-icon-flag-circle default'
+                        break
+                    case 'claimed': // 已认领
+                        cls = 'common-icon-flag-circle success'
+                        break
+                    case 'executed': // 已执行
+                        cls = 'common-icon-dark-circle-ellipsis primary'
+                        break
+                    case 'rejected': // 已驳回
+                        cls = 'common-icon-dark-circle-close'
+                        break
+                    case 'finished': // 完成
+                        cls = 'bk-icon icon-check-circle-shape default'
+                        break
+                    default:
+                        cls = ''
+                }
+
+                return cls
+            },
+            onNewTask () {
+                this.isShowNewTaskDialog = true
+            },
+            async getBusinessList () {
+                this.business.loading = true
+                try {
+                    const businessData = await this.loadFunctionBusinessList()
+                    this.business.list = businessData.objects
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.business.loading = false
+                }
+            },
+            async getTemplateList () {
+                this.template.loading = true
+                try {
+                    // 查询职能化数据及公共流程数据
+                    await Promise.all([this.loadFunctionTemplateList(this.business.id), this.loadTemplateList({ common: 1 })]).then(value => {
+                        if (value[0].objects.length === 0) {
+                            this.template.list[0].children = [{ 'id': undefined, 'name': gettext('无数据') }]
+                        } else {
+                            this.template.list[0].children = value[0].objects
+                        }
+                        if (value[1].objects.length === 0) {
+                            this.template.list[1].children = [{ 'id': undefined, 'name': gettext('无数据') }]
+                        } else {
+                            this.template.list[1].children = value[1].objects
+                        }
+                        this.clearAtomForm()
+                        this.$nextTick(() => {
+                            this.changeNoDataTextStyle()
+                        })
                     })
-                })
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.template.loading = false
-            }
-        },
-        onSelectedBizCcId (name, value) {
-            if (this.bizCcId === name) {
-                return
-            }
-            this.bizCcId = name
-        },
-        onSelectedBusiness (id, data) {
-            this.business.id = id
-            this.getTemplateList()
-            this.business.empty = false
-            this.template.disabled = false
-        },
-        onSelectedTemplate (id, data) {
-            if (id === undefined) {
-                return
-            }
-            this.isCommonTemplate = false
-            // 通过resource_uri查找是否是公共流程
-            if (data.resource_uri.search('common_template') !== -1) {
-                this.isCommonTemplate = true
-            }
-            this.template.id = id
-            this.template.empty = false
-        },
-        onConfirmlNewTask () {
-            if (this.business.id === null) {
-                this.business.empty = true
-                return
-            }
-            if (this.template.id === null) {
-                this.template.empty = true
-                return
-            }
-            if (this.isCommonTemplate) {
-                this.$router.push({path: `/template/newtask/${this.business.id}/selectnode/`, query: {template_id: this.template.id, common: 1}})
-            } else {
-                this.$router.push({path: `/template/newtask/${this.business.id}/selectnode/`, query: {template_id: this.template.id}})
-            }
-        },
-        onCancelNewTask () {
-            this.onClearTemplate()
-            this.onClearBusiness()
-            this.isShowNewTaskDialog = false
-        },
-        onClearTemplate () {
-            this.template.id = null
-            this.template.selected = 0
-        },
-        onClearBusiness () {
-            this.template.disabled = true
-            this.business.id = null
-            this.business.selected = 0
-        },
-        // 无数据文本修改样式
-        changeNoDataTextStyle () {
-            const textList = document.querySelectorAll('.text')
-            for (let item of textList) {
-                if (item.textContent === gettext(' 无数据 ')) {
-                    item.style['cursor'] = 'not-allowed'
-                    item.style['background-color'] = '#fafafa'
-                    item.style['color'] = '#aaaaaa'
-                    item.parentElement.style["background-color"] = '#fafafa'
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.template.loading = false
+                }
+            },
+            onSelectedBizCcId (name, value) {
+                if (this.bizCcId === name) {
+                    return
+                }
+                this.bizCcId = name
+            },
+            onSelectedBusiness (id, data) {
+                this.business.id = id
+                this.getTemplateList()
+                this.business.empty = false
+                this.template.disabled = false
+            },
+            onSelectedTemplate (id, data) {
+                if (id === undefined) {
+                    return
+                }
+                this.isCommonTemplate = false
+                // 通过resource_uri查找是否是公共流程
+                if (data.resource_uri.search('common_template') !== -1) {
+                    this.isCommonTemplate = true
+                }
+                this.template.id = id
+                this.template.empty = false
+            },
+            onConfirmlNewTask () {
+                if (this.business.id === null) {
+                    this.business.empty = true
+                    return
+                }
+                if (this.template.id === null) {
+                    this.template.empty = true
+                    return
                 }
+                if (this.isCommonTemplate) {
+                    this.$router.push({ path: `/template/newtask/${this.business.id}/selectnode/`, query: { template_id: this.template.id, common: 1 } })
+                } else {
+                    this.$router.push({ path: `/template/newtask/${this.business.id}/selectnode/`, query: { template_id: this.template.id } })
+                }
+            },
+            onCancelNewTask () {
+                this.onClearTemplate()
+                this.onClearBusiness()
+                this.isShowNewTaskDialog = false
+            },
+            onClearTemplate () {
+                this.template.id = null
+                this.template.selected = 0
+            },
+            onClearBusiness () {
+                this.template.disabled = true
+                this.business.id = null
+                this.business.selected = 0
+            },
+            // 无数据文本修改样式
+            changeNoDataTextStyle () {
+                const textList = document.querySelectorAll('.text')
+                for (const item of textList) {
+                    if (item.textContent === gettext(' 无数据 ')) {
+                        item.style['cursor'] = 'not-allowed'
+                        item.style['background-color'] = '#fafafa'
+                        item.style['color'] = '#aaaaaa'
+                        item.parentElement.style['background-color'] = '#fafafa'
+                    }
+                }
+            },
+            onAdvanceShow () {
+                this.isAdvancedSerachShow = !this.isAdvancedSerachShow
+            },
+            onChangeExecuteTime (oldValue, newValue) {
+                const timeArray = newValue.split(' - ')
+                this.executeStartTime = timeArray[0]
+                this.executeEndTime = timeArray[1]
+            },
+            onClearStatus () {
+                this.isStarted = undefined
+                this.isFinished = undefined
+            },
+            onResetForm () {
+                this.status = undefined
+                this.creator = undefined
+                this.statusSync = 0
+                this.selectedCcId = 0
+                this.funtorSync = 0
+                this.executeStartTime = undefined
+                this.executeEndTime = undefined
+            },
+            onSelectedStatus (id, name) {
+                this.status = id
             }
-        },
-        onAdvanceShow () {
-            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
-        },
-        onChangeExecuteTime (oldValue, newValue) {
-            const timeArray = newValue.split(" - ")
-            this.executeStartTime = timeArray[0]
-            this.executeEndTime = timeArray[1]
-        },
-        onClearStatus () {
-            this.isStarted = undefined
-            this.isFinished = undefined
-        },
-        onResetForm () {
-            this.status = undefined
-            this.creator = undefined
-            this.statusSync = 0
-            this.selectedCcId = 0
-            this.funtorSync = 0
-            this.executeStartTime = undefined
-            this.executeEndTime = undefined
-        },
-        onSelectedStatus (id, name) {
-            this.status = id
         }
     }
-}
 </script>
 <style lang='scss' scoped>
 @import '@/scss/config.scss';
@@ -794,4 +792,3 @@ label.required:after {
 }
 
 </style>
-
diff --git a/pipeline/blueflow/src/pages/home/HomeSummary.vue b/pipeline/blueflow/src/pages/home/HomeSummary.vue
index 6366f2d20b..4a399fc5e3 100644
--- a/pipeline/blueflow/src/pages/home/HomeSummary.vue
+++ b/pipeline/blueflow/src/pages/home/HomeSummary.vue
@@ -81,23 +81,23 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'HomeSummary',
-    props: ['cc_id', 'summaryData'],
-    data () {
-        return {
-            i18n: {
-                enter: gettext('进入'),
-                executeTask: gettext('执行任务'),
-                template: gettext('新建流程'),
-                appmaker: gettext('轻应用'),
-                times: gettext('次'),
-                num: gettext('个')
+    import '@/utils/i18n.js'
+    export default {
+        name: 'HomeSummary',
+        props: ['cc_id', 'summaryData'],
+        data () {
+            return {
+                i18n: {
+                    enter: gettext('进入'),
+                    executeTask: gettext('执行任务'),
+                    template: gettext('新建流程'),
+                    appmaker: gettext('轻应用'),
+                    times: gettext('次'),
+                    num: gettext('个')
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/home/QuickCreateTask.vue b/pipeline/blueflow/src/pages/home/QuickCreateTask.vue
index 72f31880a8..6eab5400f6 100644
--- a/pipeline/blueflow/src/pages/home/QuickCreateTask.vue
+++ b/pipeline/blueflow/src/pages/home/QuickCreateTask.vue
@@ -46,149 +46,148 @@
         <SelectTemplateDialog
             :cc_id="cc_id"
             :submitting="submitting"
-            :isSelectTemplateDialogShow="isSelectTemplateDialogShow"
-            :templateList="templateList"
-            :quickTaskList="quickTaskList"
-            :templateGrouped="templateGrouped"
-            :selectTemplateLoading="selectTemplateLoading"
+            :is-select-template-dialog-show="isSelectTemplateDialogShow"
+            :template-list="templateList"
+            :quick-task-list="quickTaskList"
+            :template-grouped="templateGrouped"
+            :select-template-loading="selectTemplateLoading"
             @confirm="onConfirm"
             @cancel="onCancel">
         </SelectTemplateDialog>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import NoData from '@/components/common/base/NoData.vue'
-import SelectTemplateDialog from './SelectTemplateDialog.vue'
-export default {
-    name: 'QuickCreateTask',
-    components: {
-        NoData,
-        SelectTemplateDialog
-    },
-    props: ['quickTaskList', 'cc_id', 'templateClassify', 'totalTemplate'],
-    data () {
-        return {
-            isSelectTemplateDialogShow: false,
-            submitting: false,
-            i18n: {
-                myTasks: gettext('快速新建任务'),
-                cancelCollect: gettext('取消常用流程'),
-                addTasks: gettext('添加常用流程'),
-                addTips1: gettext('业务下无常用流程，'),
-                addTips2: gettext('立即添加')
-            },
-            selectTemplateLoading: false,
-            templateList: [],
-            templateGrouped: []
-        }
-    },
-    methods: {
-        ...mapActions('template/', [
-            'templateCollectSelect',
-            'templateCollectDelete'
-        ]),
-        ...mapActions('templateList/', [
-            'loadTemplateList'
-        ]),
-        async onDeleteTemplate (id) {
-            const list = this.getDeletedList(id)
-            try {
-                const resp = await this.templateCollectDelete(id)
-                if (resp.result) {
-                    this.$emit('updateQuickTaskList', list)
-                } else {
-                    errorHandler(resp, this)
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            }
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import SelectTemplateDialog from './SelectTemplateDialog.vue'
+    export default {
+        name: 'QuickCreateTask',
+        components: {
+            NoData,
+            SelectTemplateDialog
         },
-        onSelectTemplate () {
-            this.isSelectTemplateDialogShow = true
-            if (this.templateList.length === 0) {
-                this.getTemplateData()
+        props: ['quickTaskList', 'cc_id', 'templateClassify', 'totalTemplate'],
+        data () {
+            return {
+                isSelectTemplateDialogShow: false,
+                submitting: false,
+                i18n: {
+                    myTasks: gettext('快速新建任务'),
+                    cancelCollect: gettext('取消常用流程'),
+                    addTasks: gettext('添加常用流程'),
+                    addTips1: gettext('业务下无常用流程，'),
+                    addTips2: gettext('立即添加')
+                },
+                selectTemplateLoading: false,
+                templateList: [],
+                templateGrouped: []
             }
         },
-        async onConfirm (selectedTemplate) {
-            if (this.submitting) return
-            this.submitting = true
-            try {
-                const list = selectedTemplate.map(item => item.id)
-                const resp = await this.templateCollectSelect(JSON.stringify(list))
-                if (resp.result) {
-                    this.isSelectTemplateDialogShow = false
-                    this.$emit('updateQuickTaskList', selectedTemplate)
-                } else {
-                    errorHandler(resp, this)
+        methods: {
+            ...mapActions('template/', [
+                'templateCollectSelect',
+                'templateCollectDelete'
+            ]),
+            ...mapActions('templateList/', [
+                'loadTemplateList'
+            ]),
+            async onDeleteTemplate (id) {
+                const list = this.getDeletedList(id)
+                try {
+                    const resp = await this.templateCollectDelete(id)
+                    if (resp.result) {
+                        this.$emit('updateQuickTaskList', list)
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-                this.submitting = false
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onCancel () {
-            this.isSelectTemplateDialogShow = false
-        },
-        getDeletedList (id) {
-            let index
-            const list = this.quickTaskList.slice(0)
-            list.some((item, i) => {
-                if (item.id === id) {
-                    index = i
-                    return true
+            },
+            onSelectTemplate () {
+                this.isSelectTemplateDialogShow = true
+                if (this.templateList.length === 0) {
+                    this.getTemplateData()
                 }
-            })
-            list.splice(index, 1)
-            return list
-        },
-        async getTemplateData () {
-            if (this.totalTemplate === 0) {
-                this.$bkMessage({
-                    'message': gettext('业务下无流程模板，为您跳转至新建流程'),
-                    'theme': 'success'
-                })
-                this.$router.push(`/template/new/${this.cc_id}`)
-                return
-            }
-            this.selectTemplateLoading = true
-            try {
-                const templateData = await this.loadTemplateList()
-                this.templateList = templateData.objects
-                // 如果没有数据跳转至新建页面
-                this.templateGrouped = this.getGroupData(this.templateList, this.templateClassify)
-            } catch (e) {
-                errorHandler(templateData, this)
-            } finally {
-                this.selectTemplateLoading = false
-            }
-            
-        },
-        getGroupData (list, classify) {
-            const groupData = []
-            classify.forEach(item => {
-                groupData.push({
-                    code: item.code,
-                    name: item.name,
-                    list: []
-                })
-            })
-            list.forEach(item => {
+            },
+            async onConfirm (selectedTemplate) {
+                if (this.submitting) return
+                this.submitting = true
+                try {
+                    const list = selectedTemplate.map(item => item.id)
+                    const resp = await this.templateCollectSelect(JSON.stringify(list))
+                    if (resp.result) {
+                        this.isSelectTemplateDialogShow = false
+                        this.$emit('updateQuickTaskList', selectedTemplate)
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                    this.submitting = false
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onCancel () {
+                this.isSelectTemplateDialogShow = false
+            },
+            getDeletedList (id) {
                 let index
-                classify.some((cls, i) => {
-                    if (item.category === cls.code) {
+                const list = this.quickTaskList.slice(0)
+                list.some((item, i) => {
+                    if (item.id === id) {
                         index = i
                         return true
                     }
                 })
-                groupData[index].list.push(item)
-            })
-            return groupData
+                list.splice(index, 1)
+                return list
+            },
+            async getTemplateData () {
+                if (this.totalTemplate === 0) {
+                    this.$bkMessage({
+                        'message': gettext('业务下无流程模板，为您跳转至新建流程'),
+                        'theme': 'success'
+                    })
+                    this.$router.push(`/template/new/${this.cc_id}`)
+                    return
+                }
+                this.selectTemplateLoading = true
+                try {
+                    const templateData = await this.loadTemplateList()
+                    this.templateList = templateData.objects
+                    // 如果没有数据跳转至新建页面
+                    this.templateGrouped = this.getGroupData(this.templateList, this.templateClassify)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.selectTemplateLoading = false
+                }
+            },
+            getGroupData (list, classify) {
+                const groupData = []
+                classify.forEach(item => {
+                    groupData.push({
+                        code: item.code,
+                        name: item.name,
+                        list: []
+                    })
+                })
+                list.forEach(item => {
+                    let index
+                    classify.some((cls, i) => {
+                        if (item.category === cls.code) {
+                            index = i
+                            return true
+                        }
+                    })
+                    groupData[index].list.push(item)
+                })
+                return groupData
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -286,4 +285,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/home/SelectTemplateDialog.vue b/pipeline/blueflow/src/pages/home/SelectTemplateDialog.vue
index d2542f0a3a..9938f99a2e 100644
--- a/pipeline/blueflow/src/pages/home/SelectTemplateDialog.vue
+++ b/pipeline/blueflow/src/pages/home/SelectTemplateDialog.vue
@@ -23,10 +23,10 @@
         <div slot="content" class="template-container">
             <div
                 v-if="selectTemplateLoading || templateList.length" class="dialog-centent"
-                v-bkloading="{isLoading: submitting || selectTemplateLoading, opacity: 1}">
+                v-bkloading="{ isLoading: submitting || selectTemplateLoading, opacity: 1 }">
                 <div class="template-wrapper">
                     <div class="template-search">
-                        <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput"/>
+                        <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput" />
                         <i class="common-icon-search"></i>
                     </div>
                     <div class="template-list">
@@ -46,7 +46,7 @@
                                             v-for="item in group.list"
                                             :key="item.id"
                                             @click="onSelectTemplate(item)">
-                                            <span :class="['checkbox', {checked: getItemStatus(item.id)}]"></span>
+                                            <span :class="['checkbox', { checked: getItemStatus(item.id) }]"></span>
                                             {{item.name}}
                                         </li>
                                     </ul>
@@ -60,7 +60,7 @@
                                     :key="item.id"
                                     @click="onSelectTemplate(item)"
                                     class="template-item">
-                                    <span :class="['checkbox', {checked: getItemStatus(item.id)}]"></span>
+                                    <span :class="['checkbox', { checked: getItemStatus(item.id) }]"></span>
                                     {{item.name}}
                                 </li>
                             </ul>
@@ -106,106 +106,105 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import toolsUtils from '@/utils/tools.js'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-export default {
-    name: 'SelectTemplateDialog',
-    components: {
-        NoData
-    },
-    props: ['cc_id', 'submitting', 'isSelectTemplateDialogShow', 'templateList', 'quickTaskList', 'templateGrouped', 'selectTemplateLoading'],
-    data () {
-        const selectedTemplate = this.quickTaskList.slice(0)
-        return {
-            isShow: false,
-            selectedTemplate,
-            searchMode: false,
-            searchStr: '',
-            searchList: [],
-            i18n: {
-                placeholder: gettext('请输入流程名称'),
-                addTasks: gettext('添加常用流程'),
-                selected: gettext('已选择'),
-                num: gettext('项'),
-                maxSelect: gettext('，最多可选'),
-                noSearchResult: gettext('搜索结果为空'),
-                noTemplate: gettext('该业务下暂无流程，'),
-                createTemplate: gettext('立即创建')
-            }
-        }
-    },
-    watch: {
-        isSelectTemplateDialogShow (val) {
-            this.isShow = val
+    import '@/utils/i18n.js'
+    import toolsUtils from '@/utils/tools.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    export default {
+        name: 'SelectTemplateDialog',
+        components: {
+            NoData
         },
-        quickTaskList (val) {
-            this.selectedTemplate = val.slice(0)
-        }
-    },
-    computed: {
-        activeTemplateGrouped () {
-            return this.templateGrouped.filter(group =>{
-                return group.list.length
-            })
-        }
-    },
-    created () {
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        getItemStatus (id) {
-            return this.selectedTemplate.some(item => item.id === id)
+        props: ['cc_id', 'submitting', 'isSelectTemplateDialogShow', 'templateList', 'quickTaskList', 'templateGrouped', 'selectTemplateLoading'],
+        data () {
+            const selectedTemplate = this.quickTaskList.slice(0)
+            return {
+                isShow: false,
+                selectedTemplate,
+                searchMode: false,
+                searchStr: '',
+                searchList: [],
+                i18n: {
+                    placeholder: gettext('请输入流程名称'),
+                    addTasks: gettext('添加常用流程'),
+                    selected: gettext('已选择'),
+                    num: gettext('项'),
+                    maxSelect: gettext('，最多可选'),
+                    noSearchResult: gettext('搜索结果为空'),
+                    noTemplate: gettext('该业务下暂无流程，'),
+                    createTemplate: gettext('立即创建')
+                }
+            }
         },
-        searchInputhandler () {
-            if (this.searchStr.length) {
-                this.searchMode = true
-                const reg = new RegExp(this.searchStr, 'g')
-                this.searchList = this.templateList.filter(item => {
-                    return reg.test(item.name)
+        computed: {
+            activeTemplateGrouped () {
+                return this.templateGrouped.filter(group => {
+                    return group.list.length
                 })
-            } else {
-                this.searchMode = false
-                this.searchList = []
             }
         },
-        onSelectTemplate (template) {
-            let index
-            const isSelected = this.selectedTemplate.some((item, i) => {
-                if (item.id === template.id) {
-                    index = i
-                    return true
-                }
-            })
-            if (isSelected) {
-                this.selectedTemplate.splice(index, 1)
-            } else {
-                if (this.selectedTemplate.length === 10) {
-                    this.$bkMessage({
-                        message: gettext('最多只能添加10项'),
-                        theme: 'warning'
-                    })
-                    return
-                }
-                this.selectedTemplate.push(template)
+        watch: {
+            isSelectTemplateDialogShow (val) {
+                this.isShow = val
+            },
+            quickTaskList (val) {
+                this.selectedTemplate = val.slice(0)
             }
         },
-        onConfirm () {
-            this.$emit('confirm', this.selectedTemplate)
+        created () {
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
         },
-        onCancel () {
-            this.selectedTemplate = this.quickTaskList.slice(0)
-            this.$emit('cancel')
-        },
-        deleteTemplate (template) {
-            const deleteIndex = this.selectedTemplate.findIndex(item => item.id === template.id)
-            if (deleteIndex > -1) {
-                this.selectedTemplate.splice(deleteIndex, 1)[0]
+        methods: {
+            getItemStatus (id) {
+                return this.selectedTemplate.some(item => item.id === id)
+            },
+            searchInputhandler () {
+                if (this.searchStr.length) {
+                    this.searchMode = true
+                    const reg = new RegExp(this.searchStr, 'g')
+                    this.searchList = this.templateList.filter(item => {
+                        return reg.test(item.name)
+                    })
+                } else {
+                    this.searchMode = false
+                    this.searchList = []
+                }
+            },
+            onSelectTemplate (template) {
+                let index
+                const isSelected = this.selectedTemplate.some((item, i) => {
+                    if (item.id === template.id) {
+                        index = i
+                        return true
+                    }
+                })
+                if (isSelected) {
+                    this.selectedTemplate.splice(index, 1)
+                } else {
+                    if (this.selectedTemplate.length === 10) {
+                        this.$bkMessage({
+                            message: gettext('最多只能添加10项'),
+                            theme: 'warning'
+                        })
+                        return
+                    }
+                    this.selectedTemplate.push(template)
+                }
+            },
+            onConfirm () {
+                this.$emit('confirm', this.selectedTemplate)
+            },
+            onCancel () {
+                this.selectedTemplate = this.quickTaskList.slice(0)
+                this.$emit('cancel')
+            },
+            deleteTemplate (template) {
+                const deleteIndex = this.selectedTemplate.findIndex(item => item.id === template.id)
+                if (deleteIndex > -1) {
+                    this.selectedTemplate.splice(deleteIndex, 1)
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss">
 @import '@/scss/mixins/scrollbar.scss';
@@ -377,4 +376,3 @@ export default {
     padding: 0px;
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/home/TaskFeeds.vue b/pipeline/blueflow/src/pages/home/TaskFeeds.vue
index e31c8e984f..84ac66d937 100644
--- a/pipeline/blueflow/src/pages/home/TaskFeeds.vue
+++ b/pipeline/blueflow/src/pages/home/TaskFeeds.vue
@@ -13,9 +13,9 @@
     <div class="task-feeds-content">
         <h3 class="title">{{i18n.feeds}}</h3>
         <router-link class="view-more-task" :to="`/taskflow/home/${cc_id}/`">{{i18n.viewMore}}</router-link>
-        <div v-if="top3TaskFeeds.length" class="feed-container">
+        <div v-if="topThreeTaskFeeds.length" class="feed-container">
             <ul class="feed-list">
-                <li v-for="(item, index) in top3TaskFeeds" :key="item.id" class="feed-item">
+                <li v-for="(item, index) in topThreeTaskFeeds" :key="item.id" class="feed-item">
                     <div class="item-mark-icon">
                         <i class="common-icon-clock"></i>
                     </div>
@@ -46,115 +46,115 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions } from 'vuex'
-import NoData from '@/components/common/base/NoData.vue'
-import tools from '@/utils/tools.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-export default {
-    name: 'TaskFeeds',
-    components: {
-        NoData
-    },
-    props: ['top3TaskFeeds', 'cc_id'],
-    data () {
-        return {
-            feedsStatus: this.getTaskStatus(),
-            i18n: {
-                feeds: gettext('业务动态'),
-                viewMore: gettext('查看更多'),
-                detail: gettext('查看详情'),
-                time: gettext('耗时')
-            }
-        }
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getInstanceStatus'
-        ]),
-        getActionTitle (task) {
-            let action
-            if (!task.is_started) {
-                action = gettext('创建了一个')
-            } else {
-                action = gettext('执行了一个')
-            }
-            const type = gettext(task.category_name)
-            const i18n_task = gettext('任务')
-            return `${task.executor_name || task.creator_name} ${action} ${type} ${i18n_task}`
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import NoData from '@/components/common/base/NoData.vue'
+    import tools from '@/utils/tools.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    export default {
+        name: 'TaskFeeds',
+        components: {
+            NoData
         },
-        getLastTime (task) {
-            return tools.timeTransform(task.elapsed_time)
+        props: ['topThreeTaskFeeds', 'cc_id'],
+        data () {
+            return {
+                feedsStatus: this.getTaskStatus(),
+                i18n: {
+                    feeds: gettext('业务动态'),
+                    viewMore: gettext('查看更多'),
+                    detail: gettext('查看详情'),
+                    time: gettext('耗时')
+                }
+            }
         },
-        getTaskStatus () {
-            return this.top3TaskFeeds.map((item, index) => {
-                let status = {}
-                if (item.is_finished) {
-                    status.cls = 'finished'
-                    status.icon = 'common-icon-done-thin'
-                    status.text = gettext('完成')
-                } else if (item.is_started) {
-                    status.cls = 'execute'
-                    status.icon = 'common-icon-loading'
-                    this.getExecuteDetail(item, index)
+        methods: {
+            ...mapActions('task/', [
+                'getInstanceStatus'
+            ]),
+            getActionTitle (task) {
+                let action
+                if (!task.is_started) {
+                    action = gettext('创建了一个')
                 } else {
-                    status.cls = 'created'
-                    status.icon = 'task-created-icon'
-                    status.text = gettext('未执行')
+                    action = gettext('执行了一个')
                 }
-                return status
-            })
-        },
-        async getExecuteDetail (task, index) {
-            const data = {
-                instance_id: task.id,
-                cc_id: task.business.cc_id
-            }
-            try {
-                const detailInfo = await this.getInstanceStatus(data)
-                if (detailInfo.result) {
-                    const state = detailInfo.data.state
+                const type = gettext(task.category_name)
+                const i18n_task = gettext('任务')
+                return `${task.executor_name || task.creator_name} ${action} ${type} ${i18n_task}`
+            },
+            getLastTime (task) {
+                return tools.timeTransform(task.elapsed_time)
+            },
+            getTaskStatus () {
+                return this.topThreeTaskFeeds.map((item, index) => {
                     const status = {}
-                    switch (state) {
-                        case 'RUNNING':
-                        case 'BLOCKED':
-                            status.cls = 'execute'
-                            status.icon = 'common-icon-loading'
-                            status.text = gettext('执行中')
-                            break
-                        case 'SUSPENDED':
-                            status.cls = 'execute'
-                            status.icon = 'common-icon-double-vertical-line'
-                            status.text = gettext('暂停')
-                            break
-                        case 'NODE_SUSPENDED':
-                            status.cls = 'execute'
-                            status.icon = 'common-icon-double-vertical-line'
-                            status.text = gettext('节点暂停')
-                            break
-                        case 'FAILED':
-                            status.cls = 'failed'
-                            status.icon = 'common-icon-dark-circle-close'
-                            status.text = gettext('失败')
-                            break
-                        case 'REVOKED':
-                            status.cls = 'revoke'
-                            status.icon = 'common-icon-return-arrow'
-                            status.text = gettext('撤销')
-                            break
-                        default:
-                            status.text = gettext('未知')
+                    if (item.is_finished) {
+                        status.cls = 'finished'
+                        status.icon = 'common-icon-done-thin'
+                        status.text = gettext('完成')
+                    } else if (item.is_started) {
+                        status.cls = 'execute'
+                        status.icon = 'common-icon-loading'
+                        this.getExecuteDetail(item, index)
+                    } else {
+                        status.cls = 'created'
+                        status.icon = 'task-created-icon'
+                        status.text = gettext('未执行')
                     }
-                    this.feedsStatus.splice(index, 1, status)
-                } else {
-                    errorHandler(detailInfo, this)
+                    return status
+                })
+            },
+            async getExecuteDetail (task, index) {
+                const data = {
+                    instance_id: task.id,
+                    cc_id: task.business.cc_id
+                }
+                try {
+                    const detailInfo = await this.getInstanceStatus(data)
+                    if (detailInfo.result) {
+                        const state = detailInfo.data.state
+                        const status = {}
+                        switch (state) {
+                            case 'RUNNING':
+                            case 'BLOCKED':
+                                status.cls = 'execute'
+                                status.icon = 'common-icon-loading'
+                                status.text = gettext('执行中')
+                                break
+                            case 'SUSPENDED':
+                                status.cls = 'execute'
+                                status.icon = 'common-icon-double-vertical-line'
+                                status.text = gettext('暂停')
+                                break
+                            case 'NODE_SUSPENDED':
+                                status.cls = 'execute'
+                                status.icon = 'common-icon-double-vertical-line'
+                                status.text = gettext('节点暂停')
+                                break
+                            case 'FAILED':
+                                status.cls = 'failed'
+                                status.icon = 'common-icon-dark-circle-close'
+                                status.text = gettext('失败')
+                                break
+                            case 'REVOKED':
+                                status.cls = 'revoke'
+                                status.icon = 'common-icon-return-arrow'
+                                status.text = gettext('撤销')
+                                break
+                            default:
+                                status.text = gettext('未知')
+                        }
+                        this.feedsStatus.splice(index, 1, status)
+                    } else {
+                        errorHandler(detailInfo, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            } catch (e) {
-                errorHandler(e, this)
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/mixins/scrollbar.scss';
@@ -280,5 +280,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/home/TaskPercentChart.vue b/pipeline/blueflow/src/pages/home/TaskPercentChart.vue
index 30717705cc..9b97580784 100644
--- a/pipeline/blueflow/src/pages/home/TaskPercentChart.vue
+++ b/pipeline/blueflow/src/pages/home/TaskPercentChart.vue
@@ -19,56 +19,56 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import Plotly from 'plotly.js/dist/plotly-basic.min.js'
-import NoData from '@/components/common/base/NoData.vue'
-export default {
-    name: 'TaskPercentChart',
-    components: {
-        NoData
-    },
-    props: ['taskCount', 'totalTask'],
-    data () {
-        return {
-            chart: null,
-            i18n: {
-                percent: gettext('任务分类占比')
+    import '@/utils/i18n.js'
+    import Plotly from 'plotly.js/dist/plotly-basic.min.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    export default {
+        name: 'TaskPercentChart',
+        components: {
+            NoData
+        },
+        props: ['taskCount', 'totalTask'],
+        data () {
+            return {
+                chart: null,
+                i18n: {
+                    percent: gettext('任务分类占比')
+                }
             }
-        }
-    },
-    mounted () {
-        if (this.totalTask) {
-            this.initChart()
-        }
-    },
-    methods: {
-        initChart () {
-            const colors = ['#7275ec', '#3c96ff', '#4bc6f3', '#f5c749', '#ed6b89', '#ff5256', '#85c030']
-            const values = []
-            const labels = []
-            this.taskCount.forEach(item => {
-                values.push(item.value)
-                labels.push(item.name)
-            })
-            const data = [{
-                values,
-                labels,
-                marker: {
-                    colors
-                },
-                hole: 0.6,
-                sort: false,
-                direction: 'clockwise',
-                type: 'pie'
-            }]
-            const layout = {
-                width: 500,
-                height: 340
+        },
+        mounted () {
+            if (this.totalTask) {
+                this.initChart()
+            }
+        },
+        methods: {
+            initChart () {
+                const colors = ['#7275ec', '#3c96ff', '#4bc6f3', '#f5c749', '#ed6b89', '#ff5256', '#85c030']
+                const values = []
+                const labels = []
+                this.taskCount.forEach(item => {
+                    values.push(item.value)
+                    labels.push(item.name)
+                })
+                const data = [{
+                    values,
+                    labels,
+                    marker: {
+                        colors
+                    },
+                    hole: 0.6,
+                    sort: false,
+                    direction: 'clockwise',
+                    type: 'pie'
+                }]
+                const layout = {
+                    width: 500,
+                    height: 340
+                }
+                this.chart = Plotly.newPlot('chart-wrap', data, layout, { displayModeBar: false })
             }
-            this.chart = Plotly.newPlot('chart-wrap', data, layout, {displayModeBar: false})
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -83,4 +83,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/home/index.vue b/pipeline/blueflow/src/pages/home/index.vue
index 798d4d751c..de38d6dfb8 100644
--- a/pipeline/blueflow/src/pages/home/index.vue
+++ b/pipeline/blueflow/src/pages/home/index.vue
@@ -10,31 +10,31 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="home-page" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="home-page" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div v-if="!loading">
             <div class="summary-info">
                 <HomeSummary
                     :cc_id="cc_id"
-                    :summaryData="summaryData">
+                    :summary-data="summaryData">
                 </HomeSummary>
             </div>
             <div class="main-wrapper">
                 <QuickCreateTask
                     :cc_id="cc_id"
-                    :quickTaskList="quickTaskList"
-                    :templateClassify="templateClassify"
-                    :totalTemplate="totalTemplate"
+                    :quick-task-list="quickTaskList"
+                    :template-classify="templateClassify"
+                    :total-template="totalTemplate"
                     @updateQuickTaskList="updateQuickTaskList">
                 </QuickCreateTask>
                 <div class="column-panel clearfix">
                     <div class="col-item">
                         <TaskFeeds
-                            :top3TaskFeeds="top3TaskFeeds"
+                            :top-three-task-feeds="topThreeTaskFeeds"
                             :cc_id="cc_id">
                         </TaskFeeds>
                     </div>
                     <div class="col-item">
-                        <TaskPercentChart :taskCount="taskCount" :totalTask="totalTask"></TaskPercentChart>
+                        <TaskPercentChart :task-count="taskCount" :total-task="totalTask"></TaskPercentChart>
                     </div>
                 </div>
             </div>
@@ -43,221 +43,220 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapStates, mapMutations, mapActions } from 'vuex'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import { errorHandler } from '@/utils/errorHandler.js'
-import HomeSummary from './HomeSummary.vue'
-import QuickCreateTask from './QuickCreateTask.vue'
-import TaskFeeds from './TaskFeeds.vue'
-import TaskPercentChart from './TaskPercentChart.vue'
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import HomeSummary from './HomeSummary.vue'
+    import QuickCreateTask from './QuickCreateTask.vue'
+    import TaskFeeds from './TaskFeeds.vue'
+    import TaskPercentChart from './TaskPercentChart.vue'
 
-export default {
-    name: 'HomePage',
-    components: {
-        CopyrightFooter,
-        HomeSummary,
-        QuickCreateTask,
-        TaskFeeds,
-        TaskPercentChart
-    },
-    props: ['cc_id', 'template_id'],
-    data () {
-        return {
-            loading: true,
-            summaryData: {
-                executeStatus: {},
-                templateStatus: {},
-                appmakerStatus: {}
-            },
-            quickTaskList: [],
-            top3TaskFeeds: [],
-            taskCount: [],
-            totalTask: 0,
-            templateClassify: [],
-            totalTemplate: 0
-        }
-    },
-    watch: {
-        'cc_id' (val) {
-            this.getData()
-        }
-    },
-    created () {
-        this.getData()
-    },
-    methods: {
-        ...mapActions('template/', [
-            'loadTemplateSummary',
-            'loadTemplateCollectList'
-        ]),
-        ...mapActions('appmaker/', [
-            'loadAppmakerSummary'
-        ]),
-        ...mapActions('task/', [
-            'loadTaskSummary',
-            'loadTaskTop3Data',
-            'loadTaskCount'
-        ]),
-        ...mapActions('taskList/', [
-            'loadTaskList'
-        ]),
-        async getData () {
-            this.loading = true
-            Promise.all([
-                this.getAppmakerSummary(),
-                this.getTaskTop3Data(),
-                this.getTaskCountData(),
-                this.getTaskExecuteData(),
-                this.getTemplateCategorySummary(),
-                this.getTemplateCollectList()
-            ]).then(values => {
-                this.handleHomeData(values)
-                this.loading = false
-            }).catch(e => {
-                errorHandler(e, this)
-                this.loading = false
-            })
+    export default {
+        name: 'HomePage',
+        components: {
+            CopyrightFooter,
+            HomeSummary,
+            QuickCreateTask,
+            TaskFeeds,
+            TaskPercentChart
         },
-        async getAppmakerSummary () {
-            const query = {
-                groupBy: 'category'
+        props: ['cc_id', 'template_id'],
+        data () {
+            return {
+                loading: true,
+                summaryData: {
+                    executeStatus: {},
+                    templateStatus: {},
+                    appmakerStatus: {}
+                },
+                quickTaskList: [],
+                topThreeTaskFeeds: [],
+                taskCount: [],
+                totalTask: 0,
+                templateClassify: [],
+                totalTemplate: 0
             }
-            try {
-                const appmakerData = await this.loadAppmakerSummary(query)
-                return appmakerData.data
-            } catch (e) {
-                errorHandler(e, this)
+        },
+        watch: {
+            'cc_id' (val) {
+                this.getData()
             }
         },
-        async getTaskTop3Data () {
-            try {
+        created () {
+            this.getData()
+        },
+        methods: {
+            ...mapActions('template/', [
+                'loadTemplateSummary',
+                'loadTemplateCollectList'
+            ]),
+            ...mapActions('appmaker/', [
+                'loadAppmakerSummary'
+            ]),
+            ...mapActions('task/', [
+                'loadTaskSummary',
+                'loadTaskTop3Data',
+                'loadTaskCount'
+            ]),
+            ...mapActions('taskList/', [
+                'loadTaskList'
+            ]),
+            async getData () {
+                this.loading = true
+                Promise.all([
+                    this.getAppmakerSummary(),
+                    this.getTaskTop3Data(),
+                    this.getTaskCountData(),
+                    this.getTaskExecuteData(),
+                    this.getTemplateCategorySummary(),
+                    this.getTemplateCollectList()
+                ]).then(values => {
+                    this.handleHomeData(values)
+                    this.loading = false
+                }).catch(e => {
+                    errorHandler(e, this)
+                    this.loading = false
+                })
+            },
+            async getAppmakerSummary () {
                 const query = {
-                    limit: 3
+                    groupBy: 'category'
                 }
-                const taskTop3Data = await this.loadTaskList(query)
-                return taskTop3Data.objects
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async getTaskCountData () {
-            const query = {
-                group_by: 'category'
-            }
-            try {
-                const taskCountData = await this.loadTaskCount(query)
-                if (taskCountData.result) {
-                    return taskCountData.data
-                } else {
-                    errorHandler(taskCountData, this)
+                try {
+                    const appmakerData = await this.loadAppmakerSummary(query)
+                    return appmakerData.data
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async getTaskExecuteData () {
-            const query = {
-                group_by: 'status'
-            }
-            try {
-                const taskCountData = await this.loadTaskCount(query)
-                if (taskCountData.result) {
-                    return taskCountData.data
-                } else {
-                    errorHandler(taskCountData, this)
+            },
+            async getTaskTop3Data () {
+                try {
+                    const query = {
+                        limit: 3
+                    }
+                    const taskTop3Data = await this.loadTaskList(query)
+                    return taskTop3Data.objects
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        /**
-         * 流程统计
-         */
-        async getTemplateCategorySummary () {
-            const query = {
-                groupBy: 'category'
-            }
-            try {
-                const categoryData = await this.loadTemplateSummary(query)
-                if (categoryData.result) {
-                    return categoryData.data
-                } else {
-                    errorHandler(categoryData, this)
+            },
+            async getTaskCountData () {
+                const query = {
+                    group_by: 'category'
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        /**
-         * 用户收藏的模板
-         */
-        async getTemplateCollectList () {
-            try {
-                const collectListData = await this.loadTemplateCollectList()
-                if (collectListData.result) {
-                    return collectListData.data
-                } else {
-                    errorHandler(collectListData, this)
+                try {
+                    const taskCountData = await this.loadTaskCount(query)
+                    if (taskCountData.result) {
+                        return taskCountData.data
+                    } else {
+                        errorHandler(taskCountData, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        /**
-         * 默认流程模板分类数据
-         */
-        getDefaultGroup (list) {
-            const groupDefaultData = {}
-            list.forEach(item => {
-                groupDefaultData[item.code] = {
-                    name: gettext(item.name),
-                    value: 0
+            },
+            async getTaskExecuteData () {
+                const query = {
+                    group_by: 'status'
                 }
-            })
-            return groupDefaultData
-        },
-        handleHomeData (data) {
-            this.templateClassify = []
-            this.quickTaskList = data[5]
-            data[2].groups.forEach(item => {
-                item.name = gettext(item.name)
-                this.templateClassify.push({
-                    code: item.code,
-                    name: item.name
+                try {
+                    const taskCountData = await this.loadTaskCount(query)
+                    if (taskCountData.result) {
+                        return taskCountData.data
+                    } else {
+                        errorHandler(taskCountData, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            /**
+             * 流程统计
+             */
+            async getTemplateCategorySummary () {
+                const query = {
+                    groupBy: 'category'
+                }
+                try {
+                    const categoryData = await this.loadTemplateSummary(query)
+                    if (categoryData.result) {
+                        return categoryData.data
+                    } else {
+                        errorHandler(categoryData, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            /**
+             * 用户收藏的模板
+             */
+            async getTemplateCollectList () {
+                try {
+                    const collectListData = await this.loadTemplateCollectList()
+                    if (collectListData.result) {
+                        return collectListData.data
+                    } else {
+                        errorHandler(collectListData, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            /**
+             * 默认流程模板分类数据
+             */
+            getDefaultGroup (list) {
+                const groupDefaultData = {}
+                list.forEach(item => {
+                    groupDefaultData[item.code] = {
+                        name: gettext(item.name),
+                        value: 0
+                    }
                 })
-            })
-            data[3].groups.forEach(item => {
-                item.name = gettext(item.name)
-            })
-            const appmakerGroup = this.getDefaultGroup(data[2].groups)
-            // 头部概览数据
-            this.summaryData = {
-                executeStatus: {
-                    total: data[3].total,
-                    groups: data[3].groups
-                },
-                templateStatus: {
-                    total: data[4].total,
-                    groups: data[4].groups
-                },
-                appmakerStatus: {
-                    total: data[0].total,
-                    groups: data[0].groups
+                return groupDefaultData
+            },
+            handleHomeData (data) {
+                this.templateClassify = []
+                this.quickTaskList = data[5]
+                data[2].groups.forEach(item => {
+                    item.name = gettext(item.name)
+                    this.templateClassify.push({
+                        code: item.code,
+                        name: item.name
+                    })
+                })
+                data[3].groups.forEach(item => {
+                    item.name = gettext(item.name)
+                })
+                // 头部概览数据
+                this.summaryData = {
+                    executeStatus: {
+                        total: data[3].total,
+                        groups: data[3].groups
+                    },
+                    templateStatus: {
+                        total: data[4].total,
+                        groups: data[4].groups
+                    },
+                    appmakerStatus: {
+                        total: data[0].total,
+                        groups: data[0].groups
+                    }
                 }
+                // 任务的数量
+                this.totalTemplate = data[4].total
+                // 任务记录
+                this.topThreeTaskFeeds = data[1]
+                this.taskCount = data[2].groups
+                this.totalTask = data[2].total
+            },
+            updateQuickTaskList (data) {
+                this.quickTaskList = data
             }
-            // 任务的数量
-            this.totalTemplate = data[4].total
-            // 任务记录
-            this.top3TaskFeeds = data[1]
-            this.taskCount = data[2].groups
-            this.totalTask = data[2].total
-        },
-        updateQuickTaskList (data) {
-            this.quickTaskList = data
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -289,5 +288,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/periodic/PeriodicList/DeletePeriodicDialog.vue b/pipeline/blueflow/src/pages/periodic/PeriodicList/DeletePeriodicDialog.vue
index b93aa0c95f..0c6b836d05 100644
--- a/pipeline/blueflow/src/pages/periodic/PeriodicList/DeletePeriodicDialog.vue
+++ b/pipeline/blueflow/src/pages/periodic/PeriodicList/DeletePeriodicDialog.vue
@@ -19,39 +19,38 @@
         :is-show.sync="isDeleteDialogShow"
         @confirm="onDeletePeriodicConfrim"
         @cancel="onDeletePeriodicCancel">
-        <div slot="content" v-bkloading="{isLoading: deleting, opacity: 1}">
+        <div slot="content" v-bkloading="{ isLoading: deleting, opacity: 1 }">
             <div class="information-tips">{{deleteInfo}}</div>
         </div>
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { errorHandler } from '@/utils/errorHandler.js'
+    import '@/utils/i18n.js'
 
-export default {
-    name: 'DeletePeriodicDialog',
-    props: ['isDeleteDialogShow', 'templateName', 'deleting'],
-    data () {
-        return {
-            i18n: {
-                deleteTips: gettext('确认删除')
+    export default {
+        name: 'DeletePeriodicDialog',
+        props: ['isDeleteDialogShow', 'templateName', 'deleting'],
+        data () {
+            return {
+                i18n: {
+                    deleteTips: gettext('确认删除')
+                }
+            }
+        },
+        computed: {
+            deleteInfo () {
+                return this.i18n.deleteTips + '"' + this.templateName + '"' + gettext('？')
             }
-        }
-    },
-    computed: {
-        deleteInfo (){
-            return this.i18n.deleteTips + '"' + this.templateName + '"' + gettext("？")
-        }
-    },
-    methods: {
-        onDeletePeriodicCancel () {
-            this.$emit('onDeletePeriodicCancel')
         },
-        onDeletePeriodicConfrim () {
-            this.$emit('onDeletePeriodicConfirm')
+        methods: {
+            onDeletePeriodicCancel () {
+                this.$emit('onDeletePeriodicCancel')
+            },
+            onDeletePeriodicConfrim () {
+                this.$emit('onDeletePeriodicConfirm')
+            }
         }
     }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -59,4 +58,3 @@ export default {
         word-break: break-all;
     }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/periodic/PeriodicList/ModifyPeriodicDialog.vue b/pipeline/blueflow/src/pages/periodic/PeriodicList/ModifyPeriodicDialog.vue
index 8a9eaa03a9..11aa638ea0 100644
--- a/pipeline/blueflow/src/pages/periodic/PeriodicList/ModifyPeriodicDialog.vue
+++ b/pipeline/blueflow/src/pages/periodic/PeriodicList/ModifyPeriodicDialog.vue
@@ -19,7 +19,7 @@
         :is-show.sync="isModifyDialogShow"
         @confirm="onModifyPeriodicConfirm"
         @cancel="onModifyPeriodicCancel">
-        <div slot="content" v-bkloading="{isLoading: loading, opacity: 1}">
+        <div slot="content" v-bkloading="{ isLoading: loading, opacity: 1 }">
             <div class="periodic-info">
                 <h3 class="common-section-title">{{ i18n.periodicInfo }}</h3>
                 <div class="common-form-item">
@@ -28,7 +28,7 @@
                         <BaseInput
                             name="periodicCron"
                             v-model="periodicCron"
-                            v-validate="periodicRule"/>
+                            v-validate="periodicRule" />
                         <span v-show="errors.has('periodicCron')" class="common-error-tip error-msg">{{ errors.first('periodicCron') }}</span>
                         <bk-tooltip placement="bottom-start" class="periodic-img-tooltip">
                             <i class="bk-icon icon-info-circle"></i>
@@ -55,150 +55,149 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapMutations, mapActions } from 'vuex'
-import { PERIODIC_REG } from '@/constants/index.js'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import TaskParamEdit from '@/pages/task/TaskParamEdit.vue'
-import { errorHandler } from '@/utils/errorHandler.js'
-import NoData from '@/components/common/base/NoData.vue'
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { PERIODIC_REG } from '@/constants/index.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import TaskParamEdit from '@/pages/task/TaskParamEdit.vue'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
 
-export default {
-    name: 'ModifyPeriodicDialog',
-    components: {
-        BaseInput,
-        TaskParamEdit,
-        NoData
-    },
-    props: ['isModifyDialogShow', 'taskId', 'cron', 'constants', 'loading'],
-    data () {
-        return {
-            i18n: {
-                periodicInfo: gettext('周期信息'),
-                modifyTask: gettext('修改周期任务'),
-                periodicRule: gettext('周期规则'),
-                paramsInfo: gettext("参数信息"),
-                errorPicture: gettext('图片出错')
-            },
-            periodicRule: {
-                required: true,
-                regex: PERIODIC_REG
-            },
-            periodicCronImg: require('@/assets/images/' + gettext('task-zh') + '.png'),
-            periodicCron: this.cron
-        }
-    },
-    computed: {
-        isVariableEmpty () {
-            return Object.keys(this.constants).length === 0
-        }
-    },
-    methods: {
-        ...mapActions('periodic/',[
-            'modifyPeriodicCron',
-            'modifyPeriodicConstants'
-        ]),
-        onModifyPeriodicCancel () {
-            this.$emit('onModifyPeriodicCancel')
+    export default {
+        name: 'ModifyPeriodicDialog',
+        components: {
+            BaseInput,
+            TaskParamEdit,
+            NoData
         },
-        onModifyPeriodicConfirm () {
-            const paramEditComp = this.$refs.TaskParamEdit
-            this.$validator.validateAll().then((result) => {
-                let formValid = true
-                let periodicConstants = ''
-                if (paramEditComp) {
-                    const formData = paramEditComp.getVariableData()
-                    periodicConstants = formData
-                    formValid = paramEditComp.validate()
-                }
-                const cronArray = this.periodicCron.split(' ')
-                if (cronArray.length !== 5) {
-                    this.$bkMessage({
-                        'message': gettext('输入周期表达式非法，请校验'),
-                        'theme': 'error'
-                    })
-                    return
-                }
-                if (!result || !formValid) {
-                    return
-                }
-                const jsonCron = JSON.stringify({
-                    'minute': cronArray[0],
-                    'hour': cronArray[1],
-                    'day_of_week': cronArray[2],
-                    'day_of_month': cronArray[3],
-                    'month_of_year': cronArray[4]
-                })
-                const cronData = {
-                    'taskId': this.taskId,
-                    'cron': jsonCron
-                }
-                if (this.cron === this.periodicCron && periodicConstants === '') {
-                    // 没有改变表达式，且没有ramdomform内容
-                    this.$emit('onModifyPeriodicCancel')
-                } else if (periodicConstants === '') {
-                    this.modifyCron(cronData)
-                } else {
-                    const constants = {}
-                    for (let key in periodicConstants){
-                        constants[key] = periodicConstants[key]['value']
-                    }
-                    const constantsData = {
-                        'taskId': this.taskId,
-                        'constants': JSON.stringify(constants)
-                    }
-                    this.modifyPeriodic(cronData, constantsData)
-                }
-            })
+        props: ['isModifyDialogShow', 'taskId', 'cron', 'constants', 'loading'],
+        data () {
+            return {
+                i18n: {
+                    periodicInfo: gettext('周期信息'),
+                    modifyTask: gettext('修改周期任务'),
+                    periodicRule: gettext('周期规则'),
+                    paramsInfo: gettext('参数信息'),
+                    errorPicture: gettext('图片出错')
+                },
+                periodicRule: {
+                    required: true,
+                    regex: PERIODIC_REG
+                },
+                periodicCronImg: require('@/assets/images/' + gettext('task-zh') + '.png'),
+                periodicCron: this.cron
+            }
         },
-        modifyPeriodic (cronData, constantsData) {
-            try {
-                Promise.all([this.modifyPeriodicConstants(constantsData), this.modifyPeriodicCron(cronData)]).then((values) => {
-                    if (values[0].result && values[1].result) {
-                        this.$bkMessage({
-                            'message': gettext('修改周期任务信息成功'),
-                            'theme': 'success'
-                        })
-                    } else if (values[0].result) {
-                        this.$bkMessage({
-                            'message': gettext('修改周期任务参数成功，但表达式修改未成功，请重试'),
-                            'theme': 'warning'
-                        })
-                    } else if (values[1].result) {
-                        this.$bkMessage({
-                            'message': gettext('修改周期任务表达式成功，但任务参数未修改成功，请重试'),
-                            'theme': 'warning'
-                        })
-                    } else {
+        computed: {
+            isVariableEmpty () {
+                return Object.keys(this.constants).length === 0
+            }
+        },
+        methods: {
+            ...mapActions('periodic/', [
+                'modifyPeriodicCron',
+                'modifyPeriodicConstants'
+            ]),
+            onModifyPeriodicCancel () {
+                this.$emit('onModifyPeriodicCancel')
+            },
+            onModifyPeriodicConfirm () {
+                const paramEditComp = this.$refs.TaskParamEdit
+                this.$validator.validateAll().then((result) => {
+                    let formValid = true
+                    let periodicConstants = ''
+                    if (paramEditComp) {
+                        const formData = paramEditComp.getVariableData()
+                        periodicConstants = formData
+                        formValid = paramEditComp.validate()
+                    }
+                    const cronArray = this.periodicCron.split(' ')
+                    if (cronArray.length !== 5) {
                         this.$bkMessage({
-                            'message': gettext('修改周期任务失败，请联系管理员'),
+                            'message': gettext('输入周期表达式非法，请校验'),
                             'theme': 'error'
                         })
+                        return
+                    }
+                    if (!result || !formValid) {
+                        return
+                    }
+                    const jsonCron = JSON.stringify({
+                        'minute': cronArray[0],
+                        'hour': cronArray[1],
+                        'day_of_week': cronArray[2],
+                        'day_of_month': cronArray[3],
+                        'month_of_year': cronArray[4]
+                    })
+                    const cronData = {
+                        'taskId': this.taskId,
+                        'cron': jsonCron
+                    }
+                    if (this.cron === this.periodicCron && periodicConstants === '') {
+                        // 没有改变表达式，且没有ramdomform内容
+                        this.$emit('onModifyPeriodicCancel')
+                    } else if (periodicConstants === '') {
+                        this.modifyCron(cronData)
+                    } else {
+                        const constants = {}
+                        for (const key in periodicConstants) {
+                            constants[key] = periodicConstants[key]['value']
+                        }
+                        const constantsData = {
+                            'taskId': this.taskId,
+                            'constants': JSON.stringify(constants)
+                        }
+                        this.modifyPeriodic(cronData, constantsData)
                     }
-                    this.$emit('onModifyPeriodicConfirm')
-                })
-            }
-            catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async modifyCron (cronData) {
-            const result = await this.modifyPeriodicCron(cronData)
-            if (result.result) {
-                this.$bkMessage({
-                    'message': gettext('修改周期任务表达式成功'),
-                    'theme': 'success'
-                })
-            } else {
-                this.$bkMessage({
-                    'message': gettext('修改周期任务失败，请联系管理员'),
-                    'theme': 'error'
                 })
+            },
+            modifyPeriodic (cronData, constantsData) {
+                try {
+                    Promise.all([this.modifyPeriodicConstants(constantsData), this.modifyPeriodicCron(cronData)]).then((values) => {
+                        if (values[0].result && values[1].result) {
+                            this.$bkMessage({
+                                'message': gettext('修改周期任务信息成功'),
+                                'theme': 'success'
+                            })
+                        } else if (values[0].result) {
+                            this.$bkMessage({
+                                'message': gettext('修改周期任务参数成功，但表达式修改未成功，请重试'),
+                                'theme': 'warning'
+                            })
+                        } else if (values[1].result) {
+                            this.$bkMessage({
+                                'message': gettext('修改周期任务表达式成功，但任务参数未修改成功，请重试'),
+                                'theme': 'warning'
+                            })
+                        } else {
+                            this.$bkMessage({
+                                'message': gettext('修改周期任务失败，请联系管理员'),
+                                'theme': 'error'
+                            })
+                        }
+                        this.$emit('onModifyPeriodicConfirm')
+                    })
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async modifyCron (cronData) {
+                const result = await this.modifyPeriodicCron(cronData)
+                if (result.result) {
+                    this.$bkMessage({
+                        'message': gettext('修改周期任务表达式成功'),
+                        'theme': 'success'
+                    })
+                } else {
+                    this.$bkMessage({
+                        'message': gettext('修改周期任务失败，请联系管理员'),
+                        'theme': 'error'
+                    })
+                }
+                this.$emit('onModifyPeriodicConfirm')
             }
-            this.$emit('onModifyPeriodicConfirm')
         }
     }
-}
 </script>
 
 <style lang='scss' scoped>
diff --git a/pipeline/blueflow/src/pages/periodic/PeriodicList/index.vue b/pipeline/blueflow/src/pages/periodic/PeriodicList/index.vue
index 04a0870dbc..c5b1783d6c 100644
--- a/pipeline/blueflow/src/pages/periodic/PeriodicList/index.vue
+++ b/pipeline/blueflow/src/pages/periodic/PeriodicList/index.vue
@@ -15,7 +15,7 @@
             <BaseTitle :title="i18n.periodicTask"></BaseTitle>
             <BaseSearch
                 v-model="periodicName"
-                :inputPlaceholader="i18n.periodicNamePlaceholder"
+                :input-placeholader="i18n.periodicNamePlaceholder"
                 @onShow="onAdvanceShow"
                 @input="onSearchInput">
             </BaseSearch>
@@ -24,7 +24,7 @@
                     <div class="periodic-query-content">
                         <div class="query-content">
                             <span class="query-span">{{i18n.creator}}</span>
-                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.enabled}}</span>
@@ -46,7 +46,7 @@
                 </fieldset>
             </div>
             <div class="periodic-table-content">
-                <table v-bkloading="{isLoading: listLoading, opacity: 1}">
+                <table v-bkloading="{ isLoading: listLoading, opacity: 1 }">
                     <thead>
                         <tr>
                             <th class="periodic-id">ID</th>
@@ -76,19 +76,19 @@
                             <td class="periodic-creator">{{item.creator}}</td>
                             <td class="periodic-total-run-count">{{ item.total_run_count }}</td>
                             <td class="periodic-status">
-                               <span :class="item.enabled? 'bk-icon icon-check-circle-shape': 'common-icon-dark-circle-pause'"></span>
-                                {{item.enabled? i18n.start: i18n.pause}}
+                                <span :class="item.enabled ? 'bk-icon icon-check-circle-shape' : 'common-icon-dark-circle-pause'"></span>
+                                {{item.enabled ? i18n.start : i18n.pause}}
                             </td>
                             <td class="periodic-operation">
                                 <a
                                     href="javascript:void(0);"
-                                    :class="['periodic-pause-btn', {'periodic-start-btn':!item.enabled}]"
+                                    :class="['periodic-pause-btn', { 'periodic-start-btn': !item.enabled }]"
                                     @click="onSetEnable(item)">
-                                    {{!item.enabled? i18n.start: i18n.pause}}
+                                    {{!item.enabled ? i18n.start : i18n.pause}}
                                 </a>
                                 <a
                                     href="javascript:void(0);"
-                                    :class="['periodic-bk-btn', {'periodic-bk-disable': item.enabled}]"
+                                    :class="['periodic-bk-btn', { 'periodic-bk-disable': item.enabled }]"
                                     :title="item.enabled ? i18n.editTitle : ''"
                                     @click="onModifyCronPeriodic(item)">
                                     {{ i18n.edit }}
@@ -110,7 +110,7 @@
                         </tr>
                         <tr v-if="!periodicList || !periodicList.length" class="empty-tr">
                             <td colspan="9">
-                                <div class="empty-data"><NoData/></div>
+                                <div class="empty-data"><NoData /></div>
                             </td>
                         </tr>
                     </tbody>
@@ -133,15 +133,15 @@
             :loading="modifyDialogLoading"
             :constants="constants"
             :cron="selectedCron"
-            :taskId="selectedPeriodicId"
-            :isModifyDialogShow="isModifyDialogShow"
+            :task-id="selectedPeriodicId"
+            :is-modify-dialog-show="isModifyDialogShow"
             @onModifyPeriodicConfirm="onModifyPeriodicConfirm"
             @onModifyPeriodicCancel="onModifyPeriodicCancel">
         </ModifyPeriodicDialog>
         <DeletePeriodicDialog
             v-if="isDeleteDialogShow"
-            :isDeleteDialogShow="isDeleteDialogShow"
-            :templateName="selectedTemplateName"
+            :is-delete-dialog-show="isDeleteDialogShow"
+            :template-name="selectedTemplateName"
             :deleting="deleting"
             @onDeletePeriodicConfirm="onDeletePeriodicConfirm"
             @onDeletePeriodicCancel="onDeletePeriodicCancel">
@@ -150,232 +150,228 @@
     
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { NAME_REG, TIMING_REG } from '@/constants/index.js'
-import toolsUtils from '@/utils/tools.js'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import BaseTitle from '@/components/common/base/BaseTitle.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import ModifyPeriodicDialog from './ModifyPeriodicDialog.vue'
-import DeletePeriodicDialog from './DeletePeriodicDialog.vue'
-export default {
-    name: 'PeriodicList',
-    components: {
-        CopyrightFooter,
-        BaseTitle,
-        BaseSearch,
-        NoData,
-        BaseInput,
-        ModifyPeriodicDialog,
-        DeletePeriodicDialog
-    },
-    props: ['cc_id'],
-    data () {
-        return {
-            i18n: {
-                lastRunAt: gettext("上次运行时间"),
-                periodicRule: gettext("周期规则"),
-                periodicTask: gettext('周期任务'),
-                advanceSearch: gettext('高级搜索'),
-                creator: gettext("创建人"),
-                operation: gettext("操作"),
-                start: gettext("启动"),
-                delete: gettext("删除"),
-                edit: gettext('编辑'),
-                pause: gettext('暂停'),
-                totalRunCount: gettext('运行次数'),
-                total: gettext("共"),
-                item: gettext("条记录"),
-                comma: gettext("，"),
-                currentPageTip: gettext("当前第"),
-                page: gettext("页"),
-                periodicNamePlaceholder: gettext('请输入任务名称'),
-                creatorPlaceholder: gettext('请输入创建人'),
-                statusPlaceholder: gettext('请选择状态'),
-                enabled: gettext('状态'),
-                periodicName: gettext('名称'),
-                editTitle: gettext('请暂停任务后再执行编辑操作'),
-                enabledPlaceholder: gettext('请选择状态'),
-                periodicTemplate: gettext('流程模板'),
-                executeHistory: gettext('执行历史'),
-                query: gettext('搜索'),
-                reset: gettext('清空')
-            },
-            listLoading: true,
-            deleting: false,
-            currentPage: 1,
-            totalPage: 1,
-            countPerPage: 15,
-            totalCount: 0,
-            isDeleteDialogShow: false,
-            isAdvancedSerachShow: false,
-            creator: undefined,
-            enabled: undefined,
-            enabledList: [
-                {'id': 'true', 'name': gettext('启动')},
-                {'id': 'false', 'name': gettext('暂停')}
-            ],
-            selectedPeriodicId: undefined,
-            periodicList: [],
-            isModifyDialogShow: false,
-            selectedCron: undefined,
-            constants: undefined,
-            modifyDialogLoading: false,
-            selectedTemplateName: undefined,
-            periodicName: undefined,
-            enabledSync: -1
-        }
-    },
-    created () {
-        this.getPeriodicList()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        ...mapActions('periodic/', [
-            'loadPeriodicList',
-            'setPeriodicEnable',
-            'getPeriodic',
-            'deletePeriodic'
-        ]),
-        async getPeriodicList () {
-            this.listLoading = true
-            try {
-                const data = {
-                    limit: this.countPerPage,
-                    offset: (this.currentPage - 1) * this.countPerPage,
-                    task__name__contains: this.periodicName,
-                    task__celery_task__enabled: this.enabled,
-                    task__creator__contains: this.creator,
-                    task__name__contains: this.periodicName
-                }
-                const periodicListData = await this.loadPeriodicList(data)
-                const list = periodicListData.objects
-                this.periodicList = list
-                this.totalCount = periodicListData.meta.total_count
-                const totalPage = Math.ceil( this.totalCount / this.countPerPage)
-                if (!totalPage) {
-                    this.totalPage = 1
-                } else {
-                    this.totalPage = totalPage
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.listLoading = false
-            }
-        },
-        searchInputhandler () {
-            this.currentPage = 1
-            this.getPeriodicList()
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import toolsUtils from '@/utils/tools.js'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import BaseTitle from '@/components/common/base/BaseTitle.vue'
+    import BaseSearch from '@/components/common/base/BaseSearch.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    import ModifyPeriodicDialog from './ModifyPeriodicDialog.vue'
+    import DeletePeriodicDialog from './DeletePeriodicDialog.vue'
+    export default {
+        name: 'PeriodicList',
+        components: {
+            CopyrightFooter,
+            BaseTitle,
+            BaseSearch,
+            NoData,
+            ModifyPeriodicDialog,
+            DeletePeriodicDialog
         },
-        onDeletePeriodic (id, name) {
-            this.isDeleteDialogShow = true
-            this.selectedDeleteTaskId = id
-            this.selectedTemplateName = name
+        props: ['cc_id'],
+        data () {
+            return {
+                i18n: {
+                    lastRunAt: gettext('上次运行时间'),
+                    periodicRule: gettext('周期规则'),
+                    periodicTask: gettext('周期任务'),
+                    advanceSearch: gettext('高级搜索'),
+                    creator: gettext('创建人'),
+                    operation: gettext('操作'),
+                    start: gettext('启动'),
+                    delete: gettext('删除'),
+                    edit: gettext('编辑'),
+                    pause: gettext('暂停'),
+                    totalRunCount: gettext('运行次数'),
+                    total: gettext('共'),
+                    item: gettext('条记录'),
+                    comma: gettext('，'),
+                    currentPageTip: gettext('当前第'),
+                    page: gettext('页'),
+                    periodicNamePlaceholder: gettext('请输入任务名称'),
+                    creatorPlaceholder: gettext('请输入创建人'),
+                    statusPlaceholder: gettext('请选择状态'),
+                    enabled: gettext('状态'),
+                    periodicName: gettext('名称'),
+                    editTitle: gettext('请暂停任务后再执行编辑操作'),
+                    enabledPlaceholder: gettext('请选择状态'),
+                    periodicTemplate: gettext('流程模板'),
+                    executeHistory: gettext('执行历史'),
+                    query: gettext('搜索'),
+                    reset: gettext('清空')
+                },
+                listLoading: true,
+                deleting: false,
+                currentPage: 1,
+                totalPage: 1,
+                countPerPage: 15,
+                totalCount: 0,
+                isDeleteDialogShow: false,
+                isAdvancedSerachShow: false,
+                creator: undefined,
+                enabled: undefined,
+                enabledList: [
+                    { 'id': 'true', 'name': gettext('启动') },
+                    { 'id': 'false', 'name': gettext('暂停') }
+                ],
+                selectedPeriodicId: undefined,
+                periodicList: [],
+                isModifyDialogShow: false,
+                selectedCron: undefined,
+                constants: undefined,
+                modifyDialogLoading: false,
+                selectedTemplateName: undefined,
+                periodicName: undefined,
+                enabledSync: -1
+            }
         },
-        onPageChange (page) {
-            this.currentPage = page
+        created () {
             this.getPeriodicList()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
         },
-        onSelectEnabled (enabled) {
-            this.enabled = enabled
-        },
-        async onSetEnable (item) {
-            try {
-                const data = {
-                    'taskId': item.id,
-                    'enabled': !item.enabled
+        methods: {
+            ...mapActions('periodic/', [
+                'loadPeriodicList',
+                'setPeriodicEnable',
+                'getPeriodic',
+                'deletePeriodic'
+            ]),
+            async getPeriodicList () {
+                this.listLoading = true
+                try {
+                    const data = {
+                        limit: this.countPerPage,
+                        offset: (this.currentPage - 1) * this.countPerPage,
+                        task__celery_task__enabled: this.enabled,
+                        task__creator__contains: this.creator,
+                        task__name__contains: this.periodicName
+                    }
+                    const periodicListData = await this.loadPeriodicList(data)
+                    const list = periodicListData.objects
+                    this.periodicList = list
+                    this.totalCount = periodicListData.meta.total_count
+                    const totalPage = Math.ceil(this.totalCount / this.countPerPage)
+                    if (!totalPage) {
+                        this.totalPage = 1
+                    } else {
+                        this.totalPage = totalPage
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.listLoading = false
                 }
-                const periodicData = await this.setPeriodicEnable(data)
-                if (periodicData.result) {
-                    const periodic = this.periodicList.find(periodic => periodic.id === item.id)
-                    periodic.enabled = !periodic.enabled
+            },
+            searchInputhandler () {
+                this.currentPage = 1
+                this.getPeriodicList()
+            },
+            onDeletePeriodic (id, name) {
+                this.isDeleteDialogShow = true
+                this.selectedDeleteTaskId = id
+                this.selectedTemplateName = name
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.getPeriodicList()
+            },
+            onSelectEnabled (enabled) {
+                this.enabled = enabled
+            },
+            async onSetEnable (item) {
+                try {
+                    const data = {
+                        'taskId': item.id,
+                        'enabled': !item.enabled
+                    }
+                    const periodicData = await this.setPeriodicEnable(data)
+                    if (periodicData.result) {
+                        const periodic = this.periodicList.find(periodic => periodic.id === item.id)
+                        periodic.enabled = !periodic.enabled
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onModifyCronPeriodic (item) {
-            const {enabled, id: taskId, cron} = item
-            if (enabled) {
-                return
-            }
-            const splitCron = this.splitPeriodicCron(cron)
-            this.selectedCron = splitCron
-            this.selectedPeriodicId = taskId
-            this.getPeriodicConstant(taskId)
-            this.isModifyDialogShow = true
-        },
-        onModifyPeriodicCancel () {
-            this.isModifyDialogShow = false
-        },
-        onModifyPeriodicConfirm () {
-            this.isModifyDialogShow = false
-            this.getPeriodicList()
-        },
-        async getPeriodicConstant (taskId) {
-            this.modifyDialogLoading = true
-            const data = {
-                'taskId': taskId
-            }
-            const periodic = await this.getPeriodic(data)
-            this.constants = periodic.form
-            this.modifyDialogLoading = false
-        },
-        onDeletePeriodicConfirm () {
-            this.deleteSelecedPeriodic()
-        },
-        async deleteSelecedPeriodic () {
-            if (this.deleting) {
-                return
-            }
-            try {
-                this.deleting = true
-                await this.deletePeriodic(this.selectedDeleteTaskId)
-                this.$bkMessage({
-                    'message': gettext('删除周期任务成功'),
-                    'theme': 'success'
-                })
-                this.isDeleteDialogShow = false
-                // 最后一页最后一条删除后，往前翻一页
-                if (
-                    this.currentPage > 1 &&
-                    this.totalPage === this.currentPage &&
-                    this.totalCount - (this.totalPage - 1) * this.countPerPage === 1
-                ) {
-                    this.currentPage -= 1
+            },
+            onModifyCronPeriodic (item) {
+                const { enabled, id: taskId, cron } = item
+                if (enabled) {
+                    return
                 }
+                const splitCron = this.splitPeriodicCron(cron)
+                this.selectedCron = splitCron
+                this.selectedPeriodicId = taskId
+                this.getPeriodicConstant(taskId)
+                this.isModifyDialogShow = true
+            },
+            onModifyPeriodicCancel () {
+                this.isModifyDialogShow = false
+            },
+            onModifyPeriodicConfirm () {
+                this.isModifyDialogShow = false
                 this.getPeriodicList()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.deleting = false
+            },
+            async getPeriodicConstant (taskId) {
+                this.modifyDialogLoading = true
+                const data = {
+                    'taskId': taskId
+                }
+                const periodic = await this.getPeriodic(data)
+                this.constants = periodic.form
+                this.modifyDialogLoading = false
+            },
+            onDeletePeriodicConfirm () {
+                this.deleteSelecedPeriodic()
+            },
+            async deleteSelecedPeriodic () {
+                if (this.deleting) {
+                    return
+                }
+                try {
+                    this.deleting = true
+                    await this.deletePeriodic(this.selectedDeleteTaskId)
+                    this.$bkMessage({
+                        'message': gettext('删除周期任务成功'),
+                        'theme': 'success'
+                    })
+                    this.isDeleteDialogShow = false
+                    // 最后一页最后一条删除后，往前翻一页
+                    if (
+                        this.currentPage > 1
+                        && this.totalPage === this.currentPage
+                        && this.totalCount - (this.totalPage - 1) * this.countPerPage === 1
+                    ) {
+                        this.currentPage -= 1
+                    }
+                    this.getPeriodicList()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.deleting = false
+                }
+            },
+            onDeletePeriodicCancel () {
+                this.isDeleteDialogShow = false
+            },
+            onClearSelectedEnabled () {
+                this.enabled = undefined
+            },
+            splitPeriodicCron (cron) {
+                return cron.split('(')[0].trim()
+            },
+            onResetForm () {
+                this.periodicName = undefined
+                this.creator = undefined
+                this.enabled = undefined
+                this.enabledSync = -1
+            },
+            onAdvanceShow () {
+                this.isAdvancedSerachShow = !this.isAdvancedSerachShow
             }
-        },
-        onDeletePeriodicCancel () {
-            this.isDeleteDialogShow = false
-        },
-        onClearSelectedEnabled () {
-            this.enabled = undefined
-        },
-        splitPeriodicCron (cron) {
-            return cron.split('(')[0].trim()
-        },
-        onResetForm () {
-            this.periodicName = undefined
-            this.creator = undefined
-            this.enabled = undefined
-            this.enabledSync = -1
-        },
-        onAdvanceShow () {
-            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
         }
     }
-}
 </script>
 <style lang='scss'>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/periodic/index.vue b/pipeline/blueflow/src/pages/periodic/index.vue
index adbebd58cc..25a08c5b89 100644
--- a/pipeline/blueflow/src/pages/periodic/index.vue
+++ b/pipeline/blueflow/src/pages/periodic/index.vue
@@ -13,8 +13,8 @@
     <router-view></router-view>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'layoutContent'
-}
+    import '@/utils/i18n.js'
+    export default {
+        name: 'layoutContent'
+    }
 </script>
diff --git a/pipeline/blueflow/src/pages/statistics/Appmaker/index.vue b/pipeline/blueflow/src/pages/statistics/Appmaker/index.vue
index 71bdb47649..5c1e5ec470 100644
--- a/pipeline/blueflow/src/pages/statistics/Appmaker/index.vue
+++ b/pipeline/blueflow/src/pages/statistics/Appmaker/index.vue
@@ -12,7 +12,7 @@
 <template>
     <div class="content-box">
         <div class="content-wrap">
-            <div class="content-dimesion" v-bkloading="{isLoading: isAppLicationLoading, opacity: 1}">
+            <div class="content-dimesion" v-bkloading="{ isLoading: isAppLicationLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.category}}</div>
                     <div class="content-date">
@@ -38,13 +38,13 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeCategoryTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': isDropdownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': isDropdownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="taskPlotData" :totalValue="taskToatal"></data-statistics>
+                <data-statistics :dimension-list="taskPlotData" :total-value="taskToatal"></data-statistics>
             </div>
-            <div class="content-wrap-right" v-bkloading="{isLoading: isCategoryLoading, opacity: 1}">
+            <div class="content-wrap-right" v-bkloading="{ isLoading: isCategoryLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.ownBusiness}}</div>
                     <div class="content-statistics">
@@ -71,11 +71,11 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeBusinessTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': isDropdownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': isDropdownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="ownBusinessData" :totalValue="businessTotal"></data-statistics>
+                <data-statistics :dimension-list="ownBusinessData" :total-value="businessTotal"></data-statistics>
             </div>
         </div>
         <div class="content-process-detail">
@@ -86,7 +86,7 @@
                             <div class="content-wrap-select">
                                 <label class="content-detail-label">{{i18n.applicationTime}}</label>
                                 <bk-date-range
-                                   :quick-select="true"
+                                    :quick-select="true"
                                     :start-date="tableStartTime"
                                     :end-date="tableEndTime"
                                     :end-date-max="endDateMax"
@@ -145,386 +145,385 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import DataStatistics from '../dataStatistics/index.vue'
-import {mapActions, mapState} from 'vuex'
-import {AnalysisMixins} from '@/mixins/js/analysisMixins.js'
-import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
-import { errorHandler } from '@/utils/errorHandler.js'
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import DataStatistics from '../dataStatistics/index.vue'
+    import { mapActions, mapState } from 'vuex'
+    import { AnalysisMixins } from '@/mixins/js/analysisMixins.js'
+    import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import moment from 'moment-timezone'
 
-const i18n = {
-    category: gettext('轻应用分类'),
-    ownBusiness: gettext('所属业务'),
-    applicationTime: gettext('轻应用创建时间'),
-    applicationDetails: gettext('轻应用详情'),
-    choiceCategory: gettext('选择分类'),
-    choiceBusiness: gettext('选择业务'),
-    choiceTime: gettext('选择时间'),
-    choice: gettext('请选择'),
-    atom: gettext('标准插件'),
-    choiceAllCategory: gettext('全部分类'),
-    choiceAllBusiness: gettext('全部业务'),
-    templateName: gettext('轻应用名称'),
-    createTime: gettext('创建时间'),
-    editTime: gettext('更新时间'),
-    editor: gettext('更新人'),
-    category: gettext('分类'),
-    instanceTotal: gettext('创建任务数')
-}
+    const i18n = {
+        ownBusiness: gettext('所属业务'),
+        applicationTime: gettext('轻应用创建时间'),
+        applicationDetails: gettext('轻应用详情'),
+        choiceCategory: gettext('选择分类'),
+        choiceBusiness: gettext('选择业务'),
+        choiceTime: gettext('选择时间'),
+        choice: gettext('请选择'),
+        atom: gettext('标准插件'),
+        choiceAllCategory: gettext('全部分类'),
+        choiceAllBusiness: gettext('全部业务'),
+        templateName: gettext('轻应用名称'),
+        createTime: gettext('创建时间'),
+        editTime: gettext('更新时间'),
+        editor: gettext('更新人'),
+        category: gettext('分类'),
+        instanceTotal: gettext('创建任务数')
+    }
 
-export default {
-    name: 'StatisticsAppmaker',
-    components: {
-        DataStatistics,
-        DataTablePagination
-    },
-    mixins: [AnalysisMixins],
-    data () {
-        return {
-            i18n: i18n,
-            bizCcId: undefined,
-            category: undefined,
-            choiceBusinessName: '',
-            choiceCategoryName: '',
-            isDropdownShow: false,
-            choiceDownShow: false,
-            datePickerRefShow: false,
-            businessPickerRefShow: false,
-            isAppLicationLoading: true,
-            isCategoryLoading: true,
-            isAppmakerLoading: true,
-            time: [0, 0],
-            taskPlotData: [],
-            ownBusinessData: [],
-            nodeData: [],
-            templateData: [],
-            templateTotal: 0,
-            taskToatal: 0,
-            businessTotal: 0,
-            templatePageIndex: 1,
-            templateLimit: 15,
-            templatePagination: {
-                limit: this.templateLimit,
-                pageIndex: this.templatePageIndex,
-                pageArray: this.dataTablePageArray
-            },
-            tabName: 'appmakerDetails',
-            nodePagination: {
-                limit: this.nodeLimit,
-                pageIndex: this.nodePageIndex,
-                pageArray: this.dataTablePageArray
-            },
-            atom: '',
-            businessTime: [0, 0],
-            components: [],
-            appmakerData: [],
-            appmakerTotal: 0,
-            appmakerPageIndex: 1,
-            appmakerLimit: 15,
-            appmakerPagination: {
-                limit: this.appmakerLimit,
-                pageIndex: this.appmakerPageIndex,
-                pageArray: this.dataTablePageArray
-            },
-            appmakerColumns: [
-                {
-                    prop: 'templateName',
-                    label: i18n.templateName,
-                    formatter: (row, column, cellValue, index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}appmaker/home/${row.businessId}">${row.templateName}</a>`
-                    }
-                },
-                {
-                    prop: 'businessName', // 识别id
-                    label: i18n.ownBusiness, // 表头显示名称
-                    align: 'center' // 对其格式，可选（right，left，center）
+    export default {
+        name: 'StatisticsAppmaker',
+        components: {
+            DataStatistics,
+            DataTablePagination
+        },
+        mixins: [AnalysisMixins],
+        data () {
+            return {
+                i18n: i18n,
+                bizCcId: undefined,
+                category: undefined,
+                choiceBusinessName: '',
+                choiceCategoryName: '',
+                isDropdownShow: false,
+                choiceDownShow: false,
+                datePickerRefShow: false,
+                businessPickerRefShow: false,
+                isAppLicationLoading: true,
+                isCategoryLoading: true,
+                isAppmakerLoading: true,
+                time: [0, 0],
+                taskPlotData: [],
+                ownBusinessData: [],
+                nodeData: [],
+                templateData: [],
+                templateTotal: 0,
+                taskToatal: 0,
+                businessTotal: 0,
+                templatePageIndex: 1,
+                templateLimit: 15,
+                templatePagination: {
+                    limit: this.templateLimit,
+                    pageIndex: this.templatePageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'createTime',
-                    label: i18n.createTime,
-                    align: 'center'
+                tabName: 'appmakerDetails',
+                nodePagination: {
+                    limit: this.nodeLimit,
+                    pageIndex: this.nodePageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'editTime',
-                    label: i18n.editTime,
-                    align: 'center',
-                    formatter: (row, column, cellValue) => {
-                        return `<span>${row.editTime || '--'}</span>`
-                    }
+                atom: '',
+                businessTime: [0, 0],
+                components: [],
+                appmakerData: [],
+                appmakerTotal: 0,
+                appmakerPageIndex: 1,
+                appmakerLimit: 15,
+                appmakerPagination: {
+                    limit: this.appmakerLimit,
+                    pageIndex: this.appmakerPageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'editor',
-                    label: i18n.editor,
-                    align: 'center',
-                    formatter: (row, column, cellValue) => {
-                        return `<span>${row.editor || '--'}</span>`
+                appmakerColumns: [
+                    {
+                        prop: 'templateName',
+                        label: i18n.templateName,
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}appmaker/home/${row.businessId}">${row.templateName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName', // 识别id
+                        label: i18n.ownBusiness, // 表头显示名称
+                        align: 'center' // 对其格式，可选（right，left，center）
+                    },
+                    {
+                        prop: 'createTime',
+                        label: i18n.createTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'editTime',
+                        label: i18n.editTime,
+                        align: 'center',
+                        formatter: (row, column, cellValue) => {
+                            return `<span>${row.editTime || '--'}</span>`
+                        }
+                    },
+                    {
+                        prop: 'editor',
+                        label: i18n.editor,
+                        align: 'center',
+                        formatter: (row, column, cellValue) => {
+                            return `<span>${row.editor || '--'}</span>`
+                        }
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'instanceTotal',
+                        label: i18n.instanceTotal,
+                        sortable: 'custom',
+                        align: 'center'
                     }
-                },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
-                },
-                {
-                    prop: 'instanceTotal',
-                    label: i18n.instanceTotal,
-                    sortable: 'custom',
-                    align: 'center'
-                }
-            ],
-            selectedCcId: -1,
-            selectedCategory: -1,
-            categoryStartTime: undefined,
-            categoryEndTime: undefined,
-            choiceBusiness: undefined,
-            tableStartTime: undefined,
-            tableEndTime: undefined,
-            businessStartTime: undefined,
-            businessEndTime: undefined,
-            choiceCategory: undefined,
-            endDateMax: '',
-            appmakerOrderBy: '-templateId',
-            businessSelected: 'all',
-            categorySelected: 'all'
-        }
-    },
-    computed: {
-        ...mapState({
-            allBusinessList: state => state.allBusinessList,
-            categorys: state => state.categorys,
-            site_url: state => state.site_url
-        }),
-        businessList () {
-            if (this.allBusinessList.length === 0) {
-                this.getBizList(1)
+                ],
+                selectedCcId: -1,
+                selectedCategory: -1,
+                categoryStartTime: undefined,
+                categoryEndTime: undefined,
+                choiceBusiness: undefined,
+                tableStartTime: undefined,
+                tableEndTime: undefined,
+                businessStartTime: undefined,
+                businessEndTime: undefined,
+                choiceCategory: undefined,
+                endDateMax: '',
+                appmakerOrderBy: '-templateId',
+                businessSelected: 'all',
+                categorySelected: 'all'
             }
-            const list = tools.deepClone(this.allBusinessList)
-            list.unshift({cc_id: undefined, cc_name: i18n.choiceAllBusiness})
-            return list
         },
-        categoryList () {
-            if (this.categorys.length === 0) {
-                this.getCategorys()
+        computed: {
+            ...mapState({
+                allBusinessList: state => state.allBusinessList,
+                categorys: state => state.categorys,
+                site_url: state => state.site_url
+            }),
+            businessList () {
+                if (this.allBusinessList.length === 0) {
+                    this.getBizList(1)
+                }
+                const list = tools.deepClone(this.allBusinessList)
+                list.unshift({ cc_id: undefined, cc_name: i18n.choiceAllBusiness })
+                return list
+            },
+            categoryList () {
+                if (this.categorys.length === 0) {
+                    this.getCategorys()
+                }
+                const list = tools.deepClone(this.categorys)
+                list.unshift({ value: 'all', name: i18n.choiceAllCategory })
+                return list
             }
-            const list = tools.deepClone(this.categorys)
-            list.unshift({value: 'all', name: i18n.choiceAllCategory})
-            return list
-        }
-    },
-    created () {
-        this.getDateTime()
-        this.choiceBusinessName = this.i18n.choiceAllBusiness
-        this.choiceCategoryName = this.i18n.choiceAllCategory
-    },
-    methods: {
-        ...mapActions('appmaker/', [
-            'queryAppmakerData'
-        ]),
-        ...mapActions([
-            'getBizList',
-            'getCategorys'
-        ]),
-        handleSizeChange (limit) {
-            this.limit = limit
-        },
-        handleIndexChange (pageIndex) {
-            this.pageIndex = pageIndex
         },
-        onAppmakerHandleSizeChange (limit) {
-            this.appmakerPageIndex = 1
-            this.appmakerLimit = limit
-            this.onAppMarkerInstance()
+        created () {
+            this.getDateTime()
+            this.choiceBusinessName = this.i18n.choiceAllBusiness
+            this.choiceCategoryName = this.i18n.choiceAllCategory
         },
-        onAppmakerHandleIndexChange (pageIndex) {
-            this.appmakerPageIndex = pageIndex
-            this.onAppMarkerInstance()
-        },
-        onAppmakerHandleSort (column, prop, order) {
-            order = column[0].order === 'ascending' ? '' : '-'
-            this.appmakerOrderBy = column[0].prop ?  order + column[0].prop : '-templateId'
-            this.onAppMarkerInstance()
-        },
-        onAppMarkerCategory (business, name) {
-            if (business) {
-                if (business === this.choiceBusiness) {
-                    // 相同的内容不需要再次查询
-                    return
+        methods: {
+            ...mapActions('appmaker/', [
+                'queryAppmakerData'
+            ]),
+            ...mapActions([
+                'getBizList',
+                'getCategorys'
+            ]),
+            handleSizeChange (limit) {
+                this.limit = limit
+            },
+            handleIndexChange (pageIndex) {
+                this.pageIndex = pageIndex
+            },
+            onAppmakerHandleSizeChange (limit) {
+                this.appmakerPageIndex = 1
+                this.appmakerLimit = limit
+                this.onAppMarkerInstance()
+            },
+            onAppmakerHandleIndexChange (pageIndex) {
+                this.appmakerPageIndex = pageIndex
+                this.onAppMarkerInstance()
+            },
+            onAppmakerHandleSort (column, prop, order) {
+                order = column[0].order === 'ascending' ? '' : '-'
+                this.appmakerOrderBy = column[0].prop ? order + column[0].prop : '-templateId'
+                this.onAppMarkerInstance()
+            },
+            onAppMarkerCategory (business, name) {
+                if (business) {
+                    if (business === this.choiceBusiness) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceBusiness = business
+                } else if (business === undefined) {
+                    if (this.choiceBusiness === undefined) {
+                        return
+                    }
+                    this.choiceBusiness = business
                 }
-                this.choiceBusiness = business
-            } else if (business === undefined) {
-                if (this.choiceBusiness === undefined) {
-                    return
+                const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
+                const data = {
+                    group_by: 'category',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusines
+                    })
                 }
-                this.choiceBusiness = business
-            }
-            const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
-            const data = {
-                group_by: 'category',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.choiceBusiness === 'all' ? "" : this.choiceBusines
-                })
-            }
-            this.appMakerData(data)
-        },
-        onAppMarkerBizCcid (category, name) {
-            if (category) {
-                if (category === this.choiceCategory) {
-                    // 相同的内容不需要再次查询
-                    return
+                this.appMakerData(data)
+            },
+            onAppMarkerBizCcid (category, name) {
+                if (category) {
+                    if (category === this.choiceCategory) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceCategory = category
+                } else if (category === undefined) {
+                    if (this.choiceCategory === undefined) {
+                        return
+                    }
+                    this.choiceCategory = category
+                }
+                const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
+                const data = {
+                    group_by: 'biz_cc_id',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        category: this.choiceCategory === 'all' ? '' : this.choiceCategory
+                    })
+                }
+                this.appMakerBusinessData(data)
+            },
+            async appMakerData (data) {
+                this.isAppLicationLoading = true
+                try {
+                    const templateData = await this.queryAppmakerData(data)
+                    this.taskPlotData = templateData.data.groups
+                    this.taskToatal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isAppLicationLoading = false
+                }
+            },
+            async appMakerBusinessData (data) {
+                this.isCategoryLoading = true
+                try {
+                    const templateData = await this.queryAppmakerData(data)
+                    this.ownBusinessData = templateData.data.groups
+                    this.businessTotal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isCategoryLoading = false
+                }
+            },
+            async appMakerInstanceData (data) {
+                this.isAppmakerLoading = true
+                try {
+                    const templateData = await this.queryAppmakerData(data)
+                    switch (data.group_by) {
+                        case 'appmaker_instance':
+                            this.appmakerData = templateData.data.groups
+                            this.appmakerTotal = templateData.data.total
+                            this.isAppmakerLoading = false
+                            break
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-                this.choiceCategory = category
-            } else if (category === undefined) {
-                if (this.choiceCategory === undefined) {
+            },
+            onAppMarkerInstance (oldValue = null, newValue = null) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
+                }
+                const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                const data = {
+                    group_by: 'appmaker_instance',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.bizCcId,
+                        category: this.category,
+                        order_by: this.appmakerOrderBy
+                    }),
+                    pageIndex: this.appmakerPageIndex,
+                    limit: this.appmakerLimit
+                }
+                this.appMakerInstanceData(data)
+            },
+            getDateTime () {
+                const date = new Date()
+                date.setHours(0, 0, 0)
+                const endTime = moment(date).format('YYYY-MM-DD')
+                this.tableEndTime = endTime
+                this.categoryEndTime = endTime
+                this.businessEndTime = endTime
+                this.endDateMax = endTime
+                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+                const startTime = moment(date).format('YYYY-MM-DD')
+                this.tableStartTime = startTime
+                this.categoryStartTime = startTime
+                this.businessStartTime = startTime
+            },
+            onDatePickerClick () {
+                this.datePickerRefShow = !this.datePickerRefShow
+                this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
+            },
+            onInstanceClick () {
+                this.businessPickerRefShow = !this.businessPickerRefShow
+                this.$refs.businessPickerRef.pickerVisible = this.businessPickerRefShow
+            },
+            onSelectedCategory (name, value) {
+                if (this.category === name) {
                     return
                 }
-                this.choiceCategory = category
-            }
-            const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
-            const data = {
-                group_by: 'biz_cc_id',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    category: this.choiceCategory === 'all' ? '' : this.choiceCategory
-                })
-            }
-            this.appMakerBusinessData(data)
-        },
-        async appMakerData (data) {
-            this.isAppLicationLoading = true
-            try {
-                const templateData = await this.queryAppmakerData(data)
-                this.taskPlotData = templateData.data.groups
-                this.taskToatal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isAppLicationLoading = false
-            }
-        },
-        async appMakerBusinessData (data) {
-            this.isCategoryLoading = true
-            try {
-                const templateData = await this.queryAppmakerData(data)
-                this.ownBusinessData = templateData.data.groups
-                this.businessTotal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isCategoryLoading = false
-            }
-        },
-        async appMakerInstanceData (data) {
-            this.isAppmakerLoading = true
-            try {
-                const templateData = await this.queryAppmakerData(data)
-                switch (data.group_by) {
-                    case 'appmaker_instance':
-                        this.appmakerData = templateData.data.groups
-                        this.appmakerTotal = templateData.data.total
-                        this.isAppmakerLoading = false
-                        break
+                this.category = name
+                this.resetPageIndex()
+                this.onAppMarkerInstance()
+            },
+            onSelectedBizCcId (name, value) {
+                if (this.bizCcId === name) {
+                    return
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onAppMarkerInstance (oldValue = null, newValue = null) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
+                this.bizCcId = name
                 this.resetPageIndex()
+                this.onAppMarkerInstance()
+            },
+            onClearBizCcId () {
+                this.selectedCcId = -1
+                this.bizCcId = undefined
+                this.resetPageIndex()
+                this.onAppMarkerInstance()
+            },
+            onClearCategory () {
+                this.selectedCategory = -1
+                this.category = undefined
+                this.resetPageIndex()
+                this.onAppMarkerInstance()
+            },
+            onChangeCategoryTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.categoryStartTime = dateArray[0]
+                    this.categoryEndTime = dateArray[1]
+                }
+                this.onAppMarkerCategory(null)
+            },
+            onChangeBusinessTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.businessStartTime = dateArray[0]
+                    this.businessEndTime = dateArray[1]
+                }
+                this.onAppMarkerBizCcid(null)
+            },
+            resetPageIndex () {
+                this.appmakerPageIndex = 1
+                this.appmakerPagination.pageIndex = 1
             }
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'appmaker_instance',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category,
-                    order_by: this.appmakerOrderBy
-                }),
-                pageIndex: this.appmakerPageIndex,
-                limit: this.appmakerLimit
-            }
-            this.appMakerInstanceData(data)
-        },
-        getDateTime () {
-            const date = new Date()
-            date.setHours(0, 0, 0)
-            const endTime = moment(date).format('YYYY-MM-DD')
-            this.tableEndTime = endTime
-            this.categoryEndTime = endTime
-            this.businessEndTime = endTime
-            this.endDateMax = endTime
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
-            const startTime = moment(date).format('YYYY-MM-DD')
-            this.tableStartTime = startTime
-            this.categoryStartTime = startTime
-            this.businessStartTime = startTime
-        },
-        onDatePickerClick () {
-            this.datePickerRefShow = !this.datePickerRefShow
-            this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
-        },
-        onInstanceClick () {
-            this.businessPickerRefShow = !this.businessPickerRefShow
-            this.$refs.businessPickerRef.pickerVisible = this.businessPickerRefShow
-        },
-        onSelectedCategory (name, value) {
-            if (this.category === name) {
-                return
-            }
-            this.category = name
-            this.resetPageIndex()
-            this.onAppMarkerInstance()
-        },
-        onSelectedBizCcId (name, value) {
-            if (this.bizCcId === name) {
-                return
-            }
-            this.bizCcId = name
-            this.resetPageIndex()
-            this.onAppMarkerInstance()
-        },
-        onClearBizCcId () {
-            this.selectedCcId = -1
-            this.bizCcId = undefined
-            this.resetPageIndex()
-            this.onAppMarkerInstance()
-        },
-        onClearCategory () {
-            this.selectedCategory = -1
-            this.category = undefined
-            this.resetPageIndex()
-            this.onAppMarkerInstance()
-        },
-        onChangeCategoryTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.categoryStartTime = dateArray[0]
-                this.categoryEndTime = dateArray[1]
-            }
-            this.onAppMarkerCategory(null)
-        },
-        onChangeBusinessTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.businessStartTime = dateArray[0]
-                this.businessEndTime = dateArray[1]
-            }
-            this.onAppMarkerBizCcid(null)
-        },
-        resetPageIndex () {
-            this.appmakerPageIndex = 1
-            this.appmakerPagination.pageIndex = 1
         }
     }
-}
 </script>
diff --git a/pipeline/blueflow/src/pages/statistics/Atom/index.vue b/pipeline/blueflow/src/pages/statistics/Atom/index.vue
index 47b2d94d93..90390faed5 100644
--- a/pipeline/blueflow/src/pages/statistics/Atom/index.vue
+++ b/pipeline/blueflow/src/pages/statistics/Atom/index.vue
@@ -12,7 +12,7 @@
 <template>
     <div class="content-box">
         <div class="content-wrap">
-            <div class="content-dimesion atom-statistics" v-bkloading="{isLoading: isCitationLoading, opacity: 1}">
+            <div class="content-dimesion atom-statistics" v-bkloading="{ isLoading: isCitationLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.numberCitations}}</div>
                     <div class="content-date">
@@ -39,11 +39,11 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeBusinessTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': choiceDownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': choiceDownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="taskPlotData" :totalValue="taskTotal"></data-statistics>
+                <data-statistics :dimension-list="taskPlotData" :total-value="taskTotal"></data-statistics>
             </div>
         </div>
         <div class="content-process-detail">
@@ -266,583 +266,583 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import DataStatistics from '../dataStatistics/index.vue'
-import {mapActions, mapState} from 'vuex'
-import {AnalysisMixins} from '@/mixins/js/analysisMixins.js'
-import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
-import { errorHandler } from '@/utils/errorHandler.js'
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import DataStatistics from '../dataStatistics/index.vue'
+    import { mapActions, mapState } from 'vuex'
+    import { AnalysisMixins } from '@/mixins/js/analysisMixins.js'
+    import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import moment from 'moment-timezone'
 
-const i18n = {
-    numberCitations: gettext('引用次数'),
-    processDetail: gettext('流程详情'),
-    executionTime: gettext('执行耗时'),
-    taskDetail: gettext('任务详情'),
-    timeLimit: gettext('时间范围'),
-    taskStartTime: gettext('任务开始时间'),
-    choiceCategory: gettext('选择分类'),
-    choiceBusiness: gettext('选择业务'),
-    choice: gettext('请选择'),
-    atom: gettext('标准插件'),
-    choiceAllCategory: gettext('全部分类'),
-    choiceAllBusiness: gettext('全部业务'),
-    templateName: gettext('流程名称'),
-    businessName: gettext('所属业务'),
-    editTime: gettext('更新时间'),
-    editor: gettext('更新人'),
-    category: gettext('分类'),
-    instanceName: gettext('任务名称'),
-    createTime: gettext('创建时间'),
-    creator: gettext('创建人'),
-    atomTotal: gettext('标准插件数'),
-    subprocessTotal: gettext('子流程数'),
-    gatewaysTotal: gettext('网关数'),
-    componentName: gettext('标准插件'),
-    executeTimes: gettext('执行次数'),
-    failedTimes: gettext('失败次数'),
-    avgExecuteTime: gettext('平均执行耗时(秒)'),
-    failedTimesPercent: gettext('失败率')
-}
+    const i18n = {
+        numberCitations: gettext('引用次数'),
+        processDetail: gettext('流程详情'),
+        executionTime: gettext('执行耗时'),
+        taskDetail: gettext('任务详情'),
+        timeLimit: gettext('时间范围'),
+        taskStartTime: gettext('任务开始时间'),
+        choiceCategory: gettext('选择分类'),
+        choiceBusiness: gettext('选择业务'),
+        choice: gettext('请选择'),
+        atom: gettext('标准插件'),
+        choiceAllCategory: gettext('全部分类'),
+        choiceAllBusiness: gettext('全部业务'),
+        templateName: gettext('流程名称'),
+        businessName: gettext('所属业务'),
+        editTime: gettext('更新时间'),
+        editor: gettext('更新人'),
+        category: gettext('分类'),
+        instanceName: gettext('任务名称'),
+        createTime: gettext('创建时间'),
+        creator: gettext('创建人'),
+        atomTotal: gettext('标准插件数'),
+        subprocessTotal: gettext('子流程数'),
+        gatewaysTotal: gettext('网关数'),
+        componentName: gettext('标准插件'),
+        executeTimes: gettext('执行次数'),
+        failedTimes: gettext('失败次数'),
+        avgExecuteTime: gettext('平均执行耗时(秒)'),
+        failedTimesPercent: gettext('失败率')
+    }
 
-export default {
-    name: 'StatisticsAtom',
-    components: {
-        DataStatistics,
-        DataTablePagination
-    },
-    mixins: [AnalysisMixins],
-    data () {
-        return {
-            i18n: i18n,
-            bizCcId: undefined,
-            category: undefined,
-            choiceBusinessName: '',
-            isDropdownShow: false,
-            choiceDownShow: false,
-            datePickerRefShow: false,
-            isTemplateLoading: true,
-            isCitationLoading: true,
-            isExecutionLoading: true,
-            isInstanceLoading: true,
-            time: [0, 0],
-            taskPlotData: [],
-            nodeData: [],
-            templateData: [],
-            templateTotal: 0,
-            templatePageIndex: 1,
-            templateLimit: 15,
-            templatePagination: {
-                limit: this.templateLimit,
-                pageIndex: this.templatePageIndex,
-                pageArray: this.dataTablePageArray
-            },
-            templateColumns: [
-                {
-                    prop: 'templateName', // 识别id
-                    label: i18n.templateName,// 表头显示名称
-                    width: '285',
-                    title: 'templateName',
-                    formatter: (row, column, cellValue, index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}template/edit/${row.businessId}/?template_id=${row.templateId}">${row.templateName}</a>`
-                    }
+    export default {
+        name: 'StatisticsAtom',
+        components: {
+            DataStatistics,
+            DataTablePagination
+        },
+        mixins: [AnalysisMixins],
+        data () {
+            return {
+                i18n: i18n,
+                bizCcId: undefined,
+                category: undefined,
+                choiceBusinessName: '',
+                isDropdownShow: false,
+                choiceDownShow: false,
+                datePickerRefShow: false,
+                isTemplateLoading: true,
+                isCitationLoading: true,
+                isExecutionLoading: true,
+                isInstanceLoading: true,
+                time: [0, 0],
+                taskPlotData: [],
+                nodeData: [],
+                templateData: [],
+                templateTotal: 0,
+                templatePageIndex: 1,
+                templateLimit: 15,
+                templatePagination: {
+                    limit: this.templateLimit,
+                    pageIndex: this.templatePageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'businessName', // 识别id
-                    label: i18n.businessName, // 表头显示名称
-                    align: 'center'// 对其格式，可选（right，left，center）
+                templateColumns: [
+                    {
+                        prop: 'templateName', // 识别id
+                        label: i18n.templateName, // 表头显示名称
+                        width: '285',
+                        title: 'templateName',
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}template/edit/${row.businessId}/?template_id=${row.templateId}">${row.templateName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName', // 识别id
+                        label: i18n.businessName, // 表头显示名称
+                        align: 'center'// 对其格式，可选（right，left，center）
+                    },
+                    {
+                        prop: 'editTime',
+                        label: i18n.editTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'editor',
+                        label: i18n.editor,
+                        align: 'center',
+                        formatter: (row, column, cellValue) => {
+                            return `<span>${row.editor || '--'}</span>`
+                        }
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    }
+                ],
+                tabName: 'processDetails',
+                nodePagination: {
+                    // 分页操作
+                    limit: this.nodeLimit,
+                    pageIndex: this.nodePageIndex,
+                    pageArray: this.dataTablePageArray // 公共js文件获取
                 },
-                {
-                    prop: 'editTime',
-                    label: i18n.editTime,
-                    align: 'center'
+                nodeColumns: [
+                    {
+                        prop: 'instanceName',
+                        label: i18n.instanceName,
+                        width: '285',
+                        title: 'instanceName',
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName', // 识别id
+                        label: i18n.businessName, // 表头显示名称
+                        align: 'center' // 对其格式，可选（right，left，center）
+                    },
+                    {
+                        prop: 'createTime',
+                        label: i18n.createTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'creator',
+                        label: i18n.creator,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'atomTotal',
+                        label: i18n.atomTotal,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'subprocessTotal',
+                        label: i18n.subprocessTotal,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'gatewaysTotal',
+                        label: i18n.gatewaysTotal,
+                        align: 'center'
+                    }
+                ],
+                atom: '',
+                components: [],
+                executeData: [],
+                executeTotal: 0,
+                executePageIndex: 1,
+                executeLimit: 15,
+                executePagination: {
+                    limit: this.executeLimit,
+                    pageIndex: this.executePageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'editor',
-                    label: i18n.editor,
-                    align: 'center',
-                    formatter: (row, column, cellValue) => {
-                        return `<span>${row.editor || '--'}</span>`
+                executeColumns: [
+                    {
+                        prop: 'componentName',
+                        label: i18n.componentName
+                    },
+                    {
+                        prop: 'executeTimes',
+                        label: i18n.executeTimes,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'failedTimes',
+                        label: i18n.failedTimes,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'avgExecuteTime',
+                        label: i18n.avgExecuteTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'failedTimesPercent',
+                        label: i18n.failedTimesPercent,
+                        align: 'center'
                     }
+                ],
+                instanceData: [],
+                instanceTotal: 0,
+                taskTotal: 0,
+                instancePageIndex: 1,
+                instanceLimit: 15,
+                instancePagination: {
+                    limit: this.instanceLimit,
+                    pageIndex: this.instancePageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
+                instanceColumns: [
+                    {
+                        prop: 'instanceName',
+                        label: i18n.instanceName,
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName',
+                        label: i18n.businessName,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'createTime',
+                        label: i18n.createTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'creator',
+                        label: i18n.creator,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    }
+                ],
+                selectedCcId: -1,
+                selectedCategory: -1,
+                selectedAtom: -1,
+                choiceBusiness: undefined,
+                tableStartTime: undefined,
+                tableEndTime: undefined,
+                businessStartTime: undefined,
+                businessEndTime: undefined,
+                endDateMax: '',
+                businessSelected: 'all'
+            }
+        },
+        computed: {
+            ...mapState({
+                allBusinessList: state => state.allBusinessList,
+                categorys: state => state.categorys,
+                site_url: state => state.site_url
+            }),
+            businessList () {
+                if (this.allBusinessList.length === 0) {
+                    this.getBizList(1)
+                }
+                const list = tools.deepClone(this.allBusinessList)
+                list.unshift({ cc_id: undefined, cc_name: i18n.choiceAllBusiness })
+                return list
+            },
+            componentsList () {
+                // 选择器组件不支持拼接的字段，需要转换
+                if (this.components) {
+                    return this.components.map((item) => {
+                        item.name = item.group_name + '-' + item.name
+                        return item
+                    })
                 }
-            ],
-            tabName: 'processDetails',
-            nodePagination: {
-                // 分页操作
-                limit: this.nodeLimit,
-                pageIndex: this.nodePageIndex,
-                pageArray: this.dataTablePageArray // 公共js文件获取
+                return []
+            }
+        },
+        created () {
+            this.getDateTime()
+            this.choiceBusinessName = this.i18n.choiceAllBusiness
+        },
+        mounted () {
+            if (this.components.length === 0) {
+                this.getComponentList()
+            }
+        },
+        methods: {
+            ...mapActions('atomList/', [
+                'queryAtomData',
+                'loadSingleAtomList'
+            ]),
+            ...mapActions([
+                'getBizList',
+                'getCategorys'
+            ]),
+            onTemplateHandleSizeChange (limit) {
+                this.templatePageIndex = 1
+                this.templateLimit = limit
+                this.onAtomTemplateData()
             },
-            nodeColumns: [
-                {
-                    prop: 'instanceName',
-                    label: i18n.instanceName,
-                    width: '285',
-                    title: 'instanceName',
-                    formatter: (row, column, cellValue, index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+            onTemplateHandleIndexChange (pageIndex) {
+                this.templatePageIndex = pageIndex
+                this.onAtomTemplateData()
+            },
+            onExecuteHandleSizeChange (limit) {
+                this.executePageIndex = 1
+                this.executeLimit = limit
+                this.onAtomExecuteData()
+            },
+            onExecuteHandleIndexChange (pageIndex) {
+                this.executePageIndex = pageIndex
+                this.onAtomExecuteData()
+            },
+            onInstanceHandleSizeChange (limit) {
+                this.instancePageIndex = 1
+                this.instanceLimit = limit
+                this.onAtomInstanceData()
+            },
+            onInstanceHandleIndexChange (pageIndex) {
+                this.instancePageIndex = pageIndex
+                this.onAtomInstanceData()
+            },
+            onAtomCiteData (business, name) {
+                if (business) {
+                    if (business === this.choiceBusiness) {
+                        // 相同的内容不需要再次查询
+                        return
                     }
-                },
-                {
-                    prop: 'businessName', // 识别id
-                    label: i18n.businessName, // 表头显示名称
-                    align: 'center' // 对其格式，可选（right，left，center）
-                },
-                {
-                    prop: 'createTime',
-                    label: i18n.createTime,
-                    align: 'center'
-                },
-                {
-                    prop: 'creator',
-                    label: i18n.creator,
-                    align: 'center'
-                },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
-                },
-                {
-                    prop: 'atomTotal',
-                    label: i18n.atomTotal,
-                    align: 'center'
-                },
-                {
-                    prop: 'subprocessTotal',
-                    label: i18n.subprocessTotal,
-                    align: 'center'
-                },
-                {
-                    prop: 'gatewaysTotal',
-                    label: i18n.gatewaysTotal,
-                    align: 'center'
+                    this.choiceBusiness = business
+                } else if (business === undefined) {
+                    if (this.choiceBusiness === undefined) {
+                        return
+                    }
+                    this.choiceBusiness = business
                 }
-            ],
-            atom: '',
-            components: [],
-            executeData: [],
-            executeTotal: 0,
-            executePageIndex: 1,
-            executeLimit: 15,
-            executePagination: {
-                limit: this.executeLimit,
-                pageIndex: this.executePageIndex,
-                pageArray: this.dataTablePageArray
+                const time = this.getUTCTime([this.businessStartTime, this.businessEndTime])
+                const data = {
+                    group_by: 'atom_cite',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusiness
+                    })
+                }
+                this.atomData(data)
             },
-            executeColumns: [
-                {
-                    prop: 'componentName',
-                    label: i18n.componentName
-                },
-                {
-                    prop: 'executeTimes',
-                    label: i18n.executeTimes,
-                    align: 'center'
-                },
-                {
-                    prop: 'failedTimes',
-                    label: i18n.failedTimes,
-                    align: 'center'
-                },
-                {
-                    prop: 'avgExecuteTime',
-                    label: i18n.avgExecuteTime,
-                    align: 'center'
-                },
-                {
-                    prop: 'failedTimesPercent',
-                    label: i18n.failedTimesPercent,
-                    align: 'center'
+            onAtomTemplateData (oldValue = null, newValue = null) {
+                if (this.tabName !== 'processDetails' || this.atom === '') {
+                    // 防止不同界面进行触发接口调用
+                    // 防止标准插件数据未获取就发送数据
+                    return
+                }
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
+                }
+                this.isTemplateLoading = true
+                const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                const data = {
+                    group_by: 'atom_template',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.bizCcId,
+                        category: this.category,
+                        component_code: this.atom
+                    }),
+                    pageIndex: this.templatePageIndex,
+                    limit: this.templateLimit
+                }
+                try {
+                    this.atomTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            ],
-            instanceData: [],
-            instanceTotal: 0,
-            taskTotal: 0,
-            instancePageIndex: 1,
-            instanceLimit: 15,
-            instancePagination: {
-                limit: this.instanceLimit,
-                pageIndex: this.instancePageIndex,
-                pageArray: this.dataTablePageArray
             },
-            instanceColumns: [
-                {
-                    prop: 'instanceName',
-                    label: i18n.instanceName,
-                    formatter: (row, column, cellValue, index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+            onAtomExecuteData (oldValue = null, newValue = null) {
+                if (this.tabName !== 'executionTime') {
+                    // 防止不同界面进行触发接口调用
+                    return
+                }
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
+                }
+                this.isExecutionLoading = true
+                const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                const data = {
+                    group_by: 'atom_execute',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.bizCcId,
+                        category: this.category
+                    }),
+                    pageIndex: this.executePageIndex,
+                    limit: this.executeLimit
+                }
+                try {
+                    this.atomTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async atomTableData (data) {
+                try {
+                    const templateData = await this.queryAtomData(data)
+                    switch (data.group_by) {
+                        case 'atom_template':
+                            this.templateData = templateData.data.groups
+                            this.templateTotal = templateData.data.total
+                            this.isTemplateLoading = false
+                            break
+                        case 'atom_execute':
+                            this.executeData = templateData.data.groups
+                            this.executeTotal = templateData.data.total
+                            this.isExecutionLoading = false
+                            break
+                        case 'atom_instance':
+                            this.instanceData = templateData.data.groups
+                            this.instanceTotal = templateData.data.total
+                            this.isInstanceLoading = false
+                            break
                     }
-                },
-                {
-                    prop: 'businessName',
-                    label: i18n.businessName,
-                    align: 'center'
-                },
-                {
-                    prop: 'createTime',
-                    label: i18n.createTime,
-                    align: 'center'
-                },
-                {
-                    prop: 'creator',
-                    label: i18n.creator,
-                    align: 'center'
-                },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            ],
-            selectedCcId: -1,
-            selectedCategory: -1,
-            selectedAtom: -1,
-            choiceBusiness: undefined,
-            tableStartTime: undefined,
-            tableEndTime: undefined,
-            businessStartTime: undefined,
-            businessEndTime: undefined,
-            endDateMax: '',
-            businessSelected: 'all'
-        }
-    },
-    computed: {
-        ...mapState({
-            allBusinessList: state => state.allBusinessList,
-            categorys: state => state.categorys,
-            site_url: state => state.site_url
-        }),
-        businessList () {
-            if (this.allBusinessList.length === 0) {
-                this.getBizList(1)
-            }
-            const list = tools.deepClone(this.allBusinessList)
-            list.unshift({cc_id: undefined, cc_name: i18n.choiceAllBusiness})
-            return list
-        },
-        componentsList () {
-            // 选择器组件不支持拼接的字段，需要转换
-            if (this.components) {
-                return this.components.map((item) => {
-                    item.name = item.group_name + '-' + item.name
-                    return item
-                })
-            }
-            return []
-        }
-    },
-    created () {
-        this.getDateTime()
-        this.choiceBusinessName = this.i18n.choiceAllBusiness
-    },
-    mounted () {
-        if (this.components.length === 0) {
-            this.getComponentList()
-        }
-    },
-    methods: {
-        ...mapActions('atomList/', [
-            'queryAtomData',
-            'loadSingleAtomList'
-        ]),
-        ...mapActions([
-            'getBizList',
-            'getCategorys'
-        ]),
-        onTemplateHandleSizeChange (limit) {
-            this.templatePageIndex = 1
-            this.templateLimit = limit
-            this.onAtomTemplateData()
-        },
-        onTemplateHandleIndexChange (pageIndex) {
-            this.templatePageIndex = pageIndex
-            this.onAtomTemplateData()
-        },
-        onExecuteHandleSizeChange (limit) {
-            this.executePageIndex = 1
-            this.executeLimit = limit
-            this.onAtomExecuteData()
-        },
-        onExecuteHandleIndexChange (pageIndex) {
-            this.executePageIndex = pageIndex
-            this.onAtomExecuteData()
-        },
-        onInstanceHandleSizeChange (limit) {
-            this.instancePageIndex = 1
-            this.instanceLimit = limit
-            this.onAtomInstanceData()
-        },
-        onInstanceHandleIndexChange (pageIndex) {
-            this.instancePageIndex = pageIndex
-            this.onAtomInstanceData()
-        },
-        onAtomCiteData (business, name) {
-            if (business) {
-                if (business === this.choiceBusiness) {
-                    // 相同的内容不需要再次查询
+            },
+            async atomData (data) {
+                this.isCitationLoading = true
+                try {
+                    const templateData = await this.queryAtomData(data)
+                    this.taskPlotData = templateData.data.groups
+                    this.taskTotal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isCitationLoading = false
+                }
+            },
+            onAtomInstanceData (oldValue = null, newValue = null) {
+                if (this.tabName !== 'taskDetails') {
+                    // 防止不同界面进行触发接口调用
                     return
                 }
-                this.choiceBusiness = business
-            } else if (business === undefined) {
-                if (this.choiceBusiness === undefined) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
+                }
+                this.isInstanceLoading = true
+                const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                const data = {
+                    group_by: 'atom_instance',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.bizCcId,
+                        category: this.category,
+                        component_code: this.atom
+                    }),
+                    pageIndex: this.instancePageIndex,
+                    limit: this.instanceLimit
+                }
+                try {
+                    this.atomTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async getComponentList () {
+                try {
+                    this.components = await this.loadSingleAtomList()
+                    this.atom = this.components[0].code
+                    this.selectedAtom = this.atom
+                    this.onAtomTemplateData(null)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            getDateTime () {
+                const date = new Date()
+                date.setHours(0, 0, 0)
+                const endTime = moment(date).format('YYYY-MM-DD')
+                this.tableEndTime = endTime
+                this.businessEndTime = endTime
+                this.endDateMax = endTime
+                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+                const startTime = moment(date).format('YYYY-MM-DD')
+                this.tableStartTime = startTime
+                this.businessStartTime = startTime
+            },
+            onChangeTabPanel (name) {
+                this.tabName = name
+                switch (name) {
+                    case 'processDetails' :
+                        this.onAtomTemplateData()
+                        break
+                    case 'executionTime' :
+                        this.onAtomExecuteData()
+                        break
+                    case 'taskDetails':
+                        this.onAtomInstanceData()
+                        break
+                }
+            },
+            onDatePickerClick () {
+                this.datePickerRefShow = !this.datePickerRefShow
+                this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
+            },
+            onSelectedCategory (name, value) {
+                if (this.category === name) {
                     return
                 }
-                this.choiceBusiness = business
-            }
-            const time = this.getUTCTime([this.businessStartTime, this.businessEndTime])
-            const data = {
-                group_by: 'atom_cite',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusiness
-                })
-            }
-            this.atomData(data)
-        },
-        onAtomTemplateData (oldValue = null, newValue = null) {
-            if (this.tabName !== 'processDetails' || this.atom === '') {
-                // 防止不同界面进行触发接口调用
-                // 防止标准插件数据未获取就发送数据
-                return
-            }
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
+                this.category = name
                 this.resetPageIndex()
-            }
-            this.isTemplateLoading = true
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'atom_template',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category,
-                    component_code: this.atom
-                }),
-                pageIndex: this.templatePageIndex,
-                limit: this.templateLimit
-            }
-            try {
-                this.atomTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onAtomExecuteData (oldValue = null, newValue = null) {
-            if (this.tabName !== 'executionTime') {
-                // 防止不同界面进行触发接口调用
-                return
-            }
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
+                this.onChangeTabPanel(this.tabName)
+            },
+            onSelectedBizCcId (name, value) {
+                if (this.bizCcId === name) {
+                    return
+                }
+                this.bizCcId = name
                 this.resetPageIndex()
-            }
-            this.isExecutionLoading = true
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'atom_execute',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category
-                }),
-                pageIndex: this.executePageIndex,
-                limit: this.executeLimit
-            }
-            try {
-                this.atomTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async atomTableData (data) {
-            try {
-                const templateData = await this.queryAtomData(data)
-                switch (data.group_by) {
-                    case 'atom_template':
-                        this.templateData = templateData.data.groups
-                        this.templateTotal = templateData.data.total
-                        this.isTemplateLoading = false
-                        break
-                    case 'atom_execute':
-                        this.executeData = templateData.data.groups
-                        this.executeTotal = templateData.data.total
-                        this.isExecutionLoading = false
+                this.onChangeTabPanel(this.tabName)
+            },
+            onSelectedAtom (name, value) {
+                if (this.atom === name) {
+                    return
+                }
+                this.atom = name
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearBizCcId () {
+                this.selectedCcId = -1
+                this.bizCcId = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearCategory () {
+                this.selectedCategory = -1
+                this.category = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearAtom () {
+                this.selectedAtom = -1
+                this.atom = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onChangeBusinessTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.businessStartTime = dateArray[0]
+                    this.businessEndTime = dateArray[1]
+                }
+                this.onAtomCiteData(null)
+            },
+            resetPageIndex () {
+                switch (this.tabName) {
+                    case 'processDetails':
+                        this.templatePageIndex = 1
+                        this.templatePagination.pageIndex = 1
                         break
-                    case 'atom_instance':
-                        this.instanceData = templateData.data.groups
-                        this.instanceTotal = templateData.data.total
-                        this.isInstanceLoading = false
+                    case 'exectionTime':
+                        this.executePageIndex = 1
+                        this.executePagination.pageIndex = 1
                         break
+                    case 'taskDetails':
+                        this.instancePageIndex = 1
+                        this.instancePagination.pageIndex = 1
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async atomData (data) {
-            this.isCitationLoading = true
-            try  {
-                const templateData = await this.queryAtomData(data)
-                this.taskPlotData = templateData.data.groups
-                this.taskTotal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isCitationLoading = false
-            }
-        },
-        onAtomInstanceData (oldValue = null, newValue = null) {
-            if (this.tabName !== 'taskDetails') {
-                // 防止不同界面进行触发接口调用
-                return
-            }
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
-                this.resetPageIndex()
-            }
-            this.isInstanceLoading = true
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'atom_instance',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category,
-                    component_code: this.atom
-                }),
-                pageIndex: this.instancePageIndex,
-                limit: this.instanceLimit
-            }
-            try {
-                this.atomTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async getComponentList () {
-            try {
-                this.components = await this.loadSingleAtomList()
-                this.atom = this.components[0].code
-                this.selectedAtom = this.atom
-                this.onAtomTemplateData(null)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        getDateTime () {
-            const date = new Date()
-            date.setHours(0, 0, 0)
-            const endTime = moment(date).format('YYYY-MM-DD')
-            this.tableEndTime = endTime
-            this.businessEndTime = endTime
-            this.endDateMax = endTime
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
-            const startTime = moment(date).format('YYYY-MM-DD')
-            this.tableStartTime = startTime
-            this.businessStartTime = startTime
-        },
-        onChangeTabPanel (name) {
-            this.tabName = name
-            switch (name) {
-                case 'processDetails' :
-                    this.onAtomTemplateData()
-                    break
-                case 'executionTime' :
-                    this.onAtomExecuteData()
-                    break
-                case 'taskDetails':
-                    this.onAtomInstanceData()
-                    break
-            }
-        },
-        onDatePickerClick () {
-            this.datePickerRefShow = !this.datePickerRefShow
-            this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
-        },
-        onSelectedCategory (name, value) {
-            if (this.category === name) {
-                return
-            }
-            this.category = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onSelectedBizCcId (name, value) {
-            if (this.bizCcId === name) {
-                return
-            }
-            this.bizCcId = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onSelectedAtom (name, value) {
-            if (this.atom === name) {
-                return
-            }
-            this.atom = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearBizCcId () {
-            this.selectedCcId = -1
-            this.bizCcId = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearCategory () {
-            this.selectedCategory = -1
-            this.category = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearAtom () {
-            this.selectedAtom = -1
-            this.atom = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onChangeBusinessTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.businessStartTime = dateArray[0]
-                this.businessEndTime = dateArray[1]
-            }
-            this.onAtomCiteData(null)
-        },
-        resetPageIndex () {
-            switch (this.tabName) {
-                case 'processDetails':
-                    this.templatePageIndex = 1
-                    this.templatePagination.pageIndex = 1
-                    break
-                case 'exectionTime':
-                    this.executePageIndex = 1
-                    this.executePagination.pageIndex = 1
-                    break
-                case 'taskDetails':
-                    this.instancePageIndex = 1
-                    this.instancePagination.pageIndex = 1
             }
         }
     }
-}
 </script>
 
 <style lang="scss">
diff --git a/pipeline/blueflow/src/pages/statistics/Instance/index.vue b/pipeline/blueflow/src/pages/statistics/Instance/index.vue
index c825f6d2e1..7789a4244b 100644
--- a/pipeline/blueflow/src/pages/statistics/Instance/index.vue
+++ b/pipeline/blueflow/src/pages/statistics/Instance/index.vue
@@ -12,7 +12,7 @@
 <template>
     <div class="content-box">
         <div class="content-wrap">
-            <div class="content-dimesion" v-bkloading="{isLoading: isInstanceLoading, opacity: 1}">
+            <div class="content-dimesion" v-bkloading="{ isLoading: isInstanceLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.taskCategory}}</div>
                     <div class="content-date">
@@ -38,18 +38,18 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeCategoryTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': choiceDownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': choiceDownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="taskPlotData" :totalValue="taskTotal"></data-statistics>
+                <data-statistics :dimension-list="taskPlotData" :total-value="taskTotal"></data-statistics>
             </div>
-            <div class="content-wrap-right" v-bkloading="{isLoading: isBuinsessLoading, opacity: 1}">
+            <div class="content-wrap-right" v-bkloading="{ isLoading: isBuinsessLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.ownBusiness}}</div>
                     <div class="content-statistics">
                         <div class="content-business">
-                             <bk-selector
+                            <bk-selector
                                 :list="categoryList"
                                 :display-key="'name'"
                                 :setting-name="'value'"
@@ -72,14 +72,14 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeBusinessTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': choiceDownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': choiceDownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="ownBusinessData" :totalValue="ownBusinessTotal"></data-statistics>
+                <data-statistics :dimension-list="ownBusinessData" :total-value="ownBusinessTotal"></data-statistics>
             </div>
         </div>
-        <div class="content-task-wrap" v-bkloading="{isLoading: isInstanceTypeLoading, opacity: 1}">
+        <div class="content-task-wrap" v-bkloading="{ isLoading: isInstanceTypeLoading, opacity: 1 }">
             <div class="clearfix">
                 <div class="content-title">{{i18n.instanceTime}}</div>
                 <div class="content-task-instance">
@@ -100,7 +100,7 @@
                     </div>
                     <div class="content-instance-time">
                         <!--业务选择-->
-                         <bk-selector
+                        <bk-selector
                             :list="businessList"
                             :display-key="'cc_name'"
                             :setting-name="'cc_id'"
@@ -114,7 +114,7 @@
                     </div>
                     <div class="content-instance-time">
                         <!--分类选择-->
-                         <bk-selector
+                        <bk-selector
                             :list="categoryList"
                             :display-key="'name'"
                             :setting-name="'value'"
@@ -136,11 +136,11 @@
                             :end-date-max="endDateMax"
                             @change="onInstanceTime">
                         </bk-date-range>
-                        <i :class="['bk-icon icon-angle-down',{'icon-flip': choiceDownShow}]"></i>
+                        <i :class="['bk-icon icon-angle-down',{ 'icon-flip': choiceDownShow }]"></i>
                     </div>
                 </div>
             </div>
-            <data-statistics :timeTypeList="instanceTypeData" :totalValue="instanceTypeTotal"></data-statistics>
+            <data-statistics :time-type-list="instanceTypeData" :total-value="instanceTypeTotal"></data-statistics>
         </div>
         <div class="content-process-detail">
             <bk-tab :type="'fill'" :active-name="tabName" @tab-changed="onChangeTabPanel">
@@ -269,586 +269,586 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import DataStatistics from '../dataStatistics/index.vue'
-import {mapActions, mapState} from 'vuex'
-import {AnalysisMixins} from '@/mixins/js/analysisMixins.js'
-import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
-import { errorHandler } from '@/utils/errorHandler.js'
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import DataStatistics from '../dataStatistics/index.vue'
+    import { mapActions, mapState } from 'vuex'
+    import { AnalysisMixins } from '@/mixins/js/analysisMixins.js'
+    import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import moment from 'moment-timezone'
 
-const i18n = {
-    taskCategory: gettext('任务分类'),
-    ownBusiness: gettext('所属业务'),
-    taskDetail: gettext('任务详情'),
-    executionName: gettext('执行耗时'),
-    timeLimit: gettext('时间范围'),
-    choiceCategory: gettext('选择分类'),
-    choiceBusiness: gettext('选择业务'),
-    instanceTime: gettext('时间维度'),
-    day: gettext('天'),
-    choice: gettext('请选择'),
-    choiceAllCategory: gettext('全部分类'),
-    choiceAllBusiness: gettext('全部业务'),
-    instanceName: gettext('任务名称'),
-    createTime: gettext('创建时间'),
-    creator: gettext('创建人'),
-    atomTotal: gettext('标准插件数'),
-    subprocessTotal: gettext('子流程数'),
-    gatewaysTotal: gettext('网关数'),
-    category: gettext('分类'),
-    month: gettext('月'),
-    executeTime: gettext('耗时(秒)')
-}
+    const i18n = {
+        taskCategory: gettext('任务分类'),
+        ownBusiness: gettext('所属业务'),
+        taskDetail: gettext('任务详情'),
+        executionName: gettext('执行耗时'),
+        timeLimit: gettext('时间范围'),
+        choiceCategory: gettext('选择分类'),
+        choiceBusiness: gettext('选择业务'),
+        instanceTime: gettext('时间维度'),
+        day: gettext('天'),
+        choice: gettext('请选择'),
+        choiceAllCategory: gettext('全部分类'),
+        choiceAllBusiness: gettext('全部业务'),
+        instanceName: gettext('任务名称'),
+        createTime: gettext('创建时间'),
+        creator: gettext('创建人'),
+        atomTotal: gettext('标准插件数'),
+        subprocessTotal: gettext('子流程数'),
+        gatewaysTotal: gettext('网关数'),
+        category: gettext('分类'),
+        month: gettext('月'),
+        executeTime: gettext('耗时(秒)')
+    }
 
-export default {
-    name: 'StatisticsInstance',
-    components: {
-        DataStatistics,
-        DataTablePagination
-    },
-    mixins: [AnalysisMixins],
-    data () {
-        return {
-            i18n: i18n,
-            bizCcId: undefined,
-            category: undefined,
-            datePickerRefShow: false,
-            businessPickerRefShow: false,
-            isDropdownShow: false,
-            choiceDownShow: false,
-            isInstanceLoading: true,
-            isBuinsessLoading: true,
-            isDetailsLoading: true,
-            isNodeLoading: true,
-            taskPlotData: [],
-            ownBusinessData: [],
-            instanceTypeData: [],
-            nodeData: [],
-            nodeTotal: 0,
-            taskTotal: 0,
-            ownBusinessTotal: 0,
-            nodePageIndex: 1,
-            nodeLimit: 15,
-            nodeOrderBy: '-instanceId',
-            detailsOrderBy: '-instanceId',
-            tabName: 'taskDetails',
-            nodePagination: {
-                // 分页操作
-                limit: this.nodeLimit,
-                pageIndex: this.nodePageIndex,
-                pageArray: this.dataTablePageArray // 公共js文件获取
-            },
-            nodeColumns: [
-                {
-                    prop: 'instanceName',
-                    label: i18n.instanceName,
-                    width: '285',
-                    title: 'instanceName',
-                    formatter: (row, column, cellValue,index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
-                    }
-                },
-                {
-                    prop: 'businessName', // 识别id
-                    label: i18n.ownBusiness, // 表头显示名称
-                    align: 'center' // 对其格式，可选（right，left，center）
-                },
-                {
-                    prop: 'createTime',
-                    label: i18n.createTime,
-                    align: 'center'
-                },
-                {
-                    prop: 'creator',
-                    label: i18n.creator,
-                    align: 'center'
-                },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
-                },
-                {
-                    prop: 'atomTotal',
-                    label: i18n.atomTotal,
-                    sortable: 'custom',
-                    align: 'center'
-                },
-                {
-                    prop: 'subprocessTotal',
-                    label: i18n.subprocessTotal,
-                    sortable: 'custom',
-                    align: 'center'
-                },
-                {
-                    prop: 'gatewaysTotal',
-                    label: i18n.gatewaysTotal,
-                    sortable: 'custom',
-                    align: 'center'
-                }
-            ],
-            detailsData: [],
-            detailsTotal: 0,
-            detailsPageIndex: 1,
-            detailsLimit: 15,
-            detailsPagination: {
-                limit: this.detailsLimit,
-                pageIndex: this.detailsPageIndex,
-                pageArray: this.dataTablePageArray
-            },
-            taskDimensionArray: [
-                {
-                    name: i18n.day,
-                    value: 'day'
+    export default {
+        name: 'StatisticsInstance',
+        components: {
+            DataStatistics,
+            DataTablePagination
+        },
+        mixins: [AnalysisMixins],
+        data () {
+            return {
+                i18n: i18n,
+                bizCcId: undefined,
+                category: undefined,
+                datePickerRefShow: false,
+                businessPickerRefShow: false,
+                isDropdownShow: false,
+                choiceDownShow: false,
+                isInstanceLoading: true,
+                isBuinsessLoading: true,
+                isDetailsLoading: true,
+                isNodeLoading: true,
+                taskPlotData: [],
+                ownBusinessData: [],
+                instanceTypeData: [],
+                nodeData: [],
+                nodeTotal: 0,
+                taskTotal: 0,
+                ownBusinessTotal: 0,
+                nodePageIndex: 1,
+                nodeLimit: 15,
+                nodeOrderBy: '-instanceId',
+                detailsOrderBy: '-instanceId',
+                tabName: 'taskDetails',
+                nodePagination: {
+                    // 分页操作
+                    limit: this.nodeLimit,
+                    pageIndex: this.nodePageIndex,
+                    pageArray: this.dataTablePageArray // 公共js文件获取
                 },
-                {
-                    name: i18n.month,
-                    value: 'month'
-                }
-            ],
-            detailsColumns: [
-                {
-                    prop: 'instanceName',
-                    label: i18n.instanceName,
-                    title: 'instanceName',
-                    formatter: (row, column, cellValue,index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+                nodeColumns: [
+                    {
+                        prop: 'instanceName',
+                        label: i18n.instanceName,
+                        width: '285',
+                        title: 'instanceName',
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName', // 识别id
+                        label: i18n.ownBusiness, // 表头显示名称
+                        align: 'center' // 对其格式，可选（right，left，center）
+                    },
+                    {
+                        prop: 'createTime',
+                        label: i18n.createTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'creator',
+                        label: i18n.creator,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'atomTotal',
+                        label: i18n.atomTotal,
+                        sortable: 'custom',
+                        align: 'center'
+                    },
+                    {
+                        prop: 'subprocessTotal',
+                        label: i18n.subprocessTotal,
+                        sortable: 'custom',
+                        align: 'center'
+                    },
+                    {
+                        prop: 'gatewaysTotal',
+                        label: i18n.gatewaysTotal,
+                        sortable: 'custom',
+                        align: 'center'
                     }
+                ],
+                detailsData: [],
+                detailsTotal: 0,
+                detailsPageIndex: 1,
+                detailsLimit: 15,
+                detailsPagination: {
+                    limit: this.detailsLimit,
+                    pageIndex: this.detailsPageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'businessName',
-                    label: i18n.ownBusiness,
-                    align: 'center'
-                },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
-                },
-                {
-                    prop: 'executeTime',
-                    label: i18n.executeTime,
-                    align: 'center'
-                },
-                {
-                    prop: 'creator',
-                    label: i18n.creator,
-                    align: 'center'
-                }
-            ],
-            instanceType: 'day',
-            selectedCcId: -1,
-            selectedCategory: -1,
-            categoryStartTime: undefined,
-            categoryEndTime: undefined,
-            choiceBusiness: undefined,
-            tableStartTime: undefined,
-            tableEndTime: undefined,
-            businessStartTime: undefined,
-            businessEndTime: undefined,
-            choiceCategory: undefined,
-            endDateMax: '',
-            choiceTimeTypeName: '',
-            choiceTimeType: 'day',
-            choiceTimeTypeCategoryName: '',
-            choiceTimeTypeCategory: undefined,
-            choiceTimeTypeBusinessName: '',
-            choiceTimeTypeBusiness: undefined,
-            timeTypeStartTime: undefined,
-            timeTypeEndTime: undefined,
-            isInstanceTypeLoading: false,
-            instanceTypeTotal: 0,
-            businessSelected: 'all',
-            categorySelected: 'all',
-            choiceDate: 'day'
-        }
-    },
-    computed: {
-        ...mapState({
-            allBusinessList: state => state.allBusinessList,
-            categorys: state => state.categorys,
-            site_url: state => state.site_url
-        }),
-        businessList () {
-            if (this.allBusinessList.length === 0) {
-                this.getBizList(1)
+                taskDimensionArray: [
+                    {
+                        name: i18n.day,
+                        value: 'day'
+                    },
+                    {
+                        name: i18n.month,
+                        value: 'month'
+                    }
+                ],
+                detailsColumns: [
+                    {
+                        prop: 'instanceName',
+                        label: i18n.instanceName,
+                        title: 'instanceName',
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}taskflow/execute/${row.businessId}/?instance_id=${row.instanceId}">${row.instanceName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName',
+                        label: i18n.ownBusiness,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'executeTime',
+                        label: i18n.executeTime,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'creator',
+                        label: i18n.creator,
+                        align: 'center'
+                    }
+                ],
+                instanceType: 'day',
+                selectedCcId: -1,
+                selectedCategory: -1,
+                categoryStartTime: undefined,
+                categoryEndTime: undefined,
+                choiceBusiness: undefined,
+                tableStartTime: undefined,
+                tableEndTime: undefined,
+                businessStartTime: undefined,
+                businessEndTime: undefined,
+                choiceCategory: undefined,
+                endDateMax: '',
+                choiceTimeTypeName: '',
+                choiceTimeType: 'day',
+                choiceTimeTypeCategoryName: '',
+                choiceTimeTypeCategory: undefined,
+                choiceTimeTypeBusinessName: '',
+                choiceTimeTypeBusiness: undefined,
+                timeTypeStartTime: undefined,
+                timeTypeEndTime: undefined,
+                isInstanceTypeLoading: false,
+                instanceTypeTotal: 0,
+                businessSelected: 'all',
+                categorySelected: 'all',
+                choiceDate: 'day'
             }
-            const list = tools.deepClone(this.allBusinessList)
-            list.unshift({cc_id: undefined, cc_name: i18n.choiceAllBusiness})
-            return list
         },
-        categoryList () {
-            if (this.categorys.length === 0) {
-                this.getCategorys()
+        computed: {
+            ...mapState({
+                allBusinessList: state => state.allBusinessList,
+                categorys: state => state.categorys,
+                site_url: state => state.site_url
+            }),
+            businessList () {
+                if (this.allBusinessList.length === 0) {
+                    this.getBizList(1)
+                }
+                const list = tools.deepClone(this.allBusinessList)
+                list.unshift({ cc_id: undefined, cc_name: i18n.choiceAllBusiness })
+                return list
+            },
+            categoryList () {
+                if (this.categorys.length === 0) {
+                    this.getCategorys()
+                }
+                const list = tools.deepClone(this.categorys)
+                list.unshift({ value: 'all', name: i18n.choiceAllCategory })
+                return list
             }
-            const list = tools.deepClone(this.categorys)
-            list.unshift({value: 'all', name: i18n.choiceAllCategory})
-            return list
-        }
-    },
-    created () {
-        this.getDateTime()
-        this.choiceTimeTypeName = this.i18n.day
-    },
-    methods: {
-        ...mapActions('task/', [
-            'queryInstanceData'
-        ]),
-        ...mapActions([
-            'getBizList',
-            'getCategorys'
-        ]),
-        onNodeHandleSizeChange (limit) {
-            this.nodePageIndex = 1
-            this.nodeLimit = limit
-            this.onInstanceNode()
-        },
-        onNodeHandleIndexChange (pageIndex) {
-            this.nodePageIndex = pageIndex
-            this.onInstanceNode()
         },
-        onNodeSortChange (column, prop, order) {
-            order = column[0].order === 'ascending' ? '' : '-'
-            this.nodeOrderBy = column[0].prop ?  order + column[0].prop : '-instanceId'
-            this.onInstanceNode()
+        created () {
+            this.getDateTime()
+            this.choiceTimeTypeName = this.i18n.day
         },
-        onInstanceCategory (business, name) {
-            if (business) {
-                if (business === this.choiceBusiness) {
-                    // 相同的内容不需要再次查询
-                    return
+        methods: {
+            ...mapActions('task/', [
+                'queryInstanceData'
+            ]),
+            ...mapActions([
+                'getBizList',
+                'getCategorys'
+            ]),
+            onNodeHandleSizeChange (limit) {
+                this.nodePageIndex = 1
+                this.nodeLimit = limit
+                this.onInstanceNode()
+            },
+            onNodeHandleIndexChange (pageIndex) {
+                this.nodePageIndex = pageIndex
+                this.onInstanceNode()
+            },
+            onNodeSortChange (column, prop, order) {
+                order = column[0].order === 'ascending' ? '' : '-'
+                this.nodeOrderBy = column[0].prop ? order + column[0].prop : '-instanceId'
+                this.onInstanceNode()
+            },
+            onInstanceCategory (business, name) {
+                if (business) {
+                    if (business === this.choiceBusiness) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceBusiness = business
+                } else if (business === undefined) {
+                    if (this.choiceBusiness === undefined) {
+                        return
+                    }
+                    this.choiceBusiness = business
                 }
-                this.choiceBusiness = business
-            } else if (business === undefined) {
-                if (this.choiceBusiness === undefined) {
-                    return
+                const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
+                const data = {
+                    group_by: 'category',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusiness
+                    })
                 }
-                this.choiceBusiness = business
-            }
-            const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
-            const data = {
-                group_by: 'category',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusiness
-                })
-            }
-            this.statisticsCategory(data)
-        },
-        onInstanceBizCcId (category, name) {
-            if (category) {
-                if (category === this.choiceCategory) {
-                    // 相同的内容不需要再次查询
-                    return
+                this.statisticsCategory(data)
+            },
+            onInstanceBizCcId (category, name) {
+                if (category) {
+                    if (category === this.choiceCategory) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceCategory = category
+                } else if (category === undefined) {
+                    if (this.choiceCategory === undefined) {
+                        return
+                    }
+                    this.choiceCategory = category
                 }
-                this.choiceCategory = category
-            } else if (category === undefined) {
-                if (this.choiceCategory === undefined) {
+                const time = this.getUTCTime([this.businessStartTime, this.businessEndTime])
+                const data = {
+                    group_by: 'biz_cc_id',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        category: this.choiceCategory === 'all' ? '' : this.choiceCategory
+                    })
+                }
+                this.statisticsBizCcId(data)
+            },
+            onInstanceNode (oldValue = null, newValue = null) {
+                if (this.tabName !== 'taskDetails') {
+                    // 防止不同界面进行触发接口调用
                     return
                 }
-                this.choiceCategory = category
-            }
-            const time = this.getUTCTime([this.businessStartTime, this.businessEndTime])
-            const data = {
-                group_by: 'biz_cc_id',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    category: this.choiceCategory === 'all' ? '' : this.choiceCategory
-                })
-            }
-            this.statisticsBizCcId(data)
-        },
-        onInstanceNode (oldValue = null, newValue = null) {
-            if (this.tabName !== 'taskDetails') {
-                // 防止不同界面进行触发接口调用
-                return
-            }
-            this.isNodeLoading = true
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
-                this.resetPageIndex()
-            }
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'instance_node',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category,
-                    order_by: this.nodeOrderBy
-                }),
-                pageIndex: this.nodePageIndex,
-                limit: this.nodeLimit
-            }
-            try {
-                this.instanceDataTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onInstanceTime (oldValue = null, newValue = null) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.timeTypeStartTime = dateArray[0]
-                this.timeTypeEndTime = dateArray[1]
-            }
-            this.isInstanceTypeLoading = true
-            const time = this.getUTCTime([this.timeTypeStartTime, this.timeTypeEndTime])
-            const data = {
-                group_by: 'instance_time',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.choiceTimeTypeBusiness === 'all' ? '' :　this.choiceTimeTypeBusiness,
-                    category: this.choiceTimeTypeCategory === 'all' ? '' :　this.choiceTimeTypeCategory,
-                    type: this.choiceTimeType
-                })
-            }
-            this.instanceTimeData(data)
-        },
-        async instanceDataTableData (data) {
-            try {
-                const templateData = await this.queryInstanceData(data)
-                switch (data.group_by) {
-                    case 'instance_node':
-                        this.nodeData = templateData.data.groups
-                        this.nodeTotal = templateData.data.total
-                        this.isNodeLoading = false
-                        break
-                    case 'instance_details':
-                        this.detailsData = templateData.data.groups
-                        this.detailsTotal = templateData.data.total
-                        this.isDetailsLoading = false
-                        break
+                this.isNodeLoading = true
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async statisticsBizCcId (data) {
-            this.isBuinsessLoading = true
-            try {
-                const templateData = await this.queryInstanceData(data)
-                this.ownBusinessData = templateData.data.groups
-                this.ownBusinessTotal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isBuinsessLoading = false
-            }
-        },
-        async instanceTimeData (data) {
-            try {
-                const templateData = await this.queryInstanceData(data)
-                this.instanceTypeData = templateData.data.groups
-                this.instanceTypeTotal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isInstanceTypeLoading = false
-            }
-        },
-        async statisticsCategory (data) {
-            this.isInstanceLoading = true
-            try {
-                const templateData = await this.queryInstanceData(data)
-                this.taskPlotData = templateData.data.groups
-                this.taskTotal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isInstanceLoading = false
-            }
-        },
-        onDetailsHandleSizeChange (limit) {
-            this.detailsPageIndex = 1
-            this.detailsLimit = limit
-            this.onInstanceDetailsData()
-        },
-        onDetailsHandleIndexChange (pageIndex) {
-            this.detailsPageIndex = pageIndex
-            this.onInstanceDetailsData()
-        },
-        detailsHandleSortChange (column, prop, order) {
-            order = column[0].order === 'ascending' ? '' : '-'
-            this.detailsOrderBy = column[0].prop ?  order + column[0].prop : '-instanceId'
-            this.onInstanceDetailsData()
-        },
-        onInstanceDetailsData (oldValue = null, newValue = null) {
-            if (this.tabName !== 'exectionTime') {
-                // 防止不同界面进行触发接口调用
-                return
-            }
-            this.isDetailsLoading = true
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
-                this.resetPageIndex()
-            }
-            try {
                 const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
                 const data = {
-                    group_by: 'instance_details',
+                    group_by: 'instance_node',
                     conditions: JSON.stringify({
                         create_time: time[0],
                         finish_time: time[1],
                         biz_cc_id: this.bizCcId,
                         category: this.category,
-                        order_by: this.detailsOrderBy
+                        order_by: this.nodeOrderBy
                     }),
-                    pageIndex: this.detailsPageIndex,
-                    limit: this.detailsLimit
+                    pageIndex: this.nodePageIndex,
+                    limit: this.nodeLimit
                 }
-                this.instanceDataTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onChangeTabPanel (name) {
-            this.tabName = name
-            if (name === 'taskDetails') {
-                this.onInstanceNode()
-            } else {
+                try {
+                    this.instanceDataTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onInstanceTime (oldValue = null, newValue = null) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.timeTypeStartTime = dateArray[0]
+                    this.timeTypeEndTime = dateArray[1]
+                }
+                this.isInstanceTypeLoading = true
+                const time = this.getUTCTime([this.timeTypeStartTime, this.timeTypeEndTime])
+                const data = {
+                    group_by: 'instance_time',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.choiceTimeTypeBusiness === 'all' ? '' : this.choiceTimeTypeBusiness,
+                        category: this.choiceTimeTypeCategory === 'all' ? '' : this.choiceTimeTypeCategory,
+                        type: this.choiceTimeType
+                    })
+                }
+                this.instanceTimeData(data)
+            },
+            async instanceDataTableData (data) {
+                try {
+                    const templateData = await this.queryInstanceData(data)
+                    switch (data.group_by) {
+                        case 'instance_node':
+                            this.nodeData = templateData.data.groups
+                            this.nodeTotal = templateData.data.total
+                            this.isNodeLoading = false
+                            break
+                        case 'instance_details':
+                            this.detailsData = templateData.data.groups
+                            this.detailsTotal = templateData.data.total
+                            this.isDetailsLoading = false
+                            break
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async statisticsBizCcId (data) {
+                this.isBuinsessLoading = true
+                try {
+                    const templateData = await this.queryInstanceData(data)
+                    this.ownBusinessData = templateData.data.groups
+                    this.ownBusinessTotal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isBuinsessLoading = false
+                }
+            },
+            async instanceTimeData (data) {
+                try {
+                    const templateData = await this.queryInstanceData(data)
+                    this.instanceTypeData = templateData.data.groups
+                    this.instanceTypeTotal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isInstanceTypeLoading = false
+                }
+            },
+            async statisticsCategory (data) {
+                this.isInstanceLoading = true
+                try {
+                    const templateData = await this.queryInstanceData(data)
+                    this.taskPlotData = templateData.data.groups
+                    this.taskTotal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isInstanceLoading = false
+                }
+            },
+            onDetailsHandleSizeChange (limit) {
+                this.detailsPageIndex = 1
+                this.detailsLimit = limit
                 this.onInstanceDetailsData()
-            }
-        },
-        getDateTime () {
-            const date = new Date()
-            date.setHours(0, 0, 0)
-            const endTime = moment(date).format('YYYY-MM-DD')
-            this.tableEndTime = endTime
-            this.categoryEndTime = endTime
-            this.businessEndTime = endTime
-            this.endDateMax = endTime
-            this.timeTypeEndTime = endTime
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
-            const startTime = moment(date).format('YYYY-MM-DD')
-            this.tableStartTime = startTime
-            this.categoryStartTime = startTime
-            this.businessStartTime = startTime
-            this.timeTypeStartTime = startTime
-        },
-        onDatePickerClick () {
-            this.datePickerRefShow = !this.datePickerRefShow
-            this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
-        },
-        onInstanceClick () {
-            this.businessPickerRefShow = !this.businessPickerRefShow
-            this.$refs.businessPickerRef.pickerVisible = this.businessPickerRefShow
-        },
-        onSelectedCategory (name, value) {
-            if (this.category === name) {
-                return
-            }
-            this.category = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onSelectedBizCcId (name, value) {
-            if (this.bizCcId === name) {
-                return
-            }
-            this.bizCcId = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearBizCcId () {
-            this.selectedCcId = -1
-            this.bizCcId = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearCategory () {
-            this.selectedCategory = -1
-            this.category = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onChangeCategoryTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.categoryStartTime = dateArray[0]
-                this.categoryEndTime = dateArray[1]
-            }
-            this.onInstanceCategory(null)
-        },
-        onChangeBusinessTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.businessStartTime = dateArray[0]
-                this.businessEndTime = dateArray[1]
-            }
-            this.onInstanceBizCcId(null)
-        },
-        resetPageIndex () {
-            switch (this.tabName) {
-                case 'taskDetails':
-                    this.nodePageIndex = 1
-                    this.nodePagination.pageIndex = 1
-                    break
-                case 'exectionTime':
-                    this.detailsPageIndex = 1
-                    this.detailsPagination.pageIndex = 1
-                    break
-            }
-        },
-        onChangeTimeTypeCategory (category, name) {
-            if (category) {
-                if (category === this.choiceTimeTypeCategory) {
-                    // 相同的内容不需要再次查询
+            },
+            onDetailsHandleIndexChange (pageIndex) {
+                this.detailsPageIndex = pageIndex
+                this.onInstanceDetailsData()
+            },
+            detailsHandleSortChange (column, prop, order) {
+                order = column[0].order === 'ascending' ? '' : '-'
+                this.detailsOrderBy = column[0].prop ? order + column[0].prop : '-instanceId'
+                this.onInstanceDetailsData()
+            },
+            onInstanceDetailsData (oldValue = null, newValue = null) {
+                if (this.tabName !== 'exectionTime') {
+                    // 防止不同界面进行触发接口调用
                     return
                 }
-                this.choiceTimeTypeCategory = category
-            } else if (category === undefined) {
-                if (this.choiceTimeTypeCategory === undefined) {
-                    return
+                this.isDetailsLoading = true
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
                 }
-                this.choiceTimeTypeCategory = category
-            }
-            this.onInstanceTime()
-        },
-        onChangeTimeTypeBusiness (business, name) {
-            if (business) {
-                if (business === this.choiceTimeTypeBusiness) {
-                    // 相同的内容不需要再次查询
-                    return
+                try {
+                    const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                    const data = {
+                        group_by: 'instance_details',
+                        conditions: JSON.stringify({
+                            create_time: time[0],
+                            finish_time: time[1],
+                            biz_cc_id: this.bizCcId,
+                            category: this.category,
+                            order_by: this.detailsOrderBy
+                        }),
+                        pageIndex: this.detailsPageIndex,
+                        limit: this.detailsLimit
+                    }
+                    this.instanceDataTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-                this.choiceTimeTypeBusiness = business
-            } else if (business === undefined) {
-                if (this.choiceTimeTypeBusiness === undefined) {
-                    return
+            },
+            onChangeTabPanel (name) {
+                this.tabName = name
+                if (name === 'taskDetails') {
+                    this.onInstanceNode()
+                } else {
+                    this.onInstanceDetailsData()
                 }
-                this.choiceTimeTypeBusiness = business
-            }
-            this.onInstanceTime()
-        },
-        onChangeTimeType (type, name) {
-            if (type) {
-                if (type === this.choiceTimeType) {
-                    // 相同的内容不需要再次查询
+            },
+            getDateTime () {
+                const date = new Date()
+                date.setHours(0, 0, 0)
+                const endTime = moment(date).format('YYYY-MM-DD')
+                this.tableEndTime = endTime
+                this.categoryEndTime = endTime
+                this.businessEndTime = endTime
+                this.endDateMax = endTime
+                this.timeTypeEndTime = endTime
+                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+                const startTime = moment(date).format('YYYY-MM-DD')
+                this.tableStartTime = startTime
+                this.categoryStartTime = startTime
+                this.businessStartTime = startTime
+                this.timeTypeStartTime = startTime
+            },
+            onDatePickerClick () {
+                this.datePickerRefShow = !this.datePickerRefShow
+                this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
+            },
+            onInstanceClick () {
+                this.businessPickerRefShow = !this.businessPickerRefShow
+                this.$refs.businessPickerRef.pickerVisible = this.businessPickerRefShow
+            },
+            onSelectedCategory (name, value) {
+                if (this.category === name) {
                     return
                 }
-                this.choiceTimeType = type
-                this.choiceTimeTypeName = name
-            } else if (type === undefined) {
-                if (this.choiceTimeType === undefined) {
+                this.category = name
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onSelectedBizCcId (name, value) {
+                if (this.bizCcId === name) {
                     return
                 }
-                this.choiceTimeType = type
-                if (name) {
+                this.bizCcId = name
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearBizCcId () {
+                this.selectedCcId = -1
+                this.bizCcId = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearCategory () {
+                this.selectedCategory = -1
+                this.category = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onChangeCategoryTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.categoryStartTime = dateArray[0]
+                    this.categoryEndTime = dateArray[1]
+                }
+                this.onInstanceCategory(null)
+            },
+            onChangeBusinessTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.businessStartTime = dateArray[0]
+                    this.businessEndTime = dateArray[1]
+                }
+                this.onInstanceBizCcId(null)
+            },
+            resetPageIndex () {
+                switch (this.tabName) {
+                    case 'taskDetails':
+                        this.nodePageIndex = 1
+                        this.nodePagination.pageIndex = 1
+                        break
+                    case 'exectionTime':
+                        this.detailsPageIndex = 1
+                        this.detailsPagination.pageIndex = 1
+                        break
+                }
+            },
+            onChangeTimeTypeCategory (category, name) {
+                if (category) {
+                    if (category === this.choiceTimeTypeCategory) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceTimeTypeCategory = category
+                } else if (category === undefined) {
+                    if (this.choiceTimeTypeCategory === undefined) {
+                        return
+                    }
+                    this.choiceTimeTypeCategory = category
+                }
+                this.onInstanceTime()
+            },
+            onChangeTimeTypeBusiness (business, name) {
+                if (business) {
+                    if (business === this.choiceTimeTypeBusiness) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceTimeTypeBusiness = business
+                } else if (business === undefined) {
+                    if (this.choiceTimeTypeBusiness === undefined) {
+                        return
+                    }
+                    this.choiceTimeTypeBusiness = business
+                }
+                this.onInstanceTime()
+            },
+            onChangeTimeType (type, name) {
+                if (type) {
+                    if (type === this.choiceTimeType) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceTimeType = type
                     this.choiceTimeTypeName = name
+                } else if (type === undefined) {
+                    if (this.choiceTimeType === undefined) {
+                        return
+                    }
+                    this.choiceTimeType = type
+                    if (name) {
+                        this.choiceTimeTypeName = name
+                    }
                 }
+                this.onInstanceTime()
             }
-            this.onInstanceTime()
         }
     }
-}
 </script>
diff --git a/pipeline/blueflow/src/pages/statistics/Template/index.vue b/pipeline/blueflow/src/pages/statistics/Template/index.vue
index 280e4b385e..7473eb20a7 100644
--- a/pipeline/blueflow/src/pages/statistics/Template/index.vue
+++ b/pipeline/blueflow/src/pages/statistics/Template/index.vue
@@ -12,7 +12,7 @@
 <template>
     <div class="content-box">
         <div class="content-wrap">
-            <div class="content-dimesion" v-bkloading="{isLoading: isCateLoading, opacity: 1}">
+            <div class="content-dimesion" v-bkloading="{ isLoading: isCateLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.flowCategory}}</div>
                     <div class="content-date">
@@ -38,13 +38,13 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeCategoryTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': isDropdownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': isDropdownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="classiFicationArray" :totalValue="ficationTotal"></data-statistics>
+                <data-statistics :dimension-list="classiFicationArray" :total-value="ficationTotal"></data-statistics>
             </div>
-            <div class="content-wrap-right" v-bkloading="{isLoading: isBussLoading, opacity: 1}">
+            <div class="content-wrap-right" v-bkloading="{ isLoading: isBussLoading, opacity: 1 }">
                 <div class="clearfix">
                     <div class="content-title">{{i18n.flowBusiness}}</div>
                     <div class="content-statistics">
@@ -72,11 +72,11 @@
                                 :end-date-max="endDateMax"
                                 @change="onChangeBusinessTime">
                             </bk-date-range>
-                            <i :class="['bk-icon icon-angle-down', {'icon-flip': choiceDownShow}]"></i>
+                            <i :class="['bk-icon icon-angle-down', { 'icon-flip': choiceDownShow }]"></i>
                         </div>
                     </div>
                 </div>
-                <data-statistics :dimensionList="taskStatistArray" :totalValue="total"></data-statistics>
+                <data-statistics :dimension-list="taskStatistArray" :total-value="total"></data-statistics>
             </div>
         </div>
         <div class="content-process-detail">
@@ -189,502 +189,501 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import DataStatistics from '../dataStatistics/index.vue'
-import {mapActions, mapState} from 'vuex'
-import {AnalysisMixins} from '@/mixins/js/analysisMixins.js'
-import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
-import { errorHandler } from '@/utils/errorHandler.js'
-import moment from 'moment-timezone'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import DataStatistics from '../dataStatistics/index.vue'
+    import { mapActions, mapState } from 'vuex'
+    import { AnalysisMixins } from '@/mixins/js/analysisMixins.js'
+    import DataTablePagination from '@/components/common/dataTable/DataTablePagination.vue'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import moment from 'moment-timezone'
 
-const i18n = {
-    flowCategory: gettext('流程分类'),
-    flowBusiness: gettext('所属业务'),
-    choiceCategory: gettext('选择分类'),
-    choiceBusiness: gettext('选择业务'),
-    timeLimit: gettext('时间范围'),
-    node: gettext('流程详情'),
-    prop: gettext('所属业务'),
-    cite: gettext('流程引用'),
-    choice: gettext('请选择'),
-    choiceAllCategory: gettext('全部分类'),
-    choiceAllBusiness: gettext('全部业务'),
-    templateName: gettext('流程名称'),
-    businessName: gettext('业务'),
-    category: gettext('分类'),
-    atomTotal: gettext('标准插件数'),
-    subprocessTotal: gettext('子流程数'),
-    gatewaysTotal: gettext('网关数'),
-    creator: gettext('创建人'),
-    createTime: gettext('创建时间'),
-    history: gettext('执行历史'),
-    appmakerTotal: gettext('创建轻应用数'),
-    relationshipTotal: gettext('被引用为子流程数'),
-    instanceTotal: gettext('创建任务数')
-}
+    const i18n = {
+        flowCategory: gettext('流程分类'),
+        flowBusiness: gettext('所属业务'),
+        choiceCategory: gettext('选择分类'),
+        choiceBusiness: gettext('选择业务'),
+        timeLimit: gettext('时间范围'),
+        node: gettext('流程详情'),
+        prop: gettext('所属业务'),
+        cite: gettext('流程引用'),
+        choice: gettext('请选择'),
+        choiceAllCategory: gettext('全部分类'),
+        choiceAllBusiness: gettext('全部业务'),
+        templateName: gettext('流程名称'),
+        businessName: gettext('业务'),
+        category: gettext('分类'),
+        atomTotal: gettext('标准插件数'),
+        subprocessTotal: gettext('子流程数'),
+        gatewaysTotal: gettext('网关数'),
+        creator: gettext('创建人'),
+        createTime: gettext('创建时间'),
+        history: gettext('执行历史'),
+        appmakerTotal: gettext('创建轻应用数'),
+        relationshipTotal: gettext('被引用为子流程数'),
+        instanceTotal: gettext('创建任务数')
+    }
 
-export default {
-    name: 'StatisticsTemplate',
-    components: {
-        DataStatistics,
-        DataTablePagination
-    },
-    mixins: [AnalysisMixins],
-    data () {
-        return {
-            i18n: i18n,
-            business: '',
-            bizCcId: undefined,
-            isDropdownShow: false,
-            isCateLoading: true,
-            isBussLoading: true,
-            isReferLoading: true,
-            isDetailLoading: true,
-            choiceDownShow: false,
-            datePickerRefShow: false,
-            businessPickerRefShow: false,
-            choiceBusinessName: '',
-            category: undefined,
-            classiFicationArray: [],
-            taskStatistArray: [],
-            citeData: [],
-            nodeData: [],
-            nodeTotal: 0,
-            nodePageIndex: 1,
-            nodeLimit: 15, // 每页数量
-            nodeOrderBy: '-templateId',
-            citeOrderBy: '-templateId',
-            tabName: 'processDetails',
-            nodePagination: {
-                limit: this.nodeLimit,
-                pageIndex: this.nodePageIndex,
-                pageArray: this.dataTablePageArray
-            },
-            citeTotal: 0,
-            citePageIndex: 1,
-            citeLimit: 15,
-            citePagination: {
-                limit: this.citeLimit,
-                pageIndex: this.citePageIndex,
-                pageArray: this.dataTablePageArray // 公共js文件获取
-            },
-            nodeColumns: [
-                {
-                    prop: 'templateName',
-                    label: i18n.templateName,
-                    width: 285,
-                    title: 'templateName',
-                    formatter: (row, column, cellValue, index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}template/edit/${row.businessId}/?template_id=${row.templateId}">${row.templateName}</a>`
-                    }
-                },
-                {
-                    prop: 'businessName', // 识别id
-                    label: i18n.businessName, // 表头显示名称
-                    align: 'center' // 对其格式，可选（right，left，center）
-                },
-                {
-                    prop: 'category',
-                    label: i18n.category,
-                    align: 'center'
-                },
-                {
-                    prop: 'atomTotal',
-                    label: i18n.atomTotal,
-                    sortable: 'custom',
-                    align: 'center'
-                },
-                {
-                    prop: 'subprocessTotal',
-                    label: i18n.subprocessTotal,
-                    sortable: 'custom',
-                    align: 'center'
+    export default {
+        name: 'StatisticsTemplate',
+        components: {
+            DataStatistics,
+            DataTablePagination
+        },
+        mixins: [AnalysisMixins],
+        data () {
+            return {
+                i18n: i18n,
+                business: '',
+                bizCcId: undefined,
+                isDropdownShow: false,
+                isCateLoading: true,
+                isBussLoading: true,
+                isReferLoading: true,
+                isDetailLoading: true,
+                choiceDownShow: false,
+                datePickerRefShow: false,
+                businessPickerRefShow: false,
+                choiceBusinessName: '',
+                category: undefined,
+                classiFicationArray: [],
+                taskStatistArray: [],
+                citeData: [],
+                nodeData: [],
+                nodeTotal: 0,
+                nodePageIndex: 1,
+                nodeLimit: 15, // 每页数量
+                nodeOrderBy: '-templateId',
+                citeOrderBy: '-templateId',
+                tabName: 'processDetails',
+                nodePagination: {
+                    limit: this.nodeLimit,
+                    pageIndex: this.nodePageIndex,
+                    pageArray: this.dataTablePageArray
                 },
-                {
-                    prop: 'gatewaysTotal',
-                    label: i18n.gatewaysTotal,
-                    sortable: 'custom',
-                    align: 'center'
+                citeTotal: 0,
+                citePageIndex: 1,
+                citeLimit: 15,
+                citePagination: {
+                    limit: this.citeLimit,
+                    pageIndex: this.citePageIndex,
+                    pageArray: this.dataTablePageArray // 公共js文件获取
                 },
-                {
-                    prop: 'creator',
-                    label: i18n.creator,
-                    align: 'center'
+                nodeColumns: [
+                    {
+                        prop: 'templateName',
+                        label: i18n.templateName,
+                        width: 285,
+                        title: 'templateName',
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}template/edit/${row.businessId}/?template_id=${row.templateId}">${row.templateName}</a>`
+                        }
+                    },
+                    {
+                        prop: 'businessName', // 识别id
+                        label: i18n.businessName, // 表头显示名称
+                        align: 'center' // 对其格式，可选（right，left，center）
+                    },
+                    {
+                        prop: 'category',
+                        label: i18n.category,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'atomTotal',
+                        label: i18n.atomTotal,
+                        sortable: 'custom',
+                        align: 'center'
+                    },
+                    {
+                        prop: 'subprocessTotal',
+                        label: i18n.subprocessTotal,
+                        sortable: 'custom',
+                        align: 'center'
+                    },
+                    {
+                        prop: 'gatewaysTotal',
+                        label: i18n.gatewaysTotal,
+                        sortable: 'custom',
+                        align: 'center'
+                    },
+                    {
+                        prop: 'creator',
+                        label: i18n.creator,
+                        align: 'center'
+                    },
+                    {
+                        prop: 'createTime',
+                        label: i18n.createTime,
+                        align: 'center',
+                        width: 220
+                    }
+                ],
+                nodeOperates: {
+                    width: 160,
+                    isShow: true,
+                    data: [
+                        {
+                            label: i18n.history,
+                            show: true,
+                            cls: 'bk-button btn-size-mini ',
+                            method: (index, row) => {
+                                this.onInstanceHandleView(index, row)
+                            }
+                        }
+                    ]
                 },
-                {
-                    prop: 'createTime',
-                    label: i18n.createTime,
-                    align: 'center',
-                    width: 220
-                }
-            ],
-            nodeOperates: {
-                width: 160,
-                isShow: true,
-                data: [
+                total: 0,
+                ficationTotal: 0,
+                citeColumns: [
                     {
-                        label: i18n.history,
-                        show: true,
-                        cls: 'bk-button btn-size-mini ',
-                        method: (index, row) => {
-                            this.onInstanceHandleView(index, row)
+                        prop: 'templateName',
+                        label: i18n.templateName,
+                        width: 285,
+                        formatter: (row, column, cellValue, index) => {
+                            return `<a class="template-router" target="_blank" href="${this.site_url}template/edit/${row.businessId}/?template_id=${row.templateId}">${row.templateName}</a>`
                         }
+                    },
+                    {
+                        prop: 'templateId',
+                        label: 'ID',
+                        align: 'center'
+                    },
+                    {
+                        prop: 'appmakerTotal',
+                        label: i18n.appmakerTotal,
+                        align: 'center',
+                        sortable: 'custom'
+                    },
+                    {
+                        prop: 'relationshipTotal',
+                        label: i18n.relationshipTotal,
+                        align: 'center',
+                        sortable: 'custom'
+                    },
+                    {
+                        prop: 'instanceTotal',
+                        label: i18n.instanceTotal,
+                        align: 'center',
+                        sortable: 'custom'
                     }
-                ]
+                ],
+                selectedCcId: -1,
+                businessSelected: 'all',
+                categorySelected: 'all',
+                selectedCategory: -1,
+                categoryStartTime: undefined,
+                categoryEndTime: undefined,
+                choiceBusiness: undefined,
+                tableStartTime: undefined,
+                tableEndTime: undefined,
+                businessStartTime: undefined,
+                businessEndTime: undefined,
+                choiceCategory: undefined,
+                endDateMax: ''
+            }
+        },
+        computed: {
+            ...mapState({
+                allBusinessList: state => state.allBusinessList,
+                categorys: state => state.categorys,
+                site_url: state => state.site_url
+            }),
+            businessList () {
+                if (this.allBusinessList.length === 0) {
+                    this.getBizList(1)
+                }
+                const list = tools.deepClone(this.allBusinessList)
+                list.unshift({ cc_id: undefined, cc_name: gettext('全部业务') })
+                return list
             },
-            total: 0,
-            ficationTotal: 0,
-            citeColumns: [
-                {
-                    prop: 'templateName',
-                    label: i18n.templateName,
-                    width: 285,
-                    formatter: (row, column, cellValue, index) => {
-                        return `<a class="template-router" target="_blank" href="${this.site_url}template/edit/${row.businessId}/?template_id=${row.templateId}">${row.templateName}</a>`
-                    }
-                },
-                {
-                    prop: 'templateId',
-                    label: 'ID',
-                    align: 'center'
-                },
-                {
-                    prop: 'appmakerTotal',
-                    label: i18n.appmakerTotal,
-                    align: 'center',
-                    sortable: 'custom'
-                },
-                {
-                    prop: 'relationshipTotal',
-                    label: i18n.relationshipTotal,
-                    align: 'center',
-                    sortable: 'custom'
-                },
-                {
-                    prop: 'instanceTotal',
-                    label: i18n.instanceTotal,
-                    align: 'center',
-                    sortable: 'custom'
+            categoryList () {
+                if (this.categorys.length === 0) {
+                    this.getCategorys()
                 }
-            ],
-            selectedCcId: -1,
-            businessSelected: 'all',
-            categorySelected: 'all',
-            selectedCategory: -1,
-            categoryStartTime: undefined,
-            categoryEndTime: undefined,
-            choiceBusiness: undefined,
-            tableStartTime: undefined,
-            tableEndTime: undefined,
-            businessStartTime: undefined,
-            businessEndTime: undefined,
-            choiceCategory: undefined,
-            endDateMax: ''
-        }
-    },
-    computed: {
-        ...mapState({
-            allBusinessList: state => state.allBusinessList,
-            categorys: state => state.categorys,
-            site_url: state => state.site_url
-        }),
-        businessList () {
-            if (this.allBusinessList.length === 0) {
-                this.getBizList(1)
+                const list = tools.deepClone(this.categorys)
+                list.unshift({ value: 'all', name: gettext('全部分类') })
+                return list
             }
-            const list = tools.deepClone(this.allBusinessList)
-            list.unshift({cc_id: undefined, cc_name: gettext('全部业务')})
-            return list
         },
-        categoryList () {
-            if (this.categorys.length === 0) {
-                this.getCategorys()
-            }
-            const list = tools.deepClone(this.categorys)
-            list.unshift({value: 'all', name: gettext('全部分类')})
-            return list
-        }
-    },
-    created () {
-        this.getDateTime()
-    },
-    methods: {
-        ...mapActions([
-            'getBizList',
-            'getCategorys'
-        ]),
-        ...mapActions('template/', [
-            'queryTemplateData'
-        ]),
-        onTemplateCategory (business, name) {
-            if (business) {
-                if (business === this.choiceBusiness) {
-                    // 相同的内容不需要再次查询
+        created () {
+            this.getDateTime()
+        },
+        methods: {
+            ...mapActions([
+                'getBizList',
+                'getCategorys'
+            ]),
+            ...mapActions('template/', [
+                'queryTemplateData'
+            ]),
+            onTemplateCategory (business, name) {
+                if (business) {
+                    if (business === this.choiceBusiness) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceBusiness = business
+                } else if (business === undefined) {
+                    if (this.choiceBusiness === undefined) {
+                        return
+                    }
+                    this.choiceBusiness = business
+                }
+                const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
+                const data = {
+                    group_by: 'category',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusiness
+                    })
+                }
+                this.templateData(data)
+            },
+            onTemplateNode (oldValue = null, newValue = null) {
+                if (this.tabName !== 'processDetails') {
+                    // 防止不同界面进行触发接口调用
                     return
                 }
-                this.choiceBusiness = business
-            } else if (business === undefined) {
-                if (this.choiceBusiness === undefined) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
+                }
+                this.isDetailLoading = true
+                const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                const data = {
+                    group_by: 'template_node',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.bizCcId,
+                        category: this.category,
+                        order_by: this.nodeOrderBy
+                    }),
+                    pageIndex: this.nodePageIndex,
+                    limit: this.nodeLimit
+                }
+                try {
+                    this.templateTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onTemplateBizCcId (category, name) {
+                if (category) {
+                    if (category === this.choiceCategory) {
+                        // 相同的内容不需要再次查询
+                        return
+                    }
+                    this.choiceCategory = category
+                } else if (category === undefined) {
+                    if (this.choiceCategory === undefined) {
+                        return
+                    }
+                    this.choiceCategory = category
+                }
+                const time = this.getUTCTime([this.businessStartTime, this.businessEndTime])
+                const data = {
+                    group_by: 'biz_cc_id',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        category: this.choiceCategory === 'all' ? '' : this.choiceCategory
+                    })
+                }
+                this.templateBizIdData(data)
+            },
+            async templateBizIdData (data) {
+                this.isBussLoading = true
+                try {
+                    const templateData = await this.queryTemplateData(data)
+                    this.taskStatistArray = templateData.data.groups
+                    this.total = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isBussLoading = false
+                }
+            },
+            async templateData (data) {
+                this.isCateLoading = true
+                try {
+                    const templateData = await this.queryTemplateData(data)
+                    this.classiFicationArray = templateData.data.groups
+                    this.ficationTotal = templateData.data.total
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.isCateLoading = false
+                }
+            },
+            async templateTableData (data) {
+                const templateData = await this.queryTemplateData(data)
+                switch (data.group_by) {
+                    case 'template_node':
+                        this.nodeData = templateData.data.groups
+                        this.nodeTotal = templateData.data.total
+                        this.isDetailLoading = false
+                        break
+                    case 'template_cite':
+                        this.citeData = templateData.data.groups
+                        this.citeTotal = templateData.data.total
+                        this.isReferLoading = false
+                        break
+                }
+            },
+            onTemplateByCiteData (oldValue = null, newValue = null) {
+                if (this.tabName !== 'processReference') {
+                    // 防止不同界面进行触发接口调用
                     return
                 }
-                this.choiceBusiness = business
-            }
-            const time = this.getUTCTime([this.categoryStartTime, this.categoryEndTime])
-            const data = {
-                group_by: 'category',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.choiceBusiness === 'all' ? '' : this.choiceBusiness
-                })
-            }
-            this.templateData(data)
-        },
-        onTemplateNode (oldValue = null, newValue = null) {
-            if (this.tabName !== 'processDetails') {
-                // 防止不同界面进行触发接口调用
-                return
-            }
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
-                this.resetPageIndex()
-            }
-            this.isDetailLoading = true
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'template_node',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category,
-                    order_by: this.nodeOrderBy
-                }),
-                pageIndex: this.nodePageIndex,
-                limit: this.nodeLimit
-            }
-            try {
-                this.templateTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onTemplateBizCcId (category, name) {
-            if (category) {
-                if (category === this.choiceCategory) {
-                    // 相同的内容不需要再次查询
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.tableStartTime = dateArray[0]
+                    this.tableEndTime = dateArray[1]
+                    this.resetPageIndex()
+                }
+                this.isReferLoading = true
+                const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
+                const data = {
+                    group_by: 'template_cite',
+                    conditions: JSON.stringify({
+                        create_time: time[0],
+                        finish_time: time[1],
+                        biz_cc_id: this.bizCcId,
+                        category: this.category,
+                        order_by: this.citeOrderBy
+                    }),
+                    pageIndex: this.citePageIndex,
+                    limit: this.citeLimit
+                }
+                try {
+                    this.templateTableData(data)
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            // 流程引用的排序
+            onCiteSortChange (column, prop, order) {
+                order = column[0].order === 'ascending' ? '' : '-'
+                this.citeOrderBy = column[0].prop ? order + column[0].prop : '-templateId'
+                this.onTemplateByCiteData()
+            },
+            onCiteSizeChange (limit) {
+                this.citePageIndex = 1
+                this.citeLimit = limit
+                this.onTemplateByCiteData()
+            },
+            onCiteHandleIndexChange (pageIndex) {
+                this.citePageIndex = pageIndex
+                this.onTemplateByCiteData()
+            },
+            onNodeSortChange (column, prop, order) {
+                order = column[0].order === 'ascending' ? '' : '-'
+                this.nodeOrderBy = column[0].prop ? order + column[0].prop : '-templateId'
+                this.onTemplateNode()
+            },
+            onNodeHandleSizeChange (limit) {
+                this.nodePageIndex = 1
+                this.nodeLimit = limit
+                this.onTemplateNode()
+            },
+            onNodeHandleIndexChange (pageIndex) {
+                this.nodePageIndex = pageIndex
+                this.onTemplateNode()
+            },
+            onChangeTabPanel (name) {
+                this.tabName = name
+                if (name === 'processDetails') {
+                    this.onTemplateNode()
+                } else {
+                    this.onTemplateByCiteData()
+                }
+            },
+            getDateTime () {
+                const date = new Date()
+                date.setHours(0, 0, 0)
+                const endTime = moment(date).format('YYYY-MM-DD')
+                this.tableEndTime = endTime
+                this.categoryEndTime = endTime
+                this.businessEndTime = endTime
+                this.endDateMax = endTime
+                date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
+                const startTime = moment(date).format('YYYY-MM-DD')
+                this.tableStartTime = startTime
+                this.categoryStartTime = startTime
+                this.businessStartTime = startTime
+            },
+            onInstanceHandleView (index, row) {
+                window.open(this.site_url + 'taskflow/home/' + row.businessId + '/?template_id=' + row.templateId)
+            },
+            onDatePickerClick () {
+                this.datePickerRefShow = !this.datePickerRefShow
+                this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
+            },
+            onTemplatePickerClick () {
+                this.businessPickerRefShow = !this.businessPickerRefShow
+                this.$refs.businessPickerRef.pickerVisible = this.businessPickerRefShow
+            },
+            onSelectedCategory (name, value) {
+                if (this.category === name) {
                     return
                 }
-                this.choiceCategory = category
-            } else if (category === undefined) {
-                if (this.choiceCategory === undefined) {
+                this.category = name
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onSelectedBizCcId (name, value) {
+                if (this.bizCcId === name) {
                     return
                 }
-                this.choiceCategory = category
-            }
-            const time = this.getUTCTime([this.businessStartTime, this.businessEndTime])
-            const data = {
-                group_by: 'biz_cc_id',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    category: this.choiceCategory === 'all' ? '' : this.choiceCategory
-                })
-            }
-            this.templateBizIdData(data)
-        },
-        async templateBizIdData (data) {
-            this.isBussLoading = true
-            try {
-                const templateData = await this.queryTemplateData(data)
-                this.taskStatistArray = templateData.data.groups
-                this.total = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isBussLoading = false
-            }
-        },
-        async templateData (data) {
-            this.isCateLoading = true
-            try {
-                const templateData = await this.queryTemplateData(data)
-                this.classiFicationArray = templateData.data.groups
-                this.ficationTotal = templateData.data.total
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isCateLoading = false
-            }
-        },
-        async templateTableData (data) {
-            const templateData = await this.queryTemplateData(data)
-            switch (data.group_by) {
-                case 'template_node':
-                    this.nodeData = templateData.data.groups
-                    this.nodeTotal = templateData.data.total
-                    this.isDetailLoading = false
-                    break
-                case 'template_cite':
-                    this.citeData = templateData.data.groups
-                    this.citeTotal = templateData.data.total
-                    this.isReferLoading = false
-                    break
-            }
-        },
-        onTemplateByCiteData (oldValue = null, newValue = null) {
-            if (this.tabName !== 'processReference') {
-                // 防止不同界面进行触发接口调用
-                return
-            }
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.tableStartTime = dateArray[0]
-                this.tableEndTime = dateArray[1]
+                this.bizCcId = name
                 this.resetPageIndex()
-            }
-            this.isReferLoading = true
-            const time = this.getUTCTime([this.tableStartTime, this.tableEndTime])
-            const data = {
-                group_by: 'template_cite',
-                conditions: JSON.stringify({
-                    create_time: time[0],
-                    finish_time: time[1],
-                    biz_cc_id: this.bizCcId,
-                    category: this.category,
-                    order_by: this.citeOrderBy
-                }),
-                pageIndex: this.citePageIndex,
-                limit: this.citeLimit
-            }
-            try {
-                this.templateTableData(data)
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        // 流程引用的排序
-        onCiteSortChange (column, prop, order) {
-            order = column[0].order === 'ascending' ? '' : '-'
-            this.citeOrderBy = column[0].prop ? order + column[0].prop : '-templateId'
-            this.onTemplateByCiteData()
-        },
-        onCiteSizeChange (limit) {
-            this.citePageIndex = 1
-            this.citeLimit = limit
-            this.onTemplateByCiteData()
-        },
-        onCiteHandleIndexChange (pageIndex) {
-            this.citePageIndex = pageIndex
-            this.onTemplateByCiteData()
-        },
-        onNodeSortChange (column, prop, order) {
-            order = column[0].order === 'ascending' ? '' : '-'
-            this.nodeOrderBy = column[0].prop ?  order + column[0].prop : '-templateId'
-            this.onTemplateNode()
-        },
-        onNodeHandleSizeChange (limit) {
-            this.nodePageIndex = 1
-            this.nodeLimit = limit
-            this.onTemplateNode()
-        },
-        onNodeHandleIndexChange (pageIndex) {
-            this.nodePageIndex = pageIndex
-            this.onTemplateNode()
-        },
-        onChangeTabPanel (name) {
-            this.tabName  = name
-            if (name === 'processDetails') {
-                this.onTemplateNode()
-            } else {
-                this.onTemplateByCiteData()
-            }
-        },
-        getDateTime () {
-            const date = new Date()
-            date.setHours(0, 0, 0)
-            const endTime = moment(date).format('YYYY-MM-DD')
-            this.tableEndTime = endTime
-            this.categoryEndTime = endTime
-            this.businessEndTime = endTime
-            this.endDateMax = endTime
-            date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
-            const startTime = moment(date).format('YYYY-MM-DD')
-            this.tableStartTime = startTime
-            this.categoryStartTime = startTime
-            this.businessStartTime = startTime
-        },
-        onInstanceHandleView (index, row) {
-            window.open(this.site_url + 'taskflow/home/' + row.businessId + '/?template_id=' + row.templateId)
-        },
-        onDatePickerClick () {
-            this.datePickerRefShow = !this.datePickerRefShow
-            this.$refs.datePickerRef.pickerVisible = this.datePickerRefShow
-        },
-        onTemplatePickerClick () {
-            this.businessPickerRefShow = !this.businessPickerRefShow
-            this.$refs.businessPickerRef.pickerVisible = this.businessPickerRefShow
-        },
-        onSelectedCategory (name, value) {
-            if (this.category === name) {
-                return
-            }
-            this.category = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onSelectedBizCcId (name, value) {
-            if (this.bizCcId === name) {
-                return
-            }
-            this.bizCcId = name
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearBizCcId () {
-            this.selectedCcId = -1
-            this.bizCcId = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onClearCategory () {
-            this.selectedCategory = -1
-            this.category = undefined
-            this.resetPageIndex()
-            this.onChangeTabPanel(this.tabName)
-        },
-        onChangeCategoryTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.categoryStartTime = dateArray[0]
-                this.categoryEndTime = dateArray[1]
-            }
-            this.onTemplateCategory(null)
-        },
-        onChangeBusinessTime (oldValue, newValue) {
-            if (newValue) {
-                const dateArray = newValue.split(' - ')
-                this.businessStartTime = dateArray[0]
-                this.businessEndTime = dateArray[1]
-            }
-            this.onTemplateBizCcId(null)
-        },
-        resetPageIndex () {
-            switch (this.tabName) {
-                case 'processDetails':
-                    this.nodePageIndex = 1
-                    this.nodePagination.pageIndex = 1
-                    break
-                case 'processReference':
-                    this.citePageIndex = 1
-                    this.citePagination.pageIndex = 1
-                    break
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearBizCcId () {
+                this.selectedCcId = -1
+                this.bizCcId = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onClearCategory () {
+                this.selectedCategory = -1
+                this.category = undefined
+                this.resetPageIndex()
+                this.onChangeTabPanel(this.tabName)
+            },
+            onChangeCategoryTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.categoryStartTime = dateArray[0]
+                    this.categoryEndTime = dateArray[1]
+                }
+                this.onTemplateCategory(null)
+            },
+            onChangeBusinessTime (oldValue, newValue) {
+                if (newValue) {
+                    const dateArray = newValue.split(' - ')
+                    this.businessStartTime = dateArray[0]
+                    this.businessEndTime = dateArray[1]
+                }
+                this.onTemplateBizCcId(null)
+            },
+            resetPageIndex () {
+                switch (this.tabName) {
+                    case 'processDetails':
+                        this.nodePageIndex = 1
+                        this.nodePagination.pageIndex = 1
+                        break
+                    case 'processReference':
+                        this.citePageIndex = 1
+                        this.citePagination.pageIndex = 1
+                        break
+                }
             }
         }
     }
-}
 </script>
-
diff --git a/pipeline/blueflow/src/pages/statistics/dataStatistics/index.vue b/pipeline/blueflow/src/pages/statistics/dataStatistics/index.vue
index bafc9a1aa0..2ef5959f6b 100644
--- a/pipeline/blueflow/src/pages/statistics/dataStatistics/index.vue
+++ b/pipeline/blueflow/src/pages/statistics/dataStatistics/index.vue
@@ -17,70 +17,70 @@
                 <p class="tool-name" :title="dimension.name || dimension.time">{{dimension.name || dimension.time}} </p>
             </div>
             <div
-                :class="[dimension.value ? 'chart-statistics-chart': 'chart-statistics-normal']"
-                :style="{width: `${dimension.value ? dealProcess(dimension.value, totalValue): 0.3}%`}">
+                :class="[dimension.value ? 'chart-statistics-chart' : 'chart-statistics-normal']"
+                :style="{ width: `${dimension.value ? dealProcess(dimension.value, totalValue) : 0.3}%` }">
             </div>
             <div class="chart-statistics-num">{{dimension.value}} / {{getPercentage(dimension.value)}}%</div>
         </div>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import NoData from '@/components/common/base/NoData.vue'
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import NoData from '@/components/common/base/NoData.vue'
 
-export default {
-    name: 'DataStatistics',
-    components: {
-        NoData
-    },
-    props: {
-        dimensionList: {
-            type: Array,
-            default () {
-                return []
-            }
+    export default {
+        name: 'DataStatistics',
+        components: {
+            NoData
         },
-        totalValue: {
-            type: Number,
-            default () {
-                return 0
+        props: {
+            dimensionList: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            totalValue: {
+                type: Number,
+                default () {
+                    return 0
+                }
+            },
+            timeTypeList: {
+                type: Array,
+                default () {
+                    return []
+                }
             }
         },
-        timeTypeList: {
-            type: Array,
-            default () {
-                return []
+        data () {
+            return {
+                sortDimensionList: []
             }
-        }
-    },
-    watch: {
-        dimensionList (val) {
-            this.sortDimensionList = tools.deepClone(this.dimensionList)
-            this.sortDimensionList.sort((val1, val2) => val2.value - val1.value)
         },
-        timeTypeList (val) {
-            this.sortDimensionList = tools.deepClone(val)
-        }
-    },
-    data () {
-        return {
-            sortDimensionList: []
-        }
-    },
-    methods: {
-        getPercentage (value) {
-            return (value / this.totalValue * 100 ).toFixed(2)
+        watch: {
+            dimensionList (val) {
+                this.sortDimensionList = tools.deepClone(this.dimensionList)
+                this.sortDimensionList.sort((val1, val2) => val2.value - val1.value)
+            },
+            timeTypeList (val) {
+                this.sortDimensionList = tools.deepClone(val)
+            }
         },
-        dealProcess (value, totalValue) {
-            let result = value / totalValue * 60
-            if (result > 0 && result < 0.06){
-                result = 0.6
+        methods: {
+            getPercentage (value) {
+                return (value / this.totalValue * 100).toFixed(2)
+            },
+            dealProcess (value, totalValue) {
+                let result = value / totalValue * 60
+                if (result > 0 && result < 0.06) {
+                    result = 0.6
+                }
+                return result
             }
-            return result
         }
     }
-}
 </script>
 
 <style lang="scss">
diff --git a/pipeline/blueflow/src/pages/statistics/index.vue b/pipeline/blueflow/src/pages/statistics/index.vue
index fd67dc2365..f1be8649fa 100644
--- a/pipeline/blueflow/src/pages/statistics/index.vue
+++ b/pipeline/blueflow/src/pages/statistics/index.vue
@@ -20,7 +20,7 @@
                     <router-link
                         v-for="dms in dataDimension"
                         :key="dms.name"
-                        :class="['dms-item', {'active': $route.name === dms.name}]"
+                        :class="['dms-item', { 'active': $route.name === dms.name }]"
                         :to="dms.path">
                         {{dms.text}}
                     </router-link>
@@ -35,54 +35,54 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-const DATA_DIMENSION = [
-    {
-        text: gettext('流程统计'),
-        name: 'statisticsTemplate',
-        path: '/statistics/template/'
-    },
-    {
-        text: gettext('任务统计'),
-        name: 'statisticsInstance',
-        path: '/statistics/instance/'
-    },
-    {
-        text: gettext('标准插件统计'),
-        name: 'statisticsAtom',
-        path: '/statistics/atom/'
-    },
-    {
-        text: gettext('轻应用统计'),
-        name: 'statisticsAppmaker',
-        path: '/statistics/appmaker/'
-    }
-]
-export default {
-    name: 'Statistics',
-    data () {
-        return {
-            dataDimension: DATA_DIMENSION,
-            i18n: {
-                operationData: gettext('运营数据')
-            },
-            path: this.$router.currentRoute.path,
-            reloadComponent: true
-        }
-    },
-    watch: {
-        '$route' (to, from) {
-            this.reloadComponent = false
-            this.path = this.$router.currentRoute.path
-            this.reloadComponent = true
+    import '@/utils/i18n.js'
+    const DATA_DIMENSION = [
+        {
+            text: gettext('流程统计'),
+            name: 'statisticsTemplate',
+            path: '/statistics/template/'
+        },
+        {
+            text: gettext('任务统计'),
+            name: 'statisticsInstance',
+            path: '/statistics/instance/'
+        },
+        {
+            text: gettext('标准插件统计'),
+            name: 'statisticsAtom',
+            path: '/statistics/atom/'
+        },
+        {
+            text: gettext('轻应用统计'),
+            name: 'statisticsAppmaker',
+            path: '/statistics/appmaker/'
         }
-    },
-    methods: {
-        onGotoPath (path) {
-            this.$router.push(path)
+    ]
+    export default {
+        name: 'Statistics',
+        data () {
+            return {
+                dataDimension: DATA_DIMENSION,
+                i18n: {
+                    operationData: gettext('运营数据')
+                },
+                path: this.$router.currentRoute.path,
+                reloadComponent: true
+            }
+        },
+        watch: {
+            '$route' (to, from) {
+                this.reloadComponent = false
+                this.path = this.$router.currentRoute.path
+                this.reloadComponent = true
+            }
+        },
+        methods: {
+            onGotoPath (path) {
+                this.$router.push(path)
+            }
         }
     }
-}
 </script>
 <style lang="scss">
 @import "@/scss/config.scss";
@@ -143,5 +143,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/task/NodePreview.vue b/pipeline/blueflow/src/pages/task/NodePreview.vue
index 133f48f853..32fa276533 100644
--- a/pipeline/blueflow/src/pages/task/NodePreview.vue
+++ b/pipeline/blueflow/src/pages/task/NodePreview.vue
@@ -14,10 +14,10 @@
         <div class="operation-header clearfix">
             <div class="bread-crumbs-wrapper">
                 <div
-                    :class="['path-item', {'name-ellipsis': previewBread.length > 1}]"
+                    :class="['path-item', { 'name-ellipsis': previewBread.length > 1 }]"
                     v-for="(path, index) in previewBread"
                     :key="index"
-                    :title="showBreakList.includes(index)? path.name: ''">
+                    :title="showBreakList.includes(index) ? path.name : ''">
                     <span
                         v-if="!!index && showBreakList.includes(index) || index === 1">
                         &gt;
@@ -35,68 +35,68 @@
                 </div>
             </div>
         </div>
-        <div class="canvas-wrapper" v-bkloading="{isLoading: previewDataLoading, opacity: 1}">
+        <div class="canvas-wrapper" v-bkloading="{ isLoading: previewDataLoading, opacity: 1 }">
             <PipelineCanvas
                 v-if="!previewDataLoading"
                 ref="pipelineCanvas"
-                :isMenuBarShow="false"
-                :isConfigBarShow="false"
-                :isEdit="false"
-                :isSelectNode="isSelectNode"
-                :isSelectAllNode="isSelectAllNode"
-                :isPreviewMode="isPreviewMode"
-                :canvasData="canvasData"
+                :is-menu-bar-show="false"
+                :is-config-bar-show="false"
+                :is-edit="false"
+                :is-select-node="isSelectNode"
+                :is-select-all-node="isSelectAllNode"
+                :is-preview-mode="isPreviewMode"
+                :canvas-data="canvasData"
                 @onNodeClick="onNodeClick">
             </PipelineCanvas>
         </div>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import PipelineCanvas from '@/components/common/PipelineCanvas/index.vue'
-export default {
-    name: 'NodePreview',
-    components: {
-        PipelineCanvas
-    },
-    props: ['canvasData', 'previewBread', 'previewDataLoading', 'isSelectNode', 'isPreviewMode', 'isSelectAllNode'],
-    data () {
-        return {
-            ellipsis: '...',
-            showBreakList: [0, 1, 2],
-            isOmit: true
-        }
-    },
-    watch: {
-        previewBread (val) {
-            if (val.length > 3) {
-                this.showBreakList = [0, val.length - 1 , val.length - 2]
-            } else {
-                this.showBreakList = [0, 1, 2]
-            }
-        }
-    },
-    methods: {
-        onNodeClick (id) {
-            if (this.previewDataLoading) {
-                return
-            }
-            this.$emit('onNodeClick', id)
+    import '@/utils/i18n.js'
+    import PipelineCanvas from '@/components/common/PipelineCanvas/index.vue'
+    export default {
+        name: 'NodePreview',
+        components: {
+            PipelineCanvas
         },
-        onSelectSubflow (data, index) {
-            if (this.previewDataLoading) {
-                return
+        props: ['canvasData', 'previewBread', 'previewDataLoading', 'isSelectNode', 'isPreviewMode', 'isSelectAllNode'],
+        data () {
+            return {
+                ellipsis: '...',
+                showBreakList: [0, 1, 2],
+                isOmit: true
             }
-            if (this.previewBread.length - 1 === index) {
-                return
+        },
+        watch: {
+            previewBread (val) {
+                if (val.length > 3) {
+                    this.showBreakList = [0, val.length - 1, val.length - 2]
+                } else {
+                    this.showBreakList = [0, 1, 2]
+                }
             }
-            this.$emit('onSelectSubflow', data, index)
         },
-        onUpdateNodeInfo (id, item) {
-            this.$refs.pipelineCanvas.onUpdateNodeInfo(item.id, item)
+        methods: {
+            onNodeClick (id) {
+                if (this.previewDataLoading) {
+                    return
+                }
+                this.$emit('onNodeClick', id)
+            },
+            onSelectSubflow (data, index) {
+                if (this.previewDataLoading) {
+                    return
+                }
+                if (this.previewBread.length - 1 === index) {
+                    return
+                }
+                this.$emit('onSelectSubflow', data, index)
+            },
+            onUpdateNodeInfo (id, item) {
+                this.$refs.pipelineCanvas.onUpdateNodeInfo(item.id, item)
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskCreate/TaskParamFill.vue b/pipeline/blueflow/src/pages/task/TaskCreate/TaskParamFill.vue
index 256ced886e..6f60b351bf 100644
--- a/pipeline/blueflow/src/pages/task/TaskCreate/TaskParamFill.vue
+++ b/pipeline/blueflow/src/pages/task/TaskCreate/TaskParamFill.vue
@@ -10,8 +10,8 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="param-fill-wrapper" v-bkloading="{isLoading: templateLoading, opacity: 1}" v-show="!templateLoading">
-        <div :class="['task-info', {'functor-task-info': this.userType === 'functor'}]">
+    <div class="param-fill-wrapper" v-bkloading="{ isLoading: templateLoading, opacity: 1 }" v-show="!templateLoading">
+        <div :class="['task-info', { 'functor-task-info': userType === 'functor' }]">
             <span class="task-info-title">{{ i18n.taskInfo }}</span>
             <div class="task-info-division-line"></div>
             <div class="common-form-item">
@@ -67,7 +67,7 @@
                         class="step-form-content-size"
                         name="periodicCron"
                         v-model="periodicCron"
-                        v-validate="periodicRule"/>
+                        v-validate="periodicRule" />
                     <bk-tooltip placement="left-end" class="periodic-img-tooltip" v-if="!templateLoading">
                         <i class="common-icon-tooltips"></i>
                         <div slot="content">
@@ -85,7 +85,7 @@
                 </span>
             </div>
             <div class="param-info-division-line"></div>
-            <template >
+            <template>
                 <TaskParamEdit
                     v-if="!taskParamEditLoading"
                     ref="TaskParamEdit"
@@ -111,265 +111,271 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-// moment用于时区使用
-import moment from 'moment-timezone'
-import { mapState, mapActions, mapMutations } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { NAME_REG, PERIODIC_REG, STRING_LENGTH } from '@/constants/index.js'
-import tools from '@/utils/tools.js'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import TaskParamEdit from '../TaskParamEdit.vue'
-import NodePreview from '../NodePreview.vue'
+    import '@/utils/i18n.js'
+    // moment用于时区使用
+    import moment from 'moment-timezone'
+    import { mapState, mapActions, mapMutations } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import { NAME_REG, PERIODIC_REG, STRING_LENGTH } from '@/constants/index.js'
+    import tools from '@/utils/tools.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import TaskParamEdit from '../TaskParamEdit.vue'
 
-export default {
-    name: 'TaskParamFill',
-    components: {
-        NoData,
-        BaseInput,
-        TaskParamEdit,
-        NodePreview
-    },
-    props: ['cc_id', 'template_id', 'common', 'previewData'],
-    data () {
-        return {
-            i18n: {
-                taskInfo: gettext('任务信息'),
-                taskName: gettext('任务名称'),
-                flowType: gettext('流程类型'),
-                defaultFlowType: gettext('默认任务流程'),
-                functionFlowType: gettext('职能化任务流程'),
-                paramsInfo: gettext('参数信息'),
-                previous: gettext('上一步'),
-                new: gettext('下一步'),
-                startNow: gettext('立即执行'),
-                periodicStart: gettext('周期执行'),
-                periodicCron: gettext('周期表达式'),
-                startMethod: gettext('执行计划')
+    export default {
+        name: 'TaskParamFill',
+        components: {
+            BaseInput,
+            TaskParamEdit
+        },
+        props: ['cc_id', 'template_id', 'common', 'previewData'],
+        data () {
+            return {
+                i18n: {
+                    taskInfo: gettext('任务信息'),
+                    taskName: gettext('任务名称'),
+                    flowType: gettext('流程类型'),
+                    defaultFlowType: gettext('默认任务流程'),
+                    functionFlowType: gettext('职能化任务流程'),
+                    paramsInfo: gettext('参数信息'),
+                    previous: gettext('上一步'),
+                    new: gettext('下一步'),
+                    startNow: gettext('立即执行'),
+                    periodicStart: gettext('周期执行'),
+                    periodicCron: gettext('周期表达式'),
+                    startMethod: gettext('执行计划')
+                },
+                templateLoading: true,
+                bkMessageInstance: null,
+                isSubmit: false,
+                isSelectFunctionalType: false,
+                taskName: '',
+                pipelineData: {},
+                taskNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                isStartNow: true,
+                periodicCron: '*/5 * * * *',
+                periodicRule: {
+                    required: true,
+                    regex: PERIODIC_REG
+                },
+                periodicCronImg: require('@/assets/images/' + gettext('task-zh') + '.png'),
+                lastTaskName: '',
+                node: {},
+                templateData: {},
+                configLoading: true,
+                taskParamEditLoading: true
+            }
+        },
+        computed: {
+            ...mapState({
+                'templateName': state => state.template.name,
+                'userType': state => state.userType,
+                'viewMode': state => state.view_mode,
+                'app_id': state => state.app_id,
+                'businessTimezone': state => state.businessTimezone
+            }),
+            isSchemeShow () {
+                return this.pipelineData.location.some(item => item.optional)
             },
-            templateLoading: true,
-            bkMessageInstance: null,
-            isSubmit: false,
-            isSelectFunctionalType: false,
-            taskName: '',
-            pipelineData: {},
-            taskNameRule: {
-                required: true,
-                max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
-                regex: NAME_REG
+            isTaskTypeShow () {
+                return this.userType !== 'functor' && this.isStartNow
             },
-            isStartNow: true,
-            periodicCron: '*/5 * * * *',
-            periodicRule: {
-                required: true,
-                regex: PERIODIC_REG
+            isVariableEmpty () {
+                return !this.pipelineData.constants || Object.keys(this.pipelineData.constants).length === 0
             },
-            periodicCronImg: require('@/assets/images/' + gettext('task-zh') + '.png'),
-            lastTaskName: '',
-            node: {},
-            templateData: {},
-            configLoading: true,
-            taskParamEditLoading: true
-        }
-    },
-    computed: {
-        ...mapState({
-            'templateName': state => state.template.name,
-            'userType': state => state.userType,
-            'viewMode': state => state.view_mode,
-            'app_id': state => state.app_id,
-            'businessTimezone': state => state.businessTimezone
-        }),
-        isSchemeShow () {
-            return this.pipelineData.location.some(item => item.optional)
+            isStartNowShow () {
+                return !this.common && this.viewMode === 'app' && this.userType !== 'functor'
+            }
         },
-        isTaskTypeShow () {
-            return this.userType !== 'functor' && this.isStartNow
+        watch: {
+            configLoading (loading) {
+                if (!loading) {
+                    this.templateLoading = false
+                }
+            }
         },
-        isVariableEmpty () {
-            return !this.pipelineData.constants || Object.keys(this.pipelineData.constants).length === 0
+        mounted () {
+            this.loadData()
         },
-        isStartNowShow () {
-            return !this.common && this.viewMode === 'app' && this.userType !== 'functor'
-        }
-    },
-    watch: {
-        configLoading (loading){
-            if (!loading) {
-                this.templateLoading = false
-            }
-        }
-    },
-    mounted () {
-        this.loadData()
-    },
-    methods: {
-        ...mapActions('template/', [
-            'loadTemplateData'
-        ]),
-        ...mapActions('task/', [
-            'loadPreviewNodeData',
-            'createTask'
-        ]),
-        ...mapMutations('template/', [
-            'setTemplateData'
-        ]),
-        ...mapActions('periodic/',[
-            'createPeriodic'
-        ]),
-        async loadData () {
-            this.templateLoading = true
-            try {
-                const data = {
-                    templateId: this.template_id,
-                    common: this.common
-                }
-                const templateSource = this.common ? 'common' : 'business'
-                const templateData = await this.loadTemplateData(data)
-                this.setTemplateData(templateData)
-                // 用户直接刷新当前页面 可选数据丢失，可直接获取pipelineTree
-                if (this.previewData.length === 0) {
-                    const params = {
+        methods: {
+            ...mapActions('template/', [
+                'loadTemplateData'
+            ]),
+            ...mapActions('task/', [
+                'loadPreviewNodeData',
+                'createTask'
+            ]),
+            ...mapMutations('template/', [
+                'setTemplateData'
+            ]),
+            ...mapActions('periodic/', [
+                'createPeriodic'
+            ]),
+            async loadData () {
+                this.templateLoading = true
+                try {
+                    const data = {
                         templateId: this.template_id,
-                        excludeTaskNodesId: JSON.stringify([]),
-                        common: this.common,
-                        cc_id: this.cc_id,
-                        template_source: templateSource,
-                        version: templateData.version
+                        common: this.common
                     }
-                    const previewData = await this.loadPreviewNodeData(params)
-                    this.pipelineData = previewData.data.pipeline_tree
-                } else {
-                    this.pipelineData = tools.deepClone(this.previewData)
+                    const templateSource = this.common ? 'common' : 'business'
+                    const templateData = await this.loadTemplateData(data)
+                    this.setTemplateData(templateData)
+                    // 用户直接刷新当前页面 可选数据丢失，可直接获取pipelineTree
+                    if (this.previewData.length === 0) {
+                        const params = {
+                            templateId: this.template_id,
+                            excludeTaskNodesId: JSON.stringify([]),
+                            common: this.common,
+                            cc_id: this.cc_id,
+                            template_source: templateSource,
+                            version: templateData.version
+                        }
+                        const previewData = await this.loadPreviewNodeData(params)
+                        this.pipelineData = previewData.data.pipeline_tree
+                    } else {
+                        this.pipelineData = tools.deepClone(this.previewData)
+                    }
+                    this.taskName = this.getDefaultTaskName()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.taskParamEditLoading = false
                 }
-                this.taskName = this.getDefaultTaskName()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.taskParamEditLoading = false
-            }
-        },
-        getDefaultTaskName () {
-            let nowTime = ''
-            if (this.common) {
-                // 无时区的公共流程使用本地的时间
-                nowTime = moment().format('YYYYMMDDHHmmss')
-            } else {
-                nowTime = moment.tz(this.businessTimezone).format('YYYYMMDDHHmmss')
-            }
-            return this.templateName + '_' + nowTime
-        },
-        onSwitchTaskType (isSelectFunctionalType) {
-            this.isSelectFunctionalType = isSelectFunctionalType
-            this.$emit('setFunctionalStep', isSelectFunctionalType)
-        },
-        onGotoSelectNode () {
-            this.$emit('setFunctionalStep', false)
-            if (this.viewMode === 'appmaker') {
-                this.$router.push({path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/selectnode/`, query: {'template_id': this.template_id}})
-            } else {
+            },
+            getDefaultTaskName () {
+                let nowTime = ''
                 if (this.common) {
-                    this.$router.push({path: `/template/newtask/${this.cc_id}/selectnode/`, query: {'template_id': this.template_id, common: this.common}})
+                    // 无时区的公共流程使用本地的时间
+                    nowTime = moment().format('YYYYMMDDHHmmss')
                 } else {
-                    this.$router.push({path: `/template/newtask/${this.cc_id}/selectnode/`, query: {'template_id': this.template_id}})
+                    nowTime = moment.tz(this.businessTimezone).format('YYYYMMDDHHmmss')
                 }
-            }
-        },
-        onCreateTask () {
-            if (this.isSubmit) return
-            const paramEditComp = this.$refs.TaskParamEdit
-            this.$validator.validateAll().then(async (result) => {
-                let formValid = true
-                const pipelineData = tools.deepClone(this.pipelineData)
-                if (paramEditComp) {
-                    const formData = paramEditComp.getVariableData()
-                    pipelineData.constants = formData
-                    formValid = paramEditComp.validate()
+                return this.templateName + '_' + nowTime
+            },
+            onSwitchTaskType (isSelectFunctionalType) {
+                this.isSelectFunctionalType = isSelectFunctionalType
+                this.$emit('setFunctionalStep', isSelectFunctionalType)
+            },
+            onGotoSelectNode () {
+                this.$emit('setFunctionalStep', false)
+                if (this.viewMode === 'appmaker') {
+                    this.$router.push({ path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/selectnode/`, query: { 'template_id': this.template_id } })
+                } else {
+                    if (this.common) {
+                        this.$router.push({ path: `/template/newtask/${this.cc_id}/selectnode/`, query: { 'template_id': this.template_id, common: this.common } })
+                    } else {
+                        this.$router.push({ path: `/template/newtask/${this.cc_id}/selectnode/`, query: { 'template_id': this.template_id } })
+                    }
                 }
+            },
+            onCreateTask () {
+                if (this.isSubmit) return
+                const paramEditComp = this.$refs.TaskParamEdit
+                this.$validator.validateAll().then(async (result) => {
+                    let formValid = true
+                    const pipelineData = tools.deepClone(this.pipelineData)
+                    if (paramEditComp) {
+                        const formData = paramEditComp.getVariableData()
+                        pipelineData.constants = formData
+                        formValid = paramEditComp.validate()
+                    }
 
-                if (!result || !formValid) return
+                    if (!result || !formValid) return
 
-                this.isSubmit = true
-                let flowType
-                if (this.userType === 'functor') {
-                    flowType = 'common_func'
-                } else {
-                    flowType = this.isSelectFunctionalType ? 'common_func' : 'common'
-                }
-                if (this.isStartNow) {
-                    const data = {
-                        'name': this.taskName,
-                        'description': '',
-                        'templateId': this.template_id,
-                        'execData': JSON.stringify(pipelineData),
-                        'flowType': flowType,
-                        'common': this.common
+                    this.isSubmit = true
+                    let flowType
+                    if (this.userType === 'functor') {
+                        flowType = 'common_func'
+                    } else {
+                        flowType = this.isSelectFunctionalType ? 'common_func' : 'common'
                     }
-                    try {
-                        const taskData = await this.createTask(data)
+                    if (this.isStartNow) {
+                        const data = {
+                            'name': this.taskName,
+                            'description': '',
+                            'templateId': this.template_id,
+                            'execData': JSON.stringify(pipelineData),
+                            'flowType': flowType,
+                            'common': this.common
+                        }
+                        try {
+                            const taskData = await this.createTask(data)
 
-                        if (this.viewMode === 'appmaker') {
-                            if (this.isSelectFunctionalType) {
-                                this.$router.push({path: `/appmaker/${this.app_id}/task_home/${this.cc_id}/`})
+                            if (this.viewMode === 'appmaker') {
+                                if (this.isSelectFunctionalType) {
+                                    this.$router.push({ path: `/appmaker/${this.app_id}/task_home/${this.cc_id}/` })
+                                } else {
+                                    this.$router.push({ path: `/appmaker/${this.app_id}/execute/${this.cc_id}/`, query: { instance_id: taskData.instance_id } })
+                                }
+                            } else if (this.isSelectFunctionalType) {
+                                if (this.common) {
+                                    this.$router.push({ path: `/taskflow/home/${this.cc_id}/`, query: { common: this.common } })
+                                } else {
+                                    this.$router.push({ path: `/taskflow/home/${this.cc_id}/` })
+                                }
                             } else {
-                                this.$router.push({path: `/appmaker/${this.app_id}/execute/${this.cc_id}/`, query: {instance_id: taskData.instance_id}})
+                                this.$router.push({ path: `/taskflow/execute/${this.cc_id}/`, query: { instance_id: taskData.instance_id } })
                             }
-                        } else if (this.isSelectFunctionalType) {
-                            if (this.common) {
-                                this.$router.push({path: `/taskflow/home/${this.cc_id}/`, query: {common: this.common}})
-                            } else {
-                                this.$router.push({path: `/taskflow/home/${this.cc_id}/`})
+                        } catch (e) {
+                            errorHandler(e, this)
+                        } finally {
+                            this.isSubmit = false
+                        }
+                    } else {
+                        // 创建周期任务
+                        const cronArray = this.periodicCron.split(' ')
+                        const cron = JSON.stringify({
+                            'minute': cronArray[0],
+                            'hour': cronArray[1],
+                            'day_of_week': cronArray[2],
+                            'day_of_month': cronArray[3],
+                            'month_of_year': cronArray[4]
+                        })
+                        const data = {
+                            'name': this.taskName,
+                            'cron': cron,
+                            'templateId': this.template_id,
+                            'execData': JSON.stringify(pipelineData)
+                        }
+                        try {
+                            const periodicData = await this.createPeriodic(data)
+                            if (periodicData.result) {
+                                this.$bkMessage({
+                                    'message': gettext('创建周期任务成功'),
+                                    'theme': 'success'
+                                })
+                                this.$router.push({ path: `/periodic/home/${this.cc_id}/` })
                             }
-                        } else {
-                            this.$router.push({path: `/taskflow/execute/${this.cc_id}/`, query: {instance_id: taskData.instance_id}})
+                        } catch (e) {
+                            errorHandler(e, this)
+                        } finally {
+                            this.isSubmit = false
                         }
-                    } catch (e) {
-                        errorHandler(e, this)
                     }
+                })
+            },
+            onChangeStartNow (value) {
+                if (value === this.isStartNow) {
+                    return
+                }
+                this.isStartNow = value
+                this.$emit('setPeriodicStep', { 'periodicType': value, 'functionalType': this.isSelectFunctionalType })
+                if (!value) {
+                    this.lastTaskName = this.taskName
+                    this.taskName = this.templateName
                 } else {
-                    // 创建周期任务
-                    const cronArray = this.periodicCron.split(' ')
-                    const cron = JSON.stringify({
-                        'minute': cronArray[0],
-                        'hour': cronArray[1],
-                        'day_of_week': cronArray[2],
-                        'day_of_month': cronArray[3],
-                        'month_of_year': cronArray[4]
-                    })
-                    const data = {
-                        'name': this.taskName,
-                        'cron': cron,
-                        'templateId': this.template_id,
-                        'execData': JSON.stringify(pipelineData)
-                    }
-                    const periodicData = await this.createPeriodic(data)
-                    this.$bkMessage({
-                        'message': gettext('创建周期任务成功'),
-                        'theme': 'success'
-                    })
-                    this.$router.push({path: `/periodic/home/${this.cc_id}/`})
+                    this.taskName = this.lastTaskName
                 }
-            })
-        },
-        onChangeStartNow (value) {
-            if (value === this.isStartNow) {
-                return
-            }
-            this.isStartNow = value
-            this.$emit('setPeriodicStep', {'periodicType': value, 'functionalType': this.isSelectFunctionalType})
-            if (!value) {
-                this.lastTaskName = this.taskName
-                this.taskName = this.templateName
-            } else {
-                this.taskName = this.lastTaskName
+            },
+            onChangeConfigLoading (loading) {
+                this.configLoading = loading
             }
-        },
-        onChangeConfigLoading (loading) {
-            this.configLoading = loading
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskCreate/TaskSelectNode.vue b/pipeline/blueflow/src/pages/task/TaskCreate/TaskSelectNode.vue
index 0df9a50904..830730f998 100644
--- a/pipeline/blueflow/src/pages/task/TaskCreate/TaskSelectNode.vue
+++ b/pipeline/blueflow/src/pages/task/TaskCreate/TaskSelectNode.vue
@@ -10,13 +10,13 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="select-node-wrapper" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="select-node-wrapper" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div class="canvas-content">
             <div
                 :class="[
                     'scheme-right-header',
-                    {'scheme-toggle-right-header': !showPanel
-                }]"
+                    { 'scheme-toggle-right-header': !showPanel
+                    }]"
                 v-if="isSchemeShow">
                 <div class="scheme-combine-shape" @click="togglePanel">
                     <i class="common-icon-paper" v-bktooltips.top="i18n.schema"></i>
@@ -38,7 +38,7 @@
                         <bk-button size="small" @click="onCancelScheme">{{i18n.actionCancel}}</bk-button>
                         <span v-if="errors.has('schemeName')" class="common-error-tip error-msg">{{ errors.first('schemeName') }}</span>
                     </div>
-                    <bk-button type="primary" v-else :class="['save-scheme-btn', {'disabled-btn': isPreviewMode}]" @click="onShowSchemeDialog">{{ i18n.newSchema }}</bk-button>
+                    <bk-button type="primary" v-else :class="['save-scheme-btn', { 'disabled-btn': isPreviewMode }]" @click="onShowSchemeDialog">{{ i18n.newSchema }}</bk-button>
                 </div>
                 <div class="scheme-content">
                     <ul class="schemeList">
@@ -46,7 +46,7 @@
                             v-for="item in taskScheme"
                             :class="{
                                 'scheme-item': true,
-                                'selected': item.id === selectedScheme && lastSelectSchema === item.id,
+                                'selected': item.id === selectedScheme && lastSelectSchema === item.id
                             }"
                             :key="item.id"
                             @click="onSelectScheme(item.id)">
@@ -72,24 +72,24 @@
             <pipelineCanvas
                 v-if="!loading && !isPreviewMode"
                 ref="pipelineCanvas"
-                :previewDataLoading="previewDataLoading"
-                :isMenuBarShow="false"
-                :isConfigBarShow="false"
-                :isEdit="false"
-                :isSelectNode="isSchemeShow"
-                :isSelectAllNode="isSelectAllNode"
-                :canvasData="canvasData"
+                :preview-data-loading="previewDataLoading"
+                :is-menu-bar-show="false"
+                :is-config-bar-show="false"
+                :is-edit="false"
+                :is-select-node="isSchemeShow"
+                :is-select-all-node="isSelectAllNode"
+                :canvas-data="canvasData"
                 @onSelectNode="onSelectNode">
             </pipelineCanvas>
             <NodePreview
                 v-else
                 ref="nodePreview"
-                :previewDataLoading="previewDataLoading"
-                :canvasData="formatCanvasData(previewData)"
-                :previewBread="previewBread"
-                :isSelectNode="isSchemeShow"
-                :isSelectAllNode="isSelectAllNode"
-                :isPreviewMode="isPreviewMode"
+                :preview-data-loading="previewDataLoading"
+                :canvas-data="formatCanvasData(previewData)"
+                :preview-bread="previewBread"
+                :is-select-node="isSchemeShow"
+                :is-select-all-node="isSelectAllNode"
+                :is-preview-mode="isPreviewMode"
                 @onNodeClick="onNodeClick"
                 @onSelectSubflow="onSelectSubflow">
             </NodePreview>
@@ -104,638 +104,641 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import tools from '@/utils/tools.js'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import PipelineCanvas from '@/components/common/PipelineCanvas/index.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import NodePreview from '@/pages/task/NodePreview.vue'
-import formatPositionUtils from '@/utils/formatPosition.js'
-export default {
-    name: 'TaskSelectNode',
-    components: {
-        PipelineCanvas,
-        BaseInput,
-        NodePreview
-    },
-    props: ['cc_id', 'template_id', 'common', 'excludeNode'],
-    data () {
-        return {
-            i18n: {
-                schemaList: gettext('执行方案列表'),
-                newSchema: gettext('新建'),
-                all: gettext('全选'),
-                affirm: gettext('保存'),
-                cancel: gettext('取消全选'),
-                actionCancel: gettext('取消'),
-                next: gettext('下一步'),
-                save: gettext('执行方案保存'),
-                schemaName: gettext('方案名称'),
-                previewMode: gettext('预览模式：'),
-                schema: gettext('执行方案')
-            },
-            loading: true,
-            bkMessageInstance: null,
-            isSubmit: false,
-            isDelete: false,
-            showPanel: true,
-            selectedNodes: [],
-            selectedScheme: '',
-            schemeName: '',
-            schemeNameRule: {
-                required: true,
-                max: STRING_LENGTH.SCHEME_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            isPreviewMode: false,
-            previewDataLoading: false,
-            version: '',
-            previewBread: [],
-            previewData: {
-                location: [],
-                line: [],
-                gateways: {},
-                constants: []
-            },
-            taskName: '',
-            pipelineData: '',
-            isPreview: false,
-            lastSelectSchema: '',
-            allSelectedNode: [],
-            isSelectAllNode: true,
-            taskActionShow: false
-        }
-    },
-    computed: {
-        ...mapState({
-            'activities': state => state.template.activities,
-            'locations': state => state.template.location,
-            'lines': state => state.template.line,
-            'constants': state => state.template.constants,
-            'gateways': state => state.template.gateways,
-            'taskScheme': state => state.task.taskScheme,
-            'app_id': state => state.app_id,
-            'viewMode': state => state.view_mode
-        }),
-        canvasData () {
-            const branchConditions = {}
-            let mode
-            for (let gKey in this.gateways) {
-                const item = this.gateways[gKey]
-                if (item.conditions) {
-                    branchConditions[item.id] = Object.assign({}, item.conditions)
-                }
-            }
-            if (this.viewMode === 'appmaker') {
-                mode = 'selectDisabled'
-            } else {
-                mode = 'select'
-            }
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import tools from '@/utils/tools.js'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import PipelineCanvas from '@/components/common/PipelineCanvas/index.vue'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import NodePreview from '@/pages/task/NodePreview.vue'
+    import formatPositionUtils from '@/utils/formatPosition.js'
+    export default {
+        name: 'TaskSelectNode',
+        components: {
+            PipelineCanvas,
+            BaseInput,
+            NodePreview
+        },
+        props: ['cc_id', 'template_id', 'common', 'excludeNode'],
+        data () {
             return {
-                lines: this.lines,
-                locations: this.locations.map(item => {return {...item, mode, checked: true}}),
-                branchConditions
+                i18n: {
+                    schemaList: gettext('执行方案列表'),
+                    newSchema: gettext('新建'),
+                    all: gettext('全选'),
+                    affirm: gettext('保存'),
+                    cancel: gettext('取消全选'),
+                    actionCancel: gettext('取消'),
+                    next: gettext('下一步'),
+                    save: gettext('执行方案保存'),
+                    schemaName: gettext('方案名称'),
+                    previewMode: gettext('预览模式：'),
+                    schema: gettext('执行方案')
+                },
+                loading: true,
+                bkMessageInstance: null,
+                isSubmit: false,
+                isDelete: false,
+                showPanel: true,
+                selectedNodes: [],
+                selectedScheme: '',
+                schemeName: '',
+                schemeNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.SCHEME_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                isPreviewMode: false,
+                previewDataLoading: false,
+                version: '',
+                previewBread: [],
+                previewData: {
+                    location: [],
+                    line: [],
+                    gateways: {},
+                    constants: []
+                },
+                taskName: '',
+                pipelineData: '',
+                isPreview: false,
+                lastSelectSchema: '',
+                allSelectedNode: [],
+                isSelectAllNode: true,
+                taskActionShow: false
             }
         },
-        isSchemeShow () {
-            return this.viewMode !== 'appmaker' && this.locations.some(item => item.optional)
-        }
-    },
-    mounted () {
-        this.getTemplateData()
-    },
-    methods: {
-        ...mapActions('template/', [
-            'loadTemplateData',
-            'saveTemplateData'
-        ]),
-        ...mapActions('task/', [
-            'loadTaskScheme',
-            'createTaskScheme',
-            'deleteTaskScheme',
-            'getSchemeDetail',
-            'loadPreviewNodeData'
-        ]),
-        ...mapActions('appmaker/', [
-            'loadAppmakerDetail'
-        ]),
-        ...mapMutations('template/', [
-            'setTemplateData'
-        ]),
-        ...mapMutations('task/', [
-            'setTaskScheme'
-        ]),
-        /**
-         * 获取模板数据，并设置至store中
-         */
-        async getTemplateData () {
-            this.loading = true
-            try {
-                const data = {
-                    templateId: this.template_id,
-                    common: this.common
+        computed: {
+            ...mapState({
+                'activities': state => state.template.activities,
+                'locations': state => state.template.location,
+                'lines': state => state.template.line,
+                'constants': state => state.template.constants,
+                'gateways': state => state.template.gateways,
+                'taskScheme': state => state.task.taskScheme,
+                'app_id': state => state.app_id,
+                'viewMode': state => state.view_mode
+            }),
+            canvasData () {
+                const branchConditions = {}
+                let mode
+                for (const gKey in this.gateways) {
+                    const item = this.gateways[gKey]
+                    if (item.conditions) {
+                        branchConditions[item.id] = Object.assign({}, item.conditions)
+                    }
                 }
-                const templateData = await this.loadTemplateData(data)
-                this.version = templateData.version
-                this.taskName = templateData.name
-                const schemeData = await this.loadTaskScheme({'cc_id': this.cc_id, 'template_id': this.template_id})
                 if (this.viewMode === 'appmaker') {
-                    const appmakerData = await this.loadAppmakerDetail(this.app_id)
-                    const schemeId = Number(appmakerData.template_scheme_id)
-                    schemeId && this.onSelectScheme(schemeId)
+                    mode = 'selectDisabled'
+                } else {
+                    mode = 'select'
                 }
-                
-                this.setTaskScheme(schemeData)
-                this.setTemplateData(templateData)
-                this.modifySelectedLocation()
-                this.allSelectedNode = this.selectedNodes
-                this.updateSelectedLocation()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
+                return {
+                    lines: this.lines,
+                    locations: this.locations.map(item => {
+                        return { ...item, mode, checked: true }
+                    }),
+                    branchConditions
+                }
+            },
+            isSchemeShow () {
+                return this.viewMode !== 'appmaker' && this.locations.some(item => item.optional)
             }
         },
-        /**
-         * 面板是否显示
-         */
-        togglePanel () {
-            this.showPanel = !this.showPanel
-        },
-        /**
-         * 显示任务方案面板
-         */
-        onShowSchemeDialog () {
-            if (!this.isPreviewMode) {
-                this.taskActionShow = true
-            }
+        mounted () {
+            this.getTemplateData()
         },
-        /**
-         * 显示任务方案面板
-         * @return {Array} nodeId  被选中的ID数组
-         */
-        getExcludeNode () {
-            let canvasEl
-            if (this.$refs.pipelineCanvas === undefined) {
-                canvasEl = this.$refs.nodePreview.$el
-            } else {
-                canvasEl = this.$refs.pipelineCanvas.$el
-            }
-            const optionalNode = canvasEl.querySelectorAll('.node-checkbox input[type="checkbox"]')
-            const nodeId = []
-            Array.prototype.forEach.call(optionalNode, function (item) {
-                if (!item.checked) {
-                    nodeId.push(item.dataset.id)
+        methods: {
+            ...mapActions('template/', [
+                'loadTemplateData',
+                'saveTemplateData'
+            ]),
+            ...mapActions('task/', [
+                'loadTaskScheme',
+                'createTaskScheme',
+                'deleteTaskScheme',
+                'getSchemeDetail',
+                'loadPreviewNodeData'
+            ]),
+            ...mapActions('appmaker/', [
+                'loadAppmakerDetail'
+            ]),
+            ...mapMutations('template/', [
+                'setTemplateData'
+            ]),
+            ...mapMutations('task/', [
+                'setTaskScheme'
+            ]),
+            /**
+             * 获取模板数据，并设置至store中
+             */
+            async getTemplateData () {
+                this.loading = true
+                try {
+                    const data = {
+                        templateId: this.template_id,
+                        common: this.common
+                    }
+                    const templateData = await this.loadTemplateData(data)
+                    this.version = templateData.version
+                    this.taskName = templateData.name
+                    const schemeData = await this.loadTaskScheme({ 'cc_id': this.cc_id, 'template_id': this.template_id })
+                    if (this.viewMode === 'appmaker') {
+                        const appmakerData = await this.loadAppmakerDetail(this.app_id)
+                        const schemeId = Number(appmakerData.template_scheme_id)
+                        schemeId && this.onSelectScheme(schemeId)
+                    }
+                
+                    this.setTaskScheme(schemeData)
+                    this.setTemplateData(templateData)
+                    this.modifySelectedLocation()
+                    this.allSelectedNode = this.selectedNodes
+                    this.updateSelectedLocation()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.loading = false
                 }
-            })
-            return nodeId
-        },
-        /**
-         * 添加方案
-         */
-        onAddScheme () {
-            if (this.isSubmit) return
-            const isSchemeNameExist = this.taskScheme.some(item => item.name === this.schemeName)
-            if (isSchemeNameExist) {
-                errorHandler({message: gettext('方案名称已存在')}, this)
-                return
-            }
-            this.isSubmit = true
-            this.$validator.validateAll().then(async (result) => {
-                if (!result) {
-                    this.isSubmit = false
+            },
+            /**
+             * 面板是否显示
+             */
+            togglePanel () {
+                this.showPanel = !this.showPanel
+            },
+            /**
+             * 显示任务方案面板
+             */
+            onShowSchemeDialog () {
+                if (!this.isPreviewMode) {
+                    this.taskActionShow = true
+                }
+            },
+            /**
+             * 显示任务方案面板
+             * @return {Array} nodeId  被选中的ID数组
+             */
+            getExcludeNode () {
+                let canvasEl
+                if (this.$refs.pipelineCanvas === undefined) {
+                    canvasEl = this.$refs.nodePreview.$el
+                } else {
+                    canvasEl = this.$refs.pipelineCanvas.$el
+                }
+                const optionalNode = canvasEl.querySelectorAll('.node-checkbox input[type="checkbox"]')
+                const nodeId = []
+                Array.prototype.forEach.call(optionalNode, function (item) {
+                    if (!item.checked) {
+                        nodeId.push(item.dataset.id)
+                    }
+                })
+                return nodeId
+            },
+            /**
+             * 添加方案
+             */
+            onAddScheme () {
+                if (this.isSubmit) return
+                const isSchemeNameExist = this.taskScheme.some(item => item.name === this.schemeName)
+                if (isSchemeNameExist) {
+                    errorHandler({ message: gettext('方案名称已存在') }, this)
                     return
                 }
-                const excludeNode = this.getExcludeNode()
-                let selectedNodes = []
-                this.canvasData.locations.forEach(item => {
-                    if (item.type === 'tasknode' || item.type === 'subflow') {
-                        if (excludeNode.indexOf(item.id) === -1) {
-                            selectedNodes.push(item.id)
+                this.isSubmit = true
+                this.$validator.validateAll().then(async (result) => {
+                    if (!result) {
+                        this.isSubmit = false
+                        return
+                    }
+                    const excludeNode = this.getExcludeNode()
+                    const selectedNodes = []
+                    this.canvasData.locations.forEach(item => {
+                        if (item.type === 'tasknode' || item.type === 'subflow') {
+                            if (excludeNode.indexOf(item.id) === -1) {
+                                selectedNodes.push(item.id)
+                            }
                         }
+                    })
+                    this.selectedNodes = selectedNodes
+                    this.schemeName = this.schemeName.trim()
+                    const scheme = {
+                        cc_id: this.cc_id,
+                        template_id: this.template_id,
+                        name: this.schemeName,
+                        data: JSON.stringify(selectedNodes)
+                    }
+                    try {
+                        const newScheme = await this.createTaskScheme(scheme)
+                        const schemeData = await this.loadTaskScheme({ 'cc_id': this.cc_id, 'template_id': this.template_id })
+                        this.setTaskScheme(schemeData)
+                        this.selectedScheme = newScheme.id
+                        this.lastSelectSchema = newScheme.id
+                        this.schemeName = ''
+                        this.taskActionShow = false
+                        this.$bkMessage({
+                            message: gettext('方案添加成功'),
+                            theme: 'success'
+                        })
+                    } catch (e) {
+                        errorHandler(e, this)
+                    } finally {
+                        this.isSubmit = false
+                    }
+                })
+            },
+            /**
+             * 更新选择节点
+             */
+            updateSelectedLocation () {
+                const pipelineCanvas = this.$refs.pipelineCanvas
+                this.canvasData.locations.forEach((item) => {
+                    if (item.type === 'tasknode' || item.type === 'subflow') {
+                        const checkState = this.selectedNodes.indexOf(item.id) > -1
+                        this.$set(item, 'checked', checkState)
+                        pipelineCanvas && pipelineCanvas.onUpdateNodeInfo(item.id, item)
+                    }
+                })
+            },
+            modifySelectedLocation () {
+                const selectedNodes = []
+                this.locations.forEach(item => {
+                    if (
+                        (item.type === 'tasknode' || item.type === 'subflow')
+                        && this.excludeNode.indexOf(item.id) === -1
+                    ) {
+                        selectedNodes.push(item.id)
                     }
                 })
                 this.selectedNodes = selectedNodes
-                this.schemeName = this.schemeName.trim()
-                const scheme = {
-                    cc_id: this.cc_id,
-                    template_id: this.template_id,
-                    name: this.schemeName,
-                    data: JSON.stringify(selectedNodes)
+            },
+            /**
+             * 选择方案并进行切换更新选择的节点
+             */
+            async onSelectScheme (id) {
+                this.selectedScheme = id
+                if (this.lastSelectSchema === id) {
+                    this.lastSelectSchema = ''
+                
+                    if (this.isPreviewMode) {
+                        await this.getPreviewNodeData(this.template_id, true)
+                    } else {
+                        this.modifySelectedLocation()
+                        this.updateSelectedLocation()
+                    }
+                } else {
+                    this.lastSelectSchema = id
+                    try {
+                        const data = await this.getSchemeDetail(id)
+                        this.selectedNodes = tools.deepClone(data.data)
+                        this.updateSelectedLocation()
+                        if (this.isPreviewMode) {
+                            await this.getPreviewNodeData(this.template_id)
+                        }
+                    } catch (e) {
+                        errorHandler(e, this)
+                    }
                 }
+            },
+            /**
+             * 删除方案
+             */
+            async onDeleteScheme (id) {
+                if (this.isDelete) return
+                this.isDelete = true
                 try {
-                    const newScheme = await this.createTaskScheme(scheme)
-                    const schemeData = await this.loadTaskScheme({'cc_id': this.cc_id, 'template_id': this.template_id})
+                    await this.deleteTaskScheme(id)
+                    const schemeData = await this.loadTaskScheme({ 'cc_id': this.cc_id, 'template_id': this.template_id })
                     this.setTaskScheme(schemeData)
-                    this.selectedScheme = newScheme.id
-                    this.lastSelectSchema = newScheme.id
-                    this.schemeName = ''
-                    this.taskActionShow = false
                     this.$bkMessage({
-                        message: gettext('方案添加成功'),
+                        message: gettext('方案删除成功'),
                         theme: 'success'
                     })
                 } catch (e) {
                     errorHandler(e, this)
                 } finally {
-                    this.isSubmit = false
-                }
-            })
-        },
-        /**
-         * 更新选择节点
-         */
-        updateSelectedLocation () {
-            const pipelineCanvas = this.$refs.pipelineCanvas
-            this.canvasData.locations.forEach((item) => {
-                if (item.type === 'tasknode' || item.type === 'subflow') {
-                    const checkState = this.selectedNodes.indexOf(item.id) > -1
-                    this.$set(item, 'checked', checkState)
-                    pipelineCanvas && pipelineCanvas.onUpdateNodeInfo(item.id, item)
-                }
-            })
-        },
-        modifySelectedLocation () {
-            const selectedNodes = []
-            this.locations.forEach(item => {
-                if (
-                    (item.type === 'tasknode' || item.type === 'subflow') &&
-                    this.excludeNode.indexOf(item.id) === -1
-                ) {
-                    selectedNodes.push(item.id)
+                    this.isDelete = false
                 }
-            })
-            this.selectedNodes = selectedNodes
-        },
-        /**
-         * 选择方案并进行切换更新选择的节点
-         */
-        async onSelectScheme (id) {
-            this.selectedScheme = id
-            if (this.lastSelectSchema === id) {
-                this.lastSelectSchema = ''
-                
-                if (this.isPreviewMode) {
-                    await this.getPreviewNodeData(this.template_id, true)
-                } else {
-                    this.modifySelectedLocation()
-                    this.updateSelectedLocation()
-                }
-            } else {
-                this.lastSelectSchema = id
+            },
+            /**
+             * 全选可选节点
+             */
+            onSelectAllNode () {
+                const list = []
+                this.canvasData.locations.forEach(item => {
+                    if (item.type === 'tasknode' || item.type === 'subflow') {
+                        item.checked = true
+                        list.push(item.id)
+                    }
+                })
+                this.selectedNodes = list
+                this.updateSelectedLocation()
+            },
+            /**
+             * 取消所有可选节点
+             */
+            onSelectNoneNode () {
+                this.canvasData.locations.forEach(item => {
+                    if (item.type === 'tasknode' || item.type === 'subflow') {
+                        item.checked = false
+                    }
+                })
+                this.selectedNodes = []
+                this.updateSelectedLocation()
+            },
+            /**
+             * 进入参数填写阶段，设置执行节点
+             */
+            async onGotoParamFill () {
+                this.loading = true
+                const excludeNode = this.getExcludeNode()
                 try {
-                    const data = await this.getSchemeDetail(id)
-                    this.selectedNodes = tools.deepClone(data.data)
-                    this.updateSelectedLocation()
-                    if (this.isPreviewMode) {
+                    if (!this.isPreview) {
                         await this.getPreviewNodeData(this.template_id)
                     }
-                } catch (e) {
-                    errorHandler(e, this)
-                }
-            }
-            
-        },
-        /**
-         * 删除方案
-         */
-        async onDeleteScheme (id) {
-            if (this.isDelete) return
-            this.isDelete = true
-            try {
-                await this.deleteTaskScheme(id)
-                const schemeData = await this.loadTaskScheme({'cc_id': this.cc_id, 'template_id': this.template_id})
-                this.setTaskScheme(schemeData)
-                this.$bkMessage({
-                    message: gettext('方案删除成功'),
-                    theme: 'success'
-                })
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.isDelete = false
-            }
-        },
-        /**
-         * 全选可选节点
-         */
-        onSelectAllNode () {
-            const list = []
-            this.canvasData.locations.forEach(item => {
-                if (item.type === 'tasknode' || item.type === 'subflow') {
-                    item.checked = true
-                    list.push(item.id)
-                }
-            })
-            this.selectedNodes = list
-            this.updateSelectedLocation()
-        },
-        /**
-         * 取消所有可选节点
-         */
-        onSelectNoneNode () {
-            this.canvasData.locations.forEach(item => {
-                if (item.type === 'tasknode' || item.type === 'subflow') {
-                    item.checked = false
-                }
-            })
-            this.selectedNodes = []
-            this.updateSelectedLocation()
-        },
-        /**
-         * 进入参数填写阶段，设置执行节点
-         */
-        async onGotoParamFill () {
-            this.loading = true
-            const excludeNode = this.getExcludeNode()
-            try {
-                if (!this.isPreview) {
-                    await this.getPreviewNodeData(this.template_id)
-                }
                 
-                this.$emit('setExcludeNode', excludeNode)
-                this.updateSelectedLocation()
-                this.$emit('setPreviewData', this.pipelineData)
+                    this.$emit('setExcludeNode', excludeNode)
+                    this.updateSelectedLocation()
+                    this.$emit('setPreviewData', this.pipelineData)
                 
-                this.loading = false
-                if (this.viewMode === 'appmaker') {
-                    if (this.common) {
-                        this.$router.push({path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/paramfill/`, query: {'template_id': this.template_id, common: this.common}})
-                    } else {
-                        this.$router.push({path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/paramfill/`, query: {'template_id': this.template_id}})
-                    }
-                } else {
-                    if (this.common) {
-                        this.$router.push({path: `/template/newtask/${this.cc_id}/paramfill/`, query: {template_id: this.template_id, common: this.common}})
+                    this.loading = false
+                    if (this.viewMode === 'appmaker') {
+                        if (this.common) {
+                            this.$router.push({ path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/paramfill/`, query: { 'template_id': this.template_id, common: this.common } })
+                        } else {
+                            this.$router.push({ path: `/appmaker/${this.app_id}/newtask/${this.cc_id}/paramfill/`, query: { 'template_id': this.template_id } })
+                        }
                     } else {
-                        this.$router.push({path: `/template/newtask/${this.cc_id}/paramfill/`, query: {template_id: this.template_id}})
+                        if (this.common) {
+                            this.$router.push({ path: `/template/newtask/${this.cc_id}/paramfill/`, query: { template_id: this.template_id, common: this.common } })
+                        } else {
+                            this.$router.push({ path: `/template/newtask/${this.cc_id}/paramfill/`, query: { template_id: this.template_id } })
+                        }
                     }
+                } catch (e) {
+                    errorHandler(e, this)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        /**
-         * 预览模式的点击事件
-         * @params {Boolean} isPreview  是否是预览模式
-         */
-        onChangePreviewNode (isPreview) {
-            if (isPreview) {
-                this.isPreviewMode = true
-                this.previewBread.push({
-                    data: this.template_id,
-                    name: this.taskName
-                })
-                this.getPreviewNodeData(this.template_id)
-            } else {
-                this.isPreviewMode = false
-                this.previewBread = []
-            }
-        },
-        /**
-         * 获取画布预览节点和全局变量表单项(接口已去掉未选择的节点、为使用的全局变量)
-         * @params {String} templateId  模板 ID
-         * @params {Boolean} isSubflow  是否为子流程预览
-         */
-        async getPreviewNodeData (templateId, isSubflow = false) {
-            this.previewDataLoading = true
-            this.isPreview = true
-            let excludeNode
-            try {
-                excludeNode = this.getExcludeNode()
-            } catch (e) {
-                excludeNode = this.getExecuteNodeList()
-            }
-            excludeNode = isSubflow ? [] : excludeNode
-            const templateSource = this.common ? 'common' : 'business'
-            const params = {
-                templateId: templateId,
-                excludeTaskNodesId: JSON.stringify(excludeNode),
-                common: this.common,
-                cc_id: this.cc_id,
-                template_source: templateSource,
-                version: this.version
-            }
-            try {
-                const resp = await this.loadPreviewNodeData(params)
-                if (resp.result) {
-                    let previewNodeData = resp.data.pipeline_tree
-                    // let compareNodeData = JSON.stringify(previewNodeData)
-                    // while (true) {
-                    //     this.clearUnnecessaryGateway(previewNodeData)
-                    //     if (compareNodeData === JSON.stringify(previewNodeData)) {
-                    //         break
-                    //     }
-                    //     compareNodeData = JSON.stringify(previewNodeData)
-                    // }
-                    const {line, location} = previewNodeData
-                    if (formatPositionUtils.isLocationAllNode(location)) {
-                        const data = formatPositionUtils.formatPosition(line, location)
-                        previewNodeData['line'] = data['lines']
-                        previewNodeData['location'] = data['locations']
-                    }
-                    this.previewData = previewNodeData
-                    // 改变预览前的选择节点
-                    this.canvasData.locations.forEach(item => {
-                        if ((item.type === 'tasknode' || item.type === 'subflow') && !(item.id in previewNodeData.activities)) {
-                            item.checked = false
-                        }
+            },
+            /**
+             * 预览模式的点击事件
+             * @params {Boolean} isPreview  是否是预览模式
+             */
+            onChangePreviewNode (isPreview) {
+                if (isPreview) {
+                    this.isPreviewMode = true
+                    this.previewBread.push({
+                        data: this.template_id,
+                        name: this.taskName
                     })
-                    if (!isSubflow) {
-                        this.pipelineData = tools.deepClone(previewNodeData)
-                    }
+                    this.getPreviewNodeData(this.template_id)
                 } else {
-                    errorHandler(resp, this)
+                    this.isPreviewMode = false
+                    this.previewBread = []
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.previewDataLoading = false
-            }
-        },
-        /**
-         * 清空没有被选中的节点
-         * @params {Object} previewNodeData  整个pipelineTree
-         * @return {Object} previewNodeData  清空了需要使用的节点的pipelineTree
-         */
-        clearUnnecessaryGateway (previewNodeData) {
-            const {line, location}  = previewNodeData
-            // 数据分组 用于获取线段的后置连线
-            let group = []
-            for (let nowLine of line) {
-                let sourceId = nowLine.source.id
-                let targetId = nowLine.target.id
-                if (group[sourceId]) {
-                    group[sourceId].push(targetId)
-                } else {
-                    group[sourceId] = [targetId]
+            },
+            /**
+             * 获取画布预览节点和全局变量表单项(接口已去掉未选择的节点、为使用的全局变量)
+             * @params {String} templateId  模板 ID
+             * @params {Boolean} isSubflow  是否为子流程预览
+             */
+            async getPreviewNodeData (templateId, isSubflow = false) {
+                this.previewDataLoading = true
+                this.isPreview = true
+                let excludeNode
+                try {
+                    excludeNode = this.getExcludeNode()
+                } catch (e) {
+                    excludeNode = this.getExecuteNodeList()
                 }
-            }
-            location.forEach((nowLocation) => {
-                const {type, id} = nowLocation
-                if (type === 'parallelgateway' || type === 'branchgateway') {
-                    // 用于判断是否是有需要删除的线和内容
-                    let lineArray = []
-                    // 检验Array的每一个项相同
-                    group[id].forEach((targetId) => {
-                        if (lineArray.indexOf(targetId) === -1) {
-                            lineArray.push(targetId)
-                        }
-                    })
-                    const lineArrayLength =  lineArray.length
-                    let deleteLocation = location.find(location => location.id === lineArray[0])
-                    let deleteLocationType = undefined
-                    if (deleteLocation !== undefined) {
-                        deleteLocationType = deleteLocation.type
-                    }
-                    // 长度为1 需要删除节点和线段
-                    if (lineArrayLength === 1 &&  deleteLocationType !== 'subflow' && deleteLocationType !== 'tasknode') {
-                        // 汇聚网关的id
-                        let convergegatewayId =  group[id][0]
-                        const convergegateway = location.find(location => location.id === convergegatewayId)
-                        if (!convergegateway || convergegateway.type !== 'convergegateway') {
-                            // 如果不是汇聚网关就不需要删除了
-                            return
+                excludeNode = isSubflow ? [] : excludeNode
+                const templateSource = this.common ? 'common' : 'business'
+                const params = {
+                    templateId: templateId,
+                    excludeTaskNodesId: JSON.stringify(excludeNode),
+                    common: this.common,
+                    cc_id: this.cc_id,
+                    template_source: templateSource,
+                    version: this.version
+                }
+                try {
+                    const resp = await this.loadPreviewNodeData(params)
+                    if (resp.result) {
+                        const previewNodeData = resp.data.pipeline_tree
+                        // let compareNodeData = JSON.stringify(previewNodeData)
+                        // while (true) {
+                        //     this.clearUnnecessaryGateway(previewNodeData)
+                        //     if (compareNodeData === JSON.stringify(previewNodeData)) {
+                        //         break
+                        //     }
+                        //     compareNodeData = JSON.stringify(previewNodeData)
+                        // }
+                        const { line, location } = previewNodeData
+                        if (formatPositionUtils.isLocationAllNode(location)) {
+                            const data = formatPositionUtils.formatPosition(line, location)
+                            previewNodeData['line'] = data['lines']
+                            previewNodeData['location'] = data['locations']
                         }
-                        // 获取后置节点
-                        let lastId = line.find((newLine) => newLine.source.id === convergegatewayId).target.id
-                        // 将并行或分支网关的前一个节点连线线段和汇聚网关的下一个节点连接
-                        let preId = line.find((newLine) => newLine.target.id === id).source.id
-                        line.find((newLine) => newLine.source.id === preId && newLine.target.id === id).target.id = lastId
-                        // 删除节点
-                        while (true) {
-                            // 并行网关的前节点
-                            const frontLineSourceIndex = line.findIndex(item => item.source.id === id)
-                            if (frontLineSourceIndex !== -1) {
-                                line.splice(frontLineSourceIndex, 1)
+                        this.previewData = previewNodeData
+                        // 改变预览前的选择节点
+                        this.canvasData.locations.forEach(item => {
+                            if ((item.type === 'tasknode' || item.type === 'subflow') && !(item.id in previewNodeData.activities)) {
+                                item.checked = false
                             }
-                            // 汇聚网关的后节点
-                            const lastLineTargetIndex = line.findIndex(item => item.target.id === convergegatewayId)
-                            if (lastLineTargetIndex !== -1) {
-                                line.splice(lastLineTargetIndex, 1)
+                        })
+                        if (!isSubflow) {
+                            this.pipelineData = tools.deepClone(previewNodeData)
+                        }
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.previewDataLoading = false
+                }
+            },
+            /**
+             * 清空没有被选中的节点
+             * @params {Object} previewNodeData  整个pipelineTree
+             * @return {Object} previewNodeData  清空了需要使用的节点的pipelineTree
+             */
+            clearUnnecessaryGateway (previewNodeData) {
+                const { line, location } = previewNodeData
+                // 数据分组 用于获取线段的后置连线
+                const group = []
+                for (const nowLine of line) {
+                    const sourceId = nowLine.source.id
+                    const targetId = nowLine.target.id
+                    if (group[sourceId]) {
+                        group[sourceId].push(targetId)
+                    } else {
+                        group[sourceId] = [targetId]
+                    }
+                }
+                location.forEach((nowLocation) => {
+                    const { type, id } = nowLocation
+                    if (type === 'parallelgateway' || type === 'branchgateway') {
+                        // 用于判断是否是有需要删除的线和内容
+                        const lineArray = []
+                        // 检验Array的每一个项相同
+                        group[id].forEach((targetId) => {
+                            if (lineArray.indexOf(targetId) === -1) {
+                                lineArray.push(targetId)
                             }
-                            // 汇聚网关的前节点
-                            const lastLineSourceIndex = line.findIndex(item => item.source.id === convergegatewayId)
-                            if (lastLineSourceIndex !== -1) {
-                                line.splice(lastLineSourceIndex, 1)
+                        })
+                        const lineArrayLength = lineArray.length
+                        const deleteLocation = location.find(location => location.id === lineArray[0])
+                        let deleteLocationType
+                        if (deleteLocation !== undefined) {
+                            deleteLocationType = deleteLocation.type
+                        }
+                        // 长度为1 需要删除节点和线段
+                        if (lineArrayLength === 1 && deleteLocationType !== 'subflow' && deleteLocationType !== 'tasknode') {
+                            // 汇聚网关的id
+                            const convergegatewayId = group[id][0]
+                            const convergegateway = location.find(location => location.id === convergegatewayId)
+                            if (!convergegateway || convergegateway.type !== 'convergegateway') {
+                                // 如果不是汇聚网关就不需要删除了
+                                return
                             }
+                            // 获取后置节点
+                            const lastId = line.find((newLine) => newLine.source.id === convergegatewayId).target.id
+                            // 将并行或分支网关的前一个节点连线线段和汇聚网关的下一个节点连接
+                            const preId = line.find((newLine) => newLine.target.id === id).source.id
+                            line.find((newLine) => newLine.source.id === preId && newLine.target.id === id).target.id = lastId
+                            // 删除节点
+                            while (true) {
+                                // 并行网关的前节点
+                                const frontLineSourceIndex = line.findIndex(item => item.source.id === id)
+                                if (frontLineSourceIndex !== -1) {
+                                    line.splice(frontLineSourceIndex, 1)
+                                }
+                                // 汇聚网关的后节点
+                                const lastLineTargetIndex = line.findIndex(item => item.target.id === convergegatewayId)
+                                if (lastLineTargetIndex !== -1) {
+                                    line.splice(lastLineTargetIndex, 1)
+                                }
+                                // 汇聚网关的前节点
+                                const lastLineSourceIndex = line.findIndex(item => item.source.id === convergegatewayId)
+                                if (lastLineSourceIndex !== -1) {
+                                    line.splice(lastLineSourceIndex, 1)
+                                }
                             
-                            if (frontLineSourceIndex === -1 && lastLineTargetIndex === -1 && lastLineSourceIndex === -1) {
-                                break
+                                if (frontLineSourceIndex === -1 && lastLineTargetIndex === -1 && lastLineSourceIndex === -1) {
+                                    break
+                                }
                             }
-                        }
-                        // 删除节点的内容
-                        const lastLocationIndex = location.findIndex(item => item.id === convergegatewayId)
-                        location.splice(lastLocationIndex, 1)
-                        const frontLocationIndex = location.findIndex(item => item.id === id)
-                        location.splice(frontLocationIndex, 1)
+                            // 删除节点的内容
+                            const lastLocationIndex = location.findIndex(item => item.id === convergegatewayId)
+                            location.splice(lastLocationIndex, 1)
+                            const frontLocationIndex = location.findIndex(item => item.id === id)
+                            location.splice(frontLocationIndex, 1)
                         // 获取节点
-                    } else {
-                        // 可能需要删除空的连线
-                        lineArray.forEach((newLocationId) => {
-                            let deleteLocation = location.find((newLocation) => newLocation.id === newLocationId && newLocation.type === 'convergegateway')
-                            if (deleteLocation) {
-                                for (let locationId of group[id]) {
-                                    // 使用
-                                    if (locationId === newLocationId) {
-                                        const frontLineSourceIndex = line.findIndex(item => item.target.id === newLocationId && item.source.id === id)
-                                        line.splice(frontLineSourceIndex, 1)
+                        } else {
+                            // 可能需要删除空的连线
+                            lineArray.forEach((newLocationId) => {
+                                const deleteLocation = location.find((newLocation) => newLocation.id === newLocationId && newLocation.type === 'convergegateway')
+                                if (deleteLocation) {
+                                    for (const locationId of group[id]) {
+                                        // 使用
+                                        if (locationId === newLocationId) {
+                                            const frontLineSourceIndex = line.findIndex(item => item.target.id === newLocationId && item.source.id === id)
+                                            line.splice(frontLineSourceIndex, 1)
+                                        }
                                     }
                                 }
-                            }
-                        })
+                            })
+                        }
                     }
+                })
+                // 数据内容更新
+                return Object.assign(previewNodeData, { line, location })
+            },
+            /**
+             * 点击子流程节点，并进入新的canvas画面
+             * @params {String} id  点击的子流程节点id
+             */
+            onNodeClick (id) {
+                const activity = this.previewData.activities[id]
+                if (!activity || activity.type !== 'SubProcess') {
+                    return
                 }
-            })
-            // 数据内容更新
-            return Object.assign(previewNodeData, {line, location})
-        },
-        /**
-         * 点击子流程节点，并进入新的canvas画面
-         * @params {String} id  点击的子流程节点id
-         */
-        onNodeClick (id) {
-            const activity = this.previewData.activities[id]
-            if (!activity || activity.type !== 'SubProcess') {
-                return
-            }
-            const templateId = activity.template_id
-            this.previewBread.push({
-                data: templateId,
-                name: activity.name
-            })
-            this.getPreviewNodeData(templateId, true)
-        },
-        /**
-         * 点击预览模式下的面包屑
-         * @params {String} id  点击的节点id（可能为父节点或其他子流程节点）
-         * @params {Number} index  点击的面包屑的下标
-         */
-        onSelectSubflow (id, index) {
-            if (id === this.template_id) {
-                this.previewData = this.pipelineData
-                this.updateCanvas()
-            } else {
-                this.getPreviewNodeData(id, true)
-            }
-            this.previewBread.splice(index + 1, this.previewBread.length)
-        },
-        /**
-         * 格式化pipelineTree的数据，只输出一部分数据
-         * @params {Object} data  需要格式化的pipelineTree
-         * @return {Object} {lines（线段连接）, locations（节点默认都被选中）, branchConditions（分支条件）}
-         */
-        formatCanvasData (data) {
-            const {line, location, gateways} = data
-            const branchConditions = {}
-            for (const gKey in gateways) {
-                const item = gateways[gKey]
-                if (item.conditions) {
-                    branchConditions[item.id] = Object.assign({}, item.conditions)
+                const templateId = activity.template_id
+                this.previewBread.push({
+                    data: templateId,
+                    name: activity.name
+                })
+                this.getPreviewNodeData(templateId, true)
+            },
+            /**
+             * 点击预览模式下的面包屑
+             * @params {String} id  点击的节点id（可能为父节点或其他子流程节点）
+             * @params {Number} index  点击的面包屑的下标
+             */
+            onSelectSubflow (id, index) {
+                if (id === this.template_id) {
+                    this.previewData = this.pipelineData
+                    this.updateCanvas()
+                } else {
+                    this.getPreviewNodeData(id, true)
                 }
+                this.previewBread.splice(index + 1, this.previewBread.length)
+            },
+            /**
+             * 格式化pipelineTree的数据，只输出一部分数据
+             * @params {Object} data  需要格式化的pipelineTree
+             * @return {Object} {lines（线段连接）, locations（节点默认都被选中）, branchConditions（分支条件）}
+             */
+            formatCanvasData (data) {
+                const { line, location, gateways } = data
+                const branchConditions = {}
+                for (const gKey in gateways) {
+                    const item = gateways[gKey]
+                    if (item.conditions) {
+                        branchConditions[item.id] = Object.assign({}, item.conditions)
+                    }
+                }
+                return {
+                    lines: line,
+                    locations: location.map(item => {
+                        return { ...item, mode: 'preview', checked: true }
+                    }),
+                    branchConditions
+                }
+            },
+            /**
+             * 更新画布信息，触发v-if重新渲染
+             */
+            updateCanvas () {
+                this.loading = true
+                this.previewDataLoading = true
+                this.$nextTick(() => {
+                    this.loading = false
+                    this.previewDataLoading = false
+                })
+            },
+            /**
+             * 在没有画布时，获取执行节点
+             */
+            getExecuteNodeList () {
+                return this.allSelectedNode.filter(item => {
+                    return !this.selectedNodes.includes(item)
+                })
+            },
+            onSelectNode (value) {
+                this.isSelectAllNode = value
+                if (value) {
+                    this.onSelectAllNode()
+                } else {
+                    this.onSelectNoneNode()
+                }
+            },
+            // 取消添加执行方案
+            onCancelScheme () {
+                this.schemeName = ''
+                this.taskActionShow = false
             }
-            return {
-                lines: line,
-                locations: location.map(item => {return {...item, mode: 'preview', checked: true}}),
-                branchConditions
-            }
-        },
-        /**
-         * 更新画布信息，触发v-if重新渲染
-         */
-        updateCanvas () {
-            this.loading = true
-            this.previewDataLoading = true
-            this.$nextTick(() => {
-                this.loading = false
-                this.previewDataLoading = false
-            })
-        },
-        /**
-         * 在没有画布时，获取执行节点
-         */
-        getExecuteNodeList () {
-            return this.allSelectedNode.filter(item => {
-                return !this.selectedNodes.includes(item)
-            })
-        },
-        onSelectNode (value) {
-            this.isSelectAllNode = value
-            if (value) {
-                this.onSelectAllNode()
-            } else {
-                this.onSelectNoneNode()
-            }
-        },
-        // 取消添加执行方案
-        onCancelScheme () {
-            this.schemeName = ''
-            this.taskActionShow = false
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/mixins/scrollbar.scss';
@@ -989,4 +992,3 @@ export default {
 }
 
 </style>
-
diff --git a/pipeline/blueflow/src/pages/task/TaskCreate/index.vue b/pipeline/blueflow/src/pages/task/TaskCreate/index.vue
index 64116a04a2..896c56c451 100644
--- a/pipeline/blueflow/src/pages/task/TaskCreate/index.vue
+++ b/pipeline/blueflow/src/pages/task/TaskCreate/index.vue
@@ -16,17 +16,17 @@
     }">
         <TaskStep
             :list="stepList"
-            :currentStep="currentStep">
+            :current-step="currentStep">
         </TaskStep>
         <component
             :ref="currentComponent"
             :is="currentComponent"
-            :currentStep="currentStep"
+            :current-step="currentStep"
             :cc_id="cc_id"
             :common="common"
             :template_id="template_id"
-            :excludeNode="excludeNode"
-            :previewData="previewData"
+            :exclude-node="excludeNode"
+            :preview-data="previewData"
             @setFunctionalStep="setFunctionalStep"
             @setPeriodicStep="setPeriodicStep"
             @setPreviewData="setPreviewData"
@@ -35,134 +35,134 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import TaskStep from '../TaskStep.vue'
-import TaskSelectNode from './TaskSelectNode.vue'
-import TaskParamFill from './TaskParamFill.vue'
-import tools from '@/utils/tools.js'
+    import '@/utils/i18n.js'
+    import { mapState } from 'vuex'
+    import TaskStep from '../TaskStep.vue'
+    import TaskSelectNode from './TaskSelectNode.vue'
+    import TaskParamFill from './TaskParamFill.vue'
+    import tools from '@/utils/tools.js'
 
-const STEP_DICT = [
-    {
-        step: 'selectnode',
-        name: gettext('节点选择'),
-        component: 'TaskSelectNode'
-    },
-    {
-        step: 'paramfill',
-        name: gettext('参数填写'),
-        component: 'TaskParamFill'
-    },
-    {
-        step: 'taskexecute',
-        name: gettext('任务执行')
-    }
-]
-export default {
-    name: 'TaskCreate',
-    components: {
-        TaskStep,
-        TaskSelectNode,
-        TaskParamFill
-    },
-    props: ['template_id', 'cc_id', 'step' ,'common'],
-    data () {
-        return {
-            stepList: STEP_DICT.slice(),
-            hasFunctionalStep: false,
-            hasPeriodicTask: false,
-            previewData: [],
-            excludeNode: []
-        }
-    },
-    computed: {
-        ...mapState({
-            locations: state => state.template.location,
-            lines: state => state.template.line,
-            userType: state => state.userType
-        }),
-        currentStep () {
-            return this.step || 'selectnode'
+    const STEP_DICT = [
+        {
+            step: 'selectnode',
+            name: gettext('节点选择'),
+            component: 'TaskSelectNode'
+        },
+        {
+            step: 'paramfill',
+            name: gettext('参数填写'),
+            component: 'TaskParamFill'
         },
-        currentComponent () {
-            return this.stepList.filter(item => item.step === this.currentStep)[0].component
+        {
+            step: 'taskexecute',
+            name: gettext('任务执行')
         }
-    },
-    watch: {
-        hasFunctionalStep (val) {
-            if (val) {
-                this.appendFunctionalization()
-            } else {
-                let stepIndex
-                this.stepList.some((item, index) => {
-                    if (item.step === 'functionalization') {
-                        stepIndex = index
-                        return true
+    ]
+    export default {
+        name: 'TaskCreate',
+        components: {
+            TaskStep,
+            TaskSelectNode,
+            TaskParamFill
+        },
+        props: ['template_id', 'cc_id', 'step', 'common'],
+        data () {
+            return {
+                stepList: STEP_DICT.slice(),
+                hasFunctionalStep: false,
+                hasPeriodicTask: false,
+                previewData: [],
+                excludeNode: []
+            }
+        },
+        computed: {
+            ...mapState({
+                locations: state => state.template.location,
+                lines: state => state.template.line,
+                userType: state => state.userType
+            }),
+            currentStep () {
+                return this.step || 'selectnode'
+            },
+            currentComponent () {
+                return this.stepList.filter(item => item.step === this.currentStep)[0].component
+            }
+        },
+        watch: {
+            hasFunctionalStep (val) {
+                if (val) {
+                    this.appendFunctionalization()
+                } else {
+                    let stepIndex
+                    this.stepList.some((item, index) => {
+                        if (item.step === 'functionalization') {
+                            stepIndex = index
+                            return true
+                        }
+                    })
+                    if (stepIndex) {
+                        this.stepList.splice(stepIndex, 1)
                     }
-                })
-                if (stepIndex) {
-                    this.stepList.splice(stepIndex, 1)
+                }
+            },
+            hasPeriodicTask (val) {
+                if (!val) {
+                    this.stepList.push({
+                        step: 'taskexecute',
+                        name: gettext('任务执行')
+                    })
+                } else if (!val.periodicType) {
+                    this.deletePeriodicCurrentStep()
+                } else if (val.periodicType && val.functionalType) {
+                    this.stepList.splice(2, 0, {
+                        step: 'functionalization',
+                        name: gettext('职能化认领'),
+                        component: 'TaskParamFill'
+                    })
+                    this.stepList.push({
+                        step: 'taskexecute',
+                        name: gettext('任务执行')
+                    })
+                } else {
+                    this.stepList.push({
+                        step: 'taskexecute',
+                        name: gettext('任务执行')
+                    })
                 }
             }
         },
-        hasPeriodicTask (val) {
-            if (!val) {
-                this.stepList.push({
-                    step: 'taskexecute',
-                    name: gettext('任务执行')
-                })
-            } else if (!val.periodicType) {
-                this.deletePeriodicCurrentStep()
-            } else if (val.periodicType && val.functionalType) {
+        mounted () {
+            if (this.userType === 'functor') {
+                this.setFunctionalStep(true)
+            }
+        },
+        methods: {
+            appendFunctionalization () {
                 this.stepList.splice(2, 0, {
                     step: 'functionalization',
                     name: gettext('职能化认领'),
                     component: 'TaskParamFill'
                 })
-                this.stepList.push({
-                    step: 'taskexecute',
-                    name: gettext('任务执行')
-                })
-            } else {
-                this.stepList.push({
-                    step: 'taskexecute',
-                    name: gettext('任务执行')
-                })
-            }
-        }
-    },
-    mounted () {
-        if (this.userType === 'functor') {
-            this.setFunctionalStep(true)
-        }
-    },
-    methods: {
-        appendFunctionalization () {
-            this.stepList.splice(2, 0, {
-                step: 'functionalization',
-                name: gettext('职能化认领'),
-                component: 'TaskParamFill'
-            })
-        },
-        setFunctionalStep (isSelectFunctionalType) {
-            this.hasFunctionalStep = isSelectFunctionalType
-        },
-        setPeriodicStep (isSelectPeriodicType) {
-            this.hasPeriodicTask = isSelectPeriodicType
-        },
-        deletePeriodicCurrentStep () {
-            while (this.stepList.length !== 2) {
-                this.stepList.pop()
+            },
+            setFunctionalStep (isSelectFunctionalType) {
+                this.hasFunctionalStep = isSelectFunctionalType
+            },
+            setPeriodicStep (isSelectPeriodicType) {
+                this.hasPeriodicTask = isSelectPeriodicType
+            },
+            deletePeriodicCurrentStep () {
+                while (this.stepList.length !== 2) {
+                    this.stepList.pop()
+                }
+            },
+            setPreviewData (previewData) {
+                this.previewData = tools.deepClone(previewData)
+            },
+            setExcludeNode (excludeNode) {
+                this.excludeNode = excludeNode
             }
-        },
-        setPreviewData (previewData) {
-            this.previewData = tools.deepClone(previewData)
-        },
-        setExcludeNode (excludeNode) {
-            this.excludeNode = excludeNode
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .task-create-container {
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/ExecuteInfo.vue b/pipeline/blueflow/src/pages/task/TaskExecute/ExecuteInfo.vue
index 29b85203f8..6b33fb5042 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/ExecuteInfo.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/ExecuteInfo.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="execute-info" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="execute-info" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <h3 class="panel-title">{{ i18n.execute_detail }}</h3>
         <section class="info-section">
             <h4 class="common-section-title">{{ i18n.execute_info }}</h4>
@@ -43,7 +43,7 @@
                 <RenderForm
                     v-if="!isEmptyParams && !loading"
                     :scheme="renderConfig"
-                    :formOption="renderOption"
+                    :form-option="renderOption"
                     v-model="renderData">
                 </RenderForm>
                 <NoData v-else></NoData>
@@ -71,7 +71,7 @@
             <div v-html="failInfo"></div>
             <IpLogContent
                 v-if="nodeInfo.ex_data.show_ip_log"
-                :nodeInfo="nodeInfo">
+                :node-info="nodeInfo">
             </IpLogContent>
         </section>
         <section class="info-section" v-if="nodeInfo && nodeInfo.histories && nodeInfo.histories.length">
@@ -129,187 +129,183 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import VueJsonPretty from 'vue-json-pretty'
-import tools from '@/utils/tools.js'
-import { URL_REG } from '@/constants/index.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseCollapse from '@/components/common/base/BaseCollapse.vue'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-import IpLogContent from '@/components/common/Individualization/IpLogContent.vue'
-export default {
-    name: 'ExecuteInfo',
-    components: {
-        VueJsonPretty,
-        RenderForm,
-        NoData,
-        BaseCollapse,
-        IpLogContent
-    },
-    props: ['nodeDetailConfig'],
-    data () {
-        return {
-            i18n: {
-                execute_detail: gettext("执行详情"),
-                execute_info: gettext("执行信息"),
-                start_time: gettext("开始时间"),
-                finish_time: gettext("结束时间"),
-                last_time: gettext("耗时"),
-                task_skipped: gettext("失败后跳过"),
-                error_ignorable: gettext("失败自动忽略"),
-                inputs_params: gettext("输入参数"),
-                outputs_params: gettext("输出参数"),
-                name: gettext("参数名"),
-                value: gettext("参数值"),
-                exception: gettext("异常信息"),
-                retries: gettext("执行记录"),
-                index: gettext("序号"),
-                yes: gettext("是"),
-                no: gettext("否"),
-                manuallyRetry: gettext('手动重试')
-            },
-            loading: true,
-            bkMessageInstance: null,
-            nodeInfo: {},
-            failInfo: '',
-            renderOption: {
-                showGroup: false,
-                showLabel: true,
-                showHook: false,
-                formEdit: false,
-                formMode: false
-            },
-            renderConfig: [],
-            renderData: {}
-        }
-    },
-    computed: {
-        ...mapState({
-            'atomFormConfig': state => state.atomForm.config
-        }),
-        isSingleAtom () {
-            return !!this.nodeDetailConfig.component_code
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import VueJsonPretty from 'vue-json-pretty'
+    import tools from '@/utils/tools.js'
+    import { URL_REG } from '@/constants/index.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    import IpLogContent from '@/components/common/Individualization/IpLogContent.vue'
+    export default {
+        name: 'ExecuteInfo',
+        components: {
+            VueJsonPretty,
+            RenderForm,
+            NoData,
+            IpLogContent
         },
-        isEmptyParams () {
-            return this.renderConfig && this.renderConfig.length === 0
-        }
-    },
-    watch: {
-        'nodeDetailConfig.node_id' (val) {
-            if (val !== undefined) {
-                this.loadNodeInfo()
+        props: ['nodeDetailConfig'],
+        data () {
+            return {
+                i18n: {
+                    execute_detail: gettext('执行详情'),
+                    execute_info: gettext('执行信息'),
+                    start_time: gettext('开始时间'),
+                    finish_time: gettext('结束时间'),
+                    last_time: gettext('耗时'),
+                    task_skipped: gettext('失败后跳过'),
+                    error_ignorable: gettext('失败自动忽略'),
+                    inputs_params: gettext('输入参数'),
+                    outputs_params: gettext('输出参数'),
+                    name: gettext('参数名'),
+                    value: gettext('参数值'),
+                    exception: gettext('异常信息'),
+                    retries: gettext('执行记录'),
+                    index: gettext('序号'),
+                    yes: gettext('是'),
+                    no: gettext('否'),
+                    manuallyRetry: gettext('手动重试')
+                },
+                loading: true,
+                bkMessageInstance: null,
+                nodeInfo: {},
+                failInfo: '',
+                renderOption: {
+                    showGroup: false,
+                    showLabel: true,
+                    showHook: false,
+                    formEdit: false,
+                    formMode: false
+                },
+                renderConfig: [],
+                renderData: {}
             }
-        }
-    },
-    mounted () {
-        this.loadNodeInfo()
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getNodeActDetail'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig'
-        ]),
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        async loadNodeInfo () {
-            this.loading = true
-            try {
-                const nodeDetailRes = await this.getNodeActDetail(this.nodeDetailConfig)
-                if (this.isSingleAtom) {
-                    this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
+        },
+        computed: {
+            ...mapState({
+                'atomFormConfig': state => state.atomForm.config
+            }),
+            isSingleAtom () {
+                return !!this.nodeDetailConfig.component_code
+            },
+            isEmptyParams () {
+                return this.renderConfig && this.renderConfig.length === 0
+            }
+        },
+        watch: {
+            'nodeDetailConfig.node_id' (val) {
+                if (val !== undefined) {
+                    this.loadNodeInfo()
                 }
-                if (nodeDetailRes.result) {
-                    this.nodeInfo = nodeDetailRes.data
-                    this.nodeInfo.histories.forEach(item => {
-                        item.last_time = this.getLastTime(item.elapsed_time)
-                    })
-                    for ( let key in this.nodeInfo.inputs) {
-                        this.$set(this.renderData, key, this.nodeInfo.inputs[key])
+            }
+        },
+        mounted () {
+            this.loadNodeInfo()
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getNodeActDetail'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig'
+            ]),
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            async loadNodeInfo () {
+                this.loading = true
+                try {
+                    const nodeDetailRes = await this.getNodeActDetail(this.nodeDetailConfig)
+                    if (this.isSingleAtom) {
+                        this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
                     }
-                    if (this.nodeDetailConfig.component_code === 'job_execute_task') {
-                        this.nodeInfo.outputs = this.nodeInfo.outputs.filter(output => {
-                            const outputIndex = this.nodeInfo.inputs['job_global_var'].findIndex(prop => prop.name === output.key)
-                            if (!output.preset && outputIndex === -1) {
-                                return false
-                            }
-                            return true
+                    if (nodeDetailRes.result) {
+                        this.nodeInfo = nodeDetailRes.data
+                        this.nodeInfo.histories.forEach(item => {
+                            item.last_time = this.getLastTime(item.elapsed_time)
                         })
-                    } else {
-                        this.nodeInfo.outputs = this.nodeInfo.outputs.filter(output => output.preset)
-                    }
-                    this.failInfo = this.transformFailInfo(this.nodeInfo.ex_data)
+                        for (const key in this.nodeInfo.inputs) {
+                            this.$set(this.renderData, key, this.nodeInfo.inputs[key])
+                        }
+                        if (this.nodeDetailConfig.component_code === 'job_execute_task') {
+                            this.nodeInfo.outputs = this.nodeInfo.outputs.filter(output => {
+                                const outputIndex = this.nodeInfo.inputs['job_global_var'].findIndex(prop => prop.name === output.key)
+                                if (!output.preset && outputIndex === -1) {
+                                    return false
+                                }
+                                return true
+                            })
+                        } else {
+                            this.nodeInfo.outputs = this.nodeInfo.outputs.filter(output => output.preset)
+                        }
+                        this.failInfo = this.transformFailInfo(this.nodeInfo.ex_data)
                     
-                    if (this.nodeInfo.ex_data && this.nodeInfo.ex_data.show_ip_log){
-                        this.failInfo = this.transformFailInfo(this.nodeInfo.ex_data.exception_msg)
+                        if (this.nodeInfo.ex_data && this.nodeInfo.ex_data.show_ip_log) {
+                            this.failInfo = this.transformFailInfo(this.nodeInfo.ex_data.exception_msg)
+                        } else {
+                            this.failInfo = this.transformFailInfo(this.nodeInfo.ex_data)
+                        }
                     } else {
-                        this.failInfo = this.transformFailInfo(this.nodeInfo.ex_data)
+                        errorHandler(nodeDetailRes, this)
                     }
-                } else {
-                    errorHandler(nodeDetailRes, this)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.loading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
-            }
-        },
-        async getNodeConfig (type) {
-            if (this.atomFormConfig[type]) {
-                return this.atomFormConfig[type]
-            } else {
-                try {
-                    await this.loadAtomConfig({atomType: type})
-                    this.setAtomConfig({atomType: type, configData: $.atoms[type]})
+            },
+            async getNodeConfig (type) {
+                if (this.atomFormConfig[type]) {
                     return this.atomFormConfig[type]
-                } catch (e) {
-                    this.$bkMessage({
-                        message: e,
-                        theme: 'error'
-                    })
+                } else {
+                    try {
+                        await this.loadAtomConfig({ atomType: type })
+                        this.setAtomConfig({ atomType: type, configData: $.atoms[type] })
+                        return this.atomFormConfig[type]
+                    } catch (e) {
+                        this.$bkMessage({
+                            message: e,
+                            theme: 'error'
+                        })
+                    }
                 }
-            }
-        },
-        getOutputValue (output) {
-            if (output.value === 'undefined' || output.value === '') {
-                return '--'
-            } else if (!output.preset && this.nodeDetailConfig.component_code === 'job_execute_task') {
-                return output.value
-            } else {
-                if (URL_REG.test(output.value)) {
-                    return `<a class="info-link" target="_blank" href="${output.value}">${output.value}</a>`
+            },
+            getOutputValue (output) {
+                if (output.value === 'undefined' || output.value === '') {
+                    return '--'
+                } else if (!output.preset && this.nodeDetailConfig.component_code === 'job_execute_task') {
+                    return output.value
+                } else {
+                    if (URL_REG.test(output.value)) {
+                        return `<a class="info-link" target="_blank" href="${output.value}">${output.value}</a>`
+                    }
+                    return output.value
                 }
-                return output.value
-            }
-
-        },
-        transformFailInfo (data) {
-            if (!data) {
-                return ''
-            }
-            if (typeof data === 'string') {
-                const info = data.replace(/\n/g, '<br>')
-                return info
-            } else {
-                return data
-            }
-        },
-        getLastTime (time) {
-            return tools.timeTransform(time)
-        },
-        getOutputName (output) {
-            if (this.nodeDetailConfig.component_code === 'job_execute_task' && output.perset) {
-                return output.key
+            },
+            transformFailInfo (data) {
+                if (!data) {
+                    return ''
+                }
+                if (typeof data === 'string') {
+                    const info = data.replace(/\n/g, '<br>')
+                    return info
+                } else {
+                    return data
+                }
+            },
+            getLastTime (time) {
+                return tools.timeTransform(time)
+            },
+            getOutputName (output) {
+                if (this.nodeDetailConfig.component_code === 'job_execute_task' && output.perset) {
+                    return output.key
+                }
+                return output.name
             }
-            return output.name
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/mixins/scrollbar.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/GatewaySelectDialog.vue b/pipeline/blueflow/src/pages/task/TaskExecute/GatewaySelectDialog.vue
index 109db238ca..e91681c4ce 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/GatewaySelectDialog.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/GatewaySelectDialog.vue
@@ -35,35 +35,35 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'GatewaySelectDialog',
-    props: [
-        'isGatewaySelectDialogShow',
-        'gatewayBranches'
-    ],
-    data () {
-        return {
-            i18n: {
-                select_branch: gettext("请选择执行分支"),
-                branches: gettext("可选执行分支")
-            },
-            selectedBranch: this.gatewayBranches.length ? this.gatewayBranches[0].id : ''
-        }
-    },
-    methods: {
-        onSelectBranch (id) {
-            this.selectedBranch = id
-        },
-        onConfirm () {
-            const selected = this.gatewayBranches.filter(item => {
-                return item.id === this.selectedBranch
-            })[0]
-            this.$emit('onConfirm', selected)
+    import '@/utils/i18n.js'
+    export default {
+        name: 'GatewaySelectDialog',
+        props: [
+            'isGatewaySelectDialogShow',
+            'gatewayBranches'
+        ],
+        data () {
+            return {
+                i18n: {
+                    select_branch: gettext('请选择执行分支'),
+                    branches: gettext('可选执行分支')
+                },
+                selectedBranch: this.gatewayBranches.length ? this.gatewayBranches[0].id : ''
+            }
         },
-        onCancel () {
-            this.$emit('onCancel')
+        methods: {
+            onSelectBranch (id) {
+                this.selectedBranch = id
+            },
+            onConfirm () {
+                const selected = this.gatewayBranches.filter(item => {
+                    return item.id === this.selectedBranch
+                })[0]
+                this.$emit('onConfirm', selected)
+            },
+            onCancel () {
+                this.$emit('onCancel')
+            }
         }
     }
-}
 </script>
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/ModifyParams.vue b/pipeline/blueflow/src/pages/task/TaskExecute/ModifyParams.vue
index 75d5e422b2..2a0977304e 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/ModifyParams.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/ModifyParams.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="modify-params-container" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="modify-params-container" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div class="panel-title">
             <h3>{{ i18n.change_params }}</h3>
         </div>
@@ -30,108 +30,108 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import {mapActions} from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import NoData from '@/components/common/base/NoData.vue'
-import TaskParamEdit from '../TaskParamEdit.vue'
-export default {
-    name: 'ModifyParams',
-    components: {
-        TaskParamEdit,
-        NoData
-    },
-    props: ['instance_id', 'paramsCanBeModify'],
-    data () {
-        return {
-            bkMessageInstance: null,
-            constants: [],
-            cntLoading: true, // 全局变量加载
-            configLoading: true, // 变量配置项加载
-            pending: false, // 提交修改中
-            i18n: {
-                change_params: gettext("修改全局参数"),
-                save: gettext("保存")
-            }
-        }
-    },
-    computed: {
-        isParamsEmpty () {
-            return !Object.keys(this.constants).length
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import TaskParamEdit from '../TaskParamEdit.vue'
+    export default {
+        name: 'ModifyParams',
+        components: {
+            TaskParamEdit,
+            NoData
         },
-        loading () {
-            return this.isParamsEmpty ? this.cntLoading : (this.cntLoading || this.configLoading)
-        }
-    },
-    created () {
-        this.getTaskData()
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getTaskInstanceData',
-            'instanceModifyParams'
-        ]),
-        async getTaskData () {
-            this.cntLoading = true
-            try {
-                const instanceData = await this.getTaskInstanceData(this.instance_id)
-                const pipelineData = JSON.parse(instanceData.pipeline_tree)
-                const constants = {}
-                Object.keys(pipelineData.constants).forEach(key => {
-                    const cnt = pipelineData.constants[key]
-                    if (cnt.show_type === 'show') {
-                        constants[key] = cnt
-                    }
-                })
-                this.constants = constants
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.cntLoading = false
+        props: ['instance_id', 'paramsCanBeModify'],
+        data () {
+            return {
+                bkMessageInstance: null,
+                constants: [],
+                cntLoading: true, // 全局变量加载
+                configLoading: true, // 变量配置项加载
+                pending: false, // 提交修改中
+                i18n: {
+                    change_params: gettext('修改全局参数'),
+                    save: gettext('保存')
+                }
             }
         },
-        async onModifyParams () {
-            if (this.pending) {
-                return
+        computed: {
+            isParamsEmpty () {
+                return !Object.keys(this.constants).length
+            },
+            loading () {
+                return this.isParamsEmpty ? this.cntLoading : (this.cntLoading || this.configLoading)
             }
-            const paramEditComp = this.$refs.TaskParamEdit
-            const formData = {}
-            let formValid = true
-            if (paramEditComp) {
-                formValid = paramEditComp.validate()
-                if (!formValid) return
-                const variables = paramEditComp.getVariableData()
-                for (let key in variables) {
-                    formData[key] = variables[key].value
+        },
+        created () {
+            this.getTaskData()
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getTaskInstanceData',
+                'instanceModifyParams'
+            ]),
+            async getTaskData () {
+                this.cntLoading = true
+                try {
+                    const instanceData = await this.getTaskInstanceData(this.instance_id)
+                    const pipelineData = JSON.parse(instanceData.pipeline_tree)
+                    const constants = {}
+                    Object.keys(pipelineData.constants).forEach(key => {
+                        const cnt = pipelineData.constants[key]
+                        if (cnt.show_type === 'show') {
+                            constants[key] = cnt
+                        }
+                    })
+                    this.constants = constants
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.cntLoading = false
+                }
+            },
+            async onModifyParams () {
+                if (this.pending) {
+                    return
+                }
+                const paramEditComp = this.$refs.TaskParamEdit
+                const formData = {}
+                let formValid = true
+                if (paramEditComp) {
+                    formValid = paramEditComp.validate()
+                    if (!formValid) return
+                    const variables = paramEditComp.getVariableData()
+                    for (const key in variables) {
+                        formData[key] = variables[key].value
+                    }
                 }
-            }
 
-            const data = {
-                instance_id: this.instance_id,
-                constants: JSON.stringify(formData)
-            }
-            try {
-                this.pending = true
-                const res = await this.instanceModifyParams(data)
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('参数修改成功'),
-                        theme: 'success'
-                    })
-                } else {
-                    errorHandler(res, this)
+                const data = {
+                    instance_id: this.instance_id,
+                    constants: JSON.stringify(formData)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending = false
+                try {
+                    this.pending = true
+                    const res = await this.instanceModifyParams(data)
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('参数修改成功'),
+                            theme: 'success'
+                        })
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending = false
+                }
+            },
+            onChangeConfigLoading (val) {
+                this.configLoading = val
             }
-        },
-        onChangeConfigLoading (val) {
-            this.configLoading = val
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     @import '@/scss/config.scss';
@@ -162,5 +162,3 @@ export default {
         }
     }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/ModifyTime.vue b/pipeline/blueflow/src/pages/task/TaskExecute/ModifyTime.vue
index 12dc11b534..e9e8026bd0 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/ModifyTime.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/ModifyTime.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="modify-time-container" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="modify-time-container" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div class="panel-title">
             <h3>{{ i18n.reset_timer }}</h3>
         </div>
@@ -19,7 +19,7 @@
                 ref="renderForm"
                 v-if="!isEmptyParams"
                 :scheme="renderConfig"
-                :formOption="renderOption"
+                :form-option="renderOption"
                 v-model="renderData">
             </RenderForm>
             <NoData v-else></NoData>
@@ -31,130 +31,129 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import NoData from '@/components/common/base/NoData.vue'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-export default {
-    name: 'ModifyTime',
-    components: {
-        RenderForm,
-        NoData
-    },
-    props: ['nodeDetailConfig'],
-    data () {
-        return {
-            i18n: {
-                reset_timer: gettext("修改定时时间"),
-                confirm: gettext("确定"),
-                cancel: gettext("取消")
-            },
-            loading: true,
-            bkMessageInstance: null,
-            nodeInfo: {},
-            renderOption: {
-                showGroup: false,
-                showLabel: true,
-                showHook: false
-            },
-            renderConfig: [],
-            renderData: {}
-        }
-    },
-    computed: {
-        ...mapState({
-            'atomFormConfig': state => state.atomForm.config
-        }),
-        isEmptyParams () {
-            return Object.keys(this.renderData).length === 0
-        }
-    },
-    mounted () {
-        this.loadNodeInfo()
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getNodeActDetail',
-            'setSleepNode'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig'
-        ]),
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        async loadNodeInfo () {
-            this.loading = true
-            try {
-                const nodeDetailRes = await this.getNodeActDetail(this.nodeDetailConfig)
-                this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
-                this.nodeInfo = nodeDetailRes.data
-                if (nodeDetailRes.result) {
-                    for ( let key in this.nodeInfo.inputs) {
-                        this.$set(this.renderData, key, this.nodeInfo.inputs[key])
-                    }
-                } else {
-                    errorHandler(nodeDetailRes, this)
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    export default {
+        name: 'ModifyTime',
+        components: {
+            RenderForm,
+            NoData
+        },
+        props: ['nodeDetailConfig'],
+        data () {
+            return {
+                i18n: {
+                    reset_timer: gettext('修改定时时间'),
+                    confirm: gettext('确定'),
+                    cancel: gettext('取消')
+                },
+                loading: true,
+                bkMessageInstance: null,
+                nodeInfo: {},
+                renderOption: {
+                    showGroup: false,
+                    showLabel: true,
+                    showHook: false
+                },
+                renderConfig: [],
+                renderData: {}
             }
         },
-        async getNodeConfig (type) {
-            if (this.atomFormConfig[type]) {
-                return this.atomFormConfig[type]
-            } else {
+        computed: {
+            ...mapState({
+                'atomFormConfig': state => state.atomForm.config
+            }),
+            isEmptyParams () {
+                return Object.keys(this.renderData).length === 0
+            }
+        },
+        mounted () {
+            this.loadNodeInfo()
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getNodeActDetail',
+                'setSleepNode'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig'
+            ]),
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            async loadNodeInfo () {
+                this.loading = true
                 try {
-                    await this.loadAtomConfig({atomType: type})
-                    this.setAtomConfig({atomType: type, configData: $.atoms[type]})
-                    return this.atomFormConfig[type]
+                    const nodeDetailRes = await this.getNodeActDetail(this.nodeDetailConfig)
+                    this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
+                    this.nodeInfo = nodeDetailRes.data
+                    if (nodeDetailRes.result) {
+                        for (const key in this.nodeInfo.inputs) {
+                            this.$set(this.renderData, key, this.nodeInfo.inputs[key])
+                        }
+                    } else {
+                        errorHandler(nodeDetailRes, this)
+                    }
                 } catch (e) {
                     errorHandler(e, this)
+                } finally {
+                    this.loading = false
                 }
-            }
-        },
-        async onModifyTime () {
-            let formvalid = true
-            if (this.$refs.renderForm) {
-                formvalid = this.$refs.renderForm.validate()
-            }
-            if (!formvalid) return
-
-            const  { instance_id, component_code, node_id } = this.nodeDetailConfig
-            const data = {
-                instance_id,
-                node_id,
-                component_code,
-                inputs: JSON.stringify(this.renderData)
-            }
-            this.retrying = true
-            try {
-                const res = await this.setSleepNode(data)
-                if (res.result) {
-                    this.$emit('modifyTimeSuccess', node_id)
-                    this.$bkMessage({
-                        message: gettext('修改成功'),
-                        theme: 'success'
-                    })
+            },
+            async getNodeConfig (type) {
+                if (this.atomFormConfig[type]) {
+                    return this.atomFormConfig[type]
                 } else {
-                    errorHandler(res, this)
+                    try {
+                        await this.loadAtomConfig({ atomType: type })
+                        this.setAtomConfig({ atomType: type, configData: $.atoms[type] })
+                        return this.atomFormConfig[type]
+                    } catch (e) {
+                        errorHandler(e, this)
+                    }
+                }
+            },
+            async onModifyTime () {
+                let formvalid = true
+                if (this.$refs.renderForm) {
+                    formvalid = this.$refs.renderForm.validate()
+                }
+                if (!formvalid) return
+
+                const { instance_id, component_code, node_id } = this.nodeDetailConfig
+                const data = {
+                    instance_id,
+                    node_id,
+                    component_code,
+                    inputs: JSON.stringify(this.renderData)
+                }
+                this.retrying = true
+                try {
+                    const res = await this.setSleepNode(data)
+                    if (res.result) {
+                        this.$emit('modifyTimeSuccess', node_id)
+                        this.$bkMessage({
+                            message: gettext('修改成功'),
+                            theme: 'success'
+                        })
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.retrying = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.retrying = false
+            },
+            onCancelRetry () {
+                const { node_id } = this.nodeDetailConfig
+                this.$emit('modifyTimeCancel', node_id)
             }
-        },
-        onCancelRetry () {
-            const  { node_id } = this.nodeDetailConfig
-            this.$emit('modifyTimeCancel', node_id)
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/NodeTree.vue b/pipeline/blueflow/src/pages/task/TaskExecute/NodeTree.vue
index 4e3b86727e..824eb5dfd1 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/NodeTree.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/NodeTree.vue
@@ -27,7 +27,7 @@
                 v-if="item.children"
                 class="sub-tree"
                 :data="item.children"
-                :selectedFlowPath="selectedFlowPath"
+                :selected-flow-path="selectedFlowPath"
                 :heirarchy="heirarchy ? `${heirarchy}.${item.id}` : String(item.id)"
                 :level="level + 1"
                 @onSelectNode="onSelectNode">
@@ -36,49 +36,49 @@
     </ul>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'NodeTree',
-    props: {
-        data: {
-            type: Array,
-            default () {
-                return []
+    import '@/utils/i18n.js'
+    export default {
+        name: 'NodeTree',
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            selectedFlowPath: {
+                type: Array,
+                default () {
+                    return []
+                }
+            },
+            heirarchy: {
+                type: String,
+                default: ''
+            },
+            level: {
+                type: Number,
+                default: 1
             }
         },
-        selectedFlowPath: {
-            type: Array,
-            default () {
-                return []
+        methods: {
+            getNodeActivedState (id) {
+                const len = this.selectedFlowPath.length
+                if (this.selectedFlowPath[len - 1].id === id) {
+                    return true
+                }
+                return false
+            },
+            onSelectNode (node, isClick, type) {
+                let nodeHeirarchy = node
+                const nodeType = node.children ? 'subflow' : 'tasknode'
+                if (isClick) {
+                    nodeHeirarchy = this.heirarchy ? `${this.heirarchy}.${node.id}` : String(node.id)
+                }
+                this.$emit('onSelectNode', nodeHeirarchy, false, nodeType)
             }
-        },
-        heirarchy: {
-            type: String,
-            default: ''
-        },
-        level: {
-            type: Number,
-            default: 1
-        }
-    },
-    methods: {
-        getNodeActivedState (id) {
-            const len = this.selectedFlowPath.length
-            if (this.selectedFlowPath[len - 1].id === id) {
-                return true
-            }
-            return false
-        },
-        onSelectNode (node, isClick, type) {
-            let nodeHeirarchy = node
-            const nodeType = node.children ? 'subflow' : 'tasknode'
-            if (isClick) {
-                nodeHeirarchy = this.heirarchy ? `${this.heirarchy}.${node.id}` : String(node.id)
-            }
-            this.$emit('onSelectNode', nodeHeirarchy, false, nodeType)
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -150,5 +150,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/RetryNode.vue b/pipeline/blueflow/src/pages/task/TaskExecute/RetryNode.vue
index 41039c7e21..8e5f415343 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/RetryNode.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/RetryNode.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="retry-node-container" v-bkloading="{isLoading: loading, opacity: 1}">
+    <div class="retry-node-container" v-bkloading="{ isLoading: loading, opacity: 1 }">
         <div class="panel-title">
             <h3>{{ i18n.retry }}</h3>
         </div>
@@ -19,7 +19,7 @@
                 ref="renderForm"
                 v-if="!isEmptyParams"
                 :scheme="renderConfig"
-                :formOption="renderOption"
+                :form-option="renderOption"
                 v-model="renderData">
             </RenderForm>
             <NoData v-else></NoData>
@@ -31,131 +31,130 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { checkDataType } from '@/utils/checkDataType.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import NoData from '@/components/common/base/NoData.vue'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-export default {
-    name: 'RetryNode',
-    components: {
-        RenderForm,
-        NoData
-    },
-    props: ['nodeDetailConfig'],
-    data () {
-        return {
-            i18n: {
-                retry: gettext("重试"),
-                confirm: gettext("确定"),
-                cancel: gettext("取消")
-            },
-            loading: true,
-            bkMessageInstance: null,
-            nodeInfo: {},
-            renderOption: {
-                showGroup: false,
-                showLabel: true,
-                showHook: false
-            },
-            renderConfig: [],
-            renderData: {}
-        }
-    },
-    computed: {
-        ...mapState({
-            'atomFormConfig': state => state.atomForm.config
-        }),
-        isEmptyParams () {
-            return this.renderConfig.length === 0
-        }
-    },
-    mounted () {
-        this.loadNodeInfo()
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getNodeActInfo',
-            'instanceRetry'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig'
-        ]),
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        async loadNodeInfo () {
-            this.loading = true
-            try {
-                this.nodeInfo = await this.getNodeActInfo(this.nodeDetailConfig)
-                this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
-                if (this.nodeInfo.result) {
-                    if (this.nodeInfo) {
-                        for ( let key in this.nodeInfo.data.inputs) {
-                            this.$set(this.renderData, key, this.nodeInfo.data.inputs[key])
-                        }
-                    }
-                } else {
-                    errorHandler(this.nodeInfo, this)
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    export default {
+        name: 'RetryNode',
+        components: {
+            RenderForm,
+            NoData
+        },
+        props: ['nodeDetailConfig'],
+        data () {
+            return {
+                i18n: {
+                    retry: gettext('重试'),
+                    confirm: gettext('确定'),
+                    cancel: gettext('取消')
+                },
+                loading: true,
+                bkMessageInstance: null,
+                nodeInfo: {},
+                renderOption: {
+                    showGroup: false,
+                    showLabel: true,
+                    showHook: false
+                },
+                renderConfig: [],
+                renderData: {}
             }
         },
-        async getNodeConfig (type) {
-            if (this.atomFormConfig[type]) {
-                return this.atomFormConfig[type]
-            } else {
+        computed: {
+            ...mapState({
+                'atomFormConfig': state => state.atomForm.config
+            }),
+            isEmptyParams () {
+                return this.renderConfig.length === 0
+            }
+        },
+        mounted () {
+            this.loadNodeInfo()
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getNodeActInfo',
+                'instanceRetry'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig'
+            ]),
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            async loadNodeInfo () {
+                this.loading = true
                 try {
-                    await this.loadAtomConfig({atomType: type})
-                    this.setAtomConfig({atomType: type, configData: $.atoms[type]})
-                    return this.atomFormConfig[type]
+                    this.nodeInfo = await this.getNodeActInfo(this.nodeDetailConfig)
+                    this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
+                    if (this.nodeInfo.result) {
+                        if (this.nodeInfo) {
+                            for (const key in this.nodeInfo.data.inputs) {
+                                this.$set(this.renderData, key, this.nodeInfo.data.inputs[key])
+                            }
+                        }
+                    } else {
+                        errorHandler(this.nodeInfo, this)
+                    }
                 } catch (e) {
                     errorHandler(e, this)
+                } finally {
+                    this.loading = false
                 }
-            }
-        },
-        async onRetryTask () {
-            let formvalid = true
-            if (this.$refs.renderForm) {
-                formvalid = this.$refs.renderForm.validate()
-            }
-            if (!formvalid || this.retrying) return
-
-            const  { instance_id, component_code, node_id } = this.nodeDetailConfig
-            const data = {
-                instance_id,
-                node_id,
-                component_code,
-                inputs: JSON.stringify(this.renderData)
-            }
-            this.retrying = true
-            try {
-                const res = await this.instanceRetry(data)
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('重试成功'),
-                        theme: 'success'
-                    })
-                    this.$emit('retrySuccess', node_id)
+            },
+            async getNodeConfig (type) {
+                if (this.atomFormConfig[type]) {
+                    return this.atomFormConfig[type]
                 } else {
-                    errorHandler(res, this)
+                    try {
+                        await this.loadAtomConfig({ atomType: type })
+                        this.setAtomConfig({ atomType: type, configData: $.atoms[type] })
+                        return this.atomFormConfig[type]
+                    } catch (e) {
+                        errorHandler(e, this)
+                    }
+                }
+            },
+            async onRetryTask () {
+                let formvalid = true
+                if (this.$refs.renderForm) {
+                    formvalid = this.$refs.renderForm.validate()
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.retrying = false
+                if (!formvalid || this.retrying) return
+
+                const { instance_id, component_code, node_id } = this.nodeDetailConfig
+                const data = {
+                    instance_id,
+                    node_id,
+                    component_code,
+                    inputs: JSON.stringify(this.renderData)
+                }
+                this.retrying = true
+                try {
+                    const res = await this.instanceRetry(data)
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('重试成功'),
+                            theme: 'success'
+                        })
+                        this.$emit('retrySuccess', node_id)
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.retrying = false
+                }
+            },
+            onCancelRetry () {
+                const { node_id } = this.nodeDetailConfigs
+                this.$emit('retryCancel', node_id)
             }
-        },
-        onCancelRetry () {
-            const { node_id } = this.nodeDetailConfigs
-            this.$emit('retryCancel', node_id)
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/TaskFunctionalization.vue b/pipeline/blueflow/src/pages/task/TaskExecute/TaskFunctionalization.vue
index ae4b9747dc..9e5fe64d5a 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/TaskFunctionalization.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/TaskFunctionalization.vue
@@ -11,7 +11,7 @@
 */
 <template>
     <div class="functionalization-wrapper">
-        <div :class="['task-info', {'functor-task-info': this.userType === 'functor'}]">
+        <div :class="['task-info', { 'functor-task-info': userType === 'functor' }]">
             <span class="task-info-title">{{ i18n.task_info }}</span>
             <div class="task-info-division-line"></div>
             <div class="common-form-item">
@@ -41,7 +41,7 @@
                 :constants="pipelineData.constants">
             </TaskParamEdit>
         </div>
-         <div class="action-wrapper">
+        <div class="action-wrapper">
             <bk-button
                 class="preview-button"
                 @click="onShowPreviewDialog">
@@ -69,9 +69,9 @@
             <div slot="content">
                 <NodePreview
                     ref="nodePreviewRef"
-                    :previewDataLoading="previewDataLoading"
-                    :canvasData="formatCanvasData(previewData)"
-                    :previewBread="previewBread"
+                    :preview-data-loading="previewDataLoading"
+                    :canvas-data="formatCanvasData(previewData)"
+                    :preview-bread="previewBread"
                     @onNodeClick="onNodeClick"
                     @onSelectSubflow="onSelectSubflow">
                 </NodePreview>
@@ -80,150 +80,151 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapActions, mapMutations } from 'vuex'
-import tools from '@/utils/tools.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import TaskParamEdit from '../TaskParamEdit.vue'
-import NodePreview from '../NodePreview.vue'
+    import '@/utils/i18n.js'
+    import { mapState, mapActions } from 'vuex'
+    import tools from '@/utils/tools.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import TaskParamEdit from '../TaskParamEdit.vue'
+    import NodePreview from '../NodePreview.vue'
 
-export default {
-    name: 'TaskFunctionalization',
-    inject: ['reload'],
-    components: {
-        NoData,
-        BaseInput,
-        TaskParamEdit,
-        NodePreview
-    },
-    props: ['cc_id','template_id','instance_id', 'instanceFlow', 'instanceName'],
-    data () {
-        return {
-            i18n: {
-                task_info: gettext('任务信息'),
-                taskName: gettext('任务名称'),
-                params: gettext('参数信息'),
-                preview: gettext('预览'),
-                claim: gettext('认领'),
-                taskPreview: gettext('任务流程预览')
-            },
-            isSubmit: false,
-            previewDialogShow: false,
-            previewDataLoading: false,
-            name: this.instanceName,
-            nodeSwitching: false,
-            pipelineData: JSON.parse(this.instanceFlow),
-            previewData: JSON.parse(this.instanceFlow),
-            taskNameRule: {
-                required: true,
-                max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            previewBread: []
-        }
-    },
-    computed: {
-        ...mapState({
-            'userType': state => state.userType
-        }),
-        isVariableEmpty () {
-            return Object.keys(this.pipelineData.constants).length === 0
-        }
-    },
-    methods: {
-        ...mapActions('task/', [
-            'claimFuncTask'
-        ]),
-        formatCanvasData (pipelineData) {
-            const {lines, locations, gateways} = pipelineData
-            const branchConditions = {}
-            for (let gKey in gateways) {
-                const item = gateways[gKey]
-                if (item.conditions) {
-                    branchConditions[item.id] = Object.assign({}, item.conditions)
-                }
-            }
+    export default {
+        name: 'TaskFunctionalization',
+        inject: ['reload'],
+        components: {
+            NoData,
+            BaseInput,
+            TaskParamEdit,
+            NodePreview
+        },
+        props: ['cc_id', 'template_id', 'instance_id', 'instanceFlow', 'instanceName'],
+        data () {
             return {
-                lines: pipelineData.line,
-                locations: pipelineData.location.map(item => {return {...item, mode: 'preview', checked: true}}),
-                branchConditions
+                i18n: {
+                    task_info: gettext('任务信息'),
+                    taskName: gettext('任务名称'),
+                    params: gettext('参数信息'),
+                    preview: gettext('预览'),
+                    claim: gettext('认领'),
+                    taskPreview: gettext('任务流程预览')
+                },
+                isSubmit: false,
+                previewDialogShow: false,
+                previewDataLoading: false,
+                name: this.instanceName,
+                nodeSwitching: false,
+                pipelineData: JSON.parse(this.instanceFlow),
+                previewData: JSON.parse(this.instanceFlow),
+                taskNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                previewBread: []
             }
         },
-        updateCanvas () {
-            this.previewDataLoading = true
-            this.$nextTick(() => {
-                this.previewDataLoading = false
-            })
+        computed: {
+            ...mapState({
+                'userType': state => state.userType
+            }),
+            isVariableEmpty () {
+                return Object.keys(this.pipelineData.constants).length === 0
+            }
         },
-        onTaskClaim () {
-            if (this.isSubmit) return
-            this.isSubmit = true
-            this.$validator.validateAll().then(async (result) => {
-                if (!result) return
-                const formData = {}
-                if (this.$refs.TaskParamEdit) {
-                    const variables = this.$refs.TaskParamEdit.getVariableData()
-                    for (let key in variables) {
-                        formData[key] = variables[key].value
+        methods: {
+            ...mapActions('task/', [
+                'claimFuncTask'
+            ]),
+            formatCanvasData (pipelineData) {
+                const { line, location, gateways } = pipelineData
+                const branchConditions = {}
+                for (const gKey in gateways) {
+                    const item = gateways[gKey]
+                    if (item.conditions) {
+                        branchConditions[item.id] = Object.assign({}, item.conditions)
                     }
                 }
-                const data = {
-                    name: this.name,
-                    instance_id: this.instance_id,
-                    constants: JSON.stringify(formData)
+                return {
+                    lines: line,
+                    locations: location.map(item => {
+                        return { ...item, mode: 'preview', checked: true }
+                    }),
+                    branchConditions
                 }
-                try {
-                    const res = await this.claimFuncTask(data)
-                    if (res.result) {
-                        this.reload()
-                    } else {
+            },
+            updateCanvas () {
+                this.previewDataLoading = true
+                this.$nextTick(() => {
+                    this.previewDataLoading = false
+                })
+            },
+            onTaskClaim () {
+                if (this.isSubmit) return
+                this.isSubmit = true
+                this.$validator.validateAll().then(async (result) => {
+                    if (!result) return
+                    const formData = {}
+                    if (this.$refs.TaskParamEdit) {
+                        const variables = this.$refs.TaskParamEdit.getVariableData()
+                        for (const key in variables) {
+                            formData[key] = variables[key].value
+                        }
+                    }
+                    const data = {
+                        name: this.name,
+                        instance_id: this.instance_id,
+                        constants: JSON.stringify(formData)
+                    }
+                    try {
+                        const res = await this.claimFuncTask(data)
+                        if (res.result) {
+                            this.reload()
+                        } else {
+                            errorHandler(res, this)
+                        }
+                    } catch (e) {
                         errorHandler(e, this)
+                    } finally {
+                        this.isSubmit = false
                     }
-                } catch (e) {
-                    errorHandler(e, this)
-                } finally {
-                    this.isSubmit = false
+                })
+            },
+            onShowPreviewDialog () {
+                this.previewBread.push({
+                    name: this.name,
+                    data: this.previewData
+                })
+                this.previewDialogShow = true
+            },
+            onCancel () {
+                this.previewDialogShow = false
+                this.previewDataLoading = false
+                this.previewData = tools.deepClone(this.pipelineData)
+                this.previewBread = []
+            },
+            onSelectSubflow (data, index) {
+                this.previewData = data
+                this.previewBread.splice(index + 1)
+                this.updateCanvas()
+            },
+            onNodeClick (id) {
+                const activity = this.previewData.activities[id]
+                if (!activity || activity.type !== 'SubProcess') {
+                    return
                 }
-            })
-        },
-        onShowPreviewDialog () {
-            this.previewBread.push({
-                name: this.name,
-                data: this.previewData
-            })
-            this.previewDialogShow = true
-        },
-        onCancel () {
-            this.previewDialogShow = false
-            this.previewDataLoading = false
-            this.previewData = tools.deepClone(this.pipelineData)
-            this.previewBread = []
-        },
-        onSelectSubflow (data, index) {
-            this.previewData = data
-            this.previewBread.splice(index + 1)
-            this.updateCanvas()
-        },
-        onNodeClick (id) {
-            const activity = this.previewData.activities[id]
-            if (!activity || activity.type !== 'SubProcess') {
-                return
-            }
             
-            const templateId = activity.template_id
-            const previewData = activity.pipeline
-            this.previewBread.push({
-                data: previewData,
-                name: activity.name
-            })
-            this.previewData = previewData
-            this.updateCanvas()
+                const previewData = activity.pipeline
+                this.previewBread.push({
+                    data: previewData,
+                    name: activity.name
+                })
+                this.previewData = previewData
+                this.updateCanvas()
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/TaskOperation.vue b/pipeline/blueflow/src/pages/task/TaskExecute/TaskOperation.vue
index c937103b64..ebc0554560 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/TaskOperation.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/TaskOperation.vue
@@ -14,23 +14,23 @@
         <div class="operation-header clearfix">
             <div class="bread-crumbs-wrapper">
                 <span
-                    :class="['path-item', {'name-ellipsis': nodeNav.length > 1}]"
+                    :class="['path-item', { 'name-ellipsis': nodeNav.length > 1 }]"
                     v-for="(path, index) in nodeNav"
                     :key="path.id"
-                    :title="showNodeList.includes(index)? path.name: ''">
-                        <span v-if="!!index && showNodeList.includes(index) || index === 1">
-                            &gt;
-                        </span>
-                        <span
-                            v-if="showNodeList.includes(index)"
-                            class="node-name"
-                            :title="path.name"
-                            @click="onSelectSubflow(path.id)">
-                            {{path.name}}
-                        </span>
-                        <span class="node-ellipsis" v-else-if="index === 1">
-                            {{ellipsis}}
-                        </span>
+                    :title="showNodeList.includes(index) ? path.name : ''">
+                    <span v-if="!!index && showNodeList.includes(index) || index === 1">
+                        &gt;
+                    </span>
+                    <span
+                        v-if="showNodeList.includes(index)"
+                        class="node-name"
+                        :title="path.name"
+                        @click="onSelectSubflow(path.id)">
+                        {{path.name}}
+                    </span>
+                    <span class="node-ellipsis" v-else-if="index === 1">
+                        {{ellipsis}}
+                    </span>
                 </span>
             </div>
             <ul class="operation-container clearfix">
@@ -58,8 +58,8 @@
                     </div>
                 </li>
                 <li :class="['operation-line',
-                    {'disabled': state === 'REVOKED' || state === 'FINISHED'
-                }]">
+                             { 'disabled': state === 'REVOKED' || state === 'FINISHED'
+                             }]">
                 </li>
                 <li
                     :class="['operation-btn common-icon-dark-paper clickable',{
@@ -83,15 +83,15 @@
         </div>
         <div class="task-container">
             <div :class="['pipeline-nodes', {
-                    'task-params-show': isTaskParamsShow
-                }]">
+                'task-params-show': isTaskParamsShow
+            }]">
                 <PipelineCanvas
                     ref="pipelineCanvas"
                     v-if="!nodeSwitching"
-                    :isMenuBarShow="false"
-                    :isConfigBarShow="false"
-                    :isEdit="false"
-                    :canvasData="canvasData"
+                    :is-menu-bar-show="false"
+                    :is-config-bar-show="false"
+                    :is-edit="false"
+                    :canvas-data="canvasData"
                     @onNodeClick="onNodeClick">
                 </PipelineCanvas>
             </div>
@@ -100,29 +100,29 @@
             <div class="node-info-panel" ref="nodeInfoPanel" v-if="isNodeInfoPanelShow">
                 <ViewParams
                     v-if="nodeInfoType === 'viewParams'"
-                    :nodeData="nodeData"
-                    :selectedFlowPath="selectedFlowPath"
-                    :nodeDetailConfig="nodeDetailConfig"
+                    :node-data="nodeData"
+                    :selected-flow-path="selectedFlowPath"
+                    :node-detail-config="nodeDetailConfig"
                     @onClickTreeNode="onClickTreeNode">
                 </ViewParams>
                 <ModifyParams
                     v-if="nodeInfoType === 'modifyParams'"
-                    :paramsCanBeModify="paramsCanBeModify"
+                    :params-can-be-modify="paramsCanBeModify"
                     :instance_id="instance_id">
                 </ModifyParams>
                 <ExecuteInfo
-                    v-if="nodeInfoType==='executeInfo'"
-                    :nodeDetailConfig="nodeDetailConfig">
+                    v-if="nodeInfoType === 'executeInfo'"
+                    :node-detail-config="nodeDetailConfig">
                 </ExecuteInfo>
                 <RetryNode
-                    v-if="nodeInfoType==='retryNode'"
-                    :nodeDetailConfig="nodeDetailConfig"
+                    v-if="nodeInfoType === 'retryNode'"
+                    :node-detail-config="nodeDetailConfig"
                     @retrySuccess="onRetrySuccess"
                     @retryCancel="onRetryCancel">
                 </RetryNode>
                 <ModifyTime
-                    v-if="nodeInfoType==='modifyTime'"
-                    :nodeDetailConfig="nodeDetailConfig"
+                    v-if="nodeInfoType === 'modifyTime'"
+                    :node-detail-config="nodeDetailConfig"
                     @modifyTimeSuccess="onModifyTimeSuccess"
                     @modifyTimeCancel="onModifyTimeCancel">
                 </ModifyTime>
@@ -133,980 +133,975 @@
         </transition>
         <gatewaySelectDialog
             v-if="isGatewaySelectDialogShow"
-            :isGatewaySelectDialogShow="isGatewaySelectDialogShow"
-            :gatewayBranches="gatewayBranches"
+            :is-gateway-select-dialog-show="isGatewaySelectDialogShow"
+            :gateway-branches="gatewayBranches"
             @onConfirm="onConfirmGatewaySelect"
             @onCancel="onCancelGatewaySelect">
         </gatewaySelectDialog>
         <revokeDialog
-            :isRevokeDialogShow="isRevokeDialogShow"
+            :is-revoke-dialog-show="isRevokeDialogShow"
             @onConfirmRevokeTask="onConfirmRevokeTask"
             @onCancelRevokeTask="onCancelRevokeTask">
         </revokeDialog>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapActions } from 'vuex'
-import Tooltip from 'tooltip.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import dom from '@/utils/dom.js'
-import { TASK_STATE_DICT } from '@/constants/index.js'
-import PipelineCanvas from '@/components/common/PipelineCanvas'
-import ViewParams from './ViewParams.vue'
-import ModifyParams from './ModifyParams.vue'
-import ExecuteInfo from './ExecuteInfo.vue'
-import RetryNode from './RetryNode.vue'
-import ModifyTime from './ModifyTime.vue'
-import gatewaySelectDialog from './GatewaySelectDialog.vue'
-import revokeDialog from './revokeDialog.vue'
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import Tooltip from 'tooltip.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import dom from '@/utils/dom.js'
+    import { TASK_STATE_DICT } from '@/constants/index.js'
+    import PipelineCanvas from '@/components/common/PipelineCanvas'
+    import ViewParams from './ViewParams.vue'
+    import ModifyParams from './ModifyParams.vue'
+    import ExecuteInfo from './ExecuteInfo.vue'
+    import RetryNode from './RetryNode.vue'
+    import ModifyTime from './ModifyTime.vue'
+    import gatewaySelectDialog from './GatewaySelectDialog.vue'
+    import revokeDialog from './revokeDialog.vue'
 
-const OPERATIONS = [
-    {
-        type: 'execute',
-        icon: 'common-icon-right-triangle',
-        text: gettext('执行'),
-        extraStyle: true
-    },
-    {
-        type: 'revoke',
-        icon: 'common-icon-return-arrow',
-        text: gettext('撤销')
-    }
-]
-// 执行按钮的变更
-const STATE_OPERATIONS = {
-    'RUNNING': {
-        type: 'pause',
-        icon: 'common-icon-double-vertical-line',
-        text: gettext('暂停'),
-        extraStyle: true
-    },
-    'SUSPENDED': {
-        type: 'resume',
-        icon: 'common-icon-right-triangle',
-        text: gettext('继续'),
-        extraStyle: true
-    },
-    'CREATED': {
-        type: 'execute',
-        icon: 'common-icon-right-triangle',
-        text: gettext('执行'),
-        extraStyle: true
-    },
-    'FAILED': {
-        type: 'pause',
-        icon: 'common-icon-double-vertical-line',
-        text: gettext('暂停'),
-        extraStyle: true
-    }
-}
-export default {
-    name: 'TaskOperation',
-    components: {
-        PipelineCanvas,
-        ViewParams,
-        ModifyParams,
-        ExecuteInfo,
-        RetryNode,
-        ModifyTime,
-        gatewaySelectDialog,
-        revokeDialog
-    },
-    props: ['cc_id', 'instance_id', 'instanceFlow', 'instanceName'],
-    data () {
-        const pipelineData =  JSON.parse(this.instanceFlow)
-        const path = []
-        path.push({
-            id: this.instance_id,
-            name: this.instanceName,
-            nodeId: pipelineData.id,
-            type: 'root'
-        })
-
-        return {
-            i18n: {
-                params: gettext('查看参数'),
-                changeParams: gettext('修改参数')
-            },
-            operationList: OPERATIONS.slice(0),
-            taskId: this.instance_id,
-            isTaskParamsShow: false,
-            isNodeInfoPanelShow: false,
-            nodeInfoType: '',
-            activeOperation: '',
-            state: '',
-            selectedFlowPath: path, // 选择面包屑路径
-            instanceStatus: {},
-            taskParamsType: '',
-            timer: null,
-            pipelineData: pipelineData,
-            nodeDetailConfig: {},
-            nodeSwitching: false,
-            isGatewaySelectDialogShow: false,
-            gatewayBranches: [],
-            nodeTooltipInstance: {},
-            pending: {
-                skip: false,
-                selectGateway: false,
-                task: false,
-                parseNodeResume: false,
-                subflowPause: false,
-                subflowResume: false
-            },
-            isRevokeDialogShow: false,
-            showNodeList: [0, 1, 2],
-            ellipsis: '...',
-            operateLoading: false
-        }
-    },
-    computed: {
-        completePipelineData () {
-            return JSON.parse(this.instanceFlow)
-        },
-        canvasData () {
-            const {lines, locations, gateways} = this.pipelineData
-            const branchConditions = {}
-            for (let gKey in gateways) {
-                const item = gateways[gKey]
-                if (item.conditions) {
-                    branchConditions[item.id] = Object.assign({}, item.conditions)
-                }
-            }
-            return {
-                lines: this.pipelineData.line,
-                locations: this.pipelineData.location.map(item => {return {...item, mode: 'preview', checked: true}}),
-                branchConditions
-            }
-
-        },
-        nodeData () {
-            return [{
-                id: this.instance_id,
-                name: this.instanceName,
-                children: this.getOrderedTree(this.completePipelineData)
-            }]
+    const OPERATIONS = [
+        {
+            type: 'execute',
+            icon: 'common-icon-right-triangle',
+            text: gettext('执行'),
+            extraStyle: true
         },
-        taskState () {
-            return TASK_STATE_DICT[this.state]
+        {
+            type: 'revoke',
+            icon: 'common-icon-return-arrow',
+            text: gettext('撤销')
+        }
+    ]
+    // 执行按钮的变更
+    const STATE_OPERATIONS = {
+        'RUNNING': {
+            type: 'pause',
+            icon: 'common-icon-double-vertical-line',
+            text: gettext('暂停'),
+            extraStyle: true
         },
-        nodeNav () {
-            return this.selectedFlowPath.filter(item => item.type !== 'ServiceActivity')
+        'SUSPENDED': {
+            type: 'resume',
+            icon: 'common-icon-right-triangle',
+            text: gettext('继续'),
+            extraStyle: true
         },
-        // mark the current canvas is root or not
-        isTopTask () {
-            return this.nodeNav.length === 1
+        'CREATED': {
+            type: 'execute',
+            icon: 'common-icon-right-triangle',
+            text: gettext('执行'),
+            extraStyle: true
         },
-        paramsCanBeModify () {
-            return this.isTopTask && this.state === 'CREATED'
+        'FAILED': {
+            type: 'pause',
+            icon: 'common-icon-double-vertical-line',
+            text: gettext('暂停'),
+            extraStyle: true
         }
-    },
-    mounted () {
-        this.loadTaskStatus()
-        this.$el.addEventListener('click', this.handleNodeHoverClick, false)
-        window.addEventListener('click', this.handleNodeInfoPanelHide, false)
-    },
-    beforeDestroy () {
-        this.cancelTaskStatusTimer()
-        this.$el.removeEventListener('click', this.handleNodeHoverClick, false)
-        window.removeEventListener('click', this.handleNodeInfoPanelHide, false)
-    },
-    watch: {
-        state (val) {
-            if (val in STATE_OPERATIONS) {
-                this.operationList[0] = STATE_OPERATIONS[val]
-            } else if (val === 'REVOKED' || val === 'FINISHED') {
-                this.operationList = []
-            }
-            this.operateLoading = false
+    }
+    export default {
+        name: 'TaskOperation',
+        components: {
+            PipelineCanvas,
+            ViewParams,
+            ModifyParams,
+            ExecuteInfo,
+            RetryNode,
+            ModifyTime,
+            gatewaySelectDialog,
+            revokeDialog
         },
-        nodeNav (val) {
-            if (val.length > 3) {
-                this.showNodeList = [0, val.length - 1 , val.length - 2]
-            } else {
-                this.showNodeList = [0, 1, 2]
-            }
-        }
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getInstanceStatus',
-            'instanceStart',
-            'instancePause',
-            'subInstancePause',
-            'instanceResume',
-            'subInstanceResume',
-            'instanceRevoke',
-            'instanceNodeSkip',
-            'instanceBranchSkip',
-            'skipExclusiveGateway',
-            'pauseNodeResume'
-        ]),
-        async loadTaskStatus () {
-            const data = {
-                instance_id: this.taskId,
-                cc_id: this.cc_id
+        props: ['cc_id', 'instance_id', 'instanceFlow', 'instanceName'],
+        data () {
+            const pipelineData = JSON.parse(this.instanceFlow)
+            const path = []
+            path.push({
+                id: this.instance_id,
+                name: this.instanceName,
+                nodeId: pipelineData.id,
+                type: 'root'
+            })
+
+            return {
+                i18n: {
+                    params: gettext('查看参数'),
+                    changeParams: gettext('修改参数')
+                },
+                operationList: OPERATIONS.slice(0),
+                taskId: this.instance_id,
+                isTaskParamsShow: false,
+                isNodeInfoPanelShow: false,
+                nodeInfoType: '',
+                activeOperation: '',
+                state: '',
+                selectedFlowPath: path, // 选择面包屑路径
+                instanceStatus: {},
+                taskParamsType: '',
+                timer: null,
+                pipelineData: pipelineData,
+                nodeDetailConfig: {},
+                nodeSwitching: false,
+                isGatewaySelectDialogShow: false,
+                gatewayBranches: [],
+                nodeTooltipInstance: {},
+                pending: {
+                    skip: false,
+                    selectGateway: false,
+                    task: false,
+                    parseNodeResume: false,
+                    subflowPause: false,
+                    subflowResume: false
+                },
+                isRevokeDialogShow: false,
+                showNodeList: [0, 1, 2],
+                ellipsis: '...',
+                operateLoading: false
             }
-            try {
-                this.$emit('taskStatusLoadChange', true)
-                const instanceStatus = await this.getInstanceStatus(data)
-                if (instanceStatus.result) {
-                    this.state = instanceStatus.data.state
-                    this.instanceStatus = instanceStatus.data
-                    if (this.state === 'RUNNING') {
-                        this.setTaskStatusTimer()
+        },
+        computed: {
+            completePipelineData () {
+                return JSON.parse(this.instanceFlow)
+            },
+            canvasData () {
+                const { line, location, gateways } = this.pipelineData
+                const branchConditions = {}
+                for (const gKey in gateways) {
+                    const item = gateways[gKey]
+                    if (item.conditions) {
+                        branchConditions[item.id] = Object.assign({}, item.conditions)
                     }
-                    this.updateNodeInfo()
-                } else {
-                    this.cancelTaskStatusTimer()
-                    errorHandler(instanceStatus, this)
                 }
-            } catch (e) {
-                this.cancelTaskStatusTimer()
-                errorHandler(e, this)
-            } finally {
-                this.$emit('taskStatusLoadChange', false)
-            }
-        },
-        async taskExecute () {
-            // 这里的loading结束由state的改变来停止
-            this.operateLoading = true
-            try {
-                const res = await this.instanceStart(this.instance_id)
-                if (res.result) {
-                    this.setTaskStatusTimer()
-                    this.$bkMessage({
-                        message: gettext('任务开始执行'),
-                        theme: 'success'
-                    })
-                } else {
-                    errorHandler(res, this)
+                return {
+                    lines: line,
+                    locations: location.map(item => {
+                        return { ...item, mode: 'preview', checked: true }
+                    }),
+                    branchConditions
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.task = false
-                this.operateLoading = false
+            },
+            nodeData () {
+                return [{
+                    id: this.instance_id,
+                    name: this.instanceName,
+                    children: this.getOrderedTree(this.completePipelineData)
+                }]
+            },
+            taskState () {
+                return TASK_STATE_DICT[this.state]
+            },
+            nodeNav () {
+                return this.selectedFlowPath.filter(item => item.type !== 'ServiceActivity')
+            },
+            // mark the current canvas is root or not
+            isTopTask () {
+                return this.nodeNav.length === 1
+            },
+            paramsCanBeModify () {
+                return this.isTopTask && this.state === 'CREATED'
             }
         },
-        async taskPause (subflowPause, nodeId) {
-            this.operateLoading = true
-            let res
-            try {
-                if (!this.isTopTask || subflowPause) { // 子流程画布暂停或子流程节点暂停
-                    const data = {
-                        instance_id: this.instance_id,
-                        node_id: nodeId || this.taskId
-                    }
-                    res = await this.subInstancePause(data)
-                } else {
-                    res = await this.instancePause(this.instance_id)
+        watch: {
+            state (val) {
+                if (val in STATE_OPERATIONS) {
+                    this.operationList[0] = STATE_OPERATIONS[val]
+                } else if (val === 'REVOKED' || val === 'FINISHED') {
+                    this.operationList = []
                 }
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('任务暂停成功'),
-                        theme: 'success'
-                    })
+                this.operateLoading = false
+            },
+            nodeNav (val) {
+                if (val.length > 3) {
+                    this.showNodeList = [0, val.length - 1, val.length - 2]
                 } else {
-                    errorHandler(res, this)
+                    this.showNodeList = [0, 1, 2]
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.task = false
-                this.operateLoading = false
             }
         },
-        async taskResume (subflowResume, nodeId) {
-            this.operateLoading = true
-            let res
-            try {
-                if (!this.isTopTask || subflowResume) {
-                    const data = {
-                        instance_id: this.instance_id,
-                        node_id: nodeId || this.taskId
-                    }
-                    res = await this.subInstanceResume(data)
-                } else {
-                    res = await this.instanceResume(this.instance_id)
+        mounted () {
+            this.loadTaskStatus()
+            this.$el.addEventListener('click', this.handleNodeHoverClick, false)
+            window.addEventListener('click', this.handleNodeInfoPanelHide, false)
+        },
+        beforeDestroy () {
+            this.cancelTaskStatusTimer()
+            this.$el.removeEventListener('click', this.handleNodeHoverClick, false)
+            window.removeEventListener('click', this.handleNodeInfoPanelHide, false)
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getInstanceStatus',
+                'instanceStart',
+                'instancePause',
+                'subInstancePause',
+                'instanceResume',
+                'subInstanceResume',
+                'instanceRevoke',
+                'instanceNodeSkip',
+                'instanceBranchSkip',
+                'skipExclusiveGateway',
+                'pauseNodeResume'
+            ]),
+            async loadTaskStatus () {
+                const data = {
+                    instance_id: this.taskId,
+                    cc_id: this.cc_id
                 }
-                if (res.result) {
-                    this.setTaskStatusTimer()
-                    this.$bkMessage({
-                        message: gettext('任务继续成功'),
-                        theme: 'success'
-                    })
-                } else {
-                    errorHandler(res, this)
+                try {
+                    this.$emit('taskStatusLoadChange', true)
+                    const instanceStatus = await this.getInstanceStatus(data)
+                    if (instanceStatus.result) {
+                        this.state = instanceStatus.data.state
+                        this.instanceStatus = instanceStatus.data
+                        if (this.state === 'RUNNING') {
+                            this.setTaskStatusTimer()
+                        }
+                        this.updateNodeInfo()
+                    } else {
+                        this.cancelTaskStatusTimer()
+                        errorHandler(instanceStatus, this)
+                    }
+                } catch (e) {
+                    this.cancelTaskStatusTimer()
+                    errorHandler(e, this)
+                } finally {
+                    this.$emit('taskStatusLoadChange', false)
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.task = false
-                this.operateLoading = false
-            }
-        },
-        async taskRevoke () {
-            this.operateLoading = true
-            try {
-                const res = await this.instanceRevoke(this.instance_id)
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('任务撤销成功'),
-                        theme: 'success'
-                    })
-                    setTimeout(()=> {
+            },
+            async taskExecute () {
+                // 这里的loading结束由state的改变来停止
+                this.operateLoading = true
+                try {
+                    const res = await this.instanceStart(this.instance_id)
+                    if (res.result) {
                         this.setTaskStatusTimer()
-                    }, 1000)
-                } else {
-                    errorHandler(res, this)
+                        this.$bkMessage({
+                            message: gettext('任务开始执行'),
+                            theme: 'success'
+                        })
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.task = false
+                    this.operateLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.task = false
-                this.operateLoading = false
-            }
-        },
-        async nodeTaskSkip (tooltipDom, data) {
-            tooltipDom.style.display = 'none'
-            this.pending.skip = true
-            try {
-                const res = await this.instanceNodeSkip(data)
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('跳过成功'),
-                        theme: 'success'
-                    })
-                    this.destroyTooltipInstance(data.id)
-                    setTimeout(()=> {
-                        this.setTaskStatusTimer()
-                    }, 1000)
-                } else {
-                    tooltipDom.style.display = 'block'
-                    errorHandler(res, this)
+            },
+            async taskPause (subflowPause, nodeId) {
+                this.operateLoading = true
+                let res
+                try {
+                    if (!this.isTopTask || subflowPause) { // 子流程画布暂停或子流程节点暂停
+                        const data = {
+                            instance_id: this.instance_id,
+                            node_id: nodeId || this.taskId
+                        }
+                        res = await this.subInstancePause(data)
+                    } else {
+                        res = await this.instancePause(this.instance_id)
+                    }
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('任务暂停成功'),
+                            theme: 'success'
+                        })
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.task = false
+                    this.operateLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.skip = false
-            }
-        },
-        async selectGatewayBranch (data) {
-            this.pending.selectGateway = true
-            try {
-                const res = await this.skipExclusiveGateway(data)
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('跳过成功'),
-                        theme: 'success'
-                    })
-                    this.destroyTooltipInstance(data.id)
-                    setTimeout(()=> {
+            },
+            async taskResume (subflowResume, nodeId) {
+                this.operateLoading = true
+                let res
+                try {
+                    if (!this.isTopTask || subflowResume) {
+                        const data = {
+                            instance_id: this.instance_id,
+                            node_id: nodeId || this.taskId
+                        }
+                        res = await this.subInstanceResume(data)
+                    } else {
+                        res = await this.instanceResume(this.instance_id)
+                    }
+                    if (res.result) {
                         this.setTaskStatusTimer()
-                    }, 1000)
-                } else {
-                    errorHandler(res, this)
+                        this.$bkMessage({
+                            message: gettext('任务继续成功'),
+                            theme: 'success'
+                        })
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.task = false
+                    this.operateLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.selectGateway = false
-            }
-        },
-        async nodeResume (data) {
-            this.pending.parseNodeResume = true
-            try {
-                const res = await this.pauseNodeResume(data)
-                if (res.result) {
-                    this.$bkMessage({
-                        message: gettext('继续成功'),
-                        theme: 'success'
-                    })
-                    this.destroyTooltipInstance(data.id)
-                    setTimeout(()=> {
-                        this.setTaskStatusTimer()
-                    }, 1000)
-                } else {
-                    errorHandler(res, this)
+            },
+            async taskRevoke () {
+                this.operateLoading = true
+                try {
+                    const res = await this.instanceRevoke(this.instance_id)
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('任务撤销成功'),
+                            theme: 'success'
+                        })
+                        setTimeout(() => {
+                            this.setTaskStatusTimer()
+                        }, 1000)
+                    } else {
+                        errorHandler(res, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.task = false
+                    this.operateLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.parseNodeResume = false
-            }
-        },
-        setTaskStatusTimer () {
-            this.cancelTaskStatusTimer()
-            this.timer = setTimeout(()=>{
-                this.loadTaskStatus()
-            }, 2000)
-        },
-        cancelTaskStatusTimer () {
-            if (this.timer) {
-                clearTimeout(this.timer)
-                this.timer = null
-            }
-        },
-        updateTaskStatus (id) {
-            this.taskId = id
-            this.setCanvasData()
-            this.loadTaskStatus()
-        },
-        // 更新节点状态
-        updateNodeInfo () {
-            const nodes = this.instanceStatus.children
-            for (let id in nodes) {
-                const nodeActivities = this.pipelineData.activities[id]
-                const nodeEl = document.querySelector(`#${id}`)
-                let isSkipped = false
-                if (nodes[id].state === 'FINISHED') {
-                    isSkipped = nodes[id].skip || nodes[id].error_ignorable
-                    this.destroyTooltipInstance(id)
-                } else if (nodes[id].state === 'FAILED') { // 初始化失败节点重试 tooltip（任务节点、分支网关）
-                    const type = nodeEl ? nodeEl.dataset.type : 'undefined'
-                    if (type === 'tasknode') {
-                        const tpl = this.getFailedBtnTpl(id,nodeActivities.isSkipped, nodeActivities.can_retry)
-                        this.generateTooltipInstance(nodeEl, id, tpl)
-                    } else if (type === 'branchgateway') {
-                        const tpl = this.getGatewayBtnTpl(id)
-                        this.generateTooltipInstance(nodeEl, id, tpl)
+            },
+            async nodeTaskSkip (tooltipDom, data) {
+                tooltipDom.style.display = 'none'
+                this.pending.skip = true
+                try {
+                    const res = await this.instanceNodeSkip(data)
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('跳过成功'),
+                            theme: 'success'
+                        })
+                        this.destroyTooltipInstance(data.id)
+                        setTimeout(() => {
+                            this.setTaskStatusTimer()
+                        }, 1000)
+                    } else {
+                        tooltipDom.style.display = 'block'
+                        errorHandler(res, this)
                     }
-                } else if ( // 初始化定时节点修改时间 tooltip
-                    nodes[id].state === 'RUNNING' &&
-                    nodeActivities &&
-                    nodeActivities.component &&
-                    nodeActivities.component.code === 'sleep_timer' &&
-                    !this.nodeTooltipInstance[id]
-                ) {
-                    const tpl = this.getModityTimeBtnTpl(id)
-                    this.generateTooltipInstance(nodeEl, id, tpl)
-                } else if ( // 初始化暂停节点继续 tooltip
-                    nodes[id].state === 'RUNNING' &&
-                    nodeActivities &&
-                    nodeActivities.component &&
-                    nodeActivities.component.code === 'pause_node' &&
-                    !this.nodeTooltipInstance[id]
-                ) {
-                    const tpl = this.getPauseResumeBtnTpl(id)
-                    this.generateTooltipInstance(nodeEl, id, tpl)
-                } else if ( // 初始化子流程节点暂停 tooltip
-                    nodes[id].state === 'RUNNING' &&
-                    nodeActivities &&
-                    nodeActivities.type === 'SubProcess'
-                ) {
-                    const tpl = this.getSubflowPauseBtnTpl(id)
-                    if (!this.nodeTooltipInstance[id]) {
-                        this.generateTooltipInstance(nodeEl, id, tpl)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.skip = false
+                }
+            },
+            async selectGatewayBranch (data) {
+                this.pending.selectGateway = true
+                try {
+                    const res = await this.skipExclusiveGateway(data)
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('跳过成功'),
+                            theme: 'success'
+                        })
+                        this.destroyTooltipInstance(data.id)
+                        setTimeout(() => {
+                            this.setTaskStatusTimer()
+                        }, 1000)
                     } else {
-                        this.nodeTooltipInstance[id].updateTitleContent(tpl)
+                        errorHandler(res, this)
                     }
-                } else if ( // 初始化子流程节点继续 tooltip
-                    nodes[id].state === 'SUSPENDED' &&
-                    nodeActivities &&
-                    nodeActivities.type === 'SubProcess'
-                ) {
-                    const tpl = this.getSubflowResumeBtnTpl(id)
-                    if (!this.nodeTooltipInstance[id]) {
-                        this.generateTooltipInstance(nodeEl, id, tpl)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.selectGateway = false
+                }
+            },
+            async nodeResume (data) {
+                this.pending.parseNodeResume = true
+                try {
+                    const res = await this.pauseNodeResume(data)
+                    if (res.result) {
+                        this.$bkMessage({
+                            message: gettext('继续成功'),
+                            theme: 'success'
+                        })
+                        this.destroyTooltipInstance(data.id)
+                        setTimeout(() => {
+                            this.setTaskStatusTimer()
+                        }, 1000)
                     } else {
-                        this.nodeTooltipInstance[id].updateTitleContent(tpl)
+                        errorHandler(res, this)
                     }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.parseNodeResume = false
                 }
-                const data = {status: nodes[id].state, isSkipped}
-
-                // 暂停节点右上角显示暂停icon
-                if (nodes[id].state === 'RUNNING' &&
-                    nodeActivities &&
-                    nodeActivities.component &&
-                    nodeActivities.component.code === 'pause_node'
-                ) {
-                    data.status = 'SUSPENDED'
+            },
+            setTaskStatusTimer () {
+                this.cancelTaskStatusTimer()
+                this.timer = setTimeout(() => {
+                    this.loadTaskStatus()
+                }, 2000)
+            },
+            cancelTaskStatusTimer () {
+                if (this.timer) {
+                    clearTimeout(this.timer)
+                    this.timer = null
                 }
+            },
+            updateTaskStatus (id) {
+                this.taskId = id
+                this.setCanvasData()
+                this.loadTaskStatus()
+            },
+            // 更新节点状态
+            updateNodeInfo () {
+                const nodes = this.instanceStatus.children
+                for (const id in nodes) {
+                    const nodeActivities = this.pipelineData.activities[id]
+                    const nodeEl = document.querySelector(`#${id}`)
+                    let isSkipped = false
+                    if (nodes[id].state === 'FINISHED') {
+                        isSkipped = nodes[id].skip || nodes[id].error_ignorable
+                        this.destroyTooltipInstance(id)
+                    } else if (nodes[id].state === 'FAILED') { // 初始化失败节点重试 tooltip（任务节点、分支网关）
+                        const type = nodeEl ? nodeEl.dataset.type : 'undefined'
+                        if (type === 'tasknode') {
+                            const tpl = this.getFailedBtnTpl(id, nodeActivities.isSkipped, nodeActivities.can_retry)
+                            this.generateTooltipInstance(nodeEl, id, tpl)
+                        } else if (type === 'branchgateway') {
+                            const tpl = this.getGatewayBtnTpl(id)
+                            this.generateTooltipInstance(nodeEl, id, tpl)
+                        }
+                    } else if ( // 初始化定时节点修改时间 tooltip
+                        nodes[id].state === 'RUNNING'
+                        && nodeActivities
+                        && nodeActivities.component
+                        && nodeActivities.component.code === 'sleep_timer'
+                        && !this.nodeTooltipInstance[id]
+                    ) {
+                        const tpl = this.getModityTimeBtnTpl(id)
+                        this.generateTooltipInstance(nodeEl, id, tpl)
+                    } else if ( // 初始化暂停节点继续 tooltip
+                        nodes[id].state === 'RUNNING'
+                        && nodeActivities
+                        && nodeActivities.component
+                        && nodeActivities.component.code === 'pause_node'
+                        && !this.nodeTooltipInstance[id]
+                    ) {
+                        const tpl = this.getPauseResumeBtnTpl(id)
+                        this.generateTooltipInstance(nodeEl, id, tpl)
+                    } else if ( // 初始化子流程节点暂停 tooltip
+                        nodes[id].state === 'RUNNING'
+                        && nodeActivities
+                        && nodeActivities.type === 'SubProcess'
+                    ) {
+                        const tpl = this.getSubflowPauseBtnTpl(id)
+                        if (!this.nodeTooltipInstance[id]) {
+                            this.generateTooltipInstance(nodeEl, id, tpl)
+                        } else {
+                            this.nodeTooltipInstance[id].updateTitleContent(tpl)
+                        }
+                    } else if ( // 初始化子流程节点继续 tooltip
+                        nodes[id].state === 'SUSPENDED'
+                        && nodeActivities
+                        && nodeActivities.type === 'SubProcess'
+                    ) {
+                        const tpl = this.getSubflowResumeBtnTpl(id)
+                        if (!this.nodeTooltipInstance[id]) {
+                            this.generateTooltipInstance(nodeEl, id, tpl)
+                        } else {
+                            this.nodeTooltipInstance[id].updateTitleContent(tpl)
+                        }
+                    }
+                    const data = { status: nodes[id].state, isSkipped }
 
-                // 定时节点右上角显示时钟icon
-                if (nodes[id].state === 'RUNNING' &&
-                    nodeActivities &&
-                    nodeActivities.component &&
-                    nodeActivities.component.code === 'sleep_timer'
-                ) {
-                    data.isShowClockIcon = true
-                }
+                    // 暂停节点右上角显示暂停icon
+                    if (nodes[id].state === 'RUNNING'
+                        && nodeActivities
+                        && nodeActivities.component
+                        && nodeActivities.component.code === 'pause_node'
+                    ) {
+                        data.status = 'SUSPENDED'
+                    }
 
-                this.setTaskNodeStatus(id, data)
-            }
-        },
-        setTaskNodeStatus (id, data) {
-            this.$refs.pipelineCanvas && this.$refs.pipelineCanvas.onUpdateNodeInfo(id, data)
-        },
-        getFailedBtnTpl (id, isSkipped, retry) {
-            const i18n_retry = gettext("重试")
-            const i18n_skip = gettext("跳过")
-            const atom_failed = gettext('流程模板中该标准插件节点未配置失败处理方式，不可操作')
-            let content = `<div class="btn-wrapper">`
-            if (retry) {
-                content += `<div class="tooltip-btn retry-btn" data-id="${id}">${i18n_retry}</div>`
-            }
-            if (isSkipped) {
-                content += `<div class="tooltip-btn skip-btn" data-id="${id}">${i18n_skip}</div>`
-            }
-            // 兼容老数据
-            if (retry === undefined && isSkipped === undefined) {
-                content += `<div class="tooltip-btn retry-btn" data-id="${id}">${i18n_retry}</div>`
-                content += `<div class="tooltip-btn skip-btn" data-id="${id}">${i18n_skip}</div>`
-            } else if (!retry && !isSkipped) {
-                content += `<div class="atom-failed">${atom_failed}</div>`
-            }
-            content += `</div>`
-            return content
-        },
-        getModityTimeBtnTpl (id) {
-            const i18n_change_timer = gettext("修改时间")
-            return `<div class="btn-wrapper">
+                    // 定时节点右上角显示时钟icon
+                    if (nodes[id].state === 'RUNNING'
+                        && nodeActivities
+                        && nodeActivities.component
+                        && nodeActivities.component.code === 'sleep_timer'
+                    ) {
+                        data.isShowClockIcon = true
+                    }
+
+                    this.setTaskNodeStatus(id, data)
+                }
+            },
+            setTaskNodeStatus (id, data) {
+                this.$refs.pipelineCanvas && this.$refs.pipelineCanvas.onUpdateNodeInfo(id, data)
+            },
+            getFailedBtnTpl (id, isSkipped, retry) {
+                const i18n_retry = gettext('重试')
+                const i18n_skip = gettext('跳过')
+                const atom_failed = gettext('流程模板中该标准插件节点未配置失败处理方式，不可操作')
+                let content = `<div class="btn-wrapper">`
+                if (retry) {
+                    content += `<div class="tooltip-btn retry-btn" data-id="${id}">${i18n_retry}</div>`
+                }
+                if (isSkipped) {
+                    content += `<div class="tooltip-btn skip-btn" data-id="${id}">${i18n_skip}</div>`
+                }
+                // 兼容老数据
+                if (retry === undefined && isSkipped === undefined) {
+                    content += `<div class="tooltip-btn retry-btn" data-id="${id}">${i18n_retry}</div>`
+                    content += `<div class="tooltip-btn skip-btn" data-id="${id}">${i18n_skip}</div>`
+                } else if (!retry && !isSkipped) {
+                    content += `<div class="atom-failed">${atom_failed}</div>`
+                }
+                content += `</div>`
+                return content
+            },
+            getModityTimeBtnTpl (id) {
+                const i18n_change_timer = gettext('修改时间')
+                return `<div class="btn-wrapper">
                 <div class="tooltip-btn modify-time-btn" data-id="${id}">${i18n_change_timer}</div>
             </div>`
-        },
-        getGatewayBtnTpl (id) {
-            const i18n_skip = gettext("跳过")
-            return `<div class="btn-wrapper">
+            },
+            getGatewayBtnTpl (id) {
+                const i18n_skip = gettext('跳过')
+                return `<div class="btn-wrapper">
                 <div class="tooltip-btn gateway-select-btn" data-id="${id}">${i18n_skip}</div>
             </div>`
-        },
-        getPauseResumeBtnTpl (id) {
-            const i18n_continue = gettext("继续")
-            return `<div class="btn-wrapper">
+            },
+            getPauseResumeBtnTpl (id) {
+                const i18n_continue = gettext('继续')
+                return `<div class="btn-wrapper">
                 <div class="tooltip-btn pause-resume-btn" data-id="${id}">${i18n_continue}</div>
             </div>`
-        },
-        getSubflowPauseBtnTpl (id) {
-            const i18n_pause = gettext("暂停")
-            return `<div class="btn-wrapper">
+            },
+            getSubflowPauseBtnTpl (id) {
+                const i18n_pause = gettext('暂停')
+                return `<div class="btn-wrapper">
                 <div class="tooltip-btn subflow-pause-btn" data-id="${id}">${i18n_pause}</div>
             </div>`
-        },
-        getSubflowResumeBtnTpl (id) {
-            const i18n_continue = gettext("继续")
-            return `<div class="btn-wrapper">
+            },
+            getSubflowResumeBtnTpl (id) {
+                const i18n_continue = gettext('继续')
+                return `<div class="btn-wrapper">
                 <div class="tooltip-btn subflow-resume-btn" data-id="${id}">${i18n_continue}</div>
             </div>`
-        },
-        generateTooltipInstance (el, id, tpl) {
-            this.destroyTooltipInstance(id)
-            this.nodeTooltipInstance[id] = new Tooltip(el, {
-                placement: 'bottom',
-                html: true,
-                title: tpl
-            })
-        },
-        setNodeDetailConfig (id) {
-            const nodeActivities = this.pipelineData.activities[id]
-            let subprocessStack = []
-            if (this.selectedFlowPath.length > 1){
-                subprocessStack = this.selectedFlowPath.map(item => item.nodeId).slice(1)
-            }
-            this.nodeDetailConfig = {
-                component_code: nodeActivities.component.code,
-                node_id: nodeActivities.id,
-                instance_id: this.instance_id,
-                subprocess_stack: JSON.stringify(subprocessStack)
-            }
-        },
-        // 节点 tooltip 操作
-        handleNodeHoverClick (e) {
-            const classList = e.target.classList
-            if (!classList) return
-            if (classList.contains('retry-btn')) {
-                this.handleNodeRetryClick(e)
-            } else if (classList.contains('skip-btn')) {
-                this.handleNodeSkipClick(e)
-            } else if (classList.contains('modify-time-btn')) {
-                this.handleNodeModifyTimeClick(e)
-            } else if (classList.contains('gateway-select-btn')) {
-                this.handleGatewaySelectClick(e)
-            } else if (classList.contains('pause-resume-btn')) {
-                this.handlePauseResumeClick(e)
-            } else if (classList.contains('subflow-pause-btn')) {
-                this.handleSubflowPauseClick(e)
-            } else if (classList.contains('subflow-resume-btn')) {
-                this.handleSubflowResumeClick(e)
-            }
-        },
-        handleNodeInfoPanelHide (e) {
-            if (e.target.classList[0] === 'operation-btn') {
-                return
-            }
-            const classList = e.target.classList
-            const isTooltipBtn = classList.contains('tooltip-btn')
-            if (!this.isNodeInfoPanelShow || isTooltipBtn) return
-            const NodeInfoPanel = document.querySelector('.node-info-panel')
-            if (NodeInfoPanel) {
-                if (!dom.nodeContains(NodeInfoPanel, e.target)) {
-                    this.isNodeInfoPanelShow = false
-                    this.nodeInfoType = ''
-                    this.updateNodeActived(this.nodeDetailConfig.node_id, false)
+            },
+            generateTooltipInstance (el, id, tpl) {
+                this.destroyTooltipInstance(id)
+                this.nodeTooltipInstance[id] = new Tooltip(el, {
+                    placement: 'bottom',
+                    html: true,
+                    title: tpl
+                })
+            },
+            setNodeDetailConfig (id) {
+                const nodeActivities = this.pipelineData.activities[id]
+                let subprocessStack = []
+                if (this.selectedFlowPath.length > 1) {
+                    subprocessStack = this.selectedFlowPath.map(item => item.nodeId).slice(1)
                 }
-            }
-        },
-        handleNodeRetryClick (e) {
-            const id = e.target.dataset.id
-            this.isNodeInfoPanelShow = true
-            this.nodeInfoType = 'retryNode'
-            this.setNodeDetailConfig(id)
-            this.updateNodeActived(id, true)
-        },
-        handleNodeSkipClick (e) {
-            if (this.pending.skip) return
-            const id = e.target.dataset.id
-            const nodeActivities = this.pipelineData.activities[id]
-            const data = {
-                instance_id: this.instance_id,
-                node_id: id
-            }
-            const tooltipDom = e.target.parentNode.parentNode.parentNode
-            this.nodeTaskSkip(tooltipDom, data)
-        },
-        handleNodeModifyTimeClick (e) {
-            const id = e.target.dataset.id
-            this.isNodeInfoPanelShow = true
-            this.nodeInfoType = 'modifyTime'
-            this.setNodeDetailConfig(id)
-            this.updateNodeActived(id, true)
-        },
-        handleGatewaySelectClick (e) {
-            const id = e.target.dataset.id
-            const nodeGateway = this.pipelineData.gateways[id]
-            const branches = []
-            for (let item in nodeGateway.conditions) {
-                branches.push({
-                    id: item,
+                this.nodeDetailConfig = {
+                    component_code: nodeActivities.component.code,
+                    node_id: nodeActivities.id,
+                    instance_id: this.instance_id,
+                    subprocess_stack: JSON.stringify(subprocessStack)
+                }
+            },
+            // 节点 tooltip 操作
+            handleNodeHoverClick (e) {
+                const classList = e.target.classList
+                if (!classList) return
+                if (classList.contains('retry-btn')) {
+                    this.handleNodeRetryClick(e)
+                } else if (classList.contains('skip-btn')) {
+                    this.handleNodeSkipClick(e)
+                } else if (classList.contains('modify-time-btn')) {
+                    this.handleNodeModifyTimeClick(e)
+                } else if (classList.contains('gateway-select-btn')) {
+                    this.handleGatewaySelectClick(e)
+                } else if (classList.contains('pause-resume-btn')) {
+                    this.handlePauseResumeClick(e)
+                } else if (classList.contains('subflow-pause-btn')) {
+                    this.handleSubflowPauseClick(e)
+                } else if (classList.contains('subflow-resume-btn')) {
+                    this.handleSubflowResumeClick(e)
+                }
+            },
+            handleNodeInfoPanelHide (e) {
+                if (e.target.classList[0] === 'operation-btn') {
+                    return
+                }
+                const classList = e.target.classList
+                const isTooltipBtn = classList.contains('tooltip-btn')
+                if (!this.isNodeInfoPanelShow || isTooltipBtn) return
+                const NodeInfoPanel = document.querySelector('.node-info-panel')
+                if (NodeInfoPanel) {
+                    if (!dom.nodeContains(NodeInfoPanel, e.target)) {
+                        this.isNodeInfoPanelShow = false
+                        this.nodeInfoType = ''
+                        this.updateNodeActived(this.nodeDetailConfig.node_id, false)
+                    }
+                }
+            },
+            handleNodeRetryClick (e) {
+                const id = e.target.dataset.id
+                this.isNodeInfoPanelShow = true
+                this.nodeInfoType = 'retryNode'
+                this.setNodeDetailConfig(id)
+                this.updateNodeActived(id, true)
+            },
+            handleNodeSkipClick (e) {
+                if (this.pending.skip) return
+                const id = e.target.dataset.id
+                const data = {
+                    instance_id: this.instance_id,
+                    node_id: id
+                }
+                const tooltipDom = e.target.parentNode.parentNode.parentNode
+                this.nodeTaskSkip(tooltipDom, data)
+            },
+            handleNodeModifyTimeClick (e) {
+                const id = e.target.dataset.id
+                this.isNodeInfoPanelShow = true
+                this.nodeInfoType = 'modifyTime'
+                this.setNodeDetailConfig(id)
+                this.updateNodeActived(id, true)
+            },
+            handleGatewaySelectClick (e) {
+                const id = e.target.dataset.id
+                const nodeGateway = this.pipelineData.gateways[id]
+                const branches = []
+                for (const item in nodeGateway.conditions) {
+                    branches.push({
+                        id: item,
+                        node_id: id,
+                        name: nodeGateway.conditions[item].evaluate
+                    })
+                }
+                this.gatewayBranches = branches
+                this.isGatewaySelectDialogShow = true
+            },
+            handlePauseResumeClick (e) {
+                if (this.pending.parseNodeResume) return
+                const id = e.target.dataset.id
+                const data = {
+                    instance_id: this.instance_id,
                     node_id: id,
-                    name: nodeGateway.conditions[item].evaluate
+                    data: JSON.stringify({ callback: 'resume' })
+                }
+                this.nodeResume(data)
+            },
+            handleSubflowPauseClick (e) {
+                if (this.pending.subflowPause) return
+                const id = e.target.dataset.id
+                this.taskPause(true, id)
+            },
+            handleSubflowResumeClick (e) {
+                if (this.pending.subflowResume) return
+                const id = e.target.dataset.id
+                this.taskResume(true, id)
+            },
+            // 设置画布数据，更新页面
+            setCanvasData () {
+                this.$nextTick(() => {
+                    this.nodeSwitching = false
                 })
-            }
-            this.gatewayBranches = branches
-            this.isGatewaySelectDialogShow = true
-        },
-        handlePauseResumeClick (e) {
-            if (this.pending.parseNodeResume) return
-            const id = e.target.dataset.id
-            const nodeActivities = this.pipelineData.activities[id]
-            const data = {
-                instance_id: this.instance_id,
-                node_id: id,
-                data: JSON.stringify({callback: 'resume'})
-            }
-            this.nodeResume(data)
-        },
-        handleSubflowPauseClick (e) {
-            if (this.pending.subflowPause) return
-            const id = e.target.dataset.id
-            this.taskPause(true, id)
-        },
-        handleSubflowResumeClick (e) {
-            if (this.pending.subflowResume) return
-            const id = e.target.dataset.id
-            this.taskResume(true, id)
-        },
-        // 设置画布数据，更新页面
-        setCanvasData () {
-            this.$nextTick(()=>{
-                this.nodeSwitching = false
-            })
-        },
-        getBtnClickAble (type) {
-            if (this.operateLoading) {
-                // loading过程不允许点击
-                return false
-            }
-            switch (type) {
-                case 'execute':
-                    return this.state === 'CREATED' && this.isTopTask
-                    break
-                case 'pause':
-                    return this.state === 'RUNNING'
-                    break
-                case 'resume':
-                    return this.state === 'SUSPENDED'
-                    break
-                case 'revoke':
-                    return this.isTopTask &&
-                        (this.state === 'RUNNING' ||
-                        this.state === 'SUSPENDED' ||
-                        this.state === 'NODE_SUSPENDED' ||
-                        this.state === 'FAILED')
-                    break
-                default:
-                    break
-            }
-        },
-        getOrderedTree (data) {
-            const fstLine = data.start_event.outgoing
-            const orderedData = this.retrieveLines(data, fstLine)
-            return orderedData
-        },
-        retrieveLines (data, line) {
-            let nodes = []
-            const {start_event, end_event, flows, activities, gateways} = data
-            const curNode = data.flows[line].target
-            const activityNode = activities[curNode]
-            if (activityNode) {
-                const node = Object.assign({}, activityNode)
-                if (node.pipeline) {
-                    node.children = this.getOrderedTree(node.pipeline)
+            },
+            getBtnClickAble (type) {
+                if (this.operateLoading) {
+                    // loading过程不允许点击
+                    return false
+                }
+                switch (type) {
+                    case 'execute':
+                        return this.state === 'CREATED' && this.isTopTask
+                    case 'pause':
+                        return this.state === 'RUNNING'
+                    case 'resume':
+                        return this.state === 'SUSPENDED'
+                    case 'revoke':
+                        return this.isTopTask
+                            && (this.state === 'RUNNING'
+                            || this.state === 'SUSPENDED'
+                            || this.state === 'NODE_SUSPENDED'
+                            || this.state === 'FAILED')
+                    default:
+                        break
                 }
-                nodes.push(node)
-                nodes = nodes.concat(this.retrieveLines(data, node.outgoing))
-            } else {
-                const gatewayNode = gateways[curNode]
-                if (gatewayNode) {
-                    const gatewayOutLine = gatewayNode.outgoing
-                    if (Array.isArray(gatewayOutLine)) {
-                        const gatewayLinkedNodes = []
-                        gatewayOutLine.forEach(line => {
-                            const linkedNode = activities[flows[line].target]
-                            if (linkedNode) {
-                                if (linkedNode.pipeline) {
-                                    linkedNode.children = this.getOrderedTree(linkedNode.pipeline)
+            },
+            getOrderedTree (data) {
+                const fstLine = data.start_event.outgoing
+                const orderedData = this.retrieveLines(data, fstLine)
+                return orderedData
+            },
+            retrieveLines (data, line) {
+                let nodes = []
+                const { flows, activities, gateways } = data
+                const curNode = data.flows[line].target
+                const activityNode = activities[curNode]
+                if (activityNode) {
+                    const node = Object.assign({}, activityNode)
+                    if (node.pipeline) {
+                        node.children = this.getOrderedTree(node.pipeline)
+                    }
+                    nodes.push(node)
+                    nodes = nodes.concat(this.retrieveLines(data, node.outgoing))
+                } else {
+                    const gatewayNode = gateways[curNode]
+                    if (gatewayNode) {
+                        const gatewayOutLine = gatewayNode.outgoing
+                        if (Array.isArray(gatewayOutLine)) {
+                            const gatewayLinkedNodes = []
+                            gatewayOutLine.forEach(line => {
+                                const linkedNode = activities[flows[line].target]
+                                if (linkedNode) {
+                                    if (linkedNode.pipeline) {
+                                        linkedNode.children = this.getOrderedTree(linkedNode.pipeline)
+                                    }
+                                    gatewayLinkedNodes.push(linkedNode)
+                                    nodes.push(linkedNode)
+                                } else {
+                                    nodes = nodes.concat(this.retrieveLines(data, line))
                                 }
-                                gatewayLinkedNodes.push(linkedNode)
-                                nodes.push(linkedNode)
-                            } else {
-                                nodes = nodes.concat(this.retrieveLines(data, line))
-                            }
-                        })
-                        gatewayLinkedNodes.forEach(node => {
-                            nodes = nodes.concat(this.retrieveLines(data, node.outgoing))
-                        })
+                            })
+                            gatewayLinkedNodes.forEach(node => {
+                                nodes = nodes.concat(this.retrieveLines(data, node.outgoing))
+                            })
+                        }
                     }
                 }
-            }
-            return nodes
-        },
-        destroyTooltipInstance (id) {
-            if (this.nodeTooltipInstance[id]) {
-                this.nodeTooltipInstance[id].dispose()
-                delete this.nodeTooltipInstance[id]
-            }
-        },
-        clearTooltipInstance () {
-            Object.keys(this.nodeTooltipInstance).forEach(item => {
-                this.destroyTooltipInstance(item)
-            })
-        },
-        updateNodeActived (id, isActived) {
-            this.$refs.pipelineCanvas.onUpdateNodeInfo(id, { isActived })
-        },
-        // 查看参数、修改参数
-        onTaskParamsClick (type) {
-            this.nodeDetailConfig = {}
-            if (this.nodeInfoType === type) {
-                this.isNodeInfoPanelShow = false
-                this.nodeInfoType = ''
-            } else {
-                this.isNodeInfoPanelShow = true
-                this.nodeInfoType = type
-            }
-        },
-        onToggleNodeInfoPanel () {
-            this.isNodeInfoPanelShow = false
-            this.nodeInfoType = ''
-            this.updateNodeActived(this.nodeDetailConfig.node_id, false)
-        },
-        onOperationClick (operation) {
-            if (this.operateLoading) {
-                return
-            }
-            const type = operation.type
-            if (!this.getBtnClickAble(type) || this.pending.task)  return
-            if (type === 'revoke') {
-                this.isRevokeDialogShow = true
-                return
-            }
-            this.pending.task = true
-            this.activeOperation = this.activeOperation ? '' : type
-            const actionType = 'task' + type.charAt(0).toUpperCase() + type.slice(1)
-            this[actionType]()
-        },
-        onNodeClick (id) {
-            const node = this.canvasData.locations.filter(item => item.id === id)[0]
-            if (node.type === 'tasknode') {
-                this.handleSingleNodeClick(id, 'singleAtom')
-            } else if (node.type === 'subflow') {
-                this.handleSubflowAtomClick(id)
-            } else {
-                this.handleSingleNodeClick(id, 'controlNode')
-            }
-        },
-        handleSingleNodeClick (id, type) {
-            const nodeState =  this.instanceStatus.children && this.instanceStatus.children[id]
-            const nodeActivities = this.pipelineData.activities[id]
-            const componentCode = type === 'singleAtom' ? nodeActivities.component.code : ''
-            let isPanelShow = false
-            if (nodeState) {
-                if (type === 'singleAtom') {
-                    // 标准插件节点执行中、完成、失败状态，点击展开详情
-                    isPanelShow = ['RUNNING', 'FINISHED', 'FAILED'].indexOf(nodeState.state) > -1
+                return nodes
+            },
+            destroyTooltipInstance (id) {
+                if (this.nodeTooltipInstance[id]) {
+                    this.nodeTooltipInstance[id].dispose()
+                    delete this.nodeTooltipInstance[id]
+                }
+            },
+            clearTooltipInstance () {
+                Object.keys(this.nodeTooltipInstance).forEach(item => {
+                    this.destroyTooltipInstance(item)
+                })
+            },
+            updateNodeActived (id, isActived) {
+                this.$refs.pipelineCanvas.onUpdateNodeInfo(id, { isActived })
+            },
+            // 查看参数、修改参数
+            onTaskParamsClick (type) {
+                this.nodeDetailConfig = {}
+                if (this.nodeInfoType === type) {
+                    this.isNodeInfoPanelShow = false
+                    this.nodeInfoType = ''
                 } else {
-                    // 控制节点失败时点击展开详情
-                    isPanelShow = nodeState.state === 'FAILED'
+                    this.isNodeInfoPanelShow = true
+                    this.nodeInfoType = type
                 }
-            }
-            if (isPanelShow) {
-                let subprocessStack = []
-                if (this.selectedFlowPath.length > 1){
-                    subprocessStack = this.selectedFlowPath.map(item => item.nodeId).slice(1)
+            },
+            onToggleNodeInfoPanel () {
+                this.isNodeInfoPanelShow = false
+                this.nodeInfoType = ''
+                this.updateNodeActived(this.nodeDetailConfig.node_id, false)
+            },
+            onOperationClick (operation) {
+                if (this.operateLoading) {
+                    return
                 }
-                this.isNodeInfoPanelShow = true
-                this.nodeInfoType = 'executeInfo'
-                if (this.nodeDetailConfig.node_id) {
-                    this.updateNodeActived(this.nodeDetailConfig.node_id, false)
+                const type = operation.type
+                if (!this.getBtnClickAble(type) || this.pending.task) return
+                if (type === 'revoke') {
+                    this.isRevokeDialogShow = true
+                    return
                 }
-                this.nodeDetailConfig = {
-                    component_code: componentCode,
-                    node_id: id,
-                    instance_id: this.instance_id,
-                    subprocess_stack: JSON.stringify(subprocessStack)
+                this.pending.task = true
+                this.activeOperation = this.activeOperation ? '' : type
+                const actionType = 'task' + type.charAt(0).toUpperCase() + type.slice(1)
+                this[actionType]()
+            },
+            onNodeClick (id) {
+                const node = this.canvasData.locations.filter(item => item.id === id)[0]
+                if (node.type === 'tasknode') {
+                    this.handleSingleNodeClick(id, 'singleAtom')
+                } else if (node.type === 'subflow') {
+                    this.handleSubflowAtomClick(id)
+                } else {
+                    this.handleSingleNodeClick(id, 'controlNode')
                 }
-                this.updateNodeActived(id, true)
-            }
-        },
-        handleSubflowAtomClick (id) {
-            this.cancelTaskStatusTimer()
-            this.clearTooltipInstance()
-            const nodeActivities = this.pipelineData.activities[id]
-            this.nodeSwitching = true
-            this.selectedFlowPath.push({
-                id: nodeActivities.id,
-                name: nodeActivities.name,
-                nodeId: nodeActivities.id,
-                type: 'SubProcess'
-            })
-            this.pipelineData = this.pipelineData.activities[id].pipeline
-            this.updateTaskStatus(id)
-        },
-        // 面包屑点击
-        onSelectSubflow (id) {
-            let nodeIndex = 0
-            this.selectedFlowPath.some((item, index) => {
-                if (id === item.id) {
-                    nodeIndex = index
-                    return true
+            },
+            handleSingleNodeClick (id, type) {
+                const nodeState = this.instanceStatus.children && this.instanceStatus.children[id]
+                const nodeActivities = this.pipelineData.activities[id]
+                const componentCode = type === 'singleAtom' ? nodeActivities.component.code : ''
+                let isPanelShow = false
+                if (nodeState) {
+                    if (type === 'singleAtom') {
+                        // 标准插件节点执行中、完成、失败状态，点击展开详情
+                        isPanelShow = ['RUNNING', 'FINISHED', 'FAILED'].indexOf(nodeState.state) > -1
+                    } else {
+                        // 控制节点失败时点击展开详情
+                        isPanelShow = nodeState.state === 'FAILED'
+                    }
                 }
-            })
-            if (nodeIndex === (this.selectedFlowPath.length - 1)) return // the last level node
-            this.nodeSwitching = true
-            this.selectedFlowPath.splice(nodeIndex + 1)
-            if (nodeIndex === 0) {
-                this.pipelineData = this.completePipelineData
-            } else {
-                const pathList = this.selectedFlowPath.slice(1)
-                let nodeActivities = this.completePipelineData.activities
-                pathList.forEach((item, index) => {
-                    nodeActivities = index ? nodeActivities.pipeline.activities[item.id] : nodeActivities[item.id]
-                })
-                this.pipelineData = nodeActivities.pipeline
-            }
-            this.isNodeInfoPanelShow = false
-            this.nodeDetailConfig = {}
-            this.clearTooltipInstance()
-            this.cancelTaskStatusTimer()
-            this.updateTaskStatus(id)
-        },
-        onClickTreeNode (nodeHeirarchy, nodeType) {
-            let nodeActivities
-            const nodePath = [{
-                id: this.instance_id,
-                name: this.instanceName,
-                nodeId: this.completePipelineData.id
-            }]
-            let heirarchyList = nodeHeirarchy.split('.').splice(1)
-            if (heirarchyList.length) { // not root node
-                nodeActivities = this.completePipelineData.activities
-                heirarchyList.forEach((key, index) => {
-                    nodeActivities = index ? nodeActivities.pipeline.activities[key] : nodeActivities[key]
-                    nodePath.push({
-                        id: nodeActivities.id,
-                        name: nodeActivities.name,
-                        nodeId: nodeActivities.id,
-                        type: nodeActivities.type
-                    })
-                })
-                this.selectedFlowPath = nodePath
-                if (nodeActivities.type === 'SubProcess') { // click subprocess node
-                    this.nodeSwitching = true
-                    this.pipelineData = nodeActivities.pipeline
-                    this.cancelTaskStatusTimer()
-                    this.updateTaskStatus(nodeActivities.id)
-                    this.nodeDetailConfig = {}
-                } else { // click single task node
+                if (isPanelShow) {
                     let subprocessStack = []
-                    if (this.selectedFlowPath.length > 1){
-                        subprocessStack = this.selectedFlowPath.map(item => item.nodeId).slice(1, -1)
+                    if (this.selectedFlowPath.length > 1) {
+                        subprocessStack = this.selectedFlowPath.map(item => item.nodeId).slice(1)
+                    }
+                    this.isNodeInfoPanelShow = true
+                    this.nodeInfoType = 'executeInfo'
+                    if (this.nodeDetailConfig.node_id) {
+                        this.updateNodeActived(this.nodeDetailConfig.node_id, false)
                     }
                     this.nodeDetailConfig = {
-                        component_code: nodeActivities.component.code,
-                        node_id: nodeActivities.id,
+                        component_code: componentCode,
+                        node_id: id,
                         instance_id: this.instance_id,
                         subprocess_stack: JSON.stringify(subprocessStack)
                     }
+                    this.updateNodeActived(id, true)
                 }
-            } else {
-                nodeActivities = this.completePipelineData
-                this.nodeSwitching = true
-                this.pipelineData = nodeActivities
+            },
+            handleSubflowAtomClick (id) {
                 this.cancelTaskStatusTimer()
-                this.updateTaskStatus(this.instance_id)
-                this.selectedFlowPath = nodePath
+                this.clearTooltipInstance()
+                const nodeActivities = this.pipelineData.activities[id]
+                this.nodeSwitching = true
+                this.selectedFlowPath.push({
+                    id: nodeActivities.id,
+                    name: nodeActivities.name,
+                    nodeId: nodeActivities.id,
+                    type: 'SubProcess'
+                })
+                this.pipelineData = this.pipelineData.activities[id].pipeline
+                this.updateTaskStatus(id)
+            },
+            // 面包屑点击
+            onSelectSubflow (id) {
+                let nodeIndex = 0
+                this.selectedFlowPath.some((item, index) => {
+                    if (id === item.id) {
+                        nodeIndex = index
+                        return true
+                    }
+                })
+                if (nodeIndex === (this.selectedFlowPath.length - 1)) return // the last level node
+                this.nodeSwitching = true
+                this.selectedFlowPath.splice(nodeIndex + 1)
+                if (nodeIndex === 0) {
+                    this.pipelineData = this.completePipelineData
+                } else {
+                    const pathList = this.selectedFlowPath.slice(1)
+                    let nodeActivities = this.completePipelineData.activities
+                    pathList.forEach((item, index) => {
+                        nodeActivities = index ? nodeActivities.pipeline.activities[item.id] : nodeActivities[item.id]
+                    })
+                    this.pipelineData = nodeActivities.pipeline
+                }
+                this.isNodeInfoPanelShow = false
                 this.nodeDetailConfig = {}
+                this.clearTooltipInstance()
+                this.cancelTaskStatusTimer()
+                this.updateTaskStatus(id)
+            },
+            onClickTreeNode (nodeHeirarchy, nodeType) {
+                let nodeActivities
+                const nodePath = [{
+                    id: this.instance_id,
+                    name: this.instanceName,
+                    nodeId: this.completePipelineData.id
+                }]
+                const heirarchyList = nodeHeirarchy.split('.').splice(1)
+                if (heirarchyList.length) { // not root node
+                    nodeActivities = this.completePipelineData.activities
+                    heirarchyList.forEach((key, index) => {
+                        nodeActivities = index ? nodeActivities.pipeline.activities[key] : nodeActivities[key]
+                        nodePath.push({
+                            id: nodeActivities.id,
+                            name: nodeActivities.name,
+                            nodeId: nodeActivities.id,
+                            type: nodeActivities.type
+                        })
+                    })
+                    this.selectedFlowPath = nodePath
+                    if (nodeActivities.type === 'SubProcess') { // click subprocess node
+                        this.nodeSwitching = true
+                        this.pipelineData = nodeActivities.pipeline
+                        this.cancelTaskStatusTimer()
+                        this.updateTaskStatus(nodeActivities.id)
+                        this.nodeDetailConfig = {}
+                    } else { // click single task node
+                        let subprocessStack = []
+                        if (this.selectedFlowPath.length > 1) {
+                            subprocessStack = this.selectedFlowPath.map(item => item.nodeId).slice(1, -1)
+                        }
+                        this.nodeDetailConfig = {
+                            component_code: nodeActivities.component.code,
+                            node_id: nodeActivities.id,
+                            instance_id: this.instance_id,
+                            subprocess_stack: JSON.stringify(subprocessStack)
+                        }
+                    }
+                } else {
+                    nodeActivities = this.completePipelineData
+                    this.nodeSwitching = true
+                    this.pipelineData = nodeActivities
+                    this.cancelTaskStatusTimer()
+                    this.updateTaskStatus(this.instance_id)
+                    this.selectedFlowPath = nodePath
+                    this.nodeDetailConfig = {}
+                }
+            },
+            onRetrySuccess (id) {
+                this.isNodeInfoPanelShow = false
+                this.destroyTooltipInstance(id)
+                this.setTaskStatusTimer()
+                this.updateNodeActived(id, false)
+            },
+            onRetryCancel (id) {
+                this.isNodeInfoPanelShow = false
+                this.nodeInfoType = ''
+                this.updateNodeActived(id, false)
+            },
+            onModifyTimeSuccess (id) {
+                this.isNodeInfoPanelShow = false
+                this.destroyTooltipInstance(id)
+                this.setTaskStatusTimer()
+                this.updateNodeActived(id, false)
+            },
+            onModifyTimeCancel (id) {
+                this.isNodeInfoPanelShow = false
+                this.nodeInfoType = ''
+                this.updateNodeActived(id, false)
+            },
+            onConfirmGatewaySelect (selected) {
+                const data = {
+                    flow_id: selected.id,
+                    node_id: selected.node_id,
+                    instance_id: this.instance_id
+                }
+                this.isGatewaySelectDialogShow = false
+                this.selectGatewayBranch(data)
+            },
+            onCancelGatewaySelect () {
+                this.isGatewaySelectDialogShow = false
+            },
+            onConfirmRevokeTask () {
+                this.isRevokeDialogShow = false
+                this.taskRevoke()
+            },
+            onCancelRevokeTask () {
+                this.isRevokeDialogShow = false
+            },
+            unclickableOperation (type) {
+                // 失败时不允许点击暂停按钮，创建是不允许点击撤销按钮，操作执行过程不允许点击
+                return (this.state === 'FAILED' && type !== 'revoke') || (this.state === 'CREATED' && type === 'revoke') || this.operateLoading || !this.isTopTask
             }
-        },
-        onRetrySuccess (id) {
-            this.isNodeInfoPanelShow = false
-            this.destroyTooltipInstance(id)
-            this.setTaskStatusTimer()
-            this.updateNodeActived(id, false)
-        },
-        onRetryCancel (id) {
-            this.isNodeInfoPanelShow = false
-            this.nodeInfoType = ''
-            this.updateNodeActived(id, false)
-        },
-        onModifyTimeSuccess (id) {
-            this.isNodeInfoPanelShow = false
-            this.destroyTooltipInstance(id)
-            this.setTaskStatusTimer()
-            this.updateNodeActived(id, false)
-        },
-        onModifyTimeCancel (id) {
-            this.isNodeInfoPanelShow = false
-            this.nodeInfoType = ''
-            this.updateNodeActived(id, false)
-        },
-        onConfirmGatewaySelect (selected) {
-            const data = {
-                flow_id: selected.id,
-                node_id: selected.node_id,
-                instance_id: this.instance_id
-            }
-            this.isGatewaySelectDialogShow = false
-            this.selectGatewayBranch(data)
-        },
-        onCancelGatewaySelect () {
-            this.isGatewaySelectDialogShow = false
-        },
-        onConfirmRevokeTask () {
-            this.isRevokeDialogShow = false
-            this.taskRevoke()
-        },
-        onCancelRevokeTask () {
-            this.isRevokeDialogShow = false
-        },
-        unclickableOperation (type) {
-            // 失败时不允许点击暂停按钮，创建是不允许点击撤销按钮，操作执行过程不允许点击
-            return this.state === 'FAILED' && type !== 'revoke' || this.state === 'CREATED' && type === 'revoke' || this.operateLoading || !this.isTopTask
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -1450,5 +1445,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/ViewParams.vue b/pipeline/blueflow/src/pages/task/TaskExecute/ViewParams.vue
index 620b822e61..18d51bf83e 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/ViewParams.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/ViewParams.vue
@@ -14,11 +14,11 @@
         <div class="select-node">
             <NodeTree
                 :data="nodeData"
-                :selectedFlowPath="selectedFlowPath"
+                :selected-flow-path="selectedFlowPath"
                 @onSelectNode="onSelectNode">
             </NodeTree>
         </div>
-        <div class="view-params" v-bkloading="{isLoading: loading, opacity: 1}">
+        <div class="view-params" v-bkloading="{ isLoading: loading, opacity: 1 }">
             <div class="params-panel" v-if="!isEmptyParams">
                 <h4 class="panel-title">{{ i18n.atom_params }}</h4>
                 <div class="params-content">
@@ -26,7 +26,7 @@
                         v-if="!loading"
                         :key="currentNode"
                         :scheme="renderConfig"
-                        :formOption="renderOption"
+                        :form-option="renderOption"
                         v-model="renderData">
                     </RenderForm>
                 </div>
@@ -36,125 +36,125 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import NoData from '@/components/common/base/NoData.vue'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-import NodeTree from './NodeTree.vue'
-export default {
-    name: 'ViewParams',
-    components: {
-        NodeTree,
-        RenderForm,
-        NoData
-    },
-    props: [
-        'nodeData',
-        'selectedFlowPath',
-        'nodeDetailConfig'
-    ],
-    data () {
-        return {
-            i18n: {
-                atom_params: gettext("查看标准插件参数")
-            },
-            loading: true,
-            bkMessageInstance: null,
-            renderOption: {
-                showGroup: false,
-                showLabel: true,
-                showHook: false,
-                formEdit: false,
-                formMode: false
-            },
-            renderConfig: [],
-            renderData: {}
-        }
-    },
-    computed: {
-        ...mapState({
-            'atomFormConfig': state => state.atomForm.config
-        }),
-        isEmptyParams () {
-            return !this.renderConfig || this.renderConfig.length === 0
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    import NodeTree from './NodeTree.vue'
+    export default {
+        name: 'ViewParams',
+        components: {
+            NodeTree,
+            RenderForm,
+            NoData
         },
-        isSubflowNode () {
-            return !this.nodeDetailConfig.component_code
+        props: [
+            'nodeData',
+            'selectedFlowPath',
+            'nodeDetailConfig'
+        ],
+        data () {
+            return {
+                i18n: {
+                    atom_params: gettext('查看标准插件参数')
+                },
+                loading: true,
+                bkMessageInstance: null,
+                renderOption: {
+                    showGroup: false,
+                    showLabel: true,
+                    showHook: false,
+                    formEdit: false,
+                    formMode: false
+                },
+                renderConfig: [],
+                renderData: {}
+            }
         },
-        noDataMessage () {
-            return this.isSubflowNode ? gettext('请点击标准插件节点查看参数') : gettext('无数据')
+        computed: {
+            ...mapState({
+                'atomFormConfig': state => state.atomForm.config
+            }),
+            isEmptyParams () {
+                return !this.renderConfig || this.renderConfig.length === 0
+            },
+            isSubflowNode () {
+                return !this.nodeDetailConfig.component_code
+            },
+            noDataMessage () {
+                return this.isSubflowNode ? gettext('请点击标准插件节点查看参数') : gettext('无数据')
+            },
+            currentNode () {
+                return this.selectedFlowPath.slice(-1)[0].id
+            }
         },
-        currentNode () {
-            return this.selectedFlowPath.slice(-1)[0].id
-        }
-    },
-    watch: {
-        nodeDetailConfig (val) {
-            this.upDataParamsData(val)
-        }
-    },
-    mounted () {
-        this.upDataParamsData(this.nodeDetailConfig)
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getNodeActInfo',
-            'instanceRetry'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig'
-        ]),
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        async loadNodeInfo () {
-            this.loading = true
-            try {
-                this.nodeInfo = await this.getNodeActInfo(this.nodeDetailConfig)
-                this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
-                if (this.nodeInfo.result) {
-                    for ( let key in this.nodeInfo.data.inputs) {
-                        this.$set(this.renderData, key, this.nodeInfo.data.inputs[key])
-                    }
-                } else {
-                    errorHandler(this.nodeInfo, this)
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.loading = false
+        watch: {
+            nodeDetailConfig (val) {
+                this.upDataParamsData(val)
             }
         },
-        async getNodeConfig (type) {
-            if (this.atomFormConfig[type]) {
-                return this.atomFormConfig[type]
-            } else {
+        mounted () {
+            this.upDataParamsData(this.nodeDetailConfig)
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getNodeActInfo',
+                'instanceRetry'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig'
+            ]),
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            async loadNodeInfo () {
+                this.loading = true
                 try {
-                    await this.loadAtomConfig({atomType: type})
-                    this.setAtomConfig({atomType: type, configData: $.atoms[type]})
-                    return this.atomFormConfig[type]
+                    this.nodeInfo = await this.getNodeActInfo(this.nodeDetailConfig)
+                    this.renderConfig = await this.getNodeConfig(this.nodeDetailConfig.component_code)
+                    if (this.nodeInfo.result) {
+                        for (const key in this.nodeInfo.data.inputs) {
+                            this.$set(this.renderData, key, this.nodeInfo.data.inputs[key])
+                        }
+                    } else {
+                        errorHandler(this.nodeInfo, this)
+                    }
                 } catch (e) {
                     errorHandler(e, this)
-                }
-            }
-        },
-        upDataParamsData (config) {
-            if (config.component_code) {
-                this.loadNodeInfo()
-            } else {
-                this.$nextTick(()=>{
+                } finally {
                     this.loading = false
-                    this.renderConfig = []
-                    this.renderData = {}
-                })
+                }
+            },
+            async getNodeConfig (type) {
+                if (this.atomFormConfig[type]) {
+                    return this.atomFormConfig[type]
+                } else {
+                    try {
+                        await this.loadAtomConfig({ atomType: type })
+                        this.setAtomConfig({ atomType: type, configData: $.atoms[type] })
+                        return this.atomFormConfig[type]
+                    } catch (e) {
+                        errorHandler(e, this)
+                    }
+                }
+            },
+            upDataParamsData (config) {
+                if (config.component_code) {
+                    this.loadNodeInfo()
+                } else {
+                    this.$nextTick(() => {
+                        this.loading = false
+                        this.renderConfig = []
+                        this.renderData = {}
+                    })
+                }
+            },
+            onSelectNode (nodeHeirarchy, isClick, nodeType) {
+                this.$emit('onClickTreeNode', nodeHeirarchy, isClick, nodeType)
             }
-        },
-        onSelectNode (nodeHeirarchy, isClick, nodeType) {
-            this.$emit('onClickTreeNode', nodeHeirarchy, isClick, nodeType)
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -194,4 +194,3 @@ export default {
     }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/index.vue b/pipeline/blueflow/src/pages/task/TaskExecute/index.vue
index 9ca75c0fc3..8d1bb96047 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/index.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/index.vue
@@ -10,121 +10,121 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div :class="['task-execute-container', {'task-function-container': currentStep === 'functionalization'}]"
+    <div :class="['task-execute-container', { 'task-function-container': currentStep === 'functionalization' }]"
         v-if="!exception.code"
-        v-bkloading="{isLoading: loading, opacity: 1}">
+        v-bkloading="{ isLoading: loading, opacity: 1 }">
         <TaskStep
             :list="stepList"
-            :currentStep="currentStep"
-            :allFinished="isAllStepsFinished">
+            :current-step="currentStep"
+            :all-finished="isAllStepsFinished">
         </TaskStep>
         <TaskFunctionalization
             v-if="isFunctional && !loading"
             :cc_id="cc_id"
             :instance_id="instance_id"
-            :instanceName="instanceName"
-            :instanceFlow="instanceFlow">
+            :instance-name="instanceName"
+            :instance-flow="instanceFlow">
         </TaskFunctionalization>
         <TaskOperation
             v-if="!isFunctional && !loading"
             :cc_id="cc_id"
             :instance_id="instance_id"
-            :instanceName="instanceName"
-            :instanceFlow="instanceFlow"
+            :instance-name="instanceName"
+            :instance-flow="instanceFlow"
             @taskStatusLoadChange="taskStatusLoadChange">
         </TaskOperation>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import TaskStep from '../TaskStep.vue'
-import TaskOperation from './TaskOperation.vue'
-import TaskFunctionalization from './TaskFunctionalization.vue'
-const STEP_DICT = [
-    {
-        step: 'selectnode',
-        name: gettext('节点选择')
-    },
-    {
-        step: 'paramfill',
-        name: gettext('参数填写')
-    },
-    {
-        step: 'taskexecute',
-        name: gettext('任务执行')
-    }
-]
-export default {
-    name: 'TaskExecute',
-    components: {
-        TaskStep,
-        TaskOperation,
-        TaskFunctionalization
-    },
-    props: ['cc_id', 'instance_id'],
-    data () {
-        return {
-            taskDataLoading: true,
-            taskStatusLoading: true,
-            bkMessageInstance: null,
-            exception: {},
-            stepList: STEP_DICT,
-            currentStep: 'taskexecute',
-            isFunctional: false,
-            isAllStepsFinished: false,
-            instanceName: '',
-            instanceFlow: ''
-        }
-    },
-    computed: {
-        loading () {
-            return this.isFunctional ? this.taskDataLoading : (this.taskDataLoading && this.taskStatusLoading)
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import TaskStep from '../TaskStep.vue'
+    import TaskOperation from './TaskOperation.vue'
+    import TaskFunctionalization from './TaskFunctionalization.vue'
+    const STEP_DICT = [
+        {
+            step: 'selectnode',
+            name: gettext('节点选择')
+        },
+        {
+            step: 'paramfill',
+            name: gettext('参数填写')
+        },
+        {
+            step: 'taskexecute',
+            name: gettext('任务执行')
         }
-    },
-    created () {
-        this.getTaskData()
-    },
-    methods: {
-        ...mapActions('task/', [
-            'getTaskInstanceData'
-        ]),
-        appendFunctionalization () {
-            const isHasFunctionalization = this.stepList.some(item => item.step === 'functionalization')
-            if (!isHasFunctionalization) {
-                this.stepList.splice(2, 0, {
-                    step: 'functionalization',
-                    name: gettext('职能化认领')
-                })
+    ]
+    export default {
+        name: 'TaskExecute',
+        components: {
+            TaskStep,
+            TaskOperation,
+            TaskFunctionalization
+        },
+        props: ['cc_id', 'instance_id'],
+        data () {
+            return {
+                taskDataLoading: true,
+                taskStatusLoading: true,
+                bkMessageInstance: null,
+                exception: {},
+                stepList: STEP_DICT,
+                currentStep: 'taskexecute',
+                isFunctional: false,
+                isAllStepsFinished: false,
+                instanceName: '',
+                instanceFlow: ''
             }
         },
-        async getTaskData () {
-            try {
-                const instanceData = await this.getTaskInstanceData(this.instance_id)
-                if (instanceData.flow_type === 'common_func') {
-                    this.appendFunctionalization()
-                    if (instanceData.current_flow === 'func_claim') {
-                        this.isFunctional = true
-                        this.currentStep = 'functionalization'
-                    }
+        computed: {
+            loading () {
+                return this.isFunctional ? this.taskDataLoading : (this.taskDataLoading && this.taskStatusLoading)
+            }
+        },
+        created () {
+            this.getTaskData()
+        },
+        methods: {
+            ...mapActions('task/', [
+                'getTaskInstanceData'
+            ]),
+            appendFunctionalization () {
+                const isHasFunctionalization = this.stepList.some(item => item.step === 'functionalization')
+                if (!isHasFunctionalization) {
+                    this.stepList.splice(2, 0, {
+                        step: 'functionalization',
+                        name: gettext('职能化认领')
+                    })
                 }
-                this.instanceFlow = instanceData.pipeline_tree
-                this.instanceName = instanceData.name
-                if (instanceData.is_finished) {
-                    this.isAllStepsFinished = true
+            },
+            async getTaskData () {
+                try {
+                    const instanceData = await this.getTaskInstanceData(this.instance_id)
+                    if (instanceData.flow_type === 'common_func') {
+                        this.appendFunctionalization()
+                        if (instanceData.current_flow === 'func_claim') {
+                            this.isFunctional = true
+                            this.currentStep = 'functionalization'
+                        }
+                    }
+                    this.instanceFlow = instanceData.pipeline_tree
+                    this.instanceName = instanceData.name
+                    if (instanceData.is_finished) {
+                        this.isAllStepsFinished = true
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.taskDataLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.taskDataLoading = false
+            },
+            taskStatusLoadChange (status) {
+                this.taskStatusLoading = status
             }
-        },
-        taskStatusLoadChange (status) {
-            this.taskStatusLoading = status
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .task-execute-container {
diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/revokeDialog.vue b/pipeline/blueflow/src/pages/task/TaskExecute/revokeDialog.vue
index 1869b708f8..752c383b47 100644
--- a/pipeline/blueflow/src/pages/task/TaskExecute/revokeDialog.vue
+++ b/pipeline/blueflow/src/pages/task/TaskExecute/revokeDialog.vue
@@ -27,25 +27,25 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'revokeDialog',
-    props: ['isRevokeDialogShow'],
-    data () {
-        return {
-            i18n: {
-                revoke: gettext('是否撤销该任务？'),
-                title: gettext('任务撤销')
+    import '@/utils/i18n.js'
+    export default {
+        name: 'revokeDialog',
+        props: ['isRevokeDialogShow'],
+        data () {
+            return {
+                i18n: {
+                    revoke: gettext('是否撤销该任务？'),
+                    title: gettext('任务撤销')
+                }
             }
-        }
-    },
-    methods: {
-        onConfirm () {
-            this.$emit('onConfirmRevokeTask')
         },
-        onCancel () {
-            this.$emit('onCancelRevokeTask')
+        methods: {
+            onConfirm () {
+                this.$emit('onConfirmRevokeTask')
+            },
+            onCancel () {
+                this.$emit('onCancelRevokeTask')
+            }
         }
     }
-}
 </script>
diff --git a/pipeline/blueflow/src/pages/task/TaskList/TaskCloneDialog.vue b/pipeline/blueflow/src/pages/task/TaskList/TaskCloneDialog.vue
index 2368fd1351..a574d88e4d 100644
--- a/pipeline/blueflow/src/pages/task/TaskList/TaskCloneDialog.vue
+++ b/pipeline/blueflow/src/pages/task/TaskList/TaskCloneDialog.vue
@@ -20,7 +20,7 @@
         @confirm="onConfirm"
         @cancel="onCancel">
         <div slot="content">
-            <div class="clone-wrapper" v-bkloading="{isLoading: pending, opacity: 1}">
+            <div class="clone-wrapper" v-bkloading="{ isLoading: pending, opacity: 1 }">
                 <div class="common-form-item">
                     <label>{{ i18n.template }}</label>
                     <div class="common-form-content">
@@ -37,45 +37,45 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import '@/utils/i18n.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
 
-export default {
-    name: 'TaskCloneDialog',
-    components: {
-        BaseInput
-    },
-    props: ['isTaskCloneDialogShow', 'taskName', 'pending'],
-    data () {
-        return {
-            name: 'copy' + this.taskName.slice(0, STRING_LENGTH.TASK_NAME_MAX_LENGTH - 4),
-            taskNameRule: {
-                required: true,
-                max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            i18n: {
-                title: gettext('任务克隆'),
-                template: gettext('任务名称')
-            }
-        }
-    },
-    methods: {
-        onConfirm () {
-            this.$validator.validateAll().then(result => {
-                if (!result) {
-                    return
+    export default {
+        name: 'TaskCloneDialog',
+        components: {
+            BaseInput
+        },
+        props: ['isTaskCloneDialogShow', 'taskName', 'pending'],
+        data () {
+            return {
+                name: 'copy' + this.taskName.slice(0, STRING_LENGTH.TASK_NAME_MAX_LENGTH - 4),
+                taskNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.TASK_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                i18n: {
+                    title: gettext('任务克隆'),
+                    template: gettext('任务名称')
                 }
-                this.name = this.name.trim()
-                this.$emit('confirm', this.name)
-            })
+            }
         },
-        onCancel () {
-            this.$emit('cancel')
+        methods: {
+            onConfirm () {
+                this.$validator.validateAll().then(result => {
+                    if (!result) {
+                        return
+                    }
+                    this.name = this.name.trim()
+                    this.$emit('confirm', this.name)
+                })
+            },
+            onCancel () {
+                this.$emit('cancel')
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     .clone-wrapper {
@@ -91,4 +91,3 @@ export default {
         }
     }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/task/TaskList/index.vue b/pipeline/blueflow/src/pages/task/TaskList/index.vue
index eeaa37b7aa..5a8e68154a 100644
--- a/pipeline/blueflow/src/pages/task/TaskList/index.vue
+++ b/pipeline/blueflow/src/pages/task/TaskList/index.vue
@@ -15,7 +15,7 @@
             <BaseTitle :title="i18n.task_list"></BaseTitle>
             <BaseSearch
                 v-model="flowName"
-                :inputPlaceholader="i18n.taskNamePlaceholder"
+                :input-placeholader="i18n.taskNamePlaceholder"
                 @onShow="onAdvanceShow"
                 @input="onSearchInput">
             </BaseSearch>
@@ -65,15 +65,15 @@
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.creator}}</span>
-                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.executor}}</span>
-                            <input class="search-input" v-model="executor" :placeholder="i18n.executorPlaceholder"/>
+                            <input class="search-input" v-model="executor" :placeholder="i18n.executorPlaceholder" />
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.status}}</span>
-                                <bk-selector
+                            <bk-selector
                                 :placeholder="i18n.statusPlaceholder"
                                 :list="statusList"
                                 :selected.sync="statusSync"
@@ -91,7 +91,7 @@
                 </fieldset>
             </div>
             <div class="task-table-content">
-                <table v-bkloading="{isLoading: listLoading, opacity: 1}">
+                <table v-bkloading="{ isLoading: listLoading, opacity: 1 }">
                     <thead>
                         <tr>
                             <th class="task-id">ID</th>
@@ -133,7 +133,7 @@
                         </tr>
                         <tr v-if="!taskList || !taskList.length" class="empty-tr">
                             <td colspan="10">
-                                <div class="empty-data"><NoData/></div>
+                                <div class="empty-data"><NoData /></div>
                             </td>
                         </tr>
                     </tbody>
@@ -153,8 +153,8 @@
         <CopyrightFooter></CopyrightFooter>
         <TaskCloneDialog
             v-if="isTaskCloneDialogShow"
-            :isTaskCloneDialogShow="isTaskCloneDialogShow"
-            :taskName="theCloneTaskName"
+            :is-task-clone-dialog-show="isTaskCloneDialogShow"
+            :task-name="theCloneTaskName"
             :pending="pending.clone"
             @confirm="onCloneConfirm"
             @cancel="onCloneCancel">
@@ -169,395 +169,393 @@
             :is-show.sync="isDeleteDialogShow"
             @confirm="onDeleteConfirm"
             @cancel="onDeleteCancel">
-            <div slot="content" class="dialog-content" v-bkloading="{isLoading: pending.delete, opacity: 1}">
+            <div slot="content" class="dialog-content" v-bkloading="{ isLoading: pending.delete, opacity: 1 }">
                 {{i18n.deleleTip + '"' + theDeleteTaskName + '"?'}}
             </div>
         </bk-dialog>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import toolsUtils from '@/utils/tools.js'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import BaseTitle from '@/components/common/base/BaseTitle.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-import NoData from '@/components/common/base/NoData.vue'
-import moment from 'moment-timezone'
-import TaskCloneDialog from './TaskCloneDialog.vue'
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import toolsUtils from '@/utils/tools.js'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import BaseTitle from '@/components/common/base/BaseTitle.vue'
+    import BaseSearch from '@/components/common/base/BaseSearch.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    import moment from 'moment-timezone'
+    import TaskCloneDialog from './TaskCloneDialog.vue'
 
-export default {
-    name: 'TaskList',
-    components: {
-        CopyrightFooter,
-        BaseTitle,
-        BaseSearch,
-        NoData,
-        TaskCloneDialog
-    },
-    props: ['cc_id', 'common', 'create_method'],
-    data () {
-        return {
-            listLoading: true,
-            templateId: this.$route.query.template_id,
-            taskCategory: [],
-            activeTaskCategory: undefined, // 任务类型筛选
-            searchStr: '',
-            executeStatus: [], // 任务执行状态
-            currentPage: 1,
-            totalPage: 1,
-            countPerPage: 15,
-            totalCount: 0,
-            isDeleteDialogShow: false,
-            shapeShow: false,
-            isAdvancedSerachShow: false,
-            theDeleteTaskId: undefined,
-            theDeleteTaskName: '',
-            isTaskCloneDialogShow: false,
-            theCloneTaskName: '',
-            theCloneTaskId: undefined,
-            pending: {
-                delete: false,
-                clone: false
-            },
-            i18n: {
-                allCategory: gettext("全部"),
-                placeholder: gettext("请输入ID或任务名称"),
-                task_list: gettext("任务记录"),
-                task_name: gettext("任务名称"),
-                start_time: gettext("执行开始"),
-                finish_time: gettext("执行结束"),
-                task_type: gettext("任务分类"),
-                creator: gettext("创建人"),
-                executor: gettext("执行人"),
-                status: gettext("状态"),
-                operation: gettext("操作"),
-                clone: gettext("克隆"),
-                delete: gettext("删除"),
-                deleleTip: gettext("确认删除"),
-                total: gettext("共"),
-                item: gettext("条记录"),
-                comma: gettext("，"),
-                currentPageTip: gettext("当前第"),
-                page: gettext("页"),
-                taskNamePlaceholder: gettext('请输入任务名称'),
-                taskTypePlaceholder: gettext('请选择分类'),
-                creatorPlaceholder: gettext('请输入创建人'),
-                executorPlaceholder: gettext('请输入执行人'),
-                statusPlaceholder: gettext('请选择状态'),
-                query: gettext('搜索'),
-                reset: gettext('清空'),
-                status: gettext('状态'),
-                createMethod: gettext('创建方式'),
-                createMethodApp: gettext('应用内'),
-                createMethodAppmaker: gettext('轻应用'),
-                createMethodPlaceholder: gettext('请选择创建方式'),
-                advanceSearch: gettext('高级搜索'),
-                executing: gettext('执行中'),
-                pauseState: gettext('暂停')
-            },
-            executeStartTime: undefined,
-            executeEndTime: undefined,
-            flowName: undefined,
-            category: undefined,
-            creator: undefined,
-            executor: undefined,
-            taskSync: 0,
-            statusList: [
-                {'id': 'nonExecution', 'name': gettext('未执行')},
-                {'id': 'runing', 'name': gettext('未完成')},
-                {'id': 'finished', 'name': gettext('完成')}
-            ],
-            taskBasicInfoLoading: true,
-            isStarted: undefined,
-            isFinished: undefined,
-            statusSync: 0,
-            taskCreateMethodList: [],
-            createMethodSync: 0,
-            createMethod: undefined
-        }
-    },
-    computed: {
-        ...mapState({
-            taskList: state => state.taskList.taskListData,
-            businessTimezone: state => state.businessTimezone
-        })
-    },
-    created () {
-        this.getData()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        ...mapActions('template/', [
-            'loadBusinessBaseInfo'
-        ]),
-        ...mapActions('task/', [
-            'getInstanceStatus',
-            'loadCreateMethod'
-        ]),
-        ...mapActions('taskList/', [
-            'loadTaskList',
-            'deleteTask',
-            'cloneTask'
-        ]),
-        ...mapMutations('template/', [
-            'setBusinessBaseInfo'
-        ]),
-        ...mapMutations('taskList/', [
-            'setTaskListData'
-        ]),
-        async getTaskList () {
-            // 空字符串需要转换为undefined，undefined数据在axios请求发送过程中会被删除
-            if (this.executeStartTime === '') {
-                this.executeStartTime = undefined
+    export default {
+        name: 'TaskList',
+        components: {
+            CopyrightFooter,
+            BaseTitle,
+            BaseSearch,
+            NoData,
+            TaskCloneDialog
+        },
+        props: ['cc_id', 'common', 'create_method'],
+        data () {
+            return {
+                listLoading: true,
+                templateId: this.$route.query.template_id,
+                taskCategory: [],
+                activeTaskCategory: undefined, // 任务类型筛选
+                searchStr: '',
+                executeStatus: [], // 任务执行状态
+                currentPage: 1,
+                totalPage: 1,
+                countPerPage: 15,
+                totalCount: 0,
+                isDeleteDialogShow: false,
+                shapeShow: false,
+                isAdvancedSerachShow: false,
+                theDeleteTaskId: undefined,
+                theDeleteTaskName: '',
+                isTaskCloneDialogShow: false,
+                theCloneTaskName: '',
+                theCloneTaskId: undefined,
+                pending: {
+                    delete: false,
+                    clone: false
+                },
+                i18n: {
+                    allCategory: gettext('全部'),
+                    placeholder: gettext('请输入ID或任务名称'),
+                    task_list: gettext('任务记录'),
+                    task_name: gettext('任务名称'),
+                    start_time: gettext('执行开始'),
+                    finish_time: gettext('执行结束'),
+                    task_type: gettext('任务分类'),
+                    creator: gettext('创建人'),
+                    executor: gettext('执行人'),
+                    status: gettext('状态'),
+                    operation: gettext('操作'),
+                    clone: gettext('克隆'),
+                    delete: gettext('删除'),
+                    deleleTip: gettext('确认删除'),
+                    total: gettext('共'),
+                    item: gettext('条记录'),
+                    comma: gettext('，'),
+                    currentPageTip: gettext('当前第'),
+                    page: gettext('页'),
+                    taskNamePlaceholder: gettext('请输入任务名称'),
+                    taskTypePlaceholder: gettext('请选择分类'),
+                    creatorPlaceholder: gettext('请输入创建人'),
+                    executorPlaceholder: gettext('请输入执行人'),
+                    statusPlaceholder: gettext('请选择状态'),
+                    query: gettext('搜索'),
+                    reset: gettext('清空'),
+                    createMethod: gettext('创建方式'),
+                    createMethodApp: gettext('应用内'),
+                    createMethodAppmaker: gettext('轻应用'),
+                    createMethodPlaceholder: gettext('请选择创建方式'),
+                    advanceSearch: gettext('高级搜索'),
+                    executing: gettext('执行中'),
+                    pauseState: gettext('暂停')
+                },
+                executeStartTime: undefined,
+                executeEndTime: undefined,
+                flowName: undefined,
+                category: undefined,
+                creator: undefined,
+                executor: undefined,
+                taskSync: 0,
+                statusList: [
+                    { 'id': 'nonExecution', 'name': gettext('未执行') },
+                    { 'id': 'runing', 'name': gettext('未完成') },
+                    { 'id': 'finished', 'name': gettext('完成') }
+                ],
+                taskBasicInfoLoading: true,
+                isStarted: undefined,
+                isFinished: undefined,
+                statusSync: 0,
+                taskCreateMethodList: [],
+                createMethodSync: 0,
+                createMethod: undefined
             }
-            this.listLoading = true
-            this.executeStatus = []
-            try {
-                const data = {
-                    limit: this.countPerPage,
-                    offset: (this.currentPage - 1) * this.countPerPage,
-                    category: this.activeTaskCategory,
-                    template_id: this.templateId,
-                    common: this.common,
-                    pipeline_instance__creator__contains: this.creator,
-                    pipeline_instance__executor__contains: this.executor,
-                    pipeline_instance__name__contains: this.flowName,
-                    pipeline_instance__is_started: this.isStarted,
-                    pipeline_instance__is_finished: this.isFinished,
-                    create_method: this.createMethod || this.create_method
+        },
+        computed: {
+            ...mapState({
+                taskList: state => state.taskList.taskListData,
+                businessTimezone: state => state.businessTimezone
+            })
+        },
+        created () {
+            this.getData()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
+        },
+        methods: {
+            ...mapActions('template/', [
+                'loadBusinessBaseInfo'
+            ]),
+            ...mapActions('task/', [
+                'getInstanceStatus',
+                'loadCreateMethod'
+            ]),
+            ...mapActions('taskList/', [
+                'loadTaskList',
+                'deleteTask',
+                'cloneTask'
+            ]),
+            ...mapMutations('template/', [
+                'setBusinessBaseInfo'
+            ]),
+            ...mapMutations('taskList/', [
+                'setTaskListData'
+            ]),
+            async getTaskList () {
+                // 空字符串需要转换为undefined，undefined数据在axios请求发送过程中会被删除
+                if (this.executeStartTime === '') {
+                    this.executeStartTime = undefined
                 }
-                if (this.executeEndTime) {
-                    if (this.common) {
-                        data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
-                        data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1','d').format('YYYY-MM-DD')
+                this.listLoading = true
+                this.executeStatus = []
+                try {
+                    const data = {
+                        limit: this.countPerPage,
+                        offset: (this.currentPage - 1) * this.countPerPage,
+                        category: this.activeTaskCategory,
+                        template_id: this.templateId,
+                        common: this.common,
+                        pipeline_instance__creator__contains: this.creator,
+                        pipeline_instance__executor__contains: this.executor,
+                        pipeline_instance__name__contains: this.flowName,
+                        pipeline_instance__is_started: this.isStarted,
+                        pipeline_instance__is_finished: this.isFinished,
+                        create_method: this.createMethod || this.create_method
+                    }
+                    if (this.executeEndTime) {
+                        if (this.common) {
+                            data['pipeline_template__start_time__gte'] = moment(this.executeStartTime).format('YYYY-MM-DD')
+                            data['pipeline_template__start_time__lte'] = moment(this.executeEndTime).add('1', 'd').format('YYYY-MM-DD')
+                        } else {
+                            data['pipeline_instance__start_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                            data['pipeline_instance__start_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1', 'd').format('YYYY-MM-DD')
+                        }
+                    }
+                    const taskListData = await this.loadTaskList(data)
+                    const list = taskListData.objects
+                    this.totalCount = taskListData.meta.total_count
+                    const totalPage = Math.ceil(this.totalCount / this.countPerPage)
+                    if (!totalPage) {
+                        this.totalPage = 1
                     } else {
-                        data['pipeline_instance__start_time__gte'] = moment.tz(this.executeStartTime, this.businessTimezone).format('YYYY-MM-DD')
-                        data['pipeline_instance__start_time__lte'] = moment.tz(this.executeEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
+                        this.totalPage = totalPage
                     }
+                    this.executeStatus = list.map((item, index) => {
+                        const status = {}
+                        if (item.is_finished) {
+                            status.cls = 'finished bk-icon icon-check-circle-shape'
+                            status.text = gettext('完成')
+                        } else if (item.is_started) {
+                            status.cls = 'loading common-icon-loading'
+                            this.getExecuteDetail(item, index)
+                        } else {
+                            status.cls = 'created common-icon-dark-circle-shape'
+                            status.text = gettext('未执行')
+                        }
+                        return status
+                    })
+                    this.setTaskListData(list)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.listLoading = false
                 }
-                const taskListData = await this.loadTaskList(data)
-                const list = taskListData.objects
-                this.totalCount = taskListData.meta.total_count
-                const totalPage = Math.ceil( this.totalCount / this.countPerPage)
-                if (!totalPage) {
-                    this.totalPage = 1
-                } else {
-                    this.totalPage = totalPage
+            },
+            async getExecuteDetail (task, index) {
+                const data = {
+                    instance_id: task.id,
+                    cc_id: task.business.cc_id
                 }
-                this.executeStatus = list.map((item, index) => {
-                    const status = {}
-                    if (item.is_finished) {
-                        status.cls = 'finished bk-icon icon-check-circle-shape'
-                        status.text = gettext('完成')
-                    } else if (item.is_started) {
-                        status.cls = 'loading common-icon-loading'
-                        this.getExecuteDetail(item, index)
+                try {
+                    const detailInfo = await this.getInstanceStatus(data)
+                    if (detailInfo.result) {
+                        const state = detailInfo.data.state
+                        const status = {}
+                        switch (state) {
+                            case 'RUNNING':
+                            case 'BLOCKED':
+                                status.cls = 'running common-icon-dark-circle-ellipsis'
+                                status.text = gettext('执行中')
+                                break
+                            case 'SUSPENDED':
+                                status.cls = 'execute common-icon-dark-circle-pause'
+                                status.text = gettext('暂停')
+                                break
+                            case 'NODE_SUSPENDED':
+                                status.cls = 'execute'
+                                status.text = gettext('节点暂停')
+                                break
+                            case 'FAILED':
+                                status.cls = 'failed common-icon-dark-circle-close'
+                                status.text = gettext('失败')
+                                break
+                            case 'REVOKED':
+                                status.cls = 'revoke common-icon-dark-circle-shape'
+                                status.text = gettext('撤销')
+                                break
+                            default:
+                                status.text = gettext('未知')
+                        }
+                        this.executeStatus.splice(index, 1, status)
                     } else {
-                        status.cls = 'created common-icon-dark-circle-shape'
-                        status.text = gettext('未执行')
+                        errorHandler(detailInfo, this)
                     }
-                    return status
-                })
-                this.setTaskListData(list)
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.listLoading = false
-            }
-        },
-        async getExecuteDetail (task, index) {
-            const data = {
-                instance_id: task.id,
-                cc_id: task.business.cc_id
-            }
-            try {
-                const detailInfo = await this.getInstanceStatus(data)
-                if (detailInfo.result) {
-                    const state = detailInfo.data.state
-                    const status = {}
-                    switch (state) {
-                        case 'RUNNING':
-                        case 'BLOCKED':
-                            status.cls = 'running common-icon-dark-circle-ellipsis'
-                            status.text = gettext('执行中')
-                            break
-                        case 'SUSPENDED':
-                            status.cls = 'execute common-icon-dark-circle-pause'
-                            status.text = gettext('暂停')
-                            break
-                        case 'NODE_SUSPENDED':
-                            status.cls = 'execute'
-                            status.text = gettext('节点暂停')
-                            break
-                        case 'FAILED':
-                            status.cls = 'failed common-icon-dark-circle-close'
-                            status.text = gettext('失败')
-                            break
-                        case 'REVOKED':
-                            status.cls = 'revoke common-icon-dark-circle-shape'
-                            status.text = gettext('撤销')
-                            break
-                        default:
-                            status.text = gettext('未知')
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async getBizBaseInfo () {
+                try {
+                    const bizBasicInfo = await this.loadBusinessBaseInfo()
+                    this.taskCategory = bizBasicInfo.task_categories
+                    this.setBusinessBaseInfo(bizBasicInfo)
+                    this.taskBasicInfoLoading = false
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onCategoryClick (category) {
+                this.activeTaskCategory = category
+                this.currentPage = 1
+                this.getTaskList()
+            },
+            searchInputhandler () {
+                this.currentPage = 1
+                this.getTaskList()
+            },
+            onDeleteTask (id, name) {
+                this.theDeleteTaskId = id
+                this.theDeleteTaskName = name
+                this.isDeleteDialogShow = true
+            },
+            async onDeleteConfirm () {
+                if (this.pending.delete) return
+                this.pending.delete = true
+                try {
+                    await this.deleteTask(this.theDeleteTaskId)
+                    this.theDeleteTaskId = undefined
+                    this.theDeleteTaskName = ''
+                    this.isDeleteDialogShow = false
+                    // 最后一页最后一条删除后，往前翻一页
+                    if (
+                        this.currentPage > 1
+                        && this.totalPage === this.currentPage
+                        && this.totalCount - (this.totalPage - 1) * this.countPerPage === 1
+                    ) {
+                        this.currentPage -= 1
                     }
-                    this.executeStatus.splice(index, 1, status)
-                } else {
-                    errorHandler(detailInfo, this)
+                    await this.getTaskList()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.delete = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async getBizBaseInfo () {
-            try {
-                const bizBasicInfo = await this.loadBusinessBaseInfo()
-                this.taskCategory = bizBasicInfo.task_categories
-                this.setBusinessBaseInfo(bizBasicInfo)
-                this.taskBasicInfoLoading = false
-
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onCategoryClick (category) {
-            this.activeTaskCategory = category
-            this.currentPage = 1
-            this.getTaskList()
-        },
-        searchInputhandler () {
-            this.currentPage = 1
-            this.getTaskList()
-        },
-        onDeleteTask (id, name) {
-            this.theDeleteTaskId = id
-            this.theDeleteTaskName = name
-            this.isDeleteDialogShow = true
-        },
-        async onDeleteConfirm () {
-            if (this.pending.delete) return
-            this.pending.delete = true
-            try {
-                await this.deleteTask(this.theDeleteTaskId)
+            },
+            onDeleteCancel () {
                 this.theDeleteTaskId = undefined
                 this.theDeleteTaskName = ''
                 this.isDeleteDialogShow = false
-                // 最后一页最后一条删除后，往前翻一页
-                if (
-                    this.currentPage > 1 &&
-                    this.totalPage === this.currentPage &&
-                    this.totalCount - (this.totalPage - 1) * this.countPerPage === 1
-                ) {
-                    this.currentPage -= 1
+            },
+            onCloneTaskClick (id, name) {
+                this.isTaskCloneDialogShow = true
+                this.theCloneTaskId = id
+                this.theCloneTaskName = name
+            },
+            async onCloneConfirm (name) {
+                if (this.pending.clone) return
+                this.pending.clone = true
+                const config = {
+                    name,
+                    task_id: this.theCloneTaskId
                 }
-                await this.getTaskList()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.delete = false
-            }
-        },
-        onDeleteCancel () {
-            this.theDeleteTaskId = undefined
-            this.theDeleteTaskName = ''
-            this.isDeleteDialogShow = false
-        },
-        onCloneTaskClick (id, name) {
-            this.isTaskCloneDialogShow = true
-            this.theCloneTaskId = id
-            this.theCloneTaskName = name
-        },
-        async onCloneConfirm (name) {
-            if (this.pending.clone) return
-            this.pending.clone = true
-            const config = {
-                name,
-                task_id: this.theCloneTaskId
-            }
-            try {
-                const data = await this.cloneTask(config)
-                this.$router.push({path: `/taskflow/execute/${this.cc_id}/`, query: {instance_id: data.data.new_instance_id}})
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        onCloneCancel () {
-            this.isTaskCloneDialogShow = false
-            this.theCloneTaskName = ''
-        },
-        onClearCategory () {
-            this.activeTaskCategory = undefined
-        },
-        onSelectedCategory (name, value) {
-            this.activeTaskCategory = name
-        },
-        onSelectedCreateMethod (name, value) {
-            this.createMethod = name
-        },
-        onSelectedStatus (id, name) {
-            this.isStarted = id !== 'nonExecution'
-            this.isFinished = id === 'finished'
-        },
-        onClearCreateMethod () {
-            this.createMethod = undefined
-        },
-        onClearStatus () {
-            this.isStarted = undefined
-            this.isFinished = undefined
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.getTaskList()
-        },
-        onResetForm () {
-            this.$refs.bkRanger.clear()
-            this.isStarted = undefined
-            this.isFinished = undefined
-            this.createMethod = undefined
-            this.creator = undefined
-            this.executor = undefined
-            this.flowName = undefined
-            this.createMethodSync = 0
-            this.statusSync = 0
-            this.taskSync = 0
-            this.executeStartTime = undefined
-            this.executeEndTime = undefined
-        },
-        onChangeExecuteTime (oldValue, newValue) {
-            const timeArray = newValue.split(" - ")
-            this.executeStartTime = timeArray[0]
-            this.executeEndTime = timeArray[1]
-        },
-        async getCreateMethod () {
-            try {
-                const createMethodData = await this.loadCreateMethod()
-                this.taskCreateMethodList = createMethodData.data
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async getData () {
-            Promise.all([
-                this.getTaskList(),
-                this.getCreateMethod(),
-                this.getBizBaseInfo()
-            ]).catch(e => {
-                errorHandler(e, this)
-            })
-        },
-        transformCreateMethod (value) {
-            if (this.taskCreateMethodList.length === 0){
-                return ''
+                try {
+                    const data = await this.cloneTask(config)
+                    this.$router.push({ path: `/taskflow/execute/${this.cc_id}/`, query: { instance_id: data.data.new_instance_id } })
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onCloneCancel () {
+                this.isTaskCloneDialogShow = false
+                this.theCloneTaskName = ''
+            },
+            onClearCategory () {
+                this.activeTaskCategory = undefined
+            },
+            onSelectedCategory (name, value) {
+                this.activeTaskCategory = name
+            },
+            onSelectedCreateMethod (name, value) {
+                this.createMethod = name
+            },
+            onSelectedStatus (id, name) {
+                this.isStarted = id !== 'nonExecution'
+                this.isFinished = id === 'finished'
+            },
+            onClearCreateMethod () {
+                this.createMethod = undefined
+            },
+            onClearStatus () {
+                this.isStarted = undefined
+                this.isFinished = undefined
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.getTaskList()
+            },
+            onResetForm () {
+                this.$refs.bkRanger.clear()
+                this.isStarted = undefined
+                this.isFinished = undefined
+                this.createMethod = undefined
+                this.creator = undefined
+                this.executor = undefined
+                this.flowName = undefined
+                this.createMethodSync = 0
+                this.statusSync = 0
+                this.taskSync = 0
+                this.executeStartTime = undefined
+                this.executeEndTime = undefined
+            },
+            onChangeExecuteTime (oldValue, newValue) {
+                const timeArray = newValue.split(' - ')
+                this.executeStartTime = timeArray[0]
+                this.executeEndTime = timeArray[1]
+            },
+            async getCreateMethod () {
+                try {
+                    const createMethodData = await this.loadCreateMethod()
+                    this.taskCreateMethodList = createMethodData.data
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async getData () {
+                Promise.all([
+                    this.getTaskList(),
+                    this.getCreateMethod(),
+                    this.getBizBaseInfo()
+                ]).catch(e => {
+                    errorHandler(e, this)
+                })
+            },
+            transformCreateMethod (value) {
+                if (this.taskCreateMethodList.length === 0) {
+                    return ''
+                }
+                const taskCreateMethod = this.taskCreateMethodList.find((taskCreateMethod) => taskCreateMethod['value'] === value)
+                return taskCreateMethod['name']
+            },
+            onAdvanceShow () {
+                this.isAdvancedSerachShow = !this.isAdvancedSerachShow
             }
-            let taskCreateMethod = this.taskCreateMethodList.find((taskCreateMethod) => taskCreateMethod['value'] === value)
-            return taskCreateMethod['name']
-        },
-        onAdvanceShow () {
-            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
         }
     }
-}
 </script>
 <style lang='scss' scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/task/TaskParamEdit.vue b/pipeline/blueflow/src/pages/task/TaskParamEdit.vue
index 0a61b7ddda..a3e5145bcf 100644
--- a/pipeline/blueflow/src/pages/task/TaskParamEdit.vue
+++ b/pipeline/blueflow/src/pages/task/TaskParamEdit.vue
@@ -15,164 +15,162 @@
             ref="renderForm"
             v-if="!isConfigLoading"
             :scheme="renderConfig"
-            :formOption="renderOption"
+            :form-option="renderOption"
             v-model="renderData">
         </RenderForm>
         <NoData v-if="isNoData && !isConfigLoading"></NoData>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import atomFilter from '@/utils/atomFilter.js'
-import tools from '@/utils/tools.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-import NoData from '@/components/common/base/NoData.vue'
-export default {
-    name: 'TaskParamEdit',
-    components: {
-        RenderForm,
-        NoData
-    },
-    props: ['constants', 'editable'],
-    data () {
-        return {
-            variables: tools.deepClone(this.constants),
-            renderOption: {
-                showGroup: true,
-                showLabel: true,
-                showHook: false,
-                showDesc: true,
-                formEdit: this.editable
-            },
-            renderConfig: [],
-            metaConfig: {},
-            renderData: {},
-            isConfigLoading: true,
-            isNoData: false
-        }
-    },
-    computed: {
-        ...mapState({
-            'atomFormConfig': state => state.atomForm.config
-        })
-    },
-    watch: {
-        constants (val) {
-            this.variables = tools.deepClone(val)
-            this.getFormData()
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import atomFilter from '@/utils/atomFilter.js'
+    import tools from '@/utils/tools.js'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    export default {
+        name: 'TaskParamEdit',
+        components: {
+            RenderForm,
+            NoData
         },
-        editable (val) {
-            this.$set(this.renderOption, 'editable', val)
-        }
-    },
-    created () {
-        this.getFormData()
-    },
-    methods: {
-        ...mapActions('atomForm/', [
-            'loadAtomConfig'
-        ]),
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        ...mapMutations('atomForm/', [
-            'clearAtomForm'
-        ]),
-        /**
-         * 加载表单元素的标准插件配置文件
-         */
-        async getFormData () {
-            let variableArray = []
-            this.renderConfig = []
-            this.renderData = {}
-            for (let cKey in this.variables) {
-                const variable = tools.deepClone(this.variables[cKey])
-                // 输入参数只展示显示类型全局变量
-                if (variable.show_type === 'show') {
-                    variableArray.push(variable)
-                }
-            }
-            if (variableArray.length === 0) {
-                this.isNoData = true
-            } else {
-                this.isNoData = false
+        props: ['constants', 'editable'],
+        data () {
+            return {
+                variables: tools.deepClone(this.constants),
+                renderOption: {
+                    showGroup: true,
+                    showLabel: true,
+                    showHook: false,
+                    showDesc: true,
+                    formEdit: this.editable
+                },
+                renderConfig: [],
+                metaConfig: {},
+                renderData: {},
+                isConfigLoading: true,
+                isNoData: false
             }
-            variableArray = variableArray.sort((a, b) => {
-                return a.index - b.index
+        },
+        computed: {
+            ...mapState({
+                'atomFormConfig': state => state.atomForm.config
             })
-            for (let variable of variableArray) {
-                const { key, source_tag, custom_type } = variable
-                let atomType = ''
-                let tagCode = ''
-                let classify = ''
-                if (custom_type) {
-                    atomType = custom_type
-                    classify = 'variable'
-                } else {
-                    [ atomType, tagCode ] = source_tag.split('.')
-                    classify = 'component'
-                }
-                if (!this.atomFormConfig[atomType]) {
-                    this.isConfigLoading = true
-                    await this.loadAtomConfig({atomType, classify})
-                    this.setAtomConfig({atomType, configData: $.atoms[atomType]})
-                }
-                const atomConfig = this.atomFormConfig[atomType]
-                var currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
-                if (currentFormConfig) {
-                    // 若该变量是元变量则进行转换操作
-                    if (variable.is_meta || currentFormConfig.meta_transform) {
-                        currentFormConfig = currentFormConfig.meta_transform(variable.meta || variable)
-                        this.metaConfig[key] = tools.deepClone(variable)
-                        if (!variable.meta) {
-                            variable.value = currentFormConfig.attrs.value
-                        }
-                    }
-                    currentFormConfig.tag_code = key
-                    currentFormConfig.attrs.name = variable.name
-                    currentFormConfig.attrs.desc = variable.desc
-                    this.renderConfig.push(currentFormConfig)
-                }
-                this.renderData[key] = tools.deepClone(variable.value)
+        },
+        watch: {
+            constants (val) {
+                this.variables = tools.deepClone(val)
+                this.getFormData()
+            },
+            editable (val) {
+                this.$set(this.renderOption, 'editable', val)
             }
-            this.$nextTick(() => {
-                this.isConfigLoading = false
-                this.$emit('onChangeConfigLoading', false)
-            })
         },
-        validate () {
-            return this.$refs.renderForm.validate()
+        created () {
+            this.getFormData()
+        },
+        beforeDestroy () {
+            this.clearAtomForm()
         },
-        getVariableData () {
-            const variables = tools.deepClone(this.constants)
-            for (let key in variables) {
-                const variable = variables[key]
-                if (key in this.renderData) {
-                    variable.value = this.renderData[key]
-                    variable.meta = this.metaConfig[key]
-                } else if (variable.is_meta) {
-                    const sourceTag = variable.source_tag
-                    const [ atomType, tagCode ] = sourceTag.split('.')
+        methods: {
+            ...mapActions('atomForm/', [
+                'loadAtomConfig'
+            ]),
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            ...mapMutations('atomForm/', [
+                'clearAtomForm'
+            ]),
+            /**
+             * 加载表单元素的标准插件配置文件
+             */
+            async getFormData () {
+                let variableArray = []
+                this.renderConfig = []
+                this.renderData = {}
+                for (const cKey in this.variables) {
+                    const variable = tools.deepClone(this.variables[cKey])
+                    // 输入参数只展示显示类型全局变量
+                    if (variable.show_type === 'show') {
+                        variableArray.push(variable)
+                    }
+                }
+
+                this.isNoData = !!variableArray.length
+               
+                variableArray = variableArray.sort((a, b) => {
+                    return a.index - b.index
+                })
+                
+                for (const variable of variableArray) {
+                    const { key, source_tag, custom_type } = variable
+                    let atomType = ''
+                    let tagCode = ''
+                    let classify = ''
+                    if (custom_type) {
+                        atomType = custom_type
+                        classify = 'variable'
+                    } else {
+                        [atomType, tagCode] = source_tag.split('.')
+                        classify = 'component'
+                    }
                     if (!this.atomFormConfig[atomType]) {
-                        this.loadAtomConfig({atomType})
-                        this.setAtomConfig({atomType, configData: $.atoms[atomType]})
+                        this.isConfigLoading = true
+                        await this.loadAtomConfig({ atomType, classify })
+                        this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
                     }
                     const atomConfig = this.atomFormConfig[atomType]
-                    var currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
-                    currentFormConfig = currentFormConfig.meta_transform(variable.meta || variable)
-                    variable.meta = tools.deepClone(variable)
-                    variable.value = currentFormConfig.attrs.value
+                    let currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
+                    if (currentFormConfig) {
+                        // 若该变量是元变量则进行转换操作
+                        if (variable.is_meta || currentFormConfig.meta_transform) {
+                            currentFormConfig = currentFormConfig.meta_transform(variable.meta || variable)
+                            this.metaConfig[key] = tools.deepClone(variable)
+                            if (!variable.meta) {
+                                variable.value = currentFormConfig.attrs.value
+                            }
+                        }
+                        currentFormConfig.tag_code = key
+                        currentFormConfig.attrs.name = variable.name
+                        currentFormConfig.attrs.desc = variable.desc
+                        this.renderConfig.push(currentFormConfig)
+                    }
+                    this.renderData[key] = tools.deepClone(variable.value)
                 }
+                this.$nextTick(() => {
+                    this.isConfigLoading = false
+                    this.$emit('onChangeConfigLoading', false)
+                })
+            },
+            validate () {
+                return this.$refs.renderForm.validate()
+            },
+            getVariableData () {
+                const variables = tools.deepClone(this.constants)
+                for (const key in variables) {
+                    const variable = variables[key]
+                    if (key in this.renderData) {
+                        variable.value = this.renderData[key]
+                        variable.meta = this.metaConfig[key]
+                    } else if (variable.is_meta) {
+                        const sourceTag = variable.source_tag
+                        const [atomType, tagCode] = sourceTag.split('.')
+                        if (!this.atomFormConfig[atomType]) {
+                            this.loadAtomConfig({ atomType })
+                            this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
+                        }
+                        const atomConfig = this.atomFormConfig[atomType]
+                        let currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
+                        currentFormConfig = currentFormConfig.meta_transform(variable.meta || variable)
+                        variable.meta = tools.deepClone(variable)
+                        variable.value = currentFormConfig.attrs.value
+                    }
+                }
+                return variables
             }
-            return variables
         }
-    },
-    beforeDestroy () {
-        this.clearAtomForm()
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -184,4 +182,3 @@ export default {
         }
     }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/task/TaskStep.vue b/pipeline/blueflow/src/pages/task/TaskStep.vue
index 28079bd3e5..117185008b 100644
--- a/pipeline/blueflow/src/pages/task/TaskStep.vue
+++ b/pipeline/blueflow/src/pages/task/TaskStep.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div :class="['step-wrapper',{'hidden-step-wrapper': hiddenBorder}]">
+    <div :class="['step-wrapper',{ 'hidden-step-wrapper': hiddenBorder }]">
         <div class="step-header">
             <div class="step-section-title">
                 <span>{{ taskTemplateTitle }}</span>
@@ -28,8 +28,8 @@
                 v-for="(item, index) in list"
                 :key="index"
                 :style="calChartSize(index)">
-                <div class="step-graph" >
-                    <div class="line"  v-if="index !== list.length - 1"></div>
+                <div class="step-graph">
+                    <div class="line" v-if="index !== list.length - 1"></div>
                     <div class="common-icon-done-thin step-done" v-if="allFinished || index < currentStepIndex"></div>
                     <div class="order" v-else>{{index + 1}}</div>
                 </div>
@@ -39,69 +39,69 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState } from 'vuex'
-export default {
-    name: 'TaskCreateStep',
-    props: ['list', 'currentStep', 'allFinished'],
-    data () {
-        return {
-            i18n: {
-                newTask: gettext('新建任务'),
-                taskExecution: gettext('任务执行')
-            }
-        }
-    },
-    computed: {
-        ...mapState({
-            'lang': state => state.lang
-        }),
-        currentStepIndex () {
-            return this.getCurrentStepIndex()
-        },
-        hiddenBorder () {
-            return this.getCurrentStepIndex() === this.list.length - 1 && this.list.length > 2
-        },
-        taskTemplateTitle () {
-            return this.$route.query.instance_id === undefined ? this.i18n.newTask : this.i18n.taskExecution
-        }
-    },
-    methods: {
-        getCurrentStepIndex () {
-            let currentStepIndex = 0
-            this.list.some((item, index) => {
-                if (item.step === this.currentStep) {
-                    currentStepIndex = index
-                    return true
+    import '@/utils/i18n.js'
+    import { mapState } from 'vuex'
+    export default {
+        name: 'TaskCreateStep',
+        props: ['list', 'currentStep', 'allFinished'],
+        data () {
+            return {
+                i18n: {
+                    newTask: gettext('新建任务'),
+                    taskExecution: gettext('任务执行')
                 }
-            })
-            return currentStepIndex
+            }
         },
-        calChartSize (index) {
-            const style = {}
-            const pencent = (100.0 / (this.list.length - 1)).toFixed(2)  + '%'
-            if (index !== this.list.length - 1) {
-                style['flex-basis'] =  pencent
-            } else {
-                style['max-length'] = pencent
-                style['line-height'] = '22px'
-                style['flex-basis'] = 'auto !important'
-                style['flex-shrink'] = 0
-                style['flex-grow'] = 0
+        computed: {
+            ...mapState({
+                'lang': state => state.lang
+            }),
+            currentStepIndex () {
+                return this.getCurrentStepIndex()
+            },
+            hiddenBorder () {
+                return this.getCurrentStepIndex() === this.list.length - 1 && this.list.length > 2
+            },
+            taskTemplateTitle () {
+                return this.$route.query.instance_id === undefined ? this.i18n.newTask : this.i18n.taskExecution
             }
-            return style
         },
-        calNameSize (name) {
-            const style = {}
-            if (this.lang === 'en') {
-                // 减去一个空格
-                const nameLength = name.length - 1
-                style['left'] = nameLength * -2 + 'px'
+        methods: {
+            getCurrentStepIndex () {
+                let currentStepIndex = 0
+                this.list.some((item, index) => {
+                    if (item.step === this.currentStep) {
+                        currentStepIndex = index
+                        return true
+                    }
+                })
+                return currentStepIndex
+            },
+            calChartSize (index) {
+                const style = {}
+                const pencent = (100.0 / (this.list.length - 1)).toFixed(2) + '%'
+                if (index !== this.list.length - 1) {
+                    style['flex-basis'] = pencent
+                } else {
+                    style['max-length'] = pencent
+                    style['line-height'] = '22px'
+                    style['flex-basis'] = 'auto !important'
+                    style['flex-shrink'] = 0
+                    style['flex-grow'] = 0
+                }
+                return style
+            },
+            calNameSize (name) {
+                const style = {}
+                if (this.lang === 'en') {
+                    // 减去一个空格
+                    const nameLength = name.length - 1
+                    style['left'] = nameLength * -2 + 'px'
+                }
+                return style
             }
-            return style
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -217,4 +217,3 @@ export default {
     border: 0px;
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/task/index.vue b/pipeline/blueflow/src/pages/task/index.vue
index adbebd58cc..25a08c5b89 100644
--- a/pipeline/blueflow/src/pages/task/index.vue
+++ b/pipeline/blueflow/src/pages/task/index.vue
@@ -13,8 +13,8 @@
     <router-view></router-view>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'layoutContent'
-}
+    import '@/utils/i18n.js'
+    export default {
+        name: 'layoutContent'
+    }
 </script>
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/NodeConfig.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/NodeConfig.vue
index bd35a649a3..69d0afac53 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/NodeConfig.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/NodeConfig.vue
@@ -12,7 +12,7 @@
 <template>
     <div class="node-config">
         <div
-            :class="['node-config-panel',{'position-right-side': !isSettingPanelShow}]">
+            :class="['node-config-panel',{ 'position-right-side': !isSettingPanelShow }]">
             <div class="node-title">
                 <span>{{ i18n.baseInfo }}</span>
             </div>
@@ -47,14 +47,14 @@
                     <div class="form-item">
                         <label class="required">{{ i18n.node_name }}</label>
                         <div class="form-content">
-                            <BaseInput v-model="nodeName" name="nodeName" v-validate="nodeNameRule"/>
+                            <BaseInput v-model="nodeName" name="nodeName" v-validate="nodeNameRule" />
                             <span v-show="errors.has('nodeName')" class="common-error-tip error-msg">{{ errors.first('nodeName') }}</span>
                         </div>
                     </div>
                     <div class="form-item">
                         <label>{{ i18n.stage_tag }}</label>
                         <div class="form-content">
-                            <BaseInput v-model="stageName" name="stageName" v-validate="stageNameRule"/>
+                            <BaseInput v-model="stageName" name="stageName" v-validate="stageNameRule" />
                             <span v-show="errors.has('stageName')" class="common-error-tip error-msg">{{ errors.first('stageName') }}</span>
                         </div>
                     </div>
@@ -116,13 +116,13 @@
                 <div class="node-title">
                     <span>{{ i18n.input }}</span>
                 </div>
-                <div class="section-form inputs-info-form" v-bkloading="{isLoading: atomConfigLoading, opacity: 1}">
+                <div class="section-form inputs-info-form" v-bkloading="{ isLoading: atomConfigLoading, opacity: 1 }">
                     <RenderForm
                         ref="renderForm"
                         v-if="!atomConfigLoading && renderInputConfig && renderInputConfig.length"
                         :scheme="renderInputConfig"
-                        :formData="renderInputData.value"
-                        :formOption="renderInputOption"
+                        :form-data="renderInputData.value"
+                        :form-option="renderInputOption"
                         :hooked="renderInputData.hook"
                         @change="onInputDataChange"
                         @onHookChange="onInputHookChange">
@@ -136,7 +136,7 @@
                 <div class="node-title">
                     <span>{{ i18n.output }}</span>
                 </div>
-                <div class="section-form outputs-info-form" v-bkloading="{isLoading: atomConfigLoading, opacity: 1}">
+                <div class="section-form outputs-info-form" v-bkloading="{ isLoading: atomConfigLoading, opacity: 1 }">
                     <table class="outputs-table" v-if="renderOutputData && renderOutputData.length">
                         <thead>
                             <tr>
@@ -154,7 +154,7 @@
                                         :content="item.hook ? i18n.cancelHook : i18n.hook"
                                         placement="left">
                                         <BaseCheckbox
-                                            :isChecked="item.hook"
+                                            :is-checked="item.hook"
                                             @checkCallback="onOutputHookChange(item.name, item.key, $event)">
                                         </BaseCheckbox>
                                     </bk-tooltip>
@@ -163,16 +163,16 @@
                         </tbody>
                     </table>
                     <div class="no-data-wrapper" v-else>
-                        <NoData/>
+                        <NoData />
                     </div>
                 </div>
             </div>
         </div>
         <ReuseVarDialog
             v-if="isReuseVarDialogShow"
-            :isReuseVarDialogShow="isReuseVarDialogShow"
-            :reuseVariable="reuseVariable"
-            :reuseableVarList="reuseableVarList"
+            :is-reuse-var-dialog-show="isReuseVarDialogShow"
+            :reuse-variable="reuseVariable"
+            :reuseable-var-list="reuseableVarList"
             @onConfirmReuseVar="onConfirmReuseVar"
             @onCancelReuseVar="onCancelReuseVar">
         </ReuseVarDialog>
@@ -180,918 +180,910 @@
 </template>
 <script>
 
-import '@/utils/i18n.js'
-import { mapActions, mapState, mapMutations } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import tools from '@/utils/tools.js'
-import dom from '@/utils/dom.js'
-import atomFilter from '@/utils/atomFilter.js'
-import { random4 } from '@/utils/uuid.js'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import NoData from '@/components/common/base/NoData.vue'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import ReuseVarDialog from './ReuseVarDialog.vue'
+    import '@/utils/i18n.js'
+    import { mapActions, mapState, mapMutations } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import tools from '@/utils/tools.js'
+    import dom from '@/utils/dom.js'
+    import atomFilter from '@/utils/atomFilter.js'
+    import { random4 } from '@/utils/uuid.js'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import ReuseVarDialog from './ReuseVarDialog.vue'
 
-const varKeyReg = /^\$\{(\w+)\}$/
+    const varKeyReg = /^\$\{(\w+)\}$/
 
-export default {
-    /**
-     * notice：provide为了兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
-     */
-    provide () {
-        return {
-            nodeId: this.idOfNodeInConfigPanel
-        }
-    },
-    name: 'NodeConfig',
-    components: {
-        NoData,
-        RenderForm,
-        BaseCheckbox,
-        BaseInput,
-        ReuseVarDialog
-    },
-    props: [
-        'isNodeConfigPanelShow',
-        'isSettingPanelShow',
-        'singleAtom',
-        'subAtom',
-        'idOfNodeInConfigPanel',
-        'template_id',
-        'common'
-    ],
-    data () {
-        return {
-            i18n: {
-                baseInfo: gettext("基础信息"),
-                flow: gettext("流程模板"),
-                node_name: gettext("节点名称"),
-                stage_tag: gettext("步骤名称"),
-                ignore: gettext("自动忽略"),
-                optional: gettext("是否可选"),
-                input: gettext("输入参数"),
-                output: gettext("输出参数"),
-                name: gettext("名称"),
-                refer: gettext("引用"),
-                hook: gettext("勾选参数作为全局变量"),
-                cancelHook: gettext("取消勾选"),
-                typeEmptyTip: gettext("不能为空"),
-                update: gettext("版本更新"),
-                manuallySkip: gettext('手动跳过'),
-                manuallyRetry: gettext('手动重试'),
-                failureHandling: gettext('失败处理'),
-                details: gettext('说明：'),
-                failureHandlingDetails1: gettext('自动忽略：标准插件节点如果执行失败，会自动忽略错误并把节点状态设置为成功。'),
-                failureHandlingDetails2: gettext('手动重试：标准插件节点如果执行失败，可以人工干预，填写参数后重试节点。'),
-                failureHandlingDetails3: gettext('手动跳过：标准插件节点如果执行失败，可以人工干预，直接跳过节点的执行。'),
-                manuallyEmpty: gettext('未选择失败处理方式，标准插件节点如果执行失败，会导致任务中断后不可继续')
-            },
-            atomConfigLoading: false,
-            errorCouldBeIgnored: false,
-            nodeCouldBeSkipped: false,
-            subflowHasUpdate: false, // 是否显示子流程更新 icon
-            bkMessageInstance: null,
-            subAtomConfigData: null,
-            nodeConfigData: null,
-            reuseVariable: {},
-            isReuseVarDialogShow: false,
-            taskTypeEmpty: false,
-            reuseableVarList: [],
-            nodeId: this.idOfNodeInConfigPanel,
-            nodeName: '',
-            stageName: gettext('步骤1'),
-            currentAtom: '',
-            subAtomInput: [],
-            subAtomOutput: [],
-            renderInputOption: {
-                showGroup: false,
-                showHook: true,
-                showLabel: true,
-                showVarList: true
-            },
-            inputAtomHook: {},
-            inputAtomData: undefined,
-            nodeNameRule: {
-                required: true,
-                max: STRING_LENGTH.TEMPLATE_NODE_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            stageNameRule: {
-                max: STRING_LENGTH.STAGE_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            showText: true,
-            isAtomChanged: false, // 用于切换标准插件
-            failureHandling: [], // 失败处理
-            isDisable: false, // 是否禁用手动选项
-            isSkip: true, // 是否手动跳过
-            isRetry: true, // 是否手动重试
-            manuallyEmpty: false  // 手动选项为空
-        }
-    },
-    computed: {
-        ...mapState({
-            'activities': state => state.template.activities,
-            'constants': state => state.template.constants,
-            'atomForm': state => state.atomForm.form,
-            'atomFormConfig': state => state.atomForm.config,
-            'atomFormOutput': state => state.atomForm.output,
-            'subprocessInfo': state => state.template.subprocess_info
-        }),
-        /**
-         * 标准插件节点、子节点列表
-         */
-        atomList () {
-            if (this.isSingleAtom) {
-                return this.singleAtom.map(item => {
-                    return {
-                        id: item.code,
-                        name: item.group_name + '-' + item.name
-                    }
-                })
-            } else {
-                return this.subAtom.filter(item => {
-                    return item.template_id !== Number(this.template_id)
-                }).map(item => {
-                    return {
-                        id: item.template_id,
-                        name: item.name
-                    }
-                })
-            }
-        },
+    export default {
         /**
-         * 标准插件节点描述
+         * notice：provide为了兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
          */
-        atomDesc () {
-            if (this.singleAtom) {
-                return this.atomForm[this.currentAtom] && this.atomForm[this.currentAtom].desc
+        provide () {
+            return {
+                nodeId: this.idOfNodeInConfigPanel
             }
-            return ''
         },
-        isSingleAtom () { // normal task node or subflow node
-            return this.nodeConfigData && this.nodeConfigData.type === 'ServiceActivity'
+        name: 'NodeConfig',
+        components: {
+            NoData,
+            RenderForm,
+            BaseCheckbox,
+            BaseInput,
+            ReuseVarDialog
         },
-        atomNameType () {
-            return this.isSingleAtom ? gettext('标准插件') : gettext('流程模板')
+        props: [
+            'isNodeConfigPanelShow',
+            'isSettingPanelShow',
+            'singleAtom',
+            'subAtom',
+            'idOfNodeInConfigPanel',
+            'template_id',
+            'common'
+        ],
+        data () {
+            return {
+                i18n: {
+                    baseInfo: gettext('基础信息'),
+                    flow: gettext('流程模板'),
+                    node_name: gettext('节点名称'),
+                    stage_tag: gettext('步骤名称'),
+                    ignore: gettext('自动忽略'),
+                    optional: gettext('是否可选'),
+                    input: gettext('输入参数'),
+                    output: gettext('输出参数'),
+                    name: gettext('名称'),
+                    refer: gettext('引用'),
+                    hook: gettext('勾选参数作为全局变量'),
+                    cancelHook: gettext('取消勾选'),
+                    typeEmptyTip: gettext('不能为空'),
+                    update: gettext('版本更新'),
+                    manuallySkip: gettext('手动跳过'),
+                    manuallyRetry: gettext('手动重试'),
+                    failureHandling: gettext('失败处理'),
+                    details: gettext('说明：'),
+                    failureHandlingDetails1: gettext('自动忽略：标准插件节点如果执行失败，会自动忽略错误并把节点状态设置为成功。'),
+                    failureHandlingDetails2: gettext('手动重试：标准插件节点如果执行失败，可以人工干预，填写参数后重试节点。'),
+                    failureHandlingDetails3: gettext('手动跳过：标准插件节点如果执行失败，可以人工干预，直接跳过节点的执行。'),
+                    manuallyEmpty: gettext('未选择失败处理方式，标准插件节点如果执行失败，会导致任务中断后不可继续')
+                },
+                atomConfigLoading: false,
+                errorCouldBeIgnored: false,
+                nodeCouldBeSkipped: false,
+                subflowHasUpdate: false, // 是否显示子流程更新 icon
+                bkMessageInstance: null,
+                subAtomConfigData: null,
+                nodeConfigData: null,
+                reuseVariable: {},
+                isReuseVarDialogShow: false,
+                taskTypeEmpty: false,
+                reuseableVarList: [],
+                nodeId: this.idOfNodeInConfigPanel,
+                nodeName: '',
+                stageName: gettext('步骤1'),
+                currentAtom: '',
+                subAtomInput: [],
+                subAtomOutput: [],
+                renderInputOption: {
+                    showGroup: false,
+                    showHook: true,
+                    showLabel: true,
+                    showVarList: true
+                },
+                inputAtomHook: {},
+                inputAtomData: undefined,
+                nodeNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.TEMPLATE_NODE_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                stageNameRule: {
+                    max: STRING_LENGTH.STAGE_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                showText: true,
+                isAtomChanged: false, // 用于切换标准插件
+                failureHandling: [], // 失败处理
+                isDisable: false, // 是否禁用手动选项
+                isSkip: true, // 是否手动跳过
+                isRetry: true, // 是否手动重试
+                manuallyEmpty: false // 手动选项为空
+            }
         },
-        /**
-         * 输出参数数据
-         */
-        renderOutputData () {
-            const outputData = []
-            const outputConfig = this.getOutputConfig()
+        computed: {
+            ...mapState({
+                'activities': state => state.template.activities,
+                'constants': state => state.template.constants,
+                'atomForm': state => state.atomForm.form,
+                'atomFormConfig': state => state.atomForm.config,
+                'atomFormOutput': state => state.atomForm.output,
+                'subprocessInfo': state => state.template.subprocess_info
+            }),
+            /**
+             * 标准插件节点、子节点列表
+             */
+            atomList () {
+                if (this.isSingleAtom) {
+                    return this.singleAtom.map(item => {
+                        return {
+                            id: item.code,
+                            name: item.group_name + '-' + item.name
+                        }
+                    })
+                } else {
+                    return this.subAtom.filter(item => {
+                        return item.template_id !== Number(this.template_id)
+                    }).map(item => {
+                        return {
+                            id: item.template_id,
+                            name: item.name
+                        }
+                    })
+                }
+            },
+            /**
+             * 标准插件节点描述
+             */
+            atomDesc () {
+                if (this.singleAtom) {
+                    return this.atomForm[this.currentAtom] && this.atomForm[this.currentAtom].desc
+                }
+                return ''
+            },
+            isSingleAtom () { // normal task node or subflow node
+                return this.nodeConfigData && this.nodeConfigData.type === 'ServiceActivity'
+            },
+            atomNameType () {
+                return this.isSingleAtom ? gettext('标准插件') : gettext('流程模板')
+            },
+            /**
+             * 输出参数数据
+             */
+            renderOutputData () {
+                const outputData = []
+                const outputConfig = this.getOutputConfig()
 
-            outputConfig && outputConfig.forEach(item => {
-                let hook = false
-                let key = item.key
-                for (let cKey in this.constants) {
-                    const constant = this.constants[cKey]
-                    if (constant.source_type === 'component_outputs' &&
-                        constant.source_info[this.nodeId] &&
-                        constant.source_info[this.nodeId].indexOf(key) > -1
-                    ) {
-                        hook = true
-                        key = cKey
+                outputConfig && outputConfig.forEach(item => {
+                    let hook = false
+                    let key = item.key
+                    for (const cKey in this.constants) {
+                        const constant = this.constants[cKey]
+                        if (constant.source_type === 'component_outputs'
+                            && constant.source_info[this.nodeId]
+                            && constant.source_info[this.nodeId].indexOf(key) > -1
+                        ) {
+                            hook = true
+                            key = cKey
+                        }
                     }
-                }
-                outputData.push({
-                    name: item.name,
-                    key,
-                    hook
+                    outputData.push({
+                        name: item.name,
+                        key,
+                        hook
+                    })
                 })
-            })
+                /**
+                 * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
+                 */
+                if (this.currentAtom === 'job_execute_task') {
+                    for (const cKey in this.constants) {
+                        const constant = this.constants[cKey]
+                        if (constant.source_type === 'component_outputs'
+                            && outputData.findIndex(item => item.key === cKey) === -1
+                        ) {
+                            outputData.push({
+                                name: constant.name,
+                                key: cKey,
+                                hook: true
+                            })
+                        }
+                    }
+                }
+
+                return outputData
+            },
             /**
-             * notice：兼容“job-执行作业（job_execute_task）标准插件”动态添加输出参数
+             * 输入参数表单配置项
              */
-            if (this.currentAtom === 'job_execute_task') {
-                for (let cKey in this.constants) {
-                    const constant = this.constants[cKey]
-                    if (constant.source_type === 'component_outputs' &&
-                        outputData.findIndex(item => item.key === cKey) === -1
-                    ) {
-                        outputData.push({
-                            name: constant.name,
-                            key: cKey,
-                            hook: true
-                        })
-                    }
+            renderInputConfig () {
+                return this.isSingleAtom
+                    ? this.getSingleAtomConfig()
+                    : this.subAtomInput
+            },
+            /**
+             * 输入参数数据
+             */
+            renderInputData () {
+                return {
+                    hook: this.inputAtomHook,
+                    value: this.inputAtomData
                 }
             }
-
-            return outputData
         },
-        /**
-         * 输入参数表单配置项
-         */
-        renderInputConfig () {
-            return  this.isSingleAtom ?
-                this.getSingleAtomConfig() :
-                this.subAtomInput
-        },
-        /**
-         * 输入参数数据
-         */
-        renderInputData () {
-            return {
-                hook: this.inputAtomHook,
-                value: this.inputAtomData
+        watch: {
+            idOfNodeInConfigPanel (val) {
+                this.nodeId = val
+                this.initData()
+            },
+            isRetry (val) {
+                this.manuallyEmpty = !val && !this.isSkip && !this.errorCouldBeIgnored
+            },
+            isSkip (val) {
+                this.manuallyEmpty = !this.isRetry && !val && !this.errorCouldBeIgnored
             }
-        }
-    },
-    created () {
-        this.initData()
-    },
-    mounted () {
-        window.addEventListener('click', this.handleNodeConfigPanelShow, true)
-        if (this.errorCouldBeIgnored) {
-            this.isDisable = true
-        }
-    },
-    beforeDestroy (){
-        window.removeEventListener('click', this.handleNodeConfigPanelShow, true)
-    },
-    watch: {
-        idOfNodeInConfigPanel (val) {
-            this.nodeId = val
+        },
+        created () {
             this.initData()
         },
-        isRetry (val) {
-            this.manuallyEmpty = !val && !this.isSkip && !this.errorCouldBeIgnored
+        mounted () {
+            window.addEventListener('click', this.handleNodeConfigPanelShow, true)
+            if (this.errorCouldBeIgnored) {
+                this.isDisable = true
+            }
         },
-        isSkip (val) {
-            this.manuallyEmpty = !this.isRetry && !val && !this.errorCouldBeIgnored
-        }
-    },
-    methods: {
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        ...mapMutations ('template/', [
-            'addVariable',
-            'deleteVariable',
-            'setActivities',
-            'setVariableSourceInfo',
-            'setSubprocessUpdated'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig',
-            'loadSubflowConfig'
-        ]),
-        initData () {
-            this.nodeConfigData = tools.deepClone(this.activities[this.nodeId])
-            this.getNodeFormData() // get template activity information
-            this.getConfig(this.nodeConfigData.version) // load node config data
+        beforeDestroy () {
+            window.removeEventListener('click', this.handleNodeConfigPanelShow, true)
         },
-        /**
-         * 加载标准插件配置文件或子流程表单配置
-         * @param {String} version 子流程版本
-         */
-        getConfig (version) {
-            if (this.currentAtom !== '' && this.currentAtom !== undefined) {
-                if ( this.isSingleAtom) {
-                    return this.getAtomConfig(this.currentAtom)
+        methods: {
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            ...mapMutations('template/', [
+                'addVariable',
+                'deleteVariable',
+                'setActivities',
+                'setVariableSourceInfo',
+                'setSubprocessUpdated'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig',
+                'loadSubflowConfig'
+            ]),
+            initData () {
+                this.nodeConfigData = tools.deepClone(this.activities[this.nodeId])
+                this.getNodeFormData() // get template activity information
+                this.getConfig(this.nodeConfigData.version) // load node config data
+            },
+            /**
+             * 加载标准插件配置文件或子流程表单配置
+             * @param {String} version 子流程版本
+             */
+            getConfig (version) {
+                if (this.currentAtom !== '' && this.currentAtom !== undefined) {
+                    if (this.isSingleAtom) {
+                        return this.getAtomConfig(this.currentAtom)
+                    } else {
+                        return this.getSubflowConfig(this.currentAtom, version)
+                    }
                 } else {
-                    return this.getSubflowConfig(this.currentAtom, version)
+                    this.markInvalidForm()
                 }
-            } else {
-                this.markInvalidForm()
-            }
-        },
-        /**
-         * 加载标准插件节点数据
-         */
-        async getAtomConfig (atomType) {
-            if ($.atoms[atomType]) {
-                this.setNodeConfigData(atomType)
-                return
-            }
-            this.atomConfigLoading = true
-            try {
-                await this.loadAtomConfig({atomType})
-                this.setAtomConfig({atomType, configData: $.atoms[atomType]})
-                this.setNodeConfigData(atomType)
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.atomConfigLoading = false
-                this.isAtomChanged = true
-            }
-        },
-        /**
-        * 加载子流程节点数据
-        * @param {Number} id 子流程模板 id
-        * @param {String} version 子流程版本 若不传
-        */
-        async getSubflowConfig (id, version) {
-            this.atomConfigLoading = true
-            this.nodeConfigData.template_id = id
-            const isSubAtomChanged = this.currentAtom !== this.nodeConfigData.template_id
-            try {
-                this.subAtomConfigData = await this.loadSubflowConfig({templateId: id, version, common: this.common})
-                const constants = {}
-                const inputConfig = []
-                const outputConfig = []
-                let variableArray = []
-                this.nodeConfigData.version = this.subAtomConfigData.version
-                // 检查流程是否更新，有更新则显示更新按钮
-                if (
-                    this.subprocessInfo &&
-                    this.subprocessInfo.details
-                ) {
-                    this.subprocessInfo.details.some(subflow => {
-                        if (
-                            subflow.expired &&
-                            subflow.template_id === Number(this.currentAtom) &&
-                            subflow.subprocess_node_id === this.nodeId
-                        ) {
-                            this.subflowHasUpdate = true
-                        }
-                    })
+            },
+            /**
+             * 加载标准插件节点数据
+             */
+            async getAtomConfig (atomType) {
+                if ($.atoms[atomType]) {
+                    this.setNodeConfigData(atomType)
+                    return
                 }
-
-                for (let cKey in this.subAtomConfigData.form) {
-                    const variable = tools.deepClone(this.subAtomConfigData.form[cKey])
-                    if (variable.show_type === 'show') {
-                        variableArray.push(variable)
-                    }
+                this.atomConfigLoading = true
+                try {
+                    await this.loadAtomConfig({ atomType })
+                    this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
+                    this.setNodeConfigData(atomType)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.atomConfigLoading = false
+                    this.isAtomChanged = true
                 }
-                variableArray = variableArray.sort((a, b) => {
-                    return a.index - b.index
-                })
-                // 遍历加载标准插件表单配置文件
-                for (let form of variableArray) {
-                    const { key, source_tag, custom_type } = form
-                    let atomType = ''
-                    let tagCode = ''
-                    let classify = ''
-                    if (custom_type) {
-                        atomType = form.custom_type
-                        classify = 'variable'
-                    } else {
-                        [ atomType, tagCode ] = source_tag.split('.')
-                        classify = 'component'
-                    }
-
-                    if (!this.atomFormConfig[atomType]) {
-                        await this.loadAtomConfig({atomType, classify})
-                        this.setAtomConfig({atomType, configData: $.atoms[atomType]})
+            },
+            /**
+             * 加载子流程节点数据
+             * @param {Number} id 子流程模板 id
+             * @param {String} version 子流程版本 若不传
+             */
+            async getSubflowConfig (id, version) {
+                this.atomConfigLoading = true
+                this.nodeConfigData.template_id = id
+                try {
+                    this.subAtomConfigData = await this.loadSubflowConfig({ templateId: id, version, common: this.common })
+                    const constants = {}
+                    const inputConfig = []
+                    const outputConfig = []
+                    let variableArray = []
+                    this.nodeConfigData.version = this.subAtomConfigData.version
+                    // 检查流程是否更新，有更新则显示更新按钮
+                    if (
+                        this.subprocessInfo
+                        && this.subprocessInfo.details
+                    ) {
+                        this.subprocessInfo.details.some(subflow => {
+                            if (
+                                subflow.expired
+                                && subflow.template_id === Number(this.currentAtom)
+                                && subflow.subprocess_node_id === this.nodeId
+                            ) {
+                                this.subflowHasUpdate = true
+                            }
+                        })
                     }
 
-                    const atomConfig = this.atomFormConfig[atomType]
-                    let currentFormConfig = {}
-
-                    if (custom_type) {
-                        currentFormConfig = atomConfig && atomConfig[0]
-                    } else {
-                        currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
+                    for (const cKey in this.subAtomConfigData.form) {
+                        const variable = tools.deepClone(this.subAtomConfigData.form[cKey])
+                        if (variable.show_type === 'show') {
+                            variableArray.push(variable)
+                        }
                     }
-                    
-                    if (currentFormConfig) {
-                        if (form.is_meta || currentFormConfig.meta_transform) {
-                            currentFormConfig = currentFormConfig.meta_transform(form.meta || form)
-                            if (!form.meta) {
-                                form.value = currentFormConfig.attrs.value
+                    variableArray = variableArray.sort((a, b) => {
+                        return a.index - b.index
+                    })
+                    // 遍历加载标准插件表单配置文件
+                    for (const form of variableArray) {
+                        const { key, source_tag, custom_type } = form
+                        let atomType = ''
+                        let tagCode = ''
+                        let classify = ''
+                        if (custom_type) {
+                            atomType = form.custom_type
+                            classify = 'variable'
+                        } else {
+                            [atomType, tagCode] = source_tag.split('.')
+                            classify = 'component'
+                        }
+                        if (!this.atomFormConfig[atomType]) {
+                            await this.loadAtomConfig({ atomType, classify })
+                            this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
+                        }
+                        const atomConfig = this.atomFormConfig[atomType]
+                        let currentFormConfig = {}
+                        if (custom_type) {
+                            currentFormConfig = atomConfig && atomConfig[0]
+                        } else {
+                            currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
+                        }
+                        
+                        if (currentFormConfig) {
+                            if (form.is_meta || currentFormConfig.meta_transform) {
+                                currentFormConfig = currentFormConfig.meta_transform(form.meta || form)
+                                if (!form.meta) {
+                                    form.value = currentFormConfig.attrs.value
+                                }
                             }
+                            currentFormConfig.tag_code = key
+                            currentFormConfig.attrs.name = this.subAtomConfigData.form[key].name
+                            inputConfig.push(currentFormConfig)
                         }
-                        currentFormConfig.tag_code = key
-                        currentFormConfig.attrs.name = this.subAtomConfigData.form[key].name
-                        inputConfig.push(currentFormConfig)
+                        // 子流程表单项的取值
+                        // 首次添加、子流程切换、子流程更新时，取接口返回的 form
+                        // 编辑时，取 activities 里对应的全局变量 form
+                        constants[key] = this.activities[this.nodeId].constants[key] || form
                     }
-                    // 子流程表单项的取值
-                    // 首次添加、子流程切换、子流程更新时，取接口返回的 form
-                    // 编辑时，取 activities 里对应的全局变量 form
-                    constants[key] = this.activities[this.nodeId].constants[key] || form
-                }
-                this.$set(this.nodeConfigData, 'constants', tools.deepClone(constants))
-                for ( let key in this.subAtomConfigData.outputs ) {
-                    const output = this.subAtomConfigData.outputs[key]
-                    const item = {
-                        key,
-                        name: output.name
+                    this.$set(this.nodeConfigData, 'constants', tools.deepClone(constants))
+                    for (const key in this.subAtomConfigData.outputs) {
+                        const output = this.subAtomConfigData.outputs[key]
+                        const item = {
+                            key,
+                            name: output.name
+                        }
+                        outputConfig.push(item)
                     }
-                    outputConfig.push(item)
+                    this.subAtomInput = inputConfig
+                    this.subAtomOutput = outputConfig
+                    this.getNodeFormData()
+                    this.$nextTick(() => {
+                        this.updateActivities()
+                        this.markInvalidForm()
+                    })
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.atomConfigLoading = false
+                }
+            },
+            /**
+             * normal task node render form value
+             */
+            setNodeConfigData (atomType) {
+                const data = {}
+                const config = this.atomFormConfig[atomType]
+                if (atomType === this.activities[this.nodeId].component.code) {
+                    this.nodeConfigData = tools.deepClone(this.activities[this.nodeId])
+                } else {
+                    config.forEach(item => {
+                        data[item.tag_code] = {
+                            hook: false
+                        }
+                    })
+                    this.$set(this.nodeConfigData, 'component', {
+                        code: atomType,
+                        data
+                    })
                 }
-                this.subAtomInput = inputConfig
-                this.subAtomOutput = outputConfig
                 this.getNodeFormData()
                 this.$nextTick(() => {
                     this.updateActivities()
                     this.markInvalidForm()
                 })
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.atomConfigLoading = false
-            }
-        },
-        /**
-         * normal task node render form value
-         */
-        setNodeConfigData (atomType) {
-            const data = {}
-            const config = this.atomFormConfig[atomType]
-            if (atomType === this.activities[this.nodeId].component.code) {
-                this.nodeConfigData = tools.deepClone(this.activities[this.nodeId])
-            } else {
-                config.forEach(item => {
-                    data[item.tag_code] =  {
-                        hook: false
-                    }
-                })
-                this.$set(this.nodeConfigData, 'component', {
-                    code: atomType,
-                    data
-                })
-            }
-            this.getNodeFormData()
-            this.$nextTick(() => {
-                this.updateActivities()
-                this.markInvalidForm()
-            })
-        },
-        /**
-         * configure node config fields
-         */
-        getNodeFormData () {
-            const formData = tools.deepClone(this.nodeConfigData)
-            this.nodeName = formData.name
-            this.stageName = formData.stage_name
-            this.nodeCouldBeSkipped = formData.optional
-            this.isSkip = formData.isSkipped
-            this.isRetry = formData.can_retry
-            const inputFormHooks = {}
-            const inputFormData = {}
-            if (this.isSingleAtom) {
-                const data = tools.deepClone(formData.component.data)
-                this.currentAtom = formData.component.code || ''
-                this.errorCouldBeIgnored = formData.error_ignorable
-                for (let form in data) {
-                    inputFormHooks[form] = data[form].hook || false
-                    if ('value' in data[form]) {
-                        inputFormData[form] = tools.deepClone(data[form].value)
+            },
+            /**
+             * configure node config fields
+             */
+            getNodeFormData () {
+                const formData = tools.deepClone(this.nodeConfigData)
+                this.nodeName = formData.name
+                this.stageName = formData.stage_name
+                this.nodeCouldBeSkipped = formData.optional
+                this.isSkip = formData.isSkipped
+                this.isRetry = formData.can_retry
+                const inputFormHooks = {}
+                const inputFormData = {}
+                if (this.isSingleAtom) {
+                    const data = tools.deepClone(formData.component.data)
+                    this.currentAtom = formData.component.code || ''
+                    this.errorCouldBeIgnored = formData.error_ignorable
+                    for (const form in data) {
+                        inputFormHooks[form] = data[form].hook || false
+                        if ('value' in data[form]) {
+                            inputFormData[form] = tools.deepClone(data[form].value)
+                        }
                     }
-                }
-            } else {
-                this.currentAtom = formData.template_id
-                for (let key in formData.constants) {
-                    const form = formData.constants[key]
-                    const tagCode = key.match(varKeyReg)[1]
-                    const inputConfig = this.subAtomInput.filter(item => item.variableKey === key)[0]
-                    form.hook = this.iskeyInSourceInfo(key, tagCode)
-                    inputFormHooks[key] = form.hook
-                    if ('value' in form) {
-                        inputFormData[key] = tools.deepClone(form.value)
+                } else {
+                    this.currentAtom = formData.template_id
+                    for (const key in formData.constants) {
+                        const form = formData.constants[key]
+                        const tagCode = key.match(varKeyReg)[1]
+                        form.hook = this.iskeyInSourceInfo(key, tagCode)
+                        inputFormHooks[key] = form.hook
+                        if ('value' in form) {
+                            inputFormData[key] = tools.deepClone(form.value)
+                        }
                     }
                 }
-            }
-            this.inputAtomHook = inputFormHooks
-            this.inputAtomData = inputFormData
-        },
-        getSingleAtomConfig () {
-            const config = this.atomFormConfig[this.currentAtom]
-            if (!config) {
-                return {}
-            }
-            return config.map(item => {
-                return {
-                    variableKey: item.tag_code,
-                    ...item
+                this.inputAtomHook = inputFormHooks
+                this.inputAtomData = inputFormData
+            },
+            getSingleAtomConfig () {
+                const config = this.atomFormConfig[this.currentAtom]
+                if (!config) {
+                    return {}
                 }
-            })
-        },
-        getOutputConfig () {
-            return this.isSingleAtom ? this.atomFormOutput[this.currentAtom] : this.subAtomOutput
-        },
-        getHookedInputVariables () {
-            const variables = []
-            for (let key in this.renderInputData.hook){
-                if (this.renderInputData.hook[key]) {
-                    const variableKey = this.inputAtomData[key]
-                    variables.push({
-                        variableKey,
-                        formKey: key,
-                        id: this.nodeId,
-                        tagCode: varKeyReg.test(key) ? key.match(varKeyReg)[1] : key
-                    })
+                return config.map(item => {
+                    return {
+                        variableKey: item.tag_code,
+                        ...item
+                    }
+                })
+            },
+            getOutputConfig () {
+                return this.isSingleAtom ? this.atomFormOutput[this.currentAtom] : this.subAtomOutput
+            },
+            getHookedInputVariables () {
+                const variables = []
+                for (const key in this.renderInputData.hook) {
+                    if (this.renderInputData.hook[key]) {
+                        const variableKey = this.inputAtomData[key]
+                        variables.push({
+                            variableKey,
+                            formKey: key,
+                            id: this.nodeId,
+                            tagCode: varKeyReg.test(key) ? key.match(varKeyReg)[1] : key
+                        })
+                    }
                 }
-            }
-            return variables
-        },
-        /**
-         * the key is in the source_info field
-         */
-        iskeyInSourceInfo (key, tagCode) {
-            for (let cKey in this.constants) {
-                let constant = this.constants[cKey]
-                const sourceInfo = constant.source_info[this.nodeId]
+                return variables
+            },
+            /**
+             * the key is in the source_info field
+             */
+            iskeyInSourceInfo (key, tagCode) {
+                for (const cKey in this.constants) {
+                    const constant = this.constants[cKey]
+                    const sourceInfo = constant.source_info[this.nodeId]
 
-                if (
-                    constant.source_type === 'component_inputs' &&
-                    sourceInfo &&
-                    (sourceInfo.indexOf(tagCode) > -1 || sourceInfo.indexOf(key) > -1)
-                ) {
-                    return true
-                }
-            }
-            return false
-        },
-        /**
-         * 处理节点配置面板和全局变量面板之外的点击事件
-         */
-        handleNodeConfigPanelShow (e) {
-            if (!this.isNodeConfigPanelShow || this.isReuseVarDialogShow) {
-                return
-            }
-            const settingPanel = document.querySelector(".setting-area-wrap")
-            const nodeConfig = document.querySelector(".node-config")
-            if (settingPanel && nodeConfig) {
-                if ((!dom.nodeContains(settingPanel, e.target) &&
-                    !dom.nodeContains(nodeConfig, e.target))
-                ) {
-                    this.syncNodeDataToActivities()
-                }
-            }
-        },
-        /**
-         * 同步配置面板数据到store
-         */
-        syncNodeDataToActivities () {
-            this.updateActivities()
-            return this.updateNodeInfo()
-        },
-        updateActivities () {
-            const nodeData = tools.deepClone(this.nodeConfigData)
-            nodeData.name = this.nodeName
-            nodeData.stage_name = this.stageName
-            nodeData.optional = this.nodeCouldBeSkipped
-            nodeData.isSkipped = this.isSkip
-            nodeData.can_retry = this.isRetry
-            if (this.isSingleAtom) {
-                nodeData.error_ignorable = this.errorCouldBeIgnored
-                for (let key in this.inputAtomData) {
-                    nodeData.component.data[key] = {
-                        hook: this.inputAtomHook[key] || false,
-                        value: tools.deepClone(this.inputAtomData[key])
+                    if (
+                        constant.source_type === 'component_inputs'
+                        && sourceInfo
+                        && (sourceInfo.indexOf(tagCode) > -1 || sourceInfo.indexOf(key) > -1)
+                    ) {
+                        return true
                     }
                 }
-            } else {
-                const constants = tools.deepClone(this.subAtomConfigData.form)
-                for (let key in this.inputAtomData) {
-                    constants[key] && (constants[key].value = tools.deepClone(this.inputAtomData[key]))
-                }
-                nodeData.constants = constants
-            }
-            this.setActivities({type: 'edit', location: nodeData})
-        },
-        /**
-         * 更新节点信息，校验表单参数
-         */
-        updateNodeInfo () {
-            let isValid = true
-            return this.$validator.validateAll().then(result => {
-                let status = ''
-                let formValid = true
-                if (!this.currentAtom) {
-                    this.taskTypeEmpty = true
+                return false
+            },
+            /**
+             * 处理节点配置面板和全局变量面板之外的点击事件
+             */
+            handleNodeConfigPanelShow (e) {
+                if (!this.isNodeConfigPanelShow || this.isReuseVarDialogShow) {
+                    return
                 }
-                if (this.$refs.renderForm) {
-                    formValid = this.$refs.renderForm.validate()
+                const settingPanel = document.querySelector('.setting-area-wrap')
+                const nodeConfig = document.querySelector('.node-config')
+                if (settingPanel && nodeConfig) {
+                    if ((!dom.nodeContains(settingPanel, e.target)
+                        && !dom.nodeContains(nodeConfig, e.target))
+                    ) {
+                        this.syncNodeDataToActivities()
+                    }
                 }
-                if (!this.currentAtom || !result || !formValid) {
-                    isValid = false
-                    status = 'FAILED'
+            },
+            /**
+             * 同步配置面板数据到store
+             */
+            syncNodeDataToActivities () {
+                this.updateActivities()
+                return this.updateNodeInfo()
+            },
+            updateActivities () {
+                const nodeData = tools.deepClone(this.nodeConfigData)
+                nodeData.name = this.nodeName
+                nodeData.stage_name = this.stageName
+                nodeData.optional = this.nodeCouldBeSkipped
+                nodeData.isSkipped = this.isSkip
+                nodeData.can_retry = this.isRetry
+                if (this.isSingleAtom) {
+                    nodeData.error_ignorable = this.errorCouldBeIgnored
+                    for (const key in this.inputAtomData) {
+                        nodeData.component.data[key] = {
+                            hook: this.inputAtomHook[key] || false,
+                            value: tools.deepClone(this.inputAtomData[key])
+                        }
+                    }
+                } else {
+                    const constants = tools.deepClone(this.subAtomConfigData.form)
+                    for (const key in this.inputAtomData) {
+                        constants[key] && (constants[key].value = tools.deepClone(this.inputAtomData[key]))
+                    }
+                    nodeData.constants = constants
                 }
-                this.$emit('onUpdateNodeInfo', this.nodeId, {
-                    status,
-                    name: this.nodeName,
-                    stage_name: this.stageName,
-                    optional: this.nodeCouldBeSkipped,
-                    error_ignorable: this.errorCouldBeIgnored,
-                    can_retry: this.isRetry,
-                    isSkipped: this.isSkip
-                })
-                this.$emit('hideConfigPanel')
-                return isValid
-            })
-        },
-        markInvalidForm () {
-            const nodeEls = document.querySelector('#' + this.nodeId).querySelector('.node-with-text')
-            if (nodeEls && !this.isAtomChanged) {
-                const status = nodeEls.dataset.status
-                if (status === 'FAILED') {
-                    this.$validator.validateAll()
-                    this.$refs.renderForm && this.$refs.renderForm.validate()
+                this.setActivities({ type: 'edit', location: nodeData })
+            },
+            /**
+             * 更新节点信息，校验表单参数
+             */
+            updateNodeInfo () {
+                let isValid = true
+                return this.$validator.validateAll().then(result => {
+                    let status = ''
+                    let formValid = true
                     if (!this.currentAtom) {
                         this.taskTypeEmpty = true
                     }
+                    if (this.$refs.renderForm) {
+                        formValid = this.$refs.renderForm.validate()
+                    }
+                    if (!this.currentAtom || !result || !formValid) {
+                        isValid = false
+                        status = 'FAILED'
+                    }
+                    this.$emit('onUpdateNodeInfo', this.nodeId, {
+                        status,
+                        name: this.nodeName,
+                        stage_name: this.stageName,
+                        optional: this.nodeCouldBeSkipped,
+                        error_ignorable: this.errorCouldBeIgnored,
+                        can_retry: this.isRetry,
+                        isSkipped: this.isSkip
+                    })
+                    this.$emit('hideConfigPanel')
+                    return isValid
+                })
+            },
+            markInvalidForm () {
+                const nodeEls = document.querySelector('#' + this.nodeId).querySelector('.node-with-text')
+                if (nodeEls && !this.isAtomChanged) {
+                    const status = nodeEls.dataset.status
+                    if (status === 'FAILED') {
+                        this.$validator.validateAll()
+                        this.$refs.renderForm && this.$refs.renderForm.validate()
+                        if (!this.currentAtom) {
+                            this.taskTypeEmpty = true
+                        }
+                    }
                 }
-            }
-        },
-        /**
-         * 切换标准插件节点，清空勾选的变量
-         */
-        clearHookedVaribles (hookedInputs, outputs) {
-            hookedInputs.forEach(item => {
-                const {id, variableKey, formKey, tagCode} = item
-                const variable = this.constants[variableKey]
-                this.setVariableSourceInfo({type: 'delete', id, key: variableKey, tagCode: formKey})
-                if (variable && !Object.keys(variable.source_info).length) {
-                    this.deleteVariable(variableKey)
-                }
-            })
-            this.taskTypeEmpty = false
-            outputs.forEach(item => {
-                if (item.hook) {
-                    this.deleteVariable(item.key)
+            },
+            /**
+             * 切换标准插件节点，清空勾选的变量
+             */
+            clearHookedVaribles (hookedInputs, outputs) {
+                hookedInputs.forEach(item => {
+                    const { id, variableKey, formKey } = item
+                    const variable = this.constants[variableKey]
+                    this.setVariableSourceInfo({ type: 'delete', id, key: variableKey, tagCode: formKey })
+                    if (variable && !Object.keys(variable.source_info).length) {
+                        this.deleteVariable(variableKey)
+                    }
+                })
+                this.taskTypeEmpty = false
+                outputs.forEach(item => {
+                    if (item.hook) {
+                        this.deleteVariable(item.key)
+                    }
+                })
+            },
+            onAtomSelect (id, data) {
+                this.isAtomChanged = true
+                let nodeName
+                this.clearHookedVaribles(this.getHookedInputVariables(), this.renderOutputData)
+                this.currentAtom = id
+                if (this.isSingleAtom) {
+                    nodeName = data.name.split('-').slice(1).join().replace(/\s/g, '')
+                } else {
+                    // 切换子流程时，去掉节点小红点、刷新按钮、节点过期设为 false
+                    this.$emit('onUpdateNodeInfo', this.idOfNodeInConfigPanel, { hasUpdated: false })
+                    this.subflowHasUpdate = false
+                    this.setSubprocessUpdated({
+                        template_id: Number(this.currentAtom),
+                        subprocess_node_id: this.idOfNodeInConfigPanel
+                    })
+
+                    nodeName = data.name.replace(/\s/g, '')
+                    this.subAtomConfigData.form = {}
+                    this.inputAtomHook = {}
+                    this.inputAtomData = {}
                 }
-            })
-        },
-        onAtomSelect (id, data) {
-            this.isAtomChanged = true
-            let nodeName
-            this.clearHookedVaribles(this.getHookedInputVariables(), this.renderOutputData)
-            this.currentAtom = id
-            if (this.isSingleAtom) {
-                nodeName = data.name.split('-').slice(1).join().replace(/\s/g, '')
-            } else {
-                // 切换子流程时，去掉节点小红点、刷新按钮、节点过期设为 false
-                this.$emit('onUpdateNodeInfo', this.idOfNodeInConfigPanel, { hasUpdated: false })
-                this.subflowHasUpdate = false
-                this.setSubprocessUpdated({
-                    template_id: Number(this.currentAtom),
-                    subprocess_node_id: this.idOfNodeInConfigPanel
+                this.nodeName = nodeName
+                this.nodeConfigData.name = nodeName
+                this.updateActivities()
+                this.getConfig()
+                this.$nextTick(() => {
+                    this.isAtomChanged = false
                 })
+            },
+            /**
+             * 更新子流程版本
+             * 去掉节点小红点、模板刷新按钮
+             * 更新 store 数据状态
+             */
+            onUpdateSubflowVersion () {
+                const oldInputAtomHook = this.inputAtomHook
+                const oldInputAtomData = this.inputAtomData
 
-                nodeName = data.name.replace(/\s/g, '')
+                // 清空 store 里的 constants 值
                 this.subAtomConfigData.form = {}
                 this.inputAtomHook = {}
                 this.inputAtomData = {}
-            }
-            this.nodeName = nodeName
-            this.nodeConfigData.name = nodeName
-            this.updateActivities()
-            this.getConfig()
-            this.$nextTick(() => {
-                this.isAtomChanged = false
-            })
-        },
-        /**
-         * 更新子流程版本
-         * 去掉节点小红点、模板刷新按钮
-         * 更新 store 数据状态
-         */
-        onUpdateSubflowVersion () {
-            const oldInputAtomHook = this.inputAtomHook
-            const oldInputAtomData = this.inputAtomData
-
-            // 清空 store 里的 constants 值
-            this.subAtomConfigData.form = {}
-            this.inputAtomHook = {}
-            this.inputAtomData = {}
-            this.updateActivities()
-
-            this.getSubflowConfig(this.currentAtom).then(()=> {
-                const newInputAtomData = tools.deepClone(this.inputAtomData)
-                Object.keys(oldInputAtomData).forEach(key => {
-                    if (this.inputAtomData.hasOwnProperty(key)) {
-                        this.$set(this.inputAtomData, key, oldInputAtomData[key])
-                    } else if (oldInputAtomHook[key]) {
-                        const variable = [
-                            {
-                                variableKey: key,
-                                formKey: key,
-                                id: this.nodeId,
-                                tagCode: key
-                            }
-                        ]
-                        this.clearHookedVaribles(variable, [])
-                    }
-                })
                 this.updateActivities()
-                this.subflowHasUpdate = false
-                this.$emit('onUpdateNodeInfo', this.idOfNodeInConfigPanel, { hasUpdated: false })
-                this.setSubprocessUpdated({
-                    template_id: Number(this.currentAtom),
-                    subprocess_node_id: this.idOfNodeInConfigPanel,
-                    version: this.subAtomConfigData.version
+
+                this.getSubflowConfig(this.currentAtom).then(() => {
+                    Object.keys(oldInputAtomData).forEach(key => {
+                        if (this.inputAtomData.hasOwnProperty(key)) {
+                            this.$set(this.inputAtomData, key, oldInputAtomData[key])
+                        } else if (oldInputAtomHook[key]) {
+                            const variable = [
+                                {
+                                    variableKey: key,
+                                    formKey: key,
+                                    id: this.nodeId,
+                                    tagCode: key
+                                }
+                            ]
+                            this.clearHookedVaribles(variable, [])
+                        }
+                    })
+                    this.updateActivities()
+                    this.subflowHasUpdate = false
+                    this.$emit('onUpdateNodeInfo', this.idOfNodeInConfigPanel, { hasUpdated: false })
+                    this.setSubprocessUpdated({
+                        template_id: Number(this.currentAtom),
+                        subprocess_node_id: this.idOfNodeInConfigPanel,
+                        version: this.subAtomConfigData.version
+                    })
                 })
-            })
-        },
-        onErrorIngoredChange (selected) {
-            this.errorCouldBeIgnored = selected
-        },
-        onSkippedChange (selected) {
-            this.nodeCouldBeSkipped = selected
-        },
-        /**
-         * 输入参数值更新
-         */
-        onInputDataChange (val) {
-            this.inputAtomData = val
-        },
-        // 输入参数勾选、反勾选
-        onInputHookChange (tagCode, val) {
-            let name, key, source_tag, source_info, custom_type, value, validation
-            // 变量 key 值
-            let variableKey = /^\$\{[\w]*\}$/.test(tagCode) ? tagCode : '${' + tagCode + '}'
-            const formConfig = this.renderInputConfig.filter(item => {
-                return item.tag_code === tagCode
-            })[0]
+            },
+            onErrorIngoredChange (selected) {
+                this.errorCouldBeIgnored = selected
+            },
+            onSkippedChange (selected) {
+                this.nodeCouldBeSkipped = selected
+            },
+            /**
+             * 输入参数值更新
+             */
+            onInputDataChange (val) {
+                this.inputAtomData = val
+            },
+            // 输入参数勾选、反勾选
+            onInputHookChange (tagCode, val) {
+                let key, source_tag, source_info, custom_type, value, validation
+                // 变量 key 值
+                let variableKey = /^\$\{[\w]*\}$/.test(tagCode) ? tagCode : '${' + tagCode + '}'
+                const formConfig = this.renderInputConfig.filter(item => {
+                    return item.tag_code === tagCode
+                })[0]
 
-            name = formConfig.attrs.name.replace(/\s/g, '')
+                const name = formConfig.attrs.name.replace(/\s/g, '')
 
-            if (this.isSingleAtom) {
-                key = tagCode
-                source_tag = this.nodeConfigData.component.code + '.' + tagCode
-                source_info = {[this.nodeId]: [tagCode]}
-                custom_type = ''
-                value = tools.deepClone(this.inputAtomData[tagCode])
-            } else {
-                const variable = this.subAtomConfigData.form[variableKey]
-                key = variableKey
-                tagCode = tagCode.match(varKeyReg)[1]
-                source_info = {[this.nodeId]: [variableKey]}
-                custom_type = variable.custom_type
-                value = tools.deepClone(this.inputAtomData[key])
-                if (formConfig.type === 'combine') {
-                    source_tag = variable.source_tag.split('.')[0] + '.' + variableKey
+                if (this.isSingleAtom) {
+                    key = tagCode
+                    source_tag = this.nodeConfigData.component.code + '.' + tagCode
+                    source_info = { [this.nodeId]: [tagCode] }
+                    custom_type = ''
+                    value = tools.deepClone(this.inputAtomData[tagCode])
                 } else {
-                    source_tag = variable.source_tag
-                    validation = variable.validation
+                    const variable = this.subAtomConfigData.form[variableKey]
+                    key = variableKey
+                    tagCode = tagCode.match(varKeyReg)[1]
+                    source_info = { [this.nodeId]: [variableKey] }
+                    custom_type = variable.custom_type
+                    value = tools.deepClone(this.inputAtomData[key])
+                    if (formConfig.type === 'combine') {
+                        source_tag = variable.source_tag.split('.')[0] + '.' + variableKey
+                    } else {
+                        source_tag = variable.source_tag
+                        validation = variable.validation
+                    }
                 }
-            }
-            this.$set(this.inputAtomHook, key, val)
+                this.$set(this.inputAtomHook, key, val)
 
-            if (val) { // hooked
-                const variableList = []
-                if (!source_tag) { // custom variable not include ip selector
-                    const variableOpts = {
-                        name, key: variableKey, source_info, custom_type, value, validation
+                if (val) { // hooked
+                    const variableList = []
+                    if (!source_tag) { // custom variable not include ip selector
+                        const variableOpts = {
+                            name, key: variableKey, source_info, custom_type, value, validation
+                        }
+                        this.$set(this.inputAtomData, key, variableKey)
+                        this.createVariable(variableOpts)
+                        return
                     }
-                    this.$set(this.inputAtomData, key, variableKey)
-                    this.createVariable(variableOpts)
-                    return
-                }
-                for (let cKey in this.constants) {
-                    const constant = this.constants[cKey]
-                    const sTag = constant.source_tag
-                    if (sTag) {
-                        const tCode = sTag.split('.')[1]
-                        tCode === tagCode && variableList.push({
-                            name: `${constant.name}(${constant.key})`,
-                            id: constant.key
-                        })
+                    for (const cKey in this.constants) {
+                        const constant = this.constants[cKey]
+                        const sTag = constant.source_tag
+                        if (sTag) {
+                            const tCode = sTag.split('.')[1]
+                            tCode === tagCode && variableList.push({
+                                name: `${constant.name}(${constant.key})`,
+                                id: constant.key
+                            })
+                        }
                     }
-                }
-                const isKeyUsedInConstants = variableKey in this.constants
+                    const isKeyUsedInConstants = variableKey in this.constants
 
-                if (variableList.length) {// input arguments include ip selector have same soure_tag
-                    this.reuseVariable = {name, key, source_tag, source_info, value, useNewKey: false}
-                    this.reuseableVarList = variableList
-                    this.isReuseVarDialogShow = true
-                } else if (isKeyUsedInConstants){ // the variable's key is used in other global variable
-                    this.reuseVariable = {name, key, source_tag, source_info, value, useNewKey: true}
-                    this.reuseableVarList = variableList
-                    this.isReuseVarDialogShow = true
-                } else {
-                    const variableOpts = {
-                        name, key: variableKey, source_tag, source_info, custom_type, value
+                    if (variableList.length) { // input arguments include ip selector have same soure_tag
+                        this.reuseVariable = { name, key, source_tag, source_info, value, useNewKey: false }
+                        this.reuseableVarList = variableList
+                        this.isReuseVarDialogShow = true
+                    } else if (isKeyUsedInConstants) { // the variable's key is used in other global variable
+                        this.reuseVariable = { name, key, source_tag, source_info, value, useNewKey: true }
+                        this.reuseableVarList = variableList
+                        this.isReuseVarDialogShow = true
+                    } else {
+                        const variableOpts = {
+                            name, key: variableKey, source_tag, source_info, custom_type, value
+                        }
+                        this.$set(this.inputAtomData, key, variableKey)
+                        this.createVariable(variableOpts) // input arguments hook
+                    }
+                } else { // cancel hook
+                    variableKey = this.inputAtomData[key] // variable key
+                    const variable = this.constants[variableKey]
+                    if (!variable) {
+                        return
                     }
-                    this.$set(this.inputAtomData, key, variableKey)
-                    this.createVariable(variableOpts) // input arguments hook
-                    return
-                }
-            } else {  // cancel hook
-                variableKey = this.inputAtomData[key] // variable key
-                const variable = this.constants[variableKey]
-                if (!variable) {
-                    return
-                }
 
-                const formKey = this.isSingleAtom ? tagCode : key // input arguments form item key
-                this.inputAtomHook[formKey] = val
-                this.inputAtomData[formKey] = tools.deepClone(this.constants[variableKey].value)
-                this.setVariableSourceInfo({type: 'delete', id: this.nodeId, key: variableKey, tagCode: formKey})
-                if (variable && !Object.keys(variable.source_info).length) {
-                    this.deleteVariable(variableKey)
+                    const formKey = this.isSingleAtom ? tagCode : key // input arguments form item key
+                    this.inputAtomHook[formKey] = val
+                    this.inputAtomData[formKey] = tools.deepClone(this.constants[variableKey].value)
+                    this.setVariableSourceInfo({ type: 'delete', id: this.nodeId, key: variableKey, tagCode: formKey })
+                    if (variable && !Object.keys(variable.source_info).length) {
+                        this.deleteVariable(variableKey)
+                    }
                 }
-            }
-        },
-        onOutputHookChange (name, key, checked) {
-            if (checked) {
-                let variableKey = this.generateRandomKey(key)
+            },
+            onOutputHookChange (name, key, checked) {
+                if (checked) {
+                    const variableKey = this.generateRandomKey(key)
 
-                const variableOpts = {
-                    name,
-                    key: variableKey,
-                    source_type: 'component_outputs',
-                    source_info: {
-                        [this.nodeId]: [key]
-                    },
-                    source_tag: '',
-                    custom_type: '',
-                    show_type: 'hide'
-                }
-                this.renderOutputData.some(item => {
-                    if (item.key === key) {
-                        this.$set(item, 'key', variableKey)
-                        return true
+                    const variableOpts = {
+                        name,
+                        key: variableKey,
+                        source_type: 'component_outputs',
+                        source_info: {
+                            [this.nodeId]: [key]
+                        },
+                        source_tag: '',
+                        custom_type: '',
+                        show_type: 'hide'
                     }
-                })
-                this.createVariable(variableOpts)
-            } else {
-                const constant = this.constants[key]
-                if (constant) {
-                    this.deleteVariable(key)
-                }
-            }
-        },
-        /**
-         * 参数不复用，创建新变量
-         */
-        createVariable (variableOpts) {
-            const len = Object.keys(this.constants).length
-            const defaultOpts = {
-                name: '',
-                key: '',
-                desc: '',
-                custom_type: '',
-                source_info: {},
-                source_tag: '',
-                value: '',
-                show_type: 'show',
-                source_type: 'component_inputs',
-                validation: '',
-                index: len
-            }
-            const variable = Object.assign({}, defaultOpts, variableOpts)
-            this.addVariable(Object.assign({}, variable))
-        },
-        generateRandomKey (key) {
-            let variableKey = key.replace(/^\$\{/, '').replace(/(\}$)/, '').slice(0, 14)
-            do {
-                variableKey = '${' + variableKey + '_' + random4() + '}'
-            } while (this.constants[variableKey])
-            return variableKey
-        },
-        // 变量复用弹窗确认
-        onConfirmReuseVar (variableConfig) {
-            let  { type, name, key, varKey, source_tag, source_info, value } = variableConfig
-            if (type === 'create') {  // create new variable
-                if (this.constants[varKey]) {
-                    this.$bkMessage({
-                        message: gettext('变量KEY已存在'),
-                        theme: 'error'
+                    this.renderOutputData.some(item => {
+                        if (item.key === key) {
+                            this.$set(item, 'key', variableKey)
+                            return true
+                        }
                     })
-                    return
+                    this.createVariable(variableOpts)
+                } else {
+                    const constant = this.constants[key]
+                    if (constant) {
+                        this.deleteVariable(key)
+                    }
+                }
+            },
+            /**
+             * 参数不复用，创建新变量
+             */
+            createVariable (variableOpts) {
+                const len = Object.keys(this.constants).length
+                const defaultOpts = {
+                    name: '',
+                    key: '',
+                    desc: '',
+                    custom_type: '',
+                    source_info: {},
+                    source_tag: '',
+                    value: '',
+                    show_type: 'show',
+                    source_type: 'component_inputs',
+                    validation: '',
+                    index: len
                 }
+                const variable = Object.assign({}, defaultOpts, variableOpts)
+                this.addVariable(Object.assign({}, variable))
+            },
+            generateRandomKey (key) {
+                let variableKey = key.replace(/^\$\{/, '').replace(/(\}$)/, '').slice(0, 14)
+                do {
+                    variableKey = '${' + variableKey + '_' + random4() + '}'
+                } while (this.constants[variableKey])
+                return variableKey
+            },
+            // 变量复用弹窗确认
+            onConfirmReuseVar (variableConfig) {
+                const { type, name, key, varKey, source_tag, source_info, value } = variableConfig
+                if (type === 'create') { // create new variable
+                    if (this.constants[varKey]) {
+                        this.$bkMessage({
+                            message: gettext('变量KEY已存在'),
+                            theme: 'error'
+                        })
+                        return
+                    }
 
-                this.$set(this.inputAtomHook, varKey, true)
-                this.$set(this.inputAtomData, key, varKey)
-                const variableOpts = {name, key: varKey, source_tag, source_info, value}
-                this.createVariable(variableOpts)
-            } else {
-                this.$set(this.inputAtomHook, varKey, true)
-                this.$set(this.inputAtomData, key, varKey)
-                this.setVariableSourceInfo({type: 'add', id: this.nodeId, key: varKey, tagCode: key, value})
-            }
+                    this.$set(this.inputAtomHook, varKey, true)
+                    this.$set(this.inputAtomData, key, varKey)
+                    const variableOpts = { name, key: varKey, source_tag, source_info, value }
+                    this.createVariable(variableOpts)
+                } else {
+                    this.$set(this.inputAtomHook, varKey, true)
+                    this.$set(this.inputAtomData, key, varKey)
+                    this.setVariableSourceInfo({ type: 'add', id: this.nodeId, key: varKey, tagCode: key, value })
+                }
 
-            this.isReuseVarDialogShow = false
-        },
-        onCancelReuseVar (reuseVariable) {
-            const  { key } = reuseVariable
-            this.inputAtomHook[key] = false
-            this.isReuseVarDialogShow = false
-        },
-        onDeleteConstant (constant) {
-            let { source_info, source_type, value, key } = constant
-            if (source_type === 'component_inputs') {
-                const quotedByParams = source_info[this.nodeId]
-                if (quotedByParams) {
-                    quotedByParams.forEach(item => {
-                        let key = item
-                        if (!this.isSingleAtom) {
-                            key = varKeyReg.test(item) ? item : '${' + item + '}'
-                        }
-                        this.inputAtomHook[key] = false
-                        this.inputAtomData[key] = tools.deepClone(value)
-                    })
+                this.isReuseVarDialogShow = false
+            },
+            onCancelReuseVar (reuseVariable) {
+                const { key } = reuseVariable
+                this.inputAtomHook[key] = false
+                this.isReuseVarDialogShow = false
+            },
+            onDeleteConstant (constant) {
+                const { source_info, source_type, value } = constant
+                if (source_type === 'component_inputs') {
+                    const quotedByParams = source_info[this.nodeId]
+                    if (quotedByParams) {
+                        quotedByParams.forEach(item => {
+                            let key = item
+                            if (!this.isSingleAtom) {
+                                key = varKeyReg.test(item) ? item : '${' + item + '}'
+                            }
+                            this.inputAtomHook[key] = false
+                            this.inputAtomData[key] = tools.deepClone(value)
+                        })
+                    }
                 }
+            },
+            onIgnoredChange (updatedValue) {
+                this.isDisable = updatedValue
+                this.manuallyEmpty = !updatedValue
+                this.isSkip = false
+                this.isRetry = false
+                this.errorCouldBeIgnored = updatedValue
             }
-        },
-        onIgnoredChange (updatedValue) {
-            this.isDisable = updatedValue
-            this.manuallyEmpty = !updatedValue
-            this.isSkip = false
-            this.isRetry = false
-            this.errorCouldBeIgnored = updatedValue
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/ReuseVarDialog.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/ReuseVarDialog.vue
index 90673b3c25..d30fb159a2 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/ReuseVarDialog.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/ReuseVarDialog.vue
@@ -35,7 +35,7 @@
                     <label>{{ i18n.new }}</label>
                     <div class="common-form-content">
                         <div class="new_variable-checkbox">
-                            <BaseCheckbox @checkCallback="onToggleCreateVar"/>
+                            <BaseCheckbox @checkCallback="onToggleCreateVar" />
                         </div>
                     </div>
                 </div>
@@ -46,7 +46,7 @@
                             <BaseInput
                                 name="variableName"
                                 v-model="varName"
-                                v-validate="variableNameRule"/>
+                                v-validate="variableNameRule" />
                             <span v-show="errors.has('variableName')" class="common-error-tip error-msg">{{ errors.first('variableName') }}</span>
                         </div>
                     </div>
@@ -56,7 +56,7 @@
                             <BaseInput
                                 name="variableKey"
                                 v-model="varKey"
-                                v-validate="variableKeyRule"/>
+                                v-validate="variableKeyRule" />
                             <span v-show="errors.has('variableKey')" class="common-error-tip error-msg">{{ errors.first('variableKey') }}</span>
                         </div>
                     </div>
@@ -66,115 +66,114 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState } from 'vuex'
-import { Validator } from 'vee-validate'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-export default {
-    name: 'ReuseVarDialog',
-    components: {
-        BaseCheckbox,
-        BaseInput
-    },
-    props: ['isReuseVarDialogShow', 'reuseVariable', 'reuseableVarList'],
-    data () {
-        return {
-            i18n: {
-                reuse: gettext("复用变量"),
-                new: gettext("新建变量"),
-                name: gettext("变量名称"),
-                key: gettext("变量KEY")
-            },
-            selectedVar: this.reuseVariable.useNewKey ? '' : this.reuseableVarList[0].id,
-            isCreateVar: this.reuseVariable.useNewKey,
-            varName: '',
-            varKey: '',
-            variableNameRule: {
-                required: true,
-                max: STRING_LENGTH.VARIABLE_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            variableKeyRule: {
-                required: true,
-                max: STRING_LENGTH.VARIABLE_KEY_MAX_LENGTH,
-                regex: /(^\${[a-zA-Z_]\w*}$)|(^[a-zA-Z_]\w*$)/, // 合法变量key正则，eg:${fsdf_f32sd},fsdf_f32sd
-                keyRepeat: true
-            },
-            isOverride: false
-        }
-    },
-    computed: {
-        ...mapState({
-            constants: state => state.template.constants
-        }),
-        isSelectDisabled () {
-            return this.isCreateVar
+    import '@/utils/i18n.js'
+    import { mapState } from 'vuex'
+    import { Validator } from 'vee-validate'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    export default {
+        name: 'ReuseVarDialog',
+        components: {
+            BaseCheckbox,
+            BaseInput
         },
-        title () {
-            if (this.reuseVariable.useNewKey) {
-                return gettext('变量KEY已存在，请创建新变量')
+        props: ['isReuseVarDialogShow', 'reuseVariable', 'reuseableVarList'],
+        data () {
+            return {
+                i18n: {
+                    reuse: gettext('复用变量'),
+                    new: gettext('新建变量'),
+                    name: gettext('变量名称'),
+                    key: gettext('变量KEY')
+                },
+                selectedVar: this.reuseVariable.useNewKey ? '' : this.reuseableVarList[0].id,
+                isCreateVar: this.reuseVariable.useNewKey,
+                varName: '',
+                varKey: '',
+                variableNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.VARIABLE_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                variableKeyRule: {
+                    required: true,
+                    max: STRING_LENGTH.VARIABLE_KEY_MAX_LENGTH,
+                    regex: /(^\${[a-zA-Z_]\w*}$)|(^[a-zA-Z_]\w*$)/, // 合法变量key正则，eg:${fsdf_f32sd},fsdf_f32sd
+                    keyRepeat: true
+                },
+                isOverride: false
             }
-            return gettext('是否复用变量')
-        }
-    },
-    created () {
-        const self = this
-        this.validator = new Validator({})
-        this.validator.extend('keyRepeat', (value) => {
-            value = /^\$\{\w+\}$/.test(value) ? value : '${' + value + '}'
-            if (value in this.constants) {
-                return false
+        },
+        computed: {
+            ...mapState({
+                constants: state => state.template.constants
+            }),
+            isSelectDisabled () {
+                return this.isCreateVar
+            },
+            title () {
+                if (this.reuseVariable.useNewKey) {
+                    return gettext('变量KEY已存在，请创建新变量')
+                }
+                return gettext('是否复用变量')
             }
-            return true
-        })
-    },
-    methods: {
-        onSelect (id) {
-            this.selectedVar = id
         },
-        onToggleCreateVar (checked) {
-            this.isCreateVar = checked
+        created () {
+            this.validator = new Validator({})
+            this.validator.extend('keyRepeat', (value) => {
+                value = /^\$\{\w+\}$/.test(value) ? value : '${' + value + '}'
+                if (value in this.constants) {
+                    return false
+                }
+                return true
+            })
         },
-        onConfirm ($event) {
-            this.$nextTick(() => {
-                this.$validator.validateAll().then((result) => {
-                    if (!result && this.isCreateVar) return
-                    let variableConfig
-                    if (this.isCreateVar) { // 新变量
-                        if (!/^\$\{[\w]*\}$/.test(this.varKey)) {
-                            this.varKey = "${" + this.varKey + "}"
-                        }
-                        variableConfig = {
-                            type: 'create',
-                            name: this.varName,
-                            key: this.reuseVariable.key,
-                            varKey: this.varKey,
-                            source_tag: this.reuseVariable.source_tag,
-                            source_info: this.reuseVariable.source_info,
-                            value: this.reuseVariable.value
-                        }
-                    } else { // 复用
-                        variableConfig = {
-                            type: 'reuse',
-                            name: this.reuseVariable.name,
-                            key: this.reuseVariable.key,
-                            varKey: this.selectedVar,
-                            source_tag: this.reuseVariable.source_tag,
-                            source_info: this.reuseVariable.source_info,
-                            value: this.reuseVariable.value
+        methods: {
+            onSelect (id) {
+                this.selectedVar = id
+            },
+            onToggleCreateVar (checked) {
+                this.isCreateVar = checked
+            },
+            onConfirm ($event) {
+                this.$nextTick(() => {
+                    this.$validator.validateAll().then((result) => {
+                        if (!result && this.isCreateVar) return
+                        let variableConfig
+                        if (this.isCreateVar) { // 新变量
+                            if (!/^\$\{[\w]*\}$/.test(this.varKey)) {
+                                this.varKey = '${' + this.varKey + '}'
+                            }
+                            variableConfig = {
+                                type: 'create',
+                                name: this.varName,
+                                key: this.reuseVariable.key,
+                                varKey: this.varKey,
+                                source_tag: this.reuseVariable.source_tag,
+                                source_info: this.reuseVariable.source_info,
+                                value: this.reuseVariable.value
+                            }
+                        } else { // 复用
+                            variableConfig = {
+                                type: 'reuse',
+                                name: this.reuseVariable.name,
+                                key: this.reuseVariable.key,
+                                varKey: this.selectedVar,
+                                source_tag: this.reuseVariable.source_tag,
+                                source_info: this.reuseVariable.source_info,
+                                value: this.reuseVariable.value
+                            }
                         }
-                    }
-                    this.$emit('onConfirmReuseVar', variableConfig)
+                        this.$emit('onConfirmReuseVar', variableConfig)
+                    })
                 })
-            })
-        },
-        onCancel () {
-            this.$emit('onCancelReuseVar', this.reuseVariable)
+            },
+            onCancel () {
+                this.$emit('onCancelReuseVar', this.reuseVariable)
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -253,4 +252,3 @@ export default {
 }
 
 </style>
-
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
index 611e68a4c0..0f5bb8d996 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabGlobalVariables.vue
@@ -39,14 +39,14 @@
                 <span class="col-delete t-head"></span>
             </div>
             <ul class="variable-list" ref="variableList">
-                <draggable class="variable-drag" v-model="constantsArray" :options="{handle:'.col-item-drag'}" @end="onDragEnd">
+                <draggable class="variable-drag" v-model="constantsArray" :options="{ handle: '.col-item-drag' }" @end="onDragEnd">
                     <li
                         v-for="(constant, index) in constantsArray"
                         :key="constant.key"
                         :class="[
                             'clearfix',
                             'variable-item',
-                            {'variable-editing': isVariableEditing && theKeyOfEditing === constant.key}
+                            { 'variable-editing': isVariableEditing && theKeyOfEditing === constant.key }
                         ]">
                         <div class="variable-content" @click="onEditVariable(constant.key)">
                             <i class="col-item-drag bk-icon icon-sort"></i>
@@ -92,8 +92,8 @@
                             :key="`${constant.key}-edit`">
                             <VariableEdit
                                 ref="editVariablePanel"
-                                :variableData="variableData"
-                                :isNewVariable="false"
+                                :variable-data="variableData"
+                                :is-new-variable="false"
                                 @scrollPanelToView="scrollPanelToView"
                                 @onChangeEdit="onChangeEdit">
                             </VariableEdit>
@@ -103,8 +103,8 @@
                 <li v-if="isVariableEditing && theKeyOfEditing === ''">
                     <VariableEdit
                         ref="addVariablePanel"
-                        :variableData="variableData"
-                        :isNewVariable="true"
+                        :variable-data="variableData"
+                        :is-new-variable="true"
                         @scrollPanelToView="scrollPanelToView"
                         @onChangeEdit="onChangeEdit">
                     </VariableEdit>
@@ -131,220 +131,216 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-import { mapMutations, mapState } from 'vuex'
-import tools from '@/utils/tools.js'
-import draggable from 'vuedraggable'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import VariableEdit from './VariableEdit.vue'
-import NoData from '@/components/common/base/NoData.vue'
-export default {
-    name: 'TabGlobalVariables',
-    components: {
-        BaseInput,
-        BaseCheckbox,
-        VariableEdit,
-        draggable,
-        NoData
-    },
-    props: ['isVariableEditing'],
-    data () {
-        return {
-            i18n: {
-                global_varibles: gettext('全局变量'),
-                new: gettext('新建'),
-                name: gettext('名称'),
-                attributes: gettext('属性'),
-                inputs: gettext('输入'),
-                outputs: gettext('输出'),
-                attr: gettext('属性：'),
-                attr_desc: gettext('"来源/是否显示"格式，来源是输入类型表示变量来自用户添加的变量或者标准插件/子流程节点输入参数引用的变量，来源是输出类型表示变量来自标准插件/子流程节点输出参数引用的变量；是否显示表示该变量在新建任务填写参数时是否展示给用户，输出类型的变量一定是隐藏的。'),
-                outputs2: gettext('输出：'),
-                outputs_desc: gettext('表示该变量会作为该流程模板的输出参数，在被其他流程模板当做子流程节点时可以引用。'),
-                empty_variable_tip: gettext('无数据，请手动新增变量或者勾选标准插件参数自动生成'),
-                tips: gettext('删除变量'),
-                confirm: gettext('确认删除该变量？'),
-                copied: gettext('已复制'),
-                copy: gettext('复制'),
-                show: gettext('显示'),
-                hide: gettext('隐藏')
-            },
-            copyText: '',
-            theKeyOfEditing: '',
-            constantsArray: [],
-            deleteConfirmDialogShow: false
-        }
-    },
-    computed: {
-        ...mapState({
-            'businessBaseInfo': state => state.template.businessBaseInfo,
-            'outputs': state => state.template.outputs,
-            'constants': state => state.template.constants,
-            'timeout': state => state.template.time_out
-        }),
-        variableData () {
-            if (this.theKeyOfEditing) {
-                return this.constants[this.theKeyOfEditing]
-            } else {
-                return {
-                    custom_type: 'input',
-                    desc: '',
-                    key: '',
-                    name: '',
-                    show_type: 'show',
-                    source_info: {},
-                    source_tag: '',
-                    source_type: 'custom',
-                    validation: '^.+$',
-                    validator: [],
-                    value: ''
-                }
-            }
-        }
-    },
-    watch: {
-        constants: {
-            handler () {
-                this.theKeyOfEditing = ''
-                this.constantsArray = this.getConstantsArray()
-                this.onChangeEdit(false)
-            },
-            deep: true
-        }
-    },
-    created () {
-        this.constantsArray = this.getConstantsArray()
-    },
-    methods: {
-        ...mapMutations ('template/', [
-            'editVariable',
-            'deleteVariable',
-            'setOutputs',
-            'setReceiversGroup',
-            'setNotifyType',
-            'setOvertime',
-            'setCategory'
-        ]),
-        getConstantsArray () {
-            const arrayList = []
-            for (let cKey in this.constants) {
-                const constant = tools.deepClone(this.constants[cKey])
-                arrayList.push(constant)
-            }
-            const sortedList = arrayList.sort((a, b) => a.index - b.index)
-            return sortedList
+    import '@/utils/i18n.js'
+    import { mapMutations, mapState } from 'vuex'
+    import tools from '@/utils/tools.js'
+    import draggable from 'vuedraggable'
+    import VariableEdit from './VariableEdit.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    export default {
+        name: 'TabGlobalVariables',
+        components: {
+            VariableEdit,
+            draggable,
+            NoData
         },
-        saveVariable () {
-            if (this.theKeyOfEditing) {
-                return this.$refs.editVariablePanel[0].saveVariable()
+        props: ['isVariableEditing'],
+        data () {
+            return {
+                i18n: {
+                    global_varibles: gettext('全局变量'),
+                    new: gettext('新建'),
+                    name: gettext('名称'),
+                    attributes: gettext('属性'),
+                    inputs: gettext('输入'),
+                    outputs: gettext('输出'),
+                    attr: gettext('属性：'),
+                    attr_desc: gettext('"来源/是否显示"格式，来源是输入类型表示变量来自用户添加的变量或者标准插件/子流程节点输入参数引用的变量，来源是输出类型表示变量来自标准插件/子流程节点输出参数引用的变量；是否显示表示该变量在新建任务填写参数时是否展示给用户，输出类型的变量一定是隐藏的。'),
+                    outputs2: gettext('输出：'),
+                    outputs_desc: gettext('表示该变量会作为该流程模板的输出参数，在被其他流程模板当做子流程节点时可以引用。'),
+                    empty_variable_tip: gettext('无数据，请手动新增变量或者勾选标准插件参数自动生成'),
+                    tips: gettext('删除变量'),
+                    confirm: gettext('确认删除该变量？'),
+                    copied: gettext('已复制'),
+                    copy: gettext('复制'),
+                    show: gettext('显示'),
+                    hide: gettext('隐藏')
+                },
+                copyText: '',
+                theKeyOfEditing: '',
+                constantsArray: [],
+                deleteConfirmDialogShow: false
             }
-
-            return this.$refs.addVariablePanel.saveVariable()
         },
-        scrollPanelToView (index) {
-            const itemHeight = document.querySelector('.variable-content').offsetHeight
-            if (index > 0) {
-                this.$refs.variableList.scrollTop = itemHeight * index
+        computed: {
+            ...mapState({
+                'businessBaseInfo': state => state.template.businessBaseInfo,
+                'outputs': state => state.template.outputs,
+                'constants': state => state.template.constants,
+                'timeout': state => state.template.time_out
+            }),
+            variableData () {
+                if (this.theKeyOfEditing) {
+                    return this.constants[this.theKeyOfEditing]
+                } else {
+                    return {
+                        custom_type: 'input',
+                        desc: '',
+                        key: '',
+                        name: '',
+                        show_type: 'show',
+                        source_info: {},
+                        source_tag: '',
+                        source_type: 'custom',
+                        validation: '^.+$',
+                        validator: [],
+                        value: ''
+                    }
+                }
             }
         },
-        /**
-         * 编辑变量
-         * @param {String} key 变量key值
-         */
-        onEditVariable (key) {
-            if (key === this.theKeyOfEditing && this.isVariableEditing) {
-                this.onChangeEdit(false)
-            } else {
-                this.onChangeEdit(true)
-                this.theKeyOfEditing = key
+        watch: {
+            constants: {
+                handler () {
+                    this.theKeyOfEditing = ''
+                    this.constantsArray = this.getConstantsArray()
+                    this.onChangeEdit(false)
+                },
+                deep: true
             }
-            
-            this.$emit('variableDataChanged')
-        },
-        /**
-         * 变量顺序拖拽
-        */
-        onDragEnd (event) {
-            const { newIndex, oldIndex } = event
-            const start = Math.min(newIndex, oldIndex)
-            const end = Math.max(newIndex, oldIndex) + 1
-            const indexChangedVariable = this.constantsArray.slice(start, end)
-            indexChangedVariable.forEach((item, index) => {
-                item.index = index + start
-                this.editVariable({key: item.key, variable: item})
-            })
-            this.$emit('variableDataChanged')
-        },
-        /**
-         * 新增变量
-         */
-        onAddVariable () {
-            this.onChangeEdit(true)
-            this.theKeyOfEditing = ''
-            this.$emit('variableDataChanged')
-        },
-        /**
-         * 变量 key 复制
-         */
-        onCopyKey (key) {
-            this.copyText = key
-            document.addEventListener("copy", this.copyHandler)
-            document.execCommand("copy")
-            document.removeEventListener("copy", this.copyHandler)
-            this.copyText = ''
-        },
-        /**
-         * 复制操作回调函数
-         */
-        copyHandler (e) {
-            e.clipboardData.setData("text/html", this.copyText)
-            e.clipboardData.setData("text/plain", this.copyText)
-            e.preventDefault()
         },
-        /**
-         * 变量输出勾选
-         */
-        onChangeVariableOutput (key, checked) {
-            const changeType = checked ? 'add' : 'delete'
-            this.setOutputs({changeType, key})
-            this.$emit('variableDataChanged')
+        created () {
+            this.constantsArray = this.getConstantsArray()
         },
-        /**
-         *  删除变量
-         */
-        onDeleteVariable (key, index) {
-            this.deleteVarKey = key
-            this.deleteVarIndex = index
-            this.deleteConfirmDialogShow = true
-        },
-        onConfirm () {
-            const key = this.deleteVarKey
-            const index = this.deleteVarIndex
-            this.$emit('onDeleteConstant', key)
-            const len = this.constantsArray.length
-            if (len > 1) {
-                const indexChangedVariable = this.constantsArray.slice(index + 1, len)
+        methods: {
+            ...mapMutations('template/', [
+                'editVariable',
+                'deleteVariable',
+                'setOutputs',
+                'setReceiversGroup',
+                'setNotifyType',
+                'setOvertime',
+                'setCategory'
+            ]),
+            getConstantsArray () {
+                const arrayList = []
+                for (const cKey in this.constants) {
+                    const constant = tools.deepClone(this.constants[cKey])
+                    arrayList.push(constant)
+                }
+                const sortedList = arrayList.sort((a, b) => a.index - b.index)
+                return sortedList
+            },
+            saveVariable () {
+                if (this.theKeyOfEditing) {
+                    return this.$refs.editVariablePanel[0].saveVariable()
+                }
+
+                return this.$refs.addVariablePanel.saveVariable()
+            },
+            scrollPanelToView (index) {
+                const itemHeight = document.querySelector('.variable-content').offsetHeight
+                if (index > 0) {
+                    this.$refs.variableList.scrollTop = itemHeight * index
+                }
+            },
+            /**
+             * 编辑变量
+             * @param {String} key 变量key值
+             */
+            onEditVariable (key) {
+                if (key === this.theKeyOfEditing && this.isVariableEditing) {
+                    this.onChangeEdit(false)
+                } else {
+                    this.onChangeEdit(true)
+                    this.theKeyOfEditing = key
+                }
+            
+                this.$emit('variableDataChanged')
+            },
+            /**
+             * 变量顺序拖拽
+             */
+            onDragEnd (event) {
+                const { newIndex, oldIndex } = event
+                const start = Math.min(newIndex, oldIndex)
+                const end = Math.max(newIndex, oldIndex) + 1
+                const indexChangedVariable = this.constantsArray.slice(start, end)
                 indexChangedVariable.forEach((item, index) => {
-                    item.index -= 1
-                    this.editVariable({key: item.key, variable: item})
+                    item.index = index + start
+                    this.editVariable({ key: item.key, variable: item })
                 })
+                this.$emit('variableDataChanged')
+            },
+            /**
+             * 新增变量
+             */
+            onAddVariable () {
+                this.onChangeEdit(true)
+                this.theKeyOfEditing = ''
+                this.$emit('variableDataChanged')
+            },
+            /**
+             * 变量 key 复制
+             */
+            onCopyKey (key) {
+                this.copyText = key
+                document.addEventListener('copy', this.copyHandler)
+                document.execCommand('copy')
+                document.removeEventListener('copy', this.copyHandler)
+                this.copyText = ''
+            },
+            /**
+             * 复制操作回调函数
+             */
+            copyHandler (e) {
+                e.clipboardData.setData('text/html', this.copyText)
+                e.clipboardData.setData('text/plain', this.copyText)
+                e.preventDefault()
+            },
+            /**
+             * 变量输出勾选
+             */
+            onChangeVariableOutput (key, checked) {
+                const changeType = checked ? 'add' : 'delete'
+                this.setOutputs({ changeType, key })
+                this.$emit('variableDataChanged')
+            },
+            /**
+             *  删除变量
+             */
+            onDeleteVariable (key, index) {
+                this.deleteVarKey = key
+                this.deleteVarIndex = index
+                this.deleteConfirmDialogShow = true
+            },
+            onConfirm () {
+                const key = this.deleteVarKey
+                const index = this.deleteVarIndex
+                this.$emit('onDeleteConstant', key)
+                const len = this.constantsArray.length
+                if (len > 1) {
+                    const indexChangedVariable = this.constantsArray.slice(index + 1, len)
+                    indexChangedVariable.forEach((item, index) => {
+                        item.index -= 1
+                        this.editVariable({ key: item.key, variable: item })
+                    })
+                }
+                this.deleteVariable(key)
+                this.$emit('variableDataChanged')
+                this.deleteConfirmDialogShow = false
+            },
+            onCancel () {
+                this.deleteConfirmDialogShow = false
+            },
+            onChangeEdit (val) {
+                this.$emit('changeVariableEditing', val)
+            },
+            onPreventDefalut (e) {
+                window.event ? window.event.cancelBubble = true : e.stopPropagation()
             }
-            this.deleteVariable(key)
-            this.$emit('variableDataChanged')
-            this.deleteConfirmDialogShow = false
-        },
-        onCancel () {
-            this.deleteConfirmDialogShow = false
-        },
-        onChangeEdit (val) {
-            this.$emit('changeVariableEditing', val)
-        },
-        onPreventDefalut () {
-            window.event ? window.event.cancelBubble = true : e.stopPropagation()
         }
     }
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabLocalDraft.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabLocalDraft.vue
index 1ea74f9662..87f5b536c5 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabLocalDraft.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabLocalDraft.vue
@@ -14,9 +14,9 @@
         <div class="local-title">
             <span> {{i18n.localCache}} </span>
         </div>
-        <div :class="{'add-draft': true, 'unfold-add-draft': newDraftShow}">
+        <div :class="{ 'add-draft': true, 'unfold-add-draft': newDraftShow }">
             <div class="draft-form" v-if="newDraftShow">
-                <BaseInput :placeholder="i18n.draftMessage" name="draftName" v-model="newDraftName" v-validate="draftNameRule"/>
+                <BaseInput :placeholder="i18n.draftMessage" name="draftName" v-model="newDraftName" v-validate="draftNameRule" />
                 <bk-button type="success" size="small" @click="onNewDraft">{{i18n.affirm}}</bk-button>
                 <bk-button size="small" @click="onCancelNewDraft">{{i18n.cancel}}</bk-button>
             </div>
@@ -59,7 +59,7 @@
                         </td>
                         <td class="col-time"><div class="content">{{draft.data.description.time}}</div></td>
                         <td class="col-delete" @click.stop="onDeleteDraft(draft.key)">
-                            <i class="bk-icon icon-close-circle"></i>
+                            <i class="close-btn common-icon-dark-circle-close"></i>
                         </td>
                     </tr>
                     <tr v-if="!draftArray.length" class="empty-draft-tip">
@@ -72,87 +72,87 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import NoData from '@/components/common/base/NoData.vue'
+    import '@/utils/i18n.js'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import NoData from '@/components/common/base/NoData.vue'
 
-export default {
-    name: 'TabLocalDraft',
-    components: {
-        BaseInput,
-        NoData
-    },
-    props: ['draftArray'],
-    data () {
-        return {
-            replaceData: null,
-            newDraftShow: false,
-            newDraftName: '',
-            draftNameRule: {
-                required: true,
-                max: STRING_LENGTH.DRAFT_NAME_MAX_LENGTH,
-                regex: NAME_REG
-            },
-            i18n: {
-                localCache: gettext('本地缓存'),
-                newDraft: gettext('新建'),
-                draftMessage: gettext('名称'),
-                replace: gettext('替换'),
-                saveTime: gettext('保存时间'),
-                delete: gettext('删除'),
-                emptyDraftTip: gettext('无数据，请手动添加缓存或等待自动保存'),
-                replaceTips: gettext('替换模板'),
-                replaceConfirm: gettext('是否替换模板？'),
-                serialNumber: gettext('序号'),
-                draftName: gettext('名称'),
-                sketch: gettext('简述：'),
-                draftSketch: gettext('本地缓存可以用于记录当前流程所有信息，包括流程的节点编排、全局变量、名称、基础属性等信息。本地缓存支持每个流程最多保存50个最近记录，该数据存储至本地浏览器中，每个用户只能查看和编辑自己的本地缓存。'),
-                affirm: gettext('保存'),
-                cancel: gettext('取消'),
-                resetTemplate: gettext('重置模板')
-            }
-        }
-    },
-    methods: {
-        // 单击模板记录
-        onReplaceTemplate (templateData) {
-            if (!this.isClickDraft) {
-                this.$emit('updateLocalTemplateData')
-            }
-            const data = {
-                templateData: templateData,
-                type: 'replace'
-            }
-            this.$emit('onReplaceTemplate', data)
-            this.$emit('hideConfigPanel')
-        },
-        // 删除本地缓存
-        onDeleteDraft (key) {
-            this.$emit('onDeleteDraft', key)
+    export default {
+        name: 'TabLocalDraft',
+        components: {
+            BaseInput,
+            NoData
         },
-        // 新增本地缓存
-        onShowDraftForm () {
-            this.newDraftShow = true
-            this.$emit('hideConfigPanel')
+        props: ['draftArray'],
+        data () {
+            return {
+                replaceData: null,
+                newDraftShow: false,
+                newDraftName: '',
+                draftNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.DRAFT_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                i18n: {
+                    localCache: gettext('本地缓存'),
+                    newDraft: gettext('新建'),
+                    draftMessage: gettext('名称'),
+                    replace: gettext('替换'),
+                    saveTime: gettext('保存时间'),
+                    delete: gettext('删除'),
+                    emptyDraftTip: gettext('无数据，请手动添加缓存或等待自动保存'),
+                    replaceTips: gettext('替换模板'),
+                    replaceConfirm: gettext('是否替换模板？'),
+                    serialNumber: gettext('序号'),
+                    draftName: gettext('名称'),
+                    sketch: gettext('简述：'),
+                    draftSketch: gettext('本地缓存可以用于记录当前流程所有信息，包括流程的节点编排、全局变量、名称、基础属性等信息。本地缓存支持每个流程最多保存50个最近记录，该数据存储至本地浏览器中，每个用户只能查看和编辑自己的本地缓存。'),
+                    affirm: gettext('保存'),
+                    cancel: gettext('取消'),
+                    resetTemplate: gettext('重置模板')
+                }
+            }
         },
-        onNewDraft () {
-            this.$validator.validateAll().then((result) => {
-                if (!result) {
-                    return
+        methods: {
+            // 单击模板记录
+            onReplaceTemplate (templateData) {
+                if (!this.isClickDraft) {
+                    this.$emit('updateLocalTemplateData')
+                }
+                const data = {
+                    templateData: templateData,
+                    type: 'replace'
                 }
-                this.$emit('onNewDraft', this.newDraftName)
+                this.$emit('onReplaceTemplate', data)
+                this.$emit('hideConfigPanel')
+            },
+            // 删除本地缓存
+            onDeleteDraft (key) {
+                this.$emit('onDeleteDraft', key)
+            },
+            // 新增本地缓存
+            onShowDraftForm () {
+                this.newDraftShow = true
+                this.$emit('hideConfigPanel')
+            },
+            onNewDraft () {
+                this.$validator.validateAll().then((result) => {
+                    if (!result) {
+                        return
+                    }
+                    this.$emit('onNewDraft', this.newDraftName)
+                    this.newDraftName = ''
+                    this.newDraftShow = false
+                    this.$emit('hideConfigPanel')
+                })
+            },
+            onCancelNewDraft () {
                 this.newDraftName = ''
                 this.newDraftShow = false
-                this.$emit('hideConfigPanel')
-            })
-        },
-        onCancelNewDraft () {
-            this.newDraftName = ''
-            this.newDraftShow = false
+            }
         }
     }
-}
 </script>
 
 <style lang="scss" scoped>
@@ -289,7 +289,7 @@ export default {
             cursor: pointer;
             tr:hover {
                 background: $blueStatus;
-                .icon-close-circle {
+                .close-btn {
                     display: inline-block;
                 }
             }
@@ -309,11 +309,14 @@ export default {
         .col-delete {
             position: relative;
             width: 20px;
-            .icon-close-circle {
-                position: absolute;
-                top: 14px;
-                right: 16px;
+            .close-btn {
                 display: none;
+                position: absolute;
+                top: 13px;
+                right: 14px;
+                font-size: 14px;
+                color: #979ba5;
+                cursor: pointer;
             }
         }
     }
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabTemplateConfig.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabTemplateConfig.vue
index 505dded312..eb6eb4fb94 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabTemplateConfig.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TabTemplateConfig.vue
@@ -10,7 +10,7 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="config-wrapper" v-bkloading="{isLoading: businessInfoLoading, opacity: 1}">
+    <div class="config-wrapper" v-bkloading="{ isLoading: businessInfoLoading, opacity: 1 }">
         <div class="config-title">
             <span>{{i18n.basic_information}}</span>
         </div>
@@ -36,7 +36,7 @@
         <div class="common-form-item hide">
             <label>{{ i18n.timeout }}</label>
             <div class="common-form-content">
-                <BaseInput :value="timeout" @input="onChangeTimeout"/>
+                <BaseInput :value="timeout" @input="onChangeTimeout" />
             </div>
         </div>
         <div class="common-form-item">
@@ -51,108 +51,108 @@
 </template>
 
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations } from 'vuex'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-export default {
-    name: 'TabTemplateConfig',
-    components: {
-        BaseInput
-    },
-    props: ['businessInfoLoading', 'isTemplateConfigValid'],
-    data () {
-        return {
-            i18n: {
-                basic_information: gettext('基础信息'),
-                type: gettext('分类'),
-                notify_type: gettext('通知方式'),
-                timeout: gettext('超时时间(分钟)'),
-                receiver_group: gettext('通知分组'),
-                categoryTip: gettext('必填项')
-            },
-            selectedTaskCategory: ''
-        }
-    },
-    computed: {
-        ...mapState({
-            'businessBaseInfo': state => state.template.businessBaseInfo,
-            'timeout': state => state.template.time_out
-        }),
-        notifyGroup () {
-            if (this.businessBaseInfo.notify_group) {
-                return this.businessBaseInfo.notify_group.map(item => {
-                    return {
-                        id: item.value,
-                        name: item.text
-                    }
-                })
-            }
-            return []
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations } from 'vuex'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    export default {
+        name: 'TabTemplateConfig',
+        components: {
+            BaseInput
         },
-        notifyTypeList () {
-            if (this.businessBaseInfo.notify_type_list) {
-                return this.businessBaseInfo.notify_type_list.map(item => {
-                    return {
-                        id: item.value,
-                        name: item.name
-                    }
-                })
+        props: ['businessInfoLoading', 'isTemplateConfigValid'],
+        data () {
+            return {
+                i18n: {
+                    basic_information: gettext('基础信息'),
+                    type: gettext('分类'),
+                    notify_type: gettext('通知方式'),
+                    timeout: gettext('超时时间(分钟)'),
+                    receiver_group: gettext('通知分组'),
+                    categoryTip: gettext('必填项')
+                },
+                selectedTaskCategory: ''
             }
-            return []
         },
-        taskCategories () {
-            if (this.businessBaseInfo.task_categories) {
-                return this.businessBaseInfo.task_categories.map(item => {
-                    return {
-                        id: item.value,
-                        name: item.name
-                    }
-                })
-            }
-            return []
-        },
-        receiverGroup: {
-            get () {
-                return this.$store.state.template.notify_receivers.receiver_group
+        computed: {
+            ...mapState({
+                'businessBaseInfo': state => state.template.businessBaseInfo,
+                'timeout': state => state.template.time_out
+            }),
+            notifyGroup () {
+                if (this.businessBaseInfo.notify_group) {
+                    return this.businessBaseInfo.notify_group.map(item => {
+                        return {
+                            id: item.value,
+                            name: item.text
+                        }
+                    })
+                }
+                return []
             },
-            set (value) {
-                this.setReceiversGroup(value)
-            }
-        },
-        notifyType: {
-            get () {
-                return this.$store.state.template.notify_type
+            notifyTypeList () {
+                if (this.businessBaseInfo.notify_type_list) {
+                    return this.businessBaseInfo.notify_type_list.map(item => {
+                        return {
+                            id: item.value,
+                            name: item.name
+                        }
+                    })
+                }
+                return []
             },
-            set (value) {
-                this.setNotifyType(value)
+            taskCategories () {
+                if (this.businessBaseInfo.task_categories) {
+                    return this.businessBaseInfo.task_categories.map(item => {
+                        return {
+                            id: item.value,
+                            name: item.name
+                        }
+                    })
+                }
+                return []
+            },
+            receiverGroup: {
+                get () {
+                    return this.$store.state.template.notify_receivers.receiver_group
+                },
+                set (value) {
+                    this.setReceiversGroup(value)
+                }
+            },
+            notifyType: {
+                get () {
+                    return this.$store.state.template.notify_type
+                },
+                set (value) {
+                    this.setNotifyType(value)
+                }
+            },
+            category: {
+                get () {
+                    return this.$store.state.template.category
+                },
+                set (value) {
+                    this.setCategory(value)
+                    this.$emit('onSelectCategory', value)
+                }
             }
         },
-        category: {
-            get () {
-                return this.$store.state.template.category
+        methods: {
+            ...mapMutations('template/', [
+                'setOutputs',
+                'setReceiversGroup',
+                'setNotifyType',
+                'setOvertime',
+                'setCategory'
+            ]),
+            onChangeTimeout (val) {
+                this.setOvertime(val)
             },
-            set (value) {
-                this.setCategory(value)
-                this.$emit('onSelectCategory', value)
+            onChangeTaskCategories (id) {
+                this.selectedTaskCategory = id
             }
         }
-    },
-    methods: {
-        ...mapMutations ('template/', [
-            'setOutputs',
-            'setReceiversGroup',
-            'setNotifyType',
-            'setOvertime',
-            'setCategory'
-        ]),
-        onChangeTimeout (val) {
-            this.setOvertime(val)
-        },
-        onChangeTaskCategories (id) {
-            this.selectedTaskCategory = id
-        }
     }
-}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TemplateSetting.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TemplateSetting.vue
index 038580df07..096c9e65f4 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TemplateSetting.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/TemplateSetting.vue
@@ -11,19 +11,19 @@
 */
 <template>
     <div class="setting-area-wrap">
-        <div :class="['setting-tab-wrap', {'vertical-fold': !showPanel}]">
+        <div :class="['setting-tab-wrap', { 'vertical-fold': !showPanel }]">
             <div class="setting-panel-tab" @click="onTemplateSettingShow('globalVariableTab')">
-                <div :class="['setting-menu-icon', {'activeTab': activeTab === 'globalVariableTab'}]">
+                <div :class="['setting-menu-icon', { 'activeTab': activeTab === 'globalVariableTab' }]">
                     <i class="common-icon-square-code" :title="i18n.globalVariable"></i>
                 </div>
             </div>
             <div class="setting-panel-tab" @click="onTemplateSettingShow('templateConfigTab')">
-                <div :class="['setting-menu-icon', {'activeTab': activeTab === 'templateConfigTab'}]">
+                <div :class="['setting-menu-icon', { 'activeTab': activeTab === 'templateConfigTab' }]">
                     <i class="common-icon-square-attribute" :title="i18n.basicInformation"></i>
                 </div>
             </div>
             <div class="setting-panel-tab" @click="onTemplateSettingShow('localDraftTab')">
-                <div :class="['setting-menu-icon', {'activeTab': activeTab === 'localDraftTab'}]">
+                <div :class="['setting-menu-icon', { 'activeTab': activeTab === 'localDraftTab' }]">
                     <i class="common-icon-clock-reload" :title="i18n.localCache"></i>
                 </div>
             </div>
@@ -34,7 +34,7 @@
                     v-show="activeTab === 'globalVariableTab'"
                     ref="globalVariable"
                     class="panel-item"
-                    :isVariableEditing="isVariableEditing"
+                    :is-variable-editing="isVariableEditing"
                     @changeVariableEditing="onVariableEditingChange"
                     @variableDataChanged="onVariableDataChange"
                     @onDeleteConstant="onDeleteConstant">
@@ -42,14 +42,14 @@
                 <TabTemplateConfig
                     class="panel-item"
                     v-show="activeTab === 'templateConfigTab'"
-                    :isTemplateConfigValid="isTemplateConfigValid"
-                    :businessInfoLoading="businessInfoLoading"
+                    :is-template-config-valid="isTemplateConfigValid"
+                    :business-info-loading="businessInfoLoading"
                     @onSelectCategory="onSelectCategory">
                 </TabTemplateConfig>
                 <TabLocalDraft
                     class="panel-item"
                     v-show="activeTab === 'localDraftTab'"
-                    :draftArray="draftArray"
+                    :draft-array="draftArray"
                     @onDeleteDraft="onDeleteDraft"
                     @onReplaceTemplate="onReplaceTemplate"
                     @onNewDraft="onNewDraft"
@@ -60,129 +60,128 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations } from 'vuex'
-import tools from '@/utils/tools.js'
-import TabGlobalVariables from './TabGlobalVariables.vue'
-import TabTemplateConfig from './TabTemplateConfig.vue'
-import TabLocalDraft from './TabLocalDraft.vue'
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations } from 'vuex'
+    import TabGlobalVariables from './TabGlobalVariables.vue'
+    import TabTemplateConfig from './TabTemplateConfig.vue'
+    import TabLocalDraft from './TabLocalDraft.vue'
 
-export default {
-    name: 'TemplateSetting',
-    components: {
-        TabGlobalVariables,
-        TabTemplateConfig,
-        TabLocalDraft
-    },
-    props: ['businessInfoLoading', 'isTemplateConfigValid', 'isSettingPanelShow', 'draftArray'],
-    data () {
-        return {
-            i18n: {
-                globalVariable: gettext('全局变量'),
-                basicInformation: gettext('基础信息'),
-                localCache: gettext('本地缓存')
-            },
-            showPanel: true,
-            isVariableEditing: false,
-            activeTab: 'globalVariableTab'
-        }
-    },
-    computed: {
-        ...mapState({
-            'businessBaseInfo': state => state.template.businessBaseInfo,
-            'outputs': state => state.template.outputs,
-            'constants': state => state.template.constants,
-            'timeout': state => state.template.time_out
-        }),
-        variableData () {
-            if (this.theKeyOfEditing) {
-                return this.constants[this.theKeyOfEditing]
-            } else {
-                return {
-                    custom_type: 'input',
-                    desc: '',
-                    key: '',
-                    name: '',
-                    show_type: 'show',
-                    source_info: {},
-                    source_tag: '',
-                    source_type: 'custom',
-                    validation: '^.+$',
-                    validator: [],
-                    value: ''
-                }
-            }
-        }
-    },
-    watch: {
-        isSettingPanelShow (val) {
-            this.showPanel = val
-        }
-    },
-    methods: {
-        ...mapMutations ('template/', [
-            'editVariable',
-            'deleteVariable',
-            'setOutputs',
-            'setReceiversGroup',
-            'setNotifyType',
-            'setOvertime',
-            'setCategory'
-        ]),
-        togglePanel (val) {
-            this.$emit('toggleSettingPanel', val)
-        },
-        // 变量编辑是否展开
-        isEditPanelOpen () {
-            return this.isVariableEditing
-        },
-        // 变量保存
-        saveVariable () {
-            return this.$refs.globalVariable.saveVariable()
-        },
-        // 激活表单不合法的tab项
-        setErrorTab (tab) {
-            this.activeTab = tab
-            this.togglePanel(true)
+    export default {
+        name: 'TemplateSetting',
+        components: {
+            TabGlobalVariables,
+            TabTemplateConfig,
+            TabLocalDraft
         },
-        onVariableDataChange () {
-            this.$emit('variableDataChanged')
-        },
-        onDeleteConstant (key) {
-            this.$emit('onDeleteConstant', key)
-        },
-        onSelectCategory (value) {
-            this.$emit('onSelectCategory', value)
-        },
-        onDeleteDraft (key) {
-            this.$emit('onDeleteDraft', key)
-        },
-        onReplaceTemplate (data) {
-            this.$emit('onReplaceTemplate', data)
-        },
-        onNewDraft (name) {
-            this.$emit('onNewDraft', name)
-        },
-        hideConfigPanel () {
-            this.$emit('hideConfigPanel')
+        props: ['businessInfoLoading', 'isTemplateConfigValid', 'isSettingPanelShow', 'draftArray'],
+        data () {
+            return {
+                i18n: {
+                    globalVariable: gettext('全局变量'),
+                    basicInformation: gettext('基础信息'),
+                    localCache: gettext('本地缓存')
+                },
+                showPanel: true,
+                isVariableEditing: false,
+                activeTab: 'globalVariableTab'
+            }
         },
-        updateLocalTemplateData () {
-            this.$emit('updateLocalTemplateData')
+        computed: {
+            ...mapState({
+                'businessBaseInfo': state => state.template.businessBaseInfo,
+                'outputs': state => state.template.outputs,
+                'constants': state => state.template.constants,
+                'timeout': state => state.template.time_out
+            }),
+            variableData () {
+                if (this.theKeyOfEditing) {
+                    return this.constants[this.theKeyOfEditing]
+                } else {
+                    return {
+                        custom_type: 'input',
+                        desc: '',
+                        key: '',
+                        name: '',
+                        show_type: 'show',
+                        source_info: {},
+                        source_tag: '',
+                        source_type: 'custom',
+                        validation: '^.+$',
+                        validator: [],
+                        value: ''
+                    }
+                }
+            }
         },
-        onVariableEditingChange (val) {
-            this.isVariableEditing = val
+        watch: {
+            isSettingPanelShow (val) {
+                this.showPanel = val
+            }
         },
-        onTemplateSettingShow (val) {
-            if (this.activeTab === val) {
-                this.activeTab = undefined
-                this.togglePanel(false)
-            } else {
-                this.activeTab = val
+        methods: {
+            ...mapMutations('template/', [
+                'editVariable',
+                'deleteVariable',
+                'setOutputs',
+                'setReceiversGroup',
+                'setNotifyType',
+                'setOvertime',
+                'setCategory'
+            ]),
+            togglePanel (val) {
+                this.$emit('toggleSettingPanel', val)
+            },
+            // 变量编辑是否展开
+            isEditPanelOpen () {
+                return this.isVariableEditing
+            },
+            // 变量保存
+            saveVariable () {
+                return this.$refs.globalVariable.saveVariable()
+            },
+            // 激活表单不合法的tab项
+            setErrorTab (tab) {
+                this.activeTab = tab
                 this.togglePanel(true)
+            },
+            onVariableDataChange () {
+                this.$emit('variableDataChanged')
+            },
+            onDeleteConstant (key) {
+                this.$emit('onDeleteConstant', key)
+            },
+            onSelectCategory (value) {
+                this.$emit('onSelectCategory', value)
+            },
+            onDeleteDraft (key) {
+                this.$emit('onDeleteDraft', key)
+            },
+            onReplaceTemplate (data) {
+                this.$emit('onReplaceTemplate', data)
+            },
+            onNewDraft (name) {
+                this.$emit('onNewDraft', name)
+            },
+            hideConfigPanel () {
+                this.$emit('hideConfigPanel')
+            },
+            updateLocalTemplateData () {
+                this.$emit('updateLocalTemplateData')
+            },
+            onVariableEditingChange (val) {
+                this.isVariableEditing = val
+            },
+            onTemplateSettingShow (val) {
+                if (this.activeTab === val) {
+                    this.activeTab = undefined
+                    this.togglePanel(false)
+                } else {
+                    this.activeTab = val
+                    this.togglePanel(true)
+                }
             }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEdit.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEdit.vue
index faa4928d3c..4a8499fc40 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEdit.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEdit.vue
@@ -48,22 +48,22 @@
                 <div class="form-content">
                     <bk-selector
                         :list="valTypeList"
-                        :has-children='true'
+                        :has-children="true"
                         :selected.sync="currentValType"
-                        :disabled="this.isDisabledValType"
+                        :disabled="isDisabledValType"
                         @item-selected="onValTypeChange">
                     </bk-selector>
                 </div>
             </li>
             <li class="form-item clearfix" v-if="!isOutputVar">
                 <label class="form-label">{{ theEditingData.is_meta ? i18n.meta : i18n.default }}</label>
-                <div class="form-content" v-bkloading="{isLoading: atomConfigLoading, opacity: 1}">
+                <div class="form-content" v-bkloading="{ isLoading: atomConfigLoading, opacity: 1 }">
                     <template v-if="!atomConfigLoading && renderConfig.length">
                         <RenderForm
                             ref="renderForm"
                             v-if="!isEditInDialog"
                             :scheme="renderConfig"
-                            :formOption="renderOption"
+                            :form-option="renderOption"
                             v-model="renderData">
                         </RenderForm>
                         <a
@@ -93,7 +93,7 @@
                     <bk-selector
                         :list="showTypeList"
                         :selected.sync="theEditingData.show_type"
-                        :disabled="this.isDisabledShowType"
+                        :disabled="isOutputVar"
                         @item-selected="onValShowTypeChange">
                     </bk-selector>
                 </div>
@@ -116,371 +116,365 @@
         </div>
         <VariableEditDialog
             v-if="isEditDialogShow"
-            :isShow="isEditDialogShow"
-            :renderConfig="renderConfig"
-            :renderOption="renderOption"
-            :renderData="renderData"
+            :is-show="isEditDialogShow"
+            :render-config="renderConfig"
+            :render-option="renderOption"
+            :render-data="renderData"
             @onConfirmDialogEdit="onConfirmDialogEdit"
             @onCancelDialogEdit="onCancelDialogEdit">
         </VariableEditDialog>
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapActions, mapMutations } from 'vuex'
-import { Validator } from 'vee-validate'
-import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import tools from '@/utils/tools.js'
-import atomFilter from '@/utils/atomFilter.js'
-import { checkDataType } from '@/utils/checkDataType.js'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-import BaseInput from '@/components/common/base/BaseInput.vue'
-import VariableEditDialog from './VariableEditDialog.vue'
-const ATOM_FORM = {
-    'ip': 'var_ip_picker.ip_picker',
-    'password': 'password.password',
-    'select': 'select.select',
-    'ip_selector': 'var_cmdb_ip_selector.ip_selector'
-}
-const META_ATOM_FORM = {
-    'select': 'select_meta'
-}
-// const META_FORM_TYPE = {
-//     'var_ip_picker': 'var_ip_picker',
-//     'password': 'password',
-//     'select': 'select_meta'
-// }
-const VAL_TYPE_LIST = [
-    {
-        name: gettext('普通变量'),
-        children: [
-            { id: "input", name: gettext("输入框") },
-            { id: "textarea", name: gettext("文本框") },
-            { id: "datetime", name: gettext("日期时间") },
-            { id: "int", name: gettext("整数") },
-            { id: "ip", name: gettext("IP选择器(简单版)") },
-            { id: "password", name: gettext("密码")}
-        ]
-    },
-    {
-        name: gettext('元变量'),
-        children: [
-            { id: "select", name: gettext("下拉框")}
-        ]
+    import '@/utils/i18n.js'
+    import { mapState, mapActions, mapMutations } from 'vuex'
+    import { Validator } from 'vee-validate'
+    import { NAME_REG, STRING_LENGTH } from '@/constants/index.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import tools from '@/utils/tools.js'
+    import atomFilter from '@/utils/atomFilter.js'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    import BaseInput from '@/components/common/base/BaseInput.vue'
+    import VariableEditDialog from './VariableEditDialog.vue'
+    const ATOM_FORM = {
+        'ip': 'var_ip_picker.ip_picker',
+        'password': 'password.password',
+        'select': 'select.select',
+        'ip_selector': 'var_cmdb_ip_selector.ip_selector'
+    }
+    const META_ATOM_FORM = {
+        'select': 'select_meta'
     }
-]
-const SHOW_TYPE_LIST = [
-    { id: 'show', name: gettext('显示') },
-    { id: 'hide', name: gettext('隐藏') }
-]
-export default {
-    name: 'VariableEdit',
-    components: {
-        RenderForm,
-        VariableEditDialog,
-        BaseInput
-    },
-    props: ['variableData', 'isNewVariable'],
-    data () {
-        const theEditingData = tools.deepClone(this.variableData)
-        const renderData = ('value' in theEditingData) ? {'customVariable': theEditingData.value} : {}
-        return {
-            i18n: {
-                name: gettext("名称"),
-                desc: gettext("说明"),
-                default: gettext("默认值"),
-                meta: gettext("配置"),
-                edit_table: gettext("编辑表格"),
-                validation: gettext("正则校验"),
-                type: gettext("类型"),
-                show: gettext("显示"),
-                save: gettext("保存"),
-                cancel: gettext("取消")
+    // const META_FORM_TYPE = {
+    //     'var_ip_picker': 'var_ip_picker',
+    //     'password': 'password',
+    //     'select': 'select_meta'
+    // }
+    const VAL_TYPE_LIST = [
+        {
+            name: gettext('普通变量'),
+            children: [
+                { id: 'input', name: gettext('输入框') },
+                { id: 'textarea', name: gettext('文本框') },
+                { id: 'datetime', name: gettext('日期时间') },
+                { id: 'int', name: gettext('整数') },
+                { id: 'ip', name: gettext('IP选择器(简单版)') },
+                { id: 'password', name: gettext('密码') }
+            ]
+        },
+        {
+            name: gettext('元变量'),
+            children: [
+                { id: 'select', name: gettext('下拉框') }
+            ]
+        }
+    ]
+    const SHOW_TYPE_LIST = [
+        { id: 'show', name: gettext('显示') },
+        { id: 'hide', name: gettext('隐藏') }
+    ]
+    export default {
+        name: 'VariableEdit',
+        components: {
+            RenderForm,
+            VariableEditDialog,
+            BaseInput
+        },
+        props: ['variableData', 'isNewVariable'],
+        data () {
+            const theEditingData = tools.deepClone(this.variableData)
+            const renderData = ('value' in theEditingData) ? { 'customVariable': theEditingData.value } : {}
+            return {
+                i18n: {
+                    name: gettext('名称'),
+                    desc: gettext('说明'),
+                    default: gettext('默认值'),
+                    meta: gettext('配置'),
+                    edit_table: gettext('编辑表格'),
+                    validation: gettext('正则校验'),
+                    type: gettext('类型'),
+                    show: gettext('显示'),
+                    save: gettext('保存'),
+                    cancel: gettext('取消')
+                },
+                atomConfigLoading: false,
+                bkMessageInstance: null,
+                showTypeList: [...SHOW_TYPE_LIST],
+                theEditingData,
+                renderData,
+                renderConfig: [],
+                renderOption: {
+                    showHook: false,
+                    showGroup: false,
+                    showLabel: false,
+                    showVarList: true
+                },
+                isEditDialogShow: false,
+                // 变量名称校验规则
+                variableNameRule: {
+                    required: true,
+                    max: STRING_LENGTH.VARIABLE_NAME_MAX_LENGTH,
+                    regex: NAME_REG
+                },
+                // 变量 Key 校验规则
+                variableKeyRule: {
+                    required: true,
+                    max: STRING_LENGTH.VARIABLE_KEY_MAX_LENGTH,
+                    regex: /(^\${[a-zA-Z_]\w*}$)|(^[a-zA-Z_]\w*$)/, // 合法变量key正则，eg:${fsdf_f32sd},fsdf_f32sd
+                    keyRepeat: true
+                },
+                // 默认值校验规则（按照用户编辑的合法正则表达式校验）
+                defaultValueRule: {
+                    required: theEditingData.show_type === 'hide',
+                    customValueCheck: true
+                },
+                // 正则校验规则
+                validationRule: {
+                    validReg: true
+                }
+            }
+        },
+        computed: {
+            ...mapState({
+                'atomFormConfig': state => state.atomForm.config,
+                'constants': state => state.template.constants
+            }),
+            isEditInDialog () {
+                return this.renderConfig[0].type
+                    && (this.renderConfig[0].type === 'datatable' || this.renderConfig[0].type === 'ip_selector')
             },
-            atomConfigLoading: false,
-            bkMessageInstance: null,
-            showTypeList: [...SHOW_TYPE_LIST],
-            theEditingData,
-            renderData,
-            renderConfig: [],
-            renderOption: {
-                showHook: false,
-                showGroup: false,
-                showLabel: false,
-                showVarList: true
+            isDisabledValType () {
+                const { source_type } = this.theEditingData
+                return source_type === 'component_inputs' || source_type === 'component_outputs'
             },
-            isEditDialogShow: false,
-            // 变量名称校验规则
-            variableNameRule: {
-                required: true,
-                max: STRING_LENGTH.VARIABLE_NAME_MAX_LENGTH,
-                regex: NAME_REG
+            isOutputVar () {
+                return this.theEditingData.source_type === 'component_outputs'
             },
-            // 变量 Key 校验规则
-            variableKeyRule: {
-                required: true,
-                max: STRING_LENGTH.VARIABLE_KEY_MAX_LENGTH,
-                regex: /(^\${[a-zA-Z_]\w*}$)|(^[a-zA-Z_]\w*$)/, // 合法变量key正则，eg:${fsdf_f32sd},fsdf_f32sd
-                keyRepeat: true
+            currentValType: {
+                get () {
+                    return this.isDisabledValType ? 'component' : this.theEditingData.custom_type
+                },
+                set (val) {
+                    this.theEditingData.custom_type = val
+                }
             },
-            // 默认值校验规则（按照用户编辑的合法正则表达式校验）
-            defaultValueRule: {
-                required: theEditingData.show_type === 'hide',
-                customValueCheck: true
+            valTypeList () {
+                return this.isDisabledValType ? [{ id: 'component', name: gettext('组件') }] : [...VAL_TYPE_LIST]
             },
-            // 正则校验规则
-            validationRule: {
-                validReg: true
+            atomType () {
+                const { custom_type, source_tag } = this.theEditingData
+                if (source_tag) {
+                    return source_tag.split('.')[0]
+                } else {
+                    return custom_type
+                }
             }
-        }
-    },
-    computed: {
-        ...mapState({
-            'atomFormConfig': state => state.atomForm.config,
-            'constants': state => state.template.constants
-        }),
-        isEditInDialog () {
-            return this.renderConfig[0].type &&
-                (this.renderConfig[0].type === 'datatable' || this.renderConfig[0].type === 'ip_selector')
-        },
-        isDisabledValType () {
-            const { source_type } = this.theEditingData
-            return source_type === 'component_inputs' || source_type === 'component_outputs'
         },
-        isOutputVar () {
-            return this.theEditingData.source_type === 'component_outputs'
-        },
-        currentValType: {
-            get () {
-                return this.isDisabledValType ? 'component' : this.theEditingData.custom_type
+        watch: {
+            variableData: {
+                handler: function (val) {
+                    this.theEditingData = tools.deepClone(val)
+                },
+                deep: true
             },
-            set (val) {
-                this.theEditingData.custom_type = val
-            }
-        },
-        valTypeList () {
-            return this.isDisabledValType ? [{ id: "component", name: gettext("组件")}] : [...VAL_TYPE_LIST]
-        },
-        atomType () {
-            const { custom_type, source_tag } = this.theEditingData
-            if (source_tag) {
-                return source_tag.split('.')[0]
-            } else {
-                return custom_type
+            'theEditingData.show_type' (val) {
+                if (val === 'hide') {
+                    this.defaultValueRule = {
+                        required: true,
+                        customValueCheck: true
+                    }
+                } else {
+                    this.defaultValueRule = {
+                        customValueCheck: true
+                    }
+                }
             }
-        }
-    },
-    watch: {
-        variableData: {
-            handler: function (val) {
-                this.theEditingData = tools.deepClone(val)
-            },
-            deep: true
         },
-        'theEditingData.show_type' (val) {
-            if (val === 'hide') {
-                this.defaultValueRule = {
-                    required: true,
-                    customValueCheck: true
+        created () {
+            this.validator = new Validator({})
+            // 注册变量 key 校验规则
+            this.validator.extend('keyRepeat', (value) => {
+                value = /^\$\{\w+\}$/.test(value) ? value : '${' + value + '}'
+                if (this.variableData.key === value) {
+                    return true
                 }
-            } else {
-                this.defaultValueRule = {
-                    customValueCheck: true
+                if (value in this.constants) {
+                    return false
                 }
-            }
-        }
-    },
-    created () {
-        const self = this
-        this.validator = new Validator({})
-        // 注册变量 key 校验规则
-        this.validator.extend('keyRepeat', (value) => {
-            value = /^\$\{\w+\}$/.test(value) ? value : '${' + value + '}'
-            if (this.variableData.key === value) {
                 return true
-            }
-            if (value in this.constants) {
-                return false
-            }
-            return true
-        })
-        // 注册正则表达式校验规则
-        this.validator.extend('validReg', (value) => {
-            try {
-                const reg = new RegExp(value)
-            } catch (e) {
-                console.error(e)
-                return false
-            }
-            return true
-        })
-        // 注册默认值校验规则
-        this.validator.extend('customValueCheck', (value) => {
-            try {
-                const reg = new RegExp(this.theEditingData.validation)
-                if (!reg.test(value)) {
+            })
+            // 注册正则表达式校验规则
+            this.validator.extend('validReg', (value) => {
+                try {
+                    /* eslint-disable */
+                    new RegExp(value)
+                    /* eslint-enable */
+                } catch (e) {
+                    console.error(e)
                     return false
                 }
                 return true
-            } catch (e) {
-                console.error(e)
-                return false
-            }
-        })
-    },
-    mounted () {
-        this.getAtomConfig()
-    },
-    methods: {
-        ...mapMutations ('atomForm/', [
-            'setAtomConfig'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig'
-        ]),
-        ...mapMutations ('template/', [
-            'addVariable',
-            'editVariable',
-            'deleteVariable'
-        ]),
-        /**
-         * 加载表单标准插件配置文件
-         */
-        async getAtomConfig () {
-            let realAtomType = META_ATOM_FORM[this.atomType] || this.atomType
-            let isMeta = META_ATOM_FORM[this.atomType] ? 1 : 0
-            if ($.atoms[realAtomType]) {
-                this.getRenderConfig()
-                return
-            }
-
-            this.atomConfigLoading = true
-            let classify = ''
-            if (this.theEditingData.custom_type) {
-                classify = 'variable'
-            } else {
-                classify = 'component'
-            }
-            try {
-                await this.loadAtomConfig({ atomType: this.atomType, classify, isMeta: isMeta })
-                this.setAtomConfig({atomType: realAtomType, configData: $.atoms[realAtomType]})
-                this.getRenderConfig()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.atomConfigLoading = false
-            }
-        },
-        getRenderConfig () {
-            const { source_tag, custom_type } = this.theEditingData
-            let realAtomType = META_ATOM_FORM[this.atomType] || this.atomType
-            let atom = this.atomFormConfig[realAtomType]
-            let config
-            let config = {}
-            if (custom_type){
-                config = tools.deepClone(atom[0])
-            } else {
-                const tag_code = source_tag.split('.')[1]
-                config = tools.deepClone(atomFilter.formFilter(tag_code, atom))
-            }
-            config.tag_code = 'customVariable'          
-
-            this.renderConfig = [config]
-        },
-        /**
-         * 切换变量类型
-         */
-        onValTypeChange (id, data) {
-            this.renderData = {}
-            // input 类型需要正则校验
-            if (id === 'input') {
-                this.theEditingData.validation = '^.+$'
-            } else {
-                this.theEditingData.validation = ''
-            }
-            // 普通原子类型变量需要增加 source_tag 字段
-            if (ATOM_FORM[this.theEditingData.custom_type]) {
-                this.theEditingData.source_tag = ATOM_FORM[this.theEditingData.custom_type]
-            } else {
-                this.theEditingData.source_tag = ''
-            }
-
-            // 元变量需要增加 meta 字段
-            if (META_ATOM_FORM[this.theEditingData.custom_type]) {
-                this.theEditingData.is_meta = true
-            } else {
-                this.theEditingData.is_meta = false
-            }
-            this.getAtomConfig()           
-        },
-        /**
-         * 变量显示/隐藏切换
-         */
-        onValShowTypeChange (id, data) {
-            this.theEditingData.show_type = id
-            this.getRenderConfig()
-        },
-        onBlurValidation () {
-            this.getRenderConfig()
-        },
-        /**
-         * datatable 编辑弹窗
-         */
-        onShowEditDialog () {
-            this.isEditDialogShow = true
-        },
-        onConfirmDialogEdit (formData) {
-            this.isEditDialogShow = false
-            this.theEditingData.value = formData['customVariable']
-            this.renderData['customVariable'] = formData['customVariable']
+            })
+            // 注册默认值校验规则
+            this.validator.extend('customValueCheck', (value) => {
+                try {
+                    const reg = new RegExp(this.theEditingData.validation)
+                    if (!reg.test(value)) {
+                        return false
+                    }
+                    return true
+                } catch (e) {
+                    console.error(e)
+                    return false
+                }
+            })
         },
-        onCancelDialogEdit () {
-            this.isEditDialogShow = false
+        mounted () {
+            this.getAtomConfig()
         },
-        /**
-         * 校验并保存变量
-         */
-        saveVariable () {
-            return this.$validator.validateAll().then(result => {
-                let formValid = true
-                const constantsLength = Object.keys(this.constants).length
-                // 名称、key等校验，renderform表单校验
-                if (this.$refs.renderForm) {
-                    if (!this.value && this.theEditingData.show_type === 'show') {
-                        formValid = true
-                    } else {
-                        formValid = this.$refs.renderForm.validate()
-                    }
+        methods: {
+            ...mapMutations('atomForm/', [
+                'setAtomConfig'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig'
+            ]),
+            ...mapMutations('template/', [
+                'addVariable',
+                'editVariable',
+                'deleteVariable'
+            ]),
+            /**
+             * 加载表单标准插件配置文件
+             */
+            async getAtomConfig () {
+                const realAtomType = META_ATOM_FORM[this.atomType] || this.atomType
+                const isMeta = META_ATOM_FORM[this.atomType] ? 1 : 0
+                if ($.atoms[realAtomType]) {
+                    this.getRenderConfig()
+                    return
                 }
-                if (this.atomConfigLoading || !result || !formValid) {
-                    const index = this.isNewVariable ? constantsLength : this.theEditingData.index
-                    this.$emit('scrollPanelToView', index)
-                    return false
+                this.atomConfigLoading = true
+                let classify = ''
+                if (this.theEditingData.custom_type) {
+                    classify = 'variable'
+                } else {
+                    classify = 'component'
                 }
-
-                const variable = this.theEditingData
-                if (!/^\$\{\w+\}$/.test(variable.key)) {
-                    variable.key = "${" + variable.key + "}"
+                try {
+                    await this.loadAtomConfig({ atomType: this.atomType, classify, isMeta: isMeta })
+                    this.setAtomConfig({ atomType: realAtomType, configData: $.atoms[realAtomType] })
+                    this.getRenderConfig()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.atomConfigLoading = false
                 }
-                this.$emit('onChangeEdit', false)
-                this.theEditingData.name = this.theEditingData.name.trim()
-                this.theEditingData.value = this.renderData['customVariable']
-                if (this.isNewVariable) { // 新增
-                    variable.index = constantsLength
-                    this.addVariable(Object.assign(variable))
-                } else { // 编辑
-                    this.editVariable({key: this.variableData.key, variable})
+            },
+            getRenderConfig () {
+                const { source_tag, custom_type } = this.theEditingData
+                const realAtomType = META_ATOM_FORM[this.atomType] || this.atomType
+                const atom = this.atomFormConfig[realAtomType]
+                let config = {}
+                if (custom_type) {
+                    config = tools.deepClone(atom[0])
+                } else {
+                    const tag_code = source_tag.split('.')[1]
+                    config = tools.deepClone(atomFilter.formFilter(tag_code, atom))
                 }
-
-                return true
-            })
-        },
-        cancelVariable () {
-            this.$emit('onChangeEdit', false)
+                config.tag_code = 'customVariable'
+                this.renderConfig = [config]
+            },
+            /**
+             * 切换变量类型
+             */
+            onValTypeChange (id, data) {
+                this.renderData = {}
+                // input 类型需要正则校验
+                if (id === 'input') {
+                    this.theEditingData.validation = '^.+$'
+                } else {
+                    this.theEditingData.validation = ''
+                }
+                // 普通原子类型变量需要增加 source_tag 字段
+                if (ATOM_FORM[this.theEditingData.custom_type]) {
+                    this.theEditingData.source_tag = ATOM_FORM[this.theEditingData.custom_type]
+                } else {
+                    this.theEditingData.source_tag = ''
+                }
+                // 元变量需要增加 meta 字段
+                if (META_ATOM_FORM[this.theEditingData.custom_type]) {
+                    this.theEditingData.is_meta = true
+                } else {
+                    this.theEditingData.is_meta = false
+                }
+                this.getAtomConfig()
+            },
+            /**
+             * 变量显示/隐藏切换
+             */
+            onValShowTypeChange (id, data) {
+                this.theEditingData.show_type = id
+                this.getRenderConfig()
+            },
+            onBlurValidation () {
+                this.getRenderConfig()
+            },
+            /**
+             * datatable 编辑弹窗
+             */
+            onShowEditDialog () {
+                this.isEditDialogShow = true
+            },
+            onConfirmDialogEdit (formData) {
+                this.isEditDialogShow = false
+                this.theEditingData.value = formData['customVariable']
+                this.renderData['customVariable'] = formData['customVariable']
+            },
+            onCancelDialogEdit () {
+                this.isEditDialogShow = false
+            },
+            /**
+             * 校验并保存变量
+             */
+            saveVariable () {
+                return this.$validator.validateAll().then(result => {
+                    let formValid = true
+                    const constantsLength = Object.keys(this.constants).length
+                    // 名称、key等校验，renderform表单校验
+                    if (this.$refs.renderForm) {
+                        if (!this.value && this.theEditingData.show_type === 'show') {
+                            formValid = true
+                        } else {
+                            formValid = this.$refs.renderForm.validate()
+                        }
+                    }
+                    if (this.atomConfigLoading || !result || !formValid) {
+                        const index = this.isNewVariable ? constantsLength : this.theEditingData.index
+                        this.$emit('scrollPanelToView', index)
+                        return false
+                    }
+                    const variable = this.theEditingData
+                    if (!/^\$\{\w+\}$/.test(variable.key)) {
+                        variable.key = '${' + variable.key + '}'
+                    }
+                    this.$emit('onChangeEdit', false)
+                    this.theEditingData.name = this.theEditingData.name.trim()
+                    this.theEditingData.value = this.renderData['customVariable']
+                    if (this.isNewVariable) { // 新增
+                        variable.index = constantsLength
+                        this.addVariable(Object.assign(variable))
+                    } else { // 编辑
+                        this.editVariable({ key: this.variableData.key, variable })
+                    }
+                    return true
+                })
+            },
+            cancelVariable () {
+                this.$emit('onChangeEdit', false)
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import '@/scss/config.scss';
@@ -582,3 +576,15 @@ export default {
     }
 }
 </style>
+© 2019 GitHub, Inc.
+Terms
+Privacy
+Security
+Status
+Help
+Contact GitHub
+Pricing
+API
+Training
+Blog
+About
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEditDialog.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEditDialog.vue
index fe7305b18f..e83df2ba26 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEditDialog.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/TemplateSetting/VariableEditDialog.vue
@@ -23,7 +23,7 @@
                 <RenderForm
                     ref="renderForm"
                     :scheme="renderConfig"
-                    :formOption="renderOption"
+                    :form-option="renderOption"
                     v-model="formData">
                 </RenderForm>
             </div>
@@ -31,37 +31,37 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import tools from '@/utils/tools.js'
-import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
-export default {
-    name: 'VariableEditDialog',
-    components: {
-        RenderForm
-    },
-    props: ['isShow', 'renderConfig', 'renderData', 'renderOption'],
-    data () {
-        return {
-            i18n: {
-                edit: gettext("编辑变量")
-            },
-            formData: tools.deepClone(this.renderData)
-        }
-    },
-    methods: {
-        onConfirm () {
-            let formValid = true
-            if (this.$refs.renderForm) {
-                formValid = this.$refs.renderForm.validate()
+    import '@/utils/i18n.js'
+    import tools from '@/utils/tools.js'
+    import RenderForm from '@/components/common/RenderForm/RenderForm.vue'
+    export default {
+        name: 'VariableEditDialog',
+        components: {
+            RenderForm
+        },
+        props: ['isShow', 'renderConfig', 'renderData', 'renderOption'],
+        data () {
+            return {
+                i18n: {
+                    edit: gettext('编辑变量')
+                },
+                formData: tools.deepClone(this.renderData)
             }
-            if (!formValid) return
-            this.$emit('onConfirmDialogEdit', this.formData)
         },
-        onCancel () {
-            this.$emit('onCancelDialogEdit')
+        methods: {
+            onConfirm () {
+                let formValid = true
+                if (this.$refs.renderForm) {
+                    formValid = this.$refs.renderForm.validate()
+                }
+                if (!formValid) return
+                this.$emit('onConfirmDialogEdit', this.formData)
+            },
+            onCancel () {
+                this.$emit('onCancelDialogEdit')
+            }
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .edit-dialog-wrapper {
@@ -74,5 +74,3 @@ export default {
     }
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue
index 0f612c7903..93e40cfc29 100644
--- a/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateEdit/index.vue
@@ -10,22 +10,22 @@
 * specific language governing permissions and limitations under the License.
 */
 <template>
-    <div class="template-page" v-bkloading="{isLoading: templateDataLoading}">
+    <div class="template-page" v-bkloading="{ isLoading: templateDataLoading }">
         <div v-if="!templateDataLoading" class="pipeline-canvas-wrapper">
             <PipelineCanvas
                 ref="pipelineCanvas"
-                :singleAtomListLoading="singleAtomListLoading"
-                :subAtomListLoading="subAtomListLoading"
-                :isTemplateDataChanged="isTemplateDataChanged"
-                :templateSaving="templateSaving"
-                :createTaskSaving="createTaskSaving"
-                :canvasData="canvasData"
+                :single-atom-list-loading="singleAtomListLoading"
+                :sub-atom-list-loading="subAtomListLoading"
+                :is-template-data-changed="isTemplateDataChanged"
+                :template-saving="templateSaving"
+                :create-task-saving="createTaskSaving"
+                :canvas-data="canvasData"
                 :name="name"
                 :cc_id="cc_id"
                 :common="common"
                 :template_id="template_id"
-                :atomTypeList="atomTypeList"
-                :searchAtomResult="searchAtomResult"
+                :atom-type-list="atomTypeList"
+                :search-atom-result="searchAtomResult"
                 @onChangeName="onChangeName"
                 @onSaveTemplate="onSaveTemplate"
                 @onSearchAtom="onSearchAtom"
@@ -42,23 +42,23 @@
                 ref="nodeConfig"
                 v-if="isNodeConfigPanelShow"
                 :template_id="template_id"
-                :singleAtom="singleAtom"
-                :subAtom="subAtom"
-                :isSettingPanelShow="isSettingPanelShow"
-                :isNodeConfigPanelShow="isNodeConfigPanelShow"
-                :idOfNodeInConfigPanel="idOfNodeInConfigPanel"
+                :single-atom="singleAtom"
+                :sub-atom="subAtom"
+                :is-setting-panel-show="isSettingPanelShow"
+                :is-node-config-panel-show="isNodeConfigPanelShow"
+                :id-of-node-in-config-panel="idOfNodeInConfigPanel"
                 :common="common"
                 @hideConfigPanel="hideConfigPanel"
                 @onUpdateNodeInfo="onUpdateNodeInfo">
             </NodeConfig>
             <TemplateSetting
                 ref="templateSetting"
-                :draftArray = "draftArray"
-                :businessInfoLoading="businessInfoLoading"
-                :isTemplateConfigValid="isTemplateConfigValid"
-                :isSettingPanelShow="isSettingPanelShow"
-                :localTemplateData="localTemplateData"
-                :isClickDraft="isClickDraft"
+                :draft-array="draftArray"
+                :business-info-loading="businessInfoLoading"
+                :is-template-config-valid="isTemplateConfigValid"
+                :is-setting-panel-show="isSettingPanelShow"
+                :local-template-data="localTemplateData"
+                :is-click-draft="isClickDraft"
                 @toggleSettingPanel="toggleSettingPanel"
                 @onDeleteConstant="onDeleteConstant"
                 @variableDataChanged="variableDataChanged"
@@ -84,813 +84,813 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
-// moment用于时区使用
-import moment from 'moment-timezone'
-import { uuid } from '@/utils/uuid.js'
-import tools from '@/utils/tools.js'
-import atomFilter from '@/utils/atomFilter.js'
-import { errorHandler } from '@/utils/errorHandler.js'
-import PipelineCanvas from '@/components/common/PipelineCanvas/index.vue'
-import TemplateSetting from './TemplateSetting/TemplateSetting.vue'
-import NodeConfig from './NodeConfig.vue'
-import draft from '@/utils/draft.js'
-import { STRING_LENGTH } from '@/constants/index.js'
-import { setAtomConfigApiUrls } from '@/config/setting.js'
+    import '@/utils/i18n.js'
+    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+    // moment用于时区使用
+    import moment from 'moment-timezone'
+    import { uuid } from '@/utils/uuid.js'
+    import tools from '@/utils/tools.js'
+    import atomFilter from '@/utils/atomFilter.js'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import PipelineCanvas from '@/components/common/PipelineCanvas/index.vue'
+    import TemplateSetting from './TemplateSetting/TemplateSetting.vue'
+    import NodeConfig from './NodeConfig.vue'
+    import draft from '@/utils/draft.js'
+    import { STRING_LENGTH } from '@/constants/index.js'
+    import { setAtomConfigApiUrls } from '@/config/setting.js'
 
-const i18n = {
-    templateEdit: gettext('流程编辑'),
-    leave: gettext("离开页面"),
-    tips: gettext("系统不会保存您所做的更改，确认离开？"),
-    saved: gettext("保存成功"),
-    error: gettext('任务节点参数错误，请点击错误节点查看详情'),
-    delete_success: gettext('删除本地缓存成功'),
-    delete_fail: gettext('该本地缓存不存在，删除失败'),
-    replace_success: gettext('替换流程成功'),
-    add_cache: gettext('新增流程本地缓存成功'),
-    replace_save: gettext('替换流程自动保存')
-}
+    const i18n = {
+        templateEdit: gettext('流程编辑'),
+        leave: gettext('离开页面'),
+        tips: gettext('系统不会保存您所做的更改，确认离开？'),
+        saved: gettext('保存成功'),
+        error: gettext('任务节点参数错误，请点击错误节点查看详情'),
+        delete_success: gettext('删除本地缓存成功'),
+        delete_fail: gettext('该本地缓存不存在，删除失败'),
+        replace_success: gettext('替换流程成功'),
+        add_cache: gettext('新增流程本地缓存成功'),
+        replace_save: gettext('替换流程自动保存')
+    }
 
-export default {
-    name: 'TemplateEdit',
-    components: {
-        PipelineCanvas,
-        NodeConfig,
-        TemplateSetting
-    },
-    props: ['cc_id', 'template_id', 'type', 'common'],
-    data () {
-        return {
-            i18n,
-            bkMessageInstance: null,
-            exception: {},
-            singleAtomListLoading: false,
-            subAtomListLoading: false,
-            businessInfoLoading: false,
-            templateDataLoading: false,
-            templateSaving: false,
-            createTaskSaving: false,
-            saveAndCreate: false,
-            isTemplateConfigValid: true, // 模板基础配置是否合法
-            isTemplateDataChanged: false,
-            isSettingPanelShow: true,
-            isNodeConfigPanelShow: false,
-            isLeaveDialogShow: false,
-            allowLeave: false,
-            leaveToPath: '',
-            idOfNodeInConfigPanel: '',
-            subAtomGrouped: [],
-            draftArray: [],
-            intervalSaveTemplate: null,
-            intervalGetDraftArray: null,
-            templateUUID: uuid(),
-            localTemplateData: null,
-            isClickDraft: false
-        }
-    },
-    computed: {
-        ...mapState({
-            'singleAtom': state => state.atomList.singleAtom,
-            'subAtom': state => state.atomList.subAtom,
-            'searchAtomResult': state => state.atomList.searchAtomResult,
-            'atomConfig': state => state.atomForm.config,
-            'name': state => state.template.name,
-            'activities': state => state.template.activities,
-            'locations': state => state.template.location,
-            'lines': state => state.template.line,
-            'constants': state => state.template.constants,
-            'gateways': state => state.template.gateways,
-            'businessBaseInfo': state => state.template.businessBaseInfo,
-            'category': state => state.template.category,
-            'subprocess_info': state => state.template.subprocess_info,
-            'businessTimezone': state => state.businessTimezone,
-            'username': state => state.username,
-            'site_url': state => state.site_url,
-            'atomFormConfig': state => state.atomForm.config
-        }),
-        ...mapGetters('atomList/',[
-            'singleAtomGrouped'
-        ]),
-        atomTypeList () {
-            const subAtomGrouped = tools.deepClone(this.subAtomGrouped)
-            if (this.type !== 'new') {
-                let theSameAtomIndex
-                this.subAtomGrouped.some((group, groupIndex) => {
-                    const inTheGroup = group.list.some((item, index) => {
-                        if (item.id === Number(this.template_id)) {
-                            theSameAtomIndex = index
-                            return true
-                        }
-                    })
-                    if (inTheGroup) {
-                        subAtomGrouped[groupIndex].list.splice(theSameAtomIndex, 1)
-                    }
-                    return inTheGroup
-                })
-            }
+    export default {
+        name: 'TemplateEdit',
+        components: {
+            PipelineCanvas,
+            NodeConfig,
+            TemplateSetting
+        },
+        props: ['cc_id', 'template_id', 'type', 'common'],
+        data () {
             return {
-                'tasknode': this.singleAtomGrouped,
-                'subflow': subAtomGrouped
-            }
-        },
-        canvasData () {
-            const branchConditions = {}
-            for (let gKey in this.gateways) {
-                const item = this.gateways[gKey]
-                if (item.conditions) {
-                    branchConditions[item.id] = Object.assign({}, item.conditions)
-                }
-            }
-            return {
-                activities: this.activities,
-                lines: this.lines,
-                locations: this.locations.map(item => {
-                    const data = {...item, mode: 'edit'}
-                    if (
-                        this.subprocess_info &&
-                        this.subprocess_info.details &&
-                        item.type === 'subflow'
-                    ) {
-                        this.subprocess_info.details.some(subflow => {
-                            if (subflow.subprocess_node_id === item.id && subflow.expired) {
-                                data.hasUpdated = true
+                i18n,
+                bkMessageInstance: null,
+                exception: {},
+                singleAtomListLoading: false,
+                subAtomListLoading: false,
+                businessInfoLoading: false,
+                templateDataLoading: false,
+                templateSaving: false,
+                createTaskSaving: false,
+                saveAndCreate: false,
+                isTemplateConfigValid: true, // 模板基础配置是否合法
+                isTemplateDataChanged: false,
+                isSettingPanelShow: true,
+                isNodeConfigPanelShow: false,
+                isLeaveDialogShow: false,
+                allowLeave: false,
+                leaveToPath: '',
+                idOfNodeInConfigPanel: '',
+                subAtomGrouped: [],
+                draftArray: [],
+                intervalSaveTemplate: null,
+                intervalGetDraftArray: null,
+                templateUUID: uuid(),
+                localTemplateData: null,
+                isClickDraft: false
+            }
+        },
+        computed: {
+            ...mapState({
+                'singleAtom': state => state.atomList.singleAtom,
+                'subAtom': state => state.atomList.subAtom,
+                'searchAtomResult': state => state.atomList.searchAtomResult,
+                'atomConfig': state => state.atomForm.config,
+                'name': state => state.template.name,
+                'activities': state => state.template.activities,
+                'locations': state => state.template.location,
+                'lines': state => state.template.line,
+                'constants': state => state.template.constants,
+                'gateways': state => state.template.gateways,
+                'businessBaseInfo': state => state.template.businessBaseInfo,
+                'category': state => state.template.category,
+                'subprocess_info': state => state.template.subprocess_info,
+                'businessTimezone': state => state.businessTimezone,
+                'username': state => state.username,
+                'site_url': state => state.site_url,
+                'atomFormConfig': state => state.atomForm.config
+            }),
+            ...mapGetters('atomList/', [
+                'singleAtomGrouped'
+            ]),
+            atomTypeList () {
+                const subAtomGrouped = tools.deepClone(this.subAtomGrouped)
+                if (this.type !== 'new') {
+                    let theSameAtomIndex
+                    this.subAtomGrouped.some((group, groupIndex) => {
+                        const inTheGroup = group.list.some((item, index) => {
+                            if (item.id === Number(this.template_id)) {
+                                theSameAtomIndex = index
                                 return true
                             }
                         })
+                        if (inTheGroup) {
+                            subAtomGrouped[groupIndex].list.splice(theSameAtomIndex, 1)
+                        }
+                        return inTheGroup
+                    })
+                }
+                return {
+                    'tasknode': this.singleAtomGrouped,
+                    'subflow': subAtomGrouped
+                }
+            },
+            canvasData () {
+                const branchConditions = {}
+                for (const gKey in this.gateways) {
+                    const item = this.gateways[gKey]
+                    if (item.conditions) {
+                        branchConditions[item.id] = Object.assign({}, item.conditions)
                     }
-                    return data
-                }),
-                branchConditions
-            }
-        }
-    },
-    created () {
-        if (this.common) {
-            this.defaultCCId = this.cc_id
-            setAtomConfigApiUrls(this.site_url, 0)
-        }
-        this.initTemplateData()
-        if (this.type === 'edit' || this.type === 'clone') {
-            this.getTemplateData()
-        } else {
-            const name = 'new' + moment.tz(this.businessTimezone).format('YYYYMMDDHHmmss')
-            this.setTemplateName(name)
-        }
-        // 复制并替换本地缓存的内容
-        if (this.type === 'clone') {
-            draft.copyAndReplaceDraft(this.username, this.cc_id, this.template_id, this.templateUUID)
-            this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.templateUUID)
-        } else {
-            // 先执行一次获取本地缓存
-            this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
-        }
-        // 五分钟进行存储本地缓存
-        const fiveMinutes = 1000 * 60 * 5
-        this.intervalSaveTemplate = setInterval(() => {
-            draft.addDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID(), this.getLocalTemplateData())
-        }, fiveMinutes)
-
-        // 五分钟多5秒 为了用于存储本地缓存过程的时间消耗
-        const fiveMinutesAndFiveSeconds = fiveMinutes + 5000
-        this.intervalGetDraftArray = setInterval(() => {
-            this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
-        }, fiveMinutesAndFiveSeconds)
-    },
-    mounted () {
-        this.getSingleAtomList()
-        this.getBusinessBaseInfo()
-    },
-    beforeDestroy () {
-        this.resetTemplateData()
-    },
-    methods: {
-        ...mapActions('atomList/', [
-            'loadSingleAtomList',
-            'loadSubAtomList'
-        ]),
-        ...mapActions('template/', [
-            'loadBusinessBaseInfo',
-            'loadTemplateData',
-            'saveTemplateData',
-            'loadCommonTemplateData'
-        ]),
-        ...mapActions('atomForm/', [
-            'loadAtomConfig',
-            'loadSubflowConfig'
-        ]),
-        ...mapMutations('atomList/', [
-            'setSingleAtom',
-            'setSubAtom',
-            'searchAtom'
-        ]),
-        ...mapMutations('template/', [
-            'initTemplateData',
-            'resetTemplateData',
-            'setBusinessBaseInfo',
-            'setTemplateName',
-            'setTemplateData',
-            'setLocation',
-            'setLocationXY',
-            'setLine',
-            'setActivities',
-            'setGateways',
-            'setStartpoint',
-            'setEndpoint',
-            'setBranchCondition',
-            'replaceTemplate',
-            'replaceLineAndLocation'
-        ]),
-        ...mapMutations('atomForm/', [
-            'setAtomConfig',
-            'clearAtomForm'
-        ]),
-        ...mapGetters('template/',[
-            'getLocalTemplateData'
-        ]),
-        async getSingleAtomList () {
-            this.singleAtomListLoading = true
-            try {
-                const data = await this.loadSingleAtomList()
-                this.setSingleAtom(data)
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.singleAtomListLoading = false
+                }
+                return {
+                    activities: this.activities,
+                    lines: this.lines,
+                    locations: this.locations.map(item => {
+                        const data = { ...item, mode: 'edit' }
+                        if (
+                            this.subprocess_info
+                            && this.subprocess_info.details
+                            && item.type === 'subflow'
+                        ) {
+                            this.subprocess_info.details.some(subflow => {
+                                if (subflow.subprocess_node_id === item.id && subflow.expired) {
+                                    data.hasUpdated = true
+                                    return true
+                                }
+                            })
+                        }
+                        return data
+                    }),
+                    branchConditions
+                }
             }
         },
-        async getBusinessBaseInfo () {
-            this.businessInfoLoading = true
-            try {
-                const data = await this.loadBusinessBaseInfo()
-                this.setBusinessBaseInfo(data)
-                const subAtomData = {
-                    ccId: this.cc_id,
-                    common: this.common,
-                    templateId: this.template_id
-                }
-                this.getSubAtomList(subAtomData)
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.businessInfoLoading = false
+        created () {
+            if (this.common) {
+                this.defaultCCId = this.cc_id
+                setAtomConfigApiUrls(this.site_url, 0)
             }
-        },
-        async getSubAtomList (subAtomData) {
-            this.subAtomListLoading = true
-            try {
-                const data = await this.loadSubAtomList(subAtomData)
-                this.setSubAtom(data)
-                this.handleSubflowGroup()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.subAtomListLoading = false
+            this.initTemplateData()
+            if (this.type === 'edit' || this.type === 'clone') {
+                this.getTemplateData()
+            } else {
+                const name = 'new' + moment.tz(this.businessTimezone).format('YYYYMMDDHHmmss')
+                this.setTemplateName(name)
             }
-        },
-        async getTemplateData () {
-            this.templateDataLoading = true
-            try {
-                const data = {
-                    templateId: this.template_id,
-                    common: this.common
-                }
-                const templateData = await this.loadTemplateData(data)
-                if (this.type === 'clone') {
-                    templateData.name = templateData.name.slice(0, STRING_LENGTH.TEMPLATE_NAME_MAX_LENGTH - 6) + '_clone'
+            // 复制并替换本地缓存的内容
+            if (this.type === 'clone') {
+                draft.copyAndReplaceDraft(this.username, this.cc_id, this.template_id, this.templateUUID)
+                this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.templateUUID)
+            } else {
+                // 先执行一次获取本地缓存
+                this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
+            }
+            // 五分钟进行存储本地缓存
+            const fiveMinutes = 1000 * 60 * 5
+            this.intervalSaveTemplate = setInterval(() => {
+                draft.addDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID(), this.getLocalTemplateData())
+            }, fiveMinutes)
+
+            // 五分钟多5秒 为了用于存储本地缓存过程的时间消耗
+            const fiveMinutesAndFiveSeconds = fiveMinutes + 5000
+            this.intervalGetDraftArray = setInterval(() => {
+                this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
+            }, fiveMinutesAndFiveSeconds)
+        },
+        mounted () {
+            this.getSingleAtomList()
+            this.getBusinessBaseInfo()
+        },
+        beforeDestroy () {
+            this.resetTemplateData()
+        },
+        methods: {
+            ...mapActions('atomList/', [
+                'loadSingleAtomList',
+                'loadSubAtomList'
+            ]),
+            ...mapActions('template/', [
+                'loadBusinessBaseInfo',
+                'loadTemplateData',
+                'saveTemplateData',
+                'loadCommonTemplateData'
+            ]),
+            ...mapActions('atomForm/', [
+                'loadAtomConfig',
+                'loadSubflowConfig'
+            ]),
+            ...mapMutations('atomList/', [
+                'setSingleAtom',
+                'setSubAtom',
+                'searchAtom'
+            ]),
+            ...mapMutations('template/', [
+                'initTemplateData',
+                'resetTemplateData',
+                'setBusinessBaseInfo',
+                'setTemplateName',
+                'setTemplateData',
+                'setLocation',
+                'setLocationXY',
+                'setLine',
+                'setActivities',
+                'setGateways',
+                'setStartpoint',
+                'setEndpoint',
+                'setBranchCondition',
+                'replaceTemplate',
+                'replaceLineAndLocation'
+            ]),
+            ...mapMutations('atomForm/', [
+                'setAtomConfig',
+                'clearAtomForm'
+            ]),
+            ...mapGetters('template/', [
+                'getLocalTemplateData'
+            ]),
+            async getSingleAtomList () {
+                this.singleAtomListLoading = true
+                try {
+                    const data = await this.loadSingleAtomList()
+                    this.setSingleAtom(data)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.singleAtomListLoading = false
                 }
-                this.setTemplateData(templateData)
+            },
+            async getBusinessBaseInfo () {
+                this.businessInfoLoading = true
+                try {
+                    const data = await this.loadBusinessBaseInfo()
+                    this.setBusinessBaseInfo(data)
+                    const subAtomData = {
+                        ccId: this.cc_id,
+                        common: this.common,
+                        templateId: this.template_id
+                    }
+                    this.getSubAtomList(subAtomData)
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.businessInfoLoading = false
+                }
+            },
+            async getSubAtomList (subAtomData) {
+                this.subAtomListLoading = true
+                try {
+                    const data = await this.loadSubAtomList(subAtomData)
+                    this.setSubAtom(data)
+                    this.handleSubflowGroup()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.subAtomListLoading = false
+                }
+            },
+            async getTemplateData () {
+                this.templateDataLoading = true
+                try {
+                    const data = {
+                        templateId: this.template_id,
+                        common: this.common
+                    }
+                    const templateData = await this.loadTemplateData(data)
+                    if (this.type === 'clone') {
+                        templateData.name = templateData.name.slice(0, STRING_LENGTH.TEMPLATE_NAME_MAX_LENGTH - 6) + '_clone'
+                    }
+                    this.setTemplateData(templateData)
                 // const business = data.business
                 // if (business !== undefined) {
                 //     this.businessTimeZone = data.business.timezone
                 // }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.templateDataLoading = false
-            }
-        },
-        async getSingleAtomConfig (location) {
-            const atomType = location.atomId
-            if ($.atoms[atomType]) {
-                this.addSingleAtomActivities(location, $.atoms[atomType])
-                return
-            }
-            this.atomConfigLoading = true
-            try {
-                await this.loadAtomConfig({atomType})
-                this.setAtomConfig({atomType, configData: $.atoms[atomType]})
-                this.addSingleAtomActivities(location, $.atoms[atomType])
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.atomConfigLoading = false
-            }
-        },
-        async getSubflowConfig (location) { // get subflow constants and add node
-            try {
-                const subflowConfig = await this.loadSubflowConfig({templateId: location.atomId, version: location.atomVersion, common: this.common})
-                const constants = tools.deepClone(subflowConfig.form)
-                const activities = tools.deepClone(this.activities[location.id])
-                for (let key in constants) {
-                    const form = constants[key]
-                    if (form.source_tag) {
-                        const [ atomType, tagCode ] = form.source_tag.split('.')
-                        if (!this.atomFormConfig[atomType]) {
-                            await this.loadAtomConfig({atomType})
-                            this.setAtomConfig({atomType, configData: $.atoms[atomType]})
-                        }
-                        const atomConfig = this.atomFormConfig[atomType]
-                        let currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
-                        if (currentFormConfig) {
-                            if (form.is_meta || currentFormConfig.meta_transform) {
-                                currentFormConfig = currentFormConfig.meta_transform(form.meta || form)
-                                if (!form.meta) {
-                                    form.value = currentFormConfig.attrs.value
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.templateDataLoading = false
+                }
+            },
+            async getSingleAtomConfig (location) {
+                const atomType = location.atomId
+                if ($.atoms[atomType]) {
+                    this.addSingleAtomActivities(location, $.atoms[atomType])
+                    return
+                }
+                this.atomConfigLoading = true
+                try {
+                    await this.loadAtomConfig({ atomType })
+                    this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
+                    this.addSingleAtomActivities(location, $.atoms[atomType])
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.atomConfigLoading = false
+                }
+            },
+            async getSubflowConfig (location) { // get subflow constants and add node
+                try {
+                    const subflowConfig = await this.loadSubflowConfig({ templateId: location.atomId, version: location.atomVersion, common: this.common })
+                    const constants = tools.deepClone(subflowConfig.form)
+                    const activities = tools.deepClone(this.activities[location.id])
+                    for (const key in constants) {
+                        const form = constants[key]
+                        if (form.source_tag) {
+                            const [atomType, tagCode] = form.source_tag.split('.')
+                            if (!this.atomFormConfig[atomType]) {
+                                await this.loadAtomConfig({ atomType })
+                                this.setAtomConfig({ atomType, configData: $.atoms[atomType] })
+                            }
+                            const atomConfig = this.atomFormConfig[atomType]
+                            let currentFormConfig = tools.deepClone(atomFilter.formFilter(tagCode, atomConfig))
+                            if (currentFormConfig) {
+                                if (form.is_meta || currentFormConfig.meta_transform) {
+                                    currentFormConfig = currentFormConfig.meta_transform(form.meta || form)
+                                    if (!form.meta) {
+                                        form.value = currentFormConfig.attrs.value
+                                    }
                                 }
                             }
                         }
                     }
+                    activities.constants = constants || {}
+                    this.setActivities({ type: 'edit', location: activities })
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async saveTemplate () {
+                const template_id = this.type === 'edit' ? this.template_id : undefined
+                if (this.saveAndCreate) {
+                    this.createTaskSaving = true
+                } else {
+                    this.templateSaving = true
                 }
-                activities.constants = constants || {}
-                this.setActivities({type: 'edit', location: activities})
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async saveTemplate () {
-            const template_id = this.type === 'edit' ? this.template_id : undefined
-            if (this.saveAndCreate) {
-                this.createTaskSaving = true
-            } else {
-                this.templateSaving = true
-            }
-
-            try {
-                const data = await this.saveTemplateData({'templateId': template_id,'ccId': this.cc_id, 'common': this.common})
-                if (template_id === undefined) {
-                    // 保存模板之前有本地缓存
-                    draft.draftReplace(this.username, this.cc_id, data.template_id, this.templateUUID)
-                }
-                this.$bkMessage({
-                    message: i18n.saved,
-                    theme: 'success'
-                })
-                this.isTemplateDataChanged = false
-                if (this.type !== 'edit') {
-                    this.template_id = data.template_id
-                    this.allowLeave = true
-                    this.$router.push({path: `/template/edit/${this.cc_id}/`, query: {'template_id': data.template_id, 'common': this.common}})
-                }
-                if (this.createTaskSaving) {
-                    const taskUrl = this.getTaskUrl()
-                    this.$router.push(taskUrl)
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.saveAndCreate = false
-                this.templateSaving = false
-                this.createTaskSaving = false
-            }
-        },
-        addSingleAtomActivities (location, config) {
-            const data = {}
-            const defaultValue = atomFilter.getFormItemDefaultValue(config)
-            config.forEach(item => {
-                data[item.tag_code] = {
-                    hook: false,
-                    value: defaultValue[item.tag_code]
-                }
-            })
-            const activities = tools.deepClone(this.activities[location.id])
-            activities.component.data = data
-            this.setActivities({type: 'edit', location: activities})
-        },
-        // 子流程分组
-        handleSubflowGroup () {
-            const primaryData = this.subAtom
-            const groups = []
-            const atomGrouped = []
-            this.businessBaseInfo.task_categories.forEach(item => {
-                groups.push(item.value)
-                atomGrouped.push({
-                    type: item.value,
-                    group_name: item.name,
-                    group_icon: '',
-                    list: []
-                })
-            })
-            primaryData.forEach(item => {
-                const type = item.category
-                const index = groups.indexOf(type)
-                if (index > -1) {
-                    atomGrouped[index].list.push(item)
-                }
-            })
 
-            this.subAtomGrouped = atomGrouped
-        },
-        toggleSettingPanel (isSettingPanelShow){
-            this.isSettingPanelShow = isSettingPanelShow
-        },
-        showConfigPanel (id) {
-            this.variableDataChanged()
-            this.isNodeConfigPanelShow = true
-            this.idOfNodeInConfigPanel = id
-        },
-        hideConfigPanel () {
-            if (this.idOfNodeInConfigPanel) {
-                this.onUpdateNodeInfo(this.idOfNodeInConfigPanel, { isActived: false })
-            }
-            this.isNodeConfigPanelShow = false
-            this.idOfNodeInConfigPanel = ''
-        },
-        /**
-         * 标识模板是否被编辑
-         */
-        variableDataChanged () {
-            this.isTemplateDataChanged = true
-        },
-        /**
-         * 普通标准插件节点校验，不包括子流程节点
-         * 校验项包含：标准插件类型，节点名称，输入参数
-         * @return isAllValid {Boolean} 节点是否合法
-         */
-        validateAtomNode () {
-            let isAllValid = true
-            Object.keys(this.activities).forEach(id => {
-                let isNodeValid = true
-                const node = this.activities[id]
-                if (node.type === 'ServiceActivity') {
-                    if (!node.name) { // 节点名称为空
-                        isNodeValid = false
+                try {
+                    const data = await this.saveTemplateData({ 'templateId': template_id, 'ccId': this.cc_id, 'common': this.common })
+                    if (template_id === undefined) {
+                        // 保存模板之前有本地缓存
+                        draft.draftReplace(this.username, this.cc_id, data.template_id, this.templateUUID)
                     }
-                    if (node.component.code) {
-                        if (!this.validateAtomInputForm(node.component)) {
-                            isNodeValid = false // 输入参数校验不通过
-                        }
-                    } else {
-                        isNodeValid = false // 节点标准插件类型为空
+                    this.$bkMessage({
+                        message: i18n.saved,
+                        theme: 'success'
+                    })
+                    this.isTemplateDataChanged = false
+                    if (this.type !== 'edit') {
+                        this.template_id = data.template_id
+                        this.allowLeave = true
+                        this.$router.push({ path: `/template/edit/${this.cc_id}/`, query: { 'template_id': data.template_id, 'common': this.common } })
                     }
+                    if (this.createTaskSaving) {
+                        const taskUrl = this.getTaskUrl()
+                        this.$router.push(taskUrl)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.saveAndCreate = false
+                    this.templateSaving = false
+                    this.createTaskSaving = false
                 }
-                if (!isNodeValid) {
-                    isAllValid = false
-                    this.markInvalidNode(id)
-                }
-            })
-            if (!isAllValid) {
-                this.$bkMessage({
-                    message: i18n.error,
-                    theme: 'error'
+            },
+            addSingleAtomActivities (location, config) {
+                const data = {}
+                const defaultValue = atomFilter.getFormItemDefaultValue(config)
+                config.forEach(item => {
+                    data[item.tag_code] = {
+                        hook: false,
+                        value: defaultValue[item.tag_code]
+                    }
                 })
-            }
-            return isAllValid
-        },
-        // 校验输入参数是否满足标准插件配置文件正则校验
-        validateAtomInputForm (component) {
-            const { code, data } = component
-            const config = this.atomConfig[code]
-            if (!data) return false
-            if (config) {
-                const formData = {}
-                Object.keys(data).forEach(key => {
-                    formData[key] = data[key].value
+                const activities = tools.deepClone(this.activities[location.id])
+                activities.component.data = data
+                this.setActivities({ type: 'edit', location: activities })
+            },
+            // 子流程分组
+            handleSubflowGroup () {
+                const primaryData = this.subAtom
+                const groups = []
+                const atomGrouped = []
+                this.businessBaseInfo.task_categories.forEach(item => {
+                    groups.push(item.value)
+                    atomGrouped.push({
+                        type: item.value,
+                        group_name: item.name,
+                        group_icon: '',
+                        list: []
+                    })
                 })
-                return this.checkAtomData(config, formData)
-            }
-            return true
-        },
-        // tag 表单校验
-        checkAtomData (config, formData) {
-            let isValid = true
-            config.forEach(item => {
-                const { tag_code, type, attrs } = item
-                const value = formData[tag_code]
-                if (type === 'combine') {
-                    if (!this.checkAtomData(attrs.children, value)) {
-                        isValid = false
+                primaryData.forEach(item => {
+                    const type = item.category
+                    const index = groups.indexOf(type)
+                    if (index > -1) {
+                        atomGrouped[index].list.push(item)
                     }
-                } else {
-                    if (attrs.validation && attrs.validation.length) {
-                        attrs.validation.forEach(item => {
-                            if (item.type === 'required') {
-                                if (tools.isEmpty(value)) {
-                                    isValid = false
-                                }
+                })
+                
+                this.subAtomGrouped = atomGrouped
+            },
+            toggleSettingPanel (isSettingPanelShow) {
+                this.isSettingPanelShow = isSettingPanelShow
+            },
+            showConfigPanel (id) {
+                this.variableDataChanged()
+                this.isNodeConfigPanelShow = true
+                this.idOfNodeInConfigPanel = id
+            },
+            hideConfigPanel () {
+                if (this.idOfNodeInConfigPanel) {
+                    this.onUpdateNodeInfo(this.idOfNodeInConfigPanel, { isActived: false })
+                }
+                this.isNodeConfigPanelShow = false
+                this.idOfNodeInConfigPanel = ''
+            },
+            /**
+             * 标识模板是否被编辑
+             */
+            variableDataChanged () {
+                this.isTemplateDataChanged = true
+            },
+            /**
+             * 普通标准插件节点校验，不包括子流程节点
+             * 校验项包含：标准插件类型，节点名称，输入参数
+             * @return isAllValid {Boolean} 节点是否合法
+             */
+            validateAtomNode () {
+                let isAllValid = true
+                Object.keys(this.activities).forEach(id => {
+                    let isNodeValid = true
+                    const node = this.activities[id]
+                    if (node.type === 'ServiceActivity') {
+                        if (!node.name) { // 节点名称为空
+                            isNodeValid = false
+                        }
+                        if (node.component.code) {
+                            if (!this.validateAtomInputForm(node.component)) {
+                                isNodeValid = false // 输入参数校验不通过
                             }
-                            if (item.type === 'regex') {
-                                const reg = new RegExp(item.args)
-                                if (!reg.test(value)) {
-                                    isValid = false
+                        } else {
+                            isNodeValid = false // 节点标准插件类型为空
+                        }
+                    }
+                    if (!isNodeValid) {
+                        isAllValid = false
+                        this.markInvalidNode(id)
+                    }
+                })
+                if (!isAllValid) {
+                    this.$bkMessage({
+                        message: i18n.error,
+                        theme: 'error'
+                    })
+                }
+                return isAllValid
+            },
+            // 校验输入参数是否满足标准插件配置文件正则校验
+            validateAtomInputForm (component) {
+                const { code, data } = component
+                const config = this.atomConfig[code]
+                if (!data) return false
+                if (config) {
+                    const formData = {}
+                    Object.keys(data).forEach(key => {
+                        formData[key] = data[key].value
+                    })
+                    return this.checkAtomData(config, formData)
+                }
+                return true
+            },
+            // tag 表单校验
+            checkAtomData (config, formData) {
+                let isValid = true
+                config.forEach(item => {
+                    const { tag_code, type, attrs } = item
+                    const value = formData[tag_code]
+                    if (type === 'combine') {
+                        if (!this.checkAtomData(attrs.children, value)) {
+                            isValid = false
+                        }
+                    } else {
+                        if (attrs.validation && attrs.validation.length) {
+                            attrs.validation.forEach(item => {
+                                if (item.type === 'required') {
+                                    if (tools.isEmpty(value)) {
+                                        isValid = false
+                                    }
                                 }
-                            }
-                            if (item.type === 'custom') {
-                                if (!/^\${[^${}]+}$/.test(value)) { // '${xxx}'格式的值不校验
-                                    const validateInfo = item.args.call(this, value, formData)
-                                    if (!validateInfo.result) {
+                                if (item.type === 'regex') {
+                                    const reg = new RegExp(item.args)
+                                    if (!reg.test(value)) {
                                         isValid = false
                                     }
                                 }
-                            }
-                        })
+                                if (item.type === 'custom') {
+                                    if (!/^\${[^${}]+}$/.test(value)) { // '${xxx}'格式的值不校验
+                                        const validateInfo = item.args.call(this, value, formData)
+                                        if (!validateInfo.result) {
+                                            isValid = false
+                                        }
+                                    }
+                                }
+                            })
+                        }
                     }
+                })
+                return isValid
+            },
+            /**
+             * 参数错误节点标记为红色
+             */
+            markInvalidNode (id) {
+                this.onUpdateNodeInfo(id, { status: 'FAILED' })
+            },
+            /**
+             * 节点搜索
+             */
+            onSearchAtom (data) {
+                const payload = {
+                    ...data,
+                    exclude: this.type !== 'new' ? [Number(this.template_id)] : []
                 }
-            })
-            return isValid
-        },
-        /**
-         * 参数错误节点标记为红色
-         */
-        markInvalidNode (id) {
-            this.onUpdateNodeInfo(id, {status: 'FAILED'})
-        },
-        /**
-         * 节点搜索
-         */
-        onSearchAtom (data) {
-            const payload = {
-                ...data,
-                exclude: this.type !== 'new' ? [Number(this.template_id)] : []
-            }
-            this.searchAtom(payload)
-        },
-        /**
-         * 任务节点点击
-         */
-        onNodeClick (id) {
-            const currentId = this.idOfNodeInConfigPanel
-            const nodeType = this.locations.filter(item => {return item.id === id})[0].type
-            if (nodeType === 'tasknode' || nodeType === 'subflow'){
-                // 清除当前节点选中态
-                if (currentId) {
-                    this.onUpdateNodeInfo(currentId, { isActived: false })
-                }
-                this.onUpdateNodeInfo(id, { isActived: true })
+                this.searchAtom(payload)
+            },
+            /**
+             * 任务节点点击
+             */
+            onNodeClick (id) {
+                const currentId = this.idOfNodeInConfigPanel
+                const nodeType = this.locations.filter(item => {
+                    return item.id === id
+                })[0].type
+                if (nodeType === 'tasknode' || nodeType === 'subflow') {
+                    // 清除当前节点选中态
+                    if (currentId) {
+                        this.onUpdateNodeInfo(currentId, { isActived: false })
+                    }
+                    this.onUpdateNodeInfo(id, { isActived: true })
 
-                if (this.isNodeConfigPanelShow) {
-                    this.$refs.nodeConfig.syncNodeDataToActivities().then(isValid => {
+                    if (this.isNodeConfigPanelShow) {
+                        this.$refs.nodeConfig.syncNodeDataToActivities().then(isValid => {
+                            this.showConfigPanel(id)
+                        })
+                    } else {
                         this.showConfigPanel(id)
+                    }
+                }
+            },
+            // 分支网关失焦
+            onLabelBlur (labelData) {
+                this.variableDataChanged()
+                this.setBranchCondition(labelData)
+            },
+            onLocationChange (changeType, location) {
+                this.setLocation({ type: changeType, location })
+                switch (location.type) {
+                    case 'tasknode':
+                        if (changeType === 'add' && location.atomId) { // drag new single node
+                            this.setActivities({ type: 'add', location })
+                            this.getSingleAtomConfig(location)
+                            return
+                        }
+                        if (changeType === 'delete') {
+                            this.hideConfigPanel()
+                        }
+                        this.setActivities({ type: changeType, location })
+                        break
+                    case 'subflow':
+                        if (changeType === 'add' && location.atomId) { // drag new subflow node
+                            this.setActivities({ type: 'add', location })
+                            this.getSubflowConfig(location)
+                            return
+                        }
+                        if (changeType === 'delete') {
+                            this.hideConfigPanel()
+                        }
+                        this.setActivities({ type: changeType, location })
+                        break
+                    case 'branchgateway':
+                    case 'parallelgateway':
+                    case 'convergegateway':
+                        this.setGateways({ type: changeType, location })
+                        break
+                    case 'startpoint':
+                        this.setStartpoint({ type: changeType, location })
+                        break
+                    case 'endpoint':
+                        this.setEndpoint({ type: changeType, location })
+                        break
+                }
+            },
+            onLineChange (changeType, line) {
+                this.setLine({ type: changeType, line })
+            },
+            onLocationMoveDone (location) {
+                this.variableDataChanged()
+                this.setLocationXY(location)
+            },
+            onUpdateNodeInfo (id, data) {
+                this.$refs.pipelineCanvas.onUpdateNodeInfo(id, data)
+            },
+            onDeleteConstant (key) {
+                this.variableDataChanged()
+                if (this.isNodeConfigPanelShow) {
+                    const constant = this.constants[key]
+                    this.$refs.nodeConfig.onDeleteConstant(constant)
+                }
+            },
+            // 流程名称修改
+            onChangeName (name) {
+                this.variableDataChanged()
+                this.setTemplateName(name)
+            },
+            // 基础属性-->模板分类修改
+            onSelectCategory (value) {
+                if (value) {
+                    this.isTemplateConfigValid = true
+                }
+            },
+            getTaskUrl () {
+                let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${this.template_id}`
+                if (this.common) {
+                    url += '&common=1'
+                }
+                return url
+            },
+            // 点击保存模板按钮回调
+            onSaveTemplate (saveAndCreate) {
+                if (this.templateSaving || this.createTaskSaving) {
+                    return
+                }
+                this.saveAndCreate = saveAndCreate
+                this.checkVariable() // 全局变量是否合法
+            },
+            // 校验全局变量
+            checkVariable () {
+                const templateSetting = this.$refs.templateSetting
+                if (templateSetting.isEditPanelOpen()) {
+                    templateSetting.saveVariable().then(result => {
+                        if (!result) {
+                            templateSetting.setErrorTab('globalVariableTab')
+                            return
+                        }
+                        this.checkBasicProperty() // 基础属性是否合法
                     })
                 } else {
-                    this.showConfigPanel(id)
-                }
-            }
-        },
-        // 分支网关失焦
-        onLabelBlur (labelData) {
-            this.variableDataChanged()
-            this.setBranchCondition(labelData)
-        },
-        onLocationChange (changeType, location) {
-            this.setLocation({type: changeType, location})
-            switch (location.type) {
-                case 'tasknode':
-                    if (changeType === 'add' && location.atomId) {  // drag new single node
-                        this.setActivities({type: 'add', location})
-                        this.getSingleAtomConfig(location)
-                        return
-                    }
-                    if (changeType === 'delete') {
-                        this.hideConfigPanel()
-                    }
-                    this.setActivities({type: changeType, location})
-                    break
-                case 'subflow':
-                    if (changeType === 'add' && location.atomId) { // drag new subflow node
-                        this.setActivities({type: 'add', location})
-                        this.getSubflowConfig(location)
-                        return
-                    }
-                    if (changeType === 'delete') {
-                        this.hideConfigPanel()
-                    }
-                    this.setActivities({type: changeType, location})
-                    break
-                case 'branchgateway':
-                case 'parallelgateway':
-                case 'convergegateway':
-                    this.setGateways({type: changeType, location})
-                    break
-                case 'startpoint':
-                    this.setStartpoint({type: changeType, location})
-                    break
-                case 'endpoint':
-                    this.setEndpoint({type: changeType, location})
-                    break
-            }
-        },
-        onLineChange (changeType, line) {
-            this.setLine({type: changeType, line})
-        },
-        onLocationMoveDone (location) {
-            this.variableDataChanged()
-            this.setLocationXY(location)
-        },
-        onUpdateNodeInfo (id, data) {
-            this.$refs.pipelineCanvas.onUpdateNodeInfo(id, data)
-        },
-        onDeleteConstant (key) {
-            this.variableDataChanged()
-            if (this.isNodeConfigPanelShow) {
-                const constant = this.constants[key]
-                this.$refs.nodeConfig.onDeleteConstant(constant)
-            }
-        },
-        // 流程名称修改
-        onChangeName (name) {
-            this.variableDataChanged()
-            this.setTemplateName(name)
-        },
-        // 基础属性-->模板分类修改
-        onSelectCategory (value) {
-            if (value) {
-                this.isTemplateConfigValid = true
-            }
-        },
-        getTaskUrl () {
-            let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${this.template_id}`
-            if (this.common) {
-                url += '&common=1'
-            }
-            return url
-        },
-        // 点击保存模板按钮回调
-        onSaveTemplate (saveAndCreate) {
-            if (this.templateSaving || this.createTaskSaving) {
-                return
-            }
-            this.saveAndCreate = saveAndCreate
-            this.checkVariable() // 全局变量是否合法
-        },
-        // 校验全局变量
-        checkVariable () {
-            const templateSetting = this.$refs.templateSetting
-            if (templateSetting.isEditPanelOpen()) {
-                templateSetting.saveVariable().then(result => {
-                    if (!result) {
-                        templateSetting.setErrorTab('globalVariableTab')
-                        return
-                    }
                     this.checkBasicProperty() // 基础属性是否合法
-                })
-            } else {
-                this.checkBasicProperty() // 基础属性是否合法
-            }
-        },
-        // 校验基础属性
-        checkBasicProperty () {
-            const templateSetting = this.$refs.templateSetting
-            // 模板分类是否选择
-            if (!this.category) {
-                this.isTemplateConfigValid = false
-                this.templateSaving = false
-                this.createTaskSaving = false
-                templateSetting.setErrorTab('templateConfigTab')
-                return
-            }
-            this.asyncNodeConfig() // 节点配置面板
-        },
-        // 同步节点配置面板数据
-        asyncNodeConfig () {
-            if (this.isNodeConfigPanelShow) {
-                this.$refs.nodeConfig.syncNodeDataToActivities().then((isValid) => {
-                    if (!isValid) return
+                }
+            },
+            // 校验基础属性
+            checkBasicProperty () {
+                const templateSetting = this.$refs.templateSetting
+                // 模板分类是否选择
+                if (!this.category) {
+                    this.isTemplateConfigValid = false
+                    this.templateSaving = false
+                    this.createTaskSaving = false
+                    templateSetting.setErrorTab('templateConfigTab')
+                    return
+                }
+                this.asyncNodeConfig() // 节点配置面板
+            },
+            // 同步节点配置面板数据
+            asyncNodeConfig () {
+                if (this.isNodeConfigPanelShow) {
+                    this.$refs.nodeConfig.syncNodeDataToActivities().then((isValid) => {
+                        if (!isValid) return
+                        this.checkNodeAndSaveTemplate()
+                    })
+                } else {
                     this.checkNodeAndSaveTemplate()
-                })
-            } else {
-                this.checkNodeAndSaveTemplate()
-            }
-        },
-        // 校验节点配置
-        checkNodeAndSaveTemplate () {
-            // 节点配置是否错误
-            const nodeWithErrors = document.querySelectorAll('.node-with-text.FAILED')
-            if (nodeWithErrors && nodeWithErrors.length) {
-                this.templateSaving = false
-                this.createTaskSaving = false
-                errorHandler({message: i18n.error}, this)
-                return
-            }
-            const isAllNodeValid = this.validateAtomNode()
+                }
+            },
+            // 校验节点配置
+            checkNodeAndSaveTemplate () {
+                // 节点配置是否错误
+                const nodeWithErrors = document.querySelectorAll('.node-with-text.FAILED')
+                if (nodeWithErrors && nodeWithErrors.length) {
+                    this.templateSaving = false
+                    this.createTaskSaving = false
+                    errorHandler({ message: i18n.error }, this)
+                    return
+                }
+                const isAllNodeValid = this.validateAtomNode()
 
-            if (isAllNodeValid) {
-                this.saveTemplate()
-            }
-        },
-        onBackToList () {
-            this.$router.push({path: `/template/home/${this.cc_id}/`})
-        },
-        onLeaveConfirm () {
-            this.allowLeave = true
-            this.$router.push({path: this.leaveToPath})
-        },
-        onLeaveCancel () {
-            this.allowLeave = false
-            this.leaveToPath = ''
-            this.isLeaveDialogShow = false
-        },
-        // 删除本地缓存
-        onDeleteDraft (key) {
-            if (draft.deleteDraft(key)) {
-                this.$bkMessage({
-                    'message': i18n.delete_success,
-                    'theme': 'success'
-                })
-            } else {
-                this.$bkMessage({
-                    'message': i18n.delete_fail,
-                    'theme': 'error'
-                })
-            }
-            // 删除后刷新
-            this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
-        },
-        // 模板替换
-        onReplaceTemplate (data) {
-            const {templateData, type} = data
-            if (type === 'replace') {
-                const nowTemplateSerializable = JSON.stringify(this.getLocalTemplateData())
-                const lastDraft = JSON.parse(draft.getLastDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID()))
-                const lastTemplate = lastDraft['template']
-                const lastTemplateSerializable = JSON.stringify(lastTemplate)
-                // 替换之前进行保存
-                if (nowTemplateSerializable !== lastTemplateSerializable) {
-                    draft.addDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID(), this.getLocalTemplateData(), i18n.replace_save)
-                }
-                this.$bkMessage({
-                    'message': i18n.replace_success,
-                    'theme': 'success'
-                })
-            }
-            this.templateDataLoading = true
-            this.replaceTemplate(templateData)
-            // 替换后后刷新
-            this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
-            this.$nextTick(() => {
-                this.templateDataLoading = false
-                this.$nextTick(() => {
-                    this.isClickDraft = type === 'replace'
-                    this.$refs.templateSetting.onTemplateSettingShow('localDraftTab')
-                })
-            })
-        },
-        // 新增本地缓存
-        onNewDraft (message, isMessage = true) {
-            // 创建本地缓存
-            if (this.type === 'clone') {
-                draft.addDraft(this.username, this.cc_id, this.templateUUID, this.getLocalTemplateData(), message)
-                // 创建后后刷新
-                this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.templateUUID)
-            }
-            else {
-                draft.addDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID(), this.getLocalTemplateData(), message)
-                // 创建后后刷新
+                if (isAllNodeValid) {
+                    this.saveTemplate()
+                }
+            },
+            onBackToList () {
+                this.$router.push({ path: `/template/home/${this.cc_id}/` })
+            },
+            onLeaveConfirm () {
+                this.allowLeave = true
+                this.$router.push({ path: this.leaveToPath })
+            },
+            onLeaveCancel () {
+                this.allowLeave = false
+                this.leaveToPath = ''
+                this.isLeaveDialogShow = false
+            },
+            // 删除本地缓存
+            onDeleteDraft (key) {
+                if (draft.deleteDraft(key)) {
+                    this.$bkMessage({
+                        'message': i18n.delete_success,
+                        'theme': 'success'
+                    })
+                } else {
+                    this.$bkMessage({
+                        'message': i18n.delete_fail,
+                        'theme': 'error'
+                    })
+                }
+                // 删除后刷新
                 this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
-            }
-            if (isMessage) {
-                this.$bkMessage({
-                    'message': i18n.add_cache,
-                    'theme': 'success'
+            },
+            // 模板替换
+            onReplaceTemplate (data) {
+                const { templateData, type } = data
+                if (type === 'replace') {
+                    const nowTemplateSerializable = JSON.stringify(this.getLocalTemplateData())
+                    const lastDraft = JSON.parse(draft.getLastDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID()))
+                    const lastTemplate = lastDraft['template']
+                    const lastTemplateSerializable = JSON.stringify(lastTemplate)
+                    // 替换之前进行保存
+                    if (nowTemplateSerializable !== lastTemplateSerializable) {
+                        draft.addDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID(), this.getLocalTemplateData(), i18n.replace_save)
+                    }
+                    this.$bkMessage({
+                        'message': i18n.replace_success,
+                        'theme': 'success'
+                    })
+                }
+                this.templateDataLoading = true
+                this.replaceTemplate(templateData)
+                // 替换后后刷新
+                this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
+                this.$nextTick(() => {
+                    this.templateDataLoading = false
+                    this.$nextTick(() => {
+                        this.isClickDraft = type === 'replace'
+                        this.$refs.templateSetting.onTemplateSettingShow('localDraftTab')
+                    })
                 })
+            },
+            // 新增本地缓存
+            onNewDraft (message, isMessage = true) {
+                // 创建本地缓存
+                if (this.type === 'clone') {
+                    draft.addDraft(this.username, this.cc_id, this.templateUUID, this.getLocalTemplateData(), message)
+                    // 创建后后刷新
+                    this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.templateUUID)
+                } else {
+                    draft.addDraft(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID(), this.getLocalTemplateData(), message)
+                    // 创建后后刷新
+                    this.draftArray = draft.getDraftArray(this.username, this.cc_id, this.getTemplateIdOrTemplateUUID())
+                }
+                if (isMessage) {
+                    this.$bkMessage({
+                        'message': i18n.add_cache,
+                        'theme': 'success'
+                    })
+                }
+            },
+            // 修改line和location
+            onReplaceLineAndLocation (data) {
+                this.replaceLineAndLocation(data)
+            },
+            getTemplateIdOrTemplateUUID () {
+                if (this.template_id === undefined || this.template_id === '') {
+                    return this.templateUUID
+                }
+                return this.template_id
+            },
+            updateLocalTemplateData () {
+                this.localTemplateData = this.getLocalTemplateData()
+            }
+        },
+        beforeRouteLeave (to, from, next) { // leave or reload page
+            if (this.allowLeave || !this.isTemplateDataChanged) {
+                // 退出时需要关闭定时器
+                clearInterval(this.intervalSaveTemplate)
+                clearInterval(this.intervalGetDraftArray)
+                const template_id = this.getTemplateIdOrTemplateUUID()
+                // 如果是 uuid 或者克隆的模板会进行删除
+                if (template_id.length === 28 || this.type === 'clone') {
+                    draft.deleteAllDraftByUUID(this.username, this.cc_id, this.templateUUID)
+                }
+                if (this.common) {
+                    to.params.cc_id = this.defaultCCId
+                }
+                this.clearAtomForm()
+                next()
+            } else {
+                this.leaveToPath = to.fullPath
+                this.isLeaveDialogShow = true
             }
-        },
-        // 修改line和location
-        onReplaceLineAndLocation (data) {
-            this.replaceLineAndLocation(data)
-        },
-        getTemplateIdOrTemplateUUID () {
-            let template_id = ''
-            if (this.template_id === undefined || this.template_id === '') {
-                return this.templateUUID
-            }
-            return this.template_id
-        },
-        updateLocalTemplateData () {
-            this.localTemplateData =  this.getLocalTemplateData()
-        }
-    },
-    beforeRouteLeave (to, from, next) { // leave or reload page
-        if (this.allowLeave || !this.isTemplateDataChanged) {
-            // 退出时需要关闭定时器
-            clearInterval(this.intervalSaveTemplate)
-            clearInterval(this.intervalGetDraftArray)
-            let template_id = this.getTemplateIdOrTemplateUUID()
-            // 如果是 uuid 或者克隆的模板会进行删除
-            if (template_id.length === 28 || this.type === 'clone') {
-                draft.deleteAllDraftByUUID(this.username, this.cc_id, this.templateUUID)
-            }
-            if (this.common) {
-                to.params.cc_id = this.defaultCCId
-            }
-            this.clearAtomForm()
-            next()
-        } else {
-            this.leaveToPath = to.fullPath
-            this.isLeaveDialogShow = true
         }
     }
-}
 </script>
 <style lang="scss" scoped>
     @import '@/scss/config.scss';
diff --git a/pipeline/blueflow/src/pages/template/TemplateList/AuthorityManageDialog.vue b/pipeline/blueflow/src/pages/template/TemplateList/AuthorityManageDialog.vue
index f8d75b76aa..64e8a68334 100644
--- a/pipeline/blueflow/src/pages/template/TemplateList/AuthorityManageDialog.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateList/AuthorityManageDialog.vue
@@ -20,7 +20,7 @@
         :is-show.sync="isAuthorityDialogShow"
         @confirm="onAuthorityConfirm"
         @cancel="onAuthorityCancel">
-        <div slot="content" v-bkloading="{isLoading: loading || pending, opacity: 1}">
+        <div slot="content" v-bkloading="{ isLoading: loading || pending, opacity: 1 }">
             <div class="common-form-item">
                 <label>{{i18n.createTaskAuth}}</label>
                 <div class="common-form-content">
@@ -28,7 +28,7 @@
                         :list="personGroupList"
                         :selected.sync="createdTaskPerList"
                         :multi-select="true"
-                        :has-children='true'
+                        :has-children="true"
                         :searchable="true"
                         :allow-clear="true">
                     </bk-selector>
@@ -41,7 +41,7 @@
                         :list="personGroupList"
                         :selected.sync="modifyParamsPerList"
                         :multi-select="true"
-                        :has-children='true'
+                        :has-children="true"
                         :searchable="true"
                         :allow-clear="true">
                     </bk-selector>
@@ -54,7 +54,7 @@
                         :list="personGroupList"
                         :selected.sync="executeTaskPerList"
                         :multi-select="true"
-                        :has-children='true'
+                        :has-children="true"
                         :searchable="true"
                         :allow-clear="true">
                     </bk-selector>
@@ -64,107 +64,107 @@
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-export default {
-    name: 'AthorityManageDialog',
-    props: ['isAuthorityDialogShow', 'templateId', 'pending', 'common'],
-    data () {
-        return {
-            loading: true,
-            personGroupList: [],
-            createdTaskPerList: [],
-            modifyParamsPerList: [],
-            executeTaskPerList: [],
-            i18n: {
-                title: gettext('权限管理'),
-                createTaskAuth: gettext('新建任务权限'),
-                modifyParamsAuth: gettext('认领任务权限'),
-                executeTaskAuth: gettext('执行任务权限')
-            }
-        }
-    },
-    created () {
-        this.loadData()
-    },
-    methods: {
-        ...mapActions('templateList/', [
-            'getBizPerson',
-            'getTemplatePersons'
-        ]),
-        async loadData () {
-            this.loading = true
-            try {
-                Promise.all([
-                    this.loadBizPerson(),
-                    this.loadTemplatePersons()
-                ]).then(values => {
-                    this.personGroupList = values[0].roles.map(item => {
-                        return {
-                            name: item.text,
-                            children: item.children.map(i => {
-                                return {
-                                    id: i.id,
-                                    name: i.text
-                                }
-                            })
-                        }
-                    })
-                    this.createdTaskPerList = values[1].create_task.map(item => item.show_name)
-                    this.modifyParamsPerList = values[1].fill_params.map(item => item.show_name)
-                    this.executeTaskPerList = values[1].execute_task.map(item => item.show_name)
-                    this.loading = false
-                })
-            } catch (e) {
-                errorHandler(e, this)
-            }
-        },
-        async loadBizPerson () {
-            try {
-                const res = await this.getBizPerson()
-                if (res.result) {
-                    return res.data
-                } else {
-                    errorHandler(res, this)
-                    return []
+    import '@/utils/i18n.js'
+    import { mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    export default {
+        name: 'AthorityManageDialog',
+        props: ['isAuthorityDialogShow', 'templateId', 'pending', 'common'],
+        data () {
+            return {
+                loading: true,
+                personGroupList: [],
+                createdTaskPerList: [],
+                modifyParamsPerList: [],
+                executeTaskPerList: [],
+                i18n: {
+                    title: gettext('权限管理'),
+                    createTaskAuth: gettext('新建任务权限'),
+                    modifyParamsAuth: gettext('认领任务权限'),
+                    executeTaskAuth: gettext('执行任务权限')
                 }
-            } catch (e) {
-                errorHandler(e, this)
             }
         },
-        async loadTemplatePersons () {
-            try {
+        created () {
+            this.loadData()
+        },
+        methods: {
+            ...mapActions('templateList/', [
+                'getBizPerson',
+                'getTemplatePersons'
+            ]),
+            async loadData () {
+                this.loading = true
+                try {
+                    Promise.all([
+                        this.loadBizPerson(),
+                        this.loadTemplatePersons()
+                    ]).then(values => {
+                        this.personGroupList = values[0].roles.map(item => {
+                            return {
+                                name: item.text,
+                                children: item.children.map(i => {
+                                    return {
+                                        id: i.id,
+                                        name: i.text
+                                    }
+                                })
+                            }
+                        })
+                        this.createdTaskPerList = values[1].create_task.map(item => item.show_name)
+                        this.modifyParamsPerList = values[1].fill_params.map(item => item.show_name)
+                        this.executeTaskPerList = values[1].execute_task.map(item => item.show_name)
+                        this.loading = false
+                    })
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async loadBizPerson () {
+                try {
+                    const res = await this.getBizPerson()
+                    if (res.result) {
+                        return res.data
+                    } else {
+                        errorHandler(res, this)
+                        return []
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            async loadTemplatePersons () {
+                try {
+                    const data = {
+                        templateId: this.templateId,
+                        common: this.common
+                    }
+                    const res = await this.getTemplatePersons(data)
+                    if (res.result) {
+                        return res.data
+                    } else {
+                        errorHandler(res, this)
+                        return []
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                }
+            },
+            onAuthorityConfirm () {
                 const data = {
                     templateId: this.templateId,
+                    createTask: this.createdTaskPerList,
+                    fillParams: this.modifyParamsPerList,
+                    executeTask: this.executeTaskPerList,
                     common: this.common
                 }
-                const res = await this.getTemplatePersons(data)
-                if (res.result) {
-                    return res.data
-                } else {
-                    errorHandler(res, this)
-                    return []
-                }
-            } catch (e) {
-                errorHandler(e, this)
+                this.$emit('onAuthorityConfirm', data)
+            },
+            onAuthorityCancel () {
+                this.$emit('onAuthorityCancel')
             }
-        },
-        onAuthorityConfirm () {
-            const data = {
-                templateId: this.templateId,
-                createTask: this.createdTaskPerList,
-                fillParams: this.modifyParamsPerList,
-                executeTask: this.executeTaskPerList,
-                common: this.common
-            }
-            this.$emit('onAuthorityConfirm', data)
-        },
-        onAuthorityCancel () {
-            this.$emit('onAuthorityCancel')
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 .common-form-item {
@@ -176,5 +176,3 @@ export default {
     margin-right: 20px;
 }
 </style>
-
-
diff --git a/pipeline/blueflow/src/pages/template/TemplateList/ExportTemplateDialog.vue b/pipeline/blueflow/src/pages/template/TemplateList/ExportTemplateDialog.vue
index a95e36bb6c..7b2ceb2a83 100644
--- a/pipeline/blueflow/src/pages/template/TemplateList/ExportTemplateDialog.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateList/ExportTemplateDialog.vue
@@ -23,10 +23,10 @@
         <div slot="content" class="export-container">
             <div class="template-wrapper">
                 <div class="template-search">
-                    <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput"/>
+                    <input class="search-input" :placeholder="i18n.placeholder" v-model="searchStr" @input="onSearchInput" />
                     <i class="common-icon-search"></i>
                 </div>
-                <div class="template-list" v-bkloading="{isLoading: exportPending, opacity: 1}">
+                <div class="template-list" v-bkloading="{ isLoading: exportPending, opacity: 1 }">
                     <ul v-if="!searchMode" class="grouped-list">
                         <template v-for="item in templateList">
                             <li
@@ -44,7 +44,7 @@
                                         :key="group.id"
                                         :title="group.name"
                                         @click="onSelectTemplate(group)">
-                                        <span :class="['checkbox', {checked: group.ischecked}]"></span>
+                                        <span :class="['checkbox', { checked: group.ischecked }]"></span>
                                         {{group.name}}
                                     </li>
                                 </ul>
@@ -59,7 +59,7 @@
                                 :key="item.id"
                                 :title="item.name"
                                 @click="onSelectTemplate(item)">
-                                <span :class="['checkbox', {checked: item.ischecked}]"></span>
+                                <span :class="['checkbox', { checked: item.ischecked }]"></span>
                                 {{item.name}}
                             </li>
                         </ul>
@@ -86,171 +86,170 @@
                 </ul>
             </div>
             <div class="template-checkbox" @click="onSelectAll">
-                <span :class="['checkbox', {checked: ischecked,'checkbox-disabled':isCheckedDisabled}]"></span>
+                <span :class="['checkbox', { checked: ischecked,'checkbox-disabled': isCheckedDisabled }]"></span>
                 <span class="checkbox-name">{{ i18n.selectAll }}</span>
             </div>
         </div>
     </bk-dialog>
 </template>
 <script>
-import '@/utils/i18n.js'
-import toolsUtils from '@/utils/tools.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-import NoData from '@/components/common/base/NoData.vue'
-export default {
-    name: 'ExportTemplateDialog',
-    props: ['isExportDialogShow', 'businessInfoLoading', 'common'],
-    components: {
-        NoData
-    },
-    data () {
-        return {
-            exportPending: false,
-            searchMode: false,
-            ischecked: false,
-            isCheckedDisabled: false,
-            selectedTemplate: [],
-            templateList: [],
-            searchList: [],
-            selectedList: [],
-            i18n: {
-                title: gettext('导出流程'),
-                choose: gettext('选择流程'),
-                noSearchResult: gettext('搜索结果为空'),
-                templateEmpty: gettext('请选择需要导出的流程'),
-                placeholder: gettext('请输入流程名称'),
-                selected: gettext('已选择'),
-                num: gettext('项'),
-                selectAll: gettext('全选'),
-                delete: gettext('删除')
-            },
-            templateEmpty: false,
-            searchStr: ''
-        }
-    },
-    computed: {
-        ...mapState({
-            'businessBaseInfo': state => state.template.businessBaseInfo
-        })
-    },
-    created () {
-        this.getTemplateData()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        ...mapActions('templateList/', [
-            'loadTemplateList'
-        ]),
-        async getTemplateData () {
-            this.exportPending = true
-            this.isCheckedDisabled = true
-            try {
-                const data = {
-                    common: this.common
-                }
-                const respData = await this.loadTemplateList(data)
-                const list = respData.objects
-                this.templateList = this.getGroupedList(list)
-                this.templateList.forEach((item) => {
-                    item.children.forEach((group) => {
-                        this.$set(group, 'ischecked', false)
-                        this.selectedList.push(group)
-                    })
-                })
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.exportPending = false
-                this.isCheckedDisabled = false
+    import '@/utils/i18n.js'
+    import toolsUtils from '@/utils/tools.js'
+    import { mapState, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+    export default {
+        name: 'ExportTemplateDialog',
+        components: {
+            NoData
+        },
+        props: ['isExportDialogShow', 'businessInfoLoading', 'common'],
+        data () {
+            return {
+                exportPending: false,
+                searchMode: false,
+                ischecked: false,
+                isCheckedDisabled: false,
+                selectedTemplate: [],
+                templateList: [],
+                searchList: [],
+                selectedList: [],
+                i18n: {
+                    title: gettext('导出流程'),
+                    choose: gettext('选择流程'),
+                    noSearchResult: gettext('搜索结果为空'),
+                    templateEmpty: gettext('请选择需要导出的流程'),
+                    placeholder: gettext('请输入流程名称'),
+                    selected: gettext('已选择'),
+                    num: gettext('项'),
+                    selectAll: gettext('全选'),
+                    delete: gettext('删除')
+                },
+                templateEmpty: false,
+                searchStr: ''
             }
         },
-        getGroupedList (list) {
-            const groups = []
-            const atomGrouped = []
-            this.businessBaseInfo.task_categories.forEach(item => {
-                groups.push(item.value)
-                atomGrouped.push({
-                    name: item.name,
-                    children: []
-                })
-            })
-            list.forEach(item => {
-                const type = item.category
-                const index = groups.indexOf(type)
-                if (index > -1) {
-                    atomGrouped[index].children.push({
-                        id: item.id,
-                        name: item.name
-                    })
-                }
+        computed: {
+            ...mapState({
+                'businessBaseInfo': state => state.template.businessBaseInfo
             })
-            const listGroup = atomGrouped.filter(item => item.children.length)
-            return listGroup
         },
-        searchInputhandler () {
-            if (this.searchStr.length) {
-                this.searchMode = true
-                const reg = new RegExp(this.searchStr, 'g')
-                this.searchList =  this.selectedList.filter(item => {
-                    return reg.test(item.name)
-                })
-            } else {
-                this.searchMode = false
-                this.searchList = []
-            }
-        },
-        onSelectTemplate (group, clearAll) {
-            group.ischecked = !group.ischecked
-            if (group.ischecked) {
-                this.selectedTemplate.push(group)
-            } else {
-                this.deleteTemplate(group)
-            }
+        created () {
+            this.getTemplateData()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
         },
-        deleteTemplate (template) {
-            const deleteIndex = this.selectedTemplate.findIndex(item => item.id === template.id)
-            if (deleteIndex > -1) {
-                const deleteGroup = this.selectedTemplate.splice(deleteIndex, 1)[0]
-                deleteGroup.ischecked = false
-                this.templateList.forEach((item) => {
-                    if (item.children.findIndex(util => !util.ischecked)) {
-                        this.ischecked = false
+        methods: {
+            ...mapActions('templateList/', [
+                'loadTemplateList'
+            ]),
+            async getTemplateData () {
+                this.exportPending = true
+                this.isCheckedDisabled = true
+                try {
+                    const data = {
+                        common: this.common
                     }
+                    const respData = await this.loadTemplateList(data)
+                    const list = respData.objects
+                    this.templateList = this.getGroupedList(list)
+                    this.templateList.forEach((item) => {
+                        item.children.forEach((group) => {
+                            this.$set(group, 'ischecked', false)
+                            this.selectedList.push(group)
+                        })
+                    })
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.exportPending = false
+                    this.isCheckedDisabled = false
+                }
+            },
+            getGroupedList (list) {
+                const groups = []
+                const atomGrouped = []
+                this.businessBaseInfo.task_categories.forEach(item => {
+                    groups.push(item.value)
+                    atomGrouped.push({
+                        name: item.name,
+                        children: []
+                    })
                 })
-            }
-        },
-        onSelectAll () {
-            if (this.isCheckedDisabled) {
-                return false
-            }
-            this.selectedTemplate = []
-            this.ischecked = !this.ischecked
-            this.templateList.forEach((item) => {
-                item.children.forEach((group) => {
-                    group.ischecked = this.ischecked
+                list.forEach(item => {
+                    const type = item.category
+                    const index = groups.indexOf(type)
+                    if (index > -1) {
+                        atomGrouped[index].children.push({
+                            id: item.id,
+                            name: item.name
+                        })
+                    }
                 })
-                if (this.ischecked) {
-                    this.selectedTemplate.push(...item.children)
+                const listGroup = atomGrouped.filter(item => item.children.length)
+                return listGroup
+            },
+            searchInputhandler () {
+                if (this.searchStr.length) {
+                    this.searchMode = true
+                    const reg = new RegExp(this.searchStr, 'g')
+                    this.searchList = this.selectedList.filter(item => {
+                        return reg.test(item.name)
+                    })
                 } else {
-                    this.selectedTemplate = []
+                    this.searchMode = false
+                    this.searchList = []
                 }
-            })
-        },
-        onConfirm () {
-            const idList = []
-            this.selectedTemplate.forEach(item => {
-                idList.push(item.id)
-            })
-            this.$emit('onExportConfirm', idList)
-        },
-        onCancel () {
-            this.templateEmpty = false
-            this.$emit('onExportCancel')
+            },
+            onSelectTemplate (group, clearAll) {
+                group.ischecked = !group.ischecked
+                if (group.ischecked) {
+                    this.selectedTemplate.push(group)
+                } else {
+                    this.deleteTemplate(group)
+                }
+            },
+            deleteTemplate (template) {
+                const deleteIndex = this.selectedTemplate.findIndex(item => item.id === template.id)
+                if (deleteIndex > -1) {
+                    const deleteGroup = this.selectedTemplate.splice(deleteIndex, 1)[0]
+                    deleteGroup.ischecked = false
+                    this.templateList.forEach((item) => {
+                        if (item.children.findIndex(util => !util.ischecked)) {
+                            this.ischecked = false
+                        }
+                    })
+                }
+            },
+            onSelectAll () {
+                if (this.isCheckedDisabled) {
+                    return false
+                }
+                this.selectedTemplate = []
+                this.ischecked = !this.ischecked
+                this.templateList.forEach((item) => {
+                    item.children.forEach((group) => {
+                        group.ischecked = this.ischecked
+                    })
+                    if (this.ischecked) {
+                        this.selectedTemplate.push(...item.children)
+                    } else {
+                        this.selectedTemplate = []
+                    }
+                })
+            },
+            onConfirm () {
+                const idList = []
+                this.selectedTemplate.forEach(item => {
+                    idList.push(item.id)
+                })
+                this.$emit('onExportConfirm', idList)
+            },
+            onCancel () {
+                this.templateEmpty = false
+                this.$emit('onExportCancel')
+            }
         }
     }
-}
 </script>
 <style lang="scss">
 @import '@/scss/mixins/scrollbar.scss';
diff --git a/pipeline/blueflow/src/pages/template/TemplateList/ImportTemplateDialog.vue b/pipeline/blueflow/src/pages/template/TemplateList/ImportTemplateDialog.vue
index c7b2e1c470..87019c75b8 100644
--- a/pipeline/blueflow/src/pages/template/TemplateList/ImportTemplateDialog.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateList/ImportTemplateDialog.vue
@@ -11,541 +11,536 @@
 */
 <template>
     <bk-dialog
-		class="import-dialog"
-		:quick-close="false"
-		:has-header="true"
-		:ext-cls="'common-dialog'"
-		:title="i18n.title"
-		width="739"
-		height="578"
-		:is-show.sync="isImportDialogShow"
-		@confirm="onConfirm"
-		@cancel="onCancel">
-        <div slot="content" class="import-container" v-bkloading="{isLoading: pending.submit, opacity: 1}">
-			<div class="import-wrapper">
-				<div class="common-form-item">
-					<label class="required">{{ i18n.files }}</label>
-					<div class="common-form-content">
-						<label
-							:for="pending.upload ? '' : 'template-file'"
-							:class="['bk-button', 'bk-primary', {'is-disabled': pending.upload}]">
-							{{ i18n.click }}
-						</label>
-						<h4 class="file-name">{{file && file.name}}</h4>
-						<input
-							ref="templateFile"
-							id="template-file"
-							type="file"
-							accept=".dat"
-							@change="onFileChange" />
-						<span
-							v-show="templateFileEmpty"
-							class="common-error-tip error-msg">
-							{{i18n.templateFileEmpty}}
-						</span>
-						<span
-							v-show="templateFileError"
-							class="common-error-tip error-msg">
-							{{i18n.templateFileError}}
-						</span>
-						<span
-							v-show="templateFileErrorExt"
-							class="common-error-tip error-msg">
-							{{i18n.templateFileErrorExt}}
-						</span>
-					</div>
-				</div>
-				<div class="common-form-item">
-					<label>{{ i18n.list }}</label>
-					<div class="common-form-content">
-						<div class="template-head">
-							<span class="template-span">ID</span>
-							<span class="template-process-name">{{ i18n.name }}</span>
-						</div>
-						<div class="template-fileList">
-							<table class="template-table">
-								<tbody>
-								<template v-for="item in exportList" >
-									<tr
-										v-if="!isChecked || overrideList.find(file => file.id === item.id )"
-										:key="item.id"
-										:class="{'template-table-conflict' : overrideList.find(file => file.id === item.id )}">
-										<td class="conflict-id" :title="item.id">
-											{{item.id}}
-										</td>
-										<td class="conflict-name">
-											<span :title="item.name">{{item.name}}</span>
-										</td>
-									</tr>
-								</template>
-								<template v-if="isEmpty">
-									<tr>
-										<td colspan="2">
-											<NoData v-if="!pending.upload">
-												<div>{{ i18n.noData }}</div>
-											</NoData>
-											<div v-else class="uploading-tip">
-												<i class="common-icon-loading"></i>
-											</div>
-										</td>
-									</tr>
-								</template>
-								</tbody>
-							</table>
-						</div>
-					</div>
-				</div>
-				<div class="common-content" v-show="uploadData">
-					<div class="common-list-label">
-						<label class="common-list">{{i18n.uploadProcess}}{{exportList.length}}{{i18n.process}}</label>
-						<label class="common-item" v-if="overrideList.length">{{i18n.amongThem}}{{overrideList.length}}{{i18n.conflictList}}</label>
-					</div>
-					<div class="common-checkbox" @click="onShowConflicts">
-						<span :class="['checkbox', {checked: isChecked}]"></span>
-						<span>{{ i18n.showConflicts }}</span>
-					</div>
-				</div>
-			</div>
-			<div class="common-wrapper-btn">
-				<bk-button type="primary button" @click="exportSubmit(true)">{{exportConflict}}</bk-button>
-				<bk-button type="default" @click="exportSubmit(false)"> {{overrideFlict}} </bk-button>
-				<bk-button type="default" @click="onCancel"> {{ i18n.cancel}} </bk-button>
-			</div>
+        class="import-dialog"
+        :quick-close="false"
+        :has-header="true"
+        :ext-cls="'common-dialog'"
+        :title="i18n.title"
+        width="739"
+        height="578"
+        :is-show.sync="isImportDialogShow"
+        @confirm="onConfirm"
+        @cancel="onCancel">
+        <div slot="content" class="import-container" v-bkloading="{ isLoading: pending.submit, opacity: 1 }">
+            <div class="import-wrapper">
+                <div class="common-form-item">
+                    <label class="required">{{ i18n.files }}</label>
+                    <div class="common-form-content">
+                        <label
+                            :for="pending.upload ? '' : 'template-file'"
+                            :class="['bk-button', 'bk-primary', { 'is-disabled': pending.upload }]">
+                            {{ i18n.click }}
+                        </label>
+                        <h4 class="file-name">{{file && file.name}}</h4>
+                        <input
+                            ref="templateFile"
+                            id="template-file"
+                            type="file"
+                            accept=".dat"
+                            @change="onFileChange" />
+                        <span
+                            v-show="templateFileEmpty"
+                            class="common-error-tip error-msg">
+                            {{i18n.templateFileEmpty}}
+                        </span>
+                        <span
+                            v-show="templateFileError"
+                            class="common-error-tip error-msg">
+                            {{i18n.templateFileError}}
+                        </span>
+                        <span
+                            v-show="templateFileErrorExt"
+                            class="common-error-tip error-msg">
+                            {{i18n.templateFileErrorExt}}
+                        </span>
+                    </div>
+                </div>
+                <div class="common-form-item">
+                    <label>{{ i18n.list }}</label>
+                    <div class="common-form-content">
+                        <div class="template-head">
+                            <span class="template-span">ID</span>
+                            <span class="template-process-name">{{ i18n.name }}</span>
+                        </div>
+                        <div class="template-fileList">
+                            <table class="template-table">
+                                <tbody>
+                                    <template v-for="item in exportList">
+                                        <tr
+                                            v-if="!isChecked || overrideList.find(file => file.id === item.id )"
+                                            :key="item.id"
+                                            :class="{ 'template-table-conflict': overrideList.find(file => file.id === item.id ) }">
+                                            <td class="conflict-id" :title="item.id">
+                                                {{item.id}}
+                                            </td>
+                                            <td class="conflict-name">
+                                                <span :title="item.name">{{item.name}}</span>
+                                            </td>
+                                        </tr>
+                                    </template>
+                                    <template v-if="isEmpty">
+                                        <tr>
+                                            <td colspan="2">
+                                                <NoData v-if="!pending.upload">
+                                                    <div>{{ i18n.noData }}</div>
+                                                </NoData>
+                                                <div v-else class="uploading-tip">
+                                                    <i class="common-icon-loading"></i>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    </template>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="common-content" v-show="uploadData">
+                    <div class="common-list-label">
+                        <label class="common-list">{{i18n.uploadProcess}}{{exportList.length}}{{i18n.process}}</label>
+                        <label class="common-item" v-if="overrideList.length">{{i18n.amongThem}}{{overrideList.length}}{{i18n.conflictList}}</label>
+                    </div>
+                    <div class="common-checkbox" @click="onShowConflicts">
+                        <span :class="['checkbox', { checked: isChecked }]"></span>
+                        <span>{{ i18n.showConflicts }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="common-wrapper-btn">
+                <bk-button type="primary button" @click="exportSubmit(true)">{{exportConflict}}</bk-button>
+                <bk-button type="default" @click="exportSubmit(false)"> {{overrideFlict}} </bk-button>
+                <bk-button type="default" @click="onCancel"> {{ i18n.cancel}} </bk-button>
+            </div>
         </div>
     </bk-dialog>
 </template>
 
 <script>
-import '@/utils/i18n.js'
-import { mapActions, mapState } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import NoData from '@/components/common/base/NoData.vue'
-import BaseCheckbox from '@/components/common/base/BaseCheckbox.vue'
-const TABLE_COLUMN_HEIGHT = 42
-const TABLE_HEIGHT = 251
-export default {
-    name: 'ImportTemplateDialog',
-    components: {
-        NoData
-    },
-    props: ['isImportDialogShow', 'common'],
-    data () {
-        return {
-            file: null,
-            filename: '',
-            exportList: [],
-            overrideList: [],
-            isChecked: false,
-            overrideFormDisabled: true,
-            pending: {
-                upload: false,
-                submit: false
-            },
-            i18n: {
-                files: gettext('上传文件'),
-                click: gettext('点击上传'),
-                reupload: gettext('重新上传'),
-                title: gettext('导入流程'),
-                list: gettext('导入列表'),
-                name: gettext('流程名称'),
-                noData: gettext('无数据'),
-                cover: gettext('是否覆盖'),
-                yes: gettext('是'),
-                no: gettext('否'),
-                uploadProcess: gettext('上传了'),
-                process: gettext('条流程'),
-                showConflicts: gettext('只显示冲突项'),
-                override: gettext('导入的流程会沿用文件中的流程ID，当前业务下具有相同ID的流程将会被覆盖（若任一具有相同ID的流程不在当前业务下，则无法进行覆盖操作）'),
-                createNew: gettext('导入的流程会使用新的流程ID，不会对现有的流程造成影响'),
-                templateFileEmpty: gettext('模板文件上传为空'),
-                templateFileError: gettext('模板上传内容不合法，请重新选择文件'),
-                templateFileErrorExt: gettext('该文件后缀不为.dat'),
-                amongThem: gettext('其中'),
-                replaceWithoutConflict: gettext('保留ID，并提交'),
-                reservedWithoutConflict: gettext('使用新ID, 并提交'),
-                replaceSubmit: gettext('覆盖冲突项, 并提交'),
-                reservedSubmit: gettext('保留两者, 并提交'),
-                cancel: gettext('取消'),
-                conflictList: gettext('条流程与系统已有流程存在冲突')
-            },
-            templateFileEmpty: false,
-            templateFileError: false,
-            templateFileErrorExt: false,
-            uploadData: false
-        }
-    },
-    computed: {
-        ...mapState({
-            'site_url': state => state.site_url,
-            'cc_id': state => state.cc_id
-        }),
-        exportConflict () {
-            return this.exportList.length ? this.i18n.replaceSubmit : this.i18n.replaceWithoutConflict
+    import '@/utils/i18n.js'
+    import { mapActions, mapState } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import NoData from '@/components/common/base/NoData.vue'
+
+    export default {
+        name: 'ImportTemplateDialog',
+        components: {
+            NoData
         },
-        overrideFlict () {
-            return this.overrideList.length ? this.i18n.reservedSubmit : this.i18n.reservedWithoutConflict
+        props: ['isImportDialogShow', 'common'],
+        data () {
+            return {
+                file: null,
+                filename: '',
+                exportList: [],
+                overrideList: [],
+                isChecked: false,
+                overrideFormDisabled: true,
+                pending: {
+                    upload: false,
+                    submit: false
+                },
+                i18n: {
+                    files: gettext('上传文件'),
+                    click: gettext('点击上传'),
+                    reupload: gettext('重新上传'),
+                    title: gettext('导入流程'),
+                    list: gettext('导入列表'),
+                    name: gettext('流程名称'),
+                    noData: gettext('无数据'),
+                    cover: gettext('是否覆盖'),
+                    yes: gettext('是'),
+                    no: gettext('否'),
+                    uploadProcess: gettext('上传了'),
+                    process: gettext('条流程'),
+                    showConflicts: gettext('只显示冲突项'),
+                    override: gettext('导入的流程会沿用文件中的流程ID，当前业务下具有相同ID的流程将会被覆盖（若任一具有相同ID的流程不在当前业务下，则无法进行覆盖操作）'),
+                    createNew: gettext('导入的流程会使用新的流程ID，不会对现有的流程造成影响'),
+                    templateFileEmpty: gettext('模板文件上传为空'),
+                    templateFileError: gettext('模板上传内容不合法，请重新选择文件'),
+                    templateFileErrorExt: gettext('该文件后缀不为.dat'),
+                    amongThem: gettext('其中'),
+                    replaceWithoutConflict: gettext('保留ID，并提交'),
+                    reservedWithoutConflict: gettext('使用新ID, 并提交'),
+                    replaceSubmit: gettext('覆盖冲突项, 并提交'),
+                    reservedSubmit: gettext('保留两者, 并提交'),
+                    cancel: gettext('取消'),
+                    conflictList: gettext('条流程与系统已有流程存在冲突')
+                },
+                templateFileEmpty: false,
+                templateFileError: false,
+                templateFileErrorExt: false,
+                uploadData: false
+            }
         },
-        isEmpty () {
-            return !this.exportList.length || this.exportList.length && this.isChecked && !this.overrideList.length
-        }
-    },
-    methods: {
-        ...mapActions('templateList/', [
-            'templateUploadCheck',
-            'templateImport'
-        ]),
-        async uploadCheck () {
-            this.pending.upload = true
-            this.uploadData = true
-            this.exportList = []
-            this.overrideList = []
-            this.overrideFormDisabled = true
-            this.templateFileError = false
-            try {
+        computed: {
+            ...mapState({
+                'site_url': state => state.site_url,
+                'cc_id': state => state.cc_id
+            }),
+            exportConflict () {
+                return this.exportList.length ? this.i18n.replaceSubmit : this.i18n.replaceWithoutConflict
+            },
+            overrideFlict () {
+                return this.overrideList.length ? this.i18n.reservedSubmit : this.i18n.reservedWithoutConflict
+            }
+        },
+        methods: {
+            ...mapActions('templateList/', [
+                'templateUploadCheck',
+                'templateImport'
+            ]),
+            async uploadCheck () {
+                this.pending.upload = true
+                this.uploadData = true
+                this.exportList = []
+                this.overrideList = []
+                this.overrideFormDisabled = true
+                this.templateFileError = false
+                try {
+                    const data = {
+                        formData: new FormData(),
+                        common: this.common
+                    }
+                    data.formData.append('data_file', this.file)
+                    const resp = await this.templateUploadCheck(data)
+                    if (resp.result) {
+                        const checkResult = resp.data
+                        this.exportList = checkResult.new_template
+                        this.overrideList = checkResult.override_template
+                        this.templateFileError = false
+                    } else {
+                        this.templateFileError = true
+                        this.pending.upload = false
+                        this.uploadData = false
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                    this.templateFileError = true
+                } finally {
+                    this.pending.upload = false
+                }
+            },
+            async importTemplate () {
+                this.pending.submit = true
+                this.templateFileError = false
+                const formData = new FormData()
+                formData.append('data_file', this.file)
+                formData.append('override', this.isChecked)
                 const data = {
-                    formData: new FormData(),
+                    formData: formData,
                     common: this.common
                 }
-                data.formData.append('data_file', this.file)
-                const resp = await this.templateUploadCheck(data)
-                if (resp.result) {
-                    const checkResult = resp.data
-                    this.exportList = checkResult.new_template
-                    this.overrideList = checkResult.override_template
-                    this.templateFileError = false
-                } else {
+                try {
+                    const resp = await this.templateImport(data)
+                    if (resp.result) {
+                        this.$emit('onImportConfirm')
+                        this.templateFileError = false
+                    } else {
+                        this.templateFileError = true
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
                     this.templateFileError = true
-                    this.pending.upload = false
-                    this.uploadData = false
+                } finally {
+                    this.pending.submit = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-                this.templateFileError = true
-            } finally {
-                this.pending.upload = false
-            }
-        },
-        async importTemplate () {
-            this.pending.submit = true
-            this.templateFileError = false
-            const formData = new FormData()
-            formData.append('data_file', this.file)
-            formData.append('override', this.isChecked)
-            const data = {
-                formData: formData,
-                common: this.common
-            }
-            try {
-                const resp = await this.templateImport(data)
-                if (resp.result) {
-                    this.$emit('onImportConfirm')
-                    this.templateFileError = false
-                } else {
-                    this.templateFileError = true
+            },
+            onFileChange (e) {
+                this.resetErrorTips()
+                if (this.pending.upload) {
+                    return
                 }
-            } catch (e) {
-                errorHandler(e, this)
-                this.templateFileError = true
-            } finally {
-                this.pending.submit = false
-            }
-        },
-        onFileChange (e) {
-            this.resetErrorTips()
-            if (this.pending.upload) {
-                return
-            }
-            const file = e.target.files[0]
-            if (file) {
-                let filename = file.name
-                let ext = filename.substr(filename.lastIndexOf('.') + 1)
-                if (ext !== 'dat') {
-                    this.templateFileErrorExt = true
-                    this.file = null
+                const file = e.target.files[0]
+                if (file) {
+                    const filename = file.name
+                    const ext = filename.substr(filename.lastIndexOf('.') + 1)
+                    if (ext !== 'dat') {
+                        this.templateFileErrorExt = true
+                        this.file = null
+                        return
+                    }
+                    this.file = file
+                    this.i18n.click = this.i18n.reupload
+                    this.uploadCheck()
+                }
+            },
+            onConfirm () {
+                if (this.pending.submit || this.pending.upload) {
                     return
                 }
-                this.file = file
-                this.i18n.click = this.i18n.reupload
-                this.uploadCheck()
-            }
-        },
-        onConfirm () {
-            if (this.pending.submit || this.pending.upload) {
-                return
-            }
-            if (!this.file) {
-                this.templateFileEmpty = true
-                // 防止错误重叠
-                this.templateFileError = false
+                if (!this.file) {
+                    this.templateFileEmpty = true
+                    // 防止错误重叠
+                    this.templateFileError = false
+                    this.templateFileErrorExt = false
+                    return
+                }
+                if (!this.templateFileErrorExt && !this.templateFileEmpty && !this.templateFileError) {
+                    this.importTemplate()
+                }
+            },
+            onShowConflicts () {
+                this.isChecked = !this.isChecked
+            },
+            onCancel () {
+                this.resetErrorTips()
+                this.$emit('onImportCancel')
+            },
+            resetErrorTips () {
+                this.templateFileEmpty = false
                 this.templateFileErrorExt = false
-                return
-            }
-            if (!this.templateFileErrorExt && !this.templateFileEmpty && !this.templateFileError) {
-                this.importTemplate()
+                this.templateFileError = false
+            },
+            exportSubmit (value) {
+                this.isChecked = value
+                this.onConfirm()
             }
-        },
-        onShowConflicts () {
-            this.isChecked = !this.isChecked
-        },
-        onCancel () {
-            this.resetErrorTips()
-            this.$emit('onImportCancel')
-        },
-        resetErrorTips () {
-            this.templateFileEmpty = false
-            this.templateFileErrorExt = false
-            this.templateFileError = false
-        },
-        exportSubmit (value) {
-            this.isChecked = value
-            this.onConfirm()
         }
     }
-}
 </script>
 <style lang="scss" scoped>
 @import "@/scss/config.scss";
 @import "@/scss/mixins/scrollbar.scss";
 .import-container {
-	.common-form-item {
-		margin-bottom: 15px;
-		& > label {
-			width: 80px;
-			font-weight: normal;
-		}
-		.common-form-label {
-			width: 180px;
-			margin-left: 30px;
-		}
-		.common-form-content {
-			margin-left: 100px;
-			margin-right: 20px;
-			.bk-button.bk-primary {
-				width: 120px;
-				margin-left: 20px;
-			}
-		}
-		.is-override-radio {
-			margin-left: 20px;
-			height: 36px;
-			line-height: 36px;
-			font-size: 14px;
-			.radio-icon {
-				position: relative;
-				display: inline-block;
-				width: 14px;
-				height: 14px;
-				border: 1px solid $commonBorderColor;
-				border-radius: 50%;
-				cursor: pointer;
-			}
-			.radio-label {
-				padding-left: 4px;
-				line-height: 1;
-				cursor: pointer;
-			}
-			input[type="radio"] {
-				display: none;
-			}
-			input[type="radio"]:checked + label {
-				& > .radio-icon {
-					background: $blueDefault;
-					border: 1px solid $blueDefault;
-					&:after {
-						content: "";
-						position: absolute;
-						top: 4px;
-						left: 4px;
-						width: 4px;
-						height: 4px;
-						background: $whiteDefault;
-						border-radius: 50%;
-					}
-				}
-			}
-			&.is-disabled {
-				.radio-label {
-					color: $greyDisable;
-					cursor: not-allowed;
-				}
-				.radio-icon {
-					border-color: $greyDisable;
-				}
-				input[type="radio"]:checked + label {
-					& > .radio-icon {
-						background: $whiteDefault;
-						border-color: $greyDisable;
-						&::after {
-							background: $greyDisable;
-						}
-					}
-				}
-			}
-		}
-	}
-	.common-content {
-		margin-left: 118px;
-		.common-list-label {
-			display: inline-block;
-			width: 353px;
-		}
-		.common-item {
-			color: #ff5656;
-		}
-		.common-checkbox {
-			position: relative;
-			right: 20px;
-			float: right;
-			cursor: pointer;
-			.checkbox {
-				display: inline-block;
-				position: relative;
-				width: 14px;
-				height: 14px;
-				color: $whiteDefault;
-				border: 1px solid $formBorderColor;
-				border-radius: 2px;
-				text-align: center;
-				vertical-align: -2px;
-				&:hover {
-					border-color: $greyDark;
-				}
-				&.checked {
-					background: $blueDefault;
-					border-color: $blueDefault;
-					&::after {
-						content: "";
-						position: absolute;
-						left: 2px;
-						top: 2px;
-						height: 4px;
-						width: 8px;
-						border-left: 1px solid;
-						border-bottom: 1px solid;
-						border-color: $whiteDefault;
-						transform: rotate(-45deg);
-					}
-				}
-			}
-		}
-	}
-	#template-file {
-		display: none;
-	}
-	.file-name {
-		padding: 4px 0px 0px 20px;
-	}
-	.template-head {
-		height: 42px;
-		line-height: 42px;
-		margin-left: 20px;
-		font-size: 0;
-		border-top: 1px solid #c3cdd7;
-		border-right: 1px solid #c3cdd7;
-		.template-span {
-			display: inline-block;
-			width: 80px;
-			height: 42px;
-			color: #333333;
-			font-size: 14px;
-			font-weight: 600;
-			border-left: 1px solid $formBorderColor;
-		}
-		.template-process-name {
-			font-size: 14px;
-		}
-		span {
-			display: inline-block;
-			width: 230px;
-			height: 42px;
-			line-height: 42px;
-			text-align: center;
-			color: #333333;
-			font-weight: 600;
-			border-left: 1px solid $formBorderColor;
-		}
-	}
-	.template-fileList {
-		margin-left: 20px;
-		height: 252px;
-		border: 1px solid #c3cdd7;
-		overflow-x: hidden;
-		overflow-y: auto;
-		@include scrollbar;
-		.template-table {
-			width: 100%;
-			color: #e4e5e7;
-			border-collapse: collapse;
-			tr:last-child td{
-				border-bottom: none;
-			}
-			th,td {
-				padding: 10px 10px;
-				height: 42px;
-				text-align: left;
-				color: #313238;
-			}
-			.conflict-id {
-				width: 79px;
-				height: 42px;
-				text-align: center;
-				border-bottom: 1px solid #c3cdd7;
-				border-right: 1px solid #c3cdd7;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-			.conflict-name {
-				max-width: 470px;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-				overflow: hidden;
-				border-bottom: 1px solid #c3cdd7;
-			}
-			/deep/ .no-data-wrapper {
-				margin-top: 90px;
-				.common-icon-no-data {
-					font-size: 32px;
-				}
-				.no-data-wording {
-					margin: 0;
-					font-size: 12px;
-				}
-			}
-			.template-table-conflict {
-				td {
-					color: #ff5656;
-				}
-			}
-			.uploading-tip {
-				margin-top: 105px;
-				text-align: center;
-				.common-icon-loading {
-					display: inline-block;
-					animation: bk-button-loading 1.4s infinite linear;
-				}
-				@keyframes bk-button-loading {
-					from {
-						-webkit-transform: rotate(0);
-						transform: rotate(0);
-					}
-					to {
-						-webkit-transform: rotate(360deg);
-						transform: rotate(360deg);
-					}
-				}
-			}
-		}
-	}
-	.common-wrapper-btn {
-		float: right;
-		margin-top: 28px;
-		.bk-button {
-			margin: 5px;
-		}
-	}
+    .common-form-item {
+        margin-bottom: 15px;
+        & > label {
+            width: 80px;
+            font-weight: normal;
+        }
+        .common-form-label {
+            width: 180px;
+            margin-left: 30px;
+        }
+        .common-form-content {
+            margin-left: 100px;
+            margin-right: 20px;
+            .bk-button.bk-primary {
+                width: 120px;
+                margin-left: 20px;
+            }
+        }
+        .is-override-radio {
+            margin-left: 20px;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            .radio-icon {
+                position: relative;
+                display: inline-block;
+                width: 14px;
+                height: 14px;
+                border: 1px solid $commonBorderColor;
+                border-radius: 50%;
+                cursor: pointer;
+            }
+            .radio-label {
+                padding-left: 4px;
+                line-height: 1;
+                cursor: pointer;
+            }
+            input[type="radio"] {
+                display: none;
+            }
+            input[type="radio"]:checked + label {
+                & > .radio-icon {
+                    background: $blueDefault;
+                    border: 1px solid $blueDefault;
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        top: 4px;
+                        left: 4px;
+                        width: 4px;
+                        height: 4px;
+                        background: $whiteDefault;
+                        border-radius: 50%;
+                    }
+                }
+            }
+            &.is-disabled {
+                .radio-label {
+                    color: $greyDisable;
+                    cursor: not-allowed;
+                }
+                .radio-icon {
+                    border-color: $greyDisable;
+                }
+                input[type="radio"]:checked + label {
+                    & > .radio-icon {
+                        background: $whiteDefault;
+                        border-color: $greyDisable;
+                        &::after {
+                            background: $greyDisable;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .common-content {
+        margin-left: 118px;
+        .common-list-label {
+            display: inline-block;
+            width: 353px;
+        }
+        .common-item {
+            color: #ff5656;
+        }
+        .common-checkbox {
+            position: relative;
+            right: 20px;
+            float: right;
+            cursor: pointer;
+            .checkbox {
+                display: inline-block;
+                position: relative;
+                width: 14px;
+                height: 14px;
+                color: $whiteDefault;
+                border: 1px solid $formBorderColor;
+                border-radius: 2px;
+                text-align: center;
+                vertical-align: -2px;
+                &:hover {
+                    border-color: $greyDark;
+                }
+                &.checked {
+                    background: $blueDefault;
+                    border-color: $blueDefault;
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        left: 2px;
+                        top: 2px;
+                        height: 4px;
+                        width: 8px;
+                        border-left: 1px solid;
+                        border-bottom: 1px solid;
+                        border-color: $whiteDefault;
+                        transform: rotate(-45deg);
+                    }
+                }
+            }
+        }
+    }
+    #template-file {
+        display: none;
+    }
+    .file-name {
+        padding: 4px 0px 0px 20px;
+    }
+    .template-head {
+        height: 42px;
+        line-height: 42px;
+        margin-left: 20px;
+        font-size: 0;
+        border-top: 1px solid #c3cdd7;
+        border-right: 1px solid #c3cdd7;
+        .template-span {
+            display: inline-block;
+            width: 80px;
+            height: 42px;
+            color: #333333;
+            font-size: 14px;
+            font-weight: 600;
+            border-left: 1px solid $formBorderColor;
+        }
+        .template-process-name {
+            font-size: 14px;
+        }
+        span {
+            display: inline-block;
+            width: 230px;
+            height: 42px;
+            line-height: 42px;
+            text-align: center;
+            color: #333333;
+            font-weight: 600;
+            border-left: 1px solid $formBorderColor;
+        }
+    }
+    .template-fileList {
+        margin-left: 20px;
+        height: 252px;
+        border: 1px solid #c3cdd7;
+        overflow-x: hidden;
+        overflow-y: auto;
+        @include scrollbar;
+        .template-table {
+            width: 100%;
+            color: #e4e5e7;
+            border-collapse: collapse;
+            tr:last-child td{
+                border-bottom: none;
+            }
+            th,td {
+                padding: 10px 10px;
+                height: 42px;
+                text-align: left;
+                color: #313238;
+            }
+            .conflict-id {
+                width: 79px;
+                height: 42px;
+                text-align: center;
+                border-bottom: 1px solid #c3cdd7;
+                border-right: 1px solid #c3cdd7;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+            }
+            .conflict-name {
+                max-width: 470px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                border-bottom: 1px solid #c3cdd7;
+            }
+            /deep/ .no-data-wrapper {
+                margin-top: 90px;
+                .common-icon-no-data {
+                    font-size: 32px;
+                }
+                .no-data-wording {
+                    margin: 0;
+                    font-size: 12px;
+                }
+            }
+            .template-table-conflict {
+                td {
+                    color: #ff5656;
+                }
+            }
+            .uploading-tip {
+                margin-top: 105px;
+                text-align: center;
+                .common-icon-loading {
+                    display: inline-block;
+                    animation: bk-button-loading 1.4s infinite linear;
+                }
+                @keyframes bk-button-loading {
+                    from {
+                        -webkit-transform: rotate(0);
+                        transform: rotate(0);
+                    }
+                    to {
+                        -webkit-transform: rotate(360deg);
+                        transform: rotate(360deg);
+                    }
+                }
+            }
+        }
+    }
+    .common-wrapper-btn {
+        float: right;
+        margin-top: 28px;
+        .bk-button {
+            margin: 5px;
+        }
+    }
 }
 /deep/ .bk-dialog-footer .bk-dialog-outer {
-  	display: none;
+    display: none;
 }
 </style>
diff --git a/pipeline/blueflow/src/pages/template/TemplateList/index.vue b/pipeline/blueflow/src/pages/template/TemplateList/index.vue
index 3c589ef500..6a993093c4 100644
--- a/pipeline/blueflow/src/pages/template/TemplateList/index.vue
+++ b/pipeline/blueflow/src/pages/template/TemplateList/index.vue
@@ -41,7 +41,7 @@
                         <BaseSearch
                             class="base-search"
                             v-model="flowName"
-                            :inputPlaceholader="i18n.templateNamePlaceholder"
+                            :input-placeholader="i18n.templateNamePlaceholder"
                             @onShow="onAdvanceShow"
                             @input="onSearchInput">
                         </BaseSearch>
@@ -90,7 +90,7 @@
                         </div>
                         <div class="query-content">
                             <span class="query-span">{{i18n.creator}}</span>
-                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder"/>
+                            <input class="search-input" v-model="creator" :placeholder="i18n.creatorPlaceholder" />
                         </div>
                         <div class="query-button">
                             <bk-button class="query-primary" type="primary" @click="getTemplateList">{{i18n.query}}</bk-button>
@@ -99,7 +99,7 @@
                     </div>
                 </fieldset>
             </div>
-            <div class="template-table-content" v-bkloading="{isLoading: listLoading, opacity: 1}">
+            <div class="template-table-content" v-bkloading="{ isLoading: listLoading, opacity: 1 }">
                 <table>
                     <thead>
                         <tr>
@@ -126,7 +126,7 @@
                             </td>
                             <td class="template-type">{{item.category_name}}</td>
                             <td class="update-time">{{item.edit_time}}</td>
-                            <td v-if="!common_template" :class="['subflow-update', {'subflow-has-update': item.subprocess_has_update}]">
+                            <td v-if="!common_template" :class="['subflow-update', { 'subflow-has-update': item.subprocess_has_update }]">
                                 {{getSubflowContent(item)}}
                             </td>
                             <td class="template-creator">{{item.creator_name}}</td>
@@ -141,10 +141,10 @@
                                     class="create-template-btn"
                                     :to="getEditTemplateUrl(item.id)">
                                     {{ i18n.edit }}
-                               </router-link>
-                               <bk-dropdown-menu>
-                                <i slot="dropdown-trigger" class="bk-icon icon-more drop-icon-ellipsis"></i>
-                                   <ul class="bk-dropdown-list" slot="dropdown-content">
+                                </router-link>
+                                <bk-dropdown-menu>
+                                    <i slot="dropdown-trigger" class="bk-icon icon-more drop-icon-ellipsis"></i>
+                                    <ul class="bk-dropdown-list" slot="dropdown-content">
                                         <li>
                                             <router-link :to="getCloneUrl(item.id)">{{ i18n.clone }}</router-link>
                                         </li>
@@ -157,8 +157,8 @@
                                         <li>
                                             <a href="javascript:void(0);" @click="onDeleteTemplate(item.id, item.name)">{{ i18n.delete }}</a>
                                         </li>
-                                   </ul>
-                               </bk-dropdown-menu>
+                                    </ul>
+                                </bk-dropdown-menu>
                             </td>
                             <td class="template-operation" v-else-if="common_template || !common">
                                 <!-- 嵌套在业务流程页面中的公共流程，通过查询条件切换 -->
@@ -167,8 +167,8 @@
                                     :to="getNewTaskUrl(item.id)">
                                     {{ i18n.newTemplate }}
                                 </router-link>
-                               <bk-dropdown-menu>
-                                   <i slot="dropdown-trigger" class="bk-icon icon-more drop-icon-ellipsis"></i>
+                                <bk-dropdown-menu>
+                                    <i slot="dropdown-trigger" class="bk-icon icon-more drop-icon-ellipsis"></i>
                                     <ul class="bk-dropdown-list" slot="dropdown-content">
                                         <li>
                                             <a href="javascript:void(0);" @click="onManageAuthority(item.id)">{{ i18n.authority }}</a>
@@ -177,7 +177,7 @@
                                             <router-link :to="getExecuteHistoryUrl(item.id)">{{ i18n.executeHistory }}</router-link>
                                         </li>
                                     </ul>
-                               </bk-dropdown-menu>
+                                </bk-dropdown-menu>
                             </td>
                             <td class="template-operation" v-else-if="common">
                                 <!-- 公共流程首页 -->
@@ -218,16 +218,16 @@
         <ImportTemplateDialog
             v-if="isImportDialogShow"
             :common="common"
-            :isImportDialogShow="isImportDialogShow"
+            :is-import-dialog-show="isImportDialogShow"
             @onImportConfirm="onImportConfirm"
             @onImportCancel="onImportCancel">
         </ImportTemplateDialog>
-         <ExportTemplateDialog
+        <ExportTemplateDialog
             v-if="isExportDialogShow"
             :common="common"
-            :isExportDialogShow="isExportDialogShow"
-            :businessInfoLoading="businessInfoLoading"
-            :exportPending="pending.export"
+            :is-export-dialog-show="isExportDialogShow"
+            :business-info-loading="businessInfoLoading"
+            :export-pending="pending.export"
             @onExportConfirm="onExportConfirm"
             @onExportCancel="onExportCancel">
         </ExportTemplateDialog>
@@ -241,14 +241,14 @@
             :is-show.sync="isDeleteDialogShow"
             @confirm="onDeleteConfirm"
             @cancel="onDeleteCancel">
-            <div slot="content" class="dialog-content" v-bkloading="{isLoading: pending.delete, opacity: 1}">
+            <div slot="content" class="dialog-content" v-bkloading="{ isLoading: pending.delete, opacity: 1 }">
                 {{i18n.deleleTip + '"' + deleteTemplateName + '"' + '?' }}
             </div>
         </bk-dialog>
         <AuthorityManageDialog
             v-if="isAuthorityDialogShow"
-            :isAuthorityDialogShow="isAuthorityDialogShow"
-            :templateId="theAuthorityManageId"
+            :is-authority-dialog-show="isAuthorityDialogShow"
+            :template-id="theAuthorityManageId"
             :pending="pending.authority"
             :common="common_template"
             @onAuthorityConfirm="onAuthorityConfirm"
@@ -257,409 +257,409 @@
     </div>
 </template>
 <script>
-import '@/utils/i18n.js'
-import { mapState, mapMutations, mapActions } from 'vuex'
-import { errorHandler } from '@/utils/errorHandler.js'
-import toolsUtils from '@/utils/tools.js'
-import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
-import ImportTemplateDialog from './ImportTemplateDialog.vue'
-import ExportTemplateDialog from './ExportTemplateDialog.vue'
-import AuthorityManageDialog from './AuthorityManageDialog.vue'
-import BaseTitle from '@/components/common/base/BaseTitle.vue'
-import BaseSearch from '@/components/common/base/BaseSearch.vue'
-import NoData from '@/components/common/base/NoData.vue'
-// moment用于时区使用
-import moment from 'moment-timezone'
-export default {
-    name: 'TemplateList',
-    components: {
-        CopyrightFooter,
-        ImportTemplateDialog,
-        ExportTemplateDialog,
-        AuthorityManageDialog,
-        BaseTitle,
-        BaseSearch,
-        NoData
-    },
-    props: ['cc_id', 'common', 'common_template'],
-    data () {
-        return {
-            i18n: {
-                placeholder: gettext("请输入ID或流程名称"),
-                businessFlow: gettext("业务流程"),
-                commonFlow: gettext('公共流程'),
-                new: gettext("新建"),
-                name: gettext("流程名称"),
-                type: gettext("分类"),
-                updateTime: gettext("更新时间"),
-                subflowUpdate: gettext("子流程更新"),
-                creator: gettext("创建人"),
-                operation: gettext("操作"),
-                newTemplate: gettext("新建任务"),
-                edit: gettext("编辑"),
-                clone: gettext("克隆"),
-                authority: gettext("权限管理"),
-                delete: gettext("删除"),
-                executeHistory: gettext("执行历史"),
-                deleleTip: gettext("确认删除"),
-                import_v1_template: gettext("导入 V1 模板"),
-                export: gettext("导出"),
-                import: gettext("导入"),
-                total: gettext("共"),
-                item: gettext("条记录"),
-                comma: gettext("，"),
-                currentPageTip: gettext("当前第"),
-                page: gettext("页"),
-                yes: gettext("是"),
-                no: gettext("否"),
-                empty: gettext("无数据，若您不是运维人员，请尝试联系运维人员为您添加模板权限"),
-                templateNamePlaceholder: gettext('请输入流程名称'),
-                templateCategoryPlaceholder: gettext('请选择分类'),
-                subprocessUpdatePlaceholder: gettext('请选择子流程更新'),
-                creatorPlaceholder: gettext('请输入创建人'),
-                templateType: gettext('来源'),
-                templateTypePlaceholder: gettext('请选择来源'),
-                select: gettext('请选择'),
-                query: gettext('搜索'),
-                reset: gettext('清空'),
-                templateName: gettext('名称'),
-                advanceSearch: gettext('高级搜索'),
-                searchName: gettext('搜索流程名称')
-            },
-            listLoading: true,
-            businessInfoLoading: true, // 模板分类信息 loading
-            searchStr: '',
-            currentPage: 1,
-            totalPage: 1,
-            countPerPage: 15,
-            totalCount: 0,
-            isDeleteDialogShow: false,
-            isImportDialogShow: false,
-            isExportDialogShow: false,
-            isAuthorityDialogShow: false,
-            theDeleteTemplateId: undefined,
-            theAuthorityManageId: undefined,
-            isAdvancedSerachShow: false,
-            pending: {
-                export: false, // 导出
-                delete: false, // 删除
-                authority: false // 权限管理
-            },
-            flowName: undefined,
-            templateCategorySync: -1,
-            templateCategoryList: [],
-            subprocessUpdateSync: '',
-            category: undefined,
-            editStartTime: undefined,
-            editEndTime: undefined,
-            selectSubprocessUpdateList: [
-                {'id': 0, name: gettext('是'), value: true},
-                {'id': 1, name: gettext('否'), value: false},
-                {'id': 2, name: gettext('无子流程'), value: 'no'}
-            ],
-            subprocessUpdateList: [
-                {'id': 1, 'name': gettext('是')},
-                {'id': 0, 'name': gettext('否')}
-            ],
-            isSubprocessUpdated: undefined,
-            isHasSubprocess: undefined,
-            creator: undefined,
-            templateType: this.common_template,
-            deleteTemplateName: ''
-        }
-    },
-    computed: {
-        ...mapState({
-            'site_url': state => state.site_url,
-            'templateList': state => state.templateList.templateListData,
-            'commonTemplateData': state => state.templateList.commonTemplateData,
-            'businessBaseInfo': state => state.template.businessBaseInfo,
-            'v1_import_flag': state => state.v1_import_flag,
-            'businessTimezone': state => state.businessTimezone
-        }),
-        listData () {
-            return this.common === 1 ? this.commonTemplateData : this.templateList
-        }
-    },
-    created () {
-        this.getTemplateList()
-        this.getBusinessBaseInfo()
-        this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
-    },
-    methods: {
-        ...mapActions('template/', [
-            'loadBusinessBaseInfo'
-        ]),
-        ...mapActions('templateList/', [
-            'loadTemplateList',
-            'deleteTemplate',
-            'saveTemplatePersons',
-            'templateImport',
-            'templateExport'
-        ]),
-        ...mapMutations('template/', [
-            'setBusinessBaseInfo'
-        ]),
-        ...mapMutations('templateList/', [
-            'setTemplateListData'
-        ]),
-        async getTemplateList () {
-            if (this.editStartTime === '') {
-                this.editStartTime = undefined
-            }
-            this.listLoading = true
-            const isCommon = this.common === 1
-            try {
-                const data = {
-                    limit: this.countPerPage,
-                    offset: (this.currentPage - 1) * this.countPerPage,
-                    common: this.common,
-                    pipeline_template__name__contains: this.flowName,
-                    pipeline_template__creator__contains: this.creator,
-                    category: this.category,
-                    subprocess_has_update: this.isSubprocessUpdated,
-                    has_subprocess: this.isHasSubprocess
-                }
-                if (isCommon) {
-                    // 公共流程
-                    data['common'] = 1
-                    this.isNewTaskCommonTemplate = true
-                } else {
-                    // 业务流程
-                    this.isNewTaskCommonTemplate = false
-                }
-                if (this.editEndTime) {
-                    if (this.isNewTaskCommonTemplate) {
-                        data['pipeline_template__edit_time__gte'] = moment(this.editStartTime).format('YYYY-MM-DD')
-                        data['pipeline_template__edit_time__lte'] = moment(this.editEndTime).add('1','d').format('YYYY-MM-DD')
-                        // 无时区的公共流程使用本地的时间
-                    } else {
-                        data['pipeline_template__edit_time__gte'] = moment.tz(this.editStartTime, this.businessTimezone).format('YYYY-MM-DD')
-                        data['pipeline_template__edit_time__lte'] = moment.tz(this.editEndTime, this.businessTimezone).add('1','d').format('YYYY-MM-DD')
-                    }
-                }
-                const templateListData = await this.loadTemplateList(data)
-                const list = templateListData.objects
-                this.setTemplateListData({list, isCommon})
-                this.totalCount = templateListData.meta.total_count
-                const totalPage = Math.ceil( this.totalCount / this.countPerPage)
-                if (!totalPage) {
-                    this.totalPage = 1
-                } else {
-                    this.totalPage = totalPage
-                }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.listLoading = false
-            }
+    import '@/utils/i18n.js'
+    import { mapState, mapMutations, mapActions } from 'vuex'
+    import { errorHandler } from '@/utils/errorHandler.js'
+    import toolsUtils from '@/utils/tools.js'
+    import CopyrightFooter from '@/components/layout/CopyrightFooter.vue'
+    import ImportTemplateDialog from './ImportTemplateDialog.vue'
+    import ExportTemplateDialog from './ExportTemplateDialog.vue'
+    import AuthorityManageDialog from './AuthorityManageDialog.vue'
+    import BaseTitle from '@/components/common/base/BaseTitle.vue'
+    import BaseSearch from '@/components/common/base/BaseSearch.vue'
+    import NoData from '@/components/common/base/NoData.vue'
+    // moment用于时区使用
+    import moment from 'moment-timezone'
+    export default {
+        name: 'TemplateList',
+        components: {
+            CopyrightFooter,
+            ImportTemplateDialog,
+            ExportTemplateDialog,
+            AuthorityManageDialog,
+            BaseTitle,
+            BaseSearch,
+            NoData
         },
-        async getBusinessBaseInfo () {
-            this.businessInfoLoading = true
-            this.categoryLoading = true
-            try {
-                const data = await this.loadBusinessBaseInfo()
-                this.setBusinessBaseInfo(data)
-                this.templateCategoryList = data.task_categories
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.businessInfoLoading = false
-                this.categoryLoading = false
+        props: ['cc_id', 'common', 'common_template'],
+        data () {
+            return {
+                i18n: {
+                    placeholder: gettext('请输入ID或流程名称'),
+                    businessFlow: gettext('业务流程'),
+                    commonFlow: gettext('公共流程'),
+                    new: gettext('新建'),
+                    name: gettext('流程名称'),
+                    type: gettext('分类'),
+                    updateTime: gettext('更新时间'),
+                    subflowUpdate: gettext('子流程更新'),
+                    creator: gettext('创建人'),
+                    operation: gettext('操作'),
+                    newTemplate: gettext('新建任务'),
+                    edit: gettext('编辑'),
+                    clone: gettext('克隆'),
+                    authority: gettext('权限管理'),
+                    delete: gettext('删除'),
+                    executeHistory: gettext('执行历史'),
+                    deleleTip: gettext('确认删除'),
+                    import_v1_template: gettext('导入 V1 模板'),
+                    export: gettext('导出'),
+                    import: gettext('导入'),
+                    total: gettext('共'),
+                    item: gettext('条记录'),
+                    comma: gettext('，'),
+                    currentPageTip: gettext('当前第'),
+                    page: gettext('页'),
+                    yes: gettext('是'),
+                    no: gettext('否'),
+                    empty: gettext('无数据，若您不是运维人员，请尝试联系运维人员为您添加模板权限'),
+                    templateNamePlaceholder: gettext('请输入流程名称'),
+                    templateCategoryPlaceholder: gettext('请选择分类'),
+                    subprocessUpdatePlaceholder: gettext('请选择子流程更新'),
+                    creatorPlaceholder: gettext('请输入创建人'),
+                    templateType: gettext('来源'),
+                    templateTypePlaceholder: gettext('请选择来源'),
+                    select: gettext('请选择'),
+                    query: gettext('搜索'),
+                    reset: gettext('清空'),
+                    templateName: gettext('名称'),
+                    advanceSearch: gettext('高级搜索'),
+                    searchName: gettext('搜索流程名称')
+                },
+                listLoading: true,
+                businessInfoLoading: true, // 模板分类信息 loading
+                searchStr: '',
+                currentPage: 1,
+                totalPage: 1,
+                countPerPage: 15,
+                totalCount: 0,
+                isDeleteDialogShow: false,
+                isImportDialogShow: false,
+                isExportDialogShow: false,
+                isAuthorityDialogShow: false,
+                theDeleteTemplateId: undefined,
+                theAuthorityManageId: undefined,
+                isAdvancedSerachShow: false,
+                pending: {
+                    export: false, // 导出
+                    delete: false, // 删除
+                    authority: false // 权限管理
+                },
+                flowName: undefined,
+                templateCategorySync: -1,
+                templateCategoryList: [],
+                subprocessUpdateSync: '',
+                category: undefined,
+                editStartTime: undefined,
+                editEndTime: undefined,
+                selectSubprocessUpdateList: [
+                    { 'id': 0, name: gettext('是'), value: true },
+                    { 'id': 1, name: gettext('否'), value: false },
+                    { 'id': 2, name: gettext('无子流程'), value: 'no' }
+                ],
+                subprocessUpdateList: [
+                    { 'id': 1, 'name': gettext('是') },
+                    { 'id': 0, 'name': gettext('否') }
+                ],
+                isSubprocessUpdated: undefined,
+                isHasSubprocess: undefined,
+                creator: undefined,
+                templateType: this.common_template,
+                deleteTemplateName: ''
             }
         },
-        searchInputhandler () {
-            this.currentPage = 1
-            this.getTemplateList()
-        },
-        onImportTemplate () {
-            this.isImportDialogShow = true
+        computed: {
+            ...mapState({
+                'site_url': state => state.site_url,
+                'templateList': state => state.templateList.templateListData,
+                'commonTemplateData': state => state.templateList.commonTemplateData,
+                'businessBaseInfo': state => state.template.businessBaseInfo,
+                'v1_import_flag': state => state.v1_import_flag,
+                'businessTimezone': state => state.businessTimezone
+            }),
+            listData () {
+                return this.common === 1 ? this.commonTemplateData : this.templateList
+            }
         },
-        onImportConfirm () {
-            this.isImportDialogShow = false
+        created () {
             this.getTemplateList()
+            this.getBusinessBaseInfo()
+            this.onSearchInput = toolsUtils.debounce(this.searchInputhandler, 500)
         },
-        onImportCancel () {
-            this.isImportDialogShow = false
-        },
-        onExportTemplate () {
-            this.isExportDialogShow = true
-        },
-        async onExportConfirm (list) {
-            if (this.pending.export) return
-            this.pending.export = true
-            try {
-                const data = {
-                    common: this.common,
-                    list: JSON.stringify(list)
+        methods: {
+            ...mapActions('template/', [
+                'loadBusinessBaseInfo'
+            ]),
+            ...mapActions('templateList/', [
+                'loadTemplateList',
+                'deleteTemplate',
+                'saveTemplatePersons',
+                'templateImport',
+                'templateExport'
+            ]),
+            ...mapMutations('template/', [
+                'setBusinessBaseInfo'
+            ]),
+            ...mapMutations('templateList/', [
+                'setTemplateListData'
+            ]),
+            async getTemplateList () {
+                if (this.editStartTime === '') {
+                    this.editStartTime = undefined
                 }
-                const resp = await this.templateExport(data)
-                if (resp.result) {
-                    this.isExportDialogShow = false
-                } else {
-                    errorHandler(resp, this)
+                this.listLoading = true
+                const isCommon = this.common === 1
+                try {
+                    const data = {
+                        limit: this.countPerPage,
+                        offset: (this.currentPage - 1) * this.countPerPage,
+                        common: this.common,
+                        pipeline_template__name__contains: this.flowName,
+                        pipeline_template__creator__contains: this.creator,
+                        category: this.category,
+                        subprocess_has_update: this.isSubprocessUpdated,
+                        has_subprocess: this.isHasSubprocess
+                    }
+                    if (isCommon) {
+                        // 公共流程
+                        data['common'] = 1
+                        this.isNewTaskCommonTemplate = true
+                    } else {
+                        // 业务流程
+                        this.isNewTaskCommonTemplate = false
+                    }
+                    if (this.editEndTime) {
+                        if (this.isNewTaskCommonTemplate) {
+                            data['pipeline_template__edit_time__gte'] = moment(this.editStartTime).format('YYYY-MM-DD')
+                            data['pipeline_template__edit_time__lte'] = moment(this.editEndTime).add('1', 'd').format('YYYY-MM-DD')
+                        // 无时区的公共流程使用本地的时间
+                        } else {
+                            data['pipeline_template__edit_time__gte'] = moment.tz(this.editStartTime, this.businessTimezone).format('YYYY-MM-DD')
+                            data['pipeline_template__edit_time__lte'] = moment.tz(this.editEndTime, this.businessTimezone).add('1', 'd').format('YYYY-MM-DD')
+                        }
+                    }
+                    const templateListData = await this.loadTemplateList(data)
+                    const list = templateListData.objects
+                    this.setTemplateListData({ list, isCommon })
+                    this.totalCount = templateListData.meta.total_count
+                    const totalPage = Math.ceil(this.totalCount / this.countPerPage)
+                    if (!totalPage) {
+                        this.totalPage = 1
+                    } else {
+                        this.totalPage = totalPage
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.listLoading = false
                 }
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.export = false
-            }
-        },
-        onExportCancel () {
-            this.isExportDialogShow = false
-        },
-        onDeleteTemplate (id, name) {
-            this.theDeleteTemplateId = id
-            this.deleteTemplateName = name
-            this.isDeleteDialogShow = true
-        },
-        onPageChange (page) {
-            this.currentPage = page
-            this.getTemplateList()
-        },
-        onManageAuthority (id) {
-            this.isAuthorityDialogShow = true
-            this.theAuthorityManageId = id
-        },
-        async onDeleteConfirm () {
-            if (this.pending.delete) return
-            this.pending.delete = true
-            try {
-                const data = {
-                    templateId: this.theDeleteTemplateId,
-                    common: this.common
+            },
+            async getBusinessBaseInfo () {
+                this.businessInfoLoading = true
+                this.categoryLoading = true
+                try {
+                    const data = await this.loadBusinessBaseInfo()
+                    this.setBusinessBaseInfo(data)
+                    this.templateCategoryList = data.task_categories
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.businessInfoLoading = false
+                    this.categoryLoading = false
                 }
-                await this.deleteTemplate(data)
+            },
+            searchInputhandler () {
+                this.currentPage = 1
+                this.getTemplateList()
+            },
+            onImportTemplate () {
+                this.isImportDialogShow = true
+            },
+            onImportConfirm () {
+                this.isImportDialogShow = false
+                this.getTemplateList()
+            },
+            onImportCancel () {
+                this.isImportDialogShow = false
+            },
+            onExportTemplate () {
+                this.isExportDialogShow = true
+            },
+            async onExportConfirm (list) {
+                if (this.pending.export) return
+                this.pending.export = true
+                try {
+                    const data = {
+                        common: this.common,
+                        list: JSON.stringify(list)
+                    }
+                    const resp = await this.templateExport(data)
+                    if (resp.result) {
+                        this.isExportDialogShow = false
+                    } else {
+                        errorHandler(resp, this)
+                    }
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.export = false
+                }
+            },
+            onExportCancel () {
+                this.isExportDialogShow = false
+            },
+            onDeleteTemplate (id, name) {
+                this.theDeleteTemplateId = id
+                this.deleteTemplateName = name
+                this.isDeleteDialogShow = true
+            },
+            onPageChange (page) {
+                this.currentPage = page
+                this.getTemplateList()
+            },
+            onManageAuthority (id) {
+                this.isAuthorityDialogShow = true
+                this.theAuthorityManageId = id
+            },
+            async onDeleteConfirm () {
+                if (this.pending.delete) return
+                this.pending.delete = true
+                try {
+                    const data = {
+                        templateId: this.theDeleteTemplateId,
+                        common: this.common
+                    }
+                    await this.deleteTemplate(data)
+                    this.theDeleteTemplateId = undefined
+                    this.isDeleteDialogShow = false
+                    // 最后一页最后一条删除后，往前翻一页
+                    if (
+                        this.currentPage > 1
+                        && this.totalPage === this.currentPage
+                        && this.totalCount - (this.totalPage - 1) * this.countPerPage === 1
+                    ) {
+                        this.currentPage -= 1
+                    }
+                    this.getTemplateList()
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.delete = false
+                }
+            },
+            onDeleteCancel () {
                 this.theDeleteTemplateId = undefined
                 this.isDeleteDialogShow = false
-                // 最后一页最后一条删除后，往前翻一页
-                if (
-                    this.currentPage > 1 &&
-                    this.totalPage === this.currentPage &&
-                    this.totalCount - (this.totalPage - 1) * this.countPerPage === 1
-                ) {
-                    this.currentPage -= 1
+            },
+            async onAuthorityConfirm (data) {
+                if (this.pending.authority) return
+                this.pending.authority = true
+                try {
+                    await this.saveTemplatePersons(data)
+                    this.isAuthorityDialogShow = false
+                    this.theAuthorityManageId = undefined
+                } catch (e) {
+                    errorHandler(e, this)
+                } finally {
+                    this.pending.authority = false
                 }
-                this.getTemplateList()
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.delete = false
-            }
-        },
-        onDeleteCancel () {
-            this.theDeleteTemplateId = undefined
-            this.isDeleteDialogShow = false
-        },
-        async onAuthorityConfirm (data) {
-            if (this.pending.authority) return
-            this.pending.authority = true
-            try {
-                await this.saveTemplatePersons(data)
+            },
+            onAuthorityCancel () {
                 this.isAuthorityDialogShow = false
                 this.theAuthorityManageId = undefined
-            } catch (e) {
-                errorHandler(e, this)
-            } finally {
-                this.pending.authority = false
-            }
-        },
-        onAuthorityCancel () {
-            this.isAuthorityDialogShow = false
-            this.theAuthorityManageId = undefined
-        },
-        // 获取编辑按钮的跳转链接
-        getEditTemplateUrl (id) {
-            let url = `/template/edit/${this.cc_id}/?template_id=${id}`
-            if (this.common) {
-                url += '&common=1'
-            }
-            return url
-        },
-        // 获取新建模板的跳转链接
-        getNewTemplateUrl () {
-            let url = `/template/new/${this.cc_id}`
-            if (this.common) {
-                url += '/?&common=1'
-            }
-            return url
-        },
-        // 获取新建任务的跳转链接
-        getNewTaskUrl (id) {
-            let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${id}`
-            if (this.common || this.common_template) {
-                url += '&common=1'
-            }
-            return url
-        },
-        getExecuteHistoryUrl (id) {
-            let url = `/taskflow/home/${this.cc_id}/?template_id=${id}`
-            if (this.common || this.common_template) {
-                url += '&common=1'
-            }
-            return url
-        },
-        getCloneUrl (id) {
-            let url = `/template/clone/${this.cc_id}/?template_id=${id}`
-            if (this.common || this.common_template) {
-                url += '&common=1'
-            }
-            return url
-        },
-        // 清除查询的分类选择
-        onClearCategory () {
-            this.templateCategorySync = -1
-            this.category = undefined
-        },
-        // 选择查询的分类
-        onSelectedCategory (name, value) {
-            this.category = name
-        },
-        onClearSubprocessUpdate () {
-            this.isSubprocessUpdated = undefined
-            this.isHasSubprocess = undefined
-        },
-        onSelectedSubprocessUpdate (id, data) {
-            if (data.value === 'no') {
-                this.isHasSubprocess = false
+            },
+            // 获取编辑按钮的跳转链接
+            getEditTemplateUrl (id) {
+                let url = `/template/edit/${this.cc_id}/?template_id=${id}`
+                if (this.common) {
+                    url += '&common=1'
+                }
+                return url
+            },
+            // 获取新建模板的跳转链接
+            getNewTemplateUrl () {
+                let url = `/template/new/${this.cc_id}`
+                if (this.common) {
+                    url += '/?&common=1'
+                }
+                return url
+            },
+            // 获取新建任务的跳转链接
+            getNewTaskUrl (id) {
+                let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${id}`
+                if (this.common || this.common_template) {
+                    url += '&common=1'
+                }
+                return url
+            },
+            getExecuteHistoryUrl (id) {
+                let url = `/taskflow/home/${this.cc_id}/?template_id=${id}`
+                if (this.common || this.common_template) {
+                    url += '&common=1'
+                }
+                return url
+            },
+            getCloneUrl (id) {
+                let url = `/template/clone/${this.cc_id}/?template_id=${id}`
+                if (this.common || this.common_template) {
+                    url += '&common=1'
+                }
+                return url
+            },
+            // 清除查询的分类选择
+            onClearCategory () {
+                this.templateCategorySync = -1
+                this.category = undefined
+            },
+            // 选择查询的分类
+            onSelectedCategory (name, value) {
+                this.category = name
+            },
+            onClearSubprocessUpdate () {
                 this.isSubprocessUpdated = undefined
-            } else {
-                this.isHasSubprocess = true
-                this.isSubprocessUpdated = data.value
-            }
-        },
-        onChangeEditTime (oldValue, newValue) {
-            const dateArray = newValue.split(' - ')
-            this.editStartTime = dateArray[0]
-            this.editEndTime = dateArray[1]
-        },
-        // 重置查询表单
-        onResetForm () {
-            this.$refs.bkRanger.clear()
-            this.isSubprocessUpdated = undefined
-            this.isHasSubprocess = undefined
-            this.templateCategorySync = -1
-            this.category = undefined
-            this.flowName = undefined
-            this.creator = undefined
-            this.editStartTime = undefined
-            this.editEndTime = undefined
-            this.isHasSubprocess = undefined
-            this.isSubprocessUpdated = undefined
-            this.subprocessUpdateSync = ''
-        },
-        // 获得子流程展示内容
-        getSubflowContent (item) {
-            if (!item.has_subprocess) {
-                return '--'
+                this.isHasSubprocess = undefined
+            },
+            onSelectedSubprocessUpdate (id, data) {
+                if (data.value === 'no') {
+                    this.isHasSubprocess = false
+                    this.isSubprocessUpdated = undefined
+                } else {
+                    this.isHasSubprocess = true
+                    this.isSubprocessUpdated = data.value
+                }
+            },
+            onChangeEditTime (oldValue, newValue) {
+                const dateArray = newValue.split(' - ')
+                this.editStartTime = dateArray[0]
+                this.editEndTime = dateArray[1]
+            },
+            // 重置查询表单
+            onResetForm () {
+                this.$refs.bkRanger.clear()
+                this.isSubprocessUpdated = undefined
+                this.isHasSubprocess = undefined
+                this.templateCategorySync = -1
+                this.category = undefined
+                this.flowName = undefined
+                this.creator = undefined
+                this.editStartTime = undefined
+                this.editEndTime = undefined
+                this.isHasSubprocess = undefined
+                this.isSubprocessUpdated = undefined
+                this.subprocessUpdateSync = ''
+            },
+            // 获得子流程展示内容
+            getSubflowContent (item) {
+                if (!item.has_subprocess) {
+                    return '--'
+                }
+                return item.subprocess_has_update ? this.i18n.yes : this.i18n.no
+            },
+            onAdvanceShow () {
+                this.isAdvancedSerachShow = !this.isAdvancedSerachShow
             }
-            return item.subprocess_has_update ? this.i18n.yes : this.i18n.no
-        },
-        onAdvanceShow () {
-            this.isAdvancedSerachShow = !this.isAdvancedSerachShow
         }
     }
-}
 </script>
 <style lang='scss' scoped>
 @import '@/scss/config.scss';
@@ -932,4 +932,3 @@ export default {
      }
 }
 </style>
-
diff --git a/pipeline/blueflow/src/pages/template/index.vue b/pipeline/blueflow/src/pages/template/index.vue
index adbebd58cc..25a08c5b89 100644
--- a/pipeline/blueflow/src/pages/template/index.vue
+++ b/pipeline/blueflow/src/pages/template/index.vue
@@ -13,8 +13,8 @@
     <router-view></router-view>
 </template>
 <script>
-import '@/utils/i18n.js'
-export default {
-    name: 'layoutContent'
-}
+    import '@/utils/i18n.js'
+    export default {
+        name: 'layoutContent'
+    }
 </script>
diff --git a/pipeline/blueflow/src/routers/index.js b/pipeline/blueflow/src/routers/index.js
index 925d41d3a4..9b51262519 100644
--- a/pipeline/blueflow/src/routers/index.js
+++ b/pipeline/blueflow/src/routers/index.js
@@ -22,7 +22,7 @@ const Template = () => import('@/pages/template/index.vue')
 const TemplateEdit = () => import('@/pages/template/TemplateEdit/index.vue')
 const TemplateList = () => import('@/pages/template/TemplateList/index.vue')
 
-const Task = () => import( '@/pages/task/index.vue')
+const Task = () => import('@/pages/task/index.vue')
 const TaskList = () => import('@/pages/task/TaskList/index.vue')
 const TaskCreate = () => import('@/pages/task/TaskCreate/index.vue')
 const TaskExecute = () => import('@/pages/task/TaskExecute/index.vue')
@@ -261,9 +261,9 @@ const routers = new VueRouter({
     ]
 })
 
-routers.beforeEach ((to, from, next) => {
+routers.beforeEach((to, from, next) => {
     // 生产环境 404 页面头部导航跳转统一设置为首页
-    if (process.env.NODE_ENV === "production" && to.name === 'notFoundPage') {
+    if (process.env.NODE_ENV === 'production' && to.name === 'notFoundPage') {
         store.commit('setNotFoundPage', true)
     } else {
         store.commit('setNotFoundPage', false)
@@ -275,5 +275,4 @@ routers.beforeEach ((to, from, next) => {
     next()
 })
 
-
 export default routers
diff --git a/pipeline/blueflow/src/store/index.js b/pipeline/blueflow/src/store/index.js
index 7b4015281b..9f6ea47738 100644
--- a/pipeline/blueflow/src/store/index.js
+++ b/pipeline/blueflow/src/store/index.js
@@ -12,7 +12,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import modules from './modules/index.js'
-import api from "@/api"
+import api from '@/api'
 
 Vue.use(Vuex)
 
@@ -74,10 +74,10 @@ const store = new Vuex.Store({
         setNotFoundPage (state, val) {
             state.notFoundPage = val
         },
-        setCategorys (state,data) {
+        setCategorys (state, data) {
             state.categorys = data
         },
-        setSingleAtomList (state,data) {
+        setSingleAtomList (state, data) {
             state.components = data
         },
         setBusinessTimezone (state, data) {
@@ -88,7 +88,7 @@ const store = new Vuex.Store({
         }
     },
     actions: {
-        getBizList ({commit}, isAll) {
+        getBizList ({ commit }, isAll) {
             api.getBizList(isAll).then(response => {
                 if (isAll) {
                     commit('setAllBusinessList', response.data.objects)
@@ -97,20 +97,20 @@ const store = new Vuex.Store({
                 }
             })
         },
-        changeDefaultBiz ({commit}, ccId) {
+        changeDefaultBiz ({ commit }, ccId) {
             return api.changeDefaultBiz(ccId).then(response => response.data)
         },
-        getCategorys ({commit}) {
+        getCategorys ({ commit }) {
             api.getCategorys().then(response => {
                 commit('setCategorys', response.data.data)
             })
         },
-        getSingleAtomList ({commit}) {
+        getSingleAtomList ({ commit }) {
             api.getSingleAtomList().then(response => {
                 commit('setSingleAtomList', response.data.objects)
             })
         },
-        getBusinessTimezone ({commit}) {
+        getBusinessTimezone ({ commit }) {
             api.getBusinessTimezone().then(response => {
                 const data = response.data
                 if (data.time_zone === undefined) {
@@ -118,16 +118,15 @@ const store = new Vuex.Store({
                 } else {
                     commit('setBusinessTimezone', data.time_zone)
                 }
-                
             })
         },
-        getHostInCC ({commmit}, fields) {
+        getHostInCC ({ commmit }, fields) {
             return api.loadHostInCC(fields).then(response => response.data)
         },
-        getTopoTreeInCC ({commmit}) {
+        getTopoTreeInCC ({ commmit }) {
             return api.loadTopoTreeInCC().then(response => response.data)
         },
-        getTopoModelInCC ({commit}) {
+        getTopoModelInCC ({ commit }) {
             return api.loadTopoModelInCC().then(response => response.data)
         }
     },
diff --git a/pipeline/blueflow/src/store/modules/appmaker.js b/pipeline/blueflow/src/store/modules/appmaker.js
index 836ca6eb91..228388a061 100644
--- a/pipeline/blueflow/src/store/modules/appmaker.js
+++ b/pipeline/blueflow/src/store/modules/appmaker.js
@@ -18,25 +18,25 @@ const appmaker = {
     mutations: {
     },
     actions: {
-        loadAppmakerSummary ({commit}, data) {
+        loadAppmakerSummary ({ commit }, data) {
             return api.loadAppmakerSummary(data).then(response => response.data)
         },
-        loadAppmakerDetail ({commit}, id) {
+        loadAppmakerDetail ({ commit }, id) {
             return api.loadAppmakerDetail(id).then(response => response.data)
         },
-        appmakerEdit ({commit}, data) {
+        appmakerEdit ({ commit }, data) {
             return api.appmakerEdit(data).then(response => response.data)
         },
-        appmakerDelete ({commit}, id) {
+        appmakerDelete ({ commit }, id) {
             return api.appmakerDelete(id).then(response => response.data)
         },
-        queryAppmakerData ({commit}, data) {
+        queryAppmakerData ({ commit }, data) {
             return api.queryAppmaker(data).then(response => response.data)
         },
-        loadAppmaker ({commit}, data) {
+        loadAppmaker ({ commit }, data) {
             return api.loadAppmaker(data).then(response => response.data)
         }
     }
 }
 
-export default appmaker
\ No newline at end of file
+export default appmaker
diff --git a/pipeline/blueflow/src/store/modules/atomForm.js b/pipeline/blueflow/src/store/modules/atomForm.js
index a981db075a..b0463952bc 100644
--- a/pipeline/blueflow/src/store/modules/atomForm.js
+++ b/pipeline/blueflow/src/store/modules/atomForm.js
@@ -11,7 +11,6 @@
 */
 import Vue from 'vue'
 import api from '@/api/index.js'
-import { debug } from 'util'
 
 const META_FORM_TYPE = {
     'select': 'select_meta'
@@ -30,7 +29,7 @@ const atomForm = {
             state.fetching = status
         },
         setAtomForm (state, payload) {
-            let atomType = payload.isMeta ? META_FORM_TYPE[payload.atomType] : payload.atomType
+            const atomType = payload.isMeta ? META_FORM_TYPE[payload.atomType] : payload.atomType
             Vue.set(state.form, atomType, payload.data)
         },
         setAtomConfig (state, payload) {
@@ -47,7 +46,7 @@ const atomForm = {
         }
     },
     actions: {
-        loadAtomConfig ({commit, state}, payload) {
+        loadAtomConfig ({ commit, state }, payload) {
             const { atomType, classify, isMeta } = payload
             const atomClassify = classify || 'component'
             return api.$getAtomForm(atomType, atomClassify, isMeta || 0).then(
@@ -56,7 +55,7 @@ const atomForm = {
                 Promise.reject(e)
             })
         },
-        loadSubflowConfig ({commit}, payload) {
+        loadSubflowConfig ({ commit }, payload) {
             const { templateId, version, common } = payload
             return api.getFormByTemplateId(templateId, version, common).then(
                 response => response.data
@@ -65,4 +64,4 @@ const atomForm = {
     }
 }
 
-export default atomForm
\ No newline at end of file
+export default atomForm
diff --git a/pipeline/blueflow/src/store/modules/atomList.js b/pipeline/blueflow/src/store/modules/atomList.js
index be0e8aa68b..323e6da97c 100644
--- a/pipeline/blueflow/src/store/modules/atomList.js
+++ b/pipeline/blueflow/src/store/modules/atomList.js
@@ -19,10 +19,10 @@ const atomList = {
         searchAtomResult: []
     },
     mutations: {
-        setSingleAtom (state, data){
+        setSingleAtom (state, data) {
             state.singleAtom = [...data]
         },
-        setSubAtom (state, data){
+        setSubAtom (state, data) {
             state.subAtom = [...data]
         },
         searchAtom (state, payload) {
@@ -38,13 +38,13 @@ const atomList = {
         }
     },
     actions: {
-        loadSingleAtomList ({commit}) {
+        loadSingleAtomList ({ commit }) {
             return api.getSingleAtomList().then(response => response.data.objects)
         },
-        loadSubAtomList ({commit}, data) {
+        loadSubAtomList ({ commit }, data) {
             return api.getSubAtomList(data).then(response => response.data.objects)
         },
-        queryAtomData ({commit}, data) {
+        queryAtomData ({ commit }, data) {
             return api.queryAtom(data).then(response => response.data)
         }
     },
@@ -75,4 +75,4 @@ const atomList = {
     }
 }
 
-export default atomList
\ No newline at end of file
+export default atomList
diff --git a/pipeline/blueflow/src/store/modules/audit.js b/pipeline/blueflow/src/store/modules/audit.js
index 252e0b70f7..afde6b870a 100644
--- a/pipeline/blueflow/src/store/modules/audit.js
+++ b/pipeline/blueflow/src/store/modules/audit.js
@@ -9,7 +9,6 @@
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */
-import Vue from 'vue'
 import api from '@/api/index.js'
 
 const auditTask = {
@@ -19,7 +18,7 @@ const auditTask = {
     mutations: {
     },
     actions: {
-        loadAuditTaskList ({commit}, data) {
+        loadAuditTaskList ({ commit }, data) {
             return api.loadAuditTaskList(data).then(
                 response => response.data
             )
@@ -27,4 +26,4 @@ const auditTask = {
     }
 }
 
-export default auditTask
\ No newline at end of file
+export default auditTask
diff --git a/pipeline/blueflow/src/store/modules/config.js b/pipeline/blueflow/src/store/modules/config.js
index ae432d09bb..cc5077226d 100644
--- a/pipeline/blueflow/src/store/modules/config.js
+++ b/pipeline/blueflow/src/store/modules/config.js
@@ -14,7 +14,7 @@ import api from '@/api/index.js'
 const config = {
     namespaced: true,
     actions: {
-        configBizExecutor ({commit}, data) {
+        configBizExecutor ({ commit }, data) {
             return api.configBizExecutor(data).then(response => response.data)
         },
         loadBizConfig () {
@@ -25,4 +25,4 @@ const config = {
     }
 }
 
-export default config
\ No newline at end of file
+export default config
diff --git a/pipeline/blueflow/src/store/modules/function.js b/pipeline/blueflow/src/store/modules/function.js
index 895e04d31e..02908474ed 100644
--- a/pipeline/blueflow/src/store/modules/function.js
+++ b/pipeline/blueflow/src/store/modules/function.js
@@ -9,7 +9,6 @@
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */
-import Vue from 'vue'
 import api from '@/api/index.js'
 
 const functionTask = {
@@ -19,17 +18,17 @@ const functionTask = {
     mutations: {
     },
     actions: {
-        loadFunctionTaskList ({commit}, data) {
+        loadFunctionTaskList ({ commit }, data) {
             return api.getFunctionTaskList(data).then(
                 response => response.data
             )
         },
-        loadFunctionBusinessList ({commit}) {
+        loadFunctionBusinessList ({ commit }) {
             return api.loadFunctionBusinessList().then(
                 response => response.data
             )
         },
-        loadFunctionTemplateList ({commit},cc_id) {
+        loadFunctionTemplateList ({ commit }, cc_id) {
             return api.loadFunctionTemplateList(cc_id).then(
                 response => response.data
             )
@@ -37,4 +36,4 @@ const functionTask = {
     }
 }
 
-export default functionTask
\ No newline at end of file
+export default functionTask
diff --git a/pipeline/blueflow/src/store/modules/periodic.js b/pipeline/blueflow/src/store/modules/periodic.js
index 91d138808e..f95efd8182 100644
--- a/pipeline/blueflow/src/store/modules/periodic.js
+++ b/pipeline/blueflow/src/store/modules/periodic.js
@@ -9,37 +9,35 @@
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */
-import api from "@/api/index.js"
-import tools from '@/utils/tools.js'
+import api from '@/api/index.js'
 
 const periodic = {
     namespaced: true,
-    mutations: {
-    },
+    mutations: {},
     actions: {
-        loadPeriodicList ({commit}, data) {
+        loadPeriodicList ({ commit }, data) {
             return api.getPeriodicList(data).then(response => response.data)
         },
-        createPeriodic ({state},data) {
+        createPeriodic ({ state }, data) {
             return api.createPeriodic(data).then(response => response.data)
         },
-        setPeriodicEnable ({commit}, data) {
+        setPeriodicEnable ({ commit }, data) {
             return api.setPeriodicEnable(data).then(response => response.data)
         },
-        modifyPeriodicCron ({commit}, data) {
+        modifyPeriodicCron ({ commit }, data) {
             return api.modifyPeriodicCron(data).then(response => response.data)
         },
-        getPeriodic ({commit}, data) {
+        getPeriodic ({ commit }, data) {
             return api.getPeriodic(data).then(response => response.data)
         },
-        modifyPeriodicConstants ({commit}, data) {
+        modifyPeriodicConstants ({ commit }, data) {
             return api.modifyPeriodicConstants(data).then(response => response.data)
         },
-        deletePeriodic ({commit}, taskId) {
+        deletePeriodic ({ commit }, taskId) {
             return api.deletePeriodic(taskId).then(response => response.data)
         }
     },
     getters: {}
 }
 
-export default periodic
\ No newline at end of file
+export default periodic
diff --git a/pipeline/blueflow/src/store/modules/task.js b/pipeline/blueflow/src/store/modules/task.js
index 78490d9439..4f0841aeb5 100644
--- a/pipeline/blueflow/src/store/modules/task.js
+++ b/pipeline/blueflow/src/store/modules/task.js
@@ -22,89 +22,89 @@ const task = {
         }
     },
     actions: {
-        loadTaskScheme ({commit}, payload) {
-            const { cc_id, template_id} = payload
-            return api.getTaskScheme({cc_id, template_id}).then(response => response.data.objects)
+        loadTaskScheme ({ commit }, payload) {
+            const { cc_id, template_id } = payload
+            return api.getTaskScheme({ cc_id, template_id }).then(response => response.data.objects)
         },
-        createTaskScheme ({commit}, payload) {
+        createTaskScheme ({ commit }, payload) {
             return api.createTaskScheme(payload).then(response => response.data)
         },
-        deleteTaskScheme ({commit}, schemeId) {
+        deleteTaskScheme ({ commit }, schemeId) {
             return api.deleteTaskScheme(schemeId).then(response => response.data)
         },
-        getSchemeDetail ({commit}, schemeId) {
+        getSchemeDetail ({ commit }, schemeId) {
             return api.getSchemeDetail(schemeId).then(response => response.data)
         },
-        loadPreviewNodeData ({commit}, payload) {
+        loadPreviewNodeData ({ commit }, payload) {
             return api.getPreviewNodeData(payload).then(response => response.data)
         },
-        createTask ({commit}, data) {
+        createTask ({ commit }, data) {
             return api.createTask(data).then(response => response.data)
         },
-        getTaskInstanceData ({commit}, instance_id) {
+        getTaskInstanceData ({ commit }, instance_id) {
             return api.getTaskInstanceData(instance_id).then(response => response.data)
         },
-        claimFuncTask ({commit}, data) {
+        claimFuncTask ({ commit }, data) {
             return api.claimFuncTask(data).then(response => response.data)
         },
-        getInstanceStatus ({commit}, data) {
+        getInstanceStatus ({ commit }, data) {
             return api.getInstanceStatus(data).then(response => response.data)
         },
-        instanceStart ({commit}, instance_id) {
+        instanceStart ({ commit }, instance_id) {
             return api.instanceStart(instance_id).then(response => response.data)
         },
-        instancePause ({commit}, instance_id) {
+        instancePause ({ commit }, instance_id) {
             return api.instancePause(instance_id).then(response => response.data)
         },
-        subInstancePause ({commit}, data) {
+        subInstancePause ({ commit }, data) {
             return api.subInstancePause(data).then(response => response.data)
         },
-        instanceResume ({commit}, instance_id) {
+        instanceResume ({ commit }, instance_id) {
             return api.instanceResume(instance_id).then(response => response.data)
         },
-        subInstanceResume ({commit}, data) {
+        subInstanceResume ({ commit }, data) {
             return api.subInstanceResume(data).then(response => response.data)
         },
-        instanceRevoke ({commit}, instance_id) {
+        instanceRevoke ({ commit }, instance_id) {
             return api.instanceRevoke(instance_id).then(response => response.data)
         },
-        instanceModifyParams ({commit}, data) {
+        instanceModifyParams ({ commit }, data) {
             return api.instanceModifyParams(data).then(response => response.data)
         },
-        getNodeActDetail ({commit}, data) {
+        getNodeActDetail ({ commit }, data) {
             return api.getNodeActDetail(data).then(response => response.data)
         },
-        getNodeActInfo ({commit}, data) {
+        getNodeActInfo ({ commit }, data) {
             return api.getNodeActInfo(data).then(response => response.data)
         },
-        instanceRetry ({commit}, data) {
+        instanceRetry ({ commit }, data) {
             return api.instanceRetry(data).then(response => response.data)
         },
-        setSleepNode ({commit}, data) {
+        setSleepNode ({ commit }, data) {
             return api.setSleepNode(data).then(response => response.data)
         },
-        instanceNodeSkip ({commit}, data) {
+        instanceNodeSkip ({ commit }, data) {
             return api.instanceNodeSkip(data).then(response => response.data)
         },
-        skipExclusiveGateway ({commit}, data) {
+        skipExclusiveGateway ({ commit }, data) {
             return api.instanceBranchSkip(data).then(response => response.data)
         },
-        pauseNodeResume ({commit}, data) {
+        pauseNodeResume ({ commit }, data) {
             return api.pauseNodeResume(data).then(response => response.data)
         },
         loadAppmakerSummary () {
             return api.loadAppmakerSummary().then(response => response.data)
         },
-        loadTaskCount ({commit}, params) {
+        loadTaskCount ({ commit }, params) {
             return api.loadTaskCount(params).then(response => response.data)
         },
-        queryInstanceData ({commit}, data) {
+        queryInstanceData ({ commit }, data) {
             return api.queryInstance(data).then(response => response.data)
         },
-        loadCreateMethod ({commit}) {
+        loadCreateMethod ({ commit }) {
             return api.loadCreateMethod().then(response => response.data)
         },
-        getJobInstanceLog ({commit}, data) {
+        getJobInstanceLog ({ commit }, data) {
             return api.getJobInstanceLog(data).then(response => response.data)
         }
     }
diff --git a/pipeline/blueflow/src/store/modules/taskList.js b/pipeline/blueflow/src/store/modules/taskList.js
index ef8703cc32..7acb8681b7 100644
--- a/pipeline/blueflow/src/store/modules/taskList.js
+++ b/pipeline/blueflow/src/store/modules/taskList.js
@@ -9,7 +9,7 @@
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */
-import api from "@/api/index.js"
+import api from '@/api/index.js'
 
 const taskList = {
     namespaced: true,
@@ -22,17 +22,17 @@ const taskList = {
         }
     },
     actions: {
-        loadTaskList ({commit}, data) {
+        loadTaskList ({ commit }, data) {
             return api.getTaskList(data).then(response => response.data)
         },
-        deleteTask ({commit}, task_id) {
+        deleteTask ({ commit }, task_id) {
             return api.deleteTask(task_id).then(response => response.data.objects)
         },
-        cloneTask ({commit}, data) {
+        cloneTask ({ commit }, data) {
             return api.cloneTask(data).then(response => response.data)
         }
     },
     getters: {}
 }
 
-export default taskList
\ No newline at end of file
+export default taskList
diff --git a/pipeline/blueflow/src/store/modules/template.js b/pipeline/blueflow/src/store/modules/template.js
index 58d598b96a..5662e2db3b 100644
--- a/pipeline/blueflow/src/store/modules/template.js
+++ b/pipeline/blueflow/src/store/modules/template.js
@@ -47,7 +47,6 @@ function generateInitLocation () {
             type: 'endpoint'
         }
     ]
-
 }
 // 默认流程模板，activities 字段
 function generateInitActivities (location, line) {
@@ -174,8 +173,8 @@ const template = {
         setSubprocessUpdated (state, subflow) {
             state.subprocess_info.details.some(item => {
                 if (
-                    subflow.template_id === item.template_id &&
-                    subflow.subprocess_node_id === item.subprocess_node_id
+                    subflow.template_id === item.template_id
+                    && subflow.subprocess_node_id === item.subprocess_node_id
                 ) {
                     item.expired = false
                     subflow.version && (item.version = subflow.version)
@@ -204,7 +203,7 @@ const template = {
 
             pipelineTreeOrder.forEach(key => {
                 let val = pipelineData[key]
-                if (key !== 'constants'){
+                if (key !== 'constants') {
                     val = nodeFilter.convertInvalidIdData(key, val) // convert old invalid data =_=!
                 }
                 if (key === 'location') {
@@ -226,7 +225,6 @@ const template = {
                 }
                 state[key] = val
             })
-
         },
         setBusinessBaseInfo (state, data) {
             state.businessBaseInfo = data
@@ -256,7 +254,7 @@ const template = {
         // 重置模板数据
         resetTemplateData (state) {
             state.name = ''
-            state.activities  = {}
+            state.activities = {}
             state.end_event = {}
             state.flows = {}
             state.gateways = {}
@@ -287,7 +285,7 @@ const template = {
             const constant = state.constants[key]
             const { source_info } = constant
 
-            for (let id in source_info) {
+            for (const id in source_info) {
                 if (state.activities[id]) {
                     source_info[id].forEach(item => {
                         let data
@@ -310,7 +308,7 @@ const template = {
         },
         // 配置全局变量 source_info 字段
         setVariableSourceInfo (state, payload) {
-            const {type, id, key, tagCode} = payload
+            const { type, id, key, tagCode } = payload
             const constant = state.constants[key]
             if (!constant) return
             const sourceInfo = constant.source_info
@@ -325,7 +323,7 @@ const template = {
                     Vue.delete(sourceInfo, id)
                 } else {
                     let atomIndex
-                    sourceInfo[id].some((item, index)=> {
+                    sourceInfo[id].some((item, index) => {
                         if (item === tagCode) {
                             atomIndex = index
                             return true
@@ -337,7 +335,7 @@ const template = {
         },
         // 配置分支网关条件
         setBranchCondition (state, condition) {
-            const {id, nodeId, name} = condition
+            const { id, nodeId, name } = condition
             state.gateways[nodeId]['conditions'][id].evaluate = name
         },
         // 节点增加、删除、编辑操作，数据更新
@@ -364,7 +362,7 @@ const template = {
         },
         // 节点拖动，位置更新
         setLocationXY (state, location) {
-            const {id, x, y} = location
+            const { id, x, y } = location
             state.location.some(item => {
                 if (item.id === id) {
                     item.x = x
@@ -376,13 +374,11 @@ const template = {
         // 增加、删除节点连线操作，更新模板各相关字段数据
         setLine (state, payload) {
             const { type, line } = payload
-            let lineIndex
             const isLineExist = state.line.some((item, index) => {
                 if (
-                    item.source.id === line.source.id &&
-                    item.target.id === line.target.id
+                    item.source.id === line.source.id
+                    && item.target.id === line.target.id
                 ) {
-                    lineIndex = index
                     return true
                 }
             })
@@ -428,8 +424,8 @@ const template = {
                 state.line.push(newLine)
             } else if (type === 'delete') { // async activities、flows、gateways、start_event、end_event
                 let deletedLine
-                for (let item in state.flows) {
-                    const flow =  state.flows[item]
+                for (const item in state.flows) {
+                    const flow = state.flows[item]
                     if (flow.source === line.source.id && flow.target === line.target.id) {
                         deletedLine = Object.assign({}, flow)
                     }
@@ -444,7 +440,9 @@ const template = {
                 if (state.gateways[sourceNode]) {
                     const gatewayNode = state.gateways[sourceNode]
                     if (Array.isArray(gatewayNode.outgoing)) {
-                        gatewayNode.outgoing = gatewayNode.outgoing.filter(item => { return item !== deletedLine.id})
+                        gatewayNode.outgoing = gatewayNode.outgoing.filter(item => {
+                            return item !== deletedLine.id
+                        })
                         if (gatewayNode.type === ATOM_TYPE_DICT['branchgateway']) {
                             const conditions = gatewayNode.conditions
                             conditions[deletedLine.id] && Vue.delete(conditions, deletedLine.id)
@@ -456,7 +454,9 @@ const template = {
                 if (state.gateways[targetNode]) {
                     const gatewayNode = state.gateways[targetNode]
                     if (Array.isArray(gatewayNode.incoming)) {
-                        gatewayNode.incoming = gatewayNode.incoming.filter(item => { return item !== deletedLine.id})
+                        gatewayNode.incoming = gatewayNode.incoming.filter(item => {
+                            return item !== deletedLine.id
+                        })
                     } else {
                         gatewayNode.incoming = ''
                     }
@@ -477,13 +477,13 @@ const template = {
                             },
                             error_ignorable: false,
                             id: location.id,
-                            incoming: "",
+                            incoming: '',
                             loop: null,
                             name: location.name,
                             optional: false,
-                            outgoing: "",
+                            outgoing: '',
                             stage_name: gettext('步骤1'),
-                            type: "ServiceActivity",
+                            type: 'ServiceActivity',
                             can_retry: true,
                             isSkipped: true
                         }
@@ -492,15 +492,15 @@ const template = {
                             constants: {},
                             hooked_constants: [],
                             id: location.id,
-                            incoming: "",
+                            incoming: '',
                             loop: null,
                             name: location.name,
                             optional: false,
-                            outgoing: "",
+                            outgoing: '',
                             stage_name: gettext('步骤1'),
                             template_id: location.atomId,
                             version: location.atomVersion,
-                            type: "SubProcess"
+                            type: 'SubProcess'
                         }
                     }
                 }
@@ -530,7 +530,9 @@ const template = {
                         if (state.gateways[sourceNode]) {
                             const gatewayNode = state.gateways[sourceNode]
                             if (Array.isArray(gatewayNode.outgoing)) {
-                                gatewayNode.outgoing = gatewayNode.outgoing.filter(item => { return item !== line})
+                                gatewayNode.outgoing = gatewayNode.outgoing.filter(item => {
+                                    return item !== line
+                                })
                                 if (gatewayNode.type === ATOM_TYPE_DICT['branchgateway']) {
                                     const conditions = gatewayNode.conditions
                                     conditions[line] && Vue.delete(conditions, line)
@@ -542,7 +544,9 @@ const template = {
                         if (state.gateways[targetNode]) {
                             const gatewayNode = state.gateways[targetNode]
                             if (Array.isArray(gatewayNode.incoming)) {
-                                gatewayNode.incoming = gatewayNode.incoming.filter(item => { return item !== line})
+                                gatewayNode.incoming = gatewayNode.incoming.filter(item => {
+                                    return item !== line
+                                })
                             } else {
                                 gatewayNode.incoming = ''
                             }
@@ -550,7 +554,7 @@ const template = {
                         Vue.delete(state.flows, line)
                     }
                 })
-                for (let cKey in state.constants) {
+                for (const cKey in state.constants) {
                     const constant = state.constants[cKey]
                     const sourceInfo = constant.source_info
 
@@ -603,7 +607,6 @@ const template = {
                                     return item !== line
                                 })
                             }
-
                         }
                         if (sourceGateway && sourceNode !== location.id) {
                             if (typeof sourceGateway.outgoing === 'string') {
@@ -630,16 +633,16 @@ const template = {
                 if (!state.start_event.id) {
                     state.start_event = {
                         id: location.id,
-                        incoming: "",
+                        incoming: '',
                         name: location.name,
-                        outgoing: "",
-                        type: "EmptyStartEvent"
+                        outgoing: '',
+                        type: 'EmptyStartEvent'
                     }
                 }
             } else if (type === 'delete') {
                 let targetNode
                 let lineId
-                for (let item in state.flows){
+                for (const item in state.flows) {
                     if (state.flows[item].source === location.id) {
                         targetNode = state.flows[item].target
                         lineId = state.flows[item].id
@@ -668,16 +671,16 @@ const template = {
                 if (!state.end_event.id) {
                     state.end_event = {
                         id: location.id,
-                        incoming: "",
+                        incoming: '',
                         name: location.name,
-                        outgoing: "",
-                        type: "EmptyEndEvent"
+                        outgoing: '',
+                        type: 'EmptyEndEvent'
                     }
                 }
             } else if (type === 'delete') {
                 let sourceNode
                 let lineId
-                for (let item in state.flows){
+                for (const item in state.flows) {
                     if (state.flows[item].target === location.id) {
                         sourceNode = state.flows[item].source
                         lineId = state.flows[item].id
@@ -717,7 +720,7 @@ const template = {
         // 修改state中的模板数据
         replaceTemplate (state, template) {
             if (template !== undefined) {
-                for (let prop in template) {
+                for (const prop in template) {
                     state[prop] = template[prop]
                 }
             }
@@ -725,7 +728,7 @@ const template = {
         // 修改lines和locations
         replaceLineAndLocation (state, payload) {
             //  需要做一次深层拷贝
-            const {lines, locations} = tools.deepClone(payload)
+            const { lines, locations } = tools.deepClone(payload)
             state.line = lines
             state.location = locations
         }
@@ -734,11 +737,11 @@ const template = {
         loadBusinessBaseInfo () {
             return api.getBusinessBaseInfo().then(response => response.data)
         },
-        loadTemplateData ({commit}, data) {
+        loadTemplateData ({ commit }, data) {
             return api.getTemplateData(data).then(response => response.data)
         },
         // 保存模板数据
-        saveTemplateData ({state}, {templateId, ccId, common}) {
+        saveTemplateData ({ state }, { templateId, ccId, common }) {
             const { activities, constants, end_event, flows, gateways, line,
                 location, outputs, start_event, notify_receivers, notify_type, time_out, category
             } = state
@@ -756,8 +759,15 @@ const template = {
             })
             // 完整的画布数据
             const fullCanvasData = JSON.stringify({
-                activities, constants, end_event, flows, gateways, line,
-                location: pureLocation, outputs,  start_event
+                activities,
+                constants,
+                end_event,
+                flows,
+                gateways,
+                line,
+                location: pureLocation,
+                outputs,
+                start_event
             })
             const data = {
                 ccId,
@@ -775,20 +785,20 @@ const template = {
             })
         },
         // 收藏模板，批量操作
-        templateCollectSelect ({commit}, list) {
+        templateCollectSelect ({ commit }, list) {
             return api.templateCollectSelect(list).then(response => response.data)
         },
         // 删除收藏模板，单个删除
-        templateCollectDelete ({commit}, id) {
+        templateCollectDelete ({ commit }, id) {
             return api.templateCollectDelete(id).then(response => response.data)
         },
-        queryTemplateData ({commit}, data) {
+        queryTemplateData ({ commit }, data) {
             return api.queryTemplate(data).then(response => response.data)
         },
-        loadTemplateSummary ({commit}, data) {
+        loadTemplateSummary ({ commit }, data) {
             return api.loadTemplateSummary(data).then(response => response.data)
         },
-        loadTemplateCollectList ({commit}) {
+        loadTemplateCollectList ({ commit }) {
             return api.loadTemplateCollectList().then(response => response.data)
         }
     },
diff --git a/pipeline/blueflow/src/store/modules/templateList.js b/pipeline/blueflow/src/store/modules/templateList.js
index 4e6d3fcd9a..4ece5eb12c 100644
--- a/pipeline/blueflow/src/store/modules/templateList.js
+++ b/pipeline/blueflow/src/store/modules/templateList.js
@@ -9,7 +9,7 @@
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */
-import api from "@/api"
+import api from '@/api'
 
 const templateList = {
     namespaced: true,
@@ -19,7 +19,7 @@ const templateList = {
     },
     mutations: {
         setTemplateListData (state, payload) {
-            const {list, isCommon} = payload
+            const { list, isCommon } = payload
             if (isCommon) {
                 state.commonTemplateData = list
             } else {
@@ -28,32 +28,32 @@ const templateList = {
         }
     },
     actions: {
-        loadTemplateList ({commit}, data) {
+        loadTemplateList ({ commit }, data) {
             return api.getTemplateList(data).then(response => response.data)
         },
-        deleteTemplate ({commit}, template_id) {
+        deleteTemplate ({ commit }, template_id) {
             return api.deleteTemplate(template_id).then(response => response.data.objects)
         },
         getBizPerson () {
             return api.getBizPerson().then(response => response.data)
         },
-        getTemplatePersons ({commit}, data) {
+        getTemplatePersons ({ commit }, data) {
             return api.getTemplatePersons(data).then(response => response.data)
         },
-        saveTemplatePersons ({commit}, data) {
+        saveTemplatePersons ({ commit }, data) {
             return api.saveTemplatePersons(data).then(response => response.data)
         },
-        templateUploadCheck ({commit}, data) {
+        templateUploadCheck ({ commit }, data) {
             return api.templateUploadCheck(data).then(response => response.data)
         },
-        templateImport ({commit}, data) {
+        templateImport ({ commit }, data) {
             return api.templateImport(data).then(response => response.data)
         },
-        templateExport ({commit}, data) {
+        templateExport ({ commit }, data) {
             return api.templateExport(data).then(response => response.data)
         }
     },
     getters: {}
 }
 
-export default templateList
\ No newline at end of file
+export default templateList
diff --git a/pipeline/blueflow/src/utils/atomFilter.js b/pipeline/blueflow/src/utils/atomFilter.js
index 5df984e964..3d9e86dd99 100644
--- a/pipeline/blueflow/src/utils/atomFilter.js
+++ b/pipeline/blueflow/src/utils/atomFilter.js
@@ -14,7 +14,7 @@ import tools from './tools.js'
 const atomFilter = {
     formFilter (tag_code, config) {
         let formConfig
-        if (tag_code && config){
+        if (tag_code && config) {
             config.some(item => {
                 if (item.tag_code === tag_code) {
                     formConfig = item
@@ -33,7 +33,7 @@ const atomFilter = {
         return formConfig
     },
     getFormItemDefaultValue (config) {
-        let value = {}
+        const value = {}
         config.forEach(item => {
             if (item.type === 'combine') {
                 value[item.tag_code] = this.getFormItemDefaultValue(item.attrs.children)
@@ -77,7 +77,6 @@ const atomFilter = {
                             break
                         default:
                             val = ''
-
                     }
                 }
 
@@ -89,4 +88,4 @@ const atomFilter = {
     }
 }
 
-export default atomFilter
\ No newline at end of file
+export default atomFilter
diff --git a/pipeline/blueflow/src/utils/bus.js b/pipeline/blueflow/src/utils/bus.js
index 8a8dbdc453..4aa4fe1766 100644
--- a/pipeline/blueflow/src/utils/bus.js
+++ b/pipeline/blueflow/src/utils/bus.js
@@ -13,4 +13,4 @@ import Vue from 'vue'
 
 const bus = new Vue()
 
-export default bus
\ No newline at end of file
+export default bus
diff --git a/pipeline/blueflow/src/utils/checkDataType.js b/pipeline/blueflow/src/utils/checkDataType.js
index e3790ad939..129b29729b 100644
--- a/pipeline/blueflow/src/utils/checkDataType.js
+++ b/pipeline/blueflow/src/utils/checkDataType.js
@@ -12,4 +12,4 @@
 export function checkDataType (data) {
     const typeString = Object.prototype.toString.call(data)
     return typeString.slice(8, -1)
-}
\ No newline at end of file
+}
diff --git a/pipeline/blueflow/src/utils/dom.js b/pipeline/blueflow/src/utils/dom.js
index 6e439b8018..2ad52417f9 100644
--- a/pipeline/blueflow/src/utils/dom.js
+++ b/pipeline/blueflow/src/utils/dom.js
@@ -11,15 +11,17 @@
 */
 const dom = {
     nodeContains: function (root, el) {
-        if (root.compareDocumentPosition)
+        if (root.compareDocumentPosition) {
             return root === el || !!(root.compareDocumentPosition(el) & 16)
-        if (root.contains && el.nodeType === 1){
+        }
+        if (root.contains && el.nodeType === 1) {
             return root.contains(el) && root !== el
         }
-        while ((el = el.parentNode))
+        while ((el = el.parentNode)) {
             if (el === root) return true
+        }
         return false
     }
 }
 
-export default dom
\ No newline at end of file
+export default dom
diff --git a/pipeline/blueflow/src/utils/draft.js b/pipeline/blueflow/src/utils/draft.js
index fc1ad44118..57d08bd1f2 100644
--- a/pipeline/blueflow/src/utils/draft.js
+++ b/pipeline/blueflow/src/utils/draft.js
@@ -21,8 +21,8 @@ const draft = {
         let index = 0
         while (remainingLocalStorageSize < minDraftLength) {
             // 大小不足96KB时清除一部分本地缓存 从最早创建的本地缓存开始删除
-            let key = localStorage.key(index++)
-            let keyArray = key.split('_')
+            const key = localStorage.key(index++)
+            const keyArray = key.split('_')
             if (keyArray.length !== 4) {
                 continue
             }
@@ -30,19 +30,19 @@ const draft = {
             remainingLocalStorageSize = 1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length
         }
         // 当前时间戳
-        let timestamp = new Date().getTime()
+        const timestamp = new Date().getTime()
         // 当前年月日时分秒时间
-        let localTime = moment.unix(timestamp / 1000).format('YYYY-MM-DD HH:mm:ss')
+        const localTime = moment.unix(timestamp / 1000).format('YYYY-MM-DD HH:mm:ss')
         // 数据
-        let descriptionData = {'time': localTime , 'message': message}
+        const descriptionData = { 'time': localTime, 'message': message }
         // 存储数据
-        let key = [username, ccId, templateId, timestamp].join('_')
+        const key = [username, ccId, templateId, timestamp].join('_')
         // 超过50个本地缓存需要进行删除
         let draftNumber = 0
-        let localStorageLength = localStorage.length
+        const localStorageLength = localStorage.length
         const regex = this.getKeyRegex(username, ccId, templateId)
-        for (let index = localStorageLength - 1; index >= 0 ; index--) {
-            let key = localStorage.key(index)
+        for (let index = localStorageLength - 1; index >= 0; index--) {
+            const key = localStorage.key(index)
             // 获取key字段的所有切割信息
             if (regex.test(key)) {
                 draftNumber++
@@ -52,7 +52,7 @@ const draft = {
             }
         }
         try {
-            localStorage[key] = JSON.stringify({'template': templateData , 'description': descriptionData})
+            localStorage[key] = JSON.stringify({ 'template': templateData, 'description': descriptionData })
         } catch (e) {
             // 用户浏览器不支持localStorage
         }
@@ -69,19 +69,19 @@ const draft = {
     // 用于替换第一次创建模板id为 uuid 的id
     draftReplace (username, ccId, templateId, templateUUID) {
         const regex = this.getKeyRegex(username, ccId, templateUUID)
-        for (let key in localStorage) {
+        for (const key in localStorage) {
             // 获取key字段的所有切割信息
-            let keyArray = key.split('_')
+            const keyArray = key.split('_')
             // 切割完的长度应该为4且原先的模板id uuid 时才需要使用
             // username重复的几率比较大放置最后判断
             if (regex.test(key)) {
                 // 原先的模板数据
-                let draftData = localStorage[key]
+                const draftData = localStorage[key]
                 // 将原先信息删除
                 localStorage.removeItem(key)
                 keyArray[2] = templateId
                 // 重新创建key值
-                let newKey = keyArray.join('_')
+                const newKey = keyArray.join('_')
                 localStorage[newKey] = draftData
             }
         }
@@ -89,12 +89,12 @@ const draft = {
     // 获取当前本地缓存
     getDraftArray (username, ccId, templateId) {
         const regex = this.getKeyRegex(username, ccId, templateId)
-        let draftArray = []
-        let localStorageLength = localStorage.length
-        for (let index = localStorageLength - 1; index >= 0 ; index--) {
-            let key = localStorage.key(index)
+        const draftArray = []
+        const localStorageLength = localStorage.length
+        for (let index = localStorageLength - 1; index >= 0; index--) {
+            const key = localStorage.key(index)
             if (regex.test(key)) {
-                draftArray.push({'key': key,'data': JSON.parse(localStorage[key])})
+                draftArray.push({ 'key': key, 'data': JSON.parse(localStorage[key]) })
             }
         }
         return draftArray
@@ -102,9 +102,9 @@ const draft = {
     // 删除没有template_id 的模板
     deleteAllDraftByUUID (username, ccId, uuid) {
         const regex = this.getKeyRegex(username, ccId, uuid)
-        let localStorageLength = localStorage.length
-        for (let index = localStorageLength - 1; index >= 0 ; index--) {
-            let key = localStorage.key(index)
+        const localStorageLength = localStorage.length
+        for (let index = localStorageLength - 1; index >= 0; index--) {
+            const key = localStorage.key(index)
             // uuid 需要加上""变为字符串
             if (regex.test(key)) {
                 localStorage.removeItem(key)
@@ -114,26 +114,26 @@ const draft = {
     // 复制并替换本地缓存（模板克隆时使用）
     copyAndReplaceDraft (username, ccId, templateId, uuid) {
         const regex = this.getKeyRegex(username, ccId, templateId)
-        for (let key in localStorage) {
+        for (const key in localStorage) {
             // 获取key字段的所有切割信息
-            let keyArray = key.split('_')
+            const keyArray = key.split('_')
             if (regex.test(key)) {
                 // 原先的模板数据
-                let draftData = localStorage[key]
+                const draftData = localStorage[key]
                 keyArray[2] = uuid
                 // 重新创建key值并进行创建
-                let newKey = keyArray.join('_')
+                const newKey = keyArray.join('_')
                 localStorage[newKey] = draftData
             }
         }
     },
     // 获取最近的一个本地缓存
     getLastDraft (username, ccId, templateId) {
-        let localStorageLength = localStorage.length
+        const localStorageLength = localStorage.length
         // 动态生成正则表达式
         const regex = this.getKeyRegex(username, ccId, templateId)
-        for (let index = localStorageLength - 1; index >= 0 ; index--) {
-            let key = localStorage.key(index)
+        for (let index = localStorageLength - 1; index >= 0; index--) {
+            const key = localStorage.key(index)
             if (regex.test(key)) {
                 return localStorage[key]
             }
@@ -145,4 +145,4 @@ const draft = {
     }
 }
 
-export default draft
\ No newline at end of file
+export default draft
diff --git a/pipeline/blueflow/src/utils/formatPosition.js b/pipeline/blueflow/src/utils/formatPosition.js
index 5ffbb03715..d3625ab948 100644
--- a/pipeline/blueflow/src/utils/formatPosition.js
+++ b/pipeline/blueflow/src/utils/formatPosition.js
@@ -9,6 +9,8 @@
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 */
+import tools from '@/utils/tools.js'
+
 const gatewayShiftX = 210
 // 起始位置
 const startPointX = 40
@@ -75,17 +77,15 @@ let nowTier = -1
 // 用于计算线段比例
 let nextLineNodeY = 0
 
-import tools from '@/utils/tools.js'
-
 const formatPositionUtils = {
     formatPosition (oldLines, oldLocations) {
         lastLocations = oldLocations
         lines = oldLines
         overBorderLine = []
         // 分组信息
-        for (let line of lines) {
-            let sourceId = line.source.id
-            let targetId = line.target.id
+        for (const line of lines) {
+            const sourceId = line.source.id
+            const targetId = line.target.id
             if (group[sourceId]) {
                 group[sourceId].push(targetId)
             } else {
@@ -93,19 +93,17 @@ const formatPositionUtils = {
             }
         }
         // 循环旧节点
-        for (let location of oldLocations) {
-            let type = location['type']
+        for (const location of oldLocations) {
+            const type = location['type']
             if (type === 'startpoint') {
                 // 用于放置至最开始
                 lastPoint = location
                 nowId = location.id
-            }
-            else if (type === 'endpoint') {
+            } else if (type === 'endpoint') {
                 // 用于放置至最后
                 endPoint = location
-            }
-            else {
-                let locationId = location.id
+            } else {
+                const locationId = location.id
                 // 添加进入循环数组
                 newLocations[locationId] = location
                 // 获取一一对应的网关关系
@@ -113,24 +111,24 @@ const formatPositionUtils = {
                     gatewayCycleList[locationId] = {}
                     gatewayCycleExecute[locationId] = {}
                     // 递归获得分支或并行网关执行序列
-                    let [gatewayRecursionList] = this.recursionGateway(gatewayStack, locationId, oldLocations)
-                    for (let x in gatewayRecursionList) {
-                        for (let y in gatewayRecursionList[x]) {
-                            let nodeId = gatewayRecursionList[x][y]
+                    const [gatewayRecursionList] = this.recursionGateway(gatewayStack, locationId, oldLocations)
+                    for (const x in gatewayRecursionList) {
+                        for (const y in gatewayRecursionList[x]) {
+                            const nodeId = gatewayRecursionList[x][y]
                             gatewayCycleList[locationId][nodeId] = oldLocations.find(location => location.id === nodeId)
                         }
                         // 用于控制递归继续执行序列
                         // 需要减去最后的多余的结束节点数量
-                        gatewayCycleExecute[locationId][x] =  gatewayRecursionList[x].length - 1
+                        gatewayCycleExecute[locationId][x] = gatewayRecursionList[x].length - 1
                     }
                 }
             }
         }
         // 清除多余的locations中的相关节点
-        for (let x in gatewayCycleList){
-            for (let y in gatewayCycleList[x]) {
-                for (let z in gatewayCycleList[x][y]){
-                    let id = gatewayCycleList[x][y][z]
+        for (const x in gatewayCycleList) {
+            for (const y in gatewayCycleList[x]) {
+                for (const z in gatewayCycleList[x][y]) {
+                    const id = gatewayCycleList[x][y][z]
                     if (newLocations[id] === undefined) {
                         continue
                     }
@@ -141,7 +139,7 @@ const formatPositionUtils = {
         // 重新赋值节点位置
         locations = []
         // 先添加起始节点
-        let locationJson = tools.deepClone(lastPoint)
+        const locationJson = tools.deepClone(lastPoint)
         // 绘制开始节点
         locationJson['x'] = startPointX
         locationJson['y'] = startPointY
@@ -153,7 +151,7 @@ const formatPositionUtils = {
         // 结束节点最后绘制
         this.computeAndDrawNode(endPoint)
         // 需要重新赋值全局变量 防止第二次点击编排按钮时出现问题
-        const result = {'lines': lines, 'locations': locations, 'overBorderLine': overBorderLine}
+        const result = { 'lines': lines, 'locations': locations, 'overBorderLine': overBorderLine }
         this.initData()
         return result
     },
@@ -166,22 +164,22 @@ const formatPositionUtils = {
      */
     recursionGateway (gatewayStack, locationId, oldLocations, tier = 0) {
         // 全部分支递归分支数组
-        let gatewayRecursionList = []
+        const gatewayRecursionList = []
         // 获取网关的执行序列
-        let groupLocationList = group[locationId]
+        const groupLocationList = group[locationId]
         // 某一条分支的递归数组
         let recursionList = []
         // 当前id
         let findId = null
 
-        for (let locationIndex in groupLocationList) {
+        for (const locationIndex in groupLocationList) {
             gatewayStack.push(locationId)
             // 获得网关的第一个节点
             findId = groupLocationList[locationIndex]
             while (true) {
                 // 获取节点
-                let findLocation = oldLocations.find(location => location.id === findId)
-                let findType = findLocation['type']
+                const findLocation = oldLocations.find(location => location.id === findId)
+                const findType = findLocation['type']
                 if (findType === 'convergegateway') {
                     // 继续进行下一条分支 只有最后一次需要执行下面的逻辑
                     if (locationIndex + 1 !== groupLocationList.length) {
@@ -189,16 +187,14 @@ const formatPositionUtils = {
                         recursionList.push(findId)
                         break
                     }
-                }
-                else if (findType === 'parallelgateway' || findType === 'branchgateway') {
+                } else if (findType === 'parallelgateway' || findType === 'branchgateway') {
                     tier++
                     recursionList.push(findId)
                     // 进行递归 获取网关中最后节点
-                    let result = this.recursionGateway(gatewayStack, findId, oldLocations, tier)
+                    const result = this.recursionGateway(gatewayStack, findId, oldLocations, tier)
                     // 需要传递网关最后的节点
                     findId = result[1]
-                }
-                else {
+                } else {
                     recursionList.push(findId)
                 }
                 // 继续找下一个节点
@@ -216,24 +212,26 @@ const formatPositionUtils = {
      * @param {*} newLastNodeX 当前x值
      * @param {*} newLastNodeY 当前y值
      */
-    recursionData (newLocations, newLastNodeX = null , newLastNodeY = null) {
+    recursionData (newLocations, newLastNodeX = null, newLastNodeY = null) {
         // 循环执行节点
-        for (let i in newLocations) {
+        /* eslint-disable */
+        for (const i in newLocations) {
+        /* eslint-enable */
             // 某个节点的下一个执行序列
-            let lastList = group[nowId]
+            const lastList = group[nowId]
             // 出现undefined或空节点即可结束
             if (lastList === undefined || newLocations[lastList[0]] === undefined) {
                 break
             }
             // 上一个Id
-            let lastId = nowId
+            const lastId = nowId
             if (newLastNodeX === null) {
                 newLastNodeX = lastNodeX
             }
             if (newLastNodeY === null) {
                 newLastNodeY = lastNodeY
             }
-            let executeLength = lastList.length
+            const executeLength = lastList.length
             for (let executeNodeIndex = 0; executeNodeIndex < executeLength; executeNodeIndex++) {
                 nowId = lastList[executeNodeIndex]
                 let location = newLocations[nowId]
@@ -298,18 +296,18 @@ const formatPositionUtils = {
                 }
                 // 绘制汇聚网关
                 if (executeNodeIndex + 1 === executeLength && executeNodeIndex > 0) {
-                    let location = newLocations[gatewayGroup[lastId]]
+                    const location = newLocations[gatewayGroup[lastId]]
                     // 存储层级及最大高度
                     // 获得最大的X位置
                     const nowTierMaxWidth = convergegatewayMaxWidthTier[nowTier]
-                    if (nowTierMaxWidth){
+                    if (nowTierMaxWidth) {
                         convergegatewayMaxWidthTier[nowTier] = nowTierMaxWidth
                     } else {
                         convergegatewayMaxWidthTier[nowTier] = lastNodeX
                     }
                     const [resultNodeX] = this.computeAndDrawNode(location, executeLength, 0, convergegatewayMaxWidthTier[nowTier], newLastNodeY)
-                    if (nowTierMaxWidth){
-                        convergegatewayMaxWidthTier[nowTier] =  Math.max(resultNodeX, nowTierMaxWidth)
+                    if (nowTierMaxWidth) {
+                        convergegatewayMaxWidthTier[nowTier] = Math.max(resultNodeX, nowTierMaxWidth)
                     } else {
                         convergegatewayMaxWidthTier[nowTier] = resultNodeX
                     }
@@ -333,14 +331,14 @@ const formatPositionUtils = {
      * @param {*} gatewayIndex 节点所处网关节点的inex
      * @param {*} gatewayCycleExecuteLength 网关执行序列长度
      */
-    computeAndDrawNode (location, executeLength = null, executeNodeIndex = 0, newLastNodeX = null , newLastNodeY = null, gatewayIndex = 0, gatewayCycleExecuteLength = 0) {
+    computeAndDrawNode (location, executeLength = null, executeNodeIndex = 0, newLastNodeX = null, newLastNodeY = null, gatewayIndex = 0, gatewayCycleExecuteLength = 0) {
         if (location === undefined) {
             // 空节点不需要继续
             return
         }
         // 拷贝一份location用于替换x,y值
-        let locationJson = tools.deepClone(location)
-        let type = location['type']
+        const locationJson = tools.deepClone(location)
+        const type = location['type']
         if (type === 'tasknode' || type === 'subflow') {
             // 是否是在网关中的节点
             let gatewayFlag = null
@@ -352,15 +350,15 @@ const formatPositionUtils = {
             }
             // 在网关当中
             if (gatewayFlag) {
-                let nodeY = newLastNodeY - deviationY
+                const nodeY = newLastNodeY - deviationY
                 newLastNodeX += shiftX * 1.2
                 locationJson['x'] = newLastNodeX
                 locationJson['y'] = nodeY
                 locations.push(locationJson)
                 gatewayShiftYList.push(nodeY + deviationY)
 
-                let sourceLine = lines.find(line => line.target.id === location.id)
-                let targetLine = lines.find(line => line.source.id === location.id)
+                const sourceLine = lines.find(line => line.target.id === location.id)
+                const targetLine = lines.find(line => line.source.id === location.id)
                 // 入线模式尾箭头为左入
                 sourceLine.target.arrow = 'Left'
                 if (executeNodeIndex === 0) {
@@ -373,7 +371,7 @@ const formatPositionUtils = {
                         // 网关第N行（N>2）第一个节点
                         sourceLine.source.arrow = 'Bottom'
                         targetLine.source.arrow = 'Right'
-                        if ( gatewayCycleExecuteLength === 1) {
+                        if (gatewayCycleExecuteLength === 1) {
                             // 只有一个节点 连线需要接到汇聚网关下方
                             targetLine.target.arrow = 'Bottom'
                         } else {
@@ -422,13 +420,13 @@ const formatPositionUtils = {
             // 添加网关信号 用于重置Y轴值
             resetGatewayList.push(true)
             // 修改输出的箭头方向
-            let targetLine = lines.find(line => line.target.id === location.id)
+            const targetLine = lines.find(line => line.target.id === location.id)
             targetLine.target.arrow = 'Left'
             if (executeNodeIndex === 0) {
                 targetLine.source.arrow = 'Right'
             } else {
                 // 上一个节点的type
-                const {type: lastNodeType} = this.getPreviousPoint(location.id)
+                const { type: lastNodeType } = this.getPreviousPoint(location.id)
                 if (lastNodeType === 'parallelgateway' || lastNodeType === 'branchgateway') {
                     targetLine.source.arrow = 'Bottom'
                 } else {
@@ -470,7 +468,7 @@ const formatPositionUtils = {
                     newLastNodeX = lastNodeX
                     isStartPoint = false
                     const line = lines.find(line => line.target.id === location.id)
-                    this.addOverBorderLine({'source': line.source.id, 'target': line.target.id})
+                    this.addOverBorderLine({ 'source': line.source.id, 'target': line.target.id })
                 } else {
                     newLastNodeX += shiftX * 1.5
                     locationJson['x'] = newLastNodeX
@@ -486,9 +484,9 @@ const formatPositionUtils = {
                     locationJson['x'] = lastNodeX
                     isStartPoint = false
                     const line = lines.find(line => line.target.id === location.id)
-                    this.addOverBorderLine({'source': line.source.id, 'target': line.target.id})
+                    this.addOverBorderLine({ 'source': line.source.id, 'target': line.target.id })
                 } else {
-                    lastNodeX +=  shiftX / 1.2
+                    lastNodeX += shiftX / 1.2
                     locationJson['x'] = lastNodeX
                 }
                 locationJson['y'] = lastNodeY
@@ -511,14 +509,13 @@ const formatPositionUtils = {
             delete convergegatewayMaxWidthTier[nowTier]
             nowTier--
             return [lastNodeX, null]
-
         } else if (type === 'convergegateway') {
             resetGatewayList.pop()
             // 更换分支网关连接线段箭头
             const sourceLine = lines.find(line => line.target.id === location.id)
             const targetLine = lines.find(line => line.source.id === location.id)
             targetLine.source.arrow = 'Right'
-            if (lastLocations.find(location => sourceLine.source.id === location.id).type === 'convergegateway'){
+            if (lastLocations.find(location => sourceLine.source.id === location.id).type === 'convergegateway') {
                 // 设置连接分支网关的线在左部
                 sourceLine.target.arrow = 'Left'
             }
@@ -541,17 +538,16 @@ const formatPositionUtils = {
             } else {
                 return [lastNodeX, lastNodeY]
             }
-        }
-        else if (type === 'endpoint') {
+        } else if (type === 'endpoint') {
             // 需要切换箭头
-            let line = lines.find(line => line.target.id === location.id)
+            const line = lines.find(line => line.target.id === location.id)
             line.target.arrow = 'Left'
             line.source.arrow = 'Right'
             if (isStartPoint) {
                 lastNodeX = startPointX
                 isStartPoint = false
                 const line = lines.find(line => line.target.id === location.id)
-                this.addOverBorderLine({'source': line.source.id, 'target': line.target.id})
+                this.addOverBorderLine({ 'source': line.source.id, 'target': line.target.id })
             } else if (lastPointType === 'tasknode' || lastPointType === 'subflow' || lastPointType === 'startpoint') {
                 // 结束节点前是个标准插件节点需要增加1.5倍距离
                 lastNodeX += shiftX * 1.5
@@ -562,7 +558,6 @@ const formatPositionUtils = {
             locationJson['x'] = lastNodeX
             locationJson['y'] = lastNodeY
             locations.push(locationJson)
-            return
         }
     },
     isOverBorder () {
@@ -629,12 +624,12 @@ const formatPositionUtils = {
     },
     isLocationAllNode (locations) {
         const typeList = ['startpoint', 'endpoint', 'tasknode', 'subflow']
-        return locations.every((location) =>{
+        return locations.every((location) => {
             return typeList.includes(location.type)
         })
     },
-    addOverBorderLine ({source, target}) {
-        overBorderLine.push({'source': source, 'target': target ,'midpoint': Number(gatewayShiftY / nextLineNodeY).toFixed(2)})
+    addOverBorderLine ({ source, target }) {
+        overBorderLine.push({ 'source': source, 'target': target, 'midpoint': Number(gatewayShiftY / nextLineNodeY).toFixed(2) })
         gatewayShiftY = 0
     }
 }
diff --git a/pipeline/blueflow/src/utils/nodeFilter.js b/pipeline/blueflow/src/utils/nodeFilter.js
index 4007c9df0d..a482e510c8 100644
--- a/pipeline/blueflow/src/utils/nodeFilter.js
+++ b/pipeline/blueflow/src/utils/nodeFilter.js
@@ -42,20 +42,22 @@ const nodeFilter = {
             case 'activities':
             case 'flows':
             case 'gateways':
-                for (let key in primaryData) {
+                for (const key in primaryData) {
                     const newKey = this.getNewValidId(key)
                     newData[newKey] = primaryData[key]
                     keysOfIdRelated.forEach(item => {
-                        let val = newData[newKey][item]
-                        if (val != undefined && val !== '') {
+                        const val = newData[newKey][item]
+                        if (val !== undefined && val !== '') {
                             if (typeof val === 'string') {
                                 newData[newKey][item] = this.getNewValidId(val)
                             } else if (Array.isArray(val)) {
-                                newData[newKey][item] = val.map(v => {return this.getNewValidId(v)})
+                                newData[newKey][item] = val.map(v => {
+                                    return this.getNewValidId(v)
+                                })
                             }
                             if (item === 'conditions') {
                                 const newVal = {}
-                                for (let conditionId in val) {
+                                for (const conditionId in val) {
                                     const newConditionId = this.getNewValidId(conditionId)
                                     newVal[newConditionId] = val[conditionId]
                                     newVal[newConditionId].tag = newVal[newConditionId].tag.split('_').map((id, index) => {
@@ -68,18 +70,16 @@ const nodeFilter = {
                     })
                 }
                 return newData
-                break
             case 'end_event':
             case 'start_event':
                 newData = Object.assign({}, primaryData)
                 keysOfIdRelated.forEach(item => {
-                    let val = newData[item]
-                    if (val != undefined && val !== '') {
+                    const val = newData[item]
+                    if (val !== undefined && val !== '') {
                         newData[item] = this.getNewValidId(val)
                     }
                 })
                 return newData
-                break
             case 'line':
                 newData = [...primaryData]
                 newData.forEach((item, index) => {
@@ -88,19 +88,16 @@ const nodeFilter = {
                     item.target.id = this.getNewValidId(item.target.id)
                 })
                 return newData
-                break
             case 'location':
                 newData = [...primaryData]
                 newData.forEach((item) => {
                     item.id = this.getNewValidId(item.id)
                 })
                 return newData
-                break
             default:
                 return primaryData
-                break
         }
     }
 }
 
-export default nodeFilter
\ No newline at end of file
+export default nodeFilter
diff --git a/pipeline/blueflow/src/utils/tools.js b/pipeline/blueflow/src/utils/tools.js
index dc9c9c6e11..ae93541395 100644
--- a/pipeline/blueflow/src/utils/tools.js
+++ b/pipeline/blueflow/src/utils/tools.js
@@ -22,8 +22,8 @@ const tools = {
         let timer
 
         return function () {
-            let context = this
-            let args = arguments
+            const context = this
+            const args = arguments
 
             clearTimeout(timer)
 
@@ -54,7 +54,6 @@ const tools = {
                     last = now
                     fn.apply(context, args)
                 }, threshhold)
-
             } else {
                 last = now
                 fn.apply(context, args)
diff --git a/pipeline/blueflow/src/utils/uuid.js b/pipeline/blueflow/src/utils/uuid.js
index 929f99396c..3b660db022 100644
--- a/pipeline/blueflow/src/utils/uuid.js
+++ b/pipeline/blueflow/src/utils/uuid.js
@@ -21,4 +21,4 @@ export function uuid () {
         id += random4()
     }
     return id
-}
\ No newline at end of file
+}
diff --git a/pipeline/blueflow/src/utils/validatePipeline.js b/pipeline/blueflow/src/utils/validatePipeline.js
index 9cfc990154..2375cb0f4d 100644
--- a/pipeline/blueflow/src/utils/validatePipeline.js
+++ b/pipeline/blueflow/src/utils/validatePipeline.js
@@ -11,17 +11,16 @@
 */
 import { NODE_DICT } from '@/constants/index.js'
 
-
 const NODE_RULE = {
-    "startpoint": {
+    'startpoint': {
         min_in: 0,
         max_in: 0,
         min_out: 1,
         max_out: 1,
-        allowed_out: ["tasknode", "branchgateway", "parallelgateway", "endpoint", "subflow"],
+        allowed_out: ['tasknode', 'branchgateway', 'parallelgateway', 'endpoint', 'subflow'],
         unique: true
     },
-    "endpoint": {
+    'endpoint': {
         min_in: 1,
         max_in: 1,
         min_out: 0,
@@ -29,44 +28,44 @@ const NODE_RULE = {
         allowed_out: [],
         unique: true
     },
-    "tasknode": {
+    'tasknode': {
         min_in: 1,
         max_in: 1,
         min_out: 1,
         max_out: 1,
-        allowed_out: ["tasknode", "subflow", "branchgateway", "parallelgateway", "convergegateway", "endpoint"],
+        allowed_out: ['tasknode', 'subflow', 'branchgateway', 'parallelgateway', 'convergegateway', 'endpoint'],
         unique: false
     },
-    "branchgateway": {
+    'branchgateway': {
         min_in: 1,
         max_in: 1,
         min_out: 2,
         max_out: 1000,
-        allowed_out: ["tasknode", "subflow", "branchgateway", "parallelgateway", "convergegateway"],
+        allowed_out: ['tasknode', 'subflow', 'branchgateway', 'parallelgateway', 'convergegateway'],
         unique: false
     },
-    "parallelgateway": {
+    'parallelgateway': {
         min_in: 1,
         max_in: 1,
         min_out: 2,
         max_out: 1000,
-        allowed_out: ["tasknode", "subflow", "branchgateway", "parallelgateway", "convergegateway"],
+        allowed_out: ['tasknode', 'subflow', 'branchgateway', 'parallelgateway', 'convergegateway'],
         unique: false
     },
-    "convergegateway": {
+    'convergegateway': {
         min_in: 2,
         max_in: 1000,
         min_out: 1,
         max_out: 1,
-        allowed_out: ["tasknode", "subflow", "branchgateway", "parallelgateway", "convergegateway", "endpoint"],
+        allowed_out: ['tasknode', 'subflow', 'branchgateway', 'parallelgateway', 'convergegateway', 'endpoint'],
         unique: false
     },
-    "subflow": {
+    'subflow': {
         min_in: 1,
         max_in: 1,
         min_out: 1,
         max_out: 1,
-        allowed_out: ["tasknode", "subflow", "branchgateway", "parallelgateway", "endpoint", "convergegateway"],
+        allowed_out: ['tasknode', 'subflow', 'branchgateway', 'parallelgateway', 'endpoint', 'convergegateway'],
         unique: false
     }
 }
@@ -94,19 +93,19 @@ const validatePipeline = {
         let isLoop = false
 
         if (sourceRule.max_out === 0) {
-            const i18n_text = gettext("只能添加输入连线")
+            const i18n_text = gettext('只能添加输入连线')
             const message = `${NODE_DICT[sourceNode.type]}${i18n_text}`
             return this.getMessage(false, message)
         }
 
         if (targetRule.max_in === 0) {
-            const i18n_text = gettext("只能添加输出连线")
+            const i18n_text = gettext('只能添加输出连线')
             const message = `${NODE_DICT[targetNode.type]}${i18n_text}`
             return this.getMessage(false, message)
         }
 
         if (sourceRule.allowed_out.indexOf(targetNode.type) === -1) {
-            const i18n_text = gettext("不能连接")
+            const i18n_text = gettext('不能连接')
             const message = `${NODE_DICT[sourceNode.type]}${i18n_text}${NODE_DICT[targetNode.type]}`
             return this.getMessage(false, message)
         }
@@ -126,22 +125,22 @@ const validatePipeline = {
         })
 
         if (isLoop) {
-            const message = gettext("相同节点不能回连")
+            const message = gettext('相同节点不能回连')
             return this.getMessage(false, message)
         }
 
         if (isSameLine) {
-            const message = gettext("重复添加连线")
+            const message = gettext('重复添加连线')
             return this.getMessage(false, message)
         } else {
-            const i18n_text1 = gettext("已达到")
+            const i18n_text1 = gettext('已达到')
             if (sourceLinesLinked >= sourceRule.max_out) {
-                const i18n_text2 = gettext("最大输出连线条数")
+                const i18n_text2 = gettext('最大输出连线条数')
                 const message = `${i18n_text1}${NODE_DICT[sourceNode.type]}${i18n_text2}`
                 return this.getMessage(false, message)
             }
             if (targetLinesLinked >= targetRule.max_in) {
-                const i18n_text2 = gettext("最大输入连线条数")
+                const i18n_text2 = gettext('最大输入连线条数')
                 const message = `${i18n_text1}${NODE_DICT[targetNode.type]}${i18n_text2}`
                 return this.getMessage(false, message)
             }
@@ -151,9 +150,11 @@ const validatePipeline = {
     isLocationValid (loc, data) {
         const rule = NODE_RULE[loc.type]
         if (rule.unique) { // 节点唯一性
-            const isLocationOverMount = data.some(item => { return item.type === loc.type && item.id !== loc.id})
+            const isLocationOverMount = data.some(item => {
+                return item.type === loc.type && item.id !== loc.id
+            })
             if (isLocationOverMount) {
-                const i18n_text = gettext("在模板中只能添加一个")
+                const i18n_text = gettext('在模板中只能添加一个')
                 const message = `${NODE_DICT[loc.type]}${i18n_text}`
                 return this.getMessage(false, message)
             }
@@ -185,21 +186,21 @@ const validatePipeline = {
                 subflow += 1
             }
             data.lines.forEach(line => {
-                if (line.source.id == loc.id) {
+                if (line.source.id === loc.id) {
                     targetLinesLinked += 1
                 }
                 if (line.target.id === loc.id) {
                     sourceLinesLinked += 1
                 }
             })
-            const i18n_text1 = gettext("至少需要")
+            const i18n_text1 = gettext('至少需要')
             if (sourceLinesLinked < rule.min_in) {
-                const i18n_text2 = gettext("条输入连线")
+                const i18n_text2 = gettext('条输入连线')
                 message = `${name}${i18n_text1}${rule.min_in}${i18n_text2}`
                 return false
             }
             if (targetLinesLinked < rule.min_out) {
-                const i18n_text2 = gettext("条输出连线")
+                const i18n_text2 = gettext('条输出连线')
                 message = `${name}${i18n_text1}${rule.min_out}${i18n_text2}`
                 return false
             }
@@ -211,12 +212,12 @@ const validatePipeline = {
         }
 
         if ((tasknode + subflow) === 0) {
-            message = gettext("请添加任务节点")
+            message = gettext('请添加任务节点')
             return this.getMessage(false, message)
         }
 
         if (branchAndParallelGateways !== convergegateways) {
-            message = gettext("并行网关、分支网关个数和汇聚网关个数必须一致，并且必须配对使用")
+            message = gettext('并行网关、分支网关个数和汇聚网关个数必须一致，并且必须配对使用')
             return this.getMessage(false, message)
         }