补录订单详情费用信息改为订单详情的

src/views/additionalOrder/additional/index.vue

@@ -1517,81 +1517,197 @@
             <template #title>
               <span class="title">费用信息</span>
             </template>
-            <el-row :gutter="20" class="p-r-20px">
-              <el-col :span="8">
-                <el-form-item class="white-m-p24" label="报价协议" prop="agreementId">
-                  <el-select v-model="additionalForm.agreementId" @change="handleAgreementSelect">
-                    <el-option v-for="(item, index) in agreementList" :label="item.agreementName" :value="item.id"
-                      key="1"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="是否现询" prop="isInquiry">
-                  <el-select v-model="additionalForm.isInquiry" @change="handleAgreementSelect">
-                    <el-option label="是" value="0" key="0"></el-option>
-                    <el-option label="否" value="1" key="1"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="非现询费用" prop="costId" v-if="additionalForm.isInquiry == '1'">
-                  <el-select v-model="additionalForm.costId">
-                    <el-option v-for="(item, index) in selectList" :key="item.id" :label="item.productName"
-                      :value="item.id"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item class="white-m-p24" label="交强险总比例" prop="jqInletRatio">
-                  <el-input-number v-model="additionalForm.jqInletRatio" :min="0" :max="100" :controls="false"
-                    style="width: 100%;">
-                    <template #suffix>%</template>
-                  </el-input-number>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="商业险总比例" prop="syInletRatio">
-                  <el-input-number v-model="additionalForm.syInletRatio" :min="0" :max="100" :controls="false"
-                    style="width: 100%;">
-                    <template #suffix>%</template>
-                  </el-input-number>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="驾意险总比例" prop="jyInletRatio">
-                  <el-input-number v-model="additionalForm.jyInletRatio" :min="0" :max="100" :controls="false"
-                    style="width: 100%;">
-                    <template #suffix>%</template>
-                  </el-input-number>
-                </el-form-item>
-              </el-col>
-
-              <el-col :span="8">
-                <el-form-item class="white-m-p24" label="交强险出口比例" prop="jqExportRatio">
-                  <el-input-number v-model="additionalForm.jqExportRatio" :min="0" :max="100" :controls="false"
-                    style="width: 100%;">
-                    <template #suffix>%</template>
-                  </el-input-number>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="商业险出口比例" prop="syExportRatio">
-                  <el-input-number v-model="additionalForm.syExportRatio" :min="0" :max="100" :controls="false"
-                    style="width: 100%;">
-                    <template #suffix>%</template>
-                  </el-input-number>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="驾意险出口比例" prop="jyExportRatio">
-                  <el-input-number v-model="additionalForm.jyExportRatio" :min="0" :max="100" :controls="false"
-                    style="width: 100%;">
-                    <template #suffix>%</template>
-                  </el-input-number>
-                </el-form-item>
-              </el-col>
-            </el-row>
+            <table class="costTable" cellpadding="0" cellspacing="0">
+          <thead>
+            <tr>
+              <th>
+                <div>险种</div>
+              </th>
+              <th>
+                <div>保费</div>
+              </th>
+              <th colspan="2">
+                <div>入口费用</div>
+              </th>
+              <th colspan="2">
+                <div>出口费用</div>
+              </th>
+              <th colspan="2">
+                <div>手续费费用</div>
+              </th>
+              <th colspan="2">
+                <div>跟单费用</div>
+              </th>
+              <th colspan="2">
+                <div>加投费用（净费）</div>
+              </th>
+
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th>
+                <div>交强险</div>
+              </th>
+
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jqPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jqInletRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jqReceivablePremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jqExportRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jqPayablePremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jqCommissionRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jqCommissionPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jqFollowRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jqFollowPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jqAdditionalRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jqAdditionalPremium }}</div>
+              </th>
+            </tr>
+            <tr>
+              <th>
+                <div>商业险</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.syPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.syInletRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.syReceivablePremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.syExportRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.syPayablePremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.syCommissionRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.syCommissionPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.syFollowRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.syFollowPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.syAdditionalRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.syAdditionalPremium }}</div>
+              </th>
+            </tr>
+            <tr>
+              <th>
+                <div>驾意险</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jyPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jyInletRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jyReceivablePremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jyExportRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jyPayablePremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jyCommissionRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jyCommissionPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jyFollowRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jyFollowPremium }}</div>
+              </th>
+
+              <th>
+                <div>{{ detailData?.costRatio?.jyAdditionalRatio }}%</div>
+              </th>
+              <th>
+                <div>￥{{ detailData?.feeOrdersVo?.jyAdditionalPremium }}</div>
+              </th>
+            </tr>
+            <tr>
+              <th colspan="2">
+                <div>合计：￥{{ (Number(detailData?.feeOrdersVo?.jqPremium) + Number(detailData?.feeOrdersVo?.syPremium) +
+                  Number(detailData?.feeOrdersVo?.jyPremium)).toFixed(2) }}</div>
+              </th>
+              <th colspan="2">
+                <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqReceivablePremium) +
+                  Number(detailData?.feeOrdersVo?.syReceivablePremium) +
+                  Number(detailData?.feeOrdersVo?.jyReceivablePremium)).toFixed(5) }}</div>
+              </th>
+              <th colspan="2">
+                <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqPayablePremium) +
+                  Number(detailData?.feeOrdersVo?.syPayablePremium) +
+                  Number(detailData?.feeOrdersVo?.jyPayablePremium)).toFixed(5) }}</div>
+              </th>
+              <th colspan="2">
+                <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqCommissionPremium) +
+                  Number(detailData?.feeOrdersVo?.syCommissionPremium) +
+                  Number(detailData?.feeOrdersVo?.jyCommissionPremium)).toFixed(5) }}</div>
+              </th>
+              <th colspan="2">
+                <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqFollowPremium) +
+                  Number(detailData?.feeOrdersVo?.syFollowPremium) +
+                  Number(detailData?.feeOrdersVo?.jyFollowPremium)).toFixed(5) }}</div>
+              </th>
+              <th colspan="2">
+                <div>小计： ￥{{ (Number(detailData?.feeOrdersVo?.jqAdditionalPremium) +
+                  Number(detailData?.feeOrdersVo?.syAdditionalPremium) +
+                  Number(detailData?.feeOrdersVo?.jyAdditionalPremium)).toFixed(5) }}</div>
+              </th>
+            </tr>
+          </tbody>
+        </table>
             <template #icon="{ isActive }">
               <span class="icon">
                 <span class="icon-ele">
@@ -4248,6 +4364,51 @@ onMounted(() => {
 :deep(.el-upload.el-upload--text) {
   --el-color-primary-light-9: #fff
 }
+.costTable {
+        width: 100%;
+        border: 1px solid #ebeef5;
+
+        thead {
+          color: #909399;
+
+          th {
+            border-right: 1px solid #ebeef5;
+
+            div {
+              box-sizing: border-box;
+              line-height: 23px;
+              overflow: hidden;
+              overflow-wrap: break-word;
+              padding: 8px 12px;
+              text-overflow: ellipsis;
+              white-space: normal;
+              font-size: 14px;
+              font-weight: 500;
+            }
+          }
+        }
+
+        tbody {
+          color: #303133;
+
+          th {
+            border-top: 1px solid #ebeef5;
+            border-right: 1px solid #ebeef5;
+
+            div {
+              box-sizing: border-box;
+              line-height: 23px;
+              overflow: hidden;
+              overflow-wrap: break-word;
+              padding: 8px 12px;
+              text-overflow: ellipsis;
+              white-space: normal;
+              font-size: 14px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
 .addtional {
   width: calc(100% - 20px);
   height: calc(100vh - 140px);