feat: 库存管理前端页面

src/pages/stock/flow.vue

@@ -0,0 +1,252 @@
+<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>