diff --git a/web/src/render/components/MainRenderer.vue b/web/src/render/components/MainRenderer.vue index f367a11e..4bb8e0de 100644 --- a/web/src/render/components/MainRenderer.vue +++ b/web/src/render/components/MainRenderer.vue @@ -16,10 +16,12 @@ import { computed } from 'vue' import { useStore } from 'vuex' import MaterialGroup from './MaterialGroup.vue' +import { useQuestionStore } from '../stores/question' const store = useStore() +const questionStore = useQuestionStore() -const renderData = computed(() => store.getters?.renderData) +const renderData = computed(() => questionStore.renderData) const rules = computed(() => store.state.rules) const formValues = computed(() => store.state.formValues) diff --git a/web/src/render/components/QuestionWrapper.vue b/web/src/render/components/QuestionWrapper.vue index ed2b8a23..df8e0113 100644 --- a/web/src/render/components/QuestionWrapper.vue +++ b/web/src/render/components/QuestionWrapper.vue @@ -16,6 +16,7 @@ import { useShowInput } from '@/render/hooks/useShowInput' import store from '@/render/store' import { cloneDeep } from 'lodash-es' import { ruleEngine } from '@/render/hooks/useRuleEngine.js' +import { useQuestionStore } from '../stores/question' import { NORMAL_CHOICES, RATES, QUESTION_TYPE } from '@/common/typeEnum.ts' @@ -32,6 +33,7 @@ const props = defineProps({ } }) const emit = defineEmits(['change']) +const questionStore = useQuestionStore() const formValues = computed(() => { return store.state.formValues @@ -105,7 +107,7 @@ const handleChange = (data) => { emit('change', data) // 处理投票题 if (props.moduleConfig.type === QUESTION_TYPE.VOTE) { - store.dispatch('updateVoteData', data) + questionStore.updateVoteData(data) } } diff --git a/web/src/render/hooks/useShowInput.js b/web/src/render/hooks/useShowInput.js index 2bc446ee..66ee9018 100644 --- a/web/src/render/hooks/useShowInput.js +++ b/web/src/render/hooks/useShowInput.js @@ -1,8 +1,11 @@ import store from '../store/index' +import { useQuestionStore } from '../stores/question' + export const useShowInput = (questionKey) => { + const questionStore = useQuestionStore() const formValues = store.state.formValues const questionVal = formValues[questionKey] - let rangeConfig = store.state.questionData[questionKey].rangeConfig + let rangeConfig = questionStore.questionData[questionKey].rangeConfig let othersValue = {} if (rangeConfig && Object.keys(rangeConfig).length > 0) { for (let key in rangeConfig) { diff --git a/web/src/render/hooks/useShowOthers.js b/web/src/render/hooks/useShowOthers.js index 379c9874..c405eae4 100644 --- a/web/src/render/hooks/useShowOthers.js +++ b/web/src/render/hooks/useShowOthers.js @@ -1,9 +1,12 @@ import store from '../store/index' +import { useQuestionStore } from '../stores/question' + export const useShowOthers = (questionKey) => { + const questionStore = useQuestionStore() const formValues = store.state.formValues const questionVal = formValues[questionKey] let othersValue = {} - let options = store.state.questionData[questionKey].options.map((optionItem) => { + let options = questionStore.questionData[questionKey].options.map((optionItem) => { if (optionItem.others) { const opKey = `${questionKey}_${optionItem.hash}` othersValue[opKey] = formValues[opKey] diff --git a/web/src/render/hooks/useVoteMap.js b/web/src/render/hooks/useVoteMap.js index 70d7da95..31a1b397 100644 --- a/web/src/render/hooks/useVoteMap.js +++ b/web/src/render/hooks/useVoteMap.js @@ -1,10 +1,12 @@ -import store from '../store/index' -export const useVoteMap = (questionKey) => { - let voteTotal = store.state.voteMap?.[questionKey]?.total || 0 +import { useQuestionStore } from '../stores/question' - const options = store.state.questionData[questionKey].options.map((option) => { +export const useVoteMap = (questionKey) => { + const questionStore = useQuestionStore() + let voteTotal = questionStore.voteMap?.[questionKey]?.total || 0 + + const options = questionStore.questionData[questionKey].options.map((option) => { const optionHash = option.hash - const voteCount = store.state.voteMap?.[questionKey]?.[optionHash] || 0 + const voteCount = questionStore.voteMap?.[questionKey]?.[optionHash] || 0 return { ...option, diff --git a/web/src/render/pages/RenderPage.vue b/web/src/render/pages/RenderPage.vue index 3c2a4e9d..9be5a020 100644 --- a/web/src/render/pages/RenderPage.vue +++ b/web/src/render/pages/RenderPage.vue @@ -30,6 +30,7 @@ import ConfirmDialog from '../components/ConfirmDialog.vue' import ProgressBar from '../components/ProgressBar.vue' import { useSurveyStore } from '../stores/survey' +import { useQuestionStore } from '../stores/question' import { submitForm } from '../api/survey' import encrypt from '../utils/encrypt' @@ -59,9 +60,10 @@ const confirm = useCommandComponent(ConfirmDialog) const store = useStore() const router = useRouter() const surveyStore = useSurveyStore() +const questionStore = useQuestionStore() const bannerConf = computed(() => store.state?.bannerConf || {}) -const renderData = computed(() => store.getters.renderData) +const renderData = computed(() => questionStore.renderData) const submitConf = computed(() => store.state?.submitConf || {}) const logoConf = computed(() => store.state?.bottomConf || {}) const surveyPath = computed(() => surveyStore.surveyPath || '') diff --git a/web/src/render/store/actions.js b/web/src/render/store/actions.js index a4de4908..777d4227 100644 --- a/web/src/render/store/actions.js +++ b/web/src/render/store/actions.js @@ -4,9 +4,10 @@ import 'moment/locale/zh-cn' // 设置中文 moment.locale('zh-cn') import adapter from '../adapter' -import { queryVote } from '@/render/api/survey' +// import { queryVote } from '@/render/api/survey' import { RuleMatch } from '@/common/logicEngine/RulesMatch' import { useSurveyStore } from '@/render/stores/survey' +import { useQuestionStore } from '@/render/stores/question' /** * CODE_MAP不从management引入,在dev阶段,会导致B端 router被加载,进而导致C端路由被添加 baseUrl: /management */ @@ -15,12 +16,13 @@ import { useSurveyStore } from '@/render/stores/survey' // ERROR: 500, // NO_AUTH: 403 // } -const VOTE_INFO_KEY = 'voteinfo' +// const VOTE_INFO_KEY = 'voteinfo' import router from '../router' export default { // 初始化 - init({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }) { + init({ commit }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }) { const surveyStore = useSurveyStore() + const questionStore = useQuestionStore() surveyStore.setEnterTime() const { begTime, endTime, answerBegTime, answerEndTime } = baseConf const { msgContent } = submitConf @@ -67,10 +69,11 @@ export default { submitConf }) + questionStore.questionData = questionData + questionStore.questionSeq = questionSeq + // 将数据设置到state上 commit('assignState', { - questionData, - questionSeq, rules, bannerConf, baseConf, @@ -81,88 +84,90 @@ export default { formValues }) // 获取已投票数据 - dispatch('initVoteData') + questionStore.initVoteData() }, // 用户输入或者选择后,更新表单数据 changeData({ commit }, data) { commit('changeFormData', data) }, // 初始化投票题的数据 - async initVoteData({ state, commit }) { - const surveyStore = useSurveyStore() - const questionData = state.questionData - const surveyPath = surveyStore.surveyPath + // async initVoteData({ state, commit }) { + // const surveyStore = useSurveyStore() + // const questionStore = useQuestionStore() + // const questionData = questionStore.questionData + // const surveyPath = surveyStore.surveyPath - const fieldList = [] + // const fieldList = [] - for (const field in questionData) { - const { type } = questionData[field] - if (/vote/.test(type)) { - fieldList.push(field) - } - } + // for (const field in questionData) { + // const { type } = questionData[field] + // if (/vote/.test(type)) { + // fieldList.push(field) + // } + // } - if (fieldList.length <= 0) { - return - } - try { - localStorage.removeItem(VOTE_INFO_KEY) - const voteRes = await queryVote({ - surveyPath, - fieldList: fieldList.join(',') - }) + // if (fieldList.length <= 0) { + // return + // } + // try { + // localStorage.removeItem(VOTE_INFO_KEY) + // const voteRes = await queryVote({ + // surveyPath, + // fieldList: fieldList.join(',') + // }) - if (voteRes.code === 200) { - localStorage.setItem( - VOTE_INFO_KEY, - JSON.stringify({ - ...voteRes.data - }) - ) - commit('setVoteMap', voteRes.data) - } - } catch (error) { - console.log(error) - } - }, - updateVoteData({ state, commit }, data) { - const { key: questionKey, value: questionVal } = data - // 更新前获取接口缓存在localStorage中的数据 - const localData = localStorage.getItem(VOTE_INFO_KEY) - const voteinfo = JSON.parse(localData) - const currentQuestion = state.questionData[questionKey] - const options = currentQuestion.options - const voteTotal = voteinfo?.[questionKey]?.total || 0 - let totalPayload = { - questionKey, - voteKey: 'total', - voteValue: voteTotal - } - options.forEach((option) => { - const optionhash = option.hash - const voteCount = voteinfo?.[questionKey]?.[optionhash] || 0 - // 如果选中值包含该选项,对应voteCount 和 voteTotal + 1 - if ( - Array.isArray(questionVal) ? questionVal.includes(optionhash) : questionVal === optionhash - ) { - const countPayload = { - questionKey, - voteKey: optionhash, - voteValue: voteCount + 1 - } - totalPayload.voteValue += 1 - commit('updateVoteMapByKey', countPayload) - } else { - const countPayload = { - questionKey, - voteKey: optionhash, - voteValue: voteCount - } - commit('updateVoteMapByKey', countPayload) - } - commit('updateVoteMapByKey', totalPayload) - }) - }, + // if (voteRes.code === 200) { + // localStorage.setItem( + // VOTE_INFO_KEY, + // JSON.stringify({ + // ...voteRes.data + // }) + // ) + // questionStore.setVoteMap(voteRes.data) + // } + // } catch (error) { + // console.log(error) + // } + // }, + // updateVoteData({ state, commit }, data) { + // const questionStore = useQuestionStore() + // const { key: questionKey, value: questionVal } = data + // // 更新前获取接口缓存在localStorage中的数据 + // const localData = localStorage.getItem(VOTE_INFO_KEY) + // const voteinfo = JSON.parse(localData) + // const currentQuestion = questionStore.questionData[questionKey] + // const options = currentQuestion.options + // const voteTotal = voteinfo?.[questionKey]?.total || 0 + // let totalPayload = { + // questionKey, + // voteKey: 'total', + // voteValue: voteTotal + // } + // options.forEach((option) => { + // const optionhash = option.hash + // const voteCount = voteinfo?.[questionKey]?.[optionhash] || 0 + // // 如果选中值包含该选项,对应voteCount 和 voteTotal + 1 + // if ( + // Array.isArray(questionVal) ? questionVal.includes(optionhash) : questionVal === optionhash + // ) { + // const countPayload = { + // questionKey, + // voteKey: optionhash, + // voteValue: voteCount + 1 + // } + // totalPayload.voteValue += 1 + // questionStore.updateVoteMapByKey(countPayload) + // } else { + // const countPayload = { + // questionKey, + // voteKey: optionhash, + // voteValue: voteCount + // } + // questionStore.updateVoteMapByKey(countPayload) + // } + // questionStore.updateVoteMapByKey(totalPayload) + // }) + // }, // async getEncryptInfo({ commit }) { // try { // const res = await getEncryptInfo() diff --git a/web/src/render/store/getters.js b/web/src/render/store/getters.js index 79d8a23f..81f7e1f5 100644 --- a/web/src/render/store/getters.js +++ b/web/src/render/store/getters.js @@ -1,30 +1,25 @@ export default { // 题目列表 - renderData: (state) => { - const { questionSeq, questionData } = state - - let index = 1 - return ( - questionSeq && - questionSeq.reduce((pre, item) => { - const questionArr = [] - - item.forEach((questionKey) => { - const question = { ...questionData[questionKey] } - // 开启显示序号 - if (question.showIndex) { - question.indexNumber = index++ - } - - questionArr.push(question) - }) - - if (questionArr && questionArr.length) { - pre.push(questionArr) - } - - return pre - }, []) - ) - } + // renderData: (state) => { + // const { questionSeq, questionData } = state + // let index = 1 + // return ( + // questionSeq && + // questionSeq.reduce((pre, item) => { + // const questionArr = [] + // item.forEach((questionKey) => { + // const question = { ...questionData[questionKey] } + // // 开启显示序号 + // if (question.showIndex) { + // question.indexNumber = index++ + // } + // questionArr.push(question) + // }) + // if (questionArr && questionArr.length) { + // pre.push(questionArr) + // } + // return pre + // }, []) + // ) + // } } diff --git a/web/src/render/store/mutations.js b/web/src/render/store/mutations.js index 8661936c..e862dfef 100644 --- a/web/src/render/store/mutations.js +++ b/web/src/render/store/mutations.js @@ -6,9 +6,6 @@ export default { state[key] = value }) }, - setQuestionData(state, data) { - state.questionData = data - }, setErrorInfo(state, { errorType, errorMsg }) { state.errorInfo = { errorType, @@ -20,30 +17,30 @@ export default { // console.log('formValues', key, value) set(state, `formValues.${key}`, value) }, - changeSelectMoreData(state, data) { - const { key, value, field } = data - set(state, `questionData.${field}.othersValue.${key}`, value) - }, + // changeSelectMoreData(state, data) { + // const { key, value, field } = data + // set(state, `questionData.${field}.othersValue.${key}`, value) + // }, // setEnterTime(state) { // state.enterTime = Date.now() // }, // setSurveyPath(state, data) { // state.surveyPath = data // }, - setVoteMap(state, data) { - state.voteMap = data - }, - updateVoteMapByKey(state, data) { - const { questionKey, voteKey, voteValue } = data - // 兼容为空的情况 - if (!state.voteMap[questionKey]) { - state.voteMap[questionKey] = {} - } - state.voteMap[questionKey][voteKey] = voteValue - }, - setQuestionSeq(state, data) { - state.questionSeq = data - }, + // setVoteMap(state, data) { + // state.voteMap = data + // }, + // updateVoteMapByKey(state, data) { + // const { questionKey, voteKey, voteValue } = data + // // 兼容为空的情况 + // if (!state.voteMap[questionKey]) { + // state.voteMap[questionKey] = {} + // } + // state.voteMap[questionKey][voteKey] = voteValue + // }, + // setQuestionSeq(state, data) { + // state.questionSeq = data + // }, // setEncryptInfo(state, data) { // state.encryptInfo = data // }, diff --git a/web/src/render/store/state.js b/web/src/render/store/state.js index 53c692ae..b784a1fb 100644 --- a/web/src/render/store/state.js +++ b/web/src/render/store/state.js @@ -2,15 +2,15 @@ export default { // surveyPath: '', - questionData: null, + // questionData: null, // isMobile: isMobile(), errorInfo: { errorType: '', errorMsg: '' }, // enterTime: null, - questionSeq: [], // 题目的顺序,因为可能会有分页的情况,所以是一个二维数组[[qid1, qid2], [qid3,qid4]] - voteMap: {}, + // questionSeq: [], // 题目的顺序,因为可能会有分页的情况,所以是一个二维数组[[qid1, qid2], [qid3,qid4]] + // voteMap: {}, // encryptInfo: null, ruleEngine: null } diff --git a/web/src/render/stores/question.js b/web/src/render/stores/question.js new file mode 100644 index 00000000..8cd603fb --- /dev/null +++ b/web/src/render/stores/question.js @@ -0,0 +1,157 @@ +import { ref, computed } from 'vue' +import { defineStore } from 'pinia' +import { set } from 'lodash-es' +import { useSurveyStore } from '@/render/stores/survey' +import { queryVote } from '@/render/api/survey' + +const VOTE_INFO_KEY = 'voteinfo' + +export const useQuestionStore = defineStore('question', () => { + const voteMap = ref({}) + const questionData = ref(null) + const questionSeq = ref([]) // 题目的顺序,因为可能会有分页的情况,所以是一个二维数组[[qid1, qid2], [qid3,qid4]] + + // 题目列表 + const renderData = computed(() => { + let index = 1 + return ( + questionSeq.value && + questionSeq.value.reduce((pre, item) => { + const questionArr = [] + + item.forEach((questionKey) => { + const question = { ...questionData.value[questionKey] } + // 开启显示序号 + if (question.showIndex) { + question.indexNumber = index++ + } + + questionArr.push(question) + }) + + if (questionArr && questionArr.length) { + pre.push(questionArr) + } + + return pre + }, []) + ) + }) + + const setQuestionData = (data) => { + questionData.value = data + } + + const changeSelectMoreData = (data) => { + const { key, value, field } = data + set(questionData.value, `${field}.othersValue.${key}`, value) + } + + const setQuestionSeq = (data) => { + questionSeq.value = data + } + + const setVoteMap = (data) => { + voteMap.value = data + } + + const updateVoteMapByKey = (data) => { + const { questionKey, voteKey, voteValue } = data + // 兼容为空的情况 + if (!voteMap.value[questionKey]) { + voteMap.value[questionKey] = {} + } + voteMap.value[questionKey][voteKey] = voteValue + } + + //初始化投票题的数据 + const initVoteData = async () => { + const surveyStore = useSurveyStore() + const surveyPath = surveyStore.surveyPath + + const fieldList = [] + + for (const field in questionData.value) { + const { type } = questionData.value[field] + if (/vote/.test(type)) { + fieldList.push(field) + } + } + + if (fieldList.length <= 0) { + return + } + try { + localStorage.removeItem(VOTE_INFO_KEY) + const voteRes = await queryVote({ + surveyPath, + fieldList: fieldList.join(',') + }) + + if (voteRes.code === 200) { + localStorage.setItem( + VOTE_INFO_KEY, + JSON.stringify({ + ...voteRes.data + }) + ) + setVoteMap(voteRes.data) + } + } catch (error) { + console.log(error) + } + } + + const updateVoteData = (data) => { + const { key: questionKey, value: questionVal } = data + // 更新前获取接口缓存在localStorage中的数据 + const localData = localStorage.getItem(VOTE_INFO_KEY) + const voteinfo = JSON.parse(localData) + const currentQuestion = questionData.value[questionKey] + const options = currentQuestion.options + const voteTotal = voteinfo?.[questionKey]?.total || 0 + let totalPayload = { + questionKey, + voteKey: 'total', + voteValue: voteTotal + } + options.forEach((option) => { + const optionhash = option.hash + const voteCount = voteinfo?.[questionKey]?.[optionhash] || 0 + // 如果选中值包含该选项,对应voteCount 和 voteTotal + 1 + if ( + Array.isArray(questionVal) ? questionVal.includes(optionhash) : questionVal === optionhash + ) { + const countPayload = { + questionKey, + voteKey: optionhash, + voteValue: voteCount + 1 + } + totalPayload.voteValue += 1 + updateVoteMapByKey(countPayload) + } else { + const countPayload = { + questionKey, + voteKey: optionhash, + voteValue: voteCount + } + updateVoteMapByKey(countPayload) + } + updateVoteMapByKey(totalPayload) + }) + } + + return { + voteMap, + questionData, + questionSeq, + renderData, + setQuestionData, + changeSelectMoreData, + setQuestionSeq, + setVoteMap, + updateVoteMapByKey, + initVoteData, + updateVoteData + } +})