添加离开问卷编辑区的弹窗逻辑

src/baseComponents/Dialog.vue

@@ -19,8 +19,15 @@
             </template>
 
             <template #footer>
-            <el-button class="button_border_gray cancel" @click="closeDialog">取 消</el-button>
-            <el-button class="button_background" :loading="props.submitLoading" @click="handleConfirm(formRef)">确 定</el-button>
+                <div style="display: flex;justify-content: space-between;">
+                    <div class="left"> 
+                        <slot name="footerLeft"></slot>
+                    </div>
+                    <div class="right">
+                        <el-button class="button_border_gray cancel" @click="closeDialog">取 消</el-button>
+                        <el-button class="button_background" :loading="props.submitLoading" @click="handleConfirm(formRef)">确 定</el-button>
+                    </div>
+                </div>
             </template>
         </el-dialog>
     </div>

src/components/TopBackNav.vue

@@ -1,10 +1,13 @@
 <template>
     <div class="page_item top_header">
         <div class="top_left">
-            <el-button class="button_default_background" @click="router.go(-1)">
-                <el-icon class="img"><ArrowLeftBold /></el-icon>
-                返回
-            </el-button>
+            <slot name="back">
+                <el-button class="button_default_background" @click="router.go(-1)">
+                    <el-icon class="img"><ArrowLeftBold /></el-icon>
+                    返回
+                </el-button>
+            </slot>
+
         </div>
         <div class="top_right">
             <slot name="topRight"></slot>

src/components/questionConfig/form.ts

