添加 预览/复制/删除/修改 接口调用

src/baseComponents/Dialog.vue

@@ -8,6 +8,7 @@
         >
             <div class="dialog_default">
                 <slot name="default" >
+                    是否确认删除？
                 </slot>
             </div>
             <template #header>

src/views/surveyManagement/CreateQuestionnaire.vue

@@ -46,7 +46,7 @@
                 <div class="page_item questionnaire_base">
                     <QuestionnaireBaseForm 
                         v-model:formRef="questionnaireBaseFormRef" 
-                        :defaultFormData="{}"
+                        :defaultFormData="defaultQuestionnaireInfo"
                         @formChange="SyncQuestionnaireFormData"
                     ></QuestionnaireBaseForm>
                 </div>
@@ -118,7 +118,7 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, ref} from 'vue'
-import { useRouter } from 'vue-router';
+import { useRouter,useRoute } from 'vue-router';
 import TopBackNav from '@/components/TopBackNav.vue';
 import {statisticQuestionType,scoredQuestionType,qustionTypeToName} from '@/components/questionConfig/questionTypeList'
 import QuestionConfig from '@/components/questionConfig/QuestionConfig.vue';
@@ -132,7 +132,7 @@ import QuestionTypeShow from '@/components/QuestionTypeShow.vue';
 import moveUpDownIcon from '@/assets/icon/move_up_down.png'
 
 
