perl: 选项配额优化

server/src/interfaces/survey.ts

@@ -61,7 +61,7 @@ export interface DataItem {
   starStyle?: string;
   innerType?: string;
   deleteRecover?: boolean;
-  noDisplay?: boolean;
+  quotaNoDisplay?: boolean;
 }
 
 export interface Option {

server/src/modules/survey/template/surveyTemplate/survey/normal.json

@@ -63,7 +63,7 @@
           }
         ],
         "deleteRecover": false,
-        "noDisplay": false
+        "quotaNoDisplay": false
       }
     ]
   }

web/src/management/config/questionConfig.js

@@ -77,5 +77,5 @@ export const defaultQuestionConfig = {
     }
   },
   deleteRecover: false,
-  noDisplay: false
+  quotaNoDisplay: false
 }

web/src/management/pages/edit/modules/contentModule/SavePanel.vue

@@ -25,7 +25,7 @@ import 'element-plus/theme-chalk/src/message.scss'
 import { saveSurvey } from '@/management/api/survey'
 import { showLogicEngine } from '@/management/hooks/useShowLogicEngine'
 import buildData from './buildData'
-import { getSurveyHistory, getConflictHistory } from '@/management/api/survey'
+import { getConflictHistory } from '@/management/api/survey'
 
 const isSaving = ref<boolean>(false)
 const isShowAutoSave = ref<boolean>(false)

web/src/materials/questions/widgets/BaseChoice/index.jsx

