💄 付款管理搜索栏改造为手写搜索区
- 与应收/应付明细等页面搜索样式统一（4列网格、查询/重置独占一行靠右、默认折叠一行4条件） - 移除 avue 内置搜索配置与搜索专用列，搜索字段与后端参数保持不变 - 展开搜索后触发表格高度重算，分页保持在一屏内
This commit is contained in:
刘泉佳
@@ -1,13 +1,61 @@
|
||||
<template>
|
||||
<basic-container class="payment-page">
|
||||
<section class="payment-search">
|
||||
<el-form :model="searchForm" label-position="right" label-width="88px" @submit.prevent>
|
||||
<div class="payment-search__grid">
|
||||
<template v-for="field in visibleSearchFields" :key="field.prop">
|
||||
<el-form-item :label="field.label">
|
||||
<el-date-picker
|
||||
v-if="field.type === 'daterange'"
|
||||
v-model="searchForm[field.prop]"
|
||||
type="daterange"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
range-separator="~"
|
||||
start-placeholder="年/月/日"
|
||||
end-placeholder="年/月/日"
|
||||
/>
|
||||
<el-select
|
||||
v-else-if="field.type === 'select'"
|
||||
v-model="searchForm[field.prop]"
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in field.options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-cascader
|
||||
v-else-if="field.type === 'cascader'"
|
||||
v-model="searchForm[field.prop]"
|
||||
:options="organizationSearchTreeOptions"
|
||||
:props="organizationCascaderProps"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择 所属组织"
|
||||
/>
|
||||
<el-input v-else v-model="searchForm[field.prop]" clearable placeholder="请输入" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<div class="payment-search__actions">
|
||||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
<el-button text :icon="searchExpanded ? ArrowUp : ArrowDown" @click="toggleSearch">
|
||||
{{ searchExpanded ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
<avue-crud
|
||||
ref="crud"
|
||||
:option="option"
|
||||
:table-loading="loading"
|
||||
:data="rows"
|
||||
v-model:page="page"
|
||||
@search-change="searchChange"
|
||||
@search-reset="searchReset"
|
||||
@selection-change="selectionChange"
|
||||
@current-change="currentChange"
|
||||
@size-change="sizeChange"
|
||||
@@ -174,6 +222,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
import * as api from '@/api/payment/paymentApplication';
|
||||
import { paymentApplicationOption } from '@/option/payment/paymentApplication';
|
||||
@@ -190,6 +239,8 @@ export default {
|
||||
mixins: [organizationSearch],
|
||||
data() {
|
||||
return {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
rows: [],
|
||||
selection: [],
|
||||
loading: false,
|
||||
@@ -197,6 +248,9 @@ export default {
|
||||
syncLoading: false,
|
||||
resultSyncing: false,
|
||||
query: {},
|
||||
// 手写搜索区（与应收/应付明细同款）：模型与展开状态
|
||||
searchForm: {},
|
||||
searchExpanded: false,
|
||||
option: {},
|
||||
page: {
|
||||
currentPage: 1,
|
||||
@@ -209,13 +263,37 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['permission']),
|
||||
// 搜索字段与应收/应付明细同结构；下拉选项沿用 api 常量
|
||||
searchFields() {
|
||||
return [
|
||||
{ label: '单据号', prop: 'paymentNo', type: 'input' },
|
||||
{ label: '日期', prop: 'applyDateRange', type: 'daterange' },
|
||||
{ label: '客户名称', prop: 'payeeName', type: 'input' },
|
||||
{ label: '项目名称', prop: 'projectName', type: 'input' },
|
||||
{ label: '所属组织', prop: 'deptName', type: 'cascader' },
|
||||
{ label: '关联结算单', prop: 'settlementNo', type: 'input' },
|
||||
{ label: '付款类型', prop: 'paymentType', type: 'select', options: api.paymentTypeOptions },
|
||||
{
|
||||
label: '审核状态',
|
||||
prop: 'approvalStatus',
|
||||
type: 'select',
|
||||
options: api.approvalStatusOptions,
|
||||
},
|
||||
{
|
||||
label: '金蝶单据状态',
|
||||
prop: 'kingdeeStatus',
|
||||
type: 'select',
|
||||
options: api.kingdeeStatusOptions,
|
||||
},
|
||||
];
|
||||
},
|
||||
// 默认折叠只展示一行 4 个条件
|
||||
visibleSearchFields() {
|
||||
return this.searchExpanded ? this.searchFields : this.searchFields.slice(0, 4);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.option = paymentApplicationOption({
|
||||
paymentTypeOptions: api.paymentTypeOptions,
|
||||
approvalStatusOptions: api.approvalStatusOptions,
|
||||
kingdeeStatusOptions: api.kingdeeStatusOptions,
|
||||
});
|
||||
this.option = paymentApplicationOption();
|
||||
this.loadOrganizationOptions();
|
||||
},
|
||||
mounted() {
|
||||
@@ -271,26 +349,30 @@ export default {
|
||||
this.$refs.crud?.toggleSelection?.();
|
||||
});
|
||||
},
|
||||
searchChange(params, done) {
|
||||
// 所属组织级联返回 id 路径数组，转成部门名称给后端
|
||||
// 搜索提交：组织级联路径转名称、日期区间拆成起止参数（与原 avue searchChange 同规则）
|
||||
buildSearchParams() {
|
||||
const params = { ...this.searchForm };
|
||||
this.normalizeOrganizationSearch(params, 'deptName');
|
||||
// 日期区间拆成后端需要的起止字段
|
||||
const range = params.applyDateRange || [];
|
||||
delete params.applyDateRange;
|
||||
this.query = {
|
||||
...params,
|
||||
applyStartDate: range[0] || '',
|
||||
applyEndDate: range[1] || '',
|
||||
};
|
||||
return { ...params, applyStartDate: range[0] || '', applyEndDate: range[1] || '' };
|
||||
},
|
||||
handleSearch() {
|
||||
this.query = this.buildSearchParams();
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
done();
|
||||
},
|
||||
searchReset() {
|
||||
handleReset() {
|
||||
this.searchForm = {};
|
||||
this.query = {};
|
||||
this.page.currentPage = 1;
|
||||
this.onLoad(this.page);
|
||||
},
|
||||
toggleSearch() {
|
||||
this.searchExpanded = !this.searchExpanded;
|
||||
// 搜索区在 avue 外部，高度变化 avue 感知不到，手动触发表格高度重算，保证分页在一屏内
|
||||
this.$nextTick(() => this.$refs.crud?.getTableHeight?.());
|
||||
},
|
||||
currentChange(currentPage) {
|
||||
this.page.currentPage = currentPage;
|
||||
},
|
||||
@@ -544,6 +626,56 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// 搜索区与应收/应付明细页（settlement-detail-page__search）同款样式
|
||||
.payment-search {
|
||||
margin-bottom: 8px;
|
||||
padding: 12px 12px 4px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-search__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(220px, 1fr));
|
||||
gap: 8px 24px;
|
||||
align-items: start;
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select),
|
||||
:deep(.el-cascader),
|
||||
:deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-search__actions {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.payment-search__grid {
|
||||
grid-template-columns: repeat(2, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 760px) {
|
||||
.payment-search__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-page :deep(.el-table) {
|
||||
--el-table-border-color: #eff1f7;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user