绑定数据源添加loading效果

ruoyi-ui/src/utils/ruoyi.js

@@ -88,7 +88,7 @@ export function selectDictLabel(datas, value) {
 
 // 回显数据字典（字符串、数组）
 export function selectDictLabels(datas, value, separator) {
-  if (value === undefined || value.length ===0) {
+  if (value === undefined || value.length === 0) {
     return "";
   }
   if (Array.isArray(value)) {
@@ -231,3 +231,16 @@ export function tansParams(params) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 自定义loading
+import { Loading } from 'element-ui'
+
+export const servicesLoading = (node, str, lock) => {
+  return Loading.service({
+    target: document.querySelector(node),//loading需要覆盖的DOM节点，默认为body
+    text: str,//加载文案
+    lock,//同v-loading的修饰符
+    // backgroundColor: 'rgba(55,55,55,0.4)',//背景色
+    // spinner: 'el-icon-loading',//加载图标
+  })
+}

ruoyi-ui/src/views/system/tenant/index.vue

@@ -220,6 +220,7 @@
       :visible.sync="dataSourceOpen"
       width="500px"
       append-to-body
+      class="loadingClass"
     >
       <el-radio-group
         v-model="dataSourceType"
@@ -295,7 +296,13 @@
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm1">确 定</el-button>
+        <el-button
+          type="primary"
+          @click="submitForm1"
+          :disabled="dialogLoading"
+          :loading="dialogLoading"
+          >{{ dialogLoading ? "绑定中" : "确 定" }}</el-button
+        >
         <el-button @click="cancel1">取 消</el-button>
       </div>
     </el-dialog>
@@ -315,7 +322,7 @@ import {
   initTenantMenuData,
 } from "@/api/system/tenant";
 import { getDataSourceInfo, insertDataSource } from "@/api/system/data";
-import { async } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
+import { servicesLoading } from "@/utils/ruoyi";
 
 export default {
   name: "Tenant",
@@ -328,6 +335,8 @@ export default {
   ],
   data() {
     return {
+      // 弹窗的加载提示
+      dialogLoading: false,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -569,6 +578,12 @@ export default {
     submitForm1() {
       this.$refs["dataSourceForm"].validate((valid) => {
         if (valid) {
+          // const loading = servicesLoading(
+          //   ".loadingClass",
+          //   "正在绑定数据源",
+          //   true
+          // );
+          this.dialogLoading = true;
           if (this.dataSourceForm.id != null) {
             // bindDatasource(this.dataSourceForm).then((response) => {
             //   this.$modal.msgSuccess("修改成功");
@@ -597,6 +612,7 @@ export default {
                     if ((resp.code = 200)) {
                       this.$modal.msgSuccess("新增成功");
                       this.dataSourceOpen = false;
+                      // loading.close();
                       this.getList();
                     }
                   }