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
+54 -35
View File
@@ -319,14 +319,16 @@
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
<el-link <el-tooltip v-if="!isShippingTemplatePage" content="选择常用地址" placement="top">
v-if="!isShippingTemplatePage" <el-button
type="primary" class="business-crud-page__address-pick-btn"
:disabled="transportAddressSelectDisabled" type="primary"
@click="openTransportAddressPicker('departure')" :icon="OfficeBuilding"
> link
选择 :disabled="transportAddressSelectDisabled"
</el-link> @click="openTransportAddressPicker('departure')"
/>
</el-tooltip>
<span class="business-crud-page__route-label">联系人</span> <span class="business-crud-page__route-label">联系人</span>
<el-input <el-input
v-model="form.departureContact" v-model="form.departureContact"
@@ -335,14 +337,16 @@
/> />
<span class="business-crud-page__route-label">联系方式</span> <span class="business-crud-page__route-label">联系方式</span>
<el-input v-model="form.departurePhone" placeholder="请输入" :disabled="dialogReadonly" /> <el-input v-model="form.departurePhone" placeholder="请输入" :disabled="dialogReadonly" />
<el-link <el-tooltip v-if="isShippingTemplatePage" content="选择常用地址" placement="top">
v-if="isShippingTemplatePage" <el-button
type="primary" class="business-crud-page__address-pick-btn"
:disabled="transportAddressSelectDisabled" type="primary"
@click="openTransportAddressPicker('departure')" :icon="OfficeBuilding"
> link
选择 :disabled="transportAddressSelectDisabled"
</el-link> @click="openTransportAddressPicker('departure')"
/>
</el-tooltip>
</div> </div>
</template> </template>
@@ -386,26 +390,30 @@
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
<el-link <el-tooltip v-if="!isShippingTemplatePage" content="选择常用地址" placement="top">
v-if="!isShippingTemplatePage" <el-button
type="primary" class="business-crud-page__address-pick-btn"
:disabled="transportAddressSelectDisabled" type="primary"
@click="openTransportAddressPicker('arrival')" :icon="OfficeBuilding"
> link
选择 :disabled="transportAddressSelectDisabled"
</el-link> @click="openTransportAddressPicker('arrival')"
/>
</el-tooltip>
<span class="business-crud-page__route-label">联系人</span> <span class="business-crud-page__route-label">联系人</span>
<el-input v-model="form.arrivalContact" placeholder="请输入" :disabled="dialogReadonly" /> <el-input v-model="form.arrivalContact" placeholder="请输入" :disabled="dialogReadonly" />
<span class="business-crud-page__route-label">联系方式</span> <span class="business-crud-page__route-label">联系方式</span>
<el-input v-model="form.arrivalPhone" placeholder="请输入" :disabled="dialogReadonly" /> <el-input v-model="form.arrivalPhone" placeholder="请输入" :disabled="dialogReadonly" />
<el-link <el-tooltip v-if="isShippingTemplatePage" content="选择常用地址" placement="top">
v-if="isShippingTemplatePage" <el-button
type="primary" class="business-crud-page__address-pick-btn"
:disabled="transportAddressSelectDisabled" type="primary"
@click="openTransportAddressPicker('arrival')" :icon="OfficeBuilding"
> link
选择 :disabled="transportAddressSelectDisabled"
</el-link> @click="openTransportAddressPicker('arrival')"
/>
</el-tooltip>
</div> </div>
</template> </template>
@@ -5153,7 +5161,7 @@ import { openImportDialog } from '@/utils/import-excel';
import { applyTableMenuWidth } from '@/utils/table-menu'; import { applyTableMenuWidth } from '@/utils/table-menu';
import { downloadFileByUrl, downloadXls } from '@/utils/util'; import { downloadFileByUrl, downloadXls } from '@/utils/util';
import { isMobile } from '@/utils/validate'; 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 { ElImageViewer } from 'element-plus';
import { OpenFileViewer } from '@open-file-viewer/vue'; import { OpenFileViewer } from '@open-file-viewer/vue';
import { import {
@@ -5448,6 +5456,7 @@ export default {
data() { data() {
return { return {
Location, Location,
OfficeBuilding,
Search, Search,
form: {}, form: {},
suppressTransportTypeClear: false, suppressTransportTypeClear: false,
@@ -13203,13 +13212,23 @@ export default {
padding: 0; padding: 0;
} }
.business-crud-page__map-suffix {
color: #409eff;
}
:deep(.el-input .el-input__icon) {
color: #409eff;
}
&--shipping-template { &--shipping-template {
grid-template-columns: grid-template-columns:
220px minmax(220px, 1fr) 58px minmax(220px, 280px) 72px minmax(220px, 280px) 220px minmax(220px, 1fr) 58px minmax(220px, 280px) 72px minmax(220px, 280px)
40px; 40px;
}
.business-crud-page__map-suffix { .business-crud-page__address-pick-btn {
color: #409eff; :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"> <div class="route-node-form">
<el-form-item label="发货地址" required class="route-address-form-item" <el-form-item label="发货地址" required class="route-address-form-item"
><div class="route-address-inputs" ><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>
<el-form-item label="联系人" <el-form-item label="联系人"
><el-input v-model="form.departureContact" placeholder="请输入" ><el-input v-model="form.departureContact" placeholder="请输入"
@@ -90,7 +90,7 @@
<div class="route-node-form"> <div class="route-node-form">
<el-form-item label="途经地" required class="route-address-form-item" <el-form-item label="途经地" required class="route-address-form-item"
><div class="route-address-inputs" ><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>
<el-form-item label="联系人"><el-input v-model="route.departureContact" placeholder="请输入" /></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> <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"> <div class="route-node-form">
<el-form-item label="收货地址" required class="route-address-form-item" <el-form-item label="收货地址" required class="route-address-form-item"
><div class="route-address-inputs" ><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>
<el-form-item label="联系人" <el-form-item label="联系人"
><el-input v-model="form.arrivalContact" placeholder="请输入" /></el-form-item> ><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 { getList as getCommonCargoList } from '@/api/business/common-cargo';
import { exportBlob, importBlob } from '@/api/common'; import { exportBlob, importBlob } from '@/api/common';
import { downloadFileByUrl, downloadXls } from '@/utils/util'; 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 { ElImageViewer } from 'element-plus';
import { OpenFileViewer } from '@open-file-viewer/vue'; import { OpenFileViewer } from '@open-file-viewer/vue';
import { fallbackPlugin, imagePlugin, officePlugin, pdfPlugin, textPlugin } from '@open-file-viewer/core'; import { fallbackPlugin, imagePlugin, officePlugin, pdfPlugin, textPlugin } from '@open-file-viewer/core';
@@ -581,7 +581,7 @@ export default {
emits: ['back', 'dispatch'], emits: ['back', 'dispatch'],
data() { data() {
return { return {
List, OfficeBuilding,
Search, Search,
loading: false, loading: false,
projects: [], projects: [],
@@ -1965,6 +1965,10 @@ export default {
} }
.address-picker-button { .address-picker-button {
flex: 0 0 auto; flex: 0 0 auto;
:deep(.el-icon) {
font-size: 22px;
}
} }
} }
.route-step-title { .route-step-title {