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

<template>
  <view class="card_box" @click="handleDetail">
    <view class="item_box rx-sc" v-if="item.workOrderType != 2">
      <view class="round" v-if="item.index">{{ item.index }}</view>
      <view class="orderId">{{ item.code }} </view>
    </view>

    <view class="item_box rx-sc" v-if="item.workOrderType == 2">
      <view class="round" v-if="item.index">{{ item.index }}</view>
      <view class="orderId">{{ item.outsourceCode }} </view>
    </view>

    <view class="item_box rx-bc" v-if="item.workOrderType == 2">
      <view class="item_one rx-sc">
        <view class="lable">委外名称：</view>
        <view>{{ item.outsourceName }}</view>
      </view>
    </view>

    <view class="item_box rx-bc" v-if="item.workOrderType == 2">
      <view class="item_one rx-sc">
        <view>工单来源：</view>
        <view>{{ item.code }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">产品编码：</view>
        <view>{{ item.productCode }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>名称：</view>
        <view>{{ item.productName }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">牌号：</view>
        <view>{{ item.brandNo }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>型号：</view>
        <view>{{ item.model }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">生产数量：</view>
        <view>{{ item.formingNum }} {{ item.unit }}</view>
      </view>
      <view class="item_one perce50 rx-sc">
        <view>生产重量：</view>
        <view>{{ item.formingWeight }} {{ item.weightUnit }}</view>
      </view>
    </view>

    <view class="item_box rx-bc">
      <view class="item_one perce50 rx-sc">
        <view>状态：</view>
        <view>{{ statusList[item.status] }}</view>
      </view>

      <view class="item_one perce50 rx-sc">
        <view>报工类型：</view>
        <view class="gylx">{{
          item.singleReport == 1 ? "单个报工" : "批量报工"
        }}</view>
      </view>
    </view>

    <view class="item_box rx-sc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">批次号：</view>
        <view class="gylx">{{ item.batchNo }}</view>
      </view>

      <view class="item_one perce50 rx-sc">
        <view class="lable">工艺路线：</view>
        <view class="gylx">{{ item.produceRoutingName }}</view>
      </view>
    </view>

    <view class="item_box rx-sc">
      <view class="item_one perce50 rx-sc">
        <view class="lable">生产编号：</view>
        <view class="gylx">{{ item.productionCodes }}</view>
      </view>

      <view class="item_one perce50 rx-sc">
        <view class="lable">当前工序：</view>
        <view class="gylx">{{ item.taskName }}</view>
      </view>
    </view>
  </view>
</template>

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

  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;
    }

    .gylx {
      color: $theme-color;
    }

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