费用条数显示完善

src/views/quoteConfig/agreement/agreementDetails.vue

@@ -140,7 +140,7 @@
                 <p class=" m-top-10" style="font-size: 14px;letter-spacing: 2px;">规则因子描述：{{ item.ruleDescription }}</p>
               </div>
               <div class="header-content" v-if="item.ruleFeeShow">
-                <el-button plain type="primary" @click=" ruleFeeAdd(item)" class="m-top-10 m-btn-10">添加费用
+                <el-button plain type="primary" @click="ruleFeeAdd(item)" class="m-top-10 m-btn-10">添加费用
                   <template #icon>
                     <el-icon>
                       <Plus />
@@ -153,22 +153,31 @@
                     :label="costitem.productName" :name="costitem.productName">
                     <div class="flex justify-between items-center">
                       <div class="">
-                        <span class="strong">{{ costitem.productName }}费用（{{ costitem.ptlAgreementCostVoList.length
-                        }}条）</span>
+                        <span class="strong">{{ costitem.productName }}费用（{{
+                          showCostVoList(costitem.ptlAgreementCostVoList,
+                          item).length
+                          }}条）</span>
                         <el-button type="primary" link @click="handleUpdateValidDate()"> 批量设置有效期
                         </el-button>
                         <el-button type="primary" link @click="handleUpdateCostRatio()"> 批量设置比例
                         </el-button>
+                        <el-button type="primary" link @click="handleDelectCostitem()"> 批量删除
+                        </el-button>
                         <!-- <el-button type="primary" link @click="handleCopy(item, costitem)"> 批量复制
                         </el-button> -->
                       </div>
-                      <el-input v-model="item.searchInput" style="width: 240px" placeholder="输入费用规则筛选" />
+                      <div class="flex items-center">
+                        <el-date-picker class="m-r-20px" v-model="item.date" type="date" placeholder="选择有效期进行筛选" />
+                        <el-input-tag v-model="item.searchInput" style="width: 240px" placeholder="输入费用规则筛选" />
+                      </div>
                     </div>
-                    <ComplexTable showSelect
-                      :tableData="costitem.ptlAgreementCostVoList.filter(v => v.costDescribe.includes(item.searchInput || '') || v.costRules.includes(item.searchInput || ''))"
+                    <ComplexTable showSelect :tableData="showCostVoList(costitem.ptlAgreementCostVoList, item)"
                       :columns="columns" :showIndex="false" tableheight="auto" :columnwidth="200"
                       @selectionChange="(arr) => costIds = arr" @select-all="(arr) => costIds = arr">
-                      <template #customSlot="{ data, bodyCell }">
+                      <template #costDescribe="{ data, bodyCell }">
+                        <div class="whitespace-normal">{{ data.costDescribe }}</div>
+                      </template>
+                      <template #costRules="{ data, bodyCell }">
                         <div class="whitespace-normal">{{ data.costRules }}</div>
                       </template>
                       <template v-slot:operation="scope">
@@ -180,7 +189,6 @@
                         </el-button>
                         <el-button type="primary" link @click="costitemDel(scope.operationData.id)"> 删除
                         </el-button>
-
                       </template>
                     </ComplexTable>
                   </el-tab-pane>
@@ -675,6 +683,25 @@ const agreementRulesList = () => {
     }
   });
 }
+
+const showCostVoList = (list, item) => {
+  console.log("🚀 ~ showCostVoList ~ list,item:", list, item)
+  let showList = list
+  if (item.searchInput) {
+    showList = showList.filter(v => {
+      return item.searchInput.every(k => v.costDescribe.includes(k) || v.costRules.includes(k))
+    })
+  }
+  if (item.date) {
+    showList = showList.filter(v => {
+      const startTime = new Date(v.effectiveTime).getTime()
+      const endTime = new Date(v.failureTime).getTime()
+      const date = new Date(item.date).getTime()
+      return startTime <= date && endTime >= date
+    })
+  }
+  return showList
+}
 //修改规则
 const ruleEdit = (id: string) => {
   rulesAttrListInfo.id = id;
@@ -808,7 +835,7 @@ const columns = computed(() => [
       return `起${row.effectiveTime}\n止${row.failureTime}`
     }
   },
-  { prop: "costDescribe", label: "费用规则名称", width: '240', },
+  { prop: "costDescribe", component: 'customSlot', label: "费用规则名称", width: '240', },
   { prop: "priorityLevel", label: "优先级", width: '100', },
   { prop: "costRules", component: 'customSlot', label: "费用规则", width: '240', },
   {
@@ -987,6 +1014,31 @@ const costitemDel = (id: string) => {
       });
     })
 }
+//批量删除费用
+const handleDelectCostitem = () => {
+  ElMessageBox.confirm(
+    '确定要删除该费用，请确认是否删除？',
+    '删除费用',
+    {
+      confirmButtonText: '确定删除',
+      type: 'error',
+      center: true,
+      confirmButtonClass: 'el-button--danger',
+    }
+  )
+    .then(() => {
+      api.agreementApi.AgreementFeedeleteByIds(costIds.value).then((res: any) => {
+        if (res.code == '200') {
+          agreementRulesList();
+          ElMessage({
+            type: 'success',
+            message: res.msg,
+            plain: true,
+          })
+        }
+      });
+    })
+}
 
 const copyDialog = ref(false)
 const costIds = ref([])
@@ -1212,8 +1264,8 @@ const costitemCopy = () => {
     api.agreementApi.AgreementFeecopy(params).then((res: any) => {
       if (res.code == '200') {
         agreementRulesList();
-        if(res.msg) ElMessage.warning(res.msg)
-        if(!res.msg) ElMessage.success('复制成功')
+        if (res.msg) ElMessage.warning(res.msg)
+        if (!res.msg) ElMessage.success('复制成功')
         copyDialog.value = false
       }
     });