【北大开源实践】- 问卷断点续答 - 前端 (#282)

* feat:增加断点续答功能

* feat:增加断点续答功能

* fix: 同步代码并且解决冲突

---------

Co-authored-by: dayou <[email protected]>

web/components.d.ts

@@ -0,0 +1,52 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    IEpBottom: typeof import('~icons/ep/bottom')['default']
+    IEpCheck: typeof import('~icons/ep/check')['default']
+    IEpCirclePlus: typeof import('~icons/ep/circle-plus')['default']
+    IEpClose: typeof import('~icons/ep/close')['default']
+    IEpCopyDocument: typeof import('~icons/ep/copy-document')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpIphone: typeof import('~icons/ep/iphone')['default']
+    IEpLoading: typeof import('~icons/ep/loading')['default']
+    IEpMinus: typeof import('~icons/ep/minus')['default']
+    IEpMonitor: typeof import('~icons/ep/monitor')['default']
+    IEpMore: typeof import('~icons/ep/more')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
+    IEpSort: typeof import('~icons/ep/sort')['default']
+    IEpSortDown: typeof import('~icons/ep/sort-down')['default']
+    IEpSortUp: typeof import('~icons/ep/sort-up')['default']
+    IEpTop: typeof import('~icons/ep/top')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
+    IEpWarningFilled: typeof import('~icons/ep/warning-filled')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}

web/src/management/pages/edit/modules/settingModule/SettingPanel.vue

@@ -67,13 +67,13 @@ const setterList = computed(() => {
         }
       } else {
         formValue = _get(store.state.edit.schema, formKey, formItem.value)
+        console.log("formVaue:", formValue)
         dataConfig[formKey] = formValue
       }
       formItem.value = formValue
     }
 
     form.dataConfig = dataConfig
-
     return form
   })
 })

web/src/management/pages/edit/modules/settingModule/config/baseConfig.js

@@ -7,6 +7,6 @@ export default [
   {
     title: '提交限制',
     key: 'limitConfig',
-    formList: ['limit_tLimit']
+    formList: ['limit_tLimit', 'limit_breakAnswer', 'limit_backAnswer']
   }
 ]

web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js

@@ -21,5 +21,19 @@ export default {
     tip: '问卷仅在指定时间段内可填写',
     type: 'QuestionTimeHour',
     placement: 'top'
+  },
+  limit_breakAnswer: {
+    key: 'baseConf.breakAnswer',
+    label: '允许断点续答',
+    tip: '回填前一次作答中的内容（注：更换设备/浏览器/清除缓存/更改内容重新发布则此功能失效）',
+    type: 'ELSwitch',
+    value: false
+  },
+  limit_backAnswer: {
+    key: 'baseConf.backAnswer',
+    label: '自动填充上次填写内容',
+    tip: '回填前一次提交的内容（注：更换设备/浏览器/清除缓存/更改内容重新发布则此功能失效）',
+    type: 'ELSwitch',
+    value: false
   }
 }

web/src/management/store/edit/state.js

@@ -42,7 +42,9 @@ export default {
       tLimit: 0,
       answerBegTime: '',
       answerEndTime: '',
-      answerLimitTime: 0
+      answerLimitTime: 0,
+      breakAnswer: false,
+      backAnswer: false
     },
     submitConf: {
       submitTitle: '',

web/src/materials/setters/widgets/ELSwitch.vue

@@ -0,0 +1,38 @@
+<template>
+  <el-switch
+    v-model="modelValue"
+    class="ml-2"
+    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+    active-text="是"
+    inactive-text="否"
+    @change="handleInputChange"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant'
+
+interface Props {
+  formConfig: any
+  moduleConfig: any
+}
+
+interface Emit {
+  (ev: typeof FORM_CHANGE_EVENT_KEY, arg: { key: string; value: boolean }): void
+}
+
+const emit = defineEmits<Emit>()
+const props = defineProps<Props>()
+const modelValue = ref(props.formConfig.value)
+
+const handleInputChange = (value: boolean) => {
+  const key = props.formConfig.key
+
+  modelValue.value = value
+
+  emit(FORM_CHANGE_EVENT_KEY, { key, value })
+}
+</script>
+
+

web/src/render/components/BackAnswerDialog.vue

@@ -0,0 +1,79 @@
+<template>
+    <div class="mask" v-show="visible">
+      <div class="box">
+        <div class="title">{{ title }}</div>
+        <div class="btn-box">
+          <div class="btn cancel" @click="handleCancel">{{ cancelBtnText }}</div>
+          <div class="btn confirm" @click="handleConfirm">{{ confirmBtnText }}</div>
+        </div>
+      </div>
+    </div>
+  </template>
+  <script setup lang="ts">
+  interface Props {
+    visible?: boolean
+    cancelBtnText?: string
+    confirmBtnText?: string
+    title?: string
+  }
+  
+  interface Emit {
+    (ev: 'confirm', callback: () => void): void
+    (ev: 'cancel', callback: () => void): void
+    (ev: 'close'): void
+  }
+  
+  const emit = defineEmits<Emit>()
+  
+  withDefaults(defineProps<Props>(), {
+    visible: false,
+    cancelBtnText: '取消',
+    confirmBtnText: '确定',
+    title: ''
+  })
+  
+  const handleConfirm = () => {
+    emit('confirm', () => {
+      emit('close')
+    })
+  }
+  
+  const handleCancel = () => {
+    emit('cancel', () => {
+        emit('close')
+    })
+  }
+  </script>
+  <style lang="scss" scoped>
+  @import url('../styles/dialog.scss');
+  
+  .btn-box {
+    padding: 20px 0 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  
+    .btn {
+      width: 48%;
+      font-size: 0.28rem;
+      border-radius: 0.04rem;
+      text-align: center;
+      padding: 0.16rem 0;
+      line-height: 0.4rem;
+      cursor: pointer;
+  
+      &.cancel {
+        background: #fff;
+        color: #92949d;
+        border: 1px solid #e3e4e8;
+      }
+  
+      &.confirm {
+        background-color: #4a4c5b;
+        border: 1px solid #4a4c5b;
+        color: #fff;
+      }
+    }
+  }
+  </style>
+

web/src/render/pages/RenderPage.vue

@@ -81,6 +81,17 @@ const normalizationRequestBody = () => {
     clientTime: Date.now()
   }
 
+  //浏览器缓存数据
+  localStorage.removeItem(surveyPath + "_questionData")
+  localStorage.removeItem("isSubmit")
+  //数据加密
+  var formData  = Object.assign({}, store.state.formValues)
+    for(const key in formData){
+      formData[key] = encodeURIComponent(formData[key])
+    }
+  localStorage.setItem(surveyPath + "_questionData", JSON.stringify(formData))
+  localStorage.setItem('isSubmit', JSON.stringify(true))
+  
   if (encryptInfo?.encryptType) {
     result.encryptType = encryptInfo?.encryptType
     result.data = encrypt[result.encryptType as 'rsa']({