feat: 新增填空自定义正则功能

src/pages/DetailInfo/fill.vue

@@ -10,6 +10,11 @@
           <span class="w-50">问题描述</span>
           <textarea type="text" placeholder="Describe" class="dark:bg-customGray_more_shallow textarea textarea-bordered shadow-md w-full h-70" v-model="localDescribe"/>
         </div>
+        <div class="flex items-center gap-20 my-10" v-if=" pal === '自定义' ">
+          <span class="w-50">正则</span>
+          <textarea type="text" placeholder="示例: ^(?:\+?\d{1,3}[- ]?)?\d{10}$ 国际电话格式" class="dark:bg-customGray_more_shallow textarea textarea-bordered shadow-md w-full h-70" v-model="customiseReg"/>
+          <!-- <span></span><a href="https://regexr.com" target="_blank">测试</a> -->
+        </div>
       </div>
       <div class="flex-col justify-center items-center">
         <div class=" flex gap-10 ">
@@ -33,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, defineEmits, ref, watch} from "vue";
+import {computed, defineEmits, onMounted, ref, watch} from "vue";
 
 const props = defineProps<{
   serial_num: number,
@@ -43,11 +48,19 @@
   optionChoose:boolean
   unique:boolean
   }>()
-const emits = defineEmits(['update:unique', 'on-click', 'update:optionChoose','update:title','update:describe']);
+const emits = defineEmits(['update:unique', 'on-click', 'update:optionChoose','update:title','update:describe','update:reg']);
 const localTitle = ref<string>(props.title || '');
 const localOptionChoose = ref<boolean>(props.optionChoose);
 const localUnique = ref<boolean>(props.unique);
 const localDescribe = ref<string>(props.describe || '');
+
+
+//储存当前的自定义正则
+const customiseReg = ref(props.reg||'')
+
+
+
+
 watch(() => props.title, (newTitle) => {
   localTitle.value = newTitle || '';
 });
@@ -64,6 +77,15 @@
   localDescribe.value = newLocalDescribe
 });
 
+watch(() => props.reg, (newReg) => {
+  customiseReg.value = newReg
+});
+
+
+watch(customiseReg, (newReg) => {
+  emits('update:reg', newReg);
+});
+
 watch(localTitle, (newTitle) => {
   emits('update:title', newTitle);
 });
@@ -80,14 +102,19 @@
   emits('update:unique', newUnique);
 });
 
