Kaynağa Gözat

自定义输入框下拉组件自动匹配第一个输入的值

dengshaobo 3 hafta önce
ebeveyn
işleme
68dc83ba91

+ 7 - 5
src/views/exam/abnormal/abnormal.vue

@@ -5,14 +5,15 @@
         <div class="left_nav">
             <div class="nav_list">
                 <!-- abnormalType:2,//页面异常类型   2-定位异常 3-考号异常 4-客观题异常 5-选做题异常 6-空白卷异常  7 缺页异常 -->
-                <div class="nav_item" :class="abnormalType==2?'item_active':''" @click="AbnormalChanage(2)">
-                    <div class="nav_number" v-if="abnormalObj.locationErrorNum>0">{{ abnormalObj.locationErrorNum }}</div>
-                    定位异常
-                </div>
                 <div class="nav_item" :class="abnormalType==3?'item_active':''" @click="AbnormalChanage(3)">
                     <div class="nav_number"  v-if="abnormalObj.examNumberErrorNum>0">{{ abnormalObj.examNumberErrorNum }}</div>
                     考号异常
                 </div>
+                <div class="nav_item" :class="abnormalType==2?'item_active':''" @click="AbnormalChanage(2)">
+                    <div class="nav_number" v-if="abnormalObj.locationErrorNum>0">{{ abnormalObj.locationErrorNum }}</div>
+                    定位异常
+                </div>
+                
                 <!-- <div class="nav_item" :class="abnormalType==7?'item_active':''" @click="AbnormalChanage(7)">
                     <div class="nav_number"  v-if="abnormalObj.losePageErrorNum>0">{{ abnormalObj.losePageErrorNum }}</div>
                     缺页异常
@@ -389,7 +390,7 @@ const questionTableData=computed(() => {
 // ==================== 状态定义 ====================
 
 // 异常类型: 2-定位异常 3-考号异常 4-客观题异常 5-选做题异常 6-划分异常(空白卷) 7-缺页异常
-const abnormalType = ref(2)
+const abnormalType = ref(3)
 const markType = ref(0) // 0-网阅卡 1-手阅卡
 
 // 异常统计数据
@@ -1019,6 +1020,7 @@ const ObjectTableClassName=({ row, rowIndex }: any) => {
 
 // 15. 获取批次号显示
 const GetPositionSelNumber = (row: any) => {
+    console.log('获取批次号显示',row)
     // TODO: 格式化批次号
     return row.batchNo || '-'
 }

+ 27 - 7
src/views/exam/question.vue

@@ -22,11 +22,11 @@
             设置试题结构:
             <div class="item_search">
                 <div class="search_name">题目从</div>
-                <el-select  v-model="queryParams.start"   placeholder="请输入"  filterable default-first-option class="select_width" >
+                <el-select  v-model="queryParams.start"   placeholder="请输入"  filterable default-first-option @blur="onRangeBlur('start', $event)" class="select_width" >
                     <el-option :label="number" :value="number" v-for="number in questionRange"></el-option>
                 </el-select>
                 <div class="search_name">至</div>
-                <el-select  v-model="queryParams.end"   placeholder="请输入"  filterable default-first-option class="select_width" >
+                <el-select  v-model="queryParams.end"   placeholder="请输入"  filterable default-first-option @blur="onRangeBlur('end', $event)" class="select_width" >
                     <el-option :label="number" :value="number" v-for="number in questionRange"></el-option>
                 </el-select>
             </div>
@@ -248,6 +248,26 @@ const questionRange=computed(() => {
     return list
 })
 
+// 失焦时自动选中第一个匹配项
+const onRangeBlur = (field: 'start' | 'end', event: FocusEvent) => {
+    // 获取当前输入框中的文本值
+    const inputEl = event.target as HTMLInputElement
+    const inputVal = inputEl?.value?.trim()
+    if (!inputVal) return
+
+    // 在可选范围中找到第一个匹配的项
+    const matched = questionRange.value.find(n => String(n) === inputVal)
+    if (matched !== undefined) {
+        queryParams.value[field] = String(matched)
+    } else {
+        // 输入值不在范围内,尝试模糊匹配第一个包含输入值的选项
+        const fuzzy = questionRange.value.find(n => String(n).includes(inputVal))
+        if (fuzzy !== undefined) {
+            queryParams.value[field] = String(fuzzy)
+        }
+    }
+}
+
 const totalScore=computed(() => {
   if (!tableData.value || tableData.value.length === 0) {
     return 0;
@@ -848,18 +868,18 @@ const GetSmartQuestionList=()=>{
 
             if (prevEnd > 0) {
                 // 用户输入了结尾题号:起始题号以「结尾题号 + 1」默认
-                queryParams.value.start = prevEnd + 1;
+                queryParams.value.start = String(prevEnd + 1);
             } else if (tableData.value.length > 0) {
                 // 初始进来且已有试题:起始题号以「已有最大题号 + 1」默认
-                queryParams.value.start = maxQuestionNo + 1;
+                queryParams.value.start = String(maxQuestionNo + 1);
             } else {
                 // 无已有试题:回退为模板起始编号
-                queryParams.value.start = startMin;
+                queryParams.value.start = String(startMin);
             }
 
             // 起始题号超出模板最大题数时,回退为模板起始编号
             if (Number(queryParams.value.start) > endMax) {
-                queryParams.value.start = startMin;
+                queryParams.value.start = String(startMin);
             }
 
             // 起始题号设置好后清空结尾题号
@@ -879,7 +899,7 @@ const EnterSetQuestion=()=>{
         return;
     }
     // 添加判断:end 不能小于 start
-    if (queryParams.value.end < queryParams.value.start) {
+    if (Number(queryParams.value.end) < Number(queryParams.value.start)) {
         ElMessage.warning('结束题号不能小于起始题号');
         return;
     }