Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add vote question setting #118

Merged
merged 3 commits into from
Dec 10, 2024
Merged

feat: add vote question setting #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e0e76d
feat: add vote limit on number of options
xixiIBN5100 Dec 9, 2024
d8d8a74
feat: add temporary time limit
xixiIBN5100 Dec 10, 2024
399e074
feat: add start time setting
xixiIBN5100 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/pages/DetailInfo/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,15 @@
<div class="flex items-center my-15 gap-40">
<span class="flex items-center gap-15">每日最多提交<input type="text" v-model.number="submitData.day_limit" class="input input-bordered dark:bg-customGray_shallow w-50" /></span><span class="flex items-center gap-20">是否统一登录<input type="checkbox" class="checkbox-sm my-5" v-model="submitData.verify" /></span>
</div>
<div class="flex gap-20 items-center my-15">
<span >问卷开始时间</span>
<el-date-picker
v-model="startTime"
type="datetime"
placeholder="开始时间"
:clearable="false"
/>
</div>
<div class="flex gap-20 items-center my-15">
<span >问卷截止时间</span>
<el-date-picker
Expand Down Expand Up @@ -264,6 +273,7 @@ const calculateFutureDate = (): Date => {
return futureDate;
};

const startTime = ref(Date.now())
// 用于获取问卷部分的容器元素
const questionnaireContainer = ref<HTMLDivElement>();

