im-uniapp/pages/workbench/cost/components/Table.vue

<template>
  <view class="recent-records-container">
    <scroll-view 
      scroll-x="true" 
      class="table-scroll"
      show-scrollbar="false"
    >
      <view class="table-wrapper">
        <!-- 表头 -->
        <view class="table-row header-row">
          <view class="table-cell">项目名</view>
          <view class="table-cell">人力花费</view>
          <view class="table-cell">人天计算</view>
          <view class="table-cell">物料花费</view>
          <view class="table-cell">综合成本</view>
          <view class="table-cell">项目总款</view>
        </view>
        
        <!-- 表体 -->
        <view 
          class="table-row" 
          v-for="(item, index) in tableData" 
          :key="index"
          :class="{ 'odd-row': index % 2 === 1 }"
					@click="rowClick(item)"
        >
          <view class="table-cell">{{ item.projectName }}</view>
          <view class="table-cell">{{ item.userCost }}</view>
          <view class="table-cell">{{ item.peopleDay }}</view>
          <view class="table-cell">{{ item.materialCost }}</view>
          <view class="table-cell">{{ item.totalCost }}</view>
					<view class="table-cell">
						{{ item.funds }}
					</view>
        </view>
        
        <!-- 空状态 -->
        <view v-if="tableData.length === 0" class="empty-state">
          <uni-icons type="empty" size="60" color="#cccccc"></uni-icons>
          <text class="empty-text">暂无记录</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'RecentRecords',
  props: {
    // 接收表格数据
    tableData: {
      type: Array,
      default: () => []
    }
  },
	computed: {
		renderData() {
			return this.tableData.map(item => {
				return {
					projectName: item.projectName,
					userCost: this.formatNumberToWan(item.userCost),
					peopleDay: item.peopleDay,
					materialCost: this.formatNumberToWan(item.materialCost),
					totalCost: this.formatNumberToWan(item.materialCost + item.userCost + item.claimCost),
					funds: this.formatNumberToWan(item.funds)
				}
			})
		}
	},
  methods: {
    formatNumberToWan(num) {
      if (num === 0) return 0;
      const wanNum = num / 10000;
       // 保留两位小数，四舍五入
      return Math.round(wanNum * 100) / 100;
    },
		rowClick(item) {
			this.$emit('row', item);
		}
  }
};
</script>

<style scoped>
.recent-records-container {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow-y: scroll;
	max-height: 800rpx;
	overflow-x: hidden;
}

.table-header {
  padding: 20rpx 16rpx;
  border-bottom: 1px solid #f5f5f5;
}

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

.table-scroll {
  width: 100%;
}

.table-wrapper {
  width: 100%;
  min-width: 900rpx; /* 确保表格有足够宽度展示内容 */
}

.table-row {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #f5f5f5;
}

.table-row:last-child {
  border-bottom: none;
}

.header-row {
  background-color: #f9f9f9;
}

.odd-row {
  background-color: #fafafa;
}

.table-cell {
  flex: 1;
  padding: 20rpx 10rpx;
  font-size: 24rpx;
  color: #666666;
  text-align: center;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 14rpx;
  font-size: 22rpx;
  color: #ffffff;
}

.status-tag.success {
  background-color: #00b42a;
}

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

.status-tag.danger {
  background-color: #f53f3f;
}

.status-tag.info {
  background-color: #86909c;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
}

.empty-text {
  font-size: 26rpx;
  color: #999999;
  margin-top: 20rpx;
}
</style>