im-uniapp/pages/workbench/project/project.vue

<template>
  <view class="project-page">
    <!-- 新增按钮 -->
    <view class="add-btn-row">
       <u-search 
        placeholder="根据项目名称搜索" 
        v-model="queryParams.projectName" 
        class="search-input"
        :show-action="false"
        @search="handleSearch"
      />
      <view class="button-group">
        </input>
        <uni-icons 
          type="gift" 
          size="30" 
          @click="toggleQualityFilter" 
          :color="qualityFilter ? '#ffcc00' : '#333'"
        />
        <uni-icons 
          type="search" 
          size="30" 
          @click="openSettingsPopup" 
          color="#333" 
        ></uni-icons>
        <uni-drawer
          ref="filterDrawer"
          mode="right"
          :width="300"
        >
          <view class="popup-content">
            <view class="filter-title">更多筛选条件</view>
            <view class="filter-item">
              <text class="filter-label">项目类型</text>
              <oa-dict-select
                v-model="queryParams.projectType"
                dict-type="sys_project_type"
                placeholder="请选择项目类型"
                @change="handleQuery"
                clearable
              />
            </view>
            <view class="filter-item">
              <text class="filter-label">贸易类型</text>
              <oa-dict-select
                v-model="queryParams.tradeType"
                dict-type="sys_trade_type"
                placeholder="请选择贸易类型"
                @change="handleQuery"
                clearable
              />
            </view>
            <view class="filter-item">
              <text class="filter-label">项目代号</text>
              <oa-dict-select
                v-model="queryParams.projectCode"
                dict-type="sys_project_code"
                placeholder="请选择代号类型"
                @change="handleQuery"
                clearable
                filterable
              />
            </view>
            <view class="filter-item">
              <text class="filter-label">日期范围</text>
              <uni-datetime-picker
                v-model="searchTime"
                type="daterange"
                rangeSeparator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQuery"
              />
            </view>
            <view class="filter-actions">
              <button class="primary" @click="handleQuery">查询</button>
              <button @click="resetQuery">重置</button>
            </view>
          </view>
        </uni-drawer>
        <uni-icons 
          type="plus" 
          size="30" 
          @click="handleAdd" 
          color="#333" 
        />
      </view>
    </view>

    <!-- 项目列表 -->
    <scroll-view scroll-y @scrolltolower="loadMore" :style="{ height: scrollHeight + 'px' }">
      <view class="project-grid">
        <view 
          class="project-card" 
          v-for="item in projectList" 
          :key="item.projectId" 
          @click="handleDetail(item)"
        >
          <view class="project-title">{{ item.projectName }}</view>
          <view class="project-info">
            <text>负责人：{{ item.functionary }}</text>
            <text :style="getRemainTimeStyle(item.remainTime)" v-if="item.projectStatus == 0">
              剩余时间：{{ item.remainTime }}天
            </text>
            <text>项目总金额：{{ item.funds }}元</text>
            <text v-if="item.prePay > 0" style="color: #ffcc00;">预付款：{{ item.prePay }}元</text>
            <view style="display: flex; justify-content: flex-start; gap: 10rpx; position: absolute; bottom: 20rpx; margin-top: 10rpx;">
              <uni-tag v-if="item.projectStatus == 1" size="mini" type="success" text="进度完成"></uni-tag>
              <uni-tag v-else-if="item.projectStatus == 0" size="mini" type="warning" text="进行中"></uni-tag>
              <uni-tag v-if="item.tradeType == 0" size="mini" type="warning" text="内贸"></uni-tag>
              <uni-tag v-else-if="item.tradeType == 1" size="mini" type="success" text="外贸"></uni-tag>
            </view>  
          </view>
        </view>
      </view>
      <!-- 加载更多组件 -->
      <uni-load-more :status="loadMoreStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
import { listProject, addProject, updateProject, delProject, getProject } from '@/api/oa/project.js'
export default {
  data() {
    return {
      projectList: [],
      form: {},
      editType: '', // add/edit
      page: 1, // 当前页码
      pageSize: 10, // 每页项目数量
      selectedProject: {}, // 选中的项目
      loadMoreStatus: 'more', // 加载更多状态
      scrollHeight: 0, // 滚动区域高度
      qualityFilter: false, // 优质筛选开关
      searchTime: [], // 日期范围
      queryParams: {
        projectName: '',
        projectType: '',
        tradeType: '',
        projectCode: '',
        projectStatus: ''
      },
      dict: {
        type: {
          sys_project_type: [],
          sys_trade_type: [],
          sys_project_code: [],
          sys_project_status: []
        }
      }
    }
  },
  onShow() {
    this.getList();
    this.calculateScrollHeight();
    // TODO: 这里应请求字典数据填充dict.type
  },
  methods: {
    getStatusLabel(val) {
      const arr = this.dict.type.sys_project_status;
      const found = arr.find(i => i.value === val);
      return found ? found.label : '';
    },
    openSettingsPopup() {
      this.$nextTick(() => {
        if (this.$refs.filterDrawer) this.$refs.filterDrawer.open();
      });
    },
    handleSearch() {
      this.page = 1;
      this.projectList = [];
      this.getList();
    },
    handleQuery() {
      this.page = 1;
      this.projectList = [];
      if (this.$refs.filterDrawer) this.$refs.filterDrawer.close();
      // 日期范围处理
      if (this.searchTime && this.searchTime.length === 2) {
        this.queryParams.beginDate = this.searchTime[0];
        this.queryParams.endDate = this.searchTime[1];
      } else {
        this.queryParams.beginDate = '';
        this.queryParams.endDate = '';
      }
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        projectName: '',
        projectType: '',
        tradeType: '',
        projectCode: '',
        projectStatus: ''
      };
      this.searchTime = [];
      this.handleQuery();
    },
    filterCode(val) {
      // 可根据需要自定义筛选逻辑
      return true;
    },
    calculateScrollHeight() {
      const systemInfo = uni.getSystemInfoSync();
      const tabHeight = 75; // tab高度
      const containerPadding = 40; // 容器padding
      this.scrollHeight = systemInfo.windowHeight - tabHeight - containerPadding + 80;
    },
    getList() {
      const params = { pageNum: this.page, pageSize: this.pageSize, ...this.queryParams };
      if (this.qualityFilter) {
        params.prePay = 0.1; // 添加优质筛选参数
      }
      listProject(params).then(res => {
        const newProjects = (res.rows || []).map(row => ({
          ...row,
          projectTypeLabel: row.projectType,
          projectStatusLabel: row.projectStatus,
        }));
        this.projectList = [...this.projectList, ...newProjects];

        if (newProjects.length < this.pageSize) {
          this.loadMoreStatus = 'noMore'; // 没有更多数据
        } else {
          this.loadMoreStatus = 'more'; // 还有更多数据
        }
      });
    },
    loadMore() {
      if (this.loadMoreStatus === 'more') {
        console.log('加载更多');
        this.page++;
        this.getList();
      }
    },
    handleAdd() {
      uni.navigateTo({
        url: '/pages/workbench/project/add'
      })
    },
    handleDetail(item) {
      uni.navigateTo({
        url: '/pages/workbench/project/detail?id=' + item.projectId
      })
    },
    toggleQualityFilter() {
      this.qualityFilter = !this.qualityFilter; // 切换优质筛选状态
      this.page = 1; // 重置页码
      this.projectList = []; // 清空当前项目列表
      this.getList(); // 重新获取项目列表
    },
    openEditPopup(item) {
      this.editType = 'edit';
      getProject(item.projectId).then(res => {
        this.form = { ...res.data };
        this.$refs.editPopup.open();
      });
    },
    closePopup() {
      this.$refs.editPopup.close();
    },
    submitForm() {
      if (this.editType === 'add') {
        addProject(this.form).then(() => {
          this.getList();
          this.closePopup();
        });
      } else {
        updateProject(this.form).then(() => {
          this.getList();
          this.closePopup();
        });
      }
    },
    handleClosure(item) {
      const update = { ...item, projectStatus: '1' };
      updateProject(update).then(() => {
        this.getList();
      });
    },
    handleDelete(item) {
      delProject(item.projectId).then(() => {
        this.getList();
      });
    },
    openDetailPopup(item) {
      this.selectedProject = item;
      this.$refs.detailPopup.open();
    },
    closeDetailPopup() {
      this.$refs.detailPopup.close();
    },
    getRemainTimeStyle(remainTime) {
      if (remainTime > 10) {
        return { color: '#3c763d' }; // 绿色
      } else if (remainTime > 5) {
        return { color: '#8a6d3b' }; // 黄色
      } else {
        return { color: '#a94442' }; // 红色
      }
    }
  }
}
</script>

<style scoped>
.add-btn-row {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  align-items: center;
  margin: 20rpx;
  gap: 10rpx; /* 按钮之间的间距 */
}

.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
}

.popup-content {
  background-color: #fff; /* 设置纯白背景 */
  padding: 24px 18px 18px 18px; /* 上右下左内边距 */
  border-radius: 14px; /* 圆角 */
  min-height: 100vh;
  box-sizing: border-box;
}

.filter-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 18px;
  text-align: left;
}

.filter-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.filter-label {
  min-width: 80px;
  font-size: 16px;
  color: #666;
  margin-right: 10px;
}
.filter-item oa-dict-select,
.filter-item picker,
.filter-item uni-datetime-picker {
  flex: 1;
}
.filter-item .uni-input {
  background: #f7f7f7;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 15px;
  color: #333;
}
.filter-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 10px;
}
.filter-actions button {
  min-width: 90px;
  padding: 8px 0;
  border-radius: 6px;
  font-size: 16px;
  background: #2979ff;
  color: #fff;
  border: none;
}
.filter-actions button:not(.primary) {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #e0e0e0;
}

.close-button {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-bottom: 10px; /* 底部间距 */
}

.project-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.project-card {
  border: 1px solid #ccc; /* 边框 */
  border-radius: 10px; /* 圆角 */
  background-color: #fff; /* 背景色 */
  margin: 10px;
  box-sizing: border-box;
  width: calc(50% - 20px); /* 每行两个卡片 */
  padding: 20px 15px; /* 添加内边距 */
  position: relative;
}

.project-title {
  font-size: 20px; /* 项目名称字号 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 主字体颜色 */
  margin-bottom: 5px; /* 下边距 */
}

.project-info text {
  display: block; /* 每个信息占一行 */
  margin-top: 5px; /* 上边距 */
  color: #666; /* 较淡的字体颜色 */
  font-size: 16px; /* 信息字号 */
  line-height: 1.5; /* 行间距 */
}

.project-info {
  margin-top: 10px; /* 项目信息与标题之间的间距 */
}

/* 新增的样式 */
.horizontal-actions {
  display: flex;
  justify-content: space-between; /* 在一行内均匀分布 */
  margin-top: 10px; /* 添加顶部间距 */
}
.horizontal-actions button {
  flex: 1; /* 按钮均分宽度 */
  margin: 0 5px; /* 按钮之间的间距 */
}
</style>