feat: survey vuex to pinia (#331)

* feat: survey vuex to pinia

* feat: fix ts type-check

* feat: fix lint error

web/src/render/pages/IndexPage.vue

@@ -8,11 +8,13 @@ import { useRoute } from 'vue-router'
 
 import { getPublishedSurveyInfo, getPreviewSchema } from '../api/survey'
 import useCommandComponent from '../hooks/useCommandComponent'
+import { useSurveyStore } from '../stores/survey'
 
 import AlertDialog from '../components/AlertDialog.vue'
 import { initRuleEngine } from '@/render/hooks/useRuleEngine.js'
 const store = useStore()
 const route = useRoute()
+const surveyStore = useSurveyStore()
 const loadData = (res: any, surveyPath: string) => {
   if (res.code === 200) {
     const data = res.data
@@ -36,7 +38,7 @@ const loadData = (res: any, surveyPath: string) => {
 
     document.title = data.title
 
-    store.commit('setSurveyPath', surveyPath)
+    surveyStore.setSurveyPath(surveyPath)
     store.dispatch('init', questionData)
     initRuleEngine(logicConf?.showLogicConf)
   } else {
@@ -46,7 +48,7 @@ const loadData = (res: any, surveyPath: string) => {
 onMounted(() => {
   const surveyId = route.params.surveyId
   console.log({ surveyId })
-  store.commit('setSurveyPath', surveyId)
+  surveyStore.setSurveyPath(surveyId)
   getDetail(surveyId as string)
 })
 
@@ -60,7 +62,7 @@ const getDetail = async (surveyPath: string) => {
     } else {
       const res: any = await getPublishedSurveyInfo({ surveyPath })
       loadData(res, surveyPath)
-      store.dispatch('getEncryptInfo')
+      surveyStore.getEncryptInfo();
     }
   } catch (error: any) {
     console.log(error)

web/src/render/pages/RenderPage.vue

@@ -29,6 +29,7 @@ import AlertDialog from '../components/AlertDialog.vue'
 import ConfirmDialog from '../components/ConfirmDialog.vue'
 import ProgressBar from '../components/ProgressBar.vue'
 
+import { useSurveyStore } from '../stores/survey'
 import { submitForm } from '../api/survey'
 import encrypt from '../utils/encrypt'
 
@@ -57,12 +58,13 @@ const confirm = useCommandComponent(ConfirmDialog)
 
 const store = useStore()
 const router = useRouter()
+const surveyStore = useSurveyStore()
 
 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 surveyPath = computed(() => surveyStore.surveyPath || '')
 
 const validate = (cbk: (v: boolean) => void) => {
   const index = 0
@@ -70,8 +72,8 @@ const validate = (cbk: (v: boolean) => void) => {
 }
 
 const normalizationRequestBody = () => {
-  const enterTime = store.state.enterTime
-  const encryptInfo = store.state.encryptInfo
+  const enterTime = surveyStore.enterTime
+  const encryptInfo = surveyStore.encryptInfo as any;
   const formValues = store.state.formValues
 
   const result: any = {
@@ -82,7 +84,7 @@ const normalizationRequestBody = () => {
   }
   
   if (encryptInfo?.encryptType) {
-    result.encryptType = encryptInfo?.encryptType
+    result.encryptType = encryptInfo.encryptType
     result.data = encrypt[result.encryptType as 'rsa']({
       data: result.data,
       secretKey: encryptInfo?.data?.secretKey

web/src/render/store/actions.js

@@ -4,16 +4,17 @@ import 'moment/locale/zh-cn'
 // 设置中文
 moment.locale('zh-cn')
 import adapter from '../adapter'
-import { queryVote, getEncryptInfo } from '@/render/api/survey'
+import { queryVote } from '@/render/api/survey'
 import { RuleMatch } from '@/common/logicEngine/RulesMatch'
+import { useSurveyStore } from '@/render/stores/survey'
 /**
  * CODE_MAP不从management引入，在dev阶段，会导致B端 router被加载，进而导致C端路由被添加 baseUrl: /management
  */
-const CODE_MAP = {
-  SUCCESS: 200,
-  ERROR: 500,
-  NO_AUTH: 403
-}
+// const CODE_MAP = {
+//   SUCCESS: 200,
+//   ERROR: 500,
+//   NO_AUTH: 403
+// }
 const VOTE_INFO_KEY = 'voteinfo'
 import router from '../router'
 export default {
@@ -22,7 +23,8 @@ export default {
     { commit, dispatch },
     { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }
   ) {
-    commit('setEnterTime')
+    const surveyStore = useSurveyStore()
+    surveyStore.setEnterTime();
     const { begTime, endTime, answerBegTime, answerEndTime } = baseConf
     const { msgContent } = submitConf
     const now = Date.now()
@@ -90,8 +92,9 @@ export default {
   },
   // 初始化投票题的数据
   async initVoteData({ state, commit }) {
+    const surveyStore = useSurveyStore()
     const questionData = state.questionData
-    const surveyPath = state.surveyPath
+    const surveyPath = surveyStore.surveyPath
 
     const fieldList = []
 
@@ -163,16 +166,16 @@ export default {
       commit('updateVoteMapByKey', totalPayload)
     })
   },
-  async getEncryptInfo({ commit }) {
-    try {
-      const res = await getEncryptInfo()
-      if (res.code === CODE_MAP.SUCCESS) {
-        commit('setEncryptInfo', res.data)
-      }
-    } catch (error) {
-      console.log(error)
-    }
-  },
+  // async getEncryptInfo({ commit }) {
+  //   try {
+  //     const res = await getEncryptInfo()
+  //     if (res.code === CODE_MAP.SUCCESS) {
+  //       commit('setEncryptInfo', res.data)
+  //     }
+  //   } catch (error) {
+  //     console.log(error)
+  //   }
+  // },
   async initRuleEngine({ commit }, ruleConf) {
     const ruleEngine = new RuleMatch(ruleConf)
     commit('setRuleEgine', ruleEngine)

web/src/render/store/mutations.js

@@ -24,12 +24,12 @@ export default {
     const { key, value, field } = data
     set(state, `questionData.${field}.othersValue.${key}`, value)
   },
-  setEnterTime(state) {
-    state.enterTime = Date.now()
-  },
-  setSurveyPath(state, data) {
-    state.surveyPath = data
-  },
+  // setEnterTime(state) {
+  //   state.enterTime = Date.now()
+  // },
+  // setSurveyPath(state, data) {
+  //   state.surveyPath = data
+  // },
   setVoteMap(state, data) {
     state.voteMap = data
   },
@@ -44,9 +44,9 @@ export default {
   setQuestionSeq(state, data) {
     state.questionSeq = data
   },
-  setEncryptInfo(state, data) {
-    state.encryptInfo = data
-  },
+  // setEncryptInfo(state, data) {
+  //   state.encryptInfo = data
+  // },
   setRuleEgine(state, ruleEngine) {
     state.ruleEngine = ruleEngine
   }

web/src/render/store/state.js

@@ -1,16 +1,16 @@
-import { isMobile } from '../utils/index'
+// import { isMobile } from '../utils/index'
 
 export default {
-  surveyPath: '',
+  // surveyPath: '',
   questionData: null,
-  isMobile: isMobile(),
+  // isMobile: isMobile(),
   errorInfo: {
     errorType: '',
     errorMsg: ''
   },
-  enterTime: null,
+  // enterTime: null,
   questionSeq: [], // 题目的顺序，因为可能会有分页的情况，所以是一个二维数组[[qid1, qid2], [qid3,qid4]]
   voteMap: {},
-  encryptInfo: null,
+  // encryptInfo: null,
   ruleEngine: null
 }

web/src/render/stores/survey.js

@@ -1 +1,50 @@
-// 问卷相关的Pinia Store
+// 问卷相关的Pinia Store
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { isMobile as isInMobile } from '@/render/utils/index'
+import {  getEncryptInfo as getEncryptInfoApi } from '@/render/api/survey'
+
+/**
+ * CODE_MAP不从management引入，在dev阶段，会导致B端 router被加载，进而导致C端路由被添加 baseUrl: /management
+ */
+const CODE_MAP = {
+  SUCCESS: 200,
+  ERROR: 500,
+  NO_AUTH: 403
+}
+export const useSurveyStore = defineStore('survey', () => {
+  const surveyPath = ref('');
+  const isMobile = ref(isInMobile())
+  const enterTime = ref(0)
+  const encryptInfo = ref(null)
+
+  const setSurveyPath = ( data) => {
+    surveyPath.value = data
+  }
+
+  const setEnterTime = () => {
+    enterTime.value = Date.now()
+  }
+
+  const getEncryptInfo =  async() => {
+    try {
+      const res = await getEncryptInfoApi()
+      if (res.code === CODE_MAP.SUCCESS) {
+        encryptInfo.value = res.data
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  return {
+    surveyPath,
+    isMobile,
+    enterTime,
+    encryptInfo,
+
+    setSurveyPath,
+    setEnterTime,
+    getEncryptInfo
+  }
+})