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

style(region): 优化区域页面搜索表单布局与样式

Browse Source 
- 使用 section-card 组件包裹搜索表单，提升 UI 结构清晰度
- 调整表单项为弹性盒子布局，实现横向均匀分布
- 为选择器添加固定宽度，统一控件尺寸
- 将搜索按钮和清空按钮放置于表单内右侧，方便操作
- 添加局部样式，优化表单间距和按钮组间距
- 引入 section-card 组件并在 components 中注册
- 合并合同类别初始值为空，避免默认值误导用户
This commit is contained in:
赵忠林
2026-09-02 11:12:32 +08:00
parent a9b4ab069b
commit 9c2a2ee6e6
2 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/region.vue
+52 -31
View File
@@ -11,37 +11,44 @@
</el-col>
<el-col class="region-page__form-panel" :span="18">
<basic-container>
<el-form class="region-page__search" :model="searchForm" inline>
<el-form-item label="区域编码">
<el-input v-model="searchForm.code" clearable placeholder="请输入区域编码" />
</el-form-item>
<el-form-item label="区域名称">
<el-input v-model="searchForm.name" clearable placeholder="请输入区域名称" />
</el-form-item>
<el-form-item label="区域层级">
<el-select v-model="searchForm.regionLevel" clearable placeholder="请选择区域层级">
<el-option label="省份" :value="1" />
<el-option label="省市" :value="2" />
<el-option label="区县" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="数据来源">
<el-select v-model="searchForm.dataSource" clearable placeholder="请选择数据来源">
<el-option label="手动录入" value="手动录入" />
<el-option label="初始化导入" value="初始化导入" />
</el-select>
</el-form-item>
<el-form-item label="启停状态">
<el-select v-model="searchForm.status" clearable placeholder="请选择启停状态">
<el-option label="启用" :value="1" />
<el-option label="停用" :value="2" />
</el-select>
</el-form-item>
<el-form-item class="region-page__search-actions">
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleSearchReset">清空</el-button>
</el-form-item>
</el-form>
<section-card>
<el-form class="region-page__search" :model="searchForm" inline>
<div style="display: flex; justify-content: space-between">
<el-form-item label="区域编码">
<el-input v-model="searchForm.code" clearable placeholder="请输入区域编码" />
</el-form-item>
<el-form-item label="区域名称">
<el-input v-model="searchForm.name" clearable placeholder="请输入区域名称" />
</el-form-item>
<el-form-item label="区域层级">
<el-select v-model="searchForm.regionLevel" clearable placeholder="请选择" style="width: 200px;">
<el-option label="省份" :value="1" />
<el-option label="省市" :value="2" />
<el-option label="区县" :value="3" />
</el-select>
</el-form-item>
<el-form-item label="数据来源">
<el-select v-model="searchForm.dataSource" clearable placeholder="请选择" style="width: 200px;">
<el-option label="手动录入" value="手动录入" />
<el-option label="初始化导入" value="初始化导入" />
</el-select>
</el-form-item>
</div>
<div style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;">
<el-form-item label="启停状态">
<el-select v-model="searchForm.status" clearable placeholder="请选择" style="width: 200px;">
<el-option label="启用" :value="1" />
<el-option label="停用" :value="2" />
</el-select>
</el-form-item>
<el-form-item class="region-page__search-actions">
<el-button type="primary" @click="handleSearch">搜索</el-button>
<el-button @click="handleSearchReset">清空</el-button>
</el-form-item>
</div>
</el-form>
</section-card>
<el-button-group>
<el-button
v-if="permission.region_add"
@@ -157,10 +164,12 @@ import { openImportDialog } from '@/utils/import-excel';
import { getToken } from '@/utils/auth';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import SectionCard from '@/components/section-card/main.vue';
const ROOT_PARENT_CODE = '0';
export default {
components: { SectionCard },
data() {
return {
topCode: ROOT_PARENT_CODE,
@@ -750,4 +759,16 @@ export default {
max-width: 100%;
}
}
.el-form--inline .el-form-item{
margin-right: 10px !important;
}
.region-page__tree-panel .avue-tree__filter{
padding: 0 !important;
}
.el-button-group--horizontal{
margin-bottom: 12px !important;
}
.el-form-item{
margin-bottom: 8px !important;
}
</style>
src/views/business/contract-manage.vue
+2 -1
View File
@@ -98,6 +98,7 @@
<template v-else>
<div class="archive-page-form__title">{{ formPageTitle }}</div>
<el-form
ref="contractForm"
:model="form"
@@ -813,7 +814,7 @@ const defaultSettlementRule = () => ({
cycleDays: '',
});
const defaultForm = () => ({
contractCategory: '客户合同',
contractCategory: '',
contractNo: '',
contractName: '',
projectId: '',