WXProgram/miniprogram/pages/staff/employee-management.wxml

<!-- 员工管理页面 - 新界面设计 -->
<view class="employee-management-container">
  <!-- 顶部导航栏 -->
  <view class="management-header">
    <view class="header-left">
      <!-- 微信风格返回按钮 -->
      <view class="back-icon" bindtap="goBack">
        <text class="back-arrow">‹</text>
      </view>
      <text class="header-title">员工管理</text>
    </view>
    <view class="header-right">
      <text class="employee-count">共{{filteredEmployees.length}}名员工</text>
    </view>
  </view>

  <!-- 页面标签 -->
  <view class="page-tabs">
    <view 
      class="tab-item {{currentTab === 'list' ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="list"
    >
      <text class="tab-text">员工列表</text>
    </view>
    <view 
      class="tab-item {{currentTab === 'add' ? 'active' : ''}}" 
      bindtap="switchTab" 
      data-tab="add"
    >
      <text class="tab-text">添加员工</text>
    </view>
  </view>

  <!-- 消息提示 -->
  <view class="message-container">
    <view wx:if="{{errorMessage}}" class="error-message">
      <text class="message-text">{{errorMessage}}</text>
      <text class="close-btn" bindtap="clearMessages">×</text>
    </view>
    <view wx:if="{{successMessage}}" class="success-message">
      <text class="message-text">{{successMessage}}</text>
      <text class="close-btn" bindtap="clearMessages">×</text>
    </view>
  </view>

  <!-- 加载状态 -->
  <view wx:if="{{loading}}" class="loading-container">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 员工列表页面 -->
  <view wx:if="{{currentTab === 'list'}}" class="list-container">
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-input-wrapper">
        <input 
          class="search-input" 
          placeholder="搜索员工姓名、手机号或角色"
          bindinput="onSearchInput"
          value="{{searchKeyword}}"
        />
        <text class="search-icon">🔎</text>
      </view>
    </view>

    <!-- 员工列表 -->
    <scroll-view class="employee-list" scroll-y>
      <view wx:for="{{filteredEmployees}}" wx:key="id" class="employee-item">
        <view class="employee-info">
          <view class="employee-avatar">
            <text class="avatar-text">{{item.name.charAt(0)}}</text>
          </view>
          <view class="employee-details">
            <view class="employee-name-row">
              <text class="employee-name">{{item.name}}</text>
              <text class="employee-role {{item.role === 'ADMIN' ? 'admin-role' : ''}}">
                <text class="role-icon">{{item.role === 'ADMIN' ? '👑' : '🚚'}}</text>
                {{getRoleText(item.role)}}
              </text>
            </view>
            <text class="employee-phone">{{item.phone}}</text>
            <text class="employee-id">ID: {{item.id}}</text>
          </view>
        </view>
        <view class="employee-actions">
          <button 
            class="delete-btn" 
            bindtap="deleteEmployee" 
            data-id="{{item.id}}"
            size="mini"
          >
            删除
          </button>
        </view>
      </view>

      <!-- 空状态 -->
      <view wx:if="{{filteredEmployees.length === 0}}" class="empty-state">
        <text class="empty-icon">👥</text>
        <text class="empty-text">
          {{searchKeyword ? '没有找到匹配的员工' : '暂无员工数据'}}
        </text>
        <text wx:if="{{!searchKeyword}}" class="empty-hint">点击"添加员工"开始管理</text>
      </view>
    </scroll-view>
  </view>

  <!-- 添加员工页面 -->
  <view wx:if="{{currentTab === 'add'}}" class="add-container">
    <view class="form-container">
      <view class="form-item">
        <text class="form-label">员工姓名</text>
        <input 
          class="form-input" 
          placeholder="请输入员工姓名"
          value="{{addForm.name}}"
          bindinput="onFormInput"
          data-field="name"
        />
      </view>

      <view class="form-item">
        <text class="form-label">手机号码</text>
        <input 
          class="form-input" 
          placeholder="请输入手机号码"
          type="number"
          value="{{addForm.phone}}"
          bindinput="onFormInput"
          data-field="phone"
        />
      </view>

      <view class="form-item">
        <text class="form-label">员工角色</text>
        <picker 
          class="form-picker"
          bindchange="onRoleChange"
          range="{{roleOptions}}"
          range-key="label"
        >
          <view class="picker-display">
            <text class="picker-text">
              {{addForm.role === 'ADMIN' ? '管理员' : addForm.role === 'DELIVERY_PERSON' ? '配送员' : '请选择角色'}}
            </text>
            <text class="picker-arrow">▼</text>
          </view>
        </picker>
      </view>

      <view class="form-hint">
        <text class="hint-text">
          提示：添加员工后，用户可以使用该员工的姓名和手机号进行注册
        </text>
      </view>

      <button 
        class="submit-btn" 
        bindtap="submitAddForm"
        disabled="{{loading}}"
      >
        {{loading ? '添加中...' : '添加员工'}}
      </button>
    </view>
  </view>
</view>