fixed: 修改搜索栏位数量较多时按钮展示问题

common/vue/project/vue3-vite-ts-template/src/assets/css/element.scss

@@ -418,7 +418,7 @@ html, body{
    }
  }
  .page-container {
    height: calc(100vh - 190px);
    height: calc(100vh - 160px);
    // height: 100%;
  }
  .page-show-container{
@@ -492,7 +492,7 @@ html, body{
    width: 100%;
    text-align: right;
    // margin-top: 18px;
    padding-right: 20px;
    // padding-right: 20px;
    box-sizing: border-box;
  }
}
@@ -503,13 +503,14 @@ html, body{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  .content {
  .aiot-page-content {
    background: #fff;
    padding: 10px 16px 4px 16px;
    margin-top: 12px;
    flex-grow: 1;
    padding: 12px 16px 4px 16px;
    flex: 1;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    .aiot-content-btns {
@@ -530,6 +531,7 @@ html, body{
    height: 40px;
  }
}
.aiot-page-pannel::-webkit-scrollbar { width: 0 !important }
.aiot-form-el{
  display: block;

common/vue/project/vue3-vite-ts-template/src/assets/icons/common/down.svg

@@ -1,4 +1,4 @@
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 4L4.88119 8L9 4" stroke="#455A74"/>
<path d="M1 1L4.88119 5L9 1" stroke="#455A74"/>
<path d="M1 4L4.88119 8L9 4" stroke="currentColor"/>
<path d="M1 1L4.88119 5L9 1" stroke="currentColor"/>
</svg>

common/vue/project/vue3-vite-ts-template/src/assets/icons/common/up.svg

@@ -1,4 +1,4 @@
<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 5L4.88119 1L9 5" stroke="#455A74"/>
<path d="M1 8L4.88119 4L9 8" stroke="#455A74"/>
<path d="M1 5L4.88119 1L9 5" stroke="currentColor"/>
<path d="M1 8L4.88119 4L9 8" stroke="currentColor"/>
</svg>

common/vue/project/vue3-vite-ts-template/src/components/form/AiotForm.vue

@@ -2,7 +2,7 @@
 * @Author: Devin
 * @Date: 2022-11-15 11:23:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-01-02 21:31:55
 * @LastEditTime: 2023-01-11 14:34:53
 * @Description: ts工程开发
-->
<template>
@@ -24,26 +24,53 @@
        <el-col></el-col>
      </el-row>
    </template>
    <!--
      1. 搜索项 forms.length < 4, 展示搜索和重置按钮
      2. 搜索项forms.length >= 4, 按钮展示更多，并首行只展示3个搜索项，其余收起；
    -->
    <!-- search -->
    <template v-else>
      <el-row :gutter="20">
        <el-col
          v-for="formItem in forms"
          :key="formItem['name']"
          :span="formItem['col']"
        >
          <form-item
            :form-item="formItem"
            @change-event="changeEvent"
            @input-event="inputEvent"
          ></form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item class="form-last-btns">
            <slot name="btns"></slot>
          </el-form-item>
        </el-col>
        <template v-if="showSearch">
          <el-col
            v-for="formItem in forms"
            :key="formItem['name']"
            :span="formItem['col']"
          >
            <form-item
              :form-item="formItem"
              @change-event="changeEvent"
              @input-event="inputEvent"
            ></form-item>
          </el-col>
          <el-col :span="6" class="form-last-btn-col">
            <el-form-item class="form-last-btns">
              <slot name="btns"></slot>
            </el-form-item>
          </el-col>
        </template>
        <template v-else>
          <!-- 收起 -->
          <el-col
            v-for="formItem in forms.slice(0, 3)"
            :key="formItem['name']"
            :span="formItem['col']"
          >
            <form-item
              :form-item="formItem"
              @change-event="changeEvent"
              @input-event="inputEvent"
            ></form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="form-last-btns">
              <slot name="btns"></slot>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </template>
  </el-form>
@@ -62,6 +89,11 @@ defineProps({
  formType: {
    type: String,
    default: () => 'form'
  },
  // 是否隐藏筛选项
  showSearch: {
    type: Boolean,
    default: () => false
  }
});
const emits = defineEmits(['changeEvent', 'blurEvent']);
@@ -111,4 +143,7 @@ defineExpose({
  width: calc(100% - 24px);
  margin-top: 18px;
}
.form-last-btn-col {
  margin-left: auto;
}
</style>

common/vue/project/vue3-vite-ts-template/src/components/panel/PagePanel.vue

@@ -2,7 +2,7 @@
 * @Author: Devin
 * @Date: 2022-11-24 17:05:58
 * @LastEditors: Devin
 * @LastEditTime: 2023-01-02 22:14:51
 * @LastEditTime: 2023-01-11 14:46:20
 * @Description: 列表页面公共模板
-->
<template>
@@ -18,7 +18,7 @@
        <slot></slot>
      </aiot-search>
    </div>
    <div class="content">
    <div class="aiot-page-content">
      <div v-if="btnList?.length" class="aiot-content-btns">
        <el-button
          v-for="btn in btnList"
@@ -178,32 +178,4 @@ function changeEvent(form: any) {
.table-btn-icon {
  margin: -2px 5px 0 0;
}
// .aiot-page-pannel {
//   height: 100%;
//   display: flex;
//   flex-direction: column;
//   overflow-y: auto;
//   .content {
//     background: #fff;
//     padding: 10px 16px;
//     margin-top: 16px;
//     flex-grow: 1;
//     display: flex;
//     flex-direction: column;
//     .aiot-content-btns {
//       height: 36px;
//     }
//   }
//   .search {
//     padding: 0px 16px;
//     background: #fff;
//   }
//   .table {
//     margin: 10px 0 4px 0;
//   }
//   .footer {
//     height: 40px;
//   }
// }
</style>

common/vue/project/vue3-vite-ts-template/src/components/search/AiotSearch.vue

@@ -6,6 +6,7 @@
      :model="formValues"
      :forms="searchParams"
      :form-type="'search'"
      :show-search="showSearch"
      @change-event="changeEvent"
      @blur-event="blurEvent"
    >
@@ -13,6 +14,17 @@
        <div class="aiot-search-btns">
          <el-button type="primary" @click.stop="doSearch">查询</el-button>
          <el-button @click.stop="clearSearch">重置</el-button>
          <el-button
            v-show="searchParams.length > 3"
            @click.stop="() => (showSearch = !showSearch)"
          >
            {{ showSearch ? '收起' : '展开' }}
            <svg-icon
              class="icon"
              :size="12"
              :name="showSearch ? 'common-up' : 'common-down'"
            ></svg-icon>
          </el-button>
        </div>
      </template>
    </aiot-form>
@@ -20,9 +32,11 @@
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { watch, ref } from 'vue';
import AiotForm from '../form/AiotForm.vue';
// 是否展开筛选项
const showSearch = ref<any>(false);
const emits = defineEmits([
  'doSearch',
  'clearSearch',
@@ -180,8 +194,11 @@ doSearch();
    width: 100%;
    text-align: right;
    // margin-top: 18px;
    padding-right: 20px;
    // padding-right: 20px;
    box-sizing: border-box;
    .icon {
      margin-left: 5px;
    }
  }
}
</style>

common/vue/project/vue3-vite-ts-template/src/views/Home.vue

@@ -2,13 +2,28 @@
 * @Author: Devin
 * @Date: 2023-01-10 16:28:32
 * @LastEditors: Devin
 * @LastEditTime: 2023-01-10 16:28:36
 * @LastEditTime: 2023-01-10 18:02:35
 * @Description: 
-->
<template>
  <div class="home">我是主体部分</div>
  <div class="home">
    我是主体部分
    <div class="svg">
      <img src="../assets/icons/common/add-item.svg" class="svg-color" alt="" />
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped></style>
<style scoped lang="scss">
.svg {
  width: 30px;
  height: 30px;
  overflow: hidden;
}
.svg-color {
  transform: translateX(30px);
  filter: drop-shadow(#ff0000 -30px 0px 0px);
}
</style>

common/vue/project/vue3-vite-ts-template/src/views/_config.ts

@@ -2,7 +2,7 @@
 * @Author: Devin
 * @Date: 2023-01-10 16:34:50
 * @LastEditors: Devin
 * @LastEditTime: 2023-01-10 16:41:07
 * @LastEditTime: 2023-01-11 09:55:33
 * @Description: 页面配置文件
 */
import { ref } from 'vue';
@@ -21,10 +21,54 @@ export const searchConfig = ref<any>({
        }
      },
      {
        col: 6
        label: '名称1',
        name: 'name1',
        type: 'input',
        value: '',
        col: 6,
        attrs: {
          clearable: true
        }
      },
      {
        label: '名称2',
        name: 'name2',
        type: 'input',
        value: '',
        col: 6,
        attrs: {
          clearable: true
        }
      },
      {
        label: '名称3',
        name: 'name3',
        type: 'input',
        value: '',
        col: 6,
        attrs: {
          clearable: true
        }
      },
      {
        label: '名称4',
        name: 'name4',
        type: 'input',
        value: '',
        col: 6,
        attrs: {
          clearable: true
        }
      },
      {
        col: 6
        label: '名称5',
        name: 'name5',
        type: 'input',
        value: '',
        col: 6,
        attrs: {
          clearable: true
        }
      }
    ],