admin/guoju0808
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(detail): 参会人 dialog 改 2 列布局 (760px grid 1fr 1fr) + close-on-click-modal=false 防误触关闭

Browse Source
This commit is contained in:
郭庆泰
2026-08-22 16:48:24 +08:00
parent 42cce867e3
commit 67fc425639
1 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ry-vue3/src/views/manager/MeetingDetail.vue
+12 -5
View File
@@ -332,9 +332,10 @@
</template>
</el-dialog>
<!-- 参会人 dialog (新增/编辑通用) -->
<el-dialog v-model="attendeeDialog.show" :title="attendeeDialog.title" width="520px" @closed="resetAttendeeForm">
<el-form :model="attendeeDialog.form" label-width="100px">
<!-- 参会人 dialog (新增/编辑通用, 2 列布局) -->
<el-dialog v-model="attendeeDialog.show" :title="attendeeDialog.title" width="760px" append-to-body :close-on-click-modal="false" @closed="resetAttendeeForm">
<el-form :model="attendeeDialog.form" label-width="100px" class="attendee-form-2col">
<!-- Col 1: 基础档案 (8 字段) -->
<el-form-item label="手机号" required>
<el-input v-model="attendeeDialog.form.phone" :disabled="attendeeDialog.editing" placeholder="11位手机号" maxlength="11" />
</el-form-item>
@@ -359,6 +360,7 @@
<el-form-item label="银行卡号码">
<el-input v-model="attendeeDialog.form.bankCard" placeholder="持卡人银行卡号" maxlength="25" />
</el-form-item>
<!-- Col 2: 财务 + 备注 (8 字段) -->
<el-form-item label="开户行">
<el-input v-model="attendeeDialog.form.bankBranch" placeholder="如: 北京东城支行" />
</el-form-item>
@@ -371,7 +373,7 @@
<el-form-item label="个税税金">
<el-input-number v-model="attendeeDialog.form.tax" :precision="2" :min="0" controls-position="right" style="width:100%" />
</el-form-item>
<el-form-item label="增值税及附加成本">
<el-form-item label="增值税附加">
<el-input-number v-model="attendeeDialog.form.vatAndSurcharge" :precision="2" :min="0" controls-position="right" style="width:100%" />
</el-form-item>
<el-form-item label="实发金额">
@@ -1130,7 +1132,12 @@ onMounted(load)
.attendee-section { padding-bottom: 16px; border-bottom: 1px dashed #e8e8e8; }
.attendee-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.toolbar-hint { font-size: 12px; color: #909399; line-height: 1.5; }
.form-hint { font-size: 12px; color: #909399; margin-top: -8px; margin-bottom: 8px; line-height: 1.5; }
.form-hint { font-size: 12px; color: #909399; margin-top: -8px; margin-bottom: 8px; line-height: 1.5; grid-column: 1 / -1; }
/* 参会人 dialog 2 列布局: el-form 用 grid, 每个 el-form-item 占 1 列, form-hint 横跨 2 列 */
.attendee-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.attendee-form-2col :deep(.el-form-item) { margin-bottom: 12px; }
.attendee-form-2col :deep(.el-form-item__content) { min-width: 0; }
/* 表格外层横向滚动容器: 内容总宽 ~1680px 超出 left-col 宽度时, 容器内出现横向滚动条, 不撑爆外层 grid */
.attendee-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
</style>