cmc-oa/oa-ui-app/pages/oa/staff/staffList.vue

<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <input class="search-input-field" v-model="queryParams.nickName" placeholder="请输入姓名搜索" @input="handleQuery"
          @confirm="handleQuery" />
      </view>
      <view class="filter-btn" @click="showFilter = true">
        <text class="filter-icon">筛选</text>
      </view>
    </view>

    <!-- 部门选择 -->
    <view class="dept-section" v-if="deptOptions.length > 0">
      <view class="dept-header">
        <text class="dept-title">部门</text>
        <text class="dept-name">{{ currentDeptName || '全部部门' }}</text>
      </view>
      <scroll-view class="dept-scroll" scroll-x>
        <view class="dept-list">
          <view class="dept-item" :class="{ active: !queryParams.deptId }" @click="selectDept(null, '全部部门')">
            全部
          </view>
          <view v-for="dept in deptOptions" :key="dept.id" class="dept-item"
            :class="{ active: queryParams.deptId === dept.id }" @click="selectDept(dept.id, dept.label)">
            {{ dept.label }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 状态选择 -->
    <view class="status-section">
      <view class="status-header">
        <text class="status-title">状态</text>
        <text class="status-name">{{ getStatusLabel(queryParams.status) || '在职' }}</text>
      </view>
      <scroll-view class="status-scroll" scroll-x>
        <view class="status-list">
          <view class="status-item" :class="{ active: queryParams.status === '0' }" @click="selectStatus('0')">
            在职
          </view>
          <view class="status-item" :class="{ active: queryParams.status === '1' }" @click="selectStatus('1')">
            离职
          </view>
          <view class="status-item" :class="{ active: queryParams.status === '2' }" @click="selectStatus('2')">
            退休
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 筛选弹窗 -->
    <view v-if="showFilter" class="filter-overlay" @click="showFilter = false">
      <view class="filter-popup" @click.stop>
        <view class="filter-header">
          <text class="filter-title">筛选条件</text>
          <view class="filter-close" @click="showFilter = false">
            <text>✕</text>
          </view>
        </view>
        <view class="filter-content">
          <view class="filter-item">
            <text class="filter-label">职称</text>
            <picker v-model="queryParams.titles" :range="titleOptions" range-key="label" @change="onTitleChange">
              <view class="picker-view">
                {{ getTitleLabel(queryParams.titles) || '请选择职称' }}
              </view>
            </picker>
          </view>
          <view class="filter-item">
            <text class="filter-label">状态</text>
            <picker v-model="queryParams.status" :range="statusOptions" range-key="label" @change="onStatusChange">
              <view class="picker-view">
                {{ getStatusLabel(queryParams.status) || '请选择状态' }}
              </view>
            </picker>
          </view>
        </view>
        <view class="filter-actions">
          <button class="btn-default" @click="resetQuery">重置</button>
          <button class="btn-primary" @click="applyFilter">确定</button>
        </view>
      </view>
    </view>

    <!-- 员工列表 -->
    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption" :fixed="false" :top="10" style="padding: 30rpx;">
      <view class="staff-list">
        <view v-for="(item, index) in staffList" :key="index" class="staff-card" @click="handleView(item)">
          <view class="staff-header">
            <view class="staff-avatar">
              <image class="avatar-image" :src="item.avatar || '/static/images/user.png'" mode="aspectFill" />
            </view>
            <view class="staff-info">
              <view class="staff-name">{{ item.nickName }}</view>
              <view class="staff-dept">{{ (item.dept && item.dept.deptName) || '未分配部门' }}</view>
              <view class="staff-status">
                <text class="status-tag" :class="'status-' + item.status">
                  {{ getStatusText(item.status) }}
                </text>
              </view>
            </view>
            <view class="staff-actions">
              <text class="arrow-icon">></text>
            </view>
          </view>

          <view class="staff-details">
            <view class="detail-item">
              <text class="detail-label">年龄：</text>
              <text class="detail-value">{{ String(getAgeByIdCard(item.idCard)).slice(0, 2) }}岁</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">性别：</text>
              <text class="detail-value">{{ item.sex == 0 ? '男' : '女' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">手机：</text>
              <text class="detail-value">{{ item.phonenumber || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">职称：</text>
              <text class="detail-value">{{ getTitleText(item.titles) || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">职务：</text>
              <text class="detail-value">{{ item.postNames || '未填写' }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">入职时间：</text>
              <text class="detail-value">{{ formatDate(item.entryDate) || '未填写' }}</text>
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/api/system/user";
import { deptTreeSelectNew } from "@/api/system/dept";
import MescrollMixin from '@/uni_modules/mescroll/components/mescroll-uni/mescroll-mixins.js';

export default {
  mixins: [MescrollMixin],
  data() {
    return {
      mescroll: null, // mescroll实例
      downOption: {
        auto: true,
        textOutOffset: '下拉刷新',
        textLoading: '加载中...'
      },
      upOption: {
        auto: false,
        page: { num: 1, size: 10 },
        noMoreSize: 5,
        empty: { tip: '暂无更多员工数据' },
        textNoMore: '~ 没有更多数据了 ~'
      },
      staffList: [],
      deptOptions: [],
      currentDeptName: '',
      showFilter: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: '',
        titles: '',
        certificates: '',
        degree: '',
        status: '0',
        deptId: undefined
      },
      // 筛选选项
      titleOptions: [
        { label: '高级工程师', value: '1' },
        { label: '工程师', value: '2' },
        { label: '助理工程师', value: '3' },
        { label: '技术员', value: '4' }
      ],
      certificateOptions: [
        { label: '注册测绘师', value: '1' },
        { label: '注册建筑师', value: '2' },
        { label: '注册结构师', value: '3' },
        { label: '注册造价师', value: '4' }
      ],
      degreeOptions: [
        { label: '博士', value: '1' },
        { label: '硕士', value: '2' },
        { label: '本科', value: '3' },
        { label: '专科', value: '4' },
        { label: '高中', value: '5' }
      ],
      statusOptions: [
        { label: '在职', value: '0' },
        { label: '离职', value: '1' },
        { label: '退休', value: '2' },
        { label: '试用', value: '3' },
        { label: '返聘', value: '4' }
      ]
    }
  },
  onLoad: function (options) {
    this.getDeptTree();
    uni.startPullDownRefresh();
  },

  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    // 获取部门树
    async getDeptTree() {
      try {
        const res = await deptTreeSelectNew();
        this.deptOptions = res.data[0].children || [];
      } catch (error) {
        console.error('获取部门树失败:', error);
      }
    },

    // 选择部门
    selectDept(deptId, deptName) {
      this.queryParams.deptId = deptId;
      this.currentDeptName = deptName;
      this.handleQuery();
    },

    // 选择状态
    selectStatus(status) {
      this.queryParams.status = status;
      this.handleQuery();
    },

    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.staffList = [];
      this.mescroll.resetUpScroll();
    },

    // 重置查询
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        nickName: '',
        titles: '',
        certificates: '',
        degree: '',
        status: '0', // 默认选中在职
        deptId: undefined
      };
      this.currentDeptName = '';
      this.showFilter = false;
      this.handleQuery();
    },

    // 应用筛选
    applyFilter() {
      this.showFilter = false;
      this.handleQuery();
    },

    // 处理职称选择变化
    onTitleChange(e) {
      const option = this.titleOptions[e.detail.value];
      this.queryParams.titles = option ? option.value : '';
    },

    // 处理状态选择变化
    onStatusChange(e) {
      const option = this.statusOptions[e.detail.value];
      this.queryParams.status = option ? option.value : '';
    },

    // 获取职称标签
    getTitleLabel(value) {
      const item = this.titleOptions.find(item => item.value === value);
      return item ? item.label : '';
    },

    // 获取状态标签
    getStatusLabel(value) {
      const item = this.statusOptions.find(item => item.value === value);
      return item ? item.label : '';
    },

    // 加载数据
    async loadData() {
      try {
        const res = await listUser(this.queryParams);
        return { data: res.rows, total: res.total };
      } catch (e) {
        console.error('加载员工数据失败:', e);
        return { data: [], error: true };
      }
    },

    // mescroll下拉刷新回调
    async downCallback() {
      this.staffList = []; // 清空列表
      this.queryParams.pageNum = 1;
      const res = await this.loadData();
      if (res.error) {
        this.mescroll.endErr();
      } else {
        this.staffList = res.data;
        this.mescroll.endSuccess(res.data.length, res.total);
      }
      uni.stopPullDownRefresh();
    },

    // mescroll上拉加载回调
    async upCallback(page) {
      this.queryParams.pageNum = page.num;
      const res = await this.loadData();
      if (res.error) {
        this.mescroll.endErr();
      } else {
        this.staffList = this.staffList.concat(res.data);
        this.mescroll.endSuccess(res.data.length, res.total);
      }
    },

    // 查看员工详情
    handleView(item) {
      uni.navigateTo({
        url: `/pages/oa/staff/staffDetail?userId=${item.userId}&nickName=${item.nickName}`
      });
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '0': '在职',
        '1': '离职',
        '2': '退休',
        '3': '试用',
        '4': '返聘'
      };
      return statusMap[status] || '未知';
    },

    // 获取状态类型
    getStatusType(status) {
      const typeMap = {
        '0': 'success',
        '1': 'error',
        '2': 'warning',
        '3': 'primary',
        '4': 'info'
      };
      return typeMap[status] || 'default';
    },

    // 获取职称文本
    getTitleText(titles) {
      const titleMap = {
        '1': '高级工程师',
        '2': '工程师',
        '3': '助理工程师',
        '4': '技术员'
      };
      return titleMap[titles] || '';
    },

    // 根据身份证计算年龄
    getAgeByIdCard(idCard) {
      if (!idCard) return 0;
      const birthStr = idCard.substring(6, 14);
      const birthYear = parseInt(birthStr.substring(0, 4), 10);
      const birthMonth = parseInt(birthStr.substring(4, 6), 10) - 1;
      const birthDay = parseInt(birthStr.substring(6, 8), 10);
      const birthDate = new Date(birthYear, birthMonth, birthDay);
      const now = new Date();
      let age = now.getFullYear() - birthDate.getFullYear();
      const monthDiff = now.getMonth() - birthDate.getMonth();
      if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < birthDate.getDate())) {
        age--;
      }
      return age;
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10rpx;
  background-color: #f5f5f5;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;

  .search-input {
    flex: 1;
    margin-right: 20rpx;

    .search-input-field {
      width: 100%;
      height: 60rpx;
      padding: 0 20rpx;
      border: 1rpx solid #ddd;
      border-radius: 30rpx;
      font-size: 28rpx;
    }
  }

  .filter-btn {
    padding: 10rpx 20rpx;
    background-color: #f5f5f5;
    border-radius: 20rpx;

    .filter-icon {
      font-size: 26rpx;
      color: #666;
    }
  }
}

.dept-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;

  .dept-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .dept-title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .dept-name {
      font-size: 24rpx;
      color: #666;
    }
  }

  .dept-scroll {
    white-space: nowrap;

    .dept-list {
      display: flex;

      .dept-item {
        display: inline-block;
        padding: 10rpx 20rpx;
        margin-right: 20rpx;
        background-color: #f5f5f5;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #666;
        white-space: nowrap;

        &.active {
          background-color: #007aff;
          color: #fff;
        }
      }
    }
  }
}

