外部协议支持添加多个非现询费用

src/views/externalAgreement/agreement/agreementDetails.vue

@@ -71,7 +71,7 @@
         <el-tab-pane label="费用管理" name="costManagement">
           <span class="strong m-right-20">对接人</span>
           <el-button type="primary" @click="addUnderwritingRule" plain>
-            添加对接人
+            添加费用
             <template #icon>
               <el-icon>
                 <Plus />
@@ -89,9 +89,9 @@
                     <span class="strong m-left-10">{{ item.contactMobile }}</span>
                   </div>
                   <div class="flex">
-                    <el-button link type="primary" :icon="Delete"
+                    <!-- <el-button link type="primary" :icon="Delete"
                       @click="contactPersonDel(item.contactMobile)">删除</el-button>
-                    <el-button link type="primary" :icon="Edit" @click="contactPersonEdit(item)">编辑</el-button>
+                    <el-button link type="primary" :icon="Edit" @click="contactPersonEdit(item)">编辑</el-button> -->
                     <el-button v-if="!item.contactPersonShow" link type="default"
                       @click="item.contactPersonShow = !item.contactPersonShow">展开<el-icon class="m-left-10">
                         <ArrowDownBold />

src/views/externalAgreement/agreement/components/contactPersonFeeDialog.vue

@@ -1,8 +1,7 @@
 <!-- 模板区域 -->
 <template>
   <div>
-    <el-drawer v-model="props.ruleFeeVisible" :direction="direction"  size="50%"
-      @open="draweropen" @close="close">
+    <el-drawer v-model="props.ruleFeeVisible" :direction="direction" size="50%" @open="draweropen" @close="close">
       <template #header>
         <h4>{{ props.title }}费用</h4>
       </template>
@@ -44,86 +43,90 @@
                 <el-input v-model="ruleFeeinfo.contactMobile" placeholder="请输入手机号" maxlength="11" show-word-limit />
               </el-form-item>
             </ElCol>
