OfficeSystem/pages/project/list/index.vue

<template>
  <view class="project-list-page">
    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">客户</text>
          <input 
            class="filter-input" 
            v-model="filterParams.customerName" 
            placeholder="请输入客户名称"
            @confirm="handleSearch"
          />
        </view>
        <view class="filter-item">
          <text class="filter-label">项目编号</text>
          <input 
            class="filter-input" 
            v-model="filterParams.projectId" 
            placeholder="请输入项目编号"
            @confirm="handleSearch"
          />
        </view>
      </view>
      <view class="filter-row">
        <view class="filter-item">
          <text class="filter-label">项目名称</text>
          <input 
            class="filter-input" 
            v-model="filterParams.projectName" 
            placeholder="请输入项目名称"
            @confirm="handleSearch"
          />
        </view>
        <view class="filter-item">
          <text class="filter-label">成员</text>
          <picker 
            mode="selector" 
            :range="memberOptions" 
            range-key="nickName"
            @change="handleMemberChange"
          >
            <view class="filter-picker">
              <text class="picker-text">{{ selectedMemberName || '请选择用户' }}</text>
              <text class="picker-arrow">▼</text>
            </view>
          </picker>
        </view>
      </view>
      
      <!-- 开发超期筛选 -->
      <view class="filter-row">
        <text class="filter-label">开发超期</text>
        <view class="radio-group">
          <view 
            class="radio-item" 
            :class="{ active: filterParams.overdue === '' }"
            @click="filterParams.overdue = ''; handleSearch()"
          >
            <text>全部</text>
          </view>
          <view 
            class="radio-item" 
            :class="{ active: filterParams.overdue === true }"
            @click="filterParams.overdue = true; handleSearch()"
          >
            <text>是</text>
          </view>
          <view 
            class="radio-item" 
            :class="{ active: filterParams.overdue === false }"
            @click="filterParams.overdue = false; handleSearch()"
          >
            <text>否</text>
          </view>
        </view>
      </view>
      
      <!-- 状态标签 -->
      <view class="status-tabs">
        <view 
          class="status-tab" 
          v-for="tab in statusTabs" 
          :key="tab.value"
          :class="{ active: activeStatusTab === tab.value }"
          @click="handleStatusTabClick(tab.value)"
        >
          <text>{{ tab.label }}</text>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <uv-button type="primary" size="small" @click="handleSearch">
          <text class="btn-icon">🔍</text>
          <text>搜索</text>
        </uv-button>
        <uv-button size="small" @click="handleReset">
          <text>重置</text>
        </uv-button>
        <uv-button type="success" size="small" @click="goToCreateProject">
          <text>新增项目</text>
        </uv-button>
      </view>
    </view>
    
    <!-- 项目列表 -->
    <view class="project-scroll">
      <view class="project-container">
        <view 
          class="project-card" 
          v-for="project in projects" 
          :key="project.id"
          @click="goToProjectDetail(project)"
        >
          <!-- 卡片头部：状态标签、发布日期、操作菜单 -->
          <view class="card-header">
            <view class="header-left">
              <view class="status-tag">{{ getStatusText(project.status) }}</view>
              <view class="urgent-tag" v-if="getUrgentStatus(project)">
                {{ getUrgentStatus(project) }}
              </view>
            </view>
            <view class="header-right">
              <text class="release-date">发布: {{ formatDate(project.createTime || project.releaseTime) }}</text>
              <view class="action-menu" @click.stop="handleCardMenu(project)">
                <text class="menu-icon">⋯</text>
              </view>
            </view>
          </view>
          
          <!-- 项目标题 -->
          <view class="card-title">{{ project.name }}</view>
          
          <!-- 项目标签和描述 -->
<!--          <view class="card-tags-row">-->

<!--            <view class="tag-circle" :style="{ backgroundColor: getTagColor(project) }">-->
<!--              <text class="tag-text">{{ getTagText(project) }}</text>-->
<!--            </view>-->
<!--            <text class="member-text">{{ project.createName }}</text>-->

