style(ui): 统一弹窗分组白卡样式并改造相关弹窗布局
- 新增全局弹窗灰底背景色，提升视觉一致性 - 新增通用分组白卡组件 section-card，标题融入卡头，支持额外插槽 - 统一 Avue 弹窗表单及分组为白卡样式 - 调整 common-route.vue 弹窗，使用 section-card 分组包裹查询条件与常用地址 - 改造 loading-manage.vue 弹窗所有分区，采用 section-card 统一风格 - 全局样式调整弹窗内容区表单项间距及两列表单布局工具类 - 在 main.js 全局注册 section-card 组件，便于项目统一复用
This commit is contained in:
@@ -141,98 +141,102 @@
|
||||
class="common-route-page__address-dialog"
|
||||
@opened="loadAddressList"
|
||||
>
|
||||
<div class="common-route-page__address-search">
|
||||
<el-form :model="addressQuery" label-position="right" label-width="86px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地址名称">
|
||||
<el-input v-model="addressQuery.addressName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地址类型">
|
||||
<el-select
|
||||
v-model="addressQuery.addressType"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in addressTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="addressQuery.detailAddress" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" class="common-route-page__address-search-actions">
|
||||
<el-button type="primary" @click="handleAddressSearch">查询</el-button>
|
||||
<el-button @click="handleAddressReset">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="组织">
|
||||
<el-select
|
||||
v-model="addressQuery.deptId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<section-card title="查询条件">
|
||||
<div class="common-route-page__address-search">
|
||||
<el-form :model="addressQuery" label-position="right" label-width="86px">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地址名称">
|
||||
<el-input v-model="addressQuery.addressName" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="地址类型">
|
||||
<el-select
|
||||
v-model="addressQuery.addressType"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in addressTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="详细地址">
|
||||
<el-input v-model="addressQuery.detailAddress" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6" class="common-route-page__address-search-actions">
|
||||
<el-button type="primary" @click="handleAddressSearch">查询</el-button>
|
||||
<el-button @click="handleAddressReset">重置</el-button>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="组织">
|
||||
<el-select
|
||||
v-model="addressQuery.deptId"
|
||||
clearable
|
||||
filterable
|
||||
placeholder="请选择"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in deptOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</section-card>
|
||||
|
||||
<el-table
|
||||
border
|
||||
:data="addressData"
|
||||
v-loading="addressLoading"
|
||||
height="310"
|
||||
highlight-current-row
|
||||
@row-click="selectAddressRow"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="80" align="center" />
|
||||
<el-table-column prop="addressName" label="地址名称" min-width="150" />
|
||||
<el-table-column prop="addressCode" label="地址编号" min-width="150" />
|
||||
<el-table-column prop="addressType" label="类型" min-width="150" />
|
||||
<el-table-column label="站点编码" min-width="170">
|
||||
<template #default="{ row }">
|
||||
{{ row.addressType === '常规地址' ? '/' : row.siteCodeDisplay || row.siteCode || '' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="detailAddress" label="详细地址" min-width="220" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click.stop="selectAddressRow(row)">选择</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<section-card title="常用地址">
|
||||
<el-table
|
||||
border
|
||||
:data="addressData"
|
||||
v-loading="addressLoading"
|
||||
height="310"
|
||||
highlight-current-row
|
||||
@row-click="selectAddressRow"
|
||||
>
|
||||
<el-table-column type="index" label="序号" width="80" align="center" />
|
||||
<el-table-column prop="addressName" label="地址名称" min-width="150" />
|
||||
<el-table-column prop="addressCode" label="地址编号" min-width="150" />
|
||||
<el-table-column prop="addressType" label="类型" min-width="150" />
|
||||
<el-table-column label="站点编码" min-width="170">
|
||||
<template #default="{ row }">
|
||||
{{ row.addressType === '常规地址' ? '/' : row.siteCodeDisplay || row.siteCode || '' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="detailAddress" label="详细地址" min-width="220" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click.stop="selectAddressRow(row)">选择</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="common-route-page__address-pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="addressPage.currentPage"
|
||||
v-model:page-size="addressPage.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
:total="addressPage.total"
|
||||
@size-change="handleAddressSizeChange"
|
||||
@current-change="handleAddressCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="common-route-page__address-pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="addressPage.currentPage"
|
||||
v-model:page-size="addressPage.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, prev, pager, next, sizes"
|
||||
:total="addressPage.total"
|
||||
@size-change="handleAddressSizeChange"
|
||||
@current-change="handleAddressCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</section-card>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="addressDialogVisible = false">关闭</el-button>
|
||||
|
||||
Reference in New Issue
Block a user