b2894lxlx/tms-erp-web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(business): 用el-button替换地址选择链接并统一图标样式

Browse Source 
- 将business-crud-page.vue中发货地、收货地地址选择操作由el-link替换为带提示的el-button组件
- 所有地址选择按钮统一使用OfficeBuilding图标代替List图标
- master-order-editor.vue中的常用地址选择按钮图标由List改为OfficeBuilding
- 增加样式定义调整地址选择按钮图标大小和颜色
- 优化按钮交互体验，保持禁用状态时按钮不可点击
This commit is contained in:
赵忠林
2026-08-25 20:37:47 +08:00
parent d58f73ab50
commit 112acbbf34
2 changed files with 63 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/business/components/business-crud-page.vue
+42 -23
View File
@@ -319,14 +319,16 @@
</el-icon>
</template>
</el-input>
<el-link
v-if="!isShippingTemplatePage"
<el-tooltip v-if="!isShippingTemplatePage" content="选择常用地址" placement="top">
<el-button
class="business-crud-page__address-pick-btn"
type="primary"
:icon="OfficeBuilding"
link
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('departure')"
>
选择
</el-link>
/>
</el-tooltip>
<span class="business-crud-page__route-label">联系人</span>
<el-input
v-model="form.departureContact"
@@ -335,14 +337,16 @@
/>
<span class="business-crud-page__route-label">联系方式</span>
<el-input v-model="form.departurePhone" placeholder="请输入" :disabled="dialogReadonly" />
<el-link
v-if="isShippingTemplatePage"
<el-tooltip v-if="isShippingTemplatePage" content="选择常用地址" placement="top">
<el-button
class="business-crud-page__address-pick-btn"
type="primary"
:icon="OfficeBuilding"
link
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('departure')"
>
选择
</el-link>
/>
</el-tooltip>
</div>
</template>
@@ -386,26 +390,30 @@
</el-icon>
</template>
</el-input>
<el-link
v-if="!isShippingTemplatePage"
<el-tooltip v-if="!isShippingTemplatePage" content="选择常用地址" placement="top">
<el-button
class="business-crud-page__address-pick-btn"
type="primary"
:icon="OfficeBuilding"
link
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('arrival')"
>
选择
</el-link>
/>
</el-tooltip>
<span class="business-crud-page__route-label">联系人</span>
<el-input v-model="form.arrivalContact" placeholder="请输入" :disabled="dialogReadonly" />
<span class="business-crud-page__route-label">联系方式</span>
<el-input v-model="form.arrivalPhone" placeholder="请输入" :disabled="dialogReadonly" />
<el-link
v-if="isShippingTemplatePage"
<el-tooltip v-if="isShippingTemplatePage" content="选择常用地址" placement="top">
<el-button
class="business-crud-page__address-pick-btn"
type="primary"
:icon="OfficeBuilding"
link
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('arrival')"
>
选择
</el-link>
/>
</el-tooltip>
</div>
</template>
@@ -5153,7 +5161,7 @@ import { openImportDialog } from '@/utils/import-excel';
import { applyTableMenuWidth } from '@/utils/table-menu';
import { downloadFileByUrl, downloadXls } from '@/utils/util';
import { isMobile } from '@/utils/validate';
import { Location, Rank, Search } from '@element-plus/icons-vue';
import { Location, OfficeBuilding, Rank, Search } from '@element-plus/icons-vue';
import { ElImageViewer } from 'element-plus';
import { OpenFileViewer } from '@open-file-viewer/vue';
import {
@@ -5448,6 +5456,7 @@ export default {
data() {
return {
Location,
OfficeBuilding,
Search,
form: {},
suppressTransportTypeClear: false,
@@ -13203,13 +13212,23 @@ export default {
padding: 0;
}
.business-crud-page__map-suffix {
color: #409eff;
}
:deep(.el-input .el-input__icon) {
color: #409eff;
}
&--shipping-template {
grid-template-columns:
220px minmax(220px, 1fr) 58px minmax(220px, 280px) 72px minmax(220px, 280px)
40px;
}
.business-crud-page__map-suffix {
color: #409eff;
.business-crud-page__address-pick-btn {
:deep(.el-icon) {
font-size: 22px;
}
}
}
src/views/business/components/master-order-editor.vue
+9 -5
View File
@@ -63,7 +63,7 @@
<div class="route-node-form">
<el-form-item label="发货地址" required class="route-address-form-item"
><div class="route-address-inputs"
><el-cascader v-model="addressRegionPaths.departure" class="route-address-name" :options="regionOptions" :props="regionCascaderProps" :loading="regionLoading" placeholder="请选择省市区" clearable filterable @visible-change="visible => visible && loadRegionOptions()" @change="value => handleAddressRegionChange('departure', value)" /><el-input v-model="form.departureAddress" class="route-address-detail" readonly placeholder="请输入详细地址" @click="openAddressMap('departure')" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="List" @click="openCommonAddress('departure')" /></el-tooltip></div
><el-cascader v-model="addressRegionPaths.departure" class="route-address-name" :options="regionOptions" :props="regionCascaderProps" :loading="regionLoading" placeholder="请选择省市区" clearable filterable @visible-change="visible => visible && loadRegionOptions()" @change="value => handleAddressRegionChange('departure', value)" /><el-input v-model="form.departureAddress" class="route-address-detail" readonly placeholder="请输入详细地址" @click="openAddressMap('departure')" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="OfficeBuilding" @click="openCommonAddress('departure')" /></el-tooltip></div
></el-form-item>
<el-form-item label="联系人"
><el-input v-model="form.departureContact" placeholder="请输入"
@@ -90,7 +90,7 @@
<div class="route-node-form">
<el-form-item label="途经地" required class="route-address-form-item"
><div class="route-address-inputs"
><el-cascader v-model="addressRegionPaths[`route-${index}`]" class="route-address-name" :options="regionOptions" :props="regionCascaderProps" :loading="regionLoading" :disabled="!route.transportType" placeholder="请选择省市区" clearable filterable @visible-change="visible => visible && loadRegionOptions()" @change="value => handleAddressRegionChange(`route-${index}`, value)" /><el-input v-model="route.departureAddress" class="route-address-detail" readonly :disabled="!route.transportType || !isRoadTransportType(route.transportType)" placeholder="请先选择运输方式" @click="openAddressMap(`route-${index}`)" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="List" :disabled="!route.transportType" @click="openCommonAddress(`route-${index}`)" /></el-tooltip></div
><el-cascader v-model="addressRegionPaths[`route-${index}`]" class="route-address-name" :options="regionOptions" :props="regionCascaderProps" :loading="regionLoading" :disabled="!route.transportType" placeholder="请选择省市区" clearable filterable @visible-change="visible => visible && loadRegionOptions()" @change="value => handleAddressRegionChange(`route-${index}`, value)" /><el-input v-model="route.departureAddress" class="route-address-detail" readonly :disabled="!route.transportType || !isRoadTransportType(route.transportType)" placeholder="请先选择运输方式" @click="openAddressMap(`route-${index}`)" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="OfficeBuilding" :disabled="!route.transportType" @click="openCommonAddress(`route-${index}`)" /></el-tooltip></div
></el-form-item>
<el-form-item label="联系人"><el-input v-model="route.departureContact" placeholder="请输入" /></el-form-item>
<el-form-item label="联系方式"><div class="route-contact-actions"><el-input v-model="route.departurePhone" placeholder="请输入" /><el-tooltip v-if="index === form.routes.length - 1" content="新增途经点" placement="top"><el-button class="route-action-button" type="primary" link @click="addRoute"><el-icon><CirclePlus /></el-icon></el-button></el-tooltip><el-tooltip content="删除途经点" placement="top"><el-button class="route-action-button" type="danger" link @click="removeRoute(index)"><el-icon><Remove /></el-icon></el-button></el-tooltip></div></el-form-item>
@@ -104,7 +104,7 @@
<div class="route-node-form">
<el-form-item label="收货地址" required class="route-address-form-item"
><div class="route-address-inputs"
><el-cascader v-model="addressRegionPaths.arrival" class="route-address-name" :options="regionOptions" :props="regionCascaderProps" :loading="regionLoading" :disabled="!form.finalTransportType" placeholder="请选择省市区" clearable filterable @visible-change="visible => visible && loadRegionOptions()" @change="value => handleAddressRegionChange('arrival', value)" /><el-input v-model="form.arrivalAddress" class="route-address-detail" readonly :disabled="!form.finalTransportType || !isRoadTransportType(form.finalTransportType)" placeholder="请选择省市区" @click="openAddressMap('arrival')" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="List" :disabled="!form.finalTransportType" @click="openCommonAddress('arrival')" /></el-tooltip></div
><el-cascader v-model="addressRegionPaths.arrival" class="route-address-name" :options="regionOptions" :props="regionCascaderProps" :loading="regionLoading" :disabled="!form.finalTransportType" placeholder="请选择省市区" clearable filterable @visible-change="visible => visible && loadRegionOptions()" @change="value => handleAddressRegionChange('arrival', value)" /><el-input v-model="form.arrivalAddress" class="route-address-detail" readonly :disabled="!form.finalTransportType || !isRoadTransportType(form.finalTransportType)" placeholder="请选择省市区" @click="openAddressMap('arrival')" /><el-tooltip content="选择常用地址" placement="top"><el-button class="address-picker-button" type="primary" link :icon="OfficeBuilding" :disabled="!form.finalTransportType" @click="openCommonAddress('arrival')" /></el-tooltip></div
></el-form-item>
<el-form-item label="联系人"
><el-input v-model="form.arrivalContact" placeholder="请输入" /></el-form-item>
@@ -549,7 +549,7 @@ import { getLazyTree as getRegionLazyTree } from '@/api/base/region';
import { getList as getCommonCargoList } from '@/api/business/common-cargo';
import { exportBlob, importBlob } from '@/api/common';
import { downloadFileByUrl, downloadXls } from '@/utils/util';
import { List, Search } from '@element-plus/icons-vue';
import { OfficeBuilding, Search } from '@element-plus/icons-vue';
import { ElImageViewer } from 'element-plus';
import { OpenFileViewer } from '@open-file-viewer/vue';
import { fallbackPlugin, imagePlugin, officePlugin, pdfPlugin, textPlugin } from '@open-file-viewer/core';
@@ -581,7 +581,7 @@ export default {
emits: ['back', 'dispatch'],
data() {
return {
List,
OfficeBuilding,
Search,
loading: false,
projects: [],
@@ -1965,6 +1965,10 @@ export default {
}
.address-picker-button {
flex: 0 0 auto;
:deep(.el-icon) {
font-size: 22px;
}
}
}
.route-step-title {