1

src/components/MobileSearchForm/index.vue

@@ -0,0 +1,259 @@
+<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="true">
+        <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>
+