+            <ElCol :md="24" :lg="24">
+              <el-form-item label="费用类型" prop="contactMobile">
+                <el-radio-group v-model="ruleFeeinfo.productType">
+                  <el-radio v-for="(item, index) in ruleFeeinfo.insuranceTypeList" :key="item.value"
+                    :value="item.value">{{ item.label }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </ElCol>
           </el-form>
         </ElRow>
         <div style="padding-left: 40px;">
-          <el-tabs v-model="activeName" type="card" @tab-click="hledclick" style="position: relative;"
-            class="ruleFeetabs">
-            <el-tab-pane v-for="(item, index) in ruleFeeinfo.ptlAgreementCostExternalAddList" :key="index"
-              :label="item.productName" :name="item.productName">
-              <ElRow :gutter="20" class="m-top-20">
-                <el-form :model="item" label-width="80px" ref="feeFormRef" style="width: 100%;" :rules="feerules"
-                  class="flex a-c f-wrap" :size="fromSize">
-                  <ElCol :md="24" :lg="12">
-                    <el-form-item label="生效时间" prop="effectiveTime">
-                      <el-date-picker v-model="item.effectiveTime" style="width: 100%;" type="datetime"
-                        placeholder="选择生效时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
-                        time-format="HH:mm:ss" @change="handleStartDateChange($event, index)" />
-                    </el-form-item>
-                  </ElCol>
-                  <ElCol :md="24" :lg="12">
-                    <el-form-item label="失效时间" prop="failureTime">
-                      <el-date-picker v-model="item.failureTime" style="width: 100%;" type="datetime"
-                        placeholder="选择失效时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
-                        time-format="HH:mm:ss" :disabled-date="(date: any) => disabledEndDate(date, index)" />
-                    </el-form-item>
-                  </ElCol>
-                  <ElCol :md="24" :lg="12">
-                    <el-form-item label="审核方式" prop="auditMethod">
-                      <el-select v-model="item.auditMethod" placeholder="选择审核方式">
-                        <el-option label="自动审核" value="0" />
-                        <el-option label="手动审核" value="1" />
-                      </el-select>
-                    </el-form-item>
-                  </ElCol>
-                  <ElCol :md="24" :lg="12">
-                    <el-form-item label="是否现询" prop="isInquiry">
-                      <el-radio-group v-model="item.isInquiry">
-                        <el-radio value="0" size="large">是</el-radio>
-                        <el-radio value="1" size="large">否</el-radio>
-                      </el-radio-group>
-                    </el-form-item>
-                  </ElCol>
-                  <ElCol :md="24" :lg="12">
-                    <el-form-item label="优先级" prop="priorityLevel">
-                      <el-input-number style="width: 100%" v-model="item.priorityLevel" placeholder="请填写优先级" />
-                    </el-form-item>
-                  </ElCol>
-                  <ElCol :md="24" :lg="24">
-                    <el-form-item label="费用描述" prop="costDescribe">
-                      <el-input v-model="item.costDescribe" maxlength="500" placeholder="请输入费用描述" show-word-limit
-                        type="textarea" />
-                    </el-form-item>
-                  </ElCol>
-                </el-form>
-              </ElRow>
+          <ElRow :gutter="20" class="m-top-20">
+            <el-form :model="item" label-width="80px" ref="feeFormRef" style="width: 100%;" :rules="feerules"
+              class="flex a-c f-wrap" :size="fromSize">
+              <ElCol :md="24" :lg="12">
+                <el-form-item label="生效时间" prop="effectiveTime">
+                  <el-date-picker v-model="item.effectiveTime" style="width: 100%;" type="datetime" placeholder="选择生效时间"
+                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
+                    @change="handleStartDateChange($event, index)" />
+                </el-form-item>
+              </ElCol>
+              <ElCol :md="24" :lg="12">
+                <el-form-item label="失效时间" prop="failureTime">
+                  <el-date-picker v-model="item.failureTime" style="width: 100%;" type="datetime" placeholder="选择失效时间"
+                    format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" time-format="HH:mm:ss"
+                    :disabled-date="(date: any) => disabledEndDate(date, index)" />
+                </el-form-item>
+              </ElCol>
+              <ElCol :md="24" :lg="12">
+                <el-form-item label="审核方式" prop="auditMethod">
+                  <el-select v-model="item.auditMethod" placeholder="选择审核方式">
+                    <el-option label="自动审核" value="0" />
+                    <el-option label="手动审核" value="1" />
+                  </el-select>
+                </el-form-item>
+              </ElCol>
+              <ElCol :md="24" :lg="12">
+                <el-form-item label="是否现询" prop="isInquiry">
+                  <el-radio-group v-model="item.isInquiry">
+                    <el-radio value="0" size="large">是</el-radio>
+                    <el-radio value="1" size="large">否</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+              </ElCol>
+              <ElCol :md="24" :lg="12">
+                <el-form-item label="优先级" prop="priorityLevel">
+                  <el-input-number style="width: 100%" v-model="item.priorityLevel" placeholder="请填写优先级" />
+                </el-form-item>
+              </ElCol>
+              <ElCol :md="24" :lg="24">
+                <el-form-item label="费用描述" prop="costDescribe">
+                  <el-input v-model="item.costDescribe" maxlength="500" placeholder="请输入费用描述" show-word-limit
+                    type="textarea" />
+                </el-form-item>
+              </ElCol>
+            </el-form>
+          </ElRow>
 
-              <el-table :data="item.costExternalTypeAdds" style="width: 100%;" border
-                :header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }">
-                <template #empty>
-                  <div class="flex f-c a-c ">
-                    <img src="../../../../assets/images/empty.png" alt="">
-                    <span style="font-size: 14px;color: #909399;">暂无数据</span>
-                  </div>
-                </template>
-                <el-table-column prop="costType" label="类型"></el-table-column>
-                <el-table-column prop="inlet" label="入口比例" width="180" align="center">
-                  <template #default="scope">
-                    <el-input-number v-model="scope.row.inlet" :precision="2" controls-position="right"
-                      style="width: 100%;" :min="0" :max="100" @change="handelRK(scope)">
-                      <template #suffix>%</template>
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="export" label="出口比例" width="180" align="center">
-                  <template #default="scope">
-                    <el-input-number v-model="scope.row.export" :precision="2" controls-position="right"
-                      style="width: 100%;" :min="0" :max="100" @change="handelCK(scope)">
-                      <template #suffix>%</template>
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <!--                      <el-table-column prop="commission" label="手续费比例" width="180" align="center">
+          <el-table :data="item.costExternalTypeAdds" style="width: 100%;" border
+            :header-cell-style="{ 'background-color': '#F7F7F9', 'border-bottom': '1px solid #EEF1F6', 'font-size': '15px', 'color': '#333', 'padding': '10px 0' }">
+            <template #empty>
+              <div class="flex f-c a-c ">
+                <img src="../../../../assets/images/empty.png" alt="">
+                <span style="font-size: 14px;color: #909399;">暂无数据</span>
+              </div>
+            </template>
+            <el-table-column prop="costType" label="类型"></el-table-column>
+            <el-table-column prop="inlet" label="入口比例" width="180" align="center">
+              <template #default="scope">
+                <el-input-number v-model="scope.row.inlet" :precision="2" controls-position="right" style="width: 100%;"
+                  :min="0" :max="100" @change="handelRK(scope)">
+                  <template #suffix>%</template>
+                </el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column prop="export" label="出口比例" width="180" align="center">
+              <template #default="scope">
+                <el-input-number v-model="scope.row.export" :precision="2" controls-position="right"
+                  style="width: 100%;" :min="0" :max="100" @change="handelCK(scope)">
+                  <template #suffix>%</template>
+                </el-input-number>
+              </template>
+            </el-table-column>
+            <!--                      <el-table-column prop="commission" label="手续费比例" width="180" align="center">
                                           <template #default="scope">
                                             <el-input-number v-model="scope.row.commission" :precision="2" controls-position="right"
                                               style="width: 100%;" :min="0" :max="100">