<!--          </view>-->
          <view class="card-tags-row" v-if="project.remark">
            <text class="card-description" v-if="project.remark">{{ project.remark }}</text>
          </view>
          <!-- 操作标签 -->
          <view class="action-tags" v-if="project.tags && project.tags.length > 0">
            <view 
              class="action-tag" 
              v-for="(tag, index) in project.tags" 
              :key="index"
            >
              {{ tag }}
            </view>
          </view>
          
          <!-- 日期和剩余时间 -->
          <view class="card-footer">
            <view class="date-info">
              <text class="date-text">{{ formatDate(project.expireTime) }}</text>
              <text class="time-icon">🕐</text>
              <text class="time-text" :class="{ overdue: isOverdue(project) }">
                {{ getTimeStatus(project) }}
              </text>
            </view>
            
            <!-- 团队成员 -->
            <view class="member-info" v-if="project.memberList && project.memberList.length > 0">
              <view class="member-avatars">
                <view 
                  class="member-avatar" 
                  v-for="(member, index) in getDisplayMembers(project.memberList)" 
                  :key="index"
                  :style="{ backgroundColor: getAvatarColor(member, index) }"
                >
                  <text class="avatar-text">{{ getAvatarText(member) }}</text>
                </view>
              </view>
              <text class="member-text">{{ formatMemberNames(project.memberList) }}</text>
            </view>
          </view>
        </view>
        
        <!-- 加载状态 -->
        <view class="empty-state" v-if="loading" style="grid-column: 1 / -1;">
          <text class="empty-text">加载中...</text>
        </view>
        
        <!-- 空状态 -->
        <view class="empty-state" v-else-if="isEmpty" style="grid-column: 1 / -1;">
          <text class="empty-text">暂无项目数据</text>
        </view>
        
        <!-- 加载更多提示 -->
        <view class="load-more-tip" v-if="!isEmpty && !loading && !noMore" style="grid-column: 1 / -1;">
          <text class="load-more-text">上拉加载更多</text>
        </view>
        <view class="load-more-tip" v-if="!isEmpty && noMore" style="grid-column: 1 / -1;">
          <text class="load-more-text">没有更多数据了</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick, onUnmounted } from 'vue';
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { getProjectList, getUserList } from '@/api';
import { usePagination } from '@/composables';
import { useDictStore } from '@/store/dict';
import { useUserStore } from '@/store/user';
import { getDictLabel } from '@/utils/dict';

const dictStore = useDictStore();
const userStore = useUserStore();

// 筛选参数
const filterParams = ref({
  customerName: '',
  projectId: '',
  projectName: '',
  joinUserId: '',
  overdue: '', // ''表示全部, true表示是, false表示否
});

// 状态标签（使用字典键值）
const statusTabs = ref([
  { label: '待开始', value: 'WAIT_START' },
  { label: '开发中', value: 'IN_PROGRESS' },
  { label: '开发完成', value: 'COMPLETED' },
  { label: '已验收', value: 'ACCEPTED' },
  { label: '维护中', value: 'MAINTENANCE' },
  { label: '维护到期', value: 'MAINTENANCE_OVERDUE' },
  { label: '开发超期', value: 'DEVELOPMENT_OVERDUE' }
]);

const activeStatusTab = ref('IN_PROGRESS'); // 默认选中"开发中"

// 成员选项
const memberOptions = ref([]);
const selectedMemberName = ref('');

