From 759994dbb873ba79f3f14f3380fceda1652358d6 Mon Sep 17 00:00:00 2001
From: qb <1191961160@qq.com>
Date: Tue, 2 Apr 2024 18:44:18 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E5=AF=BC=E5=85=A5=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9Eloading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/basicdata/brand/basicClient.vue | 417 ++++++++++++----------
 1 file changed, 221 insertions(+), 196 deletions(-)

diff --git a/src/views/basicdata/brand/basicClient.vue b/src/views/basicdata/brand/basicClient.vue
index 0ccaedbc..8247b55d 100644
--- a/src/views/basicdata/brand/basicClient.vue
+++ b/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,193 +184,201 @@
         :close-on-click-modal="false"
         append-to-body
       >
-        <el-form :disabled="view" ref="form" :model="form" :rules="rules" label-width="120px">
-          <!-- 表单字段 -->
-          <el-form-item label="客户编码" prop="clientCode">
-            <el-input
-              v-model="form.clientCode"
-              :validate-method="validateInput"
-              placeholder="请输入客户编码"
-              style="width: 100%"
-              :disabled="viewClientEntd"
-            />
-          </el-form-item>
-          <el-form-item label="客户名称" prop="clientName">
-            <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%"/>-->
-            <!--            <el-select v-model="form.clientType" class="m-2" placeholder="请选择客户类型" style="width: 100%">-->
-            <!--              <el-option label="发货方" value="1"/>-->
-            <!--              <el-option label="收货方" value="2"/>-->
-            <!--            </el-select>-->
-            <el-select
-              v-model="form.clientType"
-              class="m-2"
-              placeholder="请选择客户端类型"
-              style="width: 100%"
-            >
-              <el-option
-                v-for="item in clientType"
-                :key="item.dictKey"
-                :label="item.dictValue"
-                :value="item.dictKey"
+        <div v-loading="loadingObj.submitLoading">
+          <el-form :disabled="view" ref="form" :model="form" :rules="rules" label-width="120px">
+            <!-- 表单字段 -->
+            <el-form-item label="客户编码" prop="clientCode">
+              <el-input
+                v-model="form.clientCode"
+                :validate-method="validateInput"
+                placeholder="请输入客户编码"
+                style="width: 100%"
+                :disabled="viewClientEntd"
               />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="服务类型" prop="typeServiceList">
