refactor: 重构 render/pages 目录下三个文件, 使用 Vue3 组合式 API 写法 (#113)

web/src/render/pages/ErrorPage.vue

@@ -8,29 +8,23 @@
  </div>
  </div>
 </template>
-<script>
-export default {
- name: 'errorPage',
- data() {
- return {
- imageMap: {
- overTime: '/imgs/icons/overtime.webp'
- }
- }
- },
- computed: {
- errorImageUrl() {
- return this.imageMap[this.errorType] || this.imageMap.default
- },
- errorType() {
- return this.$store.state?.errorInfo?.errorType
- },
- errorMsg() {
- return this.$store.state?.errorInfo?.errorMsg
- }
- },
- mounted() {}
-}
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+const store = useStore()
+
+const errorImageUrl = computed(() => {
+ const errorType = store.state?.errorInfo?.errorType
+ const imageMap = {
+ overTime: '/imgs/icons/overtime.webp',
+ default: '/imgs/icons/error.webp',
+ }
+
+ return imageMap[errorType as 'overTime'] || imageMap.default
+})
+
+const errorMsg = computed(() => store.state?.errorInfo?.errorMsg)
 </script>
 <style lang="scss" scoped>
 .result-page-wrap {

web/src/render/pages/IndexPage.vue

@@ -1,19 +1,21 @@
 <template>
  <div class="index">
  <progressBar />
- <div class="wrapper" ref="box">
+ <div class="wrapper" ref="boxRef">
  <HeaderSetter></HeaderSetter>
  <div class="content">
  <MainTitle></MainTitle>
- <MainRenderer ref="main"></MainRenderer>
- <submit :validate="validate" :renderData="renderData" @submit="onSubmit"></submit>
+ <MainRenderer ref="mainRef"></MainRenderer>
+ <submit :validate="validate" :renderData="renderData" @submit="handleSubmit"></submit>
  <LogoIcon />
  </div>
  </div>
  </div>
 </template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useStore } from 'vuex'
 
-<script>
 import HeaderSetter from '../components/HeaderSetter.vue'
 import MainTitle from '../components/MainTitle.vue'
 import submit from '../components/SubmitSetter.vue'
@@ -28,115 +30,101 @@ import encrypt from '../utils/encrypt'
 
 import useCommandComponent from '../hooks/useCommandComponent'
 
-export default {
- name: 'indexPage',
- props: {
- questionInfo: {
- type: Object,
- default: () => ({})
- },
- isMobile: {
- type: Boolean,
- default: false
+interface Props {
+ questionInfo?: any,
+ isMobile?: boolean,
+}
+
+withDefaults(defineProps<Props>(), {
+ questionInfo: {},
+ isMobile: false,
+})
+
+const mainRef = ref<any>()
+const boxRef = ref<HTMLElement>()
+
+const alert = useCommandComponent(AlertDialog)
+const confirm = useCommandComponent(ConfirmDialog)
+
+const store = useStore()
+
+const renderData = computed(() => store.getters.renderData)
+
+const validate = (cbk: (v: boolean) => void) => {
+ const index = 0
+ mainRef.value.$refs.formGroup[index].validate(cbk)
+}
+
+const normalizationRequestBody = () => {
+ const enterTime = store.state.enterTime
+ const encryptInfo = store.state.encryptInfo
+ const formModel = store.getters.formModel
+ const surveyPath = store.state.surveyPath
+
+ const result: any = {
+ surveyPath,
+ data: JSON.stringify(formModel),
+ difTime: Date.now() - enterTime,
+ clientTime: Date.now()
+ }
+
+ if (encryptInfo?.encryptType) {
+ result.encryptType = encryptInfo?.encryptType
+ result.data = encrypt[result.encryptType as 'rsa']({
+ data: result.data,
+ secretKey: encryptInfo?.data?.secretKey
+ })
+ if (encryptInfo?.data?.sessionId) {
+ result.sessionId = encryptInfo.data.sessionId
  }
- },
- components: {
- HeaderSetter,
- MainTitle,
- submit,
- MainRenderer,
- progressBar,
- LogoIcon
- },
- computed: {
- formModel() {
- return this.$store.getters.formModel
- },
- confirmAgain() {
- return this.$store.state.submitConf.confirmAgain
- },
- surveyPath() {
- return this.$store.state.surveyPath
- },
- renderData() {
- return this.$store.getters.renderData
- },
- encryptInfo() {
- return this.$store.state.encryptInfo
+ } else {
+ result.data = JSON.stringify(result.data)
+ }
+
+ return result
+}
+
+const submitSurver = async () => {
+ try {
+ const params = normalizationRequestBody()
+ console.log(params)
+ const res: any = await submitForm(params)
+ if (res.code === 200) {
+ store.commit('setRouter', 'successPage')
+ } else {
+ alert({
+ title: res.errmsg || '提交失败'
+ })
  }
- },
- created() {
- this.alert = useCommandComponent(AlertDialog)
- this.confirm = useCommandComponent(ConfirmDialog)
- },
- methods: {
- validate(cbk) {
- const index = 0
- this.$refs.main.$refs.formGroup[index].validate(cbk)
- },
- onSubmit() {
- const { again_text, is_again } = this.confirmAgain
- if (is_again) {
- this.confirm({
- title: again_text,
- onConfirm: async () => {
- try {
- await this.submitForm()
- } catch (error) {
- console.error(error)
- } finally {
- this.confirm.close()
- }
- }
- })
- } else {
- this.submitForm()
- }
- },
- getSubmitData() {
- const result = {
- surveyPath: this.surveyPath,
- data: JSON.stringify(this.formModel),
- difTime: Date.now() - this.$store.state.enterTime,
- clientTime: Date.now()
- }
- if (this.encryptInfo?.encryptType) {
- result.encryptType = this.encryptInfo?.encryptType
- result.data = encrypt[result.encryptType]({
- data: result.data,
- secretKey: this.encryptInfo?.data?.secretKey
- })
- if (this.encryptInfo?.data?.sessionId) {
- result.sessionId = this.encryptInfo.data.sessionId
- }
- } else {
- result.data = JSON.stringify(result.data)
- }
+ } catch (error) {
+ console.log(error)
+ }
+}
 
- return result
- },
- async submitForm() {
- try {
- const submitData = this.getSubmitData()
- const res = await submitForm(submitData)
- if (res.code === 200) {
- this.$store.commit('setRouter', 'successPage')
- } else {
- this.alert({
- title: res.errmsg || '提交失败'
- })
+const handleSubmit = () => {
+ const confirmAgain = store.state.submitConf.confirmAgain
+ const { again_text, is_again } = confirmAgain
+
+ if (is_again) {
+ confirm({
+ title: again_text,
+ onConfirm: async () => {
+ try {
+ submitSurver()
+ } catch(error) {
+ console.log(error)
+ } finally {
+ confirm.close()
  }
- } catch (error) {
- console.log(error)
  }
- }
+ })
+ } else {
+ submitSurver()
  }
 }
 </script>
-
 <style scoped lang="scss">
 .index {
- // padding-bottom: 0.8rem;
  min-height: 100%;
  .wrapper {
  min-height: 100%;

web/src/render/pages/SuccessPage.vue

@@ -9,20 +9,17 @@
  </div>
  </div>
 </template>
-<script>
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useStore } from 'vuex'
 import LogoIcon from '../components/LogoIcon.vue'
-export default {
- name: 'resultPage',
- components: { LogoIcon },
- computed: {
- submitConf() {
- return this.$store?.state?.submitConf || {}
- },
- successMsg() {
- return this.submitConf?.msgContent?.msg_200 || '提交成功'
- }
- }
-}
+
+const store = useStore()
+
+const successMsg = computed(() => {
+ const msgContent = store.state?.submitConf?.msgContent || {}
+ return msgContent?.msg_200 || '提交成功'
+})
 </script>
 <style lang="scss" scoped>
 @import '@/render/styles/variable.scss';