费用规则展示形式优化

src/views/quoteConfig/agreement/agreementDetails.vue

@@ -29,7 +29,7 @@
             <el-tag type="primary" style="margin-right: 20px;">{{
               getDict('is_enable').find(val => val.value == agreementInfo.isEnable)?.label}}</el-tag>
             <el-tag type="success">{{getDict('valid_status').find(val => val.value == agreementInfo.validStatus)?.label
-            }}</el-tag>
+              }}</el-tag>
           </div>
         </div>
         <el-descriptions :column="3" style="margin-top: 10px;">
@@ -51,9 +51,9 @@
         <el-tab-pane label="协议信息" name="agreementInfo">
           <el-descriptions title="基本信息" class="m-top-20" :column="3">
             <el-descriptions-item label="协议名称：">{{ agreementInfo.agreementTitle
-              }}</el-descriptions-item>
+            }}</el-descriptions-item>
             <el-descriptions-item label="协议简称：">{{ agreementInfo.agreementAbbreviation
-              }}</el-descriptions-item>
+            }}</el-descriptions-item>
             <el-descriptions-item label="协议生效时间：">{{ agreementInfo.startDate }}</el-descriptions-item>
             <el-descriptions-item label="协议失效时间：">{{ agreementInfo.endDate }}</el-descriptions-item>
             <el-descriptions-item label="是否含增值税结算：">
@@ -117,7 +117,7 @@
                   <div class="flex a-c">
                     <img src="../../../assets/images/fee.png" alt="">
                     <span style="margin-right: 30px;font-size: 16px;" class="strong m-left-10">承保规则一{{ index + 1
-                    }}</span>
+                      }}</span>
                   </div>
                   <div class="flex">
                     <el-button link type="primary" :icon="View"
@@ -151,7 +151,7 @@
                   <el-tab-pane v-for="(costitem, costindex) in item.costVoList" :key="costindex"
                     :label="costitem.productName" :name="costitem.productName">
                     <span class="strong">{{ costitem.productName }}费用（{{ costitem.ptlAgreementCostVoList.length
-                      }}条）</span>
+                    }}条）</span>
                     <el-button type="primary" link @click="handleUpdateValidDate()"> 批量设置有效期
                     </el-button>
                     <el-button type="primary" link @click="handleUpdateCostRatio()"> 批量设置比例
@@ -161,6 +161,9 @@
                     <ComplexTable showSelect :tableData="costitem.ptlAgreementCostVoList" :columns="columns"
                       :showIndex="false" tableheight="auto" :columnwidth="200" @selectionChange="(arr) => costIds = arr"
                       @select-all="(arr) => costIds = arr">
+                      <template #customSlot="{ data, bodyCell }">
+                        <div class="whitespace-normal">{{ data.costRules }}</div>
+                      </template>
                       <template v-slot:operation="scope">
                         <el-button type="primary" link
                           @click="operatorTrajectoryRef.operAtorTrajectory(scope.operationData.id)"> 查看轨迹
@@ -257,6 +260,7 @@
         <ComplexTable :tableData="tableData" tableheight="calc(100vh - 410px)" :showOperation="false"
           :columns="columns1" :columnwidth="200" :showSelect="true" :pageInfo="pageInfo" @getList="getList"
           @selectionChange="selectionChange" uniqueIdName="costId">
+
         </ComplexTable>
       </div>
       <template #footer>
@@ -783,7 +787,7 @@ const ruleFeeHeaderTitle = ref();//编辑弹窗title
 const costitemEditInfo = ref();
 const RulesInfo = ref({});
 const columns = computed(() => [
-    {
+  {
     prop: "effectiveTime", label: "有效期", width: '200',
     formatter: (row: any) => {
       return `起${row.effectiveTime}\n止${row.failureTime}`
@@ -791,7 +795,7 @@ const columns = computed(() => [
   },
   { prop: "costDescribe", label: "费用规则名称", width: '240', },
   { prop: "priorityLevel", label: "优先级", width: '100', },
-  { prop: "costRules", label: "费用规则", width: '240', },
+  { prop: "costRules", component: 'customSlot', label: "费用规则", width: '240', },
   {
     prop: "ptlAgreementCostTypeList", label: "交强险费用", width: '300', formatter: (row: any) => {
       let info = row.ptlAgreementCostTypeList.find((val: any) => val.costType == '交强险');