// 使用分页组合式函数
const {
  list,
  noMore,
  isEmpty,
  loading,
  getList,
  loadMore,
  updateParams,
  refresh,
  queryParams,
  reset
} = usePagination({
  fetchData: async (params) => {
    // 构建请求参数
    const requestParams = {
      ...params,
      orderByColumn: 'expireTime',
      isAsc: 'ascending'
    };
    
    // 添加状态筛选
    if (activeStatusTab.value) {
      // 根据选中的状态标签设置statusList（使用字典键值）
    //   if (activeStatusTab.value === 'DEVELOPMENT_OVERDUE') {
    //     // 开发超期需要特殊处理：状态是IN_PROGRESS，但需要overdue=true
    //     requestParams.statusList = ['IN_PROGRESS'];
    //     requestParams.overdue = true;
    //   } else 
      {
        // 其他状态直接使用字典键值
        requestParams.statusList = [activeStatusTab.value];
      }
    }
    
    // 添加其他筛选条件
    if (filterParams.value.customerName) {
      requestParams.customerName = filterParams.value.customerName;
    }
    if (filterParams.value.projectId) {
      requestParams.projectId = filterParams.value.projectId;
    }
    if (filterParams.value.projectName) {
      requestParams.projectName = filterParams.value.projectName;
    }
    if (filterParams.value.joinUserId) {
      requestParams.joinUserId = filterParams.value.joinUserId;
    }
    if (filterParams.value.overdue !== '' && activeStatusTab.value !== 'DEVELOPMENT_OVERDUE') {
      // 如果不是"开发超期"标签，才使用overdue筛选
      requestParams.overdue = filterParams.value.overdue;
    }
    
    // 添加创建人和负责人筛选（根据用户私有视角）
    const userId = userStore.getUserInfo?.user?.userId || userStore.getUserInfo?.userId;
    const privateView = userStore.privateView;
    if (userId && privateView) {
      requestParams.ownerId = userId;
      requestParams.createId = userId;
    }
    
    const res = await getProjectList(requestParams);
    return res;
  },
  mode: 'loadMore',
  pageSize: 20,
  defaultParams: {}
});

// 项目列表
const projects = computed(() => list.value);

// 获取状态文本
const getStatusText = (status) => {
  if (!status && status !== 0) return '未知';
  // 优先从字典获取（字典键值作为dictValue）
  const dictLabel = getDictLabel('project_status', status);
  if (dictLabel && dictLabel !== String(status)) {
    return dictLabel;
  }
  // 默认映射（兼容字典键值）
  const statusMap = {
    'WAIT_START': '待开始',
    'IN_PROGRESS': '开发中',
    'COMPLETED': '开发完成',
    'ACCEPTED': '已验收',
    'MAINTENANCE': '维护中',
    'MAINTENANCE_OVERDUE': '维护到期',
    'DEVELOPMENT_OVERDUE': '开发超期',
    // 兼容旧数据（数字状态值）
    '1': '待开始',
    '2': '开发中',
    '4': '开发完成',
    '5': '已验收',
    '6': '维护中',
    '7': '维护到期',
    '8': '开发超期'
  };
  return statusMap[String(status)] || `状态${status}`;
};

// 获取状态类型（用于标签颜色）
const getStatusType = (status) => {
  if (!status && status !== 0) return 'primary';
  const typeMap = {
    // 字典键值映射
    'WAIT_START': 'primary',        // 待开始
    'IN_PROGRESS': 'warning',       // 开发中
    'COMPLETED': 'success',         // 开发完成
    'ACCEPTED': 'info',             // 已验收
    'MAINTENANCE': 'primary',       // 维护中
    'MAINTENANCE_OVERDUE': 'warning', // 维护到期
    'DEVELOPMENT_OVERDUE': 'error',   // 开发超期
    // 兼容旧数据（数字状态值）
    '1': 'primary',   // 待开始
    '2': 'warning',   // 开发中
    '4': 'success',   // 开发完成
    '5': 'info',      // 已验收
    '6': 'primary',   // 维护中
    '7': 'warning',   // 维护到期
    '8': 'error'      // 开发超期
  };
  return typeMap[String(status)] || 'primary';
};

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '未知';
  return dateStr.split(' ')[0];
};

// 获取负责人名称
const getOwnerNames = (memberList) => {
  if (!Array.isArray(memberList) || memberList.length === 0) return '未分配';
  return memberList.map(member => member.userName || member.name || '').filter(name => name).join('、');
};

// 获取紧急状态标签
const getUrgentStatus = (project) => {
  if (!project.expireTime) return '';
  
  const expireDate = new Date(project.expireTime);
  const now = new Date();
  const diffTime = expireDate - now;
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  if (diffDays < 0) {
    // 已逾期
    return '';
  } else if (diffDays <= 3) {
    // 即将到期（3天内）
    return '即将到期';
  }
  return '';
};

// 判断是否逾期
const isOverdue = (project) => {
  if (!project.expireTime) return false;
  const expireDate = new Date(project.expireTime);
  const now = new Date();
  return expireDate < now;
};