-            <el-select
-              v-model="form.typeServiceList"
-              multiple
-              placeholder="请选择"
-              style="width: 100%"
-              @change="coverCharge"
-            >
-              <el-option
-                v-for="item in freightType"
-                :key="item.dictKey"
-                :label="item.dictValue"
-                :value="item.dictKey"
+            </el-form-item>
+            <el-form-item label="客户名称" prop="clientName">
+              <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%"/>-->
+              <!--            <el-select v-model="form.clientType" class="m-2" placeholder="请选择客户类型" style="width: 100%">-->
+              <!--              <el-option label="发货方" value="1"/>-->
+              <!--              <el-option label="收货方" value="2"/>-->
+              <!--            </el-select>-->
+              <el-select
+                v-model="form.clientType"
+                class="m-2"
+                placeholder="请选择客户端类型"
+                style="width: 100%"
               >
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="配送类型" prop="businessType" v-if="distriType">
-            <el-radio-group
-              v-model="form.businessType"
-              class="ml-4"
-              v-for="item in distributionType"
-            >
-              <el-radio :label="item.dictKey" size="large" style="margin-right: 25px">{{
-                item.dictValue
-              }}</el-radio>
-              <!--                  <el-radio label="2" size="large">Option 2</el-radio>-->
-            </el-radio-group>
-            <!--              </div>-->
-          </el-form-item>
-          <!--                    <el-form-item label="客户端类型" prop="typeService">
-          &lt;!&ndash;            <el-input v-model="form.typeService" placeholder="请输入客户类型"/>&ndash;&gt;
-          &lt;!&ndash;            <el-input v-model="form.typeService" placeholder="请输入客户类型;1 C端  2 B端"/>&ndash;&gt;
-                      <el-select v-model="form.typeService" class="m-2" placeholder="请选择客户端类型" style="width: 100%">
-                        <el-option
-                          v-for="item in clientType"
-                          :key="item.dictKey"
-                          :label="item.dictValue"
-                          :value="item.dictKey"
-
-                        />
-                      </el-select>
-                    </el-form-item>-->
-          <el-form-item label="联系人" prop="linkman" v-if="viewEntd">
-            <el-input v-model="form.linkman" placeholder="请输入联系人" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="联系电话" prop="phone" v-if="viewEntd">
-            <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="地址" prop="bladeRegionProvinceId">
-            <!--            <el-input v-model="form.bladeRegionProvinceId" placeholder="请输入省份"/>-->
-            <el-cascader
-              :options="optioner"
-              style="width: 100%"
-              v-model="form.bladeRegionProvinceId"
-              :props="{
-                checkStrictly: false,
-              }"
-              filterable
-            >
-              <template #default="{ node, data }">
-                <span>{{ data.label }}</span>
-                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-              </template>
-            </el-cascader>
-          </el-form-item>
-          <el-form-item label="详细地址" prop="detailedly">
-            <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="请选择默认付款方式">
-              <el-option
-                v-for="item in defaultPaymentMethodsOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                <el-option
+                  v-for="item in clientType"
+                  :key="item.dictKey"
+                  :label="item.dictValue"
+                  :value="item.dictKey"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="服务类型" prop="typeServiceList">
+              <el-select
+                v-model="form.typeServiceList"
+                multiple
+                placeholder="请选择"
+                style="width: 100%"
+                @change="coverCharge"
+              >
+                <el-option
+                  v-for="item in freightType"
+                  :key="item.dictKey"
+                  :label="item.dictValue"
+                  :value="item.dictKey"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="配送类型" prop="businessType" v-if="distriType">
+              <el-radio-group
+                v-model="form.businessType"
+                class="ml-4"
+                v-for="item in distributionType"
+              >
+                <el-radio :label="item.dictKey" size="large" style="margin-right: 25px">{{
+                  item.dictValue
+                }}</el-radio>
+                <!--                  <el-radio label="2" size="large">Option 2</el-radio>-->
+              </el-radio-group>
+              <!--              </div>-->
+            </el-form-item>
+            <!--                    <el-form-item label="客户端类型" prop="typeService">
+            &lt;!&ndash;            <el-input v-model="form.typeService" placeholder="请输入客户类型"/>&ndash;&gt;
+            &lt;!&ndash;            <el-input v-model="form.typeService" placeholder="请输入客户类型;1 C端  2 B端"/>&ndash;&gt;
+                        <el-select v-model="form.typeService" class="m-2" placeholder="请选择客户端类型" style="width: 100%">
+                          <el-option
+                            v-for="item in clientType"
+                            :key="item.dictKey"
+                            :label="item.dictValue"
+                            :value="item.dictKey"
+  
+                          />
+                        </el-select>
+                      </el-form-item>-->
+            <el-form-item label="联系人" prop="linkman" v-if="viewEntd">
+              <el-input v-model="form.linkman" placeholder="请输入联系人" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="联系电话" prop="phone" v-if="viewEntd">
+              <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 100%" />
+            </el-form-item>
+            <el-form-item label="地址" prop="bladeRegionProvinceId">
+              <!--            <el-input v-model="form.bladeRegionProvinceId" placeholder="请输入省份"/>-->
+              <el-cascader
+                :options="optioner"
+                style="width: 100%"
+                v-model="form.bladeRegionProvinceId"
+                :props="{
+                  checkStrictly: false,
+                }"
+                filterable
+              >
+                <template #default="{ node, data }">
+                  <span>{{ data.label }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
+            </el-form-item>
+            <el-form-item label="详细地址" prop="detailedly">
+              <el-input
+                v-model="form.detailedly"
+                placeholder="请填写详细地址"
+                style="width: 100%"
               />
-            </el-select>
-          </el-form-item>
-          <!--          <el-form-item label="三方商城" prop="tripartiteMall">-->
-          <!--            <el-input v-model="form.tripartiteMall" placeholder="请填写三方商城" style="width: 100%" />-->
-          <!--          </el-form-item>-->
-          <!--          <el-form-item label="开票信息" prop="billingInformation">-->
-          <!--            <el-input v-model="form.billingInformation" placeholder="请填写开票信息" style="width: 100%" />-->
-          <!--          </el-form-item>-->
-          <!--          <el-form-item label="市" prop="bladeRegionCityId">-->
-          <!--            <el-input v-model="form.bladeRegionCityId" placeholder="请输入市"/>-->
-          <!--          </el-form-item>-->
-          <!--          <el-form-item label="区/县" prop="bladeRegionAreaId">-->
-          <!--            <el-input v-model="form.bladeRegionAreaId" placeholder="请输入区/县"/>-->
-          <!--          </el-form-item>-->
-          <el-form-item label="合同附件" prop="leaseAccessories" style="width: 100%">
-            <!--            <el-input v-model="form.leaseAccessories" placeholder="请输入合同附件"/>-->
-            <el-upload
-              v-model:file-list="fileList"
-              class="upload-demo"
-              :action="action"
-              :headers="headers"
-              multiple
-              :on-preview="handlePreview"
-              :on-success="
-                (response, file, fileList) => {
-                  uploadSuccess(fileList);
-                }
-              "
-              :on-remove="handleRemove"
-              :before-remove="beforeRemove"
-              :before-upload="beforeUploadFn"
-              :limit="3"
-              :on-exceed="handleExceed"
-            >
-              <el-button type="Primary" icon="Position">上传</el-button>
-              <template #tip>
-                <div class="el-upload__tip">大小不超过500KB的jpg/png文件。</div>
-              </template>
-            </el-upload>
-            <el-image-viewer
-              v-if="showImgViewer"
-              :url-list="imgPreviewUrl"
-              @close="handleCo"
-              :z-index="300"
-              fit="cover"
-            />
-          </el-form-item>
-          <el-form-item label="合同开始时间" prop="contractStartTime" label-width="120px">
-            <el-date-picker
-              v-model="form.contractStartTime"
-              type="date"
-              placeholder="选择时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD HH:mm:ss"
-            />
-          </el-form-item>
+            </el-form-item>
+            <el-form-item label="默认付款方式" prop="defaultPaymentMethods">
+              <el-select v-model="form.defaultPaymentMethods" placeholder="请选择默认付款方式">
+                <el-option
+                  v-for="item in defaultPaymentMethodsOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <!--          <el-form-item label="三方商城" prop="tripartiteMall">-->
+            <!--            <el-input v-model="form.tripartiteMall" placeholder="请填写三方商城" style="width: 100%" />-->
+            <!--          </el-form-item>-->
+            <!--          <el-form-item label="开票信息" prop="billingInformation">-->
+            <!--            <el-input v-model="form.billingInformation" placeholder="请填写开票信息" style="width: 100%" />-->
+            <!--          </el-form-item>-->
+            <!--          <el-form-item label="市" prop="bladeRegionCityId">-->
+            <!--            <el-input v-model="form.bladeRegionCityId" placeholder="请输入市"/>-->
+            <!--          </el-form-item>-->
+            <!--          <el-form-item label="区/县" prop="bladeRegionAreaId">-->
+            <!--            <el-input v-model="form.bladeRegionAreaId" placeholder="请输入区/县"/>-->
+            <!--          </el-form-item>-->
+            <el-form-item label="合同附件" prop="leaseAccessories" style="width: 100%">
+              <!--            <el-input v-model="form.leaseAccessories" placeholder="请输入合同附件"/>-->
+              <el-upload
+                v-model:file-list="fileList"
+                class="upload-demo"
+                :action="action"
+                :headers="headers"
+                multiple
+                :on-preview="handlePreview"
+                :on-success="
+                  (response, file, fileList) => {
+                    uploadSuccess(fileList);
+                  }
+                "
+                :on-remove="handleRemove"
+                :before-remove="beforeRemove"
+                :before-upload="beforeUploadFn"
+                :limit="3"
+                :on-exceed="handleExceed"
+              >
+                <el-button type="Primary" icon="Position">上传</el-button>
+                <template #tip>
+                  <div class="el-upload__tip">大小不超过500KB的jpg/png文件。</div>
+                </template>
+              </el-upload>
+              <el-image-viewer
+                v-if="showImgViewer"
+                :url-list="imgPreviewUrl"
+                @close="handleCo"
+                :z-index="300"
+                fit="cover"
+              />
+            </el-form-item>
+            <el-form-item label="合同开始时间" prop="contractStartTime" label-width="120px">
+              <el-date-picker
+                v-model="form.contractStartTime"
+                type="date"
+                placeholder="选择时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+              />
+            </el-form-item>
 
-          <el-form-item label="合同结束时间" prop="contractEntTime" label-width="120px">
-            <el-date-picker
-              v-model="form.contractEntTime"
-              type="date"
-              placeholder="选择时间"
-              format="YYYY/MM/DD HH:mm:ss"
-              value-format="YYYY-MM-DD HH:mm:ss"
-            />
-          </el-form-item>
-        </el-form>
-        <!-- 表单按钮 -->
-        <template #footer>
-          <span v-if="!view" class="dialog-footer">
+            <el-form-item label="合同结束时间" prop="contractEntTime" label-width="120px">
+              <el-date-picker
+                v-model="form.contractEntTime"
+                type="date"
+                placeholder="选择时间"
+                format="YYYY/MM/DD HH:mm:ss"
+                value-format="YYYY-MM-DD HH:mm:ss"
+              />
+            </el-form-item>
+          </el-form>
+          <!-- 表单按钮 -->
+          <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) {
-            // 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(() => {
+            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);
+              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) {
-            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(() => {
+            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];
+              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;