Browse Source

feat(问卷编辑器): 添加问卷信息展示区域

yz 1 month ago
parent
commit
5917b81db0

+ 138 - 0
src/components/survey-question-editor/index.scss

@@ -280,4 +280,142 @@
       color: #66b1ff;
     }
   }
+}
+.survey-question-editor {
+  .survey-info {
+    margin-bottom: 24px;
+    padding: 20px;
+    // background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    border-radius: 8px;
+    // border-left: 4px solid #409eff;
+    
+    .survey-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .survey-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+        display: flex;
+        align-items: center;
+        
+        i {
+          margin-right: 8px;
+          color: #409eff;
+          font-size: 20px;
+        }
+      }
+      
+      .survey-meta {
+        .el-tag {
+          i {
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
+  
+  .question-form {
+    .el-form-item {
+      margin-bottom: 24px;
+    }
+    
+    .el-select {
+      .el-option {
+        i {
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+  
+  .option-management {
+    .option-toolbar {
+      margin-bottom: 16px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    
+    .option-list {
+      .option-item-manage {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+        border: 1px solid #e4e7ed;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        background: #fff;
+        transition: all 0.3s;
+        
+        &:hover {
+          border-color: #409eff;
+          background: #f0f9ff;
+        }
+        
+        .option-content {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          
+          .option-no {
+            font-weight: 500;
+            color: #409eff;
+            margin-right: 8px;
+            min-width: 24px;
+          }
+          
+          .option-text {
+            color: #303133;
+            line-height: 1.4;
+            word-break: break-word;
+          }
+        }
+        
+        .option-actions {
+          flex-shrink: 0;
+        }
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+      
+      .empty-options {
+        text-align: center;
+        padding: 40px 20px;
+        color: #909399;
+        
+        i {
+          font-size: 32px;
+          margin-bottom: 12px;
+          display: block;
+        }
+        
+        p {
+          font-size: 14px;
+          margin: 0;
+        }
+      }
+    }
+  }
+  
+  .option-form {
+    .el-form-item {
+      margin-bottom: 24px;
+    }
+  }
+  
+  .dialog-footer {
+    text-align: right;
+    
+    .el-button {
+      margin-left: 12px;
+    }
+  }
 }

+ 15 - 0
src/components/survey-question-editor/index.vue

@@ -1,5 +1,20 @@
 <template>
   <div class="survey-question-editor">
+    <!-- 问卷信息展示 -->
+    <div class="survey-info">
+      <div class="survey-header">
+        <h3 class="survey-title">
+          <i class="el-icon-document"></i>
+          {{ surveyInfo.title || '未命名问卷' }}
+        </h3>
+        <div class="survey-meta">
+          <el-tag size="small" type="info">
+            <i class="el-icon-tickets"></i>
+            编码:{{ surveyInfo.surveyCode || '暂无编码' }}
+          </el-tag>
+        </div>
+      </div>
+    </div>
     <!-- 题目列表 -->
     <div class="question-list">
       <div class="toolbar">

+ 33 - 0
src/mixins/survey/questionEditor.js

@@ -14,6 +14,9 @@ import {
   updateOption
 } from '@/api/survey/option'
 import {
+  getDetail as getSurveyDetail
+} from '@/api/survey/survey'
+import {
   QUESTION_TYPE_OPTIONS,
   QUESTION_REQUIRED_OPTIONS,
   QUESTION_TYPE,
@@ -63,6 +66,11 @@ export default {
 
   data() {
     return {
+      // 问卷信息
+      surveyInfo: {
+        surveyCode: '',
+        title: ''
+      },
       /**
        * 题目列表
        * @type {Array<QuestionItem>}
@@ -255,6 +263,7 @@ export default {
   },
 
   mounted() {
+    this.loadSurveyInfo()
     this.loadQuestionList()
   },
 
@@ -490,6 +499,30 @@ export default {
     },
 
     /**
+     * 加载问卷信息
+     */
+    async loadSurveyInfo() {
+      try {
+        this.loading = true
+        const response = await getSurveyDetail(this.surveyId)
+        if (response.data.success) {
+          const surveyData = response.data.data
+          this.surveyInfo = {
+            surveyCode: surveyData.surveyCode || '',
+            title: surveyData.title || ''
+          }
+        } else {
+          this.$message.error(response.data.msg || '获取问卷信息失败')
+        }
+      } catch (error) {
+        console.error('加载问卷信息失败:', error)
+        this.$message.error('获取问卷信息失败')
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
      * 重置题目表单
      * @returns {void}
      */