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

- 将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
@@ -319,14 +319,16 @@
</el-icon>
</template>
</el-input>
<el-link
v-if="!isShippingTemplatePage"
type="primary"
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('departure')"
>
选择
</el-link>
<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-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"
type="primary"
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('departure')"
>
选择
</el-link>
<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-tooltip>
</div>
</template>
@@ -386,26 +390,30 @@
</el-icon>
</template>
</el-input>
<el-link
v-if="!isShippingTemplatePage"
type="primary"
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('arrival')"
>
选择
</el-link>
<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-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"
type="primary"
:disabled="transportAddressSelectDisabled"
@click="openTransportAddressPicker('arrival')"
>
选择
</el-link>
<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-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;
}
}
}