@@ -48,7 +48,7 @@ export default defineComponent({
       type: Number,
       default: 10
     },
-    noDisplay:{
+    quotaNoDisplay:{
       type: Boolean,
       default: true
     }
@@ -103,7 +103,6 @@ export default defineComponent({
       <div class="choice-wrapper">
         <div class={[isMatrix ? 'nest-box' : '', 'choice-box']}>
           {getOptions.map((item, index) => {
-            item.disabled = !this.readonly && item.quota !== "0" && (item.quota - item.voteCount) === 0
             return (
               !item.hide && (
                 <div
@@ -152,16 +151,16 @@ export default defineComponent({
                           )}
                           {
                           // 如果设置了配额并且展示配额
-                          !this.readonly && item.quota !== "0" && !this.noDisplay && (
+                          !this.readonly && (item.quota && item.quota !== "0") && !this.quotaNoDisplay && (
                             <span
                               class="remaining-text"
                               style={{
                                 display: 'block',
                                 fontSize: 'smaller',
-                                color: item.quota - item.voteCount === 0 ? '#EB505C' : '#92949D'
+                                color: item.release === 0 ? '#EB505C' : '#92949D'
                               }}
                             >
-                              剩余{item.quota - item.voteCount}
+                              剩余{item.release}
                             </span>
                           )}
                           {slots.vote?.({

web/src/materials/questions/widgets/CheckboxModule/index.jsx

@@ -42,7 +42,7 @@ export default defineComponent({
       type: [Number, String],
       default: 1
     },
-    noDisplay:{
+    quotaNoDisplay:{
       type: Boolean,
       default: false
     }
@@ -64,7 +64,7 @@ export default defineComponent({
       return options.map((item) => {
         return {
           ...item,
-          disabled: isDisabled(item)
+          disabled: (item.release === 0) || isDisabled(item)
         }
       })
     })
@@ -101,7 +101,7 @@ export default defineComponent({
     }
   },
   render() {
-    const { readonly, field, myOptions, onChange, maxNum, value, noDisplay, selectMoreView } = this
+    const { readonly, field, myOptions, onChange, maxNum, value, quotaNoDisplay, selectMoreView } = this
     return (
       <BaseChoice
         uiTarget="checkbox"
@@ -111,7 +111,7 @@ export default defineComponent({
         options={myOptions}
         onChange={onChange}
         value={value}
-        noDisplay={noDisplay}
+        quotaNoDisplay={quotaNoDisplay}
       >
         {{
           selectMore: (scoped) => {

web/src/materials/questions/widgets/CheckboxModule/meta.js

@@ -112,9 +112,27 @@ const meta = {
       ]
     },
     {
-      key: "quotaConfig",
+      name: 'optionQuota',
-      name: "quotaConfig",
+      label: '选项配额',
-      type: "QuotaConfig",
+      labelStyle: {
+        'font-weight': 'bold'
+      },
+      type: 'QuotaConfig',
+      // 输出转换
+      valueSetter({ options, deleteRecover, quotaNoDisplay}) {
+        return [{
+          key: 'options',
+          value: options
+        },
+        {
+          key: 'deleteRecover',
+          value: deleteRecover
+        },
+        {
+          key: 'quotaNoDisplay',
+          value: quotaNoDisplay
+        }]
+      }
     }
   ],
   editConfigure: {

web/src/materials/questions/widgets/RadioModule/index.jsx

@@ -32,7 +32,7 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    noDisplay:{
+    quotaNoDisplay:{
       type: Boolean,
       default: false
     }
@@ -85,7 +85,7 @@ export default defineComponent({
           field={this.field}
           layout={this.layout}
           onChange={this.onChange}
-          noDisplay={this.noDisplay}
+          quotaNoDisplay={this.quotaNoDisplay}
         >
           {{
             selectMore: (scoped) => {

web/src/materials/questions/widgets/RadioModule/meta.js

@@ -72,6 +72,19 @@ const meta = {
         }
       ]
     },
+    // deleteRecover
+    {
+      name: 'deleteRecover',
+      propType: Boolean,
+      description: '删除后恢复选项配额',
+      defaultValue: false
+    },
+    {
+      name: 'quotaNoDisplay',
+      propType: Boolean,
+      description: '不展示配额剩余数量',
+      defaultValue: false
+    }
   ],
   formConfig: [
     basicConfig,
@@ -87,9 +100,27 @@ const meta = {
       hidden: true
     },
     {
-      key: "quotaConfig",
+      name: 'optionQuota',
-      name: "quotaConfig",
+      label: '选项配额',
-      type: "QuotaConfig",
+      labelStyle: {
+        'font-weight': 'bold'
+      },
+      type: 'QuotaConfig',
+      // 输出转换
+      valueSetter({ options, deleteRecover, quotaNoDisplay}) {
+        return [{
+          key: 'options',
+          value: options
+        },
+        {
+          key: 'deleteRecover',
+          value: deleteRecover
+        },
+        {
+          key: 'quotaNoDisplay',
+          value: quotaNoDisplay
+        }]
+      }
     }
   ],
   editConfigure: {

web/src/materials/setters/widgets/QuotaConfig.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="quota-wrapper">
-    <span class="quota-title">选项配额</span>
     <span class="quota-config" @click="openQuotaConfig"> 设置> </span>
-
+    <el-dialog v-model="dialogVisible" @closed="cleanTempQuota" class="dialog">
-    <el-dialog v-model="dialogTableVisible" @closed="cleanTempQuota" class="dialog">
       <template #header>
         <div class="dialog-title">选项配额</div>
       </template>
@@ -58,7 +56,7 @@
         </el-tooltip>
       </div>
       <div>
-        <el-checkbox v-model="noDisplayValue" label="不展示配额剩余数量"> </el-checkbox>
+        <el-checkbox v-model="quotaNoDisplayValue" label="不展示配额剩余数量"> </el-checkbox>
         <el-tooltip
           class="tooltip"
           effect="dark"
@@ -88,26 +86,30 @@ import { ElMessageBox } from 'element-plus'
 const props = defineProps(['formConfig', 'moduleConfig'])
 const emit = defineEmits(['form-change'])
 
-const dialogTableVisible = ref(false)
+const dialogVisible = ref(false)
 const moduleConfig = ref(props.moduleConfig)
 const optionData = ref(props.moduleConfig.options)
 const deleteRecoverValue = ref(moduleConfig.value.deleteRecover)
-const noDisplayValue = ref(moduleConfig.value.noDisplay)
+const quotaNoDisplayValue = ref(moduleConfig.value.quotaNoDisplay)
 
 const openQuotaConfig = () => {
   optionData.value.forEach((item) => {
     item.tempQuota = item.quota
   })
-  dialogTableVisible.value = true
+  dialogVisible.value = true
 }
 const cancel = () => {
-  dialogTableVisible.value = false
+  dialogVisible.value = false
 }
 const confirm = () => {
-  handleDeleteRecoverChange()
+  dialogVisible.value = false
-  handleNoDisplayChange()
+  // 更新选项 
   handleQuotaChange()
-  dialogTableVisible.value = false
+  emit(FORM_CHANGE_EVENT_KEY, {
+    options: optionData.value,
+    deleteRecover: deleteRecoverValue.value,
+    quotaNoDisplay: quotaNoDisplayValue.value
+  })
 }
 const handleCellClick = (row, column) => {
   if (column.property === 'quota') {
@@ -127,18 +129,6 @@ const handleInput = (row) => {
   }
   row.isEditing = false
 }
-
-const handleDeleteRecoverChange = () => {
-  const key = 'deleteRecover'
-  const value = deleteRecoverValue.value
-  emit(FORM_CHANGE_EVENT_KEY, { key, value })
-}
-
-const handleNoDisplayChange = () => {
-  const key = 'noDisplay'
-  const value = noDisplayValue.value
-  emit(FORM_CHANGE_EVENT_KEY, { key, value })
-}
 const handleQuotaChange = () => {
   optionData.value.forEach((item) => {
     item.quota = item.tempQuota
@@ -156,7 +146,7 @@ watch(
     moduleConfig.value = val
     optionData.value = val.options
     deleteRecoverValue.value = val.deleteRecover
-    noDisplayValue.value = val.noDisplay
+    quotaNoDisplayValue.value = val.quotaNoDisplay
   },
   { immediate: true, deep: true }
 )
@@ -164,9 +154,9 @@ watch(
 
 <style lang="scss" scoped>
 .quota-wrapper {
-  width: 100%;
+  width: 90%;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 .quota-title {
   font-size: 14px;

web/src/render/components/QuestionWrapper.vue

@@ -13,6 +13,7 @@ import QuestionRuleContainer from '../../materials/questions/QuestionRuleContain
 import { useVoteMap } from '@/render/hooks/useVoteMap'
 import { useShowOthers } from '@/render/hooks/useShowOthers'
 import { useShowInput } from '@/render/hooks/useShowInput'
+import { useOptionsQuota } from '@/render/hooks/useOptionsQuota'
 import store from '@/render/store'
 import { cloneDeep } from 'lodash-es'
 import { ruleEngine } from '@/render/hooks/useRuleEngine.js'
@@ -41,16 +42,26 @@ const questionConfig = computed(() => {
   const { type, field, options = [], ...rest } = cloneDeep(moduleConfig)
   // console.log(field,'这里依赖的formValue，所以change时会触发重新计算')
   let alloptions = options
-  if (type === QUESTION_TYPE.VOTE || NORMAL_CHOICES.includes(type)) {
+  if (type === QUESTION_TYPE.VOTE) {
+    // 处理投票进度
     const { options, voteTotal } = useVoteMap(field)
     const voteOptions = unref(options)
     alloptions = alloptions.map((obj, index) => Object.assign(obj, voteOptions[index]))
     moduleConfig.voteTotal = unref(voteTotal)
   }
+  if(NORMAL_CHOICES.includes(type) &&
+    options.some(option => option.quota > 0)) {
+    // 处理普通选择题的选项配额
+    let { options: optionWithQuota } = useOptionsQuota(field)
+    
+    alloptions = alloptions.map((obj, index) => Object.assign(obj, optionWithQuota[index]))
+    console.log({alloptions})
+  }
   if (
     NORMAL_CHOICES.includes(type) &&
-    options.filter((optionItem) => optionItem.others).length > 0
+    options.some(option => option.others)
   ) {
+    // 处理普通选择题的填写更多
     let { options, othersValue } = useShowOthers(field)
     const othersOptions = unref(options)
     alloptions = alloptions.map((obj, index) => Object.assign(obj, othersOptions[index]))
@@ -60,6 +71,7 @@ const questionConfig = computed(() => {
     RATES.includes(type) && rest?.rangeConfig && 
     Object.keys(rest?.rangeConfig).filter((index) => rest?.rangeConfig[index].isShowInput).length > 0
   ) {
+    // 处理评分题的的选项后输入框
     let { rangeConfig, othersValue } = useShowInput(field)
     moduleConfig.rangeConfig = unref(rangeConfig)
     moduleConfig.othersValue = unref(othersValue)
@@ -105,5 +117,10 @@ const handleChange = (data) => {
   if (props.moduleConfig.type === QUESTION_TYPE.VOTE) {
     store.dispatch('updateVoteData', data)
   }
+  // 处理普通选择题
+  if (props.moduleConfig.type === NORMAL_CHOICES) {
+    store.dispatch('changeQuota', data)
+  }
+  
 }
 </script>

web/src/render/hooks/useOptionsQuota.js

@@ -0,0 +1,22 @@
+import store from '../store/index'
+export const useOptionsQuota = (questionKey) => {
+  const options = store.state.questionData[questionKey].options.map((option) => {
+    if(option.quota){
+      const optionHash = option.hash
+      const selectCount = store.state.quotaMap?.[questionKey]?.[optionHash] || 0
+      const release = Number(option.quota) - Number(selectCount)
+      return {
+        ...option,
+        disabled: release === 0,
+        selectCount,
+        release
+      }
+    } else {
+      return {
+        ...option,
+      }
+    }
+  })
+
+  return { options }
+}

web/src/render/hooks/useVoteMap.js

@@ -1,7 +1,6 @@
 import store from '../store/index'
 export const useVoteMap = (questionKey) => {
   let voteTotal = store.state.voteMap?.[questionKey]?.total || 0
-
   const options = store.state.questionData[questionKey].options.map((option) => {
     const optionHash = option.hash
     const voteCount = store.state.voteMap?.[questionKey]?.[optionHash] || 0

web/src/render/pages/RenderPage.vue

@@ -82,14 +82,14 @@ const normalizationRequestBody = () => {
   }
 
   //浏览器缓存数据
-  localStorage.removeItem(surveyPath + "_questionData")
+  localStorage.removeItem(surveyPath.value + "_questionData")
   localStorage.removeItem("isSubmit")
   //数据加密
   var formData  = Object.assign({}, store.state.formValues)
     for(const key in formData){
       formData[key] = encodeURIComponent(formData[key])
     }
-  localStorage.setItem(surveyPath + "_questionData", JSON.stringify(formData))
+  localStorage.setItem(surveyPath.value + "_questionData", JSON.stringify(formData))
   localStorage.setItem('isSubmit', JSON.stringify(true))
   
   if (encryptInfo?.encryptType) {

web/src/render/store/actions.js

@@ -5,10 +5,11 @@ import 'moment/locale/zh-cn'
 moment.locale('zh-cn')
 import adapter from '../adapter'
 import { queryVote, getEncryptInfo } from '@/render/api/survey'
-import { RuleMatch } from '@/common/logicEngine/RulesMatch'
 import state from './state'
 import useCommandComponent from '../hooks/useCommandComponent'
 import BackAnswerDialog from '../components/BackAnswerDialog.vue'
+
+import { NORMAL_CHOICES } from '@/common/typeEnum.ts'
 /**
  * CODE_MAP不从management引入，在dev阶段，会导致B端 router被加载，进而导致C端路由被添加 baseUrl: /management
  */
@@ -18,6 +19,7 @@ const CODE_MAP = {
   NO_AUTH: 403
 }
 const VOTE_INFO_KEY = 'voteinfo'
+const QUOTA_INFO_KEY = 'limitinfo'
 import router from '../router'
 
 const confirm = useCommandComponent(BackAnswerDialog)
@@ -145,7 +147,7 @@ export default {
 
     for (const field in questionData) {
       const { type } = questionData[field]
-      if (/vote/.test(type) || /radio/.test(type) || /checkbox/.test(type)) {
+      if (/vote/.test(type)) {
         fieldList.push(field)
       }
     }
@@ -221,16 +223,80 @@ export default {
       console.log(error)
     }
   },
-  async initRuleEngine({ commit }, ruleConf) {
+  async initQuotaMap({ state, commit }) {
-    const ruleEngine = new RuleMatch(ruleConf)
+    const questionData = state.questionData
-    commit('setRuleEgine', ruleEngine)
+    const surveyPath = state.surveyPath
+    const fieldList = Object.keys(questionData).filter(field => {
+      if (NORMAL_CHOICES.includes(questionData[field].type)) {
+        return questionData[field].options.some(option => option.quota > 0)
+      }
+    })
+    
+    // 如果不存在则不请求选项上限接口
+    if (fieldList.length <= 0) {
+      return
+    }
+
+    try {
+      localStorage.removeItem(QUOTA_INFO_KEY)
+      const quotaRes = await queryVote({
+        surveyPath,
+        fieldList: fieldList.join(',')
+      })
+
+      if (quotaRes.code === 200) {
+        localStorage.setItem(
+          QUOTA_INFO_KEY,
+          JSON.stringify({
+            ...quotaRes.data
+          })
+        )
+        Object.keys(quotaRes.data).forEach(field => {
+          Object.keys(quotaRes.data[field]).forEach((optionHash) => {
+            commit('updateQuotaMapByKey', { questionKey: field, optionKey: optionHash, data: quotaRes.data[field][optionHash] })
+          })
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  // 题目选中时更新选项配额
+  changeQuota({ state, commit }, data) {
+    const { key: questionKey, value: questionVal } = data
+    // 更新前获取接口缓存在localStorage中的数据
+    const localData = localStorage.getItem(QUOTA_INFO_KEY)
+    const quotaMap = JSON.parse(localData)
+    // const quotaMap = state.quotaMap
+    const currentQuestion = state.questionData[questionKey]
+    const options = currentQuestion.options
+    options.forEach((option) => {
+      const optionhash = option.hash
+      const selectCount = quotaMap?.[questionKey]?.[optionhash].selectCount || 0
+      // 如果选中值包含该选项，对应 voteCount 和 voteTotal  + 1
+      if (
+        Array.isArray(questionVal) ? questionVal.includes(optionhash) : questionVal === optionhash
+      ) {
+        const countPayload = {
+          questionKey,
+          optionKey: optionhash,
+          selectCount: selectCount + 1
+        }
+        commit('updateQuotaMapByKey', countPayload)
+      } else {
+        const countPayload = {
+          questionKey,
+          optionKey: optionhash,
+          selectCount: selectCount
+        }
+        commit('updateQuotaMapByKey', countPayload)
+      }
+    })
   }
 }
 
   // 加载上次填写过的数据到问卷页
   function loadFormData({ commit, dispatch }, {bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }, formData) {
-    commit('setRouter', 'indexPage')
-
     // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
     const { questionData, questionSeq, rules, formValues } = adapter.generateData({
       bannerConf,
@@ -262,11 +328,12 @@ export default {
     })
     // 获取已投票数据
     dispatch('initVoteData')
+    // 获取选项上线选中数据
+    dispatch('initQuotaMap')
   }
 
   // 加载空白页面
   function clearFormData({ commit, dispatch }, { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf }) {
-    commit('setRouter', 'indexPage')
 
     // 根据初始的schema生成questionData, questionSeq, rules, formValues, 这四个字段
     const { questionData, questionSeq, rules, formValues } = adapter.generateData({
@@ -293,4 +360,5 @@ export default {
     })
     // 获取已投票数据
     dispatch('initVoteData')
+    dispatch('initQuotaMap')
   }

web/src/render/store/mutations.js

@@ -58,7 +58,11 @@ export default {
   setEncryptInfo(state, data) {
     state.encryptInfo = data
   },
-  setRuleEgine(state, ruleEngine) {
+  updateQuotaMapByKey(state, { questionKey, optionKey, data }) {
-    state.ruleEngine = ruleEngine
+    // 兼容为空的情况
+    if (!state.quotaMap[questionKey]) {
+      state.quotaMap[questionKey] = {}
+    }
+    state.quotaMap[questionKey][optionKey] = data
   }
 }

web/src/render/store/state.js

@@ -12,5 +12,5 @@ export default {
   questionSeq: [], // 题目的顺序，因为可能会有分页的情况，所以是一个二维数组[[qid1, qid2], [qid3,qid4]]
   voteMap: {},
   encryptInfo: null,
-  ruleEngine: null
+  quotaMap: {}
 }