xrilang/xiaoju-survey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化展示

Browse Source
This commit is contained in:
sudoooooo 2024-09-02 17:36:18 +08:00
parent 1c6908b6a5
commit f5c2bd88f2
8 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/management/hooks/useJumpLogicInfo.js
View File

@ -3,7 +3,6 @@ import { useQuestionInfo } from './useQuestionInfo'
import { useEditStore } from '../stores/edit'
import { storeToRefs } from 'pinia'
// 目标题的显示逻辑提示文案
export const useJumpLogicInfo = (field) => {
const editStore = useEditStore()

14
web/src/management/pages/login/LoginPage.vue
View File

@ -38,7 +38,7 @@
<el-form-item label="验证码" prop="captcha">
<div class="captcha-wrapper">
<el-input style="width: 150px" v-model="formData.captcha" size="large"></el-input>
<el-input style="width: 200px" v-model="formData.captcha" size="large"></el-input>
<div class="captcha-img" @click="refreshCaptcha" v-html="captchaImgData"></div>
</div>
</el-form-item>
@ -71,6 +71,8 @@ import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/src/message.scss'
import { debounce as _debounce } from 'lodash-es'
import { getPasswordStrength, login, register } from '@/management/api/auth'
import { refreshCaptcha as refreshCaptchaApi } from '@/management/api/captcha'
import { CODE_MAP } from '@/management/api/base'
@ -159,8 +161,8 @@ const rules = {
],
password: [
{
validator: passwordValidator,
trigger: 'blur'
validator: _debounce(passwordValidator, 500),
trigger: 'change'
}
],
captcha: [
@ -311,18 +313,20 @@ const refreshCaptcha = async () => {
cursor: pointer;
:deep(> svg) {
max-height: 40px;
width: 120px;
margin-left: 20px;
}
}
}
.strength {
display: inline-block;
width: 20%;
width: 30%;
height: 6px;
border-radius: 8px;
background: red;
&:not(:first-child) {
margin-left: 10px;
margin-left: 8px;
}
}
}

9
web/src/management/styles/icon.scss
View File