-import {addQuestionnaireApi} from '@/api/surveyManagement'
+import {addQuestionnaireApi,editQuestionnaireApi, getQuestionnaireDetailApi} from '@/api/surveyManagement'
 
 // 题目选项信息 参数
 interface Option {
@@ -153,21 +153,32 @@ interface QuestionItm {
 
 interface QuestionnaireInfo {
     assessmentTitle:String,
-    assessmentIllustrate:String
+    assessmentIllustrate:String,
+    createdAt?:String,
+    teacherName?:String,
+    useStatus?:String | Number,
+
 }
 
 
 const router = useRouter()
+const route = useRoute()
 
 // 试卷头表单
 const questionnaireBaseFormRef = ref()
-// 已存储的试卷整体信息
+
+// 已存储的试卷整体信息 __本地保存_模拟预览用 ????
 const questionnaireMsg = ref()  
 
+// 试卷头的默认信息
+const defaultQuestionnaireInfo = ref<QuestionnaireInfo>({})
 // 试卷头基本信息
 const questionnaireInfo = ref<QuestionnaireInfo>({
     assessmentTitle:'',
-    assessmentIllustrate:''
+    assessmentIllustrate:'',
+    createdAt:'',
+    teacherName:'',
+    useStatus:''
 })
 // 已经添加的题型
 const addedQuestionList = ref<QuestionItm[]>([
@@ -343,7 +354,6 @@ const SaveQuestionnaire = async ()=>{
     await formRef.validate(async(valid) => {
         if (valid) {
             if(addedQuestionList.value.length > 0){
-
                 let questionData = addedQuestionList.value.map((item,index)=>{
                     return {
                         ...item, 
@@ -359,32 +369,23 @@ const SaveQuestionnaire = async ()=>{
                         })
                     }
                 })
-
+                 // 不带id的基础信息
                 let params = {
                     ...(questionnaireInfo.value),
                     questionData:questionData,
                     assessmentScore:questionTotalScore.value
                 }
-
-                let res = await addQuestionnaireApi(params)
-                /**
-                 * 模拟数据
-                 */
-                // 模拟保存数据 和页面跳转
-                let questionnaireList = JSON.parse(localStorage.getItem('questionnaireList') || '[]')
-
-                questionnaireMsg.value = {
-                    ...(questionnaireInfo.value),
-                    questionData:addedQuestionList.value,
-                    assessmentScore:questionTotalScore.value,
-                    
-                    id:Number(questionnaireList[questionnaireList.length - 1]?.id || 0) + 1,
-                    createdAt:unioformDateTransform(new Date()),
-                    teacherName:'管理员',
-                    useStatus:1
+                let res = undefined
+                if(route.query.id){
+                    // 编辑问卷
+                    res = await editQuestionnaireApi({...params,id:route.query.id})
+                 }else{
+                    // 新增问卷
+                    res = await addQuestionnaireApi(params)
+                }
+                if(res?.code == 200){
+                    ElMessage.success(res?.msg)
                 }
-                questionnaireList.push(questionnaireMsg.value)
-                localStorage.setItem('questionnaireList',JSON.stringify(questionnaireList || []))
             }else{
                 ElMessage.warning('请添加问卷题目')
             }
@@ -397,10 +398,61 @@ const SaveQuestionnaire = async ()=>{
 
 // 预览试卷
 const PreviewQuestionnaire =()=>{
-    sessionStorage.setItem('questionnaire',JSON.stringify(questionnaireMsg.value || '{}'))
-    router.push(`/main/previewQuestionnaire`)
+    if(route.query.id){
+        router.push(`/main/previewQuestionnaire?id=${route.query.id}`)
+    }else{
+        ElMessage.warning('请先保存后再预览')
+    }
+}
+
+const GetQuestionnaireDetail =async ()=>{
+    let res = await getQuestionnaireDetailApi(route.query.id)
+    if(res?.code == 200){
+        const  {assessmentTitle,assessmentIllustrate,questionData,
+                createdAt,teacherName,useStatus
+
+         } = res.data
+
+        defaultQuestionnaireInfo.value = {
+            assessmentTitle:assessmentTitle,
+            assessmentIllustrate:assessmentIllustrate,
+            createdAt,
+            teacherName,
+            useStatus
+        }
+        addedQuestionList.value = questionData.map(item=>{
+            let options = item.answerData.map(opt=>{
+                return{
+                    content: opt.answerName,
+                    score: opt.answerScore,
+                    id: opt.questionId
+                }
+            })
+
+            let extraConfig = []
+            if(Number(item.questionAnswerType) === 1){
+                extraConfig.push('required')
+            }
+            if(Number(item.questionSortRole) === 1){
+                extraConfig.push('isHorizontal')
+            }
+            return {
+                ...item,
+                id:item.assessmentId,
+                extraConfig,    // 是否必答 required, 是否横排 isHorizontal
+                options
+            }
+        })
+    }
 }
 
+onMounted(async ()=>{
+    if(route.query.id){
+        await GetQuestionnaireDetail()
+    }else{
+        // 创建问卷
+    }
+})
 </script>
 
 <style lang="scss" scoped>

src/views/surveyManagement/PreviewQuestionnaire.vue

@@ -48,10 +48,16 @@
 
 <script setup lang="ts">
 import { onMounted,ref } from 'vue';
+import { useRouter,useRoute } from 'vue-router';
+
 import TopBackNav from '@/components/TopBackNav.vue';
 import {qustionTypeToName} from '@/components/questionConfig/questionTypeList'
 import QuestionTypeShow from '@/components/QuestionTypeShow.vue';
 
+import {getQuestionnaireDetailApi} from '@/api/surveyManagement'
+
+const route = useRoute()
+
 // 问卷信息
 const questionaireMsg = ref()
 // 辅助函数：判断是否必填
@@ -59,9 +65,39 @@ const isRequired = (item) => {
   return item.extraConfig && item.extraConfig.includes('required');
 };
 
+const GetQuestionnaireDetail =async ()=>{
+    let res = await getQuestionnaireDetailApi(route.query.id)
+    if(res?.code == 200){
+        const  {questionData} = res.data
+
+        let addedQuestionList = questionData.map(item=>{
+            let options = item.answerData.map(opt=>{
+                return{
+                    content: opt.answerName,
+                    score: opt.answerScore,
+                    id: opt.questionId
+                }
+            })
+            let extraConfig = []
+            if(Number(item.questionAnswerType) === 1){
+                extraConfig.push('required')
+            }
+            if(Number(item.questionSortRole) === 1){
+                extraConfig.push('isHorizontal')
+            }
+            return {
+                ...item,
+                id:item.assessmentId,
+                extraConfig,    // 是否必答 required, 是否横排 isHorizontal
+                options
+            }
+        })
+        questionaireMsg.value = {...res.data,questionData:addedQuestionList}
+    }
+}
 
-onMounted(()=>{
-    questionaireMsg.value = JSON.parse(sessionStorage.getItem('questionnaire') || '{}')
+onMounted( async ()=>{
+    await GetQuestionnaireDetail()
 })
 
 </script>
@@ -91,6 +127,7 @@ onMounted(()=>{
             color: #999999;
             line-height: 1.6;
             margin: 0;
+            padding:0 60px;
         }
     }
 

src/views/surveyManagement/SurveyManagement.vue

@@ -48,10 +48,16 @@
 
                     <!-- 底部区域：操作按钮 -->
                     <div class="card_footer">
-                        <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) === 1 ? 'is-disabled' : 'delete_button_border']">删除</el-button>
+                        <el-button 
+                            :class="[Number(quesitonnaire.useStatus) === 1 ? 'is-disabled' : 'button_background']"
+                            @click="Number(quesitonnaire.useStatus) === 1 ?  '' : GoToCreateQuestionnaire(quesitonnaire)"    
+                        >编辑</el-button>
+                        <el-button class="button_border" @click="GoToPreviewQuestionnaire(quesitonnaire)">预览</el-button>
+                        <el-button class="button_refresh" @click="CopyQuestionnaire(quesitonnaire)">复制</el-button>
+                        <el-button 
+                            :class="[Number(quesitonnaire.useStatus) === 1 ? 'is-disabled' : 'delete_button_border']"
+                            @click="Number(quesitonnaire.useStatus) === 1 ?  '' : OpenDeleteDialog(quesitonnaire)"
+                        >删除</el-button>
                     </div>
                 </li>
             </ul>
@@ -74,16 +80,29 @@
 
                 <template #operation="{row}">
                     <div class="table_row_option">
-                        <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) === 1 ? 'editor_disable' : 'el_button_delete']">删除</span>
+                        <span  
+                            :class="[Number(row.useStatus) === 1 ? 'editor_disable' : 'el_button_editor']"
+                            @click="Number(row.useStatus) === 1 ?  '' : GoToCreateQuestionnaire(row)"    
+                        >编辑</span>
+                        <span class="el_button_editor" @click="GoToPreviewQuestionnaire(row)">预览</span>
+                        <span class="el_button_editor"  @click="CopyQuestionnaire(row)">复制</span>
+                        <span 
+                            :class="[Number(row.useStatus) === 1 ? 'editor_disable' : 'el_button_delete']"
+                            @click="Number(row.useStatus) === 1 ?  '' : OpenDeleteDialog(row)"
+                        >删除</span>
                     </div>
                 </template>
             </Table>
+        </div>
+
+        <Dialog 
+            :visible="dialogVisible" 
+            :submitLoading="dialogSubmitLoading"
+            @close="HandleDialogClose"
+            @confirm="HandleDialogConfirm"
+        ></Dialog>
 
 
-        </div>
     </div>
 </template>
 
@@ -94,18 +113,20 @@ import Table from '@/baseComponents/Table.vue';
 import TabSearch from '@/baseComponents/TabSearch.vue';
 import TableRowStatus from '@/baseComponents/TableRowStatus.vue';
 
-import { getQuestionnaireListApi} from '@/api/surveyManagement'
+import { getQuestionnaireListApi , copyQuestionnaireApi,deleteQuestionnaireApi} from '@/api/surveyManagement'
 
 
 import { viewModeTabList } from './tabSearch';  //视图项配置
 import { questionnaireTableColumns } from './table';
 import {useStatusConvert} from './useStatus'
+import { ElMessage } from 'element-plus';
+import Dialog from '@/baseComponents/Dialog.vue';
 interface QuestionnaireItm {
     id:Number,
-    assessmentTitle:String,
-    assessmentScore:Number|String,
-    teacherName:String,
-    createdAt:String,
+    assessmentTitle:String,  //标题
+    assessmentScore:Number|String,  //总分
+    teacherName:String,  //创建人
+    createdAt:String,   //创建时间
     useStatus:Number,   //1 已使用   0 未使用
 }
 const router = useRouter()
@@ -116,30 +137,15 @@ const  HandleTabChage = (val)=>{
     defaultViewMode.value = val
 }
 
-// 2. 跳转创建问卷
-const GoToCreateQuestionnaire = ()=>{
-    router.push('/main/createQuestionnaire')
-}
 
-//3. 问卷列表
+
+//. 问卷列表
 const currentPage = ref(1)
 const totalNum = ref(0)
 const pageSize = ref(20)
-const questionnaireList = ref<QuestionnaireItm[]>([
-    {
-        id:1,
-        assessmentTitle: "作业量满意度问卷",
-        assessmentScore: 100,
-        teacherName: "管理员",
-        createdAt: "2024-10-08 16:00",
-        useStatus: 1 // 未使用
-    },
-   
-    
-]);
+const questionnaireList = ref<QuestionnaireItm[]>([]);
 
-
-onMounted(async()=>{
+const GetQuestionnaireList = async ()=>{
     let params = {
         pageNum:currentPage.value,
         pageSize: pageSize.value
@@ -148,14 +154,70 @@ onMounted(async()=>{
 
     if(res.code == 200){
         questionnaireList.value = res.data.records
+    }
+}
 
+
+// 2. 跳转创建问卷 /修改文件 
+const GoToCreateQuestionnaire = (row?:any)=>{
+    if(row.id){
+        router.push(`/main/createQuestionnaire?id=${row.id}`)
+    }else{
+        router.push('/main/createQuestionnaire')
     }
-    
-    
-    /**
-     * 模拟数据
-     */
-    // questionnaireList.value = JSON.parse(localStorage.getItem('questionnaireList') || '[]')
+}
+
+// 预览问卷
+const GoToPreviewQuestionnaire = (row)=>{
+     router.push(`/main/previewQuestionnaire?id=${row.id}`)
+}
+
+// 复制问卷
+const CopyQuestionnaire = async (row)=>{
+    let res = await copyQuestionnaireApi(row.id)
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        await GetQuestionnaireList()
+    }
+}
+
+
+
+// 删除问卷
+const dialogVisible= ref(false)
+const dialogSubmitLoading = ref(false)
+const currentOperationRow = ref()
+// 打开删除弹窗
+const OpenDeleteDialog = (row)=>{
+    dialogVisible.value = true
+    currentOperationRow.value = row
+}
+// 关闭删除弹窗
+const HandleDialogClose = ()=>{
+    dialogVisible.value = false
+    currentOperationRow.value = null
+    dialogSubmitLoading.value = false
+}
+// 确认删除操作
+const HandleDialogConfirm = async ()=>{
+    dialogSubmitLoading.value = true
+    let res = undefined
+    try{
+        res =  await deleteQuestionnaireApi(currentOperationRow.value.id)
+    }catch{}
+    if(res?.code == 200){
+        ElMessage.success(res?.msg)
+        HandleDialogClose()
+        await GetQuestionnaireList()
+    }else{
+        dialogSubmitLoading.value = false
+    }
+}
+
+
+
+onMounted(async()=>{
+    await GetQuestionnaireList()
 })