feat:新增预览功能 (#257)

* feat:问卷预览功能
* feat:修复样式问题

nginx/nginx.conf

@@ -39,6 +39,11 @@ http {
  try_files $uri $uri/ /management.html;
  }
 
+ location /management/preview/ {
+ try_files $uri $uri/ /render.html;
+ }
+
+
  location /render/ {
  try_files $uri $uri/ /render.html;
  }

server/src/modules/survey/controllers/survey.controller.ts

@@ -223,6 +223,38 @@ export class SurveyController {
  };
  }
 
+ @Get('/getPreviewSchema')
+ @HttpCode(200)
+ async getPreviewSchema(
+ @Query()
+ queryInfo: {
+ surveyPath: string;
+ },
+ @Request()
+ req,
+ ) {
+ const { value, error } = Joi.object({
+ surveyId: Joi.string().required(),
+ }).validate({ surveyId: queryInfo.surveyPath });
+
+ if (error) {
+ this.logger.error(error.message, { req });
+ throw new HttpException('参数有误', EXCEPTION_CODE.PARAMETER_ERROR);
+ }
+ const surveyId = value.surveyId;
+ const surveyConf =
+ await this.surveyConfService.getSurveyConfBySurveyId(surveyId);
+ const surveyMeta = await this.surveyMetaService.getSurveyById({ surveyId });
+ return {
+ code: 200,
+ data: {
+ ...surveyConf,
+ title: surveyMeta?.title,
+ surveyPath: surveyMeta?.surveyPath,
+ },
+ };
+ }
+
  @Post('/publishSurvey')
  @HttpCode(200)
  @UseGuards(SurveyGuard)

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

@@ -8,6 +8,7 @@
  <NavPanel></NavPanel>
  </div>
  <div class="right-group">
+ <PreviewPanel></PreviewPanel>
  <HistoryPanel></HistoryPanel>
  <SavePanel></SavePanel>
  <PublishPanel></PublishPanel>
@@ -23,6 +24,7 @@ import BackPanel from '../modules/generalModule/BackPanel.vue'
 import TitlePanel from '../modules/generalModule/TitlePanel.vue'
 import NavPanel from '../modules/generalModule/NavPanel.vue'
 import HistoryPanel from '../modules/contentModule/HistoryPanel.vue'
+import PreviewPanel from '../modules/contentModule/PreviewPanel.vue'
 import SavePanel from '../modules/contentModule/SavePanel.vue'
 import PublishPanel from '../modules/contentModule/PublishPanel.vue'
 

web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue

@@ -0,0 +1,184 @@
+<template>
+ <div class="preview-panel">
+ <div class="preview-btn" @click="dialogTableVisible = true">
+ <i-ep-view class="view-icon" :size="20" />
+ <span class="btn-txt">预览</span>
+ </div>
+ <el-dialog
+ :z-index="99999"
+ top="50px"
+ class="preview-config-wrapper"
+ :destroy-on-close="true"
+ :show-close="false"
+ @open="openDialog"
+ @closed="closedDialog"
+ v-model="dialogTableVisible"
+ :width="`${previewTab == 1 ? '398' : '1290'}`"
+ >
+ <div class="ml75">
+ <div class="preview-tab">
+ <div :class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`" @click="previewTab = 1">
+ <i-ep-iphone />
+ </div>
+ <div :class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`" @click="previewTab = 2">
+ <i-ep-monitor />
+ </div>
+ </div>
+ <div :class="`preview-panel ${previewTab == 1 ? 'phone' : 'pc'}`">
+ <div class="wrapper">
+ <div class="tips-wrapper">
+ <i-ep-WarningFilled /> <span>用户预览模式，数据不保存！</span>
+ </div>
+ <div v-loading="loading" element-loading-text="加载中..." style="height: 100%">
+ <iframe
+ v-loading="loading"
+ id="iframe-preview"
+ :src="`/management/preview/${surveyId}`"
+ frameborder="0"
+ width="100%"
+ height="100%"
+ ></iframe>
+ </div>
+ </div>
+ </div>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const dialogTableVisible = ref(false)
+const previewTab = ref(1)
+const surveyId = route.params.id
+const loading = ref(true)
+
+const openDialog = () => {
+ const iframePreview = document.getElementById('iframe-preview')
+ if (!iframePreview) return
+ iframePreview.onload = function () {
+ loading.value = false
+ }
+}
+
+const closedDialog = () => {
+ loading.value = true
+}
+</script>
+<style lang="scss" scoped>
+.preview-panel {
+ :deep(.preview-config-wrapper) {
+ background-color: transparent;
+ box-shadow: none;
+ padding: 0;
+ }
+ .ml75{
+ margin-left: 75px;
+ }
+
+ .preview-btn {
+ width: 50px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ color: #4a4c5b;
+ cursor: pointer;
+
+ i {
+ font-size: 20px;
+ }
+
+ .btn-txt {
+ font-size: 12px;
+ }
+ }
+ .view-icon {
+ font-size: 18px;
+ margin-bottom: 4px;
+ }
+
+ .preview-tab {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .border-right-none {
+ border-right: none;
+ }
+
+ .active {
+ border-color: $primary-color;
+ color: $primary-color;
+ }
+
+ .border-left-none {
+ border-left: none;
+ }
+
+ &-item {
+ width: 80px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #ffffff;
+ border: 1px solid rgba(227, 228, 232, 1);
+ cursor: pointer;
+ &:hover {
+ border-color: $primary-color;
+ color: $primary-color;
+ }
+ }
+ }
+ .preview-panel {
+ margin-top: 16px;
+ &.pc {
+ display: flex;
+ justify-content: center;
+ background: #ffffff;
+ box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
+ height: 726px;
+ .wrapper {
+ width: 636px;
+ height: 704px;
+ }
+ }
+ &.phone {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .wrapper {
+ background: url('/imgs/preview-phone.png') no-repeat;
+ width: 328px;
+ height: 678px;
+ background-size: 100% 100%;
+ padding: 0 14px;
+ padding-top: 58px;
+ padding-bottom: 14px;
+ display: flex;
+ flex-direction: column;
+ }
+ iframe {
+ border-radius: 0px 0px 20px 20px;
+ }
+ }
+ }
+ .tips-wrapper {
+ display: flex;
+ align-items: center;
+ background: $primary-bg-color;
+ color: $primary-color;
+ font-size: 12px;
+ padding: 2px 0;
+ padding-left: 9px;
+
+ span {
+ margin-left: 5px;
+ }
+ }
+}
+</style>

web/src/render/App.vue

@@ -20,7 +20,7 @@
 import { computed, watch, onMounted } from 'vue'
 import { useStore } from 'vuex'
 
-import { getPublishedSurveyInfo } from './api/survey'
+import { getPublishedSurveyInfo, getPreviewSchema } from './api/survey'
 import useCommandComponent from './hooks/useCommandComponent'
 
 import EmptyPage from './pages/EmptyPage.vue'
@@ -65,6 +65,39 @@ const updateSkinConfig = (value: any) => {
  }
 }
 
+const loadData = (res: any, surveyPath: string) => {
+ if (res.code === 200) {
+ const data = res.data
+ const {
+ bannerConf,
+ baseConf,
+ bottomConf,
+ dataConf,
+ skinConf,
+ submitConf,
+ logicConf
+ } = data.code
+ const questionData = {
+ bannerConf,
+ baseConf,
+ bottomConf,
+ dataConf,
+ skinConf,
+ submitConf
+ }
+
+ document.title = data.title
+
+ updateSkinConfig(skinConf)
+
+ store.commit('setSurveyPath', surveyPath)
+ store.dispatch('init', questionData)
+ initRuleEngine(logicConf?.showLogicConf)
+ } else {
+ throw new Error(res.errmsg)
+ }
+}
+
 watch(skinConf, (value) => {
  updateSkinConfig(value)
 })
@@ -78,33 +111,14 @@ onMounted(async () => {
  }
 
  const alert = useCommandComponent(AlertDialog)
-
  try {
- const res: any = await getPublishedSurveyInfo({ surveyPath })
-
- if (res.code === 200) {
- const data = res.data
- const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf, logicConf } =
- data.code
- const questionData = {
- bannerConf,
- baseConf,
- bottomConf,
- dataConf,
- skinConf,
- submitConf
- }
-
- document.title = data.title
-
- updateSkinConfig(skinConf)
-
- store.commit('setSurveyPath', surveyPath)
- store.dispatch('init', questionData)
- store.dispatch('getEncryptInfo')
- initRuleEngine(logicConf?.showLogicConf)
+ if (surveyPath.length > 8) {
+ const res: any = await getPreviewSchema({ surveyPath })
+ loadData(res, surveyPath)
  } else {
- throw new Error(res.errmsg)
+ const res: any = await getPublishedSurveyInfo({ surveyPath })
+ loadData(res, surveyPath)
+ store.dispatch('getEncryptInfo')
  }
  } catch (error: any) {
  console.log(error)

web/src/render/api/survey.js

@@ -8,6 +8,14 @@ export const getPublishedSurveyInfo = ({ surveyPath }) => {
  })
 }
 
+export const getPreviewSchema = ({ surveyPath }) => {
+ return axios.get('/survey/getPreviewSchema', {
+ params: {
+ surveyPath
+ }
+ })
+}
+
 export const submitForm = (data) => {
  return axios.post('/surveyResponse/createResponse', data)
 }

web/src/render/pages/IndexPage.vue

@@ -60,6 +60,7 @@ const bannerConf = computed(() => store.state?.bannerConf || {})
 const renderData = computed(() => store.getters.renderData)
 const submitConf = computed(() => store.state?.submitConf || {})
 const logoConf = computed(() => store.state?.bottomConf || {})
+const surveyPath = computed(() => store.state?.surveyPath || '')
 
 const validate = (cbk: (v: boolean) => void) => {
  const index = 0
@@ -70,10 +71,9 @@ const normalizationRequestBody = () => {
  const enterTime = store.state.enterTime
  const encryptInfo = store.state.encryptInfo
  const formValues = store.state.formValues
- const surveyPath = store.state.surveyPath
 
  const result: any = {
- surveyPath,
+ surveyPath: surveyPath.value,
  data: JSON.stringify(formValues),
  difTime: Date.now() - enterTime,
  clientTime: Date.now()
@@ -96,6 +96,10 @@ const normalizationRequestBody = () => {
 }
 
 const submitSurver = async () => {
+ if (surveyPath.value.length > 8) {
+ store.commit('setRouter', 'successPage')
+ return
+ }
  try {
  const params = normalizationRequestBody()
  console.log(params)

web/vite.config.ts

@@ -34,6 +34,10 @@ const mpaPlugin = createMpaPlugin({
  from: /render/,
  to: () => normalizePath('/src/render/index.html')
  },
+ {
+ from: /management\/preview/,
+ to: () => normalizePath('/src/render/index.html')
+ },
  {
  from: /\/|\/management\/.?/,
  to: () => normalizePath('/src/management/index.html')