gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重新调整 search.vue 和 reportView.vue

Browse Source
This commit is contained in:
写意 2025-07-08 14:25:57 +08:00
parent 6fea5d5a92
commit 4f6a3c765a
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Web/src/components/table/search.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="table-search-container" v-if="props.search.length > 0">
<el-form ref="tableSearchRef" :model="state.innerModelValue" label-width="100px" class="table-form">
<el-row :gutter="20">
<el-form ref="tableSearchRef" :model="state.innerModelValue" @submit.native.prevent label-width="100px" class="table-form">
<el-row :gutter="10">
<!-- <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="4" class="mb20"></el-col> -->
<el-col :xs="12" :sm="5" :md="5" :lg="6" :xl="4" class="mb20" v-for="(val, key) in search" :key="key" v-show="key < 3 || state.isToggle">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="mb5" v-for="(val, key) in search" :key="key" v-show="key < 4 || state.isToggle">
<template v-if="val.type">
<el-form-item
label-width="auto"
@ -35,7 +35,6 @@
v-model="state.innerModelValue[val.prop]"
v-bind="val.comProps"
type="monthrange"
value-format="YYYY/MM/DD"
:placeholder="val.placeholder"
:clearable="!val.required"
v-else-if="val.type === 'monthrange'"
@ -46,7 +45,6 @@
v-model="state.innerModelValue[val.prop]"
v-bind="val.comProps"
type="daterange"
value-format="YYYY/MM/DD"
:range-separator="t('message.list.to')"
:start-placeholder="t('message.list.startDate')"
:end-placeholder="t('message.list.endDate')"
@ -61,6 +59,7 @@
v-model="state.innerModelValue[val.prop]"
v-bind="val.comProps"
:clearable="!val.required"
filterable
:placeholder="val.placeholder"
v-else-if="val.type === 'select'"
@change="val.change"
@ -84,7 +83,7 @@
</el-form-item>
</template>
</el-col>
<el-col :xs="12" :sm="9" :md="9" :lg="6" :xl="4" class="mb20">
<el-col v-if="false" :xs="12" :sm="9" :md="9" :lg="6" :xl="4" class="mb20">
<el-form-item class="table-form-btn" label-width="auto">
<div>
<!-- 使用el-button-group会导致具有type属性的按钮的右边框无法显示 -->
@ -96,10 +95,23 @@
</el-form-item>
</el-col>
</el-row>
<el-divider style="margin-top: 5px" v-if="search.length > 3">
<!-- <el-divider style="margin-top: 5px" v-if="search.length > 3">
<el-button :icon="state.isToggle ? 'ele-ArrowUpBold' : 'ele-ArrowDownBold'" class="divider-btn" @click="state.isToggle = !state.isToggle"> </el-button>
</el-divider>
</el-divider> -->
</el-form>
<el-row>
<el-col>
<el-button v-if="search.length > 4" class="table-btn-toggle" type="primary" text bg @click="state.isToggle = !state.isToggle">
<SvgIcon :name="state.isToggle ? 'ele-ArrowUp' : 'ele-ArrowDown'" />
</el-button>
<div v-else style="width: 4px; display: inline-block" />
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="onSearch(tableSearchRef)"> {{ t('message.list.query') }} </el-button>
<el-button icon="ele-Refresh" @click="onReset(tableSearchRef)"> {{ t('message.list.reset') }} </el-button>
</el-button-group>
</el-col>
</el-row>
</div>
</template>
@ -224,4 +236,9 @@ const shortcuts = [
height: 20px;
border-radius: 10px;
}
.table-btn-toggle {
margin: 0 4px;
padding: 0 2px;
}
</style>

6
Web/src/views/system/reportConfig/component/reportView.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<TableSearch ref="tableSearch" :search="state.search" @search="onSearch" v-model="state.queryParams" />
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0 5px', height: '100%' }">
<TableSearch ref="tableSearch" :search="state.search" @search="onSearch" v-model="state.queryParams" />
</el-card>
<el-card class="full-table" shadow="hover" style="margin-top: 5px">
<vxe-grid ref="xGrid" v-bind="options" :loading="state.isLoading">
@ -139,8 +141,6 @@ const options = useVxeTable<any>(
pagerConfig: { enabled: false },
showFooter: false,
footerMethod: footerMethod,
// 布局调整，与标准的区别是，Top 放在顶部，标准是放在 Table 前面
layouts: ['Top', 'Form', 'Toolbar', 'Table', 'Bottom', 'Pager'],
}
);