Expand Down Expand Up @@ -404,6 +414,7 @@ const dataReverse = () => {

const submit = (state:number) => {
submitData.value.time = time.value
submitData.value.start_time = new Date(startTime.value).toISOString()
submitData.value.questions = question.value;
console.log(question.value);
if(isNew === 'false') {
Expand Down
48 changes: 34 additions & 14 deletions src/pages/View/view.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,14 @@
</div></vote>
</div>
<div class="flex justify-center items-center py-50">
<button class="btn w-1/3 bg-red-800 text-red-50 dark:opacity-75 hover:bg-red-600" @click="showModal('QuestionnaireSubmit')" v-if="decryptedId !== '' && !isOutDate" >提交问卷</button>
<button class="btn w-1/3 bg-red-800 text-red-50 dark:opacity-75 hover:bg-red-600" @click=" handleSubmit" v-if="decryptedId !== '' && !isOutDate" >提交问卷</button>
</div>
</div>

<modal modal-id="QuestionnaireSubmit">
<template #title><span class="text-red-950 dark:text-red-500 ">提交问卷</span></template>

<template #default v-if="formData && !formData.verify || !tokenOutDate">
<template #default v-if="formData && !formData.verify || tokenOutDate">
你确认要提交问卷吗?
</template>
<template #default v-else>
Expand All @@ -133,12 +133,12 @@
</div>
<div class="flex-col my-10">
<span>学号 &ensp; &ensp;<input class="dark:bg-customGray_more_shallow input input-bordered shadow-md h-35 my-10 w-2/3" v-model="verifyData.stu_id" /></span><br/>
<span>密码 &ensp; &ensp;<input class="dark:bg-customGray_more_shallow input input-bordered shadow-md h-35 my-10 w-2/3" v-model="verifyData.password" /></span>
<span>密码 &ensp; &ensp;<input class="dark:bg-customGray_more_shallow input input-bordered shadow-md h-35 my-10 w-2/3" v-model="verifyData.password" type="password" /></span>
</div>
</div>
</template>
<template #action>
<button class="btn bg-red-800 text-red-50 w-full hover:bg-red-600" @click="submit" v-if="formData && !formData.verify || !tokenOutDate">确认</button>
<button class="btn bg-red-800 text-red-50 w-full hover:bg-red-600" @click="submit" v-if="formData && !formData.verify || tokenOutDate">确认</button>
<button class="btn bg-red-800 text-red-50 w-full hover:bg-red-600" @click="verify" v-else>确认</button>
</template>
</modal>
Expand Down Expand Up @@ -179,6 +179,7 @@
id: null,
questions_list: [],
});
const startTime = ref()
const resultData = ref(undefined)
const route = useRoute();
const loginStore = useMainStore().useLoginStore();
Expand All @@ -192,7 +193,8 @@
})
const optionStore = useMainStore().useOptionStore()
const questionnaireStore = useMainStore().useQuetionnaireStore()
onMounted(() => {
onMounted(async () => {

loginStore.setShowHeader(false);
let idParam = route.query.id as string | undefined;
if (idParam) {
Expand All @@ -205,23 +207,23 @@
ElNotification.error("无效的问卷id")
}
}
getQuestionnaireView();
getQuestionnaireView();
try{
const res = await getStatistic({id: Number(decryptedId.value)})
resultData.value = res.data.statistics[0].options
} catch (e) {
ElNotification.error(e)
}
});

const tokenOutDate = computed(() => {
const lastDate = localStorage.getItem('timestamp');

// 如果没有存储时间戳（首次请求或过期），调用 verifyAPI
if (!lastDate || Date.now() - parseInt(lastDate) > 7 * 24 * 60 * 60 * 1000){
return true
} else {
return false
}
return !(!lastDate || Date.now() - parseInt(lastDate) > 7 * 24 * 60 * 60 * 1000);
});

const verify = () => {
const lastDate = localStorage.getItem('timestamp');

// 如果没有存储时间戳（首次请求或过期），调用 verifyAPI
if (!lastDate || Date.now() - parseInt(lastDate) > 7 * 24 * 60 * 60 * 1000) {
// 调用 verifyAPI 获取新的 token
Expand Down Expand Up @@ -261,6 +263,16 @@
}
};

const handleSubmit = () => {
const nowDate = Date.now()
const startTimestamp = new Date(startTime.value).getTime()
const showTime = startTime.value.replace("T", " ").split("+")[0].split(".")[0]
if(nowDate - startTimestamp < 0){
ElNotification.error(`问卷开始时间为 ${showTime}`)
} else {
showModal('QuestionnaireSubmit')
}
}
const getQuestionnaireView = () => {
if(decryptedId.value){
useRequest(() => getUserAPI({id: decryptedId.value as number}),{
Expand All @@ -271,6 +283,7 @@
question.value = formData.value.questions;
time.value = formData.value.time.replace("T", " ").split("+")[0].split(".")[0]
submitData.value.id = res.data.id;
startTime.value = res.data.start_time
// console.log("问卷id:"+submitData.value.id)
question.value.forEach(q => {
//获取已存储的答案
Expand Down Expand Up @@ -313,6 +326,14 @@
ElNotification.error('您有多选题未完成作答.')
return true;
}
if(q.question_type === 2 && q.answer.split('┋').length > q.maximum_option || q.answer.split('┋').length < q.minimum_option) {
if(q.answer.split('┋').length > q.maximum_option) {
ElNotification.error(`该投票最多只能选择${q.maximum_option}个选项`)
} else if(q.answer.split('┋').length < q.minimum_option) {
ElNotification.error(`该投票最少需要选择${q.maximum_option}个选项`)
}
return true;
}

if (q.question_type === 3 && q.answer!== '' && q.reg && !new RegExp(q.reg).test(q.answer)) {
ElNotification.error(`第${q.serial_num}题的回答不符合要求.`);
Expand Down Expand Up @@ -353,7 +374,6 @@
try{
const res = await getStatistic({id: Number(decryptedId.value)})
resultData.value = res.data.statistics[0].options
console.log(resultData.value)
} catch (e) {
ElNotification.error(e)
}
Expand Down
5 changes: 2 additions & 3 deletions src/pages/View/vote.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,8 @@
<span class="dark:opacity-80 text-gray-700 dark:text-gray-400 text-sm my-5" v-if="props.minimum_option !== 0">最少选 {{ props.minimum_option }} 个&ensp;</span>
<span class="dark:opacity-80 text-gray-700 dark:text-gray-400 text-sm my-5" v-if="props.maximum_option !== 0">最多选 {{ props.maximum_option }} 个</span>
<div class="flex p-5 h-auto flex-wrap">
<div v-for="(item, index) in localOptions" :key="item.serial_num" class="flex items-center justify-center my-10 w-1/2">

<div class=" rounded" style="width: 90%" >
<div v-for="(item, index) in localOptions" :key="item.serial_num" class="flex items-end justify-center my-10 w-1/2">
<div class="rounded" style="width: 90%" >
<div class="border-red-300 border-2 dark:border-0 ">
<img v-if="item.img" :src="item.img" alt="Preview" style="width: 100%" />
<span class="flex gap-8 items-center justify-center border-t-2 border-red-300 dark:border-0 bg-red-100 dark:bg-customGray_shallow" style="flex: 0.5">
Expand Down
Loading