+
+
+
 const pal = computed(() => {
   if(props.reg === '^1[3456789]\\d{9}$') return `电话`
   else if(props.reg === '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$') return `邮箱`
   else if(props.reg === '^\\d{12}$') return `学号`
-  else if (props.reg === '') return `无限制`
-  else {
+  else if (props.reg === '^.*$') return `无限制`
+  else if (props.reg === '^[0-9]{1}$'){
     const num = props.reg[7]
     return num + `位数`
+  }else{
+    return '自定义'
   }
 })
 

src/pages/DetailInfo/index.vue

@@ -28,9 +28,13 @@
         <div v-show="selectedOption === 3">
           <div class="divider"></div>
           <div class="flex gap-10 my-5">
-            <input type="radio" name="radio-2" class="radio-sm" value="" v-model="reg"/>
+            <input type="radio" name="radio-2" class="radio-sm" value="^.*$" v-model="reg"/>
             <span>无限制</span>
           </div>
+          <div class="flex gap-10 my-5">
+            <input type="radio" name="radio-2" class="radio-sm" value="" v-model="reg"/>
+            <span>自定义</span>
+          </div>
           <div class="flex gap-10 my-5">
             <input type="radio" name="radio-2" class="radio-sm" value="^1[3456789]\d{9}$" v-model="reg"/>
             <span>手机号</span>
@@ -69,6 +73,10 @@
         <button class="btn btn-accent dark:opacity-75 dark:text-white" @click="addQuestion">添加题目</button>
       </div>
     </div>
+    <!-- 自定义正则输入框
+    <div class="bg-base-200 dark:bg-customGray h-200 w-full mt-4 p-4">
+      <input  type="text" v-model="regCustomise" placeholder="请输入自定义正则" class="w-full h-full border border-gray-300 rounded-md p-2"/>
+    </div> -->
     <div class="p-40">
       <div class="bg-base-200 dark:bg-customGray w-750 p-40 shadow-lg rounded-xl flex-col justify-center items-center hover:shadow-2xl hover:-translate-y-2 transform duration-700 ">
         <div class="flex-col justify-center">
@@ -234,7 +242,7 @@ const title = ref();
 const submitData = ref();
 const id = ref<number>();
 const reg = ref<string>('');
-const regNum = ref("^[0-9]{1}$");
+const regNum = ref('^[0-9]{1}$');
 const time = ref();
 const loading = ref(true)
 const setting = reactive({
@@ -292,7 +300,7 @@ const getInfo = () => {
     onBefore: () => startLoading(),
     onSuccess(res) {
       if (res.code === 200) {
-        console.log(res.data);
+        // console.log(res.data);
         const formDataCopy = deepCopy(res.data); // Use deep copy here
         if (formDataCopy.questions) {
           formDataCopy.questions.forEach((item) => {
@@ -349,7 +357,7 @@ const addQuestion = () => {
     q.serial_num = index + 1;
   });
 
-  console.log(question.value)
+  // console.log(question.value)
 
   // 等待 DOM 更新完成后再执行滚动
   nextTick(() => {
@@ -434,20 +442,23 @@ const submit = (state:number) => {
   }
 };
 
-/**const onUpdate = () => {
-  question.value.forEach((q, idx) => {
-    q.serial_num = idx + 1;
-  });
-};**/
+// //调试 监听reg
+// watch(question, (newQuestions) => {
+//   newQuestions.forEach((q, index) => {
+//     // 监听每个问题的 reg 值
+//     watch(() => q.reg, (newReg) => {
+//       console.log(`问题 ${index + 1} 的正则表达式变化为: ${newReg}`);
+//       // 在这里添加处理逻辑，比如更新状态或执行其他操作
+//     });
+//   });
+// }, { deep: true });
 
-//导入可拖动组件
-import {VueDraggable} from 'vue-draggable-plus';
-//修改serial_num
+//修改serial_numquestion.value =[...question.value]
 const updateQuestionSerialNumbers = () => {
+  // console.log(question.value)
   question.value.forEach((q, index) => {
     q.serial_num = index + 1;
   });
-  console.log(question.value)
 }
 
 </script>

src/pages/View/fill.vue

@@ -53,6 +53,7 @@ watch(localAnswer, (newAnswer) => {
 
 const validateInput = () => {
   if (props.reg && !new RegExp(props.reg).test(localAnswer.value as string)) {
+    console.log(props.reg)
     errorMessage.value = '输入不符合要求';
   } else {
     errorMessage.value = '';
@@ -63,11 +64,11 @@ const pal = computed(() => {
   if (props.reg === '^1[3456789]\\d{9}$') return '电话';
   else if (props.reg === '^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$') return '邮箱';
   else if (props.reg === '^\\d{12}$') return '学号';
-  else if (props.reg === '') return '';
-  else {
+  else if (props.reg === '^.*$') return '';
+  else if (props.reg === "^[0-9]{1}$") {
     const num = props.reg?.[7];
     return num + '位数';
-  }
+  }else return '请看题目规则'
 });
 </script>
 

src/pages/View/view.vue

@@ -231,6 +231,11 @@
         ElNotification.error('您有多选题未完成作答.')
         return true;
       }
+
+      if (q.question_type === 3 && q.answer!== ''  && q.reg && !new RegExp(q.reg).test(q.answer)) {
+        ElNotification.error(`第${q.serial_num}题的回答不符合要求.`);
+        return true;
+      }
     });
     if (hasUnansweredRequiredQuestion) {
       showModal('QuestionnaireSubmit', true);