查看详情添加费用信息展示

src/views/Letter/Letter.vue

@@ -1154,6 +1154,32 @@
         </div>
       </div>
 
+
+      <div class="Enclosure" v-if="queryOrders">
+        <div class="home flex j-s a-c back">
+          <div class="flex j-s a-c color">
+            <img src="../../../src/icon/company.png" alt class="icon-img" />
+            <span style="margin-left:10px;">费用明细</span>
+          </div>
+        </div>
+        <div style="font-size:12px;width: 100%" class="FeeEnclosure">
+          <el-table :data="feeDetailInfo"   :border="true"   width="100%"  :stripe="true" size="mini">
+            <el-table-column prop="feeTypeName" label="费用类型" width="10%"></el-table-column>
+            <el-table-column  label="交强险费用跟单明细" width="30%">
+              <el-table-column prop="jqFeeRate" label="比例" width="15%"></el-table-column>
+              <el-table-column prop="jqFeeAmount" label="金额" width="15%"></el-table-column>
+            </el-table-column>
+            <el-table-column  label="商业险费用跟单明细" width="30%">
+              <el-table-column prop="syFeeRate" label="比例" width="15%"></el-table-column>
+              <el-table-column prop="syFeeAmount" label="金额" width="15%"></el-table-column>
+            </el-table-column>
+            <el-table-column   label="非车险费用跟单明细" width="30%">
+              <el-table-column prop="fcFeeRate" label="比例" width="15%"></el-table-column>
+              <el-table-column prop="fcFeeAmount" label="金额" width="15%"></el-table-column>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="quotedetailsdialogVisible = false">关闭</el-button>
       </span>
@@ -1829,6 +1855,7 @@ export default {
       }
     };
     return {
+      feeDetailInfo:[],//费用明细信息
       templateSelection:"",
       areaOption:yongchengData.data,
       actionUrl:process.env.BASE_URL+'ins/taskImage/uploadFile',
@@ -4562,6 +4589,8 @@ export default {
             return ele;
           });
           this.queryOrders = data;
+          //赋值费用信息
+          this.feeDetailInfo=data.orderFeeResult;
         }
       });
       this.quotedetailsdialogVisible = true;
@@ -6442,6 +6471,20 @@ export default {
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
+.FeeEnclosure{
+    /deep/ table {
+      width: 100% !important;
+    }
+
+    /deep/ .cell {
+      text-align: center;
+    }
+
+  /deep/ .el-table__empty-block{
+    width: 100% !important;
+  }
+}
+
 .icon-img {
   display: block;
   width: 30px;

src/views/ProductManage/OtherInsurance/ProductEntry1.vue

@@ -169,6 +169,10 @@
       :visible.sync="addDrawer"
       direction="rtl"
       :with-header="false"
+      v-loading="loadingFlag"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
     >
       <div class="drawer-body">
         <div class="drawer-title">
@@ -424,7 +428,11 @@
       </div>
     </el-drawer>
     <!-- 新增产品页面 -->
-    <el-dialog title="新增产品配置" v-dialogDrag :visible.sync="dialogFormVisible" width="800px" @close="closeDialog">
+    <el-dialog title="新增产品配置" v-dialogDrag :visible.sync="dialogFormVisible" width="800px" @close="closeDialog"
+               v-loading="loadingFlag"
+               element-loading-text="拼命加载中"
+               element-loading-spinner="el-icon-loading"
+               element-loading-background="rgba(0, 0, 0, 0.8)">
       <el-form ref="dataForm" :model="dataForm" label-width="100px" :label-position="labelPosition" :rules="dataFormRules" size="small" >
       <el-row>
         <el-col :span="10">
@@ -546,6 +554,7 @@ export default {
     }
 
     return {
+      loadingFlag:false,//页面加载标志
       schemeDelBtnFlag:false,//方案删除按钮是否展示
       vehicleTypeoptions: [],//车辆种类
       natureOfVehicleUseoptions:[],//使用性质
@@ -999,6 +1008,7 @@ export default {
     saveBaseProduct() {
       this.$refs.dataForm.validate((valid) => {
         if (valid) {
+          this.loadingFlag=true;
           this.$api.product.addProduct(this.dataForm).then((res) => {
             if (res.code == 200) {
               this.$message({
@@ -1013,6 +1023,7 @@ export default {
                 type: 'error'
               })
             }
+            this.loadingFlag=false;
           })
         }
       });
@@ -1081,6 +1092,7 @@ export default {
       }
 
       if(baseInfoFormCheckFlag&&schemeInfoFormCheckFlag&&specialInfoFormCheckFlag){
+        this.loadingFlag=true;
         //由于显示问题，置空时先赋值为Undefined，但是传后台时需要传空
         if(this.baseInfoForm.minInsuredAge==undefined){
           this.baseInfoForm.minInsuredAge='';
@@ -1120,6 +1132,7 @@ export default {
               type: 'error'
             })
           }
+          this.loadingFlag=false;
         })
       }else {
         this.$message({