|
|
@@ -44,96 +44,17 @@
|
|
|
<!-- 中间面板:编辑区域 -->
|
|
|
<div class="center_panel">
|
|
|
<div class="page_item questionnaire_base">
|
|
|
- <div class="input_group">
|
|
|
- <label class="input_label">问卷标题:</label>
|
|
|
- <input type="text" class="custom_input" placeholder="请输入问卷标题(限40字)" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="input_group">
|
|
|
- <label class="input_label">问卷说明:</label>
|
|
|
- <input type="text" class="custom_input" placeholder="请输入问卷说明(限100字)" />
|
|
|
- </div>
|
|
|
+ <QuestionnaireBaseForm :defaultFormData="{}"></QuestionnaireBaseForm>
|
|
|
</div>
|
|
|
|
|
|
<!-- 题目添加区域 -->
|
|
|
- <div class="page_item end_item add_question_area">
|
|
|
-
|
|
|
-
|
|
|
+ <div class=" add_question_area">
|
|
|
<div v-if="!selectedQuestionType" class="add_question">
|
|
|
<div class="add_action">+ 点击左侧添加题型</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div v-else class="question_itm_edit">
|
|
|
- <TestQuestionConfig :formItemList="formItemList"></TestQuestionConfig>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div v-if="0" class="question_itm_edit">
|
|
|
- <!-- 1. 题目内容行 -->
|
|
|
- <div class="edit_row edit_row_title">
|
|
|
- <span class="row_label">1:</span>
|
|
|
- <input type="text" class="form_input" placeholder="请输入题目" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 2. 设置选项行 (类型、必答、横排) -->
|
|
|
- <div class="edit_row edit_row_settings">
|
|
|
- <span class="row_label">类型:</span>
|
|
|
- <div class="setting_controls">
|
|
|
- <!-- 下拉选择框 -->
|
|
|
- <div class="select_wrapper">
|
|
|
- <select class="form_select">
|
|
|
- <option value="single">单选题</option>
|
|
|
- <option value="multi">多选题</option>
|
|
|
- </select>
|
|
|
- <span class="select_arrow"></span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 复选框组 -->
|
|
|
- <label class="checkbox_label">
|
|
|
- <input type="checkbox" checked class="custom_checkbox" />
|
|
|
- <span class="check_text">必答题</span>
|
|
|
- </label>
|
|
|
-
|
|
|
- <label class="checkbox_label">
|
|
|
- <input type="checkbox" class="custom_checkbox" />
|
|
|
- <span class="check_text">选项横排</span>
|
|
|
- </label>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 3. 选项列表区域 -->
|
|
|
- <div class="options_list_container">
|
|
|
- <!-- 默认显示的选项 -->
|
|
|
- <div class="option_item">
|
|
|
- <input type="text" class="form_input option_input" placeholder="请输入选项内容" />
|
|
|
- </div>
|
|
|
- <div class="option_item">
|
|
|
- <input type="text" class="form_input option_input" placeholder="请输入选项内容" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 可删除的选项 (带 X 号) -->
|
|
|
- <div class="option_item has_delete">
|
|
|
- <input type="text" class="form_input option_input" placeholder="请输入选项内容" />
|
|
|
- <span class="delete_icon">×</span>
|
|
|
- </div>
|
|
|
- <div class="option_item has_delete">
|
|
|
- <input type="text" class="form_input option_input" placeholder="请输入选项内容" />
|
|
|
- <span class="delete_icon">×</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 4. 添加选项按钮 -->
|
|
|
- <div class="add_option_area">
|
|
|
- <button class="btn_add_option">⊕ 添加选项</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 5. 底部操作栏 -->
|
|
|
- <div class="action_bar">
|
|
|
- <button class="btn_primary">确定</button>
|
|
|
- <button class="btn_default">取消</button>
|
|
|
- </div>
|
|
|
+ <div v-else class="question_itm_edit">
|
|
|
+ <TestQuestionConfig :displayMode="selectedQuestionGetScore ? 'scored' : 'statistic'"></TestQuestionConfig>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -150,10 +71,10 @@
|
|
|
import {onMounted, ref} from 'vue'
|
|
|
|
|
|
import TopBackNav from '@/components/TopBackNav.vue';
|
|
|
-import {statisticQuestionType,scoredQuestionType} from './questionTypeList'
|
|
|
-import TestQuestionConfig from '@/components/TestQuestionConfig.vue';
|
|
|
-
|
|
|
-import { formItemList } from './form'
|
|
|
+import {statisticQuestionType,scoredQuestionType} from '../../../components/testQuestionConfig/questionTypeList'
|
|
|
+import TestQuestionConfig from '@/components/testQuestionConfig/TestQuestionConfig.vue';
|
|
|
+import Form from '@/baseComponents/Form.vue';
|
|
|
+import QuestionnaireBaseForm from '@/components/testQuestionConfig/QuestionnaireBaseForm.vue';
|
|
|
|
|
|
|
|
|
// 试卷基本信息
|
|
|
@@ -165,10 +86,25 @@ const questionnaireInfo = ref({
|
|
|
const addedQuestionTypes = ref([])
|
|
|
// 当前选中的题型
|
|
|
const selectedQuestionType = ref('')
|
|
|
+// 选中题型的类型 // 得分题 true 非得分题 false
|
|
|
+const selectedQuestionGetScore = ref(false)
|
|
|
+
|
|
|
+
|
|
|
|
|
|
// 选中题型时的处理
|
|
|
const HandleQuestionTypeSelect = (type:any) => {
|
|
|
selectedQuestionType.value = type
|
|
|
+ switch(type){
|
|
|
+ case '0':
|
|
|
+ case '1':
|
|
|
+ case '2':
|
|
|
+ selectedQuestionGetScore.value = false
|
|
|
+ break
|
|
|
+ case '3':
|
|
|
+ case '4':
|
|
|
+ selectedQuestionGetScore.value = true
|
|
|
+ break
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -194,16 +130,6 @@ const HandleQuestionTypeSelect = (type:any) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /* 定义变量以匹配图片色调 */
|
|
|
-$border-color: #dcdfe6;
|
|
|
-$primary-blue: #409eff;
|
|
|
-
|
|
|
-// 定义变量以匹配图片颜色
|
|
|
-$text_main: #333333;
|
|
|
-$text_secondary: #999999;
|
|
|
-$bg_gray: #f5f7fa;
|
|
|
-$primary_color: #3b76f6; // 蓝色主色调
|
|
|
-
|
|
|
.questionnaire_config {
|
|
|
flex-grow: 1;
|
|
|
display: flex;
|
|
|
@@ -255,48 +181,17 @@ $primary_color: #3b76f6; // 蓝色主色调
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
.questionnaire_base{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap:20px;
|
|
|
border-radius:10px 10px 0 0;
|
|
|
- .input_group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .input_label {
|
|
|
- text-align: right;
|
|
|
- margin-right: 15px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
-
|
|
|
- .custom_input {
|
|
|
- flex: 1;
|
|
|
- height: 36px;
|
|
|
- padding: 0 15px;
|
|
|
- border: 1px solid $border-color;
|
|
|
- border-radius: 4px;
|
|
|
- outline: none;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:focus {
|
|
|
- border-color: $primary-blue;
|
|
|
- }
|
|
|
-
|
|
|
- &::placeholder {
|
|
|
- color: #c0c4cc;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.add_question_area{
|
|
|
- border-radius:0 0 10px 10px;
|
|
|
-
|
|
|
.add_question {
|
|
|
- flex-grow: 0;
|
|
|
+ // flex-grow: 0;
|
|
|
+ margin:20px;
|
|
|
border: 1px dashed #C0C4CC;
|
|
|
border-radius: 4px;
|
|
|
display: flex;
|
|
|
@@ -309,12 +204,10 @@ $primary_color: #3b76f6; // 蓝色主色调
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .question_itm_edit{
|
|
|
- flex-grow: 0;
|
|
|
+ .question_itm_edit {
|
|
|
+ // flex-grow: 0;
|
|
|
+ background-color: #F8FAFE;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -333,7 +226,6 @@ $primary_color: #3b76f6; // 蓝色主色调
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.section_title {
|
|
|
font-weight: 600;
|
|
|
font-size: 16px;
|
|
|
@@ -343,228 +235,4 @@ $primary_color: #3b76f6; // 蓝色主色调
|
|
|
|
|
|
|
|
|
|
|
|
-.question_itm_edit {
|
|
|
- // border:solid red 1px;
|
|
|
- padding: 20px;
|
|
|
- background-color: #F8FAFE;
|
|
|
-
|
|
|
- // --- 通用行布局 ---
|
|
|
- .edit_row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .row_label {
|
|
|
- width: 60px;
|
|
|
- text-align: right;
|
|
|
- margin-right: 15px;
|
|
|
- color: $text_secondary;
|
|
|
- font-size: 14px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // --- 输入框通用样式 ---
|
|
|
- .form_input {
|
|
|
- flex: 1;
|
|
|
- height: 36px;
|
|
|
- border: 1px solid $border_color;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 0 12px;
|
|
|
- font-size: 14px;
|
|
|
- outline: none;
|
|
|
- transition: border-color 0.2s;
|
|
|
-
|
|
|
- &:focus {
|
|
|
- border-color: $primary_color;
|
|
|
- }
|
|
|
-
|
|
|
- &::placeholder {
|
|
|
- color: #c0c4cc;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // --- 设置行特定样式 ---
|
|
|
- .edit_row_settings {
|
|
|
- .setting_controls {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20px;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- // 模拟 Select 下拉框
|
|
|
- .select_wrapper {
|
|
|
- position: relative;
|
|
|
- width: 140px;
|
|
|
-
|
|
|
- .form_select {
|
|
|
- appearance: none;
|
|
|
- width: 100%;
|
|
|
- height: 36px;
|
|
|
- border: 1px solid $border_color;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 0 30px 0 12px;
|
|
|
- font-size: 14px;
|
|
|
- color: $text_main;
|
|
|
- cursor: pointer;
|
|
|
- outline: none;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- border-color: #c0c4cc;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 下拉箭头
|
|
|
- .select_arrow {
|
|
|
- position: absolute;
|
|
|
- right: 12px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- border-left: 5px solid transparent;
|
|
|
- border-right: 5px solid transparent;
|
|
|
- border-top: 6px solid #c0c4cc;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 自定义 Checkbox 样式
|
|
|
- .checkbox_label {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
-
|
|
|
- .custom_checkbox {
|
|
|
- appearance: none;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- border: 1px solid $border_color;
|
|
|
- border-radius: 2px;
|
|
|
- margin-right: 6px;
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
-
|
|
|
- &:checked {
|
|
|
- background-color: $primary_color;
|
|
|
- border-color: $primary_color;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 5px;
|
|
|
- top: 1px;
|
|
|
- width: 4px;
|
|
|
- height: 8px;
|
|
|
- border: solid white;
|
|
|
- border-width: 0 2px 2px 0;
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .check_text {
|
|
|
- font-size: 14px;
|
|
|
- color: $text_main;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // --- 选项列表样式 ---
|
|
|
- .options_list_container {
|
|
|
- margin-left: 75px; // 对齐输入框起始位置 (Label宽度 + Margin)
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 20px;
|
|
|
-
|
|
|
- .option_item {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .option_input {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- // 删除按钮 (X)
|
|
|
- .delete_icon {
|
|
|
- position: absolute;
|
|
|
- right: -30px;
|
|
|
- font-size: 20px;
|
|
|
- color: #c0c4cc;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 1;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: #f56c6c; // 悬停变红
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // --- 添加选项按钮 ---
|
|
|
- .add_option_area {
|
|
|
- margin-left: 75px;
|
|
|
- margin-bottom: 30px;
|
|
|
-
|
|
|
- .btn_add_option {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- color: $primary_color;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // --- 底部操作栏 ---
|
|
|
- .action_bar {
|
|
|
- margin-left: 75px;
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
-
|
|
|
- button {
|
|
|
- min-width: 80px;
|
|
|
- height: 36px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid transparent;
|
|
|
- transition: all 0.3s;
|
|
|
- }
|
|
|
-
|
|
|
- .btn_primary {
|
|
|
- background-color: $primary_color;
|
|
|
- color: #ffffff;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: darken($primary_color, 10%);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn_default {
|
|
|
- background-color: #ffffff;
|
|
|
- border-color: $border_color;
|
|
|
- color: #606266;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: $primary_color;
|
|
|
- border-color: #c6e2ff;
|
|
|
- background-color: #ecf5ff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
</style>
|