[Improvement]Optimize the popover box title, create and edit instances are not cleared

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue

@@ -18,7 +18,7 @@
   <m-conditions>
     <template slot="search-group">
       <div class="list">
-        <el-button type="primary" size="small" @click="_ckQuery" icon="el-icon-search"></el-button>
+        <el-button size="mini" @click="_ckQuery" icon="el-icon-search"></el-button>
       </div>
       <div class="list">
         <el-date-picker

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue

@@ -453,7 +453,6 @@
       _arrDelChange (v) {
         let arr = []
         arr = _.map(v, 'id')
-        console.log(arr)
         this.strDelete = _.join(arr, ',')
       },
       _batchDelete () {

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 <template>
-  <m-popup ref="popup" :nameText="item ? $t('Edit') : $t('Create Project')" :ok-text="item ? $t('Edit') : $t('Submit')"
+  <m-popover ref="popover" :nameText="item ? $t('Edit') : $t('Create Project')" :ok-text="item ? $t('Edit') : $t('Submit')"
            @close="_close" @ok="_ok">
     <template slot="content">
       <div class="projects-create-model">
@@ -44,13 +44,13 @@
         </m-list-box-f>
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
@@ -81,7 +81,7 @@
           param.projectId = this.item.id
         }
 
-        this.$refs.popup.spinnerLoading = true
+        this.$refs.popover.spinnerLoading = true
 
         this.store.dispatch(`projects/${this.item ? 'updateProjects' : 'createProjects'}`, param).then(res => {
           this.$emit('_onUpdate')
@@ -90,12 +90,10 @@
             type: 'success',
             offset: 70
           })
-          setTimeout(() => {
-            this.$refs.popup.spinnerLoading = false
-          }, 800)
+          this.$refs.popover.spinnerLoading = false
         }).catch(e => {
           this.$message.error(e.msg || '')
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         })
       },
       _close () {
@@ -118,6 +116,6 @@
     },
     mounted () {
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue

@@ -21,6 +21,8 @@
         <template slot="button-group">
           <el-button size="mini" @click="_create('')">{{ $t('Create Project') }}</el-button>
           <el-dialog
+            :title="item ? $t('Edit') : $t('Create Project')"
+            v-if="createProjectDialog"
             :visible.sync="createProjectDialog"
             width="auto">
             <m-create-project :item="item" @_onUpdate="_onUpdate" @close="_close"></m-create-project>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/_source/createQueue.vue

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 <template>
-  <m-popup
-          ref="popup"
+  <m-popover
+          ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit queue') : $t('Create queue')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -50,13 +49,13 @@
 
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
@@ -90,17 +89,17 @@
           this.$emit('onUpdate')
           this.$message.success(res.msg)
           setTimeout(() => {
-            this.$refs.popup.spinnerLoading = false
+            this.$refs.popover.spinnerLoading = false
           }, 800)
         }
 
         let $catch = (e) => {
           this.$message.error(e.msg || '')
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         }
 
         if (this.item) {
-          this.$refs.popup.spinnerLoading = true
+          this.$refs.popover.spinnerLoading = true
           this.store.dispatch('security/updateQueueQ', param).then(res => {
             $then(res)
           }).catch(e => {
@@ -108,7 +107,7 @@
           })
         } else {
           this._verifyName(param).then(() => {
-            this.$refs.popup.spinnerLoading = true
+            this.$refs.popover.spinnerLoading = true
             this.store.dispatch('security/createQueueQ', param).then(res => {
               $then(res)
             }).catch(e => {
@@ -154,6 +153,6 @@
     mounted () {
 
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/queue/index.vue

@@ -21,6 +21,8 @@
         <template slot="button-group" v-if="isADMIN">
           <el-button size="mini" @click="_create('')">{{$t('Create queue')}}</el-button>
           <el-dialog
+            :title="item ? $t('Edit queue') : $t('Create queue')"
+            :v-if="createQueueDialog"
             :visible.sync="createQueueDialog"
             width="auto">
             <m-create-queue :item="item" @onUpdate="onUpdate" @close="close"></m-create-queue>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/_source/createTenement.vue

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 <template>
-  <m-popup
-          ref="popup"
+  <m-popover
+          ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit Tenant') : $t('Create Tenant')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -62,13 +61,13 @@
         </m-list-box-f>
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
   export default {
     name: 'create-tenement',
@@ -141,16 +140,16 @@
         if (this.item) {
           param.id = this.item.id
         }
-        this.$refs.popup.spinnerLoading = true
+        this.$refs.popover.spinnerLoading = true
         this.store.dispatch(`security/${this.item ? 'updateQueue' : 'createQueue'}`, param).then(res => {
           this.$emit('onUpdate')
           this.$message.success(res.msg)
           setTimeout(() => {
-            this.$refs.popup.spinnerLoading = false
+            this.$refs.popover.spinnerLoading = false
           }, 800)
         }).catch(e => {
           this.$message.error(e.msg || '')
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         })
       },
       close () {
@@ -172,6 +171,6 @@
     },
     mounted () {
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/tenement/index.vue

@@ -21,6 +21,8 @@
         <template slot="button-group" v-if="isADMIN">
           <el-button size="mini" @click="_create('')">{{$t('Create Tenant')}}</el-button>
           <el-dialog
+            :title="item ? $t('Edit Tenant') : $t('Create Tenant')"
+            v-if="createTenementDialog"
             :visible.sync="createTenementDialog"
             width="auto">
             <m-create-tenement :item="item" @onUpdate="onUpdate" @close="close"></m-create-tenement>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/createUser.vue

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 <template>
-  <m-popup
-          ref="popup"
+  <m-popover
+          ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit User') : $t('Create User')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -30,6 +29,7 @@
                     type="input"
                     v-model="userName"
                     maxlength="60"
+                    size="small"
                     :placeholder="$t('Please enter user name')">
             </el-input>
           </template>
@@ -40,6 +40,7 @@
             <el-input
                     type="password"
                     v-model="userPassword"
+                    size="small"
                     :placeholder="$t('Please enter your password')">
             </el-input>
           </template>
@@ -80,6 +81,7 @@
             <el-input
                     type="input"
                     v-model="email"
+                    size="small"
                     :placeholder="$t('Please enter email')">
             </el-input>
           </template>
@@ -90,6 +92,7 @@
             <el-input
                     type="input"
                     v-model="phone"
+                    size="small"
                     :placeholder="$t('Please enter phone number')">
             </el-input>
           </template>
@@ -105,14 +108,14 @@
         </m-list-box-f>
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
   import router from '@/conf/home/router'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
@@ -243,7 +246,7 @@
         })
       },
       _submit () {
-        this.$refs.popup.spinnerLoading = true
+        this.$refs.popover.spinnerLoading = true
 
         let queueCode = ''
         // get queue code
@@ -266,13 +269,13 @@
 
         this.store.dispatch(`security/${this.item ? 'updateUser' : 'createUser'}`, param).then(res => {
           setTimeout(() => {
-            this.$refs.popup.spinnerLoading = false
+            this.$refs.popover.spinnerLoading = false
           }, 800)
           this.$emit('onUpdate', param)
           this.$message.success(res.msg)
         }).catch(e => {
           this.$message.error(e.msg || '')
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         })
       },
       close () {
@@ -315,6 +318,6 @@
     mounted () {
 
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/_source/list.vue

@@ -99,6 +99,7 @@
     </el-dialog>
 
     <el-dialog
+      v-if="resourceDialog"
       :visible.sync="resourceDialog"
       width="auto">
       <m-resource :resourceData="resourceData" @onUpdateAuthResource="onUpdateAuthResource" @closeAuthResource="closeAuthResource"></m-resource>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/users/index.vue

@@ -21,6 +21,8 @@
         <template slot="button-group" v-if="userList.length">
           <el-button size="mini" @click="_create('')">{{$t('Create User')}}</el-button>
           <el-dialog
+            :title="item ? $t('Edit User') : $t('Create User')"
+            v-if="createUserDialog"
             :visible.sync="createUserDialog"
             width="auto">
             <m-create-user :item="item" @onUpdate="onUpdate" @close="close"></m-create-user>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/_source/createWarning.vue

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 <template>
-  <m-popup
-          ref="popup"
+  <m-popover
+          ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit alarm group') : $t('Create alarm group')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -61,13 +60,13 @@
         </m-list-box-f>
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import _ from 'lodash'
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
@@ -121,14 +120,14 @@
         if (this.item) {
           param.id = this.item.id
         }
-        this.$refs.popup.spinnerLoading = true
+        this.$refs.popover.spinnerLoading = true
         this.store.dispatch(`security/${this.item ? 'updateAlertgrou' : 'createAlertgrou'}`, param).then(res => {
           this.$emit('onUpdate')
           this.$message.success(res.msg)
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         }).catch(e => {
           this.$message.error(e.msg || '')
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         })
       },
       close () {
@@ -148,6 +147,6 @@
     },
     mounted () {
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningGroups/index.vue

@@ -21,6 +21,8 @@
         <template slot="button-group" v-if="isADMIN">
           <el-button size="mini" @click="_create('')">{{$t('Create alarm group')}}</el-button>
           <el-dialog
+            :title="item ? $t('Edit alarm group') : $t('Create alarm group')"
+            v-if="createWarningDialog"
             :visible.sync="createWarningDialog"
             width="auto">
             <m-create-warning :item="item" :allAlertPluginInstance="allAlertPluginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning>

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/_source/createWarningInstance.vue

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 <template>
-  <m-popup
-          ref="popup"
+  <m-popover
+          ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit Alarm Instance') : $t('Create Alarm Instance')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -56,19 +55,19 @@
             </el-select>
           </template>
         </m-list-box-f>
-        <div>
+        <div  class="alertForm">
           <template>
-            <div class="alertForm"><form-create v-model="$f" :rule="rule" :option="{submitBtn:false}" size="mini"></form-create></div>
+            <form-create v-model="$f" :rule="rule" :option="{submitBtn:false}" size="mini"></form-create>
           </template>
         </div>
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
@@ -142,16 +141,14 @@
           param.alertPluginInstanceId = this.item.id
           param.pluginDefineId = null
         }
-        this.$refs.popup.spinnerLoading = true
+        this.$refs.popover.spinnerLoading = true
         this.store.dispatch(`security/${this.item ? 'updateAlertPluginInstance' : 'createAlertPluginInstance'}`, param).then(res => {
+          this.$refs.popover.spinnerLoading = false
           this.$emit('onUpdate')
           this.$message.success(res.msg)
-          setTimeout(() => {
-            this.$refs.popup.spinnerLoading = false
-          }, 800)
         }).catch(e => {
           this.$message.error(e.msg || '')
-          this.$refs.popup.spinnerLoading = false
+          this.$refs.popover.spinnerLoading = false
         })
       },
       close () {
@@ -175,7 +172,7 @@
     },
     mounted () {
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>
 <style lang="scss" rel="stylesheet/scss">
@@ -185,6 +182,9 @@
         font-weight: 10!important;
       }
     }
+    .el-row {
+      width: 520px;
+    }
     .el-form-item__label {
       width: 144px!important;
       color: #606266!important;

dolphinscheduler-ui/src/js/conf/home/pages/security/pages/warningInstance/index.vue

@@ -21,8 +21,10 @@
         <template slot="button-group" v-if="isADMIN">
           <el-button size="mini" @click="_create('')">{{$t('Create Alarm Instance')}}</el-button>
           <el-dialog
+            :title="item ? $t('Edit Alarm Instance') : $t('Create Alarm Instance')"
+            v-if="createWarningDialog"
             :visible.sync="createWarningDialog"
-            width="45%">
+            width="auto">
             <m-create-warning-instance :item="item" :pulginInstance="pulginInstance" @onUpdate="onUpdate" @close="close"></m-create-warning-instance>
           </el-dialog>
         </template>

dolphinscheduler-ui/src/js/conf/home/pages/user/pages/account/_source/info.vue

@@ -69,6 +69,8 @@
       <template slot="content">
         <el-button type="primary" size="small" round @click="_edit()" >{{$t('Edit')}}</el-button>
         <el-dialog
+          :title="item ? $t('Edit User') : $t('Create User')"
+          v-if="createUserDialog"
           :visible.sync="createUserDialog"
           width="auto">
           <m-create-user :item="item" @onUpdate="onUpdate" @close="close"></m-create-user>
@@ -131,12 +133,10 @@
     padding-top: 30px;
     .list-box-f {
       .text {
-        width: 200px;
         font-size: 14px;
         color: #888;
       }
       .cont {
-        width: calc(100% - 210px);
         margin-left: 10px;
         .sp1 {
           font-size: 14px;

dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/_source/createToken.vue

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 <template>
-  <m-popup
-          ref="popup"
+  <m-popover
+          ref="popover"
           :ok-text="item ? $t('Edit') : $t('Submit')"
-          :nameText="item ? $t('Edit token') : $t('Create token')"
           @ok="_ok"
           @close="close">
     <template slot="content">
@@ -65,7 +64,7 @@
         </m-list-box-f>
       </div>
     </template>
-  </m-popup>
+  </m-popover>
 </template>
 <script>
   import _ from 'lodash'
@@ -73,7 +72,7 @@
   import i18n from '@/module/i18n'
   import store from '@/conf/home/store'
   import Permissions from '@/module/permissions'
-  import mPopup from '@/module/components/popup/popup'
+  import mPopover from '@/module/components/popup/popover'
   import mListBoxF from '@/module/components/listBoxF/listBoxF'
 
   export default {
@@ -177,7 +176,7 @@
     },
     mounted () {
     },
-    components: { mPopup, mListBoxF }
+    components: { mPopover, mListBoxF }
   }
 </script>
 

dolphinscheduler-ui/src/js/conf/home/pages/user/pages/token/index.vue

@@ -21,6 +21,8 @@
         <template slot="button-group">
           <el-button size="mini" @click="_create('')">{{$t('Create token')}}</el-button>
           <el-dialog
+            :title="item ? $t('Edit token') : $t('Create token')"
+            v-if="createTokenDialog"
             :visible.sync="createTokenDialog"
             width="auto">
             <m-create-token :item="item" @onUpdate="onUpdate" @close="close"></m-create-token>

dolphinscheduler-ui/src/js/conf/home/router/index.js

@@ -388,7 +388,7 @@ const router = new Router({
           component: resolve => require(['../pages/security/pages/users/index'], resolve),
           meta: {
             title: `${i18n.$t('User Manage')}`,
-            refresh_in_switched_tab: false
+            refresh_in_switched_tab: true
           }
         },
         {

dolphinscheduler-ui/src/js/module/components/popup/popover.vue

+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on 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.
+ */
+<template>
+  <div class="popup-model">
+    <div class="content-p">
+      <slot name="content"></slot>
+    </div>
+    <div class="bottom-p">
+      <el-button type="text" size="mini" round @click="close()" :disabled="disabled"> {{$t('Cancel')}} </el-button>
+      <el-button type="primary" size="mini" round :loading="spinnerLoading" @click="ok()" :disabled="disabled || apDisabled">{{spinnerLoading ? 'Loading...' : okText}} </el-button>
+    </div>
+  </div>
+</template>
+<script>
+  import i18n from '@/module/i18n'
+  export default {
+    name: 'popup',
+    data () {
+      return {
+        spinnerLoading: false,
+        apDisabled: false
+      }
+    },
+    props: {
+      okText: {
+        type: String,
+        default: `${i18n.$t('Confirm')}`
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      asynLoading: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      close () {
+        this.$emit('close')
+      },
+      ok () {
+        if (this.asynLoading) {
+          this.spinnerLoading = true
+          this.$emit('ok', () => {
+            this.spinnerLoading = false
+          })
+        } else {
+          this.$emit('ok')
+        }
+      }
+    },
+    components: {}
+  }
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+  .popup-model {
+    background: #fff;
+    border-radius: 3px;
+
+    .top-p {
+      height: 70px;
+      line-height: 70px;
+      border-radius: 3px 3px 0 0;
+      padding: 0 20px;
+      >span {
+        font-size: 20px;
+      }
+    }
+    .bottom-p {
+      text-align: right;
+      height: 72px;
+      line-height: 72px;
+      border-radius:  0 0 3px 3px;
+      padding: 0 20px;
+    }
+    .content-p {
+      min-width: 520px;
+      min-height: 100px;
+    }
+  }
+</style>

dolphinscheduler-ui/src/js/module/components/popup/popup.vue

@@ -71,7 +71,7 @@
         }
       }
     },
-    components: { }
+    components: {}
   }
 </script>
 

dolphinscheduler-ui/src/js/module/components/transfer/resource.vue

@@ -74,8 +74,8 @@
       resourceData: Object
     },
     created () {
-      let file = this.fileSourceList
-      let udf = this.udfSourceList
+      let file = this.resourceData.fileSourceList
+      let udf = this.resourceData.udfSourceList
       this.diGuiTree(file)
       this.diGuiTree(udf)
       this.fileList = file
@@ -218,7 +218,6 @@
         delete item.children
       },
       close () {
-        console.log(888)
         this.$emit('closeAuthResource')
       }
     },

dolphinscheduler-ui/src/sass/common/index.scss

@@ -359,7 +359,9 @@ body::-webkit-scrollbar-thumb {
   max-height: 200px;
   overflow: auto;
 }
-
+.el-dialog__body {
+  padding: 10px;
+}