// 获取时间状态文本（剩余天数或逾期天数）
const getTimeStatus = (project) => {
  if (!project.expireTime) return '';
  
  const expireDate = new Date(project.expireTime);
  const now = new Date();
  const diffTime = expireDate - now;
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  if (diffDays < 0) {
    return `逾期${Math.abs(diffDays)}天`;
  } else if (diffDays === 0) {
    return '今天到期';
  } else {
    return `剩余${diffDays}天`;
  }
};

// 获取标签颜色（根据项目创建人或负责人）
const getTagColor = (project) => {
  const colors = ['#87CEEB', '#FFB6C1', '#FFA500', '#98D8C8', '#DDA0DD'];
  const name = project.createName || project.ownerName || '';
  if (!name) return colors[0];
  const index = name.charCodeAt(0) % colors.length;
  return colors[index];
};

// 获取标签文本（取创建人名字的第一个字）
const getTagText = (project) => {
  const name = project.createName || project.ownerName || '';
  if (!name) return '项';
  return name.charAt(0);
};

// 获取显示成员（最多3个）
const getDisplayMembers = (memberList) => {
  if (!Array.isArray(memberList)) return [];
  return memberList.slice(0, 3);
};

// 格式化成员名称
const formatMemberNames = (memberList) => {
  if (!Array.isArray(memberList) || memberList.length === 0) return '';
  
  const names = memberList.map(member => member.userName || member.name || '').filter(name => name);
  
  if (names.length <= 3) {
    return names.join('');
  } else {
    const firstThree = names.slice(0, 3).join('');
    return `${firstThree}等${names.length}人`;
  }
};

// 获取头像颜色
const getAvatarColor = (member, index) => {
  const colors = ['#FFB6C1', '#87CEEB', '#DDA0DD', '#98D8C8', '#FFA500'];
  return colors[index % colors.length];
};

// 获取头像文本（取名字的第一个字）
const getAvatarText = (member) => {
  const name = member.userName || member.name || '';
  if (!name) return '?';
  return name.charAt(0);
};

// 处理卡片菜单
const handleCardMenu = (project) => {
  uni.showActionSheet({
    itemList: ['修改', '删除', '+ 新增任务', '√ 开始开发'],
    success: (res) => {
      if (res.tapIndex === 0) {
        goToEditProject(project);
      } else if (res.tapIndex === 1) {
        // 删除
        uni.showToast({ title: '删除功能开发中', icon: 'none' });
      } else if (res.tapIndex === 2) {
        // 新增任务
        uni.showToast({ title: '新增任务功能开发中', icon: 'none' });
      } else if (res.tapIndex === 3) {
        // 开始开发
        uni.showToast({ title: '开始开发功能开发中', icon: 'none' });
      }
    }
  });
};

const goToCreateProject = () => {
  uni.navigateTo({
    url: '/pages/project/form/index?mode=add'
  });
};

