Merge pull request #118 from xixiIBN5100/feat/voteQuestionnaire

feat: add vote question setting

src/pages/DetailInfo/index.vue

@@ -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
@@ -264,6 +273,7 @@ const calculateFutureDate = (): Date => {
   return futureDate;
 };
 
+const startTime = ref(Date.now())
 // 用于获取问卷部分的容器元素
 const questionnaireContainer = ref<HTMLDivElement>();
 
@@ -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') {

src/pages/View/view.vue

@@ -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>
@@ -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>
@@ -179,6 +179,7 @@
     id: null,
     questions_list: [],
   });
+  const startTime = ref()
   const resultData = ref(undefined)
   const route = useRoute();
   const loginStore = useMainStore().useLoginStore();
@@ -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) {
@@ -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
@@ -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}),{
@@ -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 => {
               //获取已存储的答案
@@ -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}题的回答不符合要求.`);
@@ -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)
             }

src/pages/View/vote.vue

@@ -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">