Merge pull request #4292 from jumpserver/pr@v3@fix_loading

perf: add button loading status

src/components/Apps/AssetSelect/dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog
-    ref="customDialog"
     :close-on-click-modal="false"
+    :loading-status="!isLoaded"
     :title="$tc('assets.Assets')"
     custom-class="asset-select-dialog"
     top="2vh"
@@ -65,6 +65,7 @@ export default {
   data() {
     const vm = this
     return {
+      isLoaded: false,
       dialogVisible: false,
       rowSelected: _.cloneDeep(this.value) || [],
       rowsAdd: [],
@@ -147,7 +148,7 @@ export default {
       }
     },
     handleTableLoaded() {
-      this.$refs.customDialog.loaded()
+      this.isLoaded = true
     }
   }
 }

src/components/Dialog/index.vue

@@ -9,13 +9,13 @@
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <div v-loading="!isLoaded">
+    <div v-loading="loadingStatus">
       <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" :disabled="!isLoaded" type="primary" @click="onConfirm">
+        <el-button v-if="showConfirm && showButtons" :disabled="loadingStatus" type="primary" @click="onConfirm">
           {{ confirmTitle }}
         </el-button>
       </slot>
@@ -74,7 +74,6 @@ export default {
   },
   data() {
     return {
-      isLoaded: false
     }
   },
   computed: {
@@ -85,9 +84,6 @@ export default {
   mounted() {
   },
   methods: {
-    loaded() {
-      this.isLoaded = true
-    },
     onCancel() {
       this.$emit('cancel')
     },

src/components/Form/FormFields/TransferSelect.vue

@@ -11,7 +11,7 @@
     />
     <Dialog
       v-if="showTransfer"
-      ref="customDialog"
+      :loading-status="!isLoaded"
       :close-on-click-modal="false"
       :title="label"
       :visible.sync="showTransfer"
@@ -21,7 +21,7 @@
       @confirm="handleTransConfirm"
       v-on="$listeners"
     >
-      <krryPaging v-if="selectInitialized" ref="pageTransfer" class="transfer" v-bind="pagingTransfer" @loaded="handleLoaded" />
+      <krryPaging v-if="selectInitialized" ref="pageTransfer" class="transfer" v-bind="pagingTransfer" />
     </Dialog>
   </div>
 </template>
@@ -79,13 +79,16 @@ export default {
       if (keyword) {
         params['search'] = keyword
       }
+      this.isLoaded = false
       const data = await this.$axios.get(url, { params })
+      this.isLoaded = true
       return data['results'].map(item => {
         const n = transformOption(item)
         return { id: n.value, label: n.label }
       })
     }
     return {
+      isLoaded: false,
       showTransfer: false,
       selectInitialized: false,
       select2: {
@@ -164,9 +167,6 @@ export default {
       this.select2.options = options
       this.emit(options.map(item => item.value))
       this.showTransfer = false
-    },
-    handleLoaded() {
-      this.$refs.customDialog.loaded()
     }
   }
 }

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

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

src/components/Table/DataTable/index.vue

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