feat: 结果页新增跳转设置 (#432)

Co-authored-by: jiangchunfu <jiangchunfu@kaike.la>

server/src/interfaces/survey.ts

@@ -88,10 +88,17 @@ export interface MsgContent {
   msg_9004: string;
 }
 
+export interface JumpConfig {
+  type: string;
+  link: string;
+  buttonText?: string;
+}
+
 export interface SubmitConf {
   submitTitle: string;
   confirmAgain: ConfirmAgain;
   msgContent: MsgContent;
+  jumpConfig?: JumpConfig;
 }
 
 // 白名单类型

server/src/modules/survey/__test/dataStatistic.controller.spec.ts

@@ -275,6 +275,11 @@ describe('DataStatisticController', () => {
               again_text: '确认要提交吗？',
             },
             link: '',
+            jumpConfig: {
+              type: 'link',
+              link: '',
+              buttonText: '',
+            },
           },
           logicConf: {
             showLogicConf: [],

server/src/modules/survey/__test/mockResponseSchema.ts

@@ -71,6 +71,11 @@ export const mockSensitiveResponseSchema: ResponseSchema = {
         is_again: true,
         again_text: '确认要提交吗？',
       },
+      jumpConfig: {
+        type: 'link',
+        link: '',
+        buttonText: '',
+      },
     },
     dataConf: {
       dataList: [
@@ -365,6 +370,11 @@ export const mockResponseSchema: ResponseSchema = {
         is_again: true,
         again_text: '确认要提交吗？',
       },
+      jumpConfig: {
+        type: 'link',
+        link: '',
+        buttonText: '',
+      },
     },
     dataConf: {
       dataList: [

server/src/modules/survey/template/surveyTemplate/templateBase.json

@@ -25,6 +25,11 @@
       "msg_9003": "您来晚了，已经满额！",
       "msg_9004": "提交失败！"
     },
+    "jumpConfig": {
+      "type": "link",
+      "link": "",
+      "buttonText": ""
+    },
     "link": ""
   },
   "bottomConf": {

server/src/modules/surveyResponse/__test/mockResponseSchema.ts

@@ -71,6 +71,11 @@ export const mockResponseSchema: ResponseSchema = {
         is_again: true,
         again_text: '确认要提交吗？',
       },
+      jumpConfig: {
+        type: 'link',
+        link: '',
+        buttonText: '',
+      },
     },
     dataConf: {
       dataList: [

web/src/management/pages/edit/components/SetterField.vue

@@ -14,6 +14,7 @@
           v-for="(content, contentIndex) in item.content"
           :key="`${item.key}${contentIndex}`"
           :form-config="content"
+          v-show="isShowFormItem(content)"
         >
           <Component
             :is="components[content.type]"
@@ -82,6 +83,14 @@ const formFieldData = ref<Array<any>>([])
 const init = ref<boolean>(true)
 const components = shallowRef<any>(props.customComponents || {})
 
+const isShowFormItem = (content: any) => {
+  if (_isFunction(content.toggleShowFn)) {
+    return content.toggleShowFn(props.moduleConfig)
+  } else {
+    return true
+  }
+}
+
 const handleFormChange = (data: any, formConfig: any) => {
   // 处理用户操作的设置器的值
   if (_isFunction(formConfig?.valueSetter)) {

web/src/management/pages/edit/modules/resultModule/SetterPanel.vue

@@ -5,7 +5,7 @@
     </div>
     <SetterField
       class="question-config-form"
-      label-position="top"
+      label-position="left"
       :form-config-list="formFields"
       :module-config="moduleConfig"
       @form-change="handleFormChange"
@@ -71,4 +71,25 @@ const handleFormChange = ({ key, value }: any) => {
 .question-config-form {
   padding: 30px 20px 50px 20px;
 }
+
+:deep(.group-wrap) {
+  margin-bottom: 0;
+  &:not(:last-child) {
+    margin-bottom: 32px;
+  }
+
+  .group-title {
+    margin-bottom: 12px;
+  }
+
+  .el-form-item {
+    margin-bottom: 16px;
+
+    .el-radio {
+      height: initial;
+      line-height: initial;
+      margin-bottom: initial;
+    }
+  }
+}
 </style>

web/src/management/pages/edit/modules/resultModule/components/SuccessContent.vue

@@ -5,7 +5,9 @@
         <img src="/imgs/icons/success.webp" class="success-img" />
         <div class="title-msg" v-safe-html="successText"></div>
       </div>
-      <div class="bottom-btn"></div>
+      <div v-if="jumpConfig.buttonText && jumpConfig.type === 'button'" class="jump-btn">
+        {{ jumpConfig.buttonText }}
+      </div>
     </div>
   </div>
 </template>
@@ -17,6 +19,7 @@ interface Props {
 }
 const props = defineProps<Props>()
 const successText = computed(() => props.moduleConfig?.msgContent?.msg_200 || '')
+const jumpConfig = computed(() => props.moduleConfig?.jumpConfig || {})
 </script>
 <style lang="scss" scoped>
 /*成功页面跳转全屏展示浮层*/
@@ -50,7 +53,18 @@ const successText = computed(() => props.moduleConfig?.msgContent?.msg_200 || ''
     font-size: 0.36rem;
   }
 }
-.bottom-btn {
+.jump-btn {
-  height: 300px;
+  background: var(--primary-color);
+  border-radius: 2px;
+  width: 90%;
+  height: 40px;
+  line-height: 40px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0 auto;
 }
 </style>

web/src/management/pages/edit/setterConfig/statusConfig.js

@@ -1,7 +1,7 @@
 export default {
   Success: [
     {
-      label: '提示文案',
+      title: '提示文案',
       type: 'RichText',
       key: 'msgContent.msg_200',
       placeholder: '提交成功',
@@ -9,6 +9,46 @@ export default {
       labelStyle: {
         'font-weight': 'bold'
       }
+    },
+    {
+      title: '交卷跳转',
+      type: 'Customed',
+      key: 'jumpConfig',
+      content: [
+        {
+          key: 'jumpConfig.type',
+          type: 'RadioGroup',
+          value: 'link',
+          options: [
+            {
+              label: '跳转网页',
+              value: 'link'
+            },
+            {
+              label: '跳转按钮',
+              value: 'button'
+            },
+          ],
+        },
+        {
+          key: 'jumpConfig.buttonText',
+          label: '按钮文案',
+          type: 'InputSetter',
+          placeholder: '请输入按钮文案',
+          value: '',
+          toggleShowFn: (data) => {
+            return data?.jumpConfig?.type === 'button'
+          },
+        },
+        {
+          key: 'jumpConfig.link',
+          label: '跳转链接',
+          type: 'InputSetter',
+          placeholder: '请输入网址',
+          value: '',
+        },
+
+      ]
     }
   ],
   OverTime: [

web/src/render/pages/SuccessPage.vue

@@ -16,13 +16,17 @@
         >
           重新填写
         </router-link>
+
+        <a v-if="showJumpButton" :href="jumpConfig.link" class="jump-btn">
+          {{ jumpConfig.buttonText }}
+        </a>
       </div>
       <LogoIcon :logo-conf="logoConf" :readonly="true" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useSurveyStore } from '../stores/survey'
 // @ts-ignore
 import communalLoader from '@materials/communals/communalLoader.js'
@@ -37,6 +41,20 @@ const successMsg = computed(() => {
   const msgContent = (surveyStore?.submitConf as any)?.msgContent || {}
   return msgContent?.msg_200 || '提交成功'
 })
+
+const jumpConfig = computed(() => {
+  return (surveyStore?.submitConf as any)?.jumpConfig || {}
+})
+
+const showJumpButton = ref(false)
+
+watchEffect(() => {
+  const { jumpConfig } = (surveyStore?.submitConf || {}) as any
+  if (jumpConfig?.type === 'link' && jumpConfig?.link) {
+    window.location.href = jumpConfig.link
+  }
+  showJumpButton.value = jumpConfig?.type === 'button' && jumpConfig?.buttonText
+})
 </script>
 <style lang="scss" scoped>
 @import '@/render/styles/variable.scss';
@@ -87,5 +105,21 @@ const successMsg = computed(() => {
     text-decoration: underline;
     display: block;
   }
+
+  .jump-btn {
+    background: var(--primary-color);
+    border-radius: 2px;
+    width: 90%;
+    height: 40px;
+    line-height: 40px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    font-weight: 500;
+    margin: 32px auto 0;
+    cursor: pointer;
+  }
 }
 </style>