feat: 回滚 search.vue 变更

This commit is contained in:
写意 2025-07-08 14:21:22 +08:00
parent 6398193780
commit 6fea5d5a92

View File

@ -1,10 +1,9 @@
<template> <template>
<div class="table-search-container" v-if="props.search.length > 0"> <div class="table-search-container" v-if="props.search.length > 0">
<el-card shadow="hover" :body-style="{ padding: '5px 5px 0px 5px', display: 'flex', width: '100%', height: '100%', alignItems: 'start' }"> <el-form ref="tableSearchRef" :model="state.innerModelValue" label-width="100px" class="table-form">
<el-form ref="tableSearchRef" :model="state.innerModelValue" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%"> <el-row :gutter="20">
<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="8" :md="8" :lg="6" :xl="4" class="mb5"></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="12" :sm="5" :md="5" :lg="6" :xl="4" class="mb5" v-for="(val, key) in search" :key="key" v-show="key < 3 || state.isToggle">
<template v-if="val.type"> <template v-if="val.type">
<el-form-item <el-form-item
label-width="auto" label-width="auto"
@ -85,13 +84,14 @@
</el-form-item> </el-form-item>
</template> </template>
</el-col> </el-col>
<el-col :xs="12" :sm="9" :md="9" :lg="6" :xl="4" class="mb5"> <el-col :xs="12" :sm="9" :md="9" :lg="6" :xl="4" class="mb20">
<el-form-item class="table-form-btn" label-width="auto"> <el-form-item class="table-form-btn" label-width="auto">
<div> <div>
<el-button-group> <!-- 使用el-button-group会导致具有type属性的按钮的右边框无法显示 -->
<el-button type="primary" icon="ele-Search" @click="onSearch(tableSearchRef)"> {{ t('message.list.query') }} </el-button> <!-- <el-button-group> -->
<el-button icon="ele-Refresh" @click="onReset(tableSearchRef)"> {{ t('message.list.reset') }} </el-button> <el-button plain type="primary" icon="ele-Search" @click="onSearch(tableSearchRef)"> {{ t('message.list.query') }} </el-button>
</el-button-group> <el-button icon="ele-Refresh" @click="onReset(tableSearchRef)" style="margin-left: 12px"> {{ t('message.list.reset') }} </el-button>
<!-- </el-button-group> -->
</div> </div>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -100,7 +100,6 @@
<el-button :icon="state.isToggle ? 'ele-ArrowUpBold' : 'ele-ArrowDownBold'" class="divider-btn" @click="state.isToggle = !state.isToggle"> </el-button> <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-form>
</el-card>
</div> </div>
</template> </template>
@ -206,19 +205,19 @@ const shortcuts = [
<style scoped lang="scss"> <style scoped lang="scss">
.table-search-container { .table-search-container {
// display: flex; display: flex;
// .table-form { .table-form {
// flex: 1; flex: 1;
// .table-form-btn-toggle { .table-form-btn-toggle {
// white-space: nowrap; white-space: nowrap;
// user-select: none; user-select: none;
// display: flex; display: flex;
// align-items: center; align-items: center;
// color: var(--el-color-primary); color: var(--el-color-primary);
// } }
// } }
} }
.divider-btn { .divider-btn {