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

web/components.d.ts

@@ -9,36 +9,21 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
-    ElCollapse: typeof import('element-plus/es')['ElCollapse']
-    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
-    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
-    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     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']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     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']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
-    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
-    ElSlider: typeof import('element-plus/es')['ElSlider']
-    ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTabPane: typeof import('element-plus/es')['ElTabPane']
-    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     IEpBottom: typeof import('~icons/ep/bottom')['default']
     IEpCheck: typeof import('~icons/ep/check')['default']
@@ -51,10 +36,6 @@ declare module 'vue' {
     IEpMinus: typeof import('~icons/ep/minus')['default']
     IEpMonitor: typeof import('~icons/ep/monitor')['default']
     IEpMore: typeof import('~icons/ep/more')['default']
-    IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
-    IEpRank: typeof import('~icons/ep/rank')['default']
-    IEpRemove: typeof import('~icons/ep/remove')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSort: typeof import('~icons/ep/sort')['default']
     IEpSortDown: typeof import('~icons/ep/sort-down')['default']

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']({