@@ -131,25 +134,23 @@
                                             </el-input-number>
                                           </template>
                                         </el-table-column>-->
-                <el-table-column prop="addThrow" label="加投比例" width="180" align="center">
-                  <template #default="scope">
-                    <el-input-number v-model="scope.row.addThrow" :precision="2" controls-position="right"
-                      style="width: 100%;" :min="0" :max="100" @change="handelJT(scope)">
-                      <template #suffix>%</template>
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-                <el-table-column prop="keepPointRatio" label="留点比例" width="180" align="center">
-                  <template #default="scope">
-                    <el-input-number v-model="scope.row.keepPointRatio" :precision="2" controls-position="right"
-                      style="width: 100%;" :min="0" :max="100" @change="handelLD(scope)">
-                      <template #suffix>%</template>
-                    </el-input-number>
-                  </template>
-                </el-table-column>
-              </el-table>
-            </el-tab-pane>
-          </el-tabs>
+            <el-table-column prop="addThrow" label="加投比例" width="180" align="center">
+              <template #default="scope">
+                <el-input-number v-model="scope.row.addThrow" :precision="2" controls-position="right"
+                  style="width: 100%;" :min="0" :max="100" @change="handelJT(scope)">
+                  <template #suffix>%</template>
+                </el-input-number>
+              </template>
+            </el-table-column>
+            <el-table-column prop="keepPointRatio" label="留点比例" width="180" align="center">
+              <template #default="scope">
+                <el-input-number v-model="scope.row.keepPointRatio" :precision="2" controls-position="right"
+                  style="width: 100%;" :min="0" :max="100" @change="handelLD(scope)">
+                  <template #suffix>%</template>
+                </el-input-number>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
       </template>
       <template #footer>
@@ -183,8 +184,10 @@ interface ruleFeeinfo {
   ptlAgreementId: string,
   contactPerson: string,
   agreementTitle: string,
+  productType: string,
   contactMobile: string,
   ptlAgreementCostExternalAddList: any[],
+  insuranceTypeList: any[],
 }
 
 const emits = defineEmits(["cancel", 'save']);