@@ -90,7 +90,7 @@ export const questionnaireBaseForm = ref([
         rules: [
             {
                 required:true,
-                message:'请填写信息',
+                message:'请输入问卷标题',
                 trigger:'blur'
             }
         ],

src/views/surveyManagement/CreateQuestionnaire.vue

@@ -1,6 +1,13 @@
 <template>
     <div  ref="courseDom" class="main_container">
         <TopBackNav>
+            <template #back>
+                <el-button class="button_default_background" @click="GoBack">
+                    <el-icon class="img"><ArrowLeftBold /></el-icon>
+                    返回
+                </el-button>
+            </template>
+
             <template #topRight>
                 <span class="paper_score">阅卷总分：<span class="score">{{questionTotalScore}}分</span></span>
                 <el-button class="button_refresh" @click="PreviewQuestionnaire">预览问卷</el-button>
@@ -11,6 +18,7 @@
         <div class="page_jg_20" style="flex-shrink: 0;"></div>
 
         <div class="questionnaire_config" >
+            <!-- 左侧题型栏 -->
             <div  class="left_panel">
                 <div class="panel_section page_item">
                     <h3 class="section_title">统计题</h3>
@@ -113,17 +121,37 @@
 
             </div>
         </div>
+
+        <Dialog 
+            :visible="dialogVisible" 
+            :submitLoading="dialogSubmitLoading"
+            @close="HandleDialogClose"
+            @confirm="HandleSaveOrNotQuestionnare(true)"
+        >
+            <span>
+                有未保存内容,要在关闭前保存更改吗?
+            </span>
+
+            <template #footerLeft>
+                <el-button class="button_refresh" @click="HandleSaveOrNotQuestionnare(false)">不保存</el-button>
+            </template>
+        </Dialog>
+
     </div>
 </template>
 
 <script lang="ts" setup>
 import {computed, onMounted, ref} from 'vue'
 import { useRouter,useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+
+
 import TopBackNav from '@/components/TopBackNav.vue';
 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';
+import Dialog from '@/baseComponents/Dialog.vue';
+
 
 import { unioformDateTransform } from '@/utils/dateTransform';
 import { useHandleMoveUpAndDown } from '@/baseComponents/useHandleMoveUpAndDown';
@@ -167,9 +195,6 @@ const route = useRoute()
 // 试卷头表单
 const questionnaireBaseFormRef = ref()
 
-// 已存储的试卷整体信息 __本地保存_模拟预览用 ????
-const questionnaireMsg = ref()  
-
 // 试卷头的默认信息
 const defaultQuestionnaireInfo = ref<QuestionnaireInfo>({})
 // 试卷头基本信息
@@ -181,45 +206,9 @@ const questionnaireInfo = ref<QuestionnaireInfo>({
     useStatus:''
 })
 // 已经添加的题型
-const addedQuestionList = ref<QuestionItm[]>([
-    {
-        id:0,
-        questionTitleName: '测试',   //题目名称
-        questionScore: 20,  //题目分值
-        questionType: '2',   //题目类型
-        extraConfig:[],    // 是否必答 required, 是否横排 isHorizontal
-        options: [] ,
-        evaluationType:''
-    },
-    {
-        id:1,
-        questionTitleName: '测试',   //题目名称
-        questionScore: 20,  //题目分值
-        questionType: '0',   //题目类型
-        extraConfig:[],    // 是否必答 required, 是否横排 isHorizontal
-        options: [
-            {
-                content: '单选测试1',
-                score: '',
-                id:1
-            },
-            {
-                content: '单选测试2',
-                score: '',
-                id:1
-            },
-        ] ,
-        evaluationType:''
-    },
-])
+const addedQuestionList = ref<QuestionItm[]>([])
 
 // 默认的试题信息
-// questionTitleName: '',  
-// questionScore: '',   
-// questionType: '', 
-// extraConfig: ['required'],  //默认勾选必答题
-// options: [],
-// evaluationType:0  //默认展示 数字式
 const defaultQuestionData = ref({})
 
 // 当前选中的题型
@@ -240,10 +229,13 @@ const questionTotalScore = computed(()=>{
 // 当前选择修改的题目 id
 const currentEditQuestionId = ref()
 
+// 当前问卷信息是否已经保存
+const isSaveQuestionnaire = ref(true)
+
 // 选中题型时的处理  
 const CheckedQuestionType = (type:any) => {
     console.log('触发操作了',type)
-    selectedQuestionType.value = type
+    selectedQuestionType.value = String(type)
     resetQuestionForm(type)
 
     switch(Number(type)){
@@ -261,6 +253,7 @@ const CheckedQuestionType = (type:any) => {
 
 // 同步问卷头表单数据
 const SyncQuestionnaireFormData = (params)=>{
+    isSaveQuestionnaire.value = false
     questionnaireInfo.value = {...params}
 }
 
@@ -293,6 +286,7 @@ const { HandleDragStart, HandleDragEnd } = useHandleMoveUpAndDown(addedQuestionL
 const addedIndex = ref(1)
 // 添加/修改 试题信息
 const AddQuesiton = (params)=>{
+    isSaveQuestionnaire.value = false
     const {formRef,formData} = params
     console.log('获取到试题信息了',formData)
     // 试题选项配置 _如果有的话
@@ -342,11 +336,15 @@ const EditQuestion = (row)=>{
     currentEditQuestionId.value = row.id  
     // 先后顺序不要反
     CheckedQuestionType(row.questionType)
-    defaultQuestionData.value = row
+    defaultQuestionData.value = {
+        ...row,
+        questionType:String(row.questionType)
+    }
 }
 
 // 保存试卷
 const SaveQuestionnaire = async ()=>{
+    let saveSuccess =  false
     // 试卷总表单
     let formRef = questionnaireBaseFormRef.value
 
@@ -385,6 +383,8 @@ const SaveQuestionnaire = async ()=>{
                 }
                 if(res?.code == 200){
                     ElMessage.success(res?.msg)
+                    saveSuccess = true
+                    isSaveQuestionnaire.value = true
                 }
             }else{
                 ElMessage.warning('请添加问卷题目')
@@ -393,6 +393,7 @@ const SaveQuestionnaire = async ()=>{
     }).catch(err=>{
         console.log('报错信息',err)
     })
+    return saveSuccess
 }
 
 
@@ -405,6 +406,7 @@ const PreviewQuestionnaire =()=>{
     }
 }
 
+// 编辑状态 获取问卷信息
 const GetQuestionnaireDetail =async ()=>{
     let res = await getQuestionnaireDetailApi(route.query.id)
     if(res?.code == 200){
@@ -446,6 +448,50 @@ const GetQuestionnaireDetail =async ()=>{
     }
 }
 
+
+// 关闭 试卷 提示
+const dialogVisible= ref(false)
+const dialogSubmitLoading = ref(false)
+// 打开删除弹窗
+const OpenDeleteDialog = ()=>{
+    dialogVisible.value = true
+}
+// 关闭删除弹窗
+const HandleDialogClose = ()=>{
+    dialogVisible.value = false
+    dialogSubmitLoading.value = false
+}
+// 确认保存/不保存 操作
+const HandleSaveOrNotQuestionnare = async (flag)=>{
+    if(flag){
+        // 保存
+        dialogSubmitLoading.value = true
+        // 保存接口
+        let successFlag =   await SaveQuestionnaire()
+        if(successFlag){
+            HandleDialogClose()
+            router.go(-1)
+        }else{
+            ElMessage.warning('请检查问卷信息是否完整')
+            dialogSubmitLoading.value = false
+        }
+    }else{
+        // 不保存
+        HandleDialogClose()
+        router.go(-1)
+    }
+}
+
+
+// 返回前添加判断
+const GoBack = ()=>{
+    if(isSaveQuestionnaire.value){
+        router.go(-1)
+    }else{
+        // 弹出问卷提示
+        OpenDeleteDialog()
+    }
+}
 onMounted(async ()=>{
     if(route.query.id){
         await GetQuestionnaireDetail()

src/views/surveyManagement/SurveyManagement.vue

@@ -100,7 +100,9 @@
             :submitLoading="dialogSubmitLoading"
             @close="HandleDialogClose"
             @confirm="HandleDialogConfirm"
-        ></Dialog>
+        >
+            <span class="dialog_alert">确定删除 [ <span class="title">{{  currentOperationRow?.assessmentTitle}}</span> ] 吗</span>
+        </Dialog>
 
 
     </div>
@@ -352,6 +354,17 @@ onMounted(async()=>{
 }
 
 
+.dialog_alert{
+    color:#666;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .title{
+        color: #333;
+    }
+}
+
+