todo-frontend/src/pages/stock/flow.vue

<template>
  <view class="stock-flow">
    <!-- 筛选 -->
    <view class="filter-bar">
      <picker 
        mode="selector" 
        :range="typeOptions" 
        range-key="label" 
        @change="onTypeChange"
      >
        <view class="filter-picker">
          {{ selectedTypeLabel }}
        </view>
      </picker>
      <picker 
        mode="selector" 
        :range="productList" 
        range-key="name" 
        @change="onProductChange"
      >
        <view class="filter-picker">
          {{ selectedProduct ? selectedProduct.name : '全部商品' }}
        </view>
      </picker>
    </view>

    <!-- 流水列表 -->
    <scroll-view scroll-y class="flow-scroll">
      <view 
        v-for="item in flowList" 
        :key="item.flowId" 
        class="flow-item"
      >
        <view class="flow-left">
          <text class="flow-type" :class="item.type === 1 ? 'in' : 'out'">
            {{ item.type === 1 ? '入库' : item.type === 2 ? '出库' : '调整' }}
          </text>
          <text class="flow-product">{{ item.productName || '商品' + item.productId }}</text>
          <text class="flow-time">{{ formatTime(item.createdAt) }}</text>
        </view>
        <view class="flow-right">
          <text class="flow-quantity" :class="item.type === 1 ? 'in' : 'out'">
            {{ item.type === 1 ? '+' : '-' }}{{ item.quantity }}
          </text>
          <text class="flow-remark" v-if="item.remark">{{ item.remark }}</text>
        </view>
      </view>

      <view v-if="flowList.length === 0" class="empty">
        <text>暂无流水记录</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import stockApi from '@/api/stock'
import productApi from '@/api/product'

export default {
  data() {
    return {
      typeOptions: [
        { label: '全部类型', value: null },
        { label: '入库', value: 1 },
        { label: '出库', value: 2 },
        { label: '调整', value: 3 }
      ],
      selectedType: null,
      selectedTypeLabel: '全部类型',
      productList: [],
      selectedProduct: null,
      flowList: [],
      page: 1,
      pageSize: 20,
      loading: false
    }
  },
  onLoad() {
    this.getProducts()
    this.getFlowList()
  },
  onPullDownRefresh() {
    this.page = 1
    Promise.all([this.getProducts(), this.getFlowList()]).then(() => {
      uni.stopPullDownRefresh()
    })
  },
  onReachBottom() {
    if (!this.loading) {
      this.page++
      this.getFlowList(true)
    }
  },
  methods: {
    async getProducts() {
      try {
        const res = await productApi.getProducts({ page: 1, pageSize: 100 })
        if (res.code === 0) {
          this.productList = [{ productId: '', name: '全部商品' }, ...(res.data.records || [])]
        }
      } catch (e) {
        console.error('加载商品失败', e)
      }
    },
    async getFlowList(append = false) {
      this.loading = true
      try {
        const params = {
          page: this.page,
          pageSize: this.pageSize
        }
        if (this.selectedType) {
          params.type = this.selectedType
        }
        if (this.selectedProduct && this.selectedProduct.productId) {
          params.productId = this.selectedProduct.productId
        }
        
        const res = await stockApi.getStockFlow(params)
        if (res.code === 0) {
          this.flowList = append ? [...this.flowList, ...res.data.records] : res.data.records
        }
      } catch (e) {
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },
    onTypeChange(e) {
      const item = this.typeOptions[e.detail.value]
      this.selectedType = item.value
      this.selectedTypeLabel = item.label
      this.page = 1
      this.getFlowList()
    },
    onProductChange(e) {
      this.selectedProduct = this.productList[e.detail.value]
      this.page = 1
      this.getFlowList()
    },
    formatTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.stock-flow {
  min-height: 100vh;
  background: #f5f5f5;
}

.filter-bar {
  display: flex;
  padding: 20rpx;
  background: #fff;
}

.filter-picker {
  flex: 1;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  background: #f5f5f5;
  border-radius: 8rpx;
  margin: 0 10rpx;
  font-size: 28rpx;
}

.flow-scroll {
  height: calc(100vh - 180rpx);
}

.flow-item {
  display: flex;
  justify-content: space-between;
  margin: 20rpx;
  padding: 24rpx;
  background: #fff;
  border-radius: 12rpx;
}

.flow-left {
  flex: 1;
}

.flow-type {
  display: inline-block;
  padding: 4rpx 12rpx;
  font-size: 24rpx;
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.flow-type.in {
  background: #e6f7e6;
  color: #3cc51f;
}

.flow-type.out {
  background: #fff0e6;
  color: #ff6600;
}

.flow-product {
  display: block;
  font-size: 28rpx;
  margin-top: 8rpx;
}

.flow-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.flow-right {
  text-align: right;
}

.flow-quantity {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
}

.flow-quantity.in {
  color: #3cc51f;
}

.flow-quantity.out {
  color: #ff6600;
}

.flow-remark {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
  max-width: 200rpx;
}

.empty {
  text-align: center;
  padding: 100rpx;
  color: #999;
}
</style>