机票行程代码搜索框添加

src/components/Resource/TicketBlackCode.vue

@@ -2,7 +2,6 @@
     <div>
         <div class="communal-list">
             <div>
-
                 <div class="communal-title">
                     <div>机票行程代码录入</div>
                 </div>
@@ -14,6 +13,14 @@
                                 :value="item.id">
                             </el-option>
                         </el-select>
+                        <el-input 
+                            v-model="searchKeyword" 
+                            placeholder="请输入标题关键词搜索" 
+                            clearable
+                            style="width: 250px;"
+                            class="search-input-red"
+                            @input="handleSearch">
+                        </el-input>
                     </div>
                     <div style="width: 20%;text-align: right;">
                         <el-button type="primary" style="margin-left: 10px;" @click="addIf">新增</el-button>
@@ -35,7 +42,7 @@
                 </div>
             </div>
             <template>
-                <el-table :data="tableDatas.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
+                <el-table :data="paginatedData" border
                     style="width: 100%" v-loading="loading" element-loading-text="拼命加载中...">
                     <el-table-column prop="num" label="序 号" width="55">
                         <template slot-scope="scope">
@@ -69,7 +76,7 @@
             <div class="block">
                 <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="currentPage" :page-sizes="[10, 12, 15, 20]" :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next" :total="tableDatas.length">
+                    layout="total, sizes, prev, pager, next" :total="filteredTableData.length">
                 </el-pagination>
             </div>
         </div>
@@ -95,7 +102,22 @@ export default {
             DiIdSelect: '',
             DiId: '',
             DelegationSelect: [],
-            DelegationInfo: {}
+            DelegationInfo: {},
+            // 新增搜索相关字段
+            filteredTableData:[], // 过滤后的数据
+            searchKeyword: ''     // 搜索关键词
+        }
+    },
+    computed: {
+        // 计算属性：获取分页后的数据
+        paginatedData() {
+            // ✅ 添加安全判断
+            if (!this.filteredTableData || !Array.isArray(this.filteredTableData)) {
+                return [];
+            }
+            const start = (this.currentPage - 1) * this.pageSize;
+            const end = start + this.pageSize;
+            return this.filteredTableData.slice(start, end);
         }
     },
     methods: {
@@ -108,6 +130,66 @@ export default {
         handleCurrentChange(val) {
             this.currentPage = val;
         },
+        /**
+         * 搜索处理
+         */
+        handleSearch() {
+            this.currentPage = 1; // 重置到第一页
+            this.filterData();
+        },
+        
+        /**
+         * 清除搜索
+         */
+        clearSearch() {
+            this.searchKeyword = '';
+            // ✅ 确保 tableData 存在
+            this.filteredTableData = this.tableData ? [...this.tableData] : [];
+            this.currentPage = 1;
+        },
+        
+        /**
+         * 搜索框清空时处理
+         */
+        handleSearchClear() {
+            this.clearSearch();
+        },
+        
+        /**
+         * 过滤数据（根据标题搜索）
+         */
+        filterData() {
+            // ✅ 确保 tableData 存在
+            if (!this.tableData || !Array.isArray(this.tableData)) {
+                this.filteredTableData = [];
+                return;
+            }
+            
+            if (!this.searchKeyword || this.searchKeyword.trim() === '') {
+                this.filteredTableData = [...this.tableData];
+            } else {
+                const keyword = this.searchKeyword.trim().toLowerCase();
+                this.filteredTableData = this.tableData.filter(item => {
+                    if (item.title && item.title.toLowerCase().includes(keyword)) {
+                        return true;
+                    }
+                    return false;
+                });
+            }
+        },
+        
+        /**
+         * 高亮显示搜索关键词
+         */
+        highlightKeyword(text) {
+            if (!this.searchKeyword || !text) return text;
+            const keyword = this.searchKeyword.trim();
+            if (keyword === '') return text;
+            
+            const escapeRegex = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+            const regex = new RegExp(`(${escapeRegex(keyword)})`, 'gi');
+            return text.replace(regex, '<span style="background-color: #ffeb3b; color: #000; padding: 0 2px; border-radius: 2px;">$1</span>');
+        },
         //下拉框数据绑定
         DelegationSelectFun() {
             var url = "/api/Business/GetGroupNameList"
@@ -159,13 +241,23 @@ export default {
 
                 if (res.data.code == 200) {
 
-                    that.tableData = res.data.data.ticketBlackCodes;
-                    that.DelegationInfo = res.data.data.delegationInfo
+                    // ✅ 不使用可选链操作符，改用传统写法
+                    that.tableData = (res.data.data && res.data.data.ticketBlackCodes) ? res.data.data.ticketBlackCodes : [];
+                    that.DelegationInfo = (res.data.data && res.data.data.delegationInfo) ? res.data.data.delegationInfo : {};
                     that.tableDatas = that.tableData;
-                    if (that.tableDatas.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize).length == 0) {
-                        if (that.currentPage > 1) {
-                            that.currentPage = that.currentPage - 1;
-                        }
+
+                    // 初始化过滤数据
+                    that.filteredTableData = that.tableData ? [...that.tableData] : [];
+
+                    if (that.searchKeyword) {
+                        that.filterData();
+                    }
+
+                    // 安全判断分页
+                    const hasData = that.filteredTableData && that.filteredTableData.length > 0;
+                    const start = (that.currentPage - 1) * that.pageSize;
+                    if (hasData && start >= that.filteredTableData.length && that.currentPage > 1) {
+                        that.currentPage = that.currentPage - 1;
                     }
                 }
                 that.loading = false
@@ -287,4 +379,55 @@ export default {
     margin-left: 10px;
     padding: 8px 20px;
 }
+
+
+</style>
+<style scoped>
+/* 红色边框搜索框样式 */
+.search-input-red >>> .el-input__inner {
+    border-color: #f56c6c;
+    transition: all 0.3s;
+}
+
+.search-input-red >>> .el-input__inner:hover {
+    border-color: #f56c6c;
+    box-shadow: 0 0 0 1px rgba(245, 108, 108, 0.1);
+}
+
+.search-input-red >>> .el-input__inner:focus {
+    border-color: #f56c6c;
+    box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
+    outline: none;
+}
+
+/* 搜索按钮样式 */
+.search-input-red >>> .el-input-group__append {
+    border-color: #f56c6c;
+    background-color: #fff;
+    color: #f56c6c;
+    transition: all 0.3s;
+}
+
+.search-input-red >>> .el-input-group__append:hover {
+    background-color: #fef0f0;
+    border-color: #f56c6c;
+}
+
+.search-input-red >>> .el-input-group__append .el-button {
+    color: #f56c6c;
+}
+
+.search-input-red >>> .el-input-group__append .el-button:hover {
+    color: #f56c6c;
+    background-color: transparent;
+}
+
+/* 清空按钮样式（如果需要） */
+.search-input-red >>> .el-input__clear {
+    color: #f56c6c;
+}
+
+.search-input-red >>> .el-input__clear:hover {
+    color: #f56c6c;
+}
 </style>