修改必填项

src/views/center/match.vue

@@ -410,7 +410,8 @@ const fourformFields = ref([
   { label: '备注', model: 'remark', type: 'textarea' }
 ])
 const fourRules = reactive({
-  problem: [{ required: true, message: '请输入字段名称', trigger: 'blur' }]
+  problem: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
 })
 const dialogVisible = ref(false)
 const proTypeList = ref([
@@ -681,7 +682,7 @@ const sizeChange = (limits) => {
 // 调查问卷填写
 const addInvest = () => {
   dialogVisible.value = true
-  investigateForm.value = { sid: moment().valueOf(), problem: '', type: '', is_must: '', reply: '', answer: '', remark: '' }
+  investigateForm.value = { sid: moment().valueOf(), problem: '', type: '', is_must: '1', reply: '', answer: '', remark: '' }
 }
 // 调查问卷修改
 const updateInvest = (e) => {

src/views/center/parts/preliminaryUser.vue

@@ -55,6 +55,7 @@
             <el-radio-group v-model="item.reply">
               <el-radio v-for="(i, radio) in item.answer" :key="radio" :value="i.text">{{ i.text }}</el-radio>
             </el-radio-group>
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '1'">
             <div class="remark" v-if="item.remark">{{ item.remark }}</div>
@@ -63,28 +64,34 @@
                 {{ i.text }}
               </el-checkbox>
             </el-checkbox-group>
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '2'">
             <div class="remark" v-if="item.remark">{{ item.remark }}</div>
             <el-select v-model="item.reply" placeholder="请选择" size="large" style="width: 100%">
               <el-option v-for="(i, select) in item.answer" :key="select" :label="i.text" :value="i.text" />
             </el-select>
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '3'">
             <div class="remark" v-if="item.remark">{{ item.remark }}</div>
             <el-input size="large" v-model="item.reply" type="number" :placeholder="getField(item.problem)" />
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '4'">
             <div class="remark" v-if="item.remark">{{ item.remark }}</div>
             <el-input size="large" v-model="item.reply" :placeholder="getField(item.problem)" />
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '5'">
             <div class="remark" v-if="item.remark">{{ item.remark }}</div>
             <el-input v-model="item.reply" type="textarea" :placeholder="getField(item.problem)" />
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '6'">
             <div class="remark" v-if="item.remark">{{ item.remark }}</div>
             <custom-upload model="reply" :list="file" :limit="1" url="/files/web/cxyy_match/upload" @change="onUpload($event, item)"></custom-upload>
+            <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
           </div>
           <div class="type" v-if="item.type == '7'">
             <div class="list">
@@ -136,10 +143,10 @@
               </div>
             </div>
             <div class="type" v-if="item.type == '7'">
-              <div class="list">
+              <div class="arr">
                 <div v-for="(aa, ina) in item.answer" :key="ina" class="name">{{ aa.text }}</div>
               </div>
-              <div class="list" v-for="(gg, inx) in item.reply" :key="inx">
+              <div class="arr" v-for="(gg, inx) in item.reply" :key="inx">
                 <div v-for="(aa, ina) in item.answer" :key="ina" class="input">
                   {{ gg[aa.text] }}
                 </div>
@@ -206,6 +213,8 @@ const form = ref({})
 const dialog = ref({ type: '1', show: false, title: '报名信息' })
 
 const is_look = ref(false)
+// 错误信息
+const errors = ref({})
 
 const search = async (query = { skip, limit }) => {
   skip = query.skip
@@ -227,7 +236,7 @@ const toView = (data) => {
   form.value = data
   investigate.value = data.info
   for (const val of data.info) {
-    if (val.type == '5') file.value = val.reply
+    if (val.type == '6') file.value = val.reply
     if (val.type == '1') checkbox.value = val.reply
   }
   dialog.value = { type: '2', show: true, title: '报名信息' }
@@ -237,7 +246,7 @@ const toEdit = (data) => {
   form.value = data
   investigate.value = data.info
   for (const val of data.info) {
-    if (val.type == '5') file.value = val.reply
+    if (val.type == '6') file.value = val.reply
     if (val.type == '1') checkbox.value = val.reply
   }
   dialog.value = { type: '1', show: true, title: '报名信息' }
@@ -320,11 +329,38 @@ const checkChange = (data, item) => {
     }
   }
 }
+// 自定义的验证函数
+const validateObject = async (arr) => {
+  const errors = {}
+  for (const obj of arr) {
+    if (obj.is_must == '0') {
+      if (!obj.reply || obj.reply.length == 0) {
+        if (obj.type == '0' || obj.type == '1' || obj.type == '1') errors[obj.problem] = `请选择${obj.problem}`
+        else if (obj.type == '6') errors[obj.problem] = `请上传${obj.problem}`
+        else errors[obj.problem] = `请填写${obj.problem}`
+      }
+    }
+  }
+  // 如果有错误，返回错误对象
+  if (Object.keys(errors).length > 0) {
+    return errors
+  }
+  // 如果没有错误，返回null或undefined
+  return null
+}
 const toSave = async () => {
-  const data = { id: form.value.id, status: '0', info: investigate.value }
-  const res = await store.update(data)
-  if ($checkRes(res, true)) {
-    toClose()
+  const errorsInfo = await validateObject(investigate.value)
+  // 检查是否有错误
+  if (errorsInfo) {
+    errors.value = errorsInfo
+    console.log(errorsInfo)
+  } else {
+    errors.value = {}
+    const data = { id: form.value.id, status: '0', info: investigate.value }
+    const res = await store.update(data)
+    if ($checkRes(res, true)) {
+      toClose()
+    }
   }
 }
 // 决赛时间确认
@@ -436,7 +472,11 @@ watch(
       .image {
         width: 100%;
       }
-
+      .error-message {
+        margin: 10px 0 0 10px;
+        font-size: 14px;
+        color: red;
+      }
       .remark {
         margin: 10px 0 10px 20px;
         font-size: 14px;
@@ -456,6 +496,31 @@ watch(
       background-color: #007aff;
     }
   }
+  .arr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 10px 0;
+
+    .name {
+      width: 50%;
+      text-align: center;
+    }
+
+    .input {
+      width: 50%;
+      margin: 0 5px 0 0;
+      border: 1px solid #e5e5e5;
+      border-radius: 5px;
+      text-align: center;
+
+      .name {
+        width: 50%;
+        text-align: center;
+        margin: 0 0 10px 0;
+      }
+    }
+  }
   :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
     text-align: center;
     width: 10px !important; /* 设置你想要的宽度 */

src/views/detail/preliminary.vue

@@ -54,6 +54,7 @@
           <el-radio-group v-model="item.reply">
             <el-radio v-for="(i, radio) in item.answer" :key="radio" :value="i.text">{{ i.text }}</el-radio>
           </el-radio-group>
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '1'">
           <div class="remark" v-if="item.remark">{{ item.remark }}</div>
@@ -62,28 +63,34 @@
               {{ i.text }}
             </el-checkbox>
           </el-checkbox-group>
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '2'">
           <div class="remark" v-if="item.remark">{{ item.remark }}</div>
           <el-select v-model="item.reply" placeholder="请选择" size="large" style="width: 100%">
             <el-option v-for="(i, select) in item.answer" :key="select" :label="i.text" :value="i.text" />
           </el-select>
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '3'">
           <div class="remark" v-if="item.remark">{{ item.remark }}</div>
           <el-input size="large" v-model="item.reply" type="number" :placeholder="getField(item.problem)" />
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '4'">
           <div class="remark" v-if="item.remark">{{ item.remark }}</div>
           <el-input size="large" v-model="item.reply" :placeholder="getField(item.problem)" />
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '5'">
           <div class="remark" v-if="item.remark">{{ item.remark }}</div>
           <el-input v-model="item.reply" type="textarea" :placeholder="getField(item.problem)" />
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '6'">
           <div class="remark" v-if="item.remark">{{ item.remark }}</div>
           <custom-upload model="reply" :list="file" accept="*" :limit="10" url="/files/web/cxyy_match/upload" @change="onUpload($event, item)"></custom-upload>
+          <div v-if="errors[item.problem]" class="error-message">{{ errors[item.problem] }}</div>
         </div>
         <div class="type" v-if="item.type == '7'">
           <div class="list">
@@ -162,6 +169,8 @@ const rules = reactive({
   checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
 })
 
+// 错误信息
+const errors = ref({})
 // 请求
 onMounted(async () => {
   loading.value = true
@@ -229,36 +238,63 @@ const checkChange = (data, item) => {
     }
   }
 }
+// 自定义的验证函数
+const validateObject = async (arr) => {
+  const errors = {}
+  for (const obj of arr) {
+    if (obj.is_must == '0') {
+      if (!obj.reply || obj.reply.length == 0) {
+        if (obj.type == '0' || obj.type == '1' || obj.type == '1') errors[obj.problem] = `请选择${obj.problem}`
+        else if (obj.type == '6') errors[obj.problem] = `请上传${obj.problem}`
+        else errors[obj.problem] = `请填写${obj.problem}`
+      }
+    }
+  }
+  // 如果有错误，返回错误对象
+  if (Object.keys(errors).length > 0) {
+    return errors
+  }
+  // 如果没有错误，返回null或undefined
+  return null
+}
 const toSave = async () => {
-  const data = { match_id: info.value.id, info: investigate.value }
-  if (user.value.id) {
-    data.user_id = user.value.id
-    const res = await matchRegStore.create(data)
-    if (res.errcode == '0') {
-      ElMessageBox.alert('请在 个人中心-活动管理-大赛报名 中查看报名信息', '报名信息', {
-        confirmButtonText: '确定',
-        callback: () => {
-          toBack()
+  const errorsInfo = await validateObject(investigate.value)
+  // 检查是否有错误
+  if (errorsInfo) {
+    errors.value = errorsInfo
+    console.log(errorsInfo)
+  } else {
+    errors.value = {}
+    const data = { match_id: info.value.id, info: investigate.value }
+    if (user.value.id) {
+      data.user_id = user.value.id
+      const res = await matchRegStore.create(data)
+      if (res.errcode == '0') {
+        ElMessageBox.alert('请在 个人中心-活动管理-大赛报名 中查看报名信息', '报名信息', {
+          confirmButtonText: '确定',
+          callback: () => {
+            toBack()
+          }
+        })
+      } else ElMessage({ message: res.errmsg, type: 'error' })
+    } else {
+      if (!ruleFormRef.value) return
+      await ruleFormRef.value.validate(async (valid) => {
+        if (valid) {
+          form.value.nick_name = form.value.account
+          data.user = form.value
+          const res = await matchRegStore.create(data)
+          if (res.errcode == '0') {
+            ElMessageBox.alert('请在 个人中心-活动管理-大赛报名 中查看报名信息', '报名信息', {
+              confirmButtonText: '确定',
+              callback: () => {
+                toBack()
+              }
+            })
+          } else ElMessage({ message: res.errmsg, type: 'error' })
         }
       })
-    } else ElMessage({ message: res.errmsg, type: 'error' })
-  } else {
-    if (!ruleFormRef.value) return
-    await ruleFormRef.value.validate(async (valid) => {
-      if (valid) {
-        form.value.nick_name = form.value.account
-        data.user = form.value
-        const res = await matchRegStore.create(data)
-        if (res.errcode == '0') {
-          ElMessageBox.alert('请在 个人中心-活动管理-大赛报名 中查看报名信息', '报名信息', {
-            confirmButtonText: '确定',
-            callback: () => {
-              toBack()
-            }
-          })
-        } else ElMessage({ message: res.errmsg, type: 'error' })
-      }
-    })
+    }
   }
 }
 // 返回上一页
@@ -334,7 +370,11 @@ const toBack = () => {
         .image {
           width: 100%;
         }
-
+        .error-message {
+          margin: 10px 0 0 10px;
+          font-size: 14px;
+          color: red;
+        }
         .remark {
           margin: 10px 0 10px 20px;
           font-size: 14px;

src/views/two/add/match copy.vue

@@ -468,7 +468,7 @@ const delFinals = async (e) => {
 // 调查问卷填写
 const addInvest = () => {
   dialogVisible.value = true
-  investigateForm.value = { sid: moment().valueOf(), problem: '', type: '', is_must: '', reply: '', answer: '', remark: '' }
+  investigateForm.value = { sid: moment().valueOf(), problem: '', type: '', is_must: '1', reply: '', answer: '', remark: '' }
 }
 // 删除调查问卷
 const delInvest = async (e) => {

src/views/two/add/match.vue

@@ -317,7 +317,8 @@ const fourformFields = ref([
   { label: '备注', model: 'remark', type: 'textarea' }
 ])
 const fourRules = reactive({
-  problem: [{ required: true, message: '请输入字段名称', trigger: 'blur' }]
+  problem: [{ required: true, message: '请输入字段名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择类型', trigger: 'blur' }]
 })
 const dialogVisible = ref(false)
 const proTypeList = ref([
@@ -495,7 +496,7 @@ const delFinals = async (e) => {
 // 调查问卷填写
 const addInvest = () => {
   dialogVisible.value = true
-  investigateForm.value = { sid: moment().valueOf(), problem: '', type: '', is_must: '', reply: '', answer: '', remark: '' }
+  investigateForm.value = { sid: moment().valueOf(), problem: '', type: '', is_must: '1', reply: '', answer: '', remark: '' }
 }
 // 删除调查问卷
 const delInvest = async (e) => {