多条件搜索

src/views/distribution/turndelivery/deliveryDiscuss.vue

@@ -270,7 +270,7 @@
                     <div class="el_multifunctional">
                       <el-input
                         v-model="multifunctional"
-                        placeholder="请输入要搜索的值"
+                        placeholder="请输入要搜索的值,多条件用英文逗号拼接"
                         clearable
                         @clear='soclear'
                       />
@@ -320,7 +320,7 @@
                           align="center"
                         >
                           <template #default="props">
-                            <span :id="props.row[item.prop]" :class="props.row[item.prop] == multifunctional ? 'static-class' :  ''">{{
+                            <span :id="props.row[item.prop]" :class="props.row[item.prop] == multifunctional &&  props.row[item.prop]? 'static-class' :  ''">{{
                               props.row[item.prop] ? props.row[item.prop] : '/'
                             }}</span>
                           </template>
@@ -1887,34 +1887,62 @@ const soclear=()=>{
   SearchFu()
 }
 
-function scrollToElementWithPartialId(partialId) {
+// function scrollToElementWithPartialId(partialId) {
+//     // 首先清空之前所有元素的颜色样式
+//     document.querySelectorAll('[id]').forEach(function(el) {
+//         el.style.backgroundColor = ''; // 移除背景颜色
+//         el.style.color = ''; // 移除文字颜色
+//     });
+
+//     // 现在开始搜索含有 partialId 的元素
+//     const allElements = document.querySelectorAll(`[id*="${partialId}"]`);
+//     if (allElements.length > 0) {
+//         // 获取第一个匹配的元素
+//         const targetElement = allElements[0];
+//         // 添加背景颜色和文字颜色
+//         targetElement.style.backgroundColor = '#ff0000'; // 设置背景颜色为红色
+//         targetElement.style.color = '#fff'; // 设置文字颜色为白色
+//         // 将匹配元素滚动到视野区域
+//         targetElement.scrollIntoView();
+//     }
+// }
+function scrollToElementWithinTableRow(partialIdString) {
     // 首先清空之前所有元素的颜色样式
-    document.querySelectorAll('[id]').forEach(function(el) {
-        el.style.backgroundColor = ''; // 移除背景颜色
-        el.style.color = ''; // 移除文字颜色
+    const tableRows = document.querySelectorAll('tr');
+    tableRows.forEach(function(row) {
+        const cells = row.querySelectorAll('[id]');
+        cells.forEach(function(cell) {
+            cell.style.backgroundColor = '#ffffff'; // 移除背景颜色
+            cell.style.color = '#000'; // 移除文字颜色
+        });
     });
 
-    // 现在开始搜索含有 partialId 的元素
-    const allElements = document.querySelectorAll(`[id*="${partialId}"]`);
-    if (allElements.length > 0) {
-        // 获取第一个匹配的元素
-        const targetElement = allElements[0];
-        // 添加背景颜色和文字颜色
-        targetElement.style.backgroundColor = '#ff0000'; // 设置背景颜色为红色
-        targetElement.style.color = '#fff'; // 设置文字颜色为白色
-        // 将匹配元素滚动到视野区域
-        targetElement.scrollIntoView();
+    // 将输入的逗号分隔的字符串拆分成数组
+    const partialIds = partialIdString.split(',').map(id => id.trim());
+    // 通过遍历每一行来检查是否每一个partialId都存在
+    for (let row of tableRows) {
+        // 检查这一行是否包含所有的partialIds
+        if (partialIds.every(partialId => row.querySelector(`[id*="${partialId}"]`))) {
+            // 如果匹配，设置背景颜色和文字颜色
+            const cells = row.querySelectorAll('[id]');
+            cells.forEach(function(cell) {
+                cell.style.backgroundColor = ''; // 设置背景颜色为红色
+                cell.style.color = ''; // 设置文字颜色为白色
+            });
+            // 将这一行滚动到视野区域
+            row.scrollIntoView();
+            break; // 匹配到了就跳出循环
+        }
     }
 }
-
 // 编辑多功能搜索
 const SearchFu = () => {
   if(multifunctional.value){
-    scrollToElementWithPartialId(multifunctional.value)
+    scrollToElementWithinTableRow(multifunctional.value)
   }else{
     document.querySelectorAll('[id]').forEach(function(el) {
         el.style.backgroundColor = ''; // 移除背景颜色
-        el.style.color = ''; // 移除文字颜色
+        el.style.color =''; // 移除文字颜色
     });
   }