@ -1,8 +1,9 @@
@font-face {
font-family: 'iconfont'; /* Project id 4263849 */
src: url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff2?t=1723600417360') format('woff2'),
url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff?t=1723600417360') format('woff'),
url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.ttf?t=1723600417360') format('truetype');
font-family: 'iconfont'; /* Project id 4263849 */
src:
url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff2?t=1723600417360') format('woff2'),
url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.woff?t=1723600417360') format('woff'),
url('//at.alicdn.com/t/c/font_4263849_2re4gm4ryc3.ttf?t=1723600417360') format('truetype');
}
.iconfont {

8
web/src/materials/questions/widgets/EditOptions/Options/OptionEditBar.vue
View File

@ -15,7 +15,7 @@
</template>
<script setup>
import { ref, inject } from 'vue'
import { inject } from 'vue'
import ExtraIcon from '../ExtraIcon/index.vue'
defineProps({
@ -34,14 +34,8 @@ defineProps({
})
const emit = defineEmits(['addOther', 'optionChange', 'change'])
const moduleConfig = inject('moduleConfig')
const slots = inject('slots')
const optionConfigVisible = ref(false)
const openOptionConfig = () => {
optionConfigVisible.value = true
}
const addOther = () => {
emit('addOther')
}

80
web/src/render/components/QuestionWrapper.vue
View File

@ -30,7 +30,7 @@ const props = defineProps({
default: () => {
return {}
}
},
}
})
const emit = defineEmits(['change'])
const questionStore = useQuestionStore()
@ -40,11 +40,7 @@ const formValues = computed(() => {
return surveyStore.formValues
})
const { showLogicEngine } = storeToRefs(surveyStore)
const {
changeField,
changeIndex,
needHideFields,
} = storeToRefs(questionStore)
const { changeField, changeIndex, needHideFields } = storeToRefs(questionStore)
// 题型配置转换
const questionConfig = computed(() => {
let moduleConfig = props.moduleConfig
@ -93,7 +89,6 @@ const logicshow = computed(() => {
return result === undefined ? true : result
})
const logicskip = computed(() => {
return needHideFields.value.includes(props.moduleConfig.field)
})
@ -101,7 +96,6 @@ const visibily = computed(() => {
return logicshow.value && !logicskip.value
})
// 当题目被隐藏时，清空题目的选中项，实现a显示关联b，b显示关联c场景下，b隐藏不影响题目c的展示
watch(
() => visibily.value,
@ -109,7 +103,7 @@ watch(
const { field, type, innerType } = props.moduleConfig
if (!newVal && oldVal) {
// 如果被隐藏题目有选中值，则需要清空选中值
if(formValues.value[field].toString()) {
if (formValues.value[field].toString()) {
let value = ''
// 题型是多选，或者子题型是多选（innerType是用于投票）
if (type === QUESTION_TYPE.CHECKBOX || innerType === QUESTION_TYPE.CHECKBOX) {
@ -136,37 +130,43 @@ const handleChange = (data) => {
}
const processJumpSkip = () => {
const targetResult = surveyStore.jumpLogicEngine
.getResultsByField(changeField.value, surveyStore.formValues)
.map(item => {
// 获取目标题的序号，处理跳转问卷末尾为最大题的序号
const index = item.target === 'end' ? surveyStore.dataConf.dataList.length : questionStore.getQuestionIndexByField(item.target)
return {
index,
...item
}
})
const notMatchedFields = targetResult.filter(item => !item.result)
const matchedFields = targetResult.filter(item => item.result)
// 目标题均未匹配，需要展示出来条件题和目标题之间的题目
if (notMatchedFields.length) {
notMatchedFields.forEach(element => {
const endIndex = element.index
const fields = surveyStore.dataConf.dataList.slice(changeIndex.value + 1, endIndex).map(item => item.field)
// hideMap中remove被跳过的题
questionStore.removeNeedHideFields(fields)
});
}
if (!matchedFields.length) return
// 匹配到多个目标题时，取最大序号的题目
const maxIndexQuestion =
matchedFields.filter(item => item.result).sort((a, b) => b.index - a.index)[0].index
// 条件题和目标题之间的题目隐藏
const skipKey = surveyStore.dataConf.dataList
.slice(changeIndex.value + 1, maxIndexQuestion).map(item => item.field)
questionStore.addNeedHideFields(skipKey)
const targetResult = surveyStore.jumpLogicEngine
.getResultsByField(changeField.value, surveyStore.formValues)
.map((item) => {
// 获取目标题的序号，处理跳转问卷末尾为最大题的序号
const index =
item.target === 'end'
? surveyStore.dataConf.dataList.length
: questionStore.getQuestionIndexByField(item.target)
return {
index,
...item
}
})
const notMatchedFields = targetResult.filter((item) => !item.result)
const matchedFields = targetResult.filter((item) => item.result)
// 目标题均未匹配，需要展示出来条件题和目标题之间的题目
if (notMatchedFields.length) {
notMatchedFields.forEach((element) => {
const endIndex = element.index
const fields = surveyStore.dataConf.dataList
.slice(changeIndex.value + 1, endIndex)
.map((item) => item.field)
// hideMap中remove被跳过的题
questionStore.removeNeedHideFields(fields)
})
}
if (!matchedFields.length) return
// 匹配到多个目标题时，取最大序号的题目
const maxIndexQuestion = matchedFields
.filter((item) => item.result)
.sort((a, b) => b.index - a.index)[0].index
// 条件题和目标题之间的题目隐藏
const skipKey = surveyStore.dataConf.dataList
.slice(changeIndex.value + 1, maxIndexQuestion)
.map((item) => item.field)
questionStore.addNeedHideFields(skipKey)
}
</script>

6
web/src/render/stores/question.js
View File

@ -189,14 +189,14 @@ export const useQuestionStore = defineStore('question', () => {
return questionData.value[field].index
}
const addNeedHideFields = (fields) => {
fields.forEach(field => {
if(!needHideFields.value.includes(field)) {
fields.forEach((field) => {
if (!needHideFields.value.includes(field)) {
needHideFields.value.push(field)
}
})
}
const removeNeedHideFields = (fields) => {
needHideFields.value = needHideFields.value.filter(field => !fields.includes(field))
needHideFields.value = needHideFields.value.filter((field) => !fields.includes(field))
}
return {
voteMap,

1
web/src/render/stores/survey.js
View File

@ -41,7 +41,6 @@ export const useSurveyStore = defineStore('survey', () => {
const formValues = ref({})
const whiteData = ref({})
const pageConf = ref([])
const router = useRouter()
const questionStore = useQuestionStore()

2
web/src/render/utils/index.js
View File

@ -29,4 +29,4 @@ export const formatLink = (url) => {
return url
}
return `http://${url}`
}
}