refactor(payment): 调整到期快捷筛选至账单台账页面独立展示
- 将快捷筛选标签及相关逻辑从搜索子组件提升至账单台账页面 - 标签置于搜索卡片下方、表格上方独立一行,满足用户需求 - 删除子组件中相关标签DOM及快捷筛选功能代码 - 统一选中态样式,采用 Element Plus 默认蓝底深字风格 fix(transportCapacity): 统一船舶管理弹窗表单控件宽度 - 删除异常的宽度强制规则,避免控件宽度不一致 - 采用固定宽度250px加最大宽度100%方案,实现多控件视觉宽度一致 - 清理无用label-width属性,解决label撑开布局异常问题 - 优化表单项label对齐与必填星号样式,确保多行label视觉协调 refactor(transportCapacity): 优化船舶证书分组布局及标签简化 - 证书有效期自标签统一更改为“有效期自” - 证书上传区域由集中底部移至对应证书分组末尾,保持信息关联 - 清理无用样式,保留必需上传项间距样式,提升界面整洁度 fix(business): 修复项目申请表单级联选择器宽度问题 - 业务部门和承办部门el-cascader控件未设置宽度,导致收缩 - 补充级联选择器宽度规则,保证与其他控件宽度统一 - 支持热更新,无需重启开发环境
This commit is contained in:
@@ -2,11 +2,20 @@
|
||||
<basic-container class="bill-ledger-page">
|
||||
<bill-ledger-search
|
||||
:query="query"
|
||||
:counts="counts"
|
||||
:loading="loading"
|
||||
@search="handleSearch"
|
||||
@reset="resetSearch"
|
||||
/>
|
||||
<div class="bill-ledger-page__expiry-tags">
|
||||
<el-check-tag
|
||||
v-for="item in shortcutOptions"
|
||||
:key="item.value"
|
||||
:checked="query.expiryShortcut === item.value"
|
||||
@change="handleShortcutChange(item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-check-tag>
|
||||
</div>
|
||||
<bill-ledger-table
|
||||
:rows="rows"
|
||||
:loading="loading"
|
||||
@@ -124,7 +133,21 @@ export default {
|
||||
mounted() {
|
||||
this.loadData();
|
||||
},
|
||||
computed: {
|
||||
shortcutOptions() {
|
||||
return [
|
||||
{ label: `全部(${this.counts.all || 0})`, value: 'all' },
|
||||
{ label: `30天内到期(${this.counts.within30 || 0})`, value: 'within30' },
|
||||
{ label: `90天内到期(${this.counts.within90 || 0})`, value: 'within90' },
|
||||
{ label: `90天以上(${this.counts.over90 || 0})`, value: 'over90' },
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleShortcutChange(value) {
|
||||
this.query.expiryShortcut = value;
|
||||
this.handleSearch();
|
||||
},
|
||||
unwrapData(response) {
|
||||
const body = response?.data || response || {};
|
||||
return body?.data || body;
|
||||
@@ -233,3 +256,19 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bill-ledger-page__expiry-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 6px;
|
||||
|
||||
:deep(.el-check-tag) {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -71,7 +71,6 @@ export default {
|
||||
name: 'BillLedgerSearch',
|
||||
props: {
|
||||
query: { type: Object, required: true },
|
||||
counts: { type: Object, default: () => ({}) },
|
||||
loading: { type: Boolean, default: false },
|
||||
},
|
||||
emits: ['search', 'reset'],
|
||||
@@ -86,22 +85,6 @@ export default {
|
||||
maturityStatusOptions,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
shortcutOptions() {
|
||||
return [
|
||||
{ label: `全部(${this.counts.all || 0})`, value: 'all' },
|
||||
{ label: `30天内到期(${this.counts.within30 || 0})`, value: 'within30' },
|
||||
{ label: `90天内到期(${this.counts.within90 || 0})`, value: 'within90' },
|
||||
{ label: `90天以上(${this.counts.over90 || 0})`, value: 'over90' },
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleShortcutChange(value) {
|
||||
this.query.expiryShortcut = value;
|
||||
this.$emit('search');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -124,32 +107,12 @@ export default {
|
||||
.bill-ledger-search :deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
}
|
||||
.bill-ledger-search__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.bill-ledger-search__actions-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
.bill-ledger-search__actions-tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.bill-ledger-search__actions-tags :deep(.el-check-tag) {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bill-ledger-search__actions-tags :deep(.el-check-tag.is-checked),
|
||||
.bill-ledger-search__actions-tags :deep(.el-check-tag.is-checked:hover) {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.bill-ledger-search__grid {
|
||||
|
||||
Reference in New Issue
Block a user