feat: c端路由改造 (#296)

web/src/management/pages/edit/modules/logicModule/components/ConditionView.vue

@@ -1,8 +1,8 @@
 <template>
  <div
-  class="condition-wrapper"
-  :class="{ 'is-last': isLastCondition }"
-  :data-content-before="!isLastCondition ? '且' : ''"
+ class="condition-wrapper"
+ :class="{ 'is-last': isLastCondition }"
+ :data-content-before="!isLastCondition ? '且' : ''"
  >
  <span class="desc">如果</span>
  <el-form-item
@@ -15,16 +15,9 @@
  placeholder="请选择题目"
  @change="(val: any) => handleChange(conditionNode, 'field', val)"
  >
- <el-option
- v-for="{ label, value } in fieldList"
- :key="value"
- :label="label"
- :value="value"
- >
+ <el-option v-for="{ label, value } in fieldList" :key="value" :label="label" :value="value">
  </el-option>
- <template #empty>
- 无数据
- </template>
+ <template #empty> 无数据 </template>
  </el-select>
  </el-form-item>
  <span class="desc">选择了</span>
@@ -45,9 +38,7 @@
  :label="label"
  :value="value"
  ></el-option>
- <template #empty>
- 无数据
- </template>
+ <template #empty> 无数据 </template>
  </el-select>
  </el-form-item>
  <span class="desc">中的任一选项 </span>

web/src/management/pages/edit/modules/logicModule/components/RuleNodeView.vue

@@ -36,9 +36,7 @@
  :value="value"
  >
  </el-option>
- <template #empty>
- 无数据
- </template>
+ <template #empty> 无数据 </template>
  </el-select>
  </el-form-item>
  </div>

web/src/render/App.vue

@@ -1,49 +1,15 @@
 <template>
  <div id="app">
- <Component
- v-if="store.state.router"
- :is="
- components[
- upperFirst(store.state.router) as 'IndexPage' | 'EmptyPage' | 'ErrorPage' | 'SuccessPage'
- ]
- "
- >
- </Component>
- <LogoIcon
- v-if="!['successPage', 'indexPage'].includes(store.state.router)"
- :logo-conf="logoConf"
- :readonly="true"
- />
+ <router-view></router-view>
  </div>
 </template>
 <script setup lang="ts">
-import { computed, watch, onMounted } from 'vue'
+import { computed, watch } from 'vue'
 import { useStore } from 'vuex'
-
-import { getPublishedSurveyInfo, getPreviewSchema } from './api/survey'
-import useCommandComponent from './hooks/useCommandComponent'
-
-import EmptyPage from './pages/EmptyPage.vue'
-import IndexPage from './pages/IndexPage.vue'
-import ErrorPage from './pages/ErrorPage.vue'
-import SuccessPage from './pages/SuccessPage.vue'
-import AlertDialog from './components/AlertDialog.vue'
-// @ts-ignore
-import communalLoader from '@materials/communals/communalLoader.js'
-import { get as _get, upperFirst } from 'lodash-es'
-import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
-
-const LogoIcon = communalLoader.loadComponent('LogoIcon')
+import { get as _get } from 'lodash-es'
 
 const store = useStore()
-const logoConf = computed(() => store.state?.bottomConf || {})
 const skinConf = computed(() => _get(store, 'state.skinConf', {}))
-const components = {
- EmptyPage,
- IndexPage,
- ErrorPage,
- SuccessPage
-}
 
 const updateSkinConfig = (value: any) => {
  const root = document.documentElement
@@ -65,66 +31,9 @@ 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)
 })
-
-onMounted(async () => {
- const surveyPath = location.pathname.split('/').pop()
-
- if (!surveyPath) {
- store.commit('setRouter', 'EmptyPage')
- return
- }
-
- const alert = useCommandComponent(AlertDialog)
- try {
- if (surveyPath.length > 8) {
- const res: any = await getPreviewSchema({ surveyPath })
- loadData(res, surveyPath)
- } else {
- const res: any = await getPublishedSurveyInfo({ surveyPath })
- loadData(res, surveyPath)
- store.dispatch('getEncryptInfo')
- }
- } catch (error: any) {
- console.log(error)
- alert({ title: error.message || '获取问卷失败' })
- }
-})
 </script>
 <style lang="scss">
 @import url('./styles/icon.scss');

web/src/render/main.js

@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import EventBus from './utils/eventbus'
-
+import router from './router'
 import store from './store'
 
 const app = createApp(App)
@@ -10,7 +10,7 @@ const $bus = new EventBus()
 app.provide('$bus', $bus)
 // 挂载到this上
 app.config.globalProperties.$bus = $bus
-
+app.use(router)
 app.use(store)
 
 app.mount('#app')

web/src/render/pages/ErrorPage.vue

@@ -1,16 +1,21 @@
 <template>
  <div class="result-page-wrap">
  <div class="result-page">
- <div class="error-wrapper">
- <img class="error-img" :src="errorImageUrl" />
- <div class="bottom-word" v-html="errorMsg"></div>
+ <div class="page-content">
+ <img class="img" :src="errorImageUrl" />
+ <div class="msg" v-html="errorMsg"></div>
  </div>
+ <LogoIcon :logo-conf="logoConf" :readonly="true" />
  </div>
  </div>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useStore } from 'vuex'
+// @ts-ignore
+import communalLoader from '@materials/communals/communalLoader.js'
+
+const LogoIcon = communalLoader.loadComponent('LogoIcon')
 
 const store = useStore()
 
@@ -24,7 +29,8 @@ const errorImageUrl = computed(() => {
  return imageMap[errorType as 'overTime'] || imageMap.default
 })
 
-const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
+const errorMsg = computed(() => store.state?.errorInfo?.errorMsg || '提交失败')
+const logoConf = computed(() => store.state?.bottomConf || {})
 </script>
 <style lang="scss" scoped>
 .result-page-wrap {
@@ -42,25 +48,27 @@ const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
  height: 100%;
  }
 }
-.error-wrapper {
- text-align: center;
- font-size: 14px;
+.page-content {
+ position: relative;
+ max-width: 920px;
+ margin: 0 auto;
+ height: 100%;
+ width: 100%;
+ position: relative;
+ padding-top: 2rem;
  flex: 1;
 
- p {
- text-align: center;
- }
-
- .error-img {
- margin-top: 2rem;
- margin-bottom: 30px;
+ .img {
  width: 2rem;
- height: auto;
  }
 
- .bottom-word {
- color: #999;
- margin-top: 10px;
+ .msg {
+ font-size: 0.32rem;
+ color: #4a4c5b;
+ letter-spacing: 0;
+ text-align: center;
+ font-weight: 500;
+ margin-top: 0.15rem;
  }
 }
 </style>