feat: 表单回显时禁止操作

This commit is contained in:
2026-01-22 13:34:38 +08:00
parent 1c49dc25b1
commit 9d8c3155e6
4 changed files with 29 additions and 14 deletions

View File

@@ -437,8 +437,8 @@ const routes: Array<RouteRecordRaw> = [
component:()=>import('@/views/AwardPage/index.vue') component:()=>import('@/views/AwardPage/index.vue')
}, },
{ {
path:'apply', path:'contestants',
name:'Apply', name:'Contestants',
component:()=>import('@/views/AwardPage/apply.vue') component:()=>import('@/views/AwardPage/apply.vue')
} }
] ]

View File

@@ -75,10 +75,12 @@
> >
<a-input <a-input
v-if="item.type === 'input'" v-if="item.type === 'input'"
:disabled="readOnly"
v-model:value="form[item.key]" v-model:value="form[item.key]"
/> />
<a-select <a-select
v-if="item.type === 'select'" v-if="item.type === 'select'"
:disabled="readOnly"
v-model:value="form[item.key]" v-model:value="form[item.key]"
:options="genderOptions" :options="genderOptions"
> >
@@ -102,7 +104,10 @@
label="Design Title" label="Design Title"
required required
> >
<a-input v-model:value="form.designTitle" /> <a-input
v-model:value="form.designTitle"
:disabled="readOnly"
/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
class="full-row design-desc" class="full-row design-desc"
@@ -112,6 +117,7 @@
> >
<a-textarea <a-textarea
class="textarea" class="textarea"
:disabled="readOnly"
v-model:value="form.designDescription" v-model:value="form.designDescription"
placeholder="Briefly describe your design concept, inspiration, and creative direction..." placeholder="Briefly describe your design concept, inspiration, and creative direction..."
/> />
@@ -158,6 +164,7 @@
> >
<a-upload-dragger <a-upload-dragger
v-model:fileList="pdfList" v-model:fileList="pdfList"
:disabled="readOnly"
:showUploadList="false" :showUploadList="false"
@change="info => handleFileChange(info, 'pdf')" @change="info => handleFileChange(info, 'pdf')"
:customRequest="handleUploadPdf" :customRequest="handleUploadPdf"
@@ -209,6 +216,7 @@
<a-upload-dragger <a-upload-dragger
v-model:fileList="videoList" v-model:fileList="videoList"
:showUploadList="false" :showUploadList="false"
:disabled="readOnly"
@change="info => handleFileChange(info, 'video')" @change="info => handleFileChange(info, 'video')"
:customRequest="handleUploadVideo" :customRequest="handleUploadVideo"
:beforeUpload="beforeUploadVideo" :beforeUpload="beforeUploadVideo"
@@ -329,7 +337,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onUnmounted, onMounted } from 'vue' import { ref, onUnmounted, onMounted, computed } from 'vue'
import { debounce } from 'lodash-es' import { debounce } from 'lodash-es'
import type { Rule } from 'ant-design-vue/es/form' import type { Rule } from 'ant-design-vue/es/form'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
@@ -341,10 +349,15 @@
import Success from './components/Success.vue' import Success from './components/Success.vue'
const route = useRoute() const route = useRoute()
const isCompleted = ref(false) const isCompleted = ref(false)
const hasValidEmail = ref(false) const hasValidEmail = ref(false)
const readOnly = computed(() => {
if (route.query.id && !hasValidEmail.value) {
return true
}
return false
})
const formRef = ref(null) const formRef = ref(null)
const form = ref({ const form = ref({
email: '', email: '',
@@ -568,6 +581,7 @@
console.log('coderes', res) console.log('coderes', res)
form.value.secureToken = res.data.secureToken form.value.secureToken = res.data.secureToken
hasValidEmail.value = true
message.success('Verification successful!') message.success('Verification successful!')
showModal.value = false showModal.value = false
@@ -575,6 +589,10 @@
} }
const handleSubmitForm = () => { const handleSubmitForm = () => {
if (!hasValidEmail.value) {
message.error('Please verify your email first')
return
}
const validCondition = conditionsList.value.filter( const validCondition = conditionsList.value.filter(
item => item.required && !item.check item => item.required && !item.check
) )
@@ -770,8 +788,9 @@
? Https.httpUrls.uploadPDFComplete ? Https.httpUrls.uploadPDFComplete
: Https.httpUrls.uploadVideoComplete : Https.httpUrls.uploadVideoComplete
await Https.axiosPost(endpoint, { return Https.axiosPost(endpoint, {
uploadId: chunkUploadState[type].uploadId, uploadId: chunkUploadState[type].uploadId,
email: form.value.email,
fileName: file.name, fileName: file.name,
totalSize: file.size, totalSize: file.size,
secureToken: form.value.secureToken secureToken: form.value.secureToken
@@ -910,7 +929,6 @@
const handleEchoForm = () => { const handleEchoForm = () => {
Https.axiosGet(Https.httpUrls.getContestantByID + route.query.id).then(res => { Https.axiosGet(Https.httpUrls.getContestantByID + route.query.id).then(res => {
console.log('获取到的值---', res)
Object.assign(form.value, res) Object.assign(form.value, res)
}) })
} }

View File

@@ -117,14 +117,11 @@
watch( watch(
() => route.path, () => route.path,
val => { val => {
console.log('val', val) if (val.includes('contestants')) {
if (val.includes('apply')) {
btnType.value = 'form' btnType.value = 'form'
} else { } else {
btnType.value = 'index' btnType.value = 'index'
} }
console.log('btnType', btnType.value)
}, },
{ {
immediate: true immediate: true
@@ -132,7 +129,7 @@
) )
const handleBtnClick = () => { const handleBtnClick = () => {
if (btnType.value === 'index') { if (btnType.value === 'index') {
router.push('/award/apply') router.push('/award/contestants')
} else { } else {
router.push('/award/index') router.push('/award/index')
} }

View File

@@ -48,7 +48,7 @@
const router = useRouter() const router = useRouter()
const handleSubmitApplication = () => { const handleSubmitApplication = () => {
router.push('/award/apply') router.push('/award/contestants')
} }
const blocksList = ref([ const blocksList = ref([