Method Demonstration

Demonstrates the usage of all exposed methods, including real-time status tracking and operation log recording, helping developers deeply understand the component's programming interface and advanced usage.

Method Demonstration

Exposed Methods Details

Form Data Management

Operate and retrieve search form data:

typescript

// Set search form data
const setFormData = () => {
  const newData = {
    username: 'admin',
    status: 'active',
    created_at: '2024-01-01'
  }
  searchRef.value?.setSearchForm(newData)
}

// Get current search form data
const getFormData = () => {
  const formData = searchRef.value?.getSearchForm()
  console.log('Current form data:', formData)
  return formData
}

// Clear form data
const clearFormData = () => {
  searchRef.value?.setSearchForm({})
}

Fold State Control

Manage search panel collapse and expand states:

typescript

// Toggle fold state
const toggleFold = () => {
  searchRef.value?.foldToggle()
}

// Get current fold state
const getCurrentFoldState = () => {
  const isFold = searchRef.value?.getFold()
  console.log('Current fold state:', isFold ? 'Collapsed' : 'Expanded')
  return isFold
}

// Programmatically set fold state
const setFoldState = (fold: boolean) => {
  const currentState = searchRef.value?.getFold()
  if (currentState !== fold) {
    searchRef.value?.foldToggle()
  }
}

Display State Management

Control the visibility of the entire search component:

typescript

// Set display state
const setVisibility = (visible: boolean) => {
  searchRef.value?.setShowState(visible)
}

// Get current display state
const getVisibility = () => {
  const isVisible = searchRef.value?.getShowState()
  console.log('Component display state:', isVisible ? 'Visible' : 'Hidden')
  return isVisible
}

// Toggle display state
const toggleVisibility = () => {
  const currentState = searchRef.value?.getShowState()
  searchRef.value?.setShowState(!currentState)
}

Dynamic Configuration Management

Dynamically modify various configuration options of the component:

typescript

// Dynamically set search options
const updateSearchOptions = () => {
  const newOptions = {
    cols: { xs: 1, sm: 2, md: 3, lg: 4 },
    fold: true,
    foldRows: 3,
    text: {
      searchBtn: 'Search Now',
      resetBtn: 'Reset Conditions'
    }
  }
  searchRef.value?.setOptions(newOptions)
}

// Dynamically set form options
const updateFormOptions = () => {
  const formOptions = {
    labelWidth: '120px',
    labelPosition: 'right',
    size: 'large'
  }
  searchRef.value?.setFormOptions(formOptions)
}

// Get current configuration
const getCurrentConfig = () => {
  const searchOptions = searchRef.value?.getOptions()
  const formOptions = searchRef.value?.getFormOptions()
  
  console.log('Search component options:', searchOptions)
  console.log('Form component options:', formOptions)
  
  return { searchOptions, formOptions }
}

Dynamic Search Item Management

Modify search item configuration at runtime:

typescript

// Batch set search items
const setBatchItems = () => {
  const newItems = [
    { label: 'User ID', prop: 'user_id', render: 'input-number' },
    { label: 'Username', prop: 'username', render: 'input' },
    { label: 'Email', prop: 'email', render: 'input' },
    { label: 'Status', prop: 'status', render: 'select', options: statusOptions }
  ]
  searchRef.value?.setItems(newItems)
}

// Append a single search item
const appendSingleItem = () => {
  const newItem = {
    label: 'Registration Date',
    prop: 'created_at',
    render: 'date-picker',
    props: {
      type: 'daterange',
      format: 'YYYY-MM-DD'
    }
  }
  searchRef.value?.appendItem(newItem)
}

// Remove a specific search item
const removeSpecificItem = (prop: string) => {
  searchRef.value?.removeItem(prop)
}

// Find a specific search item
const findItemByProp = (prop: string) => {
  const item = searchRef.value?.getItemByProp(prop)
  if (item) {
    console.log(`Found search item:`, item)
  } else {
    console.log(`Search item with prop "${prop}" not found`)
  }
  return item
}

