Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-12-11 11:38:07 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
995cf9023b1b0ca3b5aff0f4c0cb873bf44ad2cb
995cf902
1 parent
f8c6d9bc
feat(表单): 将静态表单重构为动态可配置表单
重构添加计数对象表单,使用动态字段配置替代硬编码字段 添加表单校验逻辑和备注字段,提升表单可扩展性
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
55 additions
and
35 deletions
src/views/checkin/CheckinDetailPage.vue
src/views/checkin/CheckinDetailPage.vue
View file @
995cf90
...
...
@@ -79,30 +79,27 @@
</div>
<!-- 新增计数对象弹框 -->
<van-dialog v-model:show="showAddTargetDialog" title="添加计数对象" show-cancel-button confirmButtonColor="#4caf50" @confirm="confirmAddTarget">
<van-dialog
v-model:show="showAddTargetDialog"
title="添加计数对象"
show-cancel-button
confirmButtonColor="#4caf50"
:before-close="onBeforeClose"
>
<div class="p-4">
<div v-for="field in dynamicFormFields" :key="field.id">
<van-field
v-model="newTargetForm.name"
label="姓名"
placeholder="请输入姓名"
class="border-b border-gray-100"
/>
<van-field
v-model="newTargetForm.city"
label="城市"
placeholder="请输入所在城市"
v-model="field.value"
:label="field.label"
:placeholder="'请输入' + field.label"
:type="field.type === 'textarea' ? 'textarea' : 'text'"
:rows="field.type === 'textarea' ? 2 : 1"
:autosize="field.type === 'textarea'"
class="border-b border-gray-100"
/>
<van-field
v-model="newTargetForm.school"
label="单位"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="请输入所在单位"
:required="field.required"
/>
</div>
</div>
</van-dialog>
<!-- 文本输入区域 -->
...
...
@@ -279,11 +276,14 @@ const targetList = ref([
{ name: '李老师', city: '上海', school: '复旦大学' }
])
const showAddTargetDialog = ref(false)
const newTargetForm = reactive({
name: '',
city: '',
school: ''
})
// 动态表单字段 Mock 数据
const dynamicFormFields = ref([
{ id: 'name', label: '姓名', value: '', type: 'text', required: true },
{ id: 'city', label: '城市', value: '', type: 'text', required: true },
{ id: 'school', label: '单位', value: '', type: 'text', required: true },
{ id: 'remark', label: '备注', value: '', type: 'textarea', required: true } // 新增字段
])
const toggleTarget = (item) => {
const index = selectedTargets.value.findIndex(t => t.name === item.name)
...
...
@@ -294,22 +294,42 @@ const toggleTarget = (item) => {
}
}
const confirmAddTarget = () => {
if (!newTargetForm.name || !newTargetForm.city || !newTargetForm.school) {
showToast('请完整填写信息')
return
const onBeforeClose = (action) => {
if (action === 'confirm') {
// 校验必填项
for (const field of dynamicFormFields.value) {
if (field.required && !field.value.trim()) {
showToast(`请填写${field.label}`)
return false // 阻止关闭
}
}
// 打印录入信息
console.log('新增计数对象信息:', { ...newTargetForm })
// 校验通过,处理提交逻辑
confirmAddTarget()
return true // 允许关闭
}
return true // 取消时允许关闭
}
// 添加到列表
targetList.value.push({ ...newTargetForm })
const confirmAddTarget = () => {
// 收集表单数据
const formData = dynamicFormFields.value.reduce((acc, field) => {
acc[field.id] = field.value
return acc
}, {})
console.log('新增计数对象信息:', formData)
// 添加到列表(适配原有的数据结构)
targetList.value.push({
name: formData.name,
city: formData.city,
school: formData.school
// 其他字段...
})
// 重置表单
newTargetForm.name = ''
newTargetForm.city = ''
newTargetForm.school = ''
dynamicFormFields.value.forEach(field => field.value = '')
}
// 作品类型选项
...
...
Please
register
or
login
to post a comment