aiot-app/pages/pda/entrust/selectGoods/selectGoods.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="选择在制品"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="list_box">
      <u-list>
        <u-list-item v-for="item in goodsList" :key="item.id">
          <view class="goods-item" :class="{ selected: isSelected(item) }">
            <view class="goods-checkbox">
              <checkbox
                :checked="isSelected(item)"
                @click.stop="toggleSelect(item)"
                color="#157A2C"
              />
            </view>
            <view class="goods-content" @click="toggleSelect(item)">
              <view class="goods-header">
                <text class="goods-name">{{ item.categoryName }}</text>
                <view class="goods-actions">
                  <text class="type-tag">{{
                    getTypeName(item.rootCategoryLevelId)
                  }}</text>
                </view>
              </view>

              <view class="goods-row">
                <text class="label">牌号:</text>
                <text class="value">{{ item.brandNum }}</text>
              </view>

              <view class="goods-row">
                <text class="label">批次号:</text>
                <text class="value">{{ item.batchNo }}</text>
              </view>

              <view class="goods-row">
                <text class="label">数量:</text>
                <text class="value"
                  >{{ item.quantity }}{{ item.measuringUnit }}</text
                >
              </view>

              <view class="goods-row">
                <text class="label">重量:</text>
                <text class="value"
                  >{{ item.weight }}{{ item.weightUnit }}</text
                >
              </view>

              <view class="goods-row">
                <text class="label">生产工单号:</text>
                <text class="value">{{ item.workOrderCode }}</text>
              </view>

              <view class="goods-row">
                <text class="label">规格:</text>
                <text class="value">{{ item.specification }}</text>
              </view>

              <view class="goods-row">
                <text class="label">型号:</text>
                <text class="value">{{ item.modelType }}</text>
              </view>

              <view class="goods-row">
                <text class="label">编码:</text>
                <text class="value">{{ item.categoryCode }}</text>
              </view>
            </view>
          </view>
        </u-list-item>

        <u-list-item v-if="goodsList.length === 0">
          <view class="empty-wrapper">
            <u-empty
              iconSize="150"
              textSize="32"
              text="暂无在制品数据"
            ></u-empty>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <!-- 底部按钮 -->
    <view class="footer-btns">
      <view class="footer-left">
        <checkbox
          :checked="isAllSelected"
          @click="toggleSelectAll"
          color="#157A2C"
        />
        <text class="select-all-text">全选</text>
      </view>
      <view class="footer-right">
        <u-button class="btn-cancel" @click="handleCancel">取消</u-button>
        <u-button type="success" class="btn-confirm" @click="handleConfirm"
          >确定({{ selectedList.length }})</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import { pleaseEntrustAllGoodsDetail } from "@/api/entrust/index";

export default {
  data() {
    return {
      id: "",
      goodsList: [],
      selectedList: [],
      existingGoods: [],
    };
  },

  computed: {
    isAllSelected() {
      return (
        this.goodsList.length > 0 &&
        this.selectedList.length === this.goodsList.length
      );
    },
  },

  onLoad(options) {
    this.id = options.id;
    if (options.existingIds) {
      try {
        this.existingGoods = JSON.parse(
          decodeURIComponent(options.existingIds),
        );
      } catch (e) {
        this.existingGoods = [];
      }
    }
    this.loadData();
  },

  methods: {
    async loadData() {
      try {
        const res = await pleaseEntrustAllGoodsDetail({ id: this.id });
        this.goodsList = res || [];

        // 预选已存在的在制品
        if (this.existingGoods.length > 0) {
          this.goodsList.forEach((item) => {
            if (this.existingGoods.some((exist) => exist.id === item.id)) {
              this.selectedList.push(item);
            }
          });
        }
      } catch (error) {
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      }
    },

    getTypeName(type) {
      const typeMap = {
        1: "物料",
        2: "在制品",
        3: "零部件",
        4: "生产设备",
        5: "模具",
        6: "备品备件",
        7: "周转车",
        8: "舟皿",
        9: "产品",
        10: "消耗材料",
        11: "干燥区",
        12: "质检",
        13: "包装材料",
        14: "生产辅助设备",
        15: "仪表计量设备",
        16: "办公设备",
        17: "客户",
        18: "房屋、建筑物",
        19: "供应商",
        20: "工装夹具",
        22: "工装夹具",
        23: "半成品",
        24: "会计科目",
        25: "费用类型",
        26: "周转盘",
        27: "文档",
        28: "废品",
        99: "其他",
      };
      return typeMap[type] || "";
    },

    isSelected(item) {
      return this.selectedList.some((selected) => selected.id === item.id);
    },

    toggleSelect(item) {
      const index = this.selectedList.findIndex(
        (selected) => selected.id === item.id,
      );
      if (index > -1) {
        this.selectedList.splice(index, 1);
      } else {
        this.selectedList.push(item);
      }
    },

    toggleSelectAll() {
      if (this.isAllSelected) {
        this.selectedList = [];
      } else {
        this.selectedList = [...this.goodsList];
      }
    },

    handleCancel() {
      uni.navigateBack();
    },

    handleConfirm() {
      if (this.selectedList.length === 0) {
        uni.showToast({
          title: "请至少选择一条在制品数据",
          icon: "none",
        });
        return;
      }

      // 通过页面栈传递数据
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2];
      if (prevPage && prevPage.$vm.receiveGoods) {
        prevPage.$vm.receiveGoods(this.selectedList);
      }

      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $page-bg;
}

.list_box {
  flex: 1;
  overflow: hidden;
  padding: 16rpx 0;
  padding-bottom: 120rpx;

  .u-list {
    height: 100% !important;
  }
}

.goods-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin: 0 24rpx 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border: 2rpx solid transparent;
  transition: all 0.3s;
  display: flex;
  gap: 16rpx;

  &.selected {
    border-color: $theme-color;
    background-color: rgba(21, 122, 44, 0.06);
  }

  .goods-checkbox {
    display: flex;
    align-items: flex-start;
    padding-top: 4rpx;
  }

  .goods-content {
    flex: 1;
  }

  .goods-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .goods-name {
      flex: 1;
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .goods-actions {
      display: flex;
      align-items: center;
      gap: 16rpx;

      .type-tag {
        display: inline-block;
        padding: 4rpx 16rpx;
        background-color: rgba(21, 122, 44, 0.1);
        color: $theme-color;
        border-radius: 4rpx;
        font-size: 24rpx;
      }

      .check-icon {
        width: 48rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        background-color: $theme-color;
        color: #fff;
        border-radius: 50%;
        font-size: 32rpx;
      }
    }
  }

  .goods-row {
    display: flex;
    margin-bottom: 16rpx;
    font-size: 28rpx;

    .label {
      color: #999;
      min-width: 200rpx;
    }

    .value {
      flex: 1;
      color: #333;
      word-break: break-all;
    }
  }
}

.empty-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25vh;
}

.footer-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx 32rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.08);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;

  .footer-left {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .select-all-text {
      font-size: 28rpx;
      color: #333;
    }
  }

  .footer-right {
    display: flex;
    gap: 20rpx;
  }

  /deep/ .u-button {
    min-width: 160rpx;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
  }

  .btn-cancel {
    background-color: #fff;
    color: #666;
    border: 1rpx solid #e0e0e0;
  }
}
</style>