feat: 结果页新增跳转设置 (#432)
Co-authored-by: jiangchunfu <jiangchunfu@kaike.la>
This commit is contained in:
Jiangchunfu
GitHub
parent
0a27554bb6
commit
81df0eae05
@ -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;
|
||||
}
|
||||
|
||||
// 白名单类型
|
||||
|
||||
@ -275,6 +275,11 @@ describe('DataStatisticController', () => {
|
||||
again_text: '确认要提交吗？',
|
||||
},
|
||||
link: '',
|
||||
jumpConfig: {
|
||||
type: 'link',
|
||||
link: '',
|
||||
buttonText: '',
|
||||
},
|
||||
},
|
||||
logicConf: {
|
||||
showLogicConf: [],
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -25,6 +25,11 @@
|
||||
"msg_9003": "您来晚了，已经满额！",
|
||||
"msg_9004": "提交失败！"
|
||||
},
|
||||
"jumpConfig": {
|
||||
"type": "link",
|
||||
"link": "",
|
||||
"buttonText": ""
|
||||
},
|
||||
"link": ""
|
||||
},
|
||||
"bottomConf": {
|
||||
|
||||
@ -71,6 +71,11 @@ export const mockResponseSchema: ResponseSchema = {
|
||||
is_again: true,
|
||||
again_text: '确认要提交吗？',
|
||||
},
|
||||
jumpConfig: {
|
||||
type: 'link',
|
||||
link: '',
|
||||
buttonText: '',
|
||||
},
|
||||
},
|
||||
dataConf: {
|
||||
dataList: [
|
||||
|
||||
@ -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)) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {
|
||||
height: 300px;
|
||||
.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: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user