// Get all search items
const getAllItems = () => {
  const items = searchRef.value?.getItems()
  console.log('All search items:', items)
  return items
}

Form Reference Retrieval

Obtain the internal ma-form component reference for low-level operations:

typescript

// Get form reference
const getFormRef = () => {
  const formRef = searchRef.value?.getMaFormRef()
  if (formRef) {
    console.log('Form reference obtained:', formRef)
    return formRef
  }
}

// Validate through form reference
const validateViaFormRef = async () => {
  const formRef = searchRef.value?.getMaFormRef()
  if (formRef) {
    try {
      await formRef.validate()
      console.log('Form validation passed')
      return true
    } catch (error) {
      console.log('Form validation failed:', error)
      return false
    }
  }
}

// Reset form through reference
const resetViaFormRef = () => {
  const formRef = searchRef.value?.getMaFormRef()
  if (formRef) {
    formRef.resetFields()
    console.log('Form has been reset')
  }
}

Use Cases

1. Search Condition Presets

Preset different search conditions based on business scenarios:

typescript

// Preset search scenarios
const presetScenarios = {
  today: () => {
    searchRef.value?.setSearchForm({
      created_at: [
        dayjs().format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD')
      ]
    })
  },
  
  thisWeek: () => {
    searchRef.value?.setSearchForm({
      created_at: [
        dayjs().startOf('week').format('YYYY-MM-DD'),
        dayjs().endOf('week').format('YYYY-MM-DD')
      ]
    })
  },
  
  activeUsers: () => {
    searchRef.value?.setSearchForm({
      status: 'active',
      last_login: [
        dayjs().subtract(30, 'day').format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD')
      ]
    })
  }
}

// Apply preset scenario
const applyPreset = (scenario: keyof typeof presetScenarios) => {
  presetScenarios[scenario]()
}

2. Permission Control

Dynamically adjust search functionality based on user permissions:

typescript

// Permission control for search items
const applyPermissionControl = (userRole: string) => {
  const baseItems = [
    { label: 'Username', prop: 'username', render: 'input' },
    { label: 'Status', prop: 'status', render: 'select', options: statusOptions }
  ]
  
  // Admin can see more search items
  if (userRole === 'admin') {
    baseItems.push(
      { label: 'Creator', prop: 'creator', render: 'select', options: userOptions },
      { label: 'Internal ID', prop: 'internal_id', render: 'input-number' }
    )
  }
  
  searchRef.value?.setItems(baseItems)
}

// Permission control for display state
const applyVisibilityControl = (userRole: string) => {
  // Guest users hide search functionality
  if (userRole === 'guest') {
    searchRef.value?.setShowState(false)
  } else {
    searchRef.value?.setShowState(true)
  }
}

3. Responsive Configuration Adjustment

Dynamically adjust configuration based on device type and screen size:

typescript

// Responsive configuration adjustment
const adjustForDevice = () => {
  const isMobile = window.innerWidth < 768
  const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024
  
  let newOptions = {}
  
  if (isMobile) {
    newOptions = {
      cols: { xs: 1, sm: 1, md: 1, lg: 1, xl: 1 },
      fold: true,
      foldRows: 1
    }
  } else if (isTablet) {
    newOptions = {
      cols: { xs: 1, sm: 2, md: 2, lg: 2, xl: 2 },
      fold: true,
      foldRows: 2
    }
  } else {
    newOptions = {
      cols: { xs: 2, sm: 3, md: 4, lg: 4, xl: 5 },
      fold: false,
      foldRows: 3
    }
  }
  
  searchRef.value?.setOptions(newOptions)
}

// Listen for window resize
onMounted(() => {
  window.addEventListener('resize', adjustForDevice)
  adjustForDevice() // Initial adjustment
})

onUnmounted(() => {
  window.removeEventListener('resize', adjustForDevice)
})