@@ -193,7 +196,9 @@ const ruleFeeinfo = reactive<ruleFeeinfo>({
   agreementTitle: "",
   contactPerson: "",//对接人
   contactMobile: "",//手机号
+  productType: "",//费用类型
   ptlAgreementCostExternalAddList: [],//费用集合
+  insuranceTypeList: [],//费用类型集合
 });//规则费用集合
 const insuranceTypeIndex = ref(0);//险种区域下标
 const agreementActiveId = ref();//选中协议id
@@ -236,9 +241,17 @@ watch(props, () => {
 
   }
 })
+
+const item = computed(() => {
+  const obj = ruleFeeinfo.ptlAgreementCostExternalAddList.find(v => v.productId === ruleFeeinfo.productType)
+  return obj
+})
+
 onMounted(async () => {
   await loadDicts(['insurance_type'])
   const dict = getDict('insurance_type');
+  ruleFeeinfo.productType = dict[0].value
+  ruleFeeinfo.insuranceTypeList=dict
   agreementList();
   ruleFeeinfo.ptlAgreementCostExternalAddList = dict.map((val: any) => {
     const filteredList: any = filterCostTypeList(val.label);//根据险种匹配列表
@@ -337,43 +350,33 @@ const save = async (formEl: FormInstance | undefined | any) => {
   console.log('formEl', formEl)
   validateContactPerson();
   if (!formEl) return
-
-  const validationPromises = ruleFeeinfo.ptlAgreementCostExternalAddList.map((formRef: any, index: any) => {
-    // 轮询验证所有表单校验
-    // console.log('index', index, typeof index, activeName.value, formRef)
-    // console.log('insuranceTypeIndex', insuranceTypeIndex.value)
-    return new Promise((resolve, reject) => {
-      if (formRef) {
-        formEl[index].validate((valid: boolean) => {
-          if (valid) {
-
-            resolve(true);
-          } else {
-            reject(index);
-          }
-        });
-      } else {
-        reject(index);
+  formEl.validate((valid: boolean) => {
+    if (valid) {
+      if (props.addMethod == 'details') {
+        ruleFeeinfo.ptlAgreementId = agreementActiveId.value ? agreementActiveId.value : props.agreementInfo.id;
       }
-    });
-  });
-  try {
-    await Promise.all(validationPromises);
-    // 所有表单验证通过后执行提交逻辑
-    if (props.addMethod == 'details') {
-      ruleFeeinfo.ptlAgreementId = agreementActiveId.value ? agreementActiveId.value : props.agreementInfo.id;
+      ruleFeeinfo.ptlAgreementCostExternalAddList = ruleFeeinfo.ptlAgreementCostExternalAddList.filter(v => v.productId === ruleFeeinfo.productType)
+      emits("save", ruleFeeinfo)
     }
-    emits("save", ruleFeeinfo)
-  } catch (error) {
-    const invalidIndex: any = error; // 获取未通过校验的表单索引
-    const invalidForm = ruleFeeinfo.ptlAgreementCostExternalAddList[invalidIndex]; // 获取未通过校验的表单对象
-    activeName.value = invalidForm.productName;
-    ElMessage({
-      type: 'error',
-      message: `${ruleFeeinfo.ptlAgreementCostExternalAddList[invalidIndex].productName}费用未填写完整`,
-      plain: true,
-    });
-  }
+  });
+
+  // try {
+  //   await Promise.all(validationPromises);
+  //   // 所有表单验证通过后执行提交逻辑
+  //   if (props.addMethod == 'details') {
+  //     ruleFeeinfo.ptlAgreementId = agreementActiveId.value ? agreementActiveId.value : props.agreementInfo.id;
+  //   }
+  //   emits("save", ruleFeeinfo)
+  // } catch (error) {
+  //   const invalidIndex: any = error; // 获取未通过校验的表单索引
+  //   const invalidForm = ruleFeeinfo.ptlAgreementCostExternalAddList[invalidIndex]; // 获取未通过校验的表单对象
+  //   activeName.value = invalidForm.productName;
+  //   ElMessage({
+  //     type: 'error',
+  //     message: `${ruleFeeinfo.ptlAgreementCostExternalAddList[invalidIndex].productName}费用未填写完整`,
+  //     plain: true,
+  //   });
+  // }
 };
 // 过滤方法
 const ptlAgreementCostTypeList = [