aiot-app/pages/pda/picking/components/pickWorkCard.vue

<template>
  <view>
    <checkbox-group
      v-for="(item, index) in list"
      :key="index"
      @change="(e) => selectVal(e, item, index)"
    >
      <label>
        <view class="card_box" @click="openDetails(item.status, item)">
          <view class="item_box rx-bc">
            <view class="rx-sc">
              <view class="round">{{ index + 1 }}</view>
              <view class="orderId">{{ item.code }} </view>
            </view>
            <view class="status" :class="[item.status != 0 ? 'FAA' : '']">
              {{
                item.status == 0
                  ? "未领料"
                  : item.status == 1
                  ? "领料中"
                  : item.status == 2
                  ? "已出库"
                  : ""
              }}</view
            >
          </view>

          <view class="item_box rx-bc">
            <view class="item_one rx-sc">
              <view class="lable">关联工单号：</view>
              <view>{{ item.joinWorkOrderCode }}</view>
            </view>
          </view>

          <view class="item_box rx-bc">
            <view class="item_one perce50 rx-sc">
              <view class="lable">领料人：</view>
              <view class="gylx">{{ item.executorName }}</view>
            </view>
            <view class="item_one perce50 rx-sc">
              <view>关联审核人：</view>
              <view class="gylx">{{ item.joinReviewerName }}</view>
            </view>
          </view>

          <view class="item_box rx-bc">
            <view class="item_one rx-sc">
              <view class="lable">领料仓库：</view>
              <view>{{ item.joinWarehouseName }}</view>
            </view>
          </view>

          <view class="item_box rx-bc">
            <view class="item_one rx-sc">
              <view class="lable">类型：</view>
              <view class="gylx" v-if="item.type == 1">自建领料</view>
              <view class="gylx" v-if="item.type == 2">工单领料</view>
              <view class="gylx" v-if="item.type == 3">委外领料</view>
            </view>
          </view>

          <view class="item_box rx-sc">
            <view class="item_one rx-sc">
              <view class="lable">领料时间：</view>
              <view>{{ item.createTime }}</view>
            </view>
          </view>
        </view>
      </label>
    </checkbox-group>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    return {
      statusList: {
        4: "待生产",
        5: "生产中",
        6: "已完成",
        7: "已延期",
        8: "待下达",
      },
    };
  },

  created() {
    console.log(this.list, "领料单数据");
  },

  methods: {
    selectVal(e, val, index) {
      this.list[index].checked = !this.list[index].checked;
    },

    openDetails(pickStatus, item) {
      if (pickStatus == 1 || pickStatus == 2) {
        let url = "/pages/pda/picking/bill/index";
        url += `?item=${JSON.stringify(item)}&status=${pickStatus}`;

        uni.navigateTo({
          url,
        });

        // let url = `/pages/pda/picking/bill/index?id=${id}&status=${pickStatus}`;
        // uni.navigateTo({
        //   url,
        // });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card_box {
  width: 750rpx;
  padding: 16rpx 24rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #e1e1e1;

  .item_box {
    margin-top: 10rpx;

    .round {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 20rpx;
      margin-right: 10px;
    }

    .orderId {
      color: #000;
      font-family: PingFang HK;
      font-size: 28rpx;
      font-style: normal;
      font-weight: 600;
      margin-left: 16rpx;
      margin-top: 8rpx;
    }

    .item_one {
      width: 100%;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 38rpx;
      word-wrap: break-word;
    }

    .gylx {
      color: $theme-color;
    }

    .perce50 {
      width: 50%;
    }

    .status {
      font-size: 26rpx;

      &.FAA {
        color: #ffa929;
      }
    }

    /deep/ .uni-checkbox-input-checked {
      background-color: $theme-color !important;
      border-color: $theme-color !important;
    }
  }
}
</style>