.status-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;

  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .status-title {
      font-size: 28rpx;
      color: #333;
      font-weight: bold;
    }

    .status-name {
      font-size: 24rpx;
      color: #666;
    }
  }

  .status-scroll {
    white-space: nowrap;

    .status-list {
      display: flex;

      .status-item {
        display: inline-block;
        padding: 10rpx 20rpx;
        margin-right: 20rpx;
        background-color: #f5f5f5;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #666;
        white-space: nowrap;

        &.active {
          background-color: #007aff;
          color: #fff;
        }
      }
    }
  }
}

.filter-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
}

.filter-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx;
  width: 100%;
  max-height: 80vh;

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .filter-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .filter-close {
      padding: 10rpx;

      text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }

  .filter-content {
    .filter-item {
      margin-bottom: 30rpx;

      .filter-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 10rpx;
      }

      picker {
        .picker-view {
          padding: 20rpx;
          background-color: #f5f5f5;
          border-radius: 10rpx;
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }

  .filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;
    gap: 20rpx;

    button {
      flex: 1;
      height: 80rpx;
      border-radius: 10rpx;
      font-size: 28rpx;
      border: none;

      &.btn-default {
        background-color: #f5f5f5;
        color: #666;
      }

      &.btn-primary {
        background-color: #007aff;
        color: #fff;
      }
    }
  }
}

