imporvement: 页面体验优化 (TencentBlueKing#65)

pagezz-canway · Apr 11, 2019 · 8c484d4 · 8c484d4
1 parent de464e4
commit 8c484d4
Show file tree

Hide file tree

Showing 12 changed files with 209 additions and 219 deletions.
diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/ConfigBar.vue
@@ -45,6 +45,13 @@
                 @click="onSaveTemplate">
                 {{ i18n.save }}
             </bk-button>
+            <bk-button
+                type="primary"
+                class="task-btn"
+                :loading="createTaskSaving"
+                @click="onSaveTemplate(true)">
+                {{ isSaveAndCreate ? i18n.saveTplAndcreateTask : i18n.addTask }}
+            </bk-button>
             <router-link class="bk-button bk-button-default" :to="getHomeUrl()">{{ i18n.return }}</router-link>
         </div>
     </div>
@@ -60,7 +67,10 @@ export default {
     components: {
         BaseInput
     },
-    props: ['name', 'cc_id', 'common', 'templateSaving'],
+    props: [
+        'name', 'cc_id', 'template_id', 'common', 'type',
+        'templateSaving', 'createTaskSaving', 'isTemplateDataChanged'
+    ],
     data () {
         return {
             i18n: {
@@ -87,19 +97,24 @@ export default {
     computed: {
         templateTitle () {
             return this.$route.query.template_id === undefined ? this.i18n.NewProcess : this.i18n.editProcess
+        },
+        isSaveAndCreate () {
+            return this.type === 'new' || this.isTemplateDataChanged
         }
     },
     methods: {
         onInputName (val) {
             this.$emit('onChangeName', val)
         },
-        onSaveTemplate () {
+        onSaveTemplate (saveCreateBtn = false) {
+            if (saveCreateBtn && !this.isSaveAndCreate) {
+                this.$router.push(this.getTaskUrl())
+                return
+            }
             this.$validator.validateAll().then((result) => {
                 this.tName = this.tName.trim()
-                this.$emit('onChangeName', this.tName)
-                // 替换之前进行替换空格
-                if (!result) return
-                this.$emit('onSaveTemplate')
+                this.setTemplateName(this.tName)
+                this.$emit('onSaveTemplate', saveCreateBtn)
             })
         },
         getHomeUrl () {
@@ -109,6 +124,13 @@ export default {
             }
             return url
         },
+        getTaskUrl () {
+            let url = `/template/newtask/${this.cc_id}/selectnode/?template_id=${this.template_id}`
+            if (this.common) {
+                url += '&common=1'
+            }
+            return url
+        },
         onNameEditing () {
             this.isShowMode = false
             this.$nextTick(()=>{

diff --git a/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue b/pipeline/blueflow/src/components/common/PipelineCanvas/index.vue
@@ -19,6 +19,9 @@
             :name="name"
             :cc_id="cc_id"
             :common="common"
+            :template_id="template_id"
+            :type="type"
+            :isTemplateDataChanged="isTemplateDataChanged"
             :templateSaving="templateSaving"
             @onChangeName="onChangeName"
             @onSaveTemplate="onSaveTemplate">
@@ -129,17 +132,30 @@ export default {
             type: Boolean
         },
         subAtomListLoading: {
-            type: Boolean
+            type: Boolean,
+            default: true
+        },
+        type: {
+            type: String,
+            default: ''
         },
         templateSaving: {
-            type: Boolean
+            type: Boolean,
+            default: false
+        },
+        createTaskSaving: {
+            type: Boolean,
+            default: false
         },
         atomTypeList: {
             type: Object,
             required: false
         },
         searchAtomResult: {
-            type: Array
+            type: Array,
+            default () {
+                return []
+            }
         },
         canvasData: {
             type: Object,
@@ -522,7 +538,7 @@ export default {
         onChangeName (name) {
             this.$emit('onChangeName', name)
         },
-        onSaveTemplate () {
+        onSaveTemplate (saveCreateBtn) {
             const validateMessage = validatePipeline.isDataValid(this.canvasData)
             if (!validateMessage.result) {
                 this.$bkMessage({
@@ -531,7 +547,7 @@ export default {
                 })
                 return false
             }
-            this.$emit('onSaveTemplate')
+            this.$emit('onSaveTemplate', saveCreateBtn)
         },
         onNewDraft (message) {
             this.$emit('onNewDraft', message)

diff --git a/pipeline/blueflow/src/components/common/RenderForm/FormGroup.vue b/pipeline/blueflow/src/components/common/RenderForm/FormGroup.vue
@@ -14,7 +14,14 @@
         <div v-if="!hook && option.showGroup && scheme.attrs.name" class="rf-group-name">
             <h3 class="name">{{scheme.attrs.name}}</h3>
             <div v-if="scheme.attrs.desc" class="rf-group-desc">
-                <i v-bktooltips.left="scheme.attrs.desc" class="common-icon-dark-circle-warning"></i>
+                <i
+                    v-bktooltips="{
+                        content: scheme.attrs.desc,
+                        placements: ['right'],
+                        zIndex: 2002
+                    }"
+                    class="bk-icon icon-info-circle">
+                </i>
             </div>
         </div>
         <div v-if="hook" class="rf-form-item rf-has-hook">

diff --git a/pipeline/blueflow/src/components/common/RenderForm/FormItem.vue b/pipeline/blueflow/src/components/common/RenderForm/FormItem.vue
@@ -12,10 +12,17 @@
 <template>
     <div :class="['rf-form-item', 'clearfix', {'rf-has-hook': showHook}]" v-show="showForm">
         <div v-if="!hook && option.showGroup && scheme.attrs.name" class="rf-group-name">
-            <h3 class="name">{{scheme.attrs.name}}</h3>
-            <div v-if="scheme.attrs.desc" class="rf-group-desc">
-                <i v-bktooltips.left="scheme.attrs.desc" class="common-icon-dark-circle-warning"></i>
-            </div>
+            <span class="name">{{scheme.attrs.name}}</span>
+            <span v-if="scheme.attrs.desc" class="rf-group-desc">
+                <i
+                    v-bktooltips="{
+                        content: scheme.attrs.desc,
+                        placements: ['right'],
+                        zIndex: 2002
+                    }"
+                    class="bk-icon icon-info-circle">
+                </i>
+            </span>
         </div>
         <label
             v-if="option.showLabel"
@@ -45,7 +52,8 @@
                 v-bktooltips="{
                     content: hook ? i18n.hooked : i18n.cancelHook,
                     placements: ['left'],
-                    customClass: 'offset-left-tooltip'
+                    customClass: 'offset-left-tooltip',
+                    zIndex: 2002
                 }"
                 :isChecked="hook"
                 @checkCallback="onHookForm">

diff --git a/pipeline/blueflow/src/components/common/RenderForm/RenderForm.vue b/pipeline/blueflow/src/components/common/RenderForm/RenderForm.vue
@@ -236,5 +236,37 @@ export default {
     }
 }
 </script>
-
-
+<style lang="scss" scoped>
+.render-form {
+    /deep/ .rf-group-name {
+        margin-bottom: 12px;
+        .name {
+            display: inline-block;
+            margin: 0;
+            margin-bottom: -1px;
+            padding: 5px 14px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #313238;
+        }
+        &:before {
+            content: '';
+            display: inline-block;
+            position: relative;
+            top: 4px;
+            width: 2px;
+            height: 20px;
+            background: #a3c5fd;
+        }
+        .rf-group-desc {
+            color: #c4c6cc;
+            font-size: 16px;
+            cursor: pointer;
+            &:hover {
+                color: #f4aa1a;
+            }
+        }
+    }
+    
+}
+</style>
diff --git a/pipeline/blueflow/src/components/common/RenderForm/formMixins.js b/pipeline/blueflow/src/components/common/RenderForm/formMixins.js
@@ -42,7 +42,8 @@ const COMMON_ATTRS = {
         default: true
     },
     formMode: {
-        type: Boolean
+        type: Boolean,
+        default: true
     },
     parentValue: {
         type: [String, Number, Boolean, Array, Object]

diff --git a/pipeline/blueflow/src/pages/task/TaskExecute/ModifyParams.vue b/pipeline/blueflow/src/pages/task/TaskExecute/ModifyParams.vue
@@ -19,7 +19,8 @@
                 v-if="!isParamsEmpty"
                 ref="TaskParamEdit"
                 :constants="constants"
-                :editable="paramsCanBeModify">
+                :editable="paramsCanBeModify"
+                @onChangeConfigLoading="onChangeConfigLoading">
             </TaskParamEdit>
             <NoData v-else></NoData>
         </div>
@@ -45,7 +46,8 @@ export default {
         return {
             bkMessageInstance: null,
             constants: [],
-            loading: false,
+            cntLoading: true, // 全局变量加载
+            configLoading: true, // 变量配置项加载
             pending: false, // 提交修改中
             i18n: {
                 change_params: gettext("修改全局参数"),
@@ -56,6 +58,9 @@ export default {
     computed: {
         isParamsEmpty () {
             return !Object.keys(this.constants).length
+        },
+        loading () {
+            return this.isParamsEmpty ? this.cntLoading : (this.cntLoading || this.configLoading)
         }
     },
     created () {
@@ -67,7 +72,7 @@ export default {
             'instanceModifyParams'
         ]),
         async getTaskData () {
-            this.loading = true
+            this.cntLoading = true
             try {
                 const instanceData = await this.getTaskInstanceData(this.instance_id)
                 const pipelineData = JSON.parse(instanceData.pipeline_tree)
@@ -82,7 +87,7 @@ export default {
             } catch (e) {
                 errorHandler(e, this)
             } finally {
-                this.loading = false
+                this.cntLoading = false
             }
         },
         async onModifyParams () {
@@ -121,6 +126,9 @@ export default {
             } finally {
                 this.pending = false
             }
+        },
+        onChangeConfigLoading (val) {
+            this.configLoading = val
         }
     }
 }

diff --git a/pipeline/blueflow/src/pages/task/TaskParamEdit.vue b/pipeline/blueflow/src/pages/task/TaskParamEdit.vue
@@ -196,34 +196,6 @@ export default {
 @import '@/scss/config.scss';
     .task-param-wrapper {
         /deep/ .render-form {
-            .rf-group-name {
-                margin-bottom: 12px;
-                h3 {
-                    display: inline-block;
-                    margin: 0;
-                    margin-bottom: -1px;
-                    padding: 5px 14px;
-                    font-size: 14px;
-                    font-weight: 600;
-                    color: #313238;
-                }
-                &:before {
-                    content: '';
-                    display: inline-block;
-                    position: relative;
-                    top: 4px;
-                    width: 2px;
-                    height: 20px;
-                    background: #A3C5FD;
-                }
-            }
-            .rf-group-desc {
-                position: absolute;
-                right: 0;
-                top: 10px;
-                color: $yellowBg;
-                font-size: 14px;
-            }
             .form-item {
                 margin-bottom: 20px;
             }

diff --git a/pipeline/blueflow/src/pages/template/TemplateEdit/NodeConfig.vue b/pipeline/blueflow/src/pages/template/TemplateEdit/NodeConfig.vue
@@ -406,13 +406,13 @@ export default {
         this.initData()
     },
     mounted () {
-        window.addEventListener('click', this.handleNodeConfigPanelShow, false)
+        window.addEventListener('click', this.handleNodeConfigPanelShow, true)
         if (this.errorCouldBeIgnored) {
             this.isDisable = true
         }
     },
     beforeDestroy (){
-        window.removeEventListener('click', this.handleNodeConfigPanelShow, false)
+        window.removeEventListener('click', this.handleNodeConfigPanelShow, true)
     },
     watch: {
         idOfNodeInConfigPanel (val) {
@@ -706,7 +706,7 @@ export default {
             return false
         },
         /**
-         * 处理节点配置面板和全局变量面板之外的点击时间
+         * 处理节点配置面板和全局变量面板之外的点击事件
          */
         handleNodeConfigPanelShow (e) {
             if (!this.isNodeConfigPanelShow || this.isReuseVarDialogShow) {