fix(business): 修复下拉框定位及输入框宽度问题

- 统一 business-crud-page.vue 表单控件宽度,包含 el-autocomplete 及其内部元素
- 调整调度弹窗收发货地址行网格,使地址输入框宽度自适应避免溢出
- contract-manage.vue 中所有 el-select 加 :teleported="false" 和 :fit-input-width="true"
- 强制 contract-manage.vue 下拉框在输入框正下方显示,防止弹出位置漂移
- 禁用 contract-manage.vue 下拉弹窗自动翻转,确保下拉框始终在下方显示
This commit is contained in:
2026-09-03 15:45:01 +08:00
parent 685a37b2df
commit 9e14f31604
3 changed files with 101 additions and 11 deletions
+17
View File
@@ -0,0 +1,17 @@
## 合同管理独立表单页下拉框定位修复
- `src/views/business/contract-manage.vue` 全部 12 处 `el-select``:teleported="false"` + `:fit-input-width="true"`:下拉保持在输入框正下方、宽度与输入框一致(原 teleport 到 body 导致下拉漂移且按内容撑宽)。
- 若后续新增独立表单页出现同样问题,照加这两个属性即可。
- 追加:teleported=false 后 popper 因下方空间不足自动上翻,再给 12 处 el-select 加 `placement="bottom-start"` + `:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"` 强制始终在下方展示。
## 调度弹窗司机输入框宽度不一致修复
- 现象:「编辑调度信息(精简录入)」弹窗中,司机(el-autocomplete)输入框比同行 250px 的其他输入框宽。
- 根因:`business-crud-page.vue` 约 13434 行的「表单控件统一 250px」规则漏了 `.el-autocomplete`autocomplete 根节点是包装层,内部才是 .el-input)。
- 修复:在该规则选择器列表追加 `> .el-autocomplete``> .el-autocomplete > .el-input`,与运单独立表单页(13658 行 business-crud-page--form-page 先例)一致。
- 经验:凡「控件统一 250px」类规则,选择器必须包含 `.el-autocomplete` 包装层。
## 调度弹窗收发货地址行溢出修复
- 现象:「编辑调度信息」弹窗收发货信息行,地址输入框过宽,右侧「联系方式」列被挤出弹窗。
- 根因:`__dispatch-shipping-form __route-address-row` 网格地址列为 `minmax(280px, 1fr)`,各列最小宽度合计 1030px,弹窗不够宽时 grid 不换行直接溢出。
- 修复:地址列改 `minmax(0, 1fr)`(宽屏仍 1fr 拉伸,窄窗自动收窄,总最小宽降到 750px)。
- 备注:基础规则 `__route-address-row`(13750 行,运单独立表单页等在用,7 列含 40px 按钮列)仍是 minmax(280px,1fr),同样窄窗有溢出风险,暂未动(用户未反馈该页问题)。
@@ -13435,7 +13435,9 @@ export default {
:deep(.el-form-item__content > .el-select), :deep(.el-form-item__content > .el-select),
:deep(.el-form-item__content > .el-cascader), :deep(.el-form-item__content > .el-cascader),
:deep(.el-form-item__content > .el-input-number), :deep(.el-form-item__content > .el-input-number),
:deep(.el-form-item__content > .el-date-editor) { :deep(.el-form-item__content > .el-date-editor),
:deep(.el-form-item__content > .el-autocomplete),
:deep(.el-form-item__content > .el-autocomplete > .el-input) {
width: 250px; width: 250px;
max-width: 100%; max-width: 100%;
} }
@@ -13506,7 +13508,7 @@ export default {
&__shipping-title, &__shipping-title,
&__goods-title, &__goods-title,
&__task-title { &__task-title {
min-width: 100%; //min-width: 100%;
} }
&__shipping-route-action { &__shipping-route-action {
@@ -13753,7 +13755,7 @@ export default {
); );
gap: 8px; gap: 8px;
align-items: center; align-items: center;
width: 100%; width:98%;
:deep(.el-input), :deep(.el-input),
:deep(.el-select), :deep(.el-select),
@@ -13807,7 +13809,9 @@ export default {
} }
&__dispatch-shipping-form &__route-address-row { &__dispatch-shipping-form &__route-address-row {
grid-template-columns: 260px minmax(280px, 1fr) 58px minmax(160px, 220px) 72px minmax( // minmax(0, 1fr)
//
grid-template-columns: 260px minmax(0, 1fr) 58px minmax(160px, 220px) 72px minmax(
160px, 160px,
220px 220px
); );
+76 -7
View File
@@ -111,7 +111,14 @@
<div class="dialog-section-title">基本信息</div> <div class="dialog-section-title">基本信息</div>
<div class="contract-manage-form__grid"> <div class="contract-manage-form__grid">
<el-form-item label="签约类型" prop="signType"> <el-form-item label="签约类型" prop="signType">
<el-select v-model="form.signType" placeholder="请选择签约类型"> <el-select
v-model="form.signType"
placeholder="请选择签约类型"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option <el-option
v-for="item in signTypeOptions" v-for="item in signTypeOptions"
:key="item.value" :key="item.value"
@@ -136,7 +143,14 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="合同类型" prop="contractCategory"> <el-form-item label="合同类型" prop="contractCategory">
<el-select v-model="form.contractCategory" placeholder="请选择合同类型"> <el-select
v-model="form.contractCategory"
placeholder="请选择合同类型"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option <el-option
v-for="item in contractCategoryOptions" v-for="item in contractCategoryOptions"
:key="item.value" :key="item.value"
@@ -151,6 +165,10 @@
placeholder="请选择" placeholder="请选择"
filterable filterable
clearable clearable
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
:loading="projectLoading" :loading="projectLoading"
@visible-change="visible => visible && loadProjectOptions()" @visible-change="visible => visible && loadProjectOptions()"
@change="handleProjectChange" @change="handleProjectChange"
@@ -169,6 +187,10 @@
placeholder="请选择甲方" placeholder="请选择甲方"
filterable filterable
clearable clearable
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
:loading="contractPartyLoading" :loading="contractPartyLoading"
@visible-change="visible => visible && loadContractPartyOptions()" @visible-change="visible => visible && loadContractPartyOptions()"
> >
@@ -186,6 +208,10 @@
placeholder="请选择乙方" placeholder="请选择乙方"
filterable filterable
clearable clearable
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
:loading="contractPartyLoading" :loading="contractPartyLoading"
@visible-change="visible => visible && loadContractPartyOptions()" @visible-change="visible => visible && loadContractPartyOptions()"
> >
@@ -240,7 +266,14 @@
/> />
</el-form-item> </el-form-item>
<el-form-item label="结算类型" prop="settlementMode"> <el-form-item label="结算类型" prop="settlementMode">
<el-select v-model="form.settlementMode" placeholder="请选择结算类型"> <el-select
v-model="form.settlementMode"
placeholder="请选择结算类型"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option <el-option
v-for="item in settlementModeOptions" v-for="item in settlementModeOptions"
:key="item.value" :key="item.value"
@@ -250,7 +283,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="合同格式" prop="contractFormat"> <el-form-item label="合同格式" prop="contractFormat">
<el-select v-model="form.contractFormat" placeholder="请选择合同格式"> <el-select
v-model="form.contractFormat"
placeholder="请选择合同格式"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option <el-option
v-for="item in contractFormatOptions" v-for="item in contractFormatOptions"
:key="item.value" :key="item.value"
@@ -260,7 +300,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="是否需要加盖法人章" prop="legalSealFlag"> <el-form-item label="是否需要加盖法人章" prop="legalSealFlag">
<el-select v-model="form.legalSealFlag" placeholder="请选择"> <el-select
v-model="form.legalSealFlag"
placeholder="请选择"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option label="" :value="0" /> <el-option label="" :value="0" />
<el-option label="" :value="1" /> <el-option label="" :value="1" />
</el-select> </el-select>
@@ -359,6 +406,10 @@
<el-select <el-select
v-model="settlementRuleForm.settlementType" v-model="settlementRuleForm.settlementType"
placeholder="请选择结算类型" placeholder="请选择结算类型"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
@change="handleSettlementTypeChange" @change="handleSettlementTypeChange"
> >
<el-option <el-option
@@ -373,6 +424,10 @@
<el-select <el-select
v-model="settlementRuleForm.billCycleType" v-model="settlementRuleForm.billCycleType"
placeholder="请选择账单周期类型" placeholder="请选择账单周期类型"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
@change="handleBillCycleTypeChange" @change="handleBillCycleTypeChange"
> >
<el-option <el-option
@@ -384,7 +439,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="showBillCutoffDay" label="账单截单日" required> <el-form-item v-if="showBillCutoffDay" label="账单截单日" required>
<el-select v-model="settlementRuleForm.billCutoffDay" placeholder="请选择账单截单日"> <el-select
v-model="settlementRuleForm.billCutoffDay"
placeholder="请选择账单截单日"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option <el-option
v-for="item in billCutoffDayOptions" v-for="item in billCutoffDayOptions"
:key="item.value" :key="item.value"
@@ -394,7 +456,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-if="showCycleDays" label="周期天数" required> <el-form-item v-if="showCycleDays" label="周期天数" required>
<el-select v-model="settlementRuleForm.cycleDays" placeholder="请选择周期天数"> <el-select
v-model="settlementRuleForm.cycleDays"
placeholder="请选择周期天数"
:teleported="false"
:fit-input-width="true"
placement="bottom-start"
:popper-options="{ modifiers: [{ name: 'flip', enabled: false }] }"
>
<el-option <el-option
v-for="item in cycleDayOptions" v-for="item in cycleDayOptions"
:key="item.value" :key="item.value"