.staff-list {
  .staff-card {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

    .staff-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .staff-avatar {
        margin-right: 20rpx;

        .avatar-image {
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }
      }

      .staff-info {
        flex: 1;

        .staff-name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 10rpx;
        }

        .staff-dept {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 10rpx;
        }

        .staff-status {
          display: inline-block;

          .status-tag {
            padding: 4rpx 12rpx;
            border-radius: 10rpx;
            font-size: 20rpx;

            &.status-0 {
              background-color: #e6f7ff;
              color: #1890ff;
            }

            &.status-1 {
              background-color: #fff2e8;
              color: #fa8c16;
            }

            &.status-2 {
              background-color: #f6ffed;
              color: #52c41a;
            }

            &.status-3 {
              background-color: #f9f0ff;
              color: #722ed1;
            }

            &.status-4 {
              background-color: #f0f0f0;
              color: #8c8c8c;
            }
          }
        }
      }

      .staff-actions {
        padding: 10rpx;

        .arrow-icon {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .staff-details {
      .detail-item {
        display: flex;
        margin-bottom: 15rpx;

        .detail-label {
          width: 140rpx;
          font-size: 26rpx;
          color: #999;
        }

        .detail-value {
          flex: 1;
          font-size: 26rpx;
          color: #333;
        }
      }
    }
  }
}
</style>