const goToEditProject = (project) => {
  if (!project?.id) {
    uni.showToast({
      title: '缺少项目ID',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/project/form/index?mode=edit&id=${project.id}`
  });
};

// 处理状态标签点击
const handleStatusTabClick = (value) => {
  activeStatusTab.value = value;
  handleSearch();
};

// 处理成员选择
const handleMemberChange = (e) => {
  const index = e.detail.value;
  const member = memberOptions.value[index];
  if (member) {
    filterParams.value.joinUserId = member.userId;
    selectedMemberName.value = member.nickName;
  } else {
    filterParams.value.joinUserId = '';
    selectedMemberName.value = '';
  }
};

// 搜索
const handleSearch = () => {
  // 使用 updateParams 更新查询参数，会自动重置页码并重新加载数据
  updateParams({});
};

// 重置
const handleReset = () => {
  filterParams.value = {
    customerName: '',
    projectId: '',
    projectName: '',
    joinUserId: '',
    overdue: ''
  };
  selectedMemberName.value = '';
  activeStatusTab.value = 'IN_PROGRESS';
  // 使用 updateParams 更新查询参数，会自动重置页码并重新加载数据
  updateParams({});
};

// 上拉加载更多 - 使用 uniapp 的 onReachBottom
onReachBottom(() => {
  if (!noMore.value && !loading.value) {
    loadMore();
  }
});

// 下拉刷新 - 使用 uniapp 的 onPullDownRefresh
onPullDownRefresh(async () => {
  try {
    // 重置并刷新数据
    await refresh();
  } finally {
    // 停止下拉刷新动画
    uni.stopPullDownRefresh();
  }
});

// 跳转到项目详情
const goToProjectDetail = (project) => {
  // TODO: 跳转到项目详情页面
  uni.showToast({
    title: '项目详情功能开发中',
    icon: 'none'
  });
};

// 加载成员列表
const loadMemberList = async () => {
  try {
    const res = await getUserList({ pageSize: 200 });
    if (res && res.rows) {

      memberOptions.value = res.rows || [];
    }
  } catch (err) {
    console.error('加载成员列表失败:', err);
  }
};

// 页面初始化标志
const isInitialized = ref(false);

// 监听用户私有视角变化
watch(() => userStore.privateView, () => {
  if (isInitialized.value) {
    handleSearch();
  }
});

onMounted(() => {
  if (!dictStore.isLoaded) {
    dictStore.loadDictData();
  }
  loadMemberList();
  uni.$on('projectListRefresh', handleSearch);
});

onUnmounted(() => {
  uni.$off('projectListRefresh', handleSearch);
});

onLoad(() => {
  nextTick(() => {
    isInitialized.value = true;
    // 初始化时直接调用 getList，使用 reset=true 重置列表
    getList(true);
  });
});
</script>

<style lang="scss" scoped>
.project-list-page {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.filter-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.filter-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-label {
  font-size: 12px;
  color: #666;
}

.filter-input {
  height: 36px;
  padding: 0 12px;
  background: #f5f6f7;
  border-radius: 6px;
  font-size: 14px;
}

.filter-picker {
  height: 36px;
  padding: 0 12px;
  background: #f5f6f7;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-text {
  font-size: 14px;
  color: #333;
}

.picker-arrow {
  font-size: 12px;
  color: #999;
}

.radio-group {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.radio-item {
  padding: 6px 16px;
  background: #f5f6f7;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  
  &.active {
    background: #2885ff;
    color: #fff;
  }
}

.status-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.status-tab {
  padding: 6px 16px;
  background: #f5f6f7;
  border-radius: 16px;
  font-size: 14px;
  color: #666;
  
  &.active {
    background: #2885ff;
    color: #fff;
  }
}

.action-buttons {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.btn-icon {
  margin-right: 4px;
}

.project-scroll {
  flex: 1;
  width: 100%;
}

.project-container {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}



.project-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.project-card:active {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 卡片头部 */
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  background: #E5E5E5;
  border-radius: 4px;
  font-size: 12px;
  color: #333;
  width: fit-content;
}

.urgent-tag {
  display: inline-block;
  padding: 4px 10px;
  background: #FF4444;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  width: fit-content;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.release-date {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

.action-menu {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.action-menu:active {
  background-color: #f0f0f0;
}

.menu-icon {
  font-size: 18px;
  color: #666;
  line-height: 1;
  transform: rotate(90deg);
}

/* 项目标题 */
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-top: 4px;
}

/* 标签和描述行 */
.card-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.tag-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tag-text {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

.card-description {
  font-size: 14px;
  color: #666;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 操作标签 */
.action-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.action-tag {
  padding: 4px 10px;
  background: #E3F2FD;
  border-radius: 4px;
  font-size: 12px;
  color: #1976D2;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.date-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-text {
  font-size: 14px;
  color: #333;
}

.time-icon {
  font-size: 14px;
}

.time-text {
  font-size: 14px;
  color: #666;
  
  &.overdue {
    color: #FF4444;
  }
}

.member-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-avatars {
  display: flex;
  align-items: center;
}

.member-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  margin-left: -8px;
  
  &:first-child {
    margin-left: 0;
  }
}

.avatar-text {
  font-size: 10px;
  color: #fff;
  font-weight: 500;
}

.member-text {
  font-size: 12px;
  color: #666;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.empty-text {
  font-size: 14px;
  color: #999;
}

.load-more-tip {
  padding: 20px 0;
  text-align: center;
}

.load-more-text {
  font-size: 12px;
  color: #999;
}
</style>