输入框禁止特殊字符 && 预填信息保存及回显

Contest/contest.client/src/main.js

@@ -5,6 +5,7 @@ import router from './router/index.js'
 import pinia from './pinia'
 import api from '@/api/index.js'
 import tools from '@/utils/common.js'
+import specialChar from'@/utils/directive.js'
 import axios from 'axios'
 
 import Less from 'less'
@@ -25,6 +26,11 @@ app.config.globalProperties.$api = api
 app.config.globalProperties.$tools = tools
 // app.config.globalProperties.$jwtDecode = jwtDecode
 
+// 设置全局自定义指令
+/* app.directive('special-char', specialChar)
+app.directive('file-name', fileName) */
+specialChar(app)
+
 app.use(router)
 // app.use(store)
 app.use(pinia)

Contest/contest.client/src/utils/directive.js

@@ -0,0 +1,47 @@
+let findEle = (parent, type) => {
+    return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
+}
+
+const trigger = (el, type) => {
+    const e = document.createEvent('HTMLEvents')
+    e.initEvent(type, true, true)
+    el.dispatchEvent(e)
+}
+
+//普通特殊字符过滤
+export default (app) => {
+    app.directive('special-char', {
+        mounted(el, binding, vnode) {
+            // 正则规则可根据需求自定义
+            // var regRule = /[`~!@#$%^&*()\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/g
+            let regRule = /[`~?$^&*\/#$%￥|]/g
+            let isChinese = false
+            let $inp = findEle(el, 'input')
+            el.$inp = $inp
+            if ($inp) {
+                $inp.handle = function () {
+                    if (!isChinese) {
+                        let val = $inp.value
+                        $inp.value = val.replace(regRule, '')
+                        trigger($inp, 'input')
+                    }
+                }
+                $inp.chineseStart = function () {
+                    isChinese = true
+                }
+                $inp.chineseEnd = function () {
+                    isChinese = false
+                }
+                $inp.addEventListener('keyup', $inp.handle)
+                $inp.addEventListener('compositionstart', $inp.chineseStart)
+                $inp.addEventListener('compositionend', $inp.chineseEnd)
+            }
+        },
+        unmounted(el) {
+            el.$inp && el.$inp.removeEventListener('keyup', el.$inp.handle)
+            el.$inp && el.$inp.removeEventListener('compositionend', el.$inp.chineseStart)
+            el.$inp && el.$inp.removeEventListener('compositionstart', el.$inp.chineseStart)
+            // el.$inp && el.$inp.removeEventListener('keydown', el.$inp.handle)
+        },
+    })
+}

Contest/contest.client/src/view/activitylist/ActivityInfo.vue

@@ -119,12 +119,12 @@
                                     <el-radio label="female">女</el-radio>
                                     <el-radio label="secrecy">保密</el-radio>
                                 </el-radio-group>
-                                <el-input v-show="item.type === 'text'" v-model="enrollData.enrollInfos[index].val" placeholder="请输入" />
+                                <el-input v-special-char v-show="item.type === 'text'" v-model.trim="enrollData.enrollInfos[index].val" placeholder="请输入" />
                                 
-                                <el-select v-show="item.type === 'select'" v-model="enrollData.enrollInfos[index].val" placeholder="请选择">
+                                <el-select v-show="item.type === 'select'" v-model="enrollData.enrollInfos[index].val" @change="deleteRule(item.field)" placeholder="请选择">
                                     <el-option v-for="(value, index) in item.item" :key="index" :label="value" :value="value" />
                                 </el-select>
-                                <el-select v-if="item.field === 'school'" v-model="enrollData.enrollInfos[index].val" placeholder="请选择">
+                                <el-select v-if="item.field === 'school'" v-model="enrollData.enrollInfos[index].val" @change="deleteRule(item.field)" placeholder="请选择">
                                     <el-option v-for="(value, index) in schoolList" :key="index" :label="value.name" :value="value.schoolId" />
                                 </el-select>
                             </el-form-item>
@@ -140,10 +140,10 @@
                                     </el-select>
                                 </el-form-item>
                                 <el-form-item label="团队名称" v-if="enrollData.leader">
-                                    <el-input v-model="enrollData.teamName" />
+                                    <el-input v-special-char v-model.trim="enrollData.teamName" />
                                 </el-form-item>
                                 <el-form-item label="组队口令" v-if="!enrollData.leader" class="code-box">
-                                    <el-input v-model="enrollData.cipher" />
+                                    <el-input v-special-char v-model.trim="enrollData.cipher" />
                                 </el-form-item>
                                 <template v-if="teamMembers.length">
                                     <el-form-item label="组队名称">
@@ -172,7 +172,7 @@
                     <div v-show="yxModule">
                         <el-form label-width="100px" class="join-box">
                             <el-form-item label="醍摩豆账号">
-                                <el-input v-model="enrollData.tmdid" disabled />
+                                <el-input v-special-char v-model.trim="enrollData.tmdid" disabled />
                             </el-form-item>
                         </el-form>
                     </div>
@@ -186,7 +186,7 @@
                     <div v-show="jyModule">
                         <el-form label-width="100px" class="join-box">
                             <el-form-item label="醍摩豆账号">
-                                <el-input v-model="enrollData.tmdid" disabled />
+                                <el-input v-special-char v-model.trim="enrollData.tmdid" disabled />
                             </el-form-item>
                         </el-form>
                     </div>
@@ -314,13 +314,13 @@ function getListInfo() {
             res.contest.modules.forEach((item, index) => {
                 res.contest[item].actState = nowTime < res.contest[item].stime ? 'notStart' : (nowTime > res.contest[item].etime ? 'finish' : 'going')
             })
+            registered.value = nowTime > res.contest.sign.stime && nowTime < res.contest.sign.etime ? 0 : 3
             let index = res.contest.modules.findIndex(item => {
                 return res.contest[item].actState === 'going'
             })
-            contestStep.value = index === -1 ? 4 : index
+            contestStep.value = index === -1 ? (registered.value === 3 ? -1 : 4) : index
             contest.value = res.contest
             enrollData.type = res.contest.sign.type
-            registered.value = nowTime > res.contest.sign.stime && nowTime < res.contest.sign.etime ? 0 : 3
             enrollData.enrollInfos = contest.value.sign.fields.map(item => {
                 return {
                     code: item.field,
@@ -359,16 +359,36 @@ function getEnroll() {
             registered.value = schoolList.length ? (res.code === 200 ? 1 : 0) : 2
             contestStep.value = (!contestStep.value && registered.value === 1 && contest.value.upload.actState === 'going') ? 1 : contestStep.value
         }
+        if(!registered.value) {
+            getTeaEnroll()
+        }
     }).finally(() => {
     })
 }
 
+function getTeaEnroll() {
+    let params = {
+        grant_type: 'get-teacher-enroll'
+    }
+    proxy.$api.teaContest(params).then(res => {
+        if(res.code === 200) {
+            res.teacherEnroll.enrollInfos.forEach(item => {
+                let fieldsIndex = contest.value.sign.fields.findIndex(fields => fields.field === item.code)
+                if(fieldsIndex != -1) {
+                    if((item.code === 'period' || item.code === 'subject') && contest.value.sign.fields[fieldsIndex].type === 'select') {
+                        enrollData.enrollInfos[fieldsIndex].val = contest.value.sign.fields[fieldsIndex].item.includes(item.val) ? item.val : ''
+                    } else {
+                        enrollData.enrollInfos[fieldsIndex].val = item.val
+                    }
+                }
+            })
+            schoolIndex.value = schoolList.findIndex(school => school.schoolId === res.teacherEnroll.schoolId)
+            schoolIndex.value = schoolIndex.value === -1 ? '' : schoolIndex.value
+        }
+    })
+}
+
 function searchCipher() {
-    /* loading = ElLoading.service({
-        lock: true,
-        text: '加载中',
-        background: 'rgba(0, 0, 0, 0.7)'
-    }) */
     let params = {
         grant_type: 'search-team-by-cipher',
         activityId: infoId.value,
@@ -392,19 +412,13 @@ function searchCipher() {
             })
         }
     }).finally(() => {
-        // loading.close()
     })
 }
 
 // 队长身份要先生成组队口令
 async function genCipher(formEl) {
     formEl.validate(async (valid, ddd) => {
-        if(valid) {
-            /* loading = ElLoading.service({
-                lock: true,
-                text: '加载中',
-                background: 'rgba(0, 0, 0, 0.7)'
-            }) */
+        if(valid && schoolIndex.value !== '') {
             if(contest.value.sign.type && enrollData.leader) {
                 let params = {
                     grant_type: 'gen-cipher',
@@ -417,12 +431,12 @@ async function genCipher(formEl) {
                         await signContest()
                     }
                 }).catch(() => {
-                    // loading.close()
                 })
             } else {
                 await signContest()
             }
         } else {
+            console.log('fegjmj,', valid, schoolIndex.value);
             ElMessage({
                 type: 'warning',
                 message: '请完善信息'
@@ -499,7 +513,6 @@ function signContest() {
             }
         }).finally(() => {
         }).finally(() => {
-            // loading.close()
         })
     })
 }
@@ -539,6 +552,10 @@ async function onPreview(item) {
     }
 }
 
+function deleteRule(type) {
+    enrollForm.value.clearValidate(type)
+}
+
 watch(() => enrollData.cipher, (newdata) => {
     codeSearch.value = true
     teamMembers.value = []

Contest/contest.client/src/view/basicInfo/BasicInfo.vue

@@ -1,58 +1,117 @@
 <template>
   <div>
     <el-alert title="您所填写的信息，会在报名活动时自动填充" type="warning" />
-    <el-form :model="form" label-width="120px">
-        <el-form-item label="姓名">
-            <el-input v-model="form.name" />
+    <el-form ref="enrollForm" :rules="rules" :model="teacherEnroll" label-width="120px" style="margin-top: 15px;">
+        <el-form-item prop="name" label="姓名">
+            <el-input v-special-char v-model.trim="teacherEnroll.name" />
         </el-form-item>
-        <el-form-item label="性别">
-            <el-radio-group v-model="form.gender">
+        <el-form-item prop="sex" label="性别">
+            <el-radio-group v-model="teacherEnroll.sex" @change="deleteRule('sex')">
                 <el-radio label="male">男</el-radio>
                 <el-radio label="female">女</el-radio>
+                <el-radio label="secrecy">保密</el-radio>
             </el-radio-group>
         </el-form-item>
-        <el-form-item label="手机号码">
-            <el-input v-model="form.phone" placeholder="请输入" />
+        <el-form-item prop="phone" label="手机号码">
+            <el-input v-special-char v-model="teacherEnroll.phone" placeholder="请输入" />
         </el-form-item>
-        <el-form-item label="电子邮箱">
-            <el-input v-model="form.email" placeholder="请输入" />
+        <el-form-item prop="email" label="电子邮箱">
+            <el-input v-special-char v-model="teacherEnroll.email" placeholder="请输入" />
         </el-form-item>
-        <el-form-item label="学校">
-            <el-select v-model="form.school" placeholder="请选择">
-                <el-option label="醍摩豆学校" value="1111" />
-                <el-option label="研发学校" value="2222" />
-                <el-option label="未找到学校/未加入学校" value="0000" />
+        <el-form-item prop="schoolId" label="学校">
+            <el-select v-model="teacherEnroll.schoolId" placeholder="请选择" @change="deleteRule('schoolId')">
+                <el-option v-for="item in store.schoolList" :key="item.schoolId" :label="item.name" :value="item.schoolId" />
             </el-select>
         </el-form-item>
-        <el-form-item label="学校名称" v-if="form.school === '0000'">
-            <el-input v-model="form.schoolTip" placeholder="请输入学校名称" />
+        <el-form-item prop="period" label="学段">
+            <el-input v-special-char v-model.trim="teacherEnroll.period" placeholder="请输入" />
         </el-form-item>
-        <el-form-item label="学段">
-            <el-select v-model="form.period" placeholder="请选择">
-                <el-option label="小学" value="1111" />
-                <el-option label="初中" value="2222" />
-                <el-option label="高中" value="3333" />
-            </el-select>
-        </el-form-item>
-        <el-form-item label="学科">
-            <el-select v-model="form.subject" placeholder="请选择">
-                <el-option label="语文" value="1111" />
-                <el-option label="数学" value="2222" />
-                <el-option label="英语" value="3333" />
-                <el-option label="历史" value="4444" />
-            </el-select>
+        <el-form-item prop="subject" label="学科">
+            <el-input v-special-char v-model.trim="teacherEnroll.subject" placeholder="请输入" />
         </el-form-item>
         <el-form-item>
-            <el-button type="primary">保存</el-button>
+            <el-button type="primary" @click="setTeaEnroll(enrollForm)">保存</el-button>
         </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { ref, reactive, getCurrentInstance } from 'vue'
+import { useStore } from "@/pinia/common"
+
+let { proxy } = getCurrentInstance()
+let store = useStore()
+
+let teacherEnroll = ref({})
+let rules = ref({
+    name: {required: true, message: '不能为空', trigger: 'blur',},
+    sex: {required: true, message: '不能为空', trigger: 'blur',},
+    phone: {required: true, message: '不能为空', trigger: 'blur',},
+    email: {required: true, message: '不能为空', trigger: 'blur',},
+    schoolId: {required: true, message: '不能为空', trigger: 'blur',},
+    period: {required: true, message: '不能为空', trigger: 'blur',},
+    subject: {required: true, message: '不能为空', trigger: 'blur',},
+})
+let enrollForm = ref(null)
+
+getTeaEnroll()
+
+function getTeaEnroll() {
+    let params = {
+        grant_type: 'get-teacher-enroll'
+    }
+    proxy.$api.teaContest(params).then(res => {
+        if(res.code === 200) {
+            res.teacherEnroll.enrollInfos.forEach(item => {
+                teacherEnroll.value[item.code] = item.val
+            })
+            teacherEnroll.value.schoolId = res.teacherEnroll.schoolId
+        }
+    })
+}
+
+function setTeaEnroll(formEl) {
+    formEl.validate(async (valid, ddd) => {
+        if(valid) {
+            let params = {
+                grant_type: 'update-teacher-enroll',
+                teacherEnroll: {
+                    id: store.userInfo.sub,
+                    code: 'TeacherEnroll',
+                    schoolId: teacherEnroll.value.schoolId,
+                    enrollInfos: [],
+                }
+            }
+            Object.keys(teacherEnroll.value).forEach(key => {
+                if(key != 'schoolId') {
+                    params.teacherEnroll.enrollInfos.push({
+                        code: key,
+                        val: teacherEnroll.value[key]
+                    })
+                }
+            })
+            proxy.$api.teaContest(params).then(res => {
+                if(res.code === 200) {
+                    ElMessage({
+                        type: 'success',
+                        message: '保存成功'
+                    })
+                }
+            })
+        } else {
+            ElMessage({
+                type: 'warning',
+                message: '请完善信息'
+            })
+        }
+    })
+}
 
-let form = reactive({})
+function deleteRule(type) {
+    enrollForm.value.clearValidate(type)
+}
 </script>
 
 <style>

Contest/contest.client/src/view/myactivity/MyActivity.vue

@@ -272,7 +272,7 @@
 		</div>
         <el-dialog v-model="uploadDia" title="上传作品" width="30%">
             <p style="margin-bottom: 10px;">请为作品集取一个名称</p>
-            <el-input v-model="uploadName" placeholder="请输入" />
+            <el-input v-special-char v-model.trim="uploadName" placeholder="请输入" />
             <template #footer>
                 <span class="dialog-footer">
                     <el-button @click="uploadDia = false">取消</el-button>
@@ -382,6 +382,7 @@ function getListInfo(info, index) {
     actIndex.value = index
     actInfo.value = {attachment: []}
     uploadList.value = []
+    fileList.value = []
     accept.value = ''
     uploadName.value = ''
     scoreData.value = {detailScore: []}
@@ -712,6 +713,12 @@ async function startUpload() {
         })
         return
     }
+    
+    loading = ElLoading.service({
+        lock: true,
+        text: '加载中',
+        background: 'rgba(0, 0, 0, 0.7)'
+    })
     let blobList = await uploadBlob()
     if(!blobList) {
         ElMessage({
@@ -759,7 +766,7 @@ async function startUpload() {
             await deleteBlobPrefix(actInfo.value.owner, path)
         }
     }).finally(() => {
-        // loading.close()
+        loading.close()
         uploadDia.value = false
     })
 }