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:
@@ -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
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user