Key Features

🔧 Complete programming interface
📊 Real-time status tracking
🎯 Flexible configuration management
⚡ High-performance method calls
🛠 Powerful extensibility
📝 Detailed operation logs

Advanced Usage Examples

Search Template System

Create search templates that can be saved and loaded:

typescript

// Search template manager
class SearchTemplateManager {
  private templates = new Map()
  
  // Save current search configuration as a template
  saveTemplate(name: string, searchRef: any) {
    const template = {
      formData: searchRef.getSearchForm(),
      items: searchRef.getItems(),
      options: searchRef.getOptions()
    }
    this.templates.set(name, template)
    
    // Persist to local storage
    localStorage.setItem('searchTemplates', JSON.stringify(Array.from(this.templates)))
  }
  
  // Load search template
  loadTemplate(name: string, searchRef: any) {
    const template = this.templates.get(name)
    if (template) {
      searchRef.setItems(template.items)
      searchRef.setOptions(template.options)
      searchRef.setSearchForm(template.formData)
      return true
    }
    return false
  }
  
  // Restore templates from local storage
  loadFromStorage() {
    const stored = localStorage.getItem('searchTemplates')
    if (stored) {
      const templates = JSON.parse(stored)
      this.templates = new Map(templates)
    }
  }
}

Search State Monitoring

Monitor various state changes of the search component:

typescript

// State monitor
class SearchStateMonitor {
  private logs: any[] = []
  
  // Monitor method calls
  monitorMethod(methodName: string, args: any[], result: any) {
    const log = {
      timestamp: new Date(),
      method: methodName,
      arguments: args,
      result: result,
      type: 'method_call'
    }
    this.logs.push(log)
    console.log('Method call:', log)
  }
  
  // Monitor state changes
  monitorStateChange(stateName: string, oldValue: any, newValue: any) {
    const log = {
      timestamp: new Date(),
      state: stateName,
      oldValue: oldValue,
      newValue: newValue,
      type: 'state_change'
    }
    this.logs.push(log)
    console.log('State change:', log)
  }
  
  // Get monitoring logs
  getLogs(type?: string) {
    if (type) {
      return this.logs.filter(log => log.type === type)
    }
    return [...this.logs]
  }
  
  // Clear logs
  clearLogs() {
    this.logs = []
  }
}

Best Practices

1. Error Handling for Method Calls

typescript

const safeMethodCall = async (methodName: string, ...args: any[]) => {
  try {
    const method = searchRef.value?.[methodName]
    if (typeof method === 'function') {
      return await method.apply(searchRef.value, args)
    } else {
      throw new Error(`Method ${methodName} does not exist`)
    }
  } catch (error) {
    console.error(`Calling method ${methodName} failed:`, error)
    // Can add user-friendly error prompts
    ElMessage.error(`Operation failed: ${error.message}`)
    return null
  }
}

2. Batch Operation Optimization

typescript

const batchOperations = (operations: Array<() => void>) => {
  // Pause reactive updates
  const pauseReactivity = () => {
    // Implement pause logic
  }
  
  const resumeReactivity = () => {
    // Implement resume logic
  }
  
  try {
    pauseReactivity()
    operations.forEach(operation => operation())
  } finally {
    resumeReactivity()
  }
}

3. State Synchronization

typescript

const syncWithExternalState = (externalState: any) => {
  // Sync form data
  if (externalState.formData) {
    searchRef.value?.setSearchForm(externalState.formData)
  }
  
  // Sync configuration options
  if (externalState.options) {
    searchRef.value?.setOptions(externalState.options)
  }
  
  // Sync search items
  if (externalState.items) {
    searchRef.value?.setItems(externalState.items)
  }
}

Dynamic Management - Learn about dynamic management of search items
Custom Actions - Learn about implementing custom action buttons
Form Validation - Learn about form validation through methods

MaTable Table Component

MaSearch Search Component

MaProTable Advanced Table

Method Demonstration