列表显示图片，id搜索

back-ui/src/views/learn/questions/index.vue

@@ -2,7 +2,7 @@
     <div class="app-container">
         <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
             <el-form-item label="题目ID" prop="id">
-                <el-input v-model="queryParams.id" placeholder="请输入题目ID" clearable
+                <el-input v-model.number="queryParams.id" type="number" placeholder="请输入题目ID" clearable
                           @keyup.enter="handleQuery"/>
             </el-form-item>
             <el-form-item label="题干" prop="title">
@@ -90,7 +90,11 @@
             <el-table-column type="selection" width="55" align="center" fixed="left"/>
             <el-table-column label="题目ID" align="center" prop="id" fixed="left" />
             <el-table-column label="试题-题干" align="left" prop="title" min-width="350" header-align="center"
-                             show-overflow-tooltip fixed="left"/>
+                             fixed="left">
+                <template #default="scope">
+                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.title)"></div>
+                </template>
+            </el-table-column>
             <el-table-column label="题型" align="center" prop="qtpye"/>
             <el-table-column label="学科" align="center" prop="subjectId">
                 <template #default="scope">
@@ -104,7 +108,8 @@
             <el-table-column label="选项" align="center" prop="optionA" show-overflow-tooltip>
                 <template #default="scope">
                     <el-link type="primary" @click="handleShowOptions(scope.row)" :underline="false">
-                        {{ scope.row.optionA || '-' }}
+                        <span v-if="scope.row.optionA" class="table-cell-content" v-html="formatContentWithImages(scope.row.optionA)"></span>
+                        <span v-else>-</span>
                     </el-link>
                 </template>
             </el-table-column>
@@ -150,12 +155,24 @@
                     </el-link>
                 </template>
             </el-table-column> -->
-            <el-table-column label="标准答案" align="center" prop="answer1" show-overflow-tooltip/>
-            <el-table-column label="答案2" align="center" prop="answer2" show-overflow-tooltip/>
+            <el-table-column label="标准答案" align="center" prop="answer1" show-overflow-tooltip>
+                <template #default="scope">
+                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.answer1 || '-')"></div>
+                </template>
+            </el-table-column>
+            <el-table-column label="答案2" align="center" prop="answer2" show-overflow-tooltip>
+                <template #default="scope">
+                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.answer2 || '-')"></div>
+                </template>
+            </el-table-column>
             <!-- <el-table-column label="试卷Id" align="center" prop="paperId"/> -->
             <!-- <el-table-column label="难易度" align="center" prop="diff"/> -->
             <!-- <el-table-column label="相似度" align="center" prop="similarity"/> -->
-            <el-table-column label="试题解析" align="center" prop="parse" min-width="250" show-overflow-tooltip/>
+            <el-table-column label="试题解析" align="center" prop="parse" min-width="250" show-overflow-tooltip>
+                <template #default="scope">
+                    <div class="table-cell-content" v-html="formatContentWithImages(scope.row.parse || '-')"></div>
+                </template>
+            </el-table-column>
             <!-- <el-table-column label="knowId" align="center" prop="knowId" /> -->
             <!-- <el-table-column label="年级ID" align="center" prop="gradeId"/> -->
             <!-- <el-table-column label="knowledges" align="center" prop="knowledges" /> -->
@@ -622,7 +639,18 @@ const {queryParams, form, rules} = toRefs(data)
 /** 查询试题列表 */
 function getList() {
     loading.value = true
-    listQuestions(queryParams.value).then(response => {
+    // 处理查询参数，确保id是数字类型
+    const params = { ...queryParams.value }
+    if (params.id) {
+        // 将id转换为数字类型
+        const idNum = Number(params.id)
+        if (!isNaN(idNum)) {
+            params.id = idNum
+        } else {
+            params.id = null
+        }
+    }
+    listQuestions(params).then(response => {
         questionsList.value = response.rows
         total.value = response.total
         loading.value = false
@@ -988,4 +1016,27 @@ getList()
     max-width: 1100px;
     margin: 0 auto;
 }
+
+/* 表格单元格内容样式 */
+.table-cell-content {
+    word-break: break-word;
+    line-height: 1.6;
+}
+
+.table-cell-content :deep(img) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 5px 0;
+    border-radius: 4px;
+    object-fit: contain;
+}
+
+.table-cell-content :deep(img[src=""]) {
+    display: none;
+}
+
+.table-cell-content :deep(img:not([src])) {
+    display: none;
+}
 </style>