zhuangpeimespda/pages/produceManagement/paintMaterial/paint_receive.vue

<template>
  <view class="container">
    <!-- 筛选查询区域 -->
    <view class="filter-section">
      <uni-forms ref="filterForm" :modelValue="filterData" validateTrigger="bind">
        <view class="form-row">
          <uni-forms-item label="线别选择" label-width="80" name="lineCode" required class="form-item">
            <uni-data-select :localdata="lineOptions" v-model="filterData.lineCode" placeholder="请选择线体" @change="getReceiveList"></uni-data-select>
          </uni-forms-item>
          <uni-forms-item label="选择日期" label-width="80" name="workOrderDate" required class="form-item">
            <uni-datetime-picker type="date" v-model="filterData.workOrderDate" format="yyyy-MM-dd" placeholder="请选择日期"></uni-datetime-picker>
          </uni-forms-item>
        </view>
        <view class="btn-search">
          <button type="primary" @click="getReceiveList">查询</button>
        </view>
      </uni-forms>
    </view>

    <!-- 清单展示区域 -->
    <view class="list-section">
      <view class="list-header">
        <text>收料清单</text>
      </view>
      <scroll-view scroll-y class="list-container">
        <view v-if="receiveList.length === 0" class="empty-tip">
          暂无收料数据
        </view>
        <view v-for="(item, index) in receiveList" :key="index" class="list-item">
          <view class="item-info">
            <view class="info-row">
              <text class="label">物料名称:</text>
              <text class="value">{{ item.materialName }}</text>
            </view>
            <view class="info-row">
              <text class="label">物料号:</text>
              <text class="value">{{ item.materialCode }}</text>
            </view>
            <view class="info-row">
              <text class="label">供应商:</text>
              <text class="value">{{ item.supplier }}</text>
            </view>
            <view class="info-row">
              <text class="label">批次号:</text>
              <text class="value">{{ item.batchNo }}</text>
            </view>
            <view class="info-row">
              <text class="label">待收数量:</text>
              <text class="value">{{ item.waitingQuantity }}</text>
            </view>
          </view>
          <view class="item-actions">
            <button type="primary" size="mini" @click="receiveMaterial(item)">收料</button>
            <button type="default" size="mini" @click="returnMaterial(item)">退料</button>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { queryReceiveList } from '@/api/mmcall';
export default {
  data() {
    return {
      filterData: {
        lineCode: '',
        workOrderDate: new Date()
      },
      lineOptions: [
        { text: 'U03线', value: 'U03' },
        { text: 'U05线', value: 'U05' },
        { text: 'U16线', value: 'U16' },
        { text: 'U17线', value: 'U17' }
      ],
      receiveList: []
    };
  },
  onLoad() {
    // 默认选择当前日期
    this.filterData.date = new Date();
  },
  methods: {
    // 获取收料清单
    getReceiveList() {
      if (!this.filterData.lineCode) {
        this.$modal.showToast('请先选择线体');
        return;
      }

      // 模拟API请求获取收料清单
      setTimeout(() => {
        // 模拟数据
        this.receiveList = [
          {
            materialName: '底漆-A',
            materialCode: 'MAT001',
            supplier: '供应商1',
            batchNo: 'BATCH001',
            waitingQuantity: 100
          },
          {
            materialName: '面漆-B',
            materialCode: 'MAT002',
            supplier: '供应商2',
            batchNo: 'BATCH002',
            waitingQuantity: 150
          },
          {
            materialName: '清漆-C',
            materialCode: 'MAT003',
            supplier: '供应商3',
            batchNo: 'BATCH003',
            waitingQuantity: 80
          }
        ];
      }, 500);
    },

    // 收料操作
    receiveMaterial(item) {
      uni.showModal({
        title: '收料确认',
        content: `确定要收 ${item.materialName} (${item.materialCode}) 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟收料API请求
            setTimeout(() => {
              this.$modal.showToast('收料成功');
              // 刷新收料清单
              this.getReceiveList();
            }, 500);
          }
        }
      });
    },

    // 退料操作
    returnMaterial(item) {
      uni.showModal({
        title: '退料确认',
        content: `确定要退 ${item.materialName} (${item.materialCode}) 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 模拟退料API请求
            setTimeout(() => {
              this.$modal.showToast('退料成功');
              // 刷新收料清单
              this.getReceiveList();
            }, 500);
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.header {
  text-align: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
}

.filter-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding: 10rpx 0;
  }

  .form-item {
    width: 100%;
  }

  .uni-forms-item__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
.btn-search {
  margin-top: 20rpx;
}

.list-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}
.list-header {
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 10rpx;
}
.list-header text {
  font-size: 32rpx;
  font-weight: bold;
}
.list-container {
  height: 500rpx;
}
.list-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}
.item-info {
  flex: 1;
}
.info-row {
  display: flex;
  margin-bottom: 10rpx;
}
.label {
  width: 120rpx;
  color: #999;
}
.value {
  flex: 1;
}
.item-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}
.empty-tip {
  text-align: center;
  padding: 40rpx 0;
  color: #999;
}
</style>