添加新增接口调用，修改数据展示参数

src/baseComponents/TableRowStatus.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="table_row_status">
-    <span :class=" statusNumToName(props.status)?.themeClass "></span>
-    {{ statusNumToName(props.status)?.title  }}
+    <span :class=" statusNumToName(props.useStatus)?.themeClass "></span>
+    {{ statusNumToName(props.useStatus)?.title  }}
   </span>
 </template>  
 
@@ -15,7 +15,7 @@ interface statusItm {
 }
 
 const props = defineProps({
-    status:{
+    useStatus:{
         required:true,
         type:[String,Number,null],
         default:null
@@ -26,8 +26,8 @@ const props = defineProps({
     }
 })
     
-const statusNumToName=(status)=>{
-  let result =  props?.statusMsg?.find(item=>item.statusFlag == status)
+const statusNumToName=(useStatus)=>{
+  let result =  props?.statusMsg?.find(item=>item.statusFlag == useStatus)
   if(result){
     return result
   }else{

src/components/QuestionTypeShow.vue

@@ -31,8 +31,8 @@
         placeholder="不超过2000字"
     />
 
-    <!-- 评价(分)题 4 -->
-    <template v-else-if="Number(questionType) === 4 ">
+    <!-- 评价(分)题 5 -->
+    <template v-else-if="Number(questionType) === 5 ">
         <ul class="num_score" v-if="Number(evaluationType) === 0 && Number(questionScore)">
             <li v-for="value in Number(questionScore)">
                 {{ value }}分

src/components/questionConfig/QuestionConfig.vue

@@ -5,7 +5,7 @@
         <Form
             :v-model:formRef="formRefDom"
             :form-item-list="finalFormItemList"
-            :default-form-data="defaultFormData"
+            :default-form-data="questionFormData"
             @form-item-change="HandleFormItemChange"
             labelWidth="92px"
         >
@@ -13,9 +13,9 @@
                 <div class="question_type">
                     <!-- 题目类型下拉 -->
                     <el-select   
-                        v-model="defaultFormData.questionType" 
+                        v-model="questionFormData.questionType" 
                         class="type_select"
-                        @change="(val)=>HandleQuestionTypeChange('question_type',val)"
+                        @change="(val)=>HandleFormItemChange({key:'question_type',val,formData:questionFormData})"
                         placeholder="请选择">
                         <el-option
                             v-for="selectItem in questionTypeOptions"
@@ -28,7 +28,7 @@
                     <!-- 题目额外 展示配置 -->
                     <el-checkbox-group  
                         class="type_cofig_check"
-                        v-model="defaultFormData.extraConfig"
+                        v-model="questionFormData.extraConfig"
                     >
                         <el-checkbox 
                             v-for="checkItem in questionConfig" 
@@ -42,7 +42,7 @@
 
             <template #evaluationType="{formData}">
                 <div class="score_reviewType">
-                    <el-radio-group v-model="defaultFormData.evaluationType">
+                    <el-radio-group v-model="questionFormData.evaluationType">
                         <el-radio v-for="radioItem in scoreReviewTypeList" :key="radioItem.value" :value="radioItem.value">{{ radioItem.label }}</el-radio>
                     </el-radio-group>
 
@@ -154,17 +154,16 @@ const props = defineProps({
         default: 'statistic',
         required:true,
     },
-    questionType: {   //默认的题目类型
-        type: String, 
-        default: ''
+    defaultFormData:{
+        type:Object as ()=> FormData,
     }
 })
-const emit = defineEmits(['confirm', 'cancel', 'form-change'])
+const emit = defineEmits(['confirm', 'cancel', 'formChange'])
 
 const formRefDom = ref()
 
 // 试题题目信息 
-const defaultFormData = ref<FormData>({
+const questionFormData = ref<FormData>({
     questionTitleName: '',  
     questionScore: '',   
     questionType: '', 
@@ -195,10 +194,10 @@ const finalFormItemList = computed(() => {
             newItem.hidden = props.displayMode !== 'scored'
         }else if(item.key == 'options'){
             // 评价题  和 问答题 不展示 题目子选项配置
-            newItem.hidden = [2,4].includes(Number(defaultFormData.value.questionType))  
+            newItem.hidden = [2,5].includes(Number(questionFormData.value.questionType))  
         }else if(item.key == 'evaluationType'){
             // 评价题 展示评分的格式
-            newItem.hidden = Number(defaultFormData.value.questionType) !== 4
+            newItem.hidden = Number(questionFormData.value.questionType) !== 5
         }
         return newItem
     })
@@ -208,7 +207,7 @@ const finalFormItemList = computed(() => {
 // 试题额外配置项   // 评价题 和 问答题 展示不同的配置项
 const questionConfig = computed(()=>{
     // 评价题 和 问答题
-    if([2,4].includes(Number(defaultFormData.value.questionType)) ){
+    if([2,5].includes(Number(questionFormData.value.questionType)) ){
         return [
             { label: '必答题', value: 'required' },
         ]
@@ -226,11 +225,7 @@ const scoreReviewTypeList = ref([
     {label:'星星式', value:1},
 ])
 
-// 题目类型变化触发的操作
-const HandleQuestionTypeChange = (key,val)=>{
-    // 
 
-}
 
 
 
@@ -238,16 +233,16 @@ const HandleQuestionTypeChange = (key,val)=>{
 const HandleFormItemChange = (params: any) => {
     const { key, val, formData: data } = params
     // console.log('表单项目变化了--',formData)
-    emit('form-change', data)
+    emit('formChange', params)
 }
 
 // 添加题目选项配置
 const addOption = () => {
-    defaultFormData.value.options.push({ content: '', score: '',id:(Number(defaultFormData.value.options[defaultFormData.value.options.length - 1]?.id || 0) + 1) })
+    questionFormData.value.options.push({ content: '', score: '',id:(Number(questionFormData.value.options[questionFormData.value.options.length - 1]?.id || 0) + 1) })
 }
 // 删除题目选项配置
 const removeOption = (id: number) => {
-    defaultFormData.value.options = defaultFormData.value.options.filter((opt)=>{
+    questionFormData.value.options = questionFormData.value.options.filter((opt)=>{
         return opt.id !== id
     })
 }
@@ -265,32 +260,17 @@ const HandleAddConfirm = async (params:any)=>{
     })
 }
 
-// 修改题型的默认展示值
-watch(() => props.questionType, (newVal) => {
+
+// 同步监听 1
+watch(()=>props.defaultFormData,(newVal)=>{
+    // 赋值除了类型之外的其他值
+    console.log('监听到赋值了',newVal)
     if (newVal) {
-        defaultFormData.value.questionType = newVal
+        // 避免首次赋值选项置空的情况 _ 待完善 _ 可能发生
+        questionFormData.value = newVal
     }
-}, { immediate: true })
-
-// 表单信息变化触发的操作
-watch(()=>defaultFormData.value, (newVal) => {
-    emit('form-change', newVal)
-}, { deep: true })
-
-
-watch(() =>defaultFormData.value.questionType, (newVal,oldVal) => {
-    if (newVal !== oldVal) {
-        // 清空 除了选项外的表单信息  
-        defaultFormData.value = {
-            questionTitleName: '',  
-            questionScore: '',   
-            questionType: newVal, 
-            extraConfig: ['required'],  //默认勾选必答题
-            options: [],
-            evaluationType:0  //默认展示 数字式
-        }
-    }
-}, { immediate: true })
+},{deep:true, immediate:true})
+
 
 </script>
 

src/components/questionConfig/QuestionnaireBaseForm.vue

@@ -24,7 +24,7 @@ const props = defineProps({
         required:true
     }
 })
-const emit = defineEmits(['formChage'])
+const emit = defineEmits(['formChange'])
 
 const formRef = defineModel('formRef')
 
@@ -35,7 +35,7 @@ watch(()=>props.defaultFormData,(newVal)=>{
 })
 
 watch(()=>formData.value,(newVal)=>{
-    emit('formChage',newVal)
+    emit('formChange',newVal)
 },{deep:true})
 
 </script>

src/components/questionConfig/questionTypeList.ts

@@ -38,7 +38,7 @@ export const scoredQuestionType = ref<QuestionTypeItm[]>([
     },
     {
         label:'评价题',
-        value:'4',
+        value:'5',
         icon:confirmIcon,
         activeIcon:confirmIcon
     },
@@ -54,7 +54,7 @@ export const qustionTypeToName = (type)=>{
             return '问答题'
         case 3:
             return '评分单选题'
-        case 4:
+        case 5:  //4
             return '评价题'
     }
 }

src/router/index.ts

@@ -29,7 +29,7 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'createQuestionnaire',
         name: 'createQuestionnaire',
-        component: () => import('@/views/surveyManagement/createQuestionnaire/CreateQuestionnaire.vue')
+        component: () => import('@/views/surveyManagement/CreateQuestionnaire.vue')
       },
       {
         path: 'previewQuestionnaire',

src/views/surveyManagement/createQuestionnaire/CreateQuestionnaire.vue → src/views/surveyManagement/CreateQuestionnaire.vue

@@ -47,7 +47,7 @@
                     <QuestionnaireBaseForm 
                         v-model:formRef="questionnaireBaseFormRef" 
                         :defaultFormData="{}"
-                        @formChage="SyncQuestionnaireFormData"
+                        @formChange="SyncQuestionnaireFormData"
                     ></QuestionnaireBaseForm>
                 </div>
 
@@ -56,8 +56,16 @@
                     <li v-for="(question,index) in addedQuestionList" :key="question.id">
                         <div class="question_title" 
                             :class="{required:question.extraConfig.includes('required')}">
-                            {{index + 1}}.{{ question.questionTitleName }}
+                            <span>{{index + 1}}.{{ question.questionTitleName }}</span>
                             <span class="question_type">[{{ qustionTypeToName(question.questionType) }}]</span>
+
+                            
+                            <div class="operation table_row_option">
+                                <span class="el_button_editor" @click="EditQuestion(question)">编辑</span>
+                                <span class="el_button_delete" @click="DeleteQuestion(question)">删除</span>
+                            </div>
+
+
                         </div>
                         <QuestionTypeShow 
                             :isHorizontal="question.extraConfig.includes('isHorizontal')"
@@ -78,8 +86,9 @@
                     <div   v-else class="question_itm_edit">
                         <QuestionConfig  
                             :displayMode="selectedQuestionGetScore ? 'scored' : 'statistic'"
-                            :questionType="selectedQuestionType"
                             @confirm="AddQuesiton"
+                            :defaultFormData="defaultQuestionData"
+                            @formChange="HandleQuestionChange"
                         ></QuestionConfig>
                     </div>
                  </div>
@@ -111,7 +120,7 @@
 import {computed, onMounted, ref} from 'vue'
 import { useRouter } from 'vue-router';
 import TopBackNav from '@/components/TopBackNav.vue';
-import {statisticQuestionType,scoredQuestionType,qustionTypeToName} from '../../../components/questionConfig/questionTypeList'
+import {statisticQuestionType,scoredQuestionType,qustionTypeToName} from '@/components/questionConfig/questionTypeList'
 import QuestionConfig from '@/components/questionConfig/QuestionConfig.vue';
 import QuestionnaireBaseForm from '@/components/questionConfig/QuestionnaireBaseForm.vue';
 import { ElMessage } from 'element-plus';
@@ -173,6 +182,14 @@ const addedQuestionList = ref<QuestionItm[]>([
     }
 ])
 
+// 默认的试题信息
+// questionTitleName: '',  
+// questionScore: '',   
+// questionType: '', 
+// extraConfig: ['required'],  //默认勾选必答题
+// options: [],
+// evaluationType:0  //默认展示 数字式
+const defaultQuestionData = ref({})
 
 // 当前选中的题型
 const selectedQuestionType = ref('')
@@ -192,15 +209,18 @@ const questionTotalScore = computed(()=>{
 
 // 选中题型时的处理
 const CheckedQuestionType = (type:any) => {
+    console.log('触发操作了',type)
     selectedQuestionType.value = type
-    switch(type){
-        case '0':
-        case '1':
-        case '2':
+    resetQuestionForm(type)
+
+    switch(Number(type)){
+        case 0:
+        case 1:
+        case 2:
             selectedQuestionGetScore.value = false
             break
-        case '3':
-        case '4':
+        case 3:
+        case 5:
             selectedQuestionGetScore.value = true
             break
     }
@@ -211,6 +231,26 @@ const SyncQuestionnaireFormData = (params)=>{
     questionnaireInfo.value = {...params}
 }
 
+// 重置试题表单数据
+const resetQuestionForm = (questionType)=>{
+    defaultQuestionData.value = {
+        questionTitleName: '',  
+        questionScore: '',   
+        questionType: questionType, 
+        extraConfig: ['required'],  //默认勾选必答题
+        options: [],
+        evaluationType:0  //默认展示 数字式
+    }
+}
+const HandleQuestionChange = (params)=>{
+    const { key, val, formData: data } = params
+    switch(key){
+        case 'question_type':{
+            resetQuestionForm(val)
+        }
+    }
+}
+
 // 处理试题排序
 const { HandleDragStart, HandleDragEnd } = useHandleMoveUpAndDown(addedQuestionList,42)
 
@@ -239,6 +279,20 @@ const AddQuesiton = (params)=>{
 
 
 
+const DeleteQuestion = (row)=>{
+    // 删除当前题目
+    addedQuestionList.value = addedQuestionList.value.filter(item=>{
+        return item.id !== row.id   
+    })
+}
+const EditQuestion = (row)=>{
+
+    console.log('当前编辑的行',row)
+    // 待完善
+    defaultQuestionData.value = row
+    CheckedQuestionType(row.questionType)
+}
+
 // 保存试卷
 const SaveQuestionnaire = async ()=>{
     // 试卷总表单
@@ -249,7 +303,29 @@ const SaveQuestionnaire = async ()=>{
         if (valid) {
             if(addedQuestionList.value.length > 0){
 
-                // addQuestionnaireApi()
+                let questionData = addedQuestionList.value.map((item,index)=>{
+                    return {
+                        ...item, 
+                        questionAnswerType:item.extraConfig.includes('required') ? 1 : 0,  // 是否必答，0-否，1-是
+                        questionSortRole:item.extraConfig.includes('isHorizontal') ? 1 : 0, // 0-竖排，1-横排
+                        questionSortCode:index + 1,
+                        answerData:item.options.map((opt,optIndex)=>{
+                            return {
+                                questionSortCode: optIndex + 1,
+                                answerName: opt.label,
+                                answerScore: opt.score
+                            }
+                        })
+                    }
+                })
+
+                let params = {
+                    ...(questionnaireInfo.value),
+                    questionData:questionData,
+                    assessmentScore:questionTotalScore.value
+                }
+
+                let res = await addQuestionnaireApi(params)
                 /**
                  * 模拟数据
                  */
@@ -259,10 +335,11 @@ const SaveQuestionnaire = async ()=>{
                 questionnaireMsg.value = {
                     ...(questionnaireInfo.value),
                     questionData:addedQuestionList.value,
-                    id:Number(questionnaireList[questionnaireList.length - 1]?.id || 0) + 1,
-                    createTime:unioformDateTransform(new Date()),
-                    createBy:'管理员',
                     assessmentScore:questionTotalScore.value,
+                    
+                    id:Number(questionnaireList[questionnaireList.length - 1]?.id || 0) + 1,
+                    createdAt:unioformDateTransform(new Date()),
+                    teacherName:'管理员',
                     useStatus:1
                 }
                 questionnaireList.push(questionnaireMsg.value)
@@ -378,11 +455,16 @@ const PreviewQuestionnaire =()=>{
             display: flex;
             flex-direction: column;
             gap:20px;
-            padding:20px;
-            font-size: 14px;
+            padding-top:10px;
+            font-size: 16px;
             color:#000;
             li{
+                padding:10px 20px;
+
                 .question_title{
+                    display: flex;
+                    justify-content: flex-start;
+                    word-break: keep-all;
                     margin-bottom: 20px;
                     .question_type{
                         color:#2E64FA;
@@ -399,6 +481,22 @@ const PreviewQuestionnaire =()=>{
                             color:#F56C6C;
                         }
                     }
+
+                    .operation{
+                        display: none;
+                        flex: 1 1;
+                        justify-content: flex-end;
+                        gap:20px;
+
+                    }
+                }
+
+                &:hover{
+                    box-shadow: 0px 10px 20px 0px rgba(46,100,250,0.1), 
+                                0px -10px 20px 0px rgba(46,100,250,0.1);
+                    .question_title .operation{
+                        display: flex;
+                    }
                 }
             }
         }

src/views/surveyManagement/PreviewQuestionnaire.vue

@@ -27,11 +27,6 @@
                     <div class="question_header">
                         <span class="q_title" :class="{required_mark:isRequired(item)}">{{ index + 1 }}.{{ item.questionTitleName }}</span>
                         <span class="q_type_tag">[{{ qustionTypeToName(item.questionType) }}]</span>
-
-                        <!-- <div class="operation table_row_option">
-                            <span class="el_button_editor" @click="EditQuestion">编辑</span>
-                            <span class="el_button_delete" @click="DeleteQuestion(item)">删除</span>
-                        </div> -->
                     </div>
 
                     <!-- 题目内容区域 -->
@@ -64,12 +59,6 @@ const isRequired = (item) => {
   return item.extraConfig && item.extraConfig.includes('required');
 };
 
-const DeleteQuestion = (row)=>{
-
-}
-const EditQuestion = ()=>{
-
-}
 
 onMounted(()=>{
     questionaireMsg.value = JSON.parse(sessionStorage.getItem('questionnaire') || '{}')
@@ -141,23 +130,7 @@ onMounted(()=>{
                     margin-left: 8px;
                     font-weight: normal;
                 }
-
-                .operation{
-                    flex: 1 1;
-                    display: none;
-                    justify-content: flex-end;
-                    gap:20px;
-
-                }
             }
-
-            // &:hover{
-            //     box-shadow: 0px 10px 20px 0px rgba(46,100,250,0.1), 
-            //                 0px -10px 20px 0px rgba(46,100,250,0.1);
-            //     .question_header .operation{
-            //         display: flex;
-            //     }
-            // }
         }
     }
 }

src/views/surveyManagement/SurveyManagement.vue

@@ -35,12 +35,12 @@
                             <span class="score_text">{{ quesitonnaire.assessmentScore }}分</span>
                             <span class="creator_text">管理员</span>
                             <!-- 状态文本：根据 useStatus 动态变色 -->
-                            <span :class="['status_text', quesitonnaire.useStatus === 0 ? 'used' : 'unused']">
-                                {{ quesitonnaire.useStatus === 0 ? '已使用' : '未使用' }}
+                            <span :class="['status_text', quesitonnaire.useStatus === 1 ? 'used' : 'unused']">
+                                {{ quesitonnaire.useStatus === 1 ? '已使用' : '未使用' }}
                             </span>
                         </div>
                         <div class="time_row">
-                            <span>{{ quesitonnaire.createTime }}</span>
+                            <span>{{ quesitonnaire.createdAt }}</span>
                         </div>
                     </div>
 
@@ -48,10 +48,10 @@
 
                     <!-- 底部区域：操作按钮 -->
                     <div class="card_footer">
-                        <el-button :class="[Number(quesitonnaire.useStatus) === 0 ? 'is-disabled' : 'button_background']">编辑</el-button>
+                        <el-button :class="[Number(quesitonnaire.useStatus) === 1 ? 'is-disabled' : 'button_background']">编辑</el-button>
                         <el-button class="button_border">预览</el-button>
                         <el-button class="button_refresh">复制</el-button>
-                        <el-button :class="[Number(quesitonnaire.useStatus) === 0 ? 'is-disabled' : 'delete_button_border']">删除</el-button>
+                        <el-button :class="[Number(quesitonnaire.useStatus) === 1 ? 'is-disabled' : 'delete_button_border']">删除</el-button>
                     </div>
                 </li>
             </ul>
@@ -69,15 +69,15 @@
                 </template>
 
                 <template #useStatus="{row}">
-                    <TableRowStatus :status="row.useStatus" :statusMsg="useStatusConvert"></TableRowStatus>
+                    <TableRowStatus :useStatus="row.useStatus" :statusMsg="useStatusConvert"></TableRowStatus>
                 </template>
 
                 <template #operation="{row}">
                     <div class="table_row_option">
-                        <span  :class="[Number(row.useStatus) === 0 ? 'editor_disable' : 'el_button_editor']">编辑</span>
+                        <span  :class="[Number(row.useStatus) === 1 ? 'editor_disable' : 'el_button_editor']">编辑</span>
                         <span class="el_button_editor">预览</span>
                         <span class="el_button_editor">复制</span>
-                        <span :class="[Number(row.useStatus) === 0 ? 'editor_disable' : 'el_button_delete']">删除</span>
+                        <span :class="[Number(row.useStatus) === 1 ? 'editor_disable' : 'el_button_delete']">删除</span>
                     </div>
                 </template>
             </Table>
@@ -93,6 +93,10 @@ import { useRouter } from 'vue-router';
 import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
 import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
+
+import { getQuestionnaireListApi} from '@/api/surveyManagement'
+
+
 import { viewModeTabList } from './tabSearch';  //视图项配置
 import { questionnaireTableColumns } from './table';
 import {useStatusConvert} from './useStatus'
@@ -100,9 +104,9 @@ interface QuestionnaireItm {
     id:Number,
     assessmentTitle:String,
     assessmentScore:Number|String,
-    createBy:String,
-    createTime:String,
-    useStatus:Number,   //0 已使用   1 未使用
+    teacherName:String,
+    createdAt:String,
+    useStatus:Number,   //1 已使用   0 未使用
 }
 const router = useRouter()
 
@@ -126,43 +130,32 @@ const questionnaireList = ref<QuestionnaireItm[]>([
         id:1,
         assessmentTitle: "作业量满意度问卷",
         assessmentScore: 100,
-        createBy: "管理员",
-        createTime: "2024-10-08 16:00",
-        useStatus: 1 // 未使用
-    },
-    {
-        id:2,
-        assessmentTitle: "作业量满意度问卷作业量满意度问卷作业量满意度问卷作度问卷作业量满意度问卷作度问卷作业量满意度问卷作度问卷作业量满意度问卷作业量满意度问卷卷...",
-        assessmentScore: 100,
-        createBy: "管理员",
-        createTime: "2024-10-08 16:00",
-        useStatus: 0 // 已使用
-    },
-    {
-        id:3,
-        assessmentTitle: "作业量满意度问卷",
-        assessmentScore: 100,
-        createBy: "管理员",
-        createTime: "2024-10-08 16:00",
-        useStatus: 1 // 未使用
-    },
-     {
-        id:4,
-        assessmentTitle: "作业量满意度问卷",
-        assessmentScore: 100,
-        createBy: "管理员",
-        createTime: "2024-10-08 16:00",
+        teacherName: "管理员",
+        createdAt: "2024-10-08 16:00",
         useStatus: 1 // 未使用
     },
+   
     
 ]);
 
 
-onMounted(()=>{
+onMounted(async()=>{
+    let params = {
+        pageNum:currentPage.value,
+        pageSize: pageSize.value
+    }
+    let res = await getQuestionnaireListApi(params)
+
+    if(res.code == 200){
+        questionnaireList.value = res.data.records
+
+    }
+    
+    
     /**
      * 模拟数据
      */
-    questionnaireList.value = JSON.parse(localStorage.getItem('questionnaireList') || '[]')
+    // questionnaireList.value = JSON.parse(localStorage.getItem('questionnaireList') || '[]')
 })
 
 

src/views/surveyManagement/table.ts

@@ -38,7 +38,7 @@ export const questionnaireTableColumns = ref([
         hidden: false,
     },
     {
-        name: 'createBy',
+        name: 'teacherName',
         label: '创建人',
         width: '100',
         fixed: '',
@@ -56,7 +56,7 @@ export const questionnaireTableColumns = ref([
         hidden: false,
     },
     {
-        name: 'createTime',
+        name: 'createdAt',
         label: '创建时间',
         width: '180',
         fixed: '',

src/views/surveyManagement/useStatus.ts

@@ -1,11 +1,11 @@
 export const useStatusConvert = [
     {
-        statusFlag:0,
+        statusFlag:1,
         title:'已使用',
         themeClass: 'normal_icon'
     },
     {
-        statusFlag:1,
+        statusFlag:0,
         title:'未使用',
         themeClass: 'need_summary_icon'
     },