客户导入新增loading

src/views/basicdata/brand/basicClient.vue

@@ -60,7 +60,7 @@
             <el-button type="danger" icon="el-icon-delete" @click="handleDelete" plain
               >删 除</el-button
             >
-            <el-button type="danger" icon="el-icon-delete" @click="handleImport">导 入 </el-button>
+            <el-button type="danger" icon="Upload" @click="handleImport">导 入 </el-button>
           </div>
           <!-- 头部右侧按钮模块 -->
           <div class="avue-crud__right">
@@ -184,6 +184,7 @@
         :close-on-click-modal="false"
         append-to-body
       >
+        <div v-loading="loadingObj.submitLoading">
           <el-form :disabled="view" ref="form" :model="form" :rules="rules" label-width="120px">
             <!-- 表单字段 -->
             <el-form-item label="客户编码" prop="clientCode">
@@ -196,7 +197,11 @@
               />
             </el-form-item>
             <el-form-item label="客户名称" prop="clientName">
-            <el-input v-model="form.clientName" placeholder="请输入客户名称" style="width: 100%" />
+              <el-input
+                v-model="form.clientName"
+                placeholder="请输入客户名称"
+                style="width: 100%"
+              />
             </el-form-item>
             <el-form-item label="客户类型" prop="clientType">
               <!--            <el-input v-model="form.clientName" placeholder="请输入客户名称"  style="width: 100%"/>-->
@@ -285,7 +290,11 @@
               </el-cascader>
             </el-form-item>
             <el-form-item label="详细地址" prop="detailedly">
-            <el-input v-model="form.detailedly" placeholder="请填写详细地址" style="width: 100%" />
+              <el-input
+                v-model="form.detailedly"
+                placeholder="请填写详细地址"
+                style="width: 100%"
+              />
             </el-form-item>
             <el-form-item label="默认付款方式" prop="defaultPaymentMethods">
               <el-select v-model="form.defaultPaymentMethods" placeholder="请选择默认付款方式">
@@ -363,14 +372,13 @@
             </el-form-item>
           </el-form>
           <!-- 表单按钮 -->
-        <template #footer>
-          <span v-if="!view" class="dialog-footer">
+          <div v-if="!view" class="flex-c-c">
             <el-button type="primary" icon="el-icon-circle-check" @click="handleSubmit('form')"
               >提 交</el-button
             >
             <el-button icon="el-icon-circle-close" @click="box = false">取 消</el-button>
-          </span>
-        </template>
+          </div>
+        </div>
       </el-dialog>
 
       <!-- 账号绑定弹出框页面
@@ -805,6 +813,9 @@ export default {
           label: '内部结算',
         },
       ],
+      loadingObj: {
+        submitLoading: false,
+      },
     };
   },
   created() {},
@@ -1191,42 +1202,56 @@ export default {
 
       if (!this.form.id) {
         console.log('添加提交的数据：', this.form);
-        this.$refs[from].validate(valid => {
+        this.$refs[from].validate(async valid => {
           if (valid) {
+            try {
+              this.loadingObj.submitLoading = true;
+
               // this.form.typeService = !!this.form.typeService ? parseInt(this.form.typeService) : undefined;
               this.form.bladeRegionCityId = this.form.bladeRegionProvinceId[1];
               this.form.bladeRegionAreaId = this.form.bladeRegionProvinceId[2];
               this.form.bladeRegionProvinceId = this.form.bladeRegionProvinceId[0];
               console.log('上传llll>>>', this.form);
-            add(this.form).then(() => {
+              await add(this.form);
               this.box = false;
               this.onLoad(this.page);
               this.$message({
                 type: 'success',
                 message: '操作成功!',
               });
-            });
+            } catch (error) {
+              console.log('error :>> ', error);
+            } finally {
+              this.loadingObj.submitLoading = false;
+            }
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       } else {
-        this.$refs[from].validate(valid => {
+        this.$refs[from].validate(async valid => {
           if (valid) {
+            try {
+              this.loadingObj.submitLoading = true;
+
               console.log('修改提交的数据：', this.form);
               // this.form.typeService = !!this.form.typeService ? parseInt(this.form.typeService) : undefined;
               this.form.bladeRegionCityId = this.form.bladeRegionProvinceId[1];
               this.form.bladeRegionAreaId = this.form.bladeRegionProvinceId[2];
               this.form.bladeRegionProvinceId = this.form.bladeRegionProvinceId[0];
-            update(this.form).then(() => {
+              await update(this.form);
               this.box = false;
               this.onLoad(this.page);
               this.$message({
                 type: 'success',
                 message: '操作成功!',
               });
-            });
+            } catch (error) {
+              console.log('error :>> ', error);
+            } finally {
+              this.loadingObj.submitLoading = false;
+            }
           } else {
             console.log('error submit!!');
             return false;