aiot-app/pages/pda/outsourcing/components/workCard.vue

<template>
  <view class="card_box" @click="handleDetail">
    <view class="item_box rx-sc">
      <view class="round">{{ index + 1 }}</view>
      <view class="orderId">{{ item.code }} </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view class="lable">委外名称：</view>
        <view>{{ item.name }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view>委外单编码：</view>
        <view>{{ item.code }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view>工单编码：</view>
        <view>{{ item.workOrderCode }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view>委外工序：</view>
        <view class="gylx">{{ item.taskNames }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">委外数量：</view>
        <view class="gylx">{{ item.totalCount }}{{ item.measuringUnit }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>委外重量：</view>

        <view v-if="item.totalWeight" class="gylx">
          {{ item.totalWeight }}{{ item.weightUnit }}
        </view>
        <view v-else>无</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">委外类型：</view>
        <view v-if="item.type == 4" class="gylx">带料委外</view>
        <view v-if="item.type == 5" class="gylx">不带料委外</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view class="lable">批次号：</view>
        <view class="gylx">{{ item.batchNo }}</view>
      </view>
    </view>

    <view class="item_box rx-sc">
      <view class="item_one perce50 rx-sc">
        <view>委外场景：</view>
        <view v-if="item.outsourceScene == 2" class="gylx">单工序</view>
        <view v-if="item.outsourceScene == 3" class="gylx">多工序</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view class="lable">委外单位：</view>
        <view class="gylx">{{ item.supplierName }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">仓库：</view>
        <view class="gylx">{{ item.warehouseName }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>申请人：</view>
        <view class="gylx">{{ item.createUserName }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view>状态：</view>
        <view class="gylx">{{
          item.status == 0 ? "未提交" : item.status == 1 ? "已提交" : "已发布"
        }}</view>
      </view>

      <view class="item_one perce50 rx-sc">
        <view>委外状态：</view>
        <view v-if="item.purchaseStatus == 0" class="gylx">未入库</view>
        <view v-if="item.purchaseStatus == 1" class="gylx">原料入库</view>
        <view v-if="item.purchaseStatus == 3" class="gylx">委外完成</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view>委外发起工序：</view>
        <view class="gylx">{{ item.taskName }}</view>
      </view>

      <view class="item_one perce50 rx-sc">
        <view class="lable">审核状态：</view>
        <view v-if="item.approvalStatus == 0" class="gylx">未提交</view>
        <view v-if="item.approvalStatus == 1" class="gylx">审核中</view>
        <view v-if="item.approvalStatus == 2" class="gylx">审核通过</view>
        <view v-if="item.approvalStatus == 3" class="gylx">审核不通过</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view class="lable">创建时间：</view>
        <view>{{ item.createTime }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one rx-sc">
        <view class="lable">预计到货日期：</view>
        <view>{{ item.requireDeliveryTime }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },

    index: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
      statusList: {
        4: "待生产",
        5: "生产中",
        6: "已完成",
        7: "已延期",
        8: "待下达",
      },
    };
  },
  methods: {
    handleDetail() {
      this.$emit("handleDetail", this.item);
    },
  },
};
</script>

<style lang="scss" scoped>
.card_box {
  width: 750rpx;
  padding: 16rpx 32rpx;
  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;
    }

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

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

    .item-right {
      flex: 1;
    }

    .gylx {
      color: $theme-color;
    }

    .perce50 {
      width: 50%;
    }
  }
}
</style>