cmc-oa/oa-ui-app/pages/oa/declare/declareList.vue

<!--
 * @Author: ysh
 * @Date: 2025-08-04 11:04:25
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-08-04 14:50:13
-->
<template>
  <view class="container">
    <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
      :up="upOption" :fixed="false" :top="10" style="padding: 30rpx;">
      <view>
        <view v-for="(item, index) in declareList" :key="index" class="modern-card">
          <view class="modern-card-header">
            <view class="modern-card-title">
              <text class="project-number">{{ formatterProjectNumber(item) }}</text>
              <text class="project-name">{{ formatterProjectName(item) }}</text>
            </view>
          </view>

          <view class="modern-card-body">
            <view class="avatar-section">
              <view class="avatar">
                <text>{{ item.user && item.user.nickName ? item.user.nickName[0] : '' }}</text>
              </view>
              <view>
                <text class="applier-name">{{ item.user ? item.user.nickName : '' }}</text>
                <text class="dept-name">填报人</text>
              </view>
            </view>

            <view class="info-row">
              <text class="info-label">工作类别：</text>
              <text class="info-value">{{ item.workType }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工作项目：</text>
              <text class="info-value">{{ item.workItem }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工作内容：</text>
              <text class="info-value">{{ item.workContent }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工作时间：</text>
              <text class="info-value">{{ item.beginDate }} ~ {{ item.endDate }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工天数量：</text>
              <text class="info-value">{{ item.workLoad }}天</text>
            </view>
            <view class="info-row">
              <text class="info-label">工天单价：</text>
              <text>{{ item.price }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">系数：</text>
              <text class="info-value">{{ item.coefficient }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">预估绩效：</text>
              <text class="amount-highlight">￥{{ predictMoney(item) }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">填报时间：</text>
              <text class="info-value">{{ parseTime(item.submitTime, '{y}-{m}-{d}') }}</text>
            </view>

            <!-- 审核状态 -->
            <view class="status-section">
              <view class="status-item">
                <text class="status-label">一审：</text>
                <view class="status-tag" :class="formatFn(item, 'checkStatus') ? 'success' : 'warning'">
                  <text>{{ formatFn(item, 'checkStatus') ? '已通过' : '待审核' }}</text>
                </view>
              </view>
              <view class="status-item">
                <text class="status-label">二审：</text>
                <view class="status-tag" :class="formatFn(item, 'auditStatus') ? 'success' : 'warning'">
                  <text>{{ formatFn(item, 'auditStatus') ? '已通过' : '待审核' }}</text>
                </view>
              </view>
              <view class="status-item">
                <text class="status-label">确认：</text>
                <view class="status-tag" :class="formatFn(item, 'confirmStatus') ? 'success' : 'warning'">
                  <text>{{ formatFn(item, 'confirmStatus') ? '已确认' : '待确认' }}</text>
                </view>
              </view>
            </view>
          </view>

          <view class="modern-card-footer">
            <button class="footer-btn detail-btn" @click="openFormInfo(item)">表单信息</button>
            <button class="footer-btn form-btn" @click="handleUpdate(item)">修改</button>
          </view>
        </view>
      </view>
    </mescroll-uni>
  </view>
</template>

<script>
import { listDeclare, getDeclare, updateDeclare } from '@/api/oa/declare/declare';
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: '~ 没有更多数据了 ~'
      },
      declareList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        userId: null,
        submitTime: null
      }
    }
  },

  onLoad: function (options) {
    uni.startPullDownRefresh();
  },

  methods: {
    // 加载数据
    async loadData() {
      try {
        // 权限控制逻辑
        if (this.$store.getters.deptId > 103) {
          this.queryParams.deptId = this.$store.getters.deptId;
        }
        if (this.$store.getters.roles.includes('projectLeader')) {
          this.queryParams.projectLeader = this.$store.getters.userId
        }
        if (this.$store.getters.roles.includes('dept')) {
          this.queryParams.projectLeader = null
        }
        if (this.$store.getters.userId == 1) {
          this.queryParams.deptId = null
          this.queryParams.projectLeader = null
        }

        const res = await listDeclare(this.queryParams)
        return { data: res.rows, total: res.total }
      } catch (e) {
        return { data: [], error: true }
      }
    },

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

    // mescroll下拉刷新回调
    async downCallback() {
      this.declareList = []; // 清空列表
      this.queryParams.pageNum = 1
      const res = await this.loadData()
      if (res.error) {
        this.mescroll.endErr();
      } else {
        this.declareList = 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.declareList = this.declareList.concat(res.data)
        this.mescroll.endSuccess(res.data.length, res.total);
      }
    },

    // 格式化项目编号
    formatterProjectNumber(row) {
      if (!row.projectId) {
        return '无'
      } else {
        return row.project.projectNumber
      }
    },

    // 格式化项目名称
    formatterProjectName(row) {
      if (!row.projectId) {
        let year = row.submitTime.substring(0, 4)
        return year + '年借调、零星项目'
      } else {
        return row.project.projectName
      }
    },

    // 格式化状态
    formatFn(row, type) {
      if (row[type] && row[type] == '1') {
        return true
      } else {
        return false
      }
    },

    // 计算预估绩效
    predictMoney(row) {
      let result = parseFloat(row.price * row.workLoad * row.coefficient)
      return result.toFixed(2)
    },

    // 时间解析函数
    parseTime(time, cFormat) {
      if (!time) return ''

      const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key]
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        return value.toString().padStart(2, '0')
      })
      return time_str
    },

    // 打开表单信息
    openFormInfo(item) {
      console.log(item)
      uni.navigateTo({
        url: `/pages/components/formInfo?formId=${item.formId}&formType=declare`
      });
    },

    // 修改操作
    handleUpdate(item) {
      
    }
  }
}
</script>

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

.modern-card {
  background: #fff;
  border-radius: 18rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.2s;
  border: 1rpx solid #f0f0f0;
}

.modern-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #e0e7ff 0%, #f8fafc 100%);
  padding: 24rpx 28rpx 16rpx 28rpx;
}

.modern-card-title {
  display: flex;
  flex-direction: column;
}

.project-number {
  font-size: 26rpx;
  color: #6366f1;
  font-weight: 600;
}

.project-name {
  font-size: 28rpx;
  color: #22223b;
  font-weight: bold;
  margin-top: 4rpx;
}

.amount-highlight {
  background: #fef3c7;
  color: #d97706;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 10rpx;
  padding: 8rpx 20rpx;
  min-width: 120rpx;
  text-align: center;
}

.amount-highlight-detail {
  background: #fef3c7;
  color: #d97706;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 10rpx;
  padding: 4rpx 18rpx;
  margin-left: 8rpx;
}

.modern-card-body {
  padding: 20rpx 28rpx 24rpx 28rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
}

.avatar {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #a5b4fc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 18rpx;
}

.applier-name {
  font-size: 28rpx;
  color: #22223b;
  font-weight: 500;
}

.dept-name {
  font-size: 24rpx;
  color: #64748b;
  margin-left: 8rpx;
}

.info-row {
  display: flex;
  margin-bottom: 10rpx;
}

.info-label {
  color: #64748b;
  font-size: 24rpx;
  min-width: 120rpx;
}

.info-value {
  color: #22223b;
  font-size: 24rpx;
  flex: 1;
  word-break: break-all;
}

// 审核状态样式
.status-section {
  margin-top: 16rpx;
  padding-top: 16rpx;
  border-top: 1px solid #f0f0f0;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 8rpx;
}

.status-label {
  color: #64748b;
  font-size: 24rpx;
  min-width: 80rpx;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  margin-left: 8rpx;
}

.status-tag.success {
  background: #dcfce7;
  color: #16a34a;
}

.status-tag.warning {
  background: #fef3c7;
  color: #d97706;
}

.modern-card-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 16rpx 28rpx 20rpx 28rpx;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
}

.footer-btn {
  font-size: 26rpx;
  border-radius: 8rpx;
  border: none;
  outline: none;
  background: #e0e7ff;
  color: #3b3b4f;
}

.detail-btn {
  background: #6366f1;
  color: #fff;
}

.form-btn {
  background: #f4c542;
  color: #fff;
}
</style>