报价 补录展开的校验范围建议只到文字这

src/views/additionalOrder/additional/index.vue

@@ -37,10 +37,10 @@
         {{ item.text }}
       </a>
     </div>
-    <el-collapse v-model="activeName" class="content-box">
+    <el-collapse v-model="activeName" class="content-box" ref="collapse">
       <el-form ref="AdditionalFormRefs" :model="additionalForm" :rules="additionalRules">
         <div id="car">
-          <el-collapse-item name="car">
+          <el-collapse-item disabled name="car">
             <template #title>
               <span class="title" :ref="(el) => setSectionRef(el, 0)" id="car">
                 车辆信息
@@ -423,16 +423,22 @@
               </el-col>
             </el-row>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('car', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
         </div>
         <div id="ower">
-          <el-collapse-item name="ower">
+          <el-collapse-item disabled name="ower">
             <template #title>
               <span class="title" :ref="(el) => setSectionRef(el, 1)" id="ower">
                 车主信息
@@ -728,14 +734,20 @@
               </el-col>
             </el-row>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('ower', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
-          <el-collapse-item name="ower1">
+          <el-collapse-item disabled name="ower1">
             <template #title>
               <span class="title">
                 投保人信息
@@ -975,14 +987,20 @@
               </el-col>
             </el-row>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('ower1', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
-          <el-collapse-item name="ower2">
+          <el-collapse-item disabled name="ower2">
             <template #title>
               <span class="title">
                 被投保人信息
@@ -1220,16 +1238,22 @@
               </el-col>
             </el-row>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('ower2', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
         </div>
         <div id="insurance">
-          <el-collapse-item name="insurance">
+          <el-collapse-item disabled name="insurance">
             <template #title>
               <span class="title" :ref="(el) => setSectionRef(el, 2)" id="insurance">险种信息</span>
             </template>
@@ -1240,7 +1264,7 @@
                   <el-radio-group v-model="additionalForm.productId">
                     <el-radio v-for="item in optionObj.insuranceType" :key="item.value" :value="item.value">{{
                       item.label
-                    }}</el-radio>
+                      }}</el-radio>
                   </el-radio-group>
                 </el-form-item>
                 <el-table :data="insuranceData">
@@ -1408,16 +1432,22 @@
               </div>
             </div>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('insurance', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
         </div>
         <div id="quote">
-          <el-collapse-item name="quote">
+          <el-collapse-item disabled name="quote">
             <template #title>
               <span class="title" :ref="(el) => setSectionRef(el, 3)" id="quote">投保信息</span>
             </template>
@@ -1613,12 +1643,23 @@
             <template #icon="{ isActive }">
               <span class="icon">
                 <el-button link type="primary" icon="Camera" @click.stop="handleUpload">影像上传</el-button>&nbsp;
+                <div class="flex items-center cursor-pointer" @click="setActiveNames('quote', isActive)">
+                  <span class="icon-ele flex a-c ">
+                    {{ isActive ? '收起' : '展开' }}
+                  </span>
+                  <el-icon v-if="isActive" color="#333">
+                    <ArrowDownBold />
+                  </el-icon>
+                  <el-icon v-else color="#333">
+                    <ArrowUpBold />
+                  </el-icon>
+                </div>
               </span>
             </template>
           </el-collapse-item>
         </div>
         <div id="history">
-          <el-collapse-item name="history1">
+          <el-collapse-item disabled name="history1">
             <template #title>
               <span class="title" :ref="(el) => setSectionRef(el, 4)" id="history">费用信息</span>
             </template>
@@ -1809,14 +1850,20 @@
               </tbody>
             </table>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('history1', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
-          <el-collapse-item name="history2">
+          <el-collapse-item disabled name="history2">
             <template #title>
               <span class="title" :ref="(el) => setSectionRef(el, 5)" id="equities">电子保单</span>
             </template>
@@ -1945,16 +1992,22 @@
               </el-form-item>
             </div>
             <template #icon="{ isActive }">
-              <span class="icon">
+              <span class="icon" @click="setActiveNames('history2', isActive)">
                 <span class="icon-ele">
                   {{ isActive ? '收起' : '展开' }}
                 </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
               </span>
             </template>
           </el-collapse-item>
         </div>
         <!-- <div id="equities">
-              <el-collapse-item name="equities">
+              <el-collapse-item disabled name="equities">
                   <template #title>
                       <span class="title">权益信息</span>
                   </template>
@@ -4578,6 +4631,14 @@ const setSectionRef = (el: HTMLElement | null, index: number) => {
   }
 }
 
+const collapse = ref(null)
+const setActiveNames = (name, isActive) => {
+  let activeNames = collapse?.value?.activeNames ?? []
+  if (isActive) activeNames = activeNames.filter(v => v !== name)
+  if (!isActive) activeNames.push(name)
+  collapse?.value?.setActiveNames(activeNames)
+}
+
 // ---------- 3. Intersection Observer 核心逻辑 ----------
 let observer: IntersectionObserver | null = null
 
@@ -4629,6 +4690,10 @@ onUnmounted(() => {
   --el-color-primary-light-9: #fff
 }
 
+:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
+  cursor: unset;
+}
+
 .costTable {
   width: calc(100% - 48px);
   border: 1px solid #ebeef5;
@@ -4829,6 +4894,14 @@ onUnmounted(() => {
       padding-right: 24px;
       display: flex;
       align-items: center;
+      cursor: pointer;
+
+      .icon-ele {
+        font-size: 14px;
+        margin-left: 10px;
+        color: #333;
+        margin-right: 6px;
+      }
     }
 
     .insuranceInfo {

src/views/insurancePolicy/index.vue

@@ -32,9 +32,9 @@
         </el-col>
       </el-row>
       <!-- 可折叠面板：包含各种信息模块 -->
-      <el-collapse v-model="activeName">
+      <el-collapse v-model="activeName" ref="collapse">
         <!-- 车辆信息面板 -->
-        <el-collapse-item name="car">
+        <el-collapse-item name="car" disabled>
           <template #title>
             <span class="title">车辆信息</span>
           </template>
@@ -233,20 +233,22 @@
               <!-- 证件识别按钮 -->
               <el-button link type="primary" @click.stop="handleRecognition('clxx')"><img
                   src="@/assets/images/insurancePolicy/sao.png" class="myIcon" />证件识别</el-button>
-              <span class="icon-ele flex a-c ">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('car', isActive)">
+                <span class="icon-ele flex a-c ">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
         <!-- 车主信息面板 -->
-        <el-collapse-item name="owner">
+        <el-collapse-item name="owner" disabled>
           <template #title>
             <span class="title">车主信息</span>
           </template>
@@ -387,19 +389,21 @@
             <div class="icon">
               <el-button link type="primary" @click.stop="handleRecognition('czxx')"><img
                   src="@/assets/images/insurancePolicy/sao.png" class="myIcon" />证件识别</el-button>
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('owner', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
-        <el-collapse-item name="owner1">
+        <el-collapse-item name="owner1" disabled>
           <template #title>
             <div class="title">
               投保人信息
@@ -532,19 +536,21 @@
             <div class="icon">
               <el-button link type="primary" @click.stop="handleRecognition('tbrxx')"><img
                   src="@/assets/images/insurancePolicy/sao.png" class="myIcon" />证件识别</el-button>
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('owner1', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
-        <el-collapse-item name="owner2">
+        <el-collapse-item name="owner2" disabled>
           <template #title>
             <div class="title">
               被保人信息
@@ -679,19 +685,21 @@
             <div class="icon">
               <el-button link type="primary" @click.stop="handleRecognition('bbrxx')"><img
                   src="@/assets/images/insurancePolicy/sao.png" class="myIcon" />证件识别</el-button>
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('owner2', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
-        <el-collapse-item name="tax">
+        <el-collapse-item name="tax" disabled>
           <template #title>
             <div class="title">
               车船税
@@ -821,19 +829,21 @@
           </div>
           <template #icon="{ isActive }">
             <div class="icon">
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('tax', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
-        <el-collapse-item name="insurance">
+        <el-collapse-item name="insurance" disabled>
           <template #title>
             <div class="title">
               投保信息
@@ -898,19 +908,21 @@
           </div>
           <template #icon="{ isActive }">
             <div class="icon">
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('insurance', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
-        <el-collapse-item name="company">
+        <el-collapse-item name="company" disabled>
           <template #title>
             <span class="title">
               报价公司
@@ -974,7 +986,7 @@
                                     :value="item.value"></el-option>
                                 </el-select>
                                 <span v-if="props.row.kindName == '乘客责任险'">*{{ insurancePolicyForm.seatCount - 1
-                                  }}/座</span>
+                                }}/座</span>
                               </div>
                             </template>
                           </el-table-column>
@@ -1046,7 +1058,7 @@
                           <el-table-column label="产品名称" prop="productName" align="center">
                             <template #default="props">
                               <el-button link type="primary" @click="getJYXDetail(props.row)">{{ props.row.productName
-                                }}</el-button>
+                              }}</el-button>
                             </template>
                           </el-table-column>
                           <el-table-column label="数量" align="center">
@@ -1099,12 +1111,12 @@
                             <div class="Factor-item flex a-c f-c ">
                               <span class="item-header flex a-c ">交强续保</span>
                               <span>{{ ['', '新保', '续保', '转保'][Number(scope.row.quoteResult?.scoreVo?.jqRenewal)] || '--'
-                              }}</span>
+                                }}</span>
                             </div>
                             <div class="Factor-item flex a-c f-c ">
                               <span class="item-header flex a-c ">商业续保</span>
                               <span>{{ ['', '新保', '续保', '转保'][Number(scope.row.quoteResult?.scoreVo?.syRenewal)] || '--'
-                              }}</span>
+                                }}</span>
                             </div>
                             <div class="Factor-item flex a-c f-c ">
                               <span class="item-header flex a-c ">总折扣率</span>
@@ -1274,19 +1286,21 @@
           </el-table>
           <template #icon="{ isActive }">
             <div class="icon">
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('company', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
-        <el-collapse-item name="history">
+        <el-collapse-item name="history" disabled>
           <template #title>
             <span class="title">
               报价历史
@@ -1351,15 +1365,17 @@
           </el-table>
           <template #icon="{ isActive }">
             <div class="icon">
-              <span class="icon-ele">
-                {{ isActive ? '收起' : '展开' }}
-              </span>
-              <el-icon v-if="isActive" color="#333">
-                <ArrowDownBold />
-              </el-icon>
-              <el-icon v-else color="#333">
-                <ArrowUpBold />
-              </el-icon>
+              <div class="flex items-center cursor-pointer" @click="setActiveNames('history', isActive)">
+                <span class="icon-ele">
+                  {{ isActive ? '收起' : '展开' }}
+                </span>
+                <el-icon v-if="isActive" color="#333">
+                  <ArrowDownBold />
+                </el-icon>
+                <el-icon v-else color="#333">
+                  <ArrowUpBold />
+                </el-icon>
+              </div>
             </div>
           </template>
         </el-collapse-item>
@@ -4047,13 +4063,20 @@ const handleQuotationView = (obj) => {
   quotationRef.value.show(obj.quoteResult.ordersNo)
 }
 
+const collapse = ref(null)
+const setActiveNames = (name, isActive) => {
+  let activeNames = collapse?.value?.activeNames ?? []
+  if (isActive) activeNames = activeNames.filter(v => v !== name)
+  if (!isActive) activeNames.push(name)
+  collapse?.value?.setActiveNames(activeNames)
+}
+
 // 组件挂载后执行初始化操作
 onMounted(() => {
   getAreaList()    // 获取地区列表
   initDept()       // 初始化部门数据
   initOption()     // 初始化下拉选项
   initDetail()   // 如果有订单号，初始化详情
-
 })
 
 </script>
@@ -4072,6 +4095,10 @@ onMounted(() => {
 <style scoped lang="scss">
 @use "@/assets/styles/common/style";
 
+:deep(.el-collapse-item.is-disabled .el-collapse-item__header) {
+  cursor: unset;
+}
+
 .insurancePolicy {
   width: calc(100% - 48px);
   height: calc(100vh - 128px);