diff --git a/nginx/nginx.conf b/nginx/nginx.conf index 88c6265d..34854cdf 100644 --- a/nginx/nginx.conf +++ b/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; } diff --git a/server/src/modules/survey/controllers/survey.controller.ts b/server/src/modules/survey/controllers/survey.controller.ts index c8b59fb2..df1a3d62 100644 --- a/server/src/modules/survey/controllers/survey.controller.ts +++ b/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) diff --git a/web/public/imgs/preview-phone.png b/web/public/imgs/preview-phone.png new file mode 100644 index 00000000..375bf1b5 Binary files /dev/null and b/web/public/imgs/preview-phone.png differ diff --git a/web/src/management/pages/edit/components/ModuleNavbar.vue b/web/src/management/pages/edit/components/ModuleNavbar.vue index 4754af42..0965cddf 100644 --- a/web/src/management/pages/edit/components/ModuleNavbar.vue +++ b/web/src/management/pages/edit/components/ModuleNavbar.vue @@ -8,6 +8,7 @@
+ @@ -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' diff --git a/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue new file mode 100644 index 00000000..4d8ca94e --- /dev/null +++ b/web/src/management/pages/edit/modules/contentModule/PreviewPanel.vue @@ -0,0 +1,184 @@ + + + diff --git a/web/src/render/App.vue b/web/src/render/App.vue index 1ffd4724..7a8b11ce 100644 --- a/web/src/render/App.vue +++ b/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) diff --git a/web/src/render/api/survey.js b/web/src/render/api/survey.js index 8ae6929c..5b6824f3 100644 --- a/web/src/render/api/survey.js +++ b/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) } diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue index 7f02b5cd..af2cb0c5 100644 --- a/web/src/render/pages/IndexPage.vue +++ b/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) diff --git a/web/vite.config.ts b/web/vite.config.ts index d7e5a8d8..1d36bdcf 100644 --- a/web/vite.config.ts +++ b/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')