ruoyi-vue/src/components/MobileSearchForm/index.vue

<template>
  <div class="mobile-search-form" :class="{ 'expanded': expanded }">
    <!-- 移动端折叠搜索 -->
    <div v-if="isMobile" class="mobile-search-wrapper">
      <!-- 搜索按钮栏 -->
      <div class="search-bar" v-if="!expanded">
        <el-input
          v-model="quickSearch"
          placeholder="快速搜索..."
          clearable
          @keyup.enter.native="handleQuickSearch"
          @clear="handleQuickSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleQuickSearch"></el-button>
        </el-input>
        <el-button 
          type="text" 
          icon="el-icon-setting" 
          class="filter-btn"
          @click="expanded = true"
        >
          筛选
        </el-button>
      </div>
      
      <!-- 展开的搜索表单 -->
      <div class="expanded-form" v-if="expanded">
        <div class="form-header">
          <span class="form-title">筛选条件</span>
          <el-button 
            type="text" 
            icon="el-icon-close" 
            @click="expanded = false"
            class="close-btn"
          ></el-button>
        </div>
        
        <div class="form-content">
          <slot name="form" :expanded="expanded">
            <el-form 
              :model="formData" 
              label-width="80px"
              label-position="top"
            >
              <slot></slot>
            </el-form>
          </slot>
        </div>
        
        <div class="form-footer">
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
    </div>
    
    <!-- 桌面端正常显示 -->
    <div v-else class="desktop-search-wrapper">
      <slot name="form" :expanded="false">
        <el-form 
          :model="formData" 
          :inline="inline"
          :label-width="labelWidth"
        >
          <slot></slot>
        </el-form>
      </slot>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'MobileSearchForm',
  props: {
    inline: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: '68px'
    },
    model: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      expanded: false,
      quickSearch: '',
      formData: {}
    }
  },
  computed: {
    ...mapGetters(['device']),
    isMobile() {
      return this.device === 'mobile' || window.innerWidth < 768
    }
  },
  watch: {
    model: {
      immediate: true,
      deep: true,
      handler(val) {
        this.formData = { ...val }
      }
    }
  },
  methods: {
    handleQuickSearch() {
      this.$emit('quick-search', this.quickSearch)
    },
    handleSearch() {
      this.$emit('search', this.formData)
      this.expanded = false
    },
    handleReset() {
      this.$emit('reset')
      this.formData = {}
      this.quickSearch = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.mobile-search-form {
  width: 100%;
}

.mobile-search-wrapper {
  .search-bar {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border-bottom: 1px solid #e4e7ed;
    
    .el-input {
      flex: 1;
    }
    
    .filter-btn {
      flex-shrink: 0;
      padding: 0 12px;
      font-size: 14px;
      min-width: 60px;
    }
  }
  
  .expanded-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    
    .form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #e4e7ed;
      background: #fff;
      
      .form-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
      
      .close-btn {
        font-size: 20px;
        color: #909399;
      }
    }
    
    .form-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      -webkit-overflow-scrolling: touch;
      
      ::v-deep .el-form-item {
        margin-bottom: 20px;
        
        .el-form-item__label {
          font-size: 14px;
          color: #606266;
          padding-bottom: 8px;
        }
        
        .el-input,
        .el-select,
        .el-date-picker {
          width: 100%;
        }
      }
    }
    
    .form-footer {
      display: flex;
      gap: 12px;
      padding: 16px;
      border-top: 1px solid #e4e7ed;
      background: #fff;
      
      .el-button {
        flex: 1;
        height: 44px;
        font-size: 16px;
      }
    }
  }
}

.desktop-search-wrapper {
  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 18px;
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 桌面端隐藏移动端组件
@media (min-width: 769px) {
  .mobile-search-wrapper {
    display: none;
  }
}

// 移动端隐藏桌面端组件
@media (max-width: 768px) {
  .desktop-search-wrapper {
    display: none;
  }
}
</style>