perf: add button loading status (jumpserver#4287)

* perf: add button loading status

* perf: add button loading status

---------

Co-authored-by: zhaojisen <[email protected]>

src/components/Apps/AssetSelect/dialog.vue

@@ -1,5 +1,6 @@
 <template>
   <Dialog
+    ref="customDialog"
     :close-on-click-modal="false"
     :title="$tc('assets.Assets')"
     custom-class="asset-select-dialog"
@@ -21,6 +22,7 @@
       :tree-setting="treeSetting"
       class="tree-table"
       v-bind="$attrs"
+      @loaded="handleTableLoaded"
     />
   </Dialog>
 </template>
@@ -143,6 +145,9 @@ export default {
       if (selectValueIndex > -1) {
         this.rowSelected.splice(selectValueIndex, 1)
       }
+    },
+    handleTableLoaded() {
+      this.$refs.customDialog.loaded()
     }
   }
 }

src/components/Apps/AssetSelect/index.vue

@@ -28,7 +28,6 @@
 <script>
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import AssetSelectDialog from './dialog.vue'
-import { b } from 'css-color-function/lib/adjusters'
 
 export default {
   componentName: 'AssetSelect',
@@ -81,7 +80,6 @@ export default {
     }
   },
   methods: {
-    b,
     handleFocus() {
       this.$refs.select2.selectRef.blur()
       this.dialogVisible = true

src/components/Dialog/index.vue

@@ -9,11 +9,13 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot />
+    <div v-loading="!isLoaded">
+      <slot />
+    </div>
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
         <el-button v-if="showCancel && showButtons" @click="onCancel">{{ cancelTitle }}</el-button>
-        <el-button v-if="showConfirm && showButtons" :loading="loadingStatus" type="primary" @click="onConfirm">
+        <el-button v-if="showConfirm && showButtons" :disabled="!isLoaded" type="primary" @click="onConfirm">
           {{ confirmTitle }}
         </el-button>
       </slot>
@@ -71,14 +73,21 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      isLoaded: false
+    }
   },
   computed: {
     iWidth() {
       return this.$store.getters.isMobile ? '1000px' : this.width
     }
   },
+  mounted() {
+  },
   methods: {
+    loaded() {
+      this.isLoaded = true
+    },
     onCancel() {
       this.$emit('cancel')
     },

src/components/Form/FormFields/TransferSelect.vue

@@ -11,15 +11,17 @@
     />
     <Dialog
       v-if="showTransfer"
+      ref="customDialog"
       :close-on-click-modal="false"
       :title="label"
       :visible.sync="showTransfer"
       class="the-dialog"
       width="730px"
       @cancel="handleTransCancel"
       @confirm="handleTransConfirm"
+      v-on="$listeners"
     >
-      <krryPaging v-if="selectInitialized" ref="pageTransfer" class="transfer" v-bind="pagingTransfer" />
+      <krryPaging v-if="selectInitialized" ref="pageTransfer" class="transfer" v-bind="pagingTransfer" @loaded="handleLoaded" />
     </Dialog>
   </div>
 </template>
@@ -162,11 +164,10 @@ export default {
       this.select2.options = options
       this.emit(options.map(item => item.value))
       this.showTransfer = false
+    },
+    handleLoaded() {
+      this.$refs.customDialog.loaded()
     }
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Libs/Krry/paging/index.vue

@@ -233,6 +233,8 @@ export default {
           ele => !checkDataId.includes(ele.id)
         )
       }
+
+      this.$emit('loaded')
     },
     searchWord(keyword, titleId) {
       // 过滤掉数据，保留搜索的数据

src/components/Table/DataTable/index.vue

@@ -12,6 +12,7 @@
 <script>
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'
+import { eventBus } from '@/utils/const'
 
 export default {
   name: 'DataTable',
@@ -153,6 +154,8 @@ export default {
           this.toggleRowSelection(row, true)
         }
       }
+
+      eventBus.$emit('loaded')
     },
     handleSizeChange(val) {
       localStorage